/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./apps/dg-self-fix/src/scottish.scss?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
/* stylelint-disable */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

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

* {
  box-sizing: border-box;
}

/* Start Bolt v1 reset carried over for consistent link styling */
a,
select,
button {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

[hidden] {
  display: none !important;
}

.grecaptcha-badge {
  visibility: hidden;
}

body {
  background-color: var(--page-bg);
  color: var(--text-color);
}

.grid-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: var(--grid-column-gap);
}

.container {
  display: block;
  width: 100%;
  max-width: calc(var(--grid-max-width) + var(--grid-padding) * 2);
  margin: 0 auto;
  padding-left: var(--grid-padding);
  padding-right: var(--grid-padding);
}

.xs-1 {
  grid-column: span 1;
}

.xs-2 {
  grid-column: span 2;
}

.xs-3 {
  grid-column: span 3;
}

.xs-4 {
  grid-column: span 4;
}

.xs-5 {
  grid-column: span 5;
}

.xs-6 {
  grid-column: span 6;
}

.xs-7 {
  grid-column: span 7;
}

.xs-8 {
  grid-column: span 8;
}

.xs-9 {
  grid-column: span 9;
}

.xs-10 {
  grid-column: span 10;
}

.xs-11 {
  grid-column: span 11;
}

.xs-12 {
  grid-column: span 12;
}

@media only screen and (min-width: 576px) {
  .sm-1 {
    grid-column: span 1;
  }
  .sm-2 {
    grid-column: span 2;
  }
  .sm-3 {
    grid-column: span 3;
  }
  .sm-4 {
    grid-column: span 4;
  }
  .sm-5 {
    grid-column: span 5;
  }
  .sm-6 {
    grid-column: span 6;
  }
  .sm-7 {
    grid-column: span 7;
  }
  .sm-8 {
    grid-column: span 8;
  }
  .sm-9 {
    grid-column: span 9;
  }
  .sm-10 {
    grid-column: span 10;
  }
  .sm-11 {
    grid-column: span 11;
  }
  .sm-12 {
    grid-column: span 12;
  }
}
@media only screen and (min-width: 768px) {
  .md-1 {
    grid-column: span 1;
  }
  .md-2 {
    grid-column: span 2;
  }
  .md-3 {
    grid-column: span 3;
  }
  .md-4 {
    grid-column: span 4;
  }
  .md-5 {
    grid-column: span 5;
  }
  .md-6 {
    grid-column: span 6;
  }
  .md-7 {
    grid-column: span 7;
  }
  .md-8 {
    grid-column: span 8;
  }
  .md-9 {
    grid-column: span 9;
  }
  .md-10 {
    grid-column: span 10;
  }
  .md-11 {
    grid-column: span 11;
  }
  .md-12 {
    grid-column: span 12;
  }
}
@media only screen and (min-width: 1024px) {
  .lg-1 {
    grid-column: span 1;
  }
  .lg-2 {
    grid-column: span 2;
  }
  .lg-3 {
    grid-column: span 3;
  }
  .lg-4 {
    grid-column: span 4;
  }
  .lg-5 {
    grid-column: span 5;
  }
  .lg-6 {
    grid-column: span 6;
  }
  .lg-7 {
    grid-column: span 7;
  }
  .lg-8 {
    grid-column: span 8;
  }
  .lg-9 {
    grid-column: span 9;
  }
  .lg-10 {
    grid-column: span 10;
  }
  .lg-11 {
    grid-column: span 11;
  }
  .lg-12 {
    grid-column: span 12;
  }
}
@media only screen and (min-width: 1280px) {
  .xl-1 {
    grid-column: span 1;
  }
  .xl-2 {
    grid-column: span 2;
  }
  .xl-3 {
    grid-column: span 3;
  }
  .xl-4 {
    grid-column: span 4;
  }
  .xl-5 {
    grid-column: span 5;
  }
  .xl-6 {
    grid-column: span 6;
  }
  .xl-7 {
    grid-column: span 7;
  }
  .xl-8 {
    grid-column: span 8;
  }
  .xl-9 {
    grid-column: span 9;
  }
  .xl-10 {
    grid-column: span 10;
  }
  .xl-11 {
    grid-column: span 11;
  }
  .xl-12 {
    grid-column: span 12;
  }
}
.xs--hidden {
  display: none;
}

.xs--inline {
  display: inline;
}

.xs--block {
  display: block;
}

.xs--stack {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.xs--flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.xs--flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.xs--nowrap {
  flex-wrap: nowrap;
}

.xs--wrap {
  flex-wrap: wrap;
}

.xs--fit {
  flex-basis: auto;
}

.xs--baseline {
  align-items: baseline;
}

.xs--middle {
  align-items: center;
}

.xs--start {
  align-items: flex-start;
}

.xs--end {
  align-items: flex-end;
}

/*
 * Add more utils here if need be.
 * E.G.
  .xs-around {
    justify-content: space-around;
  }
 */
.xs-order-0 {
  order: 0;
}

.xs-order-1 {
  order: 1;
}

.xs-order-2 {
  order: 2;
}

.xs-order-3 {
  order: 3;
}

.xs-order-4 {
  order: 4;
}

.xs-order-5 {
  order: 5;
}

.xs-order-6 {
  order: 6;
}

.xs-order-7 {
  order: 7;
}

.xs-order-8 {
  order: 8;
}

.xs-order-9 {
  order: 9;
}

.xs-order-10 {
  order: 10;
}

.xs-order-11 {
  order: 11;
}

.xs-order-12 {
  order: 12;
}

.xs-self-baseline {
  align-self: baseline;
}

.xs-self-middle {
  align-self: center;
}

.xs-self-end {
  align-self: flex-end;
}

.xs-self-start {
  align-self: flex-start;
}

@media only screen and (min-width: 576px) {
  .sm--hidden {
    display: none;
  }
  .sm--inline {
    display: inline;
  }
  .sm--block {
    display: block;
  }
  .sm--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .sm--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .sm--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .sm--nowrap {
    flex-wrap: nowrap;
  }
  .sm--wrap {
    flex-wrap: wrap;
  }
  .sm--fit {
    flex-basis: auto;
  }
  .sm--baseline {
    align-items: baseline;
  }
  .sm--middle {
    align-items: center;
  }
  .sm--start {
    align-items: flex-start;
  }
  .sm--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .sm-around {
      justify-content: space-around;
    }
   */
  .sm-order-0 {
    order: 0;
  }
  .sm-order-1 {
    order: 1;
  }
  .sm-order-2 {
    order: 2;
  }
  .sm-order-3 {
    order: 3;
  }
  .sm-order-4 {
    order: 4;
  }
  .sm-order-5 {
    order: 5;
  }
  .sm-order-6 {
    order: 6;
  }
  .sm-order-7 {
    order: 7;
  }
  .sm-order-8 {
    order: 8;
  }
  .sm-order-9 {
    order: 9;
  }
  .sm-order-10 {
    order: 10;
  }
  .sm-order-11 {
    order: 11;
  }
  .sm-order-12 {
    order: 12;
  }
  .sm-self-baseline {
    align-self: baseline;
  }
  .sm-self-middle {
    align-self: center;
  }
  .sm-self-end {
    align-self: flex-end;
  }
  .sm-self-start {
    align-self: flex-start;
  }
}
@media only screen and (min-width: 768px) {
  .md--hidden {
    display: none;
  }
  .md--inline {
    display: inline;
  }
  .md--block {
    display: block;
  }
  .md--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .md--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .md--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .md--nowrap {
    flex-wrap: nowrap;
  }
  .md--wrap {
    flex-wrap: wrap;
  }
  .md--fit {
    flex-basis: auto;
  }
  .md--baseline {
    align-items: baseline;
  }
  .md--middle {
    align-items: center;
  }
  .md--start {
    align-items: flex-start;
  }
  .md--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .md-around {
      justify-content: space-around;
    }
   */
  .md-order-0 {
    order: 0;
  }
  .md-order-1 {
    order: 1;
  }
  .md-order-2 {
    order: 2;
  }
  .md-order-3 {
    order: 3;
  }
  .md-order-4 {
    order: 4;
  }
  .md-order-5 {
    order: 5;
  }
  .md-order-6 {
    order: 6;
  }
  .md-order-7 {
    order: 7;
  }
  .md-order-8 {
    order: 8;
  }
  .md-order-9 {
    order: 9;
  }
  .md-order-10 {
    order: 10;
  }
  .md-order-11 {
    order: 11;
  }
  .md-order-12 {
    order: 12;
  }
  .md-self-baseline {
    align-self: baseline;
  }
  .md-self-middle {
    align-self: center;
  }
  .md-self-end {
    align-self: flex-end;
  }
  .md-self-start {
    align-self: flex-start;
  }
}
@media only screen and (min-width: 1024px) {
  .lg--hidden {
    display: none;
  }
  .lg--inline {
    display: inline;
  }
  .lg--block {
    display: block;
  }
  .lg--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .lg--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .lg--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .lg--nowrap {
    flex-wrap: nowrap;
  }
  .lg--wrap {
    flex-wrap: wrap;
  }
  .lg--fit {
    flex-basis: auto;
  }
  .lg--baseline {
    align-items: baseline;
  }
  .lg--middle {
    align-items: center;
  }
  .lg--start {
    align-items: flex-start;
  }
  .lg--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .lg-around {
      justify-content: space-around;
    }
   */
  .lg-order-0 {
    order: 0;
  }
  .lg-order-1 {
    order: 1;
  }
  .lg-order-2 {
    order: 2;
  }
  .lg-order-3 {
    order: 3;
  }
  .lg-order-4 {
    order: 4;
  }
  .lg-order-5 {
    order: 5;
  }
  .lg-order-6 {
    order: 6;
  }
  .lg-order-7 {
    order: 7;
  }
  .lg-order-8 {
    order: 8;
  }
  .lg-order-9 {
    order: 9;
  }
  .lg-order-10 {
    order: 10;
  }
  .lg-order-11 {
    order: 11;
  }
  .lg-order-12 {
    order: 12;
  }
  .lg-self-baseline {
    align-self: baseline;
  }
  .lg-self-middle {
    align-self: center;
  }
  .lg-self-end {
    align-self: flex-end;
  }
  .lg-self-start {
    align-self: flex-start;
  }
}
@media only screen and (min-width: 1280px) {
  .xl--hidden {
    display: none;
  }
  .xl--inline {
    display: inline;
  }
  .xl--block {
    display: block;
  }
  .xl--stack {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .xl--flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .xl--flex-column {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }
  .xl--nowrap {
    flex-wrap: nowrap;
  }
  .xl--wrap {
    flex-wrap: wrap;
  }
  .xl--fit {
    flex-basis: auto;
  }
  .xl--baseline {
    align-items: baseline;
  }
  .xl--middle {
    align-items: center;
  }
  .xl--start {
    align-items: flex-start;
  }
  .xl--end {
    align-items: flex-end;
  }
  /*
   * Add more utils here if need be.
   * E.G.
    .xl-around {
      justify-content: space-around;
    }
   */
  .xl-order-0 {
    order: 0;
  }
  .xl-order-1 {
    order: 1;
  }
  .xl-order-2 {
    order: 2;
  }
  .xl-order-3 {
    order: 3;
  }
  .xl-order-4 {
    order: 4;
  }
  .xl-order-5 {
    order: 5;
  }
  .xl-order-6 {
    order: 6;
  }
  .xl-order-7 {
    order: 7;
  }
  .xl-order-8 {
    order: 8;
  }
  .xl-order-9 {
    order: 9;
  }
  .xl-order-10 {
    order: 10;
  }
  .xl-order-11 {
    order: 11;
  }
  .xl-order-12 {
    order: 12;
  }
  .xl-self-baseline {
    align-self: baseline;
  }
  .xl-self-middle {
    align-self: center;
  }
  .xl-self-end {
    align-self: flex-end;
  }
  .xl-self-start {
    align-self: flex-start;
  }
}
.mt-1 {
  margin-top: calc(var(--spacing-unit) * 1);
}

.mt-2 {
  margin-top: calc(var(--spacing-unit) * 2);
}

.mt-3 {
  margin-top: calc(var(--spacing-unit) * 3);
}

.mt-4 {
  margin-top: calc(var(--spacing-unit) * 4);
}

.mt-5 {
  margin-top: calc(var(--spacing-unit) * 5);
}

.mt-6 {
  margin-top: calc(var(--spacing-unit) * 6);
}

.mt-7 {
  margin-top: calc(var(--spacing-unit) * 7);
}

.mt-8 {
  margin-top: calc(var(--spacing-unit) * 8);
}

.mt-9 {
  margin-top: calc(var(--spacing-unit) * 9);
}

.mt-10 {
  margin-top: calc(var(--spacing-unit) * 10);
}

.mt-11 {
  margin-top: calc(var(--spacing-unit) * 11);
}

.mt-12 {
  margin-top: calc(var(--spacing-unit) * 12);
}

.mt-13 {
  margin-top: calc(var(--spacing-unit) * 13);
}

.mt-14 {
  margin-top: calc(var(--spacing-unit) * 14);
}

.mt-15 {
  margin-top: calc(var(--spacing-unit) * 15);
}

.mt-16 {
  margin-top: calc(var(--spacing-unit) * 16);
}

.mt-17 {
  margin-top: calc(var(--spacing-unit) * 17);
}

.mt-18 {
  margin-top: calc(var(--spacing-unit) * 18);
}

.mt-19 {
  margin-top: calc(var(--spacing-unit) * 19);
}

.mt-20 {
  margin-top: calc(var(--spacing-unit) * 20);
}

.mt-none {
  margin-top: calc(var(--spacing-unit) * 0);
}

.mt-xxs {
  margin-top: calc(var(--spacing-unit) * 2);
}

.mt-xs {
  margin-top: calc(var(--spacing-unit) * 3);
}

.mt-sm {
  margin-top: calc(var(--spacing-unit) * 4);
}

.mt-md {
  margin-top: calc(var(--spacing-unit) * 6);
}

.mt-lg {
  margin-top: calc(var(--spacing-unit) * 8);
}

.mt-xl {
  margin-top: calc(var(--spacing-unit) * 12);
}

.mt-xxl {
  margin-top: calc(var(--spacing-unit) * 16);
}

.mt-xxxl {
  margin-top: calc(var(--spacing-unit) * 20);
}

.mb-1 {
  margin-bottom: calc(var(--spacing-unit) * 1);
}

.mb-2 {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.mb-3 {
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.mb-4 {
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.mb-5 {
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.mb-6 {
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.mb-7 {
  margin-bottom: calc(var(--spacing-unit) * 7);
}

.mb-8 {
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.mb-9 {
  margin-bottom: calc(var(--spacing-unit) * 9);
}

.mb-10 {
  margin-bottom: calc(var(--spacing-unit) * 10);
}

.mb-11 {
  margin-bottom: calc(var(--spacing-unit) * 11);
}

.mb-12 {
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.mb-13 {
  margin-bottom: calc(var(--spacing-unit) * 13);
}

.mb-14 {
  margin-bottom: calc(var(--spacing-unit) * 14);
}

.mb-15 {
  margin-bottom: calc(var(--spacing-unit) * 15);
}

.mb-16 {
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.mb-17 {
  margin-bottom: calc(var(--spacing-unit) * 17);
}

.mb-18 {
  margin-bottom: calc(var(--spacing-unit) * 18);
}

.mb-19 {
  margin-bottom: calc(var(--spacing-unit) * 19);
}

.mb-20 {
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.mb-none {
  margin-bottom: calc(var(--spacing-unit) * 0);
}

.mb-xxs {
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.mb-xs {
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.mb-sm {
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.mb-md {
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.mb-lg {
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.mb-xl {
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.mb-xxl {
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.mb-xxxl {
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.ml-1 {
  margin-left: calc(var(--spacing-unit) * 1);
}

.ml-2 {
  margin-left: calc(var(--spacing-unit) * 2);
}

.ml-3 {
  margin-left: calc(var(--spacing-unit) * 3);
}

.ml-4 {
  margin-left: calc(var(--spacing-unit) * 4);
}

.ml-5 {
  margin-left: calc(var(--spacing-unit) * 5);
}

.ml-6 {
  margin-left: calc(var(--spacing-unit) * 6);
}

.ml-7 {
  margin-left: calc(var(--spacing-unit) * 7);
}

.ml-8 {
  margin-left: calc(var(--spacing-unit) * 8);
}

.ml-9 {
  margin-left: calc(var(--spacing-unit) * 9);
}

.ml-10 {
  margin-left: calc(var(--spacing-unit) * 10);
}

.ml-11 {
  margin-left: calc(var(--spacing-unit) * 11);
}

.ml-12 {
  margin-left: calc(var(--spacing-unit) * 12);
}

.ml-13 {
  margin-left: calc(var(--spacing-unit) * 13);
}

.ml-14 {
  margin-left: calc(var(--spacing-unit) * 14);
}

.ml-15 {
  margin-left: calc(var(--spacing-unit) * 15);
}

.ml-16 {
  margin-left: calc(var(--spacing-unit) * 16);
}

.ml-17 {
  margin-left: calc(var(--spacing-unit) * 17);
}

.ml-18 {
  margin-left: calc(var(--spacing-unit) * 18);
}

.ml-19 {
  margin-left: calc(var(--spacing-unit) * 19);
}

.ml-20 {
  margin-left: calc(var(--spacing-unit) * 20);
}

.ml-none {
  margin-left: calc(var(--spacing-unit) * 0);
}

.ml-xxs {
  margin-left: calc(var(--spacing-unit) * 2);
}

.ml-xs {
  margin-left: calc(var(--spacing-unit) * 3);
}

.ml-sm {
  margin-left: calc(var(--spacing-unit) * 4);
}

.ml-md {
  margin-left: calc(var(--spacing-unit) * 6);
}

.ml-lg {
  margin-left: calc(var(--spacing-unit) * 8);
}

.ml-xl {
  margin-left: calc(var(--spacing-unit) * 12);
}

.ml-xxl {
  margin-left: calc(var(--spacing-unit) * 16);
}

.ml-xxxl {
  margin-left: calc(var(--spacing-unit) * 20);
}

.mr-1 {
  margin-right: calc(var(--spacing-unit) * 1);
}

.mr-2 {
  margin-right: calc(var(--spacing-unit) * 2);
}

.mr-3 {
  margin-right: calc(var(--spacing-unit) * 3);
}

.mr-4 {
  margin-right: calc(var(--spacing-unit) * 4);
}

.mr-5 {
  margin-right: calc(var(--spacing-unit) * 5);
}

.mr-6 {
  margin-right: calc(var(--spacing-unit) * 6);
}

.mr-7 {
  margin-right: calc(var(--spacing-unit) * 7);
}

.mr-8 {
  margin-right: calc(var(--spacing-unit) * 8);
}

.mr-9 {
  margin-right: calc(var(--spacing-unit) * 9);
}

.mr-10 {
  margin-right: calc(var(--spacing-unit) * 10);
}

.mr-11 {
  margin-right: calc(var(--spacing-unit) * 11);
}

.mr-12 {
  margin-right: calc(var(--spacing-unit) * 12);
}

.mr-13 {
  margin-right: calc(var(--spacing-unit) * 13);
}

.mr-14 {
  margin-right: calc(var(--spacing-unit) * 14);
}

.mr-15 {
  margin-right: calc(var(--spacing-unit) * 15);
}

.mr-16 {
  margin-right: calc(var(--spacing-unit) * 16);
}

.mr-17 {
  margin-right: calc(var(--spacing-unit) * 17);
}

.mr-18 {
  margin-right: calc(var(--spacing-unit) * 18);
}

.mr-19 {
  margin-right: calc(var(--spacing-unit) * 19);
}

.mr-20 {
  margin-right: calc(var(--spacing-unit) * 20);
}

.mr-none {
  margin-right: calc(var(--spacing-unit) * 0);
}

.mr-xxs {
  margin-right: calc(var(--spacing-unit) * 2);
}

.mr-xs {
  margin-right: calc(var(--spacing-unit) * 3);
}

.mr-sm {
  margin-right: calc(var(--spacing-unit) * 4);
}

.mr-md {
  margin-right: calc(var(--spacing-unit) * 6);
}

.mr-lg {
  margin-right: calc(var(--spacing-unit) * 8);
}

.mr-xl {
  margin-right: calc(var(--spacing-unit) * 12);
}

.mr-xxl {
  margin-right: calc(var(--spacing-unit) * 16);
}

.mr-xxxl {
  margin-right: calc(var(--spacing-unit) * 20);
}

.mx-1 {
  margin-left: calc(var(--spacing-unit) * 1);
  margin-right: calc(var(--spacing-unit) * 1);
}

.mx-2 {
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.mx-3 {
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.mx-4 {
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.mx-5 {
  margin-left: calc(var(--spacing-unit) * 5);
  margin-right: calc(var(--spacing-unit) * 5);
}

.mx-6 {
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.mx-7 {
  margin-left: calc(var(--spacing-unit) * 7);
  margin-right: calc(var(--spacing-unit) * 7);
}

.mx-8 {
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.mx-9 {
  margin-left: calc(var(--spacing-unit) * 9);
  margin-right: calc(var(--spacing-unit) * 9);
}

.mx-10 {
  margin-left: calc(var(--spacing-unit) * 10);
  margin-right: calc(var(--spacing-unit) * 10);
}

.mx-11 {
  margin-left: calc(var(--spacing-unit) * 11);
  margin-right: calc(var(--spacing-unit) * 11);
}

.mx-12 {
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.mx-13 {
  margin-left: calc(var(--spacing-unit) * 13);
  margin-right: calc(var(--spacing-unit) * 13);
}

.mx-14 {
  margin-left: calc(var(--spacing-unit) * 14);
  margin-right: calc(var(--spacing-unit) * 14);
}

.mx-15 {
  margin-left: calc(var(--spacing-unit) * 15);
  margin-right: calc(var(--spacing-unit) * 15);
}

.mx-16 {
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.mx-17 {
  margin-left: calc(var(--spacing-unit) * 17);
  margin-right: calc(var(--spacing-unit) * 17);
}

.mx-18 {
  margin-left: calc(var(--spacing-unit) * 18);
  margin-right: calc(var(--spacing-unit) * 18);
}

.mx-19 {
  margin-left: calc(var(--spacing-unit) * 19);
  margin-right: calc(var(--spacing-unit) * 19);
}

.mx-20 {
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.mx-none {
  margin-left: calc(var(--spacing-unit) * 0);
  margin-right: calc(var(--spacing-unit) * 0);
}

.mx-xxs {
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.mx-xs {
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.mx-sm {
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.mx-md {
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.mx-lg {
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.mx-xl {
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.mx-xxl {
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.mx-xxxl {
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.my-1 {
  margin-top: calc(var(--spacing-unit) * 1);
  margin-bottom: calc(var(--spacing-unit) * 1);
}

.my-2 {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.my-3 {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.my-4 {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.my-5 {
  margin-top: calc(var(--spacing-unit) * 5);
  margin-bottom: calc(var(--spacing-unit) * 5);
}

.my-6 {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.my-7 {
  margin-top: calc(var(--spacing-unit) * 7);
  margin-bottom: calc(var(--spacing-unit) * 7);
}

.my-8 {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.my-9 {
  margin-top: calc(var(--spacing-unit) * 9);
  margin-bottom: calc(var(--spacing-unit) * 9);
}

.my-10 {
  margin-top: calc(var(--spacing-unit) * 10);
  margin-bottom: calc(var(--spacing-unit) * 10);
}

.my-11 {
  margin-top: calc(var(--spacing-unit) * 11);
  margin-bottom: calc(var(--spacing-unit) * 11);
}

.my-12 {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.my-13 {
  margin-top: calc(var(--spacing-unit) * 13);
  margin-bottom: calc(var(--spacing-unit) * 13);
}

.my-14 {
  margin-top: calc(var(--spacing-unit) * 14);
  margin-bottom: calc(var(--spacing-unit) * 14);
}

.my-15 {
  margin-top: calc(var(--spacing-unit) * 15);
  margin-bottom: calc(var(--spacing-unit) * 15);
}

.my-16 {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.my-17 {
  margin-top: calc(var(--spacing-unit) * 17);
  margin-bottom: calc(var(--spacing-unit) * 17);
}

.my-18 {
  margin-top: calc(var(--spacing-unit) * 18);
  margin-bottom: calc(var(--spacing-unit) * 18);
}

.my-19 {
  margin-top: calc(var(--spacing-unit) * 19);
  margin-bottom: calc(var(--spacing-unit) * 19);
}

.my-20 {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.my-none {
  margin-top: calc(var(--spacing-unit) * 0);
  margin-bottom: calc(var(--spacing-unit) * 0);
}

.my-xxs {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.my-xs {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.my-sm {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.my-md {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.my-lg {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.my-xl {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.my-xxl {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
}

.my-xxxl {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
}

.m-1 {
  margin-top: calc(var(--spacing-unit) * 1);
  margin-bottom: calc(var(--spacing-unit) * 1);
  margin-left: calc(var(--spacing-unit) * 1);
  margin-right: calc(var(--spacing-unit) * 1);
}

.m-2 {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.m-3 {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.m-4 {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.m-5 {
  margin-top: calc(var(--spacing-unit) * 5);
  margin-bottom: calc(var(--spacing-unit) * 5);
  margin-left: calc(var(--spacing-unit) * 5);
  margin-right: calc(var(--spacing-unit) * 5);
}

.m-6 {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.m-7 {
  margin-top: calc(var(--spacing-unit) * 7);
  margin-bottom: calc(var(--spacing-unit) * 7);
  margin-left: calc(var(--spacing-unit) * 7);
  margin-right: calc(var(--spacing-unit) * 7);
}

.m-8 {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.m-9 {
  margin-top: calc(var(--spacing-unit) * 9);
  margin-bottom: calc(var(--spacing-unit) * 9);
  margin-left: calc(var(--spacing-unit) * 9);
  margin-right: calc(var(--spacing-unit) * 9);
}

.m-10 {
  margin-top: calc(var(--spacing-unit) * 10);
  margin-bottom: calc(var(--spacing-unit) * 10);
  margin-left: calc(var(--spacing-unit) * 10);
  margin-right: calc(var(--spacing-unit) * 10);
}

.m-11 {
  margin-top: calc(var(--spacing-unit) * 11);
  margin-bottom: calc(var(--spacing-unit) * 11);
  margin-left: calc(var(--spacing-unit) * 11);
  margin-right: calc(var(--spacing-unit) * 11);
}

.m-12 {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.m-13 {
  margin-top: calc(var(--spacing-unit) * 13);
  margin-bottom: calc(var(--spacing-unit) * 13);
  margin-left: calc(var(--spacing-unit) * 13);
  margin-right: calc(var(--spacing-unit) * 13);
}

.m-14 {
  margin-top: calc(var(--spacing-unit) * 14);
  margin-bottom: calc(var(--spacing-unit) * 14);
  margin-left: calc(var(--spacing-unit) * 14);
  margin-right: calc(var(--spacing-unit) * 14);
}

.m-15 {
  margin-top: calc(var(--spacing-unit) * 15);
  margin-bottom: calc(var(--spacing-unit) * 15);
  margin-left: calc(var(--spacing-unit) * 15);
  margin-right: calc(var(--spacing-unit) * 15);
}

.m-16 {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.m-17 {
  margin-top: calc(var(--spacing-unit) * 17);
  margin-bottom: calc(var(--spacing-unit) * 17);
  margin-left: calc(var(--spacing-unit) * 17);
  margin-right: calc(var(--spacing-unit) * 17);
}

.m-18 {
  margin-top: calc(var(--spacing-unit) * 18);
  margin-bottom: calc(var(--spacing-unit) * 18);
  margin-left: calc(var(--spacing-unit) * 18);
  margin-right: calc(var(--spacing-unit) * 18);
}

.m-19 {
  margin-top: calc(var(--spacing-unit) * 19);
  margin-bottom: calc(var(--spacing-unit) * 19);
  margin-left: calc(var(--spacing-unit) * 19);
  margin-right: calc(var(--spacing-unit) * 19);
}

.m-20 {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.m-none {
  margin-top: calc(var(--spacing-unit) * 0);
  margin-bottom: calc(var(--spacing-unit) * 0);
  margin-left: calc(var(--spacing-unit) * 0);
  margin-right: calc(var(--spacing-unit) * 0);
}

.m-xxs {
  margin-top: calc(var(--spacing-unit) * 2);
  margin-bottom: calc(var(--spacing-unit) * 2);
  margin-left: calc(var(--spacing-unit) * 2);
  margin-right: calc(var(--spacing-unit) * 2);
}

.m-xs {
  margin-top: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
  margin-left: calc(var(--spacing-unit) * 3);
  margin-right: calc(var(--spacing-unit) * 3);
}

.m-sm {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
  margin-left: calc(var(--spacing-unit) * 4);
  margin-right: calc(var(--spacing-unit) * 4);
}

.m-md {
  margin-top: calc(var(--spacing-unit) * 6);
  margin-bottom: calc(var(--spacing-unit) * 6);
  margin-left: calc(var(--spacing-unit) * 6);
  margin-right: calc(var(--spacing-unit) * 6);
}

.m-lg {
  margin-top: calc(var(--spacing-unit) * 8);
  margin-bottom: calc(var(--spacing-unit) * 8);
  margin-left: calc(var(--spacing-unit) * 8);
  margin-right: calc(var(--spacing-unit) * 8);
}

.m-xl {
  margin-top: calc(var(--spacing-unit) * 12);
  margin-bottom: calc(var(--spacing-unit) * 12);
  margin-left: calc(var(--spacing-unit) * 12);
  margin-right: calc(var(--spacing-unit) * 12);
}

.m-xxl {
  margin-top: calc(var(--spacing-unit) * 16);
  margin-bottom: calc(var(--spacing-unit) * 16);
  margin-left: calc(var(--spacing-unit) * 16);
  margin-right: calc(var(--spacing-unit) * 16);
}

.m-xxxl {
  margin-top: calc(var(--spacing-unit) * 20);
  margin-bottom: calc(var(--spacing-unit) * 20);
  margin-left: calc(var(--spacing-unit) * 20);
  margin-right: calc(var(--spacing-unit) * 20);
}

.pt-1 {
  padding-top: calc(var(--spacing-unit) * 1);
}

.pt-2 {
  padding-top: calc(var(--spacing-unit) * 2);
}

.pt-3 {
  padding-top: calc(var(--spacing-unit) * 3);
}

.pt-4 {
  padding-top: calc(var(--spacing-unit) * 4);
}

.pt-5 {
  padding-top: calc(var(--spacing-unit) * 5);
}

.pt-6 {
  padding-top: calc(var(--spacing-unit) * 6);
}

.pt-7 {
  padding-top: calc(var(--spacing-unit) * 7);
}

.pt-8 {
  padding-top: calc(var(--spacing-unit) * 8);
}

.pt-9 {
  padding-top: calc(var(--spacing-unit) * 9);
}

.pt-10 {
  padding-top: calc(var(--spacing-unit) * 10);
}

.pt-11 {
  padding-top: calc(var(--spacing-unit) * 11);
}

.pt-12 {
  padding-top: calc(var(--spacing-unit) * 12);
}

.pt-13 {
  padding-top: calc(var(--spacing-unit) * 13);
}

.pt-14 {
  padding-top: calc(var(--spacing-unit) * 14);
}

.pt-15 {
  padding-top: calc(var(--spacing-unit) * 15);
}

.pt-16 {
  padding-top: calc(var(--spacing-unit) * 16);
}

.pt-17 {
  padding-top: calc(var(--spacing-unit) * 17);
}

.pt-18 {
  padding-top: calc(var(--spacing-unit) * 18);
}

.pt-19 {
  padding-top: calc(var(--spacing-unit) * 19);
}

.pt-20 {
  padding-top: calc(var(--spacing-unit) * 20);
}

.pt-none {
  padding-top: calc(var(--spacing-unit) * 0);
}

.pt-xxs {
  padding-top: calc(var(--spacing-unit) * 2);
}

.pt-xs {
  padding-top: calc(var(--spacing-unit) * 3);
}

.pt-sm {
  padding-top: calc(var(--spacing-unit) * 4);
}

.pt-md {
  padding-top: calc(var(--spacing-unit) * 6);
}

.pt-lg {
  padding-top: calc(var(--spacing-unit) * 8);
}

.pt-xl {
  padding-top: calc(var(--spacing-unit) * 12);
}

.pt-xxl {
  padding-top: calc(var(--spacing-unit) * 16);
}

.pt-xxxl {
  padding-top: calc(var(--spacing-unit) * 20);
}

.pb-1 {
  padding-bottom: calc(var(--spacing-unit) * 1);
}

.pb-2 {
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.pb-3 {
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.pb-4 {
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.pb-5 {
  padding-bottom: calc(var(--spacing-unit) * 5);
}

.pb-6 {
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.pb-7 {
  padding-bottom: calc(var(--spacing-unit) * 7);
}

.pb-8 {
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.pb-9 {
  padding-bottom: calc(var(--spacing-unit) * 9);
}

.pb-10 {
  padding-bottom: calc(var(--spacing-unit) * 10);
}

.pb-11 {
  padding-bottom: calc(var(--spacing-unit) * 11);
}

.pb-12 {
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.pb-13 {
  padding-bottom: calc(var(--spacing-unit) * 13);
}

.pb-14 {
  padding-bottom: calc(var(--spacing-unit) * 14);
}

.pb-15 {
  padding-bottom: calc(var(--spacing-unit) * 15);
}

.pb-16 {
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.pb-17 {
  padding-bottom: calc(var(--spacing-unit) * 17);
}

.pb-18 {
  padding-bottom: calc(var(--spacing-unit) * 18);
}

.pb-19 {
  padding-bottom: calc(var(--spacing-unit) * 19);
}

.pb-20 {
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.pb-none {
  padding-bottom: calc(var(--spacing-unit) * 0);
}

.pb-xxs {
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.pb-xs {
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.pb-sm {
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.pb-md {
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.pb-lg {
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.pb-xl {
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.pb-xxl {
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.pb-xxxl {
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.pl-1 {
  padding-left: calc(var(--spacing-unit) * 1);
}

.pl-2 {
  padding-left: calc(var(--spacing-unit) * 2);
}

.pl-3 {
  padding-left: calc(var(--spacing-unit) * 3);
}

.pl-4 {
  padding-left: calc(var(--spacing-unit) * 4);
}

.pl-5 {
  padding-left: calc(var(--spacing-unit) * 5);
}

.pl-6 {
  padding-left: calc(var(--spacing-unit) * 6);
}

.pl-7 {
  padding-left: calc(var(--spacing-unit) * 7);
}

.pl-8 {
  padding-left: calc(var(--spacing-unit) * 8);
}

.pl-9 {
  padding-left: calc(var(--spacing-unit) * 9);
}

.pl-10 {
  padding-left: calc(var(--spacing-unit) * 10);
}

.pl-11 {
  padding-left: calc(var(--spacing-unit) * 11);
}

.pl-12 {
  padding-left: calc(var(--spacing-unit) * 12);
}

.pl-13 {
  padding-left: calc(var(--spacing-unit) * 13);
}

.pl-14 {
  padding-left: calc(var(--spacing-unit) * 14);
}

.pl-15 {
  padding-left: calc(var(--spacing-unit) * 15);
}

.pl-16 {
  padding-left: calc(var(--spacing-unit) * 16);
}

.pl-17 {
  padding-left: calc(var(--spacing-unit) * 17);
}

.pl-18 {
  padding-left: calc(var(--spacing-unit) * 18);
}

.pl-19 {
  padding-left: calc(var(--spacing-unit) * 19);
}

.pl-20 {
  padding-left: calc(var(--spacing-unit) * 20);
}

.pl-none {
  padding-left: calc(var(--spacing-unit) * 0);
}

.pl-xxs {
  padding-left: calc(var(--spacing-unit) * 2);
}

.pl-xs {
  padding-left: calc(var(--spacing-unit) * 3);
}

.pl-sm {
  padding-left: calc(var(--spacing-unit) * 4);
}

.pl-md {
  padding-left: calc(var(--spacing-unit) * 6);
}

.pl-lg {
  padding-left: calc(var(--spacing-unit) * 8);
}

.pl-xl {
  padding-left: calc(var(--spacing-unit) * 12);
}

.pl-xxl {
  padding-left: calc(var(--spacing-unit) * 16);
}

.pl-xxxl {
  padding-left: calc(var(--spacing-unit) * 20);
}

.pr-1 {
  padding-right: calc(var(--spacing-unit) * 1);
}

.pr-2 {
  padding-right: calc(var(--spacing-unit) * 2);
}

.pr-3 {
  padding-right: calc(var(--spacing-unit) * 3);
}

.pr-4 {
  padding-right: calc(var(--spacing-unit) * 4);
}

.pr-5 {
  padding-right: calc(var(--spacing-unit) * 5);
}

.pr-6 {
  padding-right: calc(var(--spacing-unit) * 6);
}

.pr-7 {
  padding-right: calc(var(--spacing-unit) * 7);
}

.pr-8 {
  padding-right: calc(var(--spacing-unit) * 8);
}

.pr-9 {
  padding-right: calc(var(--spacing-unit) * 9);
}

.pr-10 {
  padding-right: calc(var(--spacing-unit) * 10);
}

.pr-11 {
  padding-right: calc(var(--spacing-unit) * 11);
}

.pr-12 {
  padding-right: calc(var(--spacing-unit) * 12);
}

.pr-13 {
  padding-right: calc(var(--spacing-unit) * 13);
}

.pr-14 {
  padding-right: calc(var(--spacing-unit) * 14);
}

.pr-15 {
  padding-right: calc(var(--spacing-unit) * 15);
}

.pr-16 {
  padding-right: calc(var(--spacing-unit) * 16);
}

.pr-17 {
  padding-right: calc(var(--spacing-unit) * 17);
}

.pr-18 {
  padding-right: calc(var(--spacing-unit) * 18);
}

.pr-19 {
  padding-right: calc(var(--spacing-unit) * 19);
}

.pr-20 {
  padding-right: calc(var(--spacing-unit) * 20);
}

.pr-none {
  padding-right: calc(var(--spacing-unit) * 0);
}

.pr-xxs {
  padding-right: calc(var(--spacing-unit) * 2);
}

.pr-xs {
  padding-right: calc(var(--spacing-unit) * 3);
}

.pr-sm {
  padding-right: calc(var(--spacing-unit) * 4);
}

.pr-md {
  padding-right: calc(var(--spacing-unit) * 6);
}

.pr-lg {
  padding-right: calc(var(--spacing-unit) * 8);
}

.pr-xl {
  padding-right: calc(var(--spacing-unit) * 12);
}

.pr-xxl {
  padding-right: calc(var(--spacing-unit) * 16);
}

.pr-xxxl {
  padding-right: calc(var(--spacing-unit) * 20);
}

.px-1 {
  padding-left: calc(var(--spacing-unit) * 1);
  padding-right: calc(var(--spacing-unit) * 1);
}

.px-2 {
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.px-3 {
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.px-4 {
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.px-5 {
  padding-left: calc(var(--spacing-unit) * 5);
  padding-right: calc(var(--spacing-unit) * 5);
}

.px-6 {
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.px-7 {
  padding-left: calc(var(--spacing-unit) * 7);
  padding-right: calc(var(--spacing-unit) * 7);
}

.px-8 {
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.px-9 {
  padding-left: calc(var(--spacing-unit) * 9);
  padding-right: calc(var(--spacing-unit) * 9);
}

.px-10 {
  padding-left: calc(var(--spacing-unit) * 10);
  padding-right: calc(var(--spacing-unit) * 10);
}

.px-11 {
  padding-left: calc(var(--spacing-unit) * 11);
  padding-right: calc(var(--spacing-unit) * 11);
}

.px-12 {
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.px-13 {
  padding-left: calc(var(--spacing-unit) * 13);
  padding-right: calc(var(--spacing-unit) * 13);
}

.px-14 {
  padding-left: calc(var(--spacing-unit) * 14);
  padding-right: calc(var(--spacing-unit) * 14);
}

.px-15 {
  padding-left: calc(var(--spacing-unit) * 15);
  padding-right: calc(var(--spacing-unit) * 15);
}

.px-16 {
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.px-17 {
  padding-left: calc(var(--spacing-unit) * 17);
  padding-right: calc(var(--spacing-unit) * 17);
}

.px-18 {
  padding-left: calc(var(--spacing-unit) * 18);
  padding-right: calc(var(--spacing-unit) * 18);
}

.px-19 {
  padding-left: calc(var(--spacing-unit) * 19);
  padding-right: calc(var(--spacing-unit) * 19);
}

.px-20 {
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.px-none {
  padding-left: calc(var(--spacing-unit) * 0);
  padding-right: calc(var(--spacing-unit) * 0);
}

.px-xxs {
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.px-xs {
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.px-sm {
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.px-md {
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.px-lg {
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.px-xl {
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.px-xxl {
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.px-xxxl {
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.py-1 {
  padding-top: calc(var(--spacing-unit) * 1);
  padding-bottom: calc(var(--spacing-unit) * 1);
}

.py-2 {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.py-3 {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.py-4 {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.py-5 {
  padding-top: calc(var(--spacing-unit) * 5);
  padding-bottom: calc(var(--spacing-unit) * 5);
}

.py-6 {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.py-7 {
  padding-top: calc(var(--spacing-unit) * 7);
  padding-bottom: calc(var(--spacing-unit) * 7);
}

.py-8 {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.py-9 {
  padding-top: calc(var(--spacing-unit) * 9);
  padding-bottom: calc(var(--spacing-unit) * 9);
}

.py-10 {
  padding-top: calc(var(--spacing-unit) * 10);
  padding-bottom: calc(var(--spacing-unit) * 10);
}

.py-11 {
  padding-top: calc(var(--spacing-unit) * 11);
  padding-bottom: calc(var(--spacing-unit) * 11);
}

.py-12 {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.py-13 {
  padding-top: calc(var(--spacing-unit) * 13);
  padding-bottom: calc(var(--spacing-unit) * 13);
}

.py-14 {
  padding-top: calc(var(--spacing-unit) * 14);
  padding-bottom: calc(var(--spacing-unit) * 14);
}

.py-15 {
  padding-top: calc(var(--spacing-unit) * 15);
  padding-bottom: calc(var(--spacing-unit) * 15);
}

.py-16 {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.py-17 {
  padding-top: calc(var(--spacing-unit) * 17);
  padding-bottom: calc(var(--spacing-unit) * 17);
}

.py-18 {
  padding-top: calc(var(--spacing-unit) * 18);
  padding-bottom: calc(var(--spacing-unit) * 18);
}

.py-19 {
  padding-top: calc(var(--spacing-unit) * 19);
  padding-bottom: calc(var(--spacing-unit) * 19);
}

.py-20 {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.py-none {
  padding-top: calc(var(--spacing-unit) * 0);
  padding-bottom: calc(var(--spacing-unit) * 0);
}

.py-xxs {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
}

.py-xs {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
}

.py-sm {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
}

.py-md {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
}

.py-lg {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
}

.py-xl {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
}

.py-xxl {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
}

.py-xxxl {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
}

.p-1 {
  padding-top: calc(var(--spacing-unit) * 1);
  padding-bottom: calc(var(--spacing-unit) * 1);
  padding-left: calc(var(--spacing-unit) * 1);
  padding-right: calc(var(--spacing-unit) * 1);
}

.p-2 {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.p-3 {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.p-4 {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.p-5 {
  padding-top: calc(var(--spacing-unit) * 5);
  padding-bottom: calc(var(--spacing-unit) * 5);
  padding-left: calc(var(--spacing-unit) * 5);
  padding-right: calc(var(--spacing-unit) * 5);
}

.p-6 {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.p-7 {
  padding-top: calc(var(--spacing-unit) * 7);
  padding-bottom: calc(var(--spacing-unit) * 7);
  padding-left: calc(var(--spacing-unit) * 7);
  padding-right: calc(var(--spacing-unit) * 7);
}

.p-8 {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.p-9 {
  padding-top: calc(var(--spacing-unit) * 9);
  padding-bottom: calc(var(--spacing-unit) * 9);
  padding-left: calc(var(--spacing-unit) * 9);
  padding-right: calc(var(--spacing-unit) * 9);
}

.p-10 {
  padding-top: calc(var(--spacing-unit) * 10);
  padding-bottom: calc(var(--spacing-unit) * 10);
  padding-left: calc(var(--spacing-unit) * 10);
  padding-right: calc(var(--spacing-unit) * 10);
}

.p-11 {
  padding-top: calc(var(--spacing-unit) * 11);
  padding-bottom: calc(var(--spacing-unit) * 11);
  padding-left: calc(var(--spacing-unit) * 11);
  padding-right: calc(var(--spacing-unit) * 11);
}

.p-12 {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.p-13 {
  padding-top: calc(var(--spacing-unit) * 13);
  padding-bottom: calc(var(--spacing-unit) * 13);
  padding-left: calc(var(--spacing-unit) * 13);
  padding-right: calc(var(--spacing-unit) * 13);
}

.p-14 {
  padding-top: calc(var(--spacing-unit) * 14);
  padding-bottom: calc(var(--spacing-unit) * 14);
  padding-left: calc(var(--spacing-unit) * 14);
  padding-right: calc(var(--spacing-unit) * 14);
}

.p-15 {
  padding-top: calc(var(--spacing-unit) * 15);
  padding-bottom: calc(var(--spacing-unit) * 15);
  padding-left: calc(var(--spacing-unit) * 15);
  padding-right: calc(var(--spacing-unit) * 15);
}

.p-16 {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.p-17 {
  padding-top: calc(var(--spacing-unit) * 17);
  padding-bottom: calc(var(--spacing-unit) * 17);
  padding-left: calc(var(--spacing-unit) * 17);
  padding-right: calc(var(--spacing-unit) * 17);
}

.p-18 {
  padding-top: calc(var(--spacing-unit) * 18);
  padding-bottom: calc(var(--spacing-unit) * 18);
  padding-left: calc(var(--spacing-unit) * 18);
  padding-right: calc(var(--spacing-unit) * 18);
}

.p-19 {
  padding-top: calc(var(--spacing-unit) * 19);
  padding-bottom: calc(var(--spacing-unit) * 19);
  padding-left: calc(var(--spacing-unit) * 19);
  padding-right: calc(var(--spacing-unit) * 19);
}

.p-20 {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.p-none {
  padding-top: calc(var(--spacing-unit) * 0);
  padding-bottom: calc(var(--spacing-unit) * 0);
  padding-left: calc(var(--spacing-unit) * 0);
  padding-right: calc(var(--spacing-unit) * 0);
}

.p-xxs {
  padding-top: calc(var(--spacing-unit) * 2);
  padding-bottom: calc(var(--spacing-unit) * 2);
  padding-left: calc(var(--spacing-unit) * 2);
  padding-right: calc(var(--spacing-unit) * 2);
}

.p-xs {
  padding-top: calc(var(--spacing-unit) * 3);
  padding-bottom: calc(var(--spacing-unit) * 3);
  padding-left: calc(var(--spacing-unit) * 3);
  padding-right: calc(var(--spacing-unit) * 3);
}

.p-sm {
  padding-top: calc(var(--spacing-unit) * 4);
  padding-bottom: calc(var(--spacing-unit) * 4);
  padding-left: calc(var(--spacing-unit) * 4);
  padding-right: calc(var(--spacing-unit) * 4);
}

.p-md {
  padding-top: calc(var(--spacing-unit) * 6);
  padding-bottom: calc(var(--spacing-unit) * 6);
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
}

.p-lg {
  padding-top: calc(var(--spacing-unit) * 8);
  padding-bottom: calc(var(--spacing-unit) * 8);
  padding-left: calc(var(--spacing-unit) * 8);
  padding-right: calc(var(--spacing-unit) * 8);
}

.p-xl {
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
  padding-left: calc(var(--spacing-unit) * 12);
  padding-right: calc(var(--spacing-unit) * 12);
}

.p-xxl {
  padding-top: calc(var(--spacing-unit) * 16);
  padding-bottom: calc(var(--spacing-unit) * 16);
  padding-left: calc(var(--spacing-unit) * 16);
  padding-right: calc(var(--spacing-unit) * 16);
}

.p-xxxl {
  padding-top: calc(var(--spacing-unit) * 20);
  padding-bottom: calc(var(--spacing-unit) * 20);
  padding-left: calc(var(--spacing-unit) * 20);
  padding-right: calc(var(--spacing-unit) * 20);
}

.typog-d1 {
  font-family: var(--typog-d1-family);
  font-weight: var(--typog-d1-weight);
  font-style: var(--typog-d1-style);
  font-size: var(--typog-d1-size);
  line-height: var(--typog-d1-line-height);
  letter-spacing: var(--typog-d1-letter-spacing);
  -webkit-text-decoration: var(--typog-d1-text-decoration);
          text-decoration: var(--typog-d1-text-decoration);
  text-transform: var(--typog-d1-text-transform);
}

.typog-d2 {
  font-family: var(--typog-d2-family);
  font-weight: var(--typog-d2-weight);
  font-style: var(--typog-d2-style);
  font-size: var(--typog-d2-size);
  line-height: var(--typog-d2-line-height);
  letter-spacing: var(--typog-d2-letter-spacing);
  -webkit-text-decoration: var(--typog-d2-text-decoration);
          text-decoration: var(--typog-d2-text-decoration);
  text-transform: var(--typog-d2-text-transform);
}

.typog-h1, body h1 {
  font-family: var(--typog-h1-family);
  font-weight: var(--typog-h1-weight);
  font-style: var(--typog-h1-style);
  font-size: var(--typog-h1-size);
  line-height: var(--typog-h1-line-height);
  letter-spacing: var(--typog-h1-letter-spacing);
  -webkit-text-decoration: var(--typog-h1-text-decoration);
          text-decoration: var(--typog-h1-text-decoration);
  text-transform: var(--typog-h1-text-transform);
}

.typog-h2, body h2 {
  font-family: var(--typog-h2-family);
  font-weight: var(--typog-h2-weight);
  font-style: var(--typog-h2-style);
  font-size: var(--typog-h2-size);
  line-height: var(--typog-h2-line-height);
  letter-spacing: var(--typog-h2-letter-spacing);
  -webkit-text-decoration: var(--typog-h2-text-decoration);
          text-decoration: var(--typog-h2-text-decoration);
  text-transform: var(--typog-h2-text-transform);
}

.typog-h3, body h3 {
  font-family: var(--typog-h3-family);
  font-weight: var(--typog-h3-weight);
  font-style: var(--typog-h3-style);
  font-size: var(--typog-h3-size);
  line-height: var(--typog-h3-line-height);
  letter-spacing: var(--typog-h3-letter-spacing);
  -webkit-text-decoration: var(--typog-h3-text-decoration);
          text-decoration: var(--typog-h3-text-decoration);
  text-transform: var(--typog-h3-text-transform);
}

.typog-h4, body h4 {
  font-family: var(--typog-h4-family);
  font-weight: var(--typog-h4-weight);
  font-style: var(--typog-h4-style);
  font-size: var(--typog-h4-size);
  line-height: var(--typog-h4-line-height);
  letter-spacing: var(--typog-h4-letter-spacing);
  -webkit-text-decoration: var(--typog-h4-text-decoration);
          text-decoration: var(--typog-h4-text-decoration);
  text-transform: var(--typog-h4-text-transform);
}

.typog-h5, body h5 {
  font-family: var(--typog-h5-family);
  font-weight: var(--typog-h5-weight);
  font-style: var(--typog-h5-style);
  font-size: var(--typog-h5-size);
  line-height: var(--typog-h5-line-height);
  letter-spacing: var(--typog-h5-letter-spacing);
  -webkit-text-decoration: var(--typog-h5-text-decoration);
          text-decoration: var(--typog-h5-text-decoration);
  text-transform: var(--typog-h5-text-transform);
}

.typog-h6, body h6 {
  font-family: var(--typog-h6-family);
  font-weight: var(--typog-h6-weight);
  font-style: var(--typog-h6-style);
  font-size: var(--typog-h6-size);
  line-height: var(--typog-h6-line-height);
  letter-spacing: var(--typog-h6-letter-spacing);
  -webkit-text-decoration: var(--typog-h6-text-decoration);
          text-decoration: var(--typog-h6-text-decoration);
  text-transform: var(--typog-h6-text-transform);
}

.typog-button {
  font-family: var(--typog-button-family);
  font-weight: var(--typog-button-weight);
  font-style: var(--typog-button-style);
  font-size: var(--typog-button-size);
  line-height: var(--typog-button-line-height);
  letter-spacing: var(--typog-button-letter-spacing);
  -webkit-text-decoration: var(--typog-button-text-decoration);
          text-decoration: var(--typog-button-text-decoration);
  text-transform: var(--typog-button-text-transform);
}

.typog-body-regular, .typog-body, body,
body p,
body li {
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}

.typog-body-large-link, .typog-body-large a {
  font-family: var(--typog-body-large-link-family);
  font-weight: var(--typog-body-large-link-weight);
  font-style: var(--typog-body-large-link-style);
  font-size: var(--typog-body-large-link-size);
  line-height: var(--typog-body-large-link-line-height);
  letter-spacing: var(--typog-body-large-link-letter-spacing);
  -webkit-text-decoration: var(--typog-body-large-link-text-decoration);
          text-decoration: var(--typog-body-large-link-text-decoration);
  text-transform: var(--typog-body-large-link-text-transform);
}

.typog-body-large-bold, .typog-body-large strong {
  font-family: var(--typog-body-large-bold-family);
  font-weight: var(--typog-body-large-bold-weight);
  font-style: var(--typog-body-large-bold-style);
  font-size: var(--typog-body-large-bold-size);
  line-height: var(--typog-body-large-bold-line-height);
  letter-spacing: var(--typog-body-large-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-large-bold-text-decoration);
          text-decoration: var(--typog-body-large-bold-text-decoration);
  text-transform: var(--typog-body-large-bold-text-transform);
}

.typog-body-large-regular, .typog-body-large {
  font-family: var(--typog-body-large-family);
  font-weight: var(--typog-body-large-weight);
  font-style: var(--typog-body-large-style);
  font-size: var(--typog-body-large-size);
  line-height: var(--typog-body-large-line-height);
  letter-spacing: var(--typog-body-large-letter-spacing);
  -webkit-text-decoration: var(--typog-body-large-text-decoration);
          text-decoration: var(--typog-body-large-text-decoration);
  text-transform: var(--typog-body-large-text-transform);
}

.typog-body-bold, .typog-body strong, body strong,
body p strong,
body li strong {
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
}

.typog-body-link, .typog-body a, body a,
body p a,
body li a {
  font-family: var(--typog-body-link-family);
  font-weight: var(--typog-body-link-weight);
  font-style: var(--typog-body-link-style);
  font-size: var(--typog-body-link-size);
  line-height: var(--typog-body-link-line-height);
  letter-spacing: var(--typog-body-link-letter-spacing);
  -webkit-text-decoration: var(--typog-body-link-text-decoration);
          text-decoration: var(--typog-body-link-text-decoration);
  text-transform: var(--typog-body-link-text-transform);
}
.typog-body-link:hover, .typog-body a:hover, body a:hover {
  -webkit-text-decoration: var(--typog-body-link-hover-text-decoration, none);
          text-decoration: var(--typog-body-link-hover-text-decoration, none);
}

.typog-fact {
  font-family: var(--typog-fact-family);
  font-weight: var(--typog-fact-weight);
  font-style: var(--typog-fact-style);
  font-size: var(--typog-fact-size);
  line-height: var(--typog-fact-line-height);
  letter-spacing: var(--typog-fact-letter-spacing);
  -webkit-text-decoration: var(--typog-fact-text-decoration);
          text-decoration: var(--typog-fact-text-decoration);
  text-transform: var(--typog-fact-text-transform);
}

.typog-fact-detail {
  font-family: var(--typog-fact-detail-family);
  font-weight: var(--typog-fact-detail-weight);
  font-style: var(--typog-fact-detail-style);
  font-size: var(--typog-fact-detail-size);
  line-height: var(--typog-fact-detail-line-height);
  letter-spacing: var(--typog-fact-detail-letter-spacing);
  -webkit-text-decoration: var(--typog-fact-detail-text-decoration);
          text-decoration: var(--typog-fact-detail-text-decoration);
  text-transform: var(--typog-fact-detail-text-transform);
}

.typog-caption-regular, .typog-caption {
  font-family: var(--typog-caption-regular-family);
  font-weight: var(--typog-caption-regular-weight);
  font-style: var(--typog-caption-regular-style);
  font-size: var(--typog-caption-regular-size);
  line-height: var(--typog-caption-regular-line-height);
  letter-spacing: var(--typog-caption-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-regular-text-decoration);
          text-decoration: var(--typog-caption-regular-text-decoration);
  text-transform: var(--typog-caption-regular-text-transform);
}

.typog-caption-bold, .typog-caption strong {
  font-family: var(--typog-caption-bold-family);
  font-weight: var(--typog-caption-bold-weight);
  font-style: var(--typog-caption-bold-style);
  font-size: var(--typog-caption-bold-size);
  line-height: var(--typog-caption-bold-line-height);
  letter-spacing: var(--typog-caption-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-bold-text-decoration);
          text-decoration: var(--typog-caption-bold-text-decoration);
  text-transform: var(--typog-caption-bold-text-transform);
}

.typog-caption-link, .typog-caption a {
  font-family: var(--typog-caption-link-family);
  font-weight: var(--typog-caption-link-weight);
  font-style: var(--typog-caption-link-style);
  font-size: var(--typog-caption-link-size);
  line-height: var(--typog-caption-link-line-height);
  letter-spacing: var(--typog-caption-link-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-link-text-decoration);
          text-decoration: var(--typog-caption-link-text-decoration);
  text-transform: var(--typog-caption-link-text-transform);
}
.typog-caption-link:hover, .typog-caption a:hover {
  -webkit-text-decoration: var(--typog-caption-link-hover-text-decoration, none);
          text-decoration: var(--typog-caption-link-hover-text-decoration, none);
}

.typog-menu-link {
  font-family: var(--typog-menu-link-family);
  font-weight: var(--typog-menu-link-weight);
  font-style: var(--typog-menu-link-style);
  font-size: var(--typog-menu-link-size);
  line-height: var(--typog-menu-link-line-height);
  letter-spacing: var(--typog-menu-link-letter-spacing);
  -webkit-text-decoration: var(--typog-menu-link-text-decoration);
          text-decoration: var(--typog-menu-link-text-decoration);
  text-transform: var(--typog-menu-link-text-transform);
}
.typog-menu-link:hover {
  -webkit-text-decoration: var(--typog-menu-link-hover-text-decoration, none);
          text-decoration: var(--typog-menu-link-hover-text-decoration, none);
}

.typog-menu-link-bold {
  font-family: var(--typog-menu-link-bold-family);
  font-weight: var(--typog-menu-link-bold-weight);
  font-style: var(--typog-menu-link-bold-style);
  font-size: var(--typog-menu-link-bold-size);
  line-height: var(--typog-menu-link-bold-line-height);
  letter-spacing: var(--typog-menu-link-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-menu-link-bold-text-decoration);
          text-decoration: var(--typog-menu-link-bold-text-decoration);
  text-transform: var(--typog-menu-link-bold-text-transform);
}
.typog-menu-link-bold:hover {
  -webkit-text-decoration: var(--typog-menu-link-bold-hover-text-decoration, none);
          text-decoration: var(--typog-menu-link-bold-hover-text-decoration, none);
}

.typog-secondary-menu-link {
  font-family: var(--typog-secondary-menu-link-family);
  font-weight: var(--typog-secondary-menu-link-weight);
  font-style: var(--typog-secondary-menu-link-style);
  font-size: var(--typog-secondary-menu-link-size);
  line-height: var(--typog-secondary-menu-link-line-height);
  letter-spacing: var(--typog-secondary-menu-link-letter-spacing);
  -webkit-text-decoration: var(--typog-secondary-menu-link-text-decoration);
          text-decoration: var(--typog-secondary-menu-link-text-decoration);
  text-transform: var(--typog-secondary-menu-link-text-transform);
}
.typog-secondary-menu-link:hover {
  -webkit-text-decoration: var(--typog-secondary-menu-link-hover-text-decoration, none);
          text-decoration: var(--typog-secondary-menu-link-hover-text-decoration, none);
}

.typog-header-link {
  font-family: var(--typog-header-link-family);
  font-weight: var(--typog-header-link-weight);
  font-style: var(--typog-header-link-style);
  font-size: var(--typog-header-link-size);
  line-height: var(--typog-header-link-line-height);
  letter-spacing: var(--typog-header-link-letter-spacing);
  -webkit-text-decoration: var(--typog-header-link-text-decoration);
          text-decoration: var(--typog-header-link-text-decoration);
  text-transform: var(--typog-header-link-text-transform);
}
.typog-header-link:hover {
  -webkit-text-decoration: var(--typog-header-link-hover-text-decoration, none);
          text-decoration: var(--typog-header-link-hover-text-decoration, none);
}

body {
  overflow-x: hidden;
  color: var(--neutral-800);
  -webkit-font-smoothing: antialiased;
}
body span {
  font-size: inherit;
}
body .link {
  color: var(--dg-primary-700);
  cursor: pointer;
}
body a,
body .link {
  color: var(--dg-primary-700);
  word-break: break-word;
}
body a, body a:focus, body a:active,
body .link,
body .link:focus,
body .link:active {
  text-decoration: underline;
}
body a:hover,
body .link:hover {
  text-decoration: none;
}
body a.link--standalone {
  text-decoration: underline;
}
body a.link--standalone:hover, body a.link--standalone:focus, body a.link--standalone:active {
  text-decoration: none;
}
body .font--standard {
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}
body .font--bold, body strong {
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
}
body .font--sm, body small {
  font-family: var(--typog-caption-regular-family);
  font-weight: var(--typog-caption-regular-weight);
  font-style: var(--typog-caption-regular-style);
  font-size: var(--typog-caption-regular-size);
  line-height: var(--typog-caption-regular-line-height);
  letter-spacing: var(--typog-caption-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-caption-regular-text-decoration);
          text-decoration: var(--typog-caption-regular-text-decoration);
  text-transform: var(--typog-caption-regular-text-transform);
}
body em {
  font-style: italic;
}
body.body--locked {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

@media only screen and (min-width: 1024px) {
  body.body--locked {
    height: auto;
    overflow: visible;
    position: static;
  }
}
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified

   - small screen variables fallback to medium, then large screen equivalent
   - medium screen variables fallback to large screen equivalent


   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog-[sm|md|lg]-{style}-{property}

   e.g.:

    --typog-lg-h4-family
    --typog-lg-h4-weight
    --typog-lg-h4-style
    --typog-lg-h4-size
    --typog-lg-h4-line-height
    --typog-lg-h4-letter-spacing
    --typog-lg-h4-text-decoration
    --typog-lg-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
body {
  --typog-d1-family: var(--typog-sm-d1-family, var(--typog-md-d1-family, var(--typog-lg-d1-family, var(--typog-default-heading-family))));
  --typog-d1-weight: var(--typog-sm-d1-weight, var(--typog-md-d1-weight, var(--typog-lg-d1-weight, normal)));
  --typog-d1-style: var(--typog-sm-d1-style, var(--typog-md-d1-style, var(--typog-lg-d1-style, normal)));
  --typog-d1-size: var(--typog-sm-d1-size, var(--typog-md-d1-size, var(--typog-lg-d1-size)));
  --typog-d1-line-height: var(--typog-sm-d1-line-height, var(--typog-md-d1-line-height, var(--typog-lg-d1-line-height)));
  --typog-d1-letter-spacing: var(--typog-sm-d1-letter-spacing, var(--typog-md-d1-letter-spacing, var(--typog-lg-d1-letter-spacing, 0)));
  --typog-d1-text-decoration: var(--typog-sm-d1-text-decoration, var(--typog-md-d1-text-decoration, var(--typog-lg-d1-text-decoration, none)));
  --typog-d1-text-transform: var(--typog-sm-d1-text-transform, var(--typog-md-d1-text-transform, var(--typog-lg-d1-text-transform, none)));
  --typog-d2-family: var(--typog-sm-d2-family, var(--typog-md-d2-family, var(--typog-lg-d2-family, var(--typog-default-heading-family))));
  --typog-d2-weight: var(--typog-sm-d2-weight, var(--typog-md-d2-weight, var(--typog-lg-d2-weight, normal)));
  --typog-d2-style: var(--typog-sm-d2-style, var(--typog-md-d2-style, var(--typog-lg-d2-style, normal)));
  --typog-d2-size: var(--typog-sm-d2-size, var(--typog-md-d2-size, var(--typog-lg-d2-size)));
  --typog-d2-line-height: var(--typog-sm-d2-line-height, var(--typog-md-d2-line-height, var(--typog-lg-d2-line-height)));
  --typog-d2-letter-spacing: var(--typog-sm-d2-letter-spacing, var(--typog-md-d2-letter-spacing, var(--typog-lg-d2-letter-spacing, 0)));
  --typog-d2-text-decoration: var(--typog-sm-d2-text-decoration, var(--typog-md-d2-text-decoration, var(--typog-lg-d2-text-decoration, none)));
  --typog-d2-text-transform: var(--typog-sm-d2-text-transform, var(--typog-md-d2-text-transform, var(--typog-lg-d2-text-transform, none)));
  --typog-h1-family: var(--typog-sm-h1-family, var(--typog-md-h1-family, var(--typog-lg-h1-family, var(--typog-default-heading-family))));
  --typog-h1-weight: var(--typog-sm-h1-weight, var(--typog-md-h1-weight, var(--typog-lg-h1-weight, normal)));
  --typog-h1-style: var(--typog-sm-h1-style, var(--typog-md-h1-style, var(--typog-lg-h1-style, normal)));
  --typog-h1-size: var(--typog-sm-h1-size, var(--typog-md-h1-size, var(--typog-lg-h1-size)));
  --typog-h1-line-height: var(--typog-sm-h1-line-height, var(--typog-md-h1-line-height, var(--typog-lg-h1-line-height)));
  --typog-h1-letter-spacing: var(--typog-sm-h1-letter-spacing, var(--typog-md-h1-letter-spacing, var(--typog-lg-h1-letter-spacing, 0)));
  --typog-h1-text-decoration: var(--typog-sm-h1-text-decoration, var(--typog-md-h1-text-decoration, var(--typog-lg-h1-text-decoration, none)));
  --typog-h1-text-transform: var(--typog-sm-h1-text-transform, var(--typog-md-h1-text-transform, var(--typog-lg-h1-text-transform, none)));
  --typog-h2-family: var(--typog-sm-h2-family, var(--typog-md-h2-family, var(--typog-lg-h2-family, var(--typog-default-heading-family))));
  --typog-h2-weight: var(--typog-sm-h2-weight, var(--typog-md-h2-weight, var(--typog-lg-h2-weight, normal)));
  --typog-h2-style: var(--typog-sm-h2-style, var(--typog-md-h2-style, var(--typog-lg-h2-style, normal)));
  --typog-h2-size: var(--typog-sm-h2-size, var(--typog-md-h2-size, var(--typog-lg-h2-size)));
  --typog-h2-line-height: var(--typog-sm-h2-line-height, var(--typog-md-h2-line-height, var(--typog-lg-h2-line-height)));
  --typog-h2-letter-spacing: var(--typog-sm-h2-letter-spacing, var(--typog-md-h2-letter-spacing, var(--typog-lg-h2-letter-spacing, 0)));
  --typog-h2-text-decoration: var(--typog-sm-h2-text-decoration, var(--typog-md-h2-text-decoration, var(--typog-lg-h2-text-decoration, none)));
  --typog-h2-text-transform: var(--typog-sm-h2-text-transform, var(--typog-md-h2-text-transform, var(--typog-lg-h2-text-transform, none)));
  --typog-h3-family: var(--typog-sm-h3-family, var(--typog-md-h3-family, var(--typog-lg-h3-family, var(--typog-default-heading-family))));
  --typog-h3-weight: var(--typog-sm-h3-weight, var(--typog-md-h3-weight, var(--typog-lg-h3-weight, normal)));
  --typog-h3-style: var(--typog-sm-h3-style, var(--typog-md-h3-style, var(--typog-lg-h3-style, normal)));
  --typog-h3-size: var(--typog-sm-h3-size, var(--typog-md-h3-size, var(--typog-lg-h3-size)));
  --typog-h3-line-height: var(--typog-sm-h3-line-height, var(--typog-md-h3-line-height, var(--typog-lg-h3-line-height)));
  --typog-h3-letter-spacing: var(--typog-sm-h3-letter-spacing, var(--typog-md-h3-letter-spacing, var(--typog-lg-h3-letter-spacing, 0)));
  --typog-h3-text-decoration: var(--typog-sm-h3-text-decoration, var(--typog-md-h3-text-decoration, var(--typog-lg-h3-text-decoration, none)));
  --typog-h3-text-transform: var(--typog-sm-h3-text-transform, var(--typog-md-h3-text-transform, var(--typog-lg-h3-text-transform, none)));
  --typog-h4-family: var(--typog-sm-h4-family, var(--typog-md-h4-family, var(--typog-lg-h4-family, var(--typog-default-heading-family))));
  --typog-h4-weight: var(--typog-sm-h4-weight, var(--typog-md-h4-weight, var(--typog-lg-h4-weight, normal)));
  --typog-h4-style: var(--typog-sm-h4-style, var(--typog-md-h4-style, var(--typog-lg-h4-style, normal)));
  --typog-h4-size: var(--typog-sm-h4-size, var(--typog-md-h4-size, var(--typog-lg-h4-size)));
  --typog-h4-line-height: var(--typog-sm-h4-line-height, var(--typog-md-h4-line-height, var(--typog-lg-h4-line-height)));
  --typog-h4-letter-spacing: var(--typog-sm-h4-letter-spacing, var(--typog-md-h4-letter-spacing, var(--typog-lg-h4-letter-spacing, 0)));
  --typog-h4-text-decoration: var(--typog-sm-h4-text-decoration, var(--typog-md-h4-text-decoration, var(--typog-lg-h4-text-decoration, none)));
  --typog-h4-text-transform: var(--typog-sm-h4-text-transform, var(--typog-md-h4-text-transform, var(--typog-lg-h4-text-transform, none)));
  --typog-h5-family: var(--typog-sm-h5-family, var(--typog-md-h5-family, var(--typog-lg-h5-family, var(--typog-default-heading-family))));
  --typog-h5-weight: var(--typog-sm-h5-weight, var(--typog-md-h5-weight, var(--typog-lg-h5-weight, normal)));
  --typog-h5-style: var(--typog-sm-h5-style, var(--typog-md-h5-style, var(--typog-lg-h5-style, normal)));
  --typog-h5-size: var(--typog-sm-h5-size, var(--typog-md-h5-size, var(--typog-lg-h5-size)));
  --typog-h5-line-height: var(--typog-sm-h5-line-height, var(--typog-md-h5-line-height, var(--typog-lg-h5-line-height)));
  --typog-h5-letter-spacing: var(--typog-sm-h5-letter-spacing, var(--typog-md-h5-letter-spacing, var(--typog-lg-h5-letter-spacing, 0)));
  --typog-h5-text-decoration: var(--typog-sm-h5-text-decoration, var(--typog-md-h5-text-decoration, var(--typog-lg-h5-text-decoration, none)));
  --typog-h5-text-transform: var(--typog-sm-h5-text-transform, var(--typog-md-h5-text-transform, var(--typog-lg-h5-text-transform, none)));
  --typog-h6-family: var(--typog-sm-h6-family, var(--typog-md-h6-family, var(--typog-lg-h6-family, var(--typog-default-heading-family))));
  --typog-h6-weight: var(--typog-sm-h6-weight, var(--typog-md-h6-weight, var(--typog-lg-h6-weight, normal)));
  --typog-h6-style: var(--typog-sm-h6-style, var(--typog-md-h6-style, var(--typog-lg-h6-style, normal)));
  --typog-h6-size: var(--typog-sm-h6-size, var(--typog-md-h6-size, var(--typog-lg-h6-size)));
  --typog-h6-line-height: var(--typog-sm-h6-line-height, var(--typog-md-h6-line-height, var(--typog-lg-h6-line-height)));
  --typog-h6-letter-spacing: var(--typog-sm-h6-letter-spacing, var(--typog-md-h6-letter-spacing, var(--typog-lg-h6-letter-spacing, 0)));
  --typog-h6-text-decoration: var(--typog-sm-h6-text-decoration, var(--typog-md-h6-text-decoration, var(--typog-lg-h6-text-decoration, none)));
  --typog-h6-text-transform: var(--typog-sm-h6-text-transform, var(--typog-md-h6-text-transform, var(--typog-lg-h6-text-transform, none)));
  --typog-button-family: var(--typog-sm-button-family, var(--typog-md-button-family, var(--typog-lg-button-family, var(--typog-default-body-family))));
  --typog-button-weight: var(--typog-sm-button-weight, var(--typog-md-button-weight, var(--typog-lg-button-weight, normal)));
  --typog-button-style: var(--typog-sm-button-style, var(--typog-md-button-style, var(--typog-lg-button-style, normal)));
  --typog-button-size: var(--typog-sm-button-size, var(--typog-md-button-size, var(--typog-lg-button-size)));
  --typog-button-line-height: var(--typog-sm-button-line-height, var(--typog-md-button-line-height, var(--typog-lg-button-line-height)));
  --typog-button-letter-spacing: var(--typog-sm-button-letter-spacing, var(--typog-md-button-letter-spacing, var(--typog-lg-button-letter-spacing, 0)));
  --typog-button-text-decoration: var(--typog-sm-button-text-decoration, var(--typog-md-button-text-decoration, var(--typog-lg-button-text-decoration, none)));
  --typog-button-text-transform: var(--typog-sm-button-text-transform, var(--typog-md-button-text-transform, var(--typog-lg-button-text-transform, none)));
  --typog-body-regular-family: var(--typog-sm-body-regular-family, var(--typog-md-body-regular-family, var(--typog-lg-body-regular-family, var(--typog-default-body-family))));
  --typog-body-regular-weight: var(--typog-sm-body-regular-weight, var(--typog-md-body-regular-weight, var(--typog-lg-body-regular-weight, normal)));
  --typog-body-regular-style: var(--typog-sm-body-regular-style, var(--typog-md-body-regular-style, var(--typog-lg-body-regular-style, normal)));
  --typog-body-regular-size: var(--typog-sm-body-regular-size, var(--typog-md-body-regular-size, var(--typog-lg-body-regular-size)));
  --typog-body-regular-line-height: var(--typog-sm-body-regular-line-height, var(--typog-md-body-regular-line-height, var(--typog-lg-body-regular-line-height)));
  --typog-body-regular-letter-spacing: var(--typog-sm-body-regular-letter-spacing, var(--typog-md-body-regular-letter-spacing, var(--typog-lg-body-regular-letter-spacing, 0)));
  --typog-body-regular-text-decoration: var(--typog-sm-body-regular-text-decoration, var(--typog-md-body-regular-text-decoration, var(--typog-lg-body-regular-text-decoration, none)));
  --typog-body-regular-text-transform: var(--typog-sm-body-regular-text-transform, var(--typog-md-body-regular-text-transform, var(--typog-lg-body-regular-text-transform, none)));
  --typog-body-bold-family: var(--typog-sm-body-bold-family, var(--typog-md-body-bold-family, var(--typog-lg-body-bold-family, var(--typog-default-body-family))));
  --typog-body-bold-weight: var(--typog-sm-body-bold-weight, var(--typog-md-body-bold-weight, var(--typog-lg-body-bold-weight, normal)));
  --typog-body-bold-style: var(--typog-sm-body-bold-style, var(--typog-md-body-bold-style, var(--typog-lg-body-bold-style, normal)));
  --typog-body-bold-size: var(--typog-sm-body-bold-size, var(--typog-md-body-bold-size, var(--typog-lg-body-bold-size)));
  --typog-body-bold-line-height: var(--typog-sm-body-bold-line-height, var(--typog-md-body-bold-line-height, var(--typog-lg-body-bold-line-height)));
  --typog-body-bold-letter-spacing: var(--typog-sm-body-bold-letter-spacing, var(--typog-md-body-bold-letter-spacing, var(--typog-lg-body-bold-letter-spacing, 0)));
  --typog-body-bold-text-decoration: var(--typog-sm-body-bold-text-decoration, var(--typog-md-body-bold-text-decoration, var(--typog-lg-body-bold-text-decoration, none)));
  --typog-body-bold-text-transform: var(--typog-sm-body-bold-text-transform, var(--typog-md-body-bold-text-transform, var(--typog-lg-body-bold-text-transform, none)));
  --typog-body-link-family: var(--typog-sm-body-link-family, var(--typog-md-body-link-family, var(--typog-lg-body-link-family, var(--typog-default-body-family))));
  --typog-body-link-weight: var(--typog-sm-body-link-weight, var(--typog-md-body-link-weight, var(--typog-lg-body-link-weight, normal)));
  --typog-body-link-style: var(--typog-sm-body-link-style, var(--typog-md-body-link-style, var(--typog-lg-body-link-style, normal)));
  --typog-body-link-size: var(--typog-sm-body-link-size, var(--typog-md-body-link-size, var(--typog-lg-body-link-size)));
  --typog-body-link-line-height: var(--typog-sm-body-link-line-height, var(--typog-md-body-link-line-height, var(--typog-lg-body-link-line-height)));
  --typog-body-link-letter-spacing: var(--typog-sm-body-link-letter-spacing, var(--typog-md-body-link-letter-spacing, var(--typog-lg-body-link-letter-spacing, 0)));
  --typog-body-link-text-decoration: var(--typog-sm-body-link-text-decoration, var(--typog-md-body-link-text-decoration, var(--typog-lg-body-link-text-decoration, none)));
  --typog-body-link-text-transform: var(--typog-sm-body-link-text-transform, var(--typog-md-body-link-text-transform, var(--typog-lg-body-link-text-transform, none)));
  --typog-body-large-family: var(--typog-sm-body-large-family, var(--typog-md-body-large-family, var(--typog-lg-body-large-family, var(--typog-default-body-family))));
  --typog-body-large-weight: var(--typog-sm-body-large-weight, var(--typog-md-body-large-weight, var(--typog-lg-body-large-weight, normal)));
  --typog-body-large-style: var(--typog-sm-body-large-style, var(--typog-md-body-large-style, var(--typog-lg-body-large-style, normal)));
  --typog-body-large-size: var(--typog-sm-body-large-size, var(--typog-md-body-large-size, var(--typog-lg-body-large-size)));
  --typog-body-large-line-height: var(--typog-sm-body-large-line-height, var(--typog-md-body-large-line-height, var(--typog-lg-body-large-line-height)));
  --typog-body-large-letter-spacing: var(--typog-sm-body-large-letter-spacing, var(--typog-md-body-large-letter-spacing, var(--typog-lg-body-large-letter-spacing, 0)));
  --typog-body-large-text-decoration: var(--typog-sm-body-large-text-decoration, var(--typog-md-body-large-text-decoration, var(--typog-lg-body-large-text-decoration, none)));
  --typog-body-large-text-transform: var(--typog-sm-body-large-text-transform, var(--typog-md-body-large-text-transform, var(--typog-lg-body-large-text-transform, none)));
  --typog-body-large-bold-family: var(--typog-sm-body-large-bold-family, var(--typog-md-body-large-bold-family, var(--typog-lg-body-large-bold-family, var(--typog-default-body-family))));
  --typog-body-large-bold-weight: var(--typog-sm-body-large-bold-weight, var(--typog-md-body-large-bold-weight, var(--typog-lg-body-large-bold-weight, normal)));
  --typog-body-large-bold-style: var(--typog-sm-body-large-bold-style, var(--typog-md-body-large-bold-style, var(--typog-lg-body-large-bold-style, normal)));
  --typog-body-large-bold-size: var(--typog-sm-body-large-bold-size, var(--typog-md-body-large-bold-size, var(--typog-lg-body-large-bold-size)));
  --typog-body-large-bold-line-height: var(--typog-sm-body-large-bold-line-height, var(--typog-md-body-large-bold-line-height, var(--typog-lg-body-large-bold-line-height)));
  --typog-body-large-bold-letter-spacing: var(--typog-sm-body-large-bold-letter-spacing, var(--typog-md-body-large-bold-letter-spacing, var(--typog-lg-body-large-bold-letter-spacing, 0)));
  --typog-body-large-bold-text-decoration: var(--typog-sm-body-large-bold-text-decoration, var(--typog-md-body-large-bold-text-decoration, var(--typog-lg-body-large-bold-text-decoration, none)));
  --typog-body-large-bold-text-transform: var(--typog-sm-body-large-bold-text-transform, var(--typog-md-body-large-bold-text-transform, var(--typog-lg-body-large-bold-text-transform, none)));
  --typog-body-large-link-family: var(--typog-sm-body-large-link-family, var(--typog-md-body-large-link-family, var(--typog-lg-body-large-link-family, var(--typog-default-body-family))));
  --typog-body-large-link-weight: var(--typog-sm-body-large-link-weight, var(--typog-md-body-large-link-weight, var(--typog-lg-body-large-link-weight, normal)));
  --typog-body-large-link-style: var(--typog-sm-body-large-link-style, var(--typog-md-body-large-link-style, var(--typog-lg-body-large-link-style, normal)));
  --typog-body-large-link-size: var(--typog-sm-body-large-link-size, var(--typog-md-body-large-link-size, var(--typog-lg-body-large-link-size)));
  --typog-body-large-link-line-height: var(--typog-sm-body-large-link-line-height, var(--typog-md-body-large-link-line-height, var(--typog-lg-body-large-link-line-height)));
  --typog-body-large-link-letter-spacing: var(--typog-sm-body-large-link-letter-spacing, var(--typog-md-body-large-link-letter-spacing, var(--typog-lg-body-large-link-letter-spacing, 0)));
  --typog-body-large-link-text-decoration: var(--typog-sm-body-large-link-text-decoration, var(--typog-md-body-large-link-text-decoration, var(--typog-lg-body-large-link-text-decoration, none)));
  --typog-body-large-link-text-transform: var(--typog-sm-body-large-link-text-transform, var(--typog-md-body-large-link-text-transform, var(--typog-lg-body-large-link-text-transform, none)));
  --typog-caption-regular-family: var(--typog-sm-caption-regular-family, var(--typog-md-caption-regular-family, var(--typog-lg-caption-regular-family, var(--typog-default-body-family))));
  --typog-caption-regular-weight: var(--typog-sm-caption-regular-weight, var(--typog-md-caption-regular-weight, var(--typog-lg-caption-regular-weight, normal)));
  --typog-caption-regular-style: var(--typog-sm-caption-regular-style, var(--typog-md-caption-regular-style, var(--typog-lg-caption-regular-style, normal)));
  --typog-caption-regular-size: var(--typog-sm-caption-regular-size, var(--typog-md-caption-regular-size, var(--typog-lg-caption-regular-size)));
  --typog-caption-regular-line-height: var(--typog-sm-caption-regular-line-height, var(--typog-md-caption-regular-line-height, var(--typog-lg-caption-regular-line-height)));
  --typog-caption-regular-letter-spacing: var(--typog-sm-caption-regular-letter-spacing, var(--typog-md-caption-regular-letter-spacing, var(--typog-lg-caption-regular-letter-spacing, 0)));
  --typog-caption-regular-text-decoration: var(--typog-sm-caption-regular-text-decoration, var(--typog-md-caption-regular-text-decoration, var(--typog-lg-caption-regular-text-decoration, none)));
  --typog-caption-regular-text-transform: var(--typog-sm-caption-regular-text-transform, var(--typog-md-caption-regular-text-transform, var(--typog-lg-caption-regular-text-transform, none)));
  --typog-caption-bold-family: var(--typog-sm-caption-bold-family, var(--typog-md-caption-bold-family, var(--typog-lg-caption-bold-family, var(--typog-default-body-family))));
  --typog-caption-bold-weight: var(--typog-sm-caption-bold-weight, var(--typog-md-caption-bold-weight, var(--typog-lg-caption-bold-weight, normal)));
  --typog-caption-bold-style: var(--typog-sm-caption-bold-style, var(--typog-md-caption-bold-style, var(--typog-lg-caption-bold-style, normal)));
  --typog-caption-bold-size: var(--typog-sm-caption-bold-size, var(--typog-md-caption-bold-size, var(--typog-lg-caption-bold-size)));
  --typog-caption-bold-line-height: var(--typog-sm-caption-bold-line-height, var(--typog-md-caption-bold-line-height, var(--typog-lg-caption-bold-line-height)));
  --typog-caption-bold-letter-spacing: var(--typog-sm-caption-bold-letter-spacing, var(--typog-md-caption-bold-letter-spacing, var(--typog-lg-caption-bold-letter-spacing, 0)));
  --typog-caption-bold-text-decoration: var(--typog-sm-caption-bold-text-decoration, var(--typog-md-caption-bold-text-decoration, var(--typog-lg-caption-bold-text-decoration, none)));
  --typog-caption-bold-text-transform: var(--typog-sm-caption-bold-text-transform, var(--typog-md-caption-bold-text-transform, var(--typog-lg-caption-bold-text-transform, none)));
  --typog-caption-link-family: var(--typog-sm-caption-link-family, var(--typog-md-caption-link-family, var(--typog-lg-caption-link-family, var(--typog-default-body-family))));
  --typog-caption-link-weight: var(--typog-sm-caption-link-weight, var(--typog-md-caption-link-weight, var(--typog-lg-caption-link-weight, normal)));
  --typog-caption-link-style: var(--typog-sm-caption-link-style, var(--typog-md-caption-link-style, var(--typog-lg-caption-link-style, normal)));
  --typog-caption-link-size: var(--typog-sm-caption-link-size, var(--typog-md-caption-link-size, var(--typog-lg-caption-link-size)));
  --typog-caption-link-line-height: var(--typog-sm-caption-link-line-height, var(--typog-md-caption-link-line-height, var(--typog-lg-caption-link-line-height)));
  --typog-caption-link-letter-spacing: var(--typog-sm-caption-link-letter-spacing, var(--typog-md-caption-link-letter-spacing, var(--typog-lg-caption-link-letter-spacing, 0)));
  --typog-caption-link-text-decoration: var(--typog-sm-caption-link-text-decoration, var(--typog-md-caption-link-text-decoration, var(--typog-lg-caption-link-text-decoration, none)));
  --typog-caption-link-text-transform: var(--typog-sm-caption-link-text-transform, var(--typog-md-caption-link-text-transform, var(--typog-lg-caption-link-text-transform, none)));
  --typog-menu-link-family: var(--typog-sm-menu-link-family, var(--typog-md-menu-link-family, var(--typog-lg-menu-link-family, var(--typog-default-body-family))));
  --typog-menu-link-weight: var(--typog-sm-menu-link-weight, var(--typog-md-menu-link-weight, var(--typog-lg-menu-link-weight, normal)));
  --typog-menu-link-style: var(--typog-sm-menu-link-style, var(--typog-md-menu-link-style, var(--typog-lg-menu-link-style, normal)));
  --typog-menu-link-size: var(--typog-sm-menu-link-size, var(--typog-md-menu-link-size, var(--typog-lg-menu-link-size)));
  --typog-menu-link-line-height: var(--typog-sm-menu-link-line-height, var(--typog-md-menu-link-line-height, var(--typog-lg-menu-link-line-height)));
  --typog-menu-link-letter-spacing: var(--typog-sm-menu-link-letter-spacing, var(--typog-md-menu-link-letter-spacing, var(--typog-lg-menu-link-letter-spacing, 0)));
  --typog-menu-link-text-decoration: var(--typog-sm-menu-link-text-decoration, var(--typog-md-menu-link-text-decoration, var(--typog-lg-menu-link-text-decoration, none)));
  --typog-menu-link-text-transform: var(--typog-sm-menu-link-text-transform, var(--typog-md-menu-link-text-transform, var(--typog-lg-menu-link-text-transform, none)));
  --typog-header-link-family: var(--typog-sm-header-link-family, var(--typog-md-header-link-family, var(--typog-lg-header-link-family, var(--typog-default-body-family))));
  --typog-header-link-weight: var(--typog-sm-header-link-weight, var(--typog-md-header-link-weight, var(--typog-lg-header-link-weight, normal)));
  --typog-header-link-style: var(--typog-sm-header-link-style, var(--typog-md-header-link-style, var(--typog-lg-header-link-style, normal)));
  --typog-header-link-size: var(--typog-sm-header-link-size, var(--typog-md-header-link-size, var(--typog-lg-header-link-size)));
  --typog-header-link-line-height: var(--typog-sm-header-link-line-height, var(--typog-md-header-link-line-height, var(--typog-lg-header-link-line-height)));
  --typog-header-link-letter-spacing: var(--typog-sm-header-link-letter-spacing, var(--typog-md-header-link-letter-spacing, var(--typog-lg-header-link-letter-spacing, 0)));
  --typog-header-link-text-decoration: var(--typog-sm-header-link-text-decoration, var(--typog-md-header-link-text-decoration, var(--typog-lg-header-link-text-decoration, none)));
  --typog-header-link-text-transform: var(--typog-sm-header-link-text-transform, var(--typog-md-header-link-text-transform, var(--typog-lg-header-link-text-transform, none)));
}
@media only screen and (min-width: 768px) {
  body {
    --typog-d1-family: var(--typog-md-d1-family, var(--typog-lg-d1-family, var(--typog-default-heading-family)));
    --typog-d1-weight: var(--typog-md-d1-weight, var(--typog-lg-d1-weight, normal));
    --typog-d1-style: var(--typog-md-d1-style, var(--typog-lg-d1-style, normal));
    --typog-d1-size: var(--typog-md-d1-size, var(--typog-lg-d1-size));
    --typog-d1-line-height: var(--typog-md-d1-line-height, var(--typog-lg-d1-line-height));
    --typog-d1-letter-spacing: var(--typog-md-d1-letter-spacing, var(--typog-lg-d1-letter-spacing, 0));
    --typog-d1-text-decoration: var(--typog-md-d1-text-decoration, var(--typog-lg-d1-text-decoration, none));
    --typog-d1-text-transform: var(--typog-md-d1-text-transform, var(--typog-lg-d1-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-d1-family: var(--typog-lg-d1-family, var(--typog-default-heading-family));
    --typog-d1-weight: var(--typog-lg-d1-weight, normal);
    --typog-d1-style: var(--typog-lg-d1-style, normal);
    --typog-d1-size: var(--typog-lg-d1-size);
    --typog-d1-line-height: var(--typog-lg-d1-line-height);
    --typog-d1-letter-spacing: var(--typog-lg-d1-letter-spacing, 0);
    --typog-d1-text-decoration: var(--typog-lg-d1-text-decoration, none);
    --typog-d1-text-transform: var(--typog-lg-d1-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-d2-family: var(--typog-md-d2-family, var(--typog-lg-d2-family, var(--typog-default-heading-family)));
    --typog-d2-weight: var(--typog-md-d2-weight, var(--typog-lg-d2-weight, normal));
    --typog-d2-style: var(--typog-md-d2-style, var(--typog-lg-d2-style, normal));
    --typog-d2-size: var(--typog-md-d2-size, var(--typog-lg-d2-size));
    --typog-d2-line-height: var(--typog-md-d2-line-height, var(--typog-lg-d2-line-height));
    --typog-d2-letter-spacing: var(--typog-md-d2-letter-spacing, var(--typog-lg-d2-letter-spacing, 0));
    --typog-d2-text-decoration: var(--typog-md-d2-text-decoration, var(--typog-lg-d2-text-decoration, none));
    --typog-d2-text-transform: var(--typog-md-d2-text-transform, var(--typog-lg-d2-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-d2-family: var(--typog-lg-d2-family, var(--typog-default-heading-family));
    --typog-d2-weight: var(--typog-lg-d2-weight, normal);
    --typog-d2-style: var(--typog-lg-d2-style, normal);
    --typog-d2-size: var(--typog-lg-d2-size);
    --typog-d2-line-height: var(--typog-lg-d2-line-height);
    --typog-d2-letter-spacing: var(--typog-lg-d2-letter-spacing, 0);
    --typog-d2-text-decoration: var(--typog-lg-d2-text-decoration, none);
    --typog-d2-text-transform: var(--typog-lg-d2-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h1-family: var(--typog-md-h1-family, var(--typog-lg-h1-family, var(--typog-default-heading-family)));
    --typog-h1-weight: var(--typog-md-h1-weight, var(--typog-lg-h1-weight, normal));
    --typog-h1-style: var(--typog-md-h1-style, var(--typog-lg-h1-style, normal));
    --typog-h1-size: var(--typog-md-h1-size, var(--typog-lg-h1-size));
    --typog-h1-line-height: var(--typog-md-h1-line-height, var(--typog-lg-h1-line-height));
    --typog-h1-letter-spacing: var(--typog-md-h1-letter-spacing, var(--typog-lg-h1-letter-spacing, 0));
    --typog-h1-text-decoration: var(--typog-md-h1-text-decoration, var(--typog-lg-h1-text-decoration, none));
    --typog-h1-text-transform: var(--typog-md-h1-text-transform, var(--typog-lg-h1-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h1-family: var(--typog-lg-h1-family, var(--typog-default-heading-family));
    --typog-h1-weight: var(--typog-lg-h1-weight, normal);
    --typog-h1-style: var(--typog-lg-h1-style, normal);
    --typog-h1-size: var(--typog-lg-h1-size);
    --typog-h1-line-height: var(--typog-lg-h1-line-height);
    --typog-h1-letter-spacing: var(--typog-lg-h1-letter-spacing, 0);
    --typog-h1-text-decoration: var(--typog-lg-h1-text-decoration, none);
    --typog-h1-text-transform: var(--typog-lg-h1-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h2-family: var(--typog-md-h2-family, var(--typog-lg-h2-family, var(--typog-default-heading-family)));
    --typog-h2-weight: var(--typog-md-h2-weight, var(--typog-lg-h2-weight, normal));
    --typog-h2-style: var(--typog-md-h2-style, var(--typog-lg-h2-style, normal));
    --typog-h2-size: var(--typog-md-h2-size, var(--typog-lg-h2-size));
    --typog-h2-line-height: var(--typog-md-h2-line-height, var(--typog-lg-h2-line-height));
    --typog-h2-letter-spacing: var(--typog-md-h2-letter-spacing, var(--typog-lg-h2-letter-spacing, 0));
    --typog-h2-text-decoration: var(--typog-md-h2-text-decoration, var(--typog-lg-h2-text-decoration, none));
    --typog-h2-text-transform: var(--typog-md-h2-text-transform, var(--typog-lg-h2-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h2-family: var(--typog-lg-h2-family, var(--typog-default-heading-family));
    --typog-h2-weight: var(--typog-lg-h2-weight, normal);
    --typog-h2-style: var(--typog-lg-h2-style, normal);
    --typog-h2-size: var(--typog-lg-h2-size);
    --typog-h2-line-height: var(--typog-lg-h2-line-height);
    --typog-h2-letter-spacing: var(--typog-lg-h2-letter-spacing, 0);
    --typog-h2-text-decoration: var(--typog-lg-h2-text-decoration, none);
    --typog-h2-text-transform: var(--typog-lg-h2-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h3-family: var(--typog-md-h3-family, var(--typog-lg-h3-family, var(--typog-default-heading-family)));
    --typog-h3-weight: var(--typog-md-h3-weight, var(--typog-lg-h3-weight, normal));
    --typog-h3-style: var(--typog-md-h3-style, var(--typog-lg-h3-style, normal));
    --typog-h3-size: var(--typog-md-h3-size, var(--typog-lg-h3-size));
    --typog-h3-line-height: var(--typog-md-h3-line-height, var(--typog-lg-h3-line-height));
    --typog-h3-letter-spacing: var(--typog-md-h3-letter-spacing, var(--typog-lg-h3-letter-spacing, 0));
    --typog-h3-text-decoration: var(--typog-md-h3-text-decoration, var(--typog-lg-h3-text-decoration, none));
    --typog-h3-text-transform: var(--typog-md-h3-text-transform, var(--typog-lg-h3-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h3-family: var(--typog-lg-h3-family, var(--typog-default-heading-family));
    --typog-h3-weight: var(--typog-lg-h3-weight, normal);
    --typog-h3-style: var(--typog-lg-h3-style, normal);
    --typog-h3-size: var(--typog-lg-h3-size);
    --typog-h3-line-height: var(--typog-lg-h3-line-height);
    --typog-h3-letter-spacing: var(--typog-lg-h3-letter-spacing, 0);
    --typog-h3-text-decoration: var(--typog-lg-h3-text-decoration, none);
    --typog-h3-text-transform: var(--typog-lg-h3-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h4-family: var(--typog-md-h4-family, var(--typog-lg-h4-family, var(--typog-default-heading-family)));
    --typog-h4-weight: var(--typog-md-h4-weight, var(--typog-lg-h4-weight, normal));
    --typog-h4-style: var(--typog-md-h4-style, var(--typog-lg-h4-style, normal));
    --typog-h4-size: var(--typog-md-h4-size, var(--typog-lg-h4-size));
    --typog-h4-line-height: var(--typog-md-h4-line-height, var(--typog-lg-h4-line-height));
    --typog-h4-letter-spacing: var(--typog-md-h4-letter-spacing, var(--typog-lg-h4-letter-spacing, 0));
    --typog-h4-text-decoration: var(--typog-md-h4-text-decoration, var(--typog-lg-h4-text-decoration, none));
    --typog-h4-text-transform: var(--typog-md-h4-text-transform, var(--typog-lg-h4-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h4-family: var(--typog-lg-h4-family, var(--typog-default-heading-family));
    --typog-h4-weight: var(--typog-lg-h4-weight, normal);
    --typog-h4-style: var(--typog-lg-h4-style, normal);
    --typog-h4-size: var(--typog-lg-h4-size);
    --typog-h4-line-height: var(--typog-lg-h4-line-height);
    --typog-h4-letter-spacing: var(--typog-lg-h4-letter-spacing, 0);
    --typog-h4-text-decoration: var(--typog-lg-h4-text-decoration, none);
    --typog-h4-text-transform: var(--typog-lg-h4-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h5-family: var(--typog-md-h5-family, var(--typog-lg-h5-family, var(--typog-default-heading-family)));
    --typog-h5-weight: var(--typog-md-h5-weight, var(--typog-lg-h5-weight, normal));
    --typog-h5-style: var(--typog-md-h5-style, var(--typog-lg-h5-style, normal));
    --typog-h5-size: var(--typog-md-h5-size, var(--typog-lg-h5-size));
    --typog-h5-line-height: var(--typog-md-h5-line-height, var(--typog-lg-h5-line-height));
    --typog-h5-letter-spacing: var(--typog-md-h5-letter-spacing, var(--typog-lg-h5-letter-spacing, 0));
    --typog-h5-text-decoration: var(--typog-md-h5-text-decoration, var(--typog-lg-h5-text-decoration, none));
    --typog-h5-text-transform: var(--typog-md-h5-text-transform, var(--typog-lg-h5-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h5-family: var(--typog-lg-h5-family, var(--typog-default-heading-family));
    --typog-h5-weight: var(--typog-lg-h5-weight, normal);
    --typog-h5-style: var(--typog-lg-h5-style, normal);
    --typog-h5-size: var(--typog-lg-h5-size);
    --typog-h5-line-height: var(--typog-lg-h5-line-height);
    --typog-h5-letter-spacing: var(--typog-lg-h5-letter-spacing, 0);
    --typog-h5-text-decoration: var(--typog-lg-h5-text-decoration, none);
    --typog-h5-text-transform: var(--typog-lg-h5-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-h6-family: var(--typog-md-h6-family, var(--typog-lg-h6-family, var(--typog-default-heading-family)));
    --typog-h6-weight: var(--typog-md-h6-weight, var(--typog-lg-h6-weight, normal));
    --typog-h6-style: var(--typog-md-h6-style, var(--typog-lg-h6-style, normal));
    --typog-h6-size: var(--typog-md-h6-size, var(--typog-lg-h6-size));
    --typog-h6-line-height: var(--typog-md-h6-line-height, var(--typog-lg-h6-line-height));
    --typog-h6-letter-spacing: var(--typog-md-h6-letter-spacing, var(--typog-lg-h6-letter-spacing, 0));
    --typog-h6-text-decoration: var(--typog-md-h6-text-decoration, var(--typog-lg-h6-text-decoration, none));
    --typog-h6-text-transform: var(--typog-md-h6-text-transform, var(--typog-lg-h6-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-h6-family: var(--typog-lg-h6-family, var(--typog-default-heading-family));
    --typog-h6-weight: var(--typog-lg-h6-weight, normal);
    --typog-h6-style: var(--typog-lg-h6-style, normal);
    --typog-h6-size: var(--typog-lg-h6-size);
    --typog-h6-line-height: var(--typog-lg-h6-line-height);
    --typog-h6-letter-spacing: var(--typog-lg-h6-letter-spacing, 0);
    --typog-h6-text-decoration: var(--typog-lg-h6-text-decoration, none);
    --typog-h6-text-transform: var(--typog-lg-h6-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-button-family: var(--typog-md-button-family, var(--typog-lg-button-family, var(--typog-default-body-family)));
    --typog-button-weight: var(--typog-md-button-weight, var(--typog-lg-button-weight, normal));
    --typog-button-style: var(--typog-md-button-style, var(--typog-lg-button-style, normal));
    --typog-button-size: var(--typog-md-button-size, var(--typog-lg-button-size));
    --typog-button-line-height: var(--typog-md-button-line-height, var(--typog-lg-button-line-height));
    --typog-button-letter-spacing: var(--typog-md-button-letter-spacing, var(--typog-lg-button-letter-spacing, 0));
    --typog-button-text-decoration: var(--typog-md-button-text-decoration, var(--typog-lg-button-text-decoration, none));
    --typog-button-text-transform: var(--typog-md-button-text-transform, var(--typog-lg-button-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-button-family: var(--typog-lg-button-family, var(--typog-default-body-family));
    --typog-button-weight: var(--typog-lg-button-weight, normal);
    --typog-button-style: var(--typog-lg-button-style, normal);
    --typog-button-size: var(--typog-lg-button-size);
    --typog-button-line-height: var(--typog-lg-button-line-height);
    --typog-button-letter-spacing: var(--typog-lg-button-letter-spacing, 0);
    --typog-button-text-decoration: var(--typog-lg-button-text-decoration, none);
    --typog-button-text-transform: var(--typog-lg-button-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-regular-family: var(--typog-md-body-regular-family, var(--typog-lg-body-regular-family, var(--typog-default-body-family)));
    --typog-body-regular-weight: var(--typog-md-body-regular-weight, var(--typog-lg-body-regular-weight, normal));
    --typog-body-regular-style: var(--typog-md-body-regular-style, var(--typog-lg-body-regular-style, normal));
    --typog-body-regular-size: var(--typog-md-body-regular-size, var(--typog-lg-body-regular-size));
    --typog-body-regular-line-height: var(--typog-md-body-regular-line-height, var(--typog-lg-body-regular-line-height));
    --typog-body-regular-letter-spacing: var(--typog-md-body-regular-letter-spacing, var(--typog-lg-body-regular-letter-spacing, 0));
    --typog-body-regular-text-decoration: var(--typog-md-body-regular-text-decoration, var(--typog-lg-body-regular-text-decoration, none));
    --typog-body-regular-text-transform: var(--typog-md-body-regular-text-transform, var(--typog-lg-body-regular-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-regular-family: var(--typog-lg-body-regular-family, var(--typog-default-body-family));
    --typog-body-regular-weight: var(--typog-lg-body-regular-weight, normal);
    --typog-body-regular-style: var(--typog-lg-body-regular-style, normal);
    --typog-body-regular-size: var(--typog-lg-body-regular-size);
    --typog-body-regular-line-height: var(--typog-lg-body-regular-line-height);
    --typog-body-regular-letter-spacing: var(--typog-lg-body-regular-letter-spacing, 0);
    --typog-body-regular-text-decoration: var(--typog-lg-body-regular-text-decoration, none);
    --typog-body-regular-text-transform: var(--typog-lg-body-regular-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-bold-family: var(--typog-md-body-bold-family, var(--typog-lg-body-bold-family, var(--typog-default-body-family)));
    --typog-body-bold-weight: var(--typog-md-body-bold-weight, var(--typog-lg-body-bold-weight, normal));
    --typog-body-bold-style: var(--typog-md-body-bold-style, var(--typog-lg-body-bold-style, normal));
    --typog-body-bold-size: var(--typog-md-body-bold-size, var(--typog-lg-body-bold-size));
    --typog-body-bold-line-height: var(--typog-md-body-bold-line-height, var(--typog-lg-body-bold-line-height));
    --typog-body-bold-letter-spacing: var(--typog-md-body-bold-letter-spacing, var(--typog-lg-body-bold-letter-spacing, 0));
    --typog-body-bold-text-decoration: var(--typog-md-body-bold-text-decoration, var(--typog-lg-body-bold-text-decoration, none));
    --typog-body-bold-text-transform: var(--typog-md-body-bold-text-transform, var(--typog-lg-body-bold-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-bold-family: var(--typog-lg-body-bold-family, var(--typog-default-body-family));
    --typog-body-bold-weight: var(--typog-lg-body-bold-weight, normal);
    --typog-body-bold-style: var(--typog-lg-body-bold-style, normal);
    --typog-body-bold-size: var(--typog-lg-body-bold-size);
    --typog-body-bold-line-height: var(--typog-lg-body-bold-line-height);
    --typog-body-bold-letter-spacing: var(--typog-lg-body-bold-letter-spacing, 0);
    --typog-body-bold-text-decoration: var(--typog-lg-body-bold-text-decoration, none);
    --typog-body-bold-text-transform: var(--typog-lg-body-bold-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-link-family: var(--typog-md-body-link-family, var(--typog-lg-body-link-family, var(--typog-default-body-family)));
    --typog-body-link-weight: var(--typog-md-body-link-weight, var(--typog-lg-body-link-weight, normal));
    --typog-body-link-style: var(--typog-md-body-link-style, var(--typog-lg-body-link-style, normal));
    --typog-body-link-size: var(--typog-md-body-link-size, var(--typog-lg-body-link-size));
    --typog-body-link-line-height: var(--typog-md-body-link-line-height, var(--typog-lg-body-link-line-height));
    --typog-body-link-letter-spacing: var(--typog-md-body-link-letter-spacing, var(--typog-lg-body-link-letter-spacing, 0));
    --typog-body-link-text-decoration: var(--typog-md-body-link-text-decoration, var(--typog-lg-body-link-text-decoration, none));
    --typog-body-link-text-transform: var(--typog-md-body-link-text-transform, var(--typog-lg-body-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-link-family: var(--typog-lg-body-link-family, var(--typog-default-body-family));
    --typog-body-link-weight: var(--typog-lg-body-link-weight, normal);
    --typog-body-link-style: var(--typog-lg-body-link-style, normal);
    --typog-body-link-size: var(--typog-lg-body-link-size);
    --typog-body-link-line-height: var(--typog-lg-body-link-line-height);
    --typog-body-link-letter-spacing: var(--typog-lg-body-link-letter-spacing, 0);
    --typog-body-link-text-decoration: var(--typog-lg-body-link-text-decoration, none);
    --typog-body-link-text-transform: var(--typog-lg-body-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-large-family: var(--typog-md-body-large-family, var(--typog-lg-body-large-family, var(--typog-default-body-family)));
    --typog-body-large-weight: var(--typog-md-body-large-weight, var(--typog-lg-body-large-weight, normal));
    --typog-body-large-style: var(--typog-md-body-large-style, var(--typog-lg-body-large-style, normal));
    --typog-body-large-size: var(--typog-md-body-large-size, var(--typog-lg-body-large-size));
    --typog-body-large-line-height: var(--typog-md-body-large-line-height, var(--typog-lg-body-large-line-height));
    --typog-body-large-letter-spacing: var(--typog-md-body-large-letter-spacing, var(--typog-lg-body-large-letter-spacing, 0));
    --typog-body-large-text-decoration: var(--typog-md-body-large-text-decoration, var(--typog-lg-body-large-text-decoration, none));
    --typog-body-large-text-transform: var(--typog-md-body-large-text-transform, var(--typog-lg-body-large-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-large-family: var(--typog-lg-body-large-family, var(--typog-default-body-family));
    --typog-body-large-weight: var(--typog-lg-body-large-weight, normal);
    --typog-body-large-style: var(--typog-lg-body-large-style, normal);
    --typog-body-large-size: var(--typog-lg-body-large-size);
    --typog-body-large-line-height: var(--typog-lg-body-large-line-height);
    --typog-body-large-letter-spacing: var(--typog-lg-body-large-letter-spacing, 0);
    --typog-body-large-text-decoration: var(--typog-lg-body-large-text-decoration, none);
    --typog-body-large-text-transform: var(--typog-lg-body-large-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-large-bold-family: var(--typog-md-body-large-bold-family, var(--typog-lg-body-large-bold-family, var(--typog-default-body-family)));
    --typog-body-large-bold-weight: var(--typog-md-body-large-bold-weight, var(--typog-lg-body-large-bold-weight, normal));
    --typog-body-large-bold-style: var(--typog-md-body-large-bold-style, var(--typog-lg-body-large-bold-style, normal));
    --typog-body-large-bold-size: var(--typog-md-body-large-bold-size, var(--typog-lg-body-large-bold-size));
    --typog-body-large-bold-line-height: var(--typog-md-body-large-bold-line-height, var(--typog-lg-body-large-bold-line-height));
    --typog-body-large-bold-letter-spacing: var(--typog-md-body-large-bold-letter-spacing, var(--typog-lg-body-large-bold-letter-spacing, 0));
    --typog-body-large-bold-text-decoration: var(--typog-md-body-large-bold-text-decoration, var(--typog-lg-body-large-bold-text-decoration, none));
    --typog-body-large-bold-text-transform: var(--typog-md-body-large-bold-text-transform, var(--typog-lg-body-large-bold-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-large-bold-family: var(--typog-lg-body-large-bold-family, var(--typog-default-body-family));
    --typog-body-large-bold-weight: var(--typog-lg-body-large-bold-weight, normal);
    --typog-body-large-bold-style: var(--typog-lg-body-large-bold-style, normal);
    --typog-body-large-bold-size: var(--typog-lg-body-large-bold-size);
    --typog-body-large-bold-line-height: var(--typog-lg-body-large-bold-line-height);
    --typog-body-large-bold-letter-spacing: var(--typog-lg-body-large-bold-letter-spacing, 0);
    --typog-body-large-bold-text-decoration: var(--typog-lg-body-large-bold-text-decoration, none);
    --typog-body-large-bold-text-transform: var(--typog-lg-body-large-bold-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-body-large-link-family: var(--typog-md-body-large-link-family, var(--typog-lg-body-large-link-family, var(--typog-default-body-family)));
    --typog-body-large-link-weight: var(--typog-md-body-large-link-weight, var(--typog-lg-body-large-link-weight, normal));
    --typog-body-large-link-style: var(--typog-md-body-large-link-style, var(--typog-lg-body-large-link-style, normal));
    --typog-body-large-link-size: var(--typog-md-body-large-link-size, var(--typog-lg-body-large-link-size));
    --typog-body-large-link-line-height: var(--typog-md-body-large-link-line-height, var(--typog-lg-body-large-link-line-height));
    --typog-body-large-link-letter-spacing: var(--typog-md-body-large-link-letter-spacing, var(--typog-lg-body-large-link-letter-spacing, 0));
    --typog-body-large-link-text-decoration: var(--typog-md-body-large-link-text-decoration, var(--typog-lg-body-large-link-text-decoration, none));
    --typog-body-large-link-text-transform: var(--typog-md-body-large-link-text-transform, var(--typog-lg-body-large-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-body-large-link-family: var(--typog-lg-body-large-link-family, var(--typog-default-body-family));
    --typog-body-large-link-weight: var(--typog-lg-body-large-link-weight, normal);
    --typog-body-large-link-style: var(--typog-lg-body-large-link-style, normal);
    --typog-body-large-link-size: var(--typog-lg-body-large-link-size);
    --typog-body-large-link-line-height: var(--typog-lg-body-large-link-line-height);
    --typog-body-large-link-letter-spacing: var(--typog-lg-body-large-link-letter-spacing, 0);
    --typog-body-large-link-text-decoration: var(--typog-lg-body-large-link-text-decoration, none);
    --typog-body-large-link-text-transform: var(--typog-lg-body-large-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-caption-regular-family: var(--typog-md-caption-regular-family, var(--typog-lg-caption-regular-family, var(--typog-default-body-family)));
    --typog-caption-regular-weight: var(--typog-md-caption-regular-weight, var(--typog-lg-caption-regular-weight, normal));
    --typog-caption-regular-style: var(--typog-md-caption-regular-style, var(--typog-lg-caption-regular-style, normal));
    --typog-caption-regular-size: var(--typog-md-caption-regular-size, var(--typog-lg-caption-regular-size));
    --typog-caption-regular-line-height: var(--typog-md-caption-regular-line-height, var(--typog-lg-caption-regular-line-height));
    --typog-caption-regular-letter-spacing: var(--typog-md-caption-regular-letter-spacing, var(--typog-lg-caption-regular-letter-spacing, 0));
    --typog-caption-regular-text-decoration: var(--typog-md-caption-regular-text-decoration, var(--typog-lg-caption-regular-text-decoration, none));
    --typog-caption-regular-text-transform: var(--typog-md-caption-regular-text-transform, var(--typog-lg-caption-regular-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-caption-regular-family: var(--typog-lg-caption-regular-family, var(--typog-default-body-family));
    --typog-caption-regular-weight: var(--typog-lg-caption-regular-weight, normal);
    --typog-caption-regular-style: var(--typog-lg-caption-regular-style, normal);
    --typog-caption-regular-size: var(--typog-lg-caption-regular-size);
    --typog-caption-regular-line-height: var(--typog-lg-caption-regular-line-height);
    --typog-caption-regular-letter-spacing: var(--typog-lg-caption-regular-letter-spacing, 0);
    --typog-caption-regular-text-decoration: var(--typog-lg-caption-regular-text-decoration, none);
    --typog-caption-regular-text-transform: var(--typog-lg-caption-regular-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-caption-bold-family: var(--typog-md-caption-bold-family, var(--typog-lg-caption-bold-family, var(--typog-default-body-family)));
    --typog-caption-bold-weight: var(--typog-md-caption-bold-weight, var(--typog-lg-caption-bold-weight, normal));
    --typog-caption-bold-style: var(--typog-md-caption-bold-style, var(--typog-lg-caption-bold-style, normal));
    --typog-caption-bold-size: var(--typog-md-caption-bold-size, var(--typog-lg-caption-bold-size));
    --typog-caption-bold-line-height: var(--typog-md-caption-bold-line-height, var(--typog-lg-caption-bold-line-height));
    --typog-caption-bold-letter-spacing: var(--typog-md-caption-bold-letter-spacing, var(--typog-lg-caption-bold-letter-spacing, 0));
    --typog-caption-bold-text-decoration: var(--typog-md-caption-bold-text-decoration, var(--typog-lg-caption-bold-text-decoration, none));
    --typog-caption-bold-text-transform: var(--typog-md-caption-bold-text-transform, var(--typog-lg-caption-bold-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-caption-bold-family: var(--typog-lg-caption-bold-family, var(--typog-default-body-family));
    --typog-caption-bold-weight: var(--typog-lg-caption-bold-weight, normal);
    --typog-caption-bold-style: var(--typog-lg-caption-bold-style, normal);
    --typog-caption-bold-size: var(--typog-lg-caption-bold-size);
    --typog-caption-bold-line-height: var(--typog-lg-caption-bold-line-height);
    --typog-caption-bold-letter-spacing: var(--typog-lg-caption-bold-letter-spacing, 0);
    --typog-caption-bold-text-decoration: var(--typog-lg-caption-bold-text-decoration, none);
    --typog-caption-bold-text-transform: var(--typog-lg-caption-bold-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-caption-link-family: var(--typog-md-caption-link-family, var(--typog-lg-caption-link-family, var(--typog-default-body-family)));
    --typog-caption-link-weight: var(--typog-md-caption-link-weight, var(--typog-lg-caption-link-weight, normal));
    --typog-caption-link-style: var(--typog-md-caption-link-style, var(--typog-lg-caption-link-style, normal));
    --typog-caption-link-size: var(--typog-md-caption-link-size, var(--typog-lg-caption-link-size));
    --typog-caption-link-line-height: var(--typog-md-caption-link-line-height, var(--typog-lg-caption-link-line-height));
    --typog-caption-link-letter-spacing: var(--typog-md-caption-link-letter-spacing, var(--typog-lg-caption-link-letter-spacing, 0));
    --typog-caption-link-text-decoration: var(--typog-md-caption-link-text-decoration, var(--typog-lg-caption-link-text-decoration, none));
    --typog-caption-link-text-transform: var(--typog-md-caption-link-text-transform, var(--typog-lg-caption-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-caption-link-family: var(--typog-lg-caption-link-family, var(--typog-default-body-family));
    --typog-caption-link-weight: var(--typog-lg-caption-link-weight, normal);
    --typog-caption-link-style: var(--typog-lg-caption-link-style, normal);
    --typog-caption-link-size: var(--typog-lg-caption-link-size);
    --typog-caption-link-line-height: var(--typog-lg-caption-link-line-height);
    --typog-caption-link-letter-spacing: var(--typog-lg-caption-link-letter-spacing, 0);
    --typog-caption-link-text-decoration: var(--typog-lg-caption-link-text-decoration, none);
    --typog-caption-link-text-transform: var(--typog-lg-caption-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-menu-link-family: var(--typog-md-menu-link-family, var(--typog-lg-menu-link-family, var(--typog-default-body-family)));
    --typog-menu-link-weight: var(--typog-md-menu-link-weight, var(--typog-lg-menu-link-weight, normal));
    --typog-menu-link-style: var(--typog-md-menu-link-style, var(--typog-lg-menu-link-style, normal));
    --typog-menu-link-size: var(--typog-md-menu-link-size, var(--typog-lg-menu-link-size));
    --typog-menu-link-line-height: var(--typog-md-menu-link-line-height, var(--typog-lg-menu-link-line-height));
    --typog-menu-link-letter-spacing: var(--typog-md-menu-link-letter-spacing, var(--typog-lg-menu-link-letter-spacing, 0));
    --typog-menu-link-text-decoration: var(--typog-md-menu-link-text-decoration, var(--typog-lg-menu-link-text-decoration, none));
    --typog-menu-link-text-transform: var(--typog-md-menu-link-text-transform, var(--typog-lg-menu-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-menu-link-family: var(--typog-lg-menu-link-family, var(--typog-default-body-family));
    --typog-menu-link-weight: var(--typog-lg-menu-link-weight, normal);
    --typog-menu-link-style: var(--typog-lg-menu-link-style, normal);
    --typog-menu-link-size: var(--typog-lg-menu-link-size);
    --typog-menu-link-line-height: var(--typog-lg-menu-link-line-height);
    --typog-menu-link-letter-spacing: var(--typog-lg-menu-link-letter-spacing, 0);
    --typog-menu-link-text-decoration: var(--typog-lg-menu-link-text-decoration, none);
    --typog-menu-link-text-transform: var(--typog-lg-menu-link-text-transform, none);
  }
}
@media only screen and (min-width: 768px) {
  body {
    --typog-header-link-family: var(--typog-md-header-link-family, var(--typog-lg-header-link-family, var(--typog-default-body-family)));
    --typog-header-link-weight: var(--typog-md-header-link-weight, var(--typog-lg-header-link-weight, normal));
    --typog-header-link-style: var(--typog-md-header-link-style, var(--typog-lg-header-link-style, normal));
    --typog-header-link-size: var(--typog-md-header-link-size, var(--typog-lg-header-link-size));
    --typog-header-link-line-height: var(--typog-md-header-link-line-height, var(--typog-lg-header-link-line-height));
    --typog-header-link-letter-spacing: var(--typog-md-header-link-letter-spacing, var(--typog-lg-header-link-letter-spacing, 0));
    --typog-header-link-text-decoration: var(--typog-md-header-link-text-decoration, var(--typog-lg-header-link-text-decoration, none));
    --typog-header-link-text-transform: var(--typog-md-header-link-text-transform, var(--typog-lg-header-link-text-transform, none));
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --typog-header-link-family: var(--typog-lg-header-link-family, var(--typog-default-body-family));
    --typog-header-link-weight: var(--typog-lg-header-link-weight, normal);
    --typog-header-link-style: var(--typog-lg-header-link-style, normal);
    --typog-header-link-size: var(--typog-lg-header-link-size);
    --typog-header-link-line-height: var(--typog-lg-header-link-line-height);
    --typog-header-link-letter-spacing: var(--typog-lg-header-link-letter-spacing, 0);
    --typog-header-link-text-decoration: var(--typog-lg-header-link-text-decoration, none);
    --typog-header-link-text-transform: var(--typog-lg-header-link-text-transform, none);
  }
}

@font-face {
  font-family: "VAG Rounded LT Pro Bold";
  src: url('VAGRoundedLTPro-Bold.eot');
  src: url('VAGRoundedLTPro-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Bold.woff2') format("woff2"), url('VAGRoundedLTPro-Bold.woff') format("woff"), url('VAGRoundedLTPro-Bold.ttf') format("truetype"), url('VAGRoundedLTPro-Bold.svg#VAGRoundedLTPro-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro Thin";
  src: url('VAGRoundedLTPro-Thin.eot');
  src: url('VAGRoundedLTPro-Thin.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Thin.woff2') format("woff2"), url('VAGRoundedLTPro-Thin.woff') format("woff"), url('VAGRoundedLTPro-Thin.ttf') format("truetype"), url('VAGRoundedLTPro-Thin.svg#VAGRoundedLTPro-Thin') format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro Light";
  src: url('VAGRoundedLTPro-Light.eot');
  src: url('VAGRoundedLTPro-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Light.woff2') format("woff2"), url('VAGRoundedLTPro-Light.woff') format("woff"), url('VAGRoundedLTPro-Light.ttf') format("truetype"), url('VAGRoundedLTPro-Light.svg#VAGRoundedLTPro-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro Black";
  src: url('VAGRoundedLTPro-Black.eot');
  src: url('VAGRoundedLTPro-Black.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Black.woff2') format("woff2"), url('VAGRoundedLTPro-Black.woff') format("woff"), url('VAGRoundedLTPro-Black.ttf') format("truetype"), url('VAGRoundedLTPro-Black.svg#VAGRoundedLTPro-Black') format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01 Light";
  src: url('VAGRoundedW01-Light.eot');
  src: url('VAGRoundedW01-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Light.woff2') format("woff2"), url('VAGRoundedW01-Light.woff') format("woff"), url('VAGRoundedW01-Light.ttf') format("truetype"), url('VAGRoundedW01-Light.svg#VAGRoundedW01-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01 Bold";
  src: url('VAGRoundedW01-Bold.eot');
  src: url('VAGRoundedW01-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Bold.woff2') format("woff2"), url('VAGRoundedW01-Bold.woff') format("woff"), url('VAGRoundedW01-Bold.ttf') format("truetype"), url('VAGRoundedW01-Bold.svg#VAGRoundedW01-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Light";
  src: url('MuseoSans-Light.eot');
  src: url('MuseoSans-Light.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Light.woff2') format("woff2"), url('MuseoSans-Light.woff') format("woff"), url('MuseoSans-Light.ttf') format("truetype"), url('MuseoSans-Light.svg#MuseoSans-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Regular";
  src: url('MuseoSans-Regular.eot');
  src: url('MuseoSans-Regular.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Regular.woff2') format("woff2"), url('MuseoSans-Regular.woff') format("woff"), url('MuseoSans-Regular.ttf') format("truetype"), url('MuseoSans-Regular.svg#MuseoSans-Regular') format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans Bold";
  src: url('MuseoSans-Bold.eot');
  src: url('MuseoSans-Bold.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Bold.woff2') format("woff2"), url('MuseoSans-Bold.woff') format("woff"), url('MuseoSans-Bold.ttf') format("truetype"), url('MuseoSans-Bold.svg#MuseoSans-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro SemiBold";
  src: url('SourceSansPro-SemiBold.eot');
  src: url('SourceSansPro-SemiBold.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-SemiBold.woff2') format("woff2"), url('SourceSansPro-SemiBold.woff') format("woff"), url('SourceSansPro-SemiBold.ttf') format("truetype"), url('SourceSansPro-SemiBold.svg#SourceSansPro-SemiBold') format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro Regular";
  src: url('SourceSansPro-Regular.eot');
  src: url('SourceSansPro-Regular.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-Regular.woff2') format("woff2"), url('SourceSansPro-Regular.woff') format("woff"), url('SourceSansPro-Regular.ttf') format("truetype"), url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SkyTextMedium";
  src: url('sky-medium-webfont.woff2') format("woff2"), url('sky-medium-webfont.woff') format("woff");
  font-display: swap;
}
@font-face {
  font-family: "SkyTextRegular";
  src: url('sky-regular-webfont.woff2') format("woff2"), url('sky-regular-webfont.woff') format("woff");
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Bold.eot');
  src: url('VAGRoundedLTPro-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Bold.woff2') format("woff2"), url('VAGRoundedLTPro-Bold.woff') format("woff"), url('VAGRoundedLTPro-Bold.ttf') format("truetype"), url('VAGRoundedLTPro-Bold.svg#VAGRoundedLTPro-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Thin.eot');
  src: url('VAGRoundedLTPro-Thin.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Thin.woff2') format("woff2"), url('VAGRoundedLTPro-Thin.woff') format("woff"), url('VAGRoundedLTPro-Thin.ttf') format("truetype"), url('VAGRoundedLTPro-Thin.svg#VAGRoundedLTPro-Thin') format("svg");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Light.eot');
  src: url('VAGRoundedLTPro-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Light.woff2') format("woff2"), url('VAGRoundedLTPro-Light.woff') format("woff"), url('VAGRoundedLTPro-Light.ttf') format("truetype"), url('VAGRoundedLTPro-Light.svg#VAGRoundedLTPro-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded LT Pro";
  src: url('VAGRoundedLTPro-Black.eot');
  src: url('VAGRoundedLTPro-Black.eot?#iefix') format("embedded-opentype"), url('VAGRoundedLTPro-Black.woff2') format("woff2"), url('VAGRoundedLTPro-Black.woff') format("woff"), url('VAGRoundedLTPro-Black.ttf') format("truetype"), url('VAGRoundedLTPro-Black.svg#VAGRoundedLTPro-Black') format("svg");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01";
  src: url('VAGRoundedW01-Bold.eot');
  src: url('VAGRoundedW01-Bold.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Bold.woff2') format("woff2"), url('VAGRoundedW01-Bold.woff') format("woff"), url('VAGRoundedW01-Bold.ttf') format("truetype"), url('VAGRoundedW01-Bold.svg#VAGRoundedW01-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VAG Rounded W01";
  src: url('VAGRoundedW01-Light.eot');
  src: url('VAGRoundedW01-Light.eot?#iefix') format("embedded-opentype"), url('VAGRoundedW01-Light.woff2') format("woff2"), url('VAGRoundedW01-Light.woff') format("woff"), url('VAGRoundedW01-Light.ttf') format("truetype"), url('VAGRoundedW01-Light.svg#VAGRoundedW01-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Light.eot');
  src: url('MuseoSans-Light.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Light.woff2') format("woff2"), url('MuseoSans-Light.woff') format("woff"), url('MuseoSans-Light.ttf') format("truetype"), url('MuseoSans-Light.svg#MuseoSans-Light') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Regular.eot');
  src: url('MuseoSans-Regular.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Regular.woff2') format("woff2"), url('MuseoSans-Regular.woff') format("woff"), url('MuseoSans-Regular.ttf') format("truetype"), url('MuseoSans-Regular.svg#MuseoSans-Regular') format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Bold.eot');
  src: url('MuseoSans-Bold.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Bold.woff2') format("woff2"), url('MuseoSans-Bold.woff') format("woff"), url('MuseoSans-Bold.ttf') format("truetype"), url('MuseoSans-Bold.svg#MuseoSans-Bold') format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Museo Sans";
  src: url('MuseoSans-Bold.eot');
  src: url('MuseoSans-Bold.eot?#iefix') format("embedded-opentype"), url('MuseoSans-Bold.woff2') format("woff2"), url('MuseoSans-Bold.woff') format("woff"), url('MuseoSans-Bold.ttf') format("truetype"), url('MuseoSans-Bold.svg#MuseoSans-Bold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url('SourceSansPro-SemiBold.eot');
  src: url('SourceSansPro-SemiBold.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-SemiBold.woff2') format("woff2"), url('SourceSansPro-SemiBold.woff') format("woff"), url('SourceSansPro-SemiBold.ttf') format("truetype"), url('SourceSansPro-SemiBold.svg#SourceSansPro-SemiBold') format("svg");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url('SourceSansPro-Regular.eot');
  src: url('SourceSansPro-Regular.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-Regular.woff2') format("woff2"), url('SourceSansPro-Regular.woff') format("woff"), url('SourceSansPro-Regular.ttf') format("truetype"), url('SourceSansPro-Regular.svg#SourceSansPro-Regular') format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url('SourceSansPro-Bold.eot');
  src: local(""), url('SourceSansPro-Bold.eot?#iefix') format("embedded-opentype"), url('SourceSansPro-Bold.woff2') format("woff2"), url('SourceSansPro-Bold.woff') format("woff"), url('SourceSansPro-Bold.ttf') format("truetype"), url('SourceSansPro-Bold.svg#SourceSansPro') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('open-sans-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(""), url('open-sans-v18-latin-regular.eot?#iefix') format("embedded-opentype"), url('open-sans-v18-latin-regular.woff2') format("woff2"), url('open-sans-v18-latin-regular.woff') format("woff"), url('open-sans-v18-latin-regular.ttf') format("truetype"), url('open-sans-v18-latin-regular.svg#OpenSans') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('open-sans-v18-latin-600.eot'); /* IE9 Compat Modes */
  src: local(""), url('open-sans-v18-latin-600.eot?#iefix') format("embedded-opentype"), url('open-sans-v18-latin-600.woff2') format("woff2"), url('open-sans-v18-latin-600.woff') format("woff"), url('open-sans-v18-latin-600.ttf') format("truetype"), url('open-sans-v18-latin-600.svg#OpenSans') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('open-sans-v18-latin-700.eot'); /* IE9 Compat Modes */
  src: local(""), url('open-sans-v18-latin-700.eot?#iefix') format("embedded-opentype"), url('open-sans-v18-latin-700.woff2') format("woff2"), url('open-sans-v18-latin-700.woff') format("woff"), url('open-sans-v18-latin-700.ttf') format("truetype"), url('open-sans-v18-latin-700.svg#OpenSans') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-regularitalic-webfont.eot');
  src: url('smileyface-regularitalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-regularitalic-webfont.woff2') format("woff2"), url('smileyface-regularitalic-webfont.woff') format("woff"), url('smileyface-regularitalic-webfont.ttf') format("truetype"), url('smileyface-regularitalic-webfont.svg#smiley_faceitalic') format("svg");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-regular-webfont.eot');
  src: url('smileyface-regular-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-regular-webfont.woff2') format("woff2"), url('smileyface-regular-webfont.woff') format("woff"), url('smileyface-regular-webfont.ttf') format("truetype"), url('smileyface-regular-webfont.svg#smiley_faceregular') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-mediumitalic-webfont.eot');
  src: url('smileyface-mediumitalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-mediumitalic-webfont.woff2') format("woff2"), url('smileyface-mediumitalic-webfont.woff') format("woff"), url('smileyface-mediumitalic-webfont.ttf') format("truetype"), url('smileyface-mediumitalic-webfont.svg#smiley_facemedium_italic') format("svg");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-lightitalic-webfont.eot');
  src: url('smileyface-lightitalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-lightitalic-webfont.woff2') format("woff2"), url('smileyface-lightitalic-webfont.woff') format("woff"), url('smileyface-lightitalic-webfont.ttf') format("truetype"), url('smileyface-lightitalic-webfont.svg#smiley_facelight_italic') format("svg");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-medium-webfont.eot');
  src: url('smileyface-medium-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-medium-webfont.woff2') format("woff2"), url('smileyface-medium-webfont.woff') format("woff"), url('smileyface-medium-webfont.ttf') format("truetype"), url('smileyface-medium-webfont.svg#smiley_facemedium') format("svg");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-light-webfont.eot');
  src: url('smileyface-light-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-light-webfont.woff2') format("woff2"), url('smileyface-light-webfont.woff') format("woff"), url('smileyface-light-webfont.ttf') format("truetype"), url('smileyface-light-webfont.svg#smiley_facelight') format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-bolditalic-webfont.eot');
  src: url('smileyface-bolditalic-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-bolditalic-webfont.woff2') format("woff2"), url('smileyface-bolditalic-webfont.woff') format("woff"), url('smileyface-bolditalic-webfont.ttf') format("truetype"), url('smileyface-bolditalic-webfont.svg#smiley_facebold_italic') format("svg");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "smileyface";
  src: url('smileyface-bold-webfont.eot');
  src: url('smileyface-bold-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-bold-webfont.woff2') format("woff2"), url('smileyface-bold-webfont.woff') format("woff"), url('smileyface-bold-webfont.ttf') format("truetype"), url('smileyface-bold-webfont.svg#smiley_facebold') format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "smileyface_headline";
  src: url('smileyface-headline-webfont.eot');
  src: url('smileyface-headline-webfont.eot?#iefix') format("embedded-opentype"), url('smileyface-headline-webfont.woff2') format("woff2"), url('smileyface-headline-webfont.woff') format("woff"), url('smileyface-headline-webfont.ttf') format("truetype"), url('smileyface-headline-webfont.svg#smiley_faceheadline') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('inter-v3-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(""), url('inter-v3-latin-regular.eot?#iefix') format("embedded-opentype"), url('inter-v3-latin-regular.woff2') format("woff2"), url('inter-v3-latin-regular.woff') format("woff"), url('inter-v3-latin-regular.ttf') format("truetype"), url('inter-v3-latin-regular.svg#Inter') format("svg"); /* Legacy iOS */
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('inter-v3-latin-700.eot'); /* IE9 Compat Modes */
  src: local(""), url('inter-v3-latin-700.eot?#iefix') format("embedded-opentype"), url('inter-v3-latin-700.woff2') format("woff2"), url('inter-v3-latin-700.woff') format("woff"), url('inter-v3-latin-700.ttf') format("truetype"), url('inter-v3-latin-700.svg#Inter') format("svg"); /* Legacy iOS */
}
.is-hidden {
  display: none;
}

.is-visible {
  display: block;
}

.is-invisible {
  visibility: hidden;
}

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

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

.fit-parent {
  min-height: 100%;
  min-width: 100%;
}

.flex {
  display: flex;
}

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

.d-block {
  display: block;
}

.align--start {
  align-items: flex-start;
  align-content: flex-start;
}
.align--center {
  align-items: center;
  align-content: center;
}
.align--end {
  align-items: flex-end;
  align-content: flex-end;
}
.align--space-between {
  align-items: flex-start;
  align-content: space-between;
}
.align--space-around {
  align-items: flex-start;
  align-content: space-around;
}
.align--stretch {
  align-items: stretch;
  align-content: stretch;
}

.justify--start {
  justify-content: flex-start;
}
.justify--center {
  justify-content: center;
}
.justify--end {
  justify-content: flex-end;
}
.justify--space-between {
  justify-content: space-between;
}
.justify--space-around {
  justify-content: space-around;
}

.text--center {
  text-align: center;
}
.text--left {
  text-align: left;
}
.text--right {
  text-align: right;
}
.text--ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.sr-only--focusable:active, .sr-only--focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

:export {
  icons: contact-us, more-info, arrow-down, arrow-left, arrow-right, arrow-up, close, delivery, faq, hamburger, satisfaction, tick, plan, calendar, generic-appliance, disposal, installation, download, large-cross, large-tick, protection, repair, search, my-account, basket, payment-direct-debit, facebook, twitter, instagram, linkedin, alert, direct-debit-slim, lock, plus, minus, question-mark, eye, eye-blocked;
}

@font-face {
  font-family: "icomoon";
  src: url('icons.ttf?c3zd62') format("truetype"), url('icons.woff?c3zd62') format("woff"), url('icons.svg?c3zd62#icomoon') format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon {
  /* import !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--icon-size);
}
.icon--xxs {
  font-size: var(--icon-size-xxs);
}
.icon--xs {
  font-size: var(--icon-size-xs);
}
.icon--sm {
  font-size: var(--icon-size-sm);
}
.icon--md {
  font-size: var(--icon-size-md);
}
.icon--lg {
  font-size: var(--icon-size-lg);
}
.icon--xl {
  font-size: var(--icon-size-xl);
}

.icon-contact-us:before {
  content: "\e910";
}

.icon-more-info:before {
  content: "\e900";
}

.icon-arrow-down:before {
  content: "\e906";
}

.icon-arrow-left:before {
  content: "\e907";
}

.icon-arrow-right:before {
  content: "\e908";
}

.icon-arrow-up:before {
  content: "\e909";
}

.icon-close:before, .icon-error-circle:before {
  content: "\e90a";
}

.icon-delivery:before {
  content: "\e90b";
}

.icon-faq:before {
  content: "\e90c";
}

.icon-hamburger:before {
  content: "\e90d";
}

.icon-satisfaction:before {
  content: "\e90e";
}

.icon-tick:before, .icon-tick-circle:before {
  content: "\e90f";
}

.icon-plan:before {
  content: "\e971";
}

.icon-calendar:before {
  content: "\e972";
}

.icon-generic-appliance:before {
  content: "\e911";
}

.icon-disposal:before {
  content: "\e912";
}

.icon-installation:before {
  content: "\e913";
}

.icon-download:before {
  content: "\e973";
}

.icon-large-cross:before {
  content: "\e974";
}

.icon-large-tick:before {
  content: "\e975";
}

.icon-protection:before {
  content: "\e979";
}

.icon-repair:before {
  content: "\e97a";
}

.icon-search:before {
  content: "\e97b";
}

.icon-my-account:before {
  content: "\e97c";
}

.icon-basket:before {
  content: "\e97d";
}

.icon-payment-direct-debit:before {
  content: "\e970";
}

.icon-facebook:before {
  content: "\e97e";
}

.icon-twitter:before {
  content: "\e97f";
}

.icon-instagram:before {
  content: "\e981";
}

.icon-linkedin:before {
  content: "\e982";
}

.icon-alert:before {
  content: "\e914";
}

.icon-direct-debit-slim:before {
  content: "\e915";
}

.icon-lock:before {
  content: "\e916";
}

.icon-plus:before {
  content: "\e918";
}

.icon-minus:before {
  content: "\e919";
}

.icon-question-mark:before {
  content: "\e91a";
}

.icon-eye:before {
  content: "\e91b";
}

.icon-eye-blocked:before {
  content: "\e91c";
}

.icon-unavailable .path1:before {
  content: "\e901";
  color: var(--neutral-800);
}

.icon-unavailable .path2:before {
  content: "\e902";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-unavailable .path3:before {
  content: "\e903";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-info .path1:before {
  content: "\e904";
  color: var(--neutral-800);
}

.icon-info .path2:before {
  content: "\e905";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-more-info-fill .path1:before {
  content: "\e976";
  color: var(--primary-500);
}

.icon-more-info-fill .path2:before {
  content: "\e977";
  margin-left: -1em;
  color: var(--primary-contrast);
}

.icon-more-info-fill .path3:before {
  content: "\e978";
  margin-left: -1em;
  color: var(--primary-contrast);
}

/**
 * Box mixin is used to style an element as a "box like" input field - i.e. input, select, textarea etc.
 * Anything with a border that wants to be consistent
 * Adds Borders, Padding, Shadow, Constrains width - all dependent on theme variables
 */
/**
 * Use with box mixin to adjust to show focused style
 */
/**
 * Use with box mixin to adjust to show valid style
 */
/**
 * Use with box mixin to adjust to show invalid style
 */
/**
 * Use with box mixin to adjust to support a trigger being shown
 * It adds additional padding to make room for an absolutely positioned trigger.
 * Should be used on an element within an element using box-wrapper,
 * and the trigger mixin should be used on the trigger element itself
 */
/**
 * Use with box mixin to automatically add valid and invalid states based on angular forms automatic classes:
 *  - ng-touched
 *  - ng-valid
 *  - ng-invalid
 *
 * Should be added to the form control element
 * (usually :host{} on your component when implementing control value accessor)
 * $selector argument allows you to pass in the child selector for the actual component you want styles applied to
 * (i.e. the one you have added box mixin to)
 */
/**
 * Used to wrap around fields to allow triggers and validation icons to be positioned
 */
/**
 * Use on input fields and selects to combine box mixin, with focus state and placeholder pseudo element styles
 */
/**
 * Used to style icon to be used as a trigger (e.g. search, clear or down arrow)
 * Place inside an element with box-wrapper()
 * Combine with an element using box--with-trigger() to position correctly
 */
/**
 * Standard input text (i.e. input field or select)
 */
/**
 * Placeholder text used on input fields (can also be used on selects with custom implementation to emulate placeholder)
 */
/**
 * Field label
 */
/**
 * Hint text to appear next to the field
 */
/**
 * Error message text
 */
/**
 * Base mixin for validation icon (tick/cross top/right of fields)
 */
/**
 * Use with validation-icon mixin to show valid state
 */
/**
 * Use with validation-icon mixin to show invalid state
 */
/**
 * Card of tooltip in expanded state
 */
/**
 * Icon of tooltip to be shown next to field label
 */
/**
 * Radio field, no specific markup needed - use on standard <input type="radio"/>
 */
/**
 * This is a reusable select style that relies on a particular dom tree:
 *   <div class="select-wrapper">
 *     <select>...</select>
 *     <i class="icon-arrow-down"></i>
 *   </div>
 */
/**
 * This is a reusable checkbox style that relies on a particular dom tree:
 *   <${label-selector}>       <!-- i.e. <label> -->
 *     <${input-selector}/>    <!-- i.e. <input type="checkbox"/> -->
 *     <{$box-selector}>
 *       <{$icon-selector|svg-selector}/>
 *     </{$box-selector}>
 *     <{$text-selector}/>
 *   </${label-selector}>
 *
 * svg for use with this mixin:
 *    <svg width="12px" height="9px" viewBox="0 0 12 9">
 *      <polyline points="1 5 4 8 11 1"></polyline>
 *    </svg>
 *
 * box must follow input element
 *
 * "text" element can either be first or last child (before or after input for left/right align)
 *  - todo: this could be a modifier and use order
 *
 * defaults to square pass always matching selector e.g. ".checkbox" to $round-modifier to make always round
 */
/**
 * This mixin is for styling just a checkbox input - it should be applied directly to the element:
 * i.e.:
 *     input {
 *       @include checkboxfield-input(
 *         $size-large-modifier: '.checkbox_input--large',
 *         $round-modifier: '.checkbox_input--round',
 *         $invalid-modifier: '.checkbox_input--invalid',
 *         $disabled-modifier: '.checkbox_input--readonly, .checkbox_input--disabled',
 *       );
 *     }
 */
/**
 * These are some new utility classes where basic form fields are needed
 *
 * Note that these do not add validation icons or states at present
 *
 * All the files in these classes should not rely on a particular DOM structure
 * and be applied directly to individual elements.
 *
 * Please use components from the form builder library where more complete form elements are needed
 *
 */
.dg-form__label {
  color: var(--text-color--supporting);
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
}

.dg-form__field--text {
  height: auto;
  width: 100%;
  max-width: var(--max-input-width, auto);
  background: var(--input-background-color);
  border-radius: var(--input-border-radius);
  border: solid var(--input-border-width) var(--input-border-color);
  padding: var(--input-padding);
  box-shadow: var(--input-shadow);
  transition: all var(--ease-transition);
  color: var(--text-color);
  font-family: var(--typog-body-bold-family);
  font-weight: var(--typog-body-bold-weight);
  font-style: var(--typog-body-bold-style);
  font-size: var(--typog-body-bold-size);
  line-height: var(--typog-body-bold-line-height);
  letter-spacing: var(--typog-body-bold-letter-spacing);
  -webkit-text-decoration: var(--typog-body-bold-text-decoration);
          text-decoration: var(--typog-body-bold-text-decoration);
  text-transform: var(--typog-body-bold-text-transform);
  /* placeholders */
}
.dg-form__field--text:focus {
  outline-width: 2px;
  outline-color: var(--input-border-color--focus);
}
.dg-form__field--text::placeholder {
  opacity: 1; /* Firefox */
  color: var(--input-placeholder-color);
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}
.dg-form__field--text::-webkit-input-placeholder {
  color: var(--input-placeholder-color);
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  -webkit-text-decoration: var(--typog-body-regular-text-decoration);
          text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}
.dg-form__field--text:-ms-input-placeholder {
  color: var(--input-placeholder-color);
  font-family: var(--typog-body-regular-family);
  font-weight: var(--typog-body-regular-weight);
  font-style: var(--typog-body-regular-style);
  font-size: var(--typog-body-regular-size);
  line-height: var(--typog-body-regular-line-height);
  letter-spacing: var(--typog-body-regular-letter-spacing);
  text-decoration: var(--typog-body-regular-text-decoration);
  text-transform: var(--typog-body-regular-text-transform);
}

.dg-form__field--radio {
  --radio-size: 24px;
  --radio-dot-size: calc(var(--radio-size) / 2);
  --border: var(--neutral-600);
  --dot-transition: 0.3s ease;
  --dot-opacity: 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: var(--radio-size);
  width: var(--radio-size);
  min-width: var(--radio-size);
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: var(--border-width) solid var(--border);
  background: var(--user-input-selected-contrast-color);
  border-radius: 50%;
}
.dg-form__field--radio:after {
  content: "";
  display: flex;
  transition: transform var(--dot-transition), opacity var(--dot-opacity, 0.2s);
  width: var(--radio-dot-size);
  height: var(--radio-dot-size);
  border-radius: 50%;
  background: var(--user-input-selected-color);
  opacity: 0;
  transform: scale(0);
}
.dg-form__field--radio:checked {
  border-color: var(--user-input-selected-color);
}
.dg-form__field--radio:checked:after {
  --dot-opacity: 0.3s ease;
  --dot-transition: 0.6s cubic-bezier(0.2, 0.85, 0.32, 1.2);
  opacity: 1;
  transform: scale(1);
}
.dg-form__field--radio:disabled {
  border-color: var(--border);
  opacity: 0.9;
}
.dg-form__field--radio:disabled:after {
  background-color: var(--neutral-600);
}
.dg-form__field--radio:disabled, .dg-form__field--radio:disabled + label {
  cursor: not-allowed;
}
.dg-form__field--radio:focus {
  border-color: var(--user-input-selected-color);
  outline: 3px solid transparent; /* For Windows high contrast mode. */
}

/*
* Static: background-color | border-color | color | text-decoration
* Hover (optional): background-color | border-color | color | text-decoration
* Active (optional): background-color | border-color | color | text-decoration
* Focus (optional):  border-color | text-decoration
* Usage
    @include _btn(
      var(--primary-contrast),
      var(--primary-500),
      var(--primary-500),
      var(--primary-contrast),
      var(--primary-700),
      var(--primary-700)
    );
*/
.btn {
  display: flex;
  font-family: var(--typog-button-family);
  font-weight: var(--typog-button-weight);
  font-style: var(--typog-button-style);
  font-size: var(--typog-button-size);
  line-height: var(--typog-button-line-height);
  letter-spacing: var(--typog-button-letter-spacing);
  -webkit-text-decoration: var(--typog-button-text-decoration);
          text-decoration: var(--typog-button-text-decoration);
  text-transform: var(--typog-button-text-transform);
  align-items: center;
  justify-content: var(--btn-justify-content);
  text-align: var(--btn-text-align);
  border-radius: var(--btn-border-radius);
  border-style: solid;
  transition: var(--btn-transition);
  cursor: pointer;
  height: var(--btn-height);
  width: var(--btn-width, 100%);
  min-width: var(--btn-min-width-sm);
  max-width: var(--btn-max-width-sm);
  padding: var(--btn-padding);
  border-width: var(--btn-border-width);
}
@media only screen and (min-width: 576px) {
  .btn {
    min-width: var(--btn-min-width);
    max-width: var(--btn-max-width);
  }
}
.btn--small {
  height: 34px;
  max-width: 190px;
  padding: 5px 20px;
}
@media only screen and (min-width: 576px) {
  .btn--small {
    height: 44px;
  }
}
.btn--disabled, .btn:disabled {
  opacity: var(--btn-disabled-opacity);
}
.btn:disabled {
  cursor: default;
}
.btn:hover:not(.btn--disabled):not(:disabled) {
  box-shadow: var(--btn-hover-shadow);
}
.btn span.label + .icon {
  margin-left: var(--btn-icon-spacing);
}
.btn .icon + span.label {
  margin-left: var(--btn-icon-spacing);
}
.btn:active:not(:disabled) {
  transform: scale(var(--btn-active-scale));
}
.btn.btn--primary {
  color: var(--btn-primary-color);
  background-color: var(--btn-primary-background-color);
  border-color: var(--btn-primary-border-color);
  -webkit-text-decoration: var(--btn-primary-text-decoration);
          text-decoration: var(--btn-primary-text-decoration);
  --btn-text-decoration: var(--btn-primary-text-decoration);
}
.btn.btn--primary:hover:not(.btn--disabled):not(:disabled) {
  background-color: var(--btn-primary-hover-background-color);
  border-color: var(--btn-primary-hover-border-color);
  -webkit-text-decoration: var(--btn-primary-hover-text-decoration);
          text-decoration: var(--btn-primary-hover-text-decoration);
  --btn-text-decoration: var(--btn-primary-hover-text-decoration);
}
.btn.btn--primary.btn--selected, .btn.btn--primary:active {
  outline: none;
  color: var(--btn-primary-active-color);
  background-color: var(--btn-primary-active-background-color);
  border-color: var(--btn-primary-active-border-color);
  -webkit-text-decoration: var(--btn-primary-active-text-decoration);
          text-decoration: var(--btn-primary-active-text-decoration);
  --btn-text-decoration: var(--btn-primary-active-text-decoration);
}
.btn.btn--primary:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--primary:focus-visible:not(:active) {
  outline-color: var(--btn-primary-focus-border-color);
  -webkit-text-decoration: var(--btn-primary-focus-text-decoration);
          text-decoration: var(--btn-primary-focus-text-decoration);
  --btn-text-decoration: var(--btn-primary-focus-text-decoration);
}
.btn.btn--primary .btn--disabled, .btn.btn--primary:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--primary-inverted {
  color: var(--btn-primary-inverted-color);
  background-color: var(--btn-primary-inverted-background-color);
  border-color: var(--btn-primary-inverted-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-text-decoration);
          text-decoration: var(--btn-primary-inverted-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-text-decoration);
}
.btn.btn--primary-inverted:hover:not(.btn.btn--primary-inverted.btn--disabled):not(:disabled) {
  color: var(--btn-primary-inverted-hover-color);
  background-color: var(--btn-primary-inverted-hover-background-color);
  border-color: var(--btn-primary-inverted-hover-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-hover-text-decoration);
          text-decoration: var(--btn-primary-inverted-hover-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-hover-text-decoration);
}
.btn.btn--primary-inverted.btn--selected, .btn.btn--primary-inverted:active {
  outline: none;
  color: var(--btn-primary-inverted-active-color);
  background-color: var(--btn-primary-inverted-active-background-color);
  border-color: var(--btn-primary-inverted-active-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-active-text-decoration);
          text-decoration: var(--btn-primary-inverted-active-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-active-text-decoration);
}
.btn.btn--primary-inverted:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--primary-inverted:focus-visible:not(:active) {
  outline-color: var(--btn-primary-inverted-focus-border-color);
  -webkit-text-decoration: var(--btn-primary-inverted-focus-text-decoration);
          text-decoration: var(--btn-primary-inverted-focus-text-decoration);
  --btn-text-decoration: var(--btn-primary-inverted-focus-text-decoration);
}
.btn.btn--primary-inverted.btn--disabled, .btn.btn--primary-inverted:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--secondary {
  color: var(--btn-secondary-color);
  background-color: var(--btn-secondary-background-color);
  border-color: var(--btn-secondary-border-color);
  -webkit-text-decoration: var(--btn-secondary-text-decoration);
          text-decoration: var(--btn-secondary-text-decoration);
  --btn-text-decoration: var(--btn-secondary-text-decoration);
}
.btn.btn--secondary:hover:not(.btn.btn--secondary.btn--disabled):not(:disabled) {
  color: var(--btn-secondary-hover-color);
  background-color: var(--btn-secondary-hover-background-color);
  border-color: var(--btn-secondary-hover-border-color);
  -webkit-text-decoration: var(--btn-secondary-hover-text-decoration);
          text-decoration: var(--btn-secondary-hover-text-decoration);
  --btn-text-decoration: var(--btn-secondary-hover-text-decoration);
}
.btn.btn--secondary.btn--selected, .btn.btn--secondary:active {
  outline: none;
  color: var(--btn-secondary-active-color);
  background-color: var(--btn-secondary-active-background-color);
  border-color: var(--btn-secondary-active-border-color);
  -webkit-text-decoration: var(--btn-secondary-active-text-decoration);
          text-decoration: var(--btn-secondary-active-text-decoration);
  --btn-text-decoration: var(--btn-secondary-active-text-decoration);
}
.btn.btn--secondary:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--secondary:focus-visible:not(:active) {
  outline-color: var(--btn-secondary-focus-border-color);
  -webkit-text-decoration: var(--btn-secondary-focus-text-decoration);
          text-decoration: var(--btn-secondary-focus-text-decoration);
  --btn-text-decoration: var(--btn-secondary-focus-text-decoration);
}
.btn.btn--secondary.btn--disabled, .btn.btn--secondary:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--secondary-inverted {
  color: var(--btn-secondary-inverted-color);
  background-color: var(--btn-secondary-inverted-background-color);
  border-color: var(--btn-secondary-inverted-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-text-decoration);
          text-decoration: var(--btn-secondary-inverted-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-text-decoration);
}
.btn.btn--secondary-inverted:hover:not(.btn.btn--secondary-inverted.btn--disabled):not(:disabled) {
  color: var(--btn-secondary-inverted-hover-color);
  background-color: var(--btn-secondary-inverted-hover-background-color);
  border-color: var(--btn-secondary-inverted-hover-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-hover-text-decoration);
          text-decoration: var(--btn-secondary-inverted-hover-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-hover-text-decoration);
}
.btn.btn--secondary-inverted.btn--selected, .btn.btn--secondary-inverted:active {
  outline: none;
  color: var(--btn-secondary-inverted-active-color);
  background-color: var(--btn-secondary-inverted-active-background-color);
  border-color: var(--btn-secondary-inverted-active-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-active-text-decoration);
          text-decoration: var(--btn-secondary-inverted-active-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-active-text-decoration);
}
.btn.btn--secondary-inverted:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--secondary-inverted:focus-visible:not(:active) {
  outline-color: var(--btn-secondary-inverted-focus-border-color);
  -webkit-text-decoration: var(--btn-secondary-inverted-focus-text-decoration);
          text-decoration: var(--btn-secondary-inverted-focus-text-decoration);
  --btn-text-decoration: var(--btn-secondary-inverted-focus-text-decoration);
}
.btn.btn--secondary-inverted.btn--disabled, .btn.btn--secondary-inverted:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--tertiary {
  color: var(--btn-tertiary-color);
  background-color: var(--btn-tertiary-background-color);
  border-color: var(--btn-tertiary-border-color);
  -webkit-text-decoration: var(--btn-tertiary-text-decoration);
          text-decoration: var(--btn-tertiary-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-text-decoration);
}
.btn.btn--tertiary:hover:not(.btn.btn--tertiary.btn--disabled):not(:disabled) {
  color: var(--btn-tertiary-hover-color);
  background-color: var(--btn-tertiary-hover-background-color);
  border-color: var(--btn-tertiary-hover-border-color);
  -webkit-text-decoration: var(--btn-tertiary-hover-text-decoration);
          text-decoration: var(--btn-tertiary-hover-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-hover-text-decoration);
}
.btn.btn--tertiary.btn--selected, .btn.btn--tertiary:active {
  outline: none;
  color: var(--btn-tertiary-active-color);
  background-color: var(--btn-tertiary-active-background-color);
  border-color: var(--btn-tertiary-active-border-color);
  -webkit-text-decoration: var(--btn-tertiary-active-text-decoration);
          text-decoration: var(--btn-tertiary-active-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-active-text-decoration);
}
.btn.btn--tertiary:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--tertiary:focus-visible:not(:active) {
  outline-color: var(--btn-tertiary-focus-border-color);
  -webkit-text-decoration: var(--btn-tertiary-focus-text-decoration);
          text-decoration: var(--btn-tertiary-focus-text-decoration);
  --btn-text-decoration: var(--btn-tertiary-focus-text-decoration);
}
.btn.btn--tertiary.btn--disabled, .btn.btn--tertiary:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}
.btn.btn--toggle {
  color: var(--btn-toggle-color);
  background-color: var(--btn-toggle-background-color);
  border-color: var(--btn-toggle-border-color);
  -webkit-text-decoration: var(--btn-toggle-text-decoration);
          text-decoration: var(--btn-toggle-text-decoration);
  --btn-text-decoration: var(--btn-toggle-text-decoration);
}
.btn.btn--toggle:hover:not(.btn.btn--toggle.btn--disabled):not(:disabled) {
  color: var(--btn-toggle-hover-color);
  background-color: var(--btn-toggle-hover-background-color);
  border-color: var(--btn-toggle-hover-border-color);
  -webkit-text-decoration: var(--btn-toggle-hover-text-decoration);
          text-decoration: var(--btn-toggle-hover-text-decoration);
  --btn-text-decoration: var(--btn-toggle-hover-text-decoration);
}
.btn.btn--toggle.btn--selected, .btn.btn--toggle:active {
  outline: none;
  color: var(--btn-toggle-active-color);
  background-color: var(--btn-toggle-active-background-color);
  border-color: var(--btn-toggle-active-border-color);
  -webkit-text-decoration: var(--btn-toggle-active-text-decoration);
          text-decoration: var(--btn-toggle-active-text-decoration);
  --btn-text-decoration: var(--btn-toggle-active-text-decoration);
}
.btn.btn--toggle:focus:not(:focus-visible) {
  outline: none;
}
.btn.btn--toggle:focus-visible:not(:active) {
  outline-color: var(--btn-toggle-focus-border-color);
  -webkit-text-decoration: var(--btn-toggle-focus-text-decoration);
          text-decoration: var(--btn-toggle-focus-text-decoration);
  --btn-text-decoration: var(--btn-toggle-focus-text-decoration);
}
.btn.btn--toggle.btn--disabled, .btn.btn--toggle:disabled {
  opacity: var(--btn-disabled-opacity);
  cursor: default;
}

a.btn {
  display: inline-flex;
}

.form-panel--border {
  border: var(--border-width) solid var(--panel-border-color);
  background: var(--panel-bg);
  border-radius: var(--border-radius-sm);
  padding: calc(var(--spacing-unit) * 8);
}
.form-panel__title {
  margin-bottom: calc(var(--spacing-unit) * 6);
  font-family: var(--typog-h2-family);
  font-weight: var(--typog-h2-weight);
  font-style: var(--typog-h2-style);
  font-size: var(--typog-h2-size);
  line-height: var(--typog-h2-line-height);
  letter-spacing: var(--typog-h2-letter-spacing);
  -webkit-text-decoration: var(--typog-h2-text-decoration);
          text-decoration: var(--typog-h2-text-decoration);
  text-transform: var(--typog-h2-text-transform);
}

.content-box--highlighted {
  padding: 20px;
  border: var(--border-width) solid var(--section-border-color);
  border-radius: var(--box-border-radius);
  background: var(--section-bg);
  color: var(--section-text);
}
@media only screen and (min-width: 768px) {
  .content-box--highlighted {
    padding: 30px 40px;
  }
}
.content-box--highlighted.highlighted {
  border-top: solid var(--card-highlight-width) var(--accent);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body,
*[class*=theme-] {
  background: var(--theme-background);
  color: var(--theme-body);
}

h1,
h2 {
  color: var(--theme-heading);
}

.theme-background-alternative {
  --theme-background: var(--theme-background-alternative-background);
  --theme-body: var(--theme-background-alternative-body);
  --theme-heading: var(--theme-background-alternative-heading);
  --theme-icon: var(--theme-background-alternative-icon);
  --theme-emphasis: var(--theme-background-alternative-emphasis);
  --theme-border: var(--theme-background-alternative-border);
}

.theme-background {
  --theme-background: var(--theme-background-background);
  --theme-body: var(--theme-background-body);
  --theme-heading: var(--theme-background-heading);
  --theme-icon: var(--theme-background-icon);
  --theme-emphasis: var(--theme-background-emphasis);
  --theme-border: var(--theme-background-border);
}

.theme-branded-primary {
  --theme-background: var(--theme-branded-primary-background);
  --theme-body: var(--theme-branded-primary-body);
  --theme-heading: var(--theme-branded-primary-heading);
  --theme-icon: var(--theme-branded-primary-icon);
  --theme-emphasis: var(--theme-branded-primary-emphasis);
  --theme-border: var(--theme-branded-primary-border);
}

.theme-branded-secondary {
  --theme-background: var(--theme-branded-secondary-background);
  --theme-body: var(--theme-branded-secondary-body);
  --theme-heading: var(--theme-branded-secondary-heading);
  --theme-icon: var(--theme-branded-secondary-icon);
  --theme-emphasis: var(--theme-branded-secondary-emphasis);
  --theme-border: var(--theme-branded-secondary-border);
}

.theme-branded-decoration-color-1 {
  --theme-background: var(--theme-branded-decoration-color-1-background);
  --theme-body: var(--theme-branded-decoration-color-1-body);
  --theme-heading: var(--theme-branded-decoration-color-1-heading);
  --theme-icon: var(--theme-branded-decoration-color-1-icon);
  --theme-emphasis: var(--theme-branded-decoration-color-1-emphasis);
  --theme-border: var(--theme-branded-decoration-color-1-border);
}

.theme-decoration-color-1-gradient {
  --theme-background: var(--theme-decoration-color-1-gradient-background);
  --theme-body: var(--theme-decoration-color-1-gradient-body);
  --theme-heading: var(--theme-decoration-color-1-gradient-heading);
  --theme-icon: var(--theme-decoration-color-1-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-1-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-1-gradient-border);
}

.theme-decoration-color-1 {
  --theme-background: var(--theme-decoration-color-1-background);
  --theme-body: var(--theme-decoration-color-1-body);
  --theme-heading: var(--theme-decoration-color-1-heading);
  --theme-icon: var(--theme-decoration-color-1-icon);
  --theme-emphasis: var(--theme-decoration-color-1-emphasis);
  --theme-border: var(--theme-decoration-color-1-border);
}

.theme-decoration-color-1-light {
  --theme-background: var(--theme-decoration-color-1-light-background);
  --theme-body: var(--theme-decoration-color-1-light-body);
  --theme-heading: var(--theme-decoration-color-1-light-heading);
  --theme-icon: var(--theme-decoration-color-1-light-icon);
  --theme-emphasis: var(--theme-decoration-color-1-light-emphasis);
  --theme-border: var(--theme-decoration-color-1-light-border);
}

.theme-decoration-color-2-gradient {
  --theme-background: var(--theme-decoration-color-2-gradient-background);
  --theme-body: var(--theme-decoration-color-2-gradient-body);
  --theme-heading: var(--theme-decoration-color-2-gradient-heading);
  --theme-icon: var(--theme-decoration-color-2-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-2-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-2-gradient-border);
}

.theme-decoration-color-3 {
  --theme-background: var(--theme-decoration-color-3-background);
  --theme-body: var(--theme-decoration-color-3-body);
  --theme-heading: var(--theme-decoration-color-3-heading);
  --theme-icon: var(--theme-decoration-color-3-icon);
  --theme-emphasis: var(--theme-decoration-color-3-emphasis);
  --theme-border: var(--theme-decoration-color-3-border);
}

.theme-decoration-color-3-alternative {
  --theme-background: var(--theme-decoration-color-3-alternative-background);
  --theme-body: var(--theme-decoration-color-3-alternative-body);
  --theme-heading: var(--theme-decoration-color-3-alternative-heading);
  --theme-icon: var(--theme-decoration-color-3-alternative-icon);
  --theme-emphasis: var(--theme-decoration-color-3-alternative-emphasis);
  --theme-border: var(--theme-decoration-color-3-alternative-border);
}

.theme-decoration-color-3-gradient {
  --theme-background: var(--theme-decoration-color-3-gradient-background);
  --theme-body: var(--theme-decoration-color-3-gradient-body);
  --theme-heading: var(--theme-decoration-color-3-gradient-heading);
  --theme-icon: var(--theme-decoration-color-3-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-3-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-3-gradient-border);
}

.theme-decoration-color-4 {
  --theme-background: var(--theme-decoration-color-4-background);
  --theme-body: var(--theme-decoration-color-4-body);
  --theme-heading: var(--theme-decoration-color-4-heading);
  --theme-icon: var(--theme-decoration-color-4-icon);
  --theme-emphasis: var(--theme-decoration-color-4-emphasis);
  --theme-border: var(--theme-decoration-color-4-border);
}

.theme-decoration-color-4-gradient {
  --theme-background: var(--theme-decoration-color-4-gradient-background);
  --theme-body: var(--theme-decoration-color-4-gradient-body);
  --theme-heading: var(--theme-decoration-color-4-gradient-heading);
  --theme-icon: var(--theme-decoration-color-4-gradient-icon);
  --theme-emphasis: var(--theme-decoration-color-4-gradient-emphasis);
  --theme-border: var(--theme-decoration-color-4-gradient-border);
}

.theme-decoration-color-5 {
  --theme-background: var(--theme-decoration-color-5-background);
  --theme-body: var(--theme-decoration-color-5-body);
  --theme-heading: var(--theme-decoration-color-5-heading);
  --theme-icon: var(--theme-decoration-color-5-icon);
  --theme-emphasis: var(--theme-decoration-color-5-emphasis);
  --theme-border: var(--theme-decoration-color-5-border);
}

.theme-decoration-color-5-alternative {
  --theme-background: var(--theme-decoration-color-5-alternative-background);
  --theme-body: var(--theme-decoration-color-5-alternative-body);
  --theme-heading: var(--theme-decoration-color-5-alternative-heading);
  --theme-icon: var(--theme-decoration-color-5-alternative-icon);
  --theme-emphasis: var(--theme-decoration-color-5-alternative-emphasis);
  --theme-border: var(--theme-decoration-color-5-alternative-border);
}

.theme-dg-primary {
  --theme-background: var(--theme-dg-primary-background);
  --theme-body: var(--theme-dg-primary-body);
  --theme-heading: var(--theme-dg-primary-heading);
  --theme-icon: var(--theme-dg-primary-icon);
  --theme-emphasis: var(--theme-dg-primary-emphasis);
  --theme-border: var(--theme-dg-primary-border);
}

.theme-dg-primary-alternative {
  --theme-background: var(--theme-dg-primary-alternative-background);
  --theme-body: var(--theme-dg-primary-alternative-body);
  --theme-heading: var(--theme-dg-primary-alternative-heading);
  --theme-icon: var(--theme-dg-primary-alternative-icon);
  --theme-emphasis: var(--theme-dg-primary-alternative-emphasis);
  --theme-border: var(--theme-dg-primary-alternative-border);
}

.theme-dg-primary-alternative-light {
  --theme-background: var(--theme-dg-primary-alternative-light-background);
  --theme-body: var(--theme-dg-primary-alternative-light-body);
  --theme-heading: var(--theme-dg-primary-alternative-light-heading);
  --theme-icon: var(--theme-dg-primary-alternative-light-icon);
  --theme-emphasis: var(--theme-dg-primary-alternative-light-emphasis);
  --theme-border: var(--theme-dg-primary-alternative-light-border);
}

.theme-dg-primary-alternative-neutral {
  --theme-background: var(--theme-dg-primary-alternative-neutral-background);
  --theme-body: var(--theme-dg-primary-alternative-neutral-body);
  --theme-heading: var(--theme-dg-primary-alternative-neutral-heading);
  --theme-icon: var(--theme-dg-primary-alternative-neutral-icon);
  --theme-emphasis: var(--theme-dg-primary-alternative-neutral-emphasis);
  --theme-border: var(--theme-dg-primary-alternative-neutral-border);
}

.theme-dg-primary-light {
  --theme-background: var(--theme-dg-primary-light-background);
  --theme-body: var(--theme-dg-primary-light-body);
  --theme-heading: var(--theme-dg-primary-light-heading);
  --theme-icon: var(--theme-dg-primary-light-icon);
  --theme-emphasis: var(--theme-dg-primary-light-emphasis);
  --theme-border: var(--theme-dg-primary-light-border);
}

.theme-neutral {
  --theme-background: var(--theme-neutral-background);
  --theme-body: var(--theme-neutral-body);
  --theme-heading: var(--theme-neutral-heading);
  --theme-icon: var(--theme-neutral-icon);
  --theme-emphasis: var(--theme-neutral-emphasis);
  --theme-border: var(--theme-neutral-border);
}

.theme-neutral-alternative {
  --theme-background: var(--theme-neutral-alternative-background);
  --theme-body: var(--theme-neutral-alternative-body);
  --theme-heading: var(--theme-neutral-alternative-heading);
  --theme-icon: var(--theme-neutral-alternative-icon);
  --theme-emphasis: var(--theme-neutral-alternative-emphasis);
  --theme-border: var(--theme-neutral-alternative-border);
}

.theme-neutral-light {
  --theme-background: var(--theme-neutral-light-background);
  --theme-body: var(--theme-neutral-light-body);
  --theme-heading: var(--theme-neutral-light-heading);
  --theme-icon: var(--theme-neutral-light-icon);
  --theme-emphasis: var(--theme-neutral-light-emphasis);
  --theme-border: var(--theme-neutral-light-border);
}

.theme-neutral-light-alternative {
  --theme-background: var(--theme-neutral-light-alternative-background);
  --theme-body: var(--theme-neutral-light-alternative-body);
  --theme-heading: var(--theme-neutral-light-alternative-heading);
  --theme-icon: var(--theme-neutral-light-alternative-icon);
  --theme-emphasis: var(--theme-neutral-light-alternative-emphasis);
  --theme-border: var(--theme-neutral-light-alternative-border);
}

.theme-neutral-primary {
  --theme-background: var(--theme-neutral-primary-background);
  --theme-body: var(--theme-neutral-primary-body);
  --theme-heading: var(--theme-neutral-primary-heading);
  --theme-icon: var(--theme-neutral-primary-icon);
  --theme-emphasis: var(--theme-neutral-primary-emphasis);
  --theme-border: var(--theme-neutral-primary-border);
}

.theme-neutral-primary-light {
  --theme-background: var(--theme-neutral-primary-light-background);
  --theme-body: var(--theme-neutral-primary-light-body);
  --theme-heading: var(--theme-neutral-primary-light-heading);
  --theme-icon: var(--theme-neutral-primary-light-icon);
  --theme-emphasis: var(--theme-neutral-primary-light-emphasis);
  --theme-border: var(--theme-neutral-primary-light-border);
}

.theme-neutral-transparent {
  --theme-background: var(--theme-neutral-transparent-background);
  --theme-body: var(--theme-neutral-transparent-body);
  --theme-heading: var(--theme-neutral-transparent-heading);
  --theme-icon: var(--theme-neutral-transparent-icon);
  --theme-emphasis: var(--theme-neutral-transparent-emphasis);
  --theme-border: var(--theme-neutral-transparent-border);
}

.theme-neutral-transparent-alternative {
  --theme-background: var(--theme-neutral-transparent-alternative-background);
  --theme-body: var(--theme-neutral-transparent-alternative-body);
  --theme-heading: var(--theme-neutral-transparent-alternative-heading);
  --theme-icon: var(--theme-neutral-transparent-alternative-icon);
  --theme-emphasis: var(--theme-neutral-transparent-alternative-emphasis);
  --theme-border: var(--theme-neutral-transparent-alternative-border);
}

.theme-primary-alternative {
  --theme-background: var(--theme-primary-alternative-background);
  --theme-body: var(--theme-primary-alternative-body);
  --theme-heading: var(--theme-primary-alternative-heading);
  --theme-icon: var(--theme-primary-alternative-icon);
  --theme-emphasis: var(--theme-primary-alternative-emphasis);
  --theme-border: var(--theme-primary-alternative-border);
}

.theme-primary-gradient {
  --theme-background: var(--theme-primary-gradient-background);
  --theme-body: var(--theme-primary-gradient-body);
  --theme-heading: var(--theme-primary-gradient-heading);
  --theme-icon: var(--theme-primary-gradient-icon);
  --theme-emphasis: var(--theme-primary-gradient-emphasis);
  --theme-border: var(--theme-primary-gradient-border);
}

.theme-primary {
  --theme-background: var(--theme-primary-background);
  --theme-body: var(--theme-primary-body);
  --theme-heading: var(--theme-primary-heading);
  --theme-icon: var(--theme-primary-icon);
  --theme-emphasis: var(--theme-primary-emphasis);
  --theme-border: var(--theme-primary-border);
}

.theme-secondary-gradient {
  --theme-background: var(--theme-secondary-gradient-background);
  --theme-body: var(--theme-secondary-gradient-body);
  --theme-heading: var(--theme-secondary-gradient-heading);
  --theme-icon: var(--theme-secondary-gradient-icon);
  --theme-emphasis: var(--theme-secondary-gradient-emphasis);
  --theme-border: var(--theme-secondary-gradient-border);
}

.theme-promotion {
  --theme-background: var(--theme-promotion-background);
  --theme-body: var(--theme-promotion-body);
  --theme-heading: var(--theme-promotion-heading);
  --theme-icon: var(--theme-promotion-icon);
  --theme-emphasis: var(--theme-promotion-emphasis);
  --theme-border: var(--theme-promotion-border);
}

.theme-error {
  --theme-background: var(--theme-error-background);
  --theme-body: var(--theme-error-body);
  --theme-heading: var(--theme-error-heading);
  --theme-icon: var(--theme-error-icon);
  --theme-emphasis: var(--theme-error-emphasis);
  --theme-border: var(--theme-error-border);
}

.theme-error-alternative {
  --theme-background: var(--theme-error-alternative-background);
  --theme-body: var(--theme-error-alternative-body);
  --theme-heading: var(--theme-error-alternative-heading);
  --theme-icon: var(--theme-error-alternative-icon);
  --theme-emphasis: var(--theme-error-alternative-emphasis);
  --theme-border: var(--theme-error-alternative-border);
}

/**

  There are a lot of button variables here to support old, new and whitelabel styles

  Further alignment on appearance to reduce flexibility and make design system will reduce variables, and total CSS

  For example, the disabled state - recommended everyone uses opacity: 0.5 to show disabled state instead of grey
  this would remove the need for separate disabled vars

 */
/*
  Note that most new typography variables have default values at present
  this is to maintain flexibility, and preserve compatibility

  in each theme, or within your app, you should include a mixin from
  `abstracts/typography-presets`

  This will either set the variables to:
   - the new styles based on styleguide
   - the old default styles (with no dependency on legacy vars)
   - to map the old vars to the new vars

   Please see storybook for more documentation.

   There are a set of typography styles:
    d1
    h1
    h2
    h3
    h4
    h5
    h6
    body-regular
    body-bold
    body-link
    body-large
    body-large-link
    body-large-bold
    button
    caption-regular
    caption-bold
    caption-link
    menu-link
    header-link

   Each style can have variables for large screens (>=md) and small screens

   Each style has variables for:
    family
    weight
    style
    size
    line-height
    letter-spacing
    text-decoration
    text-transform

   If not specified - small screen variables fallback to large screen equivalent

   Font family vars all default to either --typog-default-heading-family (d1 & h1-h6) or --typog-default-body-family

   Other defaults:
    weight: normal
    style: normal
    letter-spacing: 0
    text-decoration: none
    text-transform: none

   Variables are defined as --typog[-sm]-{style}-{property}

   e.g.:

    --typog-h4-family
    --typog-h4-weight
    --typog-h4-style
    --typog-h4-size
    --typog-h4-line-height
    --typog-h4-letter-spacing
    --typog-h4-text-decoration
    --typog-h4-text-transform
    --typog-sm-h4-family
    --typog-sm-h4-weight
    --typog-sm-h4-style
    --typog-sm-h4-size
    --typog-sm-h4-line-height
    --typog-sm-h4-letter-spacing
    --typog-sm-h4-text-decoration
    --typog-sm-h4-text-transform

 */
body {
  --transition-duration: 0.3s;
  --transition-ease: ease-in-out;
  --transition-curve: cubic-bezier(0.42, 0, 0, 1.07);
  --ease-transition: var(--transition-duration) var(--transition-ease);
  --curve-transition: var(--transition-duration) var(--transition-curve);
  --border-width: 1px;
  --border-radius-sm: 3px;
  --border-radius-md: 3px;
  --border-radius-lg: 3px;
  --box-border-radius: var(--border-radius-lg);
  /*
    note - no new shades should be added to the color palette - this should be enough
    the allowed values are:
      - primary/secondary/warning/error/success: 200-800 (in 100 increments only)
      - tone: 100-900 where 100/900 are white/black equivalents
        (may not be exactly white or black, but these are the lightest and darkest the tones ever go in the entire application)
   */
  --primary-800: #0168b4;
  --primary-700: #0071bb;
  --primary-600: #0675cd;
  --primary-500: #0a93d3;
  --primary-400: #b3dff1;
  --primary-300: #f0f9fc;
  --neutral-900: #000000;
  --neutral-800: #111111;
  --neutral-700: #333333;
  --neutral-600: #414141;
  --neutral-500: #afafaf;
  --neutral-400: #dddddd;
  --neutral-300: #dedede;
  --neutral-200: #f6f6f6;
  --neutral-100: #ffffff;
  --primary-contrast: #ffffff;
  --accent: #663399;
  --warn: #af2c2b;
  --accept: #228415;
  --package-discount: #3b8524;
  --secondary: #919191;
  --dg-primary-100: #f4faff;
  --dg-primary-200: #e5f3ff;
  --dg-primary-300: #c8e4ff;
  --dg-primary-400: #9bcfff;
  --dg-primary-500: #2e9aff;
  --dg-primary-600: #0d77db;
  --dg-primary-700: #0065c4;
  --dg-primary-800: #0054a3;
  --dg-primary-900: #00417d;
  --dg-primary: var(--dg-primary-600);
  --dg-primary-100-contrast: var(--neutral-900);
  --dg-primary-200-contrast: var(--neutral-900);
  --dg-primary-300-contrast: var(--neutral-900);
  --dg-primary-400-contrast: var(--neutral-900);
  --dg-primary-500-contrast: var(--neutral-900);
  --dg-primary-600-contrast: var(--neutral-100);
  --dg-primary-700-contrast: var(--neutral-100);
  --dg-primary-800-contrast: var(--neutral-100);
  --dg-primary-900-contrast: var(--neutral-100);
  --dg-primary-contrast: var(--dg-primary-600-contrast);
  --input-shadow: 0 0px 3px 0px var(--neutral-400);
  --input-padding: 14px;
  --input-error-icon-circle-size: 20px;
  --input-error-icon-size: 8px;
  --input-border-radius: var(--border-radius-sm);
  --max-input-width: auto;
  --input-border-width: var(--border-width);
  --input-border-width--valid: var(--input-border-width);
  --input-border-width--invalid: 2px;
  --input-trigger-size: 16px;
  --grid-max-width: 1200px;
  --grid-padding: 24px;
  --grid-column-gap: 12px;
  --icon-size: 14px;
  --icon-size-xxs: 8px;
  --icon-size-xs: 10px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 24px;
  --icon-size-xl: 30px;
  --card-shadow: 0px 0px 3px var(--neutral-400);
  --card-shadow--hover: 0px 0px 8px var(--neutral-500);
  --spacing-unit: 4px;
  --spacing-none: calc(var(--spacing-unit) * 0);
  --spacing-xxs: calc(var(--spacing-unit) * 2);
  --spacing-xs: calc(var(--spacing-unit) * 3);
  --spacing-sm: calc(var(--spacing-unit) * 4);
  --spacing-md: calc(var(--spacing-unit) * 6);
  --spacing-lg: calc(var(--spacing-unit) * 8);
  --spacing-xl: calc(var(--spacing-unit) * 12);
  --spacing-xxl: calc(var(--spacing-unit) * 16);
  --spacing-xxxl: calc(var(--spacing-unit) * 20);
  --btn-disabled-shadow: 0 0 3px var(--neutral-300);
  --btn-hover-shadow: none;
  --btn-disabled-opacity: 1;
  --btn-border-radius: var(--border-radius-md);
  --btn-border-width: 2px;
  --btn-transition: all var(--ease-transition);
  --btn-active-scale: 1;
  --btn-height: 56px;
  --btn-max-width: 280px;
  --btn-max-width-sm: auto;
  --btn-justify-content: center;
  --btn-text-align: center;
  --btn-icon-spacing: 10px;
  --btn-padding: 13px 20px;
  --btn-primary-color: var(--primary-interactive-contrast-color);
  --btn-primary-icon-color: var(--primary-interactive-contrast-color);
  --btn-primary-text-decoration: none;
  --btn-primary-background-color: var(--primary-interactive-color);
  --btn-primary-border-color: var(--primary-interactive-color);
  --btn-primary-hover-color: var(--primary-interactive-color--hover);
  --btn-primary-hover-text-decoration: none;
  --btn-primary-hover-background-color: var(--primary-interactive-color--hover);
  --btn-primary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-primary-active-color: var(--btn-primary-color);
  --btn-primary-active-text-decoration: none;
  --btn-primary-active-background-color: var(--btn-primary-background-color);
  --btn-primary-active-border-color: var(--btn-primary-border-color);
  --btn-primary-focus-border-color: var(--btn-primary-hover-border-color);
  --btn-secondary-color: var(--primary-interactive-color);
  --btn-secondary-icon-color: var(--primary-interactive-color);
  --btn-primary-text-decoration: none;
  --btn-secondary-background-color: transparent;
  --btn-secondary-border-color: var(--primary-interactive-color);
  --btn-secondary-hover-color: var(--primary-interactive-color--hover);
  --btn-secondary-hover-text-decoration: none;
  --btn-secondary-hover-background-color: transparent;
  --btn-secondary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-secondary-active-color: var(--btn-secondary-color);
  --btn-secondary-active-text-decoration: none;
  --btn-secondary-active-background-color: var(--btn-secondary-background-color);
  --btn-secondary-active-border-color: var(--btn-secondary-border-color);
  --btn-secondary-focus-border-color: var(--btn-secondary-hover-border-color);
  --btn-tertiary-color: var(--neutral-700);
  --btn-tertiary-icon-color: var(--neutral-700);
  --btn-tertiary-text-decoration: none;
  --btn-tertiary-background-color: var(--primary-interactive-contrast-color);
  --btn-tertiary-border-color: var(--neutral-400);
  --btn-tertiary-hover-color: var(--neutral-700);
  --btn-tertiary-hover-text-decoration: none;
  --btn-tertiary-hover-background-color: var(--primary-interactive-contrast-color);
  --btn-tertiary-hover-border-color: var(--neutral-600);
  --btn-tertiary-active-color: var(--btn-tertiary-color);
  --btn-tertiary-active-text-decoration: none;
  --btn-tertiary-active-background-color: var(--btn-tertiary-background-color);
  --btn-tertiary-active-border-color: var(--btn-tertiary-border-color);
  --btn-tertiary-focus-border-color: var(--btn-tertiary-hover-border-color);
  --btn-toggle-color: var(--neutral-700);
  --btn-toggle-icon-color: var(--neutral-700);
  --btn-primary-text-decoration: none;
  --btn-toggle-background-color: var(--primary-interactive-contrast-color);
  --btn-toggle-border-color: var(--primary-interactive-color);
  --btn-toggle-hover-color: var(--primary-interactive-contrast-color--hover);
  --btn-toggle-hover-text-decoration: none;
  --btn-toggle-hover-background-color: var(--primary-interactive-color--active);
  --btn-toggle-hover-border-color: var(--primary-interactive-color--active);
  --btn-toggle-active-color: var(--primary-interactive-contrast-color--active);
  --btn-toggle-active-text-decoration: none;
  --btn-toggle-active-background-color: var(--primary-interactive-color--active);
  --btn-toggle-active-border-color: var(--primary-interactive-color--active);
  --btn-toggle-focus-border-color: var(--btn-toggle-hover-border-color);
  --btn-success-color: var(--neutral-100);
  --btn-success-icon-color: var(--neutral-100);
  --btn-success-background-color: var(--success);
  --btn-success-border-color: var(--success);
  --btn-success-text-decoration: none;
  --btn-success-hover-color: var(--neutral-100);
  --btn-success-hover-background-color: var(--success-700);
  --btn-success-hover-border-color: var(--success-700);
  --btn-success-hover-text-decoration: none;
  --btn-success-focus-border-color: var(--btn-success-hover-border-color);
  --btn-success-inverted-color: var(--neutral-700);
  --btn-success-inverted-icon-color: var(--neutral-700);
  --btn-success-inverted-background-color: var(--neutral-100);
  --btn-success-inverted-border-color: var(--success);
  --btn-success-inverted-text-decoration: none;
  --btn-success-inverted-hover-color: var(--neutral-100);
  --btn-success-inverted-hover-background-color: var(--success);
  --btn-success-inverted-hover-border-color: var(--success);
  --btn-success-inverted-hover-text-decoration: none;
  --btn-success-inverted-focus-border-color: var(--btn-success-inverted-hover-border-color);
  --primary-contrast: var(--neutral-100);
  --warn: var(--error-600);
  --accept: var(--success-600);
  --error: var(--error-600);
  --warning: var(--warning-600);
  --success: var(--success-600);
  --error--contrast: var(--neutral-100);
  --warning--contrast: var(--neutral-100);
  --success--contrast: var(--neutral-100);
  --accent: var(--secondary-600);
  --attention: #ce3298;
  --page-bg: var(--neutral-100);
  --page-bg--alt: var(--neutral-200);
  --page-bg--contrast: var(--neutral-700);
  --page-bg--primary: var(--primary-700);
  --header: var(--neutral-100);
  --header--contrast: var(--text-color);
  --footer: var(--primary-300);
  --footer--contrast: var(--neutral-600);
  --footer-contrast-loud: var(--primary-700);
  --hero-color: var(--primary-800);
  --hero-contrast-color: var(--neutral-100);
  --separator: var(--neutral-400);
  --separator--secondary: var(--neutral-300);
  --form-card-bg: var(--neutral-300);
  --panel-bg: var(--neutral-100);
  --panel-border-color: var(--neutral-400);
  --panel-bg--highlight: var(--neutral-300);
  --panel-bg--highlight-subtle: var(--neutral-200);
  --info-card-bg: var(--primary-300);
  --info-card-text: var(--text-color);
  --card-highlight-width: 6px;
  --section-bg: var(--page-bg);
  --section-text: var(--neutral-600);
  --section-border-color: var(--neutral-400);
  --stand-out-bg: var(--neutral-200);
  --stand-out-bg-border: var(--neutral-400);
  --border-color--interactive: var(--neutral-600);
  --primary-interactive-color: var(--primary-500);
  --primary-interactive-color--hover: var(--primary-700);
  --primary-interactive-color--active: var(--primary-700);
  --primary-interactive-contrast-color: var(--neutral-100);
  --primary-interactive-contrast-color--hover: var(--neutral-100);
  --primary-interactive-contrast-color--active: var(--neutral-100);
  --secondary-interactive-color: var(--secondary-500);
  --secondary-interactive-color--hover: var(--secondary-700);
  --secondary-interactive-color--active: var(--secondary-700);
  --secondary-interactive-contrast-color: var(--neutral-100);
  --secondary-interactive-contrast-color--hover: var(--neutral-100);
  --secondary-interactive-contrast-color--active: var(--neutral-100);
  --heading-color: var(--text-color);
  --heading--highlight-color: var(--primary-800);
  --user-input-selected-color: var(--success-700);
  --user-input-selected-contrast-color: var(--neutral-100);
  --text-color: var(--neutral-700);
  --text-color--supporting: var(--neutral-700);
  --text-color--unimportant: var(--neutral-500);
  --text-color--placeholder: var(--neutral-600);
  --text-color--highlight: var(--primary-700);
  --placeholder-bg: var(--neutral-400);
  --input-background-color: var(--primary-contrast);
  --input-trigger-color: var(--neutral-600);
  --input-border-color: var(--neutral-700);
  --input-border-color--focus: var(--primary-500);
  --input-text-color: var(--neutral-700);
  --input-placeholder-color: var(--text-color--placeholder);
  --typeahead-highlight-color: var(--primary-interactive-color);
  --typeahead-highlight-color--active: var(--primary-interactive-color);
  --typeahead-bg-color: var(--neutral-300);
  --input-border-color--valid: var(--success);
  --decoration-color-1: var(--primary-500);
  --decoration-color-contrast-1: var(--neutral-100);
  --decoration-color-2: var(--secondary-500);
  --decoration-color-contrast-2: var(--neutral-100);
  --decoration-color-3: var(--primary-500);
  --decoration-color-contrast-3: var(--neutral-100);
  --decoration-color-4: var(--secondary-500);
  --decoration-color-contrast-4: var(--neutral-100);
  --decoration-color-1--text: var(--decoration-color-1);
  --decoration-color-2--text: var(--decoration-color-2);
  --decoration-color-3--text: var(--decoration-color-3);
  --decoration-color-4--text: var(--decoration-color-4);
  --component-box-background-color: var(--neutral-100);
  --promotion: #f27f20;
  --promotion-contrast: var(--neutral-100);
  --tone-900: var(--neutral-900);
  --tone-800: var(--neutral-800);
  --tone-700: var(--neutral-700);
  --tone-600: var(--neutral-600);
  --tone-500: var(--neutral-500);
  --tone-400: var(--neutral-400);
  --tone-300: var(--neutral-300);
  --tone-200: var(--neutral-200);
  --tone-100: var(--neutral-100);
  --theme-background: var(--page-bg);
  --theme-body: var(--text-color);
  --theme-heading: var(--text-color);
  --theme-emphasis: var(--primary-700);
  --theme-background-background: var(--page-bg);
  --theme-background-body: var(--text-color);
  --theme-background-heading: var(--text-color);
  --theme-background-emphasis: var(--primary-600);
  --theme-background-alternative-background: var(--page-bg--alt);
  --theme-background-alternative-body: var(--text-color);
  --theme-background-alternative-heading: var(--text-color);
  --theme-background-alternative-emphasis: var(--text-color);
  --theme-primary-background: var(--page-bg--primary);
  --theme-primary-body: var(--primary-contrast);
  --theme-primary-heading: var(--primary-contrast);
  --theme-primary-emphasis: var(--primary-contrast);
  --theme-primary-alternative-background: var(--info-card-bg);
  --theme-primary-alternative-body: var(--info-card-text);
  --theme-primary-alternative-heading: var(--info-card-text);
  --theme-primary-alternative-emphasis: var(--info-card-text);
  --theme-promotion-background: var(--promotion);
  --theme-promotion-body: var(--promotion-contrast);
  --theme-promotion-heading: var(--promotion-contrast);
  --theme-promotion-emphasis: var(--promotion-contrast);
  --theme-dg-primary-background: var(--dg-primary);
  --theme-dg-primary-body: var(--dg-primary-contrast);
  --theme-dg-primary-heading: var(--dg-primary-contrast);
  --theme-dg-primary-emphasis: var(--dg-primary-contrast);
  --theme-dg-primary-alternative-background: var(--dg-primary-200);
  --theme-dg-primary-alternative-body: var(--dg-primary-700);
  --theme-dg-primary-alternative-heading: var(--dg-primary-700);
  --theme-dg-primary-alternative-emphasis: var(--dg-primary-700);
  --theme-dg-primary-alternative-neutral-background: var(--dg-primary-100);
  --theme-dg-primary-alternative-neutral-body: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-heading: var(--neutral-800);
  --theme-dg-primary-alternative-neutral-emphasis: var(--neutral-800);
  --typog-default-heading-family: Arial, sans-serif;
  --typog-default-body-family: Arial, sans-serif;
  --icon-size: 14px;
  --icon-size-xs: 10px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 28px;
  --primary-800: #0168b4;
  --primary-700: #0071bb;
  --primary-600: #0675cd;
  --primary-500: #038ad3;
  --primary-400: #b3dff1;
  --primary-300: #e5f3fb;
  --secondary-800: #4c346f;
  --secondary-700: #583c80;
  --secondary-600: #6f4ca2;
  --secondary-500: #8a6ab9;
  --secondary-400: #a58cc9;
  --secondary-300: #dcd2ea;
  --success-800: #204814;
  --success-700: #32701e;
  --success-600: #3b8524;
  --success-500: #55c134;
  --success-400: #84d76a;
  --success-300: #b6e7a7;
  --warning-800: #b87900;
  --warning-700: #eb9a00;
  --warning-600: #ffc453;
  --warning-500: #ffd585;
  --warning-400: #ffde9e;
  --warning-300: #ffe7b8;
  --error-800: #872221;
  --error-700: #9c2726;
  --error-600: #af2c2b;
  --error-500: #d55453;
  --error-400: #e9a5a5;
  --error-300: #f3cece;
  --neutral-900: #0d0d0d;
  --neutral-800: #262626;
  --neutral-700: #414141;
  --neutral-600: #676767;
  --neutral-500: #757575;
  --neutral-400: #d9d9d9;
  --neutral-300: #ebebeb;
  --neutral-200: #f6f6f6;
  --neutral-100: #ffffff;
  --focussed-state-600: #fcea60;
  --focussed-state-700: #f0d505;
  --primary-interactive-color: var(--primary-600);
  --primary-interactive-color--hover: var(--primary-800);
  --primary-interactive-color--active: var(--primary-800);
  --heading--highlight-color: var(--heading-color);
  --btn-secondary-copy: var(--primary-300);
  --basket-icon: var(--accent);
  --max-input-width: 348px;
  --landscape-column-width: 440px;
  --btn-height: auto;
  --btn-width: auto;
  --btn-max-width: 100%;
  --btn-max-width-sm: 100%;
  --btn-justify-content: center;
  --btn-text-align: center;
  --btn-padding: 16px 30px;
  --btn-icon-spacing: 30px;
  --btn-border-width: 2px;
  --btn-disabled-shadow: none;
  --btn-disabled-opacity: 0.5;
  --btn-hover-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  --btn-active-scale: 0.95;
  --btn-primary-color: var(--primary-interactive-contrast-color);
  --btn-primary-icon-color: var(--primary-interactive-contrast-color);
  --btn-primary-background-color: var(--primary-interactive-color);
  --btn-primary-border-color: var(--primary-interactive-color);
  --btn-primary-hover-color: var(--primary-interactive-contrast-color--hover);
  --btn-primary-hover-background-color: var(--primary-interactive-color--hover);
  --btn-primary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-primary-inverted-color: var(--primary-800);
  --btn-primary-inverted-icon-color: var(--primary-800);
  --btn-primary-inverted-background-color: var(--primary-300);
  --btn-primary-inverted-border-color: var(--primary-300);
  --btn-primary-inverted-hover-color: var(--primary-800);
  --btn-primary-inverted-hover-background-color: var(--primary-400);
  --btn-primary-inverted-hover-border-color: var(--primary-400);
  --btn-primary-inverted-active-color: var(--primary-800);
  --btn-primary-inverted-active-background-color: var(--primary-400);
  --btn-primary-inverted-active-border-color: var(--primary-400);
  --btn-primary-inverted-focus-border-color: var(--primary-400);
  --btn-secondary-inverted-color: var(--neutral-100);
  --btn-secondary-inverted-icon-color: var(--neutral-100);
  --btn-secondary-inverted-background-color: transparent;
  --btn-secondary-inverted-border-color: var(--neutral-100);
  --btn-secondary-inverted-hover-color: var(--primary-800);
  --btn-secondary-inverted-hover-background-color: var(--neutral-100);
  --btn-secondary-inverted-hover-border-color: var(--neutral-100);
  --btn-secondary-inverted-active-color: var(--primary-600);
  --btn-secondary-inverted-active-background-color: var(--neutral-100);
  --btn-secondary-inverted-active-border-color: var(--primary-600);
  --btn-secondary-inverted-focus-border-color: var(--primary-400);
  --btn-secondary-color: var(--neutral-700);
  --btn-secondary-icon-color: var(--neutral-700);
  --btn-secondary-background-color: var(--primary-interactive-contrast-color);
  --btn-secondary-border-color: var(--primary-interactive-color);
  --btn-secondary-hover-color: var(--primary-interactive-contrast-color--hover);
  --btn-secondary-hover-background-color: var(--primary-interactive-color--hover);
  --btn-secondary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-secondary-active-color: var(--primary-interactive-contrast-color--active);
  --btn-secondary-active-background-color: var(--primary-interactive-color);
  --btn-secondary-active-border-color: var(--primary-interactive-color);
  --btn-tertiary-color: var(--primary-interactive-color);
  --btn-tertiary-icon-color: var(--primary-interactive-color);
  --btn-tertiary-background-color: var(--primary-interactive-contrast-color);
  --btn-tertiary-border-color: var(--primary-interactive-contrast-color);
  --btn-tertiary-hover-color: var(--primary-interactive-contrast-color--hover);
  --btn-tertiary-hover-background-color: var(--primary-interactive-color--hover);
  --btn-tertiary-hover-border-color: var(--primary-interactive-color--hover);
  --btn-tertiary-active-color: var(--primary-interactive-contrast-color--active);
  --btn-tertiary-active-background-color: var(--primary-interactive-color--active);
  --btn-tertiary-active-border-color: var(--primary-interactive-color--active);
  --btn-tertiary-text-decoration: none;
  --btn-tertiary-hover-text-decoration: none;
  --btn-tertiary-active-text-decoration: none;
  --btn-toggle-color: var(--neutral-700);
  --btn-toggle-icon-color: var(--neutral-700);
  --btn-primary-text-decoration: none;
  --btn-toggle-background-color: var(--secondary-interactive-contrast-color);
  --btn-toggle-border-color: var(--secondary-interactive-color);
  --btn-toggle-hover-color: var(--secondary-interactive-contrast-color);
  --btn-toggle-hover-text-decoration: none;
  --btn-toggle-hover-background-color: var(--secondary-interactive-color--hover);
  --btn-toggle-hover-border-color: var(--secondary-interactive-color--hover);
  --btn-toggle-active-color: var(--secondary-interactive-contrast-color);
  --btn-toggle-active-text-decoration: none;
  --btn-toggle-active-background-color: var(--secondary-interactive-color);
  --btn-toggle-active-border-color: var(--secondary-interactive-color);
  --btn-toggle-focus-border-color: var(--btn-toggle-hover-border-color);
  --input-border-color: var(--neutral-600);
  --border-color--interactive: var(--neutral-600);
  --input-border-color--valid: var(--input-border-color);
  --input-border-color--focus: var(--input-border-color);
  --border-radius-sm: 4px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;
  --input-padding: 17px;
  --input-shadow: none;
  --decoration-color-1: #f27f20;
  --decoration-color-1--text: #f28d80;
  --decoration-color-2: #b0117d;
  --decoration-color-3: #3b8524;
  --decoration-color-4: #0a93d3;
  --typog-default-heading-family: "Museo Sans", "Source Sans Pro", Arial, sans-serif;
  --typog-default-body-family: "Source Sans Pro", Arial, sans-serif;
  --typog-lg-d1-family: Museo Sans;
  --typog-lg-d1-weight: 700;
  --typog-lg-d1-line-height: 80px;
  --typog-lg-d1-size: 72px;
  --typog-lg-d1-letter-spacing: 0.016em;
  --typog-lg-d1-text-transform: none;
  --typog-lg-d1-text-decoration: none;
  --typog-md-d1-weight: 500;
  --typog-md-d1-line-height: 48px;
  --typog-md-d1-size: 40px;
  --typog-sm-d1-weight: 700;
  --typog-sm-d1-line-height: 40px;
  --typog-sm-d1-size: 32px;
  --typog-lg-d2-family: Museo Sans;
  --typog-lg-d2-weight: 700;
  --typog-lg-d2-line-height: 40px;
  --typog-lg-d2-size: 32px;
  --typog-lg-d2-letter-spacing: 0.016em;
  --typog-lg-d2-text-transform: none;
  --typog-lg-d2-text-decoration: none;
  --typog-sm-d2-line-height: 32px;
  --typog-sm-d2-size: 28px;
  --typog-lg-h1-family: Museo Sans;
  --typog-lg-h1-weight: 700;
  --typog-lg-h1-line-height: 48px;
  --typog-lg-h1-size: 40px;
  --typog-lg-h1-letter-spacing: 0.016em;
  --typog-lg-h1-text-transform: none;
  --typog-lg-h1-text-decoration: none;
  --typog-sm-h1-line-height: 40px;
  --typog-sm-h1-size: 32px;
  --typog-lg-h2-family: Museo Sans;
  --typog-lg-h2-weight: 300;
  --typog-lg-h2-line-height: 40px;
  --typog-lg-h2-size: 32px;
  --typog-lg-h2-letter-spacing: 0.016em;
  --typog-lg-h2-text-transform: none;
  --typog-lg-h2-text-decoration: none;
  --typog-sm-h2-line-height: 32px;
  --typog-sm-h2-size: 28px;
  --typog-lg-h3-family: Museo Sans;
  --typog-lg-h3-weight: 700;
  --typog-lg-h3-line-height: 32px;
  --typog-lg-h3-size: 28px;
  --typog-lg-h3-letter-spacing: 0.016em;
  --typog-lg-h3-text-transform: none;
  --typog-lg-h3-text-decoration: none;
  --typog-sm-h3-size: 24px;
  --typog-lg-h4-family: Museo Sans;
  --typog-lg-h4-weight: 700;
  --typog-lg-h4-line-height: 32px;
  --typog-lg-h4-size: 24px;
  --typog-lg-h4-letter-spacing: 0.016em;
  --typog-lg-h4-text-transform: none;
  --typog-lg-h4-text-decoration: none;
  --typog-sm-h4-line-height: 24px;
  --typog-sm-h4-size: 20px;
  --typog-lg-h5-family: Museo Sans;
  --typog-lg-h5-weight: 700;
  --typog-lg-h5-line-height: 24px;
  --typog-lg-h5-size: 20px;
  --typog-lg-h5-letter-spacing: 0.016em;
  --typog-lg-h5-text-transform: none;
  --typog-lg-h5-text-decoration: none;
  --typog-lg-h6-family: Museo Sans;
  --typog-lg-h6-weight: 700;
  --typog-lg-h6-line-height: 24px;
  --typog-lg-h6-size: 16px;
  --typog-lg-h6-letter-spacing: 0.016em;
  --typog-lg-h6-text-transform: uppercase;
  --typog-lg-h6-text-decoration: none;
  --typog-lg-body-regular-family: Source Sans Pro;
  --typog-lg-body-regular-weight: 400;
  --typog-lg-body-regular-line-height: 24px;
  --typog-lg-body-regular-size: 16px;
  --typog-lg-body-regular-letter-spacing: 0;
  --typog-lg-body-regular-text-transform: none;
  --typog-lg-body-regular-text-decoration: none;
  --typog-lg-body-bold-family: Source Sans Pro;
  --typog-lg-body-bold-weight: 600;
  --typog-lg-body-bold-line-height: 24px;
  --typog-lg-body-bold-size: 16px;
  --typog-lg-body-bold-letter-spacing: 0;
  --typog-lg-body-bold-text-transform: none;
  --typog-lg-body-bold-text-decoration: none;
  --typog-lg-body-large-family: Source Sans Pro;
  --typog-lg-body-large-weight: 400;
  --typog-lg-body-large-line-height: 28px;
  --typog-lg-body-large-size: 20px;
  --typog-lg-body-large-letter-spacing: 0;
  --typog-lg-body-large-text-transform: none;
  --typog-lg-body-large-text-decoration: none;
  --typog-lg-body-large-bold-family: Source Sans Pro;
  --typog-lg-body-large-bold-weight: 600;
  --typog-lg-body-large-bold-line-height: 28px;
  --typog-lg-body-large-bold-size: 20px;
  --typog-lg-body-large-bold-letter-spacing: 0;
  --typog-lg-body-large-bold-text-transform: none;
  --typog-lg-body-large-bold-text-decoration: none;
  --typog-lg-body-link-family: Source Sans Pro;
  --typog-lg-body-link-weight: 600;
  --typog-lg-body-link-line-height: 24px;
  --typog-lg-body-link-size: 16px;
  --typog-lg-body-link-letter-spacing: 0;
  --typog-lg-body-link-text-transform: none;
  --typog-lg-body-link-text-decoration: underline;
  --typog-lg-body-large-link-family: Source Sans Pro;
  --typog-lg-body-large-link-weight: 600;
  --typog-lg-body-large-link-line-height: 24px;
  --typog-lg-body-large-link-size: 20px;
  --typog-lg-body-large-link-letter-spacing: 0;
  --typog-lg-body-large-link-text-transform: none;
  --typog-lg-body-large-link-text-decoration: underline;
  --typog-lg-button-family: Museo Sans;
  --typog-lg-button-weight: 700;
  --typog-lg-button-line-height: 24px;
  --typog-lg-button-size: 20px;
  --typog-lg-button-letter-spacing: 0em;
  --typog-lg-button-text-transform: none;
  --typog-lg-button-text-decoration: none;
  --typog-lg-caption-regular-family: Source Sans Pro;
  --typog-lg-caption-regular-weight: 400;
  --typog-lg-caption-regular-line-height: 24px;
  --typog-lg-caption-regular-size: 14px;
  --typog-lg-caption-regular-letter-spacing: 0;
  --typog-lg-caption-regular-text-transform: none;
  --typog-lg-caption-regular-text-decoration: none;
  --typog-lg-caption-bold-family: Source Sans Pro;
  --typog-lg-caption-bold-weight: 600;
  --typog-lg-caption-bold-line-height: 24px;
  --typog-lg-caption-bold-size: 14px;
  --typog-lg-caption-bold-letter-spacing: 0;
  --typog-lg-caption-bold-text-transform: none;
  --typog-lg-caption-bold-text-decoration: none;
  --typog-lg-caption-link-family: Source Sans Pro;
  --typog-lg-caption-link-weight: 700;
  --typog-lg-caption-link-line-height: 24px;
  --typog-lg-caption-link-size: 16px;
  --typog-lg-caption-link-letter-spacing: 0;
  --typog-lg-caption-link-text-transform: none;
  --typog-lg-caption-link-text-decoration: underline;
  --typog-lg-menu-link-family: Source Sans Pro;
  --typog-lg-menu-link-weight: 400;
  --typog-lg-menu-link-line-height: 24px;
  --typog-lg-menu-link-size: 16px;
  --typog-lg-menu-link-letter-spacing: 0.016em;
  --typog-lg-menu-link-text-transform: none;
  --typog-lg-menu-link-text-decoration: none;
  --typog-lg-header-link-family: Source Sans Pro;
  --typog-lg-header-link-weight: 400;
  --typog-lg-header-link-line-height: 24px;
  --typog-lg-header-link-size: 20px;
  --typog-lg-header-link-letter-spacing: 0.016em;
  --typog-lg-header-link-text-transform: none;
  --typog-lg-header-link-text-decoration: none;
  --primary-900: #486a14;
  --primary-800: #486a14;
  --primary-700: #486a14;
  --primary-600: #486a14;
  --primary-500: #486a14;
  --primary-400: #486a14;
  --primary-300: #486a14;
  --secondary-800: #4e4e4e;
  --secondary-700: #3f4dab;
  --secondary-600: #636363;
  --secondary-500: #6b6b6b;
  --secondary-400: #818181;
  --secondary-300: #979797;
  --success-800: #204814;
  --success-700: #32701e;
  --success-600: #3b8524;
  --success-500: #55c134;
  --success-400: #84d76a;
  --success-300: #b6e7a7;
  --warning-800: #b87900;
  --warning-700: #eb9a00;
  --warning-600: #ffc453;
  --warning-500: #ffd585;
  --warning-400: #ffde9e;
  --warning-300: #ffe7b8;
  --error-800: #872221;
  --error-700: #9c2726;
  --error-600: #af2c2b;
  --error-500: #d55453;
  --error-400: #e9a5a5;
  --error-300: #f3cece;
  --neutral-900: #000000;
  --neutral-800: #262626;
  --neutral-700: #414141;
  --neutral-600: #676767;
  --neutral-500: #757575;
  --neutral-400: #d9d9d9;
  --neutral-300: #ebebeb;
  --neutral-200: #f6f6f6;
  --neutral-100: #ffffff;
  --decoration-color-1: #f37020;
  --decoration-color-1--text: #f37020;
  --decoration-color-2: #f1a14e;
  --decoration-color-3: #3b8524;
  --decoration-color-4: #4a6dce;
  --primary-contrast: var(--neutral-100);
  --warn: var(--error-600);
  --accept: var(--success-600);
  --error: var(--error-600);
  --warning: var(--warning-600);
  --success: var(--success-600);
  --error--contrast: var(--neutral-100);
  --warning--contrast: var(--neutral-100);
  --success--contrast: var(--neutral-100);
  --accent: var(--secondary-600);
  --attention: #ce3298;
  --page-bg: var(--neutral-100);
  --page-bg--alt: var(--neutral-200);
  --page-bg--contrast: var(--neutral-700);
  --page-bg--primary: var(--primary-700);
  --header: var(--neutral-100);
  --header--contrast: var(--text-color);
  --footer: var(--primary-300);
  --footer--contrast: var(--neutral-800);
  --footer-contrast-loud: var(--primary-800);
  --hero-color: var(--primary-800);
  --hero-contrast-color: var(--neutral-100);
  --separator: var(--neutral-400);
  --separator--secondary: var(--neutral-300);
  --form-card-bg: var(--neutral-300);
  --panel-bg: var(--neutral-100);
  --panel-border-color: var(--neutral-400);
  --panel-bg--highlight: var(--neutral-300);
  --panel-bg--highlight-subtle: var(--neutral-200);
  --info-card-bg: var(--primary-300);
  --info-card-text: var(--text-color);
  --card-highlight-width: 6px;
  --section-bg: var(--page-bg);
  --section-text: var(--neutral-600);
  --section-border-color: var(--neutral-400);
  --stand-out-bg: var(--neutral-200);
  --stand-out-bg-border: var(--neutral-400);
  --border-color--interactive: var(--neutral-600);
  --primary-interactive-color: var(--primary-500);
  --primary-interactive-color--hover: var(--primary-700);
  --primary-interactive-color--active: var(--primary-700);
  --primary-interactive-contrast-color: var(--neutral-100);
  --primary-interactive-contrast-color--hover: var(--neutral-100);
  --primary-interactive-contrast-color--active: var(--neutral-100);
  --secondary-interactive-color: var(--secondary-500);
  --secondary-interactive-color--hover: var(--secondary-700);
  --secondary-interactive-color--active: var(--secondary-700);
  --secondary-interactive-contrast-color: var(--neutral-100);
  --secondary-interactive-contrast-color--hover: var(--neutral-100);
  --secondary-interactive-contrast-color--active: var(--neutral-100);
  --heading-color: var(--text-color);
  --heading--highlight-color: var(--primary-800);
  --user-input-selected-color: var(--success-700);
  --user-input-selected-contrast-color: var(--neutral-100);
  --text-color: var(--neutral-900);
  --text-color--supporting: var(
    --neutral-700
  );
  --text-color--unimportant: var(--neutral-500);
  --text-color--placeholder: var(--neutral-600);
  --text-color--highlight: var(--primary-700);
  --placeholder-bg: var(--neutral-400);
  --input-background-color: var(--primary-contrast);
  --input-trigger-color: var(--neutral-600);
  --input-border-color: var(--neutral-700);
  --input-border-color--focus: var(--primary-500);
  --input-text-color: var(--neutral-700);
  --input-placeholder-color: var(--text-color--placeholder);
  --typeahead-highlight-color: var(--primary-interactive-color);
  --typeahead-highlight-color--active: var(--primary-interactive-color);
  --typeahead-bg-color: var(--neutral-300);
  --input-border-color--valid: var(--success);
  --decoration-color-1: var(--primary-500);
  --decoration-color-contrast-1: var(--neutral-100);
  --decoration-color-2: var(--secondary-500);
  --decoration-color-contrast-2: var(--neutral-100);
  --decoration-color-3: var(--primary-500);
  --decoration-color-contrast-3: var(--neutral-100);
  --decoration-color-4: var(--secondary-500);
  --decoration-color-contrast-4: var(--neutral-100);
  --decoration-color-1--text: var(--decoration-color-1);
  --decoration-color-2--text: var(--decoration-color-2);
  --decoration-color-3--text: var(--decoration-color-3);
  --decoration-color-4--text: var(--decoration-color-4);
  --component-box-background-color: var(--neutral-100);
  --dg-primary-900: #486a14;
  --dg-primary-800: #486a14;
  --dg-primary-700: #486a14;
  --dg-primary-600: #486a14;
  --dg-primary-500: #486a14;
  --dg-primary-400: #486a14;
  --dg-primary-300: #486a14;
  --dg-primary-100: var(--neutral-100);
  --border-radius-lg: 4px;
  --theme-emphasis: var(--text-color);
  position: relative;
  overflow-x: hidden;
}
@media only screen and (min-width: 768px) {
  body {
    --grid-padding: 48px;
    --grid-column-gap: 24px;
  }
}
@media only screen and (min-width: 1024px) {
  body {
    --grid-padding: 64px;
    --grid-column-gap: 24px;
  }
}
@media only screen and (min-width: 768px) {
  body {
    --icon-size-xl: 32px;
  }
}

/* Scottish Power branding overrides */
:root {
  /* primary button color (fallback provided) */
  --Primary-button: #486a14;
  /* Global typography */
  --global-font-family:
    "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial;
}

/* Apply global font */
html,
body,
app-root {
  font-family: var(--global-font-family);
}

/* Buttons: primary styles */
button,
.btn,
[role=button] {
  color: #fff;
  background-color: var(--Primary-button);
  border: 1px solid var(--Primary-button);
  font-family: var(--global-font-family);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  /* text-decoration-thickness & underline offset may not be supported in all browsers */
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* bordered elements default to primary color */
.bordered,
.card,
.panel {
  border: 1px solid var(--Primary-button);
}

/* small helper: primary outline focus */
button:focus,
.btn:focus,
[role=button]:focus {
  outline: 3px solid color-mix(in srgb, var(--Primary-button) 20%, white);
  outline-offset: 2px;
}

.progress-stepper__body .progress-stepper__reminder {
  background-color: var(--secondary-700) !important;
  border: none !important;
}
.progress-stepper__body .progress-stepper__reminder * {
  color: var(--neutral-100) !important;
}

.button {
  border-radius: calc(var(--spacing-unit) * 1) !important;
}

.header__home-link {
  margin-left: 24px;
}
@media only screen and (min-width: 768px) {
  .header__home-link {
    margin-left: 48px;
    max-height: 50px !important;
    max-width: 100% !important;
    min-width: auto !important;
  }
}

/*# sourceMappingURL=styles.css.map*/