:root, [data-theme="primary"] {
  /* Colors */
  --cr-color--blue: #0074AE;
  --cr-color--blue--1: #B5F2FF;
  --cr-color--blue--2: #C8E1EA;
  --cr-color--blue--3: #E8F7FA;
  --cr-color--blue--4: #DDF4F9;
  --cr-color--blue--5: #74CEE2;
  --cr-color--blue--6: #86C0D4;
  --cr-color--blue--7: #25B6D1;
  --cr-color--blue--8: #1092AA;
  --cr-color--blue--9: #5D7D95;
  --cr-color--blue--10: #00527A;
  --cr-color--purple: #772B7F;
  --cr-color--purple--1: #F2E7F2;
  --cr-color--purple--2: #420948;
  --cr-color--green: #9CD1A6;
  --cr-color--green--1: #DEF0E1;
  --cr-color--green--2: #D1DFD3;
  --cr-color--green--3: #68AD75;
  --cr-color--green--4: #6DAE79;
  --cr-color--green--5: #469455;
  --cr-color--green--6: #499E59;
  --cr-color--yellow: #FDB84D;
  --cr-color--yellow--1: #FFEED3;
  --cr-color--yellow--2: #FAE0B6;
  --cr-color--yellow--3: #F3CE95;
  --cr-color--orange: #E37100;
  --cr-color--orange--1: #D48100;
  --cr-color--white: #fff;
  --cr-color--black: #000;
  --cr-color--gray: #8C8C8C;
  --cr-color--gray--1: #F6F6F6;
  --cr-color--gray--2: #F1F1F1;
  --cr-color--gray--3: #DADADA;
  --cr-color--gray--4: #E9E9E9;
  --cr-color--gray--5: #E1EBED;
  --cr-color--gray--6: #6E6E6E;

  --cr-color--brand--blue--1: var(--cr-color--blue);
  --cr-color--brand--blue--2: var(--cr-color--blue--7);
  --cr-color--brand--blue--3: var(--cr-color--blue--5);
  --cr-color--brand--blue--4: #89BADB;
  --cr-color--brand--black: var(--cr-color--black);
  --cr-color--brand--yellow: var(--cr-color--yellow);
  --cr-color--brand--green: var(--cr-color--green);
  --cr-color--brand--purple: var(--cr-color--purple);
  --cr-color--brand--pink: #F28077;
  --cr-color--brand--red: #BA2027;

  /* Border radius */
  --cr-border-radius: 4px;
  --cr-border-radius--large: 10px;
  --cr-border-radius--circle: 50%;
  --cr-border-radius--rounded: 22px;
  --cr-border-radius--card-icon: 50px;

  /* Box shadow */
  --cr-box-shadow: 0 3px 6px 0 rgba(0,0,0,0.16);

  /* Font family */
  --cr-font-family--primary: 'DM Sans', sans-serif;

  /* Line width */
  --cr-line-width: 75ch;

  /* Margins */
  --cr-margin: 32px;

  /* Colors in use */
  --cr-color--link: var(--cr-color--blue);
  --cr-color--link--hover: var(--cr-color--blue--10);
  --cr-color--link--active: var(--cr-color--black);
  --cr-color--link--hover--bg: var(--cr-color--blue--1);
  --cr-color--link--active--bg: var(--cr-color--gray--2);
  --cr-color--focus: var(--cr-color--orange);
  --cr-color--border: var(--cr-color--gray);
  --cr-color--border--2: var(--cr-color--blue--9);
  --cr-color--border--3: var(--cr-color--gray--3);
  --cr-color--border--4: var(--cr-color--blue--7);
  --cr-color--background: var(--cr-color--white);
  --cr-color--text: var(--cr-color--black);
  --cr-color--text--inverse: var(--cr-color--white);
  --cr-color--error: #BC0000;
  --cr-color--error--light: #FFE5E3;
  --cr-color--info: var(--cr-color--black);
  --cr-color--info--light: #EAF2FC;
  --cr-color--status: var(--cr-color--black);
  --cr-color--status--light: #ECF4DF;
  --cr-color--warning: var(--cr-color--black);
  --cr-color--warning--light: #FFF0C3;
  --cr-color--accordion-open: var(--cr-color--blue--5);
  --cr-color--background--hover: var(--cr-color--blue--1);
  --cr-color--background--active: var(--cr-color--blue--2);
}

[data-theme="blue"] {
  --cr-color--link: var(--cr-color--white);
  --cr-color--link--hover: var(--cr-color--white);
  --cr-color--link--active: var(--cr-color--green);
  --cr-color--focus: #FFF983;
  --cr-color--border: var(--cr-color--white);
  --cr-color--border--2: var(--cr-color--blue--1);
  --cr-color--background: var(--cr-color--blue);
  --cr-color--text: var(--cr-color--white);
  --cr-color--text--inverse: var(--cr-color--black);
  --cr-color--accordion-open: var(--cr-color--white);
}

[data-theme="footer"] {
  --cr-color--link: var(--cr-color--blue--1);
  --cr-color--link--hover: var(--cr-color--white);
  --cr-color--link--active: var(--cr-color--green);
  --cr-color--focus: #FFF983;
  --cr-color--border: var(--cr-color--white);
  --cr-color--border--2: var(--cr-color--blue--1);
  --cr-color--background: var(--cr-color--blue);
  --cr-color--text: var(--cr-color--white);
  --cr-color--accordion-open: var(--cr-color--white);
}

[data-theme="blue--1"] {
  --cr-color--background: var(--cr-color--blue--1);
}

[data-theme="blue--2"] {
  --cr-color--background: var(--cr-color--blue--2);
}

[data-theme="blue--3"] {
  --cr-color--background: var(--cr-color--blue--3);
  --cr-color--background--hover: var(--cr-color--gray--4);
  --cr-color--background--active: var(--cr-color--gray--3);
}

[data-theme="blue--4"] {
  --cr-color--background: var(--cr-color--blue--4);
}

[data-theme="blue--5"] {
  --cr-color--background: var(--cr-color--blue--5);
  --cr-color--background--hover: var(--cr-color--blue--7);
  --cr-color--background--active: var(--cr-color--blue--8);
}

[data-theme="blue--10"], table th {
  --cr-color--link: var(--cr-color--white);
  --cr-color--link--hover: var(--cr-color--white);
  --cr-color--link--active: var(--cr-color--green);
  --cr-color--focus: #FFF983;
  --cr-color--border: var(--cr-color--white);
  --cr-color--border--2: var(--cr-color--blue--1);
  --cr-color--background: var(--cr-color--blue--10);
  --cr-color--text: var(--cr-color--white);
  .form-required::after {
        display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 .3em;
    content: "";
    vertical-align: super;
    background-image: url(../../svg/required--alt.svg);
    background-repeat: no-repeat;
    background-size: 6px 6px;
  }
}

[data-theme="yellow--1"] {
  --cr-color--background: var(--cr-color--yellow--1);
  --cr-color--background--hover: var(--cr-color--yellow--2);
  --cr-color--background--active: var(--cr-color--yellow--3);
  --cr-color--link: #006DA3;
}

[data-theme="purple"] {
  --cr-color--background: var(--cr-color--purple);
  --cr-color--background--hover: var(--cr-color--purple--2);
  --cr-color--background--active: var(--cr-color--black);
  --cr-color--text: var(--cr-color--white);
  --cr-color--link: var(--cr-color--white);
  --cr-color--link--hover: var(--cr-color--white);
  --cr-color--link--active: var(--cr-color--green);
  --cr-color--focus: #FFF983;
}

[data-theme="purple--1"] {
  --cr-color--background: var(--cr-color--purple--1);
}

[data-theme="green"] {
  --cr-color--background: var(--cr-color--green);
  --cr-color--background--hover: var(--cr-color--green--4);
  --cr-color--background--active: var(--cr-color--green--5);
}

[data-theme="green--1"] {
  --cr-color--background: var(--cr-color--green--1);
  --cr-color--background--hover: var(--cr-color--green--2);
  --cr-color--background--active: var(--cr-color--gray--4);
  --cr-color--link: #006DA3;
}

[data-theme="error"]  {
  --cr-color--background: var(--cr-color--error--light);
}

[data-theme="info"] {
  --cr-color--background: var(--cr-color--info--light);
}

[data-theme="status"] {
  --cr-color--background: var(--cr-color--status--light);
}

[data-theme="warning"] {
  --cr-color--background: var(--cr-color--warning--light);
}

[data-theme="gray--1"] {
  --cr-color--background: var(--cr-color--gray--1);
}

[data-theme="gray--2"] {
  --cr-color--background: var(--cr-color--gray--2);
}