@charset "UTF-8";
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

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

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

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

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

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

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

h1, h2, h3, .hs-line .hs-line-link, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit; }
  h1 small,
  h1 .small, h2 small,
  h2 .small, h3 small, .hs-line .hs-line-link small,
  h3 .small,
  .hs-line .hs-line-link .small, h4 small,
  h4 .small, h5 small,
  h5 .small, h6 small,
  h6 .small,
  .h1 small,
  .h1 .small, .h2 small,
  .h2 .small, .h3 small,
  .h3 .small, .h4 small,
  .h4 .small, .h5 small,
  .h5 .small, .h6 small,
  .h6 .small {
    font-weight: 400;
    line-height: 1;
    color: #777777; }

h1, .h1,
h2, .h2, h3, .hs-line .hs-line-link, .h3 {
  margin-top: 20px;
  margin-bottom: 10px; }
  h1 small,
  h1 .small, .h1 small,
  .h1 .small,
  h2 small,
  h2 .small, .h2 small,
  .h2 .small, h3 small, .hs-line .hs-line-link small,
  h3 .small,
  .hs-line .hs-line-link .small, .h3 small,
  .h3 .small {
    font-size: 65%; }

h4, .h4,
h5, .h5,
h6, .h6 {
  margin-top: 10px;
  margin-bottom: 10px; }
  h4 small,
  h4 .small, .h4 small,
  .h4 .small,
  h5 small,
  h5 .small, .h5 small,
  .h5 .small,
  h6 small,
  h6 .small, .h6 small,
  .h6 .small {
    font-size: 75%; }

h1, .h1 {
  font-size: 36px; }

h2, .h2 {
  font-size: 30px; }

h3, .hs-line .hs-line-link, .h3 {
  font-size: 24px; }

h4, .h4 {
  font-size: 18px; }

h5, .h5 {
  font-size: 14px; }

h6, .h6 {
  font-size: 12px; }

p {
  margin: 0 0 10px; }

.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4; }
  @media (min-width: 768px) {
    .lead {
      font-size: 21px; } }

small,
.small {
  font-size: 85%; }

mark,
.mark {
  padding: .2em;
  background-color: #fcf8e3; }

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

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

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

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

.text-nowrap {
  white-space: nowrap; }

.text-lowercase {
  text-transform: lowercase; }

.text-uppercase, .initialism {
  text-transform: uppercase; }

.text-capitalize {
  text-transform: capitalize; }

.text-muted {
  color: #777777; }

.text-primary {
  color: #337ab7; }

a.text-primary:hover,
a.text-primary:focus {
  color: #286090; }

.text-success {
  color: #3c763d; }

a.text-success:hover,
a.text-success:focus {
  color: #2b542c; }

.text-info {
  color: #31708f; }

a.text-info:hover,
a.text-info:focus {
  color: #245269; }

.text-warning {
  color: #8a6d3b; }

a.text-warning:hover,
a.text-warning:focus {
  color: #66512c; }

.text-danger {
  color: #a94442; }

a.text-danger:hover,
a.text-danger:focus {
  color: #843534; }

.bg-primary {
  color: #fff; }

.bg-primary {
  background-color: #337ab7; }

a.bg-primary:hover,
a.bg-primary:focus {
  background-color: #286090; }

.bg-success {
  background-color: #dff0d8; }

a.bg-success:hover,
a.bg-success:focus {
  background-color: #c1e2b3; }

.bg-info {
  background-color: #d9edf7; }

a.bg-info:hover,
a.bg-info:focus {
  background-color: #afd9ee; }

.bg-warning {
  background-color: #fcf8e3; }

a.bg-warning:hover,
a.bg-warning:focus {
  background-color: #f7ecb5; }

.bg-danger {
  background-color: #f2dede; }

a.bg-danger:hover,
a.bg-danger:focus {
  background-color: #e4b9b9; }

.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eeeeee; }

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px; }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    margin-bottom: 0; }

.list-unstyled {
  padding-left: 0;
  list-style: none; }

.list-inline {
  padding-left: 0;
  list-style: none;
  margin-left: -5px; }
  .list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px; }

dl {
  margin-top: 0;
  margin-bottom: 20px; }

dt,
dd {
  line-height: 1.42857; }

dt {
  font-weight: 700; }

dd {
  margin-left: 0; }

.dl-horizontal dd:before, .dl-horizontal dd:after {
  display: table;
  content: " "; }

.dl-horizontal dd:after {
  clear: both; }

@media (min-width: 768px) {
  .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  .dl-horizontal dd {
    margin-left: 180px; } }

abbr[title],
abbr[data-original-title] {
  cursor: help; }

.initialism {
  font-size: 90%; }

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eeeeee; }
  blockquote p:last-child,
  blockquote ul:last-child,
  blockquote ol:last-child {
    margin-bottom: 0; }
  blockquote footer,
  blockquote small,
  blockquote .small {
    display: block;
    font-size: 80%;
    line-height: 1.42857;
    color: #777777; }
    blockquote footer:before,
    blockquote small:before,
    blockquote .small:before {
      content: "\2014 \00A0"; }

.blockquote-reverse,
blockquote.pull-right {
  padding-right: 15px;
  padding-left: 0;
  text-align: right;
  border-right: 5px solid #eeeeee;
  border-left: 0; }
  .blockquote-reverse footer:before,
  .blockquote-reverse small:before,
  .blockquote-reverse .small:before,
  blockquote.pull-right footer:before,
  blockquote.pull-right small:before,
  blockquote.pull-right .small:before {
    content: ""; }
  .blockquote-reverse footer:after,
  .blockquote-reverse small:after,
  .blockquote-reverse .small:after,
  blockquote.pull-right footer:after,
  blockquote.pull-right small:after,
  blockquote.pull-right .small:after {
    content: "\00A0 \2014"; }

address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857; }

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px; }
  .alert h4 {
    margin-top: 0;
    color: inherit; }
  .alert .alert-link {
    font-weight: bold; }
  .alert > p,
  .alert > ul {
    margin-bottom: 0; }
  .alert > p + p {
    margin-top: 5px; }

.alert-dismissable,
.alert-dismissible {
  padding-right: 35px; }
  .alert-dismissable .close,
  .alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit; }

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6; }
  .alert-success hr {
    border-top-color: #c9e2b3; }
  .alert-success .alert-link {
    color: #2b542c; }

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1; }
  .alert-info hr {
    border-top-color: #a6e1ec; }
  .alert-info .alert-link {
    color: #245269; }

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc; }
  .alert-warning hr {
    border-top-color: #f7e1b5; }
  .alert-warning .alert-link {
    color: #66512c; }

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1; }
  .alert-danger hr {
    border-top-color: #e4b9c0; }
  .alert-danger .alert-link {
    color: #843534; }

.list-group {
  padding-left: 0;
  margin-bottom: 20px; }

.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd; }
  .list-group-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; }
  .list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
    color: #777777;
    cursor: not-allowed;
    background-color: #eeeeee; }
    .list-group-item.disabled .list-group-item-heading, .list-group-item.disabled:hover .list-group-item-heading, .list-group-item.disabled:focus .list-group-item-heading {
      color: inherit; }
    .list-group-item.disabled .list-group-item-text, .list-group-item.disabled:hover .list-group-item-text, .list-group-item.disabled:focus .list-group-item-text {
      color: #777777; }
  .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7; }
    .list-group-item.active .list-group-item-heading,
    .list-group-item.active .list-group-item-heading > small,
    .list-group-item.active .list-group-item-heading > .small, .list-group-item.active:hover .list-group-item-heading,
    .list-group-item.active:hover .list-group-item-heading > small,
    .list-group-item.active:hover .list-group-item-heading > .small, .list-group-item.active:focus .list-group-item-heading,
    .list-group-item.active:focus .list-group-item-heading > small,
    .list-group-item.active:focus .list-group-item-heading > .small {
      color: inherit; }
    .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
      color: #c7ddef; }

a.list-group-item,
button.list-group-item {
  color: #555; }
  a.list-group-item .list-group-item-heading,
  button.list-group-item .list-group-item-heading {
    color: #333; }
  a.list-group-item:hover, a.list-group-item:focus,
  button.list-group-item:hover,
  button.list-group-item:focus {
    color: #555;
    text-decoration: none;
    background-color: #f5f5f5; }

button.list-group-item {
  width: 100%;
  text-align: left; }

.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8; }

a.list-group-item-success,
button.list-group-item-success {
  color: #3c763d; }
  a.list-group-item-success .list-group-item-heading,
  button.list-group-item-success .list-group-item-heading {
    color: inherit; }
  a.list-group-item-success:hover, a.list-group-item-success:focus,
  button.list-group-item-success:hover,
  button.list-group-item-success:focus {
    color: #3c763d;
    background-color: #d0e9c6; }
  a.list-group-item-success.active, a.list-group-item-success.active:hover, a.list-group-item-success.active:focus,
  button.list-group-item-success.active,
  button.list-group-item-success.active:hover,
  button.list-group-item-success.active:focus {
    color: #fff;
    background-color: #3c763d;
    border-color: #3c763d; }

.list-group-item-info {
  color: #31708f;
  background-color: #d9edf7; }

a.list-group-item-info,
button.list-group-item-info {
  color: #31708f; }
  a.list-group-item-info .list-group-item-heading,
  button.list-group-item-info .list-group-item-heading {
    color: inherit; }
  a.list-group-item-info:hover, a.list-group-item-info:focus,
  button.list-group-item-info:hover,
  button.list-group-item-info:focus {
    color: #31708f;
    background-color: #c4e3f3; }
  a.list-group-item-info.active, a.list-group-item-info.active:hover, a.list-group-item-info.active:focus,
  button.list-group-item-info.active,
  button.list-group-item-info.active:hover,
  button.list-group-item-info.active:focus {
    color: #fff;
    background-color: #31708f;
    border-color: #31708f; }

.list-group-item-warning {
  color: #8a6d3b;
  background-color: #fcf8e3; }

a.list-group-item-warning,
button.list-group-item-warning {
  color: #8a6d3b; }
  a.list-group-item-warning .list-group-item-heading,
  button.list-group-item-warning .list-group-item-heading {
    color: inherit; }
  a.list-group-item-warning:hover, a.list-group-item-warning:focus,
  button.list-group-item-warning:hover,
  button.list-group-item-warning:focus {
    color: #8a6d3b;
    background-color: #faf2cc; }
  a.list-group-item-warning.active, a.list-group-item-warning.active:hover, a.list-group-item-warning.active:focus,
  button.list-group-item-warning.active,
  button.list-group-item-warning.active:hover,
  button.list-group-item-warning.active:focus {
    color: #fff;
    background-color: #8a6d3b;
    border-color: #8a6d3b; }

.list-group-item-danger {
  color: #a94442;
  background-color: #f2dede; }

a.list-group-item-danger,
button.list-group-item-danger {
  color: #a94442; }
  a.list-group-item-danger .list-group-item-heading,
  button.list-group-item-danger .list-group-item-heading {
    color: inherit; }
  a.list-group-item-danger:hover, a.list-group-item-danger:focus,
  button.list-group-item-danger:hover,
  button.list-group-item-danger:focus {
    color: #a94442;
    background-color: #ebcccc; }
  a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-group-item-danger.active:focus,
  button.list-group-item-danger.active,
  button.list-group-item-danger.active:hover,
  button.list-group-item-danger.active:focus {
    color: #fff;
    background-color: #a94442;
    border-color: #a94442; }

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px; }

.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3; }

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  font-size: 12px;
  filter: alpha(opacity=0);
  opacity: 0; }
  .tooltip.in {
    filter: alpha(opacity=90);
    opacity: 0.9; }
  .tooltip.top {
    padding: 5px 0;
    margin-top: -3px; }
  .tooltip.right {
    padding: 0 5px;
    margin-left: 3px; }
  .tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px; }
  .tooltip.left {
    padding: 0 5px;
    margin-left: -3px; }
  .tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000; }
  .tooltip.top-left .tooltip-arrow {
    right: 5px;
    bottom: 0;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000; }
  .tooltip.top-right .tooltip-arrow {
    bottom: 0;
    left: 5px;
    margin-bottom: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000; }
  .tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000; }
  .tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000; }
  .tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000; }
  .tooltip.bottom-left .tooltip-arrow {
    top: 0;
    right: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000; }
  .tooltip.bottom-right .tooltip-arrow {
    top: 0;
    left: 5px;
    margin-top: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000; }

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px; }

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid; }

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 276px;
  padding: 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  font-size: 14px;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
  .popover.top {
    margin-top: -10px; }
  .popover.right {
    margin-left: 10px; }
  .popover.bottom {
    margin-top: 10px; }
  .popover.left {
    margin-left: -10px; }
  .popover > .arrow {
    border-width: 11px; }
    .popover > .arrow, .popover > .arrow:after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid; }
    .popover > .arrow:after {
      content: "";
      border-width: 10px; }
  .popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999999;
    border-top-color: rgba(0, 0, 0, 0.25);
    border-bottom-width: 0; }
    .popover.top > .arrow:after {
      bottom: 1px;
      margin-left: -10px;
      content: " ";
      border-top-color: #fff;
      border-bottom-width: 0; }
  .popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999999;
    border-right-color: rgba(0, 0, 0, 0.25);
    border-left-width: 0; }
    .popover.right > .arrow:after {
      bottom: -10px;
      left: 1px;
      content: " ";
      border-right-color: #fff;
      border-left-width: 0; }
  .popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999999;
    border-bottom-color: rgba(0, 0, 0, 0.25); }
    .popover.bottom > .arrow:after {
      top: 1px;
      margin-left: -10px;
      content: " ";
      border-top-width: 0;
      border-bottom-color: #fff; }
  .popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999999;
    border-left-color: rgba(0, 0, 0, 0.25); }
    .popover.left > .arrow:after {
      right: 1px;
      bottom: -10px;
      content: " ";
      border-right-width: 0;
      border-left-color: #fff; }

.popover-title {
  padding: 8px 14px;
  margin: 0;
  font-size: 14px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0; }

.popover-content {
  padding: 9px 14px; }

/************************************************************/
/* OIL-UI */
/************************************************************/
/************************************************************/
/* BREAKPOINTS */
/************************************************************/
/************************************************************/
/* SDX COLORS */
/************************************************************/
/************************************************************/
/* COLORS */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* TOGGLES */
/************************************************************/
.hs-hide {
  display: none; }

/************************************************************/
/* POINTER */
/************************************************************/
.hs-pointer, .hs-accordion .hs-accordion-footer .hs-accordion-footer-icon, .hs-button-primary, .hs-button-secondary, .hs-button-confirm, .hs-button-outline, .hs-collapsible .hs-collapsible-header, .hs-collapsible .hs-collapsible-icon, .hs-expandable .hs-expandable-footer, .hs-hint-incident, .hs-hint-change, .hs-hint-info, .hs-hint-system, .hs-line .hs-line-link, .hs-line .hs-line-collapse-icon, .hs-additional-lines .hs-additional-lines-toggle, .hs-product-add, .hs-product {
  cursor: pointer; }

/************************************************************/
/* SPACING */
/************************************************************/
.hs-margin-right-xsmall {
  margin-right: 5px; }

.hs-margin-left-xsmall {
  margin-left: 5px; }

.hs-margin-right-small {
  margin-right: 20px; }

.hs-margin-left-small {
  margin-left: 20px; }

.hs-margin-top-small {
  margin-top: 10px; }

.hs-margin-bottom-small {
  margin-bottom: 10px; }

.hs-margin-bottom-medium {
  margin-bottom: 20px; }

.hs-margin-top-large {
  margin-top: 50px; }

.hs-margin-bottom-large {
  margin-bottom: 30px; }
  .hs-margin-bottom-large[hs-channel="csu"] {
    margin-bottom: 20px; }

.hs-margin-top-medium {
  margin-top: 20px; }

.hs-padding-bottom-small {
  padding-bottom: 5px; }

.hs-padding-bottom-large {
  padding-bottom: 15px; }

.hs-padding-top-small {
  padding-top: 5px; }

.hs-padding-top-large {
  padding-top: 15px; }

.hs-no-margin {
  margin: 0 !important; }

.hs-padding-left-medium {
  padding-left: 15px; }

.hs-padding-right-15 {
  padding-right: 15px; }

.hs-table-cell-icon-only {
  margin-top: -5px;
  margin-bottom: -5px; }

/************************************************************/
/* FLOATS & ALIGNMENTS */
/************************************************************/
.hs-float-left {
  float: left; }

.hs-float-right {
  float: right; }

.hs-clearfix {
  clear: both; }
  .hs-clearfix:after {
    content: "";
    display: table;
    clear: both; }

.hs-align-left {
  text-align: left; }

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

.hs-text-overflow-ellipsis {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.hs-text-overflow-word-break {
  word-break: break-all; }

.hs-align-center {
  margin: 0 auto !important;
  display: block !important; }

/************************************************************/
/* DISPLAY */
/************************************************************/
.hs-max-width {
  width: 100%; }

.hs-display-flex {
  display: flex; }

.hs-display-inline-block {
  display: inline-block; }

/************************************************************/
/* COLOR CLASSES */
/************************************************************/
.hs-color-green {
  color: #25b252; }

.hs-color-orange {
  color: #ffcc00; }

.hs-color-red {
  color: #dd1122; }

.hs-color-grey {
  color: #666666; }

.hs-color-mid-grey {
  color: #A4A4A4; }

.hs-color-darkblue {
  color: #001155; }

.hs-color-sdx-orange {
  color: #e86416; }

/************************************************************/
/* BORDERS */
/************************************************************/
.border-top-grey, .hs-bill.hs-bill-header, .hs-bill-header.hs-bill-warning {
  border-top: 1px solid #A4A4A4; }

.border-bottom-grey, .hs-bill-group:not(:last-of-type), .flexbox .hs-product-drawer, .flexboxtweener .hs-product-drawer {
  border-bottom: 1px solid #A4A4A4; }

.border-bottom-lightgrey, .hs-table-body .hs-body-row, order-list-component .hs-table-body .hs-body-row {
  border-bottom: 1px solid #eef3f6; }

body[hs-channel="csu"], body[hs-channel="dmc"], body[hs-channel="dis"], .sg-content-page[hs-channel="csu"], .sg-content-page[hs-channel="dmc"], .sg-content-page[hs-channel="dis"] {
  background-image: url("../images/background.jpg");
  background-repeat: repeat-y; }

html, body {
  padding: 0;
  margin: 0; }

html:not([hs-channel="csu"]) {
  height: 100%; }

body {
  background-color: white; }
  body:not([hs-channel="csu"]) {
    min-height: 100%; }

.sg-content-page[hs-device="desktop"][hs-channel="online"] {
  min-height: 100%; }

* {
  box-sizing: border-box; }

*:focus {
  outline: none !important; }

a {
  color: #1781e3;
  text-decoration: none; }
  a.disabled {
    color: #666666; }
    a.disabled:hover, a.disabled:focus {
      text-decoration: none;
      pointer-events: none;
      cursor: default;
      color: #666666; }
  a:hover {
    text-decoration: underline;
    cursor: pointer; }
  a.hs-arrow:before, a.hs-arrow-secondary:before {
    content: ">\00a0"; }
  a.hs-arrow-back:before {
    content: "<\00a0"; }
  a.hs-arrow-secondary {
    color: #666666; }

ul {
  list-style: none;
  padding: 0; }

/*doc
---
title: Clearfix
name: 05-utilities-clearfix-01
category: Dev Utilities - Clearfix
---

<p>Easily clear floats by adding <code>.clearfix</code> to the parent element.</p>

```htmlmixed_no_preview
<div class="clearfix">...</div>
```

<p>Can also be used as a mixin.</p>

```css_no_preview
// Usage as a mixin
.element {
  @include clearfix;
}
```

*/
.clearfix::after {
  content: '';
  display: block;
  clear: both; }

/*doc
---
title: Margin
name: 05-utilities-margin-01
category: Dev Utilities - Margin
---

<p>Apply SDX conform margins to an element. The following margin options are available:</p>

<p>Margin on all 4 sides of the element:</p>

<ul class="list">
  <li>.margin-0</li>
  <li>.margin-1</li>
  <li>.margin-2</li>
  <li>.margin-3</li>
  <li>.margin-4</li>
</ul>

<p>Margin on the left and right side of the element:</p>

<ul class="list">
  <li>.margin-h-0</li>
  <li>.margin-h-1</li>
  <li>.margin-h-2</li>
  <li>.margin-h-3</li>
  <li>.margin-h-4</li>
</ul>

<p>Margin on the top and bottom side of the element:</p>

<ul class="list">
  <li>.margin-v-0</li>
  <li>.margin-v-1</li>
  <li>.margin-v-2</li>
  <li>.margin-v-3</li>
  <li>.margin-v-4</li>
</ul>

<p>Margin on the top of the element:</p>

<ul class="list">
  <li>.margin-top-0</li>
  <li>.margin-top-1</li>
  <li>.margin-top-2</li>
  <li>.margin-top-3</li>
  <li>.margin-top-4</li>
</ul>

<p>Margin on the bottom of the element:</p>

<ul class="list">
  <li>.margin-bottom-0</li>
  <li>.margin-bottom-1</li>
  <li>.margin-bottom-2</li>
  <li>.margin-bottom-3</li>
  <li>.margin-bottom-4</li>
</ul>

<p>Margin from a breakpoint and up, some examples:</p>

<ul class="list">
  <li>.margin-sm-0</li>
  <li>.margin-md-h-1</li>
  <li>.margin-lg-v-2</li>
  <li>.margin-xl-top-3</li>
  <li>.margin-ul-bottom-4</li>
</ul>

*/
@media (min-width: 0) {
  .margin-xs-0 {
    margin: 0px !important; }
  .margin-xs-1 {
    margin: 8px !important; }
  .margin-xs-2 {
    margin: 16px !important; }
  .margin-xs-3 {
    margin: 24px !important; }
  .margin-xs-4 {
    margin: 32px !important; }
  .margin-xs-top-0 {
    margin-top: 0px !important; }
  .margin-xs-top-1 {
    margin-top: 8px !important; }
  .margin-xs-top-2 {
    margin-top: 16px !important; }
  .margin-xs-top-3 {
    margin-top: 24px !important; }
  .margin-xs-top-4 {
    margin-top: 32px !important; }
  .margin-xs-bottom-0 {
    margin-bottom: 0px !important; }
  .margin-xs-bottom-1 {
    margin-bottom: 8px !important; }
  .margin-xs-bottom-2 {
    margin-bottom: 16px !important; }
  .margin-xs-bottom-3 {
    margin-bottom: 24px !important; }
  .margin-xs-bottom-4 {
    margin-bottom: 32px !important; }
  .margin-xs-h-0 {
    margin-left: 0px !important;
    margin-right: 0px !important; }
  .margin-xs-h-1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }
  .margin-xs-h-2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }
  .margin-xs-h-3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }
  .margin-xs-h-4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }
  .margin-xs-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }
  .margin-xs-v-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .margin-xs-v-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .margin-xs-v-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .margin-xs-v-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important; } }

@media (min-width: 480px) {
  .margin-sm-0 {
    margin: 0px !important; }
  .margin-sm-1 {
    margin: 8px !important; }
  .margin-sm-2 {
    margin: 16px !important; }
  .margin-sm-3 {
    margin: 24px !important; }
  .margin-sm-4 {
    margin: 32px !important; }
  .margin-sm-top-0 {
    margin-top: 0px !important; }
  .margin-sm-top-1 {
    margin-top: 8px !important; }
  .margin-sm-top-2 {
    margin-top: 16px !important; }
  .margin-sm-top-3 {
    margin-top: 24px !important; }
  .margin-sm-top-4 {
    margin-top: 32px !important; }
  .margin-sm-bottom-0 {
    margin-bottom: 0px !important; }
  .margin-sm-bottom-1 {
    margin-bottom: 8px !important; }
  .margin-sm-bottom-2 {
    margin-bottom: 16px !important; }
  .margin-sm-bottom-3 {
    margin-bottom: 24px !important; }
  .margin-sm-bottom-4 {
    margin-bottom: 32px !important; }
  .margin-sm-h-0 {
    margin-left: 0px !important;
    margin-right: 0px !important; }
  .margin-sm-h-1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }
  .margin-sm-h-2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }
  .margin-sm-h-3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }
  .margin-sm-h-4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }
  .margin-sm-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }
  .margin-sm-v-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .margin-sm-v-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .margin-sm-v-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .margin-sm-v-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important; } }

@media (min-width: 768px) {
  .margin-md-0 {
    margin: 0px !important; }
  .margin-md-1 {
    margin: 8px !important; }
  .margin-md-2 {
    margin: 16px !important; }
  .margin-md-3 {
    margin: 24px !important; }
  .margin-md-4 {
    margin: 32px !important; }
  .margin-md-top-0 {
    margin-top: 0px !important; }
  .margin-md-top-1 {
    margin-top: 8px !important; }
  .margin-md-top-2 {
    margin-top: 16px !important; }
  .margin-md-top-3 {
    margin-top: 24px !important; }
  .margin-md-top-4 {
    margin-top: 32px !important; }
  .margin-md-bottom-0 {
    margin-bottom: 0px !important; }
  .margin-md-bottom-1 {
    margin-bottom: 8px !important; }
  .margin-md-bottom-2 {
    margin-bottom: 16px !important; }
  .margin-md-bottom-3 {
    margin-bottom: 24px !important; }
  .margin-md-bottom-4 {
    margin-bottom: 32px !important; }
  .margin-md-h-0 {
    margin-left: 0px !important;
    margin-right: 0px !important; }
  .margin-md-h-1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }
  .margin-md-h-2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }
  .margin-md-h-3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }
  .margin-md-h-4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }
  .margin-md-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }
  .margin-md-v-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .margin-md-v-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .margin-md-v-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .margin-md-v-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important; } }

@media (min-width: 1024px) {
  .margin-lg-0 {
    margin: 0px !important; }
  .margin-lg-1 {
    margin: 8px !important; }
  .margin-lg-2 {
    margin: 16px !important; }
  .margin-lg-3 {
    margin: 24px !important; }
  .margin-lg-4 {
    margin: 32px !important; }
  .margin-lg-top-0 {
    margin-top: 0px !important; }
  .margin-lg-top-1 {
    margin-top: 8px !important; }
  .margin-lg-top-2 {
    margin-top: 16px !important; }
  .margin-lg-top-3 {
    margin-top: 24px !important; }
  .margin-lg-top-4 {
    margin-top: 32px !important; }
  .margin-lg-bottom-0 {
    margin-bottom: 0px !important; }
  .margin-lg-bottom-1 {
    margin-bottom: 8px !important; }
  .margin-lg-bottom-2 {
    margin-bottom: 16px !important; }
  .margin-lg-bottom-3 {
    margin-bottom: 24px !important; }
  .margin-lg-bottom-4 {
    margin-bottom: 32px !important; }
  .margin-lg-h-0 {
    margin-left: 0px !important;
    margin-right: 0px !important; }
  .margin-lg-h-1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }
  .margin-lg-h-2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }
  .margin-lg-h-3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }
  .margin-lg-h-4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }
  .margin-lg-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }
  .margin-lg-v-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .margin-lg-v-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .margin-lg-v-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .margin-lg-v-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important; } }

@media (min-width: 1280px) {
  .margin-xl-0 {
    margin: 0px !important; }
  .margin-xl-1 {
    margin: 8px !important; }
  .margin-xl-2 {
    margin: 16px !important; }
  .margin-xl-3 {
    margin: 24px !important; }
  .margin-xl-4 {
    margin: 32px !important; }
  .margin-xl-top-0 {
    margin-top: 0px !important; }
  .margin-xl-top-1 {
    margin-top: 8px !important; }
  .margin-xl-top-2 {
    margin-top: 16px !important; }
  .margin-xl-top-3 {
    margin-top: 24px !important; }
  .margin-xl-top-4 {
    margin-top: 32px !important; }
  .margin-xl-bottom-0 {
    margin-bottom: 0px !important; }
  .margin-xl-bottom-1 {
    margin-bottom: 8px !important; }
  .margin-xl-bottom-2 {
    margin-bottom: 16px !important; }
  .margin-xl-bottom-3 {
    margin-bottom: 24px !important; }
  .margin-xl-bottom-4 {
    margin-bottom: 32px !important; }
  .margin-xl-h-0 {
    margin-left: 0px !important;
    margin-right: 0px !important; }
  .margin-xl-h-1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }
  .margin-xl-h-2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }
  .margin-xl-h-3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }
  .margin-xl-h-4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }
  .margin-xl-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }
  .margin-xl-v-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .margin-xl-v-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .margin-xl-v-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .margin-xl-v-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important; } }

@media (min-width: 1440px) {
  .margin-ul-0 {
    margin: 0px !important; }
  .margin-ul-1 {
    margin: 8px !important; }
  .margin-ul-2 {
    margin: 16px !important; }
  .margin-ul-3 {
    margin: 24px !important; }
  .margin-ul-4 {
    margin: 32px !important; }
  .margin-ul-top-0 {
    margin-top: 0px !important; }
  .margin-ul-top-1 {
    margin-top: 8px !important; }
  .margin-ul-top-2 {
    margin-top: 16px !important; }
  .margin-ul-top-3 {
    margin-top: 24px !important; }
  .margin-ul-top-4 {
    margin-top: 32px !important; }
  .margin-ul-bottom-0 {
    margin-bottom: 0px !important; }
  .margin-ul-bottom-1 {
    margin-bottom: 8px !important; }
  .margin-ul-bottom-2 {
    margin-bottom: 16px !important; }
  .margin-ul-bottom-3 {
    margin-bottom: 24px !important; }
  .margin-ul-bottom-4 {
    margin-bottom: 32px !important; }
  .margin-ul-h-0 {
    margin-left: 0px !important;
    margin-right: 0px !important; }
  .margin-ul-h-1 {
    margin-left: 8px !important;
    margin-right: 8px !important; }
  .margin-ul-h-2 {
    margin-left: 16px !important;
    margin-right: 16px !important; }
  .margin-ul-h-3 {
    margin-left: 24px !important;
    margin-right: 24px !important; }
  .margin-ul-h-4 {
    margin-left: 32px !important;
    margin-right: 32px !important; }
  .margin-ul-v-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }
  .margin-ul-v-1 {
    margin-top: 8px !important;
    margin-bottom: 8px !important; }
  .margin-ul-v-2 {
    margin-top: 16px !important;
    margin-bottom: 16px !important; }
  .margin-ul-v-3 {
    margin-top: 24px !important;
    margin-bottom: 24px !important; }
  .margin-ul-v-4 {
    margin-top: 32px !important;
    margin-bottom: 32px !important; } }

.margin-0 {
  margin: 0px !important; }

.margin-1 {
  margin: 8px !important; }

.margin-2 {
  margin: 16px !important; }

.margin-3 {
  margin: 24px !important; }

.margin-4 {
  margin: 32px !important; }

.margin-top-0 {
  margin-top: 0px !important; }

.margin-top-1 {
  margin-top: 8px !important; }

.margin-top-2 {
  margin-top: 16px !important; }

.margin-top-3 {
  margin-top: 24px !important; }

.margin-top-4 {
  margin-top: 32px !important; }

.margin-bottom-0 {
  margin-bottom: 0px !important; }

.margin-bottom-1 {
  margin-bottom: 8px !important; }

.margin-bottom-2 {
  margin-bottom: 16px !important; }

.margin-bottom-3 {
  margin-bottom: 24px !important; }

.margin-bottom-4 {
  margin-bottom: 32px !important; }

.margin-h-0 {
  margin-left: 0px !important;
  margin-right: 0px !important; }

.margin-h-1 {
  margin-left: 8px !important;
  margin-right: 8px !important; }

.margin-h-2 {
  margin-left: 16px !important;
  margin-right: 16px !important; }

.margin-h-3 {
  margin-left: 24px !important;
  margin-right: 24px !important; }

.margin-h-4 {
  margin-left: 32px !important;
  margin-right: 32px !important; }

.margin-v-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important; }

.margin-v-1 {
  margin-top: 8px !important;
  margin-bottom: 8px !important; }

.margin-v-2 {
  margin-top: 16px !important;
  margin-bottom: 16px !important; }

.margin-v-3 {
  margin-top: 24px !important;
  margin-bottom: 24px !important; }

.margin-v-4 {
  margin-top: 32px !important;
  margin-bottom: 32px !important; }

/*doc
---
title: Padding
name: 05-utilities-padding-01
category: Dev Utilities - Padding
---

<p>Apply SDX conform paddings to an element. The following padding options are available:</p>

<p>Padding on all 4 sides of the element:</p>

<ul class="list">
  <li>.padding-0</li>
  <li>.padding-1</li>
  <li>.padding-2</li>
  <li>.padding-3</li>
  <li>.padding-4</li>
</ul>

<p>Padding on the left and right side of the element:</p>

<ul class="list">
  <li>.padding-h-0</li>
  <li>.padding-h-1</li>
  <li>.padding-h-2</li>
  <li>.padding-h-3</li>
  <li>.padding-h-4</li>
</ul>

<p>Padding on the top and bottom side of the element:

<ul class="list">
  <li>.padding-v-0</li>
  <li>.padding-v-1</li>
  <li>.padding-v-2</li>
  <li>.padding-v-3</li>
  <li>.padding-v-4</li>
</ul>

<p>Padding on the top of the element:</p>

<ul class="list">
  <li>.padding-top-0</li>
  <li>.padding-top-1</li>
  <li>.padding-top-2</li>
  <li>.padding-top-3</li>
  <li>.padding-top-4</li>
</ul>

<p>Padding on the bottom of the element:</p>

<ul class="list">
  <li>.padding-bottom-0</li>
  <li>.padding-bottom-1</li>
  <li>.padding-bottom-2</li>
  <li>.padding-bottom-3</li>
  <li>.padding-bottom-4</li>
</ul>

<p>Padding from a breakpoint and up, some examples:</p>

<ul class="list">
  <li>.padding-sm-0</li>
  <li>.padding-md-h-1</li>
  <li>.padding-lg-v-2</li>
  <li>.padding-xl-top-3</li>
  <li>.padding-ul-bottom-4</li>
</ul>

*/
@media (min-width: 0) {
  .padding-xs-0 {
    padding: 0px !important; }
  .padding-xs-1 {
    padding: 8px !important; }
  .padding-xs-2 {
    padding: 16px !important; }
  .padding-xs-3 {
    padding: 24px !important; }
  .padding-xs-4 {
    padding: 32px !important; }
  .padding-xs-top-0 {
    padding-top: 0px !important; }
  .padding-xs-top-1 {
    padding-top: 8px !important; }
  .padding-xs-top-2 {
    padding-top: 16px !important; }
  .padding-xs-top-3 {
    padding-top: 24px !important; }
  .padding-xs-top-4 {
    padding-top: 32px !important; }
  .padding-xs-bottom-0 {
    padding-bottom: 0px !important; }
  .padding-xs-bottom-1 {
    padding-bottom: 8px !important; }
  .padding-xs-bottom-2 {
    padding-bottom: 16px !important; }
  .padding-xs-bottom-3 {
    padding-bottom: 24px !important; }
  .padding-xs-bottom-4 {
    padding-bottom: 32px !important; }
  .padding-xs-h-0 {
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .padding-xs-h-1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }
  .padding-xs-h-2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }
  .padding-xs-h-3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }
  .padding-xs-h-4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }
  .padding-xs-v-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
  .padding-xs-v-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .padding-xs-v-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .padding-xs-v-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .padding-xs-v-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important; } }

@media (min-width: 480px) {
  .padding-sm-0 {
    padding: 0px !important; }
  .padding-sm-1 {
    padding: 8px !important; }
  .padding-sm-2 {
    padding: 16px !important; }
  .padding-sm-3 {
    padding: 24px !important; }
  .padding-sm-4 {
    padding: 32px !important; }
  .padding-sm-top-0 {
    padding-top: 0px !important; }
  .padding-sm-top-1 {
    padding-top: 8px !important; }
  .padding-sm-top-2 {
    padding-top: 16px !important; }
  .padding-sm-top-3 {
    padding-top: 24px !important; }
  .padding-sm-top-4 {
    padding-top: 32px !important; }
  .padding-sm-bottom-0 {
    padding-bottom: 0px !important; }
  .padding-sm-bottom-1 {
    padding-bottom: 8px !important; }
  .padding-sm-bottom-2 {
    padding-bottom: 16px !important; }
  .padding-sm-bottom-3 {
    padding-bottom: 24px !important; }
  .padding-sm-bottom-4 {
    padding-bottom: 32px !important; }
  .padding-sm-h-0 {
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .padding-sm-h-1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }
  .padding-sm-h-2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }
  .padding-sm-h-3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }
  .padding-sm-h-4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }
  .padding-sm-v-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
  .padding-sm-v-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .padding-sm-v-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .padding-sm-v-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .padding-sm-v-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important; } }

@media (min-width: 768px) {
  .padding-md-0 {
    padding: 0px !important; }
  .padding-md-1 {
    padding: 8px !important; }
  .padding-md-2 {
    padding: 16px !important; }
  .padding-md-3 {
    padding: 24px !important; }
  .padding-md-4 {
    padding: 32px !important; }
  .padding-md-top-0 {
    padding-top: 0px !important; }
  .padding-md-top-1 {
    padding-top: 8px !important; }
  .padding-md-top-2 {
    padding-top: 16px !important; }
  .padding-md-top-3 {
    padding-top: 24px !important; }
  .padding-md-top-4 {
    padding-top: 32px !important; }
  .padding-md-bottom-0 {
    padding-bottom: 0px !important; }
  .padding-md-bottom-1 {
    padding-bottom: 8px !important; }
  .padding-md-bottom-2 {
    padding-bottom: 16px !important; }
  .padding-md-bottom-3 {
    padding-bottom: 24px !important; }
  .padding-md-bottom-4 {
    padding-bottom: 32px !important; }
  .padding-md-h-0 {
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .padding-md-h-1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }
  .padding-md-h-2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }
  .padding-md-h-3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }
  .padding-md-h-4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }
  .padding-md-v-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
  .padding-md-v-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .padding-md-v-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .padding-md-v-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .padding-md-v-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important; } }

@media (min-width: 1024px) {
  .padding-lg-0 {
    padding: 0px !important; }
  .padding-lg-1 {
    padding: 8px !important; }
  .padding-lg-2 {
    padding: 16px !important; }
  .padding-lg-3 {
    padding: 24px !important; }
  .padding-lg-4 {
    padding: 32px !important; }
  .padding-lg-top-0 {
    padding-top: 0px !important; }
  .padding-lg-top-1 {
    padding-top: 8px !important; }
  .padding-lg-top-2 {
    padding-top: 16px !important; }
  .padding-lg-top-3 {
    padding-top: 24px !important; }
  .padding-lg-top-4 {
    padding-top: 32px !important; }
  .padding-lg-bottom-0 {
    padding-bottom: 0px !important; }
  .padding-lg-bottom-1 {
    padding-bottom: 8px !important; }
  .padding-lg-bottom-2 {
    padding-bottom: 16px !important; }
  .padding-lg-bottom-3 {
    padding-bottom: 24px !important; }
  .padding-lg-bottom-4 {
    padding-bottom: 32px !important; }
  .padding-lg-h-0 {
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .padding-lg-h-1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }
  .padding-lg-h-2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }
  .padding-lg-h-3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }
  .padding-lg-h-4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }
  .padding-lg-v-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
  .padding-lg-v-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .padding-lg-v-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .padding-lg-v-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .padding-lg-v-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important; } }

@media (min-width: 1280px) {
  .padding-xl-0 {
    padding: 0px !important; }
  .padding-xl-1 {
    padding: 8px !important; }
  .padding-xl-2 {
    padding: 16px !important; }
  .padding-xl-3 {
    padding: 24px !important; }
  .padding-xl-4 {
    padding: 32px !important; }
  .padding-xl-top-0 {
    padding-top: 0px !important; }
  .padding-xl-top-1 {
    padding-top: 8px !important; }
  .padding-xl-top-2 {
    padding-top: 16px !important; }
  .padding-xl-top-3 {
    padding-top: 24px !important; }
  .padding-xl-top-4 {
    padding-top: 32px !important; }
  .padding-xl-bottom-0 {
    padding-bottom: 0px !important; }
  .padding-xl-bottom-1 {
    padding-bottom: 8px !important; }
  .padding-xl-bottom-2 {
    padding-bottom: 16px !important; }
  .padding-xl-bottom-3 {
    padding-bottom: 24px !important; }
  .padding-xl-bottom-4 {
    padding-bottom: 32px !important; }
  .padding-xl-h-0 {
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .padding-xl-h-1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }
  .padding-xl-h-2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }
  .padding-xl-h-3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }
  .padding-xl-h-4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }
  .padding-xl-v-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
  .padding-xl-v-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .padding-xl-v-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .padding-xl-v-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .padding-xl-v-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important; } }

@media (min-width: 1440px) {
  .padding-ul-0 {
    padding: 0px !important; }
  .padding-ul-1 {
    padding: 8px !important; }
  .padding-ul-2 {
    padding: 16px !important; }
  .padding-ul-3 {
    padding: 24px !important; }
  .padding-ul-4 {
    padding: 32px !important; }
  .padding-ul-top-0 {
    padding-top: 0px !important; }
  .padding-ul-top-1 {
    padding-top: 8px !important; }
  .padding-ul-top-2 {
    padding-top: 16px !important; }
  .padding-ul-top-3 {
    padding-top: 24px !important; }
  .padding-ul-top-4 {
    padding-top: 32px !important; }
  .padding-ul-bottom-0 {
    padding-bottom: 0px !important; }
  .padding-ul-bottom-1 {
    padding-bottom: 8px !important; }
  .padding-ul-bottom-2 {
    padding-bottom: 16px !important; }
  .padding-ul-bottom-3 {
    padding-bottom: 24px !important; }
  .padding-ul-bottom-4 {
    padding-bottom: 32px !important; }
  .padding-ul-h-0 {
    padding-left: 0px !important;
    padding-right: 0px !important; }
  .padding-ul-h-1 {
    padding-left: 8px !important;
    padding-right: 8px !important; }
  .padding-ul-h-2 {
    padding-left: 16px !important;
    padding-right: 16px !important; }
  .padding-ul-h-3 {
    padding-left: 24px !important;
    padding-right: 24px !important; }
  .padding-ul-h-4 {
    padding-left: 32px !important;
    padding-right: 32px !important; }
  .padding-ul-v-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important; }
  .padding-ul-v-1 {
    padding-top: 8px !important;
    padding-bottom: 8px !important; }
  .padding-ul-v-2 {
    padding-top: 16px !important;
    padding-bottom: 16px !important; }
  .padding-ul-v-3 {
    padding-top: 24px !important;
    padding-bottom: 24px !important; }
  .padding-ul-v-4 {
    padding-top: 32px !important;
    padding-bottom: 32px !important; } }

.padding-0 {
  padding: 0px !important; }

.padding-1 {
  padding: 8px !important; }

.padding-2 {
  padding: 16px !important; }

.padding-3 {
  padding: 24px !important; }

.padding-4 {
  padding: 32px !important; }

.padding-top-0 {
  padding-top: 0px !important; }

.padding-top-1 {
  padding-top: 8px !important; }

.padding-top-2 {
  padding-top: 16px !important; }

.padding-top-3 {
  padding-top: 24px !important; }

.padding-top-4 {
  padding-top: 32px !important; }

.padding-bottom-0 {
  padding-bottom: 0px !important; }

.padding-bottom-1 {
  padding-bottom: 8px !important; }

.padding-bottom-2 {
  padding-bottom: 16px !important; }

.padding-bottom-3 {
  padding-bottom: 24px !important; }

.padding-bottom-4 {
  padding-bottom: 32px !important; }

.padding-h-0 {
  padding-left: 0px !important;
  padding-right: 0px !important; }

.padding-h-1 {
  padding-left: 8px !important;
  padding-right: 8px !important; }

.padding-h-2 {
  padding-left: 16px !important;
  padding-right: 16px !important; }

.padding-h-3 {
  padding-left: 24px !important;
  padding-right: 24px !important; }

.padding-h-4 {
  padding-left: 32px !important;
  padding-right: 32px !important; }

.padding-v-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important; }

.padding-v-1 {
  padding-top: 8px !important;
  padding-bottom: 8px !important; }

.padding-v-2 {
  padding-top: 16px !important;
  padding-bottom: 16px !important; }

.padding-v-3 {
  padding-top: 24px !important;
  padding-bottom: 24px !important; }

.padding-v-4 {
  padding-top: 32px !important;
  padding-bottom: 32px !important; }

.align-left {
  float: left !important; }

.align-right {
  float: right !important; }

.center-block {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: auto; }

.center-vertical {
  display: flex;
  align-items: center; }

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw; }

@media only screen and (max-width: 767px) {
  .full-width--mobile-only {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding-left: 12px;
    padding-right: 12px; } }

/*doc
---
title: Screen Readers
name: 05-utilities-screenreaders-01
category: Dev Utilities - Screen Readers
---

<p>Hide an element to all devices except screen readers with <code>.sr-only</code>.
Combine <code>.sr-only</code> with <code>.sr-only-focusable</code> to show the element again when it’s focused (e.g. by a keyboard-only user).</p>

```htmlmixed_no_preview
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
```

<p>Can also be used as a mixin.</p>

```css_no_preview
// Usage as a mixin
.skip-navigation {
  @include sr-only;
  @include sr-only-focusable;
}
```

*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto; }

/*doc
---
title: Text
name: 05-utilities-text-01
category: Dev Utilities - Text
---

<h3>Text alignment</h3>

<p>Easily realign text to components with text alignment classes.</p>

```htmlmixed_playground
<p class="text-align-left">Left aligned text on all viewport sizes.</p>
<p class="text-align-center">Center aligned text on all viewport sizes.</p>
<p class="text-align-right">Right aligned text on all viewport sizes.</p>
<p class="text-align-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
```

<h3>Text transformation</h3>

<p>Transform text in components with text capitalization classes.</p>

<p>Note how text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.</p>

```htmlmixed_playground
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">capiTaliZed text.</p>
```

<h3>Text truncate</h3>

<p>Trunctate texts using the CSS class <code>.text-truncate</code> (which adds an ellipsis).</p>

```htmlmixed_playground
<p class="text-truncate">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
```

<p>In cases where the CSS class <code>.text-truncate</code> does not work (because of <code>:before</code>), the Web Component <code>&lt;sdx-text-truncate /&gt;</code> can be used.</p>

```htmlmixed_playground
<p>
  <sdx-text-truncate>Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</sdx-text-truncate>
</p>
```

<h3>Maximum text width</h3>

<p>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.</p>

```htmlmixed_playground
<p class="text-recommended-max-width">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
```
*/
.text-align-left {
  text-align: left !important; }

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

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

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

.text-lowercase {
  text-transform: lowercase !important; }

.text-uppercase, .initialism {
  text-transform: uppercase !important; }

.text-capitalize {
  text-transform: capitalize !important; }

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.text-recommended-max-width {
  max-width: 700px; }

/*doc
---
title: Visibility
name: 06-utilities-visibility-01
category: Dev Utilities - Visibility
---

<h3>Invisible content</h3>

<p>The <code>.invisible</code> and <code>.visible</code> class can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.</p>

```htmlmixed
<p class="invisible">not visible</p>
<p class="visible">visible</p>
```

<h3>Responsive visibility</h3>

<p>For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p>

<ul class="list">
  <li>
    The <code>.hidden-*-up</code> classes hide the element when the viewport is at the given breakpoint or wider. For example, <code>.hidden-md-up</code> hides an element on medium, large, and extra-large viewports.
  </li>
  <li>
    The <code>.hidden-*-down</code> classes hide the element when the viewport is at the given breakpoint or smaller. For example, <code>.hidden-md-down</code> hides an element on extra-small, small, and medium viewports.
  </li>
  <li>
    You can combine one <code>.hidden-*-up</code> class with one <code>.hidden-*-down</code> class to show an element only on a given interval of screen sizes. For example, <code>.hidden-sm-down.hidden-xl-up</code> shows the element only on medium and large viewports. Using multiple <code>.hidden-*-up</code> classes or multiple <code>.hidden-*-down</code> classes is redundant and pointless.
  </li>
</ul>

<p>If you want to go for specific devices (phone, tablet or desktop) use the device specific classes instead of the breakpoint specific classes:</p>

<ul class="list">
  <li>
    Phone: <code>.hidden-phone-up</code> or <code>.hidden-phone-down</code>
  </li>
  <li>
    Tablet: <code>.hidden-tablet-up</code> or <code>.hidden-tablet-down</code>
  </li>
  <li>
    Desktop: <code>.hidden-desktop-up</code> or <code>.hidden-desktop-down</code>
  </li>
</ul>

*/
.visible {
  visibility: visible !important; }

.invisible {
  visibility: hidden !important; }

.hide,
.hidden {
  display: none !important; }

.show {
  display: block !important; }

@media (min-width: 0) {
  .hidden-xs-up {
    display: none !important; } }

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

@media (min-width: 0) {
  .visible-xs-up {
    display: block !important; } }

@media (min-width: 480px) {
  .hidden-sm-up {
    display: none !important; } }

@media (max-width: 767px) {
  .hidden-sm-down {
    display: none !important; } }

@media (min-width: 480px) {
  .visible-sm-up {
    display: block !important; } }

@media (min-width: 768px) {
  .hidden-md-up {
    display: none !important; } }

@media (max-width: 1023px) {
  .hidden-md-down {
    display: none !important; } }

@media (min-width: 768px) {
  .visible-md-up {
    display: block !important; } }

@media (min-width: 1024px) {
  .hidden-lg-up {
    display: none !important; } }

@media (max-width: 1279px) {
  .hidden-lg-down {
    display: none !important; } }

@media (min-width: 1024px) {
  .visible-lg-up {
    display: block !important; } }

@media (min-width: 1280px) {
  .hidden-xl-up {
    display: none !important; } }

@media (max-width: 1439px) {
  .hidden-xl-down {
    display: none !important; } }

@media (min-width: 1280px) {
  .visible-xl-up {
    display: block !important; } }

@media (min-width: 1440px) {
  .hidden-ul-up {
    display: none !important; } }

.hidden-ul-down {
  display: none !important; }

@media (min-width: 1440px) {
  .visible-ul-up {
    display: block !important; } }

@media (min-width: 0) {
  .hidden-phone-up {
    display: none !important; } }

@media (max-width: 767px) {
  .hidden-phone-down {
    display: none !important; } }

@media (min-width: 768px) {
  .hidden-tablet-up {
    display: none !important; } }

@media (max-width: 1023px) {
  .hidden-tablet-down {
    display: none !important; } }

@media (min-width: 1024px) {
  .hidden-desktop-up {
    display: none !important; } }

@media (max-width: 1279px) {
  .hidden-desktop-down {
    display: none !important; } }

@media (min-width: 0) {
  .visible-phone-up {
    display: block !important; } }

@media (min-width: 768px) {
  .visible-tablet-up {
    display: block !important; } }

@media (min-width: 1024px) {
  .visible-desktop-up {
    display: block !important; } }

@-webkit-keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade-in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@-webkit-keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes fade-in-from-none {
  0% {
    display: none;
    opacity: 0; }
  .001% {
    display: block;
    opacity: 0; }
  100% {
    display: block;
    opacity: 1; } }

@keyframes fade-in-from-none {
  0% {
    display: none;
    opacity: 0; }
  .001% {
    display: block;
    opacity: 0; }
  100% {
    display: block;
    opacity: 1; } }

@-webkit-keyframes fade-out-to-none {
  0% {
    display: block;
    opacity: 1; }
  99.999% {
    display: block;
    opacity: 0; }
  100% {
    display: none;
    opacity: 0; } }

@keyframes fade-out-to-none {
  0% {
    display: block;
    opacity: 1; }
  99.999% {
    display: block;
    opacity: 0; }
  100% {
    display: none;
    opacity: 0; } }

@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
---

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


```section_design
```

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

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

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

  <h2>Rules</h2>

  <h3>Icon grid</h3>

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

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

  <h3>Trim container</h3>

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

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

  <h3>Minimum size</h3>

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

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

  <h3>Maximum size</h3>

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

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

  <h3>Available sizes</h3>

  <p>Icons are offered in six different sizes.</p>

  <p>
    <div class="row text-align-center flex-items-xs-bottom">
      <div class="col-xs-2">
        <sdx-icon icon-name="icon-heart" size="6"></sdx-icon>
        <br>
        <span class="fig-caption">56x56px</span>
      </div>
      <div class="col-xs-2">
        <sdx-icon icon-name="icon-heart" size="5"></sdx-icon>
        <br>
        <span class="fig-caption">48x48px</span>
      </div>
      <div class="col-xs-2">
        <sdx-icon icon-name="icon-heart" size="4"></sdx-icon>
        <br>
        <span class="fig-caption">40x40px</span>
      </div>
      <div class="col-xs-2">
        <sdx-icon icon-name="icon-heart" size="3"></sdx-icon>
        <br>
        <span class="fig-caption">32x32px</span>
      </div>
      <div class="col-xs-2">
        <sdx-icon icon-name="icon-heart" size="2"></sdx-icon>
        <br>
        <span class="fig-caption">24x24px</span>
      </div>
      <div class="col-xs-2">
        <sdx-icon icon-name="icon-heart" size="1"></sdx-icon>
        <br>
        <span class="fig-caption">16x16px</span>
      </div>
    </div>
  </p>

  <h3>Scaling icons</h3>

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

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

  <h3>Relative alignment</h3>

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

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

  <h3>Minimum spacing</h3>

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

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

  <h3>Using colour</h3>

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

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

  <h3>Buttons</h3>

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

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

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

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

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


```section_develop
```

```htmlmixed_webcomponent_sdx-icon_accessible
<sdx-icon icon-name="icon-account" sr-hint="Displays the user account"></sdx-icon>
```
<h2 id="sdx_icons">Available Icons</h2>

<div class="row icons">
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-account icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-account<br/>
      Sass: icon-char('account');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-arrow-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-arrow-down<br/>
      Sass: icon-char('arrow-down');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-arrow-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-arrow-left<br/>
      Sass: icon-char('arrow-left');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-arrow-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-arrow-right<br/>
      Sass: icon-char('arrow-right');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-arrow-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-arrow-up<br/>
      Sass: icon-char('arrow-up');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-attachment icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-attachment<br/>
      Sass: icon-char('attachment');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-backup icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-backup<br/>
      Sass: icon-char('backup');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bin icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bin<br/>
      Sass: icon-char('bin');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-calendar icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-calendar<br/>
      Sass: icon-char('calendar');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cancel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cancel<br/>
      Sass: icon-char('cancel');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-check-mark icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-check-mark<br/>
      Sass: icon-char('check-mark');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-check-mark-2-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-check-mark-2-circle<br/>
      Sass: icon-char('check-mark-2-circle');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-normal-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-normal-down<br/>
      Sass: icon-char('chevron-normal-down');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-normal-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-normal-left<br/>
      Sass: icon-char('chevron-normal-left');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-normal-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-normal-right<br/>
      Sass: icon-char('chevron-normal-right');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-normal-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-normal-up<br/>
      Sass: icon-char('chevron-normal-up');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-flat-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-flat-down<br/>
      Sass: icon-char('chevron-flat-down');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-flat-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-flat-left<br/>
      Sass: icon-char('chevron-flat-left');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-flat-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-flat-right<br/>
      Sass: icon-char('chevron-flat-right');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-flat-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-flat-up<br/>
      Sass: icon-char('chevron-flat-up');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-clock icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-clock<br/>
      Sass: icon-char('clock');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-close icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-close<br/>
      Sass: icon-char('close');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-download icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-download<br/>
      Sass: icon-char('download');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-download-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-download-cloud<br/>
      Sass: icon-char('download-cloud');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-edit icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-edit<br/>
      Sass: icon-char('edit');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-exclamation-mark-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-exclamation-mark-circle<br/>
      Sass: icon-char('exclamation-mark-circle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-flag icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-flag<br/>
      Sass: icon-char('flag');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-folder-new icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-folder-new<br/>
      Sass: icon-char('folder-new');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-folder-video icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-folder-video<br/>
      Sass: icon-char('folder-video');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-forward icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-forward<br/>
      Sass: icon-char('forward');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-forward-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-forward-filled<br/>
      Sass: icon-char('forward-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-forward-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-forward-message<br/>
      Sass: icon-char('forward-message');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-forward-message-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-forward-message-2<br/>
      Sass: icon-char('forward-message-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fullscreen-enter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fullscreen-enter<br/>
      Sass: icon-char('fullscreen-enter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fullscreen-enter-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fullscreen-enter-2<br/>
      Sass: icon-char('fullscreen-enter-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fullscreen-leave icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fullscreen-leave<br/>
      Sass: icon-char('fullscreen-leave');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fullscreen-leave-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fullscreen-leave-2<br/>
      Sass: icon-char('fullscreen-leave-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-go-to-end icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-go-to-end<br/>
      Sass: icon-char('go-to-end');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-go-to-end-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-go-to-end-filled<br/>
      Sass: icon-char('go-to-end-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-go-to-start icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-go-to-start<br/>
      Sass: icon-char('go-to-start');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-go-to-start-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-go-to-start-filled<br/>
      Sass: icon-char('go-to-start-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-group icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-group<br/>
      Sass: icon-char('group');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-heart icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-heart<br/>
      Sass: icon-char('heart');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-home icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-home<br/>
      Sass: icon-char('home');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hourglass icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hourglass<br/>
      Sass: icon-char('hourglass');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-information-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-information-circle<br/>
      Sass: icon-char('information-circle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-key icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-key<br/>
      Sass: icon-char('key');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-link icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-link<br/>
      Sass: icon-char('link');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-lock icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-lock<br/>
      Sass: icon-char('lock');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-menu icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-menu<br/>
      Sass: icon-char('menu');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-message<br/>
      Sass: icon-char('message');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-minus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-minus<br/>
      Sass: icon-char('minus');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-more icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-more<br/>
      Sass: icon-char('more');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-new icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-new<br/>
      Sass: icon-char('new');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-okay icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-okay<br/>
      Sass: icon-char('okay');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-pause icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-pause<br/>
      Sass: icon-char('pause');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-pause-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-pause-filled<br/>
      Sass: icon-char('pause-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-person icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-person<br/>
      Sass: icon-char('person');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-play icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-play<br/>
      Sass: icon-char('play');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-play-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-play-filled<br/>
      Sass: icon-char('play-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-plus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-plus<br/>
      Sass: icon-char('plus');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-question-mark-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-question-mark-circle<br/>
      Sass: icon-char('question-mark-circle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-record icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-record<br/>
      Sass: icon-char('record');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-record-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-record-filled<br/>
      Sass: icon-char('record-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-rename icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-rename<br/>
      Sass: icon-char('rename');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-replay icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-replay<br/>
      Sass: icon-char('replay');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-reply-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-reply-message<br/>
      Sass: icon-char('reply-message');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-reply-message-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-reply-message-2<br/>
      Sass: icon-char('reply-message-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-reply-message-all icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-reply-message-all<br/>
      Sass: icon-char('reply-message-all');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-reply-message-all-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-reply-message-all-2<br/>
      Sass: icon-char('reply-message-all-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-retry icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-retry<br/>
      Sass: icon-char('retry');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-rewind icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-rewind<br/>
      Sass: icon-char('rewind');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-rewind-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-rewind-filled<br/>
      Sass: icon-char('rewind-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-save icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-save<br/>
      Sass: icon-char('save');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-save-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-save-2<br/>
      Sass: icon-char('save-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-save-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-save-3<br/>
      Sass: icon-char('save-3');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-search icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-search<br/>
      Sass: icon-char('search');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-settings icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-settings<br/>
      Sass: icon-char('settings');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-shopping-trolley icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-shopping-trolley<br/>
      Sass: icon-char('shopping-trolley');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-speech-bubble icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-speech-bubble<br/>
      Sass: icon-char('speech-bubble');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-standby icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-standby<br/>
      Sass: icon-char('standby');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-star icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-star<br/>
      Sass: icon-char('star');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-stop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-stop<br/>
      Sass: icon-char('stop');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-stop-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-stop-filled<br/>
      Sass: icon-char('stop-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-synchronise icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-synchronise<br/>
      Sass: icon-char('synchronise');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-thumb-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-thumb-up<br/>
      Sass: icon-char('thumb-up');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-upload icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-upload<br/>
      Sass: icon-char('upload');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-upload-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-upload-cloud<br/>
      Sass: icon-char('upload-cloud');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-volume-fortissimo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-volume-fortissimo<br/>
      Sass: icon-char('volume-fortissimo');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-volume-forte icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-volume-forte<br/>
      Sass: icon-char('volume-forte');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-volume-piano icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-volume-piano<br/>
      Sass: icon-char('volume-piano');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-volume-pianissimo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-volume-pianissimo<br/>
      Sass: icon-char('volume-pianissimo');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-volume-mute icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-volume-mute<br/>
      Sass: icon-char('volume-mute');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-warning icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-warning<br/>
      Sass: icon-char('warning');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-zoom-in icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-zoom-in<br/>
      Sass: icon-char('zoom-in');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-zoom-out icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-zoom-out<br/>
      Sass: icon-char('zoom-out');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-suitcase icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-suitcase<br/>
      Sass: icon-char('suitcase');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ambulance icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ambulance<br/>
      Sass: icon-char('ambulance');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ambulance-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ambulance-2<br/>
      Sass: icon-char('ambulance-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-van icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-van<br/>
      Sass: icon-char('van');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-delivery icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-delivery<br/>
      Sass: icon-char('delivery');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-delivery-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-delivery-2<br/>
      Sass: icon-char('delivery-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-applications icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-applications<br/>
      Sass: icon-char('applications');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-assistant icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-assistant<br/>
      Sass: icon-char('assistant');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-call-centre icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-call-centre<br/>
      Sass: icon-char('call-centre');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bill icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bill<br/>
      Sass: icon-char('bill');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-child-protection icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-child-protection<br/>
      Sass: icon-char('child-protection');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-coins icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-coins<br/>
      Sass: icon-char('coins');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-compass icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-compass<br/>
      Sass: icon-char('compass');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-phone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-phone<br/>
      Sass: icon-char('mobile-phone');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-smartphone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-smartphone<br/>
      Sass: icon-char('smartphone');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tablet icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tablet<br/>
      Sass: icon-char('tablet');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-laptop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-laptop<br/>
      Sass: icon-char('laptop');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-computer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-computer<br/>
      Sass: icon-char('computer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-workstation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-workstation<br/>
      Sass: icon-char('workstation');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-credit-card icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-credit-card<br/>
      Sass: icon-char('credit-card');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-directory icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-directory<br/>
      Sass: icon-char('directory');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document<br/>
      Sass: icon-char('document');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-new icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-new<br/>
      Sass: icon-char('document-new');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-excel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-excel<br/>
      Sass: icon-char('document-excel');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-powerpoint icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-powerpoint<br/>
      Sass: icon-char('document-powerpoint');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-word icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-word<br/>
      Sass: icon-char('document-word');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-pdf icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-pdf<br/>
      Sass: icon-char('document-pdf');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-txt icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-txt<br/>
      Sass: icon-char('document-txt');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-zip icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-zip<br/>
      Sass: icon-char('document-zip');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-code icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-code<br/>
      Sass: icon-char('document-code');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-e-mail icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-e-mail<br/>
      Sass: icon-char('e-mail');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-film-camera icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-film-camera<br/>
      Sass: icon-char('film-camera');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-film-camera-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-film-camera-2<br/>
      Sass: icon-char('film-camera-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-film-camera-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-film-camera-3<br/>
      Sass: icon-char('film-camera-3');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-film-reel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-film-reel<br/>
      Sass: icon-char('film-reel');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-folder icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-folder<br/>
      Sass: icon-char('folder');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-football icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-football<br/>
      Sass: icon-char('football');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-game icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-game<br/>
      Sass: icon-char('game');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-gaming icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-gaming<br/>
      Sass: icon-char('gaming');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-globe icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-globe<br/>
      Sass: icon-char('globe');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-handset icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-handset<br/>
      Sass: icon-char('handset');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-headphone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-headphone<br/>
      Sass: icon-char('headphone');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-headset icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-headset<br/>
      Sass: icon-char('headset');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-index-card icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-index-card<br/>
      Sass: icon-char('index-card');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-leaf icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-leaf<br/>
      Sass: icon-char('leaf');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-lifesaver icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-lifesaver<br/>
      Sass: icon-char('lifesaver');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-modem-wlan icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-modem-wlan<br/>
      Sass: icon-char('modem-wlan');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-movie icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-movie<br/>
      Sass: icon-char('movie');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-movie-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-movie-2<br/>
      Sass: icon-char('movie-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-movie-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-movie-3<br/>
      Sass: icon-char('movie-3');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-svod icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-svod<br/>
      Sass: icon-char('svod');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-music icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-music<br/>
      Sass: icon-char('music');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-navigation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-navigation<br/>
      Sass: icon-char('navigation');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-network<br/>
      Sass: icon-char('network');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-office icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-office<br/>
      Sass: icon-char('office');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-phone-basic icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-phone-basic<br/>
      Sass: icon-char('phone-basic');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-phone-pro icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-phone-pro<br/>
      Sass: icon-char('phone-pro');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-photo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-photo<br/>
      Sass: icon-char('photo');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-photo-camera icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-photo-camera<br/>
      Sass: icon-char('photo-camera');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-postcard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-postcard<br/>
      Sass: icon-char('postcard');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-printer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-printer<br/>
      Sass: icon-char('printer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-radio icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-radio<br/>
      Sass: icon-char('radio');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-rss-feed icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-rss-feed<br/>
      Sass: icon-char('rss-feed');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wlan icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wlan<br/>
      Sass: icon-char('wlan');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-signal icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-signal<br/>
      Sass: icon-char('signal');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-server icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-server<br/>
      Sass: icon-char('server');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sms icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sms<br/>
      Sass: icon-char('sms');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-translation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-translation<br/>
      Sass: icon-char('translation');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-transmitter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-transmitter<br/>
      Sass: icon-char('transmitter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tv icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tv<br/>
      Sass: icon-char('tv');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tv-hd icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tv-hd<br/>
      Sass: icon-char('tv-hd');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tv-2-0 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tv-2-0<br/>
      Sass: icon-char('tv-2-0');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-video-tape icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-video-tape<br/>
      Sass: icon-char('video-tape');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-video-tape-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-video-tape-2<br/>
      Sass: icon-char('video-tape-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wearable-watch icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wearable-watch<br/>
      Sass: icon-char('wearable-watch');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-cloud<br/>
      Sass: icon-char('weather-cloud');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-rain icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-rain<br/>
      Sass: icon-char('weather-rain');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-rain-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-rain-unsettled<br/>
      Sass: icon-char('weather-rain-unsettled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-snow icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-snow<br/>
      Sass: icon-char('weather-snow');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-snow-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-snow-unsettled<br/>
      Sass: icon-char('weather-snow-unsettled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-storm icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-storm<br/>
      Sass: icon-char('weather-storm');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-storm-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-storm-unsettled<br/>
      Sass: icon-char('weather-storm-unsettled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-sun icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-sun<br/>
      Sass: icon-char('weather-sun');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-weather-sun-unsettled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-weather-sun-unsettled<br/>
      Sass: icon-char('weather-sun-unsettled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-inbox-1 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-inbox-1<br/>
      Sass: icon-char('inbox-1');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-drafts-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-drafts-3<br/>
      Sass: icon-char('drafts-3');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sent-6 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sent-6<br/>
      Sass: icon-char('sent-6');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sent-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sent-2<br/>
      Sass: icon-char('sent-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-inbox-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-inbox-2<br/>
      Sass: icon-char('inbox-2');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-drafts icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-drafts<br/>
      Sass: icon-char('drafts');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sent icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sent<br/>
      Sass: icon-char('sent');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sent-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sent-3<br/>
      Sass: icon-char('sent-3');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-inbox-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-inbox-3<br/>
      Sass: icon-char('inbox-3');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-drafts-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-drafts-2<br/>
      Sass: icon-char('drafts-2');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sent-5 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sent-5<br/>
      Sass: icon-char('sent-5');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sent-4 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sent-4<br/>
      Sass: icon-char('sent-4');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-website icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-website<br/>
      Sass: icon-char('website');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-website-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-website-2<br/>
      Sass: icon-char('website-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-heart-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-heart-filled<br/>
      Sass: icon-char('heart-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-exclamation-mark icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-exclamation-mark<br/>
      Sass: icon-char('exclamation-mark');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-share icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-share<br/>
      Sass: icon-char('share');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-small-down icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-small-down<br/>
      Sass: icon-char('chevron-small-down');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-small-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-small-up<br/>
      Sass: icon-char('chevron-small-up');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-small-left icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-small-left<br/>
      Sass: icon-char('chevron-small-left');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chevron-small-right icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chevron-small-right<br/>
      Sass: icon-char('chevron-small-right');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-clear-circle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-clear-circle<br/>
      Sass: icon-char('clear-circle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-server icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-server<br/>
      Sass: icon-char('server');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cd icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cd<br/>
      Sass: icon-char('cd');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bundle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bundle<br/>
      Sass: icon-char('bundle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-database icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-database<br/>
      Sass: icon-char('database');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-firewall icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-firewall<br/>
      Sass: icon-char('firewall');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-proxy-server icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-proxy-server<br/>
      Sass: icon-char('proxy-server');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-set-top-box icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-set-top-box<br/>
      Sass: icon-char('set-top-box');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-puzzle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-puzzle<br/>
      Sass: icon-char('puzzle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-skull icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-skull<br/>
      Sass: icon-char('skull');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fire icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fire<br/>
      Sass: icon-char('fire');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-setting icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-setting<br/>
      Sass: icon-char('setting');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-present icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-present<br/>
      Sass: icon-char('present');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-certificate icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-certificate<br/>
      Sass: icon-char('certificate');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-waypointer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-waypointer<br/>
      Sass: icon-char('waypointer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-eye icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-eye<br/>
      Sass: icon-char('eye');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-eye-shut icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-eye-shut<br/>
      Sass: icon-char('eye-shut');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-runtime icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-runtime<br/>
      Sass: icon-char('runtime');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-list icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-list<br/>
      Sass: icon-char('list');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-topology icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-topology<br/>
      Sass: icon-char('topology');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-blueprint icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-blueprint<br/>
      Sass: icon-char('blueprint');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-map-pointer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-map-pointer<br/>
      Sass: icon-char('map-pointer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-console icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-console<br/>
      Sass: icon-char('console');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-reboot icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-reboot<br/>
      Sass: icon-char('reboot');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-reprovision icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-reprovision<br/>
      Sass: icon-char('reprovision');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-speech-bubble-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-speech-bubble-filled<br/>
      Sass: icon-char('speech-bubble-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-star-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-star-filled<br/>
      Sass: icon-char('star-filled');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-gateway icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-gateway<br/>
      Sass: icon-char('gateway');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-flash icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-flash<br/>
      Sass: icon-char('flash');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-rocket icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-rocket<br/>
      Sass: icon-char('rocket');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-neutral icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-neutral<br/>
      Sass: icon-char('robot-neutral');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-happy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-happy<br/>
      Sass: icon-char('robot-happy');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-smile icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-smile<br/>
      Sass: icon-char('robot-smile');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-laughing icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-laughing<br/>
      Sass: icon-char('robot-laughing');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-wink-1 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-wink-1<br/>
      Sass: icon-char('robot-wink-1');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-relaxed icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-relaxed<br/>
      Sass: icon-char('robot-relaxed');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-surprized icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-surprized<br/>
      Sass: icon-char('robot-surprized');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-confused icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-confused<br/>
      Sass: icon-char('robot-confused');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-sad icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-sad<br/>
      Sass: icon-char('robot-sad');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-broken icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-broken<br/>
      Sass: icon-char('robot-broken');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-umbrella icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-umbrella<br/>
      Sass: icon-char('umbrella');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-security icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-security<br/>
      Sass: icon-char('security');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-routed-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-routed-network<br/>
      Sass: icon-char('routed-network');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ip-sets icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ip-sets<br/>
      Sass: icon-char('ip-sets');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-resource-pool icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-resource-pool<br/>
      Sass: icon-char('resource-pool');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-edge icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-edge<br/>
      Sass: icon-char('edge');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-switch icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-switch<br/>
      Sass: icon-char('switch');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-processor icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-processor<br/>
      Sass: icon-char('processor');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-distributed-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-distributed-network<br/>
      Sass: icon-char('distributed-network');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-legacy-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-legacy-network<br/>
      Sass: icon-char('legacy-network');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-star-half icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-star-half<br/>
      Sass: icon-char('star-half');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-filter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-filter<br/>
      Sass: icon-char('filter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-idcard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-idcard<br/>
      Sass: icon-char('idcard');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-passport icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-passport<br/>
      Sass: icon-char('passport');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-thumb-up-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-thumb-up-filled<br/>
      Sass: icon-char('thumb-up-filled');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tag icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tag<br/>
      Sass: icon-char('tag');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bell icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bell<br/>
      Sass: icon-char('bell');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-flash-multiple icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-flash-multiple<br/>
      Sass: icon-char('flash-multiple');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-lightbulb icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-lightbulb<br/>
      Sass: icon-char('lightbulb');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-devices icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-devices<br/>
      Sass: icon-char('devices');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-smartphones-multiple icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-smartphones-multiple<br/>
      Sass: icon-char('smartphones-multiple');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-indesign icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-indesign<br/>
      Sass: icon-char('document-indesign');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-illustrator icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-illustrator<br/>
      Sass: icon-char('document-illustrator');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-onenote icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-onenote<br/>
      Sass: icon-char('document-onenote');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-eps icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-eps<br/>
      Sass: icon-char('document-eps');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-photoshop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-photoshop<br/>
      Sass: icon-char('document-photoshop');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-visio icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-visio<br/>
      Sass: icon-char('document-visio');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-publisher icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-publisher<br/>
      Sass: icon-char('document-publisher');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-document-unknowndoc icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-document-unknowndoc<br/>
      Sass: icon-char('document-unknowndoc');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-shop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-shop<br/>
      Sass: icon-char('shop');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-scissors icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-scissors<br/>
      Sass: icon-char('scissors');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-battery icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-battery<br/>
      Sass: icon-char('battery');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-battery-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-battery-3<br/>
      Sass: icon-char('battery-3');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-battery-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-battery-2<br/>
      Sass: icon-char('battery-2');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-battery-1 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-battery-1<br/>
      Sass: icon-char('battery-1');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-battery-0 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-battery-0<br/>
      Sass: icon-char('battery-0');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-battery-empty icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-battery-empty<br/>
      Sass: icon-char('battery-empty');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mouse icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mouse<br/>
      Sass: icon-char('mouse');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-pointer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-pointer<br/>
      Sass: icon-char('pointer');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-realmouse icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-realmouse<br/>
      Sass: icon-char('realmouse');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bug icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bug<br/>
      Sass: icon-char('bug');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-privacy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-privacy<br/>
      Sass: icon-char('privacy');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ip icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ip<br/>
      Sass: icon-char('ip');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-patch icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-patch<br/>
      Sass: icon-char('patch');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-microphone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-microphone<br/>
      Sass: icon-char('microphone');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-microphone-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-microphone-filled<br/>
      Sass: icon-char('microphone-filled');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-handset-up icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-handset-up<br/>
      Sass: icon-char('handset-up');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-handset-up-stroke icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-handset-up-stroke<br/>
      Sass: icon-char('handset-up-stroke');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-handset-stroke icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-handset-stroke<br/>
      Sass: icon-char('handset-stroke');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-software icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-software<br/>
      Sass: icon-char('software');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-dynamic-storage icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-dynamic-storage<br/>
      Sass: icon-char('dynamic-storage');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wireless-data icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wireless-data<br/>
      Sass: icon-char('wireless-data');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wireless-voice icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wireless-voice<br/>
      Sass: icon-char('wireless-voice');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-lips icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-lips<br/>
      Sass: icon-char('lips');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-flag-filled icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-flag-filled<br/>
      Sass: icon-char('flag-filled');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-alarmclock icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-alarmclock<br/>
      Sass: icon-char('alarmclock');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-copy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-copy<br/>
      Sass: icon-char('copy');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-paste icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-paste<br/>
      Sass: icon-char('paste');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-plus-box icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-plus-box<br/>
      Sass: icon-char('plus-box');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-minus-box icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-minus-box<br/>
      Sass: icon-char('minus-box');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-service icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-service<br/>
      Sass: icon-char('service');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-business-phone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-business-phone<br/>
      Sass: icon-char('business-phone');
    </p>
  </div>
  
    
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-accessibility icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-accessibility<br/>
      Sass: icon-char('accessibility');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-agile-process icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-agile-process<br/>
      Sass: icon-char('agile-process');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-airplaine icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-airplaine<br/>
      Sass: icon-char('airplaine');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-alarmcall icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-alarmcall<br/>
      Sass: icon-char('alarmcall');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-auster icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-auster<br/>
      Sass: icon-char('auster');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-barcode icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-barcode<br/>
      Sass: icon-char('barcode');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bed icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bed<br/>
      Sass: icon-char('bed');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bee icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bee<br/>
      Sass: icon-char('bee');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-beer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-beer<br/>
      Sass: icon-char('beer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-biker icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-biker<br/>
      Sass: icon-char('biker');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-blow-fish icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-blow-fish<br/>
      Sass: icon-char('blow-fish');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-book icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-book<br/>
      Sass: icon-char('book');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-broom icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-broom<br/>
      Sass: icon-char('broom');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bubbles icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bubbles<br/>
      Sass: icon-char('bubbles');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bus<br/>
      Sass: icon-char('bus');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-business-network icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-business-network<br/>
      Sass: icon-char('business-network');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-buyback icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-buyback<br/>
      Sass: icon-char('buyback');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-bicycle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-bicycle<br/>
      Sass: icon-char('bicycle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cablecar icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cablecar<br/>
      Sass: icon-char('cablecar');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-calculator icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-calculator<br/>
      Sass: icon-char('calculator');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-call-log icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-call-log<br/>
      Sass: icon-char('call-log');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-callfilter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-callfilter<br/>
      Sass: icon-char('callfilter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-car-pooling-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-car-pooling-2<br/>
      Sass: icon-char('car-pooling-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-car-pooling icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-car-pooling<br/>
      Sass: icon-char('car-pooling');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-car-sharing icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-car-sharing<br/>
      Sass: icon-char('car-sharing');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-car icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-car<br/>
      Sass: icon-char('car');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-carabiner icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-carabiner<br/>
      Sass: icon-char('carabiner');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cardreader icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cardreader<br/>
      Sass: icon-char('cardreader');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-care icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-care<br/>
      Sass: icon-char('care');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cashdesk icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cashdesk<br/>
      Sass: icon-char('cashdesk');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ccserver icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ccserver<br/>
      Sass: icon-char('ccserver');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-chairlift icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-chairlift<br/>
      Sass: icon-char('chairlift');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-child-protection-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-child-protection-2<br/>
      Sass: icon-char('child-protection-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cocktail icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cocktail<br/>
      Sass: icon-char('cocktail');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-coffee icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-coffee<br/>
      Sass: icon-char('coffee');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-combox icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-combox<br/>
      Sass: icon-char('combox');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-computer-monitoring icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-computer-monitoring<br/>
      Sass: icon-char('computer-monitoring');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-copier icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-copier<br/>
      Sass: icon-char('copier');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-crab icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-crab<br/>
      Sass: icon-char('crab');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-crime icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-crime<br/>
      Sass: icon-char('crime');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cross icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cross<br/>
      Sass: icon-char('cross');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-crowd icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-crowd<br/>
      Sass: icon-char('crowd');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-crown icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-crown<br/>
      Sass: icon-char('crown');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-cruiser icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-cruiser<br/>
      Sass: icon-char('cruiser');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-dargebotene-hand icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-dargebotene-hand<br/>
      Sass: icon-char('dargebotene-hand');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-desktopsharing icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-desktopsharing<br/>
      Sass: icon-char('desktopsharing');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-diagram-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-diagram-2<br/>
      Sass: icon-char('diagram-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-diagram icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-diagram<br/>
      Sass: icon-char('diagram');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-dial icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-dial<br/>
      Sass: icon-char('dial');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-digihome icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-digihome<br/>
      Sass: icon-char('digihome');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-discjockey icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-discjockey<br/>
      Sass: icon-char('discjockey');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-doctor icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-doctor<br/>
      Sass: icon-char('doctor');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-driverless-car icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-driverless-car<br/>
      Sass: icon-char('driverless-car');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-drone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-drone<br/>
      Sass: icon-char('drone');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ebike-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ebike-2<br/>
      Sass: icon-char('ebike-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ebike icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ebike<br/>
      Sass: icon-char('ebike');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ecar icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ecar<br/>
      Sass: icon-char('ecar');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-edge-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-edge-2<br/>
      Sass: icon-char('edge-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-elevator icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-elevator<br/>
      Sass: icon-char('elevator');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-emotorcycle-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-emotorcycle-2<br/>
      Sass: icon-char('emotorcycle-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-emotorcycle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-emotorcycle<br/>
      Sass: icon-char('emotorcycle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-esim icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-esim<br/>
      Sass: icon-char('esim');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ethernet icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ethernet<br/>
      Sass: icon-char('ethernet');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-exit icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-exit<br/>
      Sass: icon-char('exit');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-factory icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-factory<br/>
      Sass: icon-char('factory');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-faultclearing icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-faultclearing<br/>
      Sass: icon-char('faultclearing');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fiber icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fiber<br/>
      Sass: icon-char('fiber');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-firebrigade icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-firebrigade<br/>
      Sass: icon-char('firebrigade');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fish icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fish<br/>
      Sass: icon-char('fish');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fitness icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fitness<br/>
      Sass: icon-char('fitness');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-flag-filled-wind icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-flag-filled-wind<br/>
      Sass: icon-char('flag-filled-wind');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-flag-wind icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-flag-wind<br/>
      Sass: icon-char('flag-wind');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-fleet-management icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-fleet-management<br/>
      Sass: icon-char('fleet-management');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-food icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-food<br/>
      Sass: icon-char('food');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-freighter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-freighter<br/>
      Sass: icon-char('freighter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-garderobe icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-garderobe<br/>
      Sass: icon-char('garderobe');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-gears-three icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-gears-three<br/>
      Sass: icon-char('gears-three');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-gears icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-gears<br/>
      Sass: icon-char('gears');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-globe-key icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-globe-key<br/>
      Sass: icon-char('globe-key');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-goggles-3d icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-goggles-3d<br/>
      Sass: icon-char('goggles-3d');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-green-laptop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-green-laptop<br/>
      Sass: icon-char('green-laptop');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-green-mobile icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-green-mobile<br/>
      Sass: icon-char('green-mobile');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hd-voice icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hd-voice<br/>
      Sass: icon-char('hd-voice');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-helicopter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-helicopter<br/>
      Sass: icon-char('helicopter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-helpline icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-helpline<br/>
      Sass: icon-char('helpline');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hiking icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hiking<br/>
      Sass: icon-char('hiking');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-home-ok icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-home-ok<br/>
      Sass: icon-char('home-ok');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hospital-building icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hospital-building<br/>
      Sass: icon-char('hospital-building');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hospital icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hospital<br/>
      Sass: icon-char('hospital');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hotspot-localprodukt icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hotspot-localprodukt<br/>
      Sass: icon-char('hotspot-localprodukt');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-hybrid-drive icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-hybrid-drive<br/>
      Sass: icon-char('hybrid-drive');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-infinity icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-infinity<br/>
      Sass: icon-char('infinity');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-informationint icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-informationint<br/>
      Sass: icon-char('informationint');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-insert-banknote icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-insert-banknote<br/>
      Sass: icon-char('insert-banknote');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-insertcoin icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-insertcoin<br/>
      Sass: icon-char('insertcoin');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-internet-of-things icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-internet-of-things<br/>
      Sass: icon-char('internet-of-things');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ip-telephone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ip-telephone<br/>
      Sass: icon-char('ip-telephone');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-jelly-fish icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-jelly-fish<br/>
      Sass: icon-char('jelly-fish');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-juggler icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-juggler<br/>
      Sass: icon-char('juggler');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-keyboard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-keyboard<br/>
      Sass: icon-char('keyboard');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-laptop-internet icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-laptop-internet<br/>
      Sass: icon-char('laptop-internet');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-living-room icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-living-room<br/>
      Sass: icon-char('living-room');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-lowradiation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-lowradiation<br/>
      Sass: icon-char('lowradiation');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mail-storge icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mail-storge<br/>
      Sass: icon-char('mail-storge');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mediabox icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mediabox<br/>
      Sass: icon-char('mediabox');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-megaphone icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-megaphone<br/>
      Sass: icon-char('megaphone');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-buyback-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-buyback-2<br/>
      Sass: icon-char('mobile-buyback-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-buyback-3 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-buyback-3<br/>
      Sass: icon-char('mobile-buyback-3');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-buyback icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-buyback<br/>
      Sass: icon-char('mobile-buyback');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-internet icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-internet<br/>
      Sass: icon-char('mobile-internet');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-laptop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-laptop<br/>
      Sass: icon-char('mobile-laptop');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-message icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-message<br/>
      Sass: icon-char('mobile-message');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobile-payment icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobile-payment<br/>
      Sass: icon-char('mobile-payment');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobilecall icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobilecall<br/>
      Sass: icon-char('mobilecall');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mobileuser icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mobileuser<br/>
      Sass: icon-char('mobileuser');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-modem icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-modem<br/>
      Sass: icon-char('modem');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-motorcycle-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-motorcycle-2<br/>
      Sass: icon-char('motorcycle-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-motorcycle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-motorcycle<br/>
      Sass: icon-char('motorcycle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mountainbiker icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mountainbiker<br/>
      Sass: icon-char('mountainbiker');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-music-app-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-music-app-2<br/>
      Sass: icon-char('music-app-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-music-app icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-music-app<br/>
      Sass: icon-char('music-app');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-mycloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-mycloud<br/>
      Sass: icon-char('mycloud');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-network-3g icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-network-3g<br/>
      Sass: icon-char('network-3g');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-network-4g icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-network-4g<br/>
      Sass: icon-char('network-4g');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-network-4gplus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-network-4gplus<br/>
      Sass: icon-char('network-4gplus');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-network-5g icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-network-5g<br/>
      Sass: icon-char('network-5g');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-network-improvement icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-network-improvement<br/>
      Sass: icon-char('network-improvement');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-newspaper icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-newspaper<br/>
      Sass: icon-char('newspaper');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-nfc icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-nfc<br/>
      Sass: icon-char('nfc');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-nordic-combined icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-nordic-combined<br/>
      Sass: icon-char('nordic-combined');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-notice icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-notice<br/>
      Sass: icon-char('notice');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-nut-and-bolt icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-nut-and-bolt<br/>
      Sass: icon-char('nut-and-bolt');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-online-storge icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-online-storge<br/>
      Sass: icon-char('online-storge');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-parking-garage icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-parking-garage<br/>
      Sass: icon-char('parking-garage');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-parking-meter icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-parking-meter<br/>
      Sass: icon-char('parking-meter');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-parking-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-parking-2<br/>
      Sass: icon-char('parking-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-parking icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-parking<br/>
      Sass: icon-char('parking');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-pbx icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-pbx<br/>
      Sass: icon-char('pbx');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-personal-cloud icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-personal-cloud<br/>
      Sass: icon-char('personal-cloud');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-pet-bottle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-pet-bottle<br/>
      Sass: icon-char('pet-bottle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-pharmacy icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-pharmacy<br/>
      Sass: icon-char('pharmacy');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-phone-security icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-phone-security<br/>
      Sass: icon-char('phone-security');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-phonecordless icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-phonecordless<br/>
      Sass: icon-char('phonecordless');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-piggy-bank icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-piggy-bank<br/>
      Sass: icon-char('piggy-bank');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-podium icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-podium<br/>
      Sass: icon-char('podium');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-police icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-police<br/>
      Sass: icon-char('police');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-power icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-power<br/>
      Sass: icon-char('power');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-prepaid-mobile icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-prepaid-mobile<br/>
      Sass: icon-char('prepaid-mobile');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-presentation icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-presentation<br/>
      Sass: icon-char('presentation');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ray icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ray<br/>
      Sass: icon-char('ray');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-relax icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-relax<br/>
      Sass: icon-char('relax');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-remote-control icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-remote-control<br/>
      Sass: icon-char('remote-control');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-restaurant icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-restaurant<br/>
      Sass: icon-char('restaurant');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-robot-wink-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-robot-wink-2<br/>
      Sass: icon-char('robot-wink-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-runner icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-runner<br/>
      Sass: icon-char('runner');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-safety icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-safety<br/>
      Sass: icon-char('safety');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sailer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sailer<br/>
      Sass: icon-char('sailer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-satellitedish icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-satellitedish<br/>
      Sass: icon-char('satellitedish');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-satellite icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-satellite<br/>
      Sass: icon-char('satellite');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-scale icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-scale<br/>
      Sass: icon-char('scale');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-screen-design icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-screen-design<br/>
      Sass: icon-char('screen-design');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-searchtext icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-searchtext<br/>
      Sass: icon-char('searchtext');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-securitycamera icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-securitycamera<br/>
      Sass: icon-char('securitycamera');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-selfcheckout icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-selfcheckout<br/>
      Sass: icon-char('selfcheckout');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-server-small icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-server-small<br/>
      Sass: icon-char('server-small');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-shakehands icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-shakehands<br/>
      Sass: icon-char('shakehands');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-shower icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-shower<br/>
      Sass: icon-char('shower');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-silence icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-silence<br/>
      Sass: icon-char('silence');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-simkarte icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-simkarte<br/>
      Sass: icon-char('simkarte');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski-biathlon icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski-biathlon<br/>
      Sass: icon-char('ski-biathlon');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski-cross-country icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski-cross-country<br/>
      Sass: icon-char('ski-cross-country');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski-freestyle icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski-freestyle<br/>
      Sass: icon-char('ski-freestyle');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski-jumping icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski-jumping<br/>
      Sass: icon-char('ski-jumping');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski-racer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski-racer<br/>
      Sass: icon-char('ski-racer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski-telemarking icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski-telemarking<br/>
      Sass: icon-char('ski-telemarking');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ski icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ski<br/>
      Sass: icon-char('ski');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-small-meeting icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-small-meeting<br/>
      Sass: icon-char('small-meeting');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-smoking icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-smoking<br/>
      Sass: icon-char('smoking');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-snail icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-snail<br/>
      Sass: icon-char('snail');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-snow icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-snow<br/>
      Sass: icon-char('snow');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-snowboard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-snowboard<br/>
      Sass: icon-char('snowboard');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-socialnetwork icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-socialnetwork<br/>
      Sass: icon-char('socialnetwork');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-sos icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-sos<br/>
      Sass: icon-char('sos');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-spam icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-spam<br/>
      Sass: icon-char('spam');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-spot icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-spot<br/>
      Sass: icon-char('spot');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-squid icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-squid<br/>
      Sass: icon-char('squid');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-stairs icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-stairs<br/>
      Sass: icon-char('stairs');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-standing-meeting icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-standing-meeting<br/>
      Sass: icon-char('standing-meeting');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-station icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-station<br/>
      Sass: icon-char('station');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-steeringwheel icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-steeringwheel<br/>
      Sass: icon-char('steeringwheel');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-strong-arm icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-strong-arm<br/>
      Sass: icon-char('strong-arm');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-svod-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-svod-2<br/>
      Sass: icon-char('svod-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-swiss-1 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-swiss-1<br/>
      Sass: icon-char('swiss-1');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-swiss-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-swiss-2<br/>
      Sass: icon-char('swiss-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-switchboarding icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-switchboarding<br/>
      Sass: icon-char('switchboarding');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-switchoff icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-switchoff<br/>
      Sass: icon-char('switchoff');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-taxcard icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-taxcard<br/>
      Sass: icon-char('taxcard');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-taxcardin icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-taxcardin<br/>
      Sass: icon-char('taxcardin');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-taxcardout icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-taxcardout<br/>
      Sass: icon-char('taxcardout');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-teddybear icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-teddybear<br/>
      Sass: icon-char('teddybear');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-telecommunication icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-telecommunication<br/>
      Sass: icon-char('telecommunication');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tent icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tent<br/>
      Sass: icon-char('tent');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-thermometer icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-thermometer<br/>
      Sass: icon-char('thermometer');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-toilet-f icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-toilet-f<br/>
      Sass: icon-char('toilet-f');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-toilet-m icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-toilet-m<br/>
      Sass: icon-char('toilet-m');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-toilet-s icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-toilet-s<br/>
      Sass: icon-char('toilet-s');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-touchdown icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-touchdown<br/>
      Sass: icon-char('touchdown');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-trafficinfo icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-trafficinfo<br/>
      Sass: icon-char('trafficinfo');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-trailrunner icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-trailrunner<br/>
      Sass: icon-char('trailrunner');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-train icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-train<br/>
      Sass: icon-char('train');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-tv-guide icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-tv-guide<br/>
      Sass: icon-char('tv-guide');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-uhd-tv icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-uhd-tv<br/>
      Sass: icon-char('uhd-tv');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-usb icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-usb<br/>
      Sass: icon-char('usb');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-user-presence icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-user-presence<br/>
      Sass: icon-char('user-presence');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-van-fire-2 icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-van-fire-2<br/>
      Sass: icon-char('van-fire-2');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-van-fire icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-van-fire<br/>
      Sass: icon-char('van-fire');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-ventilator icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-ventilator<br/>
      Sass: icon-char('ventilator');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-video-call-laptop icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-video-call-laptop<br/>
      Sass: icon-char('video-call-laptop');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-video-call-mobile icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-video-call-mobile<br/>
      Sass: icon-char('video-call-mobile');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-virus icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-virus<br/>
      Sass: icon-char('virus');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-waitingroom icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-waitingroom<br/>
      Sass: icon-char('waitingroom');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wearable-glasses icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wearable-glasses<br/>
      Sass: icon-char('wearable-glasses');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-webcam icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-webcam<br/>
      Sass: icon-char('webcam');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wheelchair icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wheelchair<br/>
      Sass: icon-char('wheelchair');
    </p>
  </div>
  
    
  <div class="col-xs-4 col-sm-3 col-md-2">
    <i class="icon icon-wireless-charging icon--s4" aria-hidden="true" style="text-align:center;display:block;"></i>
    <p class="sg-color-code">
      CSS: icon-wireless-charging<br/>
      Sass: icon-char('wireless-charging');
    </p>
  </div>
  
</div>

*/
.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: ""; }

[hs-device="desktop"].fonts-loaded .sdx-container,
[hs-device="tablet"].fonts-loaded .sdx-container,
[hs-device="phone"].fonts-loaded .sdx-container {
  /*doc
---
title: Typography
name: 01-foundation-05-typography-01-typography
category: Foundation - Typography
---

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

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

  <p class="margin-top-4">As a guidance we strongly recommend to optimize the solid centre width of your body text to a maximum of 700 pixels. Because having the right amount of characters on each line is key to the readability of your text.</p>
</section>


```section_design
```

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

  <h3>Typefaces</h3>

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

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

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

  <h3>Using colour and typography</h3>

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

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

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

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

  <h3>Type hierachy and color</h3>

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

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

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

  <h3>Minimum type padding</h3>

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

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

  <h3>Letter-spacing</h3>

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

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

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

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


```section_develop
```

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

<h3>Font Type Sans</h3>

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

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

<h3>Font Type Serif</h3>

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

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

<h3>Font Weight</h3>

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

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

<h2>Headings</h2>

<p>All HTML headings, from <code>&lt;h1&gt;</code> to <code>&lt;h6&gt;</code>, should be used to structure the page semantically correct. Make sure to use just a single one <code>&lt;h1 class="text-h1"&gt;</code> on the entire page and do not skip a heading only for design matters. Instead, use classes like <code>class="text-h1"</code> to make your heading look the way you want it.</p>

```htmlmixed
<h1 class="text-h1">I’m a H1</h1>
<h2 class="text-h2">I’m a H2</h2>
<h3 class="text-h3">I’m a H3</h3>
<!-- ...etc. -->

<h4 class="text-h1">I’m semantically a H4 but I look like a H1</h4>
<h5 class="text-h2">I’m semantically a H5 but I look like a H2</h5>
<h6 class="text-h3">I’m semantically a H6 but I look like a H3</h6>
<!-- ...etc. -->
```

<h2>Display Headings</h2>

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

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

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

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

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

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

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

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

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

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

<h4>Gray Background</h4>

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

<h4>Dark Background</h4>

```htmlmixed
<div class="bg bg--dark">
  <h1 class="text-d1">Display 1: Swisscom intends to continue reducing roaming prices</h1>
  <h1 class="text-h1">H1: Swisscom intends to continue reducing roaming prices</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```
*/ }
  [hs-device="desktop"].fonts-loaded .sdx-container .text-body-1,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-body-1,
  [hs-device="phone"].fonts-loaded .sdx-container .text-body-1 {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 18px; }
  [hs-device="desktop"].fonts-loaded .sdx-container .text-body-2,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-body-2,
  [hs-device="phone"].fonts-loaded .sdx-container .text-body-2 {
    line-height: 24px;
    letter-spacing: 0;
    font-size: 16px; }
  [hs-device="desktop"].fonts-loaded .sdx-container h1,
  [hs-device="desktop"].fonts-loaded .sdx-container h2,
  [hs-device="desktop"].fonts-loaded .sdx-container h3,
  [hs-device="desktop"].fonts-loaded .sdx-container .hs-line .hs-line-link,
  .hs-line [hs-device="desktop"].fonts-loaded .sdx-container .hs-line-link,
  [hs-device="desktop"].fonts-loaded .sdx-container h4,
  [hs-device="desktop"].fonts-loaded .sdx-container h5,
  [hs-device="desktop"].fonts-loaded .sdx-container h6,
  [hs-device="desktop"].fonts-loaded .sdx-container p,
  [hs-device="tablet"].fonts-loaded .sdx-container h1,
  [hs-device="tablet"].fonts-loaded .sdx-container h2,
  [hs-device="tablet"].fonts-loaded .sdx-container h3,
  [hs-device="tablet"].fonts-loaded .sdx-container .hs-line .hs-line-link,
  .hs-line [hs-device="tablet"].fonts-loaded .sdx-container .hs-line-link,
  [hs-device="tablet"].fonts-loaded .sdx-container h4,
  [hs-device="tablet"].fonts-loaded .sdx-container h5,
  [hs-device="tablet"].fonts-loaded .sdx-container h6,
  [hs-device="tablet"].fonts-loaded .sdx-container p,
  [hs-device="phone"].fonts-loaded .sdx-container h1,
  [hs-device="phone"].fonts-loaded .sdx-container h2,
  [hs-device="phone"].fonts-loaded .sdx-container h3,
  [hs-device="phone"].fonts-loaded .sdx-container .hs-line .hs-line-link,
  .hs-line [hs-device="phone"].fonts-loaded .sdx-container .hs-line-link,
  [hs-device="phone"].fonts-loaded .sdx-container h4,
  [hs-device="phone"].fonts-loaded .sdx-container h5,
  [hs-device="phone"].fonts-loaded .sdx-container h6,
  [hs-device="phone"].fonts-loaded .sdx-container p {
    font-family: "TheSans", sans-serif;
    margin: 0;
    margin-bottom: 32px;
    padding: 0;
    text-align: left;
    word-wrap: break-word; }
    [hs-device="desktop"].fonts-loaded .sdx-container h1:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container h2:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container h3:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container .hs-line .hs-line-link:last-child,
    .hs-line [hs-device="desktop"].fonts-loaded .sdx-container .hs-line-link:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container h4:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container h5:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container h6:last-child,
    [hs-device="desktop"].fonts-loaded .sdx-container p:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container h1:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container h2:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container h3:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container .hs-line .hs-line-link:last-child,
    .hs-line [hs-device="tablet"].fonts-loaded .sdx-container .hs-line-link:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container h4:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container h5:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container h6:last-child,
    [hs-device="tablet"].fonts-loaded .sdx-container p:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container h1:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container h2:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container h3:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container .hs-line .hs-line-link:last-child,
    .hs-line [hs-device="phone"].fonts-loaded .sdx-container .hs-line-link:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container h4:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container h5:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container h6:last-child,
    [hs-device="phone"].fonts-loaded .sdx-container p:last-child {
      margin-bottom: 0; }
  [hs-device="desktop"].fonts-loaded .sdx-container .text-compact,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-compact,
  [hs-device="phone"].fonts-loaded .sdx-container .text-compact {
    line-height: 21px; }
  [hs-device="desktop"].fonts-loaded .sdx-container h1,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-h1,
  [hs-device="tablet"].fonts-loaded .sdx-container h1,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-h1,
  [hs-device="phone"].fonts-loaded .sdx-container h1,
  [hs-device="phone"].fonts-loaded .sdx-container .text-h1 {
    line-height: 48px;
    letter-spacing: -1.2px;
    font-size: 40px;
    font-weight: 300; }
  [hs-device="desktop"].fonts-loaded .sdx-container h2,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-h2,
  [hs-device="tablet"].fonts-loaded .sdx-container h2,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-h2,
  [hs-device="phone"].fonts-loaded .sdx-container h2,
  [hs-device="phone"].fonts-loaded .sdx-container .text-h2 {
    line-height: 40px;
    letter-spacing: -1px;
    font-size: 32px;
    font-weight: 300; }
  
  [hs-device="desktop"].fonts-loaded .sdx-container h3,
  [hs-device="desktop"].fonts-loaded .sdx-container .hs-line .hs-line-link,
  .hs-line [hs-device="desktop"].fonts-loaded .sdx-container .hs-line-link,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-h3,
  [hs-device="tablet"].fonts-loaded .sdx-container h3,
  [hs-device="tablet"].fonts-loaded .sdx-container .hs-line .hs-line-link,
  .hs-line [hs-device="tablet"].fonts-loaded .sdx-container .hs-line-link,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-h3,
  [hs-device="phone"].fonts-loaded .sdx-container h3,
  [hs-device="phone"].fonts-loaded .sdx-container .hs-line .hs-line-link,
  .hs-line [hs-device="phone"].fonts-loaded .sdx-container .hs-line-link,
  [hs-device="phone"].fonts-loaded .sdx-container .text-h3 {
    line-height: 32px;
    letter-spacing: -.75px;
    font-size: 28px; }
    
    [hs-device="desktop"].fonts-loaded .sdx-container h3,
    [hs-device="desktop"].fonts-loaded .sdx-container .hs-line .hs-line-link,
    .hs-line [hs-device="desktop"].fonts-loaded .sdx-container .hs-line-link, [hs-device="desktop"].fonts-loaded .sdx-container h3--light,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h3,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h3--light,
    [hs-device="tablet"].fonts-loaded .sdx-container h3,
    [hs-device="tablet"].fonts-loaded .sdx-container .hs-line .hs-line-link,
    .hs-line [hs-device="tablet"].fonts-loaded .sdx-container .hs-line-link,
    [hs-device="tablet"].fonts-loaded .sdx-container h3--light,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h3,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h3--light,
    [hs-device="phone"].fonts-loaded .sdx-container h3,
    [hs-device="phone"].fonts-loaded .sdx-container .hs-line .hs-line-link,
    .hs-line [hs-device="phone"].fonts-loaded .sdx-container .hs-line-link,
    [hs-device="phone"].fonts-loaded .sdx-container h3--light,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h3,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h3--light {
      font-weight: 300; }
    [hs-device="desktop"].fonts-loaded .sdx-container h3--semi-light,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h3--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container h3--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h3--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container h3--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h3--semi-light {
      font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container h3--semi-bold,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h3--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container h3--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h3--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container h3--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h3--semi-bold {
      font-weight: 600; }
    [hs-device="desktop"].fonts-loaded .sdx-container h3.text-compact, [hs-device="desktop"].fonts-loaded .sdx-container .hs-line .text-compact.hs-line-link, .hs-line [hs-device="desktop"].fonts-loaded .sdx-container .text-compact.hs-line-link,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h3.text-compact,
    [hs-device="tablet"].fonts-loaded .sdx-container h3.text-compact,
    [hs-device="tablet"].fonts-loaded .sdx-container .hs-line .text-compact.hs-line-link,
    .hs-line [hs-device="tablet"].fonts-loaded .sdx-container .text-compact.hs-line-link,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h3.text-compact,
    [hs-device="phone"].fonts-loaded .sdx-container h3.text-compact,
    [hs-device="phone"].fonts-loaded .sdx-container .hs-line .text-compact.hs-line-link,
    .hs-line [hs-device="phone"].fonts-loaded .sdx-container .text-compact.hs-line-link,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h3.text-compact {
      line-height: 31px; }
  [hs-device="desktop"].fonts-loaded .sdx-container h4,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-h4,
  [hs-device="tablet"].fonts-loaded .sdx-container h4,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-h4,
  [hs-device="phone"].fonts-loaded .sdx-container h4,
  [hs-device="phone"].fonts-loaded .sdx-container .text-h4 {
    line-height: 32px;
    letter-spacing: -.35px;
    font-size: 24px; }
    [hs-device="desktop"].fonts-loaded .sdx-container h4, [hs-device="desktop"].fonts-loaded .sdx-container h4--light,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h4,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h4--light,
    [hs-device="tablet"].fonts-loaded .sdx-container h4,
    [hs-device="tablet"].fonts-loaded .sdx-container h4--light,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h4,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h4--light,
    [hs-device="phone"].fonts-loaded .sdx-container h4,
    [hs-device="phone"].fonts-loaded .sdx-container h4--light,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h4,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h4--light {
      font-weight: 300; }
    [hs-device="desktop"].fonts-loaded .sdx-container h4--semi-light,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h4--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container h4--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h4--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container h4--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h4--semi-light {
      font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container h4--semi-bold,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h4--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container h4--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h4--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container h4--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h4--semi-bold {
      font-weight: 600; }
    [hs-device="desktop"].fonts-loaded .sdx-container h4.text-compact,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h4.text-compact,
    [hs-device="tablet"].fonts-loaded .sdx-container h4.text-compact,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h4.text-compact,
    [hs-device="phone"].fonts-loaded .sdx-container h4.text-compact,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h4.text-compact {
      line-height: 27px; }
  [hs-device="desktop"].fonts-loaded .sdx-container h5,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-h5,
  [hs-device="tablet"].fonts-loaded .sdx-container h5,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-h5,
  [hs-device="phone"].fonts-loaded .sdx-container h5,
  [hs-device="phone"].fonts-loaded .sdx-container .text-h5 {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 18px;
    font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container h5, [hs-device="desktop"].fonts-loaded .sdx-container h5--semi-light,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h5,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h5--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container h5,
    [hs-device="tablet"].fonts-loaded .sdx-container h5--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h5,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h5--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container h5,
    [hs-device="phone"].fonts-loaded .sdx-container h5--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h5,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h5--semi-light {
      font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container h5--semi-bold,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h5--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container h5--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h5--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container h5--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h5--semi-bold {
      font-weight: 600; }
  [hs-device="desktop"].fonts-loaded .sdx-container h6,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-h6,
  [hs-device="tablet"].fonts-loaded .sdx-container h6,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-h6,
  [hs-device="phone"].fonts-loaded .sdx-container h6,
  [hs-device="phone"].fonts-loaded .sdx-container .text-h6 {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 16px;
    font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container h6, [hs-device="desktop"].fonts-loaded .sdx-container h6--semi-light,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h6,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h6--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container h6,
    [hs-device="tablet"].fonts-loaded .sdx-container h6--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h6,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h6--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container h6,
    [hs-device="phone"].fonts-loaded .sdx-container h6--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h6,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h6--semi-light {
      font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container h6--semi-bold,
    [hs-device="desktop"].fonts-loaded .sdx-container .text-h6--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container h6--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container .text-h6--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container h6--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container .text-h6--semi-bold {
      font-weight: 600; }
  [hs-device="desktop"].fonts-loaded .sdx-container .d1,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-d1,
  [hs-device="tablet"].fonts-loaded .sdx-container .d1,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-d1,
  [hs-device="phone"].fonts-loaded .sdx-container .d1,
  [hs-device="phone"].fonts-loaded .sdx-container .text-d1 {
    line-height: 48px;
    letter-spacing: -1.2px;
    font-size: 40px;
    font-weight: 300; }
    @media (min-width: 1024px) {
      [hs-device="desktop"].fonts-loaded .sdx-container .d1,
      [hs-device="desktop"].fonts-loaded .sdx-container .text-d1,
      [hs-device="tablet"].fonts-loaded .sdx-container .d1,
      [hs-device="tablet"].fonts-loaded .sdx-container .text-d1,
      [hs-device="phone"].fonts-loaded .sdx-container .d1,
      [hs-device="phone"].fonts-loaded .sdx-container .text-d1 {
        line-height: 80px;
        letter-spacing: -1.75px;
        font-size: 70px; } }
  [hs-device="desktop"].fonts-loaded .sdx-container .d2,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-d2,
  [hs-device="tablet"].fonts-loaded .sdx-container .d2,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-d2,
  [hs-device="phone"].fonts-loaded .sdx-container .d2,
  [hs-device="phone"].fonts-loaded .sdx-container .text-d2 {
    line-height: 40px;
    letter-spacing: -1px;
    font-size: 32px;
    font-weight: 300; }
    @media (min-width: 1024px) {
      [hs-device="desktop"].fonts-loaded .sdx-container .d2,
      [hs-device="desktop"].fonts-loaded .sdx-container .text-d2,
      [hs-device="tablet"].fonts-loaded .sdx-container .d2,
      [hs-device="tablet"].fonts-loaded .sdx-container .text-d2,
      [hs-device="phone"].fonts-loaded .sdx-container .d2,
      [hs-device="phone"].fonts-loaded .sdx-container .text-d2 {
        line-height: 64px;
        letter-spacing: -1.35px;
        font-size: 54px; } }
  [hs-device="desktop"].fonts-loaded .sdx-container .d3,
  [hs-device="desktop"].fonts-loaded .sdx-container .text-d3,
  [hs-device="tablet"].fonts-loaded .sdx-container .d3,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-d3,
  [hs-device="phone"].fonts-loaded .sdx-container .d3,
  [hs-device="phone"].fonts-loaded .sdx-container .text-d3 {
    line-height: 32px;
    letter-spacing: -.75px;
    font-size: 28px;
    font-weight: 300; }
    @media (min-width: 1024px) {
      [hs-device="desktop"].fonts-loaded .sdx-container .d3,
      [hs-device="desktop"].fonts-loaded .sdx-container .text-d3,
      [hs-device="tablet"].fonts-loaded .sdx-container .d3,
      [hs-device="tablet"].fonts-loaded .sdx-container .text-d3,
      [hs-device="phone"].fonts-loaded .sdx-container .d3,
      [hs-device="phone"].fonts-loaded .sdx-container .text-d3 {
        line-height: 56px;
        letter-spacing: -1.2px;
        font-size: 48px; } }
  [hs-device="desktop"].fonts-loaded .sdx-container p,
  [hs-device="tablet"].fonts-loaded .sdx-container p,
  [hs-device="phone"].fonts-loaded .sdx-container p {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 18px;
    font-weight: 400; }
  [hs-device="desktop"].fonts-loaded .sdx-container .text-b1,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-b1,
  [hs-device="phone"].fonts-loaded .sdx-container .text-b1 {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 18px;
    font-weight: 400; }
  [hs-device="desktop"].fonts-loaded .sdx-container .text-b2,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-b2,
  [hs-device="phone"].fonts-loaded .sdx-container .text-b2 {
    line-height: 24px;
    letter-spacing: 0;
    font-size: 16px;
    font-weight: 400; }
  [hs-device="desktop"].fonts-loaded .sdx-container .text-sm,
  [hs-device="tablet"].fonts-loaded .sdx-container .text-sm,
  [hs-device="phone"].fonts-loaded .sdx-container .text-sm {
    line-height: 24px;
    letter-spacing: .1px;
    font-size: 14px;
    font-weight: 400; }
  [hs-device="desktop"].fonts-loaded .sdx-container address,
  [hs-device="tablet"].fonts-loaded .sdx-container address,
  [hs-device="phone"].fonts-loaded .sdx-container address {
    font-style: normal; }
  [hs-device="desktop"].fonts-loaded .sdx-container strong,
  [hs-device="tablet"].fonts-loaded .sdx-container strong,
  [hs-device="phone"].fonts-loaded .sdx-container strong {
    font-weight: 600; }
  [hs-device="desktop"].fonts-loaded .sdx-container em,
  [hs-device="tablet"].fonts-loaded .sdx-container em,
  [hs-device="phone"].fonts-loaded .sdx-container em {
    font-style: italic; }
  [hs-device="desktop"].fonts-loaded .sdx-container .font,
  [hs-device="tablet"].fonts-loaded .sdx-container .font,
  [hs-device="phone"].fonts-loaded .sdx-container .font {
    font-family: "TheSans", sans-serif; }
    [hs-device="desktop"].fonts-loaded .sdx-container .font--sans,
    [hs-device="tablet"].fonts-loaded .sdx-container .font--sans,
    [hs-device="phone"].fonts-loaded .sdx-container .font--sans {
      font-family: "TheSans", sans-serif; }
    [hs-device="desktop"].fonts-loaded .sdx-container .font--serif,
    [hs-device="tablet"].fonts-loaded .sdx-container .font--serif,
    [hs-device="phone"].fonts-loaded .sdx-container .font--serif {
      font-family: Georgia, "Times New Roman", Times, serif; }
    [hs-device="desktop"].fonts-loaded .sdx-container .font--light,
    [hs-device="tablet"].fonts-loaded .sdx-container .font--light,
    [hs-device="phone"].fonts-loaded .sdx-container .font--light {
      font-weight: 300; }
    [hs-device="desktop"].fonts-loaded .sdx-container .font--semi-light,
    [hs-device="tablet"].fonts-loaded .sdx-container .font--semi-light,
    [hs-device="phone"].fonts-loaded .sdx-container .font--semi-light {
      font-weight: 400; }
    [hs-device="desktop"].fonts-loaded .sdx-container .font--semi-bold,
    [hs-device="tablet"].fonts-loaded .sdx-container .font--semi-bold,
    [hs-device="phone"].fonts-loaded .sdx-container .font--semi-bold {
      font-weight: 600; }

.sdx-container {
  /*
 * Set html to full width and height
 * Set touch-action to avoid touch delay on mobile IE
 */
  /*
 * Set display none to hidden elements
 * IE 9 and 10 support
 */
  /*
 * Reset fonts for relevant elements
 */
  /*
 * Remove the gray background color from active links in IE 10.
 */
  /* iOS "clickable elements" fix for role="button"
 *
 * Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
 * for traditionally non-focusable elements with role="button"
 * see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 */
  /*
::selection {
  background: $color-selection-bg;
  color: $color-selection-fg;
}
*/
  /*doc
---
title: Badges
name: 02-components-010-badges-01-badges
category: Components - Badges
---

<p>Badges are small and subtle notification indicators used to provide users with additional information without disrupting their experience.</p>
<p>They can be used to indicate unread emails, changes to settings, and prompting actions such as refreshing as a page. They should always feature one of the three interaction colours, helping to clarify importance of the notification/alert.</p>

<style type="text/css">
.exampleOutput .avatar {
    border-radius: 50%;
    border: 2px solid #ff8b2e;
}
.exampleOutput .avatar>img {
    width: 100%;
    height: auto;
    border-radius: 50%;
}
</style>

<div class="row">
  <div class="col-xs col-md-12 margin-bottom-3">
    <div class="badge badge--message">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
</div>

<div class="row margin-bottom-3">
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">8</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="badge__content">654</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-079-shopping-trolley" aria-hidden="true"></i>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-check" aria-hidden="true"></i>
        <span class="sr-only">Product added</span>
      </span>

    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content">8</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges//221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content">654</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-heart" aria-hidden="true"></i>
        <span class="sr-only">like</span>
      </span>
    </div>
  </div>
</div>


```section_design
```

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

  <h3>Icon badges</h3>

  <p>Icon badges are used for notifications that reference functionality, such as an unread mail or new product in the user’s basket. These are related to a user’s actions.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-21@2x-9.jpg">
        <span class="fig-caption">Color-coded icon notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-22@2x-8.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-23@2x-10.jpg">
        <span class="fig-caption">Color-coded icon notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-24@2x-5.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h3>Avatar badges</h3>

  <p>Avatar badges relate to the user’s account.. This could be the user receiving a ‘like’ for a comment, or to signify an account authorisation. They’re used in conjunction with message notifications.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-26@2x-8.jpg">
        <span class="fig-caption">Color-coded icon notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-26@2x.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h3>Message badge</h3>

  <p>Message notifications are often used in conjunction with avatar badges, and appear for a short time in the browser. They can simultaneously trigger an avatar badge notification.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-27@2x-6.jpg">
        <span class="fig-caption">Color-coded text notifications (top) and their respective hover states (bottom)</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-28@2x-8.jpg">
        <span class="fig-caption">Dark variants</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Positioning</h3>

  <p>Written alerts are positioned halfway over the top navigation and horizontally centered.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Group-17-Copy@2x-1.jpg">
      <span class="fig-caption">Positioning</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Icon alignment</h3>

  <p>Badges are always positioned on the right axis of the icon.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/badges/Line-Copy-14-Line-Copy-14-Mask@2x.jpg">
      <span class="fig-caption">Icon alignment is always positioned on the right axis of the icon</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/badges/Group-5-Copy-3@2x.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>


```section_develop
```

<style>
  .avatar {
    border-radius: 50%;
    border: 2px solid #ff8b2e;
  }

  .avatar>img {
    width: 100%;
    height: auto;
    border-radius: 50%;
  }
</style>

<h2>Badge types</h2>
<p>There are five types of badges.</p>

```htmlmixed_accessible
<div class="row">
  <div class="col-xs col-md-12 margin-bottom-3">
    <div class="badge badge--message">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="sr-only">account</span>
      <span class="badge__content">8</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="sr-only">account</span>
      <span class="badge__content">654</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-079-shopping-trolley" aria-hidden="true"></i>
      <span class="sr-only">shopping-trolley</span>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-check" aria-hidden="true"></i>
        <span class="sr-only">Product added</span>
      </span>
    </div>
  </div>
</div>

<div class="row margin-top-4">
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content">8</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content">654</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-heart" aria-hidden="true"></i>
        <span class="sr-only">like</span>
      </span>
    </div>
  </div>
</div>
```

<h3>Dark Background</h3>

<p>Badges on dark background.</p>

```htmlmixed_accessible
<div class="bg bg--dark">
  <div class="row">
    <div class="col-xs col-md-12 margin-bottom-3">
      <div class="badge badge--message">
        <div class="badge__content">
          <span class="badge__text">5 new messages</span>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs col-md-4">
      <div class="badge badge--icon">
        <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
        <span class="sr-only">account</span>
        <span class="badge__content">8</span>
        <span class="sr-only">new informations</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--icon">
        <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
        <span class="sr-only">account</span>
        <span class="badge__content">654</span>
        <span class="sr-only">new informations</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--icon">
        <i class="icon icon--s3 icon-079-shopping-trolley" aria-hidden="true"></i>
        <span class="sr-only">account</span>
        <span class="badge__content badge__content--icon">
          <i class="icon icon-check" aria-hidden="true"></i>
          <span class="sr-only">Product added</span>
        </span>
      </div>
    </div>
  </div>
  <div class="row margin-top-4">
    <div class="col-xs col-md-4">
      <div class="badge badge--avatar">
        <div class="avatar">
          <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
        </div>
        <span class="badge__content">8</span>
        <span class="sr-only">new informations</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--avatar">
        <div class="avatar">
          <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
        </div>
        <span class="badge__content">654</span>
        <span class="sr-only">new informations</span>
      </div>
    </div>
    <div class="col-xs col-md-4">
      <div class="badge badge--avatar">
        <div class="avatar">
          <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
        </div>
        <span class="badge__content badge__content--icon">
          <i class="icon icon-heart" aria-hidden="true"></i>
          <span class="sr-only">like</span>
        </span>
      </div>
    </div>
  </div>
</div>
```
<h2>Badge colours</h2>

<h3>General Notifications</h3>

```htmlmixed_accessible
<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--message">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="sr-only">account</span>
      <span class="badge__content">2</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-heart" aria-hidden="true"></i>
        <span class="sr-only">like</span>
      </span>
    </div>
  </div>
</div>
```

<h3>Confirmations</h3>

```htmlmixed
<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--message badge--confirmation">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon badge--confirmation">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="sr-only">account</span>
      <span class="badge__content">2</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar badge--confirmation">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-check" aria-hidden="true"></i>
        <span class="sr-only">ok</span>
      </span>
    </div>
  </div>
</div>
```

<h3>Alerts and notifications</h3>

```htmlmixed
<div class="row">
  <div class="col-xs col-md-4">
    <div class="badge badge--message badge--notification">
      <div class="badge__content">
        <span class="badge__text">5 new messages</span>
      </div>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--icon badge--notification">
      <i class="icon icon--s3 icon-001-account" aria-hidden="true"></i>
      <span class="sr-only">account</span>
      <span class="badge__content">2</span>
      <span class="sr-only">new informations</span>
    </div>
  </div>
  <div class="col-xs col-md-4">
    <div class="badge badge--avatar badge--notification">
      <div class="avatar">
        <img src="./theme-build/img/design/badges/221aa66daee90256353badc33955228b.jpeg" alt="Image description">
      </div>
      <span class="badge__content badge__content--icon">
        <i class="icon icon-alert" aria-hidden="true"></i>
        <span class="sr-only">caution</span>
      </span>
    </div>
  </div>
</div>
```
<script>
  // Performs the badge content animation when clicking on the badge, this is for
  // demonstration purposes only

  var badges = document.querySelectorAll(".badge")
  for (var i = 0; i < badges.length; i++) {
    badges[i].addEventListener("click", function() {
      var badge = this.querySelector(".badge__content")
      badge.style.display = "none";
      setTimeout(function(){  badge.style.display = ""; }, 200);
    });
  }
</script>
*/
  /*doc
---
title: Input Fields
name: 02-components-075-form-01-inputfields
category: Components - Input Fields
---

<p>Input fields allow users to enter data.
They have a standardized height and corner radius treatment, but are flexible in width.
Input fields are based on the grid.</p>

<p>If any validation is needed, you can display this in addition.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <form>
      <div class="input-field">
        <input type="text" id="user-name-1" placeholder="User Name">
        <label for="user-name-1">User Name</label>
      </div>
      <div class="input-field input-field--multiline" data-init="auto">
        <textarea id="multiline-0" data-min-rows="5" data-max-rows="10"></textarea>
        <label for="multiline-0">Description</label>
      </div>
    </form>
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>


```section_design
```

<div class="content-design">
  <h2>Input Fields</h2>
  <p>Input fields have different states to guide users when interacting with them. The main advantage with this input field variant is that additional descriptions for conventions (e.g. telephone number) can be given.</p>
  <p>There can be validations on input fields: A green tick appears when the content is validated. E.g. if the system has to validate the users` input of the “@” within an email address.</p>
  <p>An error message occurs if the user input is invalid or breaks input rules, such as special characters and passwords (which should be introduced to the user to avoid errors in advance.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_1.png">
      <span class="fig-caption"></span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_2.png">
      <span class="fig-caption"></span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Spacing</h3>

  <p>There is an 8px margin between the label and the input field itself. Between each input field there is a 24px margin. Inside the input field the margin is 16px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_dimensions.png">
      <span class="fig-caption">Spacing fixed labels</span>
    </div>
  </div>

  <h3>Autocomplete</h3>

  <p>Autocompletion speeds up the users interaction with the computer when it correctly predicts the word the user intends to enter &ndash; 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 &ndash; like a country selector &ndash; by typing in some characters (mostly, this content is static within the website).</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_autocomplete.jpg">
      <span class="fig-caption">Autocompletion</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive img-responsive-border" src="./theme-build/img/design/inputfields/Input_Fields_typo.png">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>


```section_develop
```

<h3>Basic usage</h3>

```htmlmixed_accessible
<form>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-3">
    <label for="user-name-3">User Name</label>
  </div>
  <div class="input-field" data-init="auto">
    <input type="email" id="email-3" placeholder="example@maildomain.com">
    <label for="email-3">Email</label>
  </div>
  <div class="input-field " data-init="auto">
    <input type="password" id="password-3">
    <label for="password-3">Password</label>
  </div>
  <div class="input-field flatpickr" data-init="auto">
    <input type="date" id="date-3" data-input>
    <label for="date-3">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field input-field--multiline" data-init="auto">
    <textarea id="multiline-3" data-min-rows="3" data-max-rows="10"></textarea>
    <label for="multiline-3">Multiline text</label>
  </div>
</form>
```

<p>For an example of how to use input fields in a form, please see <a href="/samples/form.html">samples/form</a>.</p>

<h3>Fixed Height</h3>

<p>Adding the class <code>input-field--fixed</code> to the <code>input-field</code> element will prevent the input field to animate the formfield, when it has focus.</p>

```htmlmixed_accessible
<form>
  <div class="input-field input-field--fixed" data-init="auto">
    <input type="text" id="user-name-2">
    <label for="user-name-2">User Name</label>
  </div>
  <div class="input-field input-field--fixed" data-init="auto">
    <input type="email" id="email-2">
    <label for="email-2">Email</label>
  </div>
  <div class="input-field input-field--fixed" data-init="auto">
    <input type="password" id="password-2">
    <label for="password-2">Password</label>
  </div>
  <div class="input-field input-field--fixed flatpickr" data-init="auto">
    <input type="date" id="date-2" data-input>
    <label for="date-2">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field input-field--multiline input-field--fixed" data-init="auto">
    <textarea id="multiline-2" data-min-rows="3" data-max-rows="10"></textarea>
    <label for="multiline-2">Multiline text</label>
  </div>
</form>
```

<h3>Read-only and disabled input fields.</h3>

<p>If you want to block the user from changing an input field add the class <code>readonly</code> or <code>disabled</code> to the input element.</p>

<p>The difference between the <code>readonly</code> and <code>disabled</code> attribute is that in <code>readonly</code> the user can tab to the element and copy the text from the input field.</p>

```htmlmixed
<form>
  <div class="input-field" data-init="auto">
    <input type="text" id="readonly" placeholder="Read-only" value="This text is read-only" readonly>
    <label for="readonly">Read-only</label>
  </div>
  <div class="input-field" data-init="auto">
    <input type="text" id="disabled" placeholder="Disabled" value="This text is disabled" disabled>
    <label for="disabled">Disabled</label>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "21.10.2015", "enable": ["21.10.2015"]}'>
    <input type="date" id="readonly-date" placeholder="Read-only Date" data-input readonly>
    <label for="readonly-date">Read-only Date</label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "21.10.2015"}'>
    <input type="date" id="disabled-date" placeholder="Disabled Date" data-input disabled>
    <label for="disabled-date">Disabled Date</label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-options='{"static": "true"}' data-init="auto">
    <input type="date" id="date-static" data-input>
    <label for="date-static">Static container
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle><i class="icon icon-009-calendar"></i></a>
  </div>
  <div class="input-field input-field--multiline" data-init="auto">
    <textarea id="multiline-readonly-1" placeholder="Read-only (Multiline)" readonly data-max-rows="3">This text is read-only and it is more than one line long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
    <label for="multiline-readonly-1">Read-only (Multiline)</label>
  </div>
  <div class="input-field input-field--multiline" data-init="auto">
    <textarea id="multiline-disabled-1" placeholder="Multiline Disabled" disabled data-max-rows="10">This text is read-only and it is more than one line long. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
    <label for="multiline-disabled-1">Disabled (Multiline)</label>
  </div>
</form>
```

<h3>Validate input fields</h3>

<p>Add the class <code>validate</code> to the input element to validate the field. The <code>validate</code> class leverages HTML5 validation and will add a <code>valid</code> and <code>invalid</code> class accordingly. If you don't want the valid and invalid states, just remove the validate class from your inputs.</p>

<p>If you have custom validations on a field add the <code>valid</code> or <code>invalid</code> class to the input element depending on your validation result.</p>

<p>Mark fields with asterix (\*) to denote them as required, make sure to explain the meaning of the asterix in a legend below the form in the current customer language.</p>

```htmlmixed_accessible
<form>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-valid" value="Valid input" class="validate valid" aria-required="true">
    <label for="user-name-valid">User Name *</label>
    <i class="icon icon-011-check-mark" aria-hidden="true"></i>
  </div>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-invalid" value="Invalid input (inline)" class="validate invalid invalid--inline" aria-required="true" aria-invalid="true">
    <label for="user-name-invalid">User Name *</label>
    <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
    <span class="sr-only">Error</span>
  </div>
  <div class="input-field" data-init="auto">
    <input type="email" id="email-invalid" value="Invalid input with message" class="validate invalid" aria-describedby="Error_1">
    <label for="email-invalid">Email</label>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      <span id="Error_1">Error Message</span>
    </div>
  </div>
  <div class="input-field" data-init="auto">
    <input type="text" id="user-name-invalid-2" value="Invalid input (inline) with message" class="validate invalid invalid--inline" aria-describedby="Error_2">
    <label for="user-name-invalid-2">User Name</label>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      <span id="Error_2">Error Message</span>
    </div>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "01.01.2018"}'>
    <input type="text" id="valid-date" data-input class="validate valid">
    <label for="valid-date">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <i class="icon icon-011-check-mark" aria-hidden="true"></i>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "01.01.3018"}'>
    <input type="text" id="invalid-date" data-input class="validate invalid invalid--inline" aria-describedby="Error_3">
    <label for="invalid-date">Invalid Date</label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      <span id="Error_3">Error Message</span>
    </div>
  </div>

  <span class="input-field__legend-mandatory">* Mandatory field</span>
</form>
```

<h3>Autocomplete input fields</h3>

```htmlmixed
<sdx-select
  placeholder="E.g. type 'script'..."
  label="Programming language"
  keyboard-behavior="autocomplete"
>
  <sdx-select-option value="actionscript">ActionScript</sdx-select-option>
  <sdx-select-option value="applescript">AppleScript</sdx-select-option>
  <sdx-select-option value="asp">Asp</sdx-select-option>
  <sdx-select-option value="assembly">Assembly</sdx-select-option>
  <sdx-select-option value="basic">BASIC</sdx-select-option>
  <sdx-select-option value="batch">Batch</sdx-select-option>
  <sdx-select-option value="c">C</sdx-select-option>
  <sdx-select-option value="cxx">C++</sdx-select-option>
  <sdx-select-option value="css">CSS</sdx-select-option>
  <sdx-select-option value="clojure">Clojure</sdx-select-option>
  <sdx-select-option value="cobol">COBOL</sdx-select-option>
  <sdx-select-option value="coldfusion">ColdFusion</sdx-select-option>
  <sdx-select-option value="erlang">Erlang</sdx-select-option>
  <sdx-select-option value="fortran">Fortran</sdx-select-option>
  <sdx-select-option value="groovy">Groovy</sdx-select-option>
  <sdx-select-option value="haskell">Haskell</sdx-select-option>
  <sdx-select-option value="html">HTML</sdx-select-option>
  <sdx-select-option value="java">Java</sdx-select-option>
  <sdx-select-option value="js">JavaScript</sdx-select-option>
  <sdx-select-option value="lisp">Lisp</sdx-select-option>
  <sdx-select-option value="perl">Perl</sdx-select-option>
  <sdx-select-option value="php">PHP</sdx-select-option>
  <sdx-select-option value="powershell">PowerShell</sdx-select-option>
  <sdx-select-option value="python">Python</sdx-select-option>
  <sdx-select-option value="ruby">Ruby</sdx-select-option>
  <sdx-select-option value="scala">Scala</sdx-select-option>
  <sdx-select-option value="scheme">Scheme</sdx-select-option>
  <sdx-select-option value="sql">SQL</sdx-select-option>
  <sdx-select-option value="tex">TeX</sdx-select-option>
  <sdx-select-option value="xml">XML</sdx-select-option>
  <sdx-select-option value="anyscript">AnyScript & OtherScript</sdx-select-option>
</sdx-select>
```

<p>Here is an example of how to connect the autocomplete to a real server (in this case, Apple iTunes):</p>

<div class="row">
  <div class="col-md-6 margin-bottom-2">
    <sdx-itunes-autocomplete></sdx-itunes-autocomplete>
  </div>
</div>

<p>This example is written in Stencil, but its principle can be applied to React, Angular, Vue or others:</p>

```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 (
      <sdx-select
        label="(Server autocomplete) Your favourite artist on iTunes"
        placeholder="Search artists..."
        changeCallback={(selection) => this.fetch(selection[0])}
        keyboardBehavior="autocomplete"
        filterFunction={() => true} // iTunes already filters, bypass local filter
        loading={this.loading}
      >
        {this.artists.map((artist) =>
          <sdx-select-option>{artist}</sdx-select-option>
        )}
      </sdx-select>
    )
  }
}
```

<h3 id="date-input-fields">Date input fields</h3>

<p>JSON configuration options can be passed to the flatpickr date picker library by setting the <code>data-options</code> attribute. To enable/disable dates by <code>function</code> or <code>Date</code>, you need to pass the options to the <code>InputField</code> using the JavaScript API. More examples: <a href="https://flatpickr.js.org/examples/" target="_blank">https://flatpickr.js.org/examples/</a></p>

```htmlmixed_accessible
<form>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "de"}'>
    <input type="date" id="date-de" placeholder="German (default)" data-input>
    <label for="date-de">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019) German format</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "fr"}'>
    <input type="date" id="date-fr" placeholder="French" data-input>
    <label for="date-fr">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019) French format</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "it"}'>
    <input type="date" id="date-it" placeholder="Italian" data-input>
    <label for="date-it">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019) Italian format</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"locale": "en"}'>
    <input type="date" id="date-en" placeholder="English" data-input>
    <label for="date-en">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019) English format</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"defaultDate": "21.10.2015"}'>
    <input type="date" id="date-default-date" placeholder="Default date" data-input>
    <label for="date-default-date">Default Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"minDate": "today"}'>
    <input type="date" id="date-min-date" placeholder="Not in the past" data-input>
    <label for="date-min-date">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"maxDate": "today"}'>
    <input type="date" id="date-max-date" placeholder="Not in the future" data-input>
    <label for="date-max-date">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr">
    <input type="date" id="date-no-weekends" placeholder="Weekdays only" data-input>
    <label for="date-no-weekends">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var options = {
        disable: [
          function(date) {
            return date.getDay() > 5 || date.getDay() < 1;
          }
        ]
      }
      var element = document.getElementById("date-no-weekends");
      var field = new sdx.InputField(element, options);
    });
  </script>
  <div class="input-field flatpickr">
    <input type="date" id="date-next-week" placeholder="In the next 7 days" data-input>
    <label for="date-next-week">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var options = {
        minDate: "today",
        maxDate: new Date().fp_incr(7)
      }
      var element = document.getElementById("date-next-week");
      var field = new sdx.InputField(element, options);
    });
  </script>
  <div class="input-field flatpickr" data-init="auto" data-options='{"mode": "multiple"}'>
    <input type="date" id="date-multiple" placeholder="Multiple dates" data-input>
    <label for="date-multiple">Dates
      <span class="sr-only">Enter a valid date in day, month, year (for example 13.07.2019, 15.07.2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
  <div class="input-field flatpickr" data-init="auto" data-options='{"altInput": true, "altFormat": "l j. F, Y"}'>
    <input type="date" id="date-alt" placeholder="Alternative Formatting" data-input>
    <label for="date-alt">Date
      <span class="sr-only">Enter a valid date in day, month, year (for example Samstag 20. Juli, 2019)</span>
    </label>
    <a data-toggle>
      <i class="icon icon-009-calendar" aria-hidden="true"></i>
    </a>
  </div>
</form>
```

<h3>Example of a form in a responsive grid</h3>

```htmlmixed_accessible
<form>
  <div class="row">
    <div class="col-md-12">
      <div class="input-field" data-init="auto">
        <input type="text" id="name">
        <label for="name">Name</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="input-field" data-init="auto">
        <input type="text" id="forename">
        <label for="forename">Forename</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-9">
      <div class="input-field" data-init="auto">
        <input type="text" id="street">
        <label for="street">Street</label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="input-field" data-init="auto">
        <input type="text" id="number">
        <label for="number">No.</label>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="input-field" data-init="auto">
        <input type="number" id="zip">
        <label for="zip">ZIP</label>
      </div>
    </div>
    <div class="col-md-9">
      <div class="input-field" data-init="auto">
        <input type="text" id="city">
         <label for="city">City</label>
      </div>
    </div>
  </div>
</form>
```
*/
  /*doc
---
title: Checkboxes
name: 02-components-050-form-20-checkboxes
category: Components - Checkboxes
---

<p>Checkboxes let users select from a small set of options, or make a binary decision (for example accepting terms and conditions).</p>

<form>
  <sdx-input-group type="checkbox">
    <div class="row">
      <div class="col">
        <sdx-input-item checked>
          Option 1
          <div slot="description">This is my supportive text.</div>
        </sdx-input-item>
      </div>
    </div>
    <div class="row margin-top-2">
      <div class="col">
        <sdx-input-item>Option 2</sdx-input-item>
      </div>
    </div>
  </sdx-input-group>
</form>


```section_design
```

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

  <h3>Checkbox states</h3>

  <p>Colour and the check indicate that a checkbox is selected, which means that it is active. In addition it has hover effects.</p>
  <p>As checkboxes are an optional choice there is normally no need of an error state. There are rare cases (e.g. in a survey) where the user has to select at least one checkbox.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_normal.jpg">
      <span class="fig-caption">Checkbox states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_error.jpg">
      <span class="fig-caption">Error state</span>
    </div>
  </div>

  <h3>Multi-line and supporting description label</h3>

  <p>Multi-line labels have so much text that they need more than one line. For consistency reasons the same font size is used in all lines. <br />If a description with more detail is needed, a description text with smaller font size is displayed below the label text.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_multiline_description.jpg">
      <span class="fig-caption">Multi-line label</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_supporting_description.jpg">
      <span class="fig-caption">Supporting description label</span>
    </div>
  </div>

  <h3>Checkboxes side by side</h3>

  <p>Checkboxes can also be displayed next to each other.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_sidebyside.jpg">
      <span class="fig-caption">Checkboxes side by side</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Minimum spacing</h3>

  <p>The horizontal spacing between the checkbox itself and the label is 16px.<br />The vertical spacing between different checkboxes is 24px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_dimension.jpg">
      <span class="fig-caption">Spacing</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_multi+desc_dimension.jpg">
      <span class="fig-caption">Spacing multi-line</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_sidebyside_dimension.jpg">
      <span class="fig-caption">Spacing side by side checkboxes</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_1-line_typo.jpg">
      <span class="fig-caption">Typography</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/checkboxes/Checkboxes_multi+desc_typo.jpg">
      <span class="fig-caption">Checkboxes with supporting description label</span>
    </div>
  </div>
</div>


```section_develop
```

```htmlmixed_webcomponent_sdx-input-item_accessible
<!-- Checkbox standalone -->
<sdx-input-item type="checkbox" change-callback="console.log('Checked:', arguments[0])">
  Option 1
</sdx-input-item>

<div class="margin-bottom-4"></div>

<!-- Checkbox group (inline) -->
<sdx-input-group type="checkbox" label="Checkbox group (inline)" inline change-callback="console.log('Checked:', arguments[0])">
  <sdx-input-item value="option1" checked>Option 1</sdx-input-item>
  <sdx-input-item value="option2">Option 2</sdx-input-item>
  <sdx-input-item value="option3" disabled>Option 3</sdx-input-item>
</sdx-input-group>

<div class="margin-bottom-4"></div>

<!-- Checkbox group (in a grid) -->
<sdx-input-group type="checkbox" label="Checkbox group (in a grid)">
  <div class="row">
    <div class="col">
      <sdx-input-item>
        Option 1<br>
        Multiple lines are also supported
      </sdx-input-item>
    </div>
  </div>
  <div class="row margin-top-2">
    <div class="col">
      <sdx-input-item checked>
        Option 2
        <div slot="description">Additional description text for more information.</div>
      </sdx-input-item>
    </div>
  </div>
  <div class="row margin-top-2">
    <div class="col">
      <sdx-input-item disabled>
        Option 3
        <div slot="description">You can't check me.</div>
      </sdx-input-item>
    </div>
  </div>
  <div class="row margin-top-2">
    <div class="col">
      <sdx-input-item disabled checked>
        Option 4
        <div slot="description">You can't uncheck me.</div>
      </sdx-input-item>
    </div>
  </div>
</sdx-input-group>
```

<p>For an example of how to use checkboxes in a form, please see <a href="/samples/form.html">samples/form</a>.</p>

<h2>Validate checkboxes</h2>

```htmlmixed_accessible
<form>
  <div class="checkbox validate invalid">
    <input type='checkbox' name='dummy' id='checkbox7-1' aria-describedby="Error_1">
    <label for='checkbox7-1'>Option 1</label>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      <span id="Error_1">Error Message</span>
    </div>
  </div>

  <div class="checkbox validate invalid">
    <input type='checkbox' name='dummy' id='checkbox7-2' aria-describedby="supportingText-1 Error_2">
    <label for='checkbox7-2'>Option 2<br/>Second Line</label>
    <p id="supportingText-1">Supporting description text</p>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      <span id="Error_2">Error Message</span>
    </div>
  </div>
</form>
```

<h3>Validate checkbox group</h3>

```htmlmixed_accessible
<form>
  <div class="form-group">
    <label>Checkbox group</label>
    <div class="checkbox validate invalid">
      <input type='checkbox' name='dummy' id='checkbox8-1' aria-describedby="Error_1">
      <label for='checkbox8-1'>Option 1</label>
      <div class="message">
        <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
        <span id="Error_1">Error Message</span>
      </div>
    </div>
    <div class="checkbox validate invalid">
      <input type='checkbox' name='dummy' id='checkbox8-2' aria-describedby="Error_2">
      <label for='checkbox8-2'>Option 2</label>
      <div class="message">
        <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
        <span id="Error_2">Error Message</span>
      </div>
    </div>
  </div>
</form>
```
*/
  /*doc
---
title: Radio Buttons
name: 02-components-140-form-30-radiobuttons
category: Components - Radio Buttons
---

<p>Radio buttons are used to ask the user multiple choice questions where they can make a single selection. Because radio buttons list out the options the user has, it provides a clearer overview of their choices than a dropdown menu. Radio buttons are also useful when the text label is long and might be obscured in a dropdown menu. If you are offering more than four options to users, consider using a dropdown menu.</p>

<form>
  <sdx-input-group type="radio">
    <div class="row">
      <div class="col">
        <sdx-input-item checked>
          Option 1
          <div slot="description">This is my supportive text.</div>
        </sdx-input-item>
      </div>
    </div>
    <div class="row margin-top-2">
      <div class="col">
        <sdx-input-item>Option 2</sdx-input-item>
      </div>
    </div>
  </sdx-input-group>
</form>


```section_design
```

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

  <h3>States</h3>

  <p>Colour and the dot indicate that a radio button is selected, which means that it is active. In addition it has hover effects.</p>

  <p>As radio buttons are a mandatory choice and very often preselected there is normally no need of an error state. Only in rare cases where radiobuttons are not preselected there is a need for an error state.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group@2x-2.png">
      <span class="fig-caption">Normal and error states</span>
    </div>
  </div>

  <h3>Multiline and supporting line of text</h3>

  <p>Multi-line labels have so much text that they need more than one line. For consistency reasons the same font size is used in all lines.<br />If a description with more detail is needed, a description text with smaller font size is displayed below the label text.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_multi+description.png">
      <span class="fig-caption">Multiline of text</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_supporting_text.png">
      <span class="fig-caption">Supporting line of text</span>
    </div>
  </div>

  <h3>Radio buttons side by side</h3>

  <p>Radio button can also be displayed next to each other.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border padding-2" src="./theme-build/img/design/radiobuttons/Radiobuttons_sidebyside.png">
      <span class="fig-caption">Radio buttons side by side</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Up to four options on mobile</h3>

  <p>If you are offering more than four options to users, consider using a <a href="components_-_menu_(dropdown).html">dropdown menu</a>.</p>

  <h3>Spacings</h3>

  <p>The horizontal spacing between the radio buttons itself and the label is 16px. <br /> The vertical spacing between different radio buttons is 24px.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group-12@2x-2.png">
      <span class="fig-caption">Spacing between radio buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border padding-2" src="./theme-build/img/design/radiobuttons/Radiobuttons_sidebyside_dimension.png">
      <span class="fig-caption">Spacing between radio buttons beside each other</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_multi+desc_dimension.png">
      <span class="fig-caption">Spaces for Multi-line labels</span>
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Group-15@2x-3.png">
      <span class="fig-caption">Typography</span>
    </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/radiobuttons/Radiobuttons_multi+desc_typo.png" style="border: 1px solid #d6d6d6;">
      <span class="fig-caption">Typography of supporting text</span>
    </div>
  </div>
</div>


```section_develop
```

```htmlmixed_webcomponent_sdx-input-item_accessible
<!-- Radio group (inline) -->
<sdx-input-group type="radio" label="Radio group (inline)" inline change-callback="console.log('Checked:', arguments[0])">
  <sdx-input-item value="option1">Option 1</sdx-input-item>
  <sdx-input-item value="option2">Option 2</sdx-input-item>
  <sdx-input-item value="option3" checked disabled>Option 3</sdx-input-item>
</sdx-input-group>

<div class="margin-bottom-4"></div>

<!-- Radio group (in a grid) -->
<sdx-input-group type="radio" label="Radio group (in a grid)">
  <div class="row">
    <div class="col">
      <sdx-input-item>
        Option 1<br>
        Multiple lines are also supported
      </sdx-input-item>
    </div>
  </div>
  <div class="row margin-top-2">
    <div class="col">
      <sdx-input-item checked>
        Option 2
        <div slot="description">Additional description text for more information.</div>
      </sdx-input-item>
    </div>
  </div>
  <div class="row margin-top-2">
    <div class="col">
      <sdx-input-item disabled>
        Option 3
        <div slot="description">You can't choose me</div>
      </sdx-input-item>
    </div>
  </div>
</sdx-input-group>
```

<p>For an example of how to use radio buttons in a form, please see <a href="/samples/form.html">samples/form</a>.</p>

<h3>Validate radio buttons</h3>

```htmlmixed_accessible
<form>
  <div class="form-group form-inline validate invalid" role="group" aria-describedby="Error_1">
    <label>Radio group</label>
    <div class="radio">
      <input type='radio' name='dummy' id='radio8-1'>
      <label for='radio8-1'>Option 1</label>
    </div>
    <div class="radio">
      <input type='radio' name='dummy' id='radio8-2'>
      <label for='radio8-2'>Option 2</label>
    </div>
    <div class="message">
      <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
      <span id="Error_1">Error Message</span>
    </div>
  </div>
</form>
```
*/
  /*doc
---
title: Switches
name: 02-components-170-switches-01-styles
category: Components - Switches
---

<p>Switches are used to change the status of an option or setting between on (active) and off (inactive). <br/>They’re always shown with descriptive text thats used to explain their function, and feature a green active state to help confirm their status.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
  <h4 class="margin-top-3">Enabled switches</h4>
      <div>
        <div>
          <div class="switch padding-top-1" role="switch">
            <input type="checkbox" name="switch01" id="switch-01">
            <label for="switch-01">Switch with supporting text</label>
          </div>
          <div class="switch margin-top-3" role="switch">
            <input type="checkbox" name="switch02" id="switch-02" checked>
            <label for="switch-02">Switch with supporting text</label>
          </div>
        </div>
      </div>
  </div>
  <div class="col-xs-12 col-lg-6">
  <h4 class="margin-top-3">Disabled switches</h4>
    <div>
      <div>
        <div class="switch padding-top-1" role="switch">
          <input type="checkbox" name="switch03" id="switch-03" disabled>
          <label for="switch-03">Disabled switch with supporting text</label>
        </div>
        <div class="switch margin-top-3" role="switch">
          <input type="checkbox" name="switch04" id="switch-04" checked disabled>
          <label for="switch-04">Disabled switch with supporting text</label>
        </div>
      </div>
    </div>
  </div>
</div>


```section_design
```

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

  <h3>Off states</h3>

  <p>When in the off state, switches are positioned to the left, with a grey keyline to indicate their sliding behavior. A grey keyline around the white button helps to maintain the accessibility of the switch on all background colours.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/switch/switches_off.jpg">
        <span class="fig-caption">Inactive states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>On states</h3>

  <p>In their on state, switches move to the right. As they transition into position, a green space is revealed behind the button. Using the interaction green helps to confirm the active state of the switch without the need for additional labelling.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/switch/switches_on.jpg">
      <span class="fig-caption">Active states</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Vertical spacing</h3>

  <p>There is a 12px margin between switches.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/switch/Group-32@2x-3.jpg">
      <span class="fig-caption">Spacing between listed switches</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Horizontal spacing</h3>

  <p>There is 20px between switches and labels.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/switch/Group-33@2x-4.jpg">
      <span class="fig-caption">Spacing between switches and text labels</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/switch/Group-34@2x-3.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/switch/Group-35@2x-2.jpg">
        <span class="fig-caption">Dark variant</span>
      </div>
  </div>
</div>


```section_develop
```

<p>Use the following switch as a simple on/off toggle switch.</p>

```htmlmixed_accessible
<div class="switch" role="switch">
  <input type='checkbox' name='switch05' id='switch-05'>
  <label for='switch-05'>
    Switch with supporting text
  </label>
</div>
<div class="switch" role="switch">
  <input type='checkbox' name='switch06' id='switch-06' checked>
  <label for='switch-06'>
     Switch with supporting text
  </label>
</div>
<div class="switch" role="switch">
  <input type='checkbox' name='switch07' id='switch-07' checked>
  <label for='switch-07'>(This text is read by screen reader only)
      <span class="sr-only">This text is read by screen reader only.</span>
  </label>
</div>
<div class="switch" role="switch">
  <input type='checkbox' name='switch08' id='switch-08' disabled>
  <label for='switch-08'>
    Disabled switch with supporting text
  </label>
</div>
<div class="switch" role="switch">
  <input type='checkbox' name='switch09' id='switch-09' checked disabled>
  <label for='switch-09'>
    Disabled switch with supporting text
  </label>
</div>
```

<p>Switch with label on the left side</p>

```htmlmixed_accessible
<div class="switch switch--left" role="switch">
  <input type='checkbox' name='switch10' id='switch-10'>
  <label for='switch-10'>
    Switch with supporting text
  </label>
</div>
```
<h3>Switch on dark backgrounds</h3>

<p>Switches are also available on dark backgrounds, just annotate the parent background element with the <code>.bg--dark</code> class and the switches will automatically adjust their styling accoordingly.</p>

```htmlmixed_accessible
<div class="bg bg--dark">
  <div class="switch">
    <input type='checkbox' name='switch11' id='switch-11'>
    <label for='switch-11'>
      Switch with supporting text
    </label>
  </div>
  <div class="switch">
    <input type='checkbox' name='switch12' id='switch-12' checked>
    <label for='switch-12'>
      Switch with supporting text
    </label>
  </div>
  <div class="switch">
    <input type='checkbox' name='switch13' id='switch-13' disabled>
    <label for='switch-13'>
      Disabled switch with supporting text
    </label>
  </div>
  <div class="switch">
    <input type='checkbox' name='switch14' id='switch-14' checked disabled>
    <label for='switch-14'>
      Disabled switch with supporting text
    </label>
  </div>
</div>
```
*/
  /*doc
---
title: Menu (dropdown)
name: 02-components-095-select-40-overview
category: Components - Menu (dropdown)
---

<p>Use dropdown menus to contain information without overwhelming the user. When asking users to make multiple separate selections in forms or settings, dropdown menus help to reduce the amount of information displayed on screen at any one time. This makes content more digestible and focused.</p>

<div class="row">
  <div class="col-md-6 margin-bottom-2">
    <sdx-select label="What is your choice?" placeholder="Choose your option...">
      <sdx-select-option value="option1">Option 1</sdx-select-option>
      <sdx-select-option value="option2">Option 2</sdx-select-option>
      <sdx-select-option value="option3">Option 3</sdx-select-option>
      <sdx-select-option value="option4">Option 4</sdx-select-option>
      <sdx-select-option value="option5">Option 5</sdx-select-option>
    </sdx-select>
  </div>
</div>

<div class="row">
  <div class="col-md-6">
    <sdx-select multiple label="What are your choices?" placeholder="Choose your options...">
      <sdx-select-option value="option1">Option 1</sdx-select-option>
      <sdx-select-option value="option2">Option 2</sdx-select-option>
      <sdx-select-option value="option3">Option 3</sdx-select-option>
      <sdx-select-option value="option4">Option 4</sdx-select-option>
      <sdx-select-option value="option5">Option 5</sdx-select-option>
    </sdx-select>
  </div>
</div>


```section_design
```

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

  <h3>Space between dropdowns</h3>

  <p>A minimum of 16px are required between dropdown boxes.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-18@2x-8.jpg">
      <span class="fig-caption">16px are required between dropdown boxes</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3 class="margin-top-4">Relationship with other elements</h3>

  <p>Each collection of dropdown labels has 24px between them and other elements.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menus-dropdown/Group-19@2x-3.jpg">
      <span class="fig-caption">Relationship with other elements</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>


```section_develop
```

```htmlmixed_webcomponent_sdx-select
<sdx-select
  placeholder="Choose your car..."
  label="Which car will you buy today?"
  change-callback="console.log('Selected:', arguments)"
>
  <sdx-select-optgroup name="Swedish cars">
    <sdx-select-option value="saab">Saab</sdx-select-option>
    <sdx-select-option value="volvo" selected>Volvo</sdx-select-option>
  </sdx-select-optgroup>
  <sdx-select-optgroup name="German cars">
    <sdx-select-option value="bmw">BMW</sdx-select-option>
    <sdx-select-option value="mercedes">Mercedes</sdx-select-option>
    <sdx-select-option value="vw">VW</sdx-select-option>
  </sdx-select-optgroup>
  <sdx-select-optgroup name="Other cars">
    <sdx-select-option value="chevrolet">Chevrolet</sdx-select-option>
    <sdx-select-option value="chrysler">Chrysler</sdx-select-option>
    <sdx-select-option value="mazda">Mazda</sdx-select-option>
    <sdx-select-option value="mg">MG</sdx-select-option>
    <sdx-select-option value="toyota" disabled>Toyota</sdx-select-option>
  </sdx-select-optgroup>
</sdx-select>
```

<p>For more sophisticated examples, please see <a href="/samples/form.html">samples/form</a>.</p>

<h2>Variations</h2>

<h3>On a dark background</h3>

```htmlmixed
<div class="bg bg--dark">
  <sdx-select label="What is your choice?" background-theme="dark">
    <sdx-select-option value="option1">Option 1</sdx-select-option>
    <sdx-select-option value="option2">Option 2</sdx-select-option>
    <sdx-select-option value="option3">Option 3</sdx-select-option>
  </sdx-select>
</div>
```

<h3>Validate</h3>

```htmlmixed
<div class="select validate invalid">
  <label for="select-3">Your choice</label>
  <select id="select-3" data-init="auto" tabindex="0">
    <option disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <div class="message">
    <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
    Error Message
  </div>
</div>
```
*/
  /*doc
---
title: Buttons
name: 02-components-015-button-01-buttons
category: Components - Buttons
---

<p>Buttons are used as calls to action in page, they contain text and icons that help explain the buttons functionality. They’re more visually dominant than text links and help to highlight and clarify elements that are interactive.</p>

<div class="padding-bottom-4 button-group button-group--responsive">
   <button class="button button--primary">Primary</button>
   <button class="button button--secondary">Secondary</button>
   <button class="button button--confirm">Confirm</button>
   <button class="button button__icon button--primary">
     <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
     Order Now
   </button>
</div>


```section_design
```

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

  <h3>Primary Button</h3>

  <p>Primary buttons are used in the majority of cases. The interaction blue signifies that the buttons are clickable and have a hover state.
  Icons can be used in buttons to help give their funcationality more clarity at a glance.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <div class="text-align-center padding-3">
        <button class="button button--primary">Primary</button><br/><br/>
        <input class="button button--primary" type="submit" value="Unselectable" disabled="disabled"><br/><br/>
        <button class="button button__icon button--primary">
         <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
         Order
       </button>
      </div>
      <div class="fig-caption">Light variant</div>
    </div>
    <div class="col-xs-12 col-lg-6">
      <div class="bg bg--dark text-align-center padding-3">
        <div>
          <button class="button button--primary">Primary</button><br/><br/>
          <input class="button button--primary" type="submit" value="Unselectable" disabled="disabled"><br/><br/>
          <button class="button button__icon button--primary">
           <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
           Order
         </button>
        </div>
      </div>
      <div class="fig-caption">Dark Variant</div>
    </div>
  </div>

  <h3>Secondary button</h3>

  <p>Secondary buttons are used in conjunction with primary buttons to indicate that the button is of lower priority.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <div class="text-align-center padding-3">
        <button class="button button--secondary">Secondary</button><br/><br/>
        <input class="button button--secondary" type="submit" value="Unselectable" disabled="disabled"><br/><br/>
        <button class="button button__icon button--secondary">
         <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
         Order
       </button>
      </div>
      <div class="fig-caption">Light variant</div>
    </div>
    <div class="col-xs-12 col-lg-6">
      <div class="bg bg--dark text-align-center padding-3"">
        <div>
          <button class="button button--secondary">Secondary</button><br/><br/>
          <input class="button button--secondary" type="submit" value="Unselectable" disabled="disabled"><br/><br/>
          <button class="button button__icon button--secondary">
           <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
           Order
         </button>
        </div>
      </div>
      <div class="fig-caption">Dark Variant</div>
    </div>
  </div>

  <h3>Confirmation button</h3>

  <p>Confirmation buttons are used for the final step in a process to indicate that an action is final and significant. For example, an ‘Order’ button at the end of a checkout process or the upload button for a file.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <div class="text-align-center padding-3">
        <button class="button button--confirm">Confirm</button><br/><br/>
        <input class="button button--confirm" type="submit" value="Unselectable" disabled="disabled"><br/><br/>
        <button class="button button__icon button--confirm">
         <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
         Order
       </button>
      </div>
      <div class="fig-caption">Light variant</div>
    </div>
    <div class="col-xs-12 col-lg-6">
      <div class="bg bg--dark text-align-center padding-3">
        <div>
          <button class="button button--confirm">Confirm</button><br/><br/>
          <input class="button button--confirm" type="submit" value="Unselectable" disabled="disabled"><br/><br/>
          <button class="button button__icon button--confirm">
           <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
           Order
         </button>
        </div>
      </div>
      <div class="fig-caption">Dark Variant</div>
    </div>
  </div>

  <h3>Image backgrounds</h3>

  <p>Buttons can be used over imagery. Always ensure high contrast between the imagery and the buttons by using the appropriate light or dark button variation.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/buttons/Bitmap-1@2x.jpg">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/buttons/Bitmap@2x-1.jpg">
      <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h2>Rules</h2>

  <p>Buttons can be used over imagery. Always ensure high contrast between the imagery and the buttons by using the appropriate light or dark button variation.</p>

  <h3>Minimum Size</h3>

  <p>Buttons all have a minimum widths regardless of the word length, this ensures it all our buttons have a standard size.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
     <img class="img-responsive" src="./theme-build/img/design/buttons/Group-28@2x-2.jpg">
     <span class="fig-caption">Minimum button width</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Optical centering</h3>

  <p>Buttons with icons should be optically aligned to ensure that the text and icon as a pair are aligned to the centre of the button.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
   <img class="img-responsive"  src="./theme-build/img/design/buttons/Group-29@2x-2.jpg" >
     <span class="fig-caption">Optical alignment with icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Relationship with other buttons</h3>

  <p>Buttons feature a minimum of 14px padding between each other to help create clear click targets.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
       <img class="img-responsive" src="./theme-build/img/design/buttons/Group-30@2x-2.jpg" >
        <span class="fig-caption">Relationship with other buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Full width spacing</h3>

  <p>Buttons can also be used full width within a container or aligning to the grid. The text remains centrally aligned.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
        <img class="img-responsive" src="./theme-build/img/design/buttons/Group-31@2x-2.jpg" >
        <span class="fig-caption">Full width buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-32@2x.png">
      <span class="fig-caption">Light Variant</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/buttons/Group-33@2x-2.jpg">
        <span class="fig-caption">Dark Variant</span>
    </div>
  </div>

  <h3>Scroll to Top Button</h3>

  <div class="row margin-bottom-3">
    <div class="col-xs-6 col-md-4 col-lg-2 bg-white text-align-center padding-4">
      <sdx-scroll-to-top position="static"/>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-2 bg-horizon text-align-center padding-4">
      <sdx-scroll-to-top position="static"/>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-2 bg-aluminum text-align-center padding-4">
      <sdx-scroll-to-top position="static"/>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-2 bg-gray text-align-center padding-4">
      <sdx-scroll-to-top position="static"/>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-2 bg-blue text-align-center padding-4">
      <sdx-scroll-to-top position="static"/>
    </div>
    <div class="col-xs-6 col-md-4 col-lg-2 bg-navy text-align-center padding-4">
      <sdx-scroll-to-top position="static"/>
    </div>
  </div>
  <div class="fig-caption">Scroll to Top Button on differently coloured backgrounds</div>
</div>


```section_develop
```

<h2>Button usage</h2>

<p>Use the button class within the <code>&lt;button&gt;</code> element. This is very important, because of all the built-in events (e.g. keyboard events) of the button tag.</p>
<p>If your button is actually a link to another page, please use the <code>&lt;a&gt;</code> element, while if your button performs an action, such as submitting a form or triggering some javascript event, then use a <code>&lt;button&gt;</code> element.</p>
<p>For an example of how to use buttons in a form, please see <a href="/samples/form.html">samples/form</a>.</p>

```htmlmixed_accessible
<div class="button-group button-group--responsive">
  <button class="button button--primary">Submit</button>
  <a class="button button--secondary" href="javascript:void(0);">Link</a>
</div>
```

<h3>Dark background</h3>

<p>Buttons on dark background.</p>

```htmlmixed_accessible
<div class="bg bg--dark">
  <div class="button-group button-group--responsive">
    <button class="button button--primary">Submit</button>
    <a class="button button--secondary" href="javascript:void(0);">Link</a>
  </div>
</div>
```

<h2>Variations</h2>

<p>There are three basic buttons styles: Primary, secondary and confirm. Simply apply the style modifier class for the desired action.</p>

```htmlmixed_accessible
<div class="button-group button-group--responsive">
  <!-- Primary button -->
  <button class="button button--primary">Primary</button>
  <button class="button button--primary" disabled>Unselectable</button>
</div>
<div class="button-group button-group--responsive">
  <!-- Secondary button -->
  <button class="button button--secondary">Secondary</button>
  <button class="button button--secondary" disabled>Unselectable</button>
</div>
<div class="button-group button-group--responsive">
  <!-- Confirm button -->
  <button class="button button--confirm">Confirm</button>
  <button class="button button--confirm" disabled>Unselectable</button>
</div>
```

<h3>Dark background</h3>

<p>Button styles on dark background.</p>

```htmlmixed_accessible
<div class="bg bg--dark">
  <div class="button-group button-group--responsive">
    <!-- Primary button -->
    <button class="button button--primary">Primary</button>
    <button class="button button--primary" disabled>Unselectable</button>
  </div>
  <div class="button-group button-group--responsive">
    <!-- Secondary button -->
    <button class="button button--secondary">Secondary</button>
    <button class="button button--secondary" disabled>Unselectable</button>
  </div>
  <div class="button-group button-group--responsive">
    <!-- Confirm button -->
    <button class="button button--confirm">Confirm</button>
    <button class="button button--confirm" disabled>Unselectable</button>
  </div>
</div>
```

<h3>Responsive Button</h3>

<p>To make a button responsive add the <code>button--responsive</code> modifier.</p>

```htmlmixed_accessible
<div class="button-group button-group--responsive">
  <button type="button" class="button button--primary button--responsive">Responsive button</button>
  <button type="button" class="button button--secondary button--responsive">Responsive button</button>
</div>
```

<h3>Button with Icons</h3>

```htmlmixed_accessible
<div class="button-group button-group--responsive">
  <button class="button button__icon button--primary">
    <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
    Order
  </button>
  <button class="button button__icon button--secondary">
    <i class="icon icon-079-shopping-trolley" aria-hidden="true"></i>
    Order Now
  </button>
</div>
```

<h3>Full Width Button</h3>

<p>Full width buttons should only be used in smaller containers. Example: sidebar <br/>
  To make a button use 100% of the container width add the <code>button--full</code> modifier.</p>

```htmlmixed_accessible
<div class="button-group button-group--responsive">
  <button type="button" class="button button--primary button--full">Full width button</button>
  <button type="button" class="button button--secondary button--full">Full width button</button>
</div>
```

<h3>Button Group</h3>

<p>Buttons should be placed inside a <code>button-group</code>. Button groups with the <code>button-group--responsive</code> modifier are always right aligned and reversed in order. This makes the first button in the DOM (primary) displayed as the first button on the right on desktops and on the top on mobiles.</p>

<h4>Full Width of button groups</h4>

<p>To make the buttons use the full width of a group, add the modifier <code>button-group--fill</code>.</p>

```htmlmixed_accessible
<!-- Full width button group -->
<div class="button-group button-group--fill button-group--responsive">
  <button class="button button--primary" type="submit">Button</button>
  <button class="button button--secondary" type="submit">Button</button>
</div>
```

<h3>Scroll to Top Button</h3>

This web component should preferrably be put either right to the beginning or the end within the body-tag, but can be put anywhere in between if need be.

```htmlmixed_webcomponent_sdx-scroll-to-top_no_preview
  <sdx-scroll-to-top />
```
*/
  /*doc
---
title: Dividers
name: 02-components-060-divider
category: Components - Dividers
---

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

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

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

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


```section_design
```

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

  <h3>Grey dividers</h3>

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

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

  <h2>Rules</h2>

  <h3>Vertical spacing</h3>

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

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

  <h3>Minimum width</h3>

  <p>The divider is always 100% of the text width.</p>

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


```section_develop
```

<p>Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.</p>

<p>SDX dividers default to "full-bleed", eg (full width).</p>

```htmlmixed_accessible
<p>This text is above the divider</p>
<hr aria-hidden="true" />
<p>This text is below the divider</p>
```

<h4>Light background dividers</h4>

<p>There are three tiers of contrast on light backgrounds for divider lines, pick the most appropriate for your designs.</p>

```htmlmixed_accessible
<p>Light gray divider</p>
<div class="divider divider--light-gray"></div>
<p>Mid gray divider</p>
<div class="divider divider--mid-gray"></div>
<p>Dark gray divider</p>
<div class="divider divider--dark-gray"></div>
```

<h4>Dark background dividers</h4>

<p>There is only one contrast option on darker backgrounds</p>

```htmlmixed_accessible
<div class="bg bg--dark">
  <p>This text is above the divider</p>
  <div class="divider"></div>
  <p>This text is below the divider</p>
</div>
```
*/
  /*doc
---
title: Footer
name: 02-components-070-footer
category: Components - Footer
---

<style>
  .cortana-content-wrapper .footer .container {
    width: auto;
  }
</style>

<p>Footers are positioned at the bottom of a page or app and feature links to the primary areas of the product. Footers usually include legal information, as well as links to the relevant social media platforms. Use footers to enable users to get back to core site pages if they reach the end of a page.</p>

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


```section_design
```

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

  <h3>Full footer</h3>

  <p>Full footer is recommended for medium and large sites or products where there are many links. This helps the user can easily navigate the site. There are two colour options for the footer. The dark version is the preferred option. Its contrast to our predominantly light look and feel means it creates a clear end point to pages. The light version, however, can be used if the dark footer feels visually incoherent with your design. The footer colour choice should be used consistently and should never change within that site or product.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-16@2x-1.jpg">
        <span class="fig-caption">Dark footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-21@2x.jpg">
        <span class="fig-caption">Light footer</span>
    </div>
  </div>

  <h3>Compact footer</h3>

  <p>The light version of the footer is to be used for smaller products that contain less links and information.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-22@2x.jpg">
        <span class="fig-caption">Dark compact footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-23@2x-1.jpg">
      <span class="fig-caption">Light compact footer</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Logo position</h3>

  <p>At breakpoints that have a mobile view the footer stacks and centres with the Swisscom logo at the top.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-24@2x-1.jpg">
      <span class="fig-caption">Collapsed dark footer on mobile</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Monochrome links</h3>

  <p>Footer text links use monochrome interactive states, differing from conventional text link and navigation link styles.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-25@2x-1.jpg">
      <span class="fig-caption">Text links within the footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Grouping elements</h3>

  <p>Text links are grouped into categories, with the category at the top of each column.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-26@2x-1.jpg">
      <span class="fig-caption">Grouped text links</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>List limit</h3>

  <p>Lists within the footer should have a maximum of 6 rows, any more and a ‘More...’ link should appear as the last list item.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/footer/Group-27@2x-2.jpg">
      <span class="fig-caption">Category list within the footer</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-9-Copy-2@2x.jpg">
        <span class="fig-caption">Typography full footer dark variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-13@2x.jpg">
        <span class="fig-caption">Typography full footer light variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-14@2x.jpg">
        <span class="fig-caption">Typography compact footer dark variant</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/footer/Group-15@2x-1.jpg">
        <span class="fig-caption">Typography compact footer light variant</span>
      </div>
  </div>
</div>


```section_develop
```

<h2>Colour options</h2>

<p>There are two colour options for the footer. The dark grey version is the preferred option, and its contrast to our predominantly light look and feel means it provides us with a clear end point to pages. The light version, however, can be used if the dark footer feels visually incoherent in your specific use case. Footers should be colours consistently across the entire services, and should never change.</p>

<h2>Footer Compact</h2>

<style>
  .cortana-content-wrapper .footer--compact {
    padding: 0 30px;
  }
</style>

<p>Use this footer if there isn't a need for lots of links. A responsive test page for the compact footer is available at <a href="/samples/footer-compact.html">samples/footer-compact</a>.</p>

```htmlmixed_accessible
<footer class="footer footer--compact">
    <div class="container">
        <a href="javascript:void(0);" class="logo" tabindex="-1">
            <span class="logo-lifeform" aria-label="Swisscom Logo"></span>
        </a>
        <ul class="nav-items">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Contact
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Terms of use
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Feedback
                </a>
            </li>
        </ul>
    </div>
</footer>
```

<h3>Dark Version</h3>

```htmlmixed_accessible
<footer class="footer footer--compact footer--dark">
    <div class="container">
        <a href="javascript:void(0);" class="logo" tabindex="-1">
            <span class="logo-lifeform" aria-label="Swisscom Logo"></span>
        </a>
        <ul class="nav-items">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Contact
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Terms of use
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Feedback
                </a>
            </li>
        </ul>
    </div>
</footer>
```

<h3>Light Version</h3>

```htmlmixed_accessible
<footer class="footer footer--compact footer--light">
    <div class="container">
        <a href="javascript:void(0);" class="logo" tabindex="-1">
            <span class="logo-lifeform" aria-label="Swisscom Logo"></span>
        </a>
        <ul class="nav-items">
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Contact
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Terms of use
                </a>
            </li>
            <li class="nav-item">
                <a href="javascript:void(0);" class="nav-link">
                    Feedback
                </a>
            </li>
        </ul>
    </div>
</footer>
```

<h2>Footer Full</h2>

<p>Use this footer for sites that have a large site maps and require more room for links. A responsive test page for the compact footer is available at <a href="/samples/footer-full.html">samples/footer-full</a>.</p>

<h3>Dark Version</h3>
<iframe src="/samples/inline/footer-full-dark.html" height="550"></iframe>
<hr aria-hidden="true">

<h3>Light Version</h3>
<iframe src="/samples/inline/footer-full-light.html" height="550" ></iframe>
*/
  /*doc
---
title: Grids
name: 01-foundation-03-grid-01
category: Foundation - Grids
---

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

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


```section_design
```

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

  <h3>Breakpoints</h3>

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

  <h3>Device coverage</h3>

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

  <h3>Layout options</h3>

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

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

  <h3>Baseline grid</h3>

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

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

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

  <h3>Axis alignment</h3>

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

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

  <h3>Axis in application</h3>

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

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

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


```section_develop
```

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

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

<h2>Introduction</h2>

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

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

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

<h2>Media queries</h2>

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

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

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

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

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

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

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

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

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

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

<h2>Auto-layout columns</h2>

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

<h3>Equal-width</h3>

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

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

<h3>Setting one column width</h3>

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

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

<h3>Variable width content</h3>

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

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

<h2>Responsive classes</h2>

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

<h3>All breakpoints</h3>

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

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

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

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

<h2>Alignment</h2>

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

<h3>Vertical alignment</h3>

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

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

<h3>Horizontal alignment</h3>

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

<h2>No gutters</h2>

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

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

<h3>Flex order</h3>

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

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

<h3>Offsetting columns</h3>

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

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

<h3>Push and pull</h3>

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

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

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

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

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

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

```
*/
  /*doc
---
title: Modals
name: 02-components-105-modals-01-overview
category: Components - Modals
---

<p>Modals are pop up windows that are used to delivery timely information, or request action from users.</p>

<p>A responsive test page for the Modal dialog: <a href="/samples/modal.html">samples/modal</a>.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <img class="img-responsive" src="./theme-build/img/design/modal/Group-11@2x.JPG">
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>


```section_design
```

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

  <h3>Standard modals</h3>

  <p>For devices over 768px wide use modal windows with side by side CTAs. Mobile modals use full width and stacked CTA’s to save horizontal space.<br />Buttons align right on modals used for >768px devices.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-11@2x.JPG">
      <span class="fig-caption">768px uses side by size modals</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-12@2x-9.jpg">
      <span class="fig-caption">768px modal view uses stacked CTA to save horizontal space</span>
    </div>
  </div>

  <h3>Icon modal</h3>

  <p>The icon modal varies in sizes, depending on the number of icons inside. These icons are distibuted evenly across the modal. When displaying more than five icons, a dividing line helps to separate the rows of icons.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-13@2x-10.jpg">
      <span class="fig-caption">Modal with two icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-14@2x-7.jpg">
      <span class="fig-caption">Modal with three icons</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Overlay</h3>

  <p>The ovelay is a globally 40% #333333 on all modal styles. The modal is always vertically centered within the viewport.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-13@2x-14.jpg">
      <span class="fig-caption">Background overlay color</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Stacked buttons</h3>

  <p>Use no more than three stack buttons to avoid the modal getting too long.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-18@2x-7.jpg">
      <span class="fig-caption">Stacked buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

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


```section_develop
```

<p>Modals are used to display content in a layer above the app. There can only be one active modal dialog at a given time.</p>

<h2>Interactive sample</h2>

<p>A responsive test page for the Modal dialog is available at <a href="/samples/modal.html">samples/modal</a>. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.</p>

<h2>Usage</h2>

<style>
  .codeExample .backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .codeExample .modal {
    position: relative;
  }

  codeExample. .modal__content {
    margin: 24px;
    width: 100%;
  }
</style>

<p>There are serveral options for opening and closing a modal dialog, either use the <code>Modal</code> JavaScript component directly and call the <code>open()</code> and <code>close()</code> methods on the component; or add a button with the class <code>modal-trigger</code> and a <code>href</code> attribute with the id of the target modal dialog.</p>

```htmlmixed
<button class="button button--primary modal-trigger" href="myModalDialog">Open modal</button>
```

<p>To close the dialog either call <code>close()</code> on the component manually or apply either the <code>modal-close</code> or <code>modal-cancel</code> class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.</p>

<h3>Modal dialog with two buttons</h3>

```htmlmixed
<div class="modal modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <div class="modal__header">
      <h1>Delete file</h1>
      <button class="modal__close modal-cancel" aria-label="Close">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
    </div>
    <div class="modal__body">
      <p>
        Do you want to delete <strong>SDX_Library_Master.pdf</strong>?
      </p>
      <div class="button-group button-group--responsive">
        <button class="button button--responsive button--primary align-right modal-close">
          Yes, delete
        </button>
        <button class="button button--responsive button--secondary modal-cancel">
          No, keep it
        </button>
      </div>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Modal dialog with three buttons</h3>

```htmlmixed
<div class="modal modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <div class="modal__header">
      <h1>Delete file</h1>
      <button class="modal__close modal-cancel" aria-label="Close">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
    </div>
    <div class="modal__body">
      <p>
        Do you want to delete <strong>SDX_Library_Master.pdf</strong>?
      </p>
      <div class="button-group button-group--responsive">
        <button class="button button--responsive button--primary modal-close">
          Yes, delete
        </button>
        <button class="button button--responsive button--secondary modal-cancel">
          No, keep it
        </button>
        <button class="button button--responsive button--secondary">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>
<div class="backdrop backdrop--open"></div>
```
*/
  /*doc
---
title: Notifications (header)
name: 02-components-125-notification-header-01-overview
category: Components - Notifications (header)
---

<p>Notification headers are colored strips which run across the top of a product, beneath the header bar or navigation.</p>

<div class="margin-bottom-4">
  <div class="input-field">
    <input type="text" id="message-text-1" placeholder="Notification text" value="You have <strong>4</strong> new messages in your inbox">
    <label for="message-text-1">Notification text</label>
  </div>
  <div class="radio">
    <input type="radio" name="options" id="default" value="" checked="">
    <label for="default">Default notification</label>
  </div>
  <div class="radio">
    <input type="radio" name="options" id="confirmation" value="notification--confirmation">
    <label for="confirmation">Confirmation / Success notification</label>
  </div>
  <div class="radio add-space">
    <input type="radio" name="options" id="alert" value="notification--alert">
    <label for="alert">Alert / Warning notification</label>
  </div>

  <button class="button button--primary" onclick="showNotification()">Show notification</button>

  <script>
    function showNotification() {
      var callback = function() {
        alert("Notification was clicked");
      };

      var cancelCallback = function() {
        alert("Notification was cancelled");
      };

      var message = document.getElementById("message-text-1");
      var modifier = document.querySelector("input[name='options']:checked").value;

      // open the notification
      var notification = sdx.Notification.showOnHeader("header", message.value || "Notification Text", callback, cancelCallback, modifier);

      // remove the notification
      setTimeout(function(){ notification.close() }, 2000);
    }
  </script>
</div>

<h4>How to use notification headers</h4>

<p>Notifications headers are used to give users in page information about something new, or to confirm an action that’s just been made by the user. They do this in a discrete non-disruptive way. Notifications should always use the SDX interaction color palette to help explain the type of notification the user is receiving at a glance. They run the full width of the page.</p>


```section_design
```

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

  <h3>General notifications</h3>

  <p>Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-3@2x-6.jpg">
      <span class="fig-caption">New inbox notification</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-4@2x-5.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h3>Confirmation notifications</h3>

  <p>Green notifications should be used to indicate validation or success, for example to confirm success at the end of an order process.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-7@2x-12.jpg">
      <span class="fig-caption">Items added to basket confirmation</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-20@2x-1.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h3>Alert notifications</h3>

  <p>Orange notifications indicate an error or a warning, for example something that needs urgent attention.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-16@2x-14.jpg">
      <span class="fig-caption">Warning notification</span>
    </div>
  </div>

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

  <h2>Rules</h2>

  <h3>Closing the notification</h3>

  <p>Each notification can be closed, with the secondary action being positioned to the right.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-17@2x-13.jpg">
      <span class="fig-caption">Closing the notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Fixed over content</h3>

  <p>Notifications are always placed over the content and fixed to the top of viewport, for emphasis and clarity.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-5-Copy-2@2x.jpg">
      <span class="fig-caption">Fixed over content</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
   <div class="col-xs-12 col-lg-12">
     <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-18@2x-10.jpg">
     <span class="fig-caption">Typography</span>
   </div>
  </div>
</div>


```section_develop
```

<h2>Usage</h2>

```htmlmixed
<div class="input-field">
  <input type="text" id="message-text-1" placeholder="Notification text" value="You have <strong>4</strong> new messages in your inbox">
  <label for="message-text-1">Notification text</label>
</div>

<div class="radio">
  <input type='radio' name='options' id='default' value='' checked>
  <label for='default'>Default notification</label>
</div>
<div class="radio">
  <input type='radio' name='options' id='confirmation' value='notification--confirmation'>
  <label for='confirmation'>Confirmation / Success notification</label>
</div>
<div class="radio add-space">
  <input type='radio' name='options' id='alert' value='notification--alert'>
  <label for='alert'>Alert / Warning notification</label>
</div>

<button class="button button--primary" onclick="showNotification()">Show notification</button>

<script>
  function showNotification() {
    var callback = function() {
      alert("Notification was clicked");
    };

    var cancelCallback = function() {
      alert("Notification was cancelled");
    };

    var message = document.getElementById("message-text-1");
    var modifier = document.querySelector("input[name='options']:checked").value;

    // open the notification
    var notification = sdx.Notification.showOnHeader("header", message.value || "Notification Text", callback, cancelCallback, modifier);

    // remove the notification
    setTimeout(function(){ notification.close() }, 2000);
  }
</script>
```

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>4</strong> new messages in your inbox
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      Please check the highlighted fields
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h2>Colours</h2>

<p>Notifications are categorised into three categories: general, confirmation/success/ and alerts/warnings. Blue represents general notifications, e.g messages in your inbox. Green for confirmation of user actions or completion of a process, e.g completing checkout. Orange to give alerts and warnings to users, e.g failed uploads or storage reaching capacity.</p>

<h3>General Notifications</h3>

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>4</strong> new messages in your inbox
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h3>Confirmations / Success</h3>

```htmlmixed
<div class="notification-header notification--confirmation notification--open">
  <div class="notification__content">
    <div class="notification__body">
      <strong>3</strong> items added to your basket
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h3>Alerts and Warnings</h3>

```htmlmixed
<div class="notification-header notification--alert notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>5</strong> new alerts
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```
*/
  /*doc
---
title: Lists
name: 02-components-080-lists
category: Components - Lists
---

<p>Styled lists can be used to help group points together and give them prominence within the page hierarchy. There are two types of lists; structured lists that are numbered and unstructured lists that use bullet points.</p>

<ul class="list">
  <li class="single-line">Lorem ipsum dolor sit amet.</li>
  <li class="single-line">Lorem ipsum dolor sit atedur.</li>
  <li class="single-line">Lorem ipsum dolor sit amet.</li>
</ul>


```section_design
```

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

  <h3>Ordered list</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-6@2x-3.jpg">
      <span class="fig-caption">Single line list</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-11@2x-8.jpg">
      <span class="fig-caption">Multi-line list</span>
    </div>
  </div>

  <h3>Unordered list</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-13@2x-1.jpg">
      <span class="fig-caption">Single line list</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/component-bulletpoint-list-light@2x.jpg">
      <span class="fig-caption">Multi-line list</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Alignment</h3>

  <p>Numbers should be aligned to the baseline of the text. Bullets are aligned to the vertical centre point of the text.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-17@2x-4.jpg">
      <span class="fig-caption">Ordered list alignment</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-18@2x-3.jpg">
      <span class="fig-caption">Unordered list alignment</span>
    </div>
  </div>

  <p>Vertical spacing between paragraphs or text and lists is set to 36px, and is measured from descender to ascender.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/lists/Group-20@2x-1.jpg">
      <span class="fig-caption">Space between elements</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Insertion</h3>

  <p>Insertion spacing is 8px between text and the list element.</p>

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

  <h2>Typography</h2>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/lists/Group-21@2x-2.jpg">
        <span class="fig-caption">Typography ordered list</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/lists/Group-22@2x-2.jpg">
        <span class="fig-caption">Typography unordered list</span>
      </div>
  </div>
</div>


```section_develop
```

<h2>Bullet list</h2>

<h3>Bullet list single line</h3>

```htmlmixed_accessible
<h2>Lorem ipsum dolor sit amet</h2>

<ul class="list">
  <li class="single-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li class="single-line">Lorem ipsum dolor sit atedur, labore aliqua.</li>
  <li class="single-line">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li class="single-line">Lorem ipsum dolor sit atedur, labore aliqua.</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<h3>Bullet list multi line</h3>

```htmlmixed_accessible
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>

<ul class="list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <ul class="list">
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</li>
  </ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<h2>Numbered list</h2>

<h3>Numbered list single line</h3>

```htmlmixed_accessible
<h2>Lorem ipsum dolor sit amet</h2>

<ol class="list single-line">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit atedur, labore aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit atedur, labore aliqua.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit atedur, labore aliqua.</li>
</ol>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

<h3>Numbered list multi line</h3>

```htmlmixed_accessible
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2>

<ol class="list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```
*/
  /*doc
---
title: Tables
name: 02-components-175-tables-01-tables
category: Components - Tables
---

<p>Tables allow complex data to be seen easily at a glance. They allow the user to compare values and in some cases re-order data. They can be used for promotional or user-specific purposes, such as a file management.</p>

<div class="table-display padding-bottom-4">
  <h3 class="table__title">Yay this is a title</h3>
  <div class="table__wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Internet
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio01' checked>
            <label for='radio01'>100 Mbit/s download max</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Swisscom TV
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio02-1'>
            <label for='radio02-1'>SWISSCOM TV Plus 2.0</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio02-2'>
            <label for='radio02-2'>SWISSCOM TV Light 2.0</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Landline
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio03-1'>
            <label for='radio03-1'>Yes</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio03-2'>
            <label for='radio03-2'>No</label>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


```section_design
```

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

  <h3>Display tables</h3>

  <p>Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table. They are commonly used for product configurators, where users may be selecting add ons or additional features that incur charges. They can be used directly in page, or in cards. Display tables feature large titles and ‘stickers’ that label the product type where applicable.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-14@2x-6.jpg">
      <span class="fig-caption">Display table with drop shadow</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-15@2x-8.jpg">
      <span class="fig-caption">Display table without drop shadow</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-16@2x-9.jpg">
      <span class="fig-caption">Display table with live price</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-17@2x-8.jpg">
      <span class="fig-caption">Display table without drop shadow</span>
    </div>
  </div>

  <p>They can also feature a live total, helping show users the direct cost implications of their selections.</p>

  <h3>Image base tables</h3>

  <p>Image tables help to make information clearer and more tangible. They use images in headings to visually show what the column within the table relates to. This enables users to read tables in a more visual way, making the data clearer and easier to understand. They can be positioned directly in page, or within separate modules and cards to help them stand out.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-18@2x-6.jpg">
        <span class="fig-caption">Image base tables</span>
      </div>
  </div>

  <h3>Data-driven tables</h3>

  <p>Use data tables for managing lists. Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience. Checkboxes should accompany each row if the user needs to select or manipulate data.</p>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-12@2x-8.jpg">
        <span class="fig-caption">Data driven table with drop shadow</span>
      </div>
  </div>

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-13@2x-9.jpg">
        <span class="fig-caption">Data driven table without drop shadow</span>
      </div>
  </div>

  <h2>Rules</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <h3>Image table on mobile</h3>
      <p>On mobile, swipe the image table header to change product.</p>
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-20@2x-4.jpg">
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3 class="padding-top-4">Margins</h3>

  <p>Tables do not have to adhere to the Swisscom grid, as a table columns can vary in length and number</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <h3>Image table on mobile</h3>
      <p>On mobile, swipe the image table header to change product.</p>
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-21@2x-5.jpg">
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <h3 class="padding-top-4">Drop shadows</h3>
      <p>Tables with a grey drop shadow are to be used in card-based layouts only.</p>
      <img class="img-responsive" src="./theme-build/img/design/tables/Group-22@2x-1.jpg">
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

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

  <div class="row">
      <div class="col-xs-12 col-lg-12">
        <img class="img-responsive" src="./theme-build/img/design/tables/Group-23@2x-8.jpg">
        <span class="fig-caption">Typography</span>
      </div>
  </div>
</div>


```section_develop
```

<h2>Data-driven tables</h2>

<p>Use data tables for managing lists. Breaking down content into clearly labeled groups, and giving the user the ability to reorganise the order of these lists helps to create a more personal experience. Checkboxes should accompany each row if the user needs to select or manipulate data.</p>

<h3>Basic Table</h3>

<p>Create a SDX styled table by wrapping a <code>&lt;table&gt;</code> with a wrapper <code>&lt;div&gt;</code> and add the class <code>table</code> to it.</p>

```htmlmixed
<div class="table table--responsive">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th data-type="text">Planet</th>
          <th data-type="number" class="js-ascending">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th data-type="number">Escape velocity</th>
          <th data-type="number">Satellites</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td>0.36 km/s</td>
          <td>0</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-2'>
              <label for='checkbox1-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td>11.186 km/s</td>
          <td>1</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-3'>
              <label for='checkbox1-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td>5.027 km/s</td>
          <td>2</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-4'>
              <label for='checkbox1-4'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td>59.5 km/s</td>
          <td>67</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox1-5'>
              <label for='checkbox1-5'></label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="button button--primary align-right">
    Button
  </button>
</div>
```

<h3>Responsive Table</h3>

<p>Create responsive tables by wrapping any <code>&lt;table&gt;</code> in <code>table__responsive</code> to make them scroll horizontally when the container size smaller than the table.</p>

```htmlmixed
<div class="table table--responsive">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th>Planet</th>
          <th data-type="number">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th data-type="number">Escape velocity</th>
          <th data-type="number">Satellites</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td>0.36 km/s</td>
          <td>0</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-2'>
              <label for='checkbox2-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td>11.186 km/s</td>
          <td>1</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-3'>
              <label for='checkbox2-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td>5.027 km/s</td>
          <td>2</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-4'>
              <label for='checkbox2-4'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td>59.5 km/s</td>
          <td>67</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox2-5'>
              <label for='checkbox2-5'></label>
            </div>
          </td>
        </tr>
        <tr>
      </tbody>
    </table>
  </div>
  <button class="button button--primary align-right">
    Button
  </button>
</div>
```

<h2>Table Styles</h2>

<h3>Table with highlighted header</h3>

```htmlmixed
<div class="table table--responsive table--highlight">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th>Planet</th>
          <th data-type="number">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-1'>
              <label for='checkbox5-1'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-2'>
              <label for='checkbox5-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-3'>
              <label for='checkbox5-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox5-4'>
              <label for='checkbox5-4'></label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

<h3>Table with no spacing</h3>

```htmlmixed
<div class="table table--responsive  table--no-border">
  <h3 class="table__title">Planets in the solar system</h3>
  <div class="table__wrapper">
    <table data-init="auto">
      <thead>
        <tr>
          <th>Planet</th>
          <th data-type="number">Perihelion (AU)</th>
          <th data-type="number">Volume</th>
          <th data-type="number">Orbital period</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Venus</td>
          <td>0.718440</td>
          <td>0.815 Earths</td>
          <td>0.615198 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-1'>
              <label for='checkbox6-1'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>0.9832687</td>
          <td data-value="1">1.08321 × 10<sup>12</sup> km<sup>3</sup></td>
          <td>1.00001742096 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-2'>
              <label for='checkbox6-2'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>1.3814</td>
          <td>0.151 Earths</td>
          <td>1.8808 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-3'>
              <label for='checkbox6-3'></label>
            </div>
          </td>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>4.95029</td>
          <td>1321 Earths</td>
          <td>11.8618 yr</td>
          <td class="text-align-right">
            <div class="checkbox checkbox--only">
              <input type='checkbox' name='dummy' id='checkbox6-4'>
              <label for='checkbox6-4'></label>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
```

<h2>Display tables</h2>

<p>Display tables are used to house small quantities of data, with the inclusion of radio buttons that allow users to select various elements, contributing to a sum total at the bottom of the table. They are commonly used for product configurators, where users may be selecting add ons or additional features that incur charges. They can be used directly in page, or in cards. Display tables feature large titles and <code>stickers</code> that label the product type where applicable.</p>

```htmlmixed
<div class="table-display">
  <h3 class="table__title">Yay this is a title</h3>
  <div class="table__wrapper">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Internet
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio1' checked>
            <label for='radio1'>100 Mbit/s download max</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Swisscom TV
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio2-1'>
            <label for='radio2-1'>SWISSCOM TV Plus 2.0</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio2-2'>
            <label for='radio2-2'>SWISSCOM TV Light 2.0</label>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 col-md-4">
        Landline
      </div>
      <div class="col-xs-12 col-md-8">
        <form>
          <div class="radio">
            <input type='radio' name='dummy' id='radio3-1'>
            <label for='radio3-1'>Yes</label>
          </div>
          <div class="radio">
            <input type='radio' name='dummy' id='radio3-2'>
            <label for='radio3-2'>No</label>
          </div>
        </form>
      </div>
    </div>
  </div>
  <button class="button button--primary align-right">
    Button
  </button>
</div>
```

<h2>Table with arbitrary content</h2>

<p>Tables with arbitrary content helps to easily build tables for a variety of use cases.</p>

```htmlmixed
<div class="table-generic">
  <div class="table__wrapper">
    <div class="row">
      <div class="table-items col-xs-12 offset-md-3 col-md-5">
        <div class="table-item text-align-center">
          <img class="table-image" src="/theme-build/img/samples/angebote-vivo-xl.png">
          <p>Vivo <strong>XL</strong> - Vivo <strong>M</strong></p>
        </div>
      </div>
      <div class="table-items col-xs-12 col-md-4">
        <div class="table-item text-align-center">
          <img class="table-image" src="/theme-build/img/samples/angebote-vivo-s.png">
          <p>Vivo <strong>S</strong> - Vivo <strong>XS</strong></p>
        </div>
      </div>
    </div>
    <div class="border-horizontal"></div>
    <div class="row">
      <div class="col-xs-12 col-md-3">
        <p class="margin-0">Natel infinity 2.0 M</p>
        <p class="margin-0">Natel infinity 2.0 L</p>
        <p class="margin-0">Natel infinity 2.0 XL</p>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-5">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">20.–</h1>
        </div>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-4">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">10.–</h1>
        </div>
      </div>
    </div>
    <div class="border-horizontal"></div>
    <div class="row">
      <div class="col-xs-12 col-md-3">
        <p class="margin-0">Natel infinity 2.0 XS</p>
        <p class="margin-0">Natel infinity 2.0 S</p>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-5">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">10.–</h1>
        </div>
      </div>
      <div class="border-vertical"></div>
      <div class="col-xs-12 col-md-4">
        <div class="table-items center-vertical">
          <h1 class="d1 margin-0 blue">5.–</h1>
        </div>
      </div>
    </div>
  </div>
</div>
```
*/
  /*doc
---
title: Tabs
name: 02-components-180-tabs
category: Components - Tabs
---

<p>Tabs organize and allow navigation between groups of content that are related and at the same level hierarchy.<br />There can be active and disabled states.</p>

<div class="margin-bottom-4">
  <ul class="tabs" role="tablist">
    <li class="tab">
      <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
    </li>
    <li class="tab">
      <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
    </li>
    <li class="tab">
      <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
    </li>
    <li class="tab">
      <a class="tab-link disabled" aria-selected="false" aria-controls="tab-four" tabindex="-1">Tab four</a>
    </li>
  </ul>
</div>


```section_design
```

<div class="content-design">
  <p>There are different font sizes you can use for the tabs. 24px for large tabs, 18px for medium sized tabs and 16px for small ones.</p>

  <div class="row padding-bottom-4">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_design.jpg">
      <span class="fig-caption">Tabs with different font sizes</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Variations</h2>

  <p>There are different tab sizes you can use.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_dunkel.jpg">
      <span class="fig-caption">Tabs on colored background</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_gradient.jpg">
      <span class="fig-caption">Tabs switching to grey</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_drop-down.jpg">
      <span class="fig-caption">Tabs with Dropdown</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_mobile.jpg">
      <span class="fig-caption">Tabs on mobile</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Paddings between Tabs</h3>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive img-responsive-border" src="./theme-build/img/design/tabs/tabs_padding.jpg">
      <span class="fig-caption">Paddings between Tabs</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>
</div>


```section_develop
```

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var tabLinks = document.querySelectorAll(".tab-link");

    for (var i = 0; i < tabLinks.length; ++i) {
      var tabLink = tabLinks[i];

      tabLink.addEventListener("click", function(e) {
        var clickedTabs = e.target;

        while (!clickedTabs.classList.contains("tabs")) {
          clickedTabs = clickedTabs.parentElement;
        }

        var clickedTabLink = e.target;

        while (!clickedTabLink.classList.contains("tab-link")) {
          clickedTabLink = clickedTabLink.parentElement;
        }

        var ownTabLinks = clickedTabs.querySelectorAll(".tab-link");

        for (var j = 0; j < ownTabLinks.length; ++j) {
          var ownTabLink = ownTabLinks[j];

          ownTabLink.classList.remove("active");

          if (ownTabLink === clickedTabLink) {
            ownTabLink.classList.add("active");
          }
        }
      });
    }
  });
</script>

```htmlmixed_accessible
<ul class="tabs" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab" aria-selected="false" aria-controls="tab-two">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>
```

<h3>Tab sizes</h3>

<p>There are three different tab sizes available. By default the tab font size is 18px. If you want to change the size of the tab, add the classes <code>tabs--small</code> or <code>tabs--big</code> to the <code>tabs</code> element.</p>

```htmlmixed_accessible
<ul class="tabs tabs--small" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>

<ul class="tabs" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>

<ul class="tabs tabs--big" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>
```

<h3>Tab indicator sizes</h3>

<p>There are two tab indicator sizes available. By default the tab indicator is short (10px). If you want to change the size of the tab indicator to long, add the class <code>tabs--long</code> to the <code>tabs</code> element.</p>

```htmlmixed_accessible
<ul class="tabs" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>

<ul class="tabs tabs--long" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab"  tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>
```

<h3> More tabs options</h3>

<h4>Scrollable tabs</h4>

<p>To make the tabs scrollable add the class <code>tabs--scrollable</code> to the <code>tabs</code> element.</p>

```htmlmixed_accessible
<ul class="tabs tabs--scrollable" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="0">Tab four</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-five" role="tab" tabindex="0">Tab five</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-six" role="tab" tabindex="0">Tab six</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-seven" role="tab" tabindex="0">Tab seven</a>
  </li>
</ul>
```

<h4>Tabs with no border</h4>

<p>To remove the bottom border on the tabs add the class <code>tabs--no-border</code> to the <code>tabs</code> element.</p>

```htmlmixed_accessible
<ul class="tabs tabs--no-border" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Tab one</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Tab two</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Tab three</a>
  </li>
  <li class="tab">
    <a class="tab-link disabled" aria-disabled="true" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="-1">Tab four</a>
  </li>
</ul>
```

<h4>Tabs with icons</h4>

```htmlmixed_accessible
<ul class="tabs" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="Snowy" role="tab" tabindex="0"><i class="icon icon-175-weather-snow" aria-hidden="true"></i> Snowy</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="Rainy" role="tab" tabindex="0"><i class="icon icon-173-weather-rain" aria-hidden="true"></i> Rainy</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="Sunny" role="tab" tabindex="0"><i class="icon icon-179-weather-sun" aria-hidden="true"></i> Sunny</a>
  </li>
</ul>
```

<h4>Tabs with images</h4>

```htmlmixed_accessible
<div class="tabs tabs--image" role="tablist">
  <ul>
    <li class="tab">
      <a class="tab-link active" aria-selected="true" aria-controls="Vivo-XL" role="tab" tabindex="0">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-xl.png" width="90" alt="Vivo XL"></span>
        <span class="title">Vivo XL</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link" aria-selected="false" aria-controls="Vivo-XL" role="tab" tabindex="0">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-l.png" width="80" alt="Vivo L"></span>
        <span class="title">Vivo L</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link" aria-selected="false" aria-controls="Vivo-M" role="tab" tabindex="0">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-m.png" width="70" alt="Vivo M"></span>
        <span class="title">Vivo M</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link" aria-selected="false" aria-controls="Vivo-S" role="tab" tabindex="0">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-s.png" width="60" alt="Vivo S"></span>
        <span class="title">Vivo S</span>
      </a>
    </li>
    <li class="tab">
      <a class="tab-link" aria-selected="false" aria-controls="Vivo-XS" role="tab" tabindex="0">
        <span class="image"><img src="/theme-build/img/samples/angebote-vivo-xs.png" width="50" alt="Vivo XS"></span>
        <span class="title">Vivo XS</span>
      </a>
    </li>
  </ul>
</div>
```

<h4>Responsive tabs example</h4>

<p>Responsive tabs are displayed as dropdown menus on specified screen sizes.</p>

```htmlmixed_accessible
<label for="select-1">This is the label</label>

<ul class="tabs hidden-sm-down" role="tablist">
  <li class="tab">
    <a class="tab-link active" aria-selected="true" aria-controls="tab-one" role="tab" tabindex="0">Introduction</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-two" role="tab" tabindex="0">Overview</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-three" role="tab" tabindex="0">Help</a>
  </li>
    <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-four" role="tab" tabindex="0">Sales</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-five" role="tab" tabindex="0">About</a>
  </li>
  <li class="tab">
    <a class="tab-link" aria-selected="false" aria-controls="tab-six" role="tab" tabindex="0">Specification</a>
  </li>
</ul>

<div class="select hidden-md-up">
  <select id="select-1" class="select--minimal select--tabs" data-init="auto">
    <option selected>Introduction</option>
    <option>Overview</option>
    <option>Help</option>
    <option>Sales</option>
    <option>About</option>
    <option>Specification</option>
  </select>
</div>
```
*/ }
  .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 *, .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: -.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 .badge {
    display: inline-block;
    position: relative; }
    .sdx-container .badge__content {
      font-family: "TheSans", sans-serif;
      font-weight: 300;
      display: inline-block;
      position: relative;
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
      border-radius: 24px;
      background: #1781e3;
      cursor: pointer;
      height: 24px;
      text-align: center;
      line-height: 1;
      color: #fff;
      font-size: 16px;
      transform-origin: 50% 50%;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
      .sdx-container .badge__content:hover {
        background: #0851da; }
    .sdx-container .badge--message {
      display: flex;
      height: 24px;
      justify-content: center; }
      .sdx-container .badge--message .badge__content {
        -webkit-animation: badge-message 600ms linear both;
                animation: badge-message 600ms linear both;
        padding: 0;
        max-width: calc(100% - (2 * 24px));
        overflow: hidden;
        transform-origin: 50% 50%;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden; }
      .sdx-container .badge--message .badge__text {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        -webkit-animation: badge-message-text 600ms linear both;
                animation: badge-message-text 600ms linear both;
        padding: 4px 12px 2px;
        height: 100%;
        letter-spacing: -.6px;
        justify-content: center;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden; }
    .sdx-container .badge--icon .avatar, .sdx-container .badge--avatar .avatar {
      width: 32px;
      height: 32px; }
    .sdx-container .badge--icon .badge__content, .sdx-container .badge--avatar .badge__content {
      position: absolute;
      top: 0;
      left: calc(100% - 9px);
      -webkit-animation: badge-icon 500ms linear both;
              animation: badge-icon 500ms linear both;
      padding: 2px 5px;
      min-width: 16px;
      height: 16px;
      font-size: 12px;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      outline: 1px solid transparent; }
      .sdx-container .badge--icon .badge__content--icon, .sdx-container .badge--avatar .badge__content--icon {
        padding: 0;
        width: 16px;
        height: 16px; }
        .sdx-container .badge--icon .badge__content--icon .icon, .sdx-container .badge--avatar .badge__content--icon .icon {
          -webkit-font-smoothing: subpixel-antialiased;
          -moz-osx-font-smoothing: auto;
          width: 16px;
          text-align: center;
          line-height: 16px;
          letter-spacing: normal;
          font-size: 12px; }
        .sdx-container .badge--icon .badge__content--icon .icon-heart, .sdx-container .badge--avatar .badge__content--icon .icon-heart {
          font-size: 8px; }
          .sdx-container .badge--icon .badge__content--icon .icon-heart::before, .sdx-container .badge--avatar .badge__content--icon .icon-heart::before {
            content: ""; }
        .sdx-container .badge--icon .badge__content--icon .icon-check::before, .sdx-container .badge--avatar .badge__content--icon .icon-check::before {
          content: ""; }
        .sdx-container .badge--icon .badge__content--icon .icon-alert::before, .sdx-container .badge--avatar .badge__content--icon .icon-alert::before {
          content: ""; }
    .sdx-container .badge--alert .badge__content, .sdx-container .badge--notification .badge__content {
      background: #ff8b2e; }
      .sdx-container .badge--alert .badge__content:hover, .sdx-container .badge--notification .badge__content:hover {
        background: #e86416; }
    .sdx-container .badge--confirmation .badge__content {
      background: #25b252; }
      .sdx-container .badge--confirmation .badge__content:hover {
        background: #008236; }

@-webkit-keyframes badge-message {
  0% {
    transform: scale(0);
    max-width: 24px; }
  30% {
    transform: scale(1);
    max-width: 24px; }
  75% {
    max-width: 272px; } }

@keyframes badge-message {
  0% {
    transform: scale(0);
    max-width: 24px; }
  30% {
    transform: scale(1);
    max-width: 24px; }
  75% {
    max-width: 272px; } }

@-webkit-keyframes badge-message-text {
  0% {
    opacity: 0; }
  75% {
    transform: scale(0.95);
    opacity: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
  100% {
    transform: scale(1);
    opacity: 1;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; } }

@keyframes badge-message-text {
  0% {
    opacity: 0; }
  75% {
    transform: scale(0.95);
    opacity: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
  100% {
    transform: scale(1);
    opacity: 1;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; } }

@-webkit-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); } }

@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 input,
  .sdx-container textarea {
    -webkit-border-radius: 0; }
    .sdx-container input::-ms-clear,
    .sdx-container textarea::-ms-clear {
      display: none; }

@-webkit-keyframes onAutoFillStart {
  from {
    /* Empty */ }
  to {
    /* Empty */ } }

@keyframes onAutoFillStart {
  from {
    /* Empty */ }
  to {
    /* Empty */ } }
    .sdx-container input:-webkit-autofill,
    .sdx-container textarea:-webkit-autofill {
      -webkit-animation-name: onAutoFillStart;
              animation-name: onAutoFillStart;
      transition: background-color 50000s ease-in-out 0s; }
  .sdx-container .input-field {
    box-sizing: border-box;
    position: relative;
    margin-bottom: 11px;
    padding: 0; }
    .sdx-container .input-field .message {
      max-height: 0;
      margin-top: 0;
      opacity: 0;
      z-index: 101;
      transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); }
    .sdx-container .input-field .icon {
      margin-right: 4px; }
    .sdx-container .input-field:first-child input:not([type]),
    .sdx-container .input-field:first-child input[type='text'],
    .sdx-container .input-field:first-child input[type='password'],
    .sdx-container .input-field:first-child input[type='email'],
    .sdx-container .input-field:first-child input[type='url'],
    .sdx-container .input-field:first-child input[type='time'],
    .sdx-container .input-field:first-child input[type='date'],
    .sdx-container .input-field:first-child input[type='datetime'],
    .sdx-container .input-field:first-child input[type='datetime-local'],
    .sdx-container .input-field:first-child input[type='tel'],
    .sdx-container .input-field:first-child input[type='number'],
    .sdx-container .input-field:first-child input[type='search'],
    .sdx-container .input-field:first-child textarea {
      margin-top: 0; }
    .sdx-container .input-field input,
    .sdx-container .input-field textarea {
      -webkit-border-radius: 0; }
      .sdx-container .input-field input::-ms-clear,
      .sdx-container .input-field textarea::-ms-clear {
        display: none; }
    .sdx-container .input-field input:not([type]),
    .sdx-container .input-field input[type='text'],
    .sdx-container .input-field input[type='password'],
    .sdx-container .input-field input[type='email'],
    .sdx-container .input-field input[type='url'],
    .sdx-container .input-field input[type='time'],
    .sdx-container .input-field input[type='date'],
    .sdx-container .input-field input[type='datetime'],
    .sdx-container .input-field input[type='datetime-local'],
    .sdx-container .input-field input[type='tel'],
    .sdx-container .input-field input[type='number'],
    .sdx-container .input-field input[type='search'],
    .sdx-container .input-field textarea {
      line-height: 24px;
      letter-spacing: -.1px;
      font-size: 18px;
      position: relative;
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 100;
      margin-top: 13px;
      outline: none;
      border: 1px solid #d6d6d6;
      border-radius: 5px;
      background-color: #fff;
      padding: 0 16px;
      width: 100%;
      height: 48px;
      color: #333;
      font-weight: 300;
      -webkit-user-select: text;
         -moz-user-select: text;
          -ms-user-select: text;
              user-select: text;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
      .sdx-container .input-field input:not([type]) + label,
      .sdx-container .input-field input[type='text'] + label,
      .sdx-container .input-field input[type='password'] + label,
      .sdx-container .input-field input[type='email'] + label,
      .sdx-container .input-field input[type='url'] + label,
      .sdx-container .input-field input[type='time'] + label,
      .sdx-container .input-field input[type='date'] + label,
      .sdx-container .input-field input[type='datetime'] + label,
      .sdx-container .input-field input[type='datetime-local'] + label,
      .sdx-container .input-field input[type='tel'] + label,
      .sdx-container .input-field input[type='number'] + label,
      .sdx-container .input-field input[type='search'] + label,
      .sdx-container .input-field textarea + label {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(24px);
        transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 0;
        cursor: text;
        color: #666;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; }
      .sdx-container .input-field input:not([type]) ~ .icon,
      .sdx-container .input-field input[type='text'] ~ .icon,
      .sdx-container .input-field input[type='password'] ~ .icon,
      .sdx-container .input-field input[type='email'] ~ .icon,
      .sdx-container .input-field input[type='url'] ~ .icon,
      .sdx-container .input-field input[type='time'] ~ .icon,
      .sdx-container .input-field input[type='date'] ~ .icon,
      .sdx-container .input-field input[type='datetime'] ~ .icon,
      .sdx-container .input-field input[type='datetime-local'] ~ .icon,
      .sdx-container .input-field input[type='tel'] ~ .icon,
      .sdx-container .input-field input[type='number'] ~ .icon,
      .sdx-container .input-field input[type='search'] ~ .icon,
      .sdx-container .input-field textarea ~ .icon {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0;
        z-index: 101;
        width: 48px;
        height: 48px;
        text-align: center;
        line-height: 48px;
        color: #25b252;
        font-size: 22px; }
      .sdx-container .input-field input:not([type])::-webkit-input-placeholder,
      .sdx-container .input-field input[type='text']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='password']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='email']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='url']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='time']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='date']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='datetime']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='datetime-local']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='tel']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='number']::-webkit-input-placeholder,
      .sdx-container .input-field input[type='search']::-webkit-input-placeholder,
      .sdx-container .input-field textarea::-webkit-input-placeholder {
        transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        color: #bbb; }
      .sdx-container .input-field input:not([type])::-moz-placeholder,
      .sdx-container .input-field input[type='text']::-moz-placeholder,
      .sdx-container .input-field input[type='password']::-moz-placeholder,
      .sdx-container .input-field input[type='email']::-moz-placeholder,
      .sdx-container .input-field input[type='url']::-moz-placeholder,
      .sdx-container .input-field input[type='time']::-moz-placeholder,
      .sdx-container .input-field input[type='date']::-moz-placeholder,
      .sdx-container .input-field input[type='datetime']::-moz-placeholder,
      .sdx-container .input-field input[type='datetime-local']::-moz-placeholder,
      .sdx-container .input-field input[type='tel']::-moz-placeholder,
      .sdx-container .input-field input[type='number']::-moz-placeholder,
      .sdx-container .input-field input[type='search']::-moz-placeholder,
      .sdx-container .input-field textarea::-moz-placeholder {
        transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        color: #bbb; }
      .sdx-container .input-field input:not([type])::-ms-input-placeholder,
      .sdx-container .input-field input[type='text']::-ms-input-placeholder,
      .sdx-container .input-field input[type='password']::-ms-input-placeholder,
      .sdx-container .input-field input[type='email']::-ms-input-placeholder,
      .sdx-container .input-field input[type='url']::-ms-input-placeholder,
      .sdx-container .input-field input[type='time']::-ms-input-placeholder,
      .sdx-container .input-field input[type='date']::-ms-input-placeholder,
      .sdx-container .input-field input[type='datetime']::-ms-input-placeholder,
      .sdx-container .input-field input[type='datetime-local']::-ms-input-placeholder,
      .sdx-container .input-field input[type='tel']::-ms-input-placeholder,
      .sdx-container .input-field input[type='number']::-ms-input-placeholder,
      .sdx-container .input-field input[type='search']::-ms-input-placeholder,
      .sdx-container .input-field textarea::-ms-input-placeholder {
        transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        color: #bbb; }
      .sdx-container .input-field input:not([type])::placeholder,
      .sdx-container .input-field input[type='text']::placeholder,
      .sdx-container .input-field input[type='password']::placeholder,
      .sdx-container .input-field input[type='email']::placeholder,
      .sdx-container .input-field input[type='url']::placeholder,
      .sdx-container .input-field input[type='time']::placeholder,
      .sdx-container .input-field input[type='date']::placeholder,
      .sdx-container .input-field input[type='datetime']::placeholder,
      .sdx-container .input-field input[type='datetime-local']::placeholder,
      .sdx-container .input-field input[type='tel']::placeholder,
      .sdx-container .input-field input[type='number']::placeholder,
      .sdx-container .input-field input[type='search']::placeholder,
      .sdx-container .input-field textarea::placeholder {
        transition: 150ms opacity cubic-bezier(0.4, 0, 0.2, 1);
        opacity: 1;
        color: #bbb; }
      .sdx-container .input-field input:not([type]):-ms-input-placeholder,
      .sdx-container .input-field input[type='text']:-ms-input-placeholder,
      .sdx-container .input-field input[type='password']:-ms-input-placeholder,
      .sdx-container .input-field input[type='email']:-ms-input-placeholder,
      .sdx-container .input-field input[type='url']:-ms-input-placeholder,
      .sdx-container .input-field input[type='time']:-ms-input-placeholder,
      .sdx-container .input-field input[type='date']:-ms-input-placeholder,
      .sdx-container .input-field input[type='datetime']:-ms-input-placeholder,
      .sdx-container .input-field input[type='datetime-local']:-ms-input-placeholder,
      .sdx-container .input-field input[type='tel']:-ms-input-placeholder,
      .sdx-container .input-field input[type='number']:-ms-input-placeholder,
      .sdx-container .input-field input[type='search']:-ms-input-placeholder,
      .sdx-container .input-field textarea:-ms-input-placeholder {
        color: #bbb !important; }
      .sdx-container .input-field input:not([type]):focus:not([readonly]),
      .sdx-container .input-field input[type='text']:focus:not([readonly]),
      .sdx-container .input-field input[type='password']:focus:not([readonly]),
      .sdx-container .input-field input[type='email']:focus:not([readonly]),
      .sdx-container .input-field input[type='url']:focus:not([readonly]),
      .sdx-container .input-field input[type='time']:focus:not([readonly]),
      .sdx-container .input-field input[type='date']:focus:not([readonly]),
      .sdx-container .input-field input[type='datetime']:focus:not([readonly]),
      .sdx-container .input-field input[type='datetime-local']:focus:not([readonly]),
      .sdx-container .input-field input[type='tel']:focus:not([readonly]),
      .sdx-container .input-field input[type='number']:focus:not([readonly]),
      .sdx-container .input-field input[type='search']:focus:not([readonly]),
      .sdx-container .input-field textarea:focus:not([readonly]) {
        margin-top: 29px;
        border-color: #1781e3;
        color: #333; }
        .sdx-container .input-field input:not([type]):focus:not([readonly]) + label,
        .sdx-container .input-field input[type='text']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='password']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='email']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='url']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='time']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='date']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='datetime']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='datetime-local']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='tel']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='number']:focus:not([readonly]) + label,
        .sdx-container .input-field input[type='search']:focus:not([readonly]) + label,
        .sdx-container .input-field textarea:focus:not([readonly]) + label {
          transform: translateY(0);
          opacity: 1; }
        .sdx-container .input-field input:not([type]):focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='text']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='password']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='email']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='url']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='time']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='date']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='datetime']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='datetime-local']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='tel']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='number']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field input[type='search']:focus:not([readonly])::-webkit-input-placeholder,
        .sdx-container .input-field textarea:focus:not([readonly])::-webkit-input-placeholder {
          opacity: 0; }
        .sdx-container .input-field input:not([type]):focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='text']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='password']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='email']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='url']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='time']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='date']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='datetime']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='datetime-local']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='tel']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='number']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field input[type='search']:focus:not([readonly])::-moz-placeholder,
        .sdx-container .input-field textarea:focus:not([readonly])::-moz-placeholder {
          opacity: 0; }
        .sdx-container .input-field input:not([type]):focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='text']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='password']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='email']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='url']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='time']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='date']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='datetime']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='datetime-local']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='tel']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='number']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field input[type='search']:focus:not([readonly])::-ms-input-placeholder,
        .sdx-container .input-field textarea:focus:not([readonly])::-ms-input-placeholder {
          opacity: 0; }
        .sdx-container .input-field input:not([type]):focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='text']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='password']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='email']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='url']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='time']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='date']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='datetime']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='datetime-local']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='tel']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='number']:focus:not([readonly])::placeholder,
        .sdx-container .input-field input[type='search']:focus:not([readonly])::placeholder,
        .sdx-container .input-field textarea:focus:not([readonly])::placeholder {
          opacity: 0; }
      .sdx-container .input-field input:not([type]):disabled, .sdx-container .input-field input:not([type])[readonly],
      .sdx-container .input-field input[type='text']:disabled,
      .sdx-container .input-field input[type='text'][readonly],
      .sdx-container .input-field input[type='password']:disabled,
      .sdx-container .input-field input[type='password'][readonly],
      .sdx-container .input-field input[type='email']:disabled,
      .sdx-container .input-field input[type='email'][readonly],
      .sdx-container .input-field input[type='url']:disabled,
      .sdx-container .input-field input[type='url'][readonly],
      .sdx-container .input-field input[type='time']:disabled,
      .sdx-container .input-field input[type='time'][readonly],
      .sdx-container .input-field input[type='date']:disabled,
      .sdx-container .input-field input[type='date'][readonly],
      .sdx-container .input-field input[type='datetime']:disabled,
      .sdx-container .input-field input[type='datetime'][readonly],
      .sdx-container .input-field input[type='datetime-local']:disabled,
      .sdx-container .input-field input[type='datetime-local'][readonly],
      .sdx-container .input-field input[type='tel']:disabled,
      .sdx-container .input-field input[type='tel'][readonly],
      .sdx-container .input-field input[type='number']:disabled,
      .sdx-container .input-field input[type='number'][readonly],
      .sdx-container .input-field input[type='search']:disabled,
      .sdx-container .input-field input[type='search'][readonly],
      .sdx-container .input-field textarea:disabled,
      .sdx-container .input-field textarea[readonly] {
        opacity: 1;
        border-color: #dde3e7;
        background-color: #f8fafb;
        color: #bbb; }
        .sdx-container .input-field input:not([type]):disabled + label, .sdx-container .input-field input:not([type])[readonly] + label,
        .sdx-container .input-field input[type='text']:disabled + label,
        .sdx-container .input-field input[type='text'][readonly] + label,
        .sdx-container .input-field input[type='password']:disabled + label,
        .sdx-container .input-field input[type='password'][readonly] + label,
        .sdx-container .input-field input[type='email']:disabled + label,
        .sdx-container .input-field input[type='email'][readonly] + label,
        .sdx-container .input-field input[type='url']:disabled + label,
        .sdx-container .input-field input[type='url'][readonly] + label,
        .sdx-container .input-field input[type='time']:disabled + label,
        .sdx-container .input-field input[type='time'][readonly] + label,
        .sdx-container .input-field input[type='date']:disabled + label,
        .sdx-container .input-field input[type='date'][readonly] + label,
        .sdx-container .input-field input[type='datetime']:disabled + label,
        .sdx-container .input-field input[type='datetime'][readonly] + label,
        .sdx-container .input-field input[type='datetime-local']:disabled + label,
        .sdx-container .input-field input[type='datetime-local'][readonly] + label,
        .sdx-container .input-field input[type='tel']:disabled + label,
        .sdx-container .input-field input[type='tel'][readonly] + label,
        .sdx-container .input-field input[type='number']:disabled + label,
        .sdx-container .input-field input[type='number'][readonly] + label,
        .sdx-container .input-field input[type='search']:disabled + label,
        .sdx-container .input-field input[type='search'][readonly] + label,
        .sdx-container .input-field textarea:disabled + label,
        .sdx-container .input-field textarea[readonly] + label {
          color: #666; }
      .sdx-container .input-field input:not([type]):disabled,
      .sdx-container .input-field input[type='text']:disabled,
      .sdx-container .input-field input[type='password']:disabled,
      .sdx-container .input-field input[type='email']:disabled,
      .sdx-container .input-field input[type='url']:disabled,
      .sdx-container .input-field input[type='time']:disabled,
      .sdx-container .input-field input[type='date']:disabled,
      .sdx-container .input-field input[type='datetime']:disabled,
      .sdx-container .input-field input[type='datetime-local']:disabled,
      .sdx-container .input-field input[type='tel']:disabled,
      .sdx-container .input-field input[type='number']:disabled,
      .sdx-container .input-field input[type='search']:disabled,
      .sdx-container .input-field textarea:disabled {
        cursor: not-allowed;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none; }
      .sdx-container .input-field input:not([type]).valid, .sdx-container .input-field input:not([type]):valid, .sdx-container .input-field input:not([type]).invalid, .sdx-container .input-field input:not([type]):invalid,
      .sdx-container .input-field input[type='text'].valid,
      .sdx-container .input-field input[type='text']:valid,
      .sdx-container .input-field input[type='text'].invalid,
      .sdx-container .input-field input[type='text']:invalid,
      .sdx-container .input-field input[type='password'].valid,
      .sdx-container .input-field input[type='password']:valid,
      .sdx-container .input-field input[type='password'].invalid,
      .sdx-container .input-field input[type='password']:invalid,
      .sdx-container .input-field input[type='email'].valid,
      .sdx-container .input-field input[type='email']:valid,
      .sdx-container .input-field input[type='email'].invalid,
      .sdx-container .input-field input[type='email']:invalid,
      .sdx-container .input-field input[type='url'].valid,
      .sdx-container .input-field input[type='url']:valid,
      .sdx-container .input-field input[type='url'].invalid,
      .sdx-container .input-field input[type='url']:invalid,
      .sdx-container .input-field input[type='time'].valid,
      .sdx-container .input-field input[type='time']:valid,
      .sdx-container .input-field input[type='time'].invalid,
      .sdx-container .input-field input[type='time']:invalid,
      .sdx-container .input-field input[type='date'].valid,
      .sdx-container .input-field input[type='date']:valid,
      .sdx-container .input-field input[type='date'].invalid,
      .sdx-container .input-field input[type='date']:invalid,
      .sdx-container .input-field input[type='datetime'].valid,
      .sdx-container .input-field input[type='datetime']:valid,
      .sdx-container .input-field input[type='datetime'].invalid,
      .sdx-container .input-field input[type='datetime']:invalid,
      .sdx-container .input-field input[type='datetime-local'].valid,
      .sdx-container .input-field input[type='datetime-local']:valid,
      .sdx-container .input-field input[type='datetime-local'].invalid,
      .sdx-container .input-field input[type='datetime-local']:invalid,
      .sdx-container .input-field input[type='tel'].valid,
      .sdx-container .input-field input[type='tel']:valid,
      .sdx-container .input-field input[type='tel'].invalid,
      .sdx-container .input-field input[type='tel']:invalid,
      .sdx-container .input-field input[type='number'].valid,
      .sdx-container .input-field input[type='number']:valid,
      .sdx-container .input-field input[type='number'].invalid,
      .sdx-container .input-field input[type='number']:invalid,
      .sdx-container .input-field input[type='search'].valid,
      .sdx-container .input-field input[type='search']:valid,
      .sdx-container .input-field input[type='search'].invalid,
      .sdx-container .input-field input[type='search']:invalid,
      .sdx-container .input-field textarea.valid,
      .sdx-container .input-field textarea:valid,
      .sdx-container .input-field textarea.invalid,
      .sdx-container .input-field textarea:invalid {
        box-shadow: none;
        background-repeat: no-repeat;
        background-position: center right 16px;
        background-size: 22px 22px; }
        .sdx-container .input-field input:not([type]).valid ~ .icon, .sdx-container .input-field input:not([type]):valid ~ .icon, .sdx-container .input-field input:not([type]).invalid ~ .icon, .sdx-container .input-field input:not([type]):invalid ~ .icon,
        .sdx-container .input-field input[type='text'].valid ~ .icon,
        .sdx-container .input-field input[type='text']:valid ~ .icon,
        .sdx-container .input-field input[type='text'].invalid ~ .icon,
        .sdx-container .input-field input[type='text']:invalid ~ .icon,
        .sdx-container .input-field input[type='password'].valid ~ .icon,
        .sdx-container .input-field input[type='password']:valid ~ .icon,
        .sdx-container .input-field input[type='password'].invalid ~ .icon,
        .sdx-container .input-field input[type='password']:invalid ~ .icon,
        .sdx-container .input-field input[type='email'].valid ~ .icon,
        .sdx-container .input-field input[type='email']:valid ~ .icon,
        .sdx-container .input-field input[type='email'].invalid ~ .icon,
        .sdx-container .input-field input[type='email']:invalid ~ .icon,
        .sdx-container .input-field input[type='url'].valid ~ .icon,
        .sdx-container .input-field input[type='url']:valid ~ .icon,
        .sdx-container .input-field input[type='url'].invalid ~ .icon,
        .sdx-container .input-field input[type='url']:invalid ~ .icon,
        .sdx-container .input-field input[type='time'].valid ~ .icon,
        .sdx-container .input-field input[type='time']:valid ~ .icon,
        .sdx-container .input-field input[type='time'].invalid ~ .icon,
        .sdx-container .input-field input[type='time']:invalid ~ .icon,
        .sdx-container .input-field input[type='date'].valid ~ .icon,
        .sdx-container .input-field input[type='date']:valid ~ .icon,
        .sdx-container .input-field input[type='date'].invalid ~ .icon,
        .sdx-container .input-field input[type='date']:invalid ~ .icon,
        .sdx-container .input-field input[type='datetime'].valid ~ .icon,
        .sdx-container .input-field input[type='datetime']:valid ~ .icon,
        .sdx-container .input-field input[type='datetime'].invalid ~ .icon,
        .sdx-container .input-field input[type='datetime']:invalid ~ .icon,
        .sdx-container .input-field input[type='datetime-local'].valid ~ .icon,
        .sdx-container .input-field input[type='datetime-local']:valid ~ .icon,
        .sdx-container .input-field input[type='datetime-local'].invalid ~ .icon,
        .sdx-container .input-field input[type='datetime-local']:invalid ~ .icon,
        .sdx-container .input-field input[type='tel'].valid ~ .icon,
        .sdx-container .input-field input[type='tel']:valid ~ .icon,
        .sdx-container .input-field input[type='tel'].invalid ~ .icon,
        .sdx-container .input-field input[type='tel']:invalid ~ .icon,
        .sdx-container .input-field input[type='number'].valid ~ .icon,
        .sdx-container .input-field input[type='number']:valid ~ .icon,
        .sdx-container .input-field input[type='number'].invalid ~ .icon,
        .sdx-container .input-field input[type='number']:invalid ~ .icon,
        .sdx-container .input-field input[type='search'].valid ~ .icon,
        .sdx-container .input-field input[type='search']:valid ~ .icon,
        .sdx-container .input-field input[type='search'].invalid ~ .icon,
        .sdx-container .input-field input[type='search']:invalid ~ .icon,
        .sdx-container .input-field textarea.valid ~ .icon,
        .sdx-container .input-field textarea:valid ~ .icon,
        .sdx-container .input-field textarea.invalid ~ .icon,
        .sdx-container .input-field textarea:invalid ~ .icon {
          display: none; }
      .sdx-container .input-field input:not([type]).valid,
      .sdx-container .input-field input[type='text'].valid,
      .sdx-container .input-field input[type='password'].valid,
      .sdx-container .input-field input[type='email'].valid,
      .sdx-container .input-field input[type='url'].valid,
      .sdx-container .input-field input[type='time'].valid,
      .sdx-container .input-field input[type='date'].valid,
      .sdx-container .input-field input[type='datetime'].valid,
      .sdx-container .input-field input[type='datetime-local'].valid,
      .sdx-container .input-field input[type='tel'].valid,
      .sdx-container .input-field input[type='number'].valid,
      .sdx-container .input-field input[type='search'].valid,
      .sdx-container .input-field textarea.valid {
        border-color: #666;
        padding-right: 52px;
        color: #333;
        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30"><rect fill="none" width="30" height="30"/><path fill="#25b252" d="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 c-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"/></svg>'); }
      .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: #dd1122;
        color: #dd1122; }
        .sdx-container .input-field input:not([type]).invalid--inline,
        .sdx-container .input-field input[type='text'].invalid--inline,
        .sdx-container .input-field input[type='password'].invalid--inline,
        .sdx-container .input-field input[type='email'].invalid--inline,
        .sdx-container .input-field input[type='url'].invalid--inline,
        .sdx-container .input-field input[type='time'].invalid--inline,
        .sdx-container .input-field input[type='date'].invalid--inline,
        .sdx-container .input-field input[type='datetime'].invalid--inline,
        .sdx-container .input-field input[type='datetime-local'].invalid--inline,
        .sdx-container .input-field input[type='tel'].invalid--inline,
        .sdx-container .input-field input[type='number'].invalid--inline,
        .sdx-container .input-field input[type='search'].invalid--inline,
        .sdx-container .input-field textarea.invalid--inline {
          padding-right: 52px;
          background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30" height="30"><rect fill="none" width="30" height="30"/><path fill="#DD1122" d="M15,2C7.83,2,2,7.83,2,15s5.83,13,13,13s13-5.83,13-13S22.17,2,15,2z M15,26C8.93,26,4,21.07,4,15S8.93,4,15,4 s11,4.93,11,11S21.07,26,15,26z M17,21c0,1.1-0.9,2-2,2s-2-0.9-2-2c0-1.1,0.9-2,2-2S17,19.9,17,21z M13,7h4v4l-1,6h-2l-1-6V7z"/></svg>'); }
        .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: #dd1122; }
      .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: .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: -.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: -.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: 14px; }
  .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: #dd1122; }
    .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: -.1px;
      font-size: 18px;
      position: relative;
      cursor: pointer;
      margin-bottom: 0;
      padding-left: 36px;
      color: #333;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
      .sdx-container .checkbox [type='checkbox'] + label::before, .sdx-container .checkbox [type='checkbox'] + label::after {
        position: absolute;
        top: 1px;
        left: 0;
        z-index: 0;
        content: ''; }
      .sdx-container .checkbox [type='checkbox'] + label::before {
        transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid #adadad;
        border-radius: 5px;
        width: 22px;
        height: 22px; }
      .sdx-container .checkbox [type='checkbox'] + label::after {
        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 #adadad;
      background: transparent; }
    .sdx-container .checkbox [type='checkbox']:hover + label::after {
      transform: scale(0.5);
      color: #adadad; }
    .sdx-container .checkbox [type='checkbox']:focus + label::before {
      border: 2px solid #1781e3; }
    .sdx-container .checkbox [type='checkbox']:focus + label::after {
      color: #1781e3; }
    .sdx-container .checkbox [type='checkbox']:checked + label::before {
      border: 2px solid #1781e3;
      background: transparent; }
    .sdx-container .checkbox [type='checkbox']:checked + label::after {
      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: .4;
      pointer-events: none; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:hover + label::before {
      border: 2px solid #adadad;
      background: transparent; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:hover + label::after {
      transform: scale(0);
      color: #adadad; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:focus + label::before {
      border: 2px solid #1781e3; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:focus + label::after {
      color: #1781e3; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:checked + label::before {
      border: 2px solid #1781e3;
      background: transparent; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:checked + label::after {
      transform: scale(1);
      color: #1781e3; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:checked:focus + label::before {
      border: 2px solid #1781e3; }
    .hiddenscroll.touchevents .sdx-container .checkbox [type='checkbox']:checked:focus + label::after {
      color: #1781e3; }
    .sdx-container .checkbox--only [type='checkbox'] + label {
      display: inline;
      padding-left: 22px; }
    .sdx-container .checkbox--inverted [type='checkbox']:hover + label::before {
      border: 2px solid #0851da;
      background: #0851da; }
    .sdx-container .checkbox--inverted [type='checkbox']:hover + label::after {
      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 .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: -.1px;
      font-size: 18px;
      -webkit-font-smoothing: subpixel-antialiased;
      -moz-osx-font-smoothing: auto;
      display: inline-block;
      position: relative;
      cursor: pointer;
      margin-bottom: 0;
      padding-left: 36px;
      color: #333;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden; }
      .sdx-container .radio [type='radio'] + label::before, .sdx-container .radio [type='radio'] + label::after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        margin-top: 1px;
        border-radius: 50%;
        content: ''; }
      .sdx-container .radio [type='radio'] + label::before {
        transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
        width: 22px;
        height: 22px; }
      .sdx-container .radio [type='radio'] + label::after {
        top: 6px;
        left: 6px;
        transition: all 120ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
        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 #adadad; }
    .sdx-container .radio [type='radio']:hover + label::after {
      background: #adadad;
      border: 5px solid #adadad;
      border-radius: 52%;
      content: "";
      left: 6px;
      opacity: 1;
      position: absolute;
      top: 6px;
      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: .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: #dd1122; }
  .sdx-container .switch {
    display: flex;
    position: relative;
    margin-bottom: 12px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden; }
    .sdx-container .switch p {
      line-height: 24px;
      letter-spacing: -.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: -9999px;
      opacity: 0; }
    .sdx-container .switch [type='checkbox'] + label {
      line-height: 24px;
      letter-spacing: -.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;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      padding-left: 78px;
      z-index: 0; }
      .sdx-container .switch [type='checkbox'] + label::before {
        position: absolute;
        top: -2px;
        transition: all 180ms cubic-bezier(0.985, 0.385, 0.41, 0.445);
        z-index: 1;
        left: 0;
        margin: 0 auto;
        border-radius: 28px;
        background: #d6d6d6;
        width: 58px;
        height: 28px;
        content: ''; }
      .sdx-container .switch [type='checkbox'] + label::after {
        position: absolute;
        top: -2px;
        bottom: 0;
        left: 0;
        transition: all 180ms 120ms cubic-bezier(0.445, 0.41, 0.395, 0.985);
        z-index: 2;
        margin: 0;
        border: 2px solid #adadad;
        border-radius: 28px;
        background: #fff;
        width: 28px;
        height: 28px;
        content: ''; }
    .sdx-container .switch [type='checkbox']:hover + label::before {
      z-index: 1; }
    .sdx-container .switch [type='checkbox']:hover + label::after {
      border-color: #858585;
      z-index: 2; }
    .sdx-container .switch [type='checkbox']:focus + label {
      outline: none; }
      .sdx-container .switch [type='checkbox']:focus + label::after {
        border-color: #858585;
        outline: none; }
    .sdx-container .switch [type='checkbox']:checked + label::before {
      top: -2px;
      border-radius: 28px;
      background-color: #25b252;
      height: 28px; }
    .sdx-container .switch [type='checkbox']:checked + label::after {
      left: 30px; }
    .sdx-container .switch [type='checkbox']:checked + label:hover::after {
      border-color: #858585;
      z-index: 2; }
    .sdx-container .switch [type='checkbox']:checked + label:focus {
      outline: none; }
      .sdx-container .switch [type='checkbox']:checked + label:focus::after {
        border-color: #858585; }
    .sdx-container .switch [type='checkbox'].disabled > label,
    .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: .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 .select {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 18px;
    position: relative;
    margin-bottom: 16px;
    outline: none;
    cursor: pointer;
    z-index: 500;
    color: #333;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; }
    .sdx-container .select:last-of-type {
      margin-bottom: 0; }
    .sdx-container .select select {
      display: none; }
    .sdx-container .select .select__button {
      position: relative;
      width: 100%;
      height: 48px; }
      .sdx-container .select .select__button:hover .select__thumb {
        background: #1781e3;
        color: #fff; }
        .sdx-container .select .select__button:hover .select__thumb .thumb-icon {
          position: relative; }
          .sdx-container .select .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .select .select__button:hover .select__thumb .thumb-icon::after {
            position: absolute;
            top: 50%;
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 3px;
            background: #fff;
            width: 20px;
            height: 3px;
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
            content: ''; }
          .sdx-container .select .select__button:hover .select__thumb .thumb-icon::before {
            left: 0; }
          .sdx-container .select .select__button:hover .select__thumb .thumb-icon::after {
            left: 15px; }
    .sdx-container .select .select__thumb {
      position: absolute;
      top: 0;
      right: 0;
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 501;
      border-radius: 0 5px 5px 0;
      cursor: inherit;
      width: 34px;
      height: inherit;
      color: #1781e3;
      transform-origin: 50% 50%; }
      .sdx-container .select .select__thumb .thumb-icon {
        position: relative;
        display: flex;
        transform: scale(0.5);
        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: 3px;
          background: #1781e3;
          width: 20px;
          height: 3px;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          content: ''; }
        .sdx-container .select .select__thumb .thumb-icon::before {
          left: 0; }
        .sdx-container .select .select__thumb .thumb-icon::after {
          left: 15px; }
      .sdx-container .select .select__thumb .loader-spinner {
        display: none; }
    .sdx-container .select .select__placeholder {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: #fff;
      display: block;
      position: relative;
      border: 1px solid #d6d6d6;
      border-radius: 5px;
      cursor: inherit;
      padding: 12px 55px 12px 15px;
      width: 100%;
      height: inherit;
      -webkit-appearance: none; }
    .sdx-container .select .select__dropdown {
      position: absolute;
      right: 0;
      left: 0;
      margin-bottom: 20px;
      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 #d6d6d6;
        border-top: 0;
        padding: 12px 15px 15px;
        width: 100%;
        height: 48px; }
        .sdx-container .select .select__dropdown .dropdown-item:last-child {
          border-radius: 0 0 5px 5px; }
        .sdx-container .select .select__dropdown .dropdown-item:hover, .sdx-container .select .select__dropdown .dropdown-item--focused {
          border-color: #1781e3;
          background: #1781e3;
          color: #fff; }
        .sdx-container .select .select__dropdown .dropdown-item--selected {
          color: #25b252; }
          .sdx-container .select .select__dropdown .dropdown-item--selected::before {
            float: right;
            margin-right: -7px;
            font-family: sdx-icons;
            font-size: 16px;
            content: ""; }
        .sdx-container .select .select__dropdown .dropdown-item--disabled, .sdx-container .select .select__dropdown .dropdown-item--disabled:hover {
          border-color: #d6d6d6;
          background: none;
          cursor: not-allowed;
          color: rgba(51, 51, 51, 0.4); }
    .sdx-container .select .message {
      max-height: 0;
      margin-top: 0;
      opacity: 0;
      transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10; }
    .sdx-container .select.invalid > .message {
      max-height: 50px;
      margin-top: 6px;
      opacity: 1;
      color: #dd1122; }
    .sdx-container .select .dropdown-group__item {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position: relative;
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
      border: 1px solid #d6d6d6;
      border-top: 0;
      padding: 12px 15px 15px;
      width: 100%;
      height: 48px;
      background-color: #eef3f6;
      color: #666;
      pointer-events: none; }
      .sdx-container .select .dropdown-group__item:hover {
        cursor: default; }
    .sdx-container .select .dropdown-group .dropdown-item:last-child {
      border-radius: 0; }
    .sdx-container .select .dropdown-group:last-child .dropdown-item:last-child {
      border-radius: 0 0 5px 5px; }
    .sdx-container .select--closed .select__thumb .thumb-icon::before {
      transform: rotate(35deg); }
    .sdx-container .select--closed .select__thumb .thumb-icon::after {
      transform: rotate(-35deg); }
    .sdx-container .select--closed .select__dropdown {
      transform: scale(1, 0);
      opacity: .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(-35deg); }
        .sdx-container .select--open .select__thumb .thumb-icon::after {
          transform: rotate(35deg); }
      .sdx-container .select--open .select__placeholder {
        border-radius: 5px 5px 0 0;
        box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.1);
        color: #1781e3; }
      .sdx-container .select--open .select__dropdown {
        max-height: 512px;
        overflow-y: auto; }
    .sdx-container .select--disabled {
      opacity: .4;
      cursor: not-allowed; }
      .sdx-container .select--disabled .select__button:hover .select__thumb {
        background: none;
        color: #1781e3; }
        .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon {
          position: relative; }
          .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::after {
            position: absolute;
            top: 50%;
            transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 3px;
            background: #1781e3;
            width: 20px;
            height: 3px;
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
            content: ''; }
          .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::before {
            left: 0; }
          .sdx-container .select--disabled .select__button:hover .select__thumb .thumb-icon::after {
            left: 15px; }
    .sdx-container .select--filterable .select__dropdown .dropdown-item strong {
      transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); }
    .sdx-container .select--filterable .select__dropdown .dropdown-item:hover strong {
      color: #fff !important; }
    .sdx-container .select--filterable .select__dropdown .dropdown-item.dropdown-item--selected strong {
      font-weight: inherit; }
    .sdx-container .select--filterable .select__dropdown .dropdown-item:not(.dropdown-item--selected) strong {
      color: #1781e3; }
    .sdx-container .select--filterable .select__placeholder:focus:not([readonly]) {
      border-color: #1781e3; }
    .sdx-container .select--loading {
      pointer-events: none; }
      .sdx-container .select--loading .select__thumb .loader-spinner {
        display: block;
        top: 50%;
        left: 50%;
        margin-top: -12.5px;
        margin-left: -12.5px; }
      .sdx-container .select--loading .select__thumb .thumb-icon {
        display: none; }
  .sdx-container .select--minimal .select__button:hover .select__thumb {
    background: none;
    color: #0851da; }
    .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon {
      position: relative; }
      .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::before, .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::after {
        position: absolute;
        top: 50%;
        transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 3px;
        background: #0851da;
        width: 20px;
        height: 3px;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        content: ''; }
      .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::before {
        left: 0; }
      .sdx-container .select--minimal .select__button:hover .select__thumb .thumb-icon::after {
        left: 15px; }
  .sdx-container .select--minimal .select__placeholder {
    border: 0;
    border-bottom: 1px solid #d6d6d6;
    border-radius: 0;
    box-shadow: none;
    color: #333; }
  .sdx-container .select--minimal .select__dropdown {
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 4px 0 rgba(51, 51, 51, 0.15); }
    .sdx-container .select--minimal .select__dropdown .dropdown-item {
      border: 0;
      border-bottom: 1px solid #d6d6d6;
      border-radius: 0; }
      .sdx-container .select--minimal .select__dropdown .dropdown-item:last-child {
        border-bottom: 0;
        border-radius: 0; }
  .sdx-container .select--minimal.select--open .select__placeholder {
    border-color: transparent; }
  .sdx-container .select--minimal.select--tabs .select__placeholder {
    border: 0;
    border-bottom: 4px solid #1781e3;
    border-radius: 0;
    box-shadow: none;
    color: #333; }
  .sdx-container select {
    display: block;
    position: relative;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    padding: 12px 55px 12px 15px;
    width: auto;
    height: 48px;
    color: #333;
    -webkit-appearance: none; }
  .sdx-container .bg--dark label {
    font-weight: 400; }
  .sdx-container .button-group {
    display: flex;
    margin: -8px -6px;
    flex-wrap: wrap; }
    .sdx-container .button-group .button {
      margin: 8px 6px; }
  .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: -.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%;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            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,
    .sdx-container .bg--dark .button--primary.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,
      .sdx-container .bg--dark .button--primary.button:hover,
      .sdx-container .bg--dark .button--primary.button:focus,
      .sdx-container .bg--dark .button--primary.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,
      .sdx-container .bg--dark .button--primary.disabled.button,
      .sdx-container .bg--dark .button--primary.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.button--full[type='submit'],
  .sdx-container input.button--full[type='reset'],
  .sdx-container input.button--full[type='button'] {
    display: block;
    width: 100%; }
    .sdx-container .button-group--responsive .button--full:active,
    .sdx-container .button--full:active,
    .sdx-container input.button--full:active[type='submit'],
    .sdx-container input.button--full:active[type='reset'],
    .sdx-container input.button--full:active[type='button'] {
      transform: scale(0.9925, 0.98); }
  .sdx-container .button--responsive,
  .sdx-container input.button--responsive[type='submit'],
  .sdx-container input.button--responsive[type='reset'],
  .sdx-container input.button--responsive[type='button'] {
    width: 100%; }
    @media (min-width: 480px) {
      .sdx-container .button--responsive,
      .sdx-container input.button--responsive[type='submit'],
      .sdx-container input.button--responsive[type='reset'],
      .sdx-container input.button--responsive[type='button'] {
        width: auto; } }
  .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 .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 {
      -moz-column-count: 1;
           column-count: 1; }
    .sdx-container .footer .nav-section--col-2 {
      -moz-column-count: 2;
           column-count: 2; }
    .sdx-container .footer .nav-section--col-3 {
      -moz-column-count: 3;
           column-count: 3; }
    .sdx-container .footer .nav-section--col-4 {
      -moz-column-count: 4;
           column-count: 4; }
    .sdx-container .footer .nav-section--col-5 {
      -moz-column-count: 5;
           column-count: 5; }
    .sdx-container .footer .nav-section--col-6 {
      -moz-column-count: 6;
           column-count: 6; }
    @media (max-width: 767px) {
      .sdx-container .footer .nav-section {
        -moz-column-count: 1;
             column-count: 1; } }
    @media (min-width: 768px) {
      .sdx-container .footer .nav-section {
        -moz-column-gap: 16px;
             column-gap: 16px; }
      .sdx-container .footer .nav-section--col-md-1 {
        -moz-column-count: 1;
             column-count: 1; }
      .sdx-container .footer .nav-section--col-md-2 {
        -moz-column-count: 2;
             column-count: 2; }
      .sdx-container .footer .nav-section--col-md-3 {
        -moz-column-count: 3;
             column-count: 3; }
      .sdx-container .footer .nav-section--col-md-4 {
        -moz-column-count: 4;
             column-count: 4; }
      .sdx-container .footer .nav-section--col-md-5 {
        -moz-column-count: 5;
             column-count: 5; }
      .sdx-container .footer .nav-section--col-md-6 {
        -moz-column-count: 6;
             column-count: 6; } }
    @media (min-width: 1024px) {
      .sdx-container .footer .nav-section {
        -moz-column-gap: 24px;
             column-gap: 24px; }
      .sdx-container .footer .nav-section--col-lg-1 {
        -moz-column-count: 1;
             column-count: 1; }
      .sdx-container .footer .nav-section--col-lg-2 {
        -moz-column-count: 2;
             column-count: 2; }
      .sdx-container .footer .nav-section--col-lg-3 {
        -moz-column-count: 3;
             column-count: 3; }
      .sdx-container .footer .nav-section--col-lg-4 {
        -moz-column-count: 4;
             column-count: 4; }
      .sdx-container .footer .nav-section--col-lg-5 {
        -moz-column-count: 5;
             column-count: 5; }
      .sdx-container .footer .nav-section--col-lg-6 {
        -moz-column-count: 6;
             column-count: 6; } }
    @media (min-width: 1280px) {
      .sdx-container .footer .nav-section {
        -moz-column-gap: 24px;
             column-gap: 24px; }
      .sdx-container .footer .nav-section--col-xl-1 {
        -moz-column-count: 1;
             column-count: 1; }
      .sdx-container .footer .nav-section--col-xl-2 {
        -moz-column-count: 2;
             column-count: 2; }
      .sdx-container .footer .nav-section--col-xl-3 {
        -moz-column-count: 3;
             column-count: 3; }
      .sdx-container .footer .nav-section--col-xl-4 {
        -moz-column-count: 4;
             column-count: 4; }
      .sdx-container .footer .nav-section--col-xl-5 {
        -moz-column-count: 5;
             column-count: 5; }
      .sdx-container .footer .nav-section--col-xl-6 {
        -moz-column-count: 6;
             column-count: 6; } }
    @media (min-width: 1440px) {
      .sdx-container .footer .nav-section {
        -moz-column-gap: 24px;
             column-gap: 24px; }
      .sdx-container .footer .nav-section--col-ul-1 {
        -moz-column-count: 1;
             column-count: 1; }
      .sdx-container .footer .nav-section--col-ul-2 {
        -moz-column-count: 2;
             column-count: 2; }
      .sdx-container .footer .nav-section--col-ul-3 {
        -moz-column-count: 3;
             column-count: 3; }
      .sdx-container .footer .nav-section--col-ul-4 {
        -moz-column-count: 4;
             column-count: 4; }
      .sdx-container .footer .nav-section--col-ul-5 {
        -moz-column-count: 5;
             column-count: 5; }
      .sdx-container .footer .nav-section--col-ul-6 {
        -moz-column-count: 6;
             column-count: 6; } }
    .sdx-container .footer .nav-section .nav-col {
      display: table;
      width: 100%;
      overflow: hidden;
      page-break-inside: avoid;
      -moz-column-break-inside: avoid;
           break-inside: avoid; }
      @media (min-width: 1024px) {
        .sdx-container .footer .nav-section .nav-col {
          -moz-column-break-after: column;
               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;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        min-width: 40px;
        -webkit-animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
                animation: repeatingAnimation 30s steps(90) infinite, initialAnimation 6s steps(90);
        display: inline-block;
        position: relative;
        left: 0;
        top: 0; }
        @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
          .sdx-container .footer .logo .logo-lifeform {
            background-image: url("../images/lifeform-spritesheet@2x.png"); } }

@-webkit-keyframes initialAnimation {
  100% {
    background-position: -3600px; } }

@keyframes initialAnimation {
  100% {
    background-position: -3600px; } }

@-webkit-keyframes repeatingAnimation {
  0% {
    background-position: 0; }
  80% {
    background-position: 0; }
  100% {
    background-position: -3600px; } }

@keyframes repeatingAnimation {
  0% {
    background-position: 0; }
  80% {
    background-position: 0; }
  100% {
    background-position: -3600px; } }
    @media (min-width: 768px) {
      .sdx-container .footer--compact {
        height: 80px; } }
    .sdx-container .footer--compact .nav-link {
      font-weight: 400;
      line-height: 24px;
      letter-spacing: -.1px;
      font-size: 18px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    .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: -.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 {
        -moz-column-count: 1;
             column-count: 1; } }
    .sdx-container .footer--full .footer__top {
      padding: 35px 0 72px; }
      @media (min-width: 0) {
        .sdx-container .footer--full .footer__top .nav-col > .container {
          margin-left: calc(24px - 4px);
          margin-right: calc(24px - 4px);
          padding-left: 4px;
          padding-right: 4px;
          width: auto; } }
      @media (min-width: 480px) {
        .sdx-container .footer--full .footer__top .nav-col > .container {
          margin-left: calc(24px - 4px);
          margin-right: calc(24px - 4px);
          padding-left: 4px;
          padding-right: 4px;
          width: auto; } }
      @media (min-width: 768px) {
        .sdx-container .footer--full .footer__top .nav-col > .container {
          margin-left: auto;
          margin-right: auto;
          padding-left: 8px;
          padding-right: 8px;
          width: 742px; } }
      @media (min-width: 1024px) {
        .sdx-container .footer--full .footer__top .nav-col > .container {
          padding: 0;
          margin: 0;
          width: auto; } }
      .sdx-container .footer--full .footer__top .nav-items {
        margin-top: 8px; }
        .sdx-container .footer--full .footer__top .nav-items .nav-item {
          margin-bottom: 8px; }
          .sdx-container .footer--full .footer__top .nav-items .nav-item:last-child {
            margin: 0; }
      @media (max-width: 1023px) {
        .sdx-container .footer--full .footer__top {
          padding: 0; }
          .sdx-container .footer--full .footer__top > .container {
            padding: 0;
            margin: 0;
            width: auto; }
          .sdx-container .footer--full .footer__top .nav-col {
            padding: 22px 0 24px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
            .sdx-container .footer--full .footer__top .nav-col:last-of-type {
              border-bottom: 0; }
          .sdx-container .footer--full .footer__top .nav-items {
            text-align: inherit; } }
    .sdx-container .footer--full .footer__bottom {
      height: 100%;
      padding: 27px 0 25px; }
      @media (min-width: 768px) {
        .sdx-container .footer--full .footer__bottom {
          height: 128px;
          padding: 25px 0; } }
      .sdx-container .footer--full .footer__bottom .row {
        margin-bottom: 0; }
        @media (min-width: 768px) {
          .sdx-container .footer--full .footer__bottom .row {
            margin-bottom: 13px; } }
        .sdx-container .footer--full .footer__bottom .row:last-child {
          margin-bottom: 0; }
      .sdx-container .footer--full .footer__bottom .nav-items {
        display: inline-block; }
        .sdx-container .footer--full .footer__bottom .nav-items--divider .nav-item {
          margin: 0; }
      .sdx-container .footer--full .footer__bottom .nav-item {
        float: left;
        margin-right: 22px;
        text-align: center; }
        .sdx-container .footer--full .footer__bottom .nav-item:last-child {
          margin: 0; }
        @media (min-width: 768px) {
          .sdx-container .footer--full .footer__bottom .nav-item {
            text-align: left; } }
      .sdx-container .footer--full .footer__bottom .footer--left,
      .sdx-container .footer--full .footer__bottom .footer--right {
        float: none;
        margin-top: 0;
        text-align: center; }
      .sdx-container .footer--full .footer__bottom .footer--social-icons {
        text-align: center;
        margin-bottom: 12px; }
        @media (min-width: 768px) {
          .sdx-container .footer--full .footer__bottom .footer--social-icons {
            margin-bottom: 0; } }
        .sdx-container .footer--full .footer__bottom .footer--social-icons .nav-item {
          margin-right: 24px; }
          .sdx-container .footer--full .footer__bottom .footer--social-icons .nav-item:last-child {
            margin: 0; }
      .sdx-container .footer--full .footer__bottom .footer--nav {
        margin-bottom: 9px; }
        @media (min-width: 768px) {
          .sdx-container .footer--full .footer__bottom .footer--nav {
            margin-bottom: 0; } }
      .sdx-container .footer--full .footer__bottom .footer--copyright {
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center; }
        @media (min-width: 768px) {
          .sdx-container .footer--full .footer__bottom .footer--copyright {
            font-weight: 400;
            line-height: 24px;
            letter-spacing: .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;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          content: ''; }
        .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before {
          left: 0; }
        .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::after {
          left: 6px; }
        .sdx-container .footer--full .footer__top .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle .arrow-icon::before {
          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;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          content: ''; }
        .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::before {
          left: 0; }
        .sdx-container .footer--full .footer__top .accordion__toggle:hover .arrow-icon::after, .sdx-container .footer--full.footer--dark .footer__top .accordion__toggle:hover .arrow-icon::after {
          left: 6px; }
      .sdx-container .footer--full .footer__top .is-open .accordion__toggle .arrow-icon::before, .sdx-container .footer--full.footer--dark .footer__top .is-open .accordion__toggle .arrow-icon::before {
        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;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          content: ''; }
        .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before {
          left: 0; }
        .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::after {
          left: 6px; }
        .sdx-container .footer--full.footer--light .footer__top .accordion__toggle .arrow-icon::before {
          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;
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          content: ''; }
        .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::before {
          left: 0; }
        .sdx-container .footer--full.footer--light .footer__top .accordion__toggle:hover .arrow-icon::after {
          left: 6px; }
      .sdx-container .footer--full.footer--light .footer__top .is-open .accordion__toggle .arrow-icon::before {
        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: .1px;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
  @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.33333%;
      max-width: 8.33333%; }
    .sdx-container .col-xs-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    .sdx-container .col-xs-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    .sdx-container .col-xs-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .sdx-container .col-xs-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    .sdx-container .col-xs-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    .sdx-container .col-xs-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    .sdx-container .col-xs-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    .sdx-container .col-xs-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    .sdx-container .col-xs-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    .sdx-container .col-xs-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    .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.33333%; }
    .sdx-container .pull-xs-2 {
      right: 16.66667%; }
    .sdx-container .pull-xs-3 {
      right: 25%; }
    .sdx-container .pull-xs-4 {
      right: 33.33333%; }
    .sdx-container .pull-xs-5 {
      right: 41.66667%; }
    .sdx-container .pull-xs-6 {
      right: 50%; }
    .sdx-container .pull-xs-7 {
      right: 58.33333%; }
    .sdx-container .pull-xs-8 {
      right: 66.66667%; }
    .sdx-container .pull-xs-9 {
      right: 75%; }
    .sdx-container .pull-xs-10 {
      right: 83.33333%; }
    .sdx-container .pull-xs-11 {
      right: 91.66667%; }
    .sdx-container .pull-xs-12 {
      right: 100%; }
    .sdx-container .push-xs-0 {
      left: auto; }
    .sdx-container .push-xs-1 {
      left: 8.33333%; }
    .sdx-container .push-xs-2 {
      left: 16.66667%; }
    .sdx-container .push-xs-3 {
      left: 25%; }
    .sdx-container .push-xs-4 {
      left: 33.33333%; }
    .sdx-container .push-xs-5 {
      left: 41.66667%; }
    .sdx-container .push-xs-6 {
      left: 50%; }
    .sdx-container .push-xs-7 {
      left: 58.33333%; }
    .sdx-container .push-xs-8 {
      left: 66.66667%; }
    .sdx-container .push-xs-9 {
      left: 75%; }
    .sdx-container .push-xs-10 {
      left: 83.33333%; }
    .sdx-container .push-xs-11 {
      left: 91.66667%; }
    .sdx-container .push-xs-12 {
      left: 100%; }
    .sdx-container .offset-xs-1 {
      margin-left: 8.33333%; }
    .sdx-container .offset-xs-2 {
      margin-left: 16.66667%; }
    .sdx-container .offset-xs-3 {
      margin-left: 25%; }
    .sdx-container .offset-xs-4 {
      margin-left: 33.33333%; }
    .sdx-container .offset-xs-5 {
      margin-left: 41.66667%; }
    .sdx-container .offset-xs-6 {
      margin-left: 50%; }
    .sdx-container .offset-xs-7 {
      margin-left: 58.33333%; }
    .sdx-container .offset-xs-8 {
      margin-left: 66.66667%; }
    .sdx-container .offset-xs-9 {
      margin-left: 75%; }
    .sdx-container .offset-xs-10 {
      margin-left: 83.33333%; }
    .sdx-container .offset-xs-11 {
      margin-left: 91.66667%; } }
  @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.33333%;
      max-width: 8.33333%; }
    .sdx-container .col-sm-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    .sdx-container .col-sm-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    .sdx-container .col-sm-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .sdx-container .col-sm-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    .sdx-container .col-sm-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    .sdx-container .col-sm-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    .sdx-container .col-sm-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    .sdx-container .col-sm-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    .sdx-container .col-sm-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    .sdx-container .col-sm-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    .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.33333%; }
    .sdx-container .pull-sm-2 {
      right: 16.66667%; }
    .sdx-container .pull-sm-3 {
      right: 25%; }
    .sdx-container .pull-sm-4 {
      right: 33.33333%; }
    .sdx-container .pull-sm-5 {
      right: 41.66667%; }
    .sdx-container .pull-sm-6 {
      right: 50%; }
    .sdx-container .pull-sm-7 {
      right: 58.33333%; }
    .sdx-container .pull-sm-8 {
      right: 66.66667%; }
    .sdx-container .pull-sm-9 {
      right: 75%; }
    .sdx-container .pull-sm-10 {
      right: 83.33333%; }
    .sdx-container .pull-sm-11 {
      right: 91.66667%; }
    .sdx-container .pull-sm-12 {
      right: 100%; }
    .sdx-container .push-sm-0 {
      left: auto; }
    .sdx-container .push-sm-1 {
      left: 8.33333%; }
    .sdx-container .push-sm-2 {
      left: 16.66667%; }
    .sdx-container .push-sm-3 {
      left: 25%; }
    .sdx-container .push-sm-4 {
      left: 33.33333%; }
    .sdx-container .push-sm-5 {
      left: 41.66667%; }
    .sdx-container .push-sm-6 {
      left: 50%; }
    .sdx-container .push-sm-7 {
      left: 58.33333%; }
    .sdx-container .push-sm-8 {
      left: 66.66667%; }
    .sdx-container .push-sm-9 {
      left: 75%; }
    .sdx-container .push-sm-10 {
      left: 83.33333%; }
    .sdx-container .push-sm-11 {
      left: 91.66667%; }
    .sdx-container .push-sm-12 {
      left: 100%; }
    .sdx-container .offset-sm-1 {
      margin-left: 8.33333%; }
    .sdx-container .offset-sm-2 {
      margin-left: 16.66667%; }
    .sdx-container .offset-sm-3 {
      margin-left: 25%; }
    .sdx-container .offset-sm-4 {
      margin-left: 33.33333%; }
    .sdx-container .offset-sm-5 {
      margin-left: 41.66667%; }
    .sdx-container .offset-sm-6 {
      margin-left: 50%; }
    .sdx-container .offset-sm-7 {
      margin-left: 58.33333%; }
    .sdx-container .offset-sm-8 {
      margin-left: 66.66667%; }
    .sdx-container .offset-sm-9 {
      margin-left: 75%; }
    .sdx-container .offset-sm-10 {
      margin-left: 83.33333%; }
    .sdx-container .offset-sm-11 {
      margin-left: 91.66667%; } }
  @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.33333%;
      max-width: 8.33333%; }
    .sdx-container .col-md-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    .sdx-container .col-md-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    .sdx-container .col-md-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .sdx-container .col-md-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    .sdx-container .col-md-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    .sdx-container .col-md-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    .sdx-container .col-md-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    .sdx-container .col-md-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    .sdx-container .col-md-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    .sdx-container .col-md-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    .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.33333%; }
    .sdx-container .pull-md-2 {
      right: 16.66667%; }
    .sdx-container .pull-md-3 {
      right: 25%; }
    .sdx-container .pull-md-4 {
      right: 33.33333%; }
    .sdx-container .pull-md-5 {
      right: 41.66667%; }
    .sdx-container .pull-md-6 {
      right: 50%; }
    .sdx-container .pull-md-7 {
      right: 58.33333%; }
    .sdx-container .pull-md-8 {
      right: 66.66667%; }
    .sdx-container .pull-md-9 {
      right: 75%; }
    .sdx-container .pull-md-10 {
      right: 83.33333%; }
    .sdx-container .pull-md-11 {
      right: 91.66667%; }
    .sdx-container .pull-md-12 {
      right: 100%; }
    .sdx-container .push-md-0 {
      left: auto; }
    .sdx-container .push-md-1 {
      left: 8.33333%; }
    .sdx-container .push-md-2 {
      left: 16.66667%; }
    .sdx-container .push-md-3 {
      left: 25%; }
    .sdx-container .push-md-4 {
      left: 33.33333%; }
    .sdx-container .push-md-5 {
      left: 41.66667%; }
    .sdx-container .push-md-6 {
      left: 50%; }
    .sdx-container .push-md-7 {
      left: 58.33333%; }
    .sdx-container .push-md-8 {
      left: 66.66667%; }
    .sdx-container .push-md-9 {
      left: 75%; }
    .sdx-container .push-md-10 {
      left: 83.33333%; }
    .sdx-container .push-md-11 {
      left: 91.66667%; }
    .sdx-container .push-md-12 {
      left: 100%; }
    .sdx-container .offset-md-1 {
      margin-left: 8.33333%; }
    .sdx-container .offset-md-2 {
      margin-left: 16.66667%; }
    .sdx-container .offset-md-3 {
      margin-left: 25%; }
    .sdx-container .offset-md-4 {
      margin-left: 33.33333%; }
    .sdx-container .offset-md-5 {
      margin-left: 41.66667%; }
    .sdx-container .offset-md-6 {
      margin-left: 50%; }
    .sdx-container .offset-md-7 {
      margin-left: 58.33333%; }
    .sdx-container .offset-md-8 {
      margin-left: 66.66667%; }
    .sdx-container .offset-md-9 {
      margin-left: 75%; }
    .sdx-container .offset-md-10 {
      margin-left: 83.33333%; }
    .sdx-container .offset-md-11 {
      margin-left: 91.66667%; } }
  @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.33333%;
      max-width: 8.33333%; }
    .sdx-container .col-lg-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    .sdx-container .col-lg-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    .sdx-container .col-lg-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .sdx-container .col-lg-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    .sdx-container .col-lg-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    .sdx-container .col-lg-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    .sdx-container .col-lg-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    .sdx-container .col-lg-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    .sdx-container .col-lg-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    .sdx-container .col-lg-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    .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.33333%; }
    .sdx-container .pull-lg-2 {
      right: 16.66667%; }
    .sdx-container .pull-lg-3 {
      right: 25%; }
    .sdx-container .pull-lg-4 {
      right: 33.33333%; }
    .sdx-container .pull-lg-5 {
      right: 41.66667%; }
    .sdx-container .pull-lg-6 {
      right: 50%; }
    .sdx-container .pull-lg-7 {
      right: 58.33333%; }
    .sdx-container .pull-lg-8 {
      right: 66.66667%; }
    .sdx-container .pull-lg-9 {
      right: 75%; }
    .sdx-container .pull-lg-10 {
      right: 83.33333%; }
    .sdx-container .pull-lg-11 {
      right: 91.66667%; }
    .sdx-container .pull-lg-12 {
      right: 100%; }
    .sdx-container .push-lg-0 {
      left: auto; }
    .sdx-container .push-lg-1 {
      left: 8.33333%; }
    .sdx-container .push-lg-2 {
      left: 16.66667%; }
    .sdx-container .push-lg-3 {
      left: 25%; }
    .sdx-container .push-lg-4 {
      left: 33.33333%; }
    .sdx-container .push-lg-5 {
      left: 41.66667%; }
    .sdx-container .push-lg-6 {
      left: 50%; }
    .sdx-container .push-lg-7 {
      left: 58.33333%; }
    .sdx-container .push-lg-8 {
      left: 66.66667%; }
    .sdx-container .push-lg-9 {
      left: 75%; }
    .sdx-container .push-lg-10 {
      left: 83.33333%; }
    .sdx-container .push-lg-11 {
      left: 91.66667%; }
    .sdx-container .push-lg-12 {
      left: 100%; }
    .sdx-container .offset-lg-1 {
      margin-left: 8.33333%; }
    .sdx-container .offset-lg-2 {
      margin-left: 16.66667%; }
    .sdx-container .offset-lg-3 {
      margin-left: 25%; }
    .sdx-container .offset-lg-4 {
      margin-left: 33.33333%; }
    .sdx-container .offset-lg-5 {
      margin-left: 41.66667%; }
    .sdx-container .offset-lg-6 {
      margin-left: 50%; }
    .sdx-container .offset-lg-7 {
      margin-left: 58.33333%; }
    .sdx-container .offset-lg-8 {
      margin-left: 66.66667%; }
    .sdx-container .offset-lg-9 {
      margin-left: 75%; }
    .sdx-container .offset-lg-10 {
      margin-left: 83.33333%; }
    .sdx-container .offset-lg-11 {
      margin-left: 91.66667%; } }
  @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.33333%;
      max-width: 8.33333%; }
    .sdx-container .col-xl-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    .sdx-container .col-xl-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    .sdx-container .col-xl-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .sdx-container .col-xl-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    .sdx-container .col-xl-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    .sdx-container .col-xl-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    .sdx-container .col-xl-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    .sdx-container .col-xl-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    .sdx-container .col-xl-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    .sdx-container .col-xl-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    .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.33333%; }
    .sdx-container .pull-xl-2 {
      right: 16.66667%; }
    .sdx-container .pull-xl-3 {
      right: 25%; }
    .sdx-container .pull-xl-4 {
      right: 33.33333%; }
    .sdx-container .pull-xl-5 {
      right: 41.66667%; }
    .sdx-container .pull-xl-6 {
      right: 50%; }
    .sdx-container .pull-xl-7 {
      right: 58.33333%; }
    .sdx-container .pull-xl-8 {
      right: 66.66667%; }
    .sdx-container .pull-xl-9 {
      right: 75%; }
    .sdx-container .pull-xl-10 {
      right: 83.33333%; }
    .sdx-container .pull-xl-11 {
      right: 91.66667%; }
    .sdx-container .pull-xl-12 {
      right: 100%; }
    .sdx-container .push-xl-0 {
      left: auto; }
    .sdx-container .push-xl-1 {
      left: 8.33333%; }
    .sdx-container .push-xl-2 {
      left: 16.66667%; }
    .sdx-container .push-xl-3 {
      left: 25%; }
    .sdx-container .push-xl-4 {
      left: 33.33333%; }
    .sdx-container .push-xl-5 {
      left: 41.66667%; }
    .sdx-container .push-xl-6 {
      left: 50%; }
    .sdx-container .push-xl-7 {
      left: 58.33333%; }
    .sdx-container .push-xl-8 {
      left: 66.66667%; }
    .sdx-container .push-xl-9 {
      left: 75%; }
    .sdx-container .push-xl-10 {
      left: 83.33333%; }
    .sdx-container .push-xl-11 {
      left: 91.66667%; }
    .sdx-container .push-xl-12 {
      left: 100%; }
    .sdx-container .offset-xl-1 {
      margin-left: 8.33333%; }
    .sdx-container .offset-xl-2 {
      margin-left: 16.66667%; }
    .sdx-container .offset-xl-3 {
      margin-left: 25%; }
    .sdx-container .offset-xl-4 {
      margin-left: 33.33333%; }
    .sdx-container .offset-xl-5 {
      margin-left: 41.66667%; }
    .sdx-container .offset-xl-6 {
      margin-left: 50%; }
    .sdx-container .offset-xl-7 {
      margin-left: 58.33333%; }
    .sdx-container .offset-xl-8 {
      margin-left: 66.66667%; }
    .sdx-container .offset-xl-9 {
      margin-left: 75%; }
    .sdx-container .offset-xl-10 {
      margin-left: 83.33333%; }
    .sdx-container .offset-xl-11 {
      margin-left: 91.66667%; } }
  @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.33333%;
      max-width: 8.33333%; }
    .sdx-container .col-ul-2 {
      flex: 0 0 16.66667%;
      max-width: 16.66667%; }
    .sdx-container .col-ul-3 {
      flex: 0 0 25%;
      max-width: 25%; }
    .sdx-container .col-ul-4 {
      flex: 0 0 33.33333%;
      max-width: 33.33333%; }
    .sdx-container .col-ul-5 {
      flex: 0 0 41.66667%;
      max-width: 41.66667%; }
    .sdx-container .col-ul-6 {
      flex: 0 0 50%;
      max-width: 50%; }
    .sdx-container .col-ul-7 {
      flex: 0 0 58.33333%;
      max-width: 58.33333%; }
    .sdx-container .col-ul-8 {
      flex: 0 0 66.66667%;
      max-width: 66.66667%; }
    .sdx-container .col-ul-9 {
      flex: 0 0 75%;
      max-width: 75%; }
    .sdx-container .col-ul-10 {
      flex: 0 0 83.33333%;
      max-width: 83.33333%; }
    .sdx-container .col-ul-11 {
      flex: 0 0 91.66667%;
      max-width: 91.66667%; }
    .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.33333%; }
    .sdx-container .pull-ul-2 {
      right: 16.66667%; }
    .sdx-container .pull-ul-3 {
      right: 25%; }
    .sdx-container .pull-ul-4 {
      right: 33.33333%; }
    .sdx-container .pull-ul-5 {
      right: 41.66667%; }
    .sdx-container .pull-ul-6 {
      right: 50%; }
    .sdx-container .pull-ul-7 {
      right: 58.33333%; }
    .sdx-container .pull-ul-8 {
      right: 66.66667%; }
    .sdx-container .pull-ul-9 {
      right: 75%; }
    .sdx-container .pull-ul-10 {
      right: 83.33333%; }
    .sdx-container .pull-ul-11 {
      right: 91.66667%; }
    .sdx-container .pull-ul-12 {
      right: 100%; }
    .sdx-container .push-ul-0 {
      left: auto; }
    .sdx-container .push-ul-1 {
      left: 8.33333%; }
    .sdx-container .push-ul-2 {
      left: 16.66667%; }
    .sdx-container .push-ul-3 {
      left: 25%; }
    .sdx-container .push-ul-4 {
      left: 33.33333%; }
    .sdx-container .push-ul-5 {
      left: 41.66667%; }
    .sdx-container .push-ul-6 {
      left: 50%; }
    .sdx-container .push-ul-7 {
      left: 58.33333%; }
    .sdx-container .push-ul-8 {
      left: 66.66667%; }
    .sdx-container .push-ul-9 {
      left: 75%; }
    .sdx-container .push-ul-10 {
      left: 83.33333%; }
    .sdx-container .push-ul-11 {
      left: 91.66667%; }
    .sdx-container .push-ul-12 {
      left: 100%; }
    .sdx-container .offset-ul-1 {
      margin-left: 8.33333%; }
    .sdx-container .offset-ul-2 {
      margin-left: 16.66667%; }
    .sdx-container .offset-ul-3 {
      margin-left: 25%; }
    .sdx-container .offset-ul-4 {
      margin-left: 33.33333%; }
    .sdx-container .offset-ul-5 {
      margin-left: 41.66667%; }
    .sdx-container .offset-ul-6 {
      margin-left: 50%; }
    .sdx-container .offset-ul-7 {
      margin-left: 58.33333%; }
    .sdx-container .offset-ul-8 {
      margin-left: 66.66667%; }
    .sdx-container .offset-ul-9 {
      margin-left: 75%; }
    .sdx-container .offset-ul-10 {
      margin-left: 83.33333%; }
    .sdx-container .offset-ul-11 {
      margin-left: 91.66667%; } }
  .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 .hs-line .hs-line-link,
      .hs-line .sdx-container .modal__header .hs-line-link,
      .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: -.1px;
        font-size: 18px; }
        @media (min-width: 1024px) {
          .sdx-container .modal__header h1 {
            font-weight: 300;
            line-height: 32px;
            letter-spacing: -.35px;
            font-size: 24px; } }
    .sdx-container .modal__body {
      line-height: 24px;
      letter-spacing: -.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 .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: -.1px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #fff;
        opacity: 0;
        -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
                animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); }
        .sdx-container .notification-header .notification__content .notification__body strong {
          font-weight: 600;
          font-size: 16px; }
      .sdx-container .notification-header .notification__content button {
        position: relative;
        right: -5px;
        cursor: pointer;
        width: 32px;
        height: 32px;
        opacity: 0;
        -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
                animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); }
        .sdx-container .notification-header .notification__content button .icon {
          line-height: 32px;
          color: #fff;
          font-size: 34px; }
  .sdx-container .notification--open {
    height: 74px; }
  .sdx-container .notification--alert .notification__content {
    background: #ff8b2e; }
    .sdx-container .notification--alert .notification__content:hover {
      background: #e86416; }
  .sdx-container .notification--confirmation .notification__content {
    background: #25b252; }
    .sdx-container .notification--confirmation .notification__content:hover {
      background: #008236; }

@-webkit-keyframes notification-show {
  0% {
    height: 0; }
  100% {
    height: 74px; } }

@keyframes notification-show {
  0% {
    height: 0; }
  100% {
    height: 74px; } }
  .sdx-container ul,
  .sdx-container menu,
  .sdx-container dir {
    display: block;
    padding: 0; }
  .sdx-container ul,
  .sdx-container ol {
    margin: 0;
    padding: 0;
    list-style: none; }
  .sdx-container ul.list,
  .sdx-container ol.list {
    margin-top: 29px;
    margin-bottom: 28px; }
    .sdx-container ul.list ul.list,
    .sdx-container ul.list ol.list,
    .sdx-container ol.list ul.list,
    .sdx-container ol.list ol.list {
      margin-top: 0;
      margin-bottom: 0;
      padding-left: 18px; }
    .sdx-container ul.list li,
    .sdx-container ol.list li {
      margin-bottom: 13px; }
      @media (min-width: 480px) {
        .sdx-container ul.list li,
        .sdx-container ol.list li {
          margin-bottom: 12px; } }
      .sdx-container ul.list li::before,
      .sdx-container ol.list li::before {
        float: left;
        color: #1781e3;
        content: ''; }
  .sdx-container ul.list li.single-line,
  .sdx-container ol.list li.single-line, .sdx-container ul.list.single-line > li,
  .sdx-container ol.list.single-line > li {
    margin-bottom: 7px; }
    @media (min-width: 480px) {
      .sdx-container ul.list li.single-line,
      .sdx-container ol.list li.single-line, .sdx-container ul.list.single-line > li,
      .sdx-container ol.list.single-line > li {
        margin-bottom: 6px; } }
  .sdx-container dt.list {
    font-weight: 300; }
  .sdx-container ul.list li {
    margin-left: 18px; }
    .sdx-container ul.list li::before {
      margin-left: -20px;
      font-size: 33px;
      content: '•'; }
  .sdx-container ol.list li {
    margin-left: 32px;
    counter-increment: item; }
    @media (min-width: 480px) {
      .sdx-container ol.list li {
        margin-left: 30px; } }
    .sdx-container ol.list li::before {
      margin-left: -32px;
      font-weight: 600;
      content: counter(item) "."; }
      @media (min-width: 480px) {
        .sdx-container ol.list li::before {
          margin-left: -30px; } }
  .sdx-container .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: -.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;
            -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;
            content: ''; }
          .sdx-container .table thead th .arrow-icon::before {
            left: 0; }
          .sdx-container .table thead th .arrow-icon::after {
            left: 6px; }
        .sdx-container .table thead th.js-ascending .arrow-icon {
          visibility: visible;
          opacity: 1; }
          .sdx-container .table thead th.js-ascending .arrow-icon::before {
            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: '\00a0'; }
      .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: '\00a0'; }
      .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 .tabs {
    position: relative;
    width: 100%;
    white-space: nowrap;
    border-bottom: 1px solid #d6d6d6;
    overflow-x: hidden; }
    .sdx-container .tabs .tab {
      display: table-cell;
      margin: 0;
      padding: 0;
      text-align: center;
      list-style: none; }
      .sdx-container .tabs .tab:active {
        outline: none; }
      .sdx-container .tabs .tab:focus {
        outline: 1px dotted; }
      .sdx-container .tabs .tab .tab-link {
        font-weight: 400;
        line-height: 24px;
        letter-spacing: -.1px;
        font-size: 18px;
        display: block;
        padding: 6px 10px;
        color: #015;
        border-bottom: 4px solid transparent; }
        .sdx-container .tabs .tab .tab-link:hover, .sdx-container .tabs .tab .tab-link:focus {
          color: #1781e3; }
        .sdx-container .tabs .tab .tab-link.active {
          color: #1781e3;
          border-bottom: 4px solid #1781e3;
          outline: none !important; }
        .sdx-container .tabs .tab .tab-link.disabled, .sdx-container .tabs .tab .tab-link:disabled {
          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: .4;
          border-bottom: 0; }
        .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--small .tab .tab-link {
      font-weight: 400;
      line-height: 24px;
      letter-spacing: -.1px;
      font-size: 16px;
      padding-top: 5px;
      padding-bottom: 5px; }
    .sdx-container .tabs--big .tab .tab-link {
      font-weight: 400;
      line-height: 32px;
      letter-spacing: -.35px;
      font-size: 24px;
      padding-top: 8px;
      padding-bottom: 8px; }
    .sdx-container .tabs--long .tab .tab-link {
      padding-left: 20px;
      padding-right: 20px; }
    .sdx-container .tabs--no-border {
      border-bottom: 0; }
    .sdx-container .tabs--scrollable {
      overflow-x: auto; }
    .sdx-container .tabs--image {
      border-bottom: 0;
      overflow-x: visible; }
      .sdx-container .tabs--image ul {
        overflow-x: auto;
        margin-left: -20px;
        padding-left: 20px;
        margin-right: -20px; }
        .sdx-container .tabs--image ul::before, .sdx-container .tabs--image ul::after {
          content: " ";
          position: absolute;
          top: 0;
          bottom: 0;
          width: 20px;
          z-index: 1;
          pointer-events: none; }
        .sdx-container .tabs--image ul::before {
          left: -20px;
          background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%); }
        .sdx-container .tabs--image ul::after {
          right: -20px;
          background: linear-gradient(to left, white 0%, rgba(255, 255, 255, 0) 100%); }
      .sdx-container .tabs--image .tab {
        vertical-align: top;
        padding-right: 20px; }
        @media (max-width: 767px) {
          .sdx-container .tabs--image .tab {
            padding-right: 8px; } }
        .sdx-container .tabs--image .tab:last-child {
          padding-right: 20px; }
        .sdx-container .tabs--image .tab .tab-link {
          font-weight: 400;
          line-height: 24px;
          letter-spacing: -.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: .7;
        color: #fff;
        border-bottom: 4px 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: 4px solid transparent;
          box-shadow: none; }
        .bg--dark .sdx-container .tabs .tab .tab-link.active {
          opacity: 1;
          color: #fff;
          border-bottom: 4px 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: .4;
          border-bottom: 0; }
        .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: 4px 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: .4;
            border-bottom: 0; }
          .bg--dark .sdx-container .tabs--inverted .tab .tab-link.disabled, .bg--dark .sdx-container .tabs--inverted .tab .tab-link:disabled {
            color: #333; }

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

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

<div>
  <sdx-loading-spinner></sdx-loading-spinner>
  <sdx-loading-spinner size="large"></sdx-loading-spinner>
</div>


```section_design
```

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

  <h3>Sizes</h3>

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

  <p>
    <sdx-loading-spinner></sdx-loading-spinner>
  </p>

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

  <p>
    <sdx-loading-spinner size="large"></sdx-loading-spinner>
  </p>

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

  <h3>Axis</h3>

  <p>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.</p>

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

  <h3>Inside elements</h3>

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

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


```section_develop
```

```htmlmixed_webcomponent_sdx-loading-spinner_accessible
<sdx-loading-spinner sr-hint="Loading. Please wait."></sdx-loading-spinner>
<sdx-loading-spinner size="large" sr-hint="Loading. Please wait."></sdx-loading-spinner>
```
*/
.loader-spinner {
  position: relative; }
  .loader-spinner, .loader-spinner--large {
    background-size: 3750px 50px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("../images/loader-spinner-navy-large.png");
    width: 50px;
    height: 50px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-animation: anim-sheet-navy-large 1.25s steps(75) infinite;
            animation: anim-sheet-navy-large 1.25s steps(75) infinite; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .loader-spinner, .loader-spinner--large {
        background-image: url("../images/loader-spinner-navy-large@2x.png"); } }

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

@keyframes anim-sheet-navy-large {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -3750px 0; } }
    .loader-spinner.loader-spinner--plain, .loader-spinner--large.loader-spinner--plain {
      background-size: 3750px 50px;
      background-position: 0 0;
      background-repeat: no-repeat;
      background-image: url("../images/loader-spinner-plain-large.png");
      width: 50px;
      height: 50px;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-animation: anim-sheet-plain-large 1.25s steps(75) infinite;
              animation: anim-sheet-plain-large 1.25s steps(75) infinite; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .loader-spinner.loader-spinner--plain, .loader-spinner--large.loader-spinner--plain {
          background-image: url("../images/loader-spinner-plain-large@2x.png"); } }

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

@keyframes anim-sheet-plain-large {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -3750px 0; } }
  .loader-spinner--small {
    background-size: 1875px 25px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("../images/loader-spinner-navy-small.png");
    width: 25px;
    height: 25px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-animation: anim-sheet-navy-small 1.25s steps(75) infinite;
            animation: anim-sheet-navy-small 1.25s steps(75) infinite; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .loader-spinner--small {
        background-image: url("../images/loader-spinner-navy-small@2x.png"); } }

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

@keyframes anim-sheet-navy-small {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1875px 0; } }
    .loader-spinner--small.loader-spinner--plain {
      background-size: 1875px 25px;
      background-position: 0 0;
      background-repeat: no-repeat;
      background-image: url("../images/loader-spinner-plain-small.png");
      width: 25px;
      height: 25px;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-animation: anim-sheet-plain-small 1.25s steps(75) infinite;
              animation: anim-sheet-plain-small 1.25s steps(75) infinite; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .loader-spinner--small.loader-spinner--plain {
          background-image: url("../images/loader-spinner-plain-small@2x.png"); } }

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

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

.bg--dark .loader-spinner, .bg--dark .loader-spinner--large {
  background-size: 3750px 50px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-dark-large.png");
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: anim-sheet-dark-large 1.25s steps(75) infinite;
          animation: anim-sheet-dark-large 1.25s steps(75) infinite; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .bg--dark .loader-spinner, .bg--dark .loader-spinner--large {
      background-image: url("../images/loader-spinner-dark-large@2x.png"); } }

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

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

.bg--dark .loader-spinner--small {
  background-size: 1875px 25px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-dark-small.png");
  width: 25px;
  height: 25px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: anim-sheet-dark-small 1.25s steps(75) infinite;
          animation: anim-sheet-dark-small 1.25s steps(75) infinite; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .bg--dark .loader-spinner--small {
      background-image: url("../images/loader-spinner-dark-small@2x.png"); } }

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

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

/************************************************************/
/* OIL-UI */
/************************************************************/
/************************************************************/
/************************************************************/
/* OIL-UI */
/************************************************************/
/************************************************************/
/* BREAKPOINTS */
/************************************************************/
/************************************************************/
/* SDX COLORS */
/************************************************************/
/************************************************************/
/* COLORS */
/************************************************************/
.sdx-container h1.in-one {
  font-size: 40px !important;
  text-align: left !important;
  color: #001155 !important;
  font-family: "TheSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

.sdx-container h2.in-one {
  font-size: 32px !important;
  color: #FFFFFF !important;
  font-family: "TheSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }

.sdx-container h3, .sdx-container .hs-line .hs-line-link, .hs-line .sdx-container .hs-line-link {
  font-size: 24px !important;
  color: #001155 !important;
  font-family: "TheSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
  .sdx-container h3.in-one, .sdx-container .hs-line .in-one.hs-line-link, .hs-line .sdx-container .in-one.hs-line-link {
    margin-bottom: 12px !important; }

.sdx-container ul.list.list--dark li::before {
  font-size: 28px;
  margin-top: 4px;
  color: #333; }

.sdx-container .tabs a:hover {
  text-decoration: none; }

.sdx-container .input-field.orange-highlighting input[type='text'] ~ .message {
  margin-top: 6px; }

.sdx-container .input-field.orange-highlighting input[type='text'].invalid {
  border-color: #ff8b2e;
  color: #ff8b2e; }
  .sdx-container .input-field.orange-highlighting input[type='text'].invalid ~ .message {
    color: #ff8b2e; }

.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-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 #faq-section {
  margin-top: 24px;
  margin-bottom: 24px; }
  .sdx-container #faq-section[hs-device="phone"] {
    margin-left: 12px;
    margin-bottom: 24px; }
  .sdx-container #faq-section ul li {
    margin-bottom: 8px; }

.icon-sgur-shield {
  display: inline-block;
  background-image: url("../images/sdx_sgur_shield.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1em;
  height: 1em; }

.adjustable-title {
  max-width: 500px; }

.inline {
  display: inline-block !important; }

.no-border {
  margin: 0 !important; }

.justify-content-between {
  justify-content: space-between; }

.align-text-middle {
  vertical-align: middle; }

.access-address-width {
  width: 55%; }

.hs-accordion {
  border: #C5C5C5 1px solid; }
  .hs-accordion .hs-accordion-content {
    padding: 20px; }
  .hs-accordion .hs-accordion-footer {
    text-align: center;
    border-top: 1px solid #C5C5C5; }
    .hs-accordion .hs-accordion-footer .hs-accordion-footer-icon {
      transition: color 0.15s ease-in;
      color: #001155;
      display: block; }
    .hs-accordion .hs-accordion-footer:hover .hs-accordion-footer-icon {
      color: #1781e3;
      text-decoration: none; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
map-hs-label-value {
  display: inline-block; }

.hs-attribute-group {
  padding-top: 15px; }

.hs-attribute:not(:first-of-type) {
  margin-top: 5px; }

.hs-attribute .hs-attribute-label[hs-channel="online"] {
  color: #A4A4A4;
  padding-right: 10px; }

.hs-attribute .hs-attribute-label[hs-channel="ursa"], .hs-attribute .hs-attribute-label[hs-channel="csu"] {
  font-size: 1.1em; }

.hs-attribute .hs-attribute-value[hs-channel="online"] em {
  font-size: 1.2em;
  display: block; }

.hs-attribute .hs-attribute-value[hs-channel="ursa"], .hs-attribute .hs-attribute-value[hs-channel="csu"] {
  color: #A4A4A4; }

.hs-attribute.hs-attribute-spacing:not(:first-of-type)[hs-device="phone"] {
  margin-top: 10px; }

.overview-list.inverted .hs-attribute .hs-attribute-label[hs-channel="online"] {
  color: #333333; }

.hs-attribute:not(:first-of-type).hs-margin-top-medium {
  margin-top: 20px; }

.hs-customerdata .hs-collapsible-toolbar-entry a {
  color: #333333; }

.hs-customerdata .hs-collapsible-toolbar-entry .sg-icon {
  font-weight: bold;
  display: inline;
  vertical-align: inherit; }

#hs-customerdata-details {
  padding-bottom: 15px; }
  #hs-customerdata-details .flexbox [hs-layout="row"] > [hs-device="phone"], .flexbox #hs-customerdata-details [hs-layout="row"] > [hs-device="phone"], #hs-customerdata-details .flexboxtweener [hs-layout="row"] > [hs-device="phone"], .flexboxtweener #hs-customerdata-details [hs-layout="row"] > [hs-device="phone"], #hs-customerdata-details .flexbox [hs-layout="row-reverse-desktop"] > [hs-device="phone"], .flexbox #hs-customerdata-details [hs-layout="row-reverse-desktop"] > [hs-device="phone"], #hs-customerdata-details .flexboxtweener [hs-layout="row-reverse-desktop"] > [hs-device="phone"], .flexboxtweener #hs-customerdata-details [hs-layout="row-reverse-desktop"] > [hs-device="phone"] {
    margin-bottom: 20px; }
    #hs-customerdata-details .flexbox [hs-layout="row"] > [hs-device="phone"]:last-child, .flexbox #hs-customerdata-details [hs-layout="row"] > [hs-device="phone"]:last-child, #hs-customerdata-details .flexboxtweener [hs-layout="row"] > [hs-device="phone"]:last-child, .flexboxtweener #hs-customerdata-details [hs-layout="row"] > [hs-device="phone"]:last-child, #hs-customerdata-details .flexbox [hs-layout="row-reverse-desktop"] > [hs-device="phone"]:last-child, .flexbox #hs-customerdata-details [hs-layout="row-reverse-desktop"] > [hs-device="phone"]:last-child, #hs-customerdata-details .flexboxtweener [hs-layout="row-reverse-desktop"] > [hs-device="phone"]:last-child, .flexboxtweener #hs-customerdata-details [hs-layout="row-reverse-desktop"] > [hs-device="phone"]:last-child {
      margin-bottom: 0; }

[hs-channel="online"] .hs-customerdata-links[hs-device="desktop"], [hs-channel="online"] .hs-customerdata-links[hs-device="tablet"] {
  padding-top: 54px; }

.hs-customerdata-links[hs-device="desktop"], .hs-customerdata-links[hs-device="tablet"] {
  padding-left: 5px; }

.hs-additional-title {
  display: flex;
  padding-top: 3px;
  margin-left: 20px; }
  .hs-additional-title .icon-priorite {
    color: #001155; }
  .hs-additional-title .hs-additional-title-text {
    margin-top: 5px;
    margin-left: 3px;
    font-size: 18px;
    font-family: 'TheSansB4-SemiLight', 'TheSans B4 SemiLight', 'TheSans';
    font-weight: 300;
    font-style: normal; }
    .hs-additional-title .hs-additional-title-text a {
      color: #001155; }

.hs-drawer-column {
  padding-bottom: 18px; }
  .hs-drawer-column.hs-selected {
    padding-bottom: 15px;
    border-bottom: 3px solid #C5C5C5; }

.hs-drawer-hints-and-switch {
  display: flex;
  align-items: flex-end; }
  .hs-drawer-hints-and-switch map-hint-banner {
    flex: 2; }
  .hs-drawer-hints-and-switch oce-component-switch > * {
    margin: 14px 0 14px 10px; }
  .hs-drawer-hints-and-switch oce-component-switch button {
    width: 300px; }

.hs-line-info {
  margin-top: 10px; }

.hs-mobile-drawer {
  overflow: hidden; }
  .hs-mobile-drawer .animate-slide-in {
    transition: transform 0.3s ease-out;
    white-space: nowrap; }
    .hs-mobile-drawer .animate-slide-in.show-standard-drawer {
      transform: translateX(-100%); }
    .hs-mobile-drawer .animate-slide-in .standard-drawer {
      width: 100%;
      display: inline-block;
      white-space: normal;
      vertical-align: top; }

@-webkit-keyframes ngdialog-flyin {
  0% {
    opacity: 0;
    transform: translateY(-40px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@keyframes ngdialog-flyin {
  0% {
    opacity: 0;
    transform: translateY(-40px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes ngdialog-flyout {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-40px); } }

@keyframes ngdialog-flyout {
  0% {
    opacity: 1;
    transform: translateY(0); }
  100% {
    opacity: 0;
    transform: translateY(-40px); } }

.ngdialog.ngdialog-theme-default {
  padding-bottom: 160px;
  padding-top: 160px; }

.ngdialog.ngdialog-theme-default.ngdialog-closing .ngdialog-content {
  -webkit-animation: ngdialog-flyout .5s;
          animation: ngdialog-flyout .5s; }

.ngdialog.ngdialog-theme-default .ngdialog-content {
  -webkit-animation: ngdialog-flyin .5s;
          animation: ngdialog-flyin .5s;
  background: #fff;
  border-radius: 5px;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  width: 450px; }

.ngdialog.dialog-width-750 .ngdialog-content {
  width: 750px; }

.ngdialog.ngdialog-theme-default .ngdialog-close {
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0; }

.ngdialog.ngdialog-theme-default .ngdialog-close:before {
  background: transparent;
  border-radius: 3px;
  color: #bbb;
  content: '\00D7';
  font-size: 26px;
  font-weight: 400;
  height: 30px;
  line-height: 26px;
  position: absolute;
  right: 3px;
  text-align: center;
  top: 3px;
  width: 30px; }

.ngdialog.ngdialog-theme-default .ngdialog-close:hover:before,
.ngdialog.ngdialog-theme-default .ngdialog-close:active:before {
  color: #777; }

.ngdialog.ngdialog-theme-default .ngdialog-message {
  margin-bottom: .5em; }

.ngdialog.ngdialog-theme-default .ngdialog-input {
  margin-bottom: 1em; }

.ngdialog.ngdialog-theme-default .ngdialog-input textarea,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"] {
  background: #fff;
  border: 0;
  border-radius: 3px;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin: 0 0 .25em;
  min-height: 2.5em;
  padding: .25em .67em;
  width: 100%; }

.ngdialog.ngdialog-theme-default .ngdialog-input textarea:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"]:focus {
  box-shadow: inset 0 0 0 2px #8dbdf1;
  outline: none; }

.ngdialog.ngdialog-theme-default .ngdialog-buttons {
  *zoom: 1; }

.ngdialog.ngdialog-theme-default .ngdialog-buttons:after {
  content: '';
  display: table;
  clear: both; }

.ngdialog.ngdialog-theme-default .ngdialog-button {
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  float: right;
  font-family: inherit;
  font-size: .8em;
  letter-spacing: .1em;
  line-height: 1em;
  margin: 0 0 0 .5em;
  padding: .75em 2em;
  text-transform: uppercase; }

.ngdialog.ngdialog-theme-default .ngdialog-button:focus {
  -webkit-animation: ngdialog-pulse 1.1s infinite;
          animation: ngdialog-pulse 1.1s infinite;
  outline: none; }

@media (max-width: 568px) {
  .ngdialog.ngdialog-theme-default .ngdialog-button:focus {
    -webkit-animation: none;
            animation: none; } }

.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
  background: #3288e6;
  color: #fff; }

.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
  background: #e0e0e0;
  color: #777; }

.ngdialog .spinner {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  align-items: center;
  justify-content: center; }

.ngdialog .spinner-content {
  max-width: 50%; }

.ngdialog .loading {
  opacity: 0.7; }
  .ngdialog .loading .spinner {
    display: flex; }

body.ngdialog-open {
  overflow: initial !important; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.flexbox .hs-bill [hs-padding][hs-layout="row"], .flexbox .hs-bill-warning [hs-padding][hs-layout="row"], .flexbox .hs-bill [hs-padding][hs-layout="row-reverse-desktop"], .flexbox .hs-bill-warning [hs-padding][hs-layout="row-reverse-desktop"], .flexboxtweener .hs-bill [hs-padding][hs-layout="row"], .flexboxtweener .hs-bill-warning [hs-padding][hs-layout="row"], .flexboxtweener .hs-bill [hs-padding][hs-layout="row-reverse-desktop"], .flexboxtweener .hs-bill-warning [hs-padding][hs-layout="row-reverse-desktop"] {
  margin: 0; }
  .flexbox .hs-bill [hs-padding][hs-layout="row"] > [hs-column], .flexbox .hs-bill-warning [hs-padding][hs-layout="row"] > [hs-column], .flexbox .hs-bill .flexboxtweener [hs-padding][hs-layout="row"] > [hs-column], .flexbox .hs-bill-warning .flexboxtweener [hs-padding][hs-layout="row"] > [hs-column], .flexbox .hs-bill [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexbox .hs-bill-warning [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexbox .hs-bill .flexboxtweener [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexbox .hs-bill-warning .flexboxtweener [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexboxtweener .hs-bill .flexbox [hs-padding][hs-layout="row"] > [hs-column], .flexboxtweener .hs-bill-warning .flexbox [hs-padding][hs-layout="row"] > [hs-column], .flexboxtweener .hs-bill [hs-padding][hs-layout="row"] > [hs-column], .flexboxtweener .hs-bill-warning [hs-padding][hs-layout="row"] > [hs-column], .flexboxtweener .hs-bill .flexbox [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexboxtweener .hs-bill-warning .flexbox [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexboxtweener .hs-bill [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexboxtweener .hs-bill-warning [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column] {
    padding: 0 5px 0 0; }

.hs-bill-no-bills, .hs-bill, .hs-bill-warning {
  color: #001155;
  padding: 20px; }

[hs-device="desktop"] .billing-authentication-banner ul li {
  text-align: right; }

[hs-device="phone"] .billing-authentication-banner ul li {
  margin-top: 8px !important; }

.hs-bill, .hs-bill-warning {
  transition: background-color 0.15s ease-in; }
  .hs-bill .hs-clip, .hs-bill-warning .hs-clip {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  .hs-bill .hs-extend-link, .hs-bill-warning .hs-extend-link {
    color: #A4A4A4; }
    .hs-bill .hs-extend-link[hs-device="phone"], .hs-bill-warning .hs-extend-link[hs-device="phone"] {
      display: inline-block;
      padding-top: 6px; }
  .hs-bill.hs-bill-header, .hs-bill-header.hs-bill-warning {
    margin-top: -1px; }
    .hs-bill.hs-bill-header.hs-bill-header-red, .hs-bill-header.hs-bill-header-red.hs-bill-warning {
      color: #dd1122; }
    .hs-bill.hs-bill-header.hs-selected-row, .hs-bill-header.hs-selected-row.hs-bill-warning {
      background-color: #001155;
      color: #FFFFFF; }
      .hs-bill.hs-bill-header.hs-selected-row:hover, .hs-bill-header.hs-selected-row.hs-bill-warning:hover {
        background-color: #001155; }
      .hs-bill.hs-bill-header.hs-selected-row.hs-bill-header-red, .hs-bill-header.hs-selected-row.hs-bill-header-red.hs-bill-warning {
        background-color: #dd1122; }
  .hs-bill:hover:not(.hs-bill-warning), .hs-bill-warning:hover:not(.hs-bill-warning) {
    background-color: #eef3f6; }
    .hs-bill:hover:not(.hs-bill-warning) .hs-extend-link, .hs-bill-warning:hover:not(.hs-bill-warning) .hs-extend-link {
      color: #1781e3; }
  .hs-bill > h3, .hs-bill-warning > h3, .hs-line .hs-bill > .hs-line-link, .hs-line .hs-bill-warning > .hs-line-link {
    margin: 0; }

.hs-responsive-billdetails {
  display: flex;
  flex-direction: column; }
  .hs-responsive-billdetails[hs-device="desktop"] {
    flex-direction: row; }
  .hs-responsive-billdetails #ent-billing-billstatustext {
    width: 150px; }

.hs-prolong-link[hs-device="phone"] {
  margin-top: 10px; }

.hs-prolong-link .invoice-document-link {
  white-space: nowrap; }

.invoice-list-link-wrap-reverse {
  width: 100%;
  display: flex;
  flex-flow: column wrap-reverse;
  align-content: flex-end;
  align-items: flex-end;
  align-self: flex-start; }
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .invoice-list-link-wrap-reverse {
      align-items: flex-start; } }
  @supports (-ms-ime-align: auto) {
    .invoice-list-link-wrap-reverse {
      align-items: flex-start; } }

.hs-bill-warning {
  padding: 17px 20px;
  -webkit-animation: fadein 0.9s;
          animation: fadein 0.9s; }

@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.invoice-empty-entry-single-link {
  padding-top: 20px;
  padding-bottom: 20px; }

/*
ENTERPRISE BILLING SPECIFIC
 */
#ent-billing > .hs-collapsible {
  border-bottom-color: #A4A4A4; }

#ent-billing ent-invoice-category.hs-bill-group {
  display: block; }
  #ent-billing ent-invoice-category.hs-bill-group .hs-prolong-link > map-anchor-list:not(:empty) + span {
    padding-top: 20px; }
  #ent-billing ent-invoice-category.hs-bill-group .hs-prolong-link > span {
    white-space: pre-wrap;
    width: 100%; }

/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.hs-button-primary, .hs-button-secondary, .hs-button-confirm, .hs-button-outline {
  transition: background-color 0.15s ease-in;
  display: inline-block;
  line-height: 1.4;
  border-radius: 4px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none; }
  .hs-button-primary:hover, .hs-button-secondary:hover, .hs-button-confirm:hover, .hs-button-outline:hover, .hs-button-primary:focus, .hs-button-secondary:focus, .hs-button-confirm:focus, .hs-button-outline:focus {
    text-decoration: none; }
  .hs-button-primary:active, .hs-button-secondary:active, .hs-button-confirm:active, .hs-button-outline:active {
    outline: 0;
    background-color: white; }

.btn-alignment {
  height: 46px;
  margin-bottom: 5px !important; }

.toggle-button-group label {
  background-color: #FFFFFF; }

.hs-button-primary {
  padding: 6px 12px;
  color: #FFFFFF;
  border: 1px solid #1781e3;
  background-color: #1781e3; }
  .hs-button-primary:hover {
    color: #FFFFFF;
    border: 1px solid #0851da;
    background-color: #0851da; }

.hs-button-secondary {
  padding: 6px 12px;
  color: #333;
  border: 1px solid #cfd5d9;
  background-color: #cfd5d9; }
  .hs-button-secondary:hover {
    color: #333;
    border: 1px solid #b1b9be;
    background-color: #b1b9be; }

.hs-button-confirm {
  padding: 6px 12px;
  color: #FFFFFF;
  border: 1px solid #25b252;
  background-color: #25b252; }
  .hs-button-confirm:hover {
    color: #FFFFFF;
    border: 1px solid #008236;
    background-color: #008236; }

.hs-button-outline {
  padding: 5px 10px;
  color: #A4A4A4;
  border: 1px solid #A4A4A4;
  background-color: #FFFFFF; }
  .hs-button-outline:hover {
    color: #1781e3;
    border: 1px solid #1781e3;
    background-color: #FFFFFF; }

/************************************************************/
/* EXTENSIONS */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.hs-collapsible {
  position: relative;
  border-bottom: 1px solid #001155; }
  .hs-collapsible:not(.hs-collapsible-naked) {
    border-top: 1px solid #C5C5C5;
    border-right: 1px solid #C5C5C5;
    border-left: 1px solid #C5C5C5; }
  .hs-collapsible .hs-collapsible-header {
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
    padding: 15px 20px; }
    .hs-collapsible .hs-collapsible-header .hs-collapsible-title-container {
      display: flex;
      flex: 1;
      width: 100%; }
      .hs-collapsible .hs-collapsible-header .hs-collapsible-title-container .collapsible-grow {
        flex-grow: 1; }
      .hs-collapsible .hs-collapsible-header .hs-collapsible-title-container .hs-collapsible-link {
        color: #001155;
        text-decoration: none; }
        .hs-collapsible .hs-collapsible-header .hs-collapsible-title-container .hs-collapsible-link:focus {
          text-decoration: none !important; }
      .hs-collapsible .hs-collapsible-header .hs-collapsible-title-container .hs-collapsible-additional-title {
        white-space: nowrap;
        cursor: default; }
        .hs-collapsible .hs-collapsible-header .hs-collapsible-title-container .hs-collapsible-additional-title > * {
          display: inline-block; }
    .hs-collapsible .hs-collapsible-header[hs-channel="csu"] {
      padding: 8px 20px; }
    .hs-collapsible .hs-collapsible-header .hs-collapsible-toggle {
      margin-left: 20px;
      padding-top: 5px;
      color: #001155;
      text-decoration: none; }
      .hs-collapsible .hs-collapsible-header .hs-collapsible-toggle:focus {
        text-decoration: none !important; }
    .hs-collapsible .hs-collapsible-header .hs-collapsible-title {
      transition: color 0.15s ease-in;
      color: #001155;
      margin-bottom: 0;
      margin-top: 0; }
    .hs-collapsible .hs-collapsible-header:hover .hs-collapsible-link, .hs-collapsible .hs-collapsible-header:hover .hs-collapsible-title, .hs-collapsible .hs-collapsible-header:hover .hs-collapsible-icon {
      color: #1781e3;
      text-decoration: none; }
  .hs-collapsible .hs-collapsible-header-not-clickable {
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
    padding: 15px 20px; }
    .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title-container {
      display: flex;
      flex: 1;
      width: 100%; }
      .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title-container .collapsible-grow {
        flex-grow: 1; }
      .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title-container .hs-collapsible-link {
        color: #001155;
        text-decoration: none; }
        .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title-container .hs-collapsible-link:focus {
          text-decoration: none !important; }
      .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title-container .hs-collapsible-additional-title {
        white-space: nowrap;
        cursor: default; }
        .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title-container .hs-collapsible-additional-title > * {
          display: inline-block; }
    .hs-collapsible .hs-collapsible-header-not-clickable[hs-channel="csu"] {
      padding: 8px 20px; }
    .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-toggle {
      margin-left: 20px;
      padding-top: 5px;
      color: #001155;
      text-decoration: none; }
      .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-toggle:focus {
        text-decoration: none !important; }
    .hs-collapsible .hs-collapsible-header-not-clickable .hs-collapsible-title {
      cursor: default;
      text-decoration: none;
      color: #001155;
      margin-bottom: 0;
      margin-top: 0; }
    .hs-collapsible .hs-collapsible-header-not-clickable .invoices-link {
      align-self: center; }
  .hs-collapsible header-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center; }
  .hs-collapsible .hs-collapsible-toolbar {
    background: #eef3f6;
    padding: 5px 20px;
    border-bottom: 2px solid #A4A4A4; }
    .hs-collapsible .hs-collapsible-toolbar .hs-button-outline {
      font-size: 11px;
      padding: 0 10px; }
  .hs-collapsible .hs-collapsible-toolbar-entry {
    padding-right: 20px; }
    .hs-collapsible .hs-collapsible-toolbar-entry.end {
      padding-right: 0;
      margin-left: auto; }
  .hs-collapsible.hs-collapsed {
    border-bottom: none; }
    .hs-collapsible.hs-collapsed .hs-collapsible-header {
      transition: border-bottom-color 0.15s ease-in;
      border-bottom: 1px solid #A4A4A4; }
      .hs-collapsible.hs-collapsed .hs-collapsible-header:hover {
        border-color: #1781e3; }
  .hs-collapsible.with-toolbar .hs-collapsible-header {
    border-bottom: 1px solid #A4A4A4; }
  .hs-collapsible.not-collapsible .hs-collapsible-header {
    cursor: auto; }
  .hs-collapsible .hs-collapsible-icon {
    transition: color 0.15s ease-in;
    display: inline;
    color: #001155;
    margin-top: -1px; }
  .hs-collapsible .hs-reloader-icon {
    position: absolute;
    right: 60px;
    top: 10px; }
  .hs-collapsible[hs-channel="csu"] .hs-reloader-icon {
    top: 3px; }
  .hs-collapsible .hs-collapsible-content {
    border-top: 1px solid #C5C5C5; }
  .hs-collapsible.hs-expanded {
    background-color: #FFFFFF;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); }
  .hs-collapsible.hs-collapsible-naked {
    background-color: transparent;
    border-bottom: none;
    box-shadow: none;
    width: 100%; }
    .hs-collapsible.hs-collapsible-naked .hs-collapsible-header {
      background-color: transparent;
      padding-top: 0;
      padding-bottom: 0; }
    .hs-collapsible.hs-collapsible-naked .hs-collapsible-content {
      border-top: none; }
    .hs-collapsible.hs-collapsible-naked .hs-expanded {
      background-color: transparent; }

.hs-inlay {
  padding: 20px; }
  .hs-inlay[hs-device="phone"] {
    padding: 10px 20px 0; }
    .hs-inlay[hs-device="phone"] > div {
      margin-bottom: 20px; }

.hs-inlay-left-right {
  padding: 0 20px; }

small {
  font-size: 75%;
  color: #A4A4A4; }

[trio-date-picker] {
  display: inline-block;
  position: relative; }

.date-picker-input {
  display: block;
  text-align: left;
  color: #333;
  width: 230px; }
  html:not(.desktop) .date-picker-input {
    width: 100% !important;
    -webkit-appearance: none;
    -moz-appearance: none; }

.date-picker-delete-btn, .date-picker-input-btn {
  display: block;
  position: absolute;
  top: 0;
  color: #1781e3;
  cursor: pointer;
  border: none; }
  .has-error .date-picker-delete-btn, .has-error .date-picker-input-btn {
    color: #dd1122; }

html.desktop .date-picker-delete-btn {
  left: 265px; }

.date-picker-input-btn {
  right: 0px;
  z-index: 1000; }

.dropdown-menu {
  float: left; }
  .dropdown-menu :focus {
    outline: none; }

.datepicker-table {
  position: absolute;
  background-color: #FFFFFF;
  border-collapse: separate;
  border-spacing: 2px;
  margin: 0 5px;
  z-index: 999999; }
  .datepicker-table thead th small {
    font-size: 100%; }
  .datepicker-table th.month {
    text-align: center; }
  .datepicker-table th {
    font-weight: normal; }
  .datepicker-table td.separator {
    border-top: 1px solid #BBB;
    padding-bottom: 5px; }
  .datepicker-table td, .datepicker-table th {
    width: 29px; }
  .datepicker-table button {
    text-align: center;
    background: #fff;
    color: #555;
    text-shadow: none;
    border: none;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%; }
    .datepicker-table button:hover:not(:disabled) {
      background-color: #1781e3;
      color: #fff; }
    .datepicker-table button.btn-selected {
      background-color: #1781e3;
      color: #fff; }
    .datepicker-table button:disabled {
      cursor: #666666;
      color: #666666;
      background-color: #666666; }
      .datepicker-table button:disabled.btn-other-month {
        background-color: #FFFFFF; }

.date-picker-input-btn .icon {
  color: #666666;
  font-size: 30px; }

/************************************************************/
/* EXTENSIONS */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.hs-expandable {
  position: relative;
  display: flex;
  flex-direction: column; }
  .hs-expandable .hs-expandable-footer {
    display: flex;
    justify-content: center;
    border-top: solid 2px white;
    color: #666666;
    background-color: #f1f1f1; }

[hs-device="tablet"] .hs-symfony-footer-last, [hs-device="tablet"] .hs-symfony-footer-middle, [hs-device="tablet"] .hs-symfony-footer-first {
  height: 300px; }

.hs-header-row {
  background-color: #eef3f6;
  color: #001155;
  border-bottom: 1px solid #333333; }
  .hs-header-row[hs-device="phone"] {
    flex-wrap: wrap-reverse !important; }
  .hs-header-row .hs-column-header {
    padding: 20px 0px 20px 20px;
    font-size: 1.125em;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; }
    .hs-header-row .hs-column-header[hs-channel="online"] {
      padding: 15px 0px 15px 15px;
      font-size: 1.0em;
      line-height: 30px; }
    .hs-header-row .hs-column-header[hs-channel="online"]:last-of-type {
      padding: 15px; }
    .hs-header-row .hs-column-header-small-padding {
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: flex-end; }
      .hs-header-row .hs-column-header-small-padding .hs-table-filter {
        position: relative; }
        .hs-header-row .hs-column-header-small-padding .hs-table-filter input {
          line-height: normal;
          width: 100%;
          height: 30px;
          padding: 0px 10px;
          font-size: 1em;
          border: 1px solid #C5C5C5;
          background-color: #FFFFFF; }
          .hs-header-row .hs-column-header-small-padding .hs-table-filter input:not(:valid) ~ .sg-icon.icon-cross {
            display: none; }
          .hs-header-row .hs-column-header-small-padding .hs-table-filter input::-ms-clear {
            display: none; }
        .hs-header-row .hs-column-header-small-padding .hs-table-filter .sg-icon.icon-cross {
          position: absolute;
          color: #666666;
          top: 5px;
          right: 5px;
          left: auto;
          font-size: 20px;
          text-decoration: none; }
          .hs-header-row .hs-column-header-small-padding .hs-table-filter .sg-icon.icon-cross:hover {
            color: #666666; }
      .hs-header-row .hs-column-header-small-padding .hs-table-actions {
        position: relative;
        margin-left: 18px; }
      .hs-header-row .hs-column-header-small-padding .hs-button-action {
        margin-left: 10px;
        color: #A4A4A4; }
        .hs-header-row .hs-column-header-small-padding .hs-button-action:hover {
          color: #1781e3; }
    .hs-header-row .hs-column-header-phone[hs-device="phone"] {
      flex: 100%;
      max-width: 100%;
      border-bottom: 1px solid #333333; }
    .hs-header-row .hs-column-header .icon-sort-list {
      margin-top: -5px;
      margin-left: 5px; }

.hs-table-body.hs-table-overflow {
  max-height: 460px;
  overflow-y: auto;
  /*graceful degradation for browsers which do not support overflow: overlay*/
  overflow-y: overlay;
  /*only works in Chrome and Opera*/ }

.hs-table-body .hs-body-row:last-child {
  border-bottom: 1px solid #001155; }

.hs-table-body .hs-body-row-hover:hover:not(.hs-selected-row) {
  background-color: #eef3f6; }

.hs-table-body .hs-body-row .hs-column {
  padding: 15px 20px; }
  .hs-table-body .hs-body-row .hs-column[hs-channel="online"] {
    padding: 15px 0px 15px 15px; }

.hs-table-body .hs-body-row.hs-selected-row {
  color: #1781e3; }

.hs-table-body .hs-body-row .hs-table-cell-icon {
  vertical-align: top;
  margin-top: 1px;
  margin-left: 5px; }

.hs-title-row {
  display: flex;
  align-items: baseline; }
  .hs-title-row a {
    margin-left: 50px; }

.hs-ordered {
  color: #1781e3; }

#result .hs-product-drawer {
  border-top: none; }

.hs-mobile-product-detail {
  color: #333333; }

.hs-list-wrapper {
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #C5C5C5;
  margin-top: -1px;
  z-index: 1; }
  .hs-list-wrapper a {
    padding: 10px;
    display: block;
    white-space: nowrap; }
    .hs-list-wrapper a:not(.hs-list-selected-item) {
      color: #001155; }
    .hs-list-wrapper a:hover {
      color: #001155;
      text-decoration: none; }
  .hs-list-wrapper .hs-list-selected-item {
    color: #1781e3; }
  .hs-list-wrapper ul li {
    padding: 5px 10px; }
    .hs-list-wrapper ul li:hover {
      background-color: #d1e6f9; }

.hs-list-selected {
  white-space: nowrap;
  padding: 10px;
  color: #001155;
  background: #FFFFFF;
  border: 1px solid #C5C5C5;
  flex: 1; }
  .hs-list-selected .hs-icon {
    float: right; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
.hs-hint-content-title {
  display: inline-block;
  margin-right: 25px;
  color: #333333; }
  .hs-hint-content-title .hint-sub-title {
    display: block;
    width: 100%;
    font-size: 13px; }

.hs-hint-links {
  margin-top: 24px; }
  .hs-hint-links > div {
    margin-bottom: 10px; }

h3.hs-hint-incident-content-title, .hs-line .hs-hint-incident-content-title.hs-line-link {
  display: inline-block;
  margin-bottom: 0 !important;
  margin-right: 25px;
  color: #333; }

[hs-device="phone"] .hs-hint-content a.hs-arrow {
  display: block; }

[hs-device="phone"] .hs-hint-links {
  margin-top: 5px; }

.hs-hint-detail-margin-bottom {
  margin-bottom: 15px; }

.hs-state-red {
  color: #dd1122; }

.hs-state-yellow {
  color: #FFCC00; }

.hs-state-green {
  color: #25b252; }

.hs-incident-title {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px; }

.hs-hint-incident-overlay-title {
  margin-left: 10px; }

.hs-incident-text {
  font-family: 'TheSaB3', 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5em; }

/************************************************************/
/* CLASSES */
/************************************************************/
.hs-hints {
  margin-top: -10px !important; }

.hs-hint-animation.ng-leave {
  overflow: hidden;
  -webkit-animation: fade-out 0.4s ease-out, slide-out 0.6s ease-out 0.25s;
          animation: fade-out 0.4s ease-out, slide-out 0.6s ease-out 0.25s; }

@keyframes fade-out {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@-webkit-keyframes slide-out {
  0% {
    opacity: 0; }
  20% {
    opacity: 0;
    max-height: 0px; }
  100% {
    opacity: 0;
    max-height: 0px;
    padding: 0px;
    max-width: 0px; } }

@keyframes slide-out {
  0% {
    opacity: 0; }
  20% {
    opacity: 0;
    max-height: 0px; }
  100% {
    opacity: 0;
    max-height: 0px;
    padding: 0px;
    max-width: 0px; } }

.hs-hint:hover {
  background-color: #f8fafb; }

.hs-hint-incident {
  position: relative;
  background-color: #eef3f6;
  color: #001155;
  margin-top: 15px;
  margin-bottom: 4px;
  padding: 15px 15px;
  border-top: 4px solid #0eaba9;
  transition: background-color 0.15s ease-in; }
  .hs-hint-incident[hs-channel="csu"] {
    padding: 8px 20px; }
  .hs-hint-incident[hs-device="phone"] {
    margin: 10px 0 4px 0; }
  .hs-hint-incident .hs-hint-icon::before {
    color: #001155;
    font-size: 2.5em; }
  .hs-hint-incident[hs-device="phone"] {
    margin: 10px 0 4px 0; }
    .hs-hint-incident[hs-device="phone"] .hs-hint-icon::before {
      font-size: 2em; }
  .hs-hint-incident.hs-selected {
    border-top-color: #0eaba9;
    background-color: #f8fafb;
    margin-bottom: 0;
    border-bottom: 4px solid #f8fafb; }
    .hs-hint-incident.hs-selected::after {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 4px;
      background-color: #0eaba9; }
  .hs-hint-incident.hs-customer-action-required {
    border-top-color: #ff8b2e; }
    .hs-hint-incident.hs-customer-action-required.hs-selected {
      border-top-color: #ff8b2e;
      border-bottom-color: #f8fafb; }
      .hs-hint-incident.hs-customer-action-required.hs-selected::after {
        background-color: #f8fafb; }
  .hs-hint-incident .hs-hint-title {
    margin-top: 0px;
    margin-bottom: 0px; }

.hs-hint-change {
  position: relative;
  background-color: #eef3f6;
  color: #001155;
  margin-top: 15px;
  margin-bottom: 4px;
  padding: 15px 15px;
  border-top: 4px solid #0eaba9;
  transition: background-color 0.15s ease-in; }
  .hs-hint-change[hs-channel="csu"] {
    padding: 8px 20px; }
  .hs-hint-change[hs-device="phone"] {
    margin: 10px 0 4px 0; }
  .hs-hint-change .hs-hint-icon::before {
    color: #001155;
    font-size: 2.5em; }
  .hs-hint-change[hs-device="phone"] {
    margin: 10px 0 4px 0; }
    .hs-hint-change[hs-device="phone"] .hs-hint-icon::before {
      font-size: 2em; }
  .hs-hint-change.hs-selected {
    border-top-color: #0eaba9;
    background-color: #f8fafb;
    margin-bottom: 0;
    border-bottom: 4px solid #f8fafb; }
    .hs-hint-change.hs-selected::after {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 4px;
      background-color: #0eaba9; }
  .hs-hint-change.hs-customer-action-required {
    border-top-color: #ff8b2e; }
    .hs-hint-change.hs-customer-action-required.hs-selected {
      border-top-color: #ff8b2e;
      border-bottom-color: #f8fafb; }
      .hs-hint-change.hs-customer-action-required.hs-selected::after {
        background-color: #f8fafb; }
  .hs-hint-change .hs-hint-title {
    margin-top: 0px;
    margin-bottom: 0px; }

.hs-hint-info {
  position: relative;
  background-color: #eef3f6;
  color: #001155;
  margin-top: 15px;
  margin-bottom: 4px;
  padding: 15px 15px;
  border-top: 4px solid #0eaba9;
  transition: background-color 0.15s ease-in; }
  .hs-hint-info[hs-channel="csu"] {
    padding: 8px 20px; }
  .hs-hint-info[hs-device="phone"] {
    margin: 10px 0 4px 0; }
  .hs-hint-info .hs-hint-icon::before {
    color: #001155;
    font-size: 2.5em; }
  .hs-hint-info[hs-device="phone"] {
    margin: 10px 0 4px 0; }
    .hs-hint-info[hs-device="phone"] .hs-hint-icon::before {
      font-size: 2em; }
  .hs-hint-info.hs-selected {
    border-top-color: #0eaba9;
    background-color: #f8fafb;
    margin-bottom: 0;
    border-bottom: 4px solid #f8fafb; }
    .hs-hint-info.hs-selected::after {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 4px;
      background-color: #0eaba9; }
  .hs-hint-info.hs-customer-action-required {
    border-top-color: #ff8b2e; }
    .hs-hint-info.hs-customer-action-required.hs-selected {
      border-top-color: #ff8b2e;
      border-bottom-color: #f8fafb; }
      .hs-hint-info.hs-customer-action-required.hs-selected::after {
        background-color: #f8fafb; }
  .hs-hint-info .hs-hint-title {
    margin-top: 0px;
    margin-bottom: 0px; }

.hs-hint-system {
  position: relative;
  background-color: #eef3f6;
  color: #001155;
  margin-top: 15px;
  margin-bottom: 4px;
  padding: 15px 15px;
  border-top: 4px solid #0eaba9;
  transition: background-color 0.15s ease-in; }
  .hs-hint-system[hs-channel="csu"] {
    padding: 8px 20px; }
  .hs-hint-system[hs-device="phone"] {
    margin: 10px 0 4px 0; }
  .hs-hint-system .hs-hint-icon::before {
    color: #001155;
    font-size: 2.5em; }
  .hs-hint-system[hs-device="phone"] {
    margin: 10px 0 4px 0; }
    .hs-hint-system[hs-device="phone"] .hs-hint-icon::before {
      font-size: 2em; }
  .hs-hint-system.hs-selected {
    border-top-color: #0eaba9;
    background-color: #f8fafb;
    margin-bottom: 0;
    border-bottom: 4px solid #f8fafb; }
    .hs-hint-system.hs-selected::after {
      content: "";
      position: absolute;
      bottom: -4px;
      height: 4px;
      background-color: #0eaba9; }
  .hs-hint-system.hs-customer-action-required {
    border-top-color: #ff8b2e; }
    .hs-hint-system.hs-customer-action-required.hs-selected {
      border-top-color: #ff8b2e;
      border-bottom-color: #f8fafb; }
      .hs-hint-system.hs-customer-action-required.hs-selected::after {
        background-color: #f8fafb; }
  .hs-hint-system .hs-hint-title {
    margin-top: 0px;
    margin-bottom: 0px; }

.hs-hint-drawer-error {
  background-color: #f8fafb;
  color: #dd1122;
  padding: 15px 20px; }

.hs-hint-drawer-warning {
  background-color: #f8fafb;
  color: #dd1122;
  padding: 15px 20px; }

.hs-hint-drawer-info {
  background-color: #f8fafb;
  color: #666666;
  padding: 15px 20px; }

.hs-hint-drawer-info-for-orders {
  background-color: #f8fafb;
  color: #333333;
  padding: 15px 20px; }

.hs-hint-drawer-info-fill {
  background-color: #f8fafb;
  color: #666666; }

.hs-hint-entry {
  margin-bottom: 10px; }

.hs-inner-icon {
  font-size: 24pt; }

.hs-hint-repair-detail ul {
  margin-top: 10px; }
  .hs-hint-repair-detail ul > li {
    padding: 0px; }

.hs-hint-repair-detail .hs-hint-repair-info {
  margin-top: 20px; }
  .hs-hint-repair-detail .hs-hint-repair-info > p {
    margin: 0; }

.hs-hint-technical-support-detail ul {
  margin-top: 10px; }
  .hs-hint-technical-support-detail ul > li {
    padding: 0px; }

.hs-hint-technical-support-detail .hs-hint-technical-support-info {
  margin-top: 20px; }
  .hs-hint-technical-support-detail .hs-hint-technical-support-info > p {
    margin: 0; }

.response > div {
  text-align: center; }

.response img {
  max-width: 50px; }

.ajax-loader-product-offering {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px; }

.hs-hint-content {
  margin-bottom: 10px; }

.hs-hint-product-offering-additional-info {
  margin-top: 10px; }

.hs-hint-enterprise-notification {
  margin-bottom: 20px; }
  .hs-hint-enterprise-notification h3, .hs-hint-enterprise-notification .hs-line .hs-line-link, .hs-line .hs-hint-enterprise-notification .hs-line-link, .hs-hint-enterprise-notification p {
    width: 100%; }
  .hs-hint-enterprise-notification ul {
    padding-left: 40px;
    list-style: disc; }
  .hs-hint-enterprise-notification ol {
    padding-left: 40px;
    list-style: decimal; }

.hs-hint-animation > .decoration::before {
  content: url("../images/santacornerhat.png");
  position: absolute;
  margin-left: -50px;
  margin-top: -18px;
  transform: scale(0.6);
  transform-origin: left top; }

.icon-info-outline-exclamation-mark,
.icon-info-outline-check-mark,
.icon-open-support-cases-check-mark,
.icon-open-support-cases-exclamation-mark,
.icon-incident-internet-check-mark,
.icon-incident-internet-exclamation-mark,
.icon-incident-tv-check-mark,
.icon-incident-tv-exclamation-mark,
.icon-incident-mobile-check-mark,
.icon-incident-mobile-exclamation-mark,
.icon-incident-phone-check-mark,
.icon-incident-phone-exclamation-mark {
  position: relative;
  font-family: "sdx-icons" !important;
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  text-rendering: auto;
  line-height: 1;
  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-info-outline-exclamation-mark::before,
  .icon-info-outline-check-mark::before,
  .icon-open-support-cases-check-mark::before,
  .icon-open-support-cases-exclamation-mark::before,
  .icon-incident-internet-check-mark::before,
  .icon-incident-internet-exclamation-mark::before,
  .icon-incident-tv-check-mark::before,
  .icon-incident-tv-exclamation-mark::before,
  .icon-incident-mobile-check-mark::before,
  .icon-incident-mobile-exclamation-mark::before,
  .icon-incident-phone-check-mark::before,
  .icon-incident-phone-exclamation-mark::before {
    color: #001155; }
  .icon-info-outline-exclamation-mark::after,
  .icon-info-outline-check-mark::after,
  .icon-open-support-cases-check-mark::after,
  .icon-open-support-cases-exclamation-mark::after,
  .icon-incident-internet-check-mark::after,
  .icon-incident-internet-exclamation-mark::after,
  .icon-incident-tv-check-mark::after,
  .icon-incident-tv-exclamation-mark::after,
  .icon-incident-mobile-check-mark::after,
  .icon-incident-mobile-exclamation-mark::after,
  .icon-incident-phone-check-mark::after,
  .icon-incident-phone-exclamation-mark::after {
    font-family: "Swisscom-Icons";
    top: 0;
    right: -5px;
    font-size: 18px;
    border-radius: 9px;
    position: absolute;
    display: block;
    background-color: #F8F8F8;
    color: #e86416;
    content: "\EA40"; }

.icon-mail-proportional-sdx-exclamation-mark {
  position: relative;
  font-family: "sdx-icons" !important;
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  text-rendering: auto;
  line-height: 1;
  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-mail-proportional-sdx-exclamation-mark::after {
    font-family: "Swisscom-Icons";
    top: -5px;
    right: -8px;
    font-size: 18px;
    border-radius: 9px;
    position: absolute;
    display: block;
    background-color: #F8F8F8;
    color: #e86416;
    content: "\EA40"; }

.icon-information-sdx,
.icon-mail-proportional-sdx,
.icon-mail-proportional-sdx-exclamation-mark,
.icon-flash-sdx,
.icon-flag-sdx,
.icon-repair-sdx {
  font-family: "sdx-icons" !important;
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  text-rendering: auto;
  line-height: 1;
  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-info-outline-check-mark::before {
  content: ""; }

.icon-info-outline-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.icon-info-outline-exclamation-mark::before {
  content: ""; }

.icon-incident-internet-check-mark::before {
  content: ""; }

.icon-incident-internet-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.icon-incident-internet-exclamation-mark::before {
  content: ""; }

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

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

.icon-repair-sdx::before,
.icon-open-support-cases-exclamation-mark::before {
  content: ""; }

.icon-mail-proportional-sdx::before,
.icon-mail-proportional-sdx-exclamation-mark::before {
  content: ""; }

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

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

.icon-incident-tv-check-mark::before {
  content: "\E0A6"; }

.icon-incident-tv-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.icon-incident-tv-exclamation-mark::before {
  content: "\E0A6"; }

.icon-incident-mobile-check-mark::before {
  content: ""; }

.icon-incident-mobile-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.icon-incident-mobile-exclamation-mark::before {
  content: ""; }

.icon-incident-phone-check-mark::before {
  content: ""; }

.icon-incident-phone-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.icon-incident-phone-exclamation-mark::before {
  content: ""; }

.icon-incident-other-check-mark,
.icon-incident-other-exclamation-mark {
  position: relative; }
  .icon-incident-other-check-mark::before,
  .icon-incident-other-exclamation-mark::before {
    color: #001155;
    content: "\EA49"; }
  .icon-incident-other-check-mark::after,
  .icon-incident-other-exclamation-mark::after {
    top: 0;
    right: -5px;
    font-size: 18px;
    border-radius: 9px;
    position: absolute;
    display: block;
    background-color: #F8F8F8;
    color: #e86416;
    content: "\EA40"; }

.icon-incident-other-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.icon-incident-multiple-check-mark,
.icon-incident-multiple-exclamation-mark {
  position: relative; }
  .icon-incident-multiple-check-mark::before,
  .icon-incident-multiple-exclamation-mark::before {
    color: #001155;
    content: "\EA61"; }
  .icon-incident-multiple-check-mark::after,
  .icon-incident-multiple-exclamation-mark::after {
    top: 0;
    right: -5px;
    font-size: 18px;
    border-radius: 9px;
    position: absolute;
    display: block;
    background-color: #F8F8F8;
    color: #e86416;
    content: "\EA40"; }

.icon-incident-multiple-check-mark::after {
  color: #25b252;
  content: "\EA20"; }

.hs-hint-drawer-info > section {
  display: flex; }
  .hs-hint-drawer-info > section > .hs-hint-drawer-column-left {
    width: 70%; }
    .hs-hint-drawer-info > section > .hs-hint-drawer-column-left > .hs-incident-text {
      margin-right: 40px; }
  .hs-hint-drawer-info > section > .hs-attribute {
    width: 70%; }
  .hs-hint-drawer-info > section li.hs-attribute {
    margin-bottom: 0px; }
  .hs-hint-drawer-info > section > map-incident-service-request > .hs-product-drawer-service-request > h3, .hs-line .hs-hint-drawer-info > section > map-incident-service-request > .hs-product-drawer-service-request > .hs-line-link {
    margin-top: 0px; }

.hs-hint-drawer-info .hs-attribute {
  margin-top: 10px;
  margin-bottom: 20px; }
  .hs-hint-drawer-info .hs-attribute p {
    margin-bottom: 5px; }
    .hs-hint-drawer-info .hs-attribute p span {
      display: inline-block;
      font-family: 'TheSaB3', 'Trebuchet MS', Arial, Helvetica, sans-serif;
      font-size: 14px; }
      .hs-hint-drawer-info .hs-attribute p span.hs-attribute-label {
        color: #333333;
        min-width: 130px; }
      .hs-hint-drawer-info .hs-attribute p span.hs-attribute-value {
        color: #666666; }

.hs-hint-drawer-info .hs-product-drawer-service-request h3, .hs-hint-drawer-info .hs-product-drawer-service-request .hs-line .hs-line-link, .hs-line .hs-hint-drawer-info .hs-product-drawer-service-request .hs-line-link {
  margin-top: 10px; }

.hs-hint-incident-busines-interactions {
  margin-top: 10px; }
  .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container {
    width: 100%;
    background-color: #f1f1f1;
    padding: 0px 20px 0px 20px;
    display: flex;
    flex-wrap: wrap; }
    .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .record-container {
      width: 100%; }
    .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .hs-hint-incident-interaction-record {
      width: 100%;
      display: flex;
      padding-top: 18px;
      padding-bottom: 5px;
      justify-content: flex-start; }
      .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .hs-hint-incident-interaction-record .record-content {
        flex-grow: 1; }
        .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .hs-hint-incident-interaction-record .record-content .hs-attribute {
          margin-bottom: 0px; }
        .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .hs-hint-incident-interaction-record .record-content .interaction-sms-text {
          background-color: white;
          margin-top: 4px;
          padding: 6px 4px 6px 4px;
          border-radius: 5px; }
      .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .hs-hint-incident-interaction-record div > p {
        margin-bottom: 9px;
        font-size: 14px;
        font-weight: inherit;
        line-height: 18px; }
      .hs-hint-incident-busines-interactions .hs-hint-incident-interaction-records.sdx-container .hs-hint-incident-interaction-record > i {
        position: relative;
        left: -7px;
        top: -1px;
        font-size: 34px; }

.hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner {
  display: flex; }
  .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div {
    width: 90%; }
    .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form {
      align-items: baseline; }
      .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form .hs-hint-subscribe-to-incident-inner-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        align-items: baseline; }
      .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form .input-field {
        width: 50%; }
        .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form .input-field input[type='text'] {
          height: 30px;
          margin-top: 0px; }
      .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form label {
        margin-bottom: 5px;
        font-size: 12px; }
      .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form button {
        width: 50%;
        margin-left: 12px;
        padding: 4px 12px;
        font-size: 16px; }

[hs-device="phone"] .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner {
  flex-wrap: wrap; }
  [hs-device="phone"] .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner .sg-icon {
    display: block;
    margin: 0 auto;
    font-size: 46px;
    margin-bottom: 11px; }
  [hs-device="phone"] .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form {
    flex-wrap: wrap; }
    [hs-device="phone"] .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form .hs-hint-subscribe-to-incident-inner-row {
      flex-direction: column; }
    [hs-device="phone"] .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form .input-field {
      width: 100%; }
    [hs-device="phone"] .hs-hint-subscribe-to-incident.sdx-container .hs-hint-subscribe-to-incident-inner div form button {
      margin-left: 0;
      width: 100%; }

.more-subscriptions-link {
  position: relative; }
  .more-subscriptions-link[hs-device="phone"] {
    margin-top: 15px !important; }
  .more-subscriptions-link .loader-spinner {
    position: absolute;
    right: 27px;
    top: -5px; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.hs-line .hs-line-content {
  transition: color 0.15s ease-in;
  margin: 0 !important;
  padding: 17px 0; }
  [hs-channel="csu"] .hs-line .hs-line-content {
    padding: 7px 0; }

.hs-line .hs-line-link {
  align-items: center;
  display: block;
  text-decoration: none;
  color: #333333; }
  .hs-line .hs-line-link.hs-line-link-selected {
    color: #1781e3; }
  .hs-line .hs-line-link:hover {
    color: #1781e3; }

.hs-line h3.hs-line-title, .hs-line .hs-line-title.hs-line-link {
  margin-top: 0; }

.hs-line .hs-line-collapse-icon {
  transition: color 0.15s ease-in;
  margin-top: -1px;
  padding-left: 5px;
  text-align: right; }

.hs-additional-lines {
  margin-top: 30px; }
  .hs-additional-lines .hs-additional-lines-title {
    background-color: #eef3f6;
    border-bottom: 1px solid #001155;
    color: #001155;
    padding: 20px; }
    .hs-additional-lines .hs-additional-lines-title h2 {
      margin: 0px; }
  .hs-additional-lines .hs-additional-lines-filter-sort {
    display: flex;
    align-items: center; }
    .hs-additional-lines .hs-additional-lines-filter-sort label, .hs-additional-lines .hs-additional-lines-filter-sort a {
      margin: 15px 20px 15px 0px; }
  .hs-additional-lines .hs-line {
    padding-left: 20px;
    padding-right: 20px; }
  .hs-additional-lines .hs-additional-lines-toggle {
    text-align: right; }
    .hs-additional-lines .hs-additional-lines-toggle[hs-device="phone"] {
      text-align: left;
      padding-bottom: 5px; }
  .hs-additional-lines .hs-additional-lines-content {
    margin-bottom: 10px; }
  .hs-additional-lines > div:last-child {
    border-bottom: none; }

.hs-additional-lines-loading *:hover {
  cursor: progress; }

.hs-links-online-button {
  margin-top: 15px; }
  .hs-links-online-button a {
    text-decoration: none !important; }

.hs-product-add, .hs-product {
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  color: #001155;
  text-align: center;
  position: relative; }
  .hs-product-add[hs-device="desktop"], .hs-product[hs-device="desktop"], .hs-product-add[hs-device="tablet"], .hs-product[hs-device="tablet"] {
    padding: 25px 15px 20px 15px; }
    .hs-product-add[hs-device="desktop"][hs-channel="csu"], .hs-product[hs-device="desktop"][hs-channel="csu"], .hs-product-add[hs-device="tablet"][hs-channel="csu"], .hs-product[hs-device="tablet"][hs-channel="csu"] {
      padding: 15px 15px 10px 15px; }
  .hs-product-add[hs-device="phone"], .hs-product[hs-device="phone"] {
    padding: 25px 0;
    margin-top: 0; }
    .hs-product-add[hs-device="phone"].hs-selected, .hs-product[hs-device="phone"].hs-selected {
      padding-bottom: 5px; }
  .hs-inactive.hs-product-add, .hs-inactive.hs-product {
    color: #A4A4A4; }
  .hs-product-add:hover, .hs-product:hover, .hs-selected.hs-product-add, .hs-selected.hs-product {
    color: #1781e3;
    text-decoration: none; }

.hs-product-add {
  display: block; }
  .hs-product-add .hs-product-image[hs-device="desktop"], .hs-product-add .hs-product-image[hs-device="tablet"] {
    margin-bottom: 20px; }
  .hs-product-add .hs-product-image[hs-device="phone"] i.icon {
    font-size: 42px; }
  .hs-product-add.hs-inactive {
    color: #A4A4A4;
    cursor: progress; }
    .hs-product-add.hs-inactive .hs-layered-icon-bottom-right {
      color: #FFBB4F; }

.hs-product {
  transition: color 0.15s ease-in;
  transition: border-bottom-color 0.15s ease-in; }
  .hs-product[hs-device="desktop"], .hs-product[hs-device="tablet"] {
    margin-bottom: 0px;
    margin-top: 15px;
    background-color: #eef3f6;
    border-bottom: 5px solid white; }
  .hs-product:hover, .hs-product.hs-selected {
    margin-bottom: 0px; }
    .hs-product:hover[hs-device="desktop"], .hs-product:hover[hs-device="tablet"], .hs-product.hs-selected[hs-device="desktop"], .hs-product.hs-selected[hs-device="tablet"] {
      border-bottom: 5px solid #1781e3; }
  .hs-product.hs-bundled-product[hs-device="phone"] {
    border-top: 1px solid #A4A4A4; }
  .hs-product.hs-bundled-product.hs-first-of-bundle[hs-device="desktop"], .hs-product.hs-bundled-product.hs-first-of-bundle[hs-device="tablet"] {
    margin-left: 10px; }
  .hs-product.hs-bundled-product.hs-first-of-bundle[hs-device="desktop"], .hs-product.hs-bundled-product.hs-first-of-bundle[hs-device="tablet"] {
    margin-left: 10px; }
  .hs-product.hs-bundled-product.hs-last-of-bundle[hs-device="desktop"], .hs-product.hs-bundled-product.hs-last-of-bundle[hs-device="tablet"] {
    margin-right: 10px; }
  .hs-product[hs-device="phone"] {
    margin-right: 0px;
    margin-left: 0px; }
  .hs-product.hs-single-product {
    margin-right: 10px;
    margin-left: 10px; }
    .hs-product.hs-single-product[hs-device="phone"] {
      margin-right: 0px;
      margin-left: 0px;
      border-top: 1px solid #A4A4A4; }
    .hs-product.hs-single-product.hs-new-product {
      background: none; }
    .hs-product.hs-single-product.hs-selected .hs-product-image {
      color: #1781e3; }
  .hs-product[hs-device="phone"] {
    text-align: left; }
  .hs-product .hs-product-image[hs-device="desktop"], .hs-product .hs-product-image[hs-device="tablet"] {
    margin-bottom: 5px; }

.hs-product-title[hs-device="desktop"] {
  min-height: 2.6em; }

.hs-product-title[hs-device="tablet"] {
  min-height: 3.9em; }

.hs-product-title[hs-device="desktop"], .hs-product-title[hs-device="tablet"] {
  overflow: hidden;
  text-overflow: ellipsis; }

.hs-product-attributes[hs-device="phone"] {
  min-height: 2.6em; }
  .hs-product-attributes[hs-device="phone"] i.icon {
    font-size: 32px; }

.hs-product-notifications {
  position: absolute;
  top: 10px;
  right: 10px; }

.flexbox .hs-product-drawer[hs-device="desktop"], .flexbox .hs-product-drawer[hs-device="tablet"], .flexboxtweener .hs-product-drawer[hs-device="desktop"], .flexboxtweener .hs-product-drawer[hs-device="tablet"] {
  border-top: 2px solid #1781e3; }

.flexbox .hs-product-drawer[hs-device="phone"], .flexboxtweener .hs-product-drawer[hs-device="phone"] {
  padding: 0; }

.flexbox .hs-product-drawer .hs-product-drawer-column:not(:last-of-type), .flexboxtweener .hs-product-drawer .hs-product-drawer-column:not(:last-of-type) {
  padding-right: 15px; }
  .flexbox .hs-product-drawer .hs-product-drawer-column:not(:last-of-type)[hs-device="phone"], .flexboxtweener .hs-product-drawer .hs-product-drawer-column:not(:last-of-type)[hs-device="phone"] {
    margin-bottom: 20px; }

.flexbox .hs-product-drawer .hs-product-drawer-new-column:not(.hs-last-of-row), .flexboxtweener .hs-product-drawer .hs-product-drawer-new-column:not(.hs-last-of-row) {
  padding-right: 20px; }

.flexbox .hs-product-drawer .hs-product-drawer-sub-column:not(:last-of-type), .flexboxtweener .hs-product-drawer .hs-product-drawer-sub-column:not(:last-of-type) {
  padding-right: 10px; }

.flexbox .hs-product-drawer .hs-bas-hint, .flexboxtweener .hs-product-drawer .hs-bas-hint {
  width: 100%;
  margin: 0 0 -15px 0; }

.hs-product-name-no-wrap {
  white-space: nowrap; }

.hs-dialog-button-group {
  margin-left: auto; }

.hs-usecase-dialog-params {
  margin: 10px 0 10px; }

.hs-number-change-phone-numbers {
  overflow-y: scroll;
  height: 186px;
  width: 100%;
  margin-top: 20px; }
  .hs-number-change-phone-numbers a.active-item {
    background-color: #eef3f6; }

.hs-input-search-icon {
  margin: 6px; }

.hs-layered-icon-parent {
  position: relative; }

.hs-layered-icon-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #1781e3;
  background-color: white;
  border-radius: 50%;
  transform: translateY(33%); }

.hs-layered-icon-top-right {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  border-radius: 50%;
  padding: 2px;
  transform: translateY(-33%); }

.hs-combox-row {
  margin-bottom: 20px; }

.hs-title-link-with-icon a {
  color: #333333; }
  .hs-title-link-with-icon a:hover, .hs-title-link-with-icon a:focus {
    text-decoration: none; }
  .hs-title-link-with-icon a span {
    margin-left: 5px; }

#access-independent-products {
  margin-top: 35px; }

.hs-product-list {
  margin-top: 20px; }
  .hs-product-list .hs-title-row {
    padding-left: 20px; }
  .hs-product-list .hs-product-drawer-options {
    padding-left: 20px;
    padding-right: 10px; }

.hs-product-list-no-margin-top .hs-title-row {
  padding-left: 20px; }

.hs-product-list-no-margin-top .hs-product-drawer-options {
  padding-left: 20px;
  padding-right: 10px; }

.hs-product-drawer-content .single-link-col {
  padding-top: 23px; }

.hs-product-drawer-content[hs-device="desktop"] .hs-title-row h3.phone-numbers-title, .hs-product-drawer-content[hs-device="desktop"] .hs-title-row .hs-line .phone-numbers-title.hs-line-link, .hs-line .hs-product-drawer-content[hs-device="desktop"] .hs-title-row .phone-numbers-title.hs-line-link {
  overflow: hidden; }

.hs-product-drawer-content[hs-device="phone"] .single-link-col {
  padding: 0 0 18px 0; }

.hs-product-drawer-content[hs-device="phone"] .hs-title-row {
  flex-wrap: wrap; }
  .hs-product-drawer-content[hs-device="phone"] .hs-title-row > * {
    width: 100%;
    margin-left: 0; }
  .hs-product-drawer-content[hs-device="phone"] .hs-title-row > .hs-arrow {
    margin-bottom: 10px; }

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

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

<div>
  <sdx-loading-spinner></sdx-loading-spinner>
  <sdx-loading-spinner size="large"></sdx-loading-spinner>
</div>


```section_design
```

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

  <h3>Sizes</h3>

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

  <p>
    <sdx-loading-spinner></sdx-loading-spinner>
  </p>

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

  <p>
    <sdx-loading-spinner size="large"></sdx-loading-spinner>
  </p>

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

  <h3>Axis</h3>

  <p>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.</p>

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

  <h3>Inside elements</h3>

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

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


```section_develop
```

```htmlmixed_webcomponent_sdx-loading-spinner_accessible
<sdx-loading-spinner sr-hint="Loading. Please wait."></sdx-loading-spinner>
<sdx-loading-spinner size="large" sr-hint="Loading. Please wait."></sdx-loading-spinner>
```
*/
.loader-spinner {
  position: relative; }
  .loader-spinner, .loader-spinner--large {
    background-size: 3750px 50px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("../images/loader-spinner-navy-large.png");
    width: 50px;
    height: 50px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-animation: anim-sheet-navy-large 1.25s steps(75) infinite;
            animation: anim-sheet-navy-large 1.25s steps(75) infinite; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .loader-spinner, .loader-spinner--large {
        background-image: url("../images/loader-spinner-navy-large@2x.png"); } }

@keyframes anim-sheet-navy-large {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -3750px 0; } }
    .loader-spinner.loader-spinner--plain, .loader-spinner--large.loader-spinner--plain {
      background-size: 3750px 50px;
      background-position: 0 0;
      background-repeat: no-repeat;
      background-image: url("../images/loader-spinner-plain-large.png");
      width: 50px;
      height: 50px;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-animation: anim-sheet-plain-large 1.25s steps(75) infinite;
              animation: anim-sheet-plain-large 1.25s steps(75) infinite; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .loader-spinner.loader-spinner--plain, .loader-spinner--large.loader-spinner--plain {
          background-image: url("../images/loader-spinner-plain-large@2x.png"); } }

@keyframes anim-sheet-plain-large {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -3750px 0; } }
  .loader-spinner--small {
    background-size: 1875px 25px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("../images/loader-spinner-navy-small.png");
    width: 25px;
    height: 25px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-animation: anim-sheet-navy-small 1.25s steps(75) infinite;
            animation: anim-sheet-navy-small 1.25s steps(75) infinite; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
      .loader-spinner--small {
        background-image: url("../images/loader-spinner-navy-small@2x.png"); } }

@keyframes anim-sheet-navy-small {
  0% {
    background-position: 0 0; }
  100% {
    background-position: -1875px 0; } }
    .loader-spinner--small.loader-spinner--plain {
      background-size: 1875px 25px;
      background-position: 0 0;
      background-repeat: no-repeat;
      background-image: url("../images/loader-spinner-plain-small.png");
      width: 25px;
      height: 25px;
      -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
      -webkit-animation: anim-sheet-plain-small 1.25s steps(75) infinite;
              animation: anim-sheet-plain-small 1.25s steps(75) infinite; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        .loader-spinner--small.loader-spinner--plain {
          background-image: url("../images/loader-spinner-plain-small@2x.png"); } }

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

.bg--dark .loader-spinner, .bg--dark .loader-spinner--large {
  background-size: 3750px 50px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-dark-large.png");
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: anim-sheet-dark-large 1.25s steps(75) infinite;
          animation: anim-sheet-dark-large 1.25s steps(75) infinite; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .bg--dark .loader-spinner, .bg--dark .loader-spinner--large {
      background-image: url("../images/loader-spinner-dark-large@2x.png"); } }

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

.bg--dark .loader-spinner--small {
  background-size: 1875px 25px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("../images/loader-spinner-dark-small.png");
  width: 25px;
  height: 25px;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: anim-sheet-dark-small 1.25s steps(75) infinite;
          animation: anim-sheet-dark-small 1.25s steps(75) infinite; }
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .bg--dark .loader-spinner--small {
      background-image: url("../images/loader-spinner-dark-small@2x.png"); } }

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

/*doc
---
title: Modals
name: 02-components-105-modals-01-overview
category: Components - Modals
---

<p>Modals are pop up windows that are used to delivery timely information, or request action from users.</p>

<p>A responsive test page for the Modal dialog: <a href="/samples/modal.html">samples/modal</a>.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <img class="img-responsive" src="./theme-build/img/design/modal/Group-11@2x.JPG">
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>


```section_design
```

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

  <h3>Standard modals</h3>

  <p>For devices over 768px wide use modal windows with side by side CTAs. Mobile modals use full width and stacked CTA’s to save horizontal space.<br />Buttons align right on modals used for >768px devices.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-11@2x.JPG">
      <span class="fig-caption">768px uses side by size modals</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-12@2x-9.jpg">
      <span class="fig-caption">768px modal view uses stacked CTA to save horizontal space</span>
    </div>
  </div>

  <h3>Icon modal</h3>

  <p>The icon modal varies in sizes, depending on the number of icons inside. These icons are distibuted evenly across the modal. When displaying more than five icons, a dividing line helps to separate the rows of icons.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-13@2x-10.jpg">
      <span class="fig-caption">Modal with two icons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-14@2x-7.jpg">
      <span class="fig-caption">Modal with three icons</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Overlay</h3>

  <p>The ovelay is a globally 40% #333333 on all modal styles. The modal is always vertically centered within the viewport.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-13@2x-14.jpg">
      <span class="fig-caption">Background overlay color</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Stacked buttons</h3>

  <p>Use no more than three stack buttons to avoid the modal getting too long.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/modal/Group-18@2x-7.jpg">
      <span class="fig-caption">Stacked buttons</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

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


```section_develop
```

<p>Modals are used to display content in a layer above the app. There can only be one active modal dialog at a given time.</p>

<h2>Interactive sample</h2>

<p>A responsive test page for the Modal dialog is available at <a href="/samples/modal.html">samples/modal</a>. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.</p>

<h2>Usage</h2>

<style>
  .codeExample .backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .codeExample .modal {
    position: relative;
  }

  codeExample. .modal__content {
    margin: 24px;
    width: 100%;
  }
</style>

<p>There are serveral options for opening and closing a modal dialog, either use the <code>Modal</code> JavaScript component directly and call the <code>open()</code> and <code>close()</code> methods on the component; or add a button with the class <code>modal-trigger</code> and a <code>href</code> attribute with the id of the target modal dialog.</p>

```htmlmixed
<button class="button button--primary modal-trigger" href="myModalDialog">Open modal</button>
```

<p>To close the dialog either call <code>close()</code> on the component manually or apply either the <code>modal-close</code> or <code>modal-cancel</code> class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.</p>

<h3>Modal dialog with two buttons</h3>

```htmlmixed
<div class="modal modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <div class="modal__header">
      <h1>Delete file</h1>
      <button class="modal__close modal-cancel" aria-label="Close">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
    </div>
    <div class="modal__body">
      <p>
        Do you want to delete <strong>SDX_Library_Master.pdf</strong>?
      </p>
      <div class="button-group button-group--responsive">
        <button class="button button--responsive button--primary align-right modal-close">
          Yes, delete
        </button>
        <button class="button button--responsive button--secondary modal-cancel">
          No, keep it
        </button>
      </div>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Modal dialog with three buttons</h3>

```htmlmixed
<div class="modal modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <div class="modal__header">
      <h1>Delete file</h1>
      <button class="modal__close modal-cancel" aria-label="Close">
        <i class="icon icon-022-close" aria-hidden="true"></i>
      </button>
    </div>
    <div class="modal__body">
      <p>
        Do you want to delete <strong>SDX_Library_Master.pdf</strong>?
      </p>
      <div class="button-group button-group--responsive">
        <button class="button button--responsive button--primary modal-close">
          Yes, delete
        </button>
        <button class="button button--responsive button--secondary modal-cancel">
          No, keep it
        </button>
        <button class="button button--responsive button--secondary">
          Learn More
        </button>
      </div>
    </div>
  </div>
</div>
<div class="backdrop backdrop--open"></div>
```
*/
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900001;
  width: 100%;
  height: 100%;
  outline: none;
  pointer-events: none; }
  .modal--open {
    display: flex; }
    .modal--open .modal__content {
      transform: scale(1);
      visibility: visible;
      opacity: 1; }
  .modal > .container {
    display: flex; }
  .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; }
  .modal__close {
    position: absolute;
    top: 16px;
    right: 13px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: #015; }
    @media (min-width: 1024px) {
      .modal__close {
        top: 24px;
        right: 26px; } }
    .modal__close .icon {
      line-height: 32px;
      font-size: 24px;
      font-weight: 600; }
      @media (min-width: 1024px) {
        .modal__close .icon {
          font-size: 30px;
          font-weight: 600; } }
  .modal__header {
    border-bottom: 1px solid #d6d6d6;
    padding: 20px 64px 0 24px;
    width: 100%;
    height: 64px; }
    @media (min-width: 1024px) {
      .modal__header {
        padding: 24px 64px 0 32px;
        height: 80px; } }
    .modal__header h1,
    .modal__header h2,
    .modal__header h3,
    .modal__header .hs-line .hs-line-link,
    .hs-line .modal__header .hs-line-link,
    .modal__header h4,
    .modal__header h5,
    .modal__header h6 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 0; }
    .modal__header h1 {
      font-weight: 600;
      line-height: 24px;
      letter-spacing: -.1px;
      font-size: 18px; }
      @media (min-width: 1024px) {
        .modal__header h1 {
          font-weight: 300;
          line-height: 32px;
          letter-spacing: -.35px;
          font-size: 24px; } }
  .modal__body {
    line-height: 24px;
    letter-spacing: -.1px;
    font-size: 18px;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    max-height: calc(100vh - 80px - 80px);
    padding: 21px 24px 24px; }
    @media (min-width: 1024px) {
      .modal__body {
        padding: 29px 32px 32px; } }
    .modal__body .button-group {
      margin-top: 21px; }
      @media (min-width: 1024px) {
        .modal__body .button-group {
          margin-top: 34px; } }
  @media (max-width: 479px) {
    .modal > .container {
      width: calc(102% - (2 * 24px)); } }

.backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 600ms, visibility 600ms;
  visibility: hidden;
  opacity: 0;
  z-index: 900000;
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%; }
  .backdrop--open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto; }

/*doc
---
title: Notifications (modal)
name: 02-components-130-notification-modal-01-overview
category: Components - Notifications (modal)
---

<p>Modal notifications are large screen take overs featuring messaging and iconography that intentionally interrupt the users experience, usually require an action from the user in order to progress to the next stage in an experience, or because the notification is of particular significance.</p>

<h3>How to use notification modals</h3>

<p>Notifications modals behave just like conventional modal windows, but with the introduction of bold color. They're the only instance where the interaction color palette is used as a background color. They help to provide a clearly signposted and direct delivery of information to the user.</p>

<div class="row">
  <div class="col-xs-12 col-lg-6">
    <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-10@2x-17.jpg">
    <span class="fig-caption">Inbox notification</span>
  </div>
  <div class="col-xs-12 col-lg-6">
  </div>
</div>


```section_design
```

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

  <h3>General notifications</h3>

  <p>Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
       <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-10@2x-17.jpg">
       <span class="fig-caption">Inbox notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Confirmation notifcations</h3>

  <p>The green notification should be used to indicate validation or success, for example to confirm success at the end of an order process.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-4@2x-4.jpg">
      <span class="fig-caption">Order confirmation notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Alert notifcations</h3>

  <p>Orange notifications indicate an error or a warning, for example something that needs urgent attention.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_modal/Group-2@2x-6.jpg">
      <span class="fig-caption">Error or warning notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Overlay</h3>

  <p>The overlay is a globally 40% opacity and #333333 on all modal styles. The modal is always vertically centered within the viewport.</p>

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

  <h3>Alignment</h3>

  <p>The modal is always horizontally and vertically centered within the viewport.</p>

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

  <h2>Typography</h2>

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


```section_develop
```

<h2>Usage</h2>

<h3>Interactive sample</h3>

<p>A responsive test page for the Notification Modal dialog is available at <a href="/samples/notification-modal.html">samples/notification-modal</a>. In additon to the responsive behavior it also demonstrates how to open and close the modal dialog.</p>

<style>
  .backdrop {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .modal {
    position: relative;
  }

  .modal__content {
    margin: 24px;
    width: 100%;
    height: 600px;
  }
</style>

<p>There are serveral options for opening and closing a notification modal dialog, either use the <code>Modal</code> JavaScript component directly and call the <code>open()</code> and <code>close()</code> methods on the component; or add a button with the class <code>modal-trigger</code> and a <code>href</code> attribute with the id of the target modal dialog.</p>

```htmlmixed
<button class="button button--primary modal-trigger" href="myModalDialog">Open notification modal</button>
```

<p>To close the dialog either call <code>close()</code> on the component manually or apply either the <code>modal-close</code> or <code>modal-cancel</code> class to a button in the current modal dialog. Both of this states will dispatch an event when executed, this enables other frontend code to react to the selected user action if required.</p>

```htmlmixed
<div class="modal modal--notification modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-051-message" aria-hidden="true"></i>
        You have 4 new messages
      </div>
      <button class="button button--responsive button--thin">
        Go to inbox
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```
<h2>Colours</h2>

<h3>General Notifications</h3>

<p>Use the blue notification for more generic messaging around the users general profile.</p>

```htmlmixed
<div class="modal modal--notification modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-051-message" aria-hidden="true"></i>
        You have 4 new messages in your inbox
      </div>
      <button class="button button--responsive button--thin">
        Go to inbox
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Confirmations / Rewards</h3>

<p>Green notification should be used to indicate validation for example to reward a user at the end of an order process.</p>

```htmlmixed
<div class="modal modal--notification modal--notification--confirmation modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-012-check-mark-circle" aria-hidden="true"></i>
        3 items added to your basket
      </div>
      <button class="button button--responsive button--thin">
        Back to home
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```

<h3>Alerts / Error Notifications</h3>

<p>Only use interaction orange notifications to indicate an error or something that needs urgent attention.</p>

```htmlmixed
<div class="modal modal--notification modal--notification--alert modal--open" role="dialog" tabindex="-1">
  <div class="modal__content">
    <button class="modal__close modal-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
    <div class="modal__body">
      <div class="notification-message">
        <i class="icon icon-026-exclamation-mark-circle" aria-hidden="true"></i>
        You have 5 new alerts
      </div>
      <button class="button button--responsive button--thin">
        Okay
      </button>
    </div>
  </div>
</div>

<div class="backdrop backdrop--open"></div>
```
*/
.modal--notification .modal__content {
  background: #1781e3;
  width: 100%;
  height: 100%; }
  @media (min-width: 768px) {
    .modal--notification .modal__content {
      max-width: 460px;
      height: auto; } }
  .modal--notification .modal__content .modal__close {
    top: 22px;
    right: 22px;
    color: #fff; }
  .modal--notification .modal__content .modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 30px; }
    .modal--notification .modal__content .modal__body .notification-message {
      font-weight: 400;
      line-height: 32px;
      letter-spacing: -.35px;
      font-size: 24px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex-grow: 1;
      width: 100%;
      color: #fff;
      text-align: center; }
      .modal--notification .modal__content .modal__body .notification-message .icon {
        font-size: 64px;
        margin-bottom: 20px; }
    .modal--notification .modal__content .modal__body .button {
      border: 1px solid #fff;
      background-color: transparent;
      color: #fff;
      margin-top: 30px; }
      .modal--notification .modal__content .modal__body .button:hover, .modal--notification .modal__content .modal__body .button:focus, .modal--notification .modal__content .modal__body .button:active {
        border-color: rgba(255, 255, 255, 0.6); }

@media (max-width: 479px) {
  .modal--notification > .container {
    height: calc(100% - 48px); } }

.modal--notification--alert .modal__content {
  background: #ff8b2e; }

.modal--notification--confirmation .modal__content {
  background: #25b252; }

simple-sdx-dialog .sdx-container .modal, itb-sdx-dialog .sdx-container .modal {
  position: relative; }
  simple-sdx-dialog .sdx-container .modal .modal__content, itb-sdx-dialog .sdx-container .modal .modal__content {
    flex-grow: 1;
    max-height: 100%; }
  simple-sdx-dialog .sdx-container .modal .modal__body, itb-sdx-dialog .sdx-container .modal .modal__body {
    max-height: 100%; }
  simple-sdx-dialog .sdx-container .modal .modal__body.spinner-shown, itb-sdx-dialog .sdx-container .modal .modal__body.spinner-shown {
    position: -webkit-sticky;
    position: sticky;
    overflow: hidden; }
  simple-sdx-dialog .sdx-container .modal .modal-loader.full-screen, itb-sdx-dialog .sdx-container .modal .modal-loader.full-screen {
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 999; }

simple-sdx-dialog .modal--notification .modal__content, itb-sdx-dialog .modal--notification .modal__content {
  max-width: 100%; }

simple-sdx-dialog .modal--notification .notification-message > p, itb-sdx-dialog .modal--notification .notification-message > p {
  font-size: 20px !important;
  text-align: center !important; }

simple-sdx-dialog .modal--notification .modal__close, itb-sdx-dialog .modal--notification .modal__close {
  margin: 0;
  border: 0;
  background-color: transparent;
  padding: 0;
  color: inherit; }

simple-sdx-dialog .modal--notification .button--thin, itb-sdx-dialog .modal--notification .button--thin {
  min-height: 50px;
  line-height: 24px;
  letter-spacing: -.1px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  position: relative;
  transition: all 70ms cubic-bezier(0.4, 0, 0.6, 1);
  margin: 0;
  outline: none;
  border: 0;
  border-bottom-style: none;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  padding: 12px 24px;
  min-width: 160px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 0;
  transform-origin: 50% 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }
  simple-sdx-dialog .modal--notification .button--thin:active, itb-sdx-dialog .modal--notification .button--thin:active {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(0.98); }

simple-sdx-dialog .input-field-uppercase, itb-sdx-dialog .input-field-uppercase {
  text-transform: uppercase; }

.hs-systemfailure {
  background-color: #FFFFFF;
  border-bottom: 3px solid #ffcc00;
  padding: 15px 20px; }
  .hs-systemfailure .hs-systemfailure-icon {
    color: #ffcc00; }

.hs-systemfailure-message {
  margin-top: 5px;
  margin-left: 10px; }

.hs-systemfailure-actions {
  margin-top: 15px; }

.hs-systemfailure-links {
  margin-top: 5px; }

.hs-systemfailure-btn {
  margin-top: 30px; }

.hs-bne-product-offerings-list > div {
  position: relative;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #f1f1f1;
  background-color: #f1f1f1;
  margin-bottom: 2px; }
  .hs-bne-product-offerings-list > div:hover, .hs-bne-product-offerings-list > div.active {
    border-color: #1781e3;
    background-color: #1781e3;
    color: #FFFFFF; }
  .hs-bne-product-offerings-list > div.active::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -9px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #1781e3; }

.hs-bne-product-offerings-list .hs-bne-promotions {
  color: #551166;
  border-color: #551166;
  background-color: #FFFFFF; }
  .hs-bne-product-offerings-list .hs-bne-promotions:hover, .hs-bne-product-offerings-list .hs-bne-promotions.active {
    background-color: #551166;
    border-color: #551166;
    color: #FFFFFF; }
  .hs-bne-product-offerings-list .hs-bne-promotions.active::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -9px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 9px solid #551166; }

.hs-bne-product-offering-content {
  margin-left: -1px;
  margin-top: 0;
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 20px; }
  .hs-bne-product-offering-content .hs-bne-confirm-product-offering {
    text-align: center; }
  .hs-bne-product-offering-content .feedback-panel {
    text-align: center;
    padding-left: 20px; }
    .hs-bne-product-offering-content .feedback-panel h4 {
      margin-right: 0; }
    .hs-bne-product-offering-content .feedback-panel button {
      display: block;
      margin-bottom: 5px;
      padding-right: 40px;
      padding-left: 40px; }

.hs-offer-notification a {
  display: block; }

.hs-offer-notification img {
  width: 100%; }

.overview-list map-hs-label-value {
  display: flex;
  align-items: flex-start;
  align-content: flex-start; }
  .overview-list map-hs-label-value .hs-attribute-label {
    flex: 1 1 auto; }
  .overview-list map-hs-label-value .hs-attribute-value {
    flex: 0 0 3em;
    text-align: right; }

.it-service-details-list {
  padding: 24px 0 24px 24px; }
  .it-service-details-list map-hs-label-value {
    display: flex;
    align-items: flex-start;
    align-content: flex-start; }
    .it-service-details-list map-hs-label-value .hs-attribute-label {
      flex: 0 0.5 auto; }
    .it-service-details-list map-hs-label-value .hs-attribute-value {
      flex: 1 0.5 3em;
      text-align: left;
      padding: 1px 0 0 3px; }

.mapScreenLoader, .mapDrawerLoader {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ABD5FD;
  margin-top: 0px;
  transition: margin-top 0.5s ease;
  height: 3px;
  z-index: 3; }
  .mapScreenLoader.paused, .paused.mapDrawerLoader {
    background-color: transparent;
    margin-top: -3px; }
    .mapScreenLoader.paused .progress-marker, .paused.mapDrawerLoader .progress-marker {
      background-color: transparent;
      -webkit-animation: none;
              animation: none; }
  .mapScreenLoader .progress-marker, .mapDrawerLoader .progress-marker {
    position: absolute;
    height: 3px;
    width: 20%;
    margin-left: 0%;
    background-color: #1781e3;
    -webkit-animation-name: progressBarAnimation;
            animation-name: progressBarAnimation;
    -webkit-animation-duration: 3.0s;
            animation-duration: 3.0s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-play-state: running;
            animation-play-state: running; }

.mapDrawerLoader {
  position: relative;
  background-color: #F5F5F5;
  height: 5px; }
  .mapDrawerLoader.paused {
    margin-top: 0px; }
  .mapDrawerLoader .progress-marker {
    height: 5px;
    background-color: #E0E0E0;
    -webkit-animation-duration: 5.0s;
            animation-duration: 5.0s; }

.hs-reloader-icon {
  transition: color 0.15s ease-in;
  color: #001155; }
  .hs-reloader-icon > a {
    transition: color 0.15s ease-in;
    color: #001155;
    text-decoration: none;
    padding: 10px; }
  .hs-reloader-icon:hover > a {
    color: #1781e3; }

[hs-device="phone"] .hs-reloader-icon {
  display: none; }

@-webkit-keyframes progressBarAnimation {
  from {
    margin-left: 0%; }
  to {
    margin-left: 80%; } }

@keyframes progressBarAnimation {
  from {
    margin-left: 0%; }
  to {
    margin-left: 80%; } }

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .hs-more-links-drawer ul {
    height: 200px; }
  .hs-customerdata .hs-more-links-drawer ul {
    height: 120px; } }

.hs-customerdata .hs-more-links-drawer ul:not([hs-device="phone"]) {
  max-height: 120px; }

.hs-more-links-drawer {
  overflow: hidden;
  border-top: 1px solid #C5C5C5;
  background-color: #eef3f6;
  padding: 10px 0; }
  .hs-more-links-drawer[hs-device="phone"] {
    border-bottom: 1px solid #C5C5C5; }
  .hs-more-links-drawer ul:not([hs-device="phone"]) {
    max-height: 200px; }
    .hs-more-links-drawer ul:not([hs-device="phone"]) li {
      width: 25%;
      padding-right: 10px; }
  .hs-more-links-drawer ul[hs-device="phone"] li {
    width: 100%;
    padding-left: 10px; }

.hs-more-links-link {
  display: inline-block;
  margin-top: 20px; }

.more-links-online-header {
  color: #C5C5C5;
  border-bottom: 1px solid #C5C5C5;
  margin: 20px 0px 5px 0px; }

ul.list-link-space li {
  line-height: 1.5em; }
  ul.list-link-space li:not(:first-of-type) {
    margin-top: 0; }
  ul.list-link-space li a {
    display: inline-block;
    margin-bottom: 5px;
    line-height: 1.7em; }

[data-reb-config-key="homescreen.products.product.drawer.details.online"] ul.list-link-space li a {
  margin-bottom: 0;
  line-height: 1.5em; }

.list-link-wrap-reverse {
  width: 100%;
  display: flex;
  flex-flow: column wrap-reverse;
  align-content: flex-start;
  align-items: flex-start; }
  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .list-link-wrap-reverse {
      align-items: flex-end; } }
  @supports (-ms-ime-align: auto) {
    .list-link-wrap-reverse {
      align-items: flex-end; } }

[hs-device="tablet"] .list-link-space li a, [hs-device="phone"] .list-link-space li a {
  display: block; }

[hs-device="tablet"] .hs-links-online .hs-attribute:not(:first-of-type), [hs-device="phone"] .hs-links-online .hs-attribute:not(:first-of-type) {
  margin-top: 0; }
  [hs-device="tablet"] .hs-links-online .hs-attribute:not(:first-of-type) a, [hs-device="phone"] .hs-links-online .hs-attribute:not(:first-of-type) a {
    padding-top: 5px; }

.hs-toolbar-drawer {
  overflow: hidden;
  padding: 8px;
  border-top: 1px solid #C5C5C5; }
  .hs-toolbar-drawer[hs-device="phone"] {
    border-bottom: 1px solid #C5C5C5; }
  .hs-toolbar-drawer a {
    margin-left: 16px;
    min-width: 120px; }
    .hs-toolbar-drawer a.clicked {
      border-color: #001155;
      color: #001155;
      text-decoration: none; }
      .hs-toolbar-drawer a.clicked:hover {
        border-color: #1781e3;
        color: #1781e3;
        text-decoration: none; }
  .hs-toolbar-drawer.ng-hide, .hs-toolbar-drawer .ng-hide-add {
    max-height: 0; }

.hs-product-drawer-service-request h3, .hs-product-drawer-service-request .hs-line .hs-line-link, .hs-line .hs-product-drawer-service-request .hs-line-link {
  padding-left: 10px; }

.hs-product-drawer-service-request .service-request-action {
  display: block;
  padding-left: 10px;
  color: #A4A4A4;
  line-height: 160%; }
  .hs-product-drawer-service-request .service-request-action span {
    margin-right: 15px; }
  .hs-product-drawer-service-request .service-request-action:hover {
    color: #A4A4A4;
    background-color: rgba(45, 144, 236, 0.2);
    text-decoration: none;
    cursor: pointer; }
  .hs-product-drawer-service-request .service-request-action.clicked {
    color: #001155;
    text-decoration: none; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.flexbox .hs-banner {
  margin: 15px 0;
  -webkit-animation: fade-in 0.9s;
          animation: fade-in 0.9s; }
  .flexbox .hs-banner > div[hs-layout="row"][hs-padding] {
    margin: 0;
    padding: 10px;
    margin-top: 10px; }
    .flexbox .hs-banner > div[hs-layout="row"][hs-padding]:first-child {
      margin-top: 0; }
      .flexbox .hs-banner > div[hs-layout="row"][hs-padding]:first-child div:not(:first-child) {
        margin: auto 0; }
    .flexbox .hs-banner > div[hs-layout="row"][hs-padding] .list-link-space li {
      line-height: 1.3em;
      margin: 0; }
      .flexbox .hs-banner > div[hs-layout="row"][hs-padding] .list-link-space li a {
        line-height: 1.3em;
        margin: 0 0 10px; }
      .flexbox .hs-banner > div[hs-layout="row"][hs-padding] .list-link-space li:last-child a {
        margin-bottom: 0; }

[hs-device="phone"] .flexbox .hs-banner {
  margin-top: 0; }

.hs-banner-info {
  color: #001155;
  background-color: #d1e6f9; }

.hs-banner-warning, .hs-bill-warning {
  color: #001155;
  background-color: rgba(255, 187, 79, 0.25); }
  .hs-banner-warning .sg-icon, .hs-bill-warning .sg-icon {
    color: #FFBB4F; }

@keyframes fade-in {
  0% {
    opacity: 0; }
  66% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.sdx-banner {
  border-top: 3px solid #0eaba9;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-animation: fade-in 0.5s;
          animation: fade-in 0.5s;
  display: flex;
  flex-direction: column; }
  .sdx-banner.emphasized {
    border-top: 3px solid #ff8b2e; }
  .sdx-banner.no-animation {
    -webkit-animation: none;
            animation: none; }
  .sdx-banner .sdx-banner-content {
    flex-wrap: nowrap !important;
    background-color: #eef3f6;
    padding: 18px 20px 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0px !important;
    margin-top: 3px !important; }
    .sdx-banner .sdx-banner-content.bordered {
      border-left: 1px solid #C5C5C5;
      border-right: 1px solid #C5C5C5;
      border-bottom: 1px solid #C5C5C5; }
    .sdx-banner .sdx-banner-content.bg-light {
      background-color: #FFFFFF; }
    .sdx-banner .sdx-banner-content .icon.emphasized {
      color: #ff8b2e; }
    .sdx-banner .sdx-banner-content .icon.defaultTopBarColor {
      color: #0eaba9; }
    .sdx-banner .sdx-banner-content:first-child {
      margin-top: 0px !important; }
    .sdx-banner .sdx-banner-content h4 {
      margin-top: 0; }
    .sdx-banner .sdx-banner-content .center-text {
      display: flex;
      align-items: center; }

.freeunits h2 {
  font-weight: bold; }

.freeunits-group h4 {
  padding: 10px 0 5px;
  color: #001155;
  border-bottom: 1px solid #001155; }

.freeunits [hs-layout="row"] {
  padding: 2px 10px 13px; }

.freeunits .freeunit-row-icon {
  font-size: 20px; }

[hs-device].sdx-container.sub-page .sdx-navbar {
  padding: 10px 0 10px 25px;
  font-size: 1.125em;
  margin-top: -13px;
  margin-bottom: 20px;
  background: #eef3f6; }
  [hs-device].sdx-container.sub-page .sdx-navbar .icon {
    font-size: 1.2em;
    padding-right: .2em; }

[hs-device].sdx-container.sub-page [hs-device="tablet"].sdx-navbar,
[hs-device].sdx-container.sub-page [hs-device="phone"].sdx-navbar {
  padding-left: 20px; }

[hs-device].sdx-container.sub-page .sdx-navbar-notification {
  margin-bottom: 20px; }

[hs-device].sdx-container.sub-page[hs-channel="ursa"] .sdx-navbar-notification {
  margin-top: -20px; }

#debugWidget {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  border-bottom: 1px solid #1781e3;
  font-size: 13px;
  transform: translateY(-100%); }
  #debugWidget.shown {
    transform: translateY(0%);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    height: 200px; }
  #debugWidget .debug-actions {
    flex: 1 20%;
    max-width: 20%; }
    #debugWidget .debug-actions ul {
      margin: 0; }
      #debugWidget .debug-actions ul li {
        padding: 0; }
        #debugWidget .debug-actions ul li:not(:last-child) a {
          margin-bottom: 1px; }
        #debugWidget .debug-actions ul li a {
          display: block;
          background-color: #f1f1f1;
          border-radius: 0;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap; }

#debugWidget.shown #debugButton, #debugButton:hover {
  background-color: #1781e3;
  color: white;
  box-shadow: 0px 0px 5px 0px rgba(45, 144, 236, 0.8); }

#debugButton {
  color: #1781e3;
  background-color: #FFFFFF;
  border: none;
  position: absolute;
  bottom: -1px;
  left: 0;
  transform: translateY(100%); }

#debugVersion {
  color: #1781e3;
  pointer-events: none;
  background-color: #FFFFFF;
  border: none;
  position: absolute;
  bottom: -20px;
  left: 0;
  transform: translateY(100%); }

.debug-widget-content {
  flex: 1 80%;
  max-width: 80%;
  width: 80%;
  padding-left: 1px;
  display: flex;
  flex-direction: column; }
  .debug-widget-content .debug-tabs a {
    display: inline-block;
    padding: 0px 5px; }
    .debug-widget-content .debug-tabs a.active {
      background-color: #f1f1f1; }
  .debug-widget-content .debug-tabs-content {
    flex: 1 0 auto;
    padding: 10px;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column; }
    .debug-widget-content .debug-tabs-content .cdm-tab {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      flex: 1 0 auto; }
      .debug-widget-content .debug-tabs-content .cdm-tab a {
        margin-left: -5px;
        margin-bottom: -5px; }
    .debug-widget-content .debug-tabs-content .cdm-form {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px; }
      .debug-widget-content .debug-tabs-content .cdm-form div {
        margin-right: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center; }
        .debug-widget-content .debug-tabs-content .cdm-form div label {
          width: 100px; }
        .debug-widget-content .debug-tabs-content .cdm-form div input[type="text"] {
          flex-grow: 1; }
        .debug-widget-content .debug-tabs-content .cdm-form div input[type="button"] {
          margin-left: 10px; }
      .debug-widget-content .debug-tabs-content .cdm-form #toolBar {
        justify-content: flex-end; }
    .debug-widget-content .debug-tabs-content .cdm-msg-list {
      flex: 1 0 auto;
      height: 0px;
      overflow: auto; }
      .debug-widget-content .debug-tabs-content .cdm-msg-list .cdm-msg-row {
        margin: 0 0 2px; }
        .debug-widget-content .debug-tabs-content .cdm-msg-list .cdm-msg-row.ng-enter {
          transition: 3s ease-in-out all;
          transition-timing-function: cubic-bezier(1, 0.25, 0.25, 1);
          background-color: yellow; }
        .debug-widget-content .debug-tabs-content .cdm-msg-list .cdm-msg-row.ng-enter.ng-enter-active {
          background-color: #f1f1f1; }

#lastError {
  word-wrap: break-word; }

.debug-window-open {
  padding-top: 200px; }

.activity-detail-page[hs-channel="csu"] {
  width: 980px; }

.word-break-all {
  word-break: break-all; }

.white-space {
  white-space: pre-wrap; }

.send-order-link-modal .checkbox {
  padding-right: 10px; }

.send-order-link-modal .margin-row {
  margin-bottom: 5px; }

.sdx-container input[type="checkbox"] {
  -webkit-appearance: checkbox; }

.margin-top-11 {
  margin-top: 11px; }

.padding-top-5 {
  padding-top: 5px; }

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

.hs-orderdetail order-documents .hs-attribute .hs-attribute-label {
  width: unset; }

.hs-orderdetail-actions {
  border-top: 1px solid #C5C5C5;
  padding: 15px 20px; }
  .hs-orderdetail-actions a {
    margin-right: 50px; }

.hs-orderdetail-documents {
  background-color: #F8F8F8;
  margin-top: 15px;
  margin-bottom: 4px;
  padding: 15px;
  border: 1px solid #C5C5C5; }
  .hs-orderdetail-documents-icon-sms:after {
    content: ""; }
  .hs-orderdetail-documents-icon-letter:after {
    content: ""; }
  .hs-orderdetail-documents-icon-email:after {
    content: ""; }
  .hs-orderdetail-documents .document-link {
    margin-top: 5px; }
  .hs-orderdetail-documents .sms-label {
    margin-top: 10px;
    font-weight: 600; }
  .hs-orderdetail-documents .sms-content {
    background-color: white;
    padding: 10px 5px;
    font-weight: 600; }

.hs-orderdetail .hs-no-margin > .hs-banner {
  margin: 0; }

.hs-orderdetail .hs-banner > div[hs-layout="row"][hs-padding] div:not(:first-child) {
  margin: auto 0; }

.hs-orderdetail .sr-actions .hs-banner-info {
  background-color: #ffffff; }

.hs-orderdetail .hs-attribute .hs-attribute-label {
  display: inline-block;
  width: 180px;
  color: #A4A4A4;
  flex: 0 26.5%; }

.hs-orderdetail .hs-attribute .hs-attribute-value, .hs-orderdetail .hs-attribute .hs-attribute-value[hs-channel="ursa"], .hs-orderdetail .hs-attribute .hs-attribute-value[hs-channel="csu"] {
  color: #333333; }

.hs-orderdetail .hs-collapsible[hs-channel="csu"] {
  margin-bottom: 0; }

.hs-orderdetail .hs-collapsible {
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-bottom: 0; }
  .hs-orderdetail .hs-collapsible.hs-expanded {
    box-shadow: none; }
  .hs-orderdetail .hs-collapsible.hs-collapsed .hs-collapsible-header {
    border-bottom: none; }
  .hs-orderdetail .hs-collapsible .hs-collapsible-header {
    padding: 5px 20px; }
    .hs-orderdetail .hs-collapsible .hs-collapsible-header .hs-collapsible-title {
      font-size: 13px;
      margin-top: 6px;
      font-weight: 600; }
      .hs-orderdetail .hs-collapsible .hs-collapsible-header .hs-collapsible-title .hs-icon-smallmedium {
        font-size: 19px;
        margin-right: 3px; }
  .hs-orderdetail .hs-collapsible .hs-collapsible-content {
    border-top: 0; }
  .hs-orderdetail .hs-collapsible .center-text {
    display: flex;
    align-items: center; }
  .hs-orderdetail .hs-collapsible .hs-orange-bar {
    border-top: 3px solid #ff8b2e; }
  .hs-orderdetail .hs-collapsible .hs-green-bar {
    border-top: 3px solid #0eaba9; }
  .hs-orderdetail .hs-collapsible .sdx-container {
    margin: 15px 0; }
    .hs-orderdetail .hs-collapsible .sdx-container .hs-hint-subscribe-to-incident-inner {
      margin: 0px 0px 5px 0px;
      background-color: #eef3f6;
      display: flex;
      align-items: stretch;
      border-left: 0;
      border-right: 0;
      border-bottom: 0; }
    .hs-orderdetail .hs-collapsible .sdx-container a.hs-button-primary {
      background-color: #1781e3; }
    .hs-orderdetail .hs-collapsible .sdx-container .button {
      padding: 4px 12px;
      font-size: 16px; }
    .hs-orderdetail .hs-collapsible .sdx-container .table table {
      border-top: none;
      border-bottom: none; }
    .hs-orderdetail .hs-collapsible .sdx-container .table thead, .hs-orderdetail .hs-collapsible .sdx-container .table tbody {
      line-height: 13px;
      font-size: 13px; }
    .hs-orderdetail .hs-collapsible .sdx-container .table thead th {
      text-align: right; }
      .hs-orderdetail .hs-collapsible .sdx-container .table thead th:first-of-type {
        text-align: left; }
    .hs-orderdetail .hs-collapsible .sdx-container .table tbody td {
      padding-top: 15px;
      text-align: right; }
      .hs-orderdetail .hs-collapsible .sdx-container .table tbody td:first-of-type {
        text-align: left; }
    .hs-orderdetail .hs-collapsible .sdx-container .table .h1, .hs-orderdetail .hs-collapsible .sdx-container .table .h2, .hs-orderdetail .hs-collapsible .sdx-container .table .h3, .hs-orderdetail .hs-collapsible .sdx-container .table .hs-line .hs-line-link, .hs-orderdetail .hs-collapsible .sdx-container .table h1, .hs-orderdetail .hs-collapsible .sdx-container .table h2, .hs-orderdetail .hs-collapsible .sdx-container .table h3, .hs-orderdetail .hs-collapsible .sdx-container .table .hs-line .hs-line-link, .hs-line .hs-orderdetail .hs-collapsible .sdx-container .table .hs-line-link {
      margin-bottom: 0px; }

.hs-orderdetail-shipment {
  background-color: #F8F8F8;
  margin: 10px;
  border: 1px solid #C5C5C5; }
  .hs-orderdetail-shipment .tracking-event {
    padding: 10px;
    display: flex;
    align-items: center; }
    .hs-orderdetail-shipment .tracking-event .numeration {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-right: 10px;
      background-color: #666666; }
    .hs-orderdetail-shipment .tracking-event .number {
      color: #FFFFFF;
      text-align: center; }

order-list-component .hs-drawer-column {
  padding-bottom: 0; }

order-list-component .hs-header-row {
  background-color: #dde3e7; }

order-list-component .hs-product-drawer {
  border-top: none !important; }

order-list-component .hs-table-body > div:not(:last-of-type) .hs-orderdetail {
  border-bottom: 3px solid #1781e3; }

order-list-component .hs-table-body.hs-table-overflow {
  max-height: 460px;
  overflow-y: auto; }

order-list-component .hs-table-body .hs-body-row {
  background-color: #eef3f6; }
  order-list-component .hs-table-body .hs-body-row:last-child {
    border-bottom: 1px solid #A4A4A4; }
  order-list-component .hs-table-body .hs-body-row-hover:hover:not(.hs-selected-row) {
    color: #2D90EC;
    background-color: #FFFFFF; }
    order-list-component .hs-table-body .hs-body-row-hover:hover:not(.hs-selected-row) icon {
      color: #2D90EC; }
  order-list-component .hs-table-body .hs-body-row .hs-column {
    padding: 15px 20px; }
    order-list-component .hs-table-body .hs-body-row .hs-column[hs-channel="online"] {
      padding: 15px 0px 15px 15px; }
  order-list-component .hs-table-body .hs-body-row.hs-selected-row {
    color: #2D90EC;
    background-color: #FFFFFF;
    border-top: 1px solid #2D90EC;
    border-bottom: 1px solid #A4A4A4;
    font-weight: 600; }
    order-list-component .hs-table-body .hs-body-row.hs-selected-row icon {
      color: #2D90EC; }
  order-list-component .hs-table-body .hs-body-row .hs-table-cell-icon {
    vertical-align: top;
    margin-top: 1px;
    margin-left: 5px; }

.notification--fail .notification__content {
  background-color: #DD1122 !important; }

.hs-online-banner {
  margin: 0 10px 20px 10px;
  width: 100%;
  height: auto; }
  .hs-online-banner .placeholder {
    width: 100%; }

.enforce-sdx-background {
  background-image: none !important;
  background-color: #eef3f6 !important; }

.hrfc-content {
  color: #333333;
  font-size: 18px;
  font-family: "TheSans", sans-serif;
  margin-top: 96px;
  margin-bottom: 96px; }
  .hrfc-content > div:not(:first-of-type) {
    margin-top: 24px; }

.hs-combox-table {
  display: flex;
  flex-direction: column;
  flex-grow: 1; }
  .hs-combox-table .table-row {
    display: flex;
    flex-direction: row;
    padding: 8px 0;
    border-bottom: 1px solid #d6d6d6; }
    .hs-combox-table .table-row.table-header {
      color: #A4A4A4;
      padding: 10px 0; }
      .hs-combox-table .table-row.table-header a {
        display: flex;
        flex-direction: row;
        align-items: center;
        text-decoration: none; }
        .hs-combox-table .table-row.table-header a i {
          padding-right: 5px; }
    .hs-combox-table .table-row > div {
      display: flex;
      flex-direction: row;
      align-items: center; }
      .hs-combox-table .table-row > div:nth-of-type(1) {
        width: 20%; }
        [hs-device="phone"] .hs-combox-table .table-row > div:nth-of-type(1) {
          width: 45%; }
      .hs-combox-table .table-row > div:nth-of-type(2) {
        width: 40%; }
        [hs-device="phone"] .hs-combox-table .table-row > div:nth-of-type(2) {
          width: 45%; }
      .hs-combox-table .table-row > div:nth-of-type(3) {
        width: 40%;
        justify-content: flex-end; }
        [hs-device="phone"] .hs-combox-table .table-row > div:nth-of-type(3) {
          width: 10%; }
  [hs-device="phone"] .hs-combox-table .new-combox-link {
    display: none; }
  .hs-combox-table .new-combox-link-phone {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 15px 0; }
    [hs-device="desktop"] .hs-combox-table .new-combox-link-phone, [hs-device="tablet"] .hs-combox-table .new-combox-link-phone {
      display: none; }

.promo-banner {
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 30px;
  max-height: 120px; }

.flyout-menu {
  position: relative; }
  .flyout-menu .flyout {
    top: 59px;
    right: -16px; }
    .flyout-menu .flyout.flyout--list {
      width: auto; }
    .flyout-menu .flyout.show {
      display: block;
      opacity: 1; }
    .flyout-menu .flyout > .carret-flyout-menu {
      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);
      content: '';
      z-index: -1; }
    .flyout-menu .flyout li a {
      display: flex;
      white-space: nowrap; }
      .flyout-menu .flyout li a:hover {
        text-decoration: none; }
      .flyout-menu .flyout li a .icon {
        margin-left: -12px;
        margin-right: 6px; }
      .flyout-menu .flyout li a .sg-icon.icon-swap {
        font-size: 22px;
        margin-left: -13px;
        margin-right: 4px; }

.business-workplace-services-details-list {
  padding: 24px 0 24px 24px; }
  .business-workplace-services-details-list map-hs-label-value {
    display: flex;
    align-items: flex-start;
    align-content: flex-start; }
    .business-workplace-services-details-list map-hs-label-value .hs-attribute-label {
      flex: 0 0.5 auto; }
    .business-workplace-services-details-list map-hs-label-value .hs-attribute-value {
      flex: 1 0.5 3em;
      text-align: left;
      padding: 1px 0 0 3px; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.hs-services .hs-service {
  background-color: #eef3f6;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 15px; }

.hs-checkbox {
  flex-wrap: nowrap;
  display: flex; }
  .hs-checkbox label {
    font-weight: normal;
    padding-left: 10px;
    padding-top: 2px; }

select {
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #A4A4A4;
  background-color: transparent; }
  select::-ms-expand {
    margin-left: 5px; }

/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
@font-face {
  font-family: 'TheSaB5';
  src: url("../fonts/sans/TheSaB5_.eot") format("eot"), url("../fonts/sans/TheSaB5_.woff2") format("woff2"), url("../fonts/sans/TheSaB5_.woff") format("woff"), url("../fonts/sans/TheSaB5_.ttf") format("ttf"), url("../fonts/sans/TheSaB5_.svg") format("svg"); }

@font-face {
  font-family: 'TheSaB3';
  src: url("../fonts/sans/TheSaB3_.eot") format("eot"), url("../fonts/sans/TheSaB3_.woff2") format("woff2"), url("../fonts/sans/TheSaB3_.woff") format("woff"), url("../fonts/sans/TheSaB3_.ttf") format("ttf"), url("../fonts/sans/TheSaB3_.svg") format("svg"); }

[hs-device="desktop"] body {
  color: #333333;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.3em;
  height: 100%; }

[hs-device="desktop"].fonts-loaded body {
  font-family: 'TheSaB5', 'Trebuchet MS', Arial, Helvetica, sans-serif; }
  [hs-device="desktop"].fonts-loaded body h1, [hs-device="desktop"].fonts-loaded body h2, [hs-device="desktop"].fonts-loaded body h3, [hs-device="desktop"].fonts-loaded body .hs-line .hs-line-link, .hs-line [hs-device="desktop"].fonts-loaded body .hs-line-link, [hs-device="desktop"].fonts-loaded body h4, [hs-device="desktop"].fonts-loaded body h5 {
    font-family: 'TheSaB3', 'Trebuchet MS', Arial, Helvetica, sans-serif; }

[hs-device="desktop"] h1, [hs-device="desktop"] h2, [hs-device="desktop"] h3, [hs-device="desktop"] .hs-line .hs-line-link, .hs-line [hs-device="desktop"] .hs-line-link, [hs-device="desktop"] h4, [hs-device="desktop"] h5 {
  line-height: 1.2em; }

[hs-device="desktop"] h1 {
  font-size: 28px;
  margin-bottom: 9.33333px; }

[hs-device="desktop"] h2 {
  font-size: 20px;
  margin-bottom: 6.66667px; }

[hs-device="desktop"] h3, [hs-device="desktop"] .hs-line .hs-line-link, .hs-line [hs-device="desktop"] .hs-line-link {
  font-size: 17px;
  margin-bottom: 17px; }

[hs-device="desktop"] h4 {
  font-size: 15px;
  margin-bottom: 7.5px; }

[hs-device="desktop"] .hs-icon-small {
  font-size: 18px; }

[hs-device="desktop"] .hs-icon-xsmall {
  font-size: 12px; }

[hs-device="desktop"] .hs-icon-font-size-small {
  font-size: 13px;
  vertical-align: initial; }

[hs-device="desktop"] .hs-icon-smallmedium {
  font-size: 22px; }

[hs-device="desktop"] .hs-icon-medium {
  font-size: 26px; }

[hs-device="desktop"] .hs-icon-large {
  font-size: 40px; }

[hs-device="desktop"] .hs-icon-xlarge {
  font-size: 60px; }

[hs-device="desktop"] .overview-list {
  margin-bottom: 5px; }
  [hs-device="desktop"] .overview-list h4 {
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: bold; }
  [hs-device="desktop"] .overview-list.inverted {
    margin-left: 1px; }
    [hs-device="desktop"] .overview-list.inverted h4 {
      color: #A4A4A4;
      margin-bottom: 5px; }
    [hs-device="desktop"] .overview-list.inverted li {
      margin-top: 3px; }
      [hs-device="desktop"] .overview-list.inverted li span {
        font-size: 12px; }

[hs-device="tablet"] body {
  color: #333333;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.3em;
  height: 100%; }

[hs-device="tablet"].fonts-loaded body {
  font-family: 'TheSaB5', 'Trebuchet MS', Arial, Helvetica, sans-serif; }
  [hs-device="tablet"].fonts-loaded body h1, [hs-device="tablet"].fonts-loaded body h2, [hs-device="tablet"].fonts-loaded body h3, [hs-device="tablet"].fonts-loaded body .hs-line .hs-line-link, .hs-line [hs-device="tablet"].fonts-loaded body .hs-line-link, [hs-device="tablet"].fonts-loaded body h4, [hs-device="tablet"].fonts-loaded body h5 {
    font-family: 'TheSaB3', 'Trebuchet MS', Arial, Helvetica, sans-serif; }

[hs-device="tablet"] h1, [hs-device="tablet"] h2, [hs-device="tablet"] h3, [hs-device="tablet"] .hs-line .hs-line-link, .hs-line [hs-device="tablet"] .hs-line-link, [hs-device="tablet"] h4, [hs-device="tablet"] h5 {
  line-height: 1.2em; }

[hs-device="tablet"] h1 {
  font-size: 28px;
  margin-bottom: 9.33333px; }

[hs-device="tablet"] h2 {
  font-size: 20px;
  margin-bottom: 6.66667px; }

[hs-device="tablet"] h3, [hs-device="tablet"] .hs-line .hs-line-link, .hs-line [hs-device="tablet"] .hs-line-link {
  font-size: 17px;
  margin-bottom: 17px; }

[hs-device="tablet"] h4 {
  font-size: 15px;
  margin-bottom: 7.5px; }

[hs-device="tablet"] .hs-icon-small {
  font-size: 16px; }

[hs-device="tablet"] .hs-icon-xsmall {
  font-size: 10px; }

[hs-device="tablet"] .hs-icon-font-size-small {
  font-size: 15px;
  vertical-align: initial; }

[hs-device="tablet"] .hs-icon-smallmedium {
  font-size: 22px; }

[hs-device="tablet"] .hs-icon-medium {
  font-size: 23px; }

[hs-device="tablet"] .hs-icon-large {
  font-size: 30px; }

[hs-device="tablet"] .hs-icon-xlarge {
  font-size: 50px; }

[hs-device="tablet"] .overview-list {
  margin-bottom: 5px; }
  [hs-device="tablet"] .overview-list h4 {
    font-size: 15px;
    margin-bottom: 8px;
    font-weight: bold; }
  [hs-device="tablet"] .overview-list.inverted {
    margin-left: 1px; }
    [hs-device="tablet"] .overview-list.inverted h4 {
      color: #A4A4A4;
      margin-bottom: 5px; }
    [hs-device="tablet"] .overview-list.inverted li {
      margin-top: 3px; }
      [hs-device="tablet"] .overview-list.inverted li span {
        font-size: 12px; }

[hs-device="phone"] body {
  color: #333333;
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.3em;
  height: 100%; }

[hs-device="phone"].fonts-loaded body {
  font-family: 'TheSaB5', 'Trebuchet MS', Arial, Helvetica, sans-serif; }
  [hs-device="phone"].fonts-loaded body h1, [hs-device="phone"].fonts-loaded body h2, [hs-device="phone"].fonts-loaded body h3, [hs-device="phone"].fonts-loaded body .hs-line .hs-line-link, .hs-line [hs-device="phone"].fonts-loaded body .hs-line-link, [hs-device="phone"].fonts-loaded body h4, [hs-device="phone"].fonts-loaded body h5 {
    font-family: 'TheSaB3', 'Trebuchet MS', Arial, Helvetica, sans-serif; }

[hs-device="phone"] h1, [hs-device="phone"] h2, [hs-device="phone"] h3, [hs-device="phone"] .hs-line .hs-line-link, .hs-line [hs-device="phone"] .hs-line-link, [hs-device="phone"] h4, [hs-device="phone"] h5 {
  line-height: 1.2em; }

[hs-device="phone"] h1 {
  font-size: 21px;
  margin-bottom: 7px; }

[hs-device="phone"] h2 {
  font-size: 18px;
  margin-bottom: 6px; }

[hs-device="phone"] h3, [hs-device="phone"] .hs-line .hs-line-link, .hs-line [hs-device="phone"] .hs-line-link {
  font-size: 16px;
  margin-bottom: 16px; }

[hs-device="phone"] h4 {
  font-size: 15px;
  margin-bottom: 7.5px; }

[hs-device="phone"] .hs-icon-small {
  font-size: 16px; }

[hs-device="phone"] .hs-icon-xsmall {
  font-size: 10px; }

[hs-device="phone"] .hs-icon-font-size-small {
  font-size: 15px;
  vertical-align: initial; }

[hs-device="phone"] .hs-icon-smallmedium {
  font-size: 22px; }

[hs-device="phone"] .hs-icon-medium {
  font-size: 23px; }

[hs-device="phone"] .hs-icon-large {
  font-size: 30px; }

[hs-device="phone"] .hs-icon-xlarge {
  font-size: 40px; }

[hs-device="phone"] .overview-list {
  margin-bottom: 5px; }
  [hs-device="phone"] .overview-list h4 {
    font-size: 15px;
    margin-bottom: 8px;
    font-weight: bold; }
  [hs-device="phone"] .overview-list.inverted {
    margin-left: 1px; }
    [hs-device="phone"] .overview-list.inverted h4 {
      color: #A4A4A4;
      margin-bottom: 5px; }
    [hs-device="phone"] .overview-list.inverted li {
      margin-top: 3px; }
      [hs-device="phone"] .overview-list.inverted li span {
        font-size: 12px; }

.hs-text-max-width {
  max-width: 540px; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* EXTENSIONS */
/************************************************************/
.hs-main-content {
  margin: 0 auto; }
  .hs-main-content[hs-device="desktop"][hs-channel="online"] {
    width: 980px;
    min-width: 980px;
    padding-bottom: 80px; }
  .hs-main-content[hs-device="desktop"][hs-channel="ursa"] {
    width: 980px;
    min-width: 980px; }
  .hs-main-content[hs-device="desktop"][hs-channel="csu"] {
    min-width: 1200px; }

/************************************************************/
/* CLASSES */
/************************************************************/
.hs-main-content {
  max-width: 96%; }
  .hs-main-content[hs-device="phone"] {
    max-width: 100%; }

.hs-homescreen {
  padding: 15px 0 0 0; }

#hs-global-notification-header > div {
  margin-top: 8px; }

/************************************************************/
/* OIL-UI */
/************************************************************/
/************************************************************/
/* BREAKPOINTS */
/************************************************************/
/************************************************************/
/* SDX COLORS */
/************************************************************/
/************************************************************/
/* COLORS */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* TOGGLES */
/************************************************************/
.hs-hide {
  display: none; }

/************************************************************/
/* POINTER */
/************************************************************/
.hs-pointer, .hs-accordion .hs-accordion-footer .hs-accordion-footer-icon, .hs-button-primary, .hs-button-secondary, .hs-button-confirm, .hs-button-outline, .hs-collapsible .hs-collapsible-header, .hs-collapsible .hs-collapsible-icon, .hs-expandable .hs-expandable-footer, .hs-hint-incident, .hs-hint-change, .hs-hint-info, .hs-hint-system, .hs-line .hs-line-link, .hs-line .hs-line-collapse-icon, .hs-additional-lines .hs-additional-lines-toggle, .hs-product-add, .hs-product {
  cursor: pointer; }

/************************************************************/
/* SPACING */
/************************************************************/
.hs-margin-right-xsmall {
  margin-right: 5px; }

.hs-margin-left-xsmall {
  margin-left: 5px; }

.hs-margin-right-small {
  margin-right: 20px; }

.hs-margin-left-small {
  margin-left: 20px; }

.hs-margin-top-small {
  margin-top: 10px; }

.hs-margin-bottom-small {
  margin-bottom: 10px; }

.hs-margin-bottom-medium {
  margin-bottom: 20px; }

.hs-margin-top-large {
  margin-top: 50px; }

.hs-margin-bottom-large {
  margin-bottom: 30px; }
  .hs-margin-bottom-large[hs-channel="csu"] {
    margin-bottom: 20px; }

.hs-margin-top-medium {
  margin-top: 20px; }

.hs-padding-bottom-small {
  padding-bottom: 5px; }

.hs-padding-bottom-large {
  padding-bottom: 15px; }

.hs-padding-top-small {
  padding-top: 5px; }

.hs-padding-top-large {
  padding-top: 15px; }

.hs-no-margin {
  margin: 0 !important; }

.hs-padding-left-medium {
  padding-left: 15px; }

.hs-padding-right-15 {
  padding-right: 15px; }

.hs-table-cell-icon-only {
  margin-top: -5px;
  margin-bottom: -5px; }

/************************************************************/
/* FLOATS & ALIGNMENTS */
/************************************************************/
.hs-float-left {
  float: left; }

.hs-float-right {
  float: right; }

.hs-clearfix {
  clear: both; }
  .hs-clearfix:after {
    content: "";
    display: table;
    clear: both; }

.hs-align-left {
  text-align: left; }

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

.hs-text-overflow-ellipsis {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.hs-text-overflow-word-break {
  word-break: break-all; }

.hs-align-center {
  margin: 0 auto !important;
  display: block !important; }

/************************************************************/
/* DISPLAY */
/************************************************************/
.hs-max-width {
  width: 100%; }

.hs-display-flex {
  display: flex; }

.hs-display-inline-block {
  display: inline-block; }

/************************************************************/
/* COLOR CLASSES */
/************************************************************/
.hs-color-green {
  color: #25b252; }

.hs-color-orange {
  color: #ffcc00; }

.hs-color-red {
  color: #dd1122; }

.hs-color-grey {
  color: #666666; }

.hs-color-mid-grey {
  color: #A4A4A4; }

.hs-color-darkblue {
  color: #001155; }

.hs-color-sdx-orange {
  color: #e86416; }

/************************************************************/
/* BORDERS */
/************************************************************/
.border-top-grey, .hs-bill.hs-bill-header, .hs-bill-header.hs-bill-warning {
  border-top: 1px solid #A4A4A4; }

.border-bottom-grey, .hs-bill-group:not(:last-of-type), .flexbox .hs-product-drawer, .flexboxtweener .hs-product-drawer {
  border-bottom: 1px solid #A4A4A4; }

.border-bottom-lightgrey, .hs-table-body .hs-body-row, order-list-component .hs-table-body .hs-body-row {
  border-bottom: 1px solid #eef3f6; }

body[hs-channel="csu"], body[hs-channel="dmc"], body[hs-channel="dis"], .sg-content-page[hs-channel="csu"], .sg-content-page[hs-channel="dmc"], .sg-content-page[hs-channel="dis"] {
  background-image: url("../images/background.jpg");
  background-repeat: repeat-y; }

html, body {
  padding: 0;
  margin: 0; }

html:not([hs-channel="csu"]) {
  height: 100%; }

body {
  background-color: white; }
  body:not([hs-channel="csu"]) {
    min-height: 100%; }

.sg-content-page[hs-device="desktop"][hs-channel="online"] {
  min-height: 100%; }

* {
  box-sizing: border-box; }

*:focus {
  outline: none !important; }

a {
  color: #1781e3;
  text-decoration: none; }
  a.disabled {
    color: #666666; }
    a.disabled:hover, a.disabled:focus {
      text-decoration: none;
      pointer-events: none;
      cursor: default;
      color: #666666; }
  a:hover {
    text-decoration: underline;
    cursor: pointer; }
  a.hs-arrow:before, a.hs-arrow-secondary:before {
    content: ">\00a0"; }
  a.hs-arrow-back:before {
    content: "<\00a0"; }
  a.hs-arrow-secondary {
    color: #666666; }

ul {
  list-style: none;
  padding: 0; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.flexbox [hs-layout="row"], .flexbox [hs-layout="row-reverse-desktop"], .flexbox [hs-layout="row-no-wrap"], .flexboxtweener [hs-layout="row"], .flexboxtweener [hs-layout="row-reverse-desktop"], .flexboxtweener [hs-layout="row-no-wrap"] {
  display: flex; }
  .flexbox [hs-padding][hs-layout="row"], .flexbox [hs-padding][hs-layout="row-reverse-desktop"], .flexbox [hs-padding][hs-layout="row-no-wrap"], .flexboxtweener [hs-padding][hs-layout="row"], .flexboxtweener [hs-padding][hs-layout="row-reverse-desktop"], .flexboxtweener [hs-padding][hs-layout="row-no-wrap"] {
    margin: 0 -10px; }
    .flexbox [hs-padding][hs-layout="row"] > [hs-column], .flexbox [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexbox .flexboxtweener [hs-padding][hs-layout="row"] > [hs-column], .flexbox .flexboxtweener [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexbox [hs-padding][hs-layout="row-no-wrap"] > [hs-column], .flexbox .flexboxtweener [hs-padding][hs-layout="row-no-wrap"] > [hs-column], .flexboxtweener .flexbox [hs-padding][hs-layout="row"] > [hs-column], .flexboxtweener .flexbox [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexboxtweener [hs-padding][hs-layout="row"] > [hs-column], .flexboxtweener [hs-padding][hs-layout="row-reverse-desktop"] > [hs-column], .flexboxtweener .flexbox [hs-padding][hs-layout="row-no-wrap"] > [hs-column], .flexboxtweener [hs-padding][hs-layout="row-no-wrap"] > [hs-column] {
      padding: 0 10px; }

.flexbox [hs-layout="row"], .flexbox [hs-layout="row-reverse-desktop"], .flexboxtweener [hs-layout="row"], .flexboxtweener [hs-layout="row-reverse-desktop"] {
  flex-wrap: wrap; }

.flexbox [hs-layout="row-no-wrap"], .flexboxtweener [hs-layout="row-no-wrap"] {
  flex-wrap: nowrap; }

.flexbox *, .flexboxtweener * {
  -ms-flex-negative: 1; }

.flexbox [hs-layout="row"], .flexboxtweener [hs-layout="row"] {
  flex-direction: row; }

.flexbox [hs-layout="row-no-wrap"], .flexboxtweener [hs-layout="row-no-wrap"] {
  flex-direction: row; }

.flexbox [hs-layout="row-reverse-desktop"][hs-padding], .flexboxtweener [hs-layout="row-reverse-desktop"][hs-padding] {
  margin: 0 -10px; }
  .flexbox [hs-layout="row-reverse-desktop"][hs-padding] > [hs-column], .flexboxtweener [hs-layout="row-reverse-desktop"][hs-padding] > [hs-column] {
    padding: 0 10px; }

.flexbox [hs-layout="row-reverse-desktop"][hs-device="phone"], .flexboxtweener [hs-layout="row-reverse-desktop"][hs-device="phone"] {
  flex-direction: row; }

.flexbox [hs-layout="row-reverse-desktop"]:not([hs-device="phone"]), .flexboxtweener [hs-layout="row-reverse-desktop"]:not([hs-device="phone"]) {
  flex-direction: row-reverse; }

.flexbox [hs-layout="column"], .flexboxtweener [hs-layout="column"] {
  flex-direction: column;
  flex-wrap: wrap;
  display: flex; }

.flexbox [hs-align="right"], .flexboxtweener [hs-align="right"] {
  justify-content: flex-end; }

.flexbox [hs-valign="center"], .flexboxtweener [hs-valign="center"] {
  align-items: center; }

.flexbox [hs-valign="top"], .flexboxtweener [hs-valign="top"] {
  align-items: baseline; }

.flexbox [hs-column="0"], .flexboxtweener [hs-column="0"] {
  flex: 1 0%;
  max-width: 0%;
  width: 0%; }

.flexbox [hs-column="5"], .flexboxtweener [hs-column="5"] {
  flex: 1 5%;
  max-width: 5%;
  width: 5%; }

.flexbox [hs-column="10"], .flexboxtweener [hs-column="10"] {
  flex: 1 10%;
  max-width: 10%;
  width: 10%; }

.flexbox [hs-column="12"], .flexboxtweener [hs-column="12"] {
  flex: 1 12%;
  max-width: 12%;
  width: 12%; }

.flexbox [hs-column="12.5"], .flexboxtweener [hs-column="12.5"] {
  flex: 1 12.5%;
  max-width: 12.5%;
  width: 12.5%; }

.flexbox [hs-column="14"], .flexboxtweener [hs-column="14"] {
  flex: 1 14%;
  max-width: 14%;
  width: 14%; }

.flexbox [hs-column="15"], .flexboxtweener [hs-column="15"] {
  flex: 1 15%;
  max-width: 15%;
  width: 15%; }

.flexbox [hs-column="16"], .flexboxtweener [hs-column="16"] {
  flex: 1 16%;
  max-width: 16%;
  width: 16%; }

.flexbox [hs-column="16.66"], .flexboxtweener [hs-column="16.66"] {
  flex: 1 16.66%;
  max-width: 16.66%;
  width: 16.66%; }

.flexbox [hs-column="20"], .flexboxtweener [hs-column="20"] {
  flex: 1 20%;
  max-width: 20%;
  width: 20%; }

.flexbox [hs-column="21"], .flexboxtweener [hs-column="21"] {
  flex: 1 21%;
  max-width: 21%;
  width: 21%; }

.flexbox [hs-column="25"], .flexboxtweener [hs-column="25"] {
  flex: 1 25%;
  max-width: 25%;
  width: 25%; }

.flexbox [hs-column="28"], .flexboxtweener [hs-column="28"] {
  flex: 1 28%;
  max-width: 28%;
  width: 28%; }

.flexbox [hs-column="30"], .flexboxtweener [hs-column="30"] {
  flex: 1 30%;
  max-width: 30%;
  width: 30%; }

.flexbox [hs-column="33.33"], .flexboxtweener [hs-column="33.33"] {
  flex: 1 33.33%;
  max-width: 33.33%;
  width: 33.33%; }

.flexbox [hs-column="35"], .flexboxtweener [hs-column="35"] {
  flex: 1 35%;
  max-width: 35%;
  width: 35%; }

.flexbox [hs-column="36"], .flexboxtweener [hs-column="36"] {
  flex: 1 36%;
  max-width: 36%;
  width: 36%; }

.flexbox [hs-column="40"], .flexboxtweener [hs-column="40"] {
  flex: 1 40%;
  max-width: 40%;
  width: 40%; }

.flexbox [hs-column="50"], .flexboxtweener [hs-column="50"] {
  flex: 1 50%;
  max-width: 50%;
  width: 50%; }

.flexbox [hs-column="60"], .flexboxtweener [hs-column="60"] {
  flex: 1 60%;
  max-width: 60%;
  width: 60%; }

.flexbox [hs-column="64"], .flexboxtweener [hs-column="64"] {
  flex: 1 64%;
  max-width: 64%;
  width: 64%; }

.flexbox [hs-column="65"], .flexboxtweener [hs-column="65"] {
  flex: 1 65%;
  max-width: 65%;
  width: 65%; }

.flexbox [hs-column="70"], .flexboxtweener [hs-column="70"] {
  flex: 1 70%;
  max-width: 70%;
  width: 70%; }

.flexbox [hs-column="75"], .flexboxtweener [hs-column="75"] {
  flex: 1 75%;
  max-width: 75%;
  width: 75%; }

.flexbox [hs-column="80"], .flexboxtweener [hs-column="80"] {
  flex: 1 80%;
  max-width: 80%;
  width: 80%; }

.flexbox [hs-column="85"], .flexboxtweener [hs-column="85"] {
  flex: 1 85%;
  max-width: 85%;
  width: 85%; }

.flexbox [hs-column="90"], .flexboxtweener [hs-column="90"] {
  flex: 1 90%;
  max-width: 90%;
  width: 90%; }

.flexbox [hs-column="95"], .flexboxtweener [hs-column="95"] {
  flex: 1 95%;
  max-width: 95%;
  width: 95%; }

.flexbox [hs-column="100"], .flexboxtweener [hs-column="100"] {
  flex: 1 100%;
  max-width: 100%;
  width: 100%; }

.flexbox [hs-grow="0"], .flexboxtweener [hs-grow="0"] {
  flex-grow: 0; }

.flexbox [hs-grow="1"], .flexboxtweener [hs-grow="1"] {
  flex-grow: 1; }

.flexbox [hs-grow="2"], .flexboxtweener [hs-grow="2"] {
  flex-grow: 2; }

.flexbox [hs-grow="3"], .flexboxtweener [hs-grow="3"] {
  flex-grow: 3; }

.flexbox [hs-hide], .flexboxtweener [hs-hide] {
  display: none !important; }

.flexbox [hs-order="0"], .flexboxtweener [hs-order="0"] {
  order: 0; }

.flexbox [hs-order="1"], .flexboxtweener [hs-order="1"] {
  order: 1; }

.flexbox [hs-order="2"], .flexboxtweener [hs-order="2"] {
  order: 2; }

.flexbox [hs-order="3"], .flexboxtweener [hs-order="3"] {
  order: 3; }

.flexbox [hs-order="4"], .flexboxtweener [hs-order="4"] {
  order: 4; }

.flexbox [hs-order="5"], .flexboxtweener [hs-order="5"] {
  order: 5; }

.flexbox [hs-order="6"], .flexboxtweener [hs-order="6"] {
  order: 6; }

.flexbox [hs-order="7"], .flexboxtweener [hs-order="7"] {
  order: 7; }

.flexbox [hs-order="8"], .flexboxtweener [hs-order="8"] {
  order: 8; }

.flexbox [hs-order="9"], .flexboxtweener [hs-order="9"] {
  order: 9; }

.flexbox [hs-display-flex], .flexboxtweener [hs-display-flex] {
  display: flex; }

.flexbox [hs-flex], .flexboxtweener [hs-flex] {
  flex-grow: 1; }

/************************************************************/
/* OIL-UI */
/************************************************************/
/************************************************************/
/* BREAKPOINTS */
/************************************************************/
/************************************************************/
/* SDX COLORS */
/************************************************************/
/************************************************************/
/* COLORS */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* TOGGLES */
/************************************************************/
.hs-hide {
  display: none; }

/************************************************************/
/* POINTER */
/************************************************************/
.hs-pointer, .hs-accordion .hs-accordion-footer .hs-accordion-footer-icon, .hs-button-primary, .hs-button-secondary, .hs-button-confirm, .hs-button-outline, .hs-collapsible .hs-collapsible-header, .hs-collapsible .hs-collapsible-icon, .hs-expandable .hs-expandable-footer, .hs-hint-incident, .hs-hint-change, .hs-hint-info, .hs-hint-system, .hs-line .hs-line-link, .hs-line .hs-line-collapse-icon, .hs-additional-lines .hs-additional-lines-toggle, .hs-product-add, .hs-product {
  cursor: pointer; }

/************************************************************/
/* SPACING */
/************************************************************/
.hs-margin-right-xsmall {
  margin-right: 5px; }

.hs-margin-left-xsmall {
  margin-left: 5px; }

.hs-margin-right-small {
  margin-right: 20px; }

.hs-margin-left-small {
  margin-left: 20px; }

.hs-margin-top-small {
  margin-top: 10px; }

.hs-margin-bottom-small {
  margin-bottom: 10px; }

.hs-margin-bottom-medium {
  margin-bottom: 20px; }

.hs-margin-top-large {
  margin-top: 50px; }

.hs-margin-bottom-large {
  margin-bottom: 30px; }
  .hs-margin-bottom-large[hs-channel="csu"] {
    margin-bottom: 20px; }

.hs-margin-top-medium {
  margin-top: 20px; }

.hs-padding-bottom-small {
  padding-bottom: 5px; }

.hs-padding-bottom-large {
  padding-bottom: 15px; }

.hs-padding-top-small {
  padding-top: 5px; }

.hs-padding-top-large {
  padding-top: 15px; }

.hs-no-margin {
  margin: 0 !important; }

.hs-padding-left-medium {
  padding-left: 15px; }

.hs-padding-right-15 {
  padding-right: 15px; }

.hs-table-cell-icon-only {
  margin-top: -5px;
  margin-bottom: -5px; }

/************************************************************/
/* FLOATS & ALIGNMENTS */
/************************************************************/
.hs-float-left {
  float: left; }

.hs-float-right {
  float: right; }

.hs-clearfix {
  clear: both; }
  .hs-clearfix:after {
    content: "";
    display: table;
    clear: both; }

.hs-align-left {
  text-align: left; }

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

.hs-text-overflow-ellipsis {
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; }

.hs-text-overflow-word-break {
  word-break: break-all; }

.hs-align-center {
  margin: 0 auto !important;
  display: block !important; }

/************************************************************/
/* DISPLAY */
/************************************************************/
.hs-max-width {
  width: 100%; }

.hs-display-flex {
  display: flex; }

.hs-display-inline-block {
  display: inline-block; }

/************************************************************/
/* COLOR CLASSES */
/************************************************************/
.hs-color-green {
  color: #25b252; }

.hs-color-orange {
  color: #ffcc00; }

.hs-color-red {
  color: #dd1122; }

.hs-color-grey {
  color: #666666; }

.hs-color-mid-grey {
  color: #A4A4A4; }

.hs-color-darkblue {
  color: #001155; }

.hs-color-sdx-orange {
  color: #e86416; }

/************************************************************/
/* BORDERS */
/************************************************************/
.border-top-grey, .hs-bill.hs-bill-header, .hs-bill-header.hs-bill-warning {
  border-top: 1px solid #A4A4A4; }

.border-bottom-grey, .hs-bill-group:not(:last-of-type), .flexbox .hs-product-drawer, .flexboxtweener .hs-product-drawer {
  border-bottom: 1px solid #A4A4A4; }

.border-bottom-lightgrey, .hs-table-body .hs-body-row, order-list-component .hs-table-body .hs-body-row {
  border-bottom: 1px solid #eef3f6; }

body[hs-channel="csu"], body[hs-channel="dmc"], body[hs-channel="dis"], .sg-content-page[hs-channel="csu"], .sg-content-page[hs-channel="dmc"], .sg-content-page[hs-channel="dis"] {
  background-image: url("../images/background.jpg");
  background-repeat: repeat-y; }

html, body {
  padding: 0;
  margin: 0; }

html:not([hs-channel="csu"]) {
  height: 100%; }

body {
  background-color: white; }
  body:not([hs-channel="csu"]) {
    min-height: 100%; }

.sg-content-page[hs-device="desktop"][hs-channel="online"] {
  min-height: 100%; }

* {
  box-sizing: border-box; }

*:focus {
  outline: none !important; }

a {
  color: #1781e3;
  text-decoration: none; }
  a.disabled {
    color: #666666; }
    a.disabled:hover, a.disabled:focus {
      text-decoration: none;
      pointer-events: none;
      cursor: default;
      color: #666666; }
  a:hover {
    text-decoration: underline;
    cursor: pointer; }
  a.hs-arrow:before, a.hs-arrow-secondary:before {
    content: ">\00a0"; }
  a.hs-arrow-back:before {
    content: "<\00a0"; }
  a.hs-arrow-secondary {
    color: #666666; }

ul {
  list-style: none;
  padding: 0; }

/************************************************************/
/* VARIABLES */
/************************************************************/
/************************************************************/
/* MIXINS */
/************************************************************/
/************************************************************/
/* CLASSES */
/************************************************************/
.no-flexbox:not(.flexboxtweener) [hs-layout="row"][hs-padding] {
  margin: 0 -10px; }
  .no-flexbox:not(.flexboxtweener) [hs-layout="row"][hs-padding] > [hs-column] {
    padding: 0 10px; }

.no-flexbox:not(.flexboxtweener) [hs-layout="row"]:before {
  display: table;
  content: " "; }

.no-flexbox:not(.flexboxtweener) [hs-layout="row"]:after {
  display: table;
  content: " ";
  clear: both; }

.no-flexbox:not(.flexboxtweener) [hs-column="5"] {
  float: left;
  position: relative;
  width: 5%; }

.no-flexbox:not(.flexboxtweener) [hs-column="10"] {
  float: left;
  position: relative;
  width: 10%; }

.no-flexbox:not(.flexboxtweener) [hs-column="12.5"] {
  float: left;
  position: relative;
  width: 12.5%; }

.no-flexbox:not(.flexboxtweener) [hs-column="15"] {
  float: left;
  position: relative;
  width: 15%; }

.no-flexbox:not(.flexboxtweener) [hs-column="16.66"] {
  float: left;
  position: relative;
  width: 16.66%; }

.no-flexbox:not(.flexboxtweener) [hs-column="20"] {
  float: left;
  position: relative;
  width: 20%; }

.no-flexbox:not(.flexboxtweener) [hs-column="25"] {
  float: left;
  position: relative;
  width: 25%; }

.no-flexbox:not(.flexboxtweener) [hs-column="30"] {
  float: left;
  position: relative;
  width: 30%; }

.no-flexbox:not(.flexboxtweener) [hs-column="33.33"] {
  float: left;
  position: relative;
  width: 33.33%; }

.no-flexbox:not(.flexboxtweener) [hs-column="35"] {
  float: left;
  position: relative;
  width: 35%; }

.no-flexbox:not(.flexboxtweener) [hs-column="40"] {
  float: left;
  position: relative;
  width: 40%; }

.no-flexbox:not(.flexboxtweener) [hs-column="50"] {
  float: left;
  position: relative;
  width: 50%; }

.no-flexbox:not(.flexboxtweener) [hs-column="60"] {
  float: left;
  position: relative;
  width: 60%; }

.no-flexbox:not(.flexboxtweener) [hs-column="70"] {
  float: left;
  position: relative;
  width: 70%; }

.no-flexbox:not(.flexboxtweener) [hs-column="75"] {
  float: left;
  position: relative;
  width: 75%; }

.no-flexbox:not(.flexboxtweener) [hs-column="80"] {
  float: left;
  position: relative;
  width: 80%; }

.no-flexbox:not(.flexboxtweener) [hs-column="85"] {
  float: left;
  position: relative;
  width: 85%; }

.no-flexbox:not(.flexboxtweener) [hs-column="90"] {
  float: left;
  position: relative;
  width: 90%; }

.no-flexbox:not(.flexboxtweener) [hs-column="95"] {
  float: left;
  position: relative;
  width: 95%; }

.no-flexbox:not(.flexboxtweener) [hs-column="100"] {
  float: left;
  position: relative;
  width: 100%; }

.no-flexbox:not(.flexboxtweener) [hs-hide] {
  display: none; }

.sg-btn-transparent {
  border: 0 none;
  box-shadow: none;
  background: transparent; }

.sg-dropdown-menu {
  display: none;
  padding: 7px 0 5px 0;
  margin: 0;
  list-style: none;
  text-align: left;
  background-clip: padding-box;
  box-sizing: border-box;
  color: #001155; }
  .open .sg-dropdown-menu {
    display: block; }
  .sg-dropdown-menu .divider {
    height: 1px;
    min-height: 1px;
    margin: 7px 0;
    overflow: hidden;
    background-color: #e5e5e5; }

.sg-dropdown-menu > li > a {
  display: block;
  clear: both;
  font-weight: normal;
  color: #001155;
  white-space: nowrap; }
  .sg-dropdown-menu > li > a:hover, .sg-dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #2d90ec; }

.sg-dropdown-menu > .active > a, .sg-dropdown-menu > .active > a:hover, .sg-dropdown-menu > .active > a:focus {
  text-decoration: none;
  outline: 0; }

.sg-dropdown-menu > .disabled > a:hover, .sg-dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed; }

.sg-dropdown-menu-group {
  display: inline-block;
  min-width: 160px;
  border: 1px solid transparent; }
  .open.sg-dropdown-menu-group {
    background-color: white;
    border-color: #f4f4f4;
    border-radius: 6px 6px 0 0;
    box-shadow: #d9d9d9 0 3px 6px;
    z-index: 99; }
  .sg-dropdown-menu-group ul > li:not(.divider) {
    padding: 2px 28px 2px 10px; }

.sg-dropdown-menu-group.sg-dropdown-menu-group-narrow {
  min-width: 50px; }
  .sg-dropdown-menu-group.sg-dropdown-menu-group-narrow .sg-dropdown-menu li {
    padding: 0; }
  .sg-dropdown-menu-group.sg-dropdown-menu-group-narrow ul > li > a {
    padding: 3px 7px; }

.sg-dropdown-menu-group .sg-dropdown-toggle {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  padding-top: 3px; }

.sg-dropdown-menu-group .sg-dropdown-toggle .sg-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  margin-right: -5px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent; }

.sg-dropdown-menu-group.open .sg-caret {
  border-top: 0;
  border-bottom: 4px solid black; }

/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
.sg-btn-transparent {
  border: 0 none;
  box-shadow: none;
  background: transparent; }

.sg-dropdown-menu {
  display: none;
  padding: 7px 0 5px 0;
  margin: 0;
  list-style: none;
  text-align: left;
  background-clip: padding-box;
  box-sizing: border-box;
  color: #001155; }
  .open .sg-dropdown-menu {
    display: block; }
  .sg-dropdown-menu .divider {
    height: 1px;
    min-height: 1px;
    margin: 7px 0;
    overflow: hidden;
    background-color: #e5e5e5; }

.sg-dropdown-menu > li > a {
  display: block;
  clear: both;
  font-weight: normal;
  color: #001155;
  white-space: nowrap; }
  .sg-dropdown-menu > li > a:hover, .sg-dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #2d90ec; }

.sg-dropdown-menu > .active > a, .sg-dropdown-menu > .active > a:hover, .sg-dropdown-menu > .active > a:focus {
  text-decoration: none;
  outline: 0; }

.sg-dropdown-menu > .disabled > a:hover, .sg-dropdown-menu > .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed; }

.sg-dropdown-menu-group {
  display: inline-block;
  min-width: 160px;
  border: 1px solid transparent; }
  .open.sg-dropdown-menu-group {
    background-color: white;
    border-color: #f4f4f4;
    border-radius: 6px 6px 0 0;
    box-shadow: #d9d9d9 0 3px 6px;
    z-index: 99; }
  .sg-dropdown-menu-group ul > li:not(.divider) {
    padding: 2px 28px 2px 10px; }

.sg-dropdown-menu-group.sg-dropdown-menu-group-narrow {
  min-width: 50px; }
  .sg-dropdown-menu-group.sg-dropdown-menu-group-narrow .sg-dropdown-menu li {
    padding: 0; }
  .sg-dropdown-menu-group.sg-dropdown-menu-group-narrow ul > li > a {
    padding: 3px 7px; }

.sg-dropdown-menu-group .sg-dropdown-toggle {
  margin: 0;
  outline: 0;
  box-sizing: border-box;
  padding-top: 3px; }

.sg-dropdown-menu-group .sg-dropdown-toggle .sg-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  margin-right: -5px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent; }

.sg-dropdown-menu-group.open .sg-caret {
  border-top: 0;
  border-bottom: 4px solid black; }

html[lang="de"] [lang="fr"], html[lang="de"] [lang="it"], html[lang="de"] [lang="en"] {
  display: none !important; }

html[lang="fr"] [lang="de"], html[lang="fr"] [lang="it"], html[lang="fr"] [lang="en"] {
  display: none !important; }

html[lang="it"] [lang="de"], html[lang="it"] [lang="fr"], html[lang="it"] [lang="en"] {
  display: none !important; }

html[lang="en"] [lang="de"], html[lang="en"] [lang="fr"], html[lang="en"] [lang="it"] {
  display: none !important; }

.sg-btn {
  border: none;
  padding: 4px 15px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  border-radius: 6px; }
  .sg-btn.disabled, .sg-btn:disabled {
    opacity: 0.6; }

.sg-btn-default {
  outline: none;
  color: #0065CB;
  background: #f7f7f7;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #f7f7f7 0%, #dddddd 100%); }

.sg-btn-default:not(:disabled):not(.disabled):hover, .sg-btn-default:not(:disabled):not(.disabled):focus {
  color: #0065CB;
  background: #eaeaea;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VhZWFlYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMGYwZjAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #eaeaea 0%, #f0f0f0 100%); }

.sg-btn-default:active, .sg-btn-default.active, .open .dropdown-toggle.sg-btn-primary {
  color: #0065CB;
  background: #dcdcdc;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjZGNkYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #dcdcdc 0%, #ededed 100%); }

.sg-btn-default.disabled, .sg-btn-default:disabled {
  color: #666; }

.sg-btn-primary {
  outline: none;
  padding: 4px 20px;
  color: #fff !important;
  background: #42b9fe;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQyYjlmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzY4ZDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #42b9fe 0%, #0368d5 100%); }

.sg-btn-primary:not(:disabled):not(.disabled):hover, .sg-btn-primary:not(:disabled):not(.disabled):focus {
  background: #1f8be7; }

.sg-btn-primary:active, .sg-btn-primary.active, .open .dropdown-toggle.sg-btn-primary {
  background: #1776c8;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE3NzZjOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxYjgyZGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: linear-gradient(to bottom, #1776c8 0%, #1b82da 100%); }

/** Generated with gulp-consolidate **/
.sg-icon {
  font-family: "Swisscom-Icons";
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.sg-icon.icon-add-circle-invert:before {
  content: "\EA01"; }

.sg-icon.icon-add-circle:before {
  content: "\EA02"; }

.sg-icon.icon-add-tvbox:before {
  content: "\EA03"; }

.sg-icon.icon-add:before {
  content: "\EA04"; }

.sg-icon.icon-advice:before {
  content: "\EA05"; }

.sg-icon.icon-alert:before {
  content: "\EA06"; }

.sg-icon.icon-arrow-down-filled:before {
  content: "\EA07"; }

.sg-icon.icon-arrow-down:before {
  content: "\EA08"; }

.sg-icon.icon-arrow-right-filled:before {
  content: "\EA09"; }

.sg-icon.icon-arrow-up-filled:before {
  content: "\EA0A"; }

.sg-icon.icon-arrow-up:before {
  content: "\EA0B"; }

.sg-icon.icon-arrow:before {
  content: "\EA0C"; }

.sg-icon.icon-assistant:before {
  content: "\EA0D"; }

.sg-icon.icon-attachment:before {
  content: "\EA0E"; }

.sg-icon.icon-back:before {
  content: "\EA0F"; }

.sg-icon.icon-backup:before {
  content: "\EA10"; }

.sg-icon.icon-barcode:before {
  content: "\EA11"; }

.sg-icon.icon-bill-bank:before {
  content: "\EA12"; }

.sg-icon.icon-bill:before {
  content: "\EA13"; }

.sg-icon.icon-bundle:before {
  content: "\EA14"; }

.sg-icon.icon-business-connect-settings:before {
  content: "\EA15"; }

.sg-icon.icon-business-network:before {
  content: "\EA16"; }

.sg-icon.icon-calendar:before {
  content: "\EA17"; }

.sg-icon.icon-call-log:before {
  content: "\EA18"; }

.sg-icon.icon-callcenter-circle:before {
  content: "\EA19"; }

.sg-icon.icon-callcenter:before {
  content: "\EA1A"; }

.sg-icon.icon-cancel:before {
  content: "\EA1B"; }

.sg-icon.icon-carabiner:before {
  content: "\EA1C"; }

.sg-icon.icon-cd:before {
  content: "\EA1D"; }

.sg-icon.icon-certificate:before {
  content: "\EA1E"; }

.sg-icon.icon-chain:before {
  content: "\EA1F"; }

.sg-icon.icon-check:before {
  content: "\EA20"; }

.sg-icon.icon-chf:before {
  content: "\EA21"; }

.sg-icon.icon-clock:before {
  content: "\EA22"; }

.sg-icon.icon-cloud-shape:before {
  content: "\EA23"; }

.sg-icon.icon-cloud:before {
  content: "\EA24"; }

.sg-icon.icon-clouddownload:before {
  content: "\EA25"; }

.sg-icon.icon-coins:before {
  content: "\EA26"; }

.sg-icon.icon-collapse:before {
  content: "\EA27"; }

.sg-icon.icon-company-cloud:before {
  content: "\EA28"; }

.sg-icon.icon-company-network:before {
  content: "\EA29"; }

.sg-icon.icon-company:before {
  content: "\EA2A"; }

.sg-icon.icon-connect:before {
  content: "\EA2B"; }

.sg-icon.icon-copy:before {
  content: "\EA2C"; }

.sg-icon.icon-cps:before {
  content: "\EA2D"; }

.sg-icon.icon-credit-card:before {
  content: "\EA2E"; }

.sg-icon.icon-cross:before {
  content: "\EA2F"; }

.sg-icon.icon-crown:before {
  content: "\EA30"; }

.sg-icon.icon-debit-direct:before {
  content: "\EA31"; }

.sg-icon.icon-delivery-status:before {
  content: "\EA32"; }

.sg-icon.icon-delivery:before {
  content: "\EA33"; }

.sg-icon.icon-dial:before {
  content: "\EA34"; }

.sg-icon.icon-dismissal:before {
  content: "\EA35"; }

.sg-icon.icon-document:before {
  content: "\EA36"; }

.sg-icon.icon-donation:before {
  content: "\EA37"; }

.sg-icon.icon-down:before {
  content: "\EA38"; }

.sg-icon.icon-download:before {
  content: "\EA39"; }

.sg-icon.icon-edit:before {
  content: "\EA3A"; }

.sg-icon.icon-error:before {
  content: "\EA3B"; }

.sg-icon.icon-esim-csr:before {
  content: "\EA3C"; }

.sg-icon.icon-esim:before {
  content: "\EA3D"; }

.sg-icon.icon-ethernet-port:before {
  content: "\EA3E"; }

.sg-icon.icon-ethernet:before {
  content: "\EA3F"; }

.sg-icon.icon-exclamation-mark:before {
  content: "\EA40"; }

.sg-icon.icon-exclamation:before {
  content: "\EA41"; }

.sg-icon.icon-exclamationmark-circle:before {
  content: "\EA42"; }

.sg-icon.icon-expand:before {
  content: "\EA43"; }

.sg-icon.icon-export-doc:before {
  content: "\EA44"; }

.sg-icon.icon-export:before {
  content: "\EA45"; }

.sg-icon.icon-factory:before {
  content: "\EA46"; }

.sg-icon.icon-fiber:before {
  content: "\EA47"; }

.sg-icon.icon-filter:before {
  content: "\EA48"; }

.sg-icon.icon-firewall:before {
  content: "\EA49"; }

.sg-icon.icon-fixline-settings:before {
  content: "\EA4A"; }

.sg-icon.icon-flash:before {
  content: "\EA4B"; }

.sg-icon.icon-folder:before {
  content: "\EA4C"; }

.sg-icon.icon-footprint:before {
  content: "\EA4D"; }

.sg-icon.icon-forward:before {
  content: "\EA4E"; }

.sg-icon.icon-gear:before {
  content: "\EA4F"; }

.sg-icon.icon-gears:before {
  content: "\EA50"; }

.sg-icon.icon-gift:before {
  content: "\EA51"; }

.sg-icon.icon-globe:before {
  content: "\EA52"; }

.sg-icon.icon-group-zone:before {
  content: "\EA53"; }

.sg-icon.icon-group:before {
  content: "\EA54"; }

.sg-icon.icon-guidepost:before {
  content: "\EA55"; }

.sg-icon.icon-handset-multiple:before {
  content: "\EA56"; }

.sg-icon.icon-handset:before {
  content: "\EA57"; }

.sg-icon.icon-headset:before {
  content: "\EA58"; }

.sg-icon.icon-heart:before {
  content: "\EA59"; }

.sg-icon.icon-home-arrow:before {
  content: "\EA5A"; }

.sg-icon.icon-home:before {
  content: "\EA5B"; }

.sg-icon.icon-import:before {
  content: "\EA5C"; }

.sg-icon.icon-in-progress:before {
  content: "\EA5D"; }

.sg-icon.icon-incident-fixnet:before {
  content: "\EA5E"; }

.sg-icon.icon-incident-internet:before {
  content: "\EA5F"; }

.sg-icon.icon-incident-mobile:before {
  content: "\EA60"; }

.sg-icon.icon-incident-multiple:before {
  content: "\EA61"; }

.sg-icon.icon-incident-other:before {
  content: "\EA62"; }

.sg-icon.icon-incident-tv:before {
  content: "\EA63"; }

.sg-icon.icon-info-outline:before {
  content: "\EA64"; }

.sg-icon.icon-info-sign:before {
  content: "\EA65"; }

.sg-icon.icon-info:before {
  content: "\EA66"; }

.sg-icon.icon-information:before {
  content: "\EA67"; }

.sg-icon.icon-insurance:before {
  content: "\EA68"; }

.sg-icon.icon-internet-heart:before {
  content: "\EA69"; }

.sg-icon.icon-internet-settings:before {
  content: "\EA6A"; }

.sg-icon.icon-ip-phone:before {
  content: "\EA6B"; }

.sg-icon.icon-key:before {
  content: "\EA6C"; }

.sg-icon.icon-laptop-internet:before {
  content: "\EA6D"; }

.sg-icon.icon-laptop:before {
  content: "\EA6E"; }

.sg-icon.icon-leaf:before {
  content: "\EA6F"; }

.sg-icon.icon-left:before {
  content: "\EA70"; }

.sg-icon.icon-lightbulb:before {
  content: "\EA71"; }

.sg-icon.icon-location-circle:before {
  content: "\EA72"; }

.sg-icon.icon-location:before {
  content: "\EA73"; }

.sg-icon.icon-lock-crossed:before {
  content: "\EA74"; }

.sg-icon.icon-lock:before {
  content: "\EA75"; }

.sg-icon.icon-lsv:before {
  content: "\EA76"; }

.sg-icon.icon-mail-proportional:before {
  content: "\EA77"; }

.sg-icon.icon-mail:before {
  content: "\EA78"; }

.sg-icon.icon-manual-input:before {
  content: "\EA79"; }

.sg-icon.icon-megaphone:before {
  content: "\EA7A"; }

.sg-icon.icon-memo:before {
  content: "\EA7B"; }

.sg-icon.icon-minus:before {
  content: "\EA7C"; }

.sg-icon.icon-mobile-payment:before {
  content: "\EA7D"; }

.sg-icon.icon-mobilephone-locked:before {
  content: "\EA7E"; }

.sg-icon.icon-mobilephone-prepaid:before {
  content: "\EA7F"; }

.sg-icon.icon-mobilephone:before {
  content: "\EA80"; }

.sg-icon.icon-more-circle:before {
  content: "\EA81"; }

.sg-icon.icon-more:before {
  content: "\EA82"; }

.sg-icon.icon-my-swisscom-app:before {
  content: "\EA83"; }

.sg-icon.icon-my-swisscom-assistant:before {
  content: "\EA84"; }

.sg-icon.icon-myCloud_official:before {
  content: "\EA85"; }

.sg-icon.icon-natel_pay:before {
  content: "\EA86"; }

.sg-icon.icon-navi-back:before {
  content: "\EA87"; }

.sg-icon.icon-navi-first-2:before {
  content: "\EA88"; }

.sg-icon.icon-navi-first:before {
  content: "\EA89"; }

.sg-icon.icon-navi-last-2:before {
  content: "\EA8A"; }

.sg-icon.icon-navi-last:before {
  content: "\EA8B"; }

.sg-icon.icon-navi-next:before {
  content: "\EA8C"; }

.sg-icon.icon-network-repair:before {
  content: "\EA8D"; }

.sg-icon.icon-network:before {
  content: "\EA8E"; }

.sg-icon.icon-new-message:before {
  content: "\EA8F"; }

.sg-icon.icon-next:before {
  content: "\EA90"; }

.sg-icon.icon-number-n:before {
  content: "\EA91"; }

.sg-icon.icon-number2:before {
  content: "\EA92"; }

.sg-icon.icon-number3:before {
  content: "\EA93"; }

.sg-icon.icon-number4:before {
  content: "\EA94"; }

.sg-icon.icon-number5:before {
  content: "\EA95"; }

.sg-icon.icon-ok-brackets:before {
  content: "\EA96"; }

.sg-icon.icon-ok:before {
  content: "\EA97"; }

.sg-icon.icon-open-order:before {
  content: "\EA98"; }

.sg-icon.icon-pause:before {
  content: "\EA99"; }

.sg-icon.icon-person:before {
  content: "\EA9A"; }

.sg-icon.icon-personal-cloud:before {
  content: "\EA9B"; }

.sg-icon.icon-phone-star:before {
  content: "\EA9C"; }

.sg-icon.icon-phone-tablet:before {
  content: "\EA9D"; }

.sg-icon.icon-play:before {
  content: "\EA9E"; }

.sg-icon.icon-plus:before {
  content: "\EA9F"; }

.sg-icon.icon-pre-to-postpaid:before {
  content: "\EAA0"; }

.sg-icon.icon-present:before {
  content: "\EAA1"; }

.sg-icon.icon-print:before {
  content: "\EAA2"; }

.sg-icon.icon-priorite:before {
  content: "\EAA3"; }

.sg-icon.icon-progressbar-check:before {
  content: "\EAA4"; }

.sg-icon.icon-progressbar-circle:before {
  content: "\EAA5"; }

.sg-icon.icon-qr:before {
  content: "\EAA6"; }

.sg-icon.icon-question:before {
  content: "\EAA7"; }

.sg-icon.icon-quickbasket:before {
  content: "\EAA8"; }

.sg-icon.icon-reload-thin:before {
  content: "\EAA9"; }

.sg-icon.icon-reload:before {
  content: "\EAAA"; }

.sg-icon.icon-remove-circle:before {
  content: "\EAAB"; }

.sg-icon.icon-rent-device:before {
  content: "\EAAC"; }

.sg-icon.icon-repair:before {
  content: "\EAAD"; }

.sg-icon.icon-repairservice:before {
  content: "\EAAE"; }

.sg-icon.icon-replay:before {
  content: "\EAAF"; }

.sg-icon.icon-retourned-mail:before {
  content: "\EAB0"; }

.sg-icon.icon-return:before {
  content: "\EAB1"; }

.sg-icon.icon-returned-mail:before {
  content: "\EAB2"; }

.sg-icon.icon-revise-order:before {
  content: "\EAB3"; }

.sg-icon.icon-right:before {
  content: "\EAB4"; }

.sg-icon.icon-ringing:before {
  content: "\EAB5"; }

.sg-icon.icon-roaming:before {
  content: "\EAB6"; }

.sg-icon.icon-robot:before {
  content: "\EAB7"; }

.sg-icon.icon-save:before {
  content: "\EAB8"; }

.sg-icon.icon-scissor:before {
  content: "\EAB9"; }

.sg-icon.icon-sdx-eye:before {
  content: "\EABA"; }

.sg-icon.icon-search:before {
  content: "\EABB"; }

.sg-icon.icon-sent:before {
  content: "\EABC"; }

.sg-icon.icon-server-terminal:before {
  content: "\EABD"; }

.sg-icon.icon-server:before {
  content: "\EABE"; }

.sg-icon.icon-share:before {
  content: "\EABF"; }

.sg-icon.icon-shopping:before {
  content: "\EAC0"; }

.sg-icon.icon-silence:before {
  content: "\EAC1"; }

.sg-icon.icon-sim-csr:before {
  content: "\EAC2"; }

.sg-icon.icon-simcard:before {
  content: "\EAC3"; }

.sg-icon.icon-simple-pay:before {
  content: "\EAC4"; }

.sg-icon.icon-smartphone:before {
  content: "\EAC5"; }

.sg-icon.icon-social_network:before {
  content: "\EAC6"; }

.sg-icon.icon-sort-list:before {
  content: "\EAC7"; }

.sg-icon.icon-speak:before {
  content: "\EAC8"; }

.sg-icon.icon-speaker:before {
  content: "\EAC9"; }

.sg-icon.icon-stacked-phone:before {
  content: "\EACA"; }

.sg-icon.icon-star:before {
  content: "\EACB"; }

.sg-icon.icon-store-locator:before {
  content: "\EACC"; }

.sg-icon.icon-swap:before {
  content: "\EACD"; }

.sg-icon.icon-telephone-exchange:before {
  content: "\EACE"; }

.sg-icon.icon-telephone-ip:before {
  content: "\EACF"; }

.sg-icon.icon-telephone:before {
  content: "\EAD0"; }

.sg-icon.icon-top:before {
  content: "\EAD1"; }

.sg-icon.icon-trash:before {
  content: "\EAD2"; }

.sg-icon.icon-truck:before {
  content: "\EAD3"; }

.sg-icon.icon-tv-settings:before {
  content: "\EAD4"; }

.sg-icon.icon-tv:before {
  content: "\EAD5"; }

.sg-icon.icon-tv20:before {
  content: "\EAD6"; }

.sg-icon.icon-unlocked:before {
  content: "\EAD7"; }

.sg-icon.icon-up:before {
  content: "\EAD8"; }

.sg-icon.icon-video-conference:before {
  content: "\EAD9"; }

.sg-icon.icon-video-conferene-invert:before {
  content: "\EADA"; }

.sg-icon.icon-voicemail-inverted:before {
  content: "\EADB"; }

.sg-icon.icon-voicemail-on:before {
  content: "\EADC"; }

.sg-icon.icon-voicemail:before {
  content: "\EADD"; }

.sg-icon.icon-wave:before {
  content: "\EADE"; }

.sg-icon.icon-wifi:before {
  content: "\EADF"; }

.sg-icon.icon-wireless-data:before {
  content: "\EAE0"; }

.sg-icon.icon-wlan:before {
  content: "\EAE1"; }

.sg-icon.icon-yellowbill:before {
  content: "\EAE2"; }

a.disabled {
  cursor: default;
  text-decoration: none;
  color: #666666; }
  a.disabled:hover, a.disabled :focus {
    color: #666666; }

.ent-details-row, .ent-details-product {
  margin-bottom: 10px; }
  .ent-details-row.hs-arrow-back, .hs-arrow-back.ent-details-product {
    display: block;
    font-weight: bold; }

.ent-details-product {
  background-color: #FFFFFF; }
  .ent-details-product.hs-collapsible.hs-expanded {
    border-bottom: 1px solid #C5C5C5; }

.ent-details-summary {
  color: #001155; }
  .ent-details-summary [hs-device="desktop"] {
    text-align: center; }
  .ent-details-summary:not([hs-device="desktop"]) {
    padding-bottom: 20px; }

.ent-details-product-details [hs-device="desktop"] {
  padding-top: 2px;
  padding-left: 10px; }

.ent-details-natelgo-private-option > span {
  display: block; }

.ent-details-natelgo-private-option:not(:last-child) {
  margin-bottom: 10px; }

.ent-details-quickaccesses {
  margin-top: -10px !important; }

.ent-details-quickaccess {
  padding-bottom: 20px;
  color: #001155; }
  .ent-details-quickaccess:hover {
    color: #1781e3;
    text-decoration: none; }

.ent-details-quickaccess-title {
  margin-top: 0px;
  margin-bottom: 0px; }

.ent-details-layered-white-icon-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #1781e3;
  background-color: #FFFFFF;
  border-radius: 50%;
  transform: translateY(33%); }

.ent-details-main-content {
  padding-bottom: 60px; }

.hs-product-image {
  align-content: flex-start; }
  .hs-product-image[hs-device="phone"] i.icon {
    font-size: 40px; }

.ent-details-quickaccess-icon:not([hs-device="desktop"]) {
  padding-left: 20px; }

.ent-details-quickaccess-icon[hs-device="phone"] {
  font-size: 43px; }

.ent-details-kuce-links:not([hs-device="desktop"]) {
  padding-left: 20px; }

.ent-details-kuce-links i.icon {
  margin-right: 5px; }

.ent-details-kuce-links[hs-device="phone"] i.icon {
  font-size: 26px;
  margin-right: 3px; }

.ent-details-kuce-links-margin-top:not([hs-device="desktop"]) {
  margin-top: 20px; }

/************************************************************/
/* OIL-UI */
/************************************************************/
/************************************************************/
.in-one-box, .order-in-progress, .migration-in-one .migration-in-one-submit, .in-one-subscriptions .in-one-subscription, .in-one-mobile-subsriptions .in-one-mobile-subsription {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  padding: 0px 24px;
  height: 72px; }

.in-one-box-mobile, .migration-in-one[hs-device="phone"] .migration-in-one-submit, .in-one-subscriptions[hs-device="phone"] .in-one-subscription, .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 16px;
  height: auto; }

.order-in-one {
  padding: 24px;
  background: #FFFFFF;
  margin-bottom: 32px; }
  .order-in-one .order-in-one-description {
    margin-bottom: 25px; }
  .order-in-one[hs-device="phone"] {
    padding: 20px 16px; }

.order-in-progress {
  margin-bottom: 16px; }

.migration-in-one {
  margin-bottom: 32px; }
  .migration-in-one .first-time-migration-info {
    padding: 24px;
    background: #FFFFFF;
    border-bottom: 1px solid #d6d6d6; }
  .migration-in-one mobile-subscription-to-migrate:not(:first-of-type) .migration-in-one-submit {
    border-top: 1px solid #d6d6d6; }
  .migration-in-one .migration-in-one-submit-label-subscription-name::before {
    content: "("; }
  .migration-in-one .migration-in-one-submit-label-subscription-name::after {
    content: ")"; }
  .migration-in-one[hs-device="phone"] span {
    display: block; }
  .migration-in-one[hs-device="phone"] .first-time-migration-info {
    padding: 20px 16px; }
  .migration-in-one[hs-device="phone"] .migration-in-one-submit-label {
    padding-bottom: 8px; }
  .migration-in-one[hs-device="phone"] .migration-in-one-submit-label-subscription-name::before {
    content: ""; }
  .migration-in-one[hs-device="phone"] .migration-in-one-submit-label-subscription-name::after {
    content: ""; }

.in-one-subscriptions .in-one-subscription {
  margin-bottom: 16px; }

.in-one-subscriptions address {
  display: block;
  margin-bottom: 0; }

.in-one-subscriptions .in-one-subscription-address-street::after {
  content: ","; }

.in-one-subscriptions .in-one-subscription-address-zip {
  display: inline-block; }

.in-one-subscriptions .in-one-subscription-change {
  text-decoration: none; }

.in-one-subscriptions[hs-device="phone"] span {
  display: block; }

.in-one-subscriptions[hs-device="phone"] address {
  padding-bottom: 8px; }

.in-one-subscriptions[hs-device="phone"] .in-one-subscription-address-street::after {
  content: ""; }

.in-one-teaser {
  padding-bottom: 24px; }
  .in-one-teaser p {
    margin-bottom: 10px; }
  .in-one-teaser a {
    display: block;
    text-decoration: none; }

.in-one-discount {
  display: flex;
  justify-content: space-between;
  align-items: baseline; }
  .in-one-discount i {
    color: white; }
  .in-one-discount[hs-device="phone"] span {
    display: block; }

.in-one-mobile-subsriptions {
  margin-bottom: 32px; }
  .in-one-mobile-subsriptions .in-one-mobile-subsription {
    margin-bottom: 16px; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription .icon-046-information-circle {
      color: #ff8b2e;
      vertical-align: text-bottom; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-mobile-subsription-title {
      display: inline-block;
      width: 50%; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-mobile-subsription-discount, .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-group-invite-sent {
      display: inline-block;
      width: 25%;
      flex-grow: 1; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-subscription-manage {
      margin-right: 10px;
      width: 25%; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription.in-one-group-member-disabled,
    .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-group-member-disabled {
      color: #cfd5d9; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription nav {
      display: inline-block; }
      .in-one-mobile-subsriptions .in-one-mobile-subsription nav a {
        text-decoration: none; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription nav a .icon {
          display: block; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription nav a:not(:first-of-type) {
          margin-left: 10px; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription nav a .sg-icon {
          margin-bottom: 8px;
          margin-right: 10px; }
    .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu {
      position: relative; }
      .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout {
        top: 59px;
        right: -16px; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout.flyout--list {
          width: auto; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout.show {
          display: block;
          opacity: 1; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout > .carret-flyout-menu {
          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);
          content: '';
          z-index: -1; }
        .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout li a {
          display: flex;
          white-space: nowrap; }
          .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout li a:hover {
            text-decoration: none; }
          .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout li a .icon {
            margin-left: -12px;
            margin-right: 6px; }
          .in-one-mobile-subsriptions .in-one-mobile-subsription .in-one-flyout-menu .flyout li a .sg-icon.icon-swap {
            font-size: 22px;
            margin-left: -13px;
            margin-right: 4px; }
  .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription {
    position: relative; }
    .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription .in-one-subscription-manage {
      margin-right: 0;
      display: block;
      margin-top: 7px;
      text-decoration: none; }
    .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription .button-swap-action-for-member {
      margin-top: 9px; }
    .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription .in-one-flyout-menu {
      position: absolute;
      top: 13px;
      right: 14px; }
  .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription-title {
    width: 80%; }
  .in-one-mobile-subsriptions[hs-device="phone"] .in-one-mobile-subsription-discount, .in-one-mobile-subsriptions[hs-device="phone"] .in-one-group-invite-sent {
    width: 100%;
    margin-top: 10px; }
  .in-one-mobile-subsriptions[hs-device="phone"] strong span {
    display: block; }
    .in-one-mobile-subsriptions[hs-device="phone"] strong span:nth-child(2) {
      display: inline-block; }
  .in-one-mobile-subsriptions[hs-device="phone"] strong .icon-046-information-circle {
    margin-left: 5px; }
  .in-one-mobile-subsriptions[hs-device="phone"] nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 30px 0px 0px; }
    .in-one-mobile-subsriptions[hs-device="phone"] nav a:last-of-type {
      order: 3; }
  .in-one-mobile-subsriptions .in-one-group-notification {
    margin-bottom: 25px; }
  @media screen and (max-width: 700px) {
    .in-one-mobile-subsriptions .notification-header .notification__content {
      padding-left: 18px;
      padding-right: 18px; }
      .in-one-mobile-subsriptions .notification-header .notification__content .notification__body {
        line-height: 20px; } }
  @media screen and (max-width: 358px) {
    .in-one-mobile-subsriptions .notification-header .notification__content {
      padding-right: 12px; } }
  .in-one-mobile-subsriptions .notification-header .notification__content .notification__body {
    text-overflow: inherit !important;
    white-space: normal !important; }

.sdx-container.ngdialog.ngdialog-theme-default .spinner {
  z-index: 10001; }

.sdx-container.ngdialog.ngdialog-theme-default.desktop-tablet-size-md .ngdialog-content {
  width: 500px; }

.sdx-container.ngdialog.ngdialog-theme-default.deactivate-bonding-dialog-size .ngdialog-content {
  width: 530px; }

.sdx-container.ngdialog.ngdialog-theme-default .deactivate-bonding-message .icon-012-check-mark-circle {
  color: #25b252; }

.sdx-container.ngdialog.ngdialog-theme-default .deactivate-bonding-message .icon-026-exclamation-mark-circle {
  color: #ff8b2e; }

.sdx-container.ngdialog.ngdialog-theme-default.success-modal .ngdialog-content, .sdx-container.ngdialog.ngdialog-theme-default.unsuccess-modal .ngdialog-content {
  color: #FFFFFF;
  text-align: center; }
  .sdx-container.ngdialog.ngdialog-theme-default.success-modal .ngdialog-content p, .sdx-container.ngdialog.ngdialog-theme-default.unsuccess-modal .ngdialog-content p {
    text-align: center; }
  .sdx-container.ngdialog.ngdialog-theme-default.success-modal .ngdialog-content .ngdialog-close::before, .sdx-container.ngdialog.ngdialog-theme-default.unsuccess-modal .ngdialog-content .ngdialog-close::before {
    color: #FFFFFF; }
  .sdx-container.ngdialog.ngdialog-theme-default.success-modal .ngdialog-content .button--thin, .sdx-container.ngdialog.ngdialog-theme-default.unsuccess-modal .ngdialog-content .button--thin {
    border-color: #FFFFFF; }

.sdx-container.ngdialog.ngdialog-theme-default.success-modal .ngdialog-content {
  background-color: #25b252; }

.sdx-container.ngdialog.ngdialog-theme-default.unsuccess-modal .ngdialog-content {
  background-color: #ff8b2e; }

.sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content {
  border-radius: 0;
  padding: 24px 32px 32px 32px; }
  .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content h1 {
    padding: 0 32px 19px 32px;
    border-bottom: 1px solid #dde3e7;
    margin-left: -32px;
    margin-right: -32px;
    margin-bottom: 24px;
    color: #015;
    font-weight: 300;
    line-height: 32px;
    letter-spacing: -.35px;
    font-size: 24px; }
  .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .change-name-button-segment {
    margin-top: 15px; }
  .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .btn-change {
    padding: 12px 66px; }
  .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .in-one-group-change-name-inp-label {
    width: 100%; }
  .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .in-one-group-change-name-limit-highlight {
    color: #ff8b2e; }
  .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .ngdialog-close {
    right: 24px;
    top: 24px; }
    .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .ngdialog-close::before {
      color: #015;
      font-size: 40px; }

[hs-device="phone"] .button-group button:first-child {
  order: 2; }

html[hs-device=phone] .sdx-container.ngdialog.ngdialog-theme-default {
  padding-top: 0;
  padding-bottom: 0; }
  html[hs-device=phone] .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content {
    padding: 24px 17px 17px 17px;
    -webkit-animation-duration: 0.01s !important;
            animation-duration: 0.01s !important;
    position: relative;
    top: 50vh;
    transform: perspective(1px) translateY(-50%); }
    html[hs-device=phone] .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content .ngdialog-close {
      right: 8px; }
    html[hs-device=phone] .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content h1 {
      padding-right: 53px;
      margin-bottom: 15px; }
    html[hs-device=phone] .sdx-container.ngdialog.ngdialog-theme-default .ngdialog-content h1 ~ p {
      margin-bottom: 14px; }

/*doc
---
title: Notifications (header)
name: 02-components-125-notification-header-01-overview
category: Components - Notifications (header)
---

<p>Notification headers are colored strips which run across the top of a product, beneath the header bar or navigation.</p>

<div class="margin-bottom-4">
  <div class="input-field">
    <input type="text" id="message-text-1" placeholder="Notification text" value="You have <strong>4</strong> new messages in your inbox">
    <label for="message-text-1">Notification text</label>
  </div>
  <div class="radio">
    <input type="radio" name="options" id="default" value="" checked="">
    <label for="default">Default notification</label>
  </div>
  <div class="radio">
    <input type="radio" name="options" id="confirmation" value="notification--confirmation">
    <label for="confirmation">Confirmation / Success notification</label>
  </div>
  <div class="radio add-space">
    <input type="radio" name="options" id="alert" value="notification--alert">
    <label for="alert">Alert / Warning notification</label>
  </div>

  <button class="button button--primary" onclick="showNotification()">Show notification</button>

  <script>
    function showNotification() {
      var callback = function() {
        alert("Notification was clicked");
      };

      var cancelCallback = function() {
        alert("Notification was cancelled");
      };

      var message = document.getElementById("message-text-1");
      var modifier = document.querySelector("input[name='options']:checked").value;

      // open the notification
      var notification = sdx.Notification.showOnHeader("header", message.value || "Notification Text", callback, cancelCallback, modifier);

      // remove the notification
      setTimeout(function(){ notification.close() }, 2000);
    }
  </script>
</div>

<h4>How to use notification headers</h4>

<p>Notifications headers are used to give users in page information about something new, or to confirm an action that’s just been made by the user. They do this in a discrete non-disruptive way. Notifications should always use the SDX interaction color palette to help explain the type of notification the user is receiving at a glance. They run the full width of the page.</p>


```section_design
```

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

  <h3>General notifications</h3>

  <p>Blue notifications are used for non-critical notifications or notifications that aren’t confirming success.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-3@2x-6.jpg">
      <span class="fig-caption">New inbox notification</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-4@2x-5.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h3>Confirmation notifications</h3>

  <p>Green notifications should be used to indicate validation or success, for example to confirm success at the end of an order process.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-7@2x-12.jpg">
      <span class="fig-caption">Items added to basket confirmation</span>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-20@2x-1.jpg">
      <span class="fig-caption">Hover state</span>
    </div>
  </div>

  <h3>Alert notifications</h3>

  <p>Orange notifications indicate an error or a warning, for example something that needs urgent attention.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-16@2x-14.jpg">
      <span class="fig-caption">Warning notification</span>
    </div>
  </div>

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

  <h2>Rules</h2>

  <h3>Closing the notification</h3>

  <p>Each notification can be closed, with the secondary action being positioned to the right.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-17@2x-13.jpg">
      <span class="fig-caption">Closing the notification</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h3>Fixed over content</h3>

  <p>Notifications are always placed over the content and fixed to the top of viewport, for emphasis and clarity.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-5-Copy-2@2x.jpg">
      <span class="fig-caption">Fixed over content</span>
    </div>
    <div class="col-xs-12 col-lg-6">
    </div>
  </div>

  <h2>Typography</h2>

  <div class="row">
   <div class="col-xs-12 col-lg-12">
     <img class="img-responsive" src="./theme-build/img/design/notification_header/Group-18@2x-10.jpg">
     <span class="fig-caption">Typography</span>
   </div>
  </div>
</div>


```section_develop
```

<h2>Usage</h2>

```htmlmixed
<div class="input-field">
  <input type="text" id="message-text-1" placeholder="Notification text" value="You have <strong>4</strong> new messages in your inbox">
  <label for="message-text-1">Notification text</label>
</div>

<div class="radio">
  <input type='radio' name='options' id='default' value='' checked>
  <label for='default'>Default notification</label>
</div>
<div class="radio">
  <input type='radio' name='options' id='confirmation' value='notification--confirmation'>
  <label for='confirmation'>Confirmation / Success notification</label>
</div>
<div class="radio add-space">
  <input type='radio' name='options' id='alert' value='notification--alert'>
  <label for='alert'>Alert / Warning notification</label>
</div>

<button class="button button--primary" onclick="showNotification()">Show notification</button>

<script>
  function showNotification() {
    var callback = function() {
      alert("Notification was clicked");
    };

    var cancelCallback = function() {
      alert("Notification was cancelled");
    };

    var message = document.getElementById("message-text-1");
    var modifier = document.querySelector("input[name='options']:checked").value;

    // open the notification
    var notification = sdx.Notification.showOnHeader("header", message.value || "Notification Text", callback, cancelCallback, modifier);

    // remove the notification
    setTimeout(function(){ notification.close() }, 2000);
  }
</script>
```

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>4</strong> new messages in your inbox
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      Please check the highlighted fields
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h2>Colours</h2>

<p>Notifications are categorised into three categories: general, confirmation/success/ and alerts/warnings. Blue represents general notifications, e.g messages in your inbox. Green for confirmation of user actions or completion of a process, e.g completing checkout. Orange to give alerts and warnings to users, e.g failed uploads or storage reaching capacity.</p>

<h3>General Notifications</h3>

```htmlmixed
<div class="notification-header notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>4</strong> new messages in your inbox
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h3>Confirmations / Success</h3>

```htmlmixed
<div class="notification-header notification--confirmation notification--open">
  <div class="notification__content">
    <div class="notification__body">
      <strong>3</strong> items added to your basket
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

<h3>Alerts and Warnings</h3>

```htmlmixed
<div class="notification-header notification--alert notification--open">
  <div class="notification__content">
    <div class="notification__body">
      You have <strong>5</strong> new alerts
    </div>
    <button class="notification__close notification-cancel" aria-label="Close">
      <i class="icon icon-022-close" aria-hidden="true"></i>
    </button>
  </div>
</div>
```
*/
.notification-header {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height 400ms cubic-bezier(0.35, 0.035, 0.275, 0.9); }
  .notification-header .notification__content {
    display: 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; }
    .notification-header .notification__content:hover {
      background: #0851da; }
    @media (min-width: 768px) {
      .notification-header .notification__content {
        padding: 21px 38px; } }
    .notification-header .notification__content .notification__body {
      font-weight: 400;
      line-height: 24px;
      letter-spacing: -.1px;
      font-size: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #fff;
      opacity: 0;
      -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
              animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); }
      .notification-header .notification__content .notification__body strong {
        font-weight: 600;
        font-size: 16px; }
    .notification-header .notification__content button {
      position: relative;
      right: -5px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      opacity: 0;
      -webkit-animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9);
              animation: fade-in 300ms 400ms forwards cubic-bezier(0.35, 0.035, 0.275, 0.9); }
      .notification-header .notification__content button .icon {
        line-height: 32px;
        color: #fff;
        font-size: 34px; }

.notification--open {
  height: 74px; }

.notification--alert .notification__content {
  background: #ff8b2e; }
  .notification--alert .notification__content:hover {
    background: #e86416; }

.notification--confirmation .notification__content {
  background: #25b252; }
  .notification--confirmation .notification__content:hover {
    background: #008236; }

@keyframes notification-show {
  0% {
    height: 0; }
  100% {
    height: 74px; } }

/*doc
---
title: Menu (flyout and contextual)
name: 02-components-100-menu-01-flyout
category: Components - Menu (flyout and contextual)
---

<p>Flyout and contextual menus are used to house additional functionality and content within various different contexts. They can be used to house quick links within cards, profile information and settings, as well as to provide additional contextual functionality.</p>

<div>
  <sdx-menu-flyout>
    <sdx-menu-flyout-toggle>
      <sdx-icon icon-name="icon-account" size="2"></sdx-icon>
    </sdx-menu-flyout-toggle>

    <sdx-menu-flyout-list>
      <sdx-menu-flyout-list-item onclick="console.log('Deutsch');">Deutsch</sdx-menu-flyout-list-item>
      <sdx-menu-flyout-list-item>English</sdx-menu-flyout-list-item>
      <sdx-menu-flyout-list-item>Français</sdx-menu-flyout-list-item>
      <sdx-menu-flyout-list-item>Italiano</sdx-menu-flyout-list-item>
    </sdx-menu-flyout-list>
  </sdx-menu-flyout>
</div>


```section_design
```

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

  <h3>Regular flyout menu</h3>

  <p>Regular menus, or ‘flyouts’ are used to reveal functionality that’s behind an icon other than the navigation, such as settings and preferences, or glance views of your basket.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-7@2x-10.jpg">
      <span class="fig-caption">Regular flyout</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-9@2x-11.jpg">
      <span class="fig-caption">Regular flyout with hover on first nav item</span>
    </div>
  </div>

  <h3>Flyout with any content</h3>

  <p>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.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-10@2x-13.jpg">
      <span class="fig-caption">Flyout with any content</span>
    </div>
    <div class="col-xs-12 col-lg-6"></div>
  </div>

  <h3>Profile menu</h3>

  <p>Profile menus are the most complex form of menu, handling three different types of content in a single view. They feature listed offers contained within a grey panel, short text passages to give information to the user, and listed text links and CTAs.</p>

  <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-11@2x-12.jpg">
  <span class="fig-caption">Three column profile menu</span>

  <h3>Basket menu</h3>

  <p>Basket menus feature a two column structure to help house more complex information. These included the use of thumbnail images, product names, descriptions and price, as well as running totals. They also contain CTAs for checkout.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-12@2x-11.jpg">
      <span class="fig-caption">Regular flyout</span>
    </div>
  </div>

  <h3>Contextual menus</h3>

  <p>Contextual menus are used to surface additional functionality relevant to a page on native applications, while still prioritising a key function that is most commonly used in that instance. The additional functionality is hidden inside an ellipsis icon.</p>
  <p>When placed in a button, they can be fixed to the bottom of the viewport. This makes it easy and quick for the user.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-13@2x-12.jpg">
      <span class="fig-caption">Closed contextual menu</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-14@2x-9.jpg">
      <span class="fig-caption">Open contextual menu</span>
    </div>
  </div>

  <h3>Contextual flyout menu</h3>

  <p>Contextual flyout menus are used for in page functionality on web based applications. They can be global to a page, or be fixed to an element on the page to reveal additional functionality specific to that element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-15@2x-11.jpg">
      <span class="fig-caption">Regular flyout</span>
    </div>
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-16@2x.png">
      <span class="fig-caption">Regular flyout with hover on first list item</span>
    </div>
  </div>

  <h2>Rules</h2>

  <h3>Spacing around menus</h3>

  <p>All menus have a margin of 24px around the element.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-17-Copy-4@2x.jpg">
      <span class="fig-caption">Spacing around menus</span>
    </div>
    <div class="col-xs-12 col-lg-6"></div>
  </div>

  <h3>Grid structure</h3>

  <p>Profile menus follow the Swisscom grid, with the account sub navigation only ever using two columns. Promotional content can vary in size, typically taking up 2 or 3 columns.</p>

  <div class="row">
    <div class="col-xs-12 col-lg-6">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-17-Copy-6@2x.jpg">
      <span class="fig-caption">Grid structure</span>
    </div>
    <div class="col-xs-12 col-lg-6"></div>
  </div>

  <h2>Typography</h2>

  <div class="row">
    <div class="col-xs-12 col-lg-12">
      <img class="img-responsive" src="./theme-build/img/design/menu_flyout_contextual/Group-18@2x-9.jpg">
      <span class="fig-caption">Grid structure</span>
    </div>
  </div>
</div>


```section_develop
```

<h2>Flyout Menu</h2>

<p>Flyout Menus are used to reveal functionality that’s behind an icon other than the navigation, such as settings and preferences, or glance views of your basket.</p>

```htmlmixed_webcomponent_sdx-menu-flyout_accessible
<sdx-menu-flyout>
  <sdx-menu-flyout-toggle>
    <sdx-icon icon-name="icon-account" size="2" sr-hint="Choose language"></sdx-icon>
  </sdx-menu-flyout-toggle>

  <sdx-menu-flyout-list>
    <sdx-menu-flyout-list-item onclick="console.log('Deutsch');">Deutsch</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item href="#en">English</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item>Français</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item onclick="console.log('Will not execute');" disabled>Italiano</sdx-menu-flyout-list-item>
    <sdx-menu-flyout-list-item href="#never" disabled>Esperanto</sdx-menu-flyout-list-item>
  </sdx-menu-flyout-list>
</sdx-menu-flyout>
```

<h3>Flyout with any content</h3>

<p>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. <b>NOTE:</b> 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.</p>

```htmlmixed_playground_accessible
<div class="text-align-right">
  <sdx-menu-flyout direction="bottom-left">
    <sdx-menu-flyout-toggle>
      <sdx-icon icon-name="icon-account" size="2"></sdx-icon>
    </sdx-menu-flyout-toggle>
    <sdx-menu-flyout-content style="width: 480px;">
      <p class="text-align-center">Welcome to My Swisscom</p>
      <hr aria-hidden="true" />
      <p>Log in to manage your invoices, products, orders and see more offers</p>
      <div class="button-group button-group--fill">
        <button class="button button--secondary">Cancel</button>
        <button class="button button--primary">Login</button>
      </div>
    </sdx-menu-flyout-content>
  </sdx-menu-flyout>
</div>
```

<h2>Contextual Menu</h2>

<style>
  .exampleOutput .context {
    position: relative;
    bottom: auto;
    max-width: 320px;
  }
</style>

<p>Contextual menus are used to surface additional functionality relevant to a page on native applications, while still prioritising a key function that is most commonly used in that instance. The additional functionality is hidden inside an ellipsis icon.</p>

<p><b>NOTE:</b> This component should only be used on the <code>phone</code> breakpoint and is not intended to be used on tablets and desktop breakpoints. For tablets and desktop it is recommended to use a flyout menu instead.</p>

```htmlmixed
<div class="context">
  <div class="context__primary">
    <a class="context-link" href="javascript:void(0);">
      Check voicemail
    </a>
    <button class="context-link context-link--more" data-init="auto" data-toggle="flyout" data-target="#context">
      <i class="icon icon-053-more"></i>
    </button>
  </div>

  <div id="context" class="context__secondary js-flyout">
    <ul>
      <li>
        <a class="context-link" href="javascript:void(0);">View itemised statement</a>
      </li>
      <li>
        <a class="context-link" href="javascript:void(0);">Apply for extension</a>
      </li>
      <li>
        <a class="context-link" href="javascript:void(0);">Download PDF bill</a>
      </li>
    </ul>
  </div>
</div>
```
*/
.flyout {
  display: none;
  position: absolute;
  top: 20px;
  opacity: 0;
  transform: translateY(-20px);
  z-index: 60000;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); }
  .flyout.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0); }

.flyout--left {
  left: 0; }
  .flyout--left .flyout__indicator::before {
    left: 24px; }

.flyout--right {
  right: 0; }

.flyout--top {
  top: auto;
  bottom: 100%;
  transform: translateY(20px); }
  .flyout--top .flyout__indicator::before {
    top: auto;
    bottom: -7px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.15); }

.flyout__indicator::before {
  position: absolute;
  top: -7px;
  right: 24px;
  width: 14px;
  height: 14px;
  background: inherit;
  box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.15);
  transform: rotate(45deg);
  z-index: -1;
  content: ''; }

.flyout__content {
  background: inherit; }

.flyout__title {
  margin-top: -4px;
  text-align: center; }

.flyout__text {
  margin-bottom: 16px;
  text-align: center; }

.flyout--list {
  width: 254px;
  padding: 0; }
  .flyout--list li:not(:last-child) {
    border-bottom: 1px solid #e4e9ec; }
  .flyout--list .list-link {
    display: block;
    width: 100%;
    padding: 12px 24px;
    border: 0;
    background: #fff; }
    .flyout--list .list-link:hover, .flyout--list .list-link:focus {
      color: #fff;
      background: #1781e3; }

.flyout--info {
  width: 369px;
  padding: 24px; }
  .flyout--info hr,
  .flyout--info .divider {
    margin: 16px 0; }

.context {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 60000;
  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); }
  .context .context-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    height: 73px;
    padding: 0 24px;
    flex: 1;
    color: #1781e3;
    border: 0;
    background: #fff;
    line-height: 73px;
    vertical-align: middle;
    text-align: center; }
  .context__primary {
    display: flex;
    position: relative;
    width: 100%;
    height: 73px;
    z-index: 60010; }
    .context__primary .context-link {
      color: #fff;
      background: #1781e3; }
      .context__primary .context-link:not(:last-child) {
        border-right: 1px solid #e4e9ec; }
      .context__primary .context-link--more {
        width: 73px;
        padding: 0;
        flex: 0 0 auto;
        font-size: 40px; }
        .context__primary .context-link--more.is-open {
          color: #1781e3;
          background: #fff; }
  .context__secondary {
    display: none;
    position: absolute;
    bottom: 73px;
    width: 100%;
    padding: 0;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 60005; }
    .context__secondary.is-open {
      display: block;
      opacity: 1; }
    .context__secondary li {
      border-bottom: 1px solid #e4e9ec; }
  .context--flyout {
    position: initial;
    display: flex;
    justify-content: space-between;
    padding: 24px;
    box-shadow: none; }
    .context--flyout .flyout-icon {
      color: #015; }
    .context--flyout ~ .flyout {
      top: 67px;
      right: 20px;
      max-width: 280px;
      width: 100%; }
      .context--flyout ~ .flyout::before {
        right: 13px; }

.in-one-headline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline; }
  .in-one-headline i {
    color: white;
    position: absolute;
    right: 0;
    top: 5px; }
  .in-one-headline .in-one-sme-discount {
    padding-bottom: 32px; }
  .in-one-headline h2.in-one {
    margin-bottom: 16px !important; }

[hs-device="phone"] .in-one-headline i {
  right: -22px;
  top: 3px; }

.group-overview-sections-container {
  min-height: 500px;
  margin-top: 30px;
  padding: 30px;
  background: #eef3f6;
  background-image: url("../images/Edge_Aura_25proBGhor.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  font-family: "TheSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5; }
  .group-overview-sections-container.sme-background {
    background-image: url("../images/inOne_SME_aura_edge_grey.jpeg"); }
  .group-overview-sections-container[hs-device="phone"] {
    background-size: 100% 40%;
    margin-top: 16px; }
  .group-overview-sections-container.grey {
    background-image: none;
    background-color: #f3f3f3;
    margin-top: 20px;
    padding-top: 15px;
    min-height: inherit; }
    .group-overview-sections-container.grey h3.in-one, .group-overview-sections-container.grey .hs-line .in-one.hs-line-link, .hs-line .group-overview-sections-container.grey .in-one.hs-line-link {
      margin-bottom: 12px; }

/************************************************************/
/* SPECIAL BOXES */
/************************************************************/
.box-grey {
  background: #dde3e7;
  display: block;
  border-radius: 4px;
  padding: 8px; }

html[hs-device=phone] .sdx-container > h1.in-one {
  padding-left: 12px; }

@font-face {
  font-family: Swisscom-Icons;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/icons/Swisscom-Icons.eot?45652#iefix") format("embedded-opentype"), url("../fonts/icons/Swisscom-Icons.woff2?45652") format("woff2"), url("../fonts/icons/Swisscom-Icons.woff?45652") format("woff"), url("../fonts/icons/Swisscom-Icons.ttf?45652") format("truetype"); }

/************************************************************/
/* CLASSES */
/************************************************************/
.browsehappy {
  padding: 20px;
  background-color: #ffcc00;
  color: #001155; }

.disable-animations * {
  transition-duration: 0s !important;
  -webkit-animation-duration: 0s !important;
          animation-duration: 0s !important; }
  .disable-animations * .notification-header,
  .disable-animations * .notification-header * {
    opacity: 1 !important; }

.hs-customer-data-margin {
  margin-top: 10px; }

.sg-kuce-searchbox-results {
  z-index: 10; }

.hs-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial;
  font-size: 13px; }
  .hs-settings .new {
    position: relative;
    top: 2px; }
  .hs-settings .hs-panel {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    max-width: 700px; }
    .hs-settings .hs-panel label {
      flex: 1 190px;
      margin: 5px;
      min-width: 0; }
    .hs-settings .hs-panel input {
      flex: 2 350px;
      margin: 5px;
      min-width: 0; }
    .hs-settings .hs-panel select {
      flex: 2 350px;
      margin: 5px;
      min-width: 0; }
  .hs-settings .hs-panel-button {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center; }
    .hs-settings .hs-panel-button button {
      flex: 1 120px;
      height: 40px;
      margin: 5px; }
  .hs-settings .button-description {
    min-width: 100px;
    margin: 5px; }

.sg-menu.desktop a,.sg-menu.mobile .sg-navigation-content .menuitem a{white-space:nowrap;font-style:normal;font-variant:normal;text-transform:none;text-overflow:ellipsis}.sg-spinner-container{margin:15px auto;text-align:center}.sg-spinner-container .sg-spinner{background-position:center center;width:30px;height:30px;display:inline-block}.sg-menu-button{position:relative;height:35px;margin:5px 20px;width:35px;float:right}.sg-menu-button:before{background:#FFF;box-shadow:0 10px 0 0 #FFF,0 20px 0 0 #FFF;border-radius:1px;content:"";height:3px;position:absolute;top:6px;width:35px}.sg-menu ul{padding:0;font-family:TheSaB3,Arial,Helvetica,sans-serif}.sg-menu li{list-style:none}.sg-menu,.sg-menu *,.sg-menu-button,.sg-menu-button *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-o-sizing:border-box;box-sizing:border-box}.sg-menu-transition{transition:transform .3s cubic-bezier(.25,.5,.5,.9);-moz-transition:-moz-transform .3s cubic-bezier(.25,.5,.5,.9);-webkit-transition:-webkit-transform .3s cubic-bezier(.25,.5,.5,.9);-o-transition:-o-transform .3s cubic-bezier(.25,.5,.5,.9)}.sg-menu-transition.menu-open{transform:translateX(-250px);bottom:0;left:0;overflow-y:hidden;position:fixed;right:0;top:0}.sg-menu-badge{background-color:#0EABA9;border-radius:13px;color:#FFF;display:inline-block;text-align:center;vertical-align:middle;white-space:nowrap}div.sg-menu-badge{float:right;font-size:16px;line-height:16px;padding:4px 10px;position:relative}.sg-menu.desktop{display:inline-block;width:200px;margin-left:13px;float:left;font-size:16px;min-height:100px}.sg-menu li[data-usecase-id=logout],.sg-menu.desktop .sg-navigation-header,.sg-menu.desktop li.closed ul,.sg-menu.desktop li.empty>span{display:none}.sg-menu.desktop .sg-icon-arrow-down-filled,.sg-menu.desktop .sg-icon-arrow-up-filled{vertical-align:top;content:"";width:.7rem;height:.7rem;position:absolute;float:left}.sg-menu.desktop ul li{padding:0}.sg-menu.desktop div.sg-menu-badge{margin-top:5px}.sg-menu.desktop a{padding-left:10px;display:block;line-height:30px;color:#015;text-decoration:none;overflow:hidden}.sg-menu.desktop .sg-icon-arrow-down-filled{border:0 solid transparent;border-right:.1rem solid #015;border-bottom:.1rem solid #015;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);margin:12px 0 0 10px}.sg-menu.desktop .sg-icon-arrow-up-filled{border:0 solid transparent;border-right:.1rem solid #015;border-bottom:.1rem solid #015;transform:rotate(-135deg);-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);margin:18px 0 0 10px}.sg-menu.desktop li>span{float:right;font-size:16px;cursor:pointer;height:34px;width:30px}.sg-menu.desktop li a:hover{color:#2d90ec}.sg-menu.desktop li.open>a,.sg-menu.desktop li.selected.open>a{text-decoration:underline}.sg-menu.desktop li.selected.open>a{text-decoration:underline;color:#2d90ec}.sg-menu.desktop li.fixed-open{border-bottom:1px solid #ccc}.sg-menu.desktop li.fixed-open:nth-child(2){border-top:1px solid #ccc}.sg-menu.desktop li.menuseparator{border-bottom:none}.sg-menu.desktop .level1{border-bottom:1px solid #ccc}.sg-menu.desktop .level1 h1{font-size:16px}.sg-menu.desktop .level1.fixed-open>h1{color:#42389E;font-size:16px;font-weight:700}.sg-menu.desktop .level1.fixed-open>ul>li.level1{font-weight:400;border-bottom:none}.sg-menu.desktop .level1.fixed-open>ul>li.level1 a{padding:3px 0}.sg-menu.desktop .level1 a{padding:7px 0}.sg-menu.desktop .level1 ul:last-of-type{padding-bottom:5px}.sg-menu.desktop .level2,.sg-menu.desktop .level3{font-size:16px;font-weight:400}.sg-menu.desktop .level2>span,.sg-menu.desktop .level3>span{height:26px}.sg-menu.desktop .level2 a,.sg-menu.desktop .level3 a{color:#015;padding:3px 0}.sg-menu.desktop .level2 .sg-icon-arrow-up-filled,.sg-menu.desktop .level3 .sg-icon-arrow-up-filled{margin:14px 0 0 10px}.sg-menu.desktop .level2 .sg-icon-arrow-down-filled,.sg-menu.desktop .level3 .sg-icon-arrow-down-filled{margin:8px 0 0 10px}.sg-menu.desktop .level3{margin-left:10px}.sg-menu.desktop .level4,.sg-menu.desktop .level5{margin-left:15px}.sg-menu[data-device=phone] li[data-usecase-id=logout]{display:inherit}.sg-menu.mobile{right:0;top:0;bottom:0;height:100%;width:250px;position:fixed;z-index:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-perspective:1000px;display:none}.sg-menu.mobile div.sg-menu-badge{margin-right:5px;margin-top:12px}.menu-open.sg-menu.mobile{display:block;border-left:1px solid #ccc}.sg-menu.mobile:after{content:" ";display:block;position:absolute;left:0;width:0;top:0;bottom:0}.sg-menu.mobile .sg-navigation-header{width:100%;display:block;height:50px;font-size:1.5em;margin-bottom:10px}.sg-menu.mobile .sg-navigation-header>img{height:30px;margin-top:9px;margin-bottom:9px;margin-left:21px}.sg-menu.mobile .sg-navigation-content{margin-left:10px;font-size:15px;color:#015}.sg-menu.mobile .sg-navigation-content ul li{padding:0}.sg-menu.mobile .sg-navigation-content li a.navigation,.sg-menu.mobile .sg-navigation-content li a.navigation:active,.sg-menu.mobile .sg-navigation-content li a.navigation:visited{color:#015}.sg-menu.mobile .sg-navigation-content li a.navigation:hover{color:#2d90ec}.sg-menu.mobile .sg-navigation-content .menuitem{white-space:nowrap;position:relative;text-align:left}.sg-menu.mobile .sg-navigation-content .menuitem h1{color:#42389E;font-size:16px;margin-left:0;font-weight:700}.sg-menu.mobile .sg-navigation-content .menuitem a{overflow:hidden;-webkit-text-overflow:ellipsis;-moz-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;cursor:pointer;text-decoration:none}.sg-menu.mobile .sg-navigation-content .menuitem a.navigation{display:inline-block;overflow:hidden;vertical-align:middle;line-height:50px;width:230px;text-overflow:ellipsis}.sg-menu.mobile .sg-navigation-content .menuitem a.navigation:active,.sg-menu.mobile .sg-navigation-content .menuitem a.navigation:hover{outline:0;text-decoration:none}.sg-menu.mobile .sg-navigation-content .menuitem span+a.navigation{width:181px}.sg-menu.mobile .sg-navigation-content .menuitem .sg-submenu-arrow{display:inline-block;cursor:pointer;width:49px;float:right;text-align:center;z-index:1;top:0;height:43px}.sg-menu.mobile .sg-navigation-content .menuitem .sg-submenu-arrow .sg-icon-arrow-down-filled{vertical-align:top;content:"";width:.7rem;height:.7rem;position:absolute;border:0 solid transparent;border-right:.1rem solid #015;border-bottom:.1rem solid #015;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);float:left;margin-top:16px}.sg-menu.mobile .sg-navigation-content .menuitem .sg-submenu-arrow .sg-icon-arrow-up-filled{vertical-align:top;content:"";width:.7rem;height:.7rem;position:absolute;border:0 solid transparent;border-right:.1rem solid #015;border-bottom:.1rem solid #015;transform:rotate(-135deg);-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);float:left;margin-top:22px}@media screen and (-webkit-min-device-pixel-ratio:0){.sg-menu.mobile .sg-navigation-content .menuitem .sg-submenu-arrow .sg-icon-arrow-down-filled,.sg-menu.mobile .sg-navigation-content .menuitem .sg-submenu-arrow .sg-icon-arrow-up-filled{font-size:1px}}.sg-menu.mobile .sg-navigation-content .menuitem.level1.open>a,.sg-menu.mobile .sg-navigation-content .menuitem.level2.open>a,.sg-menu.mobile .sg-navigation-content .menuitem.level3.open>a,.sg-menu.mobile .sg-navigation-content .menuitem.level4.open>a,.sg-menu.mobile .sg-navigation-content .menuitem.level5.open>a{text-decoration:underline}.sg-menu.mobile .sg-navigation-content .menuitem.level1.open>a:active,.sg-menu.mobile .sg-navigation-content .menuitem.level2.open>a:active,.sg-menu.mobile .sg-navigation-content .menuitem.level3.open>a:active,.sg-menu.mobile .sg-navigation-content .menuitem.level4.open>a:active,.sg-menu.mobile .sg-navigation-content .menuitem.level5.open>a:active{color:#2d90ec}.sg-menu.mobile .sg-navigation-content .menuitem.level1.level2 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level1.level3 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level1.level4 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level1.level5 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level2 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level3 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level4 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level5 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level2 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level3 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level4 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level5 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level2 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level3 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level4 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level5 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level2 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level3 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level4 a.navigation.selected.open,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level5 a.navigation.selected.open{text-decoration:underline;color:#2d90ec}.sg-menu.mobile .sg-navigation-content .menuitem.level1.level2 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level1.level3 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level1.level4 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level1.level5 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level2 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level3 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level4 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level2.level5 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level2 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level3 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level4 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level3.level5 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level2 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level3 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level4 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level4.level5 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level2 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level3 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level4 a.navigation.selected.open:active,.sg-menu.mobile .sg-navigation-content .menuitem.level5.level5 a.navigation.selected.open:active{color:#2d90ec}.sg-menu.mobile .sg-navigation-content .menuitem.level1.selected.open>a{text-decoration:underline;color:#2d90ec}.sg-menu.mobile .sg-navigation-content .menuitem.level1.selected.open>a:active{color:#2d90ec}.sg-menu.mobile .sg-navigation-content .menuitem.level1>ul>li.level1{font-weight:400;border-bottom:none;height:40px}.sg-menu.mobile .sg-navigation-content .menuitem li.level2 a.navigation .empty .sg-submenu-arrow{display:none}.sg-menu.mobile .sg-navigation-content .menuitem li.level2 a.navigation .empty a.navigation{width:100%}.sg-menu.mobile .sg-navigation-content .menuitem li.level3 a.navigation{padding-left:10px;line-height:35px}.sg-menu.mobile .sg-navigation-content .menuitem li.level4 a.navigation{padding-left:20px;line-height:35px}.sg-menu.mobile .sg-navigation-content .menuitem li.level5 a.navigation{padding-left:25px;line-height:35px}.sg-menu.mobile .sg-navigation-content li.fixed-open,.sg-menu.mobile .sg-navigation-content li.level1.closed,.sg-menu.mobile .sg-navigation-content li.level1.open{border-bottom:1px solid #ccc}.sg-menu.mobile .sg-navigation-content li.fixed-open:nth-child(2){border-top:1px solid #ccc}.sg-menu.mobile .sg-navigation-content li.fixed-open>ul{max-height:none}.sg-menu.mobile .sg-navigation-content .active{background-color:#006FD3}.sg-menu.mobile .sg-navigation-content .active>a.navigation{color:#FFF}.sg-menu.mobile .sg-navigation-content .active>.sg-submenu-arrow,.sg-menu.mobile .sg-navigation-content li.active{background-color:#006FD3}.sg-menu.mobile .sg-navigation-content .fixed-open>.submenuitemtree,.sg-menu.mobile .sg-navigation-content .open>.submenuitemtree{display:block}.sg-menu.mobile .sg-navigation-content .submenuitemtree{display:none}ul{padding:0;margin:0}.sg-content-page{background-color:#FFF;overflow-x:hidden;overflow-y:auto;position:relative;z-index:2}
html[device="desktop"] .sg-kuce-header .sg-kuce-header-logo, .sg-kuce-header html[device="desktop"] .sg-kuce-header-logo, html[device="desktop"] .sg-kuce-header-menu-button, html[device="desktop"] .sg-kuce-header-button-help, html[device="desktop"] .sg-kuce-header-button-contact, html[device="desktop"] .sg-kuce-search-button {
  display: none; }

html:not([device="desktop"]) .sg-kuce-header-tab, html:not([device="desktop"]) .sg-kuce-subheader, html:not([device="desktop"]) .sg-kuce-footer-left, html:not([device="desktop"]) .sg-kuce-footer-right {
  display: none; }

html[device="phone"] .sg-kuce-header-userbox {
  display: none; }

.sg-kuce-header a:not([href]), .sg-kuce-header button, .sg-kuce-subheader a:not([href]), .sg-kuce-subheader button, .sg-kuce-footer a:not([href]), .sg-kuce-footer button, .sg-kuce-header-userbox, .sg-kuce-header-language-switch, .sg-kuce-header-button, .sg-kuce-searchbox-results ul li {
  cursor: pointer; }

.sg-kuce-header *:focus, .sg-kuce-subheader *:focus, .sg-kuce-footer *:focus {
  outline: none; }

.sg-kuce-header, .sg-kuce-header *, .sg-kuce-subheader, .sg-kuce-subheader *, .sg-kuce-footer, .sg-kuce-footer * {
  box-sizing: border-box; }

html[device="desktop"] .sg-kuce-header-container, html[device="desktop"] .sg-kuce-footer-container, html[device="desktop"] .sg-kuce-subheader {
  width: 980px;
  margin: 0 auto; }

.sg-kuce-header-container, .sg-kuce-footer-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap; }
  html:not([device="desktop"]) .sg-kuce-header-container, html:not([device="desktop"]) .sg-kuce-footer-container {
    padding: 7px 12px; }

.sg-kuce-header-changelang-link {
  display: block;
  padding: 0 12px; }

.sg-kuce-header-divider-after {
  position: relative; }
  .sg-kuce-header-divider-after:after {
    content: "|";
    color: rgba(33, 33, 33, 0.5);
    position: absolute;
    right: 0;
    top: 0; }

html[lang="de"] [lang="fr"], html[lang="de"] [lang="it"], html[lang="de"] [lang="en"] {
  display: none; }

html[lang="de"] [data-changelang="de"] {
  display: none; }

html[lang="fr"] [lang="de"], html[lang="fr"] [lang="it"], html[lang="fr"] [lang="en"] {
  display: none; }

html[lang="fr"] [data-changelang="fr"] {
  display: none; }

html[lang="it"] [lang="de"], html[lang="it"] [lang="fr"], html[lang="it"] [lang="en"] {
  display: none; }

html[lang="it"] [data-changelang="it"] {
  display: none; }

html[lang="en"] [lang="de"], html[lang="en"] [lang="fr"], html[lang="en"] [lang="it"] {
  display: none; }

html[lang="en"] [data-changelang="en"] {
  display: none; }

.sg-kuce-header-container {
  position: relative; }

.sg-kuce-header {
  width: 100%;
  background-color: #001155; }
  html[device="desktop"] .sg-kuce-header nav {
    padding-left: 20px; }
  .sg-kuce-header a.sg-kuce-header-tab {
    color: white;
    text-decoration: none; }

.sg-kuce-header-left {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; }

.sg-kuce-header-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch; }

.sg-kuce-header-tab {
  position: relative;
  color: white;
  padding: 13px 17px;
  text-decoration: none; }

.sg-kuce-header-tab:hover {
  background-image: linear-gradient(to bottom, transparent 40%, rgba(17, 170, 255, 0.5) 100%); }

.sg-kuce-header-tab:before {
  content: "";
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAmCAYAAADui0oEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowNTgwMTE3NDA3MjA2ODExQjFBNEQ4Q0UzMEI0MzlBMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBNzdEMTlFNUU4NDYxMUUwODAyMEM5MTRDQzVCRUREOCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBNzdEMTlFNEU4NDYxMUUwODAyMEM5MTRDQzVCRUREOCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1ODAxMTc0MDcyMDY4MTFCRDE4Qjg0NzlDODhCRDNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA1ODAxMTc0MDcyMDY4MTFCMUE0RDhDRTMwQjQzOUEzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+xLyYWwAAAGZJREFUeNpkzkkKgEAMRNG0NigOqCfyIr3wIt5ZcUDBkcDvTRaBRyiSctKNbgi9eBFx/ygSgxR4kIEcVKAGDWgNYqYEhbkcf2kx7cLmBRc4wQ42sIDJYDaZFRzmcvx1g8dAi30CDAB74BQe89b1PQAAAABJRU5ErkJggg==");
  width: 2px;
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0; }

.sg-kuce-header-icon-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  text-align: center; }
  .sg-kuce-header-icon-tab span {
    display: block; }
    .sg-kuce-header-icon-tab span:not(.sg-icon) {
      margin-top: 1px;
      font-size: 10px; }
  .sg-kuce-header-icon-tab .sg-icon {
    font-size: 14px; }

.sg-kuce-header a.selected {
  background-color: white;
  color: #2d90ec;
  margin-top: 3px;
  border-radius: 5px 5px 0 0; }
  .sg-kuce-header a.selected:hover {
    background-image: none; }

.sg-kuce-header a.selected:before, .sg-kuce-header a.selected + a:before {
  content: none; }

.sg-kuce-header-userbox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 174px;
  max-width: 174px;
  text-align: right;
  color: white;
  margin: 5px 0 5px 3px;
  border: none;
  border-radius: 5px;
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(to bottom, #0a70ba 0%, #03296e 100%); }
  html:not([device="desktop"]) .sg-kuce-header-userbox {
    height: 30px;
    margin-top: 0;
    margin-bottom: 0; }
  .sg-kuce-header-userbox:hover {
    background-image: linear-gradient(to bottom, #218dd5 0%, #034297 100%); }
  .sg-kuce-header-userbox.open {
    color: #001155;
    background: white none;
    border-radius: 5px 5px 0 0;
    margin-top: 3px;
    margin-bottom: 1px;
    z-index: 5; }
  .sg-kuce-header-userbox:not(.open) .sg-kuce-header-userbox-dropdown {
    display: none; }
  .sg-kuce-header-userbox > span:first-child {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 5px; }
  .sg-kuce-header-userbox .sg-icon {
    margin: 0 6px; }
  .sg-kuce-header-userbox .sg-kuce-header-button {
    color: white;
    text-shadow: #006FD3 1px 1px 1px;
    background: linear-gradient(to bottom, #41b7fd 0%, #0165d4 100%);
    border: none;
    border-radius: 5px;
    padding: 5px 12px; }
    .sg-kuce-header-userbox .sg-kuce-header-button:hover {
      background: #1f8be7; }

.sg-kuce-header-userbox-dropdown {
  cursor: default;
  margin: 0;
  padding: 0;
  z-index: 1;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 3px 6px #d9d9d9; }
  .sg-kuce-header-userbox-dropdown ul {
    margin: 0;
    padding: 0 10px;
    list-style: none; }
    .sg-kuce-header-userbox-dropdown ul li {
      padding-right: 15px;
      padding-bottom: 4px; }
      .sg-kuce-header-userbox-dropdown ul li:first-of-type, .sg-kuce-header-userbox-dropdown ul li:last-of-type {
        padding-top: 12px;
        border-top: 1px solid #eaeaea; }
      .sg-kuce-header-userbox-dropdown ul li:nth-last-of-type(2), .sg-kuce-header-userbox-dropdown ul li:last-of-type {
        padding-bottom: 12px; }
      .sg-kuce-header-userbox-dropdown ul li:last-of-type > .sg-kuce-header-button {
        float: right;
        margin-right: 0;
        margin-bottom: 12px; }

.sg-kuce-header-link, .sg-kuce-header-language-switch-dropdown ul .sg-kuce-header-changelang-link, a.sg-kuce-header-link, .sg-kuce-header-language-switch-dropdown ul a.sg-kuce-header-changelang-link {
  text-decoration: none;
  color: #001155; }
  .sg-kuce-header-link:hover, .sg-kuce-header-language-switch-dropdown ul .sg-kuce-header-changelang-link:hover, a.sg-kuce-header-link:hover, .sg-kuce-header-language-switch-dropdown ul a.sg-kuce-header-changelang-link:hover {
    color: #2d90ec; }

/**
    SUBHEADER
**/
.sg-kuce-subheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0 10px 4px; }
  .sg-kuce-subheader .sg-kuce-header-agent {
    padding: 5px; }

.sg-kuce-header-logo {
  text-decoration: none; }
  .sg-kuce-header-logo span {
    display: block;
    vertical-align: middle;
    width: 182px;
    height: 52px;
    text-indent: -5000px;
    overflow: hidden;
    background-size: contain;
    background: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMjQyMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0IiB2aWV3Qm94PSI2MCA0MCA3MDAgMjAwIj4gIDxwYXRoIGZpbGw9IiMwMDExNTUiIGQ9Ik01MDYuNyAxMjIuN2MtNC4zLTEuNi04LjgtMi41LTEzLjQtMi43LTUuMSAwLTkuMSAxLjMtOS4xIDYgMCAxMSAyOC4zIDQuMiAyOC4zIDI2LjkgMCAxNS4zLTEyLjQgMjEuMi0yNi40IDIxLjItNi40IDAtMTIuNy0uOS0xOC44LTIuOGwxLjEtMTMuNHM5LjIgMy4xIDE3IDMuMWM1LjQgMCA5LjktMS43IDkuOS02LjQgMC0xMS44LTI4LjMtNC4yLTI4LjMtMjYuOCAwLTE0LjEgMTEuOS0xOS45IDI1LTE5LjkgNi0uMSAxMiAuOSAxNy44IDIuOGwtMy4xIDEyem0tNTEuOCAwYy00LjMtMS42LTguOC0yLjUtMTMuNC0yLjctNS4xIDAtOS4yIDEuMy05LjIgNiAwIDExIDI4LjQgNC4yIDI4LjQgMjYuOSAwIDE1LjMtMTIuNSAyMS4yLTI2LjQgMjEuMi02LjQgMC0xMi44LTEtMTktMi44bDEuMi0xMy40czkuMyAzLjEgMTcuMSAzLjFjNS4yIDAgOS44LTEuNyA5LjgtNi40IDAtMTEuOC0yOC40LTQuMi0yOC40LTI2LjggMC0xNC4xIDEyLTE5LjkgMjUtMTkuOSA2LjEtLjEgMTIuMi45IDE4IDIuOGwtMy4xIDEyem0yNjEuNy0xNWMxMi4zIDAgMTkuNSA2LjcgMTkuNSAyMS4ydjQzLjhoLTE2LjR2LTQwLjRjMC02LjYtMS45LTEwLjktOC45LTEwLjlzLTEzLjEgNi4xLTEzLjEgMTcuMXYzNC4yaC0xNi4xdi00MC40YzAtNi4xLTItMTAuOS05LTEwLjktNy4zIDAtMTMgNi44LTEzIDE3Ljh2MzMuNUg2NDNWMTA5YzEwLjktMS4zIDE1IDMuMSAxNS40IDEwLjIgMy45LTcuMyAxMS42LTExLjcgMTkuOS0xMS42IDExLjQgMCAxNiA2LjMgMTcuNyAxMi4zIDIuNy02LjIgOS45LTEyLjIgMjAuNi0xMi4yek0zODEuNyAxMDljLTMuNSAxOC45LTEyLjcgNDguNi0xOC40IDYzLjZIMzQ2bC0xMi4yLTQyLjRoLS4ybC0xMi4yIDQyLjRoLTE3LjJjLTUuNS0xNC44LTE1LjUtNDUuNS0xOC40LTYzLjZIMzAybDEwLjggNDMuOGguMmwxMi45LTQzLjhoMTYuM2wxMi41IDQzLjRoLjNsMTAuOS00My40aDE1Ljh6bS0xMDUuOCAxMy43Yy00LjMtMS42LTguOC0yLjUtMTMuNC0yLjctNS4xIDAtOSAxLjMtOSA2IDAgMTEgMjguMiA0LjIgMjguMiAyNi45IDAgMTUuMy0xMi40IDIxLjItMjYuNCAyMS4yLTYuNCAwLTEyLjctLjktMTguOC0yLjhsMS0xMy40czkuMyAzLjEgMTcuMSAzLjFjNS40IDAgOS45LTEuNyA5LjktNi40IDAtMTEuOC0yOC4zLTQuMi0yOC4zLTI2LjggMC0xNC4xIDExLjktMTkuOSAyNS0xOS45IDYtLjEgMTIgLjkgMTcuOCAyLjhsLTMuMSAxMnpNNjAyLjQgMTc0Yy0xOC4xIDAtMzAuOC05LjktMzAuOC0zMi4xIDAtMTkuOSAxMy4zLTM0LjIgMzIuNy0zNC4yIDE4IDAgMjkuNyAxMC4xIDI5LjcgMzEuOC0uMSAyMC43LTEyLjcgMzQuNS0zMS42IDM0LjV6bS43LTUyLjNjLTcuMyAwLTE0LjMgNS40LTE0LjMgMTkuNCAwIDEyLjEgNC41IDE4LjkgMTQuMSAxOC45IDguMSAwIDE0LjMtNi42IDE0LjMtMTkuNCAwLTEyLjQtNC41LTE4LjktMTQuMS0xOC45em0tMjEzLjkgNTFoMTYuM1YxMDljLTcuNy0uOC0xNi4zIDEuMy0xNi4zIDEzLjN2NTAuNHptOS03MS42YzUuNi4xIDEwLjMtNC40IDEwLjQtMTBWOTFjMC01LjYtNC43LTkuOC0xMC40LTkuOC01LjUtLjEtMTAgNC4zLTEwLjEgOS44LjEgNS41IDQuNSA5LjkgMTAuMSAxMC4xem0xNTIuMyA3Mi43Yy0xOC45IDAtMzEuMi05LjQtMzEuMi0zMiAwLTE5LjEgMTAuNS0zMy45IDMzLjgtMzMuOSA1LjMgMCAxMC42LjkgMTUuNSAyLjdsLTMuNSAxMy4zYy0zLjctMS40LTcuNi0yLjItMTEuNS0yLjMtMTEuOSAwLTE2LjggNy44LTE2LjggMTkuNCAwIDExLjMgNC40IDE4LjkgMTYuMSAxOC45IDQuNCAwIDguOC0xIDEyLjktMi44bDEuOSAxMy4xYy0zLjMgMi0xMCAzLjYtMTcuMiAzLjZ6Ii8+ICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDgwMHYyODBIMHoiLz4gIDxyYWRpYWxHcmFkaWVudCBpZD0iU1ZHSURfMV8iIGN4PSI5NC4wOCIgY3k9IjEwNy44MyIgcj0iNTAuMTMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAyNzkuODkpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzQyQjRGMyIgc3RvcC1vcGFjaXR5PSIuOTgiLz4gICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAzQTgwIi8+ICA8L3JhZGlhbEdyYWRpZW50PiAgPHBhdGggZmlsbD0idXJsKCNTVkdJRF8xXykiIGQ9Ik0xMDIuNCAyMDIuNGMxLjcgMS42IDMuNSAzIDUuNCA0LjQgMS4zLjkgMi42IDEuOCAzLjkgMi42IDEuOCAxLjEgMy43IDIuMiA1LjUgMy4xIDIuNSAxLjMgNi41IDMuMSA5LjEgNC4yLS41LS44LS45LTEuMy0xLjQtMi4yLTEuNC0xLjUtMi42LTMuMS0zLjYtNC44LTEuMS0xLjktMi0zLjktMi43LTUuOS0uNS0xLjYtMS4xLTMuMy0xLjctNS4zLS40LTEuMy0uNy0yLjgtMS00LjMtLjEtLjMtLjMtMS40LS40LTEuNy0uMy0xLjYtLjYtMy0xLTQuNHMtLjctMi43LTEuMS00LjFjLS43LTIuMS0xLjUtNC4yLTIuNC02LjEtMS0yLjMtMi4xLTQuNS0zLjQtNi43LS44LTEuNC0yLjktNC4xLTMuOS01LjQtLjctLjktMS4zLTEuNi0yLTIuNC0uNS0uNi0xLTEuMS0xLjctMS44cy0xLjYtMS42LTIuMy0yLjRjLS4xLS4xIDAgMC0uMS4xLTEuNiAxLjktMyA0LTQuMiA2LjItMSAxLjctMS44IDMuNS0yLjUgNS40LS4zIDEtLjYgMi4xLS44IDMuMi0uNSAyLjYtLjUgNS4yLS4xIDcuNy4zIDEuNi42IDMuMiAxLjIgNC43LjcgMiAxLjYgMy45IDIuNyA1LjdsLjQuOGMyLjMgMy40IDUgNi42IDguMSA5LjR6Ii8+ICA8cmFkaWFsR3JhZGllbnQgaWQ9IlNWR0lEXzJfIiBjeD0iNTg2Ljg3NCIgY3k9IjQ5Ny42MDkiIHI9Ijc3LjM3IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0uNTMgLjg1IC43IC40NCAxNjEuODggLTU3Mi42MSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4gICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNUJDMEZGIiBzdG9wLW9wYWNpdHk9Ii45OCIvPiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwMDM3ODkiLz4gIDwvcmFkaWFsR3JhZGllbnQ+ICA8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzJfKSIgZD0iTTEyNi4zIDIzNi4yYzMuNi0uMyA3LjItLjggMTAuOC0xLjQgNC44LS45IDkuNC0yIDE0LjEtMy41IDQuMS0xLjMgOC0yLjcgMTEuOS00LjQgMy41LTEuNSA2LjktMy4yIDEwLjItNS4xIDQuMi0yLjQgOC4zLTUuMyAxMi04LjQgNC4yLTMuNSA3LjktNy42IDExLTEyLjIgMy4yLTQuNyA1LjYtMTAgNy4xLTE1LjYuOC0zLjIgMS4zLTYuNSAxLjQtOS43LjItMy43LS4yLTcuNC0xLjEtMTEuMS0xLjMtNC45LTMuNC05LjYtNi4xLTEzLjktMy45LTYtOC40LTExLjUtMTMuNS0xNi40LTUuNC01LjQtMTEuNi0xMC43LTE4LjEtMTYuMS00LTMuMy04LjEtNi42LTEyLjMtOS45LTMuMi0yLjYtNi40LTUuMi05LjctNy44LTMuNi0zLTcuMi02LTEwLjctOS0zLjEtMi44LTYuMS01LjQtOC45LTguMi0uOS0uOS0xLjktMS44LTIuOC0yLjgtMy0zLTUuOS02LjItOC45LTkuOCAxLjcgMi41IDQuNCA2LjMgNyAxMC4yIDEuOCAyLjYgMy40IDUuMiA0LjggOCAuNSAxIDEgMi4xIDEuNCAzLjIuMy43LjUgMS41LjUgMi4zdjEyMy4ybC0uMSAxOC40eiIvPiAgPHJhZGlhbEdyYWRpZW50IGlkPSJTVkdJRF8zXyIgY3g9IjU1OS4yNDciIGN5PSI0NDMuMTk5IiByPSI4OS41NCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtLjMyIC45NSAuOTYgLjMyIC04OC4yMyAtNTYyLjI0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM1RkM3RkYiLz4gICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAzNzg1IiBzdG9wLW9wYWNpdHk9Ii45OCIvPiAgPC9yYWRpYWxHcmFkaWVudD4gIDxwYXRoIGZpbGw9InVybCgjU1ZHSURfM18pIiBkPSJNMTI2LjMgMjE2LjdsOC4yLTkuN2MxLjItMS40IDMuOS00LjggNi40LTguMXM0LjgtNi4yIDUuNS03LjJjLjMtLjQgNC40LTYuMiA0LjctNi43IDItMi44LjYtLjggMS42LTIuMi40LS42LjctLjkgMy41LTUuMi4zLS41LjktMS4zIDEuMy0ybDIuOC00LjZjLjUtLjguOS0xLjUgMS4zLTIuMiAxLjEtMiAxLjktMy42IDIuOC01LjIgMi0zLjcgMy01LjUgNC45LTkuNSAxLjMtMi44IDIuNy02IDMuNi04LjMuNi0xLjYgMS42LTQuMiAyLjEtNS42LjQtMSAxLjItMy42IDEuNy01LjIuOS0zIDEuNC01LjEgMS42LTUuOS0uMS0uOC0uMi0xLjUtLjQtMi4yLTIuMS0xLjgtNS00LjMtNi45LTUuOS0uOC0uNi02LjYtNS41LTcuNS02LjMtMy43LTMtOS4yLTcuNC0xMy4xLTEwLjZzLTYuNi01LjMtMTAuNC04LjVjLTEzLjgtMTEuNC0yMC42LTE5LjEtMjgtMjUuNyAzLjYgOC4zIDEzIDIwLjEgMTMgMjguM3YxMTYuNGMtLjItLjEuMy42IDEuMyAyLjF6Ii8+ICA8cmFkaWFsR3JhZGllbnQgaWQ9IlNWR0lEXzRfIiBjeD0iMTUwLjc1IiBjeT0iNzcuMjI0IiByPSI2My4xNCIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtLjcgMCAxMjkuNTQpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI0VDMEExQyIvPiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNCQjBFMTUiLz4gIDwvcmFkaWFsR3JhZGllbnQ+ICA8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzRfKSIgZD0iTTEzNS40IDkzLjVsMi44IDIuMyAyLjkgMi40YzEuMiAxIDUuNSA0LjUgNiA0LjlsLjguN2MyLjQgMiA4LjkgNy4xIDEwLjggOC43bC4yLjJjMS41IDEuMiA4LjkgNy4yIDEyLjYgMTAuNCAzLjQgMi45IDYuNCA1LjYgNi43IDUuOS43LTMuMyAxLjMtNi42IDEuNy0xMCAuNC00LjEuNS04LjIuMi0xMi40LS40LTYtMi0xMS44LTQuNS0xNy4zLTIuMi00LjctNS4yLTktOC45LTEyLjdsLTEuMS0xLjFjLTQuMS0zLjgtOC44LTYuOS0xNC05LTQuMi0xLjgtOC43LTIuOS0xMy4yLTMuMy01LS40LTkuNi41LTEyLjYgMi4xLS42LjMtMS4xLjUtMS4xLjV2MTcuOWMuMi4yIDEuNCAxLjMgMS40IDEuMyAyLjIgMi4xIDQuOSA0LjUgNi4zIDUuNyAxLjEgMS4yIDIgMiAzIDIuOHoiLz4gIDxyYWRpYWxHcmFkaWVudCBpZD0iU1ZHSURfNV8iIGN4PSI0NTUuMzciIGN5PSI2MzAuNzAyIiByPSIxMDMuMDUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLS43IC43IC41NCAuNTMgNjAuNzYgLTU2Ni4zMSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4gICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjRUMwQTFDIi8+ICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzlFMEQxOCIvPiAgPC9yYWRpYWxHcmFkaWVudD4gIDxwYXRoIGZpbGw9InVybCgjU1ZHSURfNV8pIiBkPSJNMTE2LjIgMjAwLjljLjIuOS41IDEuNy44IDIuNS40IDEuMi45IDIuNSAxLjQgMy43LjggMS45IDEuNyAzLjcgMi45IDUuMy45IDEuMyAyIDIuNCAzLjIgMy4yLjYuNCAxLjIuNyAxLjggMXYtMzQuMmwtLjctLjJjLS4zLS4xLS44LS4yLS44LS4yVjk4LjNjLjEtMS4zLjYtMi42IDEuNC0zLjcgMCAuMSAwIDAgMCAwLS4xLS43LS4yLTEuNC0uNS0yLjEtLjUtMS40LTEuMS0yLjgtMS45LTQuMi0uMS0uMy0uMy0uNS0uNC0uOC0xLjItMi0zLjMtNS40LTQuNi03LjMtMS45LTIuOC0xLjUtMi4yLTMuNC01LS43LTEtMi0yLjktMi43LTQtMS0xLjUtMi4zLTYuNC0zLTguMS0yIDEuNS01LjIgMy45LTcuMiA1LjMtNC44IDMuNS05LjYgNy0xNC4zIDEwLjctMy4xIDIuNC02LjEgNC45LTkgNy42LTIuOCAyLjYtNS41IDUuMy04IDguMi00LjYgNS41LTguMyAxMS45LTguOCAxOS4xLS4xIDEuMi0uMSAyLjMgMCAzLjUuMSAxLjIuMyAyLjQuNSAzLjcuOSA0LjQgMi44IDguNSA1LjUgMTIgMy4xIDMuOSA2LjYgNy40IDEwLjQgMTAuNWwxLjkgMS43YzQuNCAzLjggOC44IDcuNSAxMyAxMS42IDYuMSA1LjggMTEuNSAxMi4zIDE1LjQgMjAuMyAzLjcgNy41IDQuOCAxNS43IDcuMSAyMy42eiIvPiAgPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNi4zIDk0LjZjLTQuNy42LTcuOCAzLjMtOS43IDcuNS0xLjcgMy44LTIuNiA4LTUuMiAxMS41LTUuMiA3LjItMTguOCA1LjUtMjAuOSAxNS4zLTMgMTQuNCAxNS44IDE3LjUgMjEuMyAyNy42IDQuMSA3LjQgMi4xIDE5IDkuOCAyNC4yIDEuMi44IDIuNSAxLjQgMy45IDEuNy4yLjEuNS4xLjcuMWwuMS04Ny45eiIvPiAgPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF82XyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMjMuNzI5IiB5MT0iNjIuNTc0IiB4Mj0iMTA2LjEyOSIgeTI9IjEyOS43MjMiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAyNzkuODkpIj4gICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMzIwMDAwIi8+ICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzVEMDAwMCIvPiAgPC9saW5lYXJHcmFkaWVudD4gIDxwYXRoIGNsYXNzPSJzdDgiIGQ9Ik0xMjYuMyAxODIuNWMtLjIgMC0uNS0uMS0uNy0uMS0xLjQtLjQtMi43LS45LTMuOS0xLjctNy43LTUuMi01LjctMTYuOC05LjgtMjQuMi0xLjUtMi40LTMuNC00LjUtNS42LTYuMWwtLjItLjJjLS45LjktMi4yIDIuMy00LjQgNC40LTEuNyAxLjctMy4yIDMuNS00LjcgNS40IDUgNSA5LjIgMTAuOCAxMi4zIDE3LjIgMy44IDguNCA0LjcgMTcuNSA3LjcgMjYuMiAxIDMuMiAyLjQgNi4zIDQuMyA5LjEgMS4yIDEuOCAzIDMuMyA1IDQuMXYtMzQuMXoiLz4gIDxyYWRpYWxHcmFkaWVudCBpZD0iU1ZHSURfN18iIGN4PSIxMjUuMjciIGN5PSIxOTcuOCIgcj0iMzguMTUiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMCAyNzkuODkpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwMzc4OSIvPiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1RkM3RkYiIHN0b3Atb3BhY2l0eT0iLjk4Ii8+ICA8L3JhZGlhbEdyYWRpZW50PiAgPHBhdGggY2xhc3M9InN0OSIgZD0iTTExNy4yIDc2LjJjLjguOSAxLjkgMiAyLjggMyAxLjIgMS4yIDIuMiAyLjMgMy42IDMuNi44LjggMS45IDEuOCAyLjcgMi42VjQ1LjhjLS45LS4yLTEuOC0uMy0yLjgtLjItMi40LjEtNC43LjYtNi45IDEuNC0yIC43LTMuOCAxLjctNS40IDMuMS0xLjggMS41LTMuMSAzLjYtMy42IDUuOS0uNSAyLjUtLjEgNS42IDEuNiA5LjMuOSAyIDIgMy44IDMuMyA1LjYuMS4xLjkgMS4xIDEuNSAxLjcuOSAxLjEgMiAyLjMgMy4yIDMuNnoiLz48L3N2Zz4=") no-repeat; }
    html:not([device="desktop"]) .sg-kuce-header-logo span {
      background: url("data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMjQyMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0IiB2aWV3Qm94PSI2MCA0MCA3MDAgMjAwIj4gIDxwYXRoIGZpbGw9IndoaXRlIiBkPSJNNTA2LjcgMTIyLjdjLTQuMy0xLjYtOC44LTIuNS0xMy40LTIuNy01LjEgMC05LjEgMS4zLTkuMSA2IDAgMTEgMjguMyA0LjIgMjguMyAyNi45IDAgMTUuMy0xMi40IDIxLjItMjYuNCAyMS4yLTYuNCAwLTEyLjctLjktMTguOC0yLjhsMS4xLTEzLjRzOS4yIDMuMSAxNyAzLjFjNS40IDAgOS45LTEuNyA5LjktNi40IDAtMTEuOC0yOC4zLTQuMi0yOC4zLTI2LjggMC0xNC4xIDExLjktMTkuOSAyNS0xOS45IDYtLjEgMTIgLjkgMTcuOCAyLjhsLTMuMSAxMnptLTUxLjggMGMtNC4zLTEuNi04LjgtMi41LTEzLjQtMi43LTUuMSAwLTkuMiAxLjMtOS4yIDYgMCAxMSAyOC40IDQuMiAyOC40IDI2LjkgMCAxNS4zLTEyLjUgMjEuMi0yNi40IDIxLjItNi40IDAtMTIuOC0xLTE5LTIuOGwxLjItMTMuNHM5LjMgMy4xIDE3LjEgMy4xYzUuMiAwIDkuOC0xLjcgOS44LTYuNCAwLTExLjgtMjguNC00LjItMjguNC0yNi44IDAtMTQuMSAxMi0xOS45IDI1LTE5LjkgNi4xLS4xIDEyLjIuOSAxOCAyLjhsLTMuMSAxMnptMjYxLjctMTVjMTIuMyAwIDE5LjUgNi43IDE5LjUgMjEuMnY0My44aC0xNi40di00MC40YzAtNi42LTEuOS0xMC45LTguOS0xMC45cy0xMy4xIDYuMS0xMy4xIDE3LjF2MzQuMmgtMTYuMXYtNDAuNGMwLTYuMS0yLTEwLjktOS0xMC45LTcuMyAwLTEzIDYuOC0xMyAxNy44djMzLjVINjQzVjEwOWMxMC45LTEuMyAxNSAzLjEgMTUuNCAxMC4yIDMuOS03LjMgMTEuNi0xMS43IDE5LjktMTEuNiAxMS40IDAgMTYgNi4zIDE3LjcgMTIuMyAyLjctNi4yIDkuOS0xMi4yIDIwLjYtMTIuMnpNMzgxLjcgMTA5Yy0zLjUgMTguOS0xMi43IDQ4LjYtMTguNCA2My42SDM0NmwtMTIuMi00Mi40aC0uMmwtMTIuMiA0Mi40aC0xNy4yYy01LjUtMTQuOC0xNS41LTQ1LjUtMTguNC02My42SDMwMmwxMC44IDQzLjhoLjJsMTIuOS00My44aDE2LjNsMTIuNSA0My40aC4zbDEwLjktNDMuNGgxNS44em0tMTA1LjggMTMuN2MtNC4zLTEuNi04LjgtMi41LTEzLjQtMi43LTUuMSAwLTkgMS4zLTkgNiAwIDExIDI4LjIgNC4yIDI4LjIgMjYuOSAwIDE1LjMtMTIuNCAyMS4yLTI2LjQgMjEuMi02LjQgMC0xMi43LS45LTE4LjgtMi44bDEtMTMuNHM5LjMgMy4xIDE3LjEgMy4xYzUuNCAwIDkuOS0xLjcgOS45LTYuNCAwLTExLjgtMjguMy00LjItMjguMy0yNi44IDAtMTQuMSAxMS45LTE5LjkgMjUtMTkuOSA2LS4xIDEyIC45IDE3LjggMi44bC0zLjEgMTJ6TTYwMi40IDE3NGMtMTguMSAwLTMwLjgtOS45LTMwLjgtMzIuMSAwLTE5LjkgMTMuMy0zNC4yIDMyLjctMzQuMiAxOCAwIDI5LjcgMTAuMSAyOS43IDMxLjgtLjEgMjAuNy0xMi43IDM0LjUtMzEuNiAzNC41em0uNy01Mi4zYy03LjMgMC0xNC4zIDUuNC0xNC4zIDE5LjQgMCAxMi4xIDQuNSAxOC45IDE0LjEgMTguOSA4LjEgMCAxNC4zLTYuNiAxNC4zLTE5LjQgMC0xMi40LTQuNS0xOC45LTE0LjEtMTguOXptLTIxMy45IDUxaDE2LjNWMTA5Yy03LjctLjgtMTYuMyAxLjMtMTYuMyAxMy4zdjUwLjR6bTktNzEuNmM1LjYuMSAxMC4zLTQuNCAxMC40LTEwVjkxYzAtNS42LTQuNy05LjgtMTAuNC05LjgtNS41LS4xLTEwIDQuMy0xMC4xIDkuOC4xIDUuNSA0LjUgOS45IDEwLjEgMTAuMXptMTUyLjMgNzIuN2MtMTguOSAwLTMxLjItOS40LTMxLjItMzIgMC0xOS4xIDEwLjUtMzMuOSAzMy44LTMzLjkgNS4zIDAgMTAuNi45IDE1LjUgMi43bC0zLjUgMTMuM2MtMy43LTEuNC03LjYtMi4yLTExLjUtMi4zLTExLjkgMC0xNi44IDcuOC0xNi44IDE5LjQgMCAxMS4zIDQuNCAxOC45IDE2LjEgMTguOSA0LjQgMCA4LjgtMSAxMi45LTIuOGwxLjkgMTMuMWMtMy4zIDItMTAgMy42LTE3LjIgMy42eiIvPiAgPHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGg4MDB2MjgwSDB6Ii8+ICA8cmFkaWFsR3JhZGllbnQgaWQ9IlNWR0lEXzFfIiBjeD0iOTQuMDgiIGN5PSIxMDcuODMiIHI9IjUwLjEzIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMjc5Ljg5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM0MkI0RjMiIHN0b3Atb3BhY2l0eT0iLjk4Ii8+ICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwM0E4MCIvPiAgPC9yYWRpYWxHcmFkaWVudD4gIDxwYXRoIGZpbGw9InVybCgjU1ZHSURfMV8pIiBkPSJNMTAyLjQgMjAyLjRjMS43IDEuNiAzLjUgMyA1LjQgNC40IDEuMy45IDIuNiAxLjggMy45IDIuNiAxLjggMS4xIDMuNyAyLjIgNS41IDMuMSAyLjUgMS4zIDYuNSAzLjEgOS4xIDQuMi0uNS0uOC0uOS0xLjMtMS40LTIuMi0xLjQtMS41LTIuNi0zLjEtMy42LTQuOC0xLjEtMS45LTItMy45LTIuNy01LjktLjUtMS42LTEuMS0zLjMtMS43LTUuMy0uNC0xLjMtLjctMi44LTEtNC4zLS4xLS4zLS4zLTEuNC0uNC0xLjctLjMtMS42LS42LTMtMS00LjRzLS43LTIuNy0xLjEtNC4xYy0uNy0yLjEtMS41LTQuMi0yLjQtNi4xLTEtMi4zLTIuMS00LjUtMy40LTYuNy0uOC0xLjQtMi45LTQuMS0zLjktNS40LS43LS45LTEuMy0xLjYtMi0yLjQtLjUtLjYtMS0xLjEtMS43LTEuOHMtMS42LTEuNi0yLjMtMi40Yy0uMS0uMSAwIDAtLjEuMS0xLjYgMS45LTMgNC00LjIgNi4yLTEgMS43LTEuOCAzLjUtMi41IDUuNC0uMyAxLS42IDIuMS0uOCAzLjItLjUgMi42LS41IDUuMi0uMSA3LjcuMyAxLjYuNiAzLjIgMS4yIDQuNy43IDIgMS42IDMuOSAyLjcgNS43bC40LjhjMi4zIDMuNCA1IDYuNiA4LjEgOS40eiIvPiAgPHJhZGlhbEdyYWRpZW50IGlkPSJTVkdJRF8yXyIgY3g9IjU4Ni44NzQiIGN5PSI0OTcuNjA5IiByPSI3Ny4zNyIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgtLjUzIC44NSAuNyAuNDQgMTYxLjg4IC01NzIuNjEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzVCQzBGRiIgc3RvcC1vcGFjaXR5PSIuOTgiLz4gICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDAzNzg5Ii8+ICA8L3JhZGlhbEdyYWRpZW50PiAgPHBhdGggZmlsbD0idXJsKCNTVkdJRF8yXykiIGQ9Ik0xMjYuMyAyMzYuMmMzLjYtLjMgNy4yLS44IDEwLjgtMS40IDQuOC0uOSA5LjQtMiAxNC4xLTMuNSA0LjEtMS4zIDgtMi43IDExLjktNC40IDMuNS0xLjUgNi45LTMuMiAxMC4yLTUuMSA0LjItMi40IDguMy01LjMgMTItOC40IDQuMi0zLjUgNy45LTcuNiAxMS0xMi4yIDMuMi00LjcgNS42LTEwIDcuMS0xNS42LjgtMy4yIDEuMy02LjUgMS40LTkuNy4yLTMuNy0uMi03LjQtMS4xLTExLjEtMS4zLTQuOS0zLjQtOS42LTYuMS0xMy45LTMuOS02LTguNC0xMS41LTEzLjUtMTYuNC01LjQtNS40LTExLjYtMTAuNy0xOC4xLTE2LjEtNC0zLjMtOC4xLTYuNi0xMi4zLTkuOS0zLjItMi42LTYuNC01LjItOS43LTcuOC0zLjYtMy03LjItNi0xMC43LTktMy4xLTIuOC02LjEtNS40LTguOS04LjItLjktLjktMS45LTEuOC0yLjgtMi44LTMtMy01LjktNi4yLTguOS05LjggMS43IDIuNSA0LjQgNi4zIDcgMTAuMiAxLjggMi42IDMuNCA1LjIgNC44IDggLjUgMSAxIDIuMSAxLjQgMy4yLjMuNy41IDEuNS41IDIuM3YxMjMuMmwtLjEgMTguNHoiLz4gIDxyYWRpYWxHcmFkaWVudCBpZD0iU1ZHSURfM18iIGN4PSI1NTkuMjQ3IiBjeT0iNDQzLjE5OSIgcj0iODkuNTQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoLS4zMiAuOTUgLjk2IC4zMiAtODguMjMgLTU2Mi4yNCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4gICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNUZDN0ZGIi8+ICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwMzc4NSIgc3RvcC1vcGFjaXR5PSIuOTgiLz4gIDwvcmFkaWFsR3JhZGllbnQ+ICA8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzNfKSIgZD0iTTEyNi4zIDIxNi43bDguMi05LjdjMS4yLTEuNCAzLjktNC44IDYuNC04LjFzNC44LTYuMiA1LjUtNy4yYy4zLS40IDQuNC02LjIgNC43LTYuNyAyLTIuOC42LS44IDEuNi0yLjIuNC0uNi43LS45IDMuNS01LjIuMy0uNS45LTEuMyAxLjMtMmwyLjgtNC42Yy41LS44LjktMS41IDEuMy0yLjIgMS4xLTIgMS45LTMuNiAyLjgtNS4yIDItMy43IDMtNS41IDQuOS05LjUgMS4zLTIuOCAyLjctNiAzLjYtOC4zLjYtMS42IDEuNi00LjIgMi4xLTUuNi40LTEgMS4yLTMuNiAxLjctNS4yLjktMyAxLjQtNS4xIDEuNi01LjktLjEtLjgtLjItMS41LS40LTIuMi0yLjEtMS44LTUtNC4zLTYuOS01LjktLjgtLjYtNi42LTUuNS03LjUtNi4zLTMuNy0zLTkuMi03LjQtMTMuMS0xMC42cy02LjYtNS4zLTEwLjQtOC41Yy0xMy44LTExLjQtMjAuNi0xOS4xLTI4LTI1LjcgMy42IDguMyAxMyAyMC4xIDEzIDI4LjN2MTE2LjRjLS4yLS4xLjMuNiAxLjMgMi4xeiIvPiAgPHJhZGlhbEdyYWRpZW50IGlkPSJTVkdJRF80XyIgY3g9IjE1MC43NSIgY3k9Ijc3LjIyNCIgcj0iNjMuMTQiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLS43IDAgMTI5LjU0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNFQzBBMUMiLz4gICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQkIwRTE1Ii8+ICA8L3JhZGlhbEdyYWRpZW50PiAgPHBhdGggZmlsbD0idXJsKCNTVkdJRF80XykiIGQ9Ik0xMzUuNCA5My41bDIuOCAyLjMgMi45IDIuNGMxLjIgMSA1LjUgNC41IDYgNC45bC44LjdjMi40IDIgOC45IDcuMSAxMC44IDguN2wuMi4yYzEuNSAxLjIgOC45IDcuMiAxMi42IDEwLjQgMy40IDIuOSA2LjQgNS42IDYuNyA1LjkuNy0zLjMgMS4zLTYuNiAxLjctMTAgLjQtNC4xLjUtOC4yLjItMTIuNC0uNC02LTItMTEuOC00LjUtMTcuMy0yLjItNC43LTUuMi05LTguOS0xMi43bC0xLjEtMS4xYy00LjEtMy44LTguOC02LjktMTQtOS00LjItMS44LTguNy0yLjktMTMuMi0zLjMtNS0uNC05LjYuNS0xMi42IDIuMS0uNi4zLTEuMS41LTEuMS41djE3LjljLjIuMiAxLjQgMS4zIDEuNCAxLjMgMi4yIDIuMSA0LjkgNC41IDYuMyA1LjcgMS4xIDEuMiAyIDIgMyAyLjh6Ii8+ICA8cmFkaWFsR3JhZGllbnQgaWQ9IlNWR0lEXzVfIiBjeD0iNDU1LjM3IiBjeT0iNjMwLjcwMiIgcj0iMTAzLjA1IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KC0uNyAuNyAuNTQgLjUzIDYwLjc2IC01NjYuMzEpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI0VDMEExQyIvPiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM5RTBEMTgiLz4gIDwvcmFkaWFsR3JhZGllbnQ+ICA8cGF0aCBmaWxsPSJ1cmwoI1NWR0lEXzVfKSIgZD0iTTExNi4yIDIwMC45Yy4yLjkuNSAxLjcuOCAyLjUuNCAxLjIuOSAyLjUgMS40IDMuNy44IDEuOSAxLjcgMy43IDIuOSA1LjMuOSAxLjMgMiAyLjQgMy4yIDMuMi42LjQgMS4yLjcgMS44IDF2LTM0LjJsLS43LS4yYy0uMy0uMS0uOC0uMi0uOC0uMlY5OC4zYy4xLTEuMy42LTIuNiAxLjQtMy43IDAgLjEgMCAwIDAgMC0uMS0uNy0uMi0xLjQtLjUtMi4xLS41LTEuNC0xLjEtMi44LTEuOS00LjItLjEtLjMtLjMtLjUtLjQtLjgtMS4yLTItMy4zLTUuNC00LjYtNy4zLTEuOS0yLjgtMS41LTIuMi0zLjQtNS0uNy0xLTItMi45LTIuNy00LTEtMS41LTIuMy02LjQtMy04LjEtMiAxLjUtNS4yIDMuOS03LjIgNS4zLTQuOCAzLjUtOS42IDctMTQuMyAxMC43LTMuMSAyLjQtNi4xIDQuOS05IDcuNi0yLjggMi42LTUuNSA1LjMtOCA4LjItNC42IDUuNS04LjMgMTEuOS04LjggMTkuMS0uMSAxLjItLjEgMi4zIDAgMy41LjEgMS4yLjMgMi40LjUgMy43LjkgNC40IDIuOCA4LjUgNS41IDEyIDMuMSAzLjkgNi42IDcuNCAxMC40IDEwLjVsMS45IDEuN2M0LjQgMy44IDguOCA3LjUgMTMgMTEuNiA2LjEgNS44IDExLjUgMTIuMyAxNS40IDIwLjMgMy43IDcuNSA0LjggMTUuNyA3LjEgMjMuNnoiLz4gIDxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMjYuMyA5NC42Yy00LjcuNi03LjggMy4zLTkuNyA3LjUtMS43IDMuOC0yLjYgOC01LjIgMTEuNS01LjIgNy4yLTE4LjggNS41LTIwLjkgMTUuMy0zIDE0LjQgMTUuOCAxNy41IDIxLjMgMjcuNiA0LjEgNy40IDIuMSAxOSA5LjggMjQuMiAxLjIuOCAyLjUgMS40IDMuOSAxLjcuMi4xLjUuMS43LjFsLjEtODcuOXoiLz4gIDxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHSURfNl8iIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTIzLjcyOSIgeTE9IjYyLjU3NCIgeDI9IjEwNi4xMjkiIHkyPSIxMjkuNzIzIiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMjc5Ljg5KSI+ICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzMyMDAwMCIvPiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1RDAwMDAiLz4gIDwvbGluZWFyR3JhZGllbnQ+ICA8cGF0aCBjbGFzcz0ic3Q4IiBkPSJNMTI2LjMgMTgyLjVjLS4yIDAtLjUtLjEtLjctLjEtMS40LS40LTIuNy0uOS0zLjktMS43LTcuNy01LjItNS43LTE2LjgtOS44LTI0LjItMS41LTIuNC0zLjQtNC41LTUuNi02LjFsLS4yLS4yYy0uOS45LTIuMiAyLjMtNC40IDQuNC0xLjcgMS43LTMuMiAzLjUtNC43IDUuNCA1IDUgOS4yIDEwLjggMTIuMyAxNy4yIDMuOCA4LjQgNC43IDE3LjUgNy43IDI2LjIgMSAzLjIgMi40IDYuMyA0LjMgOS4xIDEuMiAxLjggMyAzLjMgNSA0LjF2LTM0LjF6Ii8+ICA8cmFkaWFsR3JhZGllbnQgaWQ9IlNWR0lEXzdfIiBjeD0iMTI1LjI3IiBjeT0iMTk3LjgiIHI9IjM4LjE1IiBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDAgMjc5Ljg5KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPiAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMwMDM3ODkiLz4gICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNUZDN0ZGIiBzdG9wLW9wYWNpdHk9Ii45OCIvPiAgPC9yYWRpYWxHcmFkaWVudD4gIDxwYXRoIGNsYXNzPSJzdDkiIGQ9Ik0xMTcuMiA3Ni4yYy44LjkgMS45IDIgMi44IDMgMS4yIDEuMiAyLjIgMi4zIDMuNiAzLjYuOC44IDEuOSAxLjggMi43IDIuNlY0NS44Yy0uOS0uMi0xLjgtLjMtMi44LS4yLTIuNC4xLTQuNy42LTYuOSAxLjQtMiAuNy0zLjggMS43LTUuNCAzLjEtMS44IDEuNS0zLjEgMy42LTMuNiA1LjktLjUgMi41LS4xIDUuNiAxLjYgOS4zLjkgMiAyIDMuOCAzLjMgNS42LjEuMS45IDEuMSAxLjUgMS43LjkgMS4xIDIgMi4zIDMuMiAzLjZ6Ii8+PC9zdmc+") no-repeat;
      width: 100px;
      height: 30px; }

.sg-kuce-subheader-tools {
  display: flex;
  align-items: center;
  z-index: 3; }
  .sg-kuce-subheader-tools .sg-kuce-header-link, .sg-kuce-subheader-tools .sg-kuce-header-language-switch-dropdown ul .sg-kuce-header-changelang-link, .sg-kuce-header-language-switch-dropdown ul .sg-kuce-subheader-tools .sg-kuce-header-changelang-link {
    position: relative;
    padding-left: 12px;
    padding-right: 12px; }
    .sg-kuce-subheader-tools .sg-kuce-header-link:last-child, .sg-kuce-subheader-tools .sg-kuce-header-language-switch-dropdown ul .sg-kuce-header-changelang-link:last-child, .sg-kuce-header-language-switch-dropdown ul .sg-kuce-subheader-tools .sg-kuce-header-changelang-link:last-child {
      padding-right: 5px; }

.sg-kuce-header-language-switch {
  border: 1px solid transparent;
  position: relative; }
  .sg-kuce-header-language-switch.open {
    border-radius: 5px 5px 0 0;
    border-color: #F4F4F4;
    border-bottom-color: transparent;
    box-shadow: #d1d1d1 0 3px 6px;
    background-color: white; }
  .sg-kuce-header-language-switch:not(.open) .sg-kuce-header-language-switch-dropdown {
    display: none; }
  .sg-kuce-header-language-switch .sg-icon {
    margin-left: 5px; }

.sg-kuce-header-language-switch-dropdown {
  position: absolute;
  top: 100%;
  right: -1px;
  left: -1px;
  cursor: default;
  border: 1px solid #F4F4F4;
  border-top: none;
  box-shadow: #d1d1d1 0 3px 6px;
  background-color: white; }
  .sg-kuce-header-language-switch-dropdown ul {
    margin: 0;
    padding: 0;
    list-style: none; }
    .sg-kuce-header-language-switch-dropdown ul .sg-kuce-header-changelang-link {
      padding: 4px 0; }
    .sg-kuce-header-language-switch-dropdown ul li:first-of-type {
      padding-bottom: 4px; }

.sg-kuce-header-menu-button {
  position: relative;
  overflow: hidden;
  margin: 0 0 0 10px;
  padding: 0;
  width: 30px;
  font-size: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent; }
  .sg-kuce-header-menu-button.sg-kuce-header-menu-button-toggled span {
    background: none; }
    .sg-kuce-header-menu-button.sg-kuce-header-menu-button-toggled span::before, .sg-kuce-header-menu-button.sg-kuce-header-menu-button-toggled span::after {
      transition-delay: 0s, 0.3s; }
    .sg-kuce-header-menu-button.sg-kuce-header-menu-button-toggled span::before {
      margin-top: 0;
      transform: rotate(45deg); }
    .sg-kuce-header-menu-button.sg-kuce-header-menu-button-toggled span::after {
      margin-top: 0;
      transform: rotate(-45deg); }
  .sg-kuce-header-menu-button span {
    display: block;
    width: 100%;
    height: 3px;
    margin-top: -1px;
    background: white;
    transition: background 0s 0.3s; }
    .sg-kuce-header-menu-button span::before, .sg-kuce-header-menu-button span::after {
      content: "";
      position: absolute;
      display: block;
      left: 0;
      right: 0;
      height: 3px;
      background-color: white;
      transition-duration: 0.3s, 0.3s;
      transition-delay: 0.3s, 0s;
      transition-property: margin-top, transform; }
    .sg-kuce-header-menu-button span::before {
      margin-top: -10px; }
    .sg-kuce-header-menu-button span::after {
      margin-top: 10px; }

.sg-kuce-footer {
  background-color: #f5f5f5;
  color: #666;
  box-shadow: inset 0 3px 6px 1px #d9d9d9; }
  html[device="desktop"] .sg-kuce-footer {
    position: absolute;
    width: 100%;
    bottom: 0; }
  .sg-kuce-footer ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center; }
    .sg-kuce-footer ul a, .sg-kuce-footer ul span {
      padding: 0 20px; }
    .sg-kuce-footer ul li {
      border-left: 1px solid #333; }
      .sg-kuce-footer ul li:first-child {
        border-right: 1px solid #333; }
      .sg-kuce-footer ul li:nth-child(2), .sg-kuce-footer ul li:first-child {
        border-left: none; }
  .sg-kuce-footer a {
    text-decoration: none; }
    .sg-kuce-footer a:hover {
      text-decoration: underline; }
    html:not([device="desktop"]) .sg-kuce-footer a {
      color: #2d90ec; }

.sg-kuce-footer-left {
  display: flex;
  justify-content: flex-start; }
  .sg-kuce-footer-left a {
    margin: 18px 0 18px 20px;
    color: #666; }
    .sg-kuce-footer-left a:hover {
      color: #2d90ec; }

.sg-kuce-footer-right {
  margin: 18px 0;
  text-align: right;
  white-space: nowrap; }

.sg-kuce-footer-compact {
  display: none; }
  html:not([device="desktop"]) .sg-kuce-footer-compact {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center; }
    html:not([device="desktop"]) .sg-kuce-footer-compact a[data-changedevice="mobile"] {
      color: #666;
      text-decoration: none; }
  .sg-kuce-footer-compact > div {
    margin: 5px 0; }
  .sg-kuce-footer-compact ul {
    flex-wrap: wrap;
    justify-content: center; }
  .sg-kuce-footer-compact .sg-kuce-footer-links ul a, .sg-kuce-footer-compact .sg-kuce-footer-links ul span {
    padding: 0 10px; }
  @media (max-width: 380px) {
    .sg-kuce-footer-compact .sg-kuce-footer-links ul {
      flex-direction: column; }
      .sg-kuce-footer-compact .sg-kuce-footer-links ul li {
        border: none; } }

.sg-kuce-header-button {
  display: flex;
  align-items: center;
  margin: -1px 5px 0; }
  .sg-kuce-header-button .sg-icon {
    color: white;
    font-size: 30px; }

.sg-kuce-subheader .sg-kuce-searchbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-right: 10px;
  position: relative;
  color: #001155; }
  .sg-kuce-subheader .sg-kuce-searchbox input[type="text"] {
    border-radius: 5px 0 0 5px;
    padding-left: 5px; }
  .sg-kuce-subheader .sg-kuce-searchbox button {
    display: flex;
    align-items: center;
    margin-left: -1px;
    border: none;
    border-radius: 0 5px 5px 0;
    background: #193E84 linear-gradient(to bottom, #193E84, #001155); }
    .sg-kuce-subheader .sg-kuce-searchbox button .sg-icon.icon-search {
      color: white;
      font-size: 16px; }
  .sg-kuce-subheader .sg-kuce-searchbox input:focus ~ button, .sg-kuce-subheader .sg-kuce-searchbox button:hover {
    background: #41B7FD linear-gradient(#41B7FD, #0165D4); }

.sg-kuce-searchbox-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background-color: white;
  box-shadow: #d9d9d9 0 3px 6px;
  border-radius: 5px 5px 0 0; }
  .sg-kuce-searchbox-results:not(.sg-kuce-searchbox-results-open) {
    display: none; }
  .sg-kuce-searchbox-results ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    .sg-kuce-searchbox-results ul li {
      padding: 3px 10px; }
      .sg-kuce-searchbox-results ul li:hover {
        background-color: #f6f6f6;
        color: #2d90ec; }

.sg-kuce-search-button.sg-kuce-search-button-toggled .sg-icon {
  text-shadow: 0 0 10px #41B7FD; }

.sg-kuce-search-field-mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 10px 20px;
  background: #11AAFF linear-gradient(to bottom, #11AAFF, #0165D4); }
  .sg-kuce-search-field-mobile input {
    width: 100%;
    border: 1px solid #5E5555;
    border-radius: 6px;
    box-shadow: inset #999999 0 1px 2px 0;
    padding: 5px 10px;
    font-size: 15px; }
  .sg-kuce-search-button:not(.sg-kuce-search-button-toggled) .sg-kuce-search-field-mobile {
    display: none; }
  .sg-kuce-search-field-mobile .sg-kuce-searchbox-results {
    left: 20px;
    right: 20px; }

.sg-kuce-search-field-mobile-triangle {
  position: absolute;
  margin-right: -9px;
  top: -9px;
  height: 0;
  width: 0;
  border-right: 9px solid transparent;
  border-left: 9px solid transparent;
  border-bottom: 9px solid #11AAFF; }

.sg-new-ursa-header .sg-headerAgent .sg-agent-dealerid,.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab.sg-disabled i,.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab.sg-disabled span{opacity:.5}.sg-hidden,html[lang=de] [lang=fr],html[lang=de] [lang=it],html[lang=de] [lang=en],html[lang=fr] [lang=de],html[lang=fr] [lang=it],html[lang=fr] [lang=en],html[lang=it] [lang=de],html[lang=it] [lang=fr],html[lang=it] [lang=en],html[lang=en] [lang=de],html[lang=en] [lang=fr],html[lang=en] [lang=it]{display:none!important}.sg-menu,.sg-menu *,.sg-new-ursa-footer,.sg-new-ursa-footer *,.sg-new-ursa-header,.sg-new-ursa-header *,.sg-ursa-menu-button,.sg-ursa-menu-button *{box-sizing:border-box}.sg-new-ursa-header{margin:0 auto;position:relative;height:70px;background:#015;font-size:13px;line-height:1.3em;color:#fff}.sg-new-ursa-header .sg-headerLogo{display:block;margin-top:10px;margin-left:10px;width:125px;float:left;height:60px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAtCAYAAADydghMAAAAAXNSR0IArs4c6QAADCRJREFUaAXdmglwVdUZx7+7vLwlLytRIIkhbEFAChiEVqoWXDpWtC5FXEBbRBbLIG3HXTQM46B16j6o1CrWcUGtVtRanQE3MAgRFGQPISXbS0jykvfuve/d9fT/hTCliDMMc1/q9Jv5zTn33He/833nfOc7595Eoj6QBZ93FYSDykVdKSf1/HkFa/qgy+/tQv7eOz7dmPWNyA665jWO8O5wZGWaT2pPWk1GHa6qEnJw5+6zGqXIEk0zx6uxloEnbalPD2bYYckrfXe1ulZEB9YmXTdQVysJonG2ql7UWDJ8HOqST36csBr1hH95Ej/UKVC589OX57854hzaPGSiPGbvrkpXDf05kVeQA1cTzcXD9jUlzDUlWsPqk1D/w3qkod/gma1ZRRt1Cos3Rk4VWfd9LaZdslTY0QLRPmCQaCwZIppKhorGvLKD9VnFD2/LKyvoCw8Uvzs5VDQiZ3F+3u+g925HDoySbIkqOuooGVSoOW8A/XrL3ykVzSNbDZAkPPI8kec43tme50SmR9XqF9PptN82Ha3PV4ebiyuKHNWpkiT6PegnuYJsgTThSDSyYyftGTaSRqkmldTupGQ0n0hRSLguWY5HFrmVLslbb7GMfSuJvKON9LPuW9JqO6V8ANxbgix0KwmKkCdIABeLNSnJVJCO09j+EbrvjifpwOgzaWBLPSmmRY6ikifjt0SqK8S8pkjRKX46eKwuX2a4obQ0LOTAzfDtbsyNRA4csBGuDpFtmWQGUpS/aD6Ja2+ge5RRFJ9USRWt9VRcu5ts2yGNAnhMkCVRuat6f3vZTDUea6hf177MsCRC47Ag55DryZRyyEvZ5JmYb8uihNNOVll/Krx/KUVGV1DBpm9o/fCJ9OiDz9GXV/6KsiyDwnonQhqRL5PsSG5ZFZEvdh1vkHxRLAm3klxRQQbmKeXCWY9ShkZxK0bJwijlXj+TKJJDZkuCgmaayrfvp9ZTymjlAyvoo4WLyS3MoaABp4WDWVaioxDexzPWjzZfFEuyFPXSDgnA6cbyLNKyBUljz6LiS6bRafNuwXjglo3UhHVLmk4DdjRTumIgvb1kObWVDqOJz/6JgrV7yZBdDBuWfobEF4dJiCbHdVPC9cK2l6ZUrkK5N15PxYsXU2TwsB7TXU5iLhZ4yiIpbZOeNil3fyuFrUL6YuFNlCwvpzOW3U2djtwwZ8fGH7bDtuNusByx1pbdaZqrkTpyPJXfcz+pp/53wlUwyzIc9tLAtEkLZVGopZv62RHaO/V8alGfoVTR8NKL+0eDHwyXzExMsi9reFDrwTpY96SuUIOOLUizHDJaW75jryTgMZw19TQ5KC3LpqTnUTpukFrTSY3l40nKiT4yoFm7fG6NCHxHgQ8NvjjMdozRmz+yZbHAzgrWtX67gzY/sIy0xgYs3P9EpwTnJHZUS5Otm2TAcR20GzYd6NYp0thC+YnO4pBnPWgeaj13+uvCl23z6HHyzWFWOtlof9/NUm+wJWnLztVv2u9cN4P2f7qObPNwdPIEC8yqieSmJwyyu3Qy4Wi8rYu6UReqQronkaxI5aoq36uGW4YfbawfdV8dZoN+kYxvQCzOCOfkrd3webVYdOVVVPPh+6TIOIP1ZGqnJ5zjSYO64xpZHUlKt8YpiIGIWy61YjCSOLh4kvQzvD1eOvfZGl9D23eH2emrTbN2270r7u8YNdZq6krSW0+vQKtHsqpSCttSWtfJTeikdRsUP9RN3ZhtDndNT1EnwrvbxH6MvcmWaWZswMAzWKdf4s+2dIw1l20U/ZsH0JzA0KHBkhuQfffuJmEkSFFxEDN0OC4ogJ6jOIlpeIHw8rPJS+qYVcxpBCGfnUUSMjhJ8lDsZqVQv/WYLk76MiMzHOxuLw0c6J6iDh5L4VuWUltrB9Vt30rBrBBOJXBS00hnB7uT5BkGOQjnRFIjL55AWwLrWiMbs47tS8YpLnrS3h3nwYw4rKftbEkzQoE4jpmVl5JTWEaPzJlPuz9dS9FoLqIbixkvFRqSWRpvGCmEchIhnk5oJMFZGc5aGpKamcbrFo5tPkpGHG7VzbbmjmQs0dJGTkqlrJGTqGbHPnrq9tsoC6EcDiOEccxMYMuyMOOBlE6ObmCLMrBVpbBlGWQaabJstwvbWquP/mbokJ4MHmxOtL+umc6EgBIiO38o5WFPslMIU8emAG9PrkNpBeONSYzgWsFbZRqHlk68H1tY4FkhlyK2uy7btev8dDgjM/zVvGJDeO6rsXj8tVhzK96ACpFxZbwRIFPjC4eCWSUHnwbwLmwhaxtWGvszDiSY9XaE+SGsaZ0knNek19bsGRH7wTvMBtbePqnJdc27nFjsL7YdIrOwlByEsAo3ZMyy4FMXStlGVoaDNpy1cZ3CC4aB70OeK5a5ZH5MVRI2KP8kIzPcY54kidhjV9Tjc8BdnSnvxljJlE0qZlk1kz0HEAkhLTl4pQQenLc55HFf4OMeAvyP+Aiy8qt5Ewz/XD2sKXMO91oae2P2oTayVgs19zolUrCcnZOQeAUc5K/y+L5HKo6UbihETna0mQLKPMWhh/bfNrnNb2dZH7rrO6kYtfBiW8n5h1AkspGwLJy87EiYAnnRLi0v5+VUdvaLZBRup1VTMvapNiMnreMNYWXl3ECnmZsjI3GpkuwqwdC/KBzYFYpGq71AaJ0aVPfRiqvaj/esn219OMNVcvkYsyIg0bRQQG22o+ED6XC4JZiV27FnzU1Y2P+PMn26Mnp0FQ7JfbuUMjKUSELFYDLok78RZcSJE1UKJ4vAg2A3WH6iz/0vfufXtoTvs1QIykCfJcKTGbCepIVZCePhISAI+CjH2ZIdYEfikoQ/iwnB904FfBjoRBuaRAT1IqCBfmA82IV721HyXjsCBV6PqBu0oL0nOaF9EK75k2YKNINu3Os5UeEet/N/CvA1vzi09/bFegYDtrkObQmU3Af3L+O6DXW2cQxg++pQ8v1hKPIAPxNX0cBfFGaDKYCV7gd3gt+A/uAesA9cAOYDduYJwANzLbgSvAC2AR60GHRyB3PB5YBf4BvBE2h/C+UscDU4HfBArQJ8jx2ZAfiZ4YC//rHeZ3BvAsoFYCzggdiCtpVwoBp1tuuqXt1n917vwfWLqIcA/+mWE+VmtD3GI/AGYHkPPAlWgzHgS8ByBeDp5I5ZDoFzQQh8CFJgJqgCHAk3gctAGuwFD4NVgPWcB/j5dsDtr4KFIABuBnzPAZ+BL8D1gPvaBFjWgx09NSHeRdkfLOi9bkC5GVT3Xjei5IH5BDT3tq1gh3lGWOaCfMAjze2chFgWg0GAHzwic1AZCXaBj0AJeAR0gMvBnYDlFRAFPNKscxFg2QhOBRwJ3M6G7wQs/CzrKwcRsAqwrACngUpQA3QwHcwALNsA7xJnAraL5XHAunlQWdZz0nob8LpcDl4Bs3GDDeRw4e+rg8E5gNfVZtABOLTOBLze6gGvNRXwyZ/LLaAFXAPeAzxoZShrAC+PSeCfYAnaT0PJa5rLg+A5hGoTqEed88JZgO17BW0N4CvUPwCcP9i2KGD5DPc2oOR+46ATvIA2tm0nYDHYOF6ju8H5YCq4GHDS2gr2gp+AEYBn/lHAa+w8wG0CfN1bcsdhkI1O3oQjt6I+HfwYLAej0T4L7fNQvw6w3j8AzhPPA06QeFHu0YGiR458iOd2npwjwv2wpAGvaRZ+noXvsS1s2xHhxMbispIgeBrMAjzqLFNAE6gGPJM/B41gPeBZxl806ULAA7MJsB6eXe5EgVPc4TrAjj0FWH6J9myU38Lxm1EuBWzsTMCGs65h4BL8bggYjjo7Wg/ywQVo4zD/Keo8MTyDnChtwMJ+HBG2g23iKDha8D2F6CHABsYAO5cANTCKE9AXqM8AeYCVs9O7QBvgEP8W7AesmJcBO8AjzQN2B+DfshNs1F9BJVgGvbUoedTZqI8Bh9zrYBF4HKwHrG854GX2I8D6OFoGgQrwDNgIZgOWrMNFTyTys8yRCGE/WUJcOR1MAGwUP/QO+ASw1IADYByoxSDAVtHU28YOf422ONoKUdcAD0QSlILJgPVypxz2TwDu61wwEXDfLeApwIP8EmDHLgJTAQv/fhXg/n8LLgQs1eAl9M07ATvGoh8uerazLtQ5mo7MPkcQR0v3vwGfCdsWkauHjwAAAABJRU5ErkJggg==) no-repeat;background-size:60px 45px}.sg-new-ursa-header .sg-headerLogo img{border-width:0;vertical-align:middle}.sg-new-ursa-header .sg-headerUser{margin-top:10px;width:245px;float:left}.sg-new-ursa-header .sg-headerUser p{margin:0;padding:0}.sg-new-ursa-header .sg-headerTabs{position:absolute;top:10px;right:200px;width:428px}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab{height:60px;width:85px;float:right;cursor:pointer;text-align:center}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab.sg-disabled{cursor:default}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab .ursa-tab-wrapper{height:50px;border-left:1px solid #5c5c5c}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab.sg-active:not(.sg-disabled) .ursa-tab-wrapper,.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab.sg-substitute-last .ursa-tab-wrapper,.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab:hover:not(.sg-disabled) .ursa-tab-wrapper,.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab:last-child .ursa-tab-wrapper{border-left:1px solid #fff}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab .ursa-tab-wrapper div.ursa-tabcontent{position:relative;top:5px}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab .ursa-tab-wrapper div.ursa-tabcontent i{font-size:30px;position:relative}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab .ursa-tab-wrapper div.ursa-tabcontent div.ursa-tabtext{line-height:.9em;font-size:12px;height:23px;margin-top:-2px;display:flex;flex-direction:column;justify-content:center}.sg-new-ursa-header .sg-help-link span,.sg-new-ursa-header .sg-help-link-only span,.sg-new-ursa-header .sg-smartcno-link span{display:none}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab .ursa-tab-wrapper div.ursa-tabcontent div.ursa-tabtext span{padding-left:5px;padding-right:5px}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab:first-child .ursa-tab-wrapper{border-right:1px solid #fff}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab:last-child{margin-left:-1px}.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab.sg-active:not(.sg-disabled),.sg-new-ursa-header .sg-headerTabs .sg-inner-headerTabs .ursa-tab:hover:not(.sg-disabled){color:#2d90ec;margin-right:-1px;background-color:#fff}.sg-new-ursa-header .sg-help-link-only{position:absolute;right:160px;top:25px;font-size:20px;cursor:pointer}.sg-new-ursa-header .sg-help-link{position:absolute;text-align:center;right:160px;height:36px;width:36px;top:2px;font-size:20px;cursor:pointer;border-bottom:1px solid #bbb}.sg-new-ursa-header .sg-help-link i{position:relative;top:8px}.sg-new-ursa-header .sg-smartcno-link{position:absolute;text-align:center;right:160px;height:35px;width:36px;top:35px;font-size:20px;cursor:pointer}.sg-new-ursa-header .sg-smartcno-link i{position:relative;top:8px}.sg-new-ursa-header .sg-headerAgent{display:block;position:absolute;right:10px;top:16px;width:135px;line-height:1.1em;z-index:1000;cursor:pointer;background-color:#015}.sg-new-ursa-header .sg-headerAgent button{background:0 0;border:none;text-align:left;outline:0}.sg-new-ursa-header .sg-headerAgent .sg-agent-info{display:block;width:130px;padding:5px;cursor:pointer}.sg-new-ursa-header .sg-headerAgent .sg-agent-info i{display:block;position:absolute;right:7px;top:7px;font-size:14px}.sg-new-ursa-header .sg-headerAgent .sg-agent-name{display:block}.sg-new-ursa-header .sg-headerAgent [data-lang-switch]:hover,html[lang=de] .sg-new-ursa-header .sg-headerAgent [data-lang-switch=de],html[lang=fr] .sg-new-ursa-header .sg-headerAgent [data-lang-switch=fr],html[lang=it] .sg-new-ursa-header .sg-headerAgent [data-lang-switch=it],html[lang=en] .sg-new-ursa-header .sg-headerAgent [data-lang-switch=en]{color:#2d90ec}.sg-new-ursa-header .sg-headerAgent [role=menu]{display:none;padding:5px}.sg-new-ursa-header .sg-headerAgent [role=menu] a{color:#fff;width:120px;display:inline-block;text-decoration:none}.sg-new-ursa-header .sg-headerAgent [role=menu] .sg-divider{margin-top:10px;border-bottom:1px solid #fff;margin-bottom:10px;height:1px}.sg-new-ursa-header .sg-headerAgent.sg-open i{transform:rotate(180deg)}.sg-new-ursa-header .sg-headerAgent.sg-open [role=menu]{display:block}.sg-new-ursa-footer{margin:0 auto 320px;position:relative;padding:10px;border-top:1px solid #bbb}.sg-new-ursa-footer .sg-footer-content{color:#555;letter-spacing:0}.sg-new-ursa-footer .sg-footer-content .sg-footer-text{margin:0}.sg-new-ursa-footer [data-lang-switch]{cursor:default}html[lang=de] .sg-new-ursa-footer [data-lang-switch=de],html[lang=fr] .sg-new-ursa-footer [data-lang-switch=fr],html[lang=it] .sg-new-ursa-footer [data-lang-switch=it],html[lang=en] .sg-new-ursa-footer [data-lang-switch=en]{text-decoration:none}.sg-new-ursa-footer.sg-mobile{width:100%;margin-top:40px;background-color:#f5f5f5}.sg-new-ursa-footer.sg-mobile .sg-footer-content{padding-bottom:20px}.sg-new-ursa-footer.sg-mobile .sg-footer-content .sg-footer-part{text-align:center}.sg-new-ursa-header.sg-mobile{width:100%;height:90px;padding-left:16px;z-index:2}.sg-new-ursa-header.sg-mobile .sg-ursa-header-logo{margin-top:10px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAA+CAYAAAC7rUKSAAAAAXNSR0IArs4c6QAAFI1JREFUaAWtWgmUltV5fr/lX2f5GYYBGQYYVhHRRo1LIi649sSqaXtU3KKt+zFqtdHEehJBc07UVD114aRNDZjG1qUqpjEKanFBj0s5LojKNoMwCwzM9m/f/t0+z/1nEBBnBuTinfst997ved/7vMu9v4Z8y3L1m9vHJxKJHxlKThNRzV4Qt4ShLFx8av0733LqYYfbw/YYosPlK3pHWaa6OYplvlLSYKg4HUexFcZxzRDDDtir/QZ/6bKtVZbrXefF1o+VoTIisRgqEuWHnlmOigcM4RAT7Tf4ciFoLFrGD81YMib+WABvxYHEkYSbmydFQ3zzgL0y93em19Oj7HWRkSqUPMmjsnVKvrTXNMjpzy3Z32n3adx+g//d3Rf3GO2bW1ZbOXELZSkVHOmMkmK0t0VHr3jBVSJV20ZP/v6WpukntTdOP6J79PTafUI2gs77TZuz3nvx+580Tptz54W/kBpHSc4pSH9NQqbtaBk3tqftASXG6DBhjoMXMuCFIjet8h2N01YriZcZYrzS2NGyeQT4huyyz+CpwVLeuckNe2+68N1n65YdPFfemXK8TM13Sb9fkGhH99hkGI6N7CpTKcBU8SCARiVqBp6coZTa1pab+Lj48e+bnPa2wQ772u4TbdpGNX+n7LuPG5bxs7xVW9+8tcO89aVHVdXWTao1yEh3b7/0uoEZiGma1Df+7VEsyJPDs5liGndIJE+3Wo3nohd673sZEXhMbnaMmXwxlvwJaO5sw1LZwLJlh9TJmZ+uNO567REjQmSKC6GE/Xn4HQywLIoAWHvgojwUzDKykS3HGaZ6bGOq8Yb1Mj21r/CHBd/a3JxuHz/1l8owH4Y6Z4ttWARE1+jZKSnDSC9b/Se5tmOFSLJaVHcZyAEjSeBEyrpHgfpZlClGbEq9KHVPmCpcva8CDAm+vXHaxKRv/hew/iO0VScWPsoRA9UwYsnbtWL3OXLVJ8/Kodk+2VFVL0EeMSpli6LW94JdA+crcIt9YkMyEOLX+WzhDL4baflG8HRvmH4pJjobNQmO6jlBG00FNUAJfrzPqJKJa9bIpV++Kk0nzBY1arRIdzdAmQD4jZ+QGHNGeI24TKqlkGLc91Zu3NT9Bg9FmdD48Qj3T2ISCACGsFSwi4phhgMOpGKQsfiJtLiRIae99qTMjrfL0lvukkJjozRs21zpv4cAmkycD7SKUGNUvUCmOlii6NIVDQ3V+pvD/KkAG+hE4PDF34PGF+PRTNQByANXEXqwsqCJoSosOS5NCc2kjMp3Sn/Xdll00fXSPXeuzPtghdR2tEkpAywmTKUCUc9KBSCBE/yHSiEwD5Y1MNTMOFJLH/edHZUPffPfneCBxWifMOVwzLEY3WftHEL4xEvQAMv1VbjmUvMxYxCvPD8vZpVIbspUWdMwR54/9kQpH3aUHLH+A2nYuF68ZFbiBCIwR+mpMAckCJGSUgm0YVasRI1nytoLvQkfPyE9Q+ZIOwnZNXbKWEMZDwHPoTv1TbAEHcaiWKklLUflg3ii/3lej6hJo+Wg3yySWS88JZPHN4r12jp58bAT5K77n5R1p54uY3o7JFmEG6Ud8B+0jaaiD4DmvKwMbKg/CKryo3A7ZNHgtzQ1ZYKEcRN6nqh7Y1KoQyRA9aFjCoB7LKdEA0tNuUgXxy+JX5uScb+4Q7KXXCke1F9wA5FCQeo/a5MPx82Su3+1RFZedIXUOf1S3dMDkHC01LQWAPNyenIfn8UlWnVIwvaG5b2Jzoah7L/A2BsHgasAw1m5pJwZWo8InNpHi/wdtIGfRwrsqLxkTpgrYy65tDI8jEDcSDwMCzxPDmrZKl3WWLn/9n+R52/5uSSQ+ee2tUsc0l7gJgkXKNiSI/SuEKHOjTFomGJumD49aSjzXFAFjMVEAEywosETASbGva7QeoT3IdQewM25sSdxMiW5k08WM4XhA8VAPxsCaAoA1vitXWKUbHn8qn+SxXc9Ik7zBKnvaxfxkP9jFTQ7MTZG3BiwJRtijXt60NMNTrxHa1aVTW7Z6MsBGloFaLaVa9xT+6hsSRkQQgJoh12csCRy2MGSO+tMPXznH6AxwkAsaJ6rYMBVNvT3SW67K8vOuVAWPfgH2Xzc96Q22AEhy/BUJgzVkFDPjRWA8cWmshu0X9o569cuzNgIR0Prh2rDJMc1cICl9gkajWYOhoYEDe34KpQC+OtmLRn7138jVYccvsvEMDgMMEEfajYqY3U8H1QzpdYrS2NbSVYfeawsevhpWX3uBZI1HUkhnWbBp7TmQzAAlELEIBW+uZhWZCKOowM0PkiPilvcaTzaB4fguR/74nhFKYZ9EjTWyKSbfyyTf3rbbrNjrSQEcOxlxUSN/UBC15fQ8aEEQ5JxKE1fFqW3brz8/r7F8s7f3yjJKkuy5TxiFrWu0wVcKnM4zduRFVOZCoZI69GIqWm6S/JPaxut4xXEy4okDmmWcd89Whouv1RGzz1lN+C84UopgI9QbaychRpDMSEoFCI3MqtTkrAjGd/RLz1jcrL07vukd+o0OfbhX0l2cwdWE/HANqPAistvVBbja98YfGCHdlSwA2s72DIW1qg5QuysO4GHSLQm5mTC310h4668TFITpw2O/1qrQxbmUdA457M4JwSJA0sCPFNl+PlsQuwEKNedl6KfljeuvEZ6JjXL3Hvgbj/6UIqplG9GYdeCYcCbySDohxtcHnHJdMU3EXd9aD7AqYAbOhKNycrkBx+QSQvvGhI4JcEwaBych6HG9DjI8xWMV+FYQUFDvA4QB0LEDxdpc3XZlYM2lGXNGWfKy/f/VnpOPEVSnrut1DQdlB+6mI0dHTD36PFYkZ0VT0JvQuAeiOPErlSfeJLU/+0FQ880+BZLRm1b4I+BNvLBI7rdAPzHPQUIce9DMN8LpQyXm4xCaVxflrbDjpDld/5G2v7ygm1vL3mVJB6y6Agb15gr4bufJWDfojsEcBioB68SpJRkZjBHG2mB1qFlAbgQwCMAjAaAx6QPvBi9EXOaAH0CNxSXJI0CqV9flI76abJi4eIjo1ztVT96NV8/1Fc1+CmbNrnIu+8Exz+m1n0Ap3cJ4d4YVcs9XUPNsds70sYCbQx6mQBq0IChcWg7okDQfgzhGLmDgVUIPawwnHwAihmd2+F17NqsJH9u2eFtV7zcj83B3osGz1ez823rI9O4OTBVC/nOFJWbBR8GsHXlSil/uWHvM+z5FEo0oVWbORCA670tQGuPA+AeViEA333UAIrx0dfhPWJCX9nXdKor9kmmJy+pOLotNr2fXPzn7r2e+ewETwzfLW5dAaVdB62vQ1gBheAoMmnZ/sU6WfXTn4nTiZA+TIF/hpNBVIWPN6DJUNOH1IHRAqQ2VFCJnidA66AW3Uj6ULcVPUlgxVNJJG62JTY28YmEdbtthVdfvqI1veendwPPl8eXupbDcK8KlHqfAkRwaSqRki+eflbeufVm6f380z3n2O2eQUpB64r0GKBKDNARoy0ibQShfGjfg8dxXRwRIoA5eNcDrVOIrFVJmWE12nMlgNCyzTuVlz5HJ0u7fO1r4Pnu1OL2N8HQq6GrZSG9RjqBxCslHz/xjLx0xeXS+qfnYRjOLtPseontEKhDAejnSR0PNQBo1ggap18LAJjVR+RlLRYdbJSVJAHegS14oACVh6n4rBonFwsv+5+ts3f90s6d1K4Pef2HwN12cTbzJjzBOF+pOXEqYWAdZcfGzbL+5Zek0ylJbmKT1NSP2W1oqRTIsvc2y9otfTImlxEDYGhD2u9RKNBK/0Mb0y5AKw9CFbESo2rSUpVJId4g2MOgubmnA2BB9zFRrOpn/vAfXvzsmQeZw+lDDLZ7LWf39m6OLOs6bNceCn3fTcLv19VlZENvXu795b3yyK23SG/r7oZMTWlQ1DqMUSd3AFcGt0uoNMwQFGHCplAN0MbLl8WG8SaRPuTRp5/9tSdiPsUwwVkhhiEX2FXWSYNg90qbwZdsL+npyVfni7fVFZ174oLXuQkRsavGRDYo8toLL8lzD/wz0GpFfDUMGmVuo90i3R/9PKhCflPDDqoP4BGEcIuulHGd4SEVMBZgH/0QpAjBy6ikj94/YHZuXpAN3Hre01uwpRlG84NozgfDEV8Xbpl72mMtnkixHEsjhnP78dqrK6Tzi88Gu0I5QAA7iRA16U3I6xDATbSijdSXEg1Vc92TXhyN+xiShGVyVehaKbgLOpWgBA+CUPNoQD3Mbhin+Enz+AULFM4jRljO2KDGOt857mI73zfH/vwTvSnBfFKGC5w5a4ZMPeoYPVMR7u7PK1vk0007JFeN0wJuqBlxdUH0BXk1ldDS5/cAZE02KdWpJEBylwbvQieBtqIItIg33FTgEYir7SHuGd2/bERH3PSxpa7ShVHjzPmZmxZIZnu77Hj7f3nWKAEOVtvXrx0Ap1de+/kYvPWhRX5XIeLZEMCOE5LAihg2Phta0g1awBFIFjl57CBljm3IReFsMRMAS7uBqw4VnoMyPLilGlCPc0xpGhH40K2ebJcL18b42caZMFWqr79DqlrXiYMDJSZzHZu2VHiPfY32DwQA4C7oQjdBriYBxABYpsIW8nlEc7hCQ7KZhE6ZPRd+TeEay8nsli7aghAMeCHmsiAwA5cuSurxO1jzsAaLGbE/lxkqYc1i8qS2F8Q5ZJ6k598gVQAAE5B1La1woesq8+LD+gcFfDTwYZCgVYDqs/WxJcQzBc77jgMKxUjikB6A6y75jiCGyIXNMTwRjDtCX9oLA5veH4BmBuyBRx5wp5lhwZ/8uliBips4wIIG7UJRVB6gTp0vySOPF8bsjWs3yHvLl2nwpp3QfIXVVQwXdKH26G1iCBADAIViTqNph/syQFNIHyAjbtohAF1oDCE5LkQfVo6nMfMAyeY+UX9xiD8ZZ4MFJ5Hl5iIBk9cb655uKWcbJTr1EhmFlSwVS/Lk75bIundXSl0uLdkquCJaHlaBBsq8nh6IRkcKOBDMhS1U0mL4eQD2uRqo3O8qrIKhhcC64p4ZKrUfosbYzGDvAdyKe6ahS9OVDxlxvntOMor/Kgkt8tApxEcc8DFI14r16QqR3m7Z0rlNNnz0gXjbd8iaTiUb+01JJrFamJ7ZCrXESnPwYXjYp4LxWH4+YKGQaOhh6GnY16LwbFH5UvfE6hu22Q1LemxYg319nhEe8x8b22hA9ZiJ9OFmOg56xE2PluoZR0tm41p95vLRqk+lZU2LBLPmS+1BJ0BbvVxi/WWC4hyxwR8dMA+4bgc+WigBgHj8R8P2uUIcgbSCwHmERlfJH7n43kKL/VJLMhlsGhY8x+MX+XWOH38SRupwnFLACGBADEKJrAT1zfoj1BpPrwysSuCU8XsNNEitAgzfsdBHY9G1QRugFYUgABu7IFgF3CH0CbdoYBNkmTBOvE9ylZCdGkCsUOnPcCLxLtKJwojAB1Xqy6AcL+kuOg/g/FxwAgJjQpiHy1M1TVJVWytRPq+BZHD85+Iom3kN3Lf2KBbXG0AQZ2G8oAIMD6rUmx26VhII0HByxjt25BJDHNxHEMTmKiAuGPD9PNBxYuOpZefNZq/hy5rzD/WNsrMUXuKNPqSuPUik8vA6TGO3ZsdLMGYS0lnYFiqcKehL7ULPoIyFFdJ7WtCEZ5iw0soGBYarDRb3Ma5NVGyttEF7uC5hHKsDY3cxjnSih8JG6eVxGX8NlmV4bzMo2tqfHLMJe8+FBcff1AvQZSRoCtr2w4SUR01hbNG81ykaPkQfTi/DkwQKUREImgMgxgvmMPQ8Pt5x78qTBQrHVILPHAhVgodz8MwF/Rx8gFEW+O99BsokrhFpXgsASScq9VYYBreXnfI2H77ZLuVxTAeO10zQOTuBUwi6FPKdRon8WHsoncdjNXAz8AzGC8AUwkdbOcyFkBiHXRyOzpFVssUUTNwIHBnzo71u5l2NB39GDh6dX18wLxyTKz9nuMH1UnY2K0ZJcD+qbRaztkG7MqYLdGqkCjVugOP6CUBpPwlAFeGoSoJGBVD90w76hKwYwBNpH2PLqAEsGybyvm0YD264cQaDui77BJ4j1iw43+8q20sNN7zILRWWF5yiOIk6wR5HT0gtcfkZzDRlAEx7HIBibsOVMAGYwlHLX53U0ZXiHoJzF0Vfr3+nhbFC6W1I0m5ZdcNRLfojA3+GDVK7dt55/dkzqvfzP27JNf/gbcct9ZZVYga26bWpro/xYXB91CHipBthBC6yykpixtXgto6Kp+fHnfYmMcFBrRayc4XA5ePEALs3nOgiSUOanLDtzmTSvnZLdNIKmUeRvir7B35gfP/Gl/pqpp/+fyU/fsWzc246KE/K9bXWqKpJUqqZCnojR6EThLsjWPKe3KU3pI8PKQxA8/9TsBK2hMgc/SRyIwJneDat1ehyXf+Gvldk0Rws2+7lW4HnVKWNrwRB67JOZ8L8t2uN/PKmYIcqpSfP6MsclLYVk15qvqJ9kAGAIA4qVyFCimsAdBIaNhEbAoCPcK1wUqEs+4/Ksm6Kch+8K4uu/xpwfhuzHdhyWtOJh7XmTnw0sNQJyMABFIFJB5sKaKYB/BnHB11CaNhOJyUNsCGCWzmd5iFXp9j2/diOPyGLzto6FLoRRdihJtjz3cbRx9FmxcYhrcL/IEKPwF8PqW0dPQGeWucv4jbAp6FxcttNpYIwlfzP2LD+FYHjQ1kyjzFvyHLAwVuhYUdmaBNghelc3Apw4NcrQU6noPEENG0nE0EpkXwqNK3fxnH6Q/n3c/BLxu6G+U0SHHDw+kNULGoFNp8APB4obuNADyuVUkYy2QK+/zcM98lMlbeu998uwxHcyEAPCnPAwUdwHUiecLyGQAXAuEP+bZWiZMILEolN0Ppb2FIuC634/Zw5qrDmmfMQ1wj6mkFMI24POHj8L1wuomqrYRhpRMTPTcPchNOCj5EafoRfKzZX92fdVWd3RrJgQdw+Yph773jAweN8Y5ul8L90xWZkxmpjyjIL4jYEq96+ppI5EMeqvYPZ16f/D5ZkXgjIlyGGAAAAAElFTkSuQmCC) no-repeat;background-size:47px 62px;float:left;height:62px;width:47px}.sg-new-ursa-header.sg-mobile .sg-agent-info{color:#fff;padding-left:70px;padding-top:10px}.sg-new-ursa-header.sg-mobile .sg-agent-info .sg-agent-info-name{font-size:26px!important;margin:0;padding-top:2px}.sg-new-ursa-header.sg-mobile .sg-agent-info .sg-agent-info-id{font-size:20px!important;margin:0;padding-top:2px}.sg-app-menu-open .sg-header.sg-menu-transition{bottom:auto}.sg-ursa-menu-button{position:relative;height:68px;margin:5px 20px;width:68px;float:right;z-index:10}.sg-ursa-menu-button:before{background:#fff;box-shadow:0 20px 0 0 #fff,0 40px 0 0 #fff;content:"";height:6px;position:absolute;top:19px;width:68px}.sg-menu-transition .sg-app-menu-open,body.sg-app-menu-open .sg-menu-transition{transform:translateX(-250px);-webkit-transform:translateX(-250px);-ms-transform:translateX(-250px)}.sg-menu-transition{transition:transform .3s cubic-bezier(.25,.5,.5,.9);-webkit-transition:-webkit-transform .3s cubic-bezier(.25,.5,.5,.9)}.sg-menu.mobile{right:0;top:0;bottom:0;height:100%;width:250px;position:fixed;z-index:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-perspective:1000px;background-color:#f5f5f5;display:none}.sg-menu.mobile.sg-menu-open{display:block}.sg-menu.mobile:after{content:" ";display:block;position:absolute;left:0;width:0;top:0;bottom:0;box-shadow:0 0 8px 2px #bbb}.sg-menu.mobile .sg-navigation-header{width:100%;display:block;height:62px;font-size:1.5em;margin-bottom:10px}.sg-menu.mobile .sg-navigation-header>div{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAAA+CAYAAABA1nUIAAAAAXNSR0IArs4c6QAALGVJREFUeAHtnQeAXUX1/8+9r21v2VSWZJMQQknoCEgxNAFBKWEJTQQUFEHxp38L+gOC+EdFQX80DSqi/ighlAgiCIiEFkKXJHSSTS+b7eX1e3+fM/e93dd2swmiib5J5t07c2fmzpw73zlnzpyZteTDOte1PvNM73RJOue4lhxKcbuV2InLImWR2x7ab1zfhy2+mL9IgX8nCvg/TGNmz3btV5/s+rLrs38srgTFEdtyxRax6kqSfq5FV6RAkQKZFNhqwCnYXj6g93DHsX7iJqUEkInluOJzXQnE41FfiEDRFSlQpEAWBbYacEt3k5AdSX6+z2+XKLIsWJzPccQXj0jM8rtdE0ZmvagYKFKgSAGRrQbcvEliVbdWuTtv2iQ20qMfedLnJCQYi8n7k0ZH5838VGJKkcJFChQpkEWBrZ9n7Wf11f39jb+8YVdIV0e39HX2SLSzS1aFqmXKMwt7Krtf9cck8LGWsnGf3lC+4zFtFaOnwQmtrLcXA0UK/IdRYKs5HOCZ/urPzzx332//RZaVlUlj51oUlUlZH6qXc56Yd3F1W+fXeoPVVQiaAdtJuo74Y5tKd2hrcd1XUK08OLJvzZ/+w2hdbG6RAqpR3HK3vm78Ba2VY+/bZ+3SQ7/6wE0SjYVkU1evRLq6pXNji9idXXuJ406DoY0X1x3LdRwAbeRN+4hlfY7p3i9aQjs8sdY3duaWv72Yo0iB7ZcCW8Th2msaa6KWe63lyIlxOzSqJ1An33vhl/LUDrvLG43TJdS1UqLxEul1XJIEBpMfg5CrwbWlwbKsqSvs0ce4JckrG/s2rdt+yViseZECw6PAsDnc2pqJhwG2RyzXPc9ynFH+REIigXIZFemS2564Tso6NkhLZ1Skp0ecRJK3+wCcTtkGmbYR7QasBsvvOzfh+H/7Vln9vsOrcjFVkQLbLwWGBbh1tRMuti1nDutsB+L9ut4mYMplza01OEb23fC6/HDxfInX1omsWS8CGBVo3r8CxElj0HbF9UvAsq1jfJb9s6VVow8okLoYVaTAvw0FhgTce7JTaF3NhJ9iPXIFINtFgWYlAZsD2CCB61gSs4PSZVfLha/OleNLukQmTZXStSvFTkYEC5RBGVw/BQ0TBJqWdSjlfufl2nHj+58Vb/IpUHPaSVJ32mypabpCapsOyU9QjNmWKeAbrHIt9TuO84fcG8DDFwBCpQ03M5xNwaZog3/pFTBKn69cRoTXydSOTXL7ed+WQ959VQ5fvRAmGJJ4oERTZr8mxeGwvVTseuBVbme5jViuJObEev6anaEYEpltS+3I70LMy6DGp7mq3eoBUrpbu0R2f0vkzRwiF2m2LVKgIOA2VjVMSYrvl2BgJiCzDdgUXfpJjQcpJmipZAlQLOmzSmXnDW/ImpGT5OEvnCV7LVshk1e+ingJF/SXGmSmcGa4XkYxHugoA+dPijv+/GDta7+Kda3QiKJTCjT5pK5Fxe3f4uvxKpnotxsNMQ9gXHtAom92EC66bZwCeSLlmvqJU5N+3y9QMx5rJbBGTjoDYqRhRx7YiDVA0atg0hX2V0sf9iZf++XXpXV9h3zj6p/Ik0efJeVOu1SHN4JPWxxr4HUGcCniKNQsZXeoLulFE1xJXrCN0+2fW71xkRAE/AQvVQ1vrtsRok01oMx9UgxvcxQYQABVW1fT2OhLODf5ku6RNiBKi5D9ch/gUqCkwZZU0BGhSwBuol1WS0J2qYMtvrBIFtVPlu/8909k/syLJeSGpbZvPaByAV1BppoijKpZAJ0lez5fOW6XbY5a/6oKrUXt67prB329xagmu+unKbptnAL9vX/jyMYxIOcqxMeZlnK1/skVLeBTqkSJ7OgBDPFPH7PcplGScOISSa6T8pPOkOrLviVvTZwuz73YLT07jZclMz4hthuS3Ze8JFXRFon4yiRh6xqdY/JqsZ5Y6gFZxVPCoYjI+ttj3c/zuOjk/aRU7IKYYKtYOT6bINbdjFC/kb5bWJMpum2dAgZwdHqrp7zmfID2LTvhIPtRbQOwAaC5iHsaleZuevXCPulLrJGy/WdIwx23iv2xj8ljvSXyzOtrpLFXJLpjvSycMUP6ysbIlPeWyKhOFsdVmeJDOkLjYoBLSUmAazimAZxVEnXdTQDu/m2dgP+0+vW91SOlu77C+2oYqcKQv5n7ByXh/7a0zy3O3/5pH+LDvcgA7ksjJu1vO+5VdiI51rAbUGB0JMrBUlxMrzoHywadK/EE23EkIuPvnSslu3r7A578+zp5bm1UyiqDskM3ZZSHZNERe8uG0VOkcdky2XHjOywpOBKxSyRpG15nAKerdwo8Zo6qa+lsio2+8w5pUwZYdEqByFsbJPLm/RKa/or4kvdJ271/kNiS4q767ah3+DsbGuqicbSREYdjEqg5YEM1b4A1ALYUwwNthsOpfoOkSYDR57ZK2ZQDpfygffqbbbH+pvM/F9/nT0j9yj6pwt7ysVOPk5aGBvnSz6+Ugxc8KHY4Ka1lVYiYPspKMgOE0zF0K/BQjpZJaXikhJkafjTOksozRogvWm4WDH2+hMThHN0JFhPnxXJeSYtNk3Oi/ynB3He70jkX9a+62czBZ6uQMLSraqoTP2s3yaRftJ2xaFRq/N2yel546Izpp2hJK/214k+U0QF8gD0uMV8UqyJo9ciWi7INTaWIOdWIOSXiMsQGKMvx9UjbHZQ3TFfbVM13o07JkMmRYOHXLm0fXhnQrbE5KM23M3MZzM3wS92YsWgNyyQGdygJdsnGuzYMltrEV548QizoFGDOlEhEJWhvlJZ5PZl5rI1jJn+OD3GWFU4eLQlEPNpv5makSs/RDLdLgUy/rgJC4HZxJyYdyTUy+WdzZPQl56PU90wzr3y0Wa5d0CINo2tkZH2lhCorpBpQSVVQVu3qk1ErW+XC674vn/zj7SLhbllXPkp6bDsFOi3fhmv6lsTdxBnH9GxYoq/7h7kRTTvAtndHs7471ynAaCQYp+IWxHfbiVtL25ohxNtSW7lEmje4Ulc5A2LsQrXCiHOweSdAfRZLx71PDVqv2tM+xbOJlKnyAhNWm47hvCE1FS8U/NCN55ZIR9/HSLs3orZ2BG9+bcnrcLKBueyoM0ZLNLE7afag3qWY6twlHXevIL2OgQOu4uRR4g/sQprpRKLFdEdx1c6pAOkk/wZx7A8Az9sSt9+TrnltxGe7mlMmiG1PpeS9eEBb7BGUQ9vRgond5dFK3hfb+UBa+14fEnyjP1sukb5dKW9n3r0LwN2BXSOIx1BVLIDmbOQdy7l/Q5zAUum8E0VQjhv36TLpC9IWe0+eTCfnRMqp5F7brm1qxoLiZeLekY551KeQm21L9ZLDxWcfSv03kULTLZb2eZ1e6uNCfKMDKevjvGcP0tQbHuDKGuJeEtv3tLTOfSur5BGzdiXdQXzmfah/I8/K8LTJfZuaLaROT6XLZ+uo+wlquxMZDGdTkCVVjCSHetVCDlxVrNTnSYkn2QNHfUsnTpG6c07tBxtZvExqTxnHR/GBmESrSqSC+12XWLJy5xHy0x/9j6wePV5Ov/N/ZFTLKomWjZAIgE1SjyQUA9+0L4VgU+iH/bkwINXtWLO451HyabSKSSROX2ScthJH+0yLbXuR9PaeJCMreqjQLNKdZwihPyaNLBOZwcd/yow/Jm/6p+6sKnFjNxGc6EVRploIiAVIw5/l5u9efMZvV+8kOtD1FI9NaX+loKVcSSoFnCX1p4yRWOJq0p1DUEGPAzAyAykgox41TXuR+iLaMYsE1SZZ7g/f2NTJsd9kuPkGjx8dSDLblrqlR/LuL1KfE4n3RlKPAAS1fkqHVA4XwNZVHyltsioVk3mxsIiZJvHoTMB2Fg/oa/pu7pQkxhnapAPLOTZA0y1MR5jriJm7SJ99Gvm0TbuZuKxsGkOhXtxirHF+LvH4H6X7gVaTtv9nUUB8FWfT389NRW2iPldzf4PooBCLXkIh0MPiyAIKS7fRXK3PA5KnsfK5NAVoS2pOPZm4r5H/0IHEqZLFOpH8WsiPZGTTDXC79X4+Xo3FmSRqsaVA8wDn1VvrrhwNCZMruhQ3Lsq54wz0MT8cfOdpMvHq6yVQV5d+g3eFA0sijqcvxhAUkVmdPp/EKlD5245MfseSjeMt+cMV35A1EyfLOT+7XEauWCKxkirpCYbMOxktsG128ztz9puGH6ppP4HG30rj64eZyYUfdCLQxqTGfZq85+Xkm4Tlxzhpl5U58RArehSg5JyXPDeFRc1dic0HnDDiu7JzTo41hBeYuIYmtmG4l1KPz2elsaxska7u1I9Tzh9IMykr3eABPrPdMfC4KSi1S4+mjP/lXTUD8UPcMZUnbQHHIFfTfhwPfkgH90BSIFVOVBjpYm1WXPXM/eDG1/GOw7LiBw9M532/QVTdUypP/n4W6BpHox3o7cnICgdzL5L6WY9KPEz5gGNodxhQ+JWMOuMEGIpKJPeSvGDrU8XwzL0M6dGV+tNv9rMsFnUSLozF42zeuloKaOTAoAsPdhyUI26nJGsYIMbtKCM/fpSM+eKFUrafSizZTpcV0KakQMd0KApY4aVJP/MzRMdoyJKxqywp77PkqfNPknUTp8o5//+rMumVBYipSekJlWoT2ETghy3/A1z1rMm0SAmZCzadMrbSQEQkyCiIaKoF1BHdcl+U1fdqPHWZyZzJVvCnRnoTSyPlEBac5zLng41nOEuOIFSbEZO+xc7NZn2ROVF2Hv1g4/EqHmW6dqmQF0Xh0JGolID/osyH5t5SkTXldK4mcjs+F2z6CVVk1I6mi53MnQznC/GF35C2uS8Q77kaR8XtGwgUAtt64hXg1N+Ip1XmaslvpKQ3h5PwxAMbg5xaxAzqlHZaXtohBdy/IhWAO86kg9n3EJ6YTpBz1bYp/fKda30VsboX7nJN/1yqudeROhXxs7KwJObcQVxjRiHpwT7zm3uPXdmP/v0VAhfiMwuisxc0TtBkpzF1q4LDuavI0gbQGvLB5gEv4UQl6tskJdP2kLozzpGaU06Qkp1yvyllpp32gTiDHlzOUi6Hd+F0WLAwXYDzUUW3hHl4hyU7vyWy6tBd5eab75aTr/6W7PPYXHF7OyVcVhmxu1ry5xXpd2zJ1U7+Fy/NrbCCaQHs+25q0wzcmA+5E4gDRFYDXsU4z9l2K2LlMuqdyYFohXUwvWoeiTIAx6hutR9Ahy5JZ8+6uszRapINgGhFf3zdWZXixpmXaN/pdwqkD/oVGz5/OWHt4IM7v5xLEbmdW+v2LG27j+tiRAzkdripJQfxvo8zALw0UCB1t9uOoIxcWkVIswD/ezrlOvKWMiA1cL8PZRyG6POqrC3J5rQ1pzfCza8lT2599HXteMRglQ7cLqSB0bxTaQ9JmYOlnYrQSftGghPTURlX5YIrqcs6RCJtz1jCO2Y8T926F9PeVwkoJxrM6Vxyv9RDBRpiukUelsgsS7/lZOLsnMzfywiv4556uwxI1hTu98LnDliI0tKkI/lfXZ/VmLTtPfTLeOIjV769fv4k8/eYv1Oqjj5RGu/8tfirC08JSDrgkpSkgIsp4PAoxyw4FwgHe7RHxwEMNcPBgIS4n/SmyMaJI+TuG26Rlh+Mk8PvvNG1Il0bDvBG5IFyt+5OgcGoncWdtKRFfKgvS+c9y3OKneOFEa3SLsbaRyDwHJ02E3A8dQ+RxphPmhGp0q6mdRoKkkKdLJ1iD05d2oXAAODcmHa2PdIJUtduyl/UH8fpaIzC/cFBbhgsRIGZ6RhQnYul/b6lmZHc/84LZ7Sztp1Oa308J50G32PSf2yBeKJmwAFmULHZGZWbTUddcjVlTS2QhzUh6xbxR34rmx6kjSlX3TQRJco0OtwSL4Z6Oe7x3B+WTpJxfZ2yvyft9/y5P86I0tZ1hPfFp+a35inzaetwkeMeGlKp4xXEd3QfQFt9ifTc02Ki6k8fR79VsB7kJcn7/YCYS6HPw/1Papu+w/1l+OwB0pLRdl1z8+NMlxYBtKgCLO2TTPJV7Iy63eKfMknG33Tj8MCmZShajUgJuAyXox0ADdEVEzBHkvh41GF+iobaKElExr3vShUa3seuuFoe/OxV0RdnnJHbQSh5K1zjuYhNRvzJzmwxyqpidFCXsTQworqXVj2XkxQgyzTp7h2RFW/ZxxDOJnRWAmkEOLnAbTBlZafroKM83x9lDHCGqi8pXQO23JF4A1wsF4T9xWYtgSQdpVXuyKxdIo5YVpGRKeNWlTWZYONR9eJGAAHHznNo+uQr0nHPDVlg02Sd85YDoIfMVcM1rAm7lnbcbMf0HyocmQU2TaGaXNd3BncpwGZmcw9G45zmYJkPMu91wFgo7ffOkp55Htj06aa719KWb2YmzLjvgzWdkgU2fVhd/nN+F2ak679l2RmmlvT/Eao+nuRTIfwZr3rCBJpy1RiW7rCvBCeO6c+0uRu1meREIcClnI4SAZuKlhZhl3gHn8DHAF4UTWYMjU3Cx6RnrSu1G0T+euGlJfO//qupM/7WnvvxN/fq/OfNt0eJVJ6a7Vw5mYhvMpEdZ7RTZl6VnaQ/ZNZrnBcI5wIUJa+OfDrKG6cgPByfCTjAmvN+o6pH/ew58liN3GYDV+dcZZGXiN8Sl99O3cLjWBdLfdNUDzT9dc0v12Ke6mLFkO20TWgZ5SoUECM8Wg1Rhua1fCfwO05vMxyjrftLaZv3eEbcYLcoDnwqxqnPdHQqmc0Shoqk+a7j7mZGncd4kNuGiUYEzs+RGdNKl/99ZkT/vS+xjPvcb6+P/xdRbUV/uvSN6S+61JHvzGg4quWD913b+Q1crduYWEFibZljuA9qeh8ROs4N0+lO8DTgHADlxvBxBhBESrUwceCA6sGbWTlI0E0SmJYkULf7uuNS3sYBeyNCp5YHah466NHOumG+drBkWvM1eB3Bct0l1Ol12O0PpNqdITUnAfB+IGSnjbGIKfJWdqSGdB5XynCBq2pSRclUvHbStLuFG+1kGRS0pkt1GcoAXP1n4ByIUtlO074rax9iBN0C55Inv7MR5Z5Dd3keM54bpHbUcWjYRouu+2XXk2Cgg59CkkWQFn2dddbFEov8CO3sMaj6mVsMQivL2ZVyeJ7lWgktzooZLKA0sdxDCzyOM4DrXHQot4CHcKUsh1gpm+tH69DdKFgLuKB+z1wQ6xd9WNpbdEAt4DiktYDrFz8mdq+ab1nut5O2qzyJAQ2gWUGutrSvfE1i6we4bIFysqNUpEyqOOlxN+VwjnpKdlCeOIAvmeJyEbhemGcR4iIRLFMimDKwXjeyz0WqcA+pEftPB92zqjT7BVsaUsWILqoWdCMZeb/G/OEJlrZeZ9Hz21J3CiIe85BMVxKNMIF+IjPK3OuC58gKb87gs44hLlP00l27vyPfX4nP/GAsXNvaKaFT6QS+XK7KvI0nz5rnW/Jjoy20BrXMqaOd5/GuB+m0S6Sj5xqpa6IOqjFNOV1sdsx6HHOAgm4ssZfg/4R/XWorLpfqMxlkcmjFKW08T3N9bo17HxFxdTow5DUSUm3ulJw0Oggtl549N3HV+0GceUcBEFg6GOJqC+dVzt6WsxzhZdChWmmUOYh6T2wdhDPWP9PpzRUDiQIuK3KX6KpfwOEuAyoYnAA4rEOSVpm0vv+2vP3d2YY7FSgjL8pVBYkBFhxNxUi8cjo9XMiNwTuZu6lPkiaG70G50oG1UVtvRMK9WMRQYoAlBN0jVxEsPaiqovrPMhvr6a11OjfwNm/qhyhMcK/sCZD1KsSZZ6R2iYJngMiburAycQqNgPuxqOANCJYcTZ4BwFlYYTiopV3nPeKVQ6ZdJSD0ACfJHXlLLuBaqOWWA65t3pt06ut5iY6OQ7WTtSfrv0jxFKuwZ5N2oJ215cyFELU9iWCoMhpJ8z2x40tZJEe/lQW6fG7iCsoAe3gcm78EQ/VTAOEtntO6bEgHBr065h10wBzHAalezLuF28QS9JZvcVIV45a5vE68d3TV9Rxy92WGOCfKHp0kRyS48Qp5697fyeLLrxpW6UakNCBLSAJAKbAM3wRkHodTLgf4dEE8EkVKiUlPOCatvWHpJa0vCNCpmUqmIUBfFSw5+Oj9O+8a1ssHS9Q+7xpKPJ3HbwyWJCO+kT54ndTM2mMgjpEsblTWPQNx5s6Hzdxkc6fcLltB8xyMrQMu9zrxa0ya/h+n0dy6RiU+qj/au9mIJcPfc+KGF2y/Zw5zgTNIvACf3/GyS8Gszb0GywkFned0/lFTPgfiNxExHBEQ5Yb8TeoWpwYQwzFzuZuWvQWd04hwhcrw6jjUr5vQPp3/LgurDeN2zn/mPSB+7QC39+KG/lUzvy10eRl4q7sivubXgObEhOW2x/SsERairUhQXrr+x/LkyU0S4bDXoZwCRedwqhxJArwE4FLQJVWkVIFVARiNAbaYJCPEAbw4wItoHGqcpM8nPZAnypeE22Iw4AtUBUPHHvVQy+yh3ruZZ660T/uzlEawxLCO4JvcSPplQ+TZhTHn8qznKla68pesOA24ycnenMbY0GU+flY65ndK2/2AzVqe+YDweKmeOYkOX5YdbxbhF2mpOfHDDWLcPO1v0t5zLGUfxnuuJeObQ2QeS/eclZrTeckUdB3WH5HtD+HZJ4m8Cf/OEGWEmP98waMBRgCuWWDPTo6wwhSjPDtykJCxnMgSwTWhAmXEIDkGov1+TUN9cpxl6RwS1z4Y4LzHH/FvHuD0facBl3XJNY/AZI9nLvduHE4noTIWNypl8UMPyP17HyCr73tw8Kop4vBOSkGS1PU35nTxeAyOF8UDLOV2gM0N8wausR6eReLMy9HVk7eXdTwOlJVuyuiF1rYdqCoLhC448sF1+w/+4s09me0YRUQHplrVZd8SK4ihsOlQhcQ3tcjYCaVGZX+pm0JR7nX+ku2M/aOcSeSAOKkKX7GXEqfAUYMd5XKZ3JGO7juLuEPwmW49gQWZEVt+TzvVir9t2gu080qAcyAGxgdSzqMFytIOOJE5nT7PcABH18na5EnU3N9EROG5dTwJCtFKv/dR9BdPlLQsnWflOoyWrR1yIwuGI2wx8QyLMx9rPSdJ9bu5ypjMNNQjuScRucBspTOmAJed/J8dKgg4rYSC7tnEGhaH7aaYLQs4BBbxEjO70AjpWbtKLr/wfLntu98tWF8jUirYUPcnDegwdmaeplwsFmEhvS+C4bh3TYajoj7G3A1UGlvLKBwwyn2UvGGsVnrwbKuj/4bGBqzAbwq+dIsi6Uw6iut2EO1QlvMlsj+UV4Src7PSsQPxrM35jSYrm/tYagwt38JnLgc8C3sfmLc5WJqLNOPTroHF/0voxJ9KR6Su61khfDwnbiuDAE/bqcBpna7vPx3oF6JfOUqj+sIvSdGqY36HtG98DCH1RNIpBwbUWa6euWpKDMR6iX0gWU89U7e9cuIKByt7+higCnHUEizsjs2ZL+aUYfE8D3Bvg8TlOQn/JcFBAae1mQ1RPxNbvTgQj32ptHfdA2Xd69nN75O3K6tkZWebzLn5ZnnkxhvzKm4WvgGMLnLrYnccAMXhbHFERp2vRVCQRMIRiSoAue9BH9FH2FOUcOwe8XEFHNrLKFxOQderwFOeY4cmf/Le9efnvXSrI+hQbWqF4eaP3GpGGs+ZB/kCnbzqqZzXqVZuAj7V4biz5Gn+MmVLf7oOsxDa3B9WmztXRhHOHLEBslpaZCy6Z2T4cLeAT7egFO7I2QPIoC9iHmu28VgvkiQXcAO5LHmFQC5H4ethwVHTdPJAwkHu1j4EWG3mv3mO/ur+QMa9UpL3RCNqmy7i91B8Tr92F0rHCOj6r3cDHWSQusBYXIm1vv2wyH9tqNtx5bK2lZe+U1IitaVV7GLqlNtnXyUHz5ollSOZf7OOpk7X2nRJIKlipIqP9EMfv2pna5bVsShxMemz2ajqQ4TsiRMbCgA4ssEJY5SjaTnkmStzSNIkmNsxp4Th2qUhy38Zr7nNvGw4P9WnHolMOoUF4BcHNm9mZKxp+gShAcXBwKOEdFavHAhyt6E0JrXhe0HU4RnxXsMzIrh9Fs6SIUIqiJp0He+E7GRZIVWsPJkVsyWBmpmIyPbBgOoVODedPge4tbOmgZNC78cq3Wk2r6qbhejoYGPp/Fla74Mz5LgRs/ZHPPs0sbkKhnVwbNqIK4k8JOES5fgNJjzwo3vLbgQYBxH1B+bTH0hwBOIL1joudp1i606HF7EiuYuymrl/Gb/fQHZzN0kiJQsA7jXijz5haFxzOvv2EueT9vOkyNWQrudbPSVyK1qBf73bLODSVUR4X9H06/lzEz+64tKyF/8kdplfakrLZXlbq7z8yKMy4+yzmJJ430CXBSzApnaTEa5+1tjYJgwS2SOuoNNxyiIeY2aW3qQXIFVX+sTPbpxwH9p3P/a/AM2bB6qBAhkAnR4wRM+2bJ9vh+PuXH/EI2eOGV7ntNWqBA2l7fbwoVTMW0FB6/lAMcbCiVx1XqhcKtNhBOq+nP+hbkWNesoDaHZuzkycc0/59mricjiH9RpRa4nPfVc6+0rxxRjbttJZPtTz7OVSFXgtgqk0rYBcqyAga4hqbOzoPrnGAqWvl86+xaIWM66jHfxyPtIlAIOFcPc9gIB5GB9OjYMd83xH7rMHGdd6AO2Wx9V0wb626bekmYSvwWc6ncd9Gd8EKHUdSGkU4OOyVKIKJFe5113wx/Vsi/oBo/h8wtlOQWjJLZIMdfIegJTE8NxSaaEyOyEhy/2VlFlPKjW2BTdswH3yOXdUa7nMiV/5Y6n/aotYHywSF9EyCQjefGGhHHoG/TkFOIhmTLmiKD7sBNt5IKnt+titDuwQMf1EaFqLcJ9an5QGpQw8qtIkweY8OwDI4JLmG5urgpX0vMuYnGH9G/T5T4KAwwMcExQK0Ik0W+CN6Lcv9zHuleUyT8vpPETgOCXLusK7zfp1ZVP9JqltX0DsYfjsjmeSus8wGdXF62yXZB7nwxB4UMCxQTXToDc79yAhRqu0MzvAzfxFO56CgmUNBRvtFPbn6RmE+Q6u6t5klCx69EGvS152YvcDRW0i4Vx8EuIUDAXay5KHzW6Elnm9/cVbQXYWxKYTvrA/buCmnFv1A66/VN1Vrg5R3z7rbyhrbuT9X/Hisn7HEFI/lJvLHOiW/h0XQ6Xc/LMBOm8+LSn0u+RnKfQB8or75F/Wlwd6umbJ+vB0GbObdF15I2NKBZtKe82kZeWbS7O+gguoREVDABdFpAwzh+tlrqY+ipdomIGc+Rv5o1xL4V6cFibhHmw3meM5Jg2LAszlyIAHG8aj+NNlBdfxAdMD8yo6aIQ7OeeRtls7DyNqVtXTyVZArAuY86xMR2Rf28G99ftB8pIVy5KN61qz8xDqamnm4aq8eC8Cw173iUGeIeUZhQQjT45zjZ2AF+k6yqkrclKk21noW7NGyI7y9t7HTR49Z0R0v16WS9NqsIFpLR/kbETYd8g10MNUIeXzXUXUj7NK22yAvyuowFdnykj8ELrcsNlseQmw23R939Fd1lmPGhjydD6T68wxG6sK0Uhnq0r37AFC83uL6f1DRXaRecs95nHhF2TnRFIoGY2K/4sOILJbUOvvvb9ELroWTp6UckS/5X9fLNG+voFcSB+eSKlgi0kfvhfA9CmYYhF20EfFjvZhyhVhTga3YzCIoqlUJUoCgBnAkVZS3uJqwf0s1utslhPsOGd9OW7DjN8u1840DGe9S6KB0XfwHIDEvZlKYQF+7yODJ2P0Tfof4Hk+FzMmXPZr6FUYHXKdxlmLiEUpkOeWokd5LC82HcHfCEvfZl/Vji7lLPtdOsHGdHCIK+9378KfyXyLK0sI6hgDidMBoUDdTYqBH1etPhDXLBbIzdku0CTXqaW9E/wxaU4j7T087shNkhPWge5hs8s+/WDT/eswuP0+A9ypRD2M9+qafp57dVXD656BkcIVnPXSnPtY/OXQK3v3qUljwLPjIDSODdA4r8BBIwqWlY/0AvkZEibELHs35QWhGMBqYV2t6SwEujul7PVn5b3ODnnnpRdl7yOPYuqiGNY2eWJhAlCiqqSfofKztQ6qQiE/bY742fKE4iQOJ+xjkTwYQPxUKY+8atxsM+djbQFgK4AJ+znogcV9nStSelnQh+Ym20axQO21OonrmOPfRyUaCaj51kjuNa8a5arJ1kbq9x6FviOJwNvSfdcmng3t1O6w9tSTyFNHoz3iumh5xOpgcsshNoNkjyfukaD/HTRCzFnYjatb7VUBYXEQz1CnVvnLVqHiPYH3qWztdQB9XyL5IuD2OrudmAOHeow0E7nSTj04yNXNldpO1V61kXcZ735LfM47LMivzprbdHGkRJ1vDnV5CprvCLEbqR8inl1JOczvVDy1ALSlc+DFaLne3+xJVt5hQPOk7vQX+A6Up3VTD/31Y7rGAoR6yXLjfYEVTOG89qRJ6J1Lch+GAq/x8ScQPZ22NaTaxlyF9U095EfsJfQXDkS6T8X2wq65EaXXW7fQoRBX7YhJpIdCWWoOx/y8kKvwbUTRcDx1RYsH7dPfzDF79wqD0RHmn+4faCfbZMjjifthq1D5mXEz/ub6y6Idn427vtvUur80Gda/uCHxkfUSf/rPEvzvz8gqwHHYoYfJTU8vMFm/O+c5ueG6x6R3BN+pUqUDBSA7AbCPHImipIZu2c3ywqYSuHRZqZSgngwRXwLgSvWe9T4fVx8bVG2uqr7088zWM4VI5wekfp+/tSIR2mn+ebWDde3MZmTcY+FeVVEuQY5oM7ocjnzTBemc48wyMmynt+zeru6pkEDEa6fu/Us4YSxfhk8vFe06ORovFOKgGVZj9Yi9fwStdKdCZy+q6jizynKGgTWM4oUkgiFIrwc1xfpKzHwkFohKZ7zLzPuGyLItPKIHD+1GYkbbE4r6S1EeJZS7gB2b/TShVR3i7HaExHc9UEa/uVCeeuZpueWb/0/O/843pIz+bCung1MpR9P/Cjoftp5MvhhqLekGRJyujIiImAgXVGAFAG4Cr1cfXvMZzgZ3Q5eCMT9XjQ/49aYjUF7TPXTtCz1FfOrajFhSKNt2F4cavDOLf215C7xzKzmrc8uzDplDF+OHI5kMVYgnDXRl2e4MlX4bebZZwM07zUoedcfKleht0a4iwShHRQS0Iu1woQkS3+t4KVm6UKrhOrf+9DppeXupvFx9qMTrkUR8Cja8qvUxD1PAKWK7KKdHJSkWt3XPXQJOrThSOUKx6Zg1OMBoQIcYmQKfAlgBj9iKXOo0a922EToWq1GkwLAosFnAaSlRN7AqHA6vq3UsTKs4gQuOlEj0SaxltUQapjGxK5FqJLMkoHv0T49K8xgsSvY4GwQxkHEAkYJNEUVOCZO/G0WJ7hYwHBCwqTNAA4NACuBpWtbcACpRiPpIHngX7T5/rQ4MO2hNOLim6IoU2M4ooBqOzTo2z6xuiYZvX9fTI13d3YjOavvImmXrGmnn1OTIqEYAmJQqRP1aSvPpXEuVJWatlAjApko2tavsBllxlCD951ayMK6bVV31lJHkDBQ164ozYYyzcK73McBp4sgXpyxyW/Fkcv5mK15MUKTANkaBYQFu0dlTuji68q6WcN/69V09GJZ3SR9rZlFsIHvcUukeuTMciCPwAJQW6A+GABiyn87hjAciaBtjxMWZj6nW0QBSQQmodEe42aQKuHRXgVqoACjOOuHME3yEPGHyRigfVRv2KO6Kp1dOeGEbo2WxOkUKbJYCwxIptRSnovK9aEfvNbFw5IYEXCiIqh82w0ZR+F/tJCxOlJExJyOtqvWBFTeakRgFHVe1EgFphIlLLR8gJGpK84wSiUb7TCiJNhX9tzGWNlp3OJ4vwN9UoAD+WOTPZLbKqUVXpMD2RYFhcThtUvN5EyMbkpFfhK3Yne1spelld3aYLTZ2+yYJV43nTw4HPSVIqv3GmigFNAVbWrpUaHlra8rd8Mrl8DovTMIFjSipnAyuFlXrEzhcL76HOF0t5mjOxY6/81ep1xQvRQpsVxQYNuBMq2YfnihJyoW9buzhTixDwliPSEeHhEOjpbdmrKeUJKHyN8Wa4W4AxYBKOVkagIq+jEVtneOp7aQBnIIuJUqGSd9HvAGbWY9Aoe8mZ7/yxf107azoihTY7iiwZYCjeRt+ekxvb1XvrN5E5Hc94XBXDFOtmL9Sukbu5hkOkMYIiWnAAR7jFGzGE9J5nAJRgQfAdHcBikcYHudVEqd/jkt9GK/cTc81EBbNUVTeuvQbez7oFVj8LVJg+6NAvjHscNrw/AMctPbH+YnJR9iJeLzBsYL1MY7UG7F2kYRYHthYM1V6aqagCFHTvFxrGUUizlyY06VU/WoSpmZeLsoXB9OtJNekWv6olUlpQMqD1tz1sw/6ope5+FukwPZJgS3mcJnNTDz8tWvC8e4vJNpXPdBVMWnVhlG7mt0D5lRu5Wbq9KIaS+Vomd5M6oiHbalTPqhJmdF5DJC1Ot0DZ4d8sWDAnVfT2fM5HhVdkQLbNQW2jsNlNnnZkyvd5Y/PlfHHruiqHF85YuPrwd5QTXlX9e4+V7mbGi4bcKUyKarUKc50m5rx4N4XAGB4OJrnuS/xt9sB645o5fPntV17QS6rNMUUf4oU2J4o4LGXf2CNd5hw5OEcHvujljGH75t0+IsB/FliD3AgLcXNzGKdLgsEwLtqNzFWliA+pPcKtBB/7Cn4Puc9/lJu+PT1/8DqFYsqUuBfSoEPz+Fyqt/dubw5MvnM8ewE348dvxyUoyxNDbaUqfEPjqaeHdGADW5muBogY2eA4WwlwTbAtlAC1kVy42fYUlN0RQr8+1Bg2AvfW9LkhL+6ku3guq/UAM3kVe5mUEck3M1VwHGqMnZgHtCC/LXTUGCZhDgrZM7Jv96S9xXTFimwvVDgIwEcBsvAC6sRY3ysahCcMjoDOGxLAJsFd3ODgQSb4HrZm7YM8fI2FuJ+L7c2sa+p6IoU+PekwEcDONs15//0MzSQ5omS6FACgUQyGIhbJSGA5l/IEXi3S23iIbn188XF7H/PPlZsVQYFPhrAuTaHcPEXAtgigBrE4c/LcdIdu9oCvg3JUPB5pyT4uOMLPSzzL+BcjKIrUuA/hwIfDeD4Q+lsWN1Uwim/HBax1Pa5SxI++7XSZHDJ6r9+vdABOv85FC+29D+aAv8Hyz/AnIyD1OwAAAAASUVORK5CYII=);background-size:220px 62px;height:62px;margin-bottom:9px;margin-left:12px;margin-top:9px;width:220px}.sg-menu.mobile .sg-navigation-content{font-size:15px;margin-left:10px}.sg-menu.mobile .sg-navigation-content ul,.sg-menu.mobile .sg-navigation-content ul li{padding:0}.sg-menu.mobile .sg-navigation-content .ursa-menuitem{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;text-align:left;background-color:#f5f5f5;border-bottom:1px solid #ccc}.sg-menu.mobile .sg-navigation-content .ursa-menuitem.sg-active{background-color:#d9d9d9}.sg-menu.mobile .sg-navigation-content .ursa-menuitem.sg-active>a.sg-navigation{color:#015}.sg-menu.mobile .sg-navigation-content .ursa-menuitem.sg-disabled a{opacity:.5;cursor:default}.sg-menu.mobile .sg-navigation-content .ursa-menuitem a{color:#2d90ec;cursor:pointer;font-style:normal;font-variant:normal;text-decoration:none;text-transform:none}.sg-menu.mobile .sg-navigation-content .ursa-menuitem a.sg-navigation{display:inline-block;overflow:hidden;padding-left:20px;vertical-align:middle;line-height:50px;width:190px;text-overflow:ellipsis}.sg-new-ursa-footer,.sg-new-ursa-header{width:980px}.sg-menu.mobile .sg-navigation-content .ursa-menuitem a.sg-navigation:active,.sg-menu.mobile .sg-navigation-content .ursa-menuitem a.sg-navigation:hover{outline:0;text-decoration:none}.sg-new-ursa-header button{color:inherit;font:inherit;margin:0;border:0}.sg-new-ursa-header .sg-headerUser p{line-height:1.3em;font-size:13px}
@-webkit-keyframes ngdialog-fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ngdialog-fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes ngdialog-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes ngdialog-fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.ngdialog {
  box-sizing: border-box;
}

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

.ngdialog {
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* fix for Scrollbars not clickable on overflow #552 */
  background: rgba(0, 0, 0, 0.4); 
  -webkit-animation: ngdialog-fadein 0.5s; 
          animation: ngdialog-fadein 0.5s;
  /* end fix for Scrollbars not clickable on overflow #552 */
}

.ngdialog.ngdialog-disabled-animation,
.ngdialog.ngdialog-disabled-animation .ngdialog-overlay,
.ngdialog.ngdialog-disabled-animation .ngdialog-content {
  -webkit-animation: none!important;
  animation: none!important;
}

.ngdialog-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
  /* fix for Scrollbars not clickable on overflow #552 */
  margin-right: 15px;
  background: transparent;
  /* end fix for Scrollbars not clickable on overflow #552 */
}

.ngdialog-no-overlay {
  pointer-events: none;
}

.ngdialog.ngdialog-closing .ngdialog-overlay {
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadeout 0.5s;
  animation: ngdialog-fadeout 0.5s;
}

.ngdialog-content {
  background: white;
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadein 0.5s;
  animation: ngdialog-fadein 0.5s;
  pointer-events: all;
}

.ngdialog.ngdialog-closing .ngdialog-content {
  -webkit-backface-visibility: hidden;
  -webkit-animation: ngdialog-fadeout 0.5s;
  animation: ngdialog-fadeout 0.5s;
}

.ngdialog-close:before {
  font-family: 'Helvetica', Arial, sans-serif;
  content: '\00D7';
  cursor: pointer;
}

html.ngdialog-open,
body.ngdialog-open {
  overflow: hidden;
}