@charset "UTF-8";
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
@import url("https://smartdesign.immowelt.org/font/1.4.4/css/immo-sans.css");
*,
::before,
::after {
  box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/
html {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

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

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
}

/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

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

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

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

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/**
WORKAROUND FOR DUPLICATED MODULE
 */
/**
SIZES
 */
/**
BREAKPOINTS
 */
/**
MEDIAQUERY breakpoints for min-width
 */
/**
MEDIAQUERY breakpoints for max-width
 */
/**
GRID
 */
/* stylelint-disable-next-line */
/**
TRANSITION
 */
/**
FONT WEIGHT - BOLD
Is used in the mixin 'is-bold'
 */
/**
FONTS MAP
Attention the mobile information must be declared as a string.
 */
/**
SHADOWS
 */
/**
OPACITY
 */
/**
BORDER RADIUS
 */
/**
DISABLED MAP
 */
/**
COLOR MAP
 */
/**
PIXEL TO REM CONVERTER
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/functions
 */
/**
GET TYPO PROPERTY FROM FONTS MAP
 */
/**
GET COLOR FROM MAP
 */
/**
GET SHADOW FROM MAP
 */
/**
FLEXBOX
 */
/**
MEDIA QUERY
 */
/**
COLOR SCHEMES
 */
/**
TYPOGRAPHY
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/mixins?id=typography-mixin
 */
/**
FONT WEIGHT - BOLD
 */
/**
TRANSITION
 */
/**
CENTER
 */
/**
CLEARFIX
 */
/**
PADDING & MARGIN
 */
/**
DISABLED
 */
/**
DISABLED SHAKE
 */
/**
HOVER FOR NON TOUCH DEViCES
 */
/**
OUTLINE FOR FOCUSSED ELEMENTS
 */
/**
@import fonts
 */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 16px;
  color: var(--color-grey-700);
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  padding: 0;
  color: inherit;
  cursor: pointer;
  background-color: transparent;
  border-width: 0;
}

figure {
  margin: 0;
}

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

:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
  color: var(--color-grey-700);
}

b,
strong {
  font-weight: 700;
}

cite {
  font-style: normal;
}

fieldset {
  padding: 0;
  margin: 0;
  border-width: 0;
}

template {
  display: none !important;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-delay: -1ms !important;
    animation-delay: -1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.is-invisible {
  visibility: hidden;
}

.is-hidden {
  display: none;
}

.is-left {
  float: left;
}

.is-right {
  float: right;
}

.is-bold {
  font-weight: 700;
}

.is-relative {
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.bg-grey-100 {
  background-color: var(--color-grey-100);
}

.color-grey-500 {
  color: var(--color-grey-500);
}

/**
Text Helpers
*/
.disabled-calt-feature {
  font-feature-settings: "kern" 1, "calt" 0;
}

/**
Text Alignments
 */
.has-text-centered {
  text-align: center;
}

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

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

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

@media screen and (max-width: 1023px) {
  .has-text-centered-400 {
    text-align: center;
  }
  .has-text-left-400 {
    text-align: left;
  }
  .has-text-right-400 {
    text-align: right;
  }
  .has-text-justified-400 {
    text-align: justify;
  }
}
@media screen and (max-width: 767px) {
  .has-text-centered-300 {
    text-align: center;
  }
  .has-text-left-300 {
    text-align: left;
  }
  .has-text-right-300 {
    text-align: right;
  }
  .has-text-justified-300 {
    text-align: justify;
  }
}
@media screen and (max-width: 425px) {
  .has-text-centered-200 {
    text-align: center;
  }
  .has-text-left-200 {
    text-align: left;
  }
  .has-text-right-200 {
    text-align: right;
  }
  .has-text-justified-200 {
    text-align: justify;
  }
}
@media screen and (max-width: 359px) {
  .has-text-centered-100 {
    text-align: center;
  }
  .has-text-left-100 {
    text-align: left;
  }
  .has-text-right-100 {
    text-align: right;
  }
  .has-text-justified-100 {
    text-align: justify;
  }
}
@media screen and (max-width: 425px) {
  .is-full-width {
    width: 100%;
  }
}
*.is-disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.shadow--100 {
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

.shadow--200 {
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04), 0 5px 5px rgba(206, 132, 132, 0.05), 0 15px 30px rgba(50, 50, 93, 0.08);
}

.shadow--300 {
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04), 0 7.5px 9px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(50, 50, 93, 0.09);
}

.shadow--400 {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.03), 0 10px 15px rgba(0, 0, 0, 0.07), 0 32px 72px rgba(50, 50, 93, 0.12);
}

p a,
.has-font-100 a {
  text-decoration: underline;
  display: inline-block;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-secondary-400);
}

@media not all and (pointer: coarse) {
  p a:hover,
  .has-font-100 a:hover {
    color: var(--color-secondary-300);
  }
}
.link {
  display: inline-block;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-secondary-400);
}

.link::before, .link::after {
  display: inline-block;
  font-family: smartdesign-icons;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  .link::before, .link::after {
    transform: none !important;
  }
}
.link::before {
  padding-right: 0.25em;
}

.link::after {
  padding-left: 0.25em;
}

@media not all and (pointer: coarse) {
  .link:hover {
    color: var(--color-secondary-300);
  }
}
.link.link--inline {
  text-decoration: underline;
}

.link.link--primary::after {
  content: "long_arrow_right";
}

@media not all and (pointer: coarse) {
  .link.link--primary:hover::after {
    transform: translateX(0.25em);
  }
}
.link.link--external::after {
  color: var(--color-secondary-400);
  content: "long_arrow_top";
}

@media not all and (pointer: coarse) {
  .link.link--external:hover::after {
    color: var(--color-secondary-300);
    transform: translate(0.25em, -0.25em);
  }
}
.link.link--left-arrow::before {
  content: "long_arrow_left";
}

@media not all and (pointer: coarse) {
  .link.link--left-arrow:hover::before {
    transform: translateX(-0.25em);
  }
}
.link.link--left-arrow::after {
  content: "";
}

.link.link--no-arrow::after {
  padding-left: 0;
  content: "";
}

.link.link--read-more::after {
  content: "arrow_angle_down";
}

.link.link--read-less::after {
  content: "arrow_angle_down";
  transform: rotateX(180deg);
}

.link[href^=tel] {
  white-space: nowrap;
}

:root {
  --ripple-scale: 100;
}

.ripple--dark {
  overflow: hidden;
}

.animation-ripple, .animation-ripple--light, .animation-ripple--dark {
  position: absolute;
  width: 2px;
  height: 2px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-animation: ripple_effect_animation 0.3s ease-in-out;
  animation: ripple_effect_animation 0.3s ease-in-out;
}

.animation-ripple--dark {
  background-color: rgba(0, 0, 0, 0.1);
}

.animation-ripple--light {
  background-color: rgba(255, 255, 255, 0.1);
}

@-webkit-keyframes ripple_effect_animation {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(var(--ripple-scale));
  }
}
@keyframes ripple_effect_animation {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(var(--ripple-scale));
  }
}
/**
TYPOGRAPHY
 */
.has-font-500 {
  font-size: 2.125rem;
  line-height: 38px;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 767px) {
  .has-font-500 {
    font-size: 1.6875rem;
    line-height: 31px;
    letter-spacing: -0.02em;
  }
}
.has-font-400, h1 {
  font-size: 1.75rem;
  line-height: 32px;
  letter-spacing: -0.015em;
}

@media screen and (max-width: 767px) {
  .has-font-400, h1 {
    font-size: 1.5rem;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}
.has-font-300, h2 {
  font-size: 1.4375rem;
  line-height: 28px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .has-font-300, h2 {
    font-size: 1.375rem;
    line-height: 26px;
    letter-spacing: -0.01em;
  }
}
.has-font-200, h3 {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .has-font-200, h3 {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.has-font-100, p {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.has-font-75 {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.has-font-50 {
  font-size: 0.75rem;
  line-height: 20px;
  letter-spacing: -0.005em;
}

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

.mt-0, .my-0 {
  margin-top: 0 !important;
}

.mr-0, .mx-0 {
  margin-right: 0 !important;
}

.mb-0, .my-0 {
  margin-bottom: 0 !important;
}

.ml-0, .mx-0 {
  margin-left: 0 !important;
}

.m-50 {
  margin: 0.25rem !important;
}

.mt-50, .my-50 {
  margin-top: 0.25rem !important;
}

.mr-50, .mx-50 {
  margin-right: 0.25rem !important;
}

.mb-50, .my-50 {
  margin-bottom: 0.25rem !important;
}

.ml-50, .mx-50 {
  margin-left: 0.25rem !important;
}

.m-75 {
  margin: 0.5rem !important;
}

.mt-75, .my-75 {
  margin-top: 0.5rem !important;
}

.mr-75, .mx-75 {
  margin-right: 0.5rem !important;
}

.mb-75, .my-75 {
  margin-bottom: 0.5rem !important;
}

.ml-75, .mx-75 {
  margin-left: 0.5rem !important;
}

.m-100 {
  margin: 1rem !important;
}

.mt-100, .my-100 {
  margin-top: 1rem !important;
}

.mr-100, .mx-100 {
  margin-right: 1rem !important;
}

.mb-100, .my-100 {
  margin-bottom: 1rem !important;
}

.ml-100, .mx-100 {
  margin-left: 1rem !important;
}

.m-150 {
  margin: 1.5rem !important;
}

.mt-150, .my-150 {
  margin-top: 1.5rem !important;
}

.mr-150, .mx-150 {
  margin-right: 1.5rem !important;
}

.mb-150, .my-150 {
  margin-bottom: 1.5rem !important;
}

.ml-150, .mx-150 {
  margin-left: 1.5rem !important;
}

.m-200 {
  margin: 2rem !important;
}

.mt-200, .my-200 {
  margin-top: 2rem !important;
}

.mr-200, .mx-200 {
  margin-right: 2rem !important;
}

.mb-200, .my-200 {
  margin-bottom: 2rem !important;
}

.ml-200, .mx-200 {
  margin-left: 2rem !important;
}

.m-250 {
  margin: 2.5rem !important;
}

.mt-250, .my-250 {
  margin-top: 2.5rem !important;
}

.mr-250, .mx-250 {
  margin-right: 2.5rem !important;
}

.mb-250, .my-250 {
  margin-bottom: 2.5rem !important;
}

.ml-250, .mx-250 {
  margin-left: 2.5rem !important;
}

.m-300 {
  margin: 3.5rem !important;
}

.mt-300, .my-300 {
  margin-top: 3.5rem !important;
}

.mr-300, .mx-300 {
  margin-right: 3.5rem !important;
}

.mb-300, .my-300 {
  margin-bottom: 3.5rem !important;
}

.ml-300, .mx-300 {
  margin-left: 3.5rem !important;
}

.m-350 {
  margin: 5rem !important;
}

.mt-350, .my-350 {
  margin-top: 5rem !important;
}

.mr-350, .mx-350 {
  margin-right: 5rem !important;
}

.mb-350, .my-350 {
  margin-bottom: 5rem !important;
}

.ml-350, .mx-350 {
  margin-left: 5rem !important;
}

.m-400 {
  margin: 7.5rem !important;
}

.mt-400, .my-400 {
  margin-top: 7.5rem !important;
}

.mr-400, .mx-400 {
  margin-right: 7.5rem !important;
}

.mb-400, .my-400 {
  margin-bottom: 7.5rem !important;
}

.ml-400, .mx-400 {
  margin-left: 7.5rem !important;
}

.m-450 {
  margin: 9.5rem !important;
}

.mt-450, .my-450 {
  margin-top: 9.5rem !important;
}

.mr-450, .mx-450 {
  margin-right: 9.5rem !important;
}

.mb-450, .my-450 {
  margin-bottom: 9.5rem !important;
}

.ml-450, .mx-450 {
  margin-left: 9.5rem !important;
}

.m-500 {
  margin: 12.5rem !important;
}

.mt-500, .my-500 {
  margin-top: 12.5rem !important;
}

.mr-500, .mx-500 {
  margin-right: 12.5rem !important;
}

.mb-500, .my-500 {
  margin-bottom: 12.5rem !important;
}

.ml-500, .mx-500 {
  margin-left: 12.5rem !important;
}

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

.pt-0, .py-0 {
  padding-top: 0 !important;
}

.pr-0, .px-0 {
  padding-right: 0 !important;
}

.pb-0, .py-0 {
  padding-bottom: 0 !important;
}

.pl-0, .px-0 {
  padding-left: 0 !important;
}

.p-50 {
  padding: 0.25rem !important;
}

.pt-50, .py-50 {
  padding-top: 0.25rem !important;
}

.pr-50, .px-50 {
  padding-right: 0.25rem !important;
}

.pb-50, .py-50 {
  padding-bottom: 0.25rem !important;
}

.pl-50, .px-50 {
  padding-left: 0.25rem !important;
}

.p-75 {
  padding: 0.5rem !important;
}

.pt-75, .py-75 {
  padding-top: 0.5rem !important;
}

.pr-75, .px-75 {
  padding-right: 0.5rem !important;
}

.pb-75, .py-75 {
  padding-bottom: 0.5rem !important;
}

.pl-75, .px-75 {
  padding-left: 0.5rem !important;
}

.p-100 {
  padding: 1rem !important;
}

.pt-100, .py-100 {
  padding-top: 1rem !important;
}

.pr-100, .px-100 {
  padding-right: 1rem !important;
}

.pb-100, .py-100 {
  padding-bottom: 1rem !important;
}

.pl-100, .px-100 {
  padding-left: 1rem !important;
}

.p-150 {
  padding: 1.5rem !important;
}

.pt-150, .py-150 {
  padding-top: 1.5rem !important;
}

.pr-150, .px-150 {
  padding-right: 1.5rem !important;
}

.pb-150, .py-150 {
  padding-bottom: 1.5rem !important;
}

.pl-150, .px-150 {
  padding-left: 1.5rem !important;
}

.p-200 {
  padding: 2rem !important;
}

.pt-200, .py-200 {
  padding-top: 2rem !important;
}

.pr-200, .px-200 {
  padding-right: 2rem !important;
}

.pb-200, .py-200 {
  padding-bottom: 2rem !important;
}

.pl-200, .px-200 {
  padding-left: 2rem !important;
}

.p-250 {
  padding: 2.5rem !important;
}

.pt-250, .py-250 {
  padding-top: 2.5rem !important;
}

.pr-250, .px-250 {
  padding-right: 2.5rem !important;
}

.pb-250, .py-250 {
  padding-bottom: 2.5rem !important;
}

.pl-250, .px-250 {
  padding-left: 2.5rem !important;
}

.p-300 {
  padding: 3.5rem !important;
}

.pt-300, .py-300 {
  padding-top: 3.5rem !important;
}

.pr-300, .px-300 {
  padding-right: 3.5rem !important;
}

.pb-300, .py-300 {
  padding-bottom: 3.5rem !important;
}

.pl-300, .px-300 {
  padding-left: 3.5rem !important;
}

.p-350 {
  padding: 5rem !important;
}

.pt-350, .py-350 {
  padding-top: 5rem !important;
}

.pr-350, .px-350 {
  padding-right: 5rem !important;
}

.pb-350, .py-350 {
  padding-bottom: 5rem !important;
}

.pl-350, .px-350 {
  padding-left: 5rem !important;
}

.p-400 {
  padding: 7.5rem !important;
}

.pt-400, .py-400 {
  padding-top: 7.5rem !important;
}

.pr-400, .px-400 {
  padding-right: 7.5rem !important;
}

.pb-400, .py-400 {
  padding-bottom: 7.5rem !important;
}

.pl-400, .px-400 {
  padding-left: 7.5rem !important;
}

.p-450 {
  padding: 9.5rem !important;
}

.pt-450, .py-450 {
  padding-top: 9.5rem !important;
}

.pr-450, .px-450 {
  padding-right: 9.5rem !important;
}

.pb-450, .py-450 {
  padding-bottom: 9.5rem !important;
}

.pl-450, .px-450 {
  padding-left: 9.5rem !important;
}

.p-500 {
  padding: 12.5rem !important;
}

.pt-500, .py-500 {
  padding-top: 12.5rem !important;
}

.pr-500, .px-500 {
  padding-right: 12.5rem !important;
}

.pb-500, .py-500 {
  padding-bottom: 12.5rem !important;
}

.pl-500, .px-500 {
  padding-left: 12.5rem !important;
}

@media screen and (max-width: 1023px) {
  .m-0\:400 {
    margin: 0 !important;
  }
  .mt-0\:400, .my-0\:400 {
    margin-top: 0 !important;
  }
  .mr-0\:400, .mx-0\:400 {
    margin-right: 0 !important;
  }
  .mb-0\:400, .my-0\:400 {
    margin-bottom: 0 !important;
  }
  .ml-0\:400, .mx-0\:400 {
    margin-left: 0 !important;
  }
  .m-50\:400 {
    margin: 0.25rem !important;
  }
  .mt-50\:400, .my-50\:400 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:400, .mx-50\:400 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:400, .my-50\:400 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:400, .mx-50\:400 {
    margin-left: 0.25rem !important;
  }
  .m-75\:400 {
    margin: 0.5rem !important;
  }
  .mt-75\:400, .my-75\:400 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:400, .mx-75\:400 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:400, .my-75\:400 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:400, .mx-75\:400 {
    margin-left: 0.5rem !important;
  }
  .m-100\:400 {
    margin: 1rem !important;
  }
  .mt-100\:400, .my-100\:400 {
    margin-top: 1rem !important;
  }
  .mr-100\:400, .mx-100\:400 {
    margin-right: 1rem !important;
  }
  .mb-100\:400, .my-100\:400 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:400, .mx-100\:400 {
    margin-left: 1rem !important;
  }
  .m-150\:400 {
    margin: 1.5rem !important;
  }
  .mt-150\:400, .my-150\:400 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:400, .mx-150\:400 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:400, .my-150\:400 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:400, .mx-150\:400 {
    margin-left: 1.5rem !important;
  }
  .m-200\:400 {
    margin: 2rem !important;
  }
  .mt-200\:400, .my-200\:400 {
    margin-top: 2rem !important;
  }
  .mr-200\:400, .mx-200\:400 {
    margin-right: 2rem !important;
  }
  .mb-200\:400, .my-200\:400 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:400, .mx-200\:400 {
    margin-left: 2rem !important;
  }
  .m-250\:400 {
    margin: 2.5rem !important;
  }
  .mt-250\:400, .my-250\:400 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:400, .mx-250\:400 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:400, .my-250\:400 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:400, .mx-250\:400 {
    margin-left: 2.5rem !important;
  }
  .m-300\:400 {
    margin: 3.5rem !important;
  }
  .mt-300\:400, .my-300\:400 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:400, .mx-300\:400 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:400, .my-300\:400 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:400, .mx-300\:400 {
    margin-left: 3.5rem !important;
  }
  .m-350\:400 {
    margin: 5rem !important;
  }
  .mt-350\:400, .my-350\:400 {
    margin-top: 5rem !important;
  }
  .mr-350\:400, .mx-350\:400 {
    margin-right: 5rem !important;
  }
  .mb-350\:400, .my-350\:400 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:400, .mx-350\:400 {
    margin-left: 5rem !important;
  }
  .m-400\:400 {
    margin: 7.5rem !important;
  }
  .mt-400\:400, .my-400\:400 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:400, .mx-400\:400 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:400, .my-400\:400 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:400, .mx-400\:400 {
    margin-left: 7.5rem !important;
  }
  .m-450\:400 {
    margin: 9.5rem !important;
  }
  .mt-450\:400, .my-450\:400 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:400, .mx-450\:400 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:400, .my-450\:400 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:400, .mx-450\:400 {
    margin-left: 9.5rem !important;
  }
  .m-500\:400 {
    margin: 12.5rem !important;
  }
  .mt-500\:400, .my-500\:400 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:400, .mx-500\:400 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:400, .my-500\:400 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:400, .mx-500\:400 {
    margin-left: 12.5rem !important;
  }
  .p-0\:400 {
    padding: 0 !important;
  }
  .pt-0\:400, .py-0\:400 {
    padding-top: 0 !important;
  }
  .pr-0\:400, .px-0\:400 {
    padding-right: 0 !important;
  }
  .pb-0\:400, .py-0\:400 {
    padding-bottom: 0 !important;
  }
  .pl-0\:400, .px-0\:400 {
    padding-left: 0 !important;
  }
  .p-50\:400 {
    padding: 0.25rem !important;
  }
  .pt-50\:400, .py-50\:400 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:400, .px-50\:400 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:400, .py-50\:400 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:400, .px-50\:400 {
    padding-left: 0.25rem !important;
  }
  .p-75\:400 {
    padding: 0.5rem !important;
  }
  .pt-75\:400, .py-75\:400 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:400, .px-75\:400 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:400, .py-75\:400 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:400, .px-75\:400 {
    padding-left: 0.5rem !important;
  }
  .p-100\:400 {
    padding: 1rem !important;
  }
  .pt-100\:400, .py-100\:400 {
    padding-top: 1rem !important;
  }
  .pr-100\:400, .px-100\:400 {
    padding-right: 1rem !important;
  }
  .pb-100\:400, .py-100\:400 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:400, .px-100\:400 {
    padding-left: 1rem !important;
  }
  .p-150\:400 {
    padding: 1.5rem !important;
  }
  .pt-150\:400, .py-150\:400 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:400, .px-150\:400 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:400, .py-150\:400 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:400, .px-150\:400 {
    padding-left: 1.5rem !important;
  }
  .p-200\:400 {
    padding: 2rem !important;
  }
  .pt-200\:400, .py-200\:400 {
    padding-top: 2rem !important;
  }
  .pr-200\:400, .px-200\:400 {
    padding-right: 2rem !important;
  }
  .pb-200\:400, .py-200\:400 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:400, .px-200\:400 {
    padding-left: 2rem !important;
  }
  .p-250\:400 {
    padding: 2.5rem !important;
  }
  .pt-250\:400, .py-250\:400 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:400, .px-250\:400 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:400, .py-250\:400 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:400, .px-250\:400 {
    padding-left: 2.5rem !important;
  }
  .p-300\:400 {
    padding: 3.5rem !important;
  }
  .pt-300\:400, .py-300\:400 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:400, .px-300\:400 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:400, .py-300\:400 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:400, .px-300\:400 {
    padding-left: 3.5rem !important;
  }
  .p-350\:400 {
    padding: 5rem !important;
  }
  .pt-350\:400, .py-350\:400 {
    padding-top: 5rem !important;
  }
  .pr-350\:400, .px-350\:400 {
    padding-right: 5rem !important;
  }
  .pb-350\:400, .py-350\:400 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:400, .px-350\:400 {
    padding-left: 5rem !important;
  }
  .p-400\:400 {
    padding: 7.5rem !important;
  }
  .pt-400\:400, .py-400\:400 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:400, .px-400\:400 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:400, .py-400\:400 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:400, .px-400\:400 {
    padding-left: 7.5rem !important;
  }
  .p-450\:400 {
    padding: 9.5rem !important;
  }
  .pt-450\:400, .py-450\:400 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:400, .px-450\:400 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:400, .py-450\:400 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:400, .px-450\:400 {
    padding-left: 9.5rem !important;
  }
  .p-500\:400 {
    padding: 12.5rem !important;
  }
  .pt-500\:400, .py-500\:400 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:400, .px-500\:400 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:400, .py-500\:400 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:400, .px-500\:400 {
    padding-left: 12.5rem !important;
  }
}
@media screen and (max-width: 767px) {
  .m-0\:300 {
    margin: 0 !important;
  }
  .mt-0\:300, .my-0\:300 {
    margin-top: 0 !important;
  }
  .mr-0\:300, .mx-0\:300 {
    margin-right: 0 !important;
  }
  .mb-0\:300, .my-0\:300 {
    margin-bottom: 0 !important;
  }
  .ml-0\:300, .mx-0\:300 {
    margin-left: 0 !important;
  }
  .m-50\:300 {
    margin: 0.25rem !important;
  }
  .mt-50\:300, .my-50\:300 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:300, .mx-50\:300 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:300, .my-50\:300 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:300, .mx-50\:300 {
    margin-left: 0.25rem !important;
  }
  .m-75\:300 {
    margin: 0.5rem !important;
  }
  .mt-75\:300, .my-75\:300 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:300, .mx-75\:300 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:300, .my-75\:300 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:300, .mx-75\:300 {
    margin-left: 0.5rem !important;
  }
  .m-100\:300 {
    margin: 1rem !important;
  }
  .mt-100\:300, .my-100\:300 {
    margin-top: 1rem !important;
  }
  .mr-100\:300, .mx-100\:300 {
    margin-right: 1rem !important;
  }
  .mb-100\:300, .my-100\:300 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:300, .mx-100\:300 {
    margin-left: 1rem !important;
  }
  .m-150\:300 {
    margin: 1.5rem !important;
  }
  .mt-150\:300, .my-150\:300 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:300, .mx-150\:300 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:300, .my-150\:300 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:300, .mx-150\:300 {
    margin-left: 1.5rem !important;
  }
  .m-200\:300 {
    margin: 2rem !important;
  }
  .mt-200\:300, .my-200\:300 {
    margin-top: 2rem !important;
  }
  .mr-200\:300, .mx-200\:300 {
    margin-right: 2rem !important;
  }
  .mb-200\:300, .my-200\:300 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:300, .mx-200\:300 {
    margin-left: 2rem !important;
  }
  .m-250\:300 {
    margin: 2.5rem !important;
  }
  .mt-250\:300, .my-250\:300 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:300, .mx-250\:300 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:300, .my-250\:300 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:300, .mx-250\:300 {
    margin-left: 2.5rem !important;
  }
  .m-300\:300 {
    margin: 3.5rem !important;
  }
  .mt-300\:300, .my-300\:300 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:300, .mx-300\:300 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:300, .my-300\:300 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:300, .mx-300\:300 {
    margin-left: 3.5rem !important;
  }
  .m-350\:300 {
    margin: 5rem !important;
  }
  .mt-350\:300, .my-350\:300 {
    margin-top: 5rem !important;
  }
  .mr-350\:300, .mx-350\:300 {
    margin-right: 5rem !important;
  }
  .mb-350\:300, .my-350\:300 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:300, .mx-350\:300 {
    margin-left: 5rem !important;
  }
  .m-400\:300 {
    margin: 7.5rem !important;
  }
  .mt-400\:300, .my-400\:300 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:300, .mx-400\:300 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:300, .my-400\:300 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:300, .mx-400\:300 {
    margin-left: 7.5rem !important;
  }
  .m-450\:300 {
    margin: 9.5rem !important;
  }
  .mt-450\:300, .my-450\:300 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:300, .mx-450\:300 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:300, .my-450\:300 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:300, .mx-450\:300 {
    margin-left: 9.5rem !important;
  }
  .m-500\:300 {
    margin: 12.5rem !important;
  }
  .mt-500\:300, .my-500\:300 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:300, .mx-500\:300 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:300, .my-500\:300 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:300, .mx-500\:300 {
    margin-left: 12.5rem !important;
  }
  .p-0\:300 {
    padding: 0 !important;
  }
  .pt-0\:300, .py-0\:300 {
    padding-top: 0 !important;
  }
  .pr-0\:300, .px-0\:300 {
    padding-right: 0 !important;
  }
  .pb-0\:300, .py-0\:300 {
    padding-bottom: 0 !important;
  }
  .pl-0\:300, .px-0\:300 {
    padding-left: 0 !important;
  }
  .p-50\:300 {
    padding: 0.25rem !important;
  }
  .pt-50\:300, .py-50\:300 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:300, .px-50\:300 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:300, .py-50\:300 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:300, .px-50\:300 {
    padding-left: 0.25rem !important;
  }
  .p-75\:300 {
    padding: 0.5rem !important;
  }
  .pt-75\:300, .py-75\:300 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:300, .px-75\:300 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:300, .py-75\:300 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:300, .px-75\:300 {
    padding-left: 0.5rem !important;
  }
  .p-100\:300 {
    padding: 1rem !important;
  }
  .pt-100\:300, .py-100\:300 {
    padding-top: 1rem !important;
  }
  .pr-100\:300, .px-100\:300 {
    padding-right: 1rem !important;
  }
  .pb-100\:300, .py-100\:300 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:300, .px-100\:300 {
    padding-left: 1rem !important;
  }
  .p-150\:300 {
    padding: 1.5rem !important;
  }
  .pt-150\:300, .py-150\:300 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:300, .px-150\:300 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:300, .py-150\:300 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:300, .px-150\:300 {
    padding-left: 1.5rem !important;
  }
  .p-200\:300 {
    padding: 2rem !important;
  }
  .pt-200\:300, .py-200\:300 {
    padding-top: 2rem !important;
  }
  .pr-200\:300, .px-200\:300 {
    padding-right: 2rem !important;
  }
  .pb-200\:300, .py-200\:300 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:300, .px-200\:300 {
    padding-left: 2rem !important;
  }
  .p-250\:300 {
    padding: 2.5rem !important;
  }
  .pt-250\:300, .py-250\:300 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:300, .px-250\:300 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:300, .py-250\:300 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:300, .px-250\:300 {
    padding-left: 2.5rem !important;
  }
  .p-300\:300 {
    padding: 3.5rem !important;
  }
  .pt-300\:300, .py-300\:300 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:300, .px-300\:300 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:300, .py-300\:300 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:300, .px-300\:300 {
    padding-left: 3.5rem !important;
  }
  .p-350\:300 {
    padding: 5rem !important;
  }
  .pt-350\:300, .py-350\:300 {
    padding-top: 5rem !important;
  }
  .pr-350\:300, .px-350\:300 {
    padding-right: 5rem !important;
  }
  .pb-350\:300, .py-350\:300 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:300, .px-350\:300 {
    padding-left: 5rem !important;
  }
  .p-400\:300 {
    padding: 7.5rem !important;
  }
  .pt-400\:300, .py-400\:300 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:300, .px-400\:300 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:300, .py-400\:300 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:300, .px-400\:300 {
    padding-left: 7.5rem !important;
  }
  .p-450\:300 {
    padding: 9.5rem !important;
  }
  .pt-450\:300, .py-450\:300 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:300, .px-450\:300 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:300, .py-450\:300 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:300, .px-450\:300 {
    padding-left: 9.5rem !important;
  }
  .p-500\:300 {
    padding: 12.5rem !important;
  }
  .pt-500\:300, .py-500\:300 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:300, .px-500\:300 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:300, .py-500\:300 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:300, .px-500\:300 {
    padding-left: 12.5rem !important;
  }
}
@media screen and (max-width: 425px) {
  .m-0\:200 {
    margin: 0 !important;
  }
  .mt-0\:200, .my-0\:200 {
    margin-top: 0 !important;
  }
  .mr-0\:200, .mx-0\:200 {
    margin-right: 0 !important;
  }
  .mb-0\:200, .my-0\:200 {
    margin-bottom: 0 !important;
  }
  .ml-0\:200, .mx-0\:200 {
    margin-left: 0 !important;
  }
  .m-50\:200 {
    margin: 0.25rem !important;
  }
  .mt-50\:200, .my-50\:200 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:200, .mx-50\:200 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:200, .my-50\:200 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:200, .mx-50\:200 {
    margin-left: 0.25rem !important;
  }
  .m-75\:200 {
    margin: 0.5rem !important;
  }
  .mt-75\:200, .my-75\:200 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:200, .mx-75\:200 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:200, .my-75\:200 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:200, .mx-75\:200 {
    margin-left: 0.5rem !important;
  }
  .m-100\:200 {
    margin: 1rem !important;
  }
  .mt-100\:200, .my-100\:200 {
    margin-top: 1rem !important;
  }
  .mr-100\:200, .mx-100\:200 {
    margin-right: 1rem !important;
  }
  .mb-100\:200, .my-100\:200 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:200, .mx-100\:200 {
    margin-left: 1rem !important;
  }
  .m-150\:200 {
    margin: 1.5rem !important;
  }
  .mt-150\:200, .my-150\:200 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:200, .mx-150\:200 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:200, .my-150\:200 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:200, .mx-150\:200 {
    margin-left: 1.5rem !important;
  }
  .m-200\:200 {
    margin: 2rem !important;
  }
  .mt-200\:200, .my-200\:200 {
    margin-top: 2rem !important;
  }
  .mr-200\:200, .mx-200\:200 {
    margin-right: 2rem !important;
  }
  .mb-200\:200, .my-200\:200 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:200, .mx-200\:200 {
    margin-left: 2rem !important;
  }
  .m-250\:200 {
    margin: 2.5rem !important;
  }
  .mt-250\:200, .my-250\:200 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:200, .mx-250\:200 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:200, .my-250\:200 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:200, .mx-250\:200 {
    margin-left: 2.5rem !important;
  }
  .m-300\:200 {
    margin: 3.5rem !important;
  }
  .mt-300\:200, .my-300\:200 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:200, .mx-300\:200 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:200, .my-300\:200 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:200, .mx-300\:200 {
    margin-left: 3.5rem !important;
  }
  .m-350\:200 {
    margin: 5rem !important;
  }
  .mt-350\:200, .my-350\:200 {
    margin-top: 5rem !important;
  }
  .mr-350\:200, .mx-350\:200 {
    margin-right: 5rem !important;
  }
  .mb-350\:200, .my-350\:200 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:200, .mx-350\:200 {
    margin-left: 5rem !important;
  }
  .m-400\:200 {
    margin: 7.5rem !important;
  }
  .mt-400\:200, .my-400\:200 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:200, .mx-400\:200 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:200, .my-400\:200 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:200, .mx-400\:200 {
    margin-left: 7.5rem !important;
  }
  .m-450\:200 {
    margin: 9.5rem !important;
  }
  .mt-450\:200, .my-450\:200 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:200, .mx-450\:200 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:200, .my-450\:200 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:200, .mx-450\:200 {
    margin-left: 9.5rem !important;
  }
  .m-500\:200 {
    margin: 12.5rem !important;
  }
  .mt-500\:200, .my-500\:200 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:200, .mx-500\:200 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:200, .my-500\:200 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:200, .mx-500\:200 {
    margin-left: 12.5rem !important;
  }
  .p-0\:200 {
    padding: 0 !important;
  }
  .pt-0\:200, .py-0\:200 {
    padding-top: 0 !important;
  }
  .pr-0\:200, .px-0\:200 {
    padding-right: 0 !important;
  }
  .pb-0\:200, .py-0\:200 {
    padding-bottom: 0 !important;
  }
  .pl-0\:200, .px-0\:200 {
    padding-left: 0 !important;
  }
  .p-50\:200 {
    padding: 0.25rem !important;
  }
  .pt-50\:200, .py-50\:200 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:200, .px-50\:200 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:200, .py-50\:200 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:200, .px-50\:200 {
    padding-left: 0.25rem !important;
  }
  .p-75\:200 {
    padding: 0.5rem !important;
  }
  .pt-75\:200, .py-75\:200 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:200, .px-75\:200 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:200, .py-75\:200 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:200, .px-75\:200 {
    padding-left: 0.5rem !important;
  }
  .p-100\:200 {
    padding: 1rem !important;
  }
  .pt-100\:200, .py-100\:200 {
    padding-top: 1rem !important;
  }
  .pr-100\:200, .px-100\:200 {
    padding-right: 1rem !important;
  }
  .pb-100\:200, .py-100\:200 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:200, .px-100\:200 {
    padding-left: 1rem !important;
  }
  .p-150\:200 {
    padding: 1.5rem !important;
  }
  .pt-150\:200, .py-150\:200 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:200, .px-150\:200 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:200, .py-150\:200 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:200, .px-150\:200 {
    padding-left: 1.5rem !important;
  }
  .p-200\:200 {
    padding: 2rem !important;
  }
  .pt-200\:200, .py-200\:200 {
    padding-top: 2rem !important;
  }
  .pr-200\:200, .px-200\:200 {
    padding-right: 2rem !important;
  }
  .pb-200\:200, .py-200\:200 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:200, .px-200\:200 {
    padding-left: 2rem !important;
  }
  .p-250\:200 {
    padding: 2.5rem !important;
  }
  .pt-250\:200, .py-250\:200 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:200, .px-250\:200 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:200, .py-250\:200 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:200, .px-250\:200 {
    padding-left: 2.5rem !important;
  }
  .p-300\:200 {
    padding: 3.5rem !important;
  }
  .pt-300\:200, .py-300\:200 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:200, .px-300\:200 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:200, .py-300\:200 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:200, .px-300\:200 {
    padding-left: 3.5rem !important;
  }
  .p-350\:200 {
    padding: 5rem !important;
  }
  .pt-350\:200, .py-350\:200 {
    padding-top: 5rem !important;
  }
  .pr-350\:200, .px-350\:200 {
    padding-right: 5rem !important;
  }
  .pb-350\:200, .py-350\:200 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:200, .px-350\:200 {
    padding-left: 5rem !important;
  }
  .p-400\:200 {
    padding: 7.5rem !important;
  }
  .pt-400\:200, .py-400\:200 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:200, .px-400\:200 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:200, .py-400\:200 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:200, .px-400\:200 {
    padding-left: 7.5rem !important;
  }
  .p-450\:200 {
    padding: 9.5rem !important;
  }
  .pt-450\:200, .py-450\:200 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:200, .px-450\:200 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:200, .py-450\:200 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:200, .px-450\:200 {
    padding-left: 9.5rem !important;
  }
  .p-500\:200 {
    padding: 12.5rem !important;
  }
  .pt-500\:200, .py-500\:200 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:200, .px-500\:200 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:200, .py-500\:200 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:200, .px-500\:200 {
    padding-left: 12.5rem !important;
  }
}
@media screen and (max-width: 359px) {
  .m-0\:100 {
    margin: 0 !important;
  }
  .mt-0\:100, .my-0\:100 {
    margin-top: 0 !important;
  }
  .mr-0\:100, .mx-0\:100 {
    margin-right: 0 !important;
  }
  .mb-0\:100, .my-0\:100 {
    margin-bottom: 0 !important;
  }
  .ml-0\:100, .mx-0\:100 {
    margin-left: 0 !important;
  }
  .m-50\:100 {
    margin: 0.25rem !important;
  }
  .mt-50\:100, .my-50\:100 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:100, .mx-50\:100 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:100, .my-50\:100 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:100, .mx-50\:100 {
    margin-left: 0.25rem !important;
  }
  .m-75\:100 {
    margin: 0.5rem !important;
  }
  .mt-75\:100, .my-75\:100 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:100, .mx-75\:100 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:100, .my-75\:100 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:100, .mx-75\:100 {
    margin-left: 0.5rem !important;
  }
  .m-100\:100 {
    margin: 1rem !important;
  }
  .mt-100\:100, .my-100\:100 {
    margin-top: 1rem !important;
  }
  .mr-100\:100, .mx-100\:100 {
    margin-right: 1rem !important;
  }
  .mb-100\:100, .my-100\:100 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:100, .mx-100\:100 {
    margin-left: 1rem !important;
  }
  .m-150\:100 {
    margin: 1.5rem !important;
  }
  .mt-150\:100, .my-150\:100 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:100, .mx-150\:100 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:100, .my-150\:100 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:100, .mx-150\:100 {
    margin-left: 1.5rem !important;
  }
  .m-200\:100 {
    margin: 2rem !important;
  }
  .mt-200\:100, .my-200\:100 {
    margin-top: 2rem !important;
  }
  .mr-200\:100, .mx-200\:100 {
    margin-right: 2rem !important;
  }
  .mb-200\:100, .my-200\:100 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:100, .mx-200\:100 {
    margin-left: 2rem !important;
  }
  .m-250\:100 {
    margin: 2.5rem !important;
  }
  .mt-250\:100, .my-250\:100 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:100, .mx-250\:100 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:100, .my-250\:100 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:100, .mx-250\:100 {
    margin-left: 2.5rem !important;
  }
  .m-300\:100 {
    margin: 3.5rem !important;
  }
  .mt-300\:100, .my-300\:100 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:100, .mx-300\:100 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:100, .my-300\:100 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:100, .mx-300\:100 {
    margin-left: 3.5rem !important;
  }
  .m-350\:100 {
    margin: 5rem !important;
  }
  .mt-350\:100, .my-350\:100 {
    margin-top: 5rem !important;
  }
  .mr-350\:100, .mx-350\:100 {
    margin-right: 5rem !important;
  }
  .mb-350\:100, .my-350\:100 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:100, .mx-350\:100 {
    margin-left: 5rem !important;
  }
  .m-400\:100 {
    margin: 7.5rem !important;
  }
  .mt-400\:100, .my-400\:100 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:100, .mx-400\:100 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:100, .my-400\:100 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:100, .mx-400\:100 {
    margin-left: 7.5rem !important;
  }
  .m-450\:100 {
    margin: 9.5rem !important;
  }
  .mt-450\:100, .my-450\:100 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:100, .mx-450\:100 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:100, .my-450\:100 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:100, .mx-450\:100 {
    margin-left: 9.5rem !important;
  }
  .m-500\:100 {
    margin: 12.5rem !important;
  }
  .mt-500\:100, .my-500\:100 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:100, .mx-500\:100 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:100, .my-500\:100 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:100, .mx-500\:100 {
    margin-left: 12.5rem !important;
  }
  .p-0\:100 {
    padding: 0 !important;
  }
  .pt-0\:100, .py-0\:100 {
    padding-top: 0 !important;
  }
  .pr-0\:100, .px-0\:100 {
    padding-right: 0 !important;
  }
  .pb-0\:100, .py-0\:100 {
    padding-bottom: 0 !important;
  }
  .pl-0\:100, .px-0\:100 {
    padding-left: 0 !important;
  }
  .p-50\:100 {
    padding: 0.25rem !important;
  }
  .pt-50\:100, .py-50\:100 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:100, .px-50\:100 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:100, .py-50\:100 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:100, .px-50\:100 {
    padding-left: 0.25rem !important;
  }
  .p-75\:100 {
    padding: 0.5rem !important;
  }
  .pt-75\:100, .py-75\:100 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:100, .px-75\:100 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:100, .py-75\:100 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:100, .px-75\:100 {
    padding-left: 0.5rem !important;
  }
  .p-100\:100 {
    padding: 1rem !important;
  }
  .pt-100\:100, .py-100\:100 {
    padding-top: 1rem !important;
  }
  .pr-100\:100, .px-100\:100 {
    padding-right: 1rem !important;
  }
  .pb-100\:100, .py-100\:100 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:100, .px-100\:100 {
    padding-left: 1rem !important;
  }
  .p-150\:100 {
    padding: 1.5rem !important;
  }
  .pt-150\:100, .py-150\:100 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:100, .px-150\:100 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:100, .py-150\:100 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:100, .px-150\:100 {
    padding-left: 1.5rem !important;
  }
  .p-200\:100 {
    padding: 2rem !important;
  }
  .pt-200\:100, .py-200\:100 {
    padding-top: 2rem !important;
  }
  .pr-200\:100, .px-200\:100 {
    padding-right: 2rem !important;
  }
  .pb-200\:100, .py-200\:100 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:100, .px-200\:100 {
    padding-left: 2rem !important;
  }
  .p-250\:100 {
    padding: 2.5rem !important;
  }
  .pt-250\:100, .py-250\:100 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:100, .px-250\:100 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:100, .py-250\:100 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:100, .px-250\:100 {
    padding-left: 2.5rem !important;
  }
  .p-300\:100 {
    padding: 3.5rem !important;
  }
  .pt-300\:100, .py-300\:100 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:100, .px-300\:100 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:100, .py-300\:100 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:100, .px-300\:100 {
    padding-left: 3.5rem !important;
  }
  .p-350\:100 {
    padding: 5rem !important;
  }
  .pt-350\:100, .py-350\:100 {
    padding-top: 5rem !important;
  }
  .pr-350\:100, .px-350\:100 {
    padding-right: 5rem !important;
  }
  .pb-350\:100, .py-350\:100 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:100, .px-350\:100 {
    padding-left: 5rem !important;
  }
  .p-400\:100 {
    padding: 7.5rem !important;
  }
  .pt-400\:100, .py-400\:100 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:100, .px-400\:100 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:100, .py-400\:100 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:100, .px-400\:100 {
    padding-left: 7.5rem !important;
  }
  .p-450\:100 {
    padding: 9.5rem !important;
  }
  .pt-450\:100, .py-450\:100 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:100, .px-450\:100 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:100, .py-450\:100 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:100, .px-450\:100 {
    padding-left: 9.5rem !important;
  }
  .p-500\:100 {
    padding: 12.5rem !important;
  }
  .pt-500\:100, .py-500\:100 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:100, .px-500\:100 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:100, .py-500\:100 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:100, .px-500\:100 {
    padding-left: 12.5rem !important;
  }
}
/**
CELL
@author: Eduard Tschernjaew
@documentation: http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/components/cell
 */
.cell {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media screen and (max-width: 425px) {
  .cell {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}
.cell--clickable {
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: all;
}

.cell--clickable:hover {
  cursor: pointer;
  opacity: 0.5;
}

.cell.has-divider .cell__row::after, .cell.has-divider--center .cell__row::after, .cell.has-divider--inset .cell__row::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: var(--color-grey-200);
}

.cell.has-divider .cell__row:last-child::after, .cell.has-divider--center .cell__row:last-child::after, .cell.has-divider--inset .cell__row:last-child::after {
  height: 0;
}

.cell.has-divider .cell__row:only-of-type::after, .cell.has-divider--center .cell__row:only-of-type::after, .cell.has-divider--inset .cell__row:only-of-type::after {
  height: 1px;
}

.cell.has-divider--not-first-type .cell__row:only-of-type::after {
  height: 0;
}

.cell.has-divider--inset .cell__row::after {
  left: 1.5rem;
  width: calc(100% - 1.5rem);
}

.cell.has-divider--inset .cell__row .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row .cell__col .sd-icon {
  font-size: 24px;
}

.cell.has-divider--inset .cell__row.cell-size-50 {
  min-height: 40px;
}

.cell.has-divider--inset .cell__row.cell-size-50::after {
  left: 2rem;
  width: calc(100% - 2rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-50::after {
    left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-50 .cell__col {
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.cell.has-divider--inset .cell__row.cell-size-50 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-50 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-50 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-50 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-50 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-50 .sd-icon {
  font-size: 24px;
}

.cell.has-divider--inset .cell__row.cell-size-100 {
  min-height: 56px;
}

.cell.has-divider--inset .cell__row.cell-size-100::after {
  left: 2.5rem;
  width: calc(100% - 2.5rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-100::after {
    left: 3.5rem;
    width: calc(100% - 3.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-100 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-100 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-100 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-100 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-100 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-100 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-100 .sd-icon {
  font-size: 24px;
}

.cell.has-divider--inset .cell__row.cell-size-200 {
  min-height: 64px;
}

.cell.has-divider--inset .cell__row.cell-size-200::after {
  left: 3rem;
  width: calc(100% - 3rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-200::after {
    left: 4rem;
    width: calc(100% - 4rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-200 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-200 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-200 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-200 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-200 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-200 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-200 .sd-icon {
  font-size: 32px;
}

.cell.has-divider--inset .cell__row.cell-size-300 {
  min-height: 72px;
}

.cell.has-divider--inset .cell__row.cell-size-300::after {
  left: 3.5rem;
  width: calc(100% - 3.5rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-300::after {
    left: 4.5rem;
    width: calc(100% - 4.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-300 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-300 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-300 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-300 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-300 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-300 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-300 .sd-icon {
  font-size: 40px;
}

.cell.has-divider--inset .cell__row.cell-size-400 {
  min-height: 88px;
}

.cell.has-divider--inset .cell__row.cell-size-400::after {
  left: 4.5rem;
  width: calc(100% - 4.5rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-400::after {
    left: 5.5rem;
    width: calc(100% - 5.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-400 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-400 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-400 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-400 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-400 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-400 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-400 .sd-icon {
  font-size: 56px;
}

.cell.has-divider--inset .cell__row.cell-size-500 {
  min-height: 112px;
}

.cell.has-divider--inset .cell__row.cell-size-500::after {
  left: 6rem;
  width: calc(100% - 6rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-500::after {
    left: 7rem;
    width: calc(100% - 7rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-500 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-500 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-500 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-500 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-500 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-500 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-500 .sd-icon {
  font-size: 80px;
}

@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 {
    min-height: 40px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-50::after {
    left: 2rem;
    width: calc(100% - 2rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50::after {
    left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col {
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 {
    min-height: 56px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-100::after {
    left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100::after {
    left: 3.5rem;
    width: calc(100% - 3.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 {
    min-height: 64px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-200::after {
    left: 3rem;
    width: calc(100% - 3rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200::after {
    left: 4rem;
    width: calc(100% - 4rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .sd-icon {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 {
    min-height: 72px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-300::after {
    left: 3.5rem;
    width: calc(100% - 3.5rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300::after {
    left: 4.5rem;
    width: calc(100% - 4.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .sd-icon {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 {
    min-height: 88px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-400::after {
    left: 4.5rem;
    width: calc(100% - 4.5rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400::after {
    left: 5.5rem;
    width: calc(100% - 5.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .sd-icon {
    font-size: 56px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 {
    min-height: 112px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-500::after {
    left: 6rem;
    width: calc(100% - 6rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500::after {
    left: 7rem;
    width: calc(100% - 7rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .sd-icon {
    font-size: 80px;
  }
}
.cell.has-divider--center .cell__row::after {
  left: 0;
  width: 100%;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--center .cell__row::after {
    left: 16px;
    width: calc(100% - 2rem);
  }
}
.cell .cell__row {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.cell .cell__row .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row .cell__col .sd-icon {
  font-size: 24px;
}

.cell .cell__row.cell-size-50 {
  min-height: 40px;
}

.cell .cell__row.cell-size-50 .cell__col {
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.cell .cell__row.cell-size-50 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-50 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-50 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-50 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-50 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-50 .sd-icon {
  font-size: 24px;
}

.cell .cell__row.cell-size-100 {
  min-height: 56px;
}

.cell .cell__row.cell-size-100 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-100 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-100 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-100 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-100 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-100 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-100 .sd-icon {
  font-size: 24px;
}

.cell .cell__row.cell-size-200 {
  min-height: 64px;
}

.cell .cell__row.cell-size-200 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-200 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-200 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-200 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-200 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-200 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-200 .sd-icon {
  font-size: 32px;
}

.cell .cell__row.cell-size-300 {
  min-height: 72px;
}

.cell .cell__row.cell-size-300 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-300 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-300 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-300 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-300 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-300 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-300 .sd-icon {
  font-size: 40px;
}

.cell .cell__row.cell-size-400 {
  min-height: 88px;
}

.cell .cell__row.cell-size-400 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-400 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-400 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-400 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-400 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-400 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-400 .sd-icon {
  font-size: 56px;
}

.cell .cell__row.cell-size-500 {
  min-height: 112px;
}

.cell .cell__row.cell-size-500 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-500 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-500 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-500 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-500 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-500 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-500 .sd-icon {
  font-size: 80px;
}

@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 {
    min-height: 40px;
  }
  .cell .cell__row.mobile-cell-size-50 .cell__col {
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .cell .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-50 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 {
    min-height: 56px;
  }
  .cell .cell__row.mobile-cell-size-100 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-100 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 {
    min-height: 64px;
  }
  .cell .cell__row.mobile-cell-size-200 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-200 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .sd-icon {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 {
    min-height: 72px;
  }
  .cell .cell__row.mobile-cell-size-300 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-300 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .sd-icon {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 {
    min-height: 88px;
  }
  .cell .cell__row.mobile-cell-size-400 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-400 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .sd-icon {
    font-size: 56px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 {
    min-height: 112px;
  }
  .cell .cell__row.mobile-cell-size-500 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-500 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .sd-icon {
    font-size: 80px;
  }
}
.cell .cell__row .cell__col.first-element {
  display: inline-flex;
  align-self: flex-start;
  flex-shrink: 0;
}

.cell .cell__row .cell__col.has-max-width {
  flex: 1 1 auto;
  align-self: auto;
  min-width: 0;
}

.cell .cell__row .cell__col.is-pulled-top {
  align-self: flex-start;
}

.cell .cell__row .cell__col.is-pulled-bottom {
  align-self: flex-end;
}

.cell .cell__row .cell__col.is-center-v {
  align-self: center;
}

.cell .cell__row .cell__col.is-center-h {
  text-align: center;
}

.cell .cell__row .cell__col .display-block {
  display: block;
}

/**
GRID
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/layout/grid
 */
.wrapper {
  max-width: 1072px;
  margin: 0 auto;
}

/**
EFINES DESKTOP VIEW
 */
.row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-right: -16px;
  margin-left: -16px;
}

.col {
  box-sizing: border-box;
  display: block;
  flex: 1;
  padding-right: 16px;
  padding-left: 16px;
  flex-shrink: 0;
}

.container {
  box-sizing: border-box;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.col-500-1,
.col-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.offset-500-1 {
  margin-left: 8.3333333333%;
}

.col-500-2,
.col-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.offset-500-2 {
  margin-left: 16.6666666667%;
}

.col-500-3,
.col-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.offset-500-3 {
  margin-left: 25%;
}

.col-500-4,
.col-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.offset-500-4 {
  margin-left: 33.3333333333%;
}

.col-500-5,
.col-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.offset-500-5 {
  margin-left: 41.6666666667%;
}

.col-500-6,
.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.offset-500-6 {
  margin-left: 50%;
}

.col-500-7,
.col-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.offset-500-7 {
  margin-left: 58.3333333333%;
}

.col-500-8,
.col-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.offset-500-8 {
  margin-left: 66.6666666667%;
}

.col-500-9,
.col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.offset-500-9 {
  margin-left: 75%;
}

.col-500-10,
.col-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.offset-500-10 {
  margin-left: 83.3333333333%;
}

.col-500-11,
.col-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.offset-500-11 {
  margin-left: 91.6666666667%;
}

.col-500-12,
.col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.offset-500-0 {
  margin-left: 0;
}

/**
DEFINES MEDIA QUERIES
 */
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 1023px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-400-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-400-1 {
    margin-left: 8.3333333333%;
  }
  .col-400-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-400-2 {
    margin-left: 16.6666666667%;
  }
  .col-400-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-400-3 {
    margin-left: 25%;
  }
  .col-400-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-400-4 {
    margin-left: 33.3333333333%;
  }
  .col-400-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-400-5 {
    margin-left: 41.6666666667%;
  }
  .col-400-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-400-6 {
    margin-left: 50%;
  }
  .col-400-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-400-7 {
    margin-left: 58.3333333333%;
  }
  .col-400-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-400-8 {
    margin-left: 66.6666666667%;
  }
  .col-400-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-400-9 {
    margin-left: 75%;
  }
  .col-400-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-400-10 {
    margin-left: 83.3333333333%;
  }
  .col-400-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-400-11 {
    margin-left: 91.6666666667%;
  }
  .col-400-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-400-0 {
    margin-left: 0;
  }
}
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 767px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-300-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-300-1 {
    margin-left: 8.3333333333%;
  }
  .col-300-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-300-2 {
    margin-left: 16.6666666667%;
  }
  .col-300-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-300-3 {
    margin-left: 25%;
  }
  .col-300-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-300-4 {
    margin-left: 33.3333333333%;
  }
  .col-300-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-300-5 {
    margin-left: 41.6666666667%;
  }
  .col-300-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-300-6 {
    margin-left: 50%;
  }
  .col-300-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-300-7 {
    margin-left: 58.3333333333%;
  }
  .col-300-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-300-8 {
    margin-left: 66.6666666667%;
  }
  .col-300-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-300-9 {
    margin-left: 75%;
  }
  .col-300-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-300-10 {
    margin-left: 83.3333333333%;
  }
  .col-300-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-300-11 {
    margin-left: 91.6666666667%;
  }
  .col-300-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-300-0 {
    margin-left: 0;
  }
}
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 425px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-200-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-200-1 {
    margin-left: 8.3333333333%;
  }
  .col-200-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-200-2 {
    margin-left: 16.6666666667%;
  }
  .col-200-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-200-3 {
    margin-left: 25%;
  }
  .col-200-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-200-4 {
    margin-left: 33.3333333333%;
  }
  .col-200-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-200-5 {
    margin-left: 41.6666666667%;
  }
  .col-200-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-200-6 {
    margin-left: 50%;
  }
  .col-200-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-200-7 {
    margin-left: 58.3333333333%;
  }
  .col-200-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-200-8 {
    margin-left: 66.6666666667%;
  }
  .col-200-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-200-9 {
    margin-left: 75%;
  }
  .col-200-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-200-10 {
    margin-left: 83.3333333333%;
  }
  .col-200-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-200-11 {
    margin-left: 91.6666666667%;
  }
  .col-200-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-200-0 {
    margin-left: 0;
  }
}
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 359px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-100-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-100-1 {
    margin-left: 8.3333333333%;
  }
  .col-100-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-100-2 {
    margin-left: 16.6666666667%;
  }
  .col-100-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-100-3 {
    margin-left: 25%;
  }
  .col-100-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-100-4 {
    margin-left: 33.3333333333%;
  }
  .col-100-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-100-5 {
    margin-left: 41.6666666667%;
  }
  .col-100-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-100-6 {
    margin-left: 50%;
  }
  .col-100-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-100-7 {
    margin-left: 58.3333333333%;
  }
  .col-100-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-100-8 {
    margin-left: 66.6666666667%;
  }
  .col-100-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-100-9 {
    margin-left: 75%;
  }
  .col-100-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-100-10 {
    margin-left: 83.3333333333%;
  }
  .col-100-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-100-11 {
    margin-left: 91.6666666667%;
  }
  .col-100-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-100-0 {
    margin-left: 0;
  }
}

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/
html {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

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

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
}

/*
Text-level semantics
====================
*/
/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

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

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

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

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

/**
WORKAROUND FOR DUPLICATED MODULE
 */
/**
SIZES
 */
/**
BREAKPOINTS
 */
/**
MEDIAQUERY breakpoints for min-width
 */
/**
MEDIAQUERY breakpoints for max-width
 */
/**
GRID
 */
/* stylelint-disable-next-line */
/**
TRANSITION
 */
/**
FONT WEIGHT - BOLD
Is used in the mixin 'is-bold'
 */
/**
FONTS MAP
Attention the mobile information must be declared as a string.
 */
/**
SHADOWS
 */
/**
OPACITY
 */
/**
BORDER RADIUS
 */
/**
DISABLED MAP
 */
/**
COLOR MAP
 */
/**
PIXEL TO REM CONVERTER
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/functions
 */
/**
GET TYPO PROPERTY FROM FONTS MAP
 */
/**
GET COLOR FROM MAP
 */
/**
GET SHADOW FROM MAP
 */
/**
FLEXBOX
 */
/**
MEDIA QUERY
 */
/**
COLOR SCHEMES
 */
/**
TYPOGRAPHY
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/mixins?id=typography-mixin
 */
/**
FONT WEIGHT - BOLD
 */
/**
TRANSITION
 */
/**
CENTER
 */
/**
CLEARFIX
 */
/**
PADDING & MARGIN
 */
/**
DISABLED
 */
/**
DISABLED SHAKE
 */
/**
HOVER FOR NON TOUCH DEViCES
 */
/**
OUTLINE FOR FOCUSSED ELEMENTS
 */
/**
@import fonts
 */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-size: 16px;
  color: var(--color-grey-700);
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

button {
  padding: 0;
  color: inherit;
  cursor: pointer;
  background-color: transparent;
  border-width: 0;
}

figure {
  margin: 0;
}

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

:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
  color: var(--color-grey-700);
}

b,
strong {
  font-weight: 700;
}

cite {
  font-style: normal;
}

fieldset {
  padding: 0;
  margin: 0;
  border-width: 0;
}

template {
  display: none !important;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important;
    transition-delay: 0s !important;
    transition-duration: 0.01ms !important;
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-delay: -1ms !important;
    animation-delay: -1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
.is-invisible {
  visibility: hidden;
}

.is-hidden {
  display: none;
}

.is-left {
  float: left;
}

.is-right {
  float: right;
}

.is-bold {
  font-weight: 700;
}

.is-relative {
  position: relative;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

.bg-grey-100 {
  background-color: var(--color-grey-100);
}

.color-grey-500 {
  color: var(--color-grey-500);
}

/**
Text Helpers
*/
.disabled-calt-feature {
  font-feature-settings: "kern" 1, "calt" 0;
}

/**
Text Alignments
 */
.has-text-centered {
  text-align: center;
}

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

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

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

@media screen and (max-width: 1023px) {
  .has-text-centered-400 {
    text-align: center;
  }
  .has-text-left-400 {
    text-align: left;
  }
  .has-text-right-400 {
    text-align: right;
  }
  .has-text-justified-400 {
    text-align: justify;
  }
}
@media screen and (max-width: 767px) {
  .has-text-centered-300 {
    text-align: center;
  }
  .has-text-left-300 {
    text-align: left;
  }
  .has-text-right-300 {
    text-align: right;
  }
  .has-text-justified-300 {
    text-align: justify;
  }
}
@media screen and (max-width: 425px) {
  .has-text-centered-200 {
    text-align: center;
  }
  .has-text-left-200 {
    text-align: left;
  }
  .has-text-right-200 {
    text-align: right;
  }
  .has-text-justified-200 {
    text-align: justify;
  }
}
@media screen and (max-width: 359px) {
  .has-text-centered-100 {
    text-align: center;
  }
  .has-text-left-100 {
    text-align: left;
  }
  .has-text-right-100 {
    text-align: right;
  }
  .has-text-justified-100 {
    text-align: justify;
  }
}
@media screen and (max-width: 425px) {
  .is-full-width {
    width: 100%;
  }
}
*.is-disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.shadow--100 {
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

.shadow--200 {
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04), 0 5px 5px rgba(206, 132, 132, 0.05), 0 15px 30px rgba(50, 50, 93, 0.08);
}

.shadow--300 {
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.04), 0 7.5px 9px rgba(0, 0, 0, 0.05), 0 24px 48px rgba(50, 50, 93, 0.09);
}

.shadow--400 {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.03), 0 10px 15px rgba(0, 0, 0, 0.07), 0 32px 72px rgba(50, 50, 93, 0.12);
}

p a,
.has-font-100 a {
  text-decoration: underline;
  display: inline-block;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-secondary-400);
}

@media not all and (pointer: coarse) {
  p a:hover,
  .has-font-100 a:hover {
    color: var(--color-secondary-300);
  }
}
.link {
  display: inline-block;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-secondary-400);
}

.link::before, .link::after {
  display: inline-block;
  font-family: smartdesign-icons;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  .link::before, .link::after {
    transform: none !important;
  }
}
.link::before {
  padding-right: 0.25em;
}

.link::after {
  padding-left: 0.25em;
}

@media not all and (pointer: coarse) {
  .link:hover {
    color: var(--color-secondary-300);
  }
}
.link.link--inline {
  text-decoration: underline;
}

.link.link--primary::after {
  content: "long_arrow_right";
}

@media not all and (pointer: coarse) {
  .link.link--primary:hover::after {
    transform: translateX(0.25em);
  }
}
.link.link--external::after {
  color: var(--color-secondary-400);
  content: "long_arrow_top";
}

@media not all and (pointer: coarse) {
  .link.link--external:hover::after {
    color: var(--color-secondary-300);
    transform: translate(0.25em, -0.25em);
  }
}
.link.link--left-arrow::before {
  content: "long_arrow_left";
}

@media not all and (pointer: coarse) {
  .link.link--left-arrow:hover::before {
    transform: translateX(-0.25em);
  }
}
.link.link--left-arrow::after {
  content: "";
}

.link.link--no-arrow::after {
  padding-left: 0;
  content: "";
}

.link.link--read-more::after {
  content: "arrow_angle_down";
}

.link.link--read-less::after {
  content: "arrow_angle_down";
  transform: rotateX(180deg);
}

.link[href^=tel] {
  white-space: nowrap;
}

:root {
  --ripple-scale: 100;
}

.ripple--dark {
  overflow: hidden;
}

.animation-ripple, .animation-ripple--light, .animation-ripple--dark {
  position: absolute;
  width: 2px;
  height: 2px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-animation: ripple_effect_animation 0.3s ease-in-out;
  animation: ripple_effect_animation 0.3s ease-in-out;
}

.animation-ripple--dark {
  background-color: rgba(0, 0, 0, 0.1);
}

.animation-ripple--light {
  background-color: rgba(255, 255, 255, 0.1);
}

@-webkit-keyframes ripple_effect_animation {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(var(--ripple-scale));
  }
}
@keyframes ripple_effect_animation {
  0% {
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(var(--ripple-scale));
  }
}
/**
TYPOGRAPHY
 */
.has-font-500 {
  font-size: 2.125rem;
  line-height: 38px;
  letter-spacing: -0.02em;
}

@media screen and (max-width: 767px) {
  .has-font-500 {
    font-size: 1.6875rem;
    line-height: 31px;
    letter-spacing: -0.02em;
  }
}
.has-font-400, h1 {
  font-size: 1.75rem;
  line-height: 32px;
  letter-spacing: -0.015em;
}

@media screen and (max-width: 767px) {
  .has-font-400, h1 {
    font-size: 1.5rem;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}
.has-font-300, h2 {
  font-size: 1.4375rem;
  line-height: 28px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .has-font-300, h2 {
    font-size: 1.375rem;
    line-height: 26px;
    letter-spacing: -0.01em;
  }
}
.has-font-200, h3 {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .has-font-200, h3 {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.has-font-100, p {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.has-font-75, .expansion-panel__head .expansion-panel__subtitle {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.has-font-50 {
  font-size: 0.75rem;
  line-height: 20px;
  letter-spacing: -0.005em;
}

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

.mt-0, .my-0 {
  margin-top: 0 !important;
}

.mr-0, .mx-0 {
  margin-right: 0 !important;
}

.mb-0, .my-0 {
  margin-bottom: 0 !important;
}

.ml-0, .mx-0 {
  margin-left: 0 !important;
}

.m-50 {
  margin: 0.25rem !important;
}

.mt-50, .my-50 {
  margin-top: 0.25rem !important;
}

.mr-50, .mx-50 {
  margin-right: 0.25rem !important;
}

.mb-50, .my-50 {
  margin-bottom: 0.25rem !important;
}

.ml-50, .mx-50 {
  margin-left: 0.25rem !important;
}

.m-75 {
  margin: 0.5rem !important;
}

.mt-75, .my-75 {
  margin-top: 0.5rem !important;
}

.mr-75, .mx-75 {
  margin-right: 0.5rem !important;
}

.mb-75, .my-75 {
  margin-bottom: 0.5rem !important;
}

.ml-75, .mx-75 {
  margin-left: 0.5rem !important;
}

.m-100 {
  margin: 1rem !important;
}

.mt-100, .my-100 {
  margin-top: 1rem !important;
}

.mr-100, .mx-100 {
  margin-right: 1rem !important;
}

.mb-100, .my-100 {
  margin-bottom: 1rem !important;
}

.ml-100, .mx-100 {
  margin-left: 1rem !important;
}

.m-150 {
  margin: 1.5rem !important;
}

.mt-150, .my-150 {
  margin-top: 1.5rem !important;
}

.mr-150, .mx-150 {
  margin-right: 1.5rem !important;
}

.mb-150, .my-150 {
  margin-bottom: 1.5rem !important;
}

.ml-150, .mx-150 {
  margin-left: 1.5rem !important;
}

.m-200 {
  margin: 2rem !important;
}

.mt-200, .my-200 {
  margin-top: 2rem !important;
}

.mr-200, .mx-200 {
  margin-right: 2rem !important;
}

.mb-200, .my-200 {
  margin-bottom: 2rem !important;
}

.ml-200, .mx-200 {
  margin-left: 2rem !important;
}

.m-250 {
  margin: 2.5rem !important;
}

.mt-250, .my-250 {
  margin-top: 2.5rem !important;
}

.mr-250, .mx-250 {
  margin-right: 2.5rem !important;
}

.mb-250, .my-250 {
  margin-bottom: 2.5rem !important;
}

.ml-250, .mx-250 {
  margin-left: 2.5rem !important;
}

.m-300 {
  margin: 3.5rem !important;
}

.mt-300, .my-300 {
  margin-top: 3.5rem !important;
}

.mr-300, .mx-300 {
  margin-right: 3.5rem !important;
}

.mb-300, .my-300 {
  margin-bottom: 3.5rem !important;
}

.ml-300, .mx-300 {
  margin-left: 3.5rem !important;
}

.m-350 {
  margin: 5rem !important;
}

.mt-350, .my-350 {
  margin-top: 5rem !important;
}

.mr-350, .mx-350 {
  margin-right: 5rem !important;
}

.mb-350, .my-350 {
  margin-bottom: 5rem !important;
}

.ml-350, .mx-350 {
  margin-left: 5rem !important;
}

.m-400 {
  margin: 7.5rem !important;
}

.mt-400, .my-400 {
  margin-top: 7.5rem !important;
}

.mr-400, .mx-400 {
  margin-right: 7.5rem !important;
}

.mb-400, .my-400 {
  margin-bottom: 7.5rem !important;
}

.ml-400, .mx-400 {
  margin-left: 7.5rem !important;
}

.m-450 {
  margin: 9.5rem !important;
}

.mt-450, .my-450 {
  margin-top: 9.5rem !important;
}

.mr-450, .mx-450 {
  margin-right: 9.5rem !important;
}

.mb-450, .my-450 {
  margin-bottom: 9.5rem !important;
}

.ml-450, .mx-450 {
  margin-left: 9.5rem !important;
}

.m-500 {
  margin: 12.5rem !important;
}

.mt-500, .my-500 {
  margin-top: 12.5rem !important;
}

.mr-500, .mx-500 {
  margin-right: 12.5rem !important;
}

.mb-500, .my-500 {
  margin-bottom: 12.5rem !important;
}

.ml-500, .mx-500 {
  margin-left: 12.5rem !important;
}

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

.pt-0, .py-0 {
  padding-top: 0 !important;
}

.pr-0, .px-0 {
  padding-right: 0 !important;
}

.pb-0, .py-0 {
  padding-bottom: 0 !important;
}

.pl-0, .px-0 {
  padding-left: 0 !important;
}

.p-50 {
  padding: 0.25rem !important;
}

.pt-50, .py-50 {
  padding-top: 0.25rem !important;
}

.pr-50, .px-50 {
  padding-right: 0.25rem !important;
}

.pb-50, .py-50 {
  padding-bottom: 0.25rem !important;
}

.pl-50, .px-50 {
  padding-left: 0.25rem !important;
}

.p-75 {
  padding: 0.5rem !important;
}

.pt-75, .py-75 {
  padding-top: 0.5rem !important;
}

.pr-75, .px-75 {
  padding-right: 0.5rem !important;
}

.pb-75, .py-75 {
  padding-bottom: 0.5rem !important;
}

.pl-75, .px-75 {
  padding-left: 0.5rem !important;
}

.p-100 {
  padding: 1rem !important;
}

.pt-100, .py-100 {
  padding-top: 1rem !important;
}

.pr-100, .px-100 {
  padding-right: 1rem !important;
}

.pb-100, .py-100 {
  padding-bottom: 1rem !important;
}

.pl-100, .px-100 {
  padding-left: 1rem !important;
}

.p-150 {
  padding: 1.5rem !important;
}

.pt-150, .py-150 {
  padding-top: 1.5rem !important;
}

.pr-150, .px-150 {
  padding-right: 1.5rem !important;
}

.pb-150, .py-150 {
  padding-bottom: 1.5rem !important;
}

.pl-150, .px-150 {
  padding-left: 1.5rem !important;
}

.p-200 {
  padding: 2rem !important;
}

.pt-200, .py-200 {
  padding-top: 2rem !important;
}

.pr-200, .px-200 {
  padding-right: 2rem !important;
}

.pb-200, .py-200 {
  padding-bottom: 2rem !important;
}

.pl-200, .px-200 {
  padding-left: 2rem !important;
}

.p-250 {
  padding: 2.5rem !important;
}

.pt-250, .py-250 {
  padding-top: 2.5rem !important;
}

.pr-250, .px-250 {
  padding-right: 2.5rem !important;
}

.pb-250, .py-250 {
  padding-bottom: 2.5rem !important;
}

.pl-250, .px-250 {
  padding-left: 2.5rem !important;
}

.p-300 {
  padding: 3.5rem !important;
}

.pt-300, .py-300 {
  padding-top: 3.5rem !important;
}

.pr-300, .px-300 {
  padding-right: 3.5rem !important;
}

.pb-300, .py-300 {
  padding-bottom: 3.5rem !important;
}

.pl-300, .px-300 {
  padding-left: 3.5rem !important;
}

.p-350 {
  padding: 5rem !important;
}

.pt-350, .py-350 {
  padding-top: 5rem !important;
}

.pr-350, .px-350 {
  padding-right: 5rem !important;
}

.pb-350, .py-350 {
  padding-bottom: 5rem !important;
}

.pl-350, .px-350 {
  padding-left: 5rem !important;
}

.p-400 {
  padding: 7.5rem !important;
}

.pt-400, .py-400 {
  padding-top: 7.5rem !important;
}

.pr-400, .px-400 {
  padding-right: 7.5rem !important;
}

.pb-400, .py-400 {
  padding-bottom: 7.5rem !important;
}

.pl-400, .px-400 {
  padding-left: 7.5rem !important;
}

.p-450 {
  padding: 9.5rem !important;
}

.pt-450, .py-450 {
  padding-top: 9.5rem !important;
}

.pr-450, .px-450 {
  padding-right: 9.5rem !important;
}

.pb-450, .py-450 {
  padding-bottom: 9.5rem !important;
}

.pl-450, .px-450 {
  padding-left: 9.5rem !important;
}

.p-500 {
  padding: 12.5rem !important;
}

.pt-500, .py-500 {
  padding-top: 12.5rem !important;
}

.pr-500, .px-500 {
  padding-right: 12.5rem !important;
}

.pb-500, .py-500 {
  padding-bottom: 12.5rem !important;
}

.pl-500, .px-500 {
  padding-left: 12.5rem !important;
}

@media screen and (max-width: 1023px) {
  .m-0\:400 {
    margin: 0 !important;
  }
  .mt-0\:400, .my-0\:400 {
    margin-top: 0 !important;
  }
  .mr-0\:400, .mx-0\:400 {
    margin-right: 0 !important;
  }
  .mb-0\:400, .my-0\:400 {
    margin-bottom: 0 !important;
  }
  .ml-0\:400, .mx-0\:400 {
    margin-left: 0 !important;
  }
  .m-50\:400 {
    margin: 0.25rem !important;
  }
  .mt-50\:400, .my-50\:400 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:400, .mx-50\:400 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:400, .my-50\:400 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:400, .mx-50\:400 {
    margin-left: 0.25rem !important;
  }
  .m-75\:400 {
    margin: 0.5rem !important;
  }
  .mt-75\:400, .my-75\:400 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:400, .mx-75\:400 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:400, .my-75\:400 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:400, .mx-75\:400 {
    margin-left: 0.5rem !important;
  }
  .m-100\:400 {
    margin: 1rem !important;
  }
  .mt-100\:400, .my-100\:400 {
    margin-top: 1rem !important;
  }
  .mr-100\:400, .mx-100\:400 {
    margin-right: 1rem !important;
  }
  .mb-100\:400, .my-100\:400 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:400, .mx-100\:400 {
    margin-left: 1rem !important;
  }
  .m-150\:400 {
    margin: 1.5rem !important;
  }
  .mt-150\:400, .my-150\:400 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:400, .mx-150\:400 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:400, .my-150\:400 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:400, .mx-150\:400 {
    margin-left: 1.5rem !important;
  }
  .m-200\:400 {
    margin: 2rem !important;
  }
  .mt-200\:400, .my-200\:400 {
    margin-top: 2rem !important;
  }
  .mr-200\:400, .mx-200\:400 {
    margin-right: 2rem !important;
  }
  .mb-200\:400, .my-200\:400 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:400, .mx-200\:400 {
    margin-left: 2rem !important;
  }
  .m-250\:400 {
    margin: 2.5rem !important;
  }
  .mt-250\:400, .my-250\:400 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:400, .mx-250\:400 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:400, .my-250\:400 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:400, .mx-250\:400 {
    margin-left: 2.5rem !important;
  }
  .m-300\:400 {
    margin: 3.5rem !important;
  }
  .mt-300\:400, .my-300\:400 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:400, .mx-300\:400 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:400, .my-300\:400 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:400, .mx-300\:400 {
    margin-left: 3.5rem !important;
  }
  .m-350\:400 {
    margin: 5rem !important;
  }
  .mt-350\:400, .my-350\:400 {
    margin-top: 5rem !important;
  }
  .mr-350\:400, .mx-350\:400 {
    margin-right: 5rem !important;
  }
  .mb-350\:400, .my-350\:400 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:400, .mx-350\:400 {
    margin-left: 5rem !important;
  }
  .m-400\:400 {
    margin: 7.5rem !important;
  }
  .mt-400\:400, .my-400\:400 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:400, .mx-400\:400 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:400, .my-400\:400 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:400, .mx-400\:400 {
    margin-left: 7.5rem !important;
  }
  .m-450\:400 {
    margin: 9.5rem !important;
  }
  .mt-450\:400, .my-450\:400 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:400, .mx-450\:400 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:400, .my-450\:400 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:400, .mx-450\:400 {
    margin-left: 9.5rem !important;
  }
  .m-500\:400 {
    margin: 12.5rem !important;
  }
  .mt-500\:400, .my-500\:400 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:400, .mx-500\:400 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:400, .my-500\:400 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:400, .mx-500\:400 {
    margin-left: 12.5rem !important;
  }
  .p-0\:400 {
    padding: 0 !important;
  }
  .pt-0\:400, .py-0\:400 {
    padding-top: 0 !important;
  }
  .pr-0\:400, .px-0\:400 {
    padding-right: 0 !important;
  }
  .pb-0\:400, .py-0\:400 {
    padding-bottom: 0 !important;
  }
  .pl-0\:400, .px-0\:400 {
    padding-left: 0 !important;
  }
  .p-50\:400 {
    padding: 0.25rem !important;
  }
  .pt-50\:400, .py-50\:400 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:400, .px-50\:400 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:400, .py-50\:400 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:400, .px-50\:400 {
    padding-left: 0.25rem !important;
  }
  .p-75\:400 {
    padding: 0.5rem !important;
  }
  .pt-75\:400, .py-75\:400 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:400, .px-75\:400 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:400, .py-75\:400 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:400, .px-75\:400 {
    padding-left: 0.5rem !important;
  }
  .p-100\:400 {
    padding: 1rem !important;
  }
  .pt-100\:400, .py-100\:400 {
    padding-top: 1rem !important;
  }
  .pr-100\:400, .px-100\:400 {
    padding-right: 1rem !important;
  }
  .pb-100\:400, .py-100\:400 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:400, .px-100\:400 {
    padding-left: 1rem !important;
  }
  .p-150\:400 {
    padding: 1.5rem !important;
  }
  .pt-150\:400, .py-150\:400 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:400, .px-150\:400 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:400, .py-150\:400 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:400, .px-150\:400 {
    padding-left: 1.5rem !important;
  }
  .p-200\:400 {
    padding: 2rem !important;
  }
  .pt-200\:400, .py-200\:400 {
    padding-top: 2rem !important;
  }
  .pr-200\:400, .px-200\:400 {
    padding-right: 2rem !important;
  }
  .pb-200\:400, .py-200\:400 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:400, .px-200\:400 {
    padding-left: 2rem !important;
  }
  .p-250\:400 {
    padding: 2.5rem !important;
  }
  .pt-250\:400, .py-250\:400 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:400, .px-250\:400 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:400, .py-250\:400 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:400, .px-250\:400 {
    padding-left: 2.5rem !important;
  }
  .p-300\:400 {
    padding: 3.5rem !important;
  }
  .pt-300\:400, .py-300\:400 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:400, .px-300\:400 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:400, .py-300\:400 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:400, .px-300\:400 {
    padding-left: 3.5rem !important;
  }
  .p-350\:400 {
    padding: 5rem !important;
  }
  .pt-350\:400, .py-350\:400 {
    padding-top: 5rem !important;
  }
  .pr-350\:400, .px-350\:400 {
    padding-right: 5rem !important;
  }
  .pb-350\:400, .py-350\:400 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:400, .px-350\:400 {
    padding-left: 5rem !important;
  }
  .p-400\:400 {
    padding: 7.5rem !important;
  }
  .pt-400\:400, .py-400\:400 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:400, .px-400\:400 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:400, .py-400\:400 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:400, .px-400\:400 {
    padding-left: 7.5rem !important;
  }
  .p-450\:400 {
    padding: 9.5rem !important;
  }
  .pt-450\:400, .py-450\:400 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:400, .px-450\:400 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:400, .py-450\:400 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:400, .px-450\:400 {
    padding-left: 9.5rem !important;
  }
  .p-500\:400 {
    padding: 12.5rem !important;
  }
  .pt-500\:400, .py-500\:400 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:400, .px-500\:400 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:400, .py-500\:400 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:400, .px-500\:400 {
    padding-left: 12.5rem !important;
  }
}
@media screen and (max-width: 767px) {
  .m-0\:300 {
    margin: 0 !important;
  }
  .mt-0\:300, .my-0\:300 {
    margin-top: 0 !important;
  }
  .mr-0\:300, .mx-0\:300 {
    margin-right: 0 !important;
  }
  .mb-0\:300, .my-0\:300 {
    margin-bottom: 0 !important;
  }
  .ml-0\:300, .mx-0\:300 {
    margin-left: 0 !important;
  }
  .m-50\:300 {
    margin: 0.25rem !important;
  }
  .mt-50\:300, .my-50\:300 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:300, .mx-50\:300 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:300, .my-50\:300 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:300, .mx-50\:300 {
    margin-left: 0.25rem !important;
  }
  .m-75\:300 {
    margin: 0.5rem !important;
  }
  .mt-75\:300, .my-75\:300 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:300, .mx-75\:300 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:300, .my-75\:300 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:300, .mx-75\:300 {
    margin-left: 0.5rem !important;
  }
  .m-100\:300 {
    margin: 1rem !important;
  }
  .mt-100\:300, .my-100\:300 {
    margin-top: 1rem !important;
  }
  .mr-100\:300, .mx-100\:300 {
    margin-right: 1rem !important;
  }
  .mb-100\:300, .my-100\:300 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:300, .mx-100\:300 {
    margin-left: 1rem !important;
  }
  .m-150\:300 {
    margin: 1.5rem !important;
  }
  .mt-150\:300, .my-150\:300 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:300, .mx-150\:300 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:300, .my-150\:300 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:300, .mx-150\:300 {
    margin-left: 1.5rem !important;
  }
  .m-200\:300 {
    margin: 2rem !important;
  }
  .mt-200\:300, .my-200\:300 {
    margin-top: 2rem !important;
  }
  .mr-200\:300, .mx-200\:300 {
    margin-right: 2rem !important;
  }
  .mb-200\:300, .my-200\:300 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:300, .mx-200\:300 {
    margin-left: 2rem !important;
  }
  .m-250\:300 {
    margin: 2.5rem !important;
  }
  .mt-250\:300, .my-250\:300 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:300, .mx-250\:300 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:300, .my-250\:300 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:300, .mx-250\:300 {
    margin-left: 2.5rem !important;
  }
  .m-300\:300 {
    margin: 3.5rem !important;
  }
  .mt-300\:300, .my-300\:300 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:300, .mx-300\:300 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:300, .my-300\:300 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:300, .mx-300\:300 {
    margin-left: 3.5rem !important;
  }
  .m-350\:300 {
    margin: 5rem !important;
  }
  .mt-350\:300, .my-350\:300 {
    margin-top: 5rem !important;
  }
  .mr-350\:300, .mx-350\:300 {
    margin-right: 5rem !important;
  }
  .mb-350\:300, .my-350\:300 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:300, .mx-350\:300 {
    margin-left: 5rem !important;
  }
  .m-400\:300 {
    margin: 7.5rem !important;
  }
  .mt-400\:300, .my-400\:300 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:300, .mx-400\:300 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:300, .my-400\:300 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:300, .mx-400\:300 {
    margin-left: 7.5rem !important;
  }
  .m-450\:300 {
    margin: 9.5rem !important;
  }
  .mt-450\:300, .my-450\:300 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:300, .mx-450\:300 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:300, .my-450\:300 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:300, .mx-450\:300 {
    margin-left: 9.5rem !important;
  }
  .m-500\:300 {
    margin: 12.5rem !important;
  }
  .mt-500\:300, .my-500\:300 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:300, .mx-500\:300 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:300, .my-500\:300 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:300, .mx-500\:300 {
    margin-left: 12.5rem !important;
  }
  .p-0\:300 {
    padding: 0 !important;
  }
  .pt-0\:300, .py-0\:300 {
    padding-top: 0 !important;
  }
  .pr-0\:300, .px-0\:300 {
    padding-right: 0 !important;
  }
  .pb-0\:300, .py-0\:300 {
    padding-bottom: 0 !important;
  }
  .pl-0\:300, .px-0\:300 {
    padding-left: 0 !important;
  }
  .p-50\:300 {
    padding: 0.25rem !important;
  }
  .pt-50\:300, .py-50\:300 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:300, .px-50\:300 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:300, .py-50\:300 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:300, .px-50\:300 {
    padding-left: 0.25rem !important;
  }
  .p-75\:300 {
    padding: 0.5rem !important;
  }
  .pt-75\:300, .py-75\:300 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:300, .px-75\:300 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:300, .py-75\:300 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:300, .px-75\:300 {
    padding-left: 0.5rem !important;
  }
  .p-100\:300 {
    padding: 1rem !important;
  }
  .pt-100\:300, .py-100\:300 {
    padding-top: 1rem !important;
  }
  .pr-100\:300, .px-100\:300 {
    padding-right: 1rem !important;
  }
  .pb-100\:300, .py-100\:300 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:300, .px-100\:300 {
    padding-left: 1rem !important;
  }
  .p-150\:300 {
    padding: 1.5rem !important;
  }
  .pt-150\:300, .py-150\:300 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:300, .px-150\:300 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:300, .py-150\:300 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:300, .px-150\:300 {
    padding-left: 1.5rem !important;
  }
  .p-200\:300 {
    padding: 2rem !important;
  }
  .pt-200\:300, .py-200\:300 {
    padding-top: 2rem !important;
  }
  .pr-200\:300, .px-200\:300 {
    padding-right: 2rem !important;
  }
  .pb-200\:300, .py-200\:300 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:300, .px-200\:300 {
    padding-left: 2rem !important;
  }
  .p-250\:300 {
    padding: 2.5rem !important;
  }
  .pt-250\:300, .py-250\:300 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:300, .px-250\:300 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:300, .py-250\:300 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:300, .px-250\:300 {
    padding-left: 2.5rem !important;
  }
  .p-300\:300 {
    padding: 3.5rem !important;
  }
  .pt-300\:300, .py-300\:300 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:300, .px-300\:300 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:300, .py-300\:300 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:300, .px-300\:300 {
    padding-left: 3.5rem !important;
  }
  .p-350\:300 {
    padding: 5rem !important;
  }
  .pt-350\:300, .py-350\:300 {
    padding-top: 5rem !important;
  }
  .pr-350\:300, .px-350\:300 {
    padding-right: 5rem !important;
  }
  .pb-350\:300, .py-350\:300 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:300, .px-350\:300 {
    padding-left: 5rem !important;
  }
  .p-400\:300 {
    padding: 7.5rem !important;
  }
  .pt-400\:300, .py-400\:300 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:300, .px-400\:300 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:300, .py-400\:300 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:300, .px-400\:300 {
    padding-left: 7.5rem !important;
  }
  .p-450\:300 {
    padding: 9.5rem !important;
  }
  .pt-450\:300, .py-450\:300 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:300, .px-450\:300 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:300, .py-450\:300 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:300, .px-450\:300 {
    padding-left: 9.5rem !important;
  }
  .p-500\:300 {
    padding: 12.5rem !important;
  }
  .pt-500\:300, .py-500\:300 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:300, .px-500\:300 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:300, .py-500\:300 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:300, .px-500\:300 {
    padding-left: 12.5rem !important;
  }
}
@media screen and (max-width: 425px) {
  .m-0\:200 {
    margin: 0 !important;
  }
  .mt-0\:200, .my-0\:200 {
    margin-top: 0 !important;
  }
  .mr-0\:200, .mx-0\:200 {
    margin-right: 0 !important;
  }
  .mb-0\:200, .my-0\:200 {
    margin-bottom: 0 !important;
  }
  .ml-0\:200, .mx-0\:200 {
    margin-left: 0 !important;
  }
  .m-50\:200 {
    margin: 0.25rem !important;
  }
  .mt-50\:200, .my-50\:200 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:200, .mx-50\:200 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:200, .my-50\:200 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:200, .mx-50\:200 {
    margin-left: 0.25rem !important;
  }
  .m-75\:200 {
    margin: 0.5rem !important;
  }
  .mt-75\:200, .my-75\:200 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:200, .mx-75\:200 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:200, .my-75\:200 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:200, .mx-75\:200 {
    margin-left: 0.5rem !important;
  }
  .m-100\:200 {
    margin: 1rem !important;
  }
  .mt-100\:200, .my-100\:200 {
    margin-top: 1rem !important;
  }
  .mr-100\:200, .mx-100\:200 {
    margin-right: 1rem !important;
  }
  .mb-100\:200, .my-100\:200 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:200, .mx-100\:200 {
    margin-left: 1rem !important;
  }
  .m-150\:200 {
    margin: 1.5rem !important;
  }
  .mt-150\:200, .my-150\:200 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:200, .mx-150\:200 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:200, .my-150\:200 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:200, .mx-150\:200 {
    margin-left: 1.5rem !important;
  }
  .m-200\:200 {
    margin: 2rem !important;
  }
  .mt-200\:200, .my-200\:200 {
    margin-top: 2rem !important;
  }
  .mr-200\:200, .mx-200\:200 {
    margin-right: 2rem !important;
  }
  .mb-200\:200, .my-200\:200 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:200, .mx-200\:200 {
    margin-left: 2rem !important;
  }
  .m-250\:200 {
    margin: 2.5rem !important;
  }
  .mt-250\:200, .my-250\:200 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:200, .mx-250\:200 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:200, .my-250\:200 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:200, .mx-250\:200 {
    margin-left: 2.5rem !important;
  }
  .m-300\:200 {
    margin: 3.5rem !important;
  }
  .mt-300\:200, .my-300\:200 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:200, .mx-300\:200 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:200, .my-300\:200 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:200, .mx-300\:200 {
    margin-left: 3.5rem !important;
  }
  .m-350\:200 {
    margin: 5rem !important;
  }
  .mt-350\:200, .my-350\:200 {
    margin-top: 5rem !important;
  }
  .mr-350\:200, .mx-350\:200 {
    margin-right: 5rem !important;
  }
  .mb-350\:200, .my-350\:200 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:200, .mx-350\:200 {
    margin-left: 5rem !important;
  }
  .m-400\:200 {
    margin: 7.5rem !important;
  }
  .mt-400\:200, .my-400\:200 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:200, .mx-400\:200 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:200, .my-400\:200 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:200, .mx-400\:200 {
    margin-left: 7.5rem !important;
  }
  .m-450\:200 {
    margin: 9.5rem !important;
  }
  .mt-450\:200, .my-450\:200 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:200, .mx-450\:200 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:200, .my-450\:200 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:200, .mx-450\:200 {
    margin-left: 9.5rem !important;
  }
  .m-500\:200 {
    margin: 12.5rem !important;
  }
  .mt-500\:200, .my-500\:200 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:200, .mx-500\:200 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:200, .my-500\:200 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:200, .mx-500\:200 {
    margin-left: 12.5rem !important;
  }
  .p-0\:200 {
    padding: 0 !important;
  }
  .pt-0\:200, .py-0\:200 {
    padding-top: 0 !important;
  }
  .pr-0\:200, .px-0\:200 {
    padding-right: 0 !important;
  }
  .pb-0\:200, .py-0\:200 {
    padding-bottom: 0 !important;
  }
  .pl-0\:200, .px-0\:200 {
    padding-left: 0 !important;
  }
  .p-50\:200 {
    padding: 0.25rem !important;
  }
  .pt-50\:200, .py-50\:200 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:200, .px-50\:200 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:200, .py-50\:200 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:200, .px-50\:200 {
    padding-left: 0.25rem !important;
  }
  .p-75\:200 {
    padding: 0.5rem !important;
  }
  .pt-75\:200, .py-75\:200 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:200, .px-75\:200 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:200, .py-75\:200 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:200, .px-75\:200 {
    padding-left: 0.5rem !important;
  }
  .p-100\:200 {
    padding: 1rem !important;
  }
  .pt-100\:200, .py-100\:200 {
    padding-top: 1rem !important;
  }
  .pr-100\:200, .px-100\:200 {
    padding-right: 1rem !important;
  }
  .pb-100\:200, .py-100\:200 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:200, .px-100\:200 {
    padding-left: 1rem !important;
  }
  .p-150\:200 {
    padding: 1.5rem !important;
  }
  .pt-150\:200, .py-150\:200 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:200, .px-150\:200 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:200, .py-150\:200 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:200, .px-150\:200 {
    padding-left: 1.5rem !important;
  }
  .p-200\:200 {
    padding: 2rem !important;
  }
  .pt-200\:200, .py-200\:200 {
    padding-top: 2rem !important;
  }
  .pr-200\:200, .px-200\:200 {
    padding-right: 2rem !important;
  }
  .pb-200\:200, .py-200\:200 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:200, .px-200\:200 {
    padding-left: 2rem !important;
  }
  .p-250\:200 {
    padding: 2.5rem !important;
  }
  .pt-250\:200, .py-250\:200 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:200, .px-250\:200 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:200, .py-250\:200 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:200, .px-250\:200 {
    padding-left: 2.5rem !important;
  }
  .p-300\:200 {
    padding: 3.5rem !important;
  }
  .pt-300\:200, .py-300\:200 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:200, .px-300\:200 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:200, .py-300\:200 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:200, .px-300\:200 {
    padding-left: 3.5rem !important;
  }
  .p-350\:200 {
    padding: 5rem !important;
  }
  .pt-350\:200, .py-350\:200 {
    padding-top: 5rem !important;
  }
  .pr-350\:200, .px-350\:200 {
    padding-right: 5rem !important;
  }
  .pb-350\:200, .py-350\:200 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:200, .px-350\:200 {
    padding-left: 5rem !important;
  }
  .p-400\:200 {
    padding: 7.5rem !important;
  }
  .pt-400\:200, .py-400\:200 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:200, .px-400\:200 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:200, .py-400\:200 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:200, .px-400\:200 {
    padding-left: 7.5rem !important;
  }
  .p-450\:200 {
    padding: 9.5rem !important;
  }
  .pt-450\:200, .py-450\:200 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:200, .px-450\:200 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:200, .py-450\:200 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:200, .px-450\:200 {
    padding-left: 9.5rem !important;
  }
  .p-500\:200 {
    padding: 12.5rem !important;
  }
  .pt-500\:200, .py-500\:200 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:200, .px-500\:200 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:200, .py-500\:200 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:200, .px-500\:200 {
    padding-left: 12.5rem !important;
  }
}
@media screen and (max-width: 359px) {
  .m-0\:100 {
    margin: 0 !important;
  }
  .mt-0\:100, .my-0\:100 {
    margin-top: 0 !important;
  }
  .mr-0\:100, .mx-0\:100 {
    margin-right: 0 !important;
  }
  .mb-0\:100, .my-0\:100 {
    margin-bottom: 0 !important;
  }
  .ml-0\:100, .mx-0\:100 {
    margin-left: 0 !important;
  }
  .m-50\:100 {
    margin: 0.25rem !important;
  }
  .mt-50\:100, .my-50\:100 {
    margin-top: 0.25rem !important;
  }
  .mr-50\:100, .mx-50\:100 {
    margin-right: 0.25rem !important;
  }
  .mb-50\:100, .my-50\:100 {
    margin-bottom: 0.25rem !important;
  }
  .ml-50\:100, .mx-50\:100 {
    margin-left: 0.25rem !important;
  }
  .m-75\:100 {
    margin: 0.5rem !important;
  }
  .mt-75\:100, .my-75\:100 {
    margin-top: 0.5rem !important;
  }
  .mr-75\:100, .mx-75\:100 {
    margin-right: 0.5rem !important;
  }
  .mb-75\:100, .my-75\:100 {
    margin-bottom: 0.5rem !important;
  }
  .ml-75\:100, .mx-75\:100 {
    margin-left: 0.5rem !important;
  }
  .m-100\:100 {
    margin: 1rem !important;
  }
  .mt-100\:100, .my-100\:100 {
    margin-top: 1rem !important;
  }
  .mr-100\:100, .mx-100\:100 {
    margin-right: 1rem !important;
  }
  .mb-100\:100, .my-100\:100 {
    margin-bottom: 1rem !important;
  }
  .ml-100\:100, .mx-100\:100 {
    margin-left: 1rem !important;
  }
  .m-150\:100 {
    margin: 1.5rem !important;
  }
  .mt-150\:100, .my-150\:100 {
    margin-top: 1.5rem !important;
  }
  .mr-150\:100, .mx-150\:100 {
    margin-right: 1.5rem !important;
  }
  .mb-150\:100, .my-150\:100 {
    margin-bottom: 1.5rem !important;
  }
  .ml-150\:100, .mx-150\:100 {
    margin-left: 1.5rem !important;
  }
  .m-200\:100 {
    margin: 2rem !important;
  }
  .mt-200\:100, .my-200\:100 {
    margin-top: 2rem !important;
  }
  .mr-200\:100, .mx-200\:100 {
    margin-right: 2rem !important;
  }
  .mb-200\:100, .my-200\:100 {
    margin-bottom: 2rem !important;
  }
  .ml-200\:100, .mx-200\:100 {
    margin-left: 2rem !important;
  }
  .m-250\:100 {
    margin: 2.5rem !important;
  }
  .mt-250\:100, .my-250\:100 {
    margin-top: 2.5rem !important;
  }
  .mr-250\:100, .mx-250\:100 {
    margin-right: 2.5rem !important;
  }
  .mb-250\:100, .my-250\:100 {
    margin-bottom: 2.5rem !important;
  }
  .ml-250\:100, .mx-250\:100 {
    margin-left: 2.5rem !important;
  }
  .m-300\:100 {
    margin: 3.5rem !important;
  }
  .mt-300\:100, .my-300\:100 {
    margin-top: 3.5rem !important;
  }
  .mr-300\:100, .mx-300\:100 {
    margin-right: 3.5rem !important;
  }
  .mb-300\:100, .my-300\:100 {
    margin-bottom: 3.5rem !important;
  }
  .ml-300\:100, .mx-300\:100 {
    margin-left: 3.5rem !important;
  }
  .m-350\:100 {
    margin: 5rem !important;
  }
  .mt-350\:100, .my-350\:100 {
    margin-top: 5rem !important;
  }
  .mr-350\:100, .mx-350\:100 {
    margin-right: 5rem !important;
  }
  .mb-350\:100, .my-350\:100 {
    margin-bottom: 5rem !important;
  }
  .ml-350\:100, .mx-350\:100 {
    margin-left: 5rem !important;
  }
  .m-400\:100 {
    margin: 7.5rem !important;
  }
  .mt-400\:100, .my-400\:100 {
    margin-top: 7.5rem !important;
  }
  .mr-400\:100, .mx-400\:100 {
    margin-right: 7.5rem !important;
  }
  .mb-400\:100, .my-400\:100 {
    margin-bottom: 7.5rem !important;
  }
  .ml-400\:100, .mx-400\:100 {
    margin-left: 7.5rem !important;
  }
  .m-450\:100 {
    margin: 9.5rem !important;
  }
  .mt-450\:100, .my-450\:100 {
    margin-top: 9.5rem !important;
  }
  .mr-450\:100, .mx-450\:100 {
    margin-right: 9.5rem !important;
  }
  .mb-450\:100, .my-450\:100 {
    margin-bottom: 9.5rem !important;
  }
  .ml-450\:100, .mx-450\:100 {
    margin-left: 9.5rem !important;
  }
  .m-500\:100 {
    margin: 12.5rem !important;
  }
  .mt-500\:100, .my-500\:100 {
    margin-top: 12.5rem !important;
  }
  .mr-500\:100, .mx-500\:100 {
    margin-right: 12.5rem !important;
  }
  .mb-500\:100, .my-500\:100 {
    margin-bottom: 12.5rem !important;
  }
  .ml-500\:100, .mx-500\:100 {
    margin-left: 12.5rem !important;
  }
  .p-0\:100 {
    padding: 0 !important;
  }
  .pt-0\:100, .py-0\:100 {
    padding-top: 0 !important;
  }
  .pr-0\:100, .px-0\:100 {
    padding-right: 0 !important;
  }
  .pb-0\:100, .py-0\:100 {
    padding-bottom: 0 !important;
  }
  .pl-0\:100, .px-0\:100 {
    padding-left: 0 !important;
  }
  .p-50\:100 {
    padding: 0.25rem !important;
  }
  .pt-50\:100, .py-50\:100 {
    padding-top: 0.25rem !important;
  }
  .pr-50\:100, .px-50\:100 {
    padding-right: 0.25rem !important;
  }
  .pb-50\:100, .py-50\:100 {
    padding-bottom: 0.25rem !important;
  }
  .pl-50\:100, .px-50\:100 {
    padding-left: 0.25rem !important;
  }
  .p-75\:100 {
    padding: 0.5rem !important;
  }
  .pt-75\:100, .py-75\:100 {
    padding-top: 0.5rem !important;
  }
  .pr-75\:100, .px-75\:100 {
    padding-right: 0.5rem !important;
  }
  .pb-75\:100, .py-75\:100 {
    padding-bottom: 0.5rem !important;
  }
  .pl-75\:100, .px-75\:100 {
    padding-left: 0.5rem !important;
  }
  .p-100\:100 {
    padding: 1rem !important;
  }
  .pt-100\:100, .py-100\:100 {
    padding-top: 1rem !important;
  }
  .pr-100\:100, .px-100\:100 {
    padding-right: 1rem !important;
  }
  .pb-100\:100, .py-100\:100 {
    padding-bottom: 1rem !important;
  }
  .pl-100\:100, .px-100\:100 {
    padding-left: 1rem !important;
  }
  .p-150\:100 {
    padding: 1.5rem !important;
  }
  .pt-150\:100, .py-150\:100 {
    padding-top: 1.5rem !important;
  }
  .pr-150\:100, .px-150\:100 {
    padding-right: 1.5rem !important;
  }
  .pb-150\:100, .py-150\:100 {
    padding-bottom: 1.5rem !important;
  }
  .pl-150\:100, .px-150\:100 {
    padding-left: 1.5rem !important;
  }
  .p-200\:100 {
    padding: 2rem !important;
  }
  .pt-200\:100, .py-200\:100 {
    padding-top: 2rem !important;
  }
  .pr-200\:100, .px-200\:100 {
    padding-right: 2rem !important;
  }
  .pb-200\:100, .py-200\:100 {
    padding-bottom: 2rem !important;
  }
  .pl-200\:100, .px-200\:100 {
    padding-left: 2rem !important;
  }
  .p-250\:100 {
    padding: 2.5rem !important;
  }
  .pt-250\:100, .py-250\:100 {
    padding-top: 2.5rem !important;
  }
  .pr-250\:100, .px-250\:100 {
    padding-right: 2.5rem !important;
  }
  .pb-250\:100, .py-250\:100 {
    padding-bottom: 2.5rem !important;
  }
  .pl-250\:100, .px-250\:100 {
    padding-left: 2.5rem !important;
  }
  .p-300\:100 {
    padding: 3.5rem !important;
  }
  .pt-300\:100, .py-300\:100 {
    padding-top: 3.5rem !important;
  }
  .pr-300\:100, .px-300\:100 {
    padding-right: 3.5rem !important;
  }
  .pb-300\:100, .py-300\:100 {
    padding-bottom: 3.5rem !important;
  }
  .pl-300\:100, .px-300\:100 {
    padding-left: 3.5rem !important;
  }
  .p-350\:100 {
    padding: 5rem !important;
  }
  .pt-350\:100, .py-350\:100 {
    padding-top: 5rem !important;
  }
  .pr-350\:100, .px-350\:100 {
    padding-right: 5rem !important;
  }
  .pb-350\:100, .py-350\:100 {
    padding-bottom: 5rem !important;
  }
  .pl-350\:100, .px-350\:100 {
    padding-left: 5rem !important;
  }
  .p-400\:100 {
    padding: 7.5rem !important;
  }
  .pt-400\:100, .py-400\:100 {
    padding-top: 7.5rem !important;
  }
  .pr-400\:100, .px-400\:100 {
    padding-right: 7.5rem !important;
  }
  .pb-400\:100, .py-400\:100 {
    padding-bottom: 7.5rem !important;
  }
  .pl-400\:100, .px-400\:100 {
    padding-left: 7.5rem !important;
  }
  .p-450\:100 {
    padding: 9.5rem !important;
  }
  .pt-450\:100, .py-450\:100 {
    padding-top: 9.5rem !important;
  }
  .pr-450\:100, .px-450\:100 {
    padding-right: 9.5rem !important;
  }
  .pb-450\:100, .py-450\:100 {
    padding-bottom: 9.5rem !important;
  }
  .pl-450\:100, .px-450\:100 {
    padding-left: 9.5rem !important;
  }
  .p-500\:100 {
    padding: 12.5rem !important;
  }
  .pt-500\:100, .py-500\:100 {
    padding-top: 12.5rem !important;
  }
  .pr-500\:100, .px-500\:100 {
    padding-right: 12.5rem !important;
  }
  .pb-500\:100, .py-500\:100 {
    padding-bottom: 12.5rem !important;
  }
  .pl-500\:100, .px-500\:100 {
    padding-left: 12.5rem !important;
  }
}
/**
CELL
@author: Eduard Tschernjaew
@documentation: http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/components/cell
 */
.cell {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media screen and (max-width: 425px) {
  .cell {
    margin-left: -1rem;
    margin-right: -1rem;
  }
}
.cell--clickable {
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: all;
}

.cell--clickable:hover {
  cursor: pointer;
  opacity: 0.5;
}

.cell.has-divider .cell__row::after, .cell.has-divider--center .cell__row::after, .cell.has-divider--inset .cell__row::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background-color: var(--color-grey-200);
}

.cell.has-divider .cell__row:last-child::after, .cell.has-divider--center .cell__row:last-child::after, .cell.has-divider--inset .cell__row:last-child::after {
  height: 0;
}

.cell.has-divider .cell__row:only-of-type::after, .cell.has-divider--center .cell__row:only-of-type::after, .cell.has-divider--inset .cell__row:only-of-type::after {
  height: 1px;
}

.cell.has-divider--not-first-type .cell__row:only-of-type::after {
  height: 0;
}

.cell.has-divider--inset .cell__row::after {
  left: 1.5rem;
  width: calc(100% - 1.5rem);
}

.cell.has-divider--inset .cell__row .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row .cell__col .sd-icon {
  font-size: 24px;
}

.cell.has-divider--inset .cell__row.cell-size-50 {
  min-height: 40px;
}

.cell.has-divider--inset .cell__row.cell-size-50::after {
  left: 2rem;
  width: calc(100% - 2rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-50::after {
    left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-50 .cell__col {
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.cell.has-divider--inset .cell__row.cell-size-50 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-50 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-50 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-50 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-50 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-50 .sd-icon {
  font-size: 24px;
}

.cell.has-divider--inset .cell__row.cell-size-100 {
  min-height: 56px;
}

.cell.has-divider--inset .cell__row.cell-size-100::after {
  left: 2.5rem;
  width: calc(100% - 2.5rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-100::after {
    left: 3.5rem;
    width: calc(100% - 3.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-100 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-100 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-100 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-100 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-100 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-100 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-100 .sd-icon {
  font-size: 24px;
}

.cell.has-divider--inset .cell__row.cell-size-200 {
  min-height: 64px;
}

.cell.has-divider--inset .cell__row.cell-size-200::after {
  left: 3rem;
  width: calc(100% - 3rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-200::after {
    left: 4rem;
    width: calc(100% - 4rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-200 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-200 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-200 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-200 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-200 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-200 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-200 .sd-icon {
  font-size: 32px;
}

.cell.has-divider--inset .cell__row.cell-size-300 {
  min-height: 72px;
}

.cell.has-divider--inset .cell__row.cell-size-300::after {
  left: 3.5rem;
  width: calc(100% - 3.5rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-300::after {
    left: 4.5rem;
    width: calc(100% - 4.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-300 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-300 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-300 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-300 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-300 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-300 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-300 .sd-icon {
  font-size: 40px;
}

.cell.has-divider--inset .cell__row.cell-size-400 {
  min-height: 88px;
}

.cell.has-divider--inset .cell__row.cell-size-400::after {
  left: 4.5rem;
  width: calc(100% - 4.5rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-400::after {
    left: 5.5rem;
    width: calc(100% - 5.5rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-400 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-400 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-400 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-400 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-400 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-400 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-400 .sd-icon {
  font-size: 56px;
}

.cell.has-divider--inset .cell__row.cell-size-500 {
  min-height: 112px;
}

.cell.has-divider--inset .cell__row.cell-size-500::after {
  left: 6rem;
  width: calc(100% - 6rem);
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-500::after {
    left: 7rem;
    width: calc(100% - 7rem);
  }
}
.cell.has-divider--inset .cell__row.cell-size-500 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell.has-divider--inset .cell__row.cell-size-500 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-500 .cell__col:last-child {
  margin-right: 0;
}

.cell.has-divider--inset .cell__row.cell-size-500 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell.has-divider--inset .cell__row.cell-size-500 .cell__col.has-no-gutter {
  margin: 0;
}

.cell.has-divider--inset .cell__row.cell-size-500 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell.has-divider--inset .cell__row.cell-size-500 .sd-icon {
  font-size: 80px;
}

@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 {
    min-height: 40px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-50::after {
    left: 2rem;
    width: calc(100% - 2rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50::after {
    left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col {
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-50 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 {
    min-height: 56px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-100::after {
    left: 2.5rem;
    width: calc(100% - 2.5rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100::after {
    left: 3.5rem;
    width: calc(100% - 3.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-100 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 {
    min-height: 64px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-200::after {
    left: 3rem;
    width: calc(100% - 3rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200::after {
    left: 4rem;
    width: calc(100% - 4rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-200 .sd-icon {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 {
    min-height: 72px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-300::after {
    left: 3.5rem;
    width: calc(100% - 3.5rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300::after {
    left: 4.5rem;
    width: calc(100% - 4.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-300 .sd-icon {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 {
    min-height: 88px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-400::after {
    left: 4.5rem;
    width: calc(100% - 4.5rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400::after {
    left: 5.5rem;
    width: calc(100% - 5.5rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-400 .sd-icon {
    font-size: 56px;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 {
    min-height: 112px;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-500::after {
    left: 6rem;
    width: calc(100% - 6rem);
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500::after {
    left: 7rem;
    width: calc(100% - 7rem);
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 0;
  }
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell.has-divider--inset .cell__row.mobile-cell-size-500 .sd-icon {
    font-size: 80px;
  }
}
.cell.has-divider--center .cell__row::after {
  left: 0;
  width: 100%;
}

@media screen and (max-width: 425px) {
  .cell.has-divider--center .cell__row::after {
    left: 16px;
    width: calc(100% - 2rem);
  }
}
.cell .cell__row {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.cell .cell__row .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row .cell__col .sd-icon {
  font-size: 24px;
}

.cell .cell__row.cell-size-50 {
  min-height: 40px;
}

.cell .cell__row.cell-size-50 .cell__col {
  margin-right: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.cell .cell__row.cell-size-50 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-50 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-50 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-50 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-50 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-50 .sd-icon {
  font-size: 24px;
}

.cell .cell__row.cell-size-100 {
  min-height: 56px;
}

.cell .cell__row.cell-size-100 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-100 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-100 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-100 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-100 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-100 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-100 .sd-icon {
  font-size: 24px;
}

.cell .cell__row.cell-size-200 {
  min-height: 64px;
}

.cell .cell__row.cell-size-200 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-200 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-200 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-200 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-200 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-200 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-200 .sd-icon {
  font-size: 32px;
}

.cell .cell__row.cell-size-300 {
  min-height: 72px;
}

.cell .cell__row.cell-size-300 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-300 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-300 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-300 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-300 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-300 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-300 .sd-icon {
  font-size: 40px;
}

.cell .cell__row.cell-size-400 {
  min-height: 88px;
}

.cell .cell__row.cell-size-400 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-400 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-400 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-400 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-400 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-400 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-400 .sd-icon {
  font-size: 56px;
}

.cell .cell__row.cell-size-500 {
  min-height: 112px;
}

.cell .cell__row.cell-size-500 .cell__col {
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cell .cell__row.cell-size-500 .cell__col:first-child {
  margin-left: 0;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
.cell .cell__row.cell-size-500 .cell__col:last-child {
  margin-right: 0;
}

.cell .cell__row.cell-size-500 .cell__col:last-child .sd-icon {
  font-size: 24px;
}

@media screen and (max-width: 425px) {
  .cell .cell__row.cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
.cell .cell__row.cell-size-500 .cell__col.has-no-gutter {
  margin: 0;
}

.cell .cell__row.cell-size-500 .cell__col.is-pulled-right {
  margin-left: auto;
}

.cell .cell__row.cell-size-500 .sd-icon {
  font-size: 80px;
}

@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 {
    min-height: 40px;
  }
  .cell .cell__row.mobile-cell-size-50 .cell__col {
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .cell .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-50 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-50 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 {
    min-height: 56px;
  }
  .cell .cell__row.mobile-cell-size-100 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-100 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-100 .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 {
    min-height: 64px;
  }
  .cell .cell__row.mobile-cell-size-200 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-200 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-200 .sd-icon {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 {
    min-height: 72px;
  }
  .cell .cell__row.mobile-cell-size-300 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-300 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-300 .sd-icon {
    font-size: 40px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 {
    min-height: 88px;
  }
  .cell .cell__row.mobile-cell-size-400 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-400 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-400 .sd-icon {
    font-size: 56px;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 {
    min-height: 112px;
  }
  .cell .cell__row.mobile-cell-size-500 .cell__col {
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .cell .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col:first-child {
    margin-left: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 0;
  }
  .cell .cell__row.mobile-cell-size-500 .cell__col:last-child .sd-icon {
    font-size: 24px;
  }
}
@media screen and (max-width: 767px) and (max-width: 425px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col:last-child {
    margin-right: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col.has-no-gutter {
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .cell__col.is-pulled-right {
    margin-left: auto;
  }
}
@media screen and (max-width: 767px) {
  .cell .cell__row.mobile-cell-size-500 .sd-icon {
    font-size: 80px;
  }
}
.cell .cell__row .cell__col.first-element {
  display: inline-flex;
  align-self: flex-start;
  flex-shrink: 0;
}

.cell .cell__row .cell__col.has-max-width {
  flex: 1 1 auto;
  align-self: auto;
  min-width: 0;
}

.cell .cell__row .cell__col.is-pulled-top {
  align-self: flex-start;
}

.cell .cell__row .cell__col.is-pulled-bottom {
  align-self: flex-end;
}

.cell .cell__row .cell__col.is-center-v {
  align-self: center;
}

.cell .cell__row .cell__col.is-center-h {
  text-align: center;
}

.cell .cell__row .cell__col .display-block {
  display: block;
}

/**
GRID
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/layout/grid
 */
.wrapper {
  max-width: 1072px;
  margin: 0 auto;
}

/**
EFINES DESKTOP VIEW
 */
.row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-right: -16px;
  margin-left: -16px;
}

.col {
  box-sizing: border-box;
  display: block;
  flex: 1;
  padding-right: 16px;
  padding-left: 16px;
  flex-shrink: 0;
}

.container {
  box-sizing: border-box;
  padding-right: 24px;
  padding-left: 24px;
  margin-right: auto;
  margin-left: auto;
}

.col-500-1,
.col-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

.offset-500-1 {
  margin-left: 8.3333333333%;
}

.col-500-2,
.col-2 {
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%;
}

.offset-500-2 {
  margin-left: 16.6666666667%;
}

.col-500-3,
.col-3 {
  flex-basis: 25%;
  max-width: 25%;
}

.offset-500-3 {
  margin-left: 25%;
}

.col-500-4,
.col-4 {
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%;
}

.offset-500-4 {
  margin-left: 33.3333333333%;
}

.col-500-5,
.col-5 {
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%;
}

.offset-500-5 {
  margin-left: 41.6666666667%;
}

.col-500-6,
.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

.offset-500-6 {
  margin-left: 50%;
}

.col-500-7,
.col-7 {
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%;
}

.offset-500-7 {
  margin-left: 58.3333333333%;
}

.col-500-8,
.col-8 {
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%;
}

.offset-500-8 {
  margin-left: 66.6666666667%;
}

.col-500-9,
.col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

.offset-500-9 {
  margin-left: 75%;
}

.col-500-10,
.col-10 {
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%;
}

.offset-500-10 {
  margin-left: 83.3333333333%;
}

.col-500-11,
.col-11 {
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%;
}

.offset-500-11 {
  margin-left: 91.6666666667%;
}

.col-500-12,
.col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.offset-500-0 {
  margin-left: 0;
}

/**
DEFINES MEDIA QUERIES
 */
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 1023px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-400-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-400-1 {
    margin-left: 8.3333333333%;
  }
  .col-400-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-400-2 {
    margin-left: 16.6666666667%;
  }
  .col-400-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-400-3 {
    margin-left: 25%;
  }
  .col-400-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-400-4 {
    margin-left: 33.3333333333%;
  }
  .col-400-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-400-5 {
    margin-left: 41.6666666667%;
  }
  .col-400-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-400-6 {
    margin-left: 50%;
  }
  .col-400-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-400-7 {
    margin-left: 58.3333333333%;
  }
  .col-400-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-400-8 {
    margin-left: 66.6666666667%;
  }
  .col-400-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-400-9 {
    margin-left: 75%;
  }
  .col-400-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-400-10 {
    margin-left: 83.3333333333%;
  }
  .col-400-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-400-11 {
    margin-left: 91.6666666667%;
  }
  .col-400-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-400-0 {
    margin-left: 0;
  }
}
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 767px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-300-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-300-1 {
    margin-left: 8.3333333333%;
  }
  .col-300-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-300-2 {
    margin-left: 16.6666666667%;
  }
  .col-300-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-300-3 {
    margin-left: 25%;
  }
  .col-300-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-300-4 {
    margin-left: 33.3333333333%;
  }
  .col-300-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-300-5 {
    margin-left: 41.6666666667%;
  }
  .col-300-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-300-6 {
    margin-left: 50%;
  }
  .col-300-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-300-7 {
    margin-left: 58.3333333333%;
  }
  .col-300-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-300-8 {
    margin-left: 66.6666666667%;
  }
  .col-300-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-300-9 {
    margin-left: 75%;
  }
  .col-300-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-300-10 {
    margin-left: 83.3333333333%;
  }
  .col-300-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-300-11 {
    margin-left: 91.6666666667%;
  }
  .col-300-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-300-0 {
    margin-left: 0;
  }
}
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 425px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-200-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-200-1 {
    margin-left: 8.3333333333%;
  }
  .col-200-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-200-2 {
    margin-left: 16.6666666667%;
  }
  .col-200-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-200-3 {
    margin-left: 25%;
  }
  .col-200-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-200-4 {
    margin-left: 33.3333333333%;
  }
  .col-200-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-200-5 {
    margin-left: 41.6666666667%;
  }
  .col-200-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-200-6 {
    margin-left: 50%;
  }
  .col-200-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-200-7 {
    margin-left: 58.3333333333%;
  }
  .col-200-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-200-8 {
    margin-left: 66.6666666667%;
  }
  .col-200-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-200-9 {
    margin-left: 75%;
  }
  .col-200-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-200-10 {
    margin-left: 83.3333333333%;
  }
  .col-200-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-200-11 {
    margin-left: 91.6666666667%;
  }
  .col-200-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-200-0 {
    margin-left: 0;
  }
}
/**
DEFINES MEDIA QUERIES
 */
@media only screen and (max-width: 359px) {
  .row {
    margin-right: -12px;
    margin-left: -12px;
  }
  .col {
    padding-right: 12px;
    padding-left: 12px;
  }
  .container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .col-100-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .offset-100-1 {
    margin-left: 8.3333333333%;
  }
  .col-100-2 {
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .offset-100-2 {
    margin-left: 16.6666666667%;
  }
  .col-100-3 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .offset-100-3 {
    margin-left: 25%;
  }
  .col-100-4 {
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .offset-100-4 {
    margin-left: 33.3333333333%;
  }
  .col-100-5 {
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .offset-100-5 {
    margin-left: 41.6666666667%;
  }
  .col-100-6 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .offset-100-6 {
    margin-left: 50%;
  }
  .col-100-7 {
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .offset-100-7 {
    margin-left: 58.3333333333%;
  }
  .col-100-8 {
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .offset-100-8 {
    margin-left: 66.6666666667%;
  }
  .col-100-9 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .offset-100-9 {
    margin-left: 75%;
  }
  .col-100-10 {
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .offset-100-10 {
    margin-left: 83.3333333333%;
  }
  .col-100-11 {
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .offset-100-11 {
    margin-left: 91.6666666667%;
  }
  .col-100-12 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .offset-100-0 {
    margin-left: 0;
  }
}
/* heart animation */
@-webkit-keyframes pulse {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.heart-animation .sd-icon {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 600ms;
  animation-duration: 600ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/**
AVATAR
[ nth1 = avatar width and height ]
[ nth2 = icon svg width and height ]
[ nth3 = avatar box-shadow width ]
[ nth4 = avatar group margin-left ]
[ nth5 = font-size ]
[ nth6 = line-height ]
[ nth7 = letter-spacing]
[ nth8 = avatar square border radius ]
[ nth9 = padding for avatar square image ]
[ nth10 = width for avatar logo ]
 */
.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-grey-700);
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: var(--color-grey-200);
  border-radius: 50%;
}

.avatar-group {
  position: relative;
  display: flex;
}

.avatar__img {
  width: 100%;
  height: 100%;
  text-align: center;
  -o-object-fit: cover;
  object-fit: cover;
}

.avatar__icon, .avatar__icon.sd-icon {
  display: inline-block;
  flex-shrink: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  fill: currentColor;
}

.avatar--disabled {
  opacity: 0.25;
}

.avatar--square, .avatar--logo {
  border-radius: 0;
}

.avatar--logo {
  background: var(--color-white);
}

.avatar--has-shadow {
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

.avatar--yellow {
  background: var(--color-yellow-200);
}

.avatar--blue {
  background: var(--color-blue-200);
}

.avatar--red {
  background: var(--color-red-200);
}

.avatar--green {
  background: var(--color-green-200);
}

.avatar--100 {
  width: 24px;
  height: 24px;
}

.avatar--100 .avatar__icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

.avatar--100 .avatar__text {
  font-size: 9px;
  line-height: 16px;
  letter-spacing: -0.005em;
}

.avatar-group .avatar--100 {
  margin: 0;
}

.avatar-group .avatar--100:not(.avatar--has-shadow) {
  box-shadow: var(--color-white) 0 0 0 2px;
}

.avatar-group .avatar--100:not(:first-child) {
  margin-left: -2px;
}

.avatar--square.avatar--100, .avatar--logo.avatar--100 {
  border-radius: 4px;
}

.avatar--square.avatar--100 .avatar__img--with-padding, .avatar--logo.avatar--100 .avatar__img--with-padding {
  width: 100%;
  height: 100%;
  padding: 2px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--100 {
  width: 31px;
}

.avatar--logo.avatar--100 .avatar__img {
  width: 100%;
  height: 100%;
  padding: 2px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--100 .avatar__img--with-padding, .avatar--logo.avatar--100 .avatar__img {
  -o-object-fit: contain;
  object-fit: contain;
}

.avatar--200 {
  width: 40px;
  height: 40px;
}

.avatar--200 .avatar__icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

.avatar--200 .avatar__text {
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: -0.005em;
}

.avatar-group .avatar--200 {
  margin: 0;
}

.avatar-group .avatar--200:not(.avatar--has-shadow) {
  box-shadow: var(--color-white) 0 0 0 4px;
}

.avatar-group .avatar--200:not(:first-child) {
  margin-left: -4px;
}

.avatar--square.avatar--200, .avatar--logo.avatar--200 {
  border-radius: 6px;
}

.avatar--square.avatar--200 .avatar__img--with-padding, .avatar--logo.avatar--200 .avatar__img--with-padding {
  width: 100%;
  height: 100%;
  padding: 4px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--200 {
  width: 51px;
}

.avatar--logo.avatar--200 .avatar__img {
  width: 100%;
  height: 100%;
  padding: 4px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--200 .avatar__img--with-padding, .avatar--logo.avatar--200 .avatar__img {
  -o-object-fit: contain;
  object-fit: contain;
}

.avatar--300 {
  width: 56px;
  height: 56px;
}

.avatar--300 .avatar__icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

.avatar--300 .avatar__text {
  font-size: 1.375rem;
  line-height: 1.625rem;
  letter-spacing: -0.01em;
}

.avatar-group .avatar--300 {
  margin: 0;
}

.avatar-group .avatar--300:not(.avatar--has-shadow) {
  box-shadow: var(--color-white) 0 0 0 4px;
}

.avatar-group .avatar--300:not(:first-child) {
  margin-left: -4px;
}

.avatar--square.avatar--300, .avatar--logo.avatar--300 {
  border-radius: 8px;
}

.avatar--square.avatar--300 .avatar__img--with-padding, .avatar--logo.avatar--300 .avatar__img--with-padding {
  width: 100%;
  height: 100%;
  padding: 6px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--300 {
  width: 72px;
}

.avatar--logo.avatar--300 .avatar__img {
  width: 100%;
  height: 100%;
  padding: 6px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--300 .avatar__img--with-padding, .avatar--logo.avatar--300 .avatar__img {
  -o-object-fit: contain;
  object-fit: contain;
}

.avatar--400 {
  width: 80px;
  height: 80px;
}

.avatar--400 .avatar__icon {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

.avatar--400 .avatar__text {
  font-size: 1.75rem;
  line-height: 2rem;
  letter-spacing: -0.015em;
}

.avatar-group .avatar--400 {
  margin: 0;
}

.avatar-group .avatar--400:not(.avatar--has-shadow) {
  box-shadow: var(--color-white) 0 0 0 4px;
}

.avatar-group .avatar--400:not(:first-child) {
  margin-left: -8px;
}

.avatar--square.avatar--400, .avatar--logo.avatar--400 {
  border-radius: 12px;
}

.avatar--square.avatar--400 .avatar__img--with-padding, .avatar--logo.avatar--400 .avatar__img--with-padding {
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--400 {
  width: 102px;
}

.avatar--logo.avatar--400 .avatar__img {
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--400 .avatar__img--with-padding, .avatar--logo.avatar--400 .avatar__img {
  -o-object-fit: contain;
  object-fit: contain;
}

.avatar--500 {
  width: 120px;
  height: 120px;
}

.avatar--500 .avatar__icon {
  width: 56px;
  height: 56px;
  font-size: 56px;
}

.avatar--500 .avatar__text {
  font-size: 2.125rem;
  line-height: 2.375rem;
  letter-spacing: -0.02em;
}

.avatar-group .avatar--500 {
  margin: 0;
}

.avatar-group .avatar--500:not(.avatar--has-shadow) {
  box-shadow: var(--color-white) 0 0 0 6px;
}

.avatar-group .avatar--500:not(:first-child) {
  margin-left: -16px;
}

.avatar--square.avatar--500, .avatar--logo.avatar--500 {
  border-radius: 16px;
}

.avatar--square.avatar--500 .avatar__img--with-padding, .avatar--logo.avatar--500 .avatar__img--with-padding {
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--500 {
  width: 156px;
}

.avatar--logo.avatar--500 .avatar__img {
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--500 .avatar__img--with-padding, .avatar--logo.avatar--500 .avatar__img {
  -o-object-fit: contain;
  object-fit: contain;
}

.avatar--600 {
  width: 168px;
  height: 168px;
}

.avatar--600 .avatar__icon {
  width: 80px;
  height: 80px;
  font-size: 80px;
}

.avatar--600 .avatar__text {
  font-size: 2.125rem;
  line-height: 2.375rem;
  letter-spacing: -0.02em;
}

.avatar-group .avatar--600 {
  margin: 0;
}

.avatar-group .avatar--600:not(.avatar--has-shadow) {
  box-shadow: var(--color-white) 0 0 0 8px;
}

.avatar-group .avatar--600:not(:first-child) {
  margin-left: -24px;
}

.avatar--square.avatar--600, .avatar--logo.avatar--600 {
  border-radius: 24px;
}

.avatar--square.avatar--600 .avatar__img--with-padding, .avatar--logo.avatar--600 .avatar__img--with-padding {
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--600 {
  width: 220px;
}

.avatar--logo.avatar--600 .avatar__img {
  width: 100%;
  height: 100%;
  padding: 8px;
  text-align: center;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -o-object-fit: cover;
  object-fit: cover;
  background: var(--color-white);
}

.avatar--logo.avatar--600 .avatar__img--with-padding, .avatar--logo.avatar--600 .avatar__img {
  -o-object-fit: contain;
  object-fit: contain;
}

.avatar-group .avatar:nth-child(1) {
  z-index: 99998;
}

.avatar-group .avatar:nth-child(2) {
  z-index: 99997;
}

.avatar-group .avatar:nth-child(3) {
  z-index: 99996;
}

.avatar-group .avatar:nth-child(4) {
  z-index: 99995;
}

.avatar-group .avatar:nth-child(5) {
  z-index: 99994;
}

.avatar-group .avatar:nth-child(6) {
  z-index: 99993;
}

/**
STANDARD-DEFINATIONS
 */
.input {
  position: relative;
  margin-bottom: 1.5rem;
}

.input::after {
  display: block;
  clear: both;
  content: "";
}

.input.input--200 .input__textarea {
  min-height: 7rem;
}

.input.input--300 .input__textarea {
  min-height: 8.5rem;
}

.input.input--400 .input__textarea {
  min-height: 13.5rem;
}

.input__textfield, .input__textarea {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  height: 3.5rem;
  padding: 1.75rem 1rem 0.375rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-grey-700);
  letter-spacing: -0.01em;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-400);
  border-radius: 0.25rem;
  outline: none;
  box-shadow: 0 0 0 0 var(--color-grey-400);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.input__textfield:hover, .input__textarea:hover {
  border: 1px solid var(--color-secondary-300);
}

.input__textfield[type=tel]:not(:-moz-placeholder-shown) + label, .input__textfield[type=email]:not(:-moz-placeholder-shown) + label, .input__textfield[type=url]:not(:-moz-placeholder-shown) + label, .input__textarea[type=tel]:not(:-moz-placeholder-shown) + label, .input__textarea[type=email]:not(:-moz-placeholder-shown) + label, .input__textarea[type=url]:not(:-moz-placeholder-shown) + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.input__textfield[type=tel]:not(:-ms-input-placeholder) + label, .input__textfield[type=email]:not(:-ms-input-placeholder) + label, .input__textfield[type=url]:not(:-ms-input-placeholder) + label, .input__textarea[type=tel]:not(:-ms-input-placeholder) + label, .input__textarea[type=email]:not(:-ms-input-placeholder) + label, .input__textarea[type=url]:not(:-ms-input-placeholder) + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.input__textfield:focus + label, .input__textfield:required:valid + label, .input__textfield[type=tel]:not(:placeholder-shown) + label, .input__textfield[type=email]:not(:placeholder-shown) + label, .input__textfield[type=url]:not(:placeholder-shown) + label, .input__textfield[readonly] + label, .input__textarea:focus + label, .input__textarea:required:valid + label, .input__textarea[type=tel]:not(:placeholder-shown) + label, .input__textarea[type=email]:not(:placeholder-shown) + label, .input__textarea[type=url]:not(:placeholder-shown) + label, .input__textarea[readonly] + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.input__textfield[type=tel]:not(:-moz-placeholder-shown) ~ .input__unit, .input__textfield[type=email]:not(:-moz-placeholder-shown) ~ .input__unit, .input__textfield[type=url]:not(:-moz-placeholder-shown) ~ .input__unit, .input__textarea[type=tel]:not(:-moz-placeholder-shown) ~ .input__unit, .input__textarea[type=email]:not(:-moz-placeholder-shown) ~ .input__unit, .input__textarea[type=url]:not(:-moz-placeholder-shown) ~ .input__unit {
  top: 1.75rem;
}

.input__textfield[type=tel]:not(:-ms-input-placeholder) ~ .input__unit, .input__textfield[type=email]:not(:-ms-input-placeholder) ~ .input__unit, .input__textfield[type=url]:not(:-ms-input-placeholder) ~ .input__unit, .input__textarea[type=tel]:not(:-ms-input-placeholder) ~ .input__unit, .input__textarea[type=email]:not(:-ms-input-placeholder) ~ .input__unit, .input__textarea[type=url]:not(:-ms-input-placeholder) ~ .input__unit {
  top: 1.75rem;
}

.input__textfield:focus ~ .input__unit, .input__textfield:required:valid ~ .input__unit, .input__textfield[type=tel]:not(:placeholder-shown) ~ .input__unit, .input__textfield[type=email]:not(:placeholder-shown) ~ .input__unit, .input__textfield[type=url]:not(:placeholder-shown) ~ .input__unit, .input__textfield[readonly] ~ .input__unit, .input__textarea:focus ~ .input__unit, .input__textarea:required:valid ~ .input__unit, .input__textarea[type=tel]:not(:placeholder-shown) ~ .input__unit, .input__textarea[type=email]:not(:placeholder-shown) ~ .input__unit, .input__textarea[type=url]:not(:placeholder-shown) ~ .input__unit, .input__textarea[readonly] ~ .input__unit {
  top: 1.75rem;
}

.input__textfield:active, .input__textfield:focus, .input__textarea:active, .input__textarea:focus {
  padding: 1.75rem 1rem 0.375rem 1rem;
  border: 1px solid var(--color-secondary-300);
  box-shadow: 0 0 0 1px var(--color-secondary-300);
  /* IE-HACK for V10 and V11 */
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .input__textfield:active, .input__textfield:focus, .input__textarea:active, .input__textarea:focus {
    padding-top: 27px;
  }
}
.input__textfield:disabled, .input__textarea:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.input__textfield:disabled:active, .input__textfield:disabled:focus, .input__textarea:disabled:active, .input__textarea:disabled:focus {
  border: 1px solid var(--color-grey-400);
  box-shadow: none;
}

.input__textfield:disabled ~ label, .input__textarea:disabled ~ label {
  cursor: not-allowed;
  opacity: 0.25;
}

.input__textfield:disabled:hover, .input__textarea:disabled:hover {
  border: 1px solid var(--color-grey-400);
}

.input__textfield:disabled ~ .input__unit, .input__textarea:disabled ~ .input__unit {
  cursor: not-allowed;
  opacity: 0.25;
}

.input__textfield:disabled ~ .sd-icon, .input__textfield:disabled ~ i, .input__textfield:disabled ~ .input__helper-message, .input__textfield:disabled ~ .input__character-counter, .input__textfield:disabled ~ .input__error-message, .input__textarea:disabled ~ .sd-icon, .input__textarea:disabled ~ i, .input__textarea:disabled ~ .input__helper-message, .input__textarea:disabled ~ .input__character-counter, .input__textarea:disabled ~ .input__error-message {
  cursor: not-allowed;
  opacity: 0.25;
}

.input__textfield:disabled ~ .sd-icon.is-clickable, .input__textfield:disabled ~ .is-clickable, .input__textarea:disabled ~ .sd-icon.is-clickable, .input__textarea:disabled ~ .is-clickable {
  cursor: pointer;
  opacity: 1;
}

.input__textfield::-moz-placeholder, .input__textarea::-moz-placeholder {
  color: transparent;
}

.input__textfield:-ms-input-placeholder, .input__textarea:-ms-input-placeholder {
  color: transparent;
}

.input__textfield::placeholder, .input__textarea::placeholder {
  color: transparent;
}

.input__textfield .input__error-message, .input__textarea .input__error-message {
  display: none;
}

.input__textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 5.5rem;
}

.input__mask {
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: 5;
  width: calc(100% - 20px);
  height: 2rem;
  pointer-events: none;
  background: linear-gradient(to bottom, white 0%, white 30%, white 82%, rgba(255, 255, 255, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-radius: 3px 0 0;
  /* Firefox-Hack */
}

@-moz-document url-prefix("") {
  .input__mask {
    top: 2px;
  }
}
.input__label {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 10;
  max-width: 100%;
  padding: 0 1rem;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-grey-500);
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
  white-space: nowrap;
  pointer-events: none;
  transition: transform 150ms ease;
  transform-origin: top left;
}

.input .input__helper-message {
  position: relative;
  display: inline-block;
  margin: 0.5rem 1rem 0 1rem;
  clear: both;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-grey-500);
  letter-spacing: -0.005em;
}

.input .input__character-counter {
  display: inline-block;
  float: right;
  margin: 0.5rem 1rem 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-grey-500);
  text-align: right;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.input .input__character-counter ~ .input__helper-message {
  margin-top: 0.5rem;
}

.input .input__error-message {
  display: none;
}

.input.has-error .input__textfield, .input.has-error .input__textarea {
  color: var(--color-grey-700);
  border: 1px solid var(--color-red-300);
  box-shadow: inset 0 0 0 1px var(--color-red-300);
}

.input.has-error .input__textfield:active, .input.has-error .input__textfield:focus, .input.has-error .input__textarea:active, .input.has-error .input__textarea:focus {
  /* correct of the border */
  padding: 28px 16px 6px;
  /* IE-HACK for V10 and V11 */
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .input.has-error .input__textfield:active, .input.has-error .input__textfield:focus, .input.has-error .input__textarea:active, .input.has-error .input__textarea:focus {
    padding-top: 1.6875rem;
  }
}
.input.has-error .input__textfield::-moz-placeholder, .input.has-error .input__textarea::-moz-placeholder {
  color: transparent;
}

.input.has-error .input__textfield:-ms-input-placeholder, .input.has-error .input__textarea:-ms-input-placeholder {
  color: transparent;
}

.input.has-error .input__textfield::placeholder, .input.has-error .input__textarea::placeholder {
  color: transparent;
}

.input.has-error .input__error-message {
  display: inline-block;
  margin: 0.5rem 1rem 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-red-400);
  letter-spacing: -0.005em;
}

.input.has-error .input__error-message.input__error-message--stand-alone {
  margin-top: -24px;
}

@media only screen and (max-width: 1023px) {
  .input.has-error .input__error-message.input__error-message--stand-alone {
    margin-top: -16px;
  }
}
@media only screen and (max-width: 767px) {
  .input.has-error .input__error-message.input__error-message--stand-alone {
    margin-top: -16px;
  }
}
@media only screen and (max-width: 425px) {
  .input.has-error .input__error-message.input__error-message--stand-alone {
    margin-top: -16px;
  }
}
@media only screen and (max-width: 359px) {
  .input.has-error .input__error-message.input__error-message--stand-alone {
    margin-top: -16px;
  }
}
.input.has-error .input__label, .input.has-error .input__character-counter {
  color: var(--color-red-400);
}

.input.has-error .input__helper-message, .input.has-error .input__counter {
  display: none;
}

.input.has-error .input__mask {
  top: 2px;
  left: 2px;
}

.input--width-100 {
  max-width: 5.625rem;
}

.input--width-200 {
  max-width: 8.125rem;
}

.input--width-300 {
  max-width: 16.25rem;
}

.input--unit .input__unit {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: right;
  letter-spacing: -0.01em;
  pointer-events: none;
  transition: top 150ms ease;
}

.input--unit .input__textfield {
  padding-right: 3rem;
}

.input--unit.input--unit-big .input__unit {
  width: 3.625rem;
}

.input--unit.input--unit-big .input__textfield {
  padding-right: 5.4375rem;
}

.input--unit.input--unit-extra-big .input__unit {
  width: 4.75rem;
  font-size: 0.875rem;
}

.input--unit.input--unit-extra-big .input__textfield {
  padding-right: 6.625rem;
}

.input.input--unit .sd-icon ~ .input__textfield, .input.input--unit i ~ .input__textfield {
  padding-right: 7rem;
}

.input.input--unit-big .sd-icon ~ .input__textfield, .input.input--unit-big i ~ .input__textfield {
  padding-right: 8rem;
}

.input.input--unit-extra-big .sd-icon ~ .input__textfield, .input.input--unit-extra-big i ~ .input__textfield {
  padding-right: 9rem;
}

.input--placeholder .input__textfield::-moz-placeholder, .input--placeholder .input__textarea::-moz-placeholder {
  color: var(--color-grey-500);
}

.input--placeholder .input__textfield:-ms-input-placeholder, .input--placeholder .input__textarea:-ms-input-placeholder {
  color: var(--color-grey-500);
}

.input--placeholder .input__textfield::placeholder, .input--placeholder .input__textarea::placeholder {
  color: var(--color-grey-500);
}

.input--placeholder .input__label {
  transform: translate(4px, -9px) scale(0.8225);
}

.input--placeholder .input__unit {
  top: 1.75rem;
}

.input .sd-icon, .input i {
  position: absolute;
  top: 1rem;
  right: 0;
  right: 1rem;
  z-index: 10;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
}

.input .sd-icon ~ .input__textarea,
.input .sd-icon ~ .input__textfield, .input i ~ .input__textarea,
.input i ~ .input__textfield {
  padding-right: 3.5rem;
}

.input .sd-icon ~ .input__unit, .input i ~ .input__unit {
  right: 3.5rem;
}

.input .sd-icon.is-clickable {
  cursor: pointer;
  opacity: 1;
}

.input.disabled .sd-icon, .input.disabled i {
  opacity: 0.25;
}

.input + .menu__item {
  top: 3.5rem;
}

.input.is--calendar [type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 8px;
  cursor: pointer;
  opacity: 0;
}

.input.is--calendar .sd-icon {
  pointer-events: none;
}

.input.required--asterisk label::after {
  content: " *";
}

.input.input--has-value label {
  transform: translate(4px, -9px) scale(0.8225);
}

.input.input--has-value .input__unit {
  top: 1.75rem;
}

/************* BUTTONS ************/
/*
  [ nth1 = $btn-height  = height ]
  [ nth2 = $btn-padding-tb = padding top & bottom ]
  [ nth3 = $btn-padding-lr = padding left & right ]
  [ nth4 = font variable ]
*/
/*
  [ nth1 = height & width ]
  [ nth2 = padding ]
  [ nth3 = border-radius ]
  [ nth4 = icon font-size ]
*/
/* stylelint-disable-next-line */
a.btn {
  display: inline-flex;
}

/************ START ACTUAL BUTTON STYLES *************/
.btn, .snackbar__item button {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: all;
  transition-property: border-color, background-color, color;
  /*********  PRIMARY  *********/
  /*********  SECONDARY  *********/
  /*********  TERTIARY  *********/
}

.btn.btn--full-width, .snackbar__item button.btn--full-width {
  display: block;
  width: 100%;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .btn.btn--full-width\:400, .snackbar__item button.btn--full-width\:400 {
    display: block;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .btn.btn--full-width\:300, .snackbar__item button.btn--full-width\:300 {
    display: block;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 425px) {
  .btn.btn--full-width\:200, .snackbar__item button.btn--full-width\:200 {
    display: block;
    width: 100%;
    text-align: center;
  }
}
@media screen and (max-width: 359px) {
  .btn.btn--full-width\:100, .snackbar__item button.btn--full-width\:100 {
    display: block;
    width: 100%;
    text-align: center;
  }
}
.btn span, .snackbar__item button span {
  color: inherit;
}

.btn--50, .snackbar__item button {
  max-height: 2.5rem;
  padding: 0.5rem 1rem;
}

.btn--100 {
  max-height: 3.5rem;
  padding: 1rem 1.5rem;
}

.btn--200 {
  max-height: 4.5rem;
  padding: 1.5rem 1.5rem;
}

.btn .sd-icon, .snackbar__item button .sd-icon,
.btn i,
.snackbar__item button i {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  font-size: 1.5rem;
  color: inherit;
  vertical-align: top;
}

.btn.btn--icon-right .sd-icon, .snackbar__item button.btn--icon-right .sd-icon,
.btn.btn--icon-right i,
.snackbar__item button.btn--icon-right i {
  margin-right: 0;
  margin-left: 0.5rem;
}

.btn .badge, .snackbar__item button .badge {
  margin-left: 0.5rem;
  font-weight: 400;
}

.btn__animation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 1.5rem;
}

.btn__animation .btn__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.btn__animation .btn__dot:not(:nth-child(3)) {
  margin-right: 0.5rem;
}

.btn__animation .btn__dot:nth-child(1) {
  -webkit-animation-name: btn-loading-animation__1;
  animation-name: btn-loading-animation__1;
}

.btn__animation .btn__dot:nth-child(2) {
  -webkit-animation-name: btn-loading-animation__2;
  animation-name: btn-loading-animation__2;
}

.btn__animation .btn__dot:nth-child(3) {
  -webkit-animation-name: btn-loading-animation__3;
  animation-name: btn-loading-animation__3;
}

.btn__animation .btn__dot:nth-child(4) {
  -webkit-animation-name: btn-loading-animation__4;
  animation-name: btn-loading-animation__4;
}

.btn__animation-ripple, .icon-btn__animation-ripple-light, .btn__animation-ripple-light {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  -webkit-animation: ripple_effect_animation 0.3s ease-in-out;
  animation: ripple_effect_animation 0.3s ease-in-out;
}

.btn__animation-ripple-light {
  background-color: rgba(255, 255, 255, 0.1);
}

@-webkit-keyframes btn-loading-animation__1 {
  0%, 70%, 100% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__1 {
  0%, 70%, 100% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
}
@-webkit-keyframes btn-loading-animation__2 {
  0%, 15%, 85%, 100% {
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__2 {
  0%, 15%, 85%, 100% {
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
}
@-webkit-keyframes btn-loading-animation__3 {
  0%, 30%, 100% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__3 {
  0%, 30%, 100% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
}
.btn--primary {
  color: var(--color-grey-700);
  background-color: var(--color-primary-300);
}

@media not all and (pointer: coarse) {
  .btn--primary:hover {
    background-color: var(--color-primary-200);
  }
}
.btn--primary:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

@media not all and (pointer: coarse) {
  .btn--primary:disabled:hover {
    background-color: var(--color-primary-300);
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
}
.btn--primary.btn--danger {
  color: var(--color-white);
  background-color: var(--color-red-400);
}

@media not all and (pointer: coarse) {
  .btn--primary.btn--danger:hover {
    background-color: var(--color-red-300);
  }
}
@media not all and (pointer: coarse) {
  .btn--primary.btn--danger:disabled:hover {
    background-color: var(--color-red-400);
  }
}
.btn--primary.btn--danger .sd-icon,
.btn--primary.btn--danger i {
  color: var(--color-white);
}

.btn--primary.btn--danger.btn--loading {
  background-color: var(--color-red-100);
}

.btn--primary.btn--danger.btn--loading .btn__animation .btn__dot {
  background: var(--color-red-400);
}

.btn--primary.btn--loading {
  pointer-events: none;
  cursor: default;
  background-color: var(--color-primary-100);
}

.btn--primary.btn--loading .btn__animation .btn__dot {
  background: var(--color-primary-400);
}

.btn--secondary {
  color: var(--color-grey-700);
  border: 1px solid var(--color-grey-700);
}

@media not all and (pointer: coarse) {
  .btn--secondary:hover {
    color: var(--color-white);
    background-color: var(--color-grey-700);
  }
  .btn--secondary:hover .sd-icon,
  .btn--secondary:hover i {
    color: var(--color-white);
  }
}
.btn--secondary:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

@media not all and (pointer: coarse) {
  .btn--secondary:disabled:hover {
    color: var(--color-grey-700);
    background-color: transparent;
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
}
.btn--secondary.btn--danger {
  color: var(--color-red-400);
  border: 1px solid var(--color-red-400);
}

.btn--secondary.btn--danger .sd-icon,
.btn--secondary.btn--danger i {
  color: var(--color-red-400);
}

@media not all and (pointer: coarse) {
  .btn--secondary.btn--danger:hover {
    color: var(--color-white);
    background-color: var(--color-red-400);
    border: 1px solid var(--color-red-400);
  }
  .btn--secondary.btn--danger:hover .sd-icon,
  .btn--secondary.btn--danger:hover i {
    color: var(--color-white);
  }
}
@media not all and (pointer: coarse) {
  .btn--secondary.btn--danger:disabled:hover {
    color: var(--color-red-400);
    background-color: transparent;
  }
}
.btn--secondary.btn--danger.btn--loading {
  border: 1px solid var(--color-red-100);
}

.btn--secondary.btn--danger.btn--loading .btn__animation .btn__dot {
  background: var(--color-red-400);
}

.btn--secondary.btn--on-dark {
  color: var(--color-grey-100);
  border: 1px solid var(--color-grey-100);
}

.btn--secondary.btn--on-dark .sd-icon,
.btn--secondary.btn--on-dark i {
  color: var(--color-white);
}

@media not all and (pointer: coarse) {
  .btn--secondary.btn--on-dark:hover {
    color: var(--color-grey-700);
    background-color: var(--color-grey-100);
  }
  .btn--secondary.btn--on-dark:hover .sd-icon,
  .btn--secondary.btn--on-dark:hover i {
    color: var(--color-grey-700);
  }
}
@media not all and (pointer: coarse) {
  .btn--secondary.btn--on-dark:disabled:hover {
    color: var(--color-grey-100);
    background-color: transparent;
  }
}
.btn--secondary.btn--on-dark.btn--loading {
  border: 1px solid var(--color-grey-500);
}

.btn--secondary.btn--on-dark.btn--loading .btn__animation .btn__dot {
  background: var(--color-grey-100);
}

.btn--secondary.btn--loading {
  pointer-events: none;
  cursor: default;
  border: 1px solid var(--color-grey-300);
}

.btn--secondary.btn--loading .btn__animation .btn__dot {
  background: var(--color-grey-700);
}

@media not all and (pointer: coarse) {
  .btn--secondary.btn--loading:hover {
    background-color: transparent;
  }
}
@media not all and (pointer: coarse) {
  .btn--secondary.has-disabled-look:hover {
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    background-color: transparent;
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
}
.btn--tertiary, .snackbar__item button {
  color: var(--color-grey-700);
}

@media not all and (pointer: coarse) {
  .btn--tertiary:hover, .snackbar__item button:hover {
    color: var(--color-grey-500);
  }
}
.btn--tertiary:disabled, .snackbar__item button:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

@media not all and (pointer: coarse) {
  .btn--tertiary:disabled:hover, .snackbar__item button:disabled:hover {
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: var(--color-grey-700);
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
}
.btn--tertiary .btn__content, .snackbar__item button .btn__content, .btn--tertiary .snackbar__item button, .snackbar__item .btn--tertiary button, .snackbar__item button button {
  text-decoration: underline;
  text-underline-offset: 1px;
}

.btn--tertiary.btn--danger, .snackbar__item button.btn--danger {
  color: var(--color-red-400);
}

.btn--tertiary.btn--danger .sd-icon, .snackbar__item button.btn--danger .sd-icon,
.btn--tertiary.btn--danger i,
.snackbar__item button.btn--danger i {
  color: var(--color-red-400);
}

@media not all and (pointer: coarse) {
  .btn--tertiary.btn--danger:hover, .snackbar__item button.btn--danger:hover {
    background-color: var(--color-red-100);
  }
}
@media not all and (pointer: coarse) {
  .btn--tertiary.btn--danger:disabled:hover, .snackbar__item button.btn--danger:disabled:hover {
    background-color: transparent;
  }
}
.btn--tertiary.btn--danger.btn--loading .btn__animation .btn__dot, .snackbar__item button.btn--danger.btn--loading .btn__animation .btn__dot {
  background: var(--color-red-400);
}

.btn--tertiary.btn--on-dark, .snackbar__item button.btn--on-dark {
  color: var(--color-white);
}

.btn--tertiary.btn--on-dark .sd-icon, .snackbar__item button.btn--on-dark .sd-icon,
.btn--tertiary.btn--on-dark i,
.snackbar__item button.btn--on-dark i {
  color: var(--color-white);
}

@media not all and (pointer: coarse) {
  .btn--tertiary.btn--on-dark:hover, .snackbar__item button.btn--on-dark:hover {
    color: var(--color-grey-200);
  }
}
@media not all and (pointer: coarse) {
  .btn--tertiary.btn--on-dark:disabled:hover, .snackbar__item button.btn--on-dark:disabled:hover {
    color: var(--color-white);
  }
}
.btn--tertiary.btn--on-dark.btn--loading .btn__animation .btn__dot, .snackbar__item button.btn--on-dark.btn--loading .btn__animation .btn__dot {
  background: var(--color-grey-100);
}

.btn--tertiary.btn--loading, .snackbar__item button.btn--loading {
  pointer-events: none;
  cursor: default;
}

.btn--tertiary.btn--loading .btn__animation .btn__dot, .snackbar__item button.btn--loading .btn__animation .btn__dot {
  background: var(--color-grey-700);
}

@media not all and (pointer: coarse) {
  .btn--tertiary.btn--loading:hover, .snackbar__item button.btn--loading:hover {
    background-color: transparent;
  }
}
.btn--tertiary.btn--no-padding, .snackbar__item button.btn--no-padding {
  padding: 0;
}

.btn.has-disabled-look, .snackbar__item button.has-disabled-look {
  cursor: not-allowed;
  opacity: 0.25;
}

@media not all and (pointer: coarse) {
  .btn.has-disabled-look:hover, .snackbar__item button.has-disabled-look:hover {
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: var(--color-grey-700);
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
}
/*********  ICON ONLY  *********/
.icon-btn, .expansion-panel__head .expansion-panel__toggle {
  position: relative;
  overflow: hidden;
  border-radius: 100%;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: all;
  transition-property: border-color, background-color, color;
}

.icon-btn--50, .expansion-panel__head .expansion-panel__toggle {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
}

@media not all and (pointer: coarse) {
  .icon-btn--50:hover, .expansion-panel__head .expansion-panel__toggle:hover {
    border-radius: 2rem;
    transform: translateZ(0);
  }
}
.icon-btn--50 .sd-icon, .expansion-panel__head .expansion-panel__toggle .sd-icon,
.icon-btn--50 i,
.expansion-panel__head .expansion-panel__toggle i {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.icon-btn--100 {
  width: 3.5rem;
  min-width: 3.5rem;
  height: 3.5rem;
  padding: 1rem;
}

@media not all and (pointer: coarse) {
  .icon-btn--100:hover {
    border-radius: 2rem;
    transform: translateZ(0);
  }
}
.icon-btn--100 .sd-icon,
.icon-btn--100 i {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.icon-btn--200 {
  width: 4.5rem;
  min-width: 4.5rem;
  height: 4.5rem;
  padding: 1rem;
}

@media not all and (pointer: coarse) {
  .icon-btn--200:hover {
    border-radius: 4.5rem;
    transform: translateZ(0);
  }
}
.icon-btn--200 .sd-icon,
.icon-btn--200 i {
  display: inline-block;
  font-size: 2.5rem;
  line-height: 2.5rem;
}

.icon-btn__animation-ripple {
  position: absolute;
  width: 2px;
  height: 2px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  -webkit-animation: ripple_effect_animation 0.3s ease-in-out;
  animation: ripple_effect_animation 0.3s ease-in-out;
}

.icon-btn__animation-ripple-light {
  background-color: rgba(255, 255, 255, 0.1);
}

@media not all and (pointer: coarse) {
  .icon-btn:hover, .expansion-panel__head .expansion-panel__toggle:hover {
    background-color: var(--color-translucent-150);
  }
}
.icon-btn:disabled, .expansion-panel__head .expansion-panel__toggle:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

@media not all and (pointer: coarse) {
  .icon-btn:disabled:hover, .expansion-panel__head .expansion-panel__toggle:disabled:hover {
    background-color: transparent;
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  .icon-btn:disabled:hover .icon-btn, .expansion-panel__head .expansion-panel__toggle:disabled:hover .icon-btn, .icon-btn:disabled:hover .expansion-panel__head .expansion-panel__toggle, .expansion-panel__head .icon-btn:disabled:hover .expansion-panel__toggle, .expansion-panel__head .expansion-panel__toggle:disabled:hover .expansion-panel__toggle {
    cursor: not-allowed;
  }
}
.icon-btn--on-dark .sd-icon,
.icon-btn--on-dark i {
  color: var(--color-white);
}

.icon-btn--on-dark:hover {
  background-color: var(--color-translucent-250);
}

.icon-btn--blurry {
  /* slightly transparent fallback */
  background-color: var(--color-translucent-250);
  /* if backdrop support: very transparent and blurred */
  /* stylelint-disable-next-line */
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .icon-btn--blurry {
    background-color: var(--color-translucent-200);
    /* stylelint-disable-next-line */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}
.icon-btn--blurry .sd-icon,
.icon-btn--blurry i {
  color: var(--color-white);
}

.icon-btn--blurry:hover {
  background-color: var(--color-grey-500);
}

.icon-btn.has-disabled-look, .expansion-panel__head .has-disabled-look.expansion-panel__toggle {
  cursor: not-allowed;
  opacity: 0.25;
}

@media not all and (pointer: coarse) {
  .icon-btn.has-disabled-look:hover, .expansion-panel__head .has-disabled-look.expansion-panel__toggle:hover {
    -webkit-animation-name: disabled_shake_animation;
    animation-name: disabled_shake_animation;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
    color: var(--color-grey-700);
  }
  @-webkit-keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
  @keyframes disabled_shake_animation {
    10% {
      transform: translateX(-10px);
    }
    40% {
      transform: translateX(10px);
    }
    70% {
      transform: translateX(-10px);
    }
    100% {
      transform: translateX(10px);
    }
  }
}
/**
Checkbox
[ nth1 = checkbox label min height, outer ring width + height]
[ nth2 = padding-top label position ]
[ nth3 = padding-left label position ]
[ nth4 = inner ring width ]
[ nth5 = inner ring height ]
[ nth6 = inner ring top position ]
[ nth7 = inner ring left position ]
[ nth8 = checkbox padding top and bottom ]
 */
.checkbox-group {
  display: inline-block;
  width: 100%;
}

.checkbox-group span {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-grey-500);
}

.checkbox-group--disabled {
  opacity: 0.25;
}

.checkbox-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.checkbox-group--horizontal .checkbox {
  padding: 1rem;
}

.checkbox-group.has-error .checkbox label::before {
  border-color: var(--color-red-300);
  border-width: 2px;
}

.checkbox-group.has-error .checkbox-group__error-message {
  color: var(--color-red-400);
}

.checkbox {
  position: relative;
}

.checkbox input {
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -4px;
  opacity: 0;
}

.checkbox input:focus + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.checkbox input:not(:focus-visible) + label {
  outline: none;
}

.checkbox input:checked + label::before {
  background-color: var(--color-secondary-300);
  border: 1px solid var(--color-secondary-300);
}

.checkbox input:checked + label::after {
  -webkit-animation-name: checkbox_checked;
  animation-name: checkbox_checked;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.checkbox label {
  position: relative;
  display: inline-block;
  margin-left: 0;
  color: var(--color-grey-700);
  cursor: pointer;
}

.checkbox label::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-400);
  border-radius: 4px;
}

.checkbox label:hover::before {
  border: 1px solid var(--color-secondary-300);
}

.checkbox label::after {
  position: absolute;
  font-family: smartdesign-icons;
  color: var(--color-white);
  content: "check";
}

.checkbox label span {
  display: block;
  width: 100%;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-grey-500);
}

.checkbox--100 {
  padding: 0.75rem 0;
}

.checkbox--100 label {
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-left: 3rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.checkbox--100 label::before {
  width: 2rem;
  height: 2rem;
}

.checkbox--100 label::after {
  top: 0.4375rem;
  left: 0.375rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  background-size: 1.25rem 100%;
}

.checkbox--100 input:checked + label::after {
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.checkbox--75 {
  padding: 1rem 0;
}

.checkbox--75 label {
  min-height: 1.5rem;
  padding-top: 0;
  padding-left: 2.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.checkbox--75 label::before {
  width: 1.5rem;
  height: 1.5rem;
}

.checkbox--75 label::after {
  top: 0.25rem;
  left: 0.25rem;
  font-size: 1rem;
  line-height: 1rem;
  background-size: 1rem 100%;
}

.checkbox--75 input:checked + label::after {
  font-size: 1rem;
  line-height: 1rem;
}

.checkbox.checkbox-cell {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 100%;
}

.checkbox.checkbox-cell label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding: 0 3rem 0 0;
}

.checkbox.checkbox-cell label::before {
  top: auto;
  right: 0;
  left: auto;
}

.checkbox.checkbox-cell label::after {
  top: auto;
  right: 0.375rem;
  left: auto;
}

.checkbox.checkbox-cell label .sd-icon {
  padding-top: 0;
}

.checkbox.checkbox-cell.checkbox--75 label {
  padding-right: 2.5rem;
}

.checkbox.checkbox-cell.checkbox--75 label::after {
  right: 0.25rem;
}

.checkbox.checkbox-cell--with-icon label {
  padding-left: 3rem;
}

.checkbox.checkbox-cell--with-icon label .sd-icon,
.checkbox.checkbox-cell--with-icon label i {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 2rem;
  line-height: 2rem;
  color: inherit;
  transform: translateY(-50%);
}

.checkbox.checkbox-cell--with-icon.checkbox--75 label {
  padding-left: 2.5rem;
}

.checkbox.checkbox-cell--with-icon.checkbox--75 .sd-icon,
.checkbox.checkbox-cell--with-icon.checkbox--75 i {
  font-size: 1.5rem;
  line-height: 1.5rem;
}

.checkbox.required--asterisk::after {
  content: " *";
}

.checkbox-group--card .checkbox {
  padding: 0;
}

.checkbox-group--card input:checked + label {
  border-color: var(--color-secondary-300);
  box-shadow: inset var(--color-secondary-300) 0 0 0 1px;
}

.checkbox-group--card label {
  display: flex;
  padding: 1rem 1.5rem 1rem 3.5rem;
  margin: 1rem 0;
  border: 1px solid var(--color-grey-400);
  border-radius: 4px;
}

.checkbox-group--card label::before {
  top: 1rem;
  left: 1rem;
}

.checkbox-group--card label::after {
  top: 1.25rem;
  left: 1.25rem;
}

.checkbox-group--card label:hover {
  border-color: var(--color-secondary-300);
}

.checkbox-group--card label .checkbox-card__icon {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  font-size: 3rem;
  line-height: 3rem;
}

.checkbox-group--card label .checkbox-card__icon--little {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 1rem;
  border-radius: 50%;
}

.checkbox-group--card.has-error .checkbox label {
  border-color: var(--color-red-300);
  box-shadow: inset var(--color-red-300) 0 0 0 1px;
}

@-webkit-keyframes checkbox_checked {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@keyframes checkbox_checked {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
/**
DIVIDER
 */
hr {
  height: 1px;
  margin: 0;
  background-color: var(--color-grey-200);
  border: none;
  border-bottom: 0;
}

hr.divider--on-dark {
  background-color: var(--color-grey-500);
}

/* --------------------------------- BADGES --------------------------------- */
/* height/min-width  | padding left & right | border-radius | fontvariable */
.badge {
  display: inline-block;
}

.badge--dot, .avatar-badge--notification.avatar-badge--100 .badge, .avatar-badge--notification.avatar-badge--200 .badge, .avatar-badge--activity.avatar-badge--100 .badge, .avatar-badge--activity.avatar-badge--200 .badge, .avatar-badge--activity.avatar-badge--300 .badge {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.25rem;
}

.badge--dot.badge--online, .avatar-badge--notification.avatar-badge--100 .badge--online.badge, .avatar-badge--notification.avatar-badge--200 .badge--online.badge, .avatar-badge--activity.avatar-badge--100 .badge--online.badge, .avatar-badge--activity.avatar-badge--200 .badge--online.badge, .avatar-badge--activity.avatar-badge--300 .badge--online.badge {
  background-color: var(--color-green-300);
}

.badge--dot.badge--offline, .avatar-badge--notification.avatar-badge--100 .badge--offline.badge, .avatar-badge--notification.avatar-badge--200 .badge--offline.badge, .avatar-badge--activity.avatar-badge--100 .badge--offline.badge, .avatar-badge--activity.avatar-badge--200 .badge--offline.badge, .avatar-badge--activity.avatar-badge--300 .badge--offline.badge {
  background-color: var(--color-grey-200);
}

.badge--dot.badge--busy, .avatar-badge--notification.avatar-badge--100 .badge--busy.badge, .avatar-badge--notification.avatar-badge--200 .badge--busy.badge, .avatar-badge--activity.avatar-badge--100 .badge--busy.badge, .avatar-badge--activity.avatar-badge--200 .badge--busy.badge, .avatar-badge--activity.avatar-badge--300 .badge--busy.badge {
  background-color: var(--color-red-300);
}

.badge--dot.badge--away, .avatar-badge--notification.avatar-badge--100 .badge--away.badge, .avatar-badge--notification.avatar-badge--200 .badge--away.badge, .avatar-badge--activity.avatar-badge--100 .badge--away.badge, .avatar-badge--activity.avatar-badge--200 .badge--away.badge, .avatar-badge--activity.avatar-badge--300 .badge--away.badge {
  background-color: var(--color-primary-300);
}

.badge--75, .avatar-badge--counter.avatar-badge--200 .badge {
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  text-align: center;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  line-height: 16px;
  letter-spacing: -0.005rem;
}

.badge--100, .avatar-badge--counter.avatar-badge--300 .badge, .avatar-badge--counter.avatar-badge--400 .badge {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  text-align: center;
  border-radius: 1.5rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.badge--text {
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  text-align: center;
  border-radius: 1.5rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.badge .sd-icon,
.badge i {
  float: left;
}

.badge--text .sd-icon, .badge--text i {
  width: 1rem;
  height: 1rem;
  margin: 0.25rem 0.25rem 0.25rem 0;
  font-size: 1rem;
  color: inherit;
}

.badge--text.badge--brandyellow {
  color: var(--color-grey-700);
  background-color: var(--color-primary-300);
}

.badge--text.badge--brandgrey {
  color: var(--color-white);
  background-color: var(--color-grey-700);
}

.badge--text.badge--brandwhite {
  color: var(--color-grey-700);
  background-color: var(--color-white);
}

.badge--icon, .avatar-badge--icon.avatar-badge--300 .badge, .avatar-badge--icon.avatar-badge--400 .badge {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
}

.badge--icon .sd-icon, .avatar-badge--icon.avatar-badge--300 .badge .sd-icon, .avatar-badge--icon.avatar-badge--400 .badge .sd-icon, .badge--icon i, .avatar-badge--icon.avatar-badge--300 .badge i, .avatar-badge--icon.avatar-badge--400 .badge i {
  width: 1rem;
  height: 1rem;
  margin: 0.25rem;
  font-size: 1rem;
  color: inherit;
}

.badge--primary {
  color: var(--color-white);
  background-color: var(--color-secondary-400);
}

.badge--secondary {
  color: var(--color-grey-700);
  background-color: var(--color-grey-200);
}

.badge--important {
  color: var(--color-white);
  background-color: var(--color-red-400);
}

.badge--added {
  color: var(--color-green-400);
  background-color: var(--color-green-100);
}

.badge--removed {
  color: var(--color-red-400);
  background-color: var(--color-red-100);
}

/* ---------------------------------- CHIPS --------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0;
  color: var(--color-grey-700);
  white-space: nowrap;
  vertical-align: middle;
  background-color: var(--color-grey-200);
  border-radius: 2.5rem;
  outline: 0;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: background-color, color;
}

.chip__label {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.chip:hover {
  cursor: pointer;
  background-color: var(--color-grey-300);
}

.chip.chip--is-selected {
  color: var(--color-white);
  background-color: var(--color-secondary-400);
}

.chip.chip--is-selected .sd-icon,
.chip.chip--is-selected i {
  color: var(--color-white);
}

.chip.chip--is-disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.chip.chip--is-disabled:hover {
  cursor: not-allowed;
  opacity: 0.25;
  -webkit-animation-name: disabled_shake_animation;
  animation-name: disabled_shake_animation;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  background-color: var(--color-grey-200);
}

@-webkit-keyframes disabled_shake_animation {
  10% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes disabled_shake_animation {
  10% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  70% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(10px);
  }
}
.chip.chip--blurry {
  color: var(--color-white);
  /* slightly transparent fallback */
  background-color: var(--color-translucent-250);
  /* if backdrop support: very transparent and blurred */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .chip.chip--blurry {
    background-color: var(--color-translucent-200);
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
}
.chip.chip--blurry:hover {
  background-color: var(--color-grey-700);
  opacity: 1;
}

.chip.chip--blurry .sd-icon,
.chip.chip--blurry i {
  color: var(--color-white);
}

.chip .sd-icon,
.chip i {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem -0.25rem 0.5rem 0.75rem;
  font-size: 1.5rem;
  color: var(--color-grey-700);
}

.chip__action {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem 0.5rem 0.5rem -0.25rem;
}

.chip__action .sd-icon,
.chip__action i {
  margin: 0;
}

/* ---------------------------- DATA-TABLE --------------------------- */
.data-table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  border-radius: 0.5rem;
}

@media screen and (max-width: 425px) {
  .data-table {
    margin-right: -1rem;
  }
}
.data-table table {
  width: 100%;
  overflow: hidden;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  border-collapse: collapse;
  /* need for show border */
  background-color: var(--color-white);
  border-radius: 0.5rem;
}

@media screen and (max-width: 425px) {
  .data-table table {
    width: calc(100% - 16px);
  }
}
.data-table table tr {
  min-height: 3.5rem;
  background-color: var(--color-white);
  border: solid var(--color-grey-200);
  border-width: 1px 0 0;
}

.data-table table tr:first-child {
  border: 0;
}

.data-table table tr:first-child:hover {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-grey-200);
}

.data-table table tr:hover {
  background-color: var(--color-grey-100);
  border-color: transparent;
}

.data-table table tr:hover + tr {
  border-color: transparent;
}

.data-table table tr:hover td:first-child,
.data-table table tr:hover th:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.data-table table tr:hover td:last-child,
.data-table table tr:hover th:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
}

.data-table table tr.is-selected {
  background-color: var(--color-secondary-100);
  border-color: transparent;
}

.data-table table tr.is-selected + tr {
  border-color: transparent;
}

.data-table table tr.is-selected td:first-child,
.data-table table tr.is-selected th:first-child {
  border-radius: 0.25rem 0 0 0.25rem;
}

.data-table table tr.is-selected td:last-child,
.data-table table tr.is-selected th:last-child {
  border-radius: 0 0.25rem 0.25rem 0;
}

.data-table table td {
  padding: 1rem;
  text-align: left;
}

.data-table table th {
  padding: 1rem;
  text-align: left;
}

.data-table table .has-no-gutter {
  padding: 0;
}

.data-table--vertical-table-header table tr:first-child:hover {
  background-color: var(--color-grey-100);
  border: 0;
}

.data-table--vertical-table-header table tr:first-child.is-selected {
  background-color: var(--color-secondary-100);
  border-color: transparent;
}

.data-table--200 table td,
.data-table--200 table th {
  padding: 1.5rem 1rem;
}

@media screen and (max-width: 425px) {
  .data-table--mobile {
    white-space: normal;
  }
  .data-table--mobile table {
    background-color: transparent;
  }
  .data-table--mobile table tr {
    float: left;
    width: 100%;
    margin-bottom: 1rem;
    overflow: hidden;
    border-width: 0;
    border-radius: 0.5rem;
  }
  .data-table--mobile table tr:first-child {
    display: none;
  }
  .data-table--mobile table tr td,
  .data-table--mobile table tr th {
    border: solid var(--color-grey-200);
    border-width: 1px 0 0;
  }
  .data-table--mobile table tr td:first-child,
  .data-table--mobile table tr th:first-child {
    display: inline-block;
    width: 100%;
    border: 0;
    border-radius: 0;
  }
  .data-table--mobile table tr td:last-child,
  .data-table--mobile table tr th:last-child {
    border-radius: 0;
  }
  .data-table--mobile table td {
    float: left;
    width: 100%;
  }
  .data-table--mobile.data-table--is-bold tr td:first-child {
    font-weight: 700;
  }
  .data-table--mobile.data-table--vertical-table-header table tr:first-child {
    display: block;
  }
}
.loading-dots {
  display: inline-block;
}

.loading-dots span {
  width: 0.5rem;
  height: 0.5rem;
  display: block;
  float: left;
  margin-left: 0.5rem;
  background: var(--color-grey-700);
  border-radius: 0.25rem;
  -webkit-animation-name: loading-animation__2;
  animation-name: loading-animation__2;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.loading-dots span:first-child {
  margin: 0;
  -webkit-animation-name: loading-animation__1;
  animation-name: loading-animation__1;
}

.loading-dots span:last-child {
  -webkit-animation-name: loading-animation__3;
  animation-name: loading-animation__3;
}

@-webkit-keyframes loading-animation__1 {
  0%, 70%, 100% {
    background: var(--color-grey-300);
  }
  30% {
    background: var(--color-grey-700);
  }
}
@keyframes loading-animation__1 {
  0%, 70%, 100% {
    background: var(--color-grey-300);
  }
  30% {
    background: var(--color-grey-700);
  }
}
@-webkit-keyframes loading-animation__2 {
  0%, 15%, 85%, 100% {
    background: var(--color-grey-300);
  }
  45% {
    background: var(--color-grey-700);
  }
}
@keyframes loading-animation__2 {
  0%, 15%, 85%, 100% {
    background: var(--color-grey-300);
  }
  45% {
    background: var(--color-grey-700);
  }
}
@-webkit-keyframes loading-animation__3 {
  0%, 30%, 100% {
    background: var(--color-grey-300);
  }
  60% {
    background: var(--color-grey-700);
  }
}
@keyframes loading-animation__3 {
  0%, 30%, 100% {
    background: var(--color-grey-300);
  }
  60% {
    background: var(--color-grey-700);
  }
}
.loading-spinner {
  width: 3rem;
  height: 3rem;
  -webkit-animation: spinner-rotate 2.5s linear infinite;
  animation: spinner-rotate 2.5s linear infinite;
}

.loading-spinner circle {
  -webkit-animation: spinner-dash 2s ease-in-out infinite;
  animation: spinner-dash 2s ease-in-out infinite;
  fill: none;
  stroke: var(--color-grey-500);
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke-dasharray: 80, 200;
}

@-webkit-keyframes spinner-rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes spinner-rotate {
  100% {
    transform: rotate(1turn);
  }
}
@-webkit-keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -112px;
  }
}
@keyframes spinner-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -112px;
  }
}
/**
Radio Buttons
[ nth1 = radio label min height, outer ring width + height]
[ nth2 = inner ring width + height ]
[ nth3 = padding-top label position ]
[ nth4 = padding-left label position ]
[ nth5 = inner ring top + left position ]
[ nth6 = radio button padding top and bottom ]
 */
.radio-group {
  display: inline-block;
  width: 100%;
}

.radio-group .sd-icon,
.radio-group i {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.radio-group--disabled {
  opacity: 0.25;
}

.radio-group--horizontal {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1rem;
}

.radio-group--horizontal .radio-button {
  padding: 1rem;
}

.radio-group span {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-grey-500);
}

.radio-group.has-error .radio-button label::before {
  border-color: var(--color-red-300);
  border-width: 2px;
}

.radio-group.has-error .radio-group__error-message {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-red-400);
}

.radio-button input {
  position: absolute;
  width: 0;
  height: 0;
  margin-left: -4px;
  opacity: 0;
}

.radio-button input:focus + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.radio-button input:not(:focus-visible) + label {
  outline: none;
}

.radio-button input:checked + label::before {
  background-color: var(--color-secondary-300);
  border: 1px solid var(--color-secondary-300);
}

.radio-button input:checked + label::after {
  -webkit-animation-name: radio_checked;
  animation-name: radio_checked;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.radio-button label {
  position: relative;
  display: inline-block;
  margin-left: 0;
  color: var(--color-grey-700);
  cursor: pointer;
}

.radio-button label::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-400);
  border-radius: 50%;
}

.radio-button label:hover::before {
  border: 1px solid var(--color-secondary-300);
}

.radio-button label::after {
  position: absolute;
  content: "";
  background: var(--color-white) none repeat scroll 0 0;
  border-radius: 50%;
}

.radio-button label span {
  display: block;
  width: 100%;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.radio-button--100 {
  padding: 0.75rem 0;
}

.radio-button--100 label {
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-left: 3rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.radio-button--100 label::before {
  width: 2rem;
  height: 2rem;
}

.radio-button--100 label::after {
  top: 0.5rem;
  left: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.radio-button--100 input:checked + label::after {
  width: 1rem;
  height: 1rem;
}

.radio-button--75 {
  padding: 1rem 0;
}

.radio-button--75 label {
  min-height: 1.5rem;
  padding-top: 0;
  padding-left: 2.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.radio-button--75 label::before {
  width: 1.5rem;
  height: 1.5rem;
}

.radio-button--75 label::after {
  top: 0.5rem;
  left: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
}

.radio-button--75 input:checked + label::after {
  width: 0.5rem;
  height: 0.5rem;
}

.radio-group--card .radio-button {
  padding: 0;
}

.radio-group--card input:checked + label {
  border-color: var(--color-secondary-300);
  box-shadow: inset var(--color-secondary-300) 0 0 0 1px;
}

.radio-group--card label {
  display: flex;
  padding: 1rem 1.5rem 1rem 3.5rem;
  margin: 1rem 0;
  border: 1px solid var(--color-grey-400);
  border-radius: 4px;
  /* stylelint-disable selector-no-qualifying-type */
  /* stylelint-enable */
}

.radio-group--card label::before {
  top: 1rem;
  left: 1rem;
}

.radio-group--card label::after {
  top: 1.5rem;
  left: 1.5rem;
}

.radio-group--card label:hover {
  border-color: var(--color-secondary-300);
}

.radio-group--card label .radio-card__icon span.sd-icon,
.radio-group--card label .radio-card__icon i {
  width: 3rem;
  height: 3rem;
  padding-top: 0;
  margin-right: 1rem;
  font-size: 3rem;
  line-height: 3rem;
}

.radio-group--card label .radio-card__icon--little span.sd-icon,
.radio-group--card label .radio-card__icon--little i {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 1rem;
  font-size: 1.5rem;
  border-radius: 50%;
}

.radio-group--card.has-error .radio-button label {
  border-color: var(--color-red-300);
  box-shadow: inset var(--color-red-300) 0 0 0 1px;
}

@-webkit-keyframes radio_checked {
  from {
    background-color: var(--color-secondary-300);
    transform: scale(0);
  }
  to {
    background-color: var(--color-white);
    transform: scale(1);
  }
}
@keyframes radio_checked {
  from {
    background-color: var(--color-secondary-300);
    transform: scale(0);
  }
  to {
    background-color: var(--color-white);
    transform: scale(1);
  }
}
/* ----------------------------- NUMERIC STEPPER ---------------------------- */
.numeric-stepper {
  position: relative;
  display: flex;
  width: 10.5rem;
  height: 3.5rem;
  background: var(--color-white);
}

.numeric-stepper__btn {
  position: relative;
  padding: 1rem;
  font-size: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--color-grey-400);
}

.numeric-stepper__btn.numeric-stepper--minus {
  border-radius: 0.25rem 0 0 0.25rem;
}

.numeric-stepper__btn.numeric-stepper--plus {
  border-radius: 0 0.25rem 0.25rem 0;
  margin-left: -1px;
}

.numeric-stepper__btn:hover {
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--color-secondary-300);
}

.numeric-stepper__btn:focus {
  background-color: var(--color-secondary-300);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-secondary-300);
}

.numeric-stepper__btn:focus .sd-icon,
.numeric-stepper__btn:focus i {
  color: var(--color-white);
}

.numeric-stepper__input {
  /* stylelint-disable */
  position: relative;
  margin-left: -1px;
  font-family: inherit;
  color: var(--color-grey-700);
  text-align: center;
  -webkit-appearance: textfield;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-grey-400);
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  /* stylelint-enable */
}

.numeric-stepper__input::-webkit-inner-spin-button, .numeric-stepper__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.numeric-stepper__input:hover {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-secondary-300);
}

.numeric-stepper__input:focus {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color-secondary-300);
  outline: none;
}

.numeric-stepper--has-error {
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.numeric-stepper--has-error .numeric-stepper__btn {
  border: 1px solid var(--color-red-300);
  box-shadow: inset 0 0 0 1px var(--color-red-300);
}

.numeric-stepper--has-error .numeric-stepper__btn:hover {
  box-shadow: inset 0 0 0 1px var(--color-red-300);
}

.numeric-stepper--has-error .numeric-stepper__input {
  border-width: 2px 1px 2px 1px;
  border-style: solid;
  border-color: var(--color-red-300);
}

.numeric-stepper--has-error .numeric-stepper__error-message {
  min-width: inherit;
  margin: 0.5rem 1rem 0 1rem;
  color: var(--color-red-400);
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.numeric-stepper.is-disabled {
  pointer-events: none;
}

/**
BUTTONGROUP
 */
.button-group {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
  border-radius: 0.375rem;
  padding: 0.1875rem;
}

.button-group--percentage {
  display: flex;
}

.button-group__button {
  display: flex;
  flex-shrink: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  border-radius: 0.25rem;
  position: relative;
  z-index: 10;
  transition: 150ms;
  transition-property: color;
}

.button-group__button:not(:first-child) {
  margin-left: -1px;
}

.button-group__button:not(.is-active-button):not(:last-child)::after {
  position: absolute;
  top: 0.375rem;
  right: 0;
  display: block;
  width: 1px;
  height: 1.3125rem;
  content: " ";
  background: var(--color-grey-200);
}

.button-group__button.is-active {
  font-weight: 700;
}

.button-group__button.is-active-button {
  background: var(--color-white);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

.button-group__button.is-active-button:hover {
  font-weight: 700;
}

.button-group__button.is-active-button:not(:hover) {
  font-weight: 700;
}

.button-group__button:hover:not(.is-active):not(.is-disabled) {
  color: var(--color-grey-500);
}

.button-group__button:active:hover:not(.is-active):not(.is-disabled) {
  color: var(--color-grey-400);
}

.button-group--percentage .button-group__button {
  flex: 1;
  flex-shrink: 0;
  justify-content: center;
}

.button-group__text {
  display: inline-block;
}

.button-group__text::after {
  display: block;
  height: 0;
  overflow: hidden;
  text-align: center;
  visibility: hidden;
  content: attr(title);
  font-weight: 700;
}

.sd-icon + .button-group__text, i + .button-group__text {
  margin-left: 0.5rem;
}

.button-group .sd-icon,
.button-group i {
  float: left;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  color: inherit;
  pointer-events: none;
}

.button-group__indicator-animated {
  display: flex;
  flex-shrink: 0;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  border-radius: 0.25rem;
  background: var(--color-white);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
  font-weight: 700;
  position: absolute;
  top: 3px;
  bottom: 3px;
  z-index: 1;
  opacity: 0;
  transition-duration: 450ms;
  transition-property: left, width;
}

.switch__wrapper {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 2rem;
}

.switch__checkbox {
  width: 0;
  height: 0;
  opacity: 0;
}

.switch__checkbox:focus + span {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.switch__checkbox:not(:focus-visible) + span {
  outline: none;
}

.switch__checkbox:checked + .switch__slider {
  background-color: var(--color-secondary-300);
  border-color: var(--color-secondary-300);
}

.switch__checkbox:checked + .switch__slider::before {
  background-color: var(--color-white);
  transform: translateX(1rem);
}

.switch__checkbox:disabled + .switch__slider {
  cursor: not-allowed;
  opacity: 0.25;
}

.switch__slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
  border: 1px solid var(--color-grey-400);
  border-radius: 2.125rem;
  transition: border-color 150ms, background-color 150ms;
}

.switch__slider::before {
  position: absolute;
  bottom: 0.1875rem;
  left: 0.1875rem;
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  background-color: var(--color-grey-300);
  border-radius: 50%;
  transition: 150ms;
}

.switch__slider:hover {
  border-color: var(--color-secondary-300);
}

.switch__error-message {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-red-400);
}

.switch.has-error .switch__slider {
  border-color: var(--color-red-300);
  border-width: 2px;
}

.switch.has-error .switch__slider::before {
  bottom: 0.125rem;
}

.step-item, .stepper .stepper__visual .stepper__step::before {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 2.25rem;
  text-align: center;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-style: inset;
  border-radius: 100%;
  transition: background-color 300ms ease;
}

.step-item--default, .stepper .stepper__visual .stepper__step::before {
  background-color: var(--color-white);
  border: 0.125rem solid var(--color-grey-200);
}

.step-item--active, .stepper .stepper__visual .stepper__step.is-active::before {
  color: var(--color-white);
  background-color: var(--color-grey-700);
  border: 0.125rem solid var(--color-grey-700);
}

.step-item--active-success, .stepper .stepper__visual .stepper__step.is-active-success::before, .stepper--checked .stepper__visual .stepper__step.is-active::before {
  color: var(--color-grey-700);
  background-color: var(--color-grey-700);
  border: 0.125rem solid var(--color-grey-700);
}

.step-item--active-success::before, .stepper .stepper__visual .stepper__step.is-active-success::before, .stepper--checked .stepper__visual .stepper__step.is-active::before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: smartdesign-icons;
  font-size: 1.5rem;
  font-weight: 400;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  content: "check";
}

.step-item--active-error, .stepper .stepper__visual .stepper__step.is-active-error::before {
  color: var(--color-red-300);
  background-color: var(--color-red-300);
  border: 0.125rem solid var(--color-red-300);
}

.step-item--active-error::before, .stepper .stepper__visual .stepper__step.is-active-error::before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: smartdesign-icons;
  font-size: 1.5rem;
  font-weight: 400;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  content: "close";
}

.step-item--visited, .stepper .stepper__visual .stepper__step.is-complete::before {
  background-color: var(--color-white);
  border: 0.125rem solid var(--color-grey-700);
}

.step-item--visited-success, .stepper .stepper__visual .stepper__step.is-visited-success::before, .stepper--checked .stepper__visual .stepper__step.is-complete::before {
  color: var(--color-white);
  background-color: var(--color-white);
  border: 0.125rem solid var(--color-grey-700);
}

.step-item--visited-success::before, .stepper .stepper__visual .stepper__step.is-visited-success::before, .stepper--checked .stepper__visual .stepper__step.is-complete::before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: smartdesign-icons;
  font-size: 1.5rem;
  font-weight: 400;
  transform: translate(-50%, -50%);
  color: var(--color-grey-700);
  content: "check";
}

.step-item--visited-error, .stepper .stepper__visual .stepper__step.is-visited-error::before {
  color: var(--color-white);
  background-color: var(--color-white);
  border: 0.125rem solid var(--color-red-300);
}

.step-item--visited-error::before, .stepper .stepper__visual .stepper__step.is-visited-error::before {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: smartdesign-icons;
  font-size: 1.5rem;
  font-weight: 400;
  transform: translate(-50%, -50%);
  color: var(--color-red-300);
  content: "close";
}

.textlist {
  padding: 0.5rem 0;
}

.textlist ul,
.textlist ol {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
}

.textlist ul li,
.textlist ol li {
  margin: 0.5rem 0;
  /* stylelint-disable selector-max-type */
  /* stylelint-enable selector-max-type */
}

.textlist ul li a,
.textlist ul li span,
.textlist ul li b,
.textlist ul li strong,
.textlist ul li i,
.textlist ul li em,
.textlist ol li a,
.textlist ol li span,
.textlist ol li b,
.textlist ol li strong,
.textlist ol li i,
.textlist ol li em {
  text-indent: initial;
}

.textlist ul .textlist__headline,
.textlist ol .textlist__headline {
  font-weight: 700;
  color: var(--color-grey-700);
}

.textlist ul .textlist__headline::after,
.textlist ol .textlist__headline::after {
  white-space: pre;
  content: "\a";
}

.textlist ul {
  padding-left: 1rem;
  text-indent: -1rem;
}

.textlist ul li::before {
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.625rem;
  content: "•";
}

.textlist ol {
  counter-reset: li;
}

.textlist ol > li {
  position: relative;
  display: block;
  padding-left: 2rem;
}

.textlist ol > li::before {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 2rem;
  content: counter(li, decimal) ".";
  counter-increment: li;
}

.textlist.textlist--50 {
  padding: 0.75rem 0;
}

.textlist.textlist--50 ul,
.textlist.textlist--50 ol {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.textlist.textlist--50 ul li,
.textlist.textlist--50 ol li {
  margin: 0.25rem 0;
}

.textlist.textlist--50 ol li {
  padding-left: 1.5rem;
}

.textlist.textlist--200 > ul {
  padding-left: 2rem;
  text-indent: -2rem;
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .textlist.textlist--200 > ul {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.textlist.textlist--200 > ul li::before {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .textlist.textlist--200 > ul li::before {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.textlist.textlist--200 > ul li > ul > li {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .textlist.textlist--200 > ul li > ul > li {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.textlist.textlist--200 > ul li > ul > li::before {
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.625rem;
  content: "•";
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.textlist.textlist--icon > ul {
  padding-left: 1.5rem;
  text-indent: -1.5rem;
}

.textlist.textlist--icon > ul li::before {
  position: relative;
  top: 0.125rem;
  margin-right: 0.5rem;
  font-family: smartdesign-icons;
  font-size: 1rem;
  line-height: 1rem;
  content: "check";
}

.textlist.textlist--icon > ul li > ul > li::before {
  top: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.625rem;
  content: "•";
}

.textlist.textlist--icon > ul [data-icon]::before {
  top: 0.125rem;
  content: attr(data-icon);
}

.textlist.textlist--icon.textlist--200 > ul > li::before {
  top: 0.25rem;
  font-size: 1.5rem;
}

/**
CARDS
/@author Anna-Maria Tonke
 */
.card {
  padding: 0.5rem 1rem;
  margin-bottom: 3.5rem;
  background-color: var(--color-white);
  border-radius: 1rem;
}

.card--is-grouped {
  margin-bottom: 2rem;
}

.card--is-grey {
  background-color: var(--color-grey-100);
}

.card--has-border {
  border: solid 1px var(--color-grey-200);
}

@media screen and (min-width: 768px) {
  .card--200 {
    padding: 1.25rem 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  .card--is-grouped {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-radius: 0;
  }
  .card--is-grouped-first {
    padding-top: 0.5rem;
    border-radius: 1rem 1rem 0 0;
  }
  .card--is-grouped-last {
    padding-bottom: 0.5rem;
    margin-bottom: 3.5rem;
    border-radius: 0 0 1rem 1rem;
  }
}
@media screen and (max-width: 425px) {
  .card {
    margin-right: -16px;
    margin-bottom: 1.5rem;
    margin-left: -16px;
  }
  .card--is-grouped:not(.card--is-grouped-last) {
    margin-bottom: 0;
  }
}
.card--no-padding {
  padding: 0;
}

.card--no-margin {
  margin: 0;
}

/**
NATIVE-SELECT
/@author Maik Anthes
*/
.native-select {
  position: relative;
}

.native-select select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 3.5rem;
  padding: 0 3.5rem 0 1rem;
  margin: 0;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-400);
  border-radius: 0.25rem;
  outline: none;
  box-shadow: 0 0 0 0 var(--color-grey-400);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.native-select select:hover {
  border: 1px solid var(--color-secondary-300);
}

.native-select select:active, .native-select select:focus {
  border: 1px solid var(--color-secondary-300);
  box-shadow: 0 0 0 1px var(--color-secondary-300);
}

.native-select select:focus ~ .native-select__icon {
  transform: rotateX(180deg);
}

.native-select select:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.native-select select:disabled ~ .native-select__icon, .native-select select:disabled ~ .native-select__label {
  opacity: 0.25;
}

.native-select select:disabled:hover,
.native-select select:disabled :active,
.native-select select:disabled :focus {
  border: 1px solid var(--color-grey-400);
  box-shadow: 0 0 0 1px var(--color-grey-400);
}

.native-select select::-ms-expand {
  display: none;
}

.native-select__icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  pointer-events: none;
  transform: rotateX(0deg);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

.native-select--has-label select {
  padding: 1.625rem 3.5rem 0.375rem 1rem;
}

.native-select__label {
  position: absolute;
  top: 1rem;
  left: 0;
  z-index: 10;
  padding: 0 3.5rem 0 1rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-500);
  pointer-events: none;
  transform: translate(4px, -9px) scale(0.8225);
  transform-origin: top left;
}

.native-select .input__error-message {
  display: none;
}

.native-select.has-error .input__error-message {
  display: block;
  margin: 0.5rem 1rem 0;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-red-400);
}

.native-select.has-error select {
  border-color: var(--color-red-300);
  box-shadow: inset 0 0 0 1px var(--color-red-300);
}

/**
MENU
 */
.menu {
  position: relative;
  display: inline-block;
}

.menu__item {
  position: absolute;
  z-index: 20;
  width: 100%;
  max-height: 320px;
  padding: 0.5rem 0;
  overflow-y: auto;
  white-space: normal;
  cursor: pointer;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

.menu__item::-webkit-scrollbar-thumb {
  background-color: var(--color-grey-200);
  background-clip: padding-box;
  border: 4px solid transparent;
  border-radius: 8px;
}

.menu__item::-webkit-scrollbar {
  width: 16px;
}

.menu__item ul li {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  border-radius: 0.25rem;
}

.menu__item ul li:hover, .menu__item ul li:focus {
  background-color: var(--color-grey-200);
  outline: none;
}

.menu__item ul li:active, .menu__item ul li.is-selected, .menu__item ul li:focus {
  color: var(--color-white);
  background-color: var(--color-secondary-400);
}

.menu__item ul .has-nesting {
  padding: 0 0 0 1rem;
}

.menu__item ul .has-nesting:hover, .menu__item ul .has-nesting:focus {
  background-color: var(--color-white);
}

.menu__item ul .has-nesting:active, .menu__item ul .has-nesting.is-selected {
  color: var(--color-grey-700);
  background-color: var(--color-white);
}

.menu--full-width {
  width: 100%;
}

.menu.menu--bottom-right .menu__item {
  right: 0;
  bottom: -1rem;
  transform: translate(0, 100%);
}

.menu.menu--top-right .menu__item {
  top: -1rem;
  right: 0;
  transform: translate(0, -100%);
}

.menu.menu--top-left .menu__item {
  top: -1rem;
  left: 0;
  transform: translate(0, -100%);
}

/**
DROPDOWN
 */
.dropdown {
  position: relative;
  /** DROPDOWN - LABEL **/
  /** DROPDOWN - ERROR-MESSAGE **/
  /** DROPDOWN - ICON **/
  /** DROPDOWN - MENU **/
}

.dropdown:hover .dropdown__input {
  border: 1px solid var(--color-secondary-300);
}

.dropdown .is-readonly + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown__input {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: 100%;
  height: 3.5rem;
  padding: 1.75rem 1rem 0.375rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Chrome all / Safari all */
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-400);
  border-radius: 0.25rem;
  outline: none;
  box-shadow: 0 0 0 0 var(--color-grey-400);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* hide standard input shadow on IOS */
  /** DROPDOWN - DISABLED **/
}

.dropdown__input.is-searchbar .dropdown__input {
  /* stylelint-disable-next-line */
  -webkit-user-select: initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select: initial;
  /* Chrome all / Safari all */
}

.dropdown__input:hover {
  border: 1px solid var(--color-secondary-300);
}

.dropdown__input:active, .dropdown__input:focus {
  padding: 1.75rem 1rem 0.375rem;
  border: 1px solid var(--color-secondary-300);
  box-shadow: 0 0 0 1px var(--color-secondary-300);
  /* IE-HACK for V10 and V11 */
}

.dropdown__input:active .dropdown__input, .dropdown__input:focus .dropdown__input {
  border: 1px solid var(--color-secondary-300);
  box-shadow: 0 0 0 1px var(--color-secondary-300);
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dropdown__input:active, .dropdown__input:focus {
    padding-top: 27px;
  }
}
.dropdown__input:active + label, .dropdown__input:focus + label, .dropdown__input:valid + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown__input:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.dropdown__input:disabled:active, .dropdown__input:disabled:focus {
  border: 1px solid var(--color-grey-400);
  box-shadow: none;
}

.dropdown__input:disabled ~ label, .dropdown__input:disabled ~ .sd-icon, .dropdown__input:disabled ~ i {
  cursor: not-allowed;
  opacity: 0.25;
  /* stylelint-disable-next-line */
  transform: initial;
}

.dropdown__input:disabled:hover {
  border: 1px solid var(--color-grey-400);
}

.dropdown__label {
  position: absolute;
  top: 16px;
  left: 0;
  z-index: 10;
  padding: 0 1rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-500);
  pointer-events: none;
  transition: transform 150ms ease;
  transform-origin: top left;
}

.dropdown input:-moz-placeholder-shown ~ .dropdown__label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown input:-ms-input-placeholder ~ .dropdown__label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown input:placeholder-shown ~ .dropdown__label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown.has-value .dropdown__label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown .input__error-message {
  display: none;
}

.dropdown.has-error .input__error-message {
  display: block;
  margin: 0.5rem 1rem 0;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-red-400);
}

.dropdown.has-error .dropdown__label {
  color: var(--color-red-400);
}

.dropdown.has-error .dropdown__input {
  border-color: var(--color-red-300);
  box-shadow: inset 0 0 0 1px var(--color-red-300);
}

.dropdown.has-error.dropdown--is-shown .input__error-message {
  display: none;
}

.dropdown .sd-icon,
.dropdown i {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  pointer-events: none;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

.dropdown .menu {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0.9) translateY(-40px);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: opacity, visibility, transform;
}

.dropdown.dropdown--is-shown .sd-icon,
.dropdown.dropdown--is-shown i {
  transform: rotateX(180deg);
}

.dropdown.dropdown--is-shown.is-searchbar .sd-icon,
.dropdown.dropdown--is-shown.is-searchbar i {
  transform: none;
}

.dropdown.dropdown--is-shown .menu {
  visibility: visible;
  opacity: 1;
  transform: scaleY(1) translateX(0);
}

.dropdown.dropdown--is-shown .dropdown__label {
  transform: translate(4px, -9px) scale(0.8225);
}

.dropdown.required--asterisk label::after {
  content: " *";
}

.rating {
  display: inline-block;
  vertical-align: top;
}

.rating.rating--100 .rating__star {
  position: relative;
  display: block;
  float: left;
  width: 1.5rem;
  height: 1.5rem;
  font-family: smartdesign-icons;
  font-size: 1.5rem;
  line-height: 1.5rem;
  color: var(--color-primary-300);
  transition: transform 150ms ease;
}

.rating.rating--100 .rating__star::before {
  content: "star";
}

.rating.rating--100 .rating__star.rating--half::before {
  content: "star_half";
}

.rating.rating--100 .rating__star.rating--full::before {
  content: "star_solid";
}

.rating.rating--100 .rating__average {
  float: left;
  color: var(--color-grey-700);
  margin-left: 4px;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.rating.rating--100 .rating__count {
  float: left;
  color: var(--color-grey-500);
  margin-left: 4px;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.rating.rating--100 .rating__error-message {
  display: none;
}

.rating.rating--100.rating--input .rating__star {
  color: var(--color-grey-400);
  cursor: pointer;
}

.rating.rating--100.rating--input .rating__star:hover {
  transform: scale(1.2);
}

.rating.rating--100.rating--input .rating__star.rating--full, .rating.rating--100.rating--input .rating__star.rating--half {
  color: var(--color-secondary-300);
  -webkit-animation: stretch-bounce 450ms ease;
  animation: stretch-bounce 450ms ease;
}

.rating.rating--200 .rating__star {
  position: relative;
  display: block;
  float: left;
  width: 2.5rem;
  height: 2.5rem;
  font-family: smartdesign-icons;
  font-size: 2.5rem;
  line-height: 2.5rem;
  color: var(--color-primary-300);
  transition: transform 150ms ease;
}

.rating.rating--200 .rating__star::before {
  content: "star";
}

.rating.rating--200 .rating__star.rating--half::before {
  content: "star_half";
}

.rating.rating--200 .rating__star.rating--full::before {
  content: "star_solid";
}

.rating.rating--200 .rating__average {
  float: left;
  color: var(--color-grey-700);
  margin-left: 8px;
  font-size: 1.4375rem;
  line-height: 40px;
  letter-spacing: -0.01em;
}

.rating.rating--200 .rating__count {
  float: left;
  color: var(--color-grey-500);
  margin-left: 8px;
  font-size: 1.4375rem;
  line-height: 40px;
  letter-spacing: -0.01em;
}

.rating.rating--200 .rating__error-message {
  display: none;
}

.rating.rating--200.rating--input .rating__star {
  color: var(--color-grey-400);
  cursor: pointer;
}

.rating.rating--200.rating--input .rating__star:hover {
  transform: scale(1.2);
}

.rating.rating--200.rating--input .rating__star.rating--full, .rating.rating--200.rating--input .rating__star.rating--half {
  color: var(--color-secondary-300);
  -webkit-animation: stretch-bounce 450ms ease;
  animation: stretch-bounce 450ms ease;
}

.rating.rating--200.has-error .rating__star {
  color: var(--color-red-300);
}

.rating.rating--200.has-error .rating__average,
.rating.rating--200.has-error .rating__count {
  display: none;
}

.rating.rating--200.has-error .rating__error-message {
  display: block;
  clear: left;
  font-size: typo-property(75, font-size);
  line-height: typo-property(75, line-height);
  color: var(--color-red-400);
  letter-spacing: typo-property(75, letter-spacing);
}

@-webkit-keyframes stretch-bounce {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes stretch-bounce {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/************* FLOATING BUTTONS ************/
.btn-float {
  position: relative;
  padding: 1rem;
  text-align: center;
  background-color: var(--color-primary-300);
  border-radius: 2rem;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04), 0 5px 5px rgba(206, 132, 132, 0.05), 0 15px 30px rgba(50, 50, 93, 0.08);
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.btn-float:hover {
  background-color: var(--color-primary-200);
}

.btn-float:disabled {
  cursor: not-allowed;
  background-color: var(--color-primary-100);
}

.btn-float:disabled * {
  opacity: 0.25;
}

@media screen and (max-width: 425px) {
  .btn-float.btn-float--full-width\:200 {
    width: 100%;
  }
}
.btn-float .badge {
  margin-left: 0.5rem;
  font-weight: 400;
}

.btn-float .btn-float__text {
  margin-left: 0.5rem;
}

.btn-float .sd-icon {
  font-size: 1.5rem;
  color: inherit;
  vertical-align: top;
}

.btn-float__animation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 1.5rem;
}

.btn-float__animation .btn-float__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.btn-float__animation .btn-float__dot:not(:nth-child(3)) {
  margin-right: 0.5rem;
}

.btn-float__animation .btn-float__dot:nth-child(1) {
  -webkit-animation-name: btn-loading-animation__1;
  animation-name: btn-loading-animation__1;
}

.btn-float__animation .btn-float__dot:nth-child(2) {
  -webkit-animation-name: btn-loading-animation__2;
  animation-name: btn-loading-animation__2;
}

.btn-float__animation .btn-float__dot:nth-child(3) {
  -webkit-animation-name: btn-loading-animation__3;
  animation-name: btn-loading-animation__3;
}

.btn-float__animation .btn-float__dot:nth-child(4) {
  -webkit-animation-name: btn-loading-animation__4;
  animation-name: btn-loading-animation__4;
}

@keyframes btn-loading-animation__1 {
  0%, 70%, 100% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__2 {
  0%, 15%, 85%, 100% {
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__3 {
  0%, 30%, 100% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
}
.btn-float.btn-float--loading {
  background-color: var(--color-primary-100);
}

.btn-float.btn-float--loading .btn-float__animation .btn-float__dot {
  background: var(--color-primary-400);
}

.btn-float.btn-float--secondary {
  background-color: var(--color-white);
}

.btn-float.btn-float--secondary:hover {
  color: var(--color-white);
  background-color: var(--color-grey-700);
}

.btn-float.btn-float--secondary:hover .sd-icon,
.btn-float.btn-float--secondary:hover i {
  color: var(--color-white);
}

.btn-float.btn-float--secondary:disabled {
  background-color: var(--color-white);
}

.btn-float.btn-float--secondary:disabled:hover {
  color: var(--color-grey-700);
  background-color: var(--color-white);
}

.btn-float.btn-float--secondary:disabled:hover .sd-icon,
.btn-float.btn-float--secondary:disabled:hover i {
  color: var(--color-grey-700);
}

.btn-float.btn-float--secondary.has-disabled-look {
  background-color: var(--color-white);
}

.btn-float.btn-float--secondary.has-disabled-look:hover {
  color: var(--color-grey-700);
  background-color: var(--color-white);
}

.btn-float.btn-float--secondary.has-disabled-look:hover .sd-icon,
.btn-float.btn-float--secondary.has-disabled-look:hover i {
  color: var(--color-grey-700);
}

.btn-float.btn-float--secondary.btn-float--loading .btn-float__animation .btn-float__dot {
  background: var(--color-grey-700);
}

.btn-float.btn-float--secondary.btn-float--loading:hover {
  background-color: var(--color-white);
}

.btn-float.has-disabled-look {
  cursor: not-allowed;
  background-color: var(--color-primary-100);
}

.btn-float.has-disabled-look * {
  opacity: 0.25;
}

.input-slider {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  border-radius: 1rem;
  /* Label */
}

.input-slider__row {
  display: flex;
  flex-direction: row;
}

.input-slider__col.col--left {
  flex: 1;
}

.input-slider__col.col--right {
  flex: 1;
  text-align: right;
}

.input-slider .slider {
  position: relative;
  height: 2rem;
}

.input-slider .slider__unselected-left {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0.25rem;
  left: 0;
  margin: auto 0;
  background-color: var(--color-grey-200);
  border-radius: 1rem;
}

.input-slider .slider__unselected-right {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0.25rem;
  right: 0;
  margin: auto 0;
  background-color: var(--color-grey-200);
  border-radius: 1rem;
}

.input-slider .slider__range {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0.25rem;
  left: 0;
  margin: auto 0;
  background-color: var(--color-secondary-300);
  border-radius: 1rem;
}

.input-slider .slider__thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  margin: auto 0 auto -1rem;
  text-align: left;
  cursor: pointer;
  background-color: var(--color-white);
  border: 0.0625rem solid var(--color-grey-200);
  border-radius: 50%;
  outline: none;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
  transition: transform 150ms ease;
}

.input-slider .slider__thumb .sd-icon,
.input-slider .slider__thumb i {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 24px;
  color: var(--color-secondary-300);
  transform: translate(-50%, -50%);
}

.input-slider .slider__thumb:hover {
  border-color: var(--color-secondary-300);
}

.input-slider .slider__thumb.is-drag {
  transform: scale(1.125);
}

.input-slider .slider__thumb.is-focus {
  border: 0.125rem solid var(--color-secondary-300);
}

.input-slider .slider [type=range] {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 0.25rem;
  z-index: 3;
  width: 100%;
  margin: auto 0;
  pointer-events: none;
  opacity: 0;
}

.input-slider .slider [type=range]::-ms-track, .input-slider .slider [type=range]::-moz-range-track {
  color: transparent;
  background: transparent;
}

.input-slider .slider [type=range]:focus::-webkit-slider-runnable-track {
  background: transparent;
  border: transparent;
}

.input-slider .slider [type=range]:focus {
  outline: none;
}

.input-slider .slider [type=range]::-ms-thumb, .input-slider .slider [type=range]::-moz-range-thumb, .input-slider .slider [type=range]::-webkit-slider-thumb {
  width: 2rem;
  height: 2rem;
  pointer-events: all;
  background: transparent;
  border: 0 none;
  border-radius: 0;
}

.input-slider .slider [type=range]::-ms-fill-lower, .input-slider .slider [type=range]::-ms-fill-upper {
  background: transparent;
  border: 0 none;
}

.input-slider .slider [type=range]::-ms-tooltip {
  display: none;
}

.input-slider__label {
  font-size: 0.75rem;
  line-height: 20px;
  letter-spacing: -0.005em;
  color: var(--color-grey-500);
}

.input-slider__value-above {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.input-slider__textfield-right {
  align-self: center;
}

.input-slider__textfield-right .input {
  max-width: 6.25rem;
  margin: 0;
}

.input-slider__textfield-right .input__label {
  display: none;
}

.input-slider__textfield-right .input__textfield {
  padding: 1rem;
}

.input-slider__textfield-right .input__textfield:focus ~ .input__unit, .input-slider__textfield-right .input__textfield:valid ~ .input__unit {
  top: 1rem;
}

.input-slider__textfield-right.input-size-200 .input {
  max-width: 8.125rem;
}

.input-slider .input__above {
  margin-bottom: 0.5rem;
}

.input-slider__dash {
  align-self: center;
  width: 2.25rem;
  margin-bottom: 0.5rem;
  color: var(--color-grey-500);
  text-align: center;
}

.show-number {
  display: flex;
  flex-direction: column;
}

.show-number .is-short {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.show-number .is-short p {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  margin-right: 0.5rem;
  color: var(--color-grey-700);
}

.show-number .is-short.is-hidden {
  display: none;
}

.show-number .is-expanded div:not(:first-child) {
  margin-top: 0.5rem;
}

.file-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 36.5rem;
  min-height: 4.75rem;
  padding: 24px;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
  background-color: var(--color-grey-100);
  border: 0.125rem dashed var(--color-grey-400);
  border-radius: 0.25rem;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.file-upload input {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
  font-size: 0.1px;
  cursor: pointer;
  opacity: 0;
}

.file-upload__text {
  display: flex;
}

.file-upload:hover {
  border-color: var(--color-secondary-300);
}

.file-upload:hover:disabled,
.file-upload:hover [disabled] {
  border-color: var(--color-grey-400);
}

@media not all and (pointer: coarse) {
  .file-upload:focus-within {
    background-color: var(--color-secondary-100);
    border-color: var(--color-secondary-300);
  }
}
.file-upload.is-loading {
  border-color: var(--color-grey-400);
}

.file-upload.is-loading .file-upload__text {
  display: none;
}

.file-upload.is-loading .file-upload__loading {
  display: flex;
}

.file-upload.is-loading .file-upload__loading-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.25rem;
  background-color: var(--color-grey-700);
  border-radius: 100%;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.file-upload.is-loading .file-upload__loading-dot:nth-child(1) {
  -webkit-animation-name: btn-loading-animation__1;
  animation-name: btn-loading-animation__1;
}

.file-upload.is-loading .file-upload__loading-dot:nth-child(2) {
  -webkit-animation-name: btn-loading-animation__2;
  animation-name: btn-loading-animation__2;
}

.file-upload.is-loading .file-upload__loading-dot:nth-child(3) {
  -webkit-animation-name: btn-loading-animation__3;
  animation-name: btn-loading-animation__3;
}

.file-upload.is-loading .file-upload__loading-dot:nth-child(4) {
  -webkit-animation-name: btn-loading-animation__4;
  animation-name: btn-loading-animation__4;
}

@media not all and (pointer: coarse) {
  .file-upload.is-loading:focus-within {
    background-color: var(--color-grey-100);
    border: 0.125rem dashed var(--color-grey-400);
  }
}
.file-upload.is-disabled,
.file-upload [disabled] {
  border-color: var(--color-grey-400);
  cursor: not-allowed;
  opacity: 0.25;
}

.file-upload.on-drag {
  background-color: var(--color-secondary-100);
  border-color: var(--color-secondary-300);
  transition: background-color 150ms ease, border-color 150ms ease;
}

.file-upload .sd-icon {
  margin-right: 0.5rem;
  font-size: 24px;
}

@keyframes btn-loading-animation__1 {
  0%, 70%, 100% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__2 {
  0%, 15%, 85%, 100% {
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
}
@keyframes btn-loading-animation__3 {
  0%, 30%, 100% {
    opacity: 0.2;
  }
  60% {
    opacity: 1;
  }
}
/**
WORKAROUND FOR DUPLICATED MODULE
 */
/**
SIZES
 */
/**
BREAKPOINTS
 */
/**
MEDIAQUERY breakpoints for min-width
 */
/**
MEDIAQUERY breakpoints for max-width
 */
/**
GRID
 */
/* stylelint-disable-next-line */
/**
TRANSITION
 */
/**
FONT WEIGHT - BOLD
Is used in the mixin 'is-bold'
 */
/**
FONTS MAP
Attention the mobile information must be declared as a string.
 */
/**
SHADOWS
 */
/**
OPACITY
 */
/**
BORDER RADIUS
 */
/**
DISABLED MAP
 */
/**
COLOR MAP
 */
/**
PIXEL TO REM CONVERTER
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/functions
 */
/**
GET TYPO PROPERTY FROM FONTS MAP
 */
/**
GET COLOR FROM MAP
 */
/**
GET SHADOW FROM MAP
 */
/**
FLEXBOX
 */
/**
MEDIA QUERY
 */
/**
COLOR SCHEMES
 */
/**
TYPOGRAPHY
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/mixins?id=typography-mixin
 */
/**
FONT WEIGHT - BOLD
 */
/**
TRANSITION
 */
/**
CENTER
 */
/**
CLEARFIX
 */
/**
PADDING & MARGIN
 */
/**
DISABLED
 */
/**
DISABLED SHAKE
 */
/**
HOVER FOR NON TOUCH DEViCES
 */
/**
OUTLINE FOR FOCUSSED ELEMENTS
 */
/**
@import fonts
 */
.rating-meter__label {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  color: var(--color-grey-500);
}

.rating-meter__content {
  display: flex;
  align-items: center;
}

.rating-meter__pill {
  width: 1rem;
  height: 0.5rem;
  overflow: hidden;
  background: var(--color-grey-200);
  border-radius: 0.25rem;
}

.rating-meter__pill:not(:nth-child(5)) {
  margin-right: 0.25rem;
}

.rating-meter__pill--half::after {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  content: "";
}

.rating-meter__value {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  margin-left: 0.5rem;
}

.rating-meter--lowest .rating-meter__pill--half:after,
.rating-meter--lowest .rating-meter__pill--full {
  background: var(--color-red-300);
}

.rating-meter--low .rating-meter__pill--half:after,
.rating-meter--low .rating-meter__pill--full {
  background: var(--color-red-200);
}

.rating-meter--moderate .rating-meter__pill--half:after,
.rating-meter--moderate .rating-meter__pill--full {
  background: var(--color-yellow-300);
}

.rating-meter--high .rating-meter__pill--half:after,
.rating-meter--high .rating-meter__pill--full {
  background: var(--color-green-200);
}

.rating-meter--highest .rating-meter__pill--half:after,
.rating-meter--highest .rating-meter__pill--full {
  background: var(--color-green-300);
}

/* stylelint-disable-next-line */
.flex {
  display: flex;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

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

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink {
  flex-shrink: 1;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

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

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

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

.self-stretch {
  align-self: stretch;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.order-first {
  order: -9999;
}

.order-last {
  order: 9999;
}

.order-none {
  order: 0;
}

@media screen and (max-width: 1023px) {
  .flex\:400 {
    display: flex;
  }
}
@media screen and (max-width: 767px) {
  .flex\:300 {
    display: flex;
  }
}
@media screen and (max-width: 425px) {
  .flex\:200 {
    display: flex;
  }
}
@media screen and (max-width: 359px) {
  .flex\:100 {
    display: flex;
  }
}
@media screen and (max-width: 1023px) {
  .flex-1\:400 {
    flex: 1 1 0%;
  }
}
@media screen and (max-width: 767px) {
  .flex-1\:300 {
    flex: 1 1 0%;
  }
}
@media screen and (max-width: 425px) {
  .flex-1\:200 {
    flex: 1 1 0%;
  }
}
@media screen and (max-width: 359px) {
  .flex-1\:100 {
    flex: 1 1 0%;
  }
}
@media screen and (max-width: 1023px) {
  .flex-auto\:400 {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 767px) {
  .flex-auto\:300 {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 425px) {
  .flex-auto\:200 {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 359px) {
  .flex-auto\:100 {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 1023px) {
  .flex-initial\:400 {
    flex: 0 1 auto;
  }
}
@media screen and (max-width: 767px) {
  .flex-initial\:300 {
    flex: 0 1 auto;
  }
}
@media screen and (max-width: 425px) {
  .flex-initial\:200 {
    flex: 0 1 auto;
  }
}
@media screen and (max-width: 359px) {
  .flex-initial\:100 {
    flex: 0 1 auto;
  }
}
@media screen and (max-width: 1023px) {
  .flex-none\:400 {
    flex: none;
  }
}
@media screen and (max-width: 767px) {
  .flex-none\:300 {
    flex: none;
  }
}
@media screen and (max-width: 425px) {
  .flex-none\:200 {
    flex: none;
  }
}
@media screen and (max-width: 359px) {
  .flex-none\:100 {
    flex: none;
  }
}
@media screen and (max-width: 1023px) {
  .inline-flex\:400 {
    display: inline-flex;
  }
}
@media screen and (max-width: 767px) {
  .inline-flex\:300 {
    display: inline-flex;
  }
}
@media screen and (max-width: 425px) {
  .inline-flex\:200 {
    display: inline-flex;
  }
}
@media screen and (max-width: 359px) {
  .inline-flex\:100 {
    display: inline-flex;
  }
}
@media screen and (max-width: 1023px) {
  .flex-grow-0\:400 {
    flex-grow: 0;
  }
}
@media screen and (max-width: 767px) {
  .flex-grow-0\:300 {
    flex-grow: 0;
  }
}
@media screen and (max-width: 425px) {
  .flex-grow-0\:200 {
    flex-grow: 0;
  }
}
@media screen and (max-width: 359px) {
  .flex-grow-0\:100 {
    flex-grow: 0;
  }
}
@media screen and (max-width: 1023px) {
  .flex-grow\:400 {
    flex-grow: 1;
  }
}
@media screen and (max-width: 767px) {
  .flex-grow\:300 {
    flex-grow: 1;
  }
}
@media screen and (max-width: 425px) {
  .flex-grow\:200 {
    flex-grow: 1;
  }
}
@media screen and (max-width: 359px) {
  .flex-grow\:100 {
    flex-grow: 1;
  }
}
@media screen and (max-width: 1023px) {
  .flex-shrink-0\:400 {
    flex-shrink: 0;
  }
}
@media screen and (max-width: 767px) {
  .flex-shrink-0\:300 {
    flex-shrink: 0;
  }
}
@media screen and (max-width: 425px) {
  .flex-shrink-0\:200 {
    flex-shrink: 0;
  }
}
@media screen and (max-width: 359px) {
  .flex-shrink-0\:100 {
    flex-shrink: 0;
  }
}
@media screen and (max-width: 1023px) {
  .flex-shrink\:400 {
    flex-shrink: 1;
  }
}
@media screen and (max-width: 767px) {
  .flex-shrink\:300 {
    flex-shrink: 1;
  }
}
@media screen and (max-width: 425px) {
  .flex-shrink\:200 {
    flex-shrink: 1;
  }
}
@media screen and (max-width: 359px) {
  .flex-shrink\:100 {
    flex-shrink: 1;
  }
}
@media screen and (max-width: 1023px) {
  .flex-nowrap\:400 {
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .flex-nowrap\:300 {
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 425px) {
  .flex-nowrap\:200 {
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 359px) {
  .flex-nowrap\:100 {
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 1023px) {
  .flex-wrap\:400 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  .flex-wrap\:300 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 425px) {
  .flex-wrap\:200 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 359px) {
  .flex-wrap\:100 {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 1023px) {
  .flex-wrap-reverse\:400 {
    flex-wrap: wrap-reverse;
  }
}
@media screen and (max-width: 767px) {
  .flex-wrap-reverse\:300 {
    flex-wrap: wrap-reverse;
  }
}
@media screen and (max-width: 425px) {
  .flex-wrap-reverse\:200 {
    flex-wrap: wrap-reverse;
  }
}
@media screen and (max-width: 359px) {
  .flex-wrap-reverse\:100 {
    flex-wrap: wrap-reverse;
  }
}
@media screen and (max-width: 1023px) {
  .flex-row\:400 {
    flex-direction: row;
  }
}
@media screen and (max-width: 767px) {
  .flex-row\:300 {
    flex-direction: row;
  }
}
@media screen and (max-width: 425px) {
  .flex-row\:200 {
    flex-direction: row;
  }
}
@media screen and (max-width: 359px) {
  .flex-row\:100 {
    flex-direction: row;
  }
}
@media screen and (max-width: 1023px) {
  .flex-row-reverse\:400 {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px) {
  .flex-row-reverse\:300 {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 425px) {
  .flex-row-reverse\:200 {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 359px) {
  .flex-row-reverse\:100 {
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 1023px) {
  .flex-col\:400 {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  .flex-col\:300 {
    flex-direction: column;
  }
}
@media screen and (max-width: 425px) {
  .flex-col\:200 {
    flex-direction: column;
  }
}
@media screen and (max-width: 359px) {
  .flex-col\:100 {
    flex-direction: column;
  }
}
@media screen and (max-width: 1023px) {
  .flex-col-reverse\:400 {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 767px) {
  .flex-col-reverse\:300 {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 425px) {
  .flex-col-reverse\:200 {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 359px) {
  .flex-col-reverse\:100 {
    flex-direction: column-reverse;
  }
}
@media screen and (max-width: 1023px) {
  .items-start\:400 {
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .items-start\:300 {
    align-items: flex-start;
  }
}
@media screen and (max-width: 425px) {
  .items-start\:200 {
    align-items: flex-start;
  }
}
@media screen and (max-width: 359px) {
  .items-start\:100 {
    align-items: flex-start;
  }
}
@media screen and (max-width: 1023px) {
  .items-end\:400 {
    align-items: flex-end;
  }
}
@media screen and (max-width: 767px) {
  .items-end\:300 {
    align-items: flex-end;
  }
}
@media screen and (max-width: 425px) {
  .items-end\:200 {
    align-items: flex-end;
  }
}
@media screen and (max-width: 359px) {
  .items-end\:100 {
    align-items: flex-end;
  }
}
@media screen and (max-width: 1023px) {
  .items-center\:400 {
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .items-center\:300 {
    align-items: center;
  }
}
@media screen and (max-width: 425px) {
  .items-center\:200 {
    align-items: center;
  }
}
@media screen and (max-width: 359px) {
  .items-center\:100 {
    align-items: center;
  }
}
@media screen and (max-width: 1023px) {
  .items-baseline\:400 {
    align-items: baseline;
  }
}
@media screen and (max-width: 767px) {
  .items-baseline\:300 {
    align-items: baseline;
  }
}
@media screen and (max-width: 425px) {
  .items-baseline\:200 {
    align-items: baseline;
  }
}
@media screen and (max-width: 359px) {
  .items-baseline\:100 {
    align-items: baseline;
  }
}
@media screen and (max-width: 1023px) {
  .items-stretch\:400 {
    align-items: stretch;
  }
}
@media screen and (max-width: 767px) {
  .items-stretch\:300 {
    align-items: stretch;
  }
}
@media screen and (max-width: 425px) {
  .items-stretch\:200 {
    align-items: stretch;
  }
}
@media screen and (max-width: 359px) {
  .items-stretch\:100 {
    align-items: stretch;
  }
}
@media screen and (max-width: 1023px) {
  .justify-start\:400 {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .justify-start\:300 {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 425px) {
  .justify-start\:200 {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 359px) {
  .justify-start\:100 {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1023px) {
  .justify-end\:400 {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 767px) {
  .justify-end\:300 {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 425px) {
  .justify-end\:200 {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 359px) {
  .justify-end\:100 {
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1023px) {
  .justify-center\:400 {
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .justify-center\:300 {
    justify-content: center;
  }
}
@media screen and (max-width: 425px) {
  .justify-center\:200 {
    justify-content: center;
  }
}
@media screen and (max-width: 359px) {
  .justify-center\:100 {
    justify-content: center;
  }
}
@media screen and (max-width: 1023px) {
  .justify-between\:400 {
    justify-content: space-between;
  }
}
@media screen and (max-width: 767px) {
  .justify-between\:300 {
    justify-content: space-between;
  }
}
@media screen and (max-width: 425px) {
  .justify-between\:200 {
    justify-content: space-between;
  }
}
@media screen and (max-width: 359px) {
  .justify-between\:100 {
    justify-content: space-between;
  }
}
@media screen and (max-width: 1023px) {
  .justify-around\:400 {
    justify-content: space-around;
  }
}
@media screen and (max-width: 767px) {
  .justify-around\:300 {
    justify-content: space-around;
  }
}
@media screen and (max-width: 425px) {
  .justify-around\:200 {
    justify-content: space-around;
  }
}
@media screen and (max-width: 359px) {
  .justify-around\:100 {
    justify-content: space-around;
  }
}
@media screen and (max-width: 1023px) {
  .justify-evenly\:400 {
    justify-content: space-evenly;
  }
}
@media screen and (max-width: 767px) {
  .justify-evenly\:300 {
    justify-content: space-evenly;
  }
}
@media screen and (max-width: 425px) {
  .justify-evenly\:200 {
    justify-content: space-evenly;
  }
}
@media screen and (max-width: 359px) {
  .justify-evenly\:100 {
    justify-content: space-evenly;
  }
}
@media screen and (max-width: 1023px) {
  .self-auto\:400 {
    align-self: auto;
  }
}
@media screen and (max-width: 767px) {
  .self-auto\:300 {
    align-self: auto;
  }
}
@media screen and (max-width: 425px) {
  .self-auto\:200 {
    align-self: auto;
  }
}
@media screen and (max-width: 359px) {
  .self-auto\:100 {
    align-self: auto;
  }
}
@media screen and (max-width: 1023px) {
  .self-start\:400 {
    align-self: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .self-start\:300 {
    align-self: flex-start;
  }
}
@media screen and (max-width: 425px) {
  .self-start\:200 {
    align-self: flex-start;
  }
}
@media screen and (max-width: 359px) {
  .self-start\:100 {
    align-self: flex-start;
  }
}
@media screen and (max-width: 1023px) {
  .self-end\:400 {
    align-self: flex-end;
  }
}
@media screen and (max-width: 767px) {
  .self-end\:300 {
    align-self: flex-end;
  }
}
@media screen and (max-width: 425px) {
  .self-end\:200 {
    align-self: flex-end;
  }
}
@media screen and (max-width: 359px) {
  .self-end\:100 {
    align-self: flex-end;
  }
}
@media screen and (max-width: 1023px) {
  .self-center\:400 {
    align-self: center;
  }
}
@media screen and (max-width: 767px) {
  .self-center\:300 {
    align-self: center;
  }
}
@media screen and (max-width: 425px) {
  .self-center\:200 {
    align-self: center;
  }
}
@media screen and (max-width: 359px) {
  .self-center\:100 {
    align-self: center;
  }
}
@media screen and (max-width: 1023px) {
  .self-stretch\:400 {
    align-self: stretch;
  }
}
@media screen and (max-width: 767px) {
  .self-stretch\:300 {
    align-self: stretch;
  }
}
@media screen and (max-width: 425px) {
  .self-stretch\:200 {
    align-self: stretch;
  }
}
@media screen and (max-width: 359px) {
  .self-stretch\:100 {
    align-self: stretch;
  }
}
@media screen and (max-width: 1023px) {
  .order-1\:400 {
    order: 1;
  }
}
@media screen and (max-width: 767px) {
  .order-1\:300 {
    order: 1;
  }
}
@media screen and (max-width: 425px) {
  .order-1\:200 {
    order: 1;
  }
}
@media screen and (max-width: 359px) {
  .order-1\:100 {
    order: 1;
  }
}
@media screen and (max-width: 1023px) {
  .order-2\:400 {
    order: 2;
  }
}
@media screen and (max-width: 767px) {
  .order-2\:300 {
    order: 2;
  }
}
@media screen and (max-width: 425px) {
  .order-2\:200 {
    order: 2;
  }
}
@media screen and (max-width: 359px) {
  .order-2\:100 {
    order: 2;
  }
}
@media screen and (max-width: 1023px) {
  .order-3\:400 {
    order: 3;
  }
}
@media screen and (max-width: 767px) {
  .order-3\:300 {
    order: 3;
  }
}
@media screen and (max-width: 425px) {
  .order-3\:200 {
    order: 3;
  }
}
@media screen and (max-width: 359px) {
  .order-3\:100 {
    order: 3;
  }
}
@media screen and (max-width: 1023px) {
  .order-4\:400 {
    order: 4;
  }
}
@media screen and (max-width: 767px) {
  .order-4\:300 {
    order: 4;
  }
}
@media screen and (max-width: 425px) {
  .order-4\:200 {
    order: 4;
  }
}
@media screen and (max-width: 359px) {
  .order-4\:100 {
    order: 4;
  }
}
@media screen and (max-width: 1023px) {
  .order-5\:400 {
    order: 5;
  }
}
@media screen and (max-width: 767px) {
  .order-5\:300 {
    order: 5;
  }
}
@media screen and (max-width: 425px) {
  .order-5\:200 {
    order: 5;
  }
}
@media screen and (max-width: 359px) {
  .order-5\:100 {
    order: 5;
  }
}
@media screen and (max-width: 1023px) {
  .order-6\:400 {
    order: 6;
  }
}
@media screen and (max-width: 767px) {
  .order-6\:300 {
    order: 6;
  }
}
@media screen and (max-width: 425px) {
  .order-6\:200 {
    order: 6;
  }
}
@media screen and (max-width: 359px) {
  .order-6\:100 {
    order: 6;
  }
}
@media screen and (max-width: 1023px) {
  .order-7\:400 {
    order: 7;
  }
}
@media screen and (max-width: 767px) {
  .order-7\:300 {
    order: 7;
  }
}
@media screen and (max-width: 425px) {
  .order-7\:200 {
    order: 7;
  }
}
@media screen and (max-width: 359px) {
  .order-7\:100 {
    order: 7;
  }
}
@media screen and (max-width: 1023px) {
  .order-8\:400 {
    order: 8;
  }
}
@media screen and (max-width: 767px) {
  .order-8\:300 {
    order: 8;
  }
}
@media screen and (max-width: 425px) {
  .order-8\:200 {
    order: 8;
  }
}
@media screen and (max-width: 359px) {
  .order-8\:100 {
    order: 8;
  }
}
@media screen and (max-width: 1023px) {
  .order-9\:400 {
    order: 9;
  }
}
@media screen and (max-width: 767px) {
  .order-9\:300 {
    order: 9;
  }
}
@media screen and (max-width: 425px) {
  .order-9\:200 {
    order: 9;
  }
}
@media screen and (max-width: 359px) {
  .order-9\:100 {
    order: 9;
  }
}
@media screen and (max-width: 1023px) {
  .order-10\:400 {
    order: 10;
  }
}
@media screen and (max-width: 767px) {
  .order-10\:300 {
    order: 10;
  }
}
@media screen and (max-width: 425px) {
  .order-10\:200 {
    order: 10;
  }
}
@media screen and (max-width: 359px) {
  .order-10\:100 {
    order: 10;
  }
}
@media screen and (max-width: 1023px) {
  .order-11\:400 {
    order: 11;
  }
}
@media screen and (max-width: 767px) {
  .order-11\:300 {
    order: 11;
  }
}
@media screen and (max-width: 425px) {
  .order-11\:200 {
    order: 11;
  }
}
@media screen and (max-width: 359px) {
  .order-11\:100 {
    order: 11;
  }
}
@media screen and (max-width: 1023px) {
  .order-12\:400 {
    order: 12;
  }
}
@media screen and (max-width: 767px) {
  .order-12\:300 {
    order: 12;
  }
}
@media screen and (max-width: 425px) {
  .order-12\:200 {
    order: 12;
  }
}
@media screen and (max-width: 359px) {
  .order-12\:100 {
    order: 12;
  }
}
@media screen and (max-width: 1023px) {
  .order-first\:400 {
    order: -9999;
  }
}
@media screen and (max-width: 767px) {
  .order-first\:300 {
    order: -9999;
  }
}
@media screen and (max-width: 425px) {
  .order-first\:200 {
    order: -9999;
  }
}
@media screen and (max-width: 359px) {
  .order-first\:100 {
    order: -9999;
  }
}
@media screen and (max-width: 1023px) {
  .order-last\:400 {
    order: 9999;
  }
}
@media screen and (max-width: 767px) {
  .order-last\:300 {
    order: 9999;
  }
}
@media screen and (max-width: 425px) {
  .order-last\:200 {
    order: 9999;
  }
}
@media screen and (max-width: 359px) {
  .order-last\:100 {
    order: 9999;
  }
}
@media screen and (max-width: 1023px) {
  .order-none\:400 {
    order: 0;
  }
}
@media screen and (max-width: 767px) {
  .order-none\:300 {
    order: 0;
  }
}
@media screen and (max-width: 425px) {
  .order-none\:200 {
    order: 0;
  }
}
@media screen and (max-width: 359px) {
  .order-none\:100 {
    order: 0;
  }
}
/**
ALERT BOXES
@author Anna-Maria Tonke
 */
/**
MIXIN
 */
/**
GENERAL
 */
.alertbox .alertbox__wrapper {
  position: relative;
  display: flex;
}

.alertbox .alertbox__wrapper::before {
  position: absolute;
  top: -0.875rem;
  width: 100%;
  content: "";
  border-radius: 0 0 0.25rem 0.25rem;
}

.alertbox .alertbox__icon {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  font-size: 1.75rem;
  border-radius: 50%;
}

.alertbox .alertbox__text {
  padding-top: 0.125rem;
  padding-right: 2rem;
  font-size: 0;
}

.alertbox .alertbox__text h3 {
  display: inline;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.alertbox .alertbox__text h3::after {
  padding: 0 0.25rem;
  font-weight: 400;
  content: "–";
}

.alertbox .alertbox__text p {
  display: inline;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.alertbox.headline--only .alertbox__text h3::after {
  padding-left: 0;
  content: "";
}

.alertbox .alertbox__button {
  margin-left: 2.3125rem;
}

.alertbox .alertbox__button .btn {
  margin-top: 0.75rem;
}

.alertbox .alertbox__button .btn:first-child {
  margin-right: 1rem;
}

.alertbox .alertbox__icon-close {
  position: absolute;
  top: -6px;
  right: -8px;
  flex-shrink: 0;
  height: 2.5rem;
}

@-webkit-keyframes FadeIn {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-1.5rem);
  }
  1% {
    height: inherit;
    opacity: 0;
  }
  100% {
    height: inherit;
    padding: 0.875rem 1rem 0.875rem 1rem;
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes FadeIn {
  0% {
    height: 0;
    opacity: 0;
    transform: translateX(-1.5rem);
  }
  1% {
    height: inherit;
    opacity: 0;
  }
  100% {
    height: inherit;
    padding: 0.875rem 1rem 0.875rem 1rem;
    opacity: 1;
    transform: translateX(0);
  }
}
@-webkit-keyframes FadeOut {
  0% {
    height: inherit;
    padding: 0.875rem 1rem 0.875rem 1rem;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
  99% {
    height: inherit;
    padding: 0.875rem 1rem 0.875rem 1rem;
    visibility: hidden;
    opacity: 0;
    transform: translateX(2rem);
  }
  100% {
    height: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
  }
}
@keyframes FadeOut {
  0% {
    height: inherit;
    padding: 0.875rem 1rem 0.875rem 1rem;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }
  99% {
    height: inherit;
    padding: 0.875rem 1rem 0.875rem 1rem;
    visibility: hidden;
    opacity: 0;
    transform: translateX(2rem);
  }
  100% {
    height: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
  }
}
.alertbox.alertbox--important {
  transition-timing-function: cubic-bezier(0.74, -0.49, 0.3, 1.41);
  transition-duration: 450ms;
  transition-property: height, border-top, opacity, visibility;
}

.alertbox.alertbox--important.alertbox--warning {
  height: 0;
  visibility: hidden;
  background-color: var(--color-yellow-100);
  opacity: 0;
}

.alertbox.alertbox--important.alertbox--warning .alertbox__text h3,
.alertbox.alertbox--important.alertbox--warning p {
  color: var(--color-yellow-400);
}

.alertbox.alertbox--important.alertbox--warning .alertbox__icon .sd-icon,
.alertbox.alertbox--important.alertbox--warning .alertbox__icon i {
  color: var(--color-yellow-300);
}

.alertbox.alertbox--important.alertbox--warning .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-yellow-300);
}

.alertbox.alertbox--important.alertbox--info {
  height: 0;
  visibility: hidden;
  background-color: var(--color-blue-100);
  opacity: 0;
}

.alertbox.alertbox--important.alertbox--info .alertbox__text h3,
.alertbox.alertbox--important.alertbox--info p {
  color: var(--color-blue-400);
}

.alertbox.alertbox--important.alertbox--info .alertbox__icon .sd-icon,
.alertbox.alertbox--important.alertbox--info .alertbox__icon i {
  color: var(--color-blue-300);
}

.alertbox.alertbox--important.alertbox--info .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-blue-300);
}

.alertbox.alertbox--important.alertbox--error {
  height: 0;
  visibility: hidden;
  background-color: var(--color-red-100);
  opacity: 0;
}

.alertbox.alertbox--important.alertbox--error .alertbox__text h3,
.alertbox.alertbox--important.alertbox--error p {
  color: var(--color-red-400);
}

.alertbox.alertbox--important.alertbox--error .alertbox__icon .sd-icon,
.alertbox.alertbox--important.alertbox--error .alertbox__icon i {
  color: var(--color-red-300);
}

.alertbox.alertbox--important.alertbox--error .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-red-300);
}

.alertbox.alertbox--important.alertbox--success {
  height: 0;
  visibility: hidden;
  background-color: var(--color-green-100);
  opacity: 0;
}

.alertbox.alertbox--important.alertbox--success .alertbox__text h3,
.alertbox.alertbox--important.alertbox--success p {
  color: var(--color-green-400);
}

.alertbox.alertbox--important.alertbox--success .alertbox__icon .sd-icon,
.alertbox.alertbox--important.alertbox--success .alertbox__icon i {
  color: var(--color-green-300);
}

.alertbox.alertbox--important.alertbox--success .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-green-300);
}

.alertbox.alertbox--important > .wrapper {
  padding: 0.875rem 1rem 0.875rem 1rem;
}

.alertbox.alertbox--important.alertbox--is-shown {
  height: auto;
  visibility: visible;
  opacity: 1;
}

.alertbox.alertbox--important.alertbox--is-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 300000;
}

.alertbox.alertbox--standard {
  width: 100%;
  height: 0;
  padding: 0.875rem 1rem 0.875rem 1rem;
  overflow: hidden;
  visibility: hidden;
  background-color: var(--color-white);
  border-radius: 0.75rem;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
  opacity: 0;
}

.alertbox.alertbox--standard.alertbox--warning .alertbox__icon .sd-icon,
.alertbox.alertbox--standard.alertbox--warning .alertbox__icon i {
  color: var(--color-yellow-300);
}

.alertbox.alertbox--standard.alertbox--warning .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-yellow-300);
}

.alertbox.alertbox--standard.alertbox--info .alertbox__icon .sd-icon,
.alertbox.alertbox--standard.alertbox--info .alertbox__icon i {
  color: var(--color-blue-300);
}

.alertbox.alertbox--standard.alertbox--info .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-blue-300);
}

.alertbox.alertbox--standard.alertbox--error .alertbox__icon .sd-icon,
.alertbox.alertbox--standard.alertbox--error .alertbox__icon i {
  color: var(--color-red-300);
}

.alertbox.alertbox--standard.alertbox--error .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-red-300);
}

.alertbox.alertbox--standard.alertbox--success .alertbox__icon .sd-icon,
.alertbox.alertbox--standard.alertbox--success .alertbox__icon i {
  color: var(--color-green-300);
}

.alertbox.alertbox--standard.alertbox--success .alertbox__wrapper::before {
  border-top: 0.25rem solid var(--color-green-300);
}

.alertbox.alertbox--standard.alertbox--is-shown {
  height: inherit;
  visibility: visible;
  opacity: 1;
  /* Show the alertbox */
  -webkit-animation: FadeIn 200ms ease;
  animation: FadeIn 200ms ease;
}

.alertbox.alertbox--standard.alertbox--is-hidden {
  display: none;
  height: 0;
  opacity: 0;
  /* Hide the alertbox */
  -webkit-animation: FadeOut 200ms ease;
  animation: FadeOut 200ms ease;
}

.alertbox.alertbox--standard.alertbox--no-animation {
  -webkit-animation: none;
  animation: none;
}

/* --------------------------------- POPOVER -------------------------------- */
.popover {
  position: fixed;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition-timing-function: ease;
  transition-duration: 450ms;
  transition-property: opacity, visibility, margin;
  /**
      positions
  */
  /**
  * arrows
  */
}

.popover__box {
  position: relative;
  box-sizing: border-box;
  min-width: 24rem;
  max-width: 100%;
  padding: 1rem 3.5rem 1rem 1rem;
  text-align: left;
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 0.5rem;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04), 0 5px 5px rgba(206, 132, 132, 0.05), 0 15px 30px rgba(50, 50, 93, 0.08);
}

@media screen and (max-width: 767px) {
  .popover__box {
    min-width: 100%;
  }
}
.popover--is-shown {
  visibility: visible;
  opacity: 1;
}

.popover .icon-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.popover--bottom {
  position: relative;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0;
  transition-timing-function: ease;
  transition-duration: 450ms;
  transition-property: opacity, visibility, max-height, margin-bottom, margin-top;
}

.popover--bottom.popover--is-shown {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.popover--bottom::before {
  top: 0.1875rem;
  left: 1rem;
  transform: rotate(-45deg);
}

.popover--bottom::after {
  top: -0.4375rem;
  left: 1.3125rem;
  transform: rotate(45deg);
}

.popover--bottom.popover--arrow-right::before {
  right: 1.5rem;
  left: auto;
}

.popover--bottom.popover--arrow-right::after {
  right: 1.4375rem;
  left: auto;
}

.popover--bottom.popover--arrow-center {
  text-align: center;
}

.popover--bottom.popover--arrow-center::before {
  right: auto;
  left: auto;
}

.popover--bottom.popover--arrow-center::after {
  right: auto;
  left: auto;
  transform: translateX(0.3125rem) rotate(45deg);
}

@media screen and (max-width: 1023px) {
  .popover--bottom.popover--is-shown {
    margin-bottom: 0.5rem;
  }
}
.popover--top {
  position: relative;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 0;
  transition-timing-function: ease;
  transition-duration: 450ms;
  transition-property: opacity, visibility, max-height, margin-bottom, margin-top;
}

.popover--top.popover--is-shown {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.popover--top::before {
  bottom: -0.9375rem;
  left: 2.375rem;
  transform: rotate(136deg);
}

.popover--top::after {
  bottom: -0.5625rem;
  left: 1.25rem;
  transform: rotate(226deg);
}

.popover--top.popover--arrow-right::before {
  right: 0;
  left: auto;
}

.popover--top.popover--arrow-right::after {
  right: 1.375rem;
  left: auto;
}

.popover--top.popover--arrow-center {
  text-align: center;
}

.popover--top.popover--arrow-center::before {
  right: auto;
  left: auto;
}

.popover--top.popover--arrow-center::after {
  right: auto;
  left: auto;
  transform: translateX(-1.125rem) rotate(226deg);
}

.popover--right {
  position: fixed;
  max-width: 300px;
  max-height: none;
  transform: translate(40px, 0);
  transition-timing-function: ease;
  transition-duration: 450ms;
  transition-property: opacity, visibility, transform;
}

.popover--right.popover--is-shown {
  transform: translate(16px, 0);
}

.popover--right::before {
  top: calc(50% + 8px);
  left: 0.3125rem;
  transform: rotate(-136deg);
}

.popover--right::after {
  top: calc(50% - 9px);
  left: -0.3125rem;
  transform: rotate(-45deg);
}

.popover::before {
  position: absolute;
  z-index: 5;
  box-sizing: border-box;
  width: 0;
  height: 0;
  content: "";
  border-color: var(--color-white) var(--color-white) transparent transparent;
  border-style: solid;
  border-width: 0.5rem;
  box-shadow: 3px -3px 8px rgba(0, 0, 0, 0.04), 0 0 0 rgba(206, 132, 132, 0.05), 0 0 0 rgba(50, 50, 93, 0.08);
  transform-origin: 0 0;
}

.popover::after {
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  content: "";
  border-top: 1px solid var(--color-grey-200);
  border-left: 1px solid var(--color-grey-200);
}

.input + .popover--bottom {
  top: -16px;
}

.input + .popover--bottom.popover--is-shown {
  margin-top: 0;
  margin-bottom: 0;
}

@media screen and (max-width: 1023px) {
  .input + .popover--bottom {
    top: -0.5rem;
  }
  .input + .popover--bottom.popover--is-shown {
    margin-bottom: 0.5rem;
  }
}
/**
AVATAR WITH BADGE
 */
.avatar-badge {
  position: relative;
}

.avatar-badge--counter.avatar-badge--200 {
  width: 3rem;
  height: 2.5rem;
}

.avatar-badge--counter.avatar-badge--200 .badge {
  position: absolute;
  right: 0;
  bottom: 1.75rem;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--counter.avatar-badge--300 {
  width: 4rem;
  height: 3.5rem;
}

.avatar-badge--counter.avatar-badge--300 .badge {
  position: absolute;
  right: 0;
  bottom: 2.25rem;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--counter.avatar-badge--400 {
  width: 5.5rem;
  height: 5rem;
}

.avatar-badge--counter.avatar-badge--400 .badge {
  position: absolute;
  right: 0;
  bottom: 3.5rem;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--icon.avatar-badge--300 {
  width: 3.75rem;
  height: 3.5rem;
}

.avatar-badge--icon.avatar-badge--300 .badge {
  padding: 0;
  position: absolute;
  top: 2.25rem;
  right: 0;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--icon.avatar-badge--400 {
  width: 5rem;
  height: 5rem;
}

.avatar-badge--icon.avatar-badge--400 .badge {
  padding: 0;
  position: absolute;
  top: 3.5rem;
  right: 0;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--notification.avatar-badge--100 {
  width: 2rem;
  height: 1.5rem;
}

.avatar-badge--notification.avatar-badge--100 .badge {
  position: absolute;
  right: 0;
  bottom: 1.25rem;
}

.avatar-badge--notification.avatar-badge--200 {
  width: 2.75rem;
  height: 2.5rem;
}

.avatar-badge--notification.avatar-badge--200 .badge {
  position: absolute;
  right: 0;
  bottom: 2.25rem;
}

.avatar-badge--activity.avatar-badge--100 {
  width: 1.5rem;
  height: 1.5rem;
}

.avatar-badge--activity.avatar-badge--100 .badge {
  position: absolute;
  top: 1rem;
  right: 0;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--activity.avatar-badge--200 {
  width: 2.5rem;
  height: 2.5rem;
}

.avatar-badge--activity.avatar-badge--200 .badge {
  position: absolute;
  top: 1.875rem;
  right: 2px;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge--activity.avatar-badge--300 {
  width: 3.5rem;
  height: 3.5rem;
}

.avatar-badge--activity.avatar-badge--300 .badge {
  position: absolute;
  top: 2.75rem;
  right: 4px;
  box-shadow: 0 0 0 2px var(--color-white);
}

.avatar-badge .avatar {
  display: inline-block;
}

/**
Component Map
@author: Anna-Maria Tonke
 */
.map-pin {
  position: relative;
  display: inline-block;
  color: var(--color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--color-secondary-400);
  border-radius: 1.5rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.map-pin.has-address::after {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: -1;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  content: "";
  background-color: var(--color-secondary-400);
  transition-duration: 0.3s;
  transition-property: transform;
  transform: rotate(135deg);
}

.map-pin.is-selected {
  background-color: var(--color-grey-700);
}

.map-pin.is-selected.has-address::after {
  background-color: var(--color-grey-700);
}

.map-clusterpin--50 {
  position: relative;
  display: inline-block;
  color: var(--color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--color-secondary-400);
  border-radius: 1.5rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  width: 24px;
  height: 24px;
}

.map-clusterpin--100 {
  position: relative;
  display: inline-block;
  color: var(--color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--color-secondary-400);
  border-radius: 2rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  width: 32px;
  height: 32px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.map-clusterpin--200 {
  position: relative;
  display: inline-block;
  color: var(--color-white);
  text-align: center;
  cursor: pointer;
  background-color: var(--color-secondary-400);
  border-radius: 2.5rem;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  width: 40px;
  height: 40px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/**
Modal PopUp
 */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 16777271;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--color-grey-700-rgb), 0);
  transition-timing-function: ease;
  transition-duration: 300ms;
  transition-property: background-color;
}

.modal.modal--alert-error {
  text-align: center;
}

.modal.modal--alert-error .modal__container::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 80px);
  content: "";
  border-top: 6px solid var(--color-red-300);
  border-radius: 0 0 0.25rem 0.25rem;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 767px) {
  .modal.modal--alert-error .modal__container::before {
    width: calc(100% - 32px);
  }
}
@media screen and (max-width: 767px) {
  .modal.modal--alert-error .modal__content {
    padding-top: 2.5rem;
  }
}
.modal.modal--alert-error .modal--alert__icon {
  font-size: 0;
}

.modal.modal--alert-error .modal--alert__icon .sd-icon,
.modal.modal--alert-error .modal--alert__icon i {
  font-size: 3.5rem;
  color: var(--color-red-300);
}

.modal.modal--alert-error .modal--alert__text {
  padding-top: 1rem;
  font-size: 0;
}

.modal.modal--alert-error .modal--alert__text h3 {
  display: inline;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.modal.modal--alert-error .modal--alert__text h3::after {
  padding: 0 0.25rem;
  font-weight: 400;
  content: "–";
}

.modal.modal--alert-error .modal--alert__text p {
  display: inline;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.modal.modal--alert-warning {
  text-align: center;
}

.modal.modal--alert-warning .modal__container::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 80px);
  content: "";
  border-top: 6px solid var(--color-yellow-300);
  border-radius: 0 0 0.25rem 0.25rem;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 767px) {
  .modal.modal--alert-warning .modal__container::before {
    width: calc(100% - 32px);
  }
}
@media screen and (max-width: 767px) {
  .modal.modal--alert-warning .modal__content {
    padding-top: 2.5rem;
  }
}
.modal.modal--alert-warning .modal--alert__icon {
  font-size: 0;
}

.modal.modal--alert-warning .modal--alert__icon .sd-icon,
.modal.modal--alert-warning .modal--alert__icon i {
  font-size: 3.5rem;
  color: var(--color-yellow-300);
}

.modal.modal--alert-warning .modal--alert__text {
  padding-top: 1rem;
  font-size: 0;
}

.modal.modal--alert-warning .modal--alert__text h3 {
  display: inline;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.modal.modal--alert-warning .modal--alert__text h3::after {
  padding: 0 0.25rem;
  font-weight: 400;
  content: "–";
}

.modal.modal--alert-warning .modal--alert__text p {
  display: inline;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.modal.modal--alert-info {
  text-align: center;
}

.modal.modal--alert-info .modal__container::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 80px);
  content: "";
  border-top: 6px solid var(--color-blue-300);
  border-radius: 0 0 0.25rem 0.25rem;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 767px) {
  .modal.modal--alert-info .modal__container::before {
    width: calc(100% - 32px);
  }
}
@media screen and (max-width: 767px) {
  .modal.modal--alert-info .modal__content {
    padding-top: 2.5rem;
  }
}
.modal.modal--alert-info .modal--alert__icon {
  font-size: 0;
}

.modal.modal--alert-info .modal--alert__icon .sd-icon,
.modal.modal--alert-info .modal--alert__icon i {
  font-size: 3.5rem;
  color: var(--color-blue-300);
}

.modal.modal--alert-info .modal--alert__text {
  padding-top: 1rem;
  font-size: 0;
}

.modal.modal--alert-info .modal--alert__text h3 {
  display: inline;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.modal.modal--alert-info .modal--alert__text h3::after {
  padding: 0 0.25rem;
  font-weight: 400;
  content: "–";
}

.modal.modal--alert-info .modal--alert__text p {
  display: inline;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.modal.modal--alert-success {
  text-align: center;
}

.modal.modal--alert-success .modal__container::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 80px);
  content: "";
  border-top: 6px solid var(--color-green-300);
  border-radius: 0 0 0.25rem 0.25rem;
  transform: translate(-50%, 0);
}

@media screen and (max-width: 767px) {
  .modal.modal--alert-success .modal__container::before {
    width: calc(100% - 32px);
  }
}
@media screen and (max-width: 767px) {
  .modal.modal--alert-success .modal__content {
    padding-top: 2.5rem;
  }
}
.modal.modal--alert-success .modal--alert__icon {
  font-size: 0;
}

.modal.modal--alert-success .modal--alert__icon .sd-icon,
.modal.modal--alert-success .modal--alert__icon i {
  font-size: 3.5rem;
  color: var(--color-green-300);
}

.modal.modal--alert-success .modal--alert__text {
  padding-top: 1rem;
  font-size: 0;
}

.modal.modal--alert-success .modal--alert__text h3 {
  display: inline;
  margin-top: 0.25rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.modal.modal--alert-success .modal--alert__text h3::after {
  padding: 0 0.25rem;
  font-weight: 400;
  content: "–";
}

.modal.modal--alert-success .modal--alert__text p {
  display: inline;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.modal__dialog {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100%;
  padding: 5rem 0;
  opacity: 0;
  transform: translate3d(0, 25%, 0);
  transform: translateY(25%);
  transition-timing-function: ease;
  transition-duration: 300ms;
  transition-property: opacity, transform;
}

.modal__container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: 100%;
  margin: 0 1.5rem;
  overflow: hidden;
  background: var(--color-white);
  border-radius: 1.5rem;
}

.modal__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 5rem;
  min-height: 5rem;
  padding: 0.5rem 2.5rem 0 2.5rem;
}

.modal__title-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .modal__title-text {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.modal__title--shadow {
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

.modal__close {
  flex: 0 0 auto;
  margin-right: -0.75rem;
  margin-left: auto;
  color: var(--color-grey-500);
}

.modal__content {
  height: auto;
  max-height: calc(100% - 80px);
  padding: 2.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal__title + .modal__content {
  padding-top: 0.5rem;
}

.modal__buttons {
  display: flex;
  justify-content: center;
  padding: 1rem 2.5rem;
  margin: 0 4px;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-grey-200);
}

.modal__buttons button {
  flex-basis: 50%;
  flex-shrink: 0;
  flex-grow: 1;
  margin: 0 4px;
}

.modal__buttons--60-40 button:first-child {
  flex-basis: 60%;
}

.modal__buttons--60-40 button:last-child {
  flex-basis: 40%;
}

.modal__buttons--40-60 button:first-child {
  flex-basis: 40%;
}

.modal__buttons--40-60 button:last-child {
  flex-basis: 60%;
}

.modal__buttons--single {
  margin: 0;
}

.modal__buttons--single button {
  flex-basis: 100%;
  margin: 0;
}

.modal--200 .modal__container {
  max-width: 640px;
}

.modal--300 .modal__container {
  max-width: 1024px;
}

.modal--full-page .modal__container {
  height: 100%;
  min-height: 100%;
}

.modal--full-page .modal__content {
  height: calc(100% - 80px);
}

.modal--full-page.modal--without-title .modal__content {
  height: 100%;
  max-height: 100%;
}

.modal--is-shown {
  display: block;
  background-color: rgba(var(--color-grey-700-rgb), 0.75);
}

.modal--is-shown .modal__dialog {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform: translateY(0);
}

.modal--without-bg {
  transition: none;
}

.modal--grey .modal__container {
  background: var(--color-grey-100);
}

@media screen and (max-width: 767px) {
  .modal__dialog {
    align-items: flex-end;
    padding-top: 2rem;
    padding-bottom: 0;
    transform: translate3d(0, 100%, 0);
    transform: translateY(100%);
  }
  .modal__container {
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  .modal__title {
    height: 4rem;
    min-height: 4rem;
    padding: 0 1rem;
  }
  .modal__close {
    margin-right: 0;
  }
  .modal__content {
    width: 100%;
    max-height: calc(100% - 64px);
    padding: 2rem 1rem 2.5rem 1rem;
  }
  .modal__title + .modal__content {
    padding-top: 0.5rem;
  }
  .modal__buttons {
    padding: 0.5rem 0.5rem;
  }
  .modal--full-page .modal__dialog {
    height: 100%;
    min-height: 100%;
  }
  .modal--full-page .modal__content {
    height: calc(100% - 64px);
  }
  .modal--full-page-200 .modal__container, .modal--full-page-300 .modal__container {
    max-width: 100%;
  }
  .modal--full-page.modal--without-title .modal__content {
    height: 100%;
    max-height: 100%;
  }
  .modal--is-shown .modal__dialog {
    transform: translate3d(0, 0, 0);
    transform: translateY(0);
  }
}
/* ------------------------------ SOCIAL SHARE ------------------------------ */
@media screen and (max-width: 425px) {
  .social-share__wrapper {
    display: inherit;
    margin: 0 -1rem 0 -1rem;
  }
}
.social-share__container {
  max-width: 448px;
  padding: 0 0.5rem;
  margin: 0 auto;
}

.social-share__items {
  /* stylelint-disable plugin/no-unsupported-browser-features */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 0.25rem;
  margin-bottom: 1.5rem;
}

@media screen and (max-width: 767px) {
  .social-share__items {
    margin: 0 auto 1rem auto;
    gap: 0 0.25rem;
  }
}
.social-share__items a.social-share__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

@media screen and (max-width: 767px) {
  .social-share__items a.social-share__item {
    padding: 0 0.125rem;
  }
}
.social-share__items a.social-share__item:focus {
  outline: none;
}

.social-share__items a.social-share__item span {
  display: inline-block;
  color: var(--color-grey-700);
}

.social-share__items a.social-share__item button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-share__items a.social-share__item button span {
  font-size: 1.75rem;
  letter-spacing: typo-property(400, letter-spacing);
}

.social-share__items a.social-share__item .sd-icon, .social-share__items a.social-share__item .social-share__list-card li .social-share__icon--right, .social-share__list-card li .social-share__items a.social-share__item .social-share__icon--right, .social-share__items a.social-share__item i {
  color: var(--color-white);
}

.social-share__items a.social-share__item .social-share--facebook {
  margin-bottom: 0.5rem;
  background-color: var(--color-facebook);
}

.social-share__items a.social-share__item .social-share--fbmessenger {
  margin-bottom: 0.5rem;
  background-color: var(--color-fbmessenger);
}

.social-share__items a.social-share__item .social-share--twitter {
  margin-bottom: 0.5rem;
  background-color: var(--color-twitter);
}

.social-share__items a.social-share__item .social-share--whatsapp {
  margin-bottom: 0.5rem;
  background-color: var(--color-whatsapp);
}

.social-share__items a.social-share__item .social-share--linkedin {
  margin-bottom: 0.5rem;
  background-color: var(--color-linkedin);
}

.social-share__items a.social-share__item .social-share--more {
  margin-bottom: 0.5rem;
  background-color: var(--color-grey-400);
}

.social-share__list-card a:not(:last-child) li::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 2.5rem);
  height: 1px;
  content: "";
  background-color: var(--color-grey-200);
}

.social-share__list-card li {
  position: relative;
  display: flex;
  align-items: center;
  height: 3.5rem;
}

.social-share__list-card li:not(:last-child)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 2.5rem);
  height: 1px;
  content: "";
  background-color: var(--color-grey-200);
}

.social-share__list-card li:hover {
  cursor: pointer;
  background-color: var(--color-grey-200);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: all;
}

.social-share__list-card li:focus {
  background-color: var(--color-grey-200);
  outline: 0;
}

.social-share__list-card li .sd-icon, .social-share__list-card li .social-share__icon--right {
  display: flex;
  margin-right: 1rem;
  font-size: 1.5rem;
}

.social-share__list-card li .social-share__title {
  color: var(--color-grey-700);
}

.social-share__list-card li .social-share__icon--right {
  margin-right: 0;
  margin-left: auto;
}

.social-share__list-card li .social-share__icon--right span {
  margin-right: 0;
}

.expansion-panel {
  position: relative;
  background: var(--color-white);
}

@media screen and (max-width: 767px) {
  .expansion-panel {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
.expansion-panel.has-divider::after {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 0.0625rem;
  content: " ";
  background-color: var(--color-grey-200);
}

@media screen and (max-width: 767px) {
  .expansion-panel.has-divider::after {
    width: calc(100% - 2rem);
  }
}
.expansion-panel__head {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  cursor: pointer;
}

.expansion-panel__head .expansion-panel__icon {
  display: flex;
  margin-right: 1rem;
  font-size: 1.5rem;
}

.expansion-panel__head .expansion-panel__title {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--color-grey-700);
}

.expansion-panel__head .expansion-panel__subtitle {
  font-weight: 400;
  color: var(--color-grey-500);
}

.expansion-panel__head .expansion-panel__toggle {
  margin-left: auto;
}

.expansion-panel__head .expansion-panel__toggle .sd-icon, .expansion-panel__head .expansion-panel__toggle i {
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: rotateX(0deg);
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

.expansion-panel__dropdown {
  height: 0;
  min-height: 0;
  overflow: hidden;
  transition-timing-function: ease;
  transition-duration: 300ms;
  transition-property: height;
}

.expansion-panel__dropdown .expansion-panel__content {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  padding-bottom: 1.5rem;
}

.expansion-panel--is-shown .expansion-panel__toggle .sd-icon,
.expansion-panel--is-shown .expansion-panel__toggle i {
  transform: rotateX(180deg);
}

@media screen and (min-width: 1024px) {
  .expansion-panel.is-open\:500 .expansion-panel__dropdown {
    height: auto;
  }
  .expansion-panel.is-open\:500 .expansion-panel__head {
    cursor: default;
  }
  .expansion-panel.is-open\:500 .expansion-panel__toggle {
    display: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .expansion-panel.is-open\:400 .expansion-panel__dropdown {
    height: auto;
  }
  .expansion-panel.is-open\:400 .expansion-panel__head {
    cursor: default;
  }
  .expansion-panel.is-open\:400 .expansion-panel__toggle {
    display: none;
  }
}
@media screen and (min-width: 426px) and (max-width: 767px) {
  .expansion-panel.is-open\:300 .expansion-panel__dropdown {
    height: auto;
  }
  .expansion-panel.is-open\:300 .expansion-panel__head {
    cursor: default;
  }
  .expansion-panel.is-open\:300 .expansion-panel__toggle {
    display: none;
  }
}
@media screen and (min-width: 360px) and (max-width: 425px) {
  .expansion-panel.is-open\:200 .expansion-panel__dropdown {
    height: auto;
  }
  .expansion-panel.is-open\:200 .expansion-panel__head {
    cursor: default;
  }
  .expansion-panel.is-open\:200 .expansion-panel__toggle {
    display: none;
  }
}
@media screen and (max-width: 359px) {
  .expansion-panel.is-open\:100 .expansion-panel__dropdown {
    height: auto;
  }
  .expansion-panel.is-open\:100 .expansion-panel__head {
    cursor: default;
  }
  .expansion-panel.is-open\:100 .expansion-panel__toggle {
    display: none;
  }
}
.expansion-panel--200 .expansion-panel__icon {
  font-size: 3.5rem;
}

@media screen and (max-width: 767px) {
  .expansion-panel--200 .expansion-panel__icon {
    font-size: 2.5rem;
  }
}
.expansion-panel--200 .expansion-panel__title p:not(.expansion-panel__subtitle) {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .expansion-panel--200 .expansion-panel__title p:not(.expansion-panel__subtitle) {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.expansion-panel--200 .expansion-panel__head {
  min-height: 5.5rem;
}

.expansion-panel--200 .expansion-panel__content {
  padding-bottom: 2rem;
}

.expansion-panel--300 .expansion-panel__icon {
  font-size: 5rem;
}

@media screen and (max-width: 767px) {
  .expansion-panel--300 .expansion-panel__icon {
    font-size: 3.5rem;
  }
}
.expansion-panel--300 .expansion-panel__title p {
  font-size: 1.4375rem;
  line-height: 28px;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .expansion-panel--300 .expansion-panel__title p {
    font-size: 1.375rem;
    line-height: 26px;
    letter-spacing: -0.01em;
  }
}
@media screen and (min-width: 768px) {
  .expansion-panel--300 .expansion-panel__toggle {
    padding: 0.25rem;
  }
  .expansion-panel--300 .expansion-panel__toggle .sd-icon, .expansion-panel--300 .expansion-panel__toggle i {
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
    line-height: 2rem;
  }
}
.expansion-panel--300 .expansion-panel__content {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  padding-bottom: 2.5rem;
}

@media screen and (max-width: 767px) {
  .expansion-panel--300 .expansion-panel__content {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.expansion-panel--300 .expansion-panel__head {
  min-height: 7rem;
}

@media screen and (max-width: 767px) {
  .expansion-panel--300 .expansion-panel__head {
    min-height: 5.5rem;
  }
}
/**
CONFIG ANIMATION
 */
.notification {
  position: fixed;
  max-width: 320px;
  visibility: hidden;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
  opacity: 0;
  transition-timing-function: cubic-bezier(0.74, -0.49, 0.3, 1.41);
  transition-duration: 450ms;
  transition-property: opacity, visibility, transform;
  /**
  DEFINES MEDIAQUERIES (MOBILE)
   */
}

.notification.notification--right-top {
  top: 24px;
  right: 24px;
  transform: translateX(50%);
}

.notification.notification--right-top.is-active {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.notification.notification--left-top {
  top: 24px;
  left: 24px;
  transform: translateX(-50%);
}

.notification.notification--left-top.is-active {
  left: 24px;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.notification.notification--left-bottom {
  bottom: 24px;
  left: 24px;
  transform: translateX(-50%);
}

.notification.notification--left-bottom.is-active {
  left: 24px;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.notification.notification--right-bottom {
  right: 24px;
  bottom: 24px;
  transform: translateX(50%);
}

.notification.notification--right-bottom.is-active {
  right: 24px;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.notification__header {
  display: flex;
  align-items: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  border-bottom: solid 1px var(--color-grey-200);
}

.notification__header .sd-icon,
.notification__header i {
  display: flex;
  margin-right: 0.5rem;
  font-size: 1.5rem;
}

.notification__header .notification__title {
  flex: 1 1 auto;
  align-self: auto;
  min-width: 0;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.notification__header .notification__close {
  margin-left: auto;
}

.notification__header .notification__close button {
  outline: none;
}

.notification__content {
  display: flex;
  align-items: center;
  padding: 1rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.notification__content .sd-icon {
  display: flex;
  margin-left: auto;
  font-size: 1.5rem;
  padding-left: 1rem;
}

@media only screen and (max-width: 425px) {
  .notification {
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    max-width: 100%;
  }
  .notification.notification--right-bottom, .notification.notification--left-bottom, .notification.notification--left-top, .notification.notification--right-top {
    top: 16px;
    bottom: auto;
    left: 16px;
    transform: translateY(-50%);
  }
  .notification.notification--right-bottom.is-active, .notification.notification--left-bottom.is-active, .notification.notification--left-top.is-active, .notification.notification--right-top.is-active {
    top: 16px;
    left: 16px;
    transform: translateY(0);
  }
  .notification__header {
    display: flex;
    align-items: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 0.5rem;
    border-bottom: solid 1px var(--color-grey-200);
  }
  .notification__header .sd-icon,
  .notification__header i {
    font-size: 1.5rem;
  }
  .notification__header .notification__title {
    font-size: 0.875rem;
    line-height: 24px;
    letter-spacing: -0.005em;
  }
  .notification__content {
    font-size: 0.875rem;
    line-height: 24px;
    letter-spacing: -0.005em;
  }
}
@media only screen and (max-width: 359px) {
  .notification {
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    max-width: 100%;
  }
  .notification.notification--right-bottom, .notification.notification--left-bottom, .notification.notification--left-top, .notification.notification--right-top {
    top: 16px;
    bottom: auto;
    left: 16px;
    transform: translateY(-50%);
  }
  .notification.notification--right-bottom.is-active, .notification.notification--left-bottom.is-active, .notification.notification--left-top.is-active, .notification.notification--right-top.is-active {
    top: 16px;
    left: 16px;
    transform: translateY(0);
  }
  .notification__header {
    display: flex;
    align-items: center;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 0.5rem;
    border-bottom: solid 1px var(--color-grey-200);
  }
  .notification__header .sd-icon,
  .notification__header i {
    font-size: 1.5rem;
  }
  .notification__header .notification__title {
    font-size: 0.875rem;
    line-height: 24px;
    letter-spacing: -0.005em;
  }
  .notification__content {
    font-size: 0.875rem;
    line-height: 24px;
    letter-spacing: -0.005em;
  }
}
/**
SLIDER PAGINATION
 */
.slider-pagination {
  position: relative;
  display: inline-flex;
  /**
  ONDARK
   */
  /**
  DEFINES MEDIAQUERIES (MOBILE)
   */
}

.slider-pagination__dots {
  display: inherit;
}

.slider-pagination__dots .slider-pagination__dot {
  position: relative;
  top: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: width;
}

.slider-pagination__dots .slider-pagination__dot:not(.is-active):first-child::after, .slider-pagination__dots .slider-pagination__dot:not(.is-active):last-child::after {
  transform: scale(0.5);
}

.slider-pagination__dots .slider-pagination__dot::after {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  content: "";
  background: var(--color-grey-400);
  border-radius: 0.25rem;
}

.slider-pagination__dots .slider-pagination__dot:not(.is-active):hover::after {
  background: var(--color-grey-300);
}

.slider-pagination__dots .slider-pagination__dot.is-active {
  width: 2.5rem;
}

.slider-pagination button:first-child {
  margin-right: 0.5rem;
}

.slider-pagination button ~ .slider-pagination__dots {
  margin-right: 8px;
}

.slider-pagination__counter {
  padding: 0.5rem 0;
  margin-right: 1rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-500);
}

.slider-pagination--ondark .slider-pagination__dots .slider-pagination__dot::after {
  background: var(--color-white);
  box-shadow: 0 0 0 2px rgba(var(--color-grey-700-rgb), 0.1);
}

.slider-pagination--ondark .slider-pagination__dots .slider-pagination__dot:not(.is-active):hover::after {
  background: var(--color-grey-200);
}

.slider-pagination--ondark .sd-icon,
.slider-pagination--ondark i {
  color: var(--color-white);
}

.slider-pagination--ondark .sd-icon:hover,
.slider-pagination--ondark i:hover {
  color: var(--color-grey-700);
}

.slider-pagination--ondark button:hover .sd-icon,
.slider-pagination--ondark button:hover i {
  color: var(--color-grey-700);
}

.slider-pagination--ondark .slider-pagination__counter {
  color: var(--color-white);
}

@media only screen and (max-width: 767px) {
  .slider-pagination button {
    display: none;
  }
}
@media only screen and (max-width: 425px) {
  .slider-pagination button {
    display: none;
  }
}
@media only screen and (max-width: 359px) {
  .slider-pagination button {
    display: none;
  }
}
/* --------------------------------- TEASER --------------------------------- */
.teaser {
  display: flex;
}

.teaser .sd-icon,
.teaser i {
  width: 5rem;
  height: 5rem;
  font-size: 5rem;
}

.teaser__left-content {
  margin-right: 1.5rem;
}

.teaser__subheadline {
  padding-bottom: 0.5rem;
  color: var(--color-grey-500);
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: 700;
}

.teaser__headline {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .teaser__headline {
    font-size: 1.125rem;
    line-height: 22px;
    letter-spacing: -0.01em;
  }
}
.teaser__text {
  color: var(--color-grey-700);
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.teaser__text:not(:last-child) {
  padding-bottom: 1.5rem;
}

.teaser--centered {
  display: block;
  text-align: center;
}

.teaser--centered .teaser__left-content {
  height: 5rem;
  margin-right: 0;
  margin-bottom: 1.5rem;
}

.teaser--50 .sd-icon,
.teaser--50 i {
  width: 40px;
  height: 40px;
  font-size: 40px;
}

.teaser--50.teaser--centered .teaser__left-content {
  height: 40px;
}

.teaser--75 .sd-icon,
.teaser--75 i {
  width: 56px;
  height: 56px;
  font-size: 56px;
}

.teaser--75.teaser--centered .teaser__left-content {
  height: 56px;
}

.teaser--100 .sd-icon,
.teaser--100 i {
  width: 80px;
  height: 80px;
  font-size: 80px;
}

.teaser--100.teaser--centered .teaser__left-content {
  height: 80px;
}

/* ----------------------------------
      Navbar/Tabs
  ---------------------------------- */
.tab {
  display: inline-flex;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  transition-property: color;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tab::-webkit-scrollbar {
  display: none;
}

.tab--fixed {
  /* stylelint-disable-next-line */
  box-sizing: initial;
  padding-right: 0.75rem;
}

@media screen and (max-width: 767px) {
  .tab--percentage {
    display: flex;
  }
}
.tab--size-100 .tab__item {
  height: 3.5rem;
  margin: 0 1rem;
}

.tab--size-200 .tab__item {
  height: 5rem;
  margin: 0 1.25rem;
}

.tab__container {
  position: relative;
  display: flex;
  flex: 1;
  flex-basis: auto;
  flex-direction: row;
  flex-shrink: 0;
}

.tab__items {
  display: flex;
  flex: 1;
  flex-basis: auto;
  flex-shrink: 0;
}

.tab__item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 3.5rem;
  margin: 0 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--color-grey-700);
  white-space: nowrap;
  cursor: pointer;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: color;
}

.tab--dark .tab__item {
  color: var(--color-grey-100);
}

@media screen and (max-width: 767px) {
  .tab--percentage .tab__item {
    flex: 1;
    flex-shrink: 0;
    justify-content: center;
    margin: 0;
  }
}
.tab--percentage .tab__item:last-child {
  margin-right: 0;
}

.tab__item:first-child {
  margin-left: 0;
}

.tab__item:focus {
  outline-offset: -3px;
}

.tab__item:hover {
  color: var(--color-grey-500);
}

.tab--dark .tab__item:hover {
  color: var(--color-grey-300);
}

.tab__item:active {
  color: var(--color-grey-400);
}

.tab__item[disabled] {
  color: var(--color-grey-700);
  opacity: 0.25;
}

.tab--dark .tab__item[disabled] {
  color: var(--color-grey-100);
}

.tab__item.is-active {
  font-weight: 700;
  color: var(--color-grey-700);
}

.tab--dark .tab__item.is-active {
  color: var(--color-white);
}

.tab__item.is-active-bar .tab__indicator-static {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-300);
  border-radius: 1px 1px 0 0;
  left: 0;
  z-index: 10;
}

.tab__icon {
  display: inline-block;
  pointer-events: none;
}

.tab--dark .tab__icon path {
  fill: var(--color-white);
}

.tab__text {
  display: inline-block;
  text-align: left;
  letter-spacing: 0;
}

.tab__text::after {
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  text-align: left;
  visibility: hidden;
  content: attr(title);
}

.tab--dark .tab__text {
  color: var(--color-white);
}

.tab__item.is-active .tab__text {
  font-weight: 700;
  text-align: left;
}

.tab__icon + .tab__text {
  margin-left: 10px;
}

.tab__indicator-animated {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary-300);
  border-radius: 1px 1px 0 0;
  z-index: 10;
  width: 0;
  transition: 300ms;
  transition-property: all;
}

.tab__border-full {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: var(--color-grey-200);
}

.tab--dark .tab__border-full {
  background: var(--color-grey-500);
}

.tab--fixed.tab--size-100 .tab__border-full {
  width: calc(100% - 1rem);
}

.tab--fixed.tab--size-200 .tab__border-full {
  width: calc(100% - 1.25rem);
}

.tab--percentage.tab--size-100 .tab__border-full, .tab--percentage.tab--size-200 .tab__border-full {
  width: 100%;
}

/**
PROGRESSBAR
 */
.progressbar {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column-reverse;
  padding: 2px 0;
  font-weight: 700;
}

.progressbar--labels-bottom {
  flex-direction: column;
}

.progressbar--labels-bottom .progressbar__text {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.progressbar__main {
  position: relative;
  height: 0.25rem;
  overflow: hidden;
  background-color: var(--color-grey-200);
  border-radius: 0.25rem;
}

.progressbar__holder {
  display: block;
  height: 100%;
  border-radius: 0.25rem;
  transition-timing-function: ease;
  transition-duration: 450ms;
  transition-property: width;
}

.progressbar__progress {
  display: block;
  height: 100%;
  background-color: var(--color-primary-300);
  border-radius: 0.25rem;
  -webkit-animation: progressbar 450ms ease;
  animation: progressbar 450ms ease;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.progressbar__text {
  margin-bottom: 0.5rem;
}

.progressbar__number {
  min-width: 30px;
  text-align: right;
}

.progressbar__desc:first-child:nth-last-child(2) {
  display: block;
  float: left;
  max-width: 72%;
}

.progressbar__desc:first-child:nth-last-child(2) ~ .progressbar__number {
  display: block;
  float: right;
}

@-webkit-keyframes progressbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes progressbar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* stylelint-disable selector-no-qualifying-type */
/**
TABBAR - MOBILE FIXED
 */
.tab-mobile {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  min-width: 100%;
  padding: 0 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--color-white);
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

@media screen and (max-width: 359px) {
  .tab-mobile {
    padding: 0;
  }
}
.tab-mobile__item {
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.25rem 0.5rem;
  overflow: hidden;
  color: var(--color-grey-400);
  white-space: nowrap;
  cursor: pointer;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: color;
  display: flex;
  flex-shrink: 0;
  flex-basis: 0;
}

.tab-mobile__item:hover, .tab-mobile__item:active {
  color: var(--color-grey-700);
}

.tab-mobile__item:focus {
  outline: none;
}

.tab-mobile__item[disabled] {
  color: var(--color-grey-700);
  opacity: 0.25;
}

.tab-mobile__item.is-active {
  font-weight: 700;
  color: var(--color-grey-700);
}

.tab-mobile__item.is-active-bar .tab-mobile__indicator-static {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--color-grey-700);
  border-radius: 0 0 2px 2px;
  left: 0;
  z-index: 10;
}

.tab-mobile__icon {
  pointer-events: none;
}

.tab-mobile__icon .sd-icon, .tab-mobile__icon i {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.5rem;
  color: inherit;
  pointer-events: none;
}

.tab-mobile__icon .sd-icon.icon-active, .tab-mobile__icon i.icon-active {
  display: none;
}

.is-active .tab-mobile__icon .sd-icon, .is-active .tab-mobile__icon i {
  display: none;
}

.is-active .tab-mobile__icon .sd-icon.icon-active, .is-active .tab-mobile__icon i.icon-active {
  display: block;
}

.tab-mobile__text {
  display: inline-block;
  margin-top: 0.25rem;
  text-align: center;
  pointer-events: none;
  font-size: 0.75rem;
  line-height: 20px;
  letter-spacing: -0.005em;
}

.tab-mobile__text::after {
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
  content: attr(title);
}

.tab-mobile__item.is-active .tab-mobile__text {
  font-weight: 700;
  text-align: center;
}

.tab-mobile__indicator-animated {
  position: absolute;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--color-grey-700);
  border-radius: 0 0 2px 2px;
  z-index: 10;
  width: 0;
  transition-duration: 300ms;
  transition-property: all;
}

/* stylelint-enable */
/**
BREADCRUMB
@author: Eduard Tschernjaew
@import 'node_modules/@immowelt/smart-design/src/scss/base/link';
*/
.breadcrumb-wrapper {
  padding: 0 1rem;
  margin: 2.5rem auto 1rem auto;
}

.breadcrumb {
  display: flex;
}

.breadcrumb--default {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.breadcrumb--default a {
  color: var(--color-secondary-400);
}

.breadcrumb--default a::before {
  padding-right: 0.25rem;
  content: "long_arrow_left";
  display: inline-flex;
  font-family: smartdesign-icons;
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

.breadcrumb--default a:hover::before {
  transform: translateX(-0.375rem);
}

.breadcrumb--seo-footer nav {
  margin: auto;
}

.breadcrumb--seo-footer ol {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}

.breadcrumb--seo-footer ol li {
  display: inline-flex;
  color: var(--color-grey-500);
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
}

.breadcrumb--seo-footer ol li a {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  color: var(--color-grey-500);
}

.breadcrumb--seo-footer ol li a:hover {
  color: var(--color-grey-400);
  transition: 150ms;
}

.breadcrumb--seo-footer ol li:nth-last-child(n+2)::after {
  display: inline-flex;
  font-family: smartdesign-icons;
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
  margin: 0 0.25rem;
  color: var(--color-grey-300);
  content: "angle_right";
}

.breadcrumb--seo-footer ol li:first-child a::before {
  font-family: smartdesign-icons;
  font-size: 1.5rem;
  content: "home";
}

.breadcrumb--seo-footer ol li:not(:first-child):last-child {
  display: list-item;
  max-width: 21.1875rem;
  overflow: hidden;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

/* ----------------------------- STEPPER ---------------------------- */
/*
** settings
*/
.stepper {
  display: flex;
  flex-direction: column;
  /*
  ** override: version with check icons
  */
}

.stepper .stepper__visual {
  display: flex;
  order: 1;
  width: 100%;
  padding: 0;
  color: var(--color-grey-700);
  list-style: none;
}

@media screen and (max-width: 767px) {
  .stepper .stepper__visual {
    order: 2;
  }
}
.stepper .stepper__visual .stepper__step {
  position: relative;
  flex: 100%;
  flex-grow: 1;
  text-align: center;
  transition: opacity 150ms ease;
}

.stepper .stepper__visual .stepper__step::before {
  content: attr(data-step);
}

.stepper .stepper__visual .stepper__step::after {
  position: absolute;
  top: 50%;
  left: calc(50% + 1.25rem + 1rem);
  display: block;
  width: calc(100% - 2.5rem - 2rem);
  height: 0.125rem;
  content: "";
  background: var(--color-grey-200);
}

@media screen and (max-width: 767px) {
  .stepper .stepper__visual .stepper__step::after {
    left: calc(50% + 1.25rem + 0.5rem);
    width: calc(100% - 2.5rem - 1rem);
  }
}
.stepper .stepper__visual .stepper__step:last-child::after {
  display: none;
}

.stepper .stepper__visual .stepper__step.is-complete::after {
  background: var(--color-grey-700);
}

.stepper .stepper__visual .stepper__step.is-active-error::before {
  position: relative;
  top: inherit;
  left: inherit;
  transform: inherit;
}

.stepper .stepper__visual .stepper__step.is-visited-success::before {
  position: relative;
  top: inherit;
  left: inherit;
  transform: inherit;
}

.stepper .stepper__visual .stepper__step.is-visited-success::after {
  background: var(--color-grey-700);
}

.stepper .stepper__visual .stepper__step.is-active-success::before {
  position: relative;
  top: inherit;
  left: inherit;
  transform: inherit;
}

.stepper .stepper__visual .stepper__step.is-active-success::after {
  background: var(--color-grey-700);
}

.stepper .stepper__visual .stepper__step.is-visited-error::before {
  position: relative;
  top: inherit;
  left: inherit;
  transform: inherit;
}

.stepper .stepper__visual .stepper__step--disabled {
  opacity: 0.25;
}

.stepper .stepper__visual .stepper__step--disabled::before {
  cursor: not-allowed;
}

.stepper .stepper__text {
  display: flex;
  align-content: stretch;
  order: 2;
  width: 100%;
  padding: 0;
  color: var(--color-grey-500);
  list-style: none;
}

@media screen and (max-width: 767px) {
  .stepper .stepper__text {
    order: 1;
  }
}
.stepper .stepper__text .stepper__step {
  flex: 100%;
  flex-grow: 1;
  opacity: 1;
  transition: opacity 150ms ease;
}

@media screen and (max-width: 767px) {
  .stepper .stepper__text .stepper__step:not(.is-active) {
    display: none;
  }
}
.stepper .stepper__text .stepper__step label {
  display: block;
  margin: 0.5rem 1rem 0 1rem;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  text-align: center;
  transition: color 150ms ease;
}

@media screen and (max-width: 767px) {
  .stepper .stepper__text .stepper__step label {
    margin: 0 0 1rem 0;
    font-size: 1.1875rem;
    text-align: left;
    letter-spacing: -0.01em;
  }
}
.stepper .stepper__text .stepper__step.is-active {
  font-weight: 700;
  color: var(--color-grey-700);
}

.stepper .stepper__text .stepper__step--disabled {
  opacity: 0.25;
}

.stepper .stepper__text .stepper__step--disabled label {
  cursor: not-allowed;
}

.stepper--checked .stepper__visual .stepper__step.is-complete::after {
  background: var(--color-grey-700);
}

.stepper--checked .stepper__visual .stepper__step.is-active::after {
  background: var(--color-grey-700);
}

.stepper--vertical {
  display: flex;
  flex-direction: row;
}

.stepper--vertical .stepper__visual {
  display: flex;
  flex-direction: column;
  width: auto;
}

.stepper--vertical .stepper__visual li {
  margin-top: 2rem;
}

.stepper--vertical .stepper__visual li::after, .stepper--vertical .stepper__visual li::before {
  display: none;
}

.stepper--vertical .stepper__visual li:first-child {
  margin-top: 0;
}

.stepper--vertical .stepper__text {
  display: flex;
  flex-direction: column;
  order: 2;
  width: auto;
}

.stepper--vertical .stepper__text .stepper__step {
  display: inline;
  flex: none;
  margin-top: 2rem;
}

@media screen and (max-width: 767px) {
  .stepper--vertical .stepper__text .stepper__step:not(.is-active) {
    display: flex;
  }
}
.stepper--vertical .stepper__text .stepper__step label {
  height: 2.5rem;
  padding-left: 1rem;
  margin: 0;
  font-size: 1rem;
  line-height: 2.5rem;
  text-align: left;
}

.stepper--vertical .stepper__text .stepper__step:first-child {
  margin-top: 0;
}

.stepper--clickable .stepper__visual .stepper__step:not(.stepper__step--disabled)::before {
  cursor: pointer;
}

.stepper--clickable .stepper__text .stepper__step:not(.stepper__step--disabled) label {
  cursor: pointer;
}

.stepper--clickable .stepper__text .stepper__step:not(.stepper__step--disabled):hover label {
  font-weight: 700;
  color: var(--color-grey-700);
}

/************* SNACKBAR ************/
.snackbar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  z-index: 200100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  max-width: 37.5rem;
  transform: translate(-50%, 0);
}

@media only screen and (max-width: 767px) {
  .snackbar {
    width: 100%;
    max-width: 100%;
  }
}
.snackbar__item {
  display: flex;
  max-width: 37.5rem;
  min-height: 3.5rem;
  margin-top: 0.5rem;
  color: var(--color-white);
  cursor: pointer;
  visibility: hidden;
  background-color: var(--color-grey-700);
  border-radius: 0.5rem;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04), 0 5px 5px rgba(206, 132, 132, 0.05), 0 15px 30px rgba(50, 50, 93, 0.08);
  opacity: 0;
  transition-timing-function: ease;
  transition-duration: 300ms;
  transition-property: opacity visibility;
  padding: 1rem;
  /**
  MEDIAQUERIES (MOBILE) SNACKBAR
  */
}

.snackbar__item .snackbar__title {
  flex: 1;
  flex-wrap: wrap;
  align-self: self-start;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.snackbar__item button {
  z-index: 10;
  max-height: inherit;
  padding: 0;
  margin-left: auto;
  color: var(--color-primary-300);
  padding-left: 1.5rem;
  padding-right: 0.5rem;
}

@media screen and (max-width: 425px) {
  .snackbar__item button {
    padding-top: 1rem;
  }
}
.snackbar__item button:hover {
  color: var(--color-primary-200);
  background-color: transparent;
}

.snackbar__item--is-shown {
  visibility: visible;
  /* Show the snackbar */
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .snackbar__item {
    width: calc(100% - 32px);
    max-width: 100%;
  }
}
.snackbar.multi {
  position: relative;
  display: block;
}

.pagination {
  position: relative;
  display: inline-flex;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media screen and (max-width: 359px) {
  .pagination {
    margin: 0 -1rem;
  }
}
.pagination__item {
  display: flex;
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.pagination__item:first-child {
  margin-right: 0.5rem;
}

.pagination__item:last-child {
  margin-left: 0.5rem;
}

.pagination__page {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  overflow: hidden;
  font-weight: 700;
  /* stylelint-disable-next-line */
  line-height: 2.5rem !important;
  text-align: center;
  border-radius: 50%;
  transition-timing-function: ease;
  transition-duration: 150ms;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.pagination__page:hover {
  background: var(--color-grey-200);
}

.pagination__page.is-current {
  background: var(--color-primary-300);
}

.pagination__ellipsis {
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
}

.pagination__icon {
  display: block;
}

.actionbar {
  display: flex;
  justify-content: center;
  width: 100%;
}

.actionbar__content {
  width: 64rem;
  height: auto;
}

@media screen and (max-width: 1023px) {
  .actionbar__content {
    width: 100%;
  }
}
.actionbar.is-top {
  position: fixed;
  /* fallback */
  /* stylelint-disable-next-line  */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey-200);
}

.actionbar.is-top.actionbar--on-dark {
  background: var(--color-grey-700);
  border-bottom: none;
}

.actionbar.is-bottom {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
}

.actionbar.is-bottom .actionbar__content {
  background: var(--color-white);
  border-top: 1px solid var(--color-grey-200);
  border-bottom: none;
}

@media screen and (min-width: 1024px) {
  .actionbar.is-bottom .actionbar__content {
    border-top: none;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.04), 0 5px 5px rgba(206, 132, 132, 0.05), 0 15px 30px rgba(50, 50, 93, 0.08);
  }
}
.actionbar.is-bottom.actionbar--on-dark .actionbar__content {
  background: var(--color-grey-700);
  border-top: none;
}

.actionbar.actionbar--on-dark .actionbar__content {
  color: var(--color-white);
}

.actionbar.actionbar--on-dark .actionbar__content .sd-icon,
.actionbar.actionbar--on-dark .actionbar__content i {
  color: var(--color-white);
}

.upload-progress .draggable--over {
  padding-left: 1rem;
  background-color: var(--color-secondary-100);
  border: 2px dashed var(--color-secondary-300);
  border-radius: 0.5rem;
}

.upload-progress .draggable--over__thumbnail {
  height: 4.75rem;
}

.upload-progress .draggable--over::after {
  background-color: transparent;
}

.upload-progress .draggable--mirror {
  z-index: 50000;
  background-color: var(--color-grey-100);
  border: 2px dashed var(--color-grey-400);
  border-radius: 0.5rem;
  opacity: 0.75;
}

.upload-progress .draggable--mirror::after {
  background-color: transparent;
}

.upload-progress__dragger {
  width: 1.5rem;
  height: 1.5rem;
  margin: 1rem 0.5rem 1rem 0;
  font-size: 1.5rem;
  cursor: move;
}

.upload-progress__thumbnail {
  position: relative;
  width: 5rem;
  min-width: 5rem;
  height: 5rem;
  margin: 1rem 1rem 1rem 0;
}

.upload-progress__thumbnail .badge {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
}

.upload-progress__content {
  position: relative;
  flex-grow: 1;
  min-width: 9.375rem;
  min-height: 112px;
  margin-right: 1rem;
}

.upload-progress__content__inner {
  min-width: 0;
  /* is need for ellipses in flexbox */
  min-height: 5rem;
  margin: 1rem 0;
}

.upload-progress__content__inner__title {
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.upload-progress__content__inner .link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-progress__content__inner .link:first-child {
  margin-top: 1rem;
}

.upload-progress__content__inner__error-message {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--color-red-400);
}

.upload-progress__content__inner__file-size {
  flex-shrink: 0;
  margin-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-grey-500);
}

.upload-progress__content__inner .progressbar {
  margin-top: 0.5rem;
}

.upload-progress__content::after {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 1px;
  margin-top: -1rem;
  content: " ";
  background-color: var(--color-grey-200);
}

.upload-progress__icon .is-checked {
  position: relative;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem;
  cursor: default;
  background-color: var(--color-green-100);
}

.upload-progress__icon .is-checked .sd-icon {
  position: absolute;
  top: 1px;
  left: 0.1875rem;
  font-size: 1.0625rem;
}

.upload-progress .progressbar--animation .progressbar__holder {
  width: 70%;
  -webkit-animation: upload-progress-animation 1.5s infinite;
  animation: upload-progress-animation 1.5s infinite;
}

@-webkit-keyframes upload-progress-animation {
  0% {
    margin-left: -70%;
  }
  100% {
    margin-left: 120%;
  }
}
@keyframes upload-progress-animation {
  0% {
    margin-left: -70%;
  }
  100% {
    margin-left: 120%;
  }
}
/**
Search Card
@author: Bahar Werner
 */
.search-card {
  display: flex;
  flex-wrap: wrap;
  height: 4.5rem;
  padding: 0.5rem;
  background-color: var(--color-white);
  border-radius: 0.5rem;
}

.search-card__mobile-divider {
  display: none;
}

@media screen and (max-width: 767px) {
  .search-card__mobile-divider {
    display: block;
    width: calc(100% + 16px);
    margin-bottom: 0.5rem;
    margin-left: -0.5rem;
  }
}
.search-card--50 {
  max-width: 31rem;
}

@media screen and (max-width: 767px) {
  .search-card--50 .search-card__item:not(:last-child) {
    padding-top: 0.5rem;
    padding-right: 0.5rem;
    margin-top: -0.5rem;
    margin-right: 0.5rem;
    margin-bottom: -0.5rem;
    border-right: 1px solid var(--color-grey-200);
  }
}
.search-card--100 {
  max-width: 47.5rem;
}

@media screen and (max-width: 767px) {
  .search-card--100 {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
  }
}
.search-card--200 {
  max-width: 64rem;
}

@media screen and (max-width: 767px) {
  .search-card--200 {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
  }
}
.search-card--has-two-lines {
  height: 9.0625rem;
}

@media screen and (max-width: 767px) {
  .search-card--has-two-lines {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
  }
}
.search-card--has-two-lines .search-card__item:nth-child(1) {
  padding-bottom: 0.5rem;
}

@media screen and (max-width: 767px) {
  .search-card--has-two-lines .search-card__item:nth-child(1) {
    padding-bottom: 0;
  }
}
.search-card--has-two-lines .search-card__item:nth-child(3) {
  padding-right: 0;
  padding-bottom: 0.5rem;
  margin-right: 0;
  border-right: 0;
}

@media screen and (max-width: 767px) {
  .search-card--has-two-lines .search-card__item:nth-child(3) {
    padding-bottom: 0;
  }
}
.search-card--has-two-lines .search-card__item {
  z-index: 0;
  flex: 1 1 0;
}

.search-card--has-two-lines .search-card__divider {
  width: calc(100% + 16px);
  margin: 0.5rem -0.5rem 0.5rem -0.5rem;
  background-color: var(--color-grey-200);
}

@media screen and (max-width: 767px) {
  .search-card--has-two-lines .search-card__divider {
    display: none;
  }
}
.search-card--has-two-lines .dropdown {
  z-index: -1;
  width: 100%;
}

.search-card--has-two-lines .dropdown .sd-icon {
  z-index: 2;
}

.search-card--has-two-lines .dropdown__input {
  z-index: -2;
}

.search-card__item {
  flex: 1 1 0%;
}

@media screen and (max-width: 767px) {
  .search-card__item {
    padding-top: 0;
    padding-right: 0;
    margin-top: 0;
    margin-right: 0;
    border-right: 0;
  }
}
.search-card__item:last-child {
  flex: none;
}

.search-card__item .dropdown:hover .dropdown__input {
  border: none;
}

.search-card__item .dropdown__input {
  border: none;
  box-shadow: none;
}

@media screen and (max-width: 767px) {
  .search-card__item .dropdown__input {
    z-index: 12;
  }
}
@media screen and (max-width: 767px) {
  .search-card__item .dropdown__label {
    z-index: 12;
  }
}
@media screen and (max-width: 767px) {
  .search-card__item .dropdown .sd-icon {
    z-index: 12;
  }
}
.search-card__item .dropdown .menu {
  top: -1rem;
  bottom: inherit;
  z-index: -1;
}

@media screen and (max-width: 767px) {
  .search-card__item .dropdown .menu {
    z-index: 11;
  }
}
.search-card__item .dropdown .menu__wrapper {
  width: calc(100% + 16px);
  max-height: 320px;
  padding-top: 4.6rem;
  margin-left: -0.5rem;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04), 0 2.5px 2.5px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(50, 50, 93, 0.07);
}

.search-card__item .dropdown .menu__wrapper::before {
  position: absolute;
  top: 5rem;
  left: -0.5rem;
  z-index: 99;
  width: calc(100% + 16px);
  height: 1px;
  content: "";
  background-color: var(--color-grey-200);
}

.search-card__item .dropdown .menu__item {
  position: relative;
  box-shadow: none;
}

@media screen and (max-width: 767px) {
  .search-card__item .dropdown .menu__item {
    z-index: 2;
  }
}
.search-card__item:not(:last-child) {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  margin-top: -0.5rem;
  margin-right: 0.5rem;
  margin-bottom: -0.5rem;
  border-right: 1px solid var(--color-grey-200);
}

@media screen and (max-width: 767px) {
  .search-card__item:not(:last-child) {
    z-index: 1;
    padding-top: 0;
    padding-right: 0;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.5rem;
    border-right: 0;
  }
}
.search-card__item:nth-child(1) {
  z-index: 9998;
}

.search-card__item:nth-child(2) {
  z-index: 9997;
}

.search-card__item:nth-child(3) {
  z-index: 9996;
}

.search-card__item:nth-child(4) {
  z-index: 9995;
}

.search-card__item:nth-child(5) {
  z-index: 9994;
}

.search-card__item:nth-child(6) {
  z-index: 9993;
}

.search-card__item:nth-child(7) {
  z-index: 9992;
}

.search-card__item:nth-child(8) {
  z-index: 9991;
}

.search-card__item:nth-child(9) {
  z-index: 9990;
}

.search-card__item:nth-child(10) {
  z-index: 9989;
}

.seo-linklist li {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem;
}

.seo-linklist li:first-child {
  padding-top: 0.5rem;
}

.seo-linklist li .seo-linklist__link {
  color: var(--color-grey-700);
  text-decoration: none;
  transition: 150ms;
}

.seo-linklist li .seo-linklist__link::before {
  display: inline-block;
  padding-right: 0.25rem;
  font-family: smartdesign-icons;
  vertical-align: bottom;
  content: "angle_right";
}

.seo-linklist li .seo-linklist__link:hover {
  color: var(--color-grey-500);
}

/**
Article
@author: Eduard Tschernjaew
 */
.sd-article {
  max-width: 42rem;
  margin: auto;
}

.sd-article h2,
.sd-article .h2 {
  font-size: 1.75rem;
  line-height: 32px;
  letter-spacing: -0.015em;
  margin-top: 5rem;
  font-weight: 700;
  color: var(--color-grey-700);
}

@media screen and (max-width: 767px) {
  .sd-article h2,
  .sd-article .h2 {
    font-size: 1.5rem;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}
@media screen and (max-width: 767px) {
  .sd-article h2,
  .sd-article .h2 {
    margin-top: 3.5rem;
  }
}
.sd-article h3,
.sd-article .h3 {
  font-size: 1.4375rem;
  line-height: 28px;
  letter-spacing: -0.01em;
  margin-top: 2rem;
  font-weight: 700;
  color: var(--color-grey-700);
}

@media screen and (max-width: 767px) {
  .sd-article h3,
  .sd-article .h3 {
    font-size: 1.375rem;
    line-height: 26px;
    letter-spacing: -0.01em;
  }
}
.sd-article p {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  margin-top: 1rem;
  color: var(--color-grey-700);
}

.sd-article .card {
  padding: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
  background-color: var(--color-grey-100);
}

@media screen and (max-width: 767px) {
  .sd-article .card {
    padding: 1.5rem 1rem;
  }
}
.sd-article .card h2:first-child,
.sd-article .card .h2:first-child,
.sd-article .card h3:first-child,
.sd-article .card .h3:first-child,
.sd-article .card p:first-child {
  margin-top: 0;
}

.sd-article .img-col {
  display: flex;
  flex-direction: row;
  margin-top: 2rem;
  gap: 2rem;
}

.sd-article .img-col h3,
.sd-article .img-col .h3 {
  margin-top: 0;
}

.sd-article .img-col img {
  box-sizing: border-box;
  display: flex;
  width: auto;
  border: 2px solid rgba(48, 48, 56, 0.1);
  border-radius: 16px;
}

.sd-article .img-col .desc {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  margin-top: 1rem;
  color: var(--color-grey-500);
}

@media screen and (max-width: 767px) {
  .sd-article .img-col {
    flex-direction: column;
    gap: 1.5rem;
  }
  .sd-article .img-col img {
    width: 100%;
  }
}
.sd-article .img-card {
  margin-top: 1rem;
}

.sd-article .img-card img {
  box-sizing: border-box;
  display: flex;
  width: auto;
  border: 2px solid rgba(48, 48, 56, 0.1);
  border-radius: 16px;
}

@media screen and (max-width: 767px) {
  .sd-article .img-card img {
    width: 100%;
  }
}
.sd-article .img-card .desc {
  font-size: 0.875rem;
  line-height: 24px;
  letter-spacing: -0.005em;
  margin-top: 1rem;
  color: var(--color-grey-500);
}

.sd-article .textlist {
  margin-bottom: 0.5rem;
}

.error-page {
  margin: auto;
  text-align: center;
}

.error-page__bg-img {
  width: 100%;
  height: 29.5rem;
  background-repeat: no-repeat;
  background-position: center bottom -1.25rem;
}

@media screen and (max-width: 767px) {
  .error-page__bg-img {
    height: 19.5rem;
    background-size: cover;
  }
}
@media screen and (max-width: 767px) {
  .error-page__bg-img {
    height: 18rem;
  }
}
.browser-support .error-page__bg-img {
  height: 20.3125rem;
  margin-bottom: 5rem;
}

@media screen and (max-width: 767px) {
  .browser-support .error-page__bg-img {
    margin-bottom: 2.5rem;
  }
}
.error-page__content {
  position: relative;
  z-index: 1;
  max-width: 27.25rem;
  margin: 0 auto;
}

.error-page__headline {
  font-size: 1.75rem;
  line-height: 32px;
  letter-spacing: -0.015em;
  margin-top: 5rem;
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .error-page__headline {
    font-size: 1.5rem;
    line-height: 28px;
    letter-spacing: -0.015em;
  }
}
@media screen and (max-width: 767px) {
  .error-page__headline {
    margin-top: 2.5rem;
  }
}
.error-page__desc {
  margin-top: 1rem;
  color: var(--color-grey-500);
  text-align: center;
}

.error-page .btn {
  margin-top: 2.5rem;
  margin-bottom: 5rem;
}

@media screen and (max-width: 767px) {
  .error-page .btn {
    margin-bottom: 2.5rem;
  }
}
.hero-section {
  background-size: cover;
}

.hero-section .badge {
  margin-top: 7.5rem;
}

@media screen and (max-width: 767px) {
  .hero-section .badge {
    margin-top: 3.5rem;
  }
}
.hero-section h1 {
  margin-top: 1rem;
  color: var(--color-white);
}

.hero-section .subtitle {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-white);
}

.hero-section .search-card {
  margin-top: 3.5rem;
}

@media screen and (max-width: 767px) {
  .hero-section .search-card {
    height: auto;
    margin-top: 2.5rem;
  }
}
.hero-section .ekomi-badge {
  display: block;
  padding: 0 2rem 3.5rem 0;
  margin: 5rem 0 0 auto;
}

@media screen and (max-width: 767px) {
  .hero-section .ekomi-badge {
    padding: 0 1rem 2rem 0;
    margin: 3.5rem 0 0 auto;
  }
}
@media screen and (max-width: 767px) {
  .hero-section .ekomi-badge--large-spacing {
    margin: 7rem 0 0 auto;
  }
}

/**
ROOT COLORS IMMOWELT

please notice: root and host should be in different rules
for support of some ms edge versions.
 */
:root {
  --color-primary-400: var(--color-yellow-400);
  --color-primary-300: var(--color-yellow-300);
  --color-primary-200: var(--color-yellow-200);
  --color-primary-100: var(--color-yellow-100);
  --color-secondary-400: var(--color-blue-400);
  --color-secondary-300: var(--color-blue-300);
  --color-secondary-200: var(--color-blue-200);
  --color-secondary-100: var(--color-blue-100);
  --color-grey-800: #1c1c21;
  --color-grey-800-rgb: 28, 28, 33;
  --color-grey-700: #303038;
  --color-grey-700-rgb: 48, 48, 56;
  --color-grey-600: #303038;
  --color-grey-500: #6e6e7c;
  --color-grey-500-rgb: 110, 110, 124;
  --color-grey-400: #94949e;
  --color-grey-300: #cdcdd0;
  --color-grey-200: #e2e2e4;
  --color-grey-100: #f7f7f8;
  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --color-red-400: #d10002;
  --color-red-300: #ff4e50;
  --color-red-200: #ff7072;
  --color-red-100: #ffe0e0;
  --color-green-400: #007a4b;
  --color-green-300: #00c176;
  --color-green-200: #00d683;
  --color-green-100: #c5fce7;
  --color-yellow-400: #7a6200;
  --color-yellow-300: #fc0;
  --color-yellow-200: #ffd942;
  --color-yellow-100: #fff6d1;
  --color-blue-400: #007c8a;
  --color-blue-300: #009daf;
  --color-blue-200: #0ab3c7;
  --color-blue-100: #e2fbfd;
  --color-facebook: #3b5998;
  --color-fbmessenger: #0084ff;
  --color-twitter: #1da1f2;
  --color-whatsapp: #25d366;
  --color-linkedin: #0077b5;
  --color-focus: #72c5ff;
  --color-translucent-100: rgba(var(--color-white-rgb), .85);
  --color-translucent-150: rgba(var(--color-grey-500-rgb), .15);
  --color-translucent-200: rgba(var(--color-grey-700-rgb), .5);
  --color-translucent-250: rgba(var(--color-grey-700-rgb), .85);
  --color-translucent-300: rgba(var(--color-grey-800-rgb), .85);
}

:host {
  --color-primary-400: var(--color-yellow-400);
  --color-primary-300: var(--color-yellow-300);
  --color-primary-200: var(--color-yellow-200);
  --color-primary-100: var(--color-yellow-100);
  --color-secondary-400: var(--color-blue-400);
  --color-secondary-300: var(--color-blue-300);
  --color-secondary-200: var(--color-blue-200);
  --color-secondary-100: var(--color-blue-100);
  --color-grey-800: #1c1c21;
  --color-grey-800-rgb: 28, 28, 33;
  --color-grey-700: #303038;
  --color-grey-700-rgb: 48, 48, 56;
  --color-grey-600: #303038;
  --color-grey-500: #6e6e7c;
  --color-grey-500-rgb: 110, 110, 124;
  --color-grey-400: #94949e;
  --color-grey-300: #cdcdd0;
  --color-grey-200: #e2e2e4;
  --color-grey-100: #f7f7f8;
  --color-white: #fff;
  --color-white-rgb: 255, 255, 255;
  --color-red-400: #d10002;
  --color-red-300: #ff4e50;
  --color-red-200: #ff7072;
  --color-red-100: #ffe0e0;
  --color-green-400: #007a4b;
  --color-green-300: #00c176;
  --color-green-200: #00d683;
  --color-green-100: #c5fce7;
  --color-yellow-400: #7a6200;
  --color-yellow-300: #fc0;
  --color-yellow-200: #ffd942;
  --color-yellow-100: #fff6d1;
  --color-blue-400: #007c8a;
  --color-blue-300: #009daf;
  --color-blue-200: #0ab3c7;
  --color-blue-100: #e2fbfd;
  --color-facebook: #3b5998;
  --color-fbmessenger: #0084ff;
  --color-twitter: #1da1f2;
  --color-whatsapp: #25d366;
  --color-linkedin: #0077b5;
  --color-focus: #72c5ff;
  --color-translucent-100: rgba(var(--color-white-rgb), .85);
  --color-translucent-150: rgba(var(--color-grey-500-rgb), .15);
  --color-translucent-200: rgba(var(--color-grey-700-rgb), .5);
  --color-translucent-250: rgba(var(--color-grey-700-rgb), .85);
  --color-translucent-300: rgba(var(--color-grey-800-rgb), .85);
}

/**
WORKAROUND FOR DUPLICATED MODULE
 */
/**
SIZES
 */
/**
BREAKPOINTS
 */
/**
MEDIAQUERY breakpoints for min-width
 */
/**
MEDIAQUERY breakpoints for max-width
 */
/**
GRID
 */
/* stylelint-disable-next-line */
/**
TRANSITION
 */
/**
FONT WEIGHT - BOLD
Is used in the mixin 'is-bold'
 */
/**
FONTS MAP
Attention the mobile information must be declared as a string.
 */
/**
SHADOWS
 */
/**
OPACITY
 */
/**
BORDER RADIUS
 */
/**
DISABLED MAP
 */
/**
COLOR MAP
 */
/**
PIXEL TO REM CONVERTER
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/functions
 */
/**
GET TYPO PROPERTY FROM FONTS MAP
 */
/**
GET COLOR FROM MAP
 */
/**
GET SHADOW FROM MAP
 */
/**
FLEXBOX
 */
/**
MEDIA QUERY
 */
/**
COLOR SCHEMES
 */
/**
TYPOGRAPHY
☛ http://shared.gitlab-fue1.iwui.net/ui-playground/docs/#/abstract/mixins?id=typography-mixin
 */
/**
FONT WEIGHT - BOLD
 */
/**
TRANSITION
 */
/**
CENTER
 */
/**
CLEARFIX
 */
/**
PADDING & MARGIN
 */
/**
DISABLED
 */
/**
DISABLED SHAKE
 */
/**
HOVER FOR NON TOUCH DEViCES
 */
/**
OUTLINE FOR FOCUSSED ELEMENTS
 */
/**
@import fonts
 */
body {
  font-family: "immo Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}


.teasercontainer {
  container-type: inline-size;
  border-radius: 16px;
  margin-bottom: 24px;
}

.teasercontainer .teaser__content.teaser__content_full {
  width: 100%;
}

.download.link {
  color: var(--color-grey-700);
}

.download.link::before {
  color: var(--color-secondary-400);
}

@container (min-width: 450px) {
  .teaser {
    min-height: 185px;
  }
  .teaser .teaser__content {
    display: grid;
    align-items: center;
    height: auto;
  }
  @container (max-width: 500px) {
    .teaser .teaserimage {
      min-width: 43%;
      max-width: 43%;
    }
    .teaser span, .teaser .teaserimage span img {
      width: 100%;
      min-width: 50px;
    }
    .teaser .teaser__content {
      width: 57%;
      padding: 20px;
    }
  }
}
@container (max-width: 450px) {
  .teaser.flex-row, .teaser.flex-row-reverse {
    flex-direction: column;
  }
  .flex-row img, .flex-row-reverse img {
    flex-direction: column;
  }
  .teaser.flex-row .teaserimage img, .teaser.flex-row-reverse .teaserimage img {
    width: 100%;
    min-width: 100%;
    border-radius: 16px 16px 0 0;
  }
}
@container (min-width: 450px) {
  .teaser.flex-row .teaserimage img, .teaser.flex-row-reverse .teaserimage img {
    height: 100%;
  }
  .teaser .teaserimage {
    max-height: 100%;
  }
}
.teaser {
  background-color: white;
}
.teaser.flex-row img {
  border-radius: 16px 0 0 16px;
}
.teaser.teaser--centered {
  background-color: rgba(255, 255, 255, 0);
}
.teaser.flex-row-reverse img {
  border-radius: 0 16px 16px 0;
}
.teaser .teaserimage {
  gap: 0rem;
}
.teaser .teaserimage .teaser__content {
  min-width: 500px;
  width: 100%;
}
.teaser .teaserimage img {
  object-fit: cover;
  object-position: center;
  transition-property: transform;
  min-width: 320px;
  height: 200px;
}
@media (max-width: 800px) {
  .teaser .teaserimage.flex-row, .teaser .teaserimage.flex-row-reverse {
    flex-direction: column;
  }
  .teaser .teaserimage.flex-row img, .teaser .teaserimage.flex-row-reverse img {
    flex-direction: column;
  }
}

.quote {
  line-height: 150%;
}
.quote .avatar {
  border: 1px solid rgba(48, 48, 56, 0.1019607843);
}
.quote .teaser__sub {
  text-transform: uppercase;
  color: #1C1C21;
}
.quote .teaser__description {
  color: #1C1C21;
}
.quote .reverse .teaser__left-content {
  margin-left: 1.5rem;
  margin-right: 0;
}
@media screen and (max-width: 600px) {
  .quote .teaser__left-content, .quote .reverse .teaser__left-content {
    margin-left: auto;
    margin-right: auto;
  }
  .quote .teaser {
    flex-direction: column;
    gap: 20px;
  }
  .quote .reverse .teaser {
    flex-direction: column-reverse;
    gap: 20px;
  }
}

.banner .teaser {
  height: 380px;
}
.banner .btn {
  width: fit-content;
}
.banner .teaserimage {
  width: 48%;
  height: 100%;
}
.banner .teaserimage img {
  width: 100%;
}
.banner .teaser__content {
  width: 52%;
}
.banner .teaser__headline {
  font-size: 23px;
}
@container (max-width: 700px) {
  .banner .teaser__headline {
    font-size: 19px;
  }
  .banner .teaserimage {
    width: 100%;
    height: 100%;
  }
  .banner .teaser {
    height: 100%;
  }
  .banner .teaser__content {
    width: 100%;
  }
}

.logolist img {
  width: 170px;
  height: auto;
}
.logolist .logos {
  gap: 20px;
}

.search-card__item.search-card__item__input {
  width: 100%;
}

.search-card__item .dropdown__input {
  cursor: text;
}

.search-card {
  flex-wrap: nowrap;
}

@media (max-width: 800px) {
  hr.search-card__mobile-divider {
    display: none;
  }
}
.dropdown__input + label {
  transform: none;
}

.dropdown__input:focus + label, .dropdown__input:valid + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.row.presse-list {
  margin-right: 0;
  margin-left: 0;
}

.file {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  margin-bottom: 14px;
}

.single-image {
  color: var(--color-grey-500);
  font-size: 14px;
}

.text-file {
  border-radius: 16px;
}

.text-file.float-left {
  margin: 4px 24px 24px 0;
}

.text-file.float-right {
  margin: 4px 0 24px 24px;
}

.float-right + .imagetext {
  margin-left: 24px;
}

.float-left + .imagetext {
  margin-right: 24px;
}

.imagetext {
  color: var(--color-grey-500);
  font-size: 14px;
  margin-top: -4px;
  margin-bottom: 24px;
}

.single-image-text {
  position: relative;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix {
  overflow: auto;
}

@media (max-width: 800px) {
  .single-image-text img {
    width: 100%;
    height: auto;
  }
  .text-file.float-left {
    margin: 0 0 24px 0;
  }
  .text-file.float-right {
    margin: 0 0 24px 0;
  }
  .float-right + .imagetext {
    margin-left: 0;
  }
  .float-left + .imagetext {
    margin-right: 0;
  }
  .float-left {
    float: none;
  }
  .float-right {
    float: none;
  }
}
@media (max-width: 800px) {
  .table-container {
    position: relative;
  }
  .table-container::after {
    position: absolute;
    content: "";
    right: -16px;
    top: 0;
    height: 100%;
    width: 35px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
  }
}
.table {
  position: relative;
}
@media (max-width: 800px) {
  .table {
    overflow: scroll;
    padding-right: 35px;
  }
}
.table .data-table table tr:first-child.has-border-bottom-gray {
  border-bottom: 1px solid #e2e2e4;
}
.table .data-table tbody tr:first-child:hover {
  background-color: var(--color-grey-100);
}

.download-button {
  font-weight: bold;
  padding: 8px 20px;
  border: 1.5px solid var(--color-grey-700);
  border-radius: 4px;
}

.download-button.download.link::before {
  color: var(--color-grey-700);
}

.download-row {
  justify-content: end;
}

.teaser__content .download.link {
  width: 100%;
}

.cc_page_100 {
  width: 100%;
}

.submit.btn {
  border: none;
}

.presseverteiler .radio-group {
  margin-right: 16px;
  margin-left: 16px;
}

.hidden-input {
  display: none;
}

@media (max-width: 800px) {
  .checkbox-group--horizontal .checkbox {
    width: 100%;
  }
  button {
    width: 100%;
  }
  button input {
    width: 100%;
  }
  #js_sendRequestForm .row {
    display: block;
  }
  #js_sendRequestForm .row.stay-col {
    display: flex;
  }
}
.input__textfield[type=tel]:not(:placeholder-shown) + label, .input__textfield[type=email]:not(:placeholder-shown) + label {
  transform: none;
}

#js_sendRequestForm .input__textfield[type=tel]:focus + label, #js_sendRequestForm .input__textfield[type=email]:focus + label, #js_sendRequestForm .input__textfield[type=tel]:valid + label, #js_sendRequestForm .input__textfield[type=email]:valid + label {
  transform: translate(4px, -9px) scale(0.8225);
}

.submit-btn {
  display: none;
}

.submit.btn--100 {
  padding: 1rem 6.5rem;
}

.anfrage .checkbox input {
  margin-left: 8px;
  width: 24px;
  height: 35px;
}

.presseverteiler .date, .presseverteiler .date a {
  color: #6e6e7c;
  font-size: 14px;
  font-weight: bold;
}
.presseverteiler .date {
  margin-bottom: 6px;
}
.presseverteiler .date a::after {
  display: none;
}
.presseverteiler .abstract {
  padding: 8px 0 24px 0;
}
.presseverteiler .presse-teaser {
  border-radius: 16px;
  background-color: white;
}
.presseverteiler .presse-headline {
  font-size: 19px;
  font-weight: bold;
  color: #303038;
  padding-bottom: 10px;
  padding-top: 10px;
}
.presseverteiler .pagination__item:last-child {
  margin-left: 0;
}

.pagination {
  font-weight: bold;
  width: 100%;
  align-items: center;
}
.pagination a {
  width: 40px;
  text-align: center;
}
.pagination .is-current {
  width: 40px;
  height: 40px;
  flex-grow: 0;
  padding: 8px 0;
  border-radius: 24px;
  background-color: #fc0;
}

.rte-text h1 {
  font-size: 1.75rem;
  line-height: 32px;
  letter-spacing: -0.015em;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 36px;
}
.rte-text h2 {
  font-size: 1.4375rem;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: bold;
  margin-bottom: 16px;
  margin-top: 24px;
}
.rte-text h3 {
  font-size: 1.1875rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 28px;
}
.rte-text strong {
  font-weight: bold;
}
.rte-text .text-center {
  text-align: center;
}
.rte-text .text-right {
  text-align: right;
}
.rte-text ul li, .rte-text ol li {
  margin: 0.5rem 0;
}
.rte-text ul, .rte-text ol {
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
}
.rte-text ol {
  list-style: none;
  counter-reset: item;
}
.rte-text ol li {
  counter-increment: item;
  margin-bottom: 5px;
}
.rte-text ol li::before {
  margin-right: 10px;
  content: counter(item);
  width: 1.2em;
  text-align: center;
  display: inline-block;
}
.rte-text ul li::before {
  width: 0.375rem;
  height: 0.375rem;
  margin-right: 0.625rem;
  content: "•";
}
@media (max-width: 800px) {
  .rte-text .contenttable {
    position: relative;
  }
  .rte-text .contenttable::after {
    position: absolute;
    content: "";
    right: -16px;
    top: 0;
    height: 100%;
    width: 35px;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50%);
  }
}
.rte-text .contenttable {
  margin-top: 32px;
  margin-bottom: 32px;
  width: 100%;
  overflow: hidden;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-grey-700);
  border-collapse: collapse;
  background-color: var(--color-white);
  border-radius: 0.5rem;
  position: relative;
}
.rte-text .contenttable tr {
  min-height: 3.5rem;
  background-color: var(--color-white);
  border: solid var(--color-grey-200);
  border-width: 1px 0 0;
}
.rte-text .contenttable td {
  padding: 1rem;
  text-align: left;
}
@media (max-width: 800px) {
  .rte-text .contenttable {
    overflow: scroll;
    padding-right: 35px;
  }
}
.rte-text .contenttable tr:first-child {
  border-bottom: 1px solid #e2e2e4;
  border-top: none;
}
.rte-text .contenttable tbody tr:first-child:hover, .rte-text .contenttable tbody tr:hover {
  background-color: var(--color-grey-100);
}

.textelement.has-font-100 p a::after {
  content: " ";
}

.textelement.has-font-100 p a {
  text-decoration: underline;
}

.textelement.has-font-100 p {
  margin-bottom: 10px;
}

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

.has-radius--large {
  border-radius: 30%;
}

@media (max-width: 800px) {
  .wrap-content {
    display: flex;
    flex-direction: column;
  }
  .wrap-content .col-500-6, .wrap-content .col-500-4, .wrap-content .col-500-8 {
    width: 100%;
    max-width: 100%;
  }
}
.breadcrumb--seo-footer ol li:first-child a p::before {
  display: inline-flex;
  font-family: smartdesign-icons;
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
  margin: 0 0.25rem;
  color: var(--color-grey-300);
  content: "angle_right";
}

.has-radius--medium {
  border-radius: 16px;
}

.has-min-width {
  min-width: 200px;
}

.body {
  font-family: "immo Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.has-border-gray {
  border: 1px solid rgba(48, 48, 56, 0.1019607843);
}

.m-auto {
  margin: auto;
}

div p a {
  display: inline-block;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-secondary-400);
  text-decoration: none;
  cursor: pointer;
}
div p a::after {
  content: "long_arrow_right";
  display: inline-block;
  font-family: smartdesign-icons;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

div p a, .has-font-100 p a {
  display: inline-block;
  font-size: 1rem;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--color-secondary-400);
  text-decoration: none;
}
div p a::before, div p a::after, .has-font-100 p a::before, .has-font-100 p a::after {
  display: inline-block;
  font-family: smartdesign-icons;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}
@media screen and (prefers-reduced-motion: reduce), (update: slow) {
  div p a::before, div p a::after, .has-font-100 p a::before, .has-font-100 p a::after {
    transform: none !important;
  }
}
div p a::before, .has-font-100 p a::before {
  padding-right: 0.25em;
}
div p a::after, .has-font-100 p a::after {
  padding-left: 0.25em;
}
@media not all and (pointer: coarse) {
  div p a:hover, .has-font-100 p a:hover {
    color: var(--color-secondary-300);
  }
}
div p a::after, .has-font-100 p a::after {
  content: "long_arrow_right";
}
@media not all and (pointer: coarse) {
  div p a:hover::after, .has-font-100 p a:hover::after {
    transform: translateX(0.25em);
  }
}

.download::before {
  padding-right: 0.25rem;
  content: "download";
  display: inline-flex;
  font-family: smartdesign-icons;
  font-size: 1rem;
  line-height: 1.5rem;
  vertical-align: bottom;
  transition-timing-function: ease;
  transition-duration: 150ms;
  transition-property: transform;
}

.breadcrumb--seo-footer ol li:first-child p {
  display: none;
}

@media (min-width: 800px) {
  .bg-grey-100.has-radius--medium {
    margin-right: 2rem;
    margin-left: 2rem;
  }
}
@media (max-width: 800px) {
  .mobile-flex-col {
    flex-direction: column;
  }
}
.link--iconteaser {
  padding-left: 10px;
}
.link--iconteaser::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 20px;
  margin-left: -20px;
  background-image: url("../Images/arrow.svg");
  background-size: cover;
}

.presse-background {
  background-image: url("../Images/hero-presse.jpg");
}

/* offset when scrolling to content element by using #id */
[id] {
  scroll-margin-top: 60px;
}

/*# sourceMappingURL=app.css.map */