/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
:root, 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 {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

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

html {
  /* 1rem to 10px trick */
  font-size: 62.5% !important;
}

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;
}

:root {
  --baseline: 2.4rem;
  --baseline-shift: 0;
  --gutter: 1.6rem;
  --offset: 1.6rem;
  --max_width: 100%;
  --breakpoint-base: 1px;
  --breakpoint-small: 576px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 992px;
  --breakpoint-xlarge: 1968px;
}

:root {
  --color-black: #000;
  --color-blue-10: #001c43;
  --color-blue-20: #002b67;
  --color-blue-30: #003681;
  --color-blue-40: #0045a6;
  --color-blue-50: #0051c3;
  --color-blue-60: #086fff;
  --color-blue-70: #4693ff;
  --color-blue-80: #82b6ff;
  --color-blue-90: #b9d6ff;
  --color-blue-100: #ecf4ff;
  --color-cyan-10: #061b20;
  --color-cyan-20: #0b333e;
  --color-cyan-30: #0d3e4b;
  --color-cyan-40: #115061;
  --color-cyan-50: #156074;
  --color-cyan-60: #1e89a5;
  --color-cyan-70: #30b6da;
  --color-cyan-80: #73cee6;
  --color-cyan-90: #ace2f0;
  --color-cyan-100: #e9f7fb;
  --color-gold-10: #261c00;
  --color-gold-20: #3e2d00;
  --color-gold-30: #4c3700;
  --color-gold-40: #644900;
  --color-gold-50: #735400;
  --color-gold-60: #a77a00;
  --color-gold-70: #dda100;
  --color-gold-80: #ffce4b;
  --color-gold-90: #ffeab2;
  --color-gold-100: #fff8e4;
  --color-gray-10: #1d1d1d;
  --color-gray-20: #313131;
  --color-gray-30: #3d3d3d;
  --color-gray-40: #4a4a4a;
  --color-gray-50: #595959;
  --color-gray-60: #797979;
  --color-gray-70: #999999;
  --color-gray-80: #b6b6b6;
  --color-gray-90: #d9d9d9;
  --color-gray-100: #f2f2f2;
  --color-green-10: #0a2614;
  --color-green-20: #0e381d;
  --color-green-30: #104122;
  --color-green-40: #15562d;
  --color-green-50: #196535;
  --color-green-60: #228b49;
  --color-green-70: #2db35e;
  --color-green-80: #55d584;
  --color-green-90: #a8e9c0;
  --color-green-100: #e3f8eb;
  --color-indigo-10: #170f58;
  --color-indigo-20: #221785;
  --color-indigo-30: #2c1ea9;
  --color-indigo-40: #3524cd;
  --color-indigo-50: #4b3bdc;
  --color-indigo-60: #7366e4;
  --color-indigo-70: #9d94ec;
  --color-indigo-80: #c2bdf3;
  --color-indigo-90: #dfdcf9;
  --color-indigo-100: #f1f0fc;
  --color-orange-10: #361a02;
  --color-orange-20: #482303;
  --color-orange-30: #592b04;
  --color-orange-40: #763905;
  --color-orange-50: #8d4406;
  --color-orange-60: #c05d08;
  --color-orange-70: #ee730a;
  --color-orange-80: #f8a054;
  --color-orange-90: #fbcda5;
  --color-orange-100: #fef1e6;
  --color-red-10: #3c0501;
  --color-red-20: #5a0801;
  --color-red-30: #780a02;
  --color-red-40: #970d02;
  --color-red-50: #b20f03;
  --color-red-60: #e81403;
  --color-red-70: #fc574a;
  --color-red-80: #fe9f97;
  --color-red-90: #feccc8;
  --color-red-100: #ffefee;
  --color-pink-10: #2d0210;
  --color-pink-20: #4e031c;
  --color-pink-30: #6a0426;
  --color-pink-40: #8d0633;
  --color-pink-50: #af0740;
  --color-pink-60: #e80954;
  --color-pink-70: #f85189;
  --color-pink-80: #fb97b9;
  --color-pink-90: #fdc9db;
  --color-pink-100: #fef1f5;
  --color-violet-10: #350b42;
  --color-violet-20: #490f5c;
  --color-violet-30: #5f1477;
  --color-violet-40: #741892;
  --color-violet-50: #8d1eb1;
  --color-violet-60: #b73cdf;
  --color-violet-70: #cf7ee9;
  --color-violet-80: #dfa8f1;
  --color-violet-90: #ebcaf6;
  --color-violet-100: #f7eafb;
  --color-white: #fff;
}

:root {
  --color-orange-marketing: #F6821F;
  --color-orange-light-marketing: #FBAD41;
  --color-red-marketing: #e04e64;
  --color-red-light-marketing: #e27179;
  --color-green-marketing: #71c492;
  --color-green-light-marketing: #9fd3b5;
  --color-cyan-marketing: #2da7cb;
  --color-cyan-light-marketing: #89c4e1;
  --color-purple-marketing: #7d4788;
  --color-purple-light-marketing: #af7baf;
  --color-blue-marketing: #00517f;
  --color-blue-light-marketing: #4f8cc8;
  --color-gray-marketing-10: #404242;
  --color-gray-marketing-30: #707070;
  --color-gray-marketing-50: #aaaaaa;
  --color-gray-marketing-70: #dddddd;
  --color-gray-marketing-90: #f5f5f5;
  --color-black-marketing: #222222;
}

:root {
  --color-brand: --color-orange-marketing;
  --color-chart-10: --color-blue-70;
  --color-chart-15: --color-blue-80;
  --color-chart-20: #FBAD41;
  --color-chart-25: #FCC373;
  --color-chart-30: --color-green-80;
  --color-chart-35: #7EDFA2;
  --color-chart-40: --color-pink-70;
  --color-chart-45: --color-pink-80;
  --color-chart-50: --color-violet-60;
  --color-chart-55: --color-violet-70;
  --color-chart-60: #FFE43E;
  --color-chart-65: --color-gold-90;
  --color-chart-70: --color-cyan-80;
  --color-chart-75: --color-cyan-90;
  --color-chart-80: --color-red-60;
  --color-chart-85: --color-red-70;
  --color-primary: var(--color-blue-50);
  --color-primary-hover: var(--color-blue-30);
  --color-link: var(--color-blue-70);
  --color-link-hover: var(--color-blue-50);
}

:root {
  --baseline: 2.4rem;
  --baseline-shift: 0;
  --gutter: 1.6rem;
  --offset: 1.6rem;
  --max_width: 100%;
  --breakpoint-base: 1px;
  --breakpoint-small: 576px;
  --breakpoint-medium: 768px;
  --breakpoint-large: 992px;
  --breakpoint-xlarge: 1968px;
}

html {
  --font-family--system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-line-height-copy: 1.5;
  --font-line-height-input: 1.4;
  --font-line-height-solid: 1;
  --font-line-height-title: 1.25;
  --font-size-10: 1rem;
  --font-size-12: 1.2rem;
  --font-size-14: 1.4rem;
  --font-size-16: 1.6rem;
  --font-size-20: 2rem;
  --font-size-24: 2.4rem;
  --font-size-32: 3.2rem;
  --font-size-48: 4.8rem;
  --font-size-64: 6.4rem;
  --font-size-80: 8rem;
  --font-weight-bold: 600;
  --font-weight-default: 400;
  --font-weight-light: 300;
  --font-weight-semibold: 500;
  --font-size-body: var(--font-size-16);
  --font-size-h1: var(--font-size-32);
  --font-size-h2: var(--font-size-20);
}

@media only screen and (min-width: 768px) {
  html {
    --font-size-h1: var(--font-size-48);
    --font-size-h2: var(--font-size-24);
  }
}
/* Settings */
:root {
  --baseline: 2.4rem;
  --baseline-shift: 0;
  --color: hsla(204, 80%, 72%, 0.25);
  --color-column-even: hsla(286, 51%, 44%, 0.25);
  --color-column-odd: hsla(204, 80%, 72%, 0.25);
  --color-text: hsla(204, 80%, 72%, 1);
  --columns: 4;
  --gutter: 1.6rem;
  --offset: 1.6rem;
  --max_width: 100%;
  --media-query: "base";
}

@media only screen and (min-width: 576px) {
  :root {
    --color: var(--color-column-even);
    --color-text: var(--color-column-even);
    --columns: 8;
    --gutter: 2.4em;
    --offset: 2.4em;
    --media-query: "small";
  }
}
@media only screen and (min-width: 768px) {
  :root {
    --color: var(--color-column-odd);
    --color-text: var(--color-column-odd);
    --columns: 12;
    --media-query: "medium";
  }
}
@media only screen and (min-width: 992px) {
  :root {
    --color: var(--color-column-even);
    --color-text: var(--color-column-even);
    --columns: 16;
    --media-query: "large";
  }
}
@media only screen and (min-width: 1968px) {
  :root {
    --color: var(--color-column-odd);
    --color-text: var(--color-column-odd);
    --columns: 16;
    --media-query: "xlarge";
  }
}
/* Helper variables */
:root {
  --background-baseline: repeating-linear-gradient(
    to bottom,
    var(--color),
    var(--color) 1px,
    transparent 1px,
    transparent var(--baseline)
  );
  --background-columns: repeating-linear-gradient(
    to right,
    var(--color),
    var(--color) var(--column-width),
    transparent var(--column-width),
    transparent var(--repeating-width)
  );
  --background-width: calc(100% + var(--gutter));
  --column-width: calc((100% / var(--columns)) - var(--gutter));
  --max-width: 1920px;
  --repeating-width: calc(100% / var(--columns));
}

html {
  position: relative;
}

html::after {
  color: var(--color-text);
  content: var(--media-query);
  font-family: var(--font-family--system);
  font-size: 1rem;
  left: 1rem;
  position: fixed;
  top: 1rem;
}

html::before {
  background-image: var(--background-columns), var(--background-baseline);
  background-position: 0 var(--baseline-shift);
  background-size: var(--background-width) 100%;
  bottom: 0;
  content: "";
  left: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
  min-height: 100vh;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: calc(100% - 2 * var(--offset));
  z-index: 1000;
}

.cf22-header {
  align-items: center;
  border-bottom: 1px solid var(--color-gray-90);
  display: flex;
  min-height: 5.9rem;
  overflow: hidden;
  width: 100%;
}

.cf22-header-controls {
  display: flex;
  margin-left: auto;
}
.cf22-header-controls > * {
  margin-right: 2rem;
}
.cf22-header-controls > *:last-child {
  margin-right: 2.4rem;
}

.cf22-container-main {
  display: flex;
  flex-direction: column;
  margin: 0 var(--gutter);
  max-width: 100%;
}

.cf22-row {
  margin-bottom: var(--baseline-grid-unit);
}

@media only screen and (min-width: 1px) {
  .cf22-row .cf22-button--primary,
.cf22-row .cf22-button--secondary {
    margin-bottom: calc(var(--baseline-grid-unit) / 2);
    width: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .cf22-row .cf22-button--primary,
.cf22-row .cf22-button--secondary {
    width: fit-content;
  }
  .cf22-row .cf22-button--secondary {
    margin-left: calc(var(--base-unit) * 3);
  }
}
@media only screen and (min-width: 1968px) {
  .cf22-container-main {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--max-width);
  }
}
:root {
  --base-unit: 0.8rem;
  --baseline-grid-unit: calc(var(--base-unit) * 3);
  --margin-unit: calc(var(--base-unit) * 3);
  --padding-unit: calc(var(--base-unit) * 3);
  --border-radius: 0.5rem;
}

.cf22-body-text, .cf22-data-point-label,
.cf22-data-point-value {
  color: var(--color-grey-20);
  font-family: var(--font-family--system);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-default);
  line-height: var(--baseline-grid-unit);
  max-width: 70rem;
}
.cf22-body-text .cf22-link, .cf22-data-point-label .cf22-link,
.cf22-data-point-value .cf22-link {
  color: var(--color-link);
  display: inline-block;
  font-weight: var(--font-weight-semibold);
}
.cf22-body-text .cf22-link:hover, .cf22-data-point-label .cf22-link:hover,
.cf22-data-point-value .cf22-link:hover {
  color: var(--color-link-hover);
  transition: 200ms;
}
.cf22-body-text .cf22-link:hover .cf22-icon, .cf22-data-point-label .cf22-link:hover .cf22-icon,
.cf22-data-point-value .cf22-link:hover .cf22-icon {
  fill: var(--color-link-hover);
}
.cf22-body-text .cf22-link .cf22-icon, .cf22-data-point-label .cf22-link .cf22-icon,
.cf22-data-point-value .cf22-link .cf22-icon {
  fill: var(--color-link);
  height: 1.8rem;
  vertical-align: text-bottom;
}

.cf22-h1 {
  color: var(--color-gray-20);
  font-family: var(--font-family--system);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: 3.6rem;
  padding-top: 3.1rem;
}

.cf22-h2 {
  color: var(--color-gray-20);
  font-family: var(--font-family--system);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: 2.4rem;
}

.cf22-sub-header {
  color: var(--color-gray-30);
  font-family: var(--font-family--system);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-default);
  line-height: 1;
}

.cf22-h1 + .cf22-sub-header {
  margin: 0.6rem 0 1.6rem;
}

.cf22-h1 + .cf22-body-text, .cf22-h1 + .cf22-data-point-label,
.cf22-h1 + .cf22-data-point-value {
  margin: 1.8rem 0 var(--baseline-grid-unit);
}

.cf22-sub-header + .cf22-body-text, .cf22-sub-header + .cf22-data-point-label,
.cf22-sub-header + .cf22-data-point-value {
  margin-bottom: var(--baseline-grid-unit);
}

@media only screen and (min-width: 768px) {
  .cf22-h1 {
    line-height: 1;
    padding-top: 4.3rem;
  }
}
.cf22-button, .cf22-button--secondary, .cf22-button--primary, .cf22-button--small {
  border: 1px solid;
  border-radius: var(--border-radius);
  color: var(--color-white);
  font-family: var(--font-family--system);
  font-size: var(--font-size-body);
  height: calc(var(--baseline-grid-unit) * 1.5);
  line-height: inherit;
  overflow: hidden;
  padding: 0 calc(var(--base-unit) * 4 - 1px);
  text-overflow: none;
  white-space: nowrap;
  width: fit-content;
}

.cf22-button-icon--header {
  align-items: center;
  background-color: var(--color-white);
  border: none;
  border-right: 1px solid var(--color-gray-90);
  color: var(--color-gray-20);
  display: flex;
  font-family: var(--font-family--system);
  font-size: 1.6rem;
  justify-content: center;
  min-height: 5.9rem;
  min-width: 5.9rem;
  padding: 1.6rem;
  -webkit-box-align: center;
}
.cf22-button-icon--header * {
  color: currentColor;
  fill: currentcolor;
  height: 2.4rem;
  width: 2.4rem;
}

.cf22-button-link--header {
  background-color: transparent;
  border: 1px solid red;
  color: var(--color-gray-20);
  cursor: pointer;
  display: flex;
  font-family: var(--font-family--system);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  padding: 1rem;
  text-align: center;
  user-select: none;
  white-space: nowrap;
}

.cf22-button--small {
  font-size: var(--font-size-12);
  height: var(--baseline-grid-unit);
}

.cf22-button--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.cf22-button--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  cursor: pointer;
  transition: 200ms;
}

.cf22-button--secondary {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.cf22-button--secondary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-white);
  cursor: pointer;
  transition: 200ms;
}

.cf22-icon {
  fill: currentColor;
  height: 1.6rem;
  margin-right: 0.5rem;
  width: 1.6rem;
}

.cf22-logo--with-text {
  display: none;
  padding: 0.8rem 0.8rem 0.8rem 2.4rem;
}

.cf22-logo--no-text {
  display: block;
}

@media only screen and (min-width: 576px) {
  .cf22-logo--no-text {
    display: none;
  }

  .cf22-logo--with-text {
    display: block;
  }
}
.cf22-container-table {
  display: inline-block;
  width: 100%;
}
.cf22-container-table .cf22-h2 {
  padding: calc(var(--padding-unit) / 2) 0;
  text-transform: capitalize;
}

.cf22-caption {
  display: table-caption;
  text-align: -webkit-center;
}

.cf22-table {
  border-collapse: separate;
  border-color: gray;
  border-spacing: 2px;
  table-layout: fixed;
  width: 100%;
}

.cf22-table,
.cf22-td,
.cf22-th {
  border-collapse: collapse;
}

.cf22-tbody {
  border-color: inherit;
  display: table-row-group;
  vertical-align: middle;
}

.cf22-thead {
  border-color: inherit;
  display: table-header-group;
}

.cf22-td,
.cf22-th {
  display: table-cell;
  font-family: var(--font-family--system);
  font-size: var(--font-size-14);
  padding: 0 calc(var(--padding-unit) / 2);
  text-align: left;
  width: 5rem;
}

.cf22-td--name,
.cf22-th--name {
  display: block;
  min-width: 20rem;
  width: 100%;
}

.cf22-td {
  border-top: 1px solid red;
  font-weight: var(--font-weigh-normal);
  vertical-align: middle;
}

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

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

.cf22-th {
  font-weight: var(--font-weight-bold);
  vertical-align: bottom;
}

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

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

.cf22-toolbar {
  display: flex;
  margin-bottom: calc(var(--margin-unit) / 2);
}
.cf22-toolbar .cf22-button--primary {
  text-transform: capitalize;
}

.cf22-tr {
  display: table-row;
  height: calc(var(--baseline-grid-unit) * 2);
  vertical-align: middle;
}
.cf22-tr:last-of-type .cf22-td {
  border-bottom: 1px solid red;
}

.cf22-container-data-summary > :last-child {
  margin-bottom: calc(var(--margin-unit) / 2);
}
.cf22-container-data-summary .cf22-h2 {
  padding-top: calc(var(--padding-unit) / 2);
  text-transform: capitalize;
}

.cf22-data-point-container {
  border-right: 1px solid grey;
  padding: 0 var(--padding-unit);
}
.cf22-data-point-container:first-of-type {
  padding-left: 0;
}
.cf22-data-point-container:last-of-type {
  border: 0;
}

.cf22-data-point-label {
  color: grey;
  font-size: var(--font-size-14);
  text-transform: capitalize;
}

.cf22-data-point-list {
  display: flex;
  flex-direction: row;
  padding: calc(var(--padding-unit) / 2) 0;
}

.cf22-data-point-value {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
}

.cf22-container-form-item {
  display: flex;
  flex-direction: column;
}

.cf22-input,
.cf22-select {
  border: 1px solid grey;
  border-radius: 0.4rem;
  font-family: var(--font-family--system);
  font-size: var(--font-size-15);
  height: calc(var(--baseline-grid-unit) + 10px);
  padding: 0 0.4rem;
}

.cf22-input--small,
.cf22-select--small {
  font-size: var(--font-size-12);
  height: calc(var(--baseline-grid-unit) - 2px);
}

.cf22-label {
  font-size: var(--font-size-14);
  font-family: var(--font-family--system);
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.4rem;
}

.cf22-select {
  box-sizing: initial;
}

.cf22-container-toolbar {
  align-items: flex-end;
  display: flex;
  margin-bottom: var(--baseline-grid-unit);
  padding-top: 0.6rem;
}
.cf22-container-toolbar .cf22-button--primary {
  text-transform: capitalize;
}
.cf22-container-toolbar .cf22-button--primary:first-of-type {
  margin-right: auto;
}
.cf22-container-toolbar > * {
  margin-right: 0.8rem;
}
.cf22-container-toolbar > *:last-child {
  margin-right: 0;
}

/*# sourceMappingURL=style-output.css.map */