body.dpw-ds-theme {
  --mat-table-header-container-height: 40px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 40px;
}
.dpw-ds-theme {
  --mat-table-header-container-height: 40px;
  --mat-table-footer-container-height: 52px;
  --mat-table-row-item-container-height: 40px;

  --primary-color-100: #1e1450;
  --primary-color-90: #3e3c90;
  --primary-color-80: #5154b6;
  --primary-color-70: #b8b6eb;
  --primary-color-60: #ececff;
  --primary-color-50: #0f0f19;
  --primary-color-40: #3a3a42;
  --primary-color-30: #6e6e72;
  --primary-color-20: #d5d5dd;
  --primary-color-10: #ebebf0;

  --dpw-system-white: #f5f3f5;
  --white: #ffffff;
  --disabled-color: #b6b6b9; /*Not in Design system*/

  --secondary-color-100: #ff3c14;
  --secondary-color-90: #3230be;
  --secondary-color-80: #00e68c;
  --secondary-color-70: #ff2261;
  --secondary-color-60: #1e1450;

  --primitive-color: #6a1fde;

  --success-strong: #417b13;
  --success-medium: #6fd420;
  --success-low: #e2f6d2;

  --warning-strong: #e6b50b;
  --warning-medium: #ffc90c;
  --warning-low: #fff4ce;

  --error-strong: #e70000;
  --error-medium: #ff5f5f;
  --error-low: #ffdfdf;

  --dpw-black-medium: #3a3a42;

  --h-font-family: 'Pilat Wide Heavy';

  --h1-font-size: 72px;
  --h1-font-weight: 900;
  --h1-line-height: 86px; /*80px*/
  --h1-letter-spacing: -0.5%;

  --h2-font-size: 60px;
  --h2-font-weight: 900;
  --h2-line-height: 72px;
  --h2-letter-spacing: -0.5px;

  --h3-font-size: 48px;
  --h3-font-weight: 900;
  --h3-line-height: 58px; /*64px*/
  --h3-letter-spacing: -0.5%;

  --h4-font-size: 40px;
  --h4-font-weight: 900;
  --h4-line-height: 48px; /* 52px */
  --h4-letter-spacing: -0.5%;

  --h5-font-size: 36px;
  --h5-font-weight: 800;
  --h5-line-height: 40px;
  --h5-letter-spacing: -0.5%;

  --h6-font-size: 32px;
  --h6-font-weight: 900;
  --h6-line-height: 38px;
  --h6-letter-spacing: -0.5%;

  --body-font: 'Pilat Regular';
  --body-focus-font: 'Pilat Demi';
  --body-focus-font-weight: 600;
  /* --body-xs-font: "Pilat Regular"; */
  --body-xs-font-size: 10px;
  --body-xs-font-weight: 400;
  --body-xs-line-height: 8px;
  --body-xs-letter-spacing: -0.5%;

  /* --body-s-font: "Pilat Regular"; */
  --body-s-font-size: 12px;
  --body-s-font-weight: 400;
  --body-s-line-height: 10px;
  --body-s-letter-spacing: -0.5%;

  /* --body-m-font: "Pilat Regular"; */
  --body-m-font-size: 14px;
  --body-m-font-weight: 400;
  --body-m-line-height: 20px;
  --body-m-letter-spacing: -0.5%;

  /* --body-l-font: "Pilat Regular"; */
  --body-l-font-size: 16px;
  --body-l-font-weight: 400;
  --body-l-line-height: 14px;
  --body-l-letter-spacing: -0.5%;

  /* --body-xl-font: "Pilat Regular"; */
  --body-xl-font-size: 20px;
  --body-xl-font-weight: 400;
  --body-xl-line-height: 18px;
  --body-xl-letter-spacing: -0.5%;

  --title-xs-font: 'Pilat Regular';
  --title-xs-font-size: 12px;
  --title-xs-font-weight: 400;
  --title-xs-line-height: 10px;
  --title-xs-letter-spacing: -0.5%;

  --title-s-font: 'Pilat Demi';
  --title-s-font-size: 12px;
  --title-s-font-weight: 600;
  --title-s-line-height: 10px;
  --title-s-letter-spacing: -0.5%;

  --title-m-font: 'Pilat Regular';
  --title-m-font-size: 14px;
  --title-m-font-weight: 400;
  --title-m-line-height: 12px;
  --title-m-letter-spacing: -0.5%;

  --title-l-font: 'Pilat Demi';
  --title-l-font-size: 14px;
  --title-l-font-weight: 600;
  --title-l-line-height: 12px;
  --title-l-letter-spacing: -0.5%;

  --title-xl-font: 'Pilat Regular';
  --title-xl-font-size: 16px;
  --title-xl-font-weight: 400;
  --title-xl-line-height: 14px;
  --title-xl-letter-spacing: -0.5%;

  --title-xxl-font: 'Pilat Demi';
  --title-xxl-font-size: 16px;
  --title-xxl-font-weight: 600;
  --title-xxl-line-height: 14px;
  --title-xxl-letter-spacing: -0.5%;

  --subheading-s-font: 'Pilat Wide Heavy';
  --subheading-s-font-size: 16px;
  --subheading-s-font-weight: 900;
  --subheading-s-line-height: 19px;
  --subheading-s-letter-spacing: -0.5%;

  --subheading-m-font: 'Pilat Wide Heavy';
  --subheading-m-font-size: 20px;
  --subheading-m-font-weight: 900;
  --subheading-m-line-height: 24px;
  --subheading-m-letter-spacing: -0.5%;

  --subheading-l-font: 'Pilat Wide Heavy';
  --subheading-l-font-size: 24px;
  --subheading-l-font-weight: 900;
  --subheading-l-line-height: 29px;
  --subheading-l-letter-spacing: -0.5%;

  --heading-s-font: 'Pilat Wide Heavy';
  --heading-s-font-size: 28px;
  --heading-s-font-weight: 900;
  --heading-s-line-height: 34px;
  --heading-s-letter-spacing: -0.5%;

  --heading-m-font: 'Pilat Wide Heavy';
  --heading-m-font-size: 32px;
  --heading-m-font-weight: 900;
  --heading-m-line-height: 38px;
  --heading-m-letter-spacing: -0.5%;

  --heading-l-font: 'Pilat Wide Heavy';
  --heading-l-font-size: 40px;
  --heading-l-font-weight: 900;
  --heading-l-line-height: 48px;
  --heading-l-letter-spacing: -0.5%;

  --display-s-font: 'Pilat Wide Heavy';
  --display-s-font-size: 48px;
  --display-s-font-weight: 900;
  --display-s-line-height: 58px;
  --display-s-letter-spacing: -0.5%;

  --display-m-font: 'Pilat Wide Heavy';
  --display-m-font-size: 60px;
  --display-m-font-weight: 900;
  --display-m-line-height: 72px;
  --display-m-letter-spacing: -0.5%;

  --display-l-font: 'Pilat Wide Heavy';
  --display-l-font-size: 72px;
  --display-l-font-weight: 900;
  --display-l-line-height: 86px;
  --display-l-letter-spacing: -0.5%;

  --button-s-font: 'Pilat Wide Demi';
  --button-s-font-size: 12px;
  --button-s-font-weight: 600;
  --button-s-line-height: 14px;
  --button-s-letter-spacing: -0.5%;

  --button-l-font: 'Pilat Wide Demi';
  --button-l-font-size: 14px;
  --button-l-font-weight: 600;
  --button-l-line-height: 17px;
  --button-l-letter-spacing: -0.5%;

  --inline-link-s-font: 'Pilat Regular';
  --inline-link-s-font-size: 12px;
  --inline-link-s-font-weight: 400;
  --inline-link-s-line-height: 10px;
  --inline-link-s-letter-spacing: -0.5%;

  --inline-link-m-font: 'Pilat Regular';
  --inline-link-m-font-size: 14px;
  --inline-link-m-font-weight: 400;
  --inline-link-m-line-height: 12px;
  --inline-link-m-letter-spacing: -0.5%;

  --inline-link-l-font: 'Pilat Regular';
  --inline-link-l-font-size: 16px;
  --inline-link-l-font-weight: 400;
  --inline-link-l-line-height: 14px;
  --inline-link-l-letter-spacing: -0.5%;

  --link-s-font: 'Pilat Demi';
  --link-s-font-size: 12px;
  --link-s-font-weight: 600;
  --link-s-line-height: 10px;
  --link-s-letter-spacing: -0.5%;

  --link-m-font: 'Pilat Demi';
  --link-m-font-size: 14px;
  --link-m-font-weight: 600;
  --link-m-line-height: 12px;
  --link-m-letter-spacing: -0.5%;

  --link-l-font: 'Pilat Demi';
  --link-l-font-size: 16px;
  --link-l-font-weight: 600;
  --link-l-line-height: 14px;
  --link-l-letter-spacing: -0.5%;
}

/* DPW theme */

/*Heading 1*/
h1 {
  font-family: var(--h-font-family);
  font-size: var(--h1-font-size);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

/*Heading 2*/
h2 {
  font-family: var(--h-font-family);
  font-size: var(--h2-font-size);
  font-weight: var(--h2-font-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

/*Heading 3*/
h3 {
  font-family: var(--h-font-family);
  font-size: var(--h3-font-size);
  font-weight: var(--h3-font-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

/*Heading 4*/
h4 {
  font-family: var(--h-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
}

/*Heading 5*/
h5 {
  font-family: var(--h-font-family);
  font-size: var(--h5-font-size);
  font-weight: var(--h5-font-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

/*Heading 6*/
h6 {
  font-family: var(--h-font-family);
  font-size: var(--h6-font-size);
  font-weight: var(--h6-font-weight);
  line-height: var(--h6-line-height);
  letter-spacing: var(--h6-letter-spacing);
}

.body-xs {
  font-family: var(--body-font);
  font-size: var(--body-xs-font-size);
  font-weight: var(--body-xs-font-weight);
  line-height: var(--body-xs-line-height);
  letter-spacing: var(--body-xs-letter-spacing);
}

.body-s {
  font-family: var(--body-font);
  font-size: var(--body-s-font-size);
  font-weight: var(--body-s-font-weight);
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
}
.body-s-multiline {
  line-height: 18px;
}

.body-m {
  font-family: var(--body-font);
  font-size: var(--body-m-font-size);
  font-weight: var(--body-m-font-weight);
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
}

.body-l {
  font-family: var(--body-font);
  font-size: var(--body-l-font-size);
  font-weight: var(--body-l-font-weight);
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
}

.body-xl {
  font-family: var(--body-font);
  font-size: var(--body-xl-font-size);
  font-weight: var(--body-xl-font-weight);
  line-height: var(--body-xl-line-height);
  letter-spacing: var(--body-xl-letter-spacing);
}

.body-focus {
  font-family: var(--body-focus-font) !important;
  font-weight: var(--body-focus-font-weight) !important;
}

.title-xs {
  font-family: var(--title-xs-font);
  font-size: var(--title-xs-font-size);
  font-weight: var(--title-xs-font-weight);
  line-height: var(--title-xs-line-height);
  letter-spacing: var(--title-xs-letter-spacing);
}

.title-s {
  font-family: var(--title-s-font);
  font-size: var(--title-s-font-size);
  font-weight: var(--title-s-font-weight);
  line-height: var(--title-s-line-height);
  letter-spacing: var(--title-s-letter-spacing);
}

.title-m {
  font-family: var(--title-m-font);
  font-size: var(--title-m-font-size);
  font-weight: var(--title-m-font-weight);
  line-height: var(--title-m-line-height);
  letter-spacing: var(--title-m-letter-spacing);
}

.title-l {
  font-family: var(--title-l-font);
  font-size: var(--title-l-font-size);
  font-weight: var(--title-l-font-weight);
  line-height: var(--title-l-line-height);
  letter-spacing: var(--title-l-letter-spacing);
}

.title-xl {
  font-family: var(--title-xl-font);
  font-size: var(--title-xl-font-size);
  font-weight: var(--title-xl-font-weight);
  line-height: var(--title-xl-line-height);
  letter-spacing: var(--title-xl-letter-spacing);
}

.title-xxl {
  font-family: var(--title-xxl-font);
  font-size: var(--title-xxl-font-size);
  font-weight: var(--title-xxl-font-weight);
  line-height: var(--title-xxl-line-height);
  letter-spacing: var(--title-xxl-letter-spacing);
}

.subheading-s {
  font-family: var(--subheading-s-font);
  font-size: var(--subheading-s-font-size);
  font-weight: var(--subheading-s-font-weight);
  line-height: var(--subheading-s-line-height);
  letter-spacing: var(--subheading-s-letter-spacing);
}

.subheading-m {
  font-family: var(--subheading-m-font);
  font-size: var(--subheading-m-font-size);
  font-weight: var(--subheading-m-font-weight);
  line-height: var(--subheading-m-line-height);
  letter-spacing: var(--subheading-m-letter-spacing);
}

.subheading-l {
  font-family: var(--subheading-l-font);
  font-size: var(--subheading-l-font-size);
  font-weight: var(--subheading-l-font-weight);
  line-height: var(--subheading-l-line-height);
  letter-spacing: var(--subheading-l-letter-spacing);
}

.heading-s {
  font-family: var(--heading-s-font);
  font-size: var(--heading-s-font-size);
  font-weight: var(--heading-s-font-weight);
  line-height: var(--heading-s-line-height);
  letter-spacing: var(--heading-s-letter-spacing);
}

.heading-m {
  font-family: var(--heading-m-font);
  font-size: var(--heading-m-font-size);
  font-weight: var(--heading-m-font-weight);
  line-height: var(--heading-m-line-height);
  letter-spacing: var(--heading-m-letter-spacing);
}

.heading-l {
  font-family: var(--heading-l-font);
  font-size: var(--heading-l-font-size);
  font-weight: var(--heading-l-font-weight);
  line-height: var(--heading-l-line-height);
  letter-spacing: var(--heading-l-letter-spacing);
}

.display-s,
.display-m,
.display-l,
.heading-s,
.heading-m,
.heading-l {
  text-transform: uppercase;
}

.display-s {
  font-family: var(--display-s-font);
  font-size: var(--display-s-font-size);
  font-weight: var(--display-s-font-weight);
  line-height: var(--display-s-line-height);
  letter-spacing: var(--display-s-letter-spacing);
}

.display-m {
  font-family: var(--display-m-font);
  font-size: var(--display-m-font-size);
  font-weight: var(--display-m-font-weight);
  line-height: var(--display-m-line-height);
  letter-spacing: var(--display-m-letter-spacing);
}

.display-l {
  font-family: var(--display-l-font);
  font-size: var(--display-l-font-size);
  font-weight: var(--display-l-font-weight);
  line-height: var(--display-l-line-height);
  letter-spacing: var(--display-l-letter-spacing);
}

.button-s {
  font-family: var(--button-s-font) !important;
  font-size: var(--button-s-font-size) !important;
  font-weight: var(--button-s-font-weight) !important;
  line-height: var(--button-s-line-height) !important;
  letter-spacing: var(--button-s-letter-spacing) !important;
  min-height: 36px;
}

.button-l {
  font-family: var(--button-l-font) !important;
  font-size: var(--button-l-font-size) !important;
  font-weight: var(--button-l-font-weight) !important;
  line-height: var(--button-l-line-height) !important;
  letter-spacing: var(--button-l-letter-spacing) !important;
  min-height: 44px;
}

.inline-link-s {
  font-family: var(--inline-link-s-font);
  font-size: var(--inline-link-s-font-size);
  font-weight: var(--inline-link-s-font-weight);
  line-height: var(--inline-link-s-line-height);
  letter-spacing: var(--inline-link-s-letter-spacing);
}

.inline-link-m {
  font-family: var(--inline-link-m-font);
  font-size: var(--inline-link-m-font-size);
  font-weight: var(--inline-link-m-font-weight);
  line-height: var(--inline-link-m-line-height);
  letter-spacing: var(--inline-link-m-letter-spacing);
}

.inline-link-l {
  font-family: var(--inline-link-l-font);
  font-size: var(--inline-link-l-font-size);
  font-weight: var(--inline-link-l-font-weight);
  line-height: var(--inline-link-l-line-height);
  letter-spacing: var(--inline-link-l-letter-spacing);
}

.inline-link-s.focus,
.inline-link-m.focus,
.inline-link-l.focus,
.link-s.focus,
.link-m.focus,
.link-l.focus {
  font-family: 'Pilat Demi';
  font-weight: 600;
  text-decoration: underline;
}

.link-s {
  font-family: var(--link-s-font);
  font-size: var(--link-s-font-size);
  font-weight: var(--link-s-font-weight);
  line-height: var(--link-s-line-height);
  letter-spacing: var(--link-s-letter-spacing);
}

.link-m {
  font-family: var(--link-m-font);
  font-size: var(--link-m-font-size);
  font-weight: var(--link-m-font-weight);
  line-height: var(--link-m-line-height);
  letter-spacing: var(--link-m-letter-spacing);
}

.link-l {
  font-family: var(--link-l-font);
  font-size: var(--link-l-font-size);
  font-weight: var(--link-l-font-weight);
  line-height: var(--link-l-line-height);
  letter-spacing: var(--link-l-letter-spacing);
}