@charset "UTF-8";
:root {
  --site-max-width: 1150px;
}
:root {
  --brand-green: hsl(157, 41%, 58%);
  --brand-blue: hsl(196, 58%, 62%);
  --background: white;
  --background-inverse: var(--c-gray-100);
  --background-brand: salmon;
  --layer-01: var(--c-gray-10);
  --layer-02: white: // container color on --layer-01
--layer-03:           var(--c-gray-10);
  --border-subtle: var(--c-gray-20);
  --border-strong: var(--c-gray-50);
  --border-inverse: var(--c-gray-100, hsl(0, 0%, 9%));
  --border-interactive: var(--c-blue-60, hsl(209, 100%, 44%));
  --text-primary: var(--c-gray-90);
  --text-secondary: var(--c-gray-60);
  --text-tertiary: var(--c-gray-50);
  --text-placeholder: var(--c-gray-40);
  --text-helper: var(--c-gray-60);
  --text-error: var(--c-red-60);
  --text-on-color: white;
  --text-inverse: white;
  --link-primary: var(--c-blue-60);
  --link-secondary: var(--c-blue-light-40);
  --link-visited: var(--c-purple-60);
  --link-inverse: var(--c-blue-10);
  --support--error: var(--c-red-60);
  --support--success: var(--c-green-50);
  --support--warning: var(--c-yellowa-30);
  --support--info: var(--c-blue-70);
  --support--error-inverse: var(--c-red-50);
  --support--success-inverse: var(--c-green-40);
  --support--warning-inverse: var(--c-yellowa-30);
  --support--info-inverse: var(--c-blue-50);
  --highlight: var(--c-blue-20);
  --overlay: hsla(0, 0%, 9%, 0.5);
  --button-primary: var(--c-blue-60);
  --button-secondary: var(--c-gray-80);
  --button-tertiary: var(--c-blue-60);
  --button-danger-primary: var(--c-red-60);
  --button-danger-secondary: var(--c-red-60);
  --button-separator: var(--c-gray-20);
  --background-active: var(--c-gray-30);
  --layer-active: var(--c-gray-30);
  --layer-accent-active: var(--c-gray-40);
  --button-primary-active: var(--c-blue-80);
  --button-secondary-active: var(--c-gray-60);
  --button-tertiary-active: var(--c-blue-80);
  --button-danger-active: var(--c-red-80);
  --focus: var(--c-blue-60);
  --focus-inset: white;
  --focus-inverse: white;
  --background-hover: var(--background);
}
.test {
  background-color: var(--layer);
  color: var(--text-primary);
}
:root {
  --c-gray-100: hsl(20, 4%, 9%);
  --c-gray-90: hsl(20, 4%, 15%);
  --c-gray-80: hsl(20, 4%, 22%);
  --c-gray-70: hsl(20, 4%, 32%);
  --c-gray-60: hsl(20, 4%, 44%);
  --c-gray-50: hsl(20, 4%, 55%);
  --c-gray-40: hsl(20, 4%, 66%);
  --c-gray-30: hsl(20, 4%, 78%);
  --c-gray-20: hsl(20, 4%, 88%);
  --c-gray-10: hsl(20, 4%, 96%);
  --c-purple-100: hsl(290, 60%, 9%);
  --c-purple-90: hsl(290, 60%, 15%);
  --c-purple-80: hsl(290, 60%, 22%);
  --c-purple-70: hsl(290, 60%, 32%);
  --c-purple-60: hsl(290, 60%, 44%);
  --c-purple-50: hsl(290, 60%, 55%);
  --c-purple-40: hsl(290, 60%, 66%);
  --c-purple-30: hsl(290, 60%, 78%);
  --c-purple-20: hsl(290, 60%, 88%);
  --c-purple-10: hsl(290, 60%, 96%);
  --c-blue-100: hsl(215, 60%, 9%);
  --c-blue-90: hsl(215, 60%, 15%);
  --c-blue-80: hsl(215, 60%, 22%);
  --c-blue-70: hsl(215, 60%, 32%);
  --c-blue-60: hsl(215, 60%, 44%);
  --c-blue-50: hsl(215, 60%, 55%);
  --c-blue-40: hsl(215, 60%, 66%);
  --c-blue-30: hsl(215, 60%, 78%);
  --c-blue-20: hsl(215, 60%, 88%);
  --c-blue-10: hsl(215, 60%, 96%);
  --c-greena-100: hsl(150, 80%, 9%);
  --c-greena-90: hsl(150, 80%, 15%);
  --c-greena-80: hsl(150, 80%, 22%);
  --c-greena-70: hsl(150, 80%, 32%);
  --c-greena-60: hsl(150, 80%, 44%);
  --c-greena-50: hsl(150, 80%, 55%);
  --c-greena-40: hsl(150, 80%, 66%);
  --c-greena-30: hsl(150, 80%, 78%);
  --c-greena-20: hsl(150, 80%, 88%);
  --c-greena-10: hsl(150, 80%, 96%);
  --c-jade: var(--c-greena-60);
  --c-greenb-100: hsl(100, 60%, 9%);
  --c-greenb-90: hsl(100, 60%, 15%);
  --c-greenb-80: hsl(100, 60%, 22%);
  --c-greenb-70: hsl(100, 60%, 32%);
  --c-greenb-60: hsl(100, 60%, 44%);
  --c-greenb-50: hsl(100, 60%, 55%);
  --c-greenb-40: hsl(100, 60%, 66%);
  --c-greenb-30: hsl(100, 60%, 78%);
  --c-greenb-20: hsl(100, 60%, 88%);
  --c-greenb-10: hsl(100, 60%, 96%);
  --c-mint: var(--c-greenb-40);
  --c-yellowa-base: hsl(51, 100%, 50%);
  --c-yellowa-100: hsl(50, 100%, 9%);
  --c-yellowa-90: hsl(50, 100%, 15%);
  --c-yellowa-80: hsl(50, 100%, 22%);
  --c-yellowa-70: hsl(50, 100%, 32%);
  --c-yellowa-60: hsl(50, 100%, 44%);
  --c-yellowa-50: hsl(50, 100%, 55%);
  --c-yellowa-40: hsl(50, 100%, 66%);
  --c-yellowa-30: hsl(50, 100%, 78%);
  --c-yellowa-20: hsl(50, 100%, 88%);
  --c-yellowa-10: hsl(50, 100%, 96%);
  --c-canary: var(--c-yellowa-50);
  --c-banana: var(--c-yellowa-20);
  /*
--c-yellowb-base: hsl(51, 100%, 89%);

--c-yellowa-100: hsl(51, 100%, 9%);
--c-yellowa-90:  hsl(51, 100%, 15%);
--c-yellowa-80:  hsl(51, 100%, 22%);
--c-yellowa-70:  hsl(51, 100%, 32%);
--c-yellowa-60:  hsl(51, 100%, 44%);
--c-yellowa-50:  hsl(51, 100%, 55%); // Canary
--c-yellowa-40:  hsl(51, 100%, 66%); 
--c-yellowa-30:  hsl(51, 100%, 78%);
--c-yellowa-20:  hsl(51, 100%, 88%); // Banana
--c-yellowa-10:  hsl(51, 100%, 96%);
*/
  --c-orange-base: hsl(24, 100%, 50%);
  --c-orange-100: hsl(25, 100%, 9%);
  --c-orange-90: hsl(25, 100%, 15%);
  --c-orange-80: hsl(25, 100%, 22%);
  --c-orange-70: hsl(25, 100%, 32%);
  --c-orange-60: hsl(25, 100%, 44%);
  --c-orange-50: hsl(25, 100%, 55%);
  --c-orange-40: hsl(25, 100%, 66%);
  --c-orange-30: hsl(25, 100%, 78%);
  --c-orange-20: hsl(25, 100%, 88%);
  --c-orange-10: hsl(25, 100%, 96%);
  --c-orange: var(--c-orange-50);
  --c-pink-base: hsl(342, 92%, 91%);
  --c-pink-100: hsl(340, 90%, 9%);
  --c-pink-90: hsl(340, 90%, 15%);
  --c-pink-80: hsl(340, 90%, 22%);
  --c-pink-70: hsl(340, 90%, 32%);
  --c-pink-60: hsl(340, 90%, 44%);
  --c-pink-50: hsl(340, 90%, 55%);
  --c-pink-40: hsl(340, 90%, 66%);
  --c-pink-30: hsl(340, 90%, 78%);
  --c-pink-20: hsl(340, 90%, 88%);
  --c-pink-10: hsl(340, 90%, 96%);
  --c-pink: var(--c-pink-20);
  --c-blue-dark-base: hsl(231, 39%, 28%);
  --c-blue-dark-100: hsl(230, 40%, 9%);
  --c-blue-dark-90: hsl(230, 40%, 15%);
  --c-blue-dark-80: hsl(230, 40%, 22%);
  --c-blue-dark-70: hsl(230, 40%, 32%);
  --c-blue-dark-60: hsl(230, 40%, 44%);
  --c-blue-dark-50: hsl(230, 40%, 55%);
  --c-blue-dark-40: hsl(230, 40%, 66%);
  --c-blue-dark-30: hsl(230, 40%, 78%);
  --c-blue-dark-20: hsl(230, 40%, 88%);
  --c-blue-dark-10: hsl(230, 40%, 96%);
  --c-indigo: var(--c-blue-dark-70);
  --c-blue-light-base: hsl(199, 70%, 82%);
  --c-blue-light-100: hsl(200, 70%, 9%);
  --c-blue-light-90: hsl(200, 70%, 15%);
  --c-blue-light-80: hsl(200, 70%, 22%);
  --c-blue-light-70: hsl(200, 70%, 32%);
  --c-blue-light-60: hsl(200, 70%, 44%);
  --c-blue-light-50: hsl(200, 70%, 55%);
  --c-blue-light-40: hsl(200, 70%, 66%);
  --c-blue-light-30: hsl(200, 70%, 78%);
  --c-blue-light-20: hsl(200, 70%, 88%);
  --c-blue-light-10: hsl(200, 70%, 96%);
  --c-skyblue: var(--c-blue-light-30);
  --c-temp: hsl(270, 50%, 40%);
  --c-digi-blue: hsl(218, 100%, 47%);
  --c-digi-blue--hover: hsl(198, 100%, 61%);
  --c-digi-blue--active: hsl(198, 93%, 43%);
  --c-prince-purple: #6b5aed;
  --c-prince-purple: hsl(247, 80%, 64%);
  --c-scheemda-crimson: #B52843;
  --c-scheemda-crimson: hsl(349, 64%, 43%);
  --c-crimson-100: hsl(349, 64%, 9%);
  --c-crimson-90: hsl(349, 64%, 15%);
  --c-crimson-80: hsl(349, 64%, 22%);
  --c-crimson-70: hsl(349, 64%, 32%);
  --c-crimson-60: hsl(349, 64%, 44%);
  --c-crimson-50: hsl(349, 64%, 55%);
  --c-crimson-40: hsl(349, 64%, 66%);
  --c-crimson-30: hsl(349, 64%, 78%);
  --c-crimson-20: hsl(349, 64%, 88%);
  --c-crimson-10: hsl(349, 64%, 96%);
  /* CSS HSL */
  --bright-maroon: hsl(349, 64%, 43%);
  --platinum: hsl(120, 2%, 92%);
  --floral-white: hsl(35, 60%, 96%);
  --celeste: hsl(175, 63%, 81%);
  --tufts-blue: hsl(203, 99%, 48%);
}
.color-test-test-chest {
  /* CSS HEX */
  --bright-maroon: #b42741ff;
  --platinum: #eaebeaff;
  --floral-white: #fbf6efff;
  --celeste: #b1ede8ff;
  --tufts-blue: #0197f6ff;
  /* CSS HSL */
  --bright-maroon: hsl(349, 64%, 43%);
  --platinum: hsl(120, 2%, 92%);
  --floral-white: hsl(35, 60%, 96%);
  --celeste: hsl(175, 63%, 81%);
  --tufts-blue: hsl(203, 99%, 48%);
}
/* SCSS HEX */
/*
$bright-maroon: #b42741ff;
$platinum: #eaebeaff;
$floral-white: #fbf6efff;
$celeste: #b1ede8ff;
$tufts-blue: #0197f6ff;
*/
/* SCSS HSL */
/*
$bright-maroon: hsla(349, 64%, 43%, 1);
$platinum: hsla(120, 2%, 92%, 1);
$floral-white: hsla(35, 60%, 96%, 1);
$celeste: hsla(175, 63%, 81%, 1);
$tufts-blue: hsla(203, 99%, 48%, 1);
*/
/* SCSS RGB */
/*
$bright-maroon: rgba(180, 39, 65, 1);
$platinum: rgba(234, 235, 234, 1);
$floral-white: rgba(251, 246, 239, 1);
$celeste: rgba(177, 237, 232, 1);
$tufts-blue: rgba(1, 151, 246, 1);
*/
/* SCSS Gradient */
/*
$gradient-top: linear-gradient(0deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-right: linear-gradient(90deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-bottom: linear-gradient(180deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-left: linear-gradient(270deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-top-right: linear-gradient(45deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-bottom-right: linear-gradient(135deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-top-left: linear-gradient(225deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-bottom-left: linear-gradient(315deg, #b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
$gradient-radial: radial-gradient(#b42741ff, #eaebeaff, #fbf6efff, #b1ede8ff, #0197f6ff);
*/
:root {
  --ui-background: white;
  --interactive-01: var(--c-digi-blue);
  --interactive-01--hover: var(--c-digi-blue--hover);
  --interactive-01--active: var(--c-digi-blue--active);
  --interactive-02: var(--c-gray-80);
  --interactive-03: var(--c-purple-60);
  --danger-01: red;
  --danger-02: red;
  --ui-01: var(--c-gray-10);
  --ui-02: white;
  --ui-03: var(--c-gray-20);
  --ui-04: var(--c-gray-50);
  --ui-05: var(--c-gray-100);
  --text-01: var(--c-gray-100);
  --text-02: var(--c-gray-70);
  --text-03: var(--c-gray-40);
  --text-04: white;
  --text-05: var(--c-gray-60);
  --button-separator: var(--c-gray-20);
  --decorative-01: var(--c-gray-20);
  --text-error: red;
  --link-01: var(--c-purple-60);
  --inverse-link: var(--c-purple-40);
}
body[data-theme="theme--gray-10"] {
  --ui-background: var(--c-gray-10);
  --interactive-01: var(--c-digi-blue);
  --interactive-02: var(--c-gray-80);
  --interactive-03: var(--c-purple-60);
  --danger-01: red;
  --danger-02: red;
  --ui-01: white;
  --ui-02: var(--c-gray-10);
  --ui-03: var(--c-gray-20);
  --ui-04: var(--c-gray-50);
  --ui-05: var(--c-gray-100);
  --text-01: var(--c-gray-100);
  --text-02: var(--c-gray-70);
  --text-03: var(--c-gray-40);
  --text-04: white;
  --text-05: var(--c-gray-60);
  --button-separator: var(--c-gray-20);
  --decorative-01: var(--c-gray-20);
  --text-error: red;
  --link-01: var(--c-purple-60);
  --inverse-link: var(--c-purple-40);
}
:root {
  /*
--c-brand-green-900: ;
--c-brand-green-800: ;
--c-brand-green-700: ;
--c-brand-green-600: ;
--c-brand-green-500: ;
--c-brand-green-400: ;
--c-brand-green-300: ;
--c-brand-green-200: ;
--c-brand-green-100: ;

--c-brand-blue-900: ;
--c-brand-blue-800: ;
--c-brand-blue-700: ;
--c-brand-blue-600: ;
--c-brand-blue-500: ;
--c-brand-blue-400: ;
--c-brand-blue-300: ;
--c-brand-blue-200: ;
--c-brand-blue-100: ;



// Primary colors

--c-primary-900: ;
--c-primary-800: ;
--c-primary-700: ;
--c-primary-600: ;
--c-primary-500: ;
--c-primary-400: ;
--c-primary-300: ;
--c-primary-200: ;
--c-primary-100: ;



// Secondary colors

--c-secondary-900: ;
--c-secondary-800: ;
--c-secondary-700: ;
--c-secondary-600: ;
--c-secondary-500: ;
--c-secondary-400: ;
--c-secondary-300: ;
--c-secondary-200: ;
--c-secondary-100: ;

*/
  /*
--c-neutral-warm-900: hsl(0, 3%, 10%);
--c-neutral-warm-800: hsl(0, 3%, 20%);
--c-neutral-warm-700: hsl(0, 3%, 30%);
--c-neutral-warm-600: hsl(0, 3%, 40%);
--c-neutral-warm-500: hsl(0, 3%, 50%);
--c-neutral-warm-400: hsl(0, 3%, 60%);
--c-neutral-warm-300: hsl(0, 3%, 70%);
--c-neutral-warm-200: hsl(0, 3%, 80%);
--c-neutral-warm-100: hsl(0, 3%, 90%);

--c-neutral-cold-900: hsl(200, 3%, 10%);
--c-neutral-cold-800: hsl(200, 3%, 20%);
--c-neutral-cold-700: hsl(200, 3%, 30%);
--c-neutral-cold-600: hsl(200, 3%, 40%);
--c-neutral-cold-500: hsl(200, 3%, 50%);
--c-neutral-cold-400: hsl(200, 3%, 60%);
--c-neutral-cold-300: hsl(200, 3%, 70%);
--c-neutral-cold-200: hsl(200, 3%, 80%);
--c-neutral-cold-100: hsl(200, 3%, 90%);
*/
  /*
--c-gray-100:   #161616;
--c-gray-90:    #262626;
--c-gray-80:    #393939;
--c-gray-70:    #525252;
--c-gray-60:    #6f6f6f;
--c-gray-50:    #8d8d8d;
--c-gray-40:    #a8a8a8;
--c-gray-30:    #c6c6c6;
--c-gray-20:    #e0e0e0;
--c-gray-10:    #f4f4f4;
*/
  /*

//Semantic colors8
--c-error-900: ;
--c-error-800: ;
--c-error-700: ;
--c-error-600: ;
--c-error-500: ;
--c-error-400: ;
--c-error-300: ;
--c-error-200: ;
--c-error-100: ;

--c-warning-900: ;
--c-warning-800: ;
--c-warning-700: ;
--c-warning-600: ;
--c-warning-500: ;
--c-warning-400: ;
--c-warning-300: ;
--c-warning-200: ;
--c-warning-100: ;

--c-success-900: ;
--c-success-800: ;
--c-success-700: ;
--c-success-600: ;
--c-success-500: ;
--c-success-400: ;
--c-success-300: ;
--c-success-200: ;
--c-success-100: ;

*/
}
:root {
  --c-color-01: #3b3e47;
  --c-color-02: #f8d14e;
  --c-color-03: #e57e6d;
  --c-color-04: #88d1c2;
  --c-color-05: #fdf7f0;
}
.class-1 {
  background-color: black;
  color: hsl(0, 0%, 50%);
}
.class-2 {
  background-color: white;
  color: hsl(0, 0%, 49%);
}
.c-test {
  background-color: hsl(143, 54%, 47%);
  color: hsl(180, 42%, 21%);
}
:root {
  --c-success: hsl(125, 90%, 40%);
  --c-success--l: hsl(125, 90%, 96%);
  --c-success--d: hsl(125, 90%, 22%);
  --c-warning: hsl(36, 80%, 50%);
  --c-warning--l: hsl(36, 99%, 96%);
  --c-error: hsl(9, 70%, 50%);
  --c-error--l: hsl(9, 86%, 96%);
  --c-info: hsl(206, 70%, 50%);
  --c-info--l: hsl(206, 66%, 96%);
  --c-es-green: hsl(155, 100%, 39%);
  --c-es-orange: hsl(34, 98%, 62%);
  --c-es-red: hsl(351, 73%, 58%);
  --c-es-blue-darker: hsl(210, 90%, 60%);
  --c-es-blue: hsl(200, 100%, 70%);
  --c-jade: var(--c-greena-60);
  --c-mint: var(--c-greenb-40);
  --c-canary: var(--c-yellowa-50);
  --c-banana: var(--c-yellowa-20);
  --c-orange: var(--c-orange-50);
  --c-pink: var(--c-pink-20);
  --c-indigo: var(--c-blue-dark-70);
  --c-skyblue: var(--c-blue-light-30);
}
:root {
  --font-fam--sans: sans-serif;
  --font-fam--serif: Georgia;
  --font-fam--primary: var(--font-fam--sans);
  --font-fam--secondary: var(--font-fam--serif);
  --font-size--base: 1rem;
  --font-size--ratio: 1.2;
  --font-size--xs: calc((var(--font-size--base) / var(--font-size--ratio)) / var(--font-size--ratio) / var(--font-size--ratio));
  --font-size--sm: calc(var(--font-size--base) / var(--font-size--ratio));
  --font-size--md: var(--font-size--base);
  --font-size--lg: calc(var(--font-size--md) * var(--font-size--ratio));
  --font-size--xl: calc(var(--font-size--lg) * var(--font-size--ratio));
  --font-size--xxl: calc(var(--font-size--xl) * var(--font-size--ratio));
  --font-size--xxxl: calc(var(--font-size--xxl) * var(--font-size--ratio));
  --font-weight--thin: 100;
  --font-weight--extra-light: 200;
  --font-weight--light: 300;
  --font-weight--regular: 400;
  --font-weight--medium: 500;
  --font-weight--semi-bold: 600;
  --font-weight--bold: 700;
  --font-weight--extra-bold: 800;
  --font-weight--black: 900;
}
.font-size--xs {
  font-size: var(--font-size--xs);
}
.font-size--sm {
  font-size: var(--font-size--sm);
}
.font-size--md {
  font-size: var(--font-size--md);
}
.font-size--lg {
  font-size: var(--font-size--lg);
}
.font-size--xl {
  font-size: var(--font-size--xl);
}
.font-size--xxl {
  font-size: var(--font-size--xxl);
}
.font-size--xxxl {
  font-size: var(--font-size--xxxl);
}
/**
 * Spacing
**/
:root {
  --spacing--tiny: 0.5rem;
  --spacing--small: 1rem;
  --spacing--base: 1.5rem;
  --spacing--large: 3rem;
  --spacing--x-large: 4rem;
  --spacing--none: 0;
  --spacing--xs: 0.25rem;
  --spacing--sm: 0.5rem;
  --spacing--md: 1rem;
  --spacing--lg: 1.5rem;
  --spacing--xl: 3rem;
  --spacing--xxl: 5rem;
}
:root {
  --gutter: 2rem;
  --half-gutter: 1rem;
}
.demo-spacing {
  --spacing-size: 1em;
  width: var(--spacing-size);
  height: var(--spacing-size);
  vertical-align: baseline;
  display: inline-block;
  background-color: var(--c-color-03);
}
.demo-spacing--tiny {
  --spacing-size: var(--spacing--tiny);
}
.demo-spacing--small {
  --spacing-size: var(--spacing--small);
}
.demo-spacing--base {
  --spacing-size: var(--spacing--base);
}
.demo-spacing--large {
  --spacing-size: var(--spacing--large);
}
.demo-spacing--x-large {
  --spacing-size: var(--spacing--x-large);
}
.demo-spacing-table td {
  vertical-align: baseline;
}
.demo-spacing-table td:first-child {
  text-align: right;
  padding-bottom: 2rem;
  padding-right: 1.5rem;
}
:root {
  --ui-text-step: 10%;
  --ui-text-dark: 80%;
  --ui-text-light: 10%;
  --lig-step: 3%;
  --base-lig-dark: 8%;
  --base-lig-light: 76%;
  --ui-hue: 180;
  --ui-sat: 10%;
  --link-hue: 209;
  --link-sat: 100%;
  --link-lig: 55%;
  --brand-hue: 159;
  --brand-sat: 43%;
  --brand-lig: 57%;
  --standout-hue: 45;
  --standout-sat: 80%;
  --standout-lig: 84%;
  --cycle-hue: 190;
  --cycle-sat: 40%;
  --cycle-lig: 20%;
}
.light-theme,
body,
body[data-theme="light"] {
  --text-base: var(--ui-text-light);
  --ui-lig: var(--base-lig-light);
  --txt-shade-1: hsl(0, 0%, var(--text-base));
  --txt-shade-2: hsl(0, 0%, calc( var(--ui-text-step)  +  var(--text-base) ));
  --txt-shade-3: hsl(0, 0%, calc(2 *  var(--ui-text-step)  +  var(--text-base) ));
  --ui-dark-4: hsl(var(--ui-hue), var(--ui-sat), var(--ui-lig));
  --ui-dark-3: hsl(var(--ui-hue), var(--ui-sat), calc( var(--lig-step)  +  var(--ui-lig) ));
  --ui-dark-2: hsl(var(--ui-hue), var(--ui-sat), calc(2 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-dark-1: hsl(var(--ui-hue), var(--ui-sat), calc(3 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-med: hsl(var(--ui-hue), var(--ui-sat), calc(4 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-1: hsl(var(--ui-hue), var(--ui-sat), calc(5 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-2: hsl(var(--ui-hue), var(--ui-sat), calc(6 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-3: hsl(var(--ui-hue), var(--ui-sat), calc(7 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-4: hsl(var(--ui-hue), var(--ui-sat), calc(8 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-2-alt: hsla(var(--ui-hue), var(--ui-sat), calc(6 * var(--lig-step)  +  var(--ui-lig) ), 0.8);
}
.dark-theme,
body[data-theme="dark"] {
  --text-base: var(--ui-text-dark);
  --ui-lig: var(--base-lig-dark);
  --txt-shade-1: hsl(0, 0%, var(--text-base));
  --txt-shade-1: hsl(0, 0%, 80%);
  --txt-shade-2: hsl(0, 0%, calc( var(--ui-text-step)  +  var(--text-base) ));
  --txt-shade-3: hsl(0, 0%, calc(2 *  var(--ui-text-step)  +  var(--text-base) ));
  --ui-dark-4: hsl(var(--ui-hue), var(--ui-sat), var(--ui-lig));
  --ui-dark-3: hsl(var(--ui-hue), var(--ui-sat), calc( var(--lig-step)  +  var(--ui-lig) ));
  --ui-dark-2: hsl(var(--ui-hue), var(--ui-sat), calc(2 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-dark-1: hsl(var(--ui-hue), var(--ui-sat), calc(3 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-med: hsl(var(--ui-hue), var(--ui-sat), calc(4 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-1: hsl(var(--ui-hue), var(--ui-sat), calc(5 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-2: hsl(var(--ui-hue), var(--ui-sat), calc(6 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-3: hsl(var(--ui-hue), var(--ui-sat), calc(7 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-4: hsl(var(--ui-hue), var(--ui-sat), calc(8 * var(--lig-step)  +  var(--ui-lig) ));
  --ui-light-2-alt: hsla(var(--ui-hue), var(--ui-sat), calc(6 * var(--lig-step)  +  var(--ui-lig) ), 0.75);
  --link-hue: 209;
  --link-sat: 100%;
  --link-lig: 68%;
  --ui-hue: 180;
  --ui-sat: 6%;
}
body {
  --link-color: hsl(var(--link-hue), var(--link-sat), var(--link-lig));
  --color-brand: hsl(var(--brand-hue), var(--brand-sat), var(--brand-lig));
  --color-standout: hsl(var(--standout-hue), var(--standout-sat), var(--standout-lig));
  --color-cycle: hsl(var(--cycle-hue), var(--cycle-sat), var(--cycle-lig));
}
.flow > * + * {
  margin-top: var(--flow-space, 1em);
  margin-bottom: 0;
}
.transition--smooth {
  transition: all 0.1s ease-in-out;
}
* {
  box-sizing: border-box;
}
img {
  width: auto;
  max-width: 100%;
}
.button {
  --b-text-size: 1rem;
  --b-line-height: 1.25;
  --b-padding-block: 0.875em;
  --b-padding-inline: 1.25em;
  --b-border-size: 0px;
  --b-border-radius: 0.5em;
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
  vertical-align: top;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-block-start: calc(var(--b-padding-block) - var(--b-border-size));
  padding-block-end: calc(var(--b-padding-block) - var(--b-border-size));
  padding-inline-start: calc(var(--b-padding-inline) - var(--b-border-size));
  padding-inline-end: calc(var(--b-padding-inline) - var(--b-border-size));
  background-color: var(--interactive-01);
  color: var(--text-04);
  border: var(--b-border-size) solid var(--interactive-01);
  border-radius: var(--b-border-radius);
  font-size: var(--b-text-size, --font-size--1);
  line-height: var(--b-line-height);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.1s ease-in-out;
}
.button > svg {
  display: block;
  width: calc(var(--b-text-size) * var(--b-line-height));
  height: calc(var(--b-text-size) * var(--b-line-height));
}
.button > svg > * {
  stroke: currentColor;
}
.button:hover,
.button.hover {
  background-color: var(--interactive-01--hover);
}
.button:active,
.button.active {
  background-color: var(--interactive-01--active);
}
.button--icon-start > svg {
  margin-inline-end: 0.5em;
}
.button--icon-end > svg {
  margin-inline-start: 0.5em;
}
.button--small {
  --b-padding-block: 0.5em;
  --b-padding-inline: 0.75em;
}
.button--large {
  --b-padding-block: 1.25em;
  --b-padding-inline: 1.5em;
}
.button--icon-only {
  --b-padding-inline: var(--b-padding-block);
}
.button--stretch {
  width: 100%;
  flex: 0 1 auto;
  justify-content: center;
}
.button--secondary {
  --b-border-size: 1px;
  background-color: #fff;
  color: var(--interactive-01);
  border-color: var(--c-gray-20);
}
.button--secondary:hover {
  background-color: #fff;
  color: var(--interactive-01--hover);
  border-color: currentColor;
}
.button--secondary:active {
  background-color: #fff;
  color: var(--interactive-01--active);
  border-color: currentColor;
}
.button--link {
  background-color: transparent;
  color: var(--interactive-01);
}
.button--link:hover,
.button--link:active {
  background-color: transparent;
  color: var(--interactive-01--hover);
}
.button--go-back {
  --b-padding-block: 0.625em;
  --b-padding-inline: 0.625em;
  --b-border-size: 1px;
  --b-text-size: 0.875rem;
  --b-line-height: 1;
  background-color: #fff;
  color: var(--interactive);
  border-color: var(--border-subtle);
  font-weight: 400;
}
@media screen and (max-width: 41.75rem) {
  .button--go-back {
    display: none;
  }
}
.button--go-back > svg {
  margin-inline-end: 0.5em;
}
.button--go-back:hover,
.button--go-back:active {
  background-color: transparent;
  border-color: var(--interactive);
}
.button-group {
  display: flex;
  flex-wrap: wrap;
}
.button-group > .button:not(:last-child) {
  margin-right: 0.5em;
}
.button--full-width,
.button--block {
  display: flex;
}
.button--inline {
  display: inline-flex;
}
.test-button-group {
  display: flex;
  gap: 1em;
  align-items: flex-start;
}
.test-button {
  --inline-padding: 1rem;
  --font-size: 0.875rem;
  --line-height: 1rem;
  --icon-size: var(--line-height);
  --button-height: 2rem;
  --button-gutter: 0.25rem;
  --button-height-a: calc(var(--button-height) - var(--line-height));
  --block-padding: calc(0.5 * var(--button-height-a));
  border: none;
  border-radius: 0.33rem;
  display: inline-flex;
  padding-inline-start: var(--inline-padding);
  padding-inline-end: var(--inline-padding);
  padding-block-start: var(--block-padding);
  padding-block-end: var(--block-padding);
  gap: var(--button-gutter);
  font-size: var(--font-size);
  line-height: var(--line-height);
  background-color: salmon;
}
.test-button > svg {
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
}
.test-button--md {
  --inline-padding: 1.5rem;
  --font-size: 1rem;
  --line-height: 1.25rem;
  --button-height: 2.75rem;
  --button-gutter: 0.5rem;
}
.test-button--lg {
  --inline-padding: 2rem;
  --font-size: 1rem;
  --line-height: 1.5rem;
  --button-height: 3.25rem;
  --button-gutter: 0.5rem;
}
.test-button--icon-only {
  --inline-padding: var(--block-padding);
}
.content-link {
  text-decoration: none;
}
body {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--md);
  color: hsl(0, 0%, 10%);
}
p,
li,
dt,
dd,
blockquote,
.copy {
  font-size: var(--font-size--md);
  font-weight: var(--font-weight--regular);
  line-height: 1.4;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
h1,
h2,
h3,
h4 {
  margin-top: 0;
  margin-bottom: 0.25em;
}
h1,
.heading--xxl,
.title {
  font-size: var(--font-size--xxl);
  font-weight: var(--font-weight--semi-bold);
}
h2,
.heading--xl {
  font-size: var(--font-size--xl);
  font-weight: var(--font-weight--semi-bold);
}
h3,
.heading--lg {
  font-size: var(--font-size--lg);
  font-weight: var(--font-weight--semi-bold);
}
h4,
.heading--md {
  font-size: var(--font-size--md);
  font-weight: var(--font-weight--bold);
}
strong {
  font-weight: var(--font-weight--semi-bold);
}
em {
  font-style: italic;
}
.type-intro {
  font-size: calc(var(--font-size--md) * 1.125);
  font-weight: var(--font-weight--regular);
}
.type-intro[introred] {
  color: red;
}
.title {
  font-weight: var(--font-weight--semi-bold);
  font-size: var(--font-size--xxl);
  line-height: 1.1;
  letter-spacing: 0;
}
.title--lg {
  font-size: calc(var(--font-size--xxl) * 1.5);
}
.headline {
  font-weight: var(--font-weight--semi-bold);
  font-size: var(--font-size--xl);
  line-height: 1.2;
  letter-spacing: 0;
}
.headline--sm {
  font-size: var(--font-size--lg);
}
.body-copy {
  font-weight: var(--font-weight--regular);
  font-size: var(--font-size--md);
  line-height: 1.4;
  letter-spacing: 0;
}
.callout {
  font-weight: var(--font-weight--regular);
  font-size: var(--font-size--md);
  line-height: 1;
  letter-spacing: 0;
}
.subhead {
  font-weight: var(--font-weight--semi-bold);
  font-size: var(--font-size--lg);
  line-height: 1.2;
  letter-spacing: 0;
}
.footnote {
  font-weight: var(--font-weight--regular);
  font-size: var(--font-size--sm);
  line-height: 1.4;
  letter-spacing: 0;
}
.caption {
  font-weight: var(--font-weight--regular);
  font-size: var(--font-size--sm);
  line-height: 1.4;
  letter-spacing: 0;
}
.temp-standout-content {
  font-size: var(--font-size--sm);
  padding-top: var(--spacing--xl);
  padding-bottom: var(--spacing--xl);
  padding-left: var(--spacing--xl);
  padding-right: var(--spacing--xl);
  background-color: var(--c-mint);
}
.text-center {
  text-align: center;
}
/*
.body-copy {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--1);
  line-height: 1.5;
  font-weight: var(--font-weight--regular);
}

.body-copy-small {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--0875);
  line-height: 1.25;
  font-weight: var(--font-weight--regular);
  letter-spacing: .01em;
}

.body-copy-large {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--1125);
  line-height: 1.5;
  font-weight: var(--font-weight--regular);
}
*/
/*
.heading-01 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--0875);
  line-height: 1.125;
  font-weight: var(--font-weight--semi-bold);
  letter-spacing: 0.01em;
}

.heading-02 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--1);
  line-height: 1.25;
  font-weight: var(--font-weight--semi-bold);
}

.heading-03 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--125);
  line-height: 1.5;
  font-weight: var(--font-weight--regular);
}

.heading-04 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--175);
  line-height: 2;
  font-weight: var(--font-weight--regular);
}

.heading-05 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--2);
  line-height: 2.5;
  font-weight: var(--font-weight--regular);
}

.heading-06 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--2625);
  line-height: 3.125;
  font-weight: var(--font-weight--light);
}

.heading-07 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--3375);
  line-height: 4;
  font-weight: var(--font-weight--light);
}
*/
.label-01 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--875);
  line-height: 1.25;
  font-weight: var(--font-weight--regular);
  letter-spacing: 0.01em;
}
.helper-text-01 {
  font-family: var(--font-fam--sans);
  font-size: var(--font-size--75);
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.label-overview {
  list-style-type: none;
  padding-left: 0;
  margin-top: var(--spacing--md);
  margin-bottom: var(--spacing--md);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.label-overview li {
  padding-top: 0.125em;
  padding-bottom: 0.125em;
  padding-right: 1em;
}
.label {
  display: inline-block;
  font-size: var(--font-size--sm);
  line-height: 1;
  white-space: nowrap;
  padding-inline-start: 1.5em;
  padding-inline-end: 1.5em;
  padding-block-start: 0.5em;
  padding-block-end: 0.5em;
  border-radius: 2em;
  background-color: salmon;
}
.label--orange {
  background-color: hsl(39, 80%, 80%);
}
.label--purple {
  background-color: hsl(300, 80%, 80%);
}
.label--green {
  background-color: hsl(120, 80%, 80%);
}
.label--blue {
  background-color: hsl(240, 80%, 80%);
}
.dev-eyebrow {
  font-weight: var(--font-weight--bold);
  font-size: var(--font-size--xs);
  line-height: 1.1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #666;
}
.dev-eyebrow + h1 {
  margin-top: 0;
}
figure {
  margin-top: var(--spacing--xl);
  margin-left: 0;
  margin-right: 0;
}
figure img {
  width: 100%;
}
figure figcaption {
  padding-block-start: var(--spacing--md);
  padding-block-end: var(--spacing--md);
  padding-inline-start: var(--spacing--md);
  padding-inline-end: var(--spacing--md);
}
figure figcaption p:last-child {
  margin-bottom: 0;
  padding-bottom: 1em;
  border-bottom: 1px solid #dadada;
}
@media screen and (min-width: 56.375rem) {
  figure {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  figure img {
    flex: 1 0 65%;
  }
}
@media screen and (min-width: 56.375rem) {
  figure:nth-child(even) img {
    order: 2;
  }
}
.flow figure + figure {
  margin-top: var(--spacing--xxl);
}
.abp-header {
  display: grid;
  grid-template-columns: 3rem auto 3rem;
  padding-top: 50px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  --abp-c-greenish: #69c09e;
  --abp-c-blueish: #67b8d6;
  background: linear-gradient(to right, #69c09e, #67b8d6);
  position: sticky;
  top: 0;
  z-index: 900;
}
.abp-header__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.abp-header__content .page-icon {
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.abp-header__content .page-icon > svg {
  width: 1.75rem;
  height: 1.75rem;
  color: #fff;
}
.abp-header__content .page-group {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 5;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 0.25rem;
}
.abp-header__content .page-heading {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}
.abp-header__control-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.abp-header__control {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  width: 3rem;
  height: 3rem;
}
.abp-header__control > svg {
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
}
.abp-header__control--home > svg {
  width: 1.5rem;
  height: 1.5rem;
}
.aan-header {
  min-height: 60px;
  transition: 0.5s;
  position: sticky;
  top: 0;
  height: 115px;
  display: flex;
  align-items: center;
  background-color: hsla(0, 0%, 50%, 0.8);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image: url(/assets/img/fertility/header01.png);
}
.aan-header-inner {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  display: grid;
  grid-template-columns: 3rem auto 3rem;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  position: sticky;
  top: 0;
  z-index: 900;
}
.aan-header__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.aan-header__content .page-heading {
  display: flex;
  justify-content: center;
  color: #fff;
  font-size: 1.125rem;
  font-weight: var(--font-weight--semi-bold);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 2px 8px hsl(0, 0%, 50%);
}
.aan-header__control-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.aan-header__control {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.25em;
  padding-right: 0.25em;
  width: 3rem;
  height: 3rem;
}
.aan-header__control > svg {
  width: 2.25rem;
  height: 2.25rem;
  color: #fff;
  filter: drop-shadow(0 2px 8px hsl(0, 0%, 50%));
}
.aan-header__control--home > svg {
  width: 1.5rem;
  height: 1.5rem;
}
.abp-content-block {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: var(--background);
}
.abp-content-block p,
.abp-content-block li {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.abp-content-block h1 {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5;
  color: var(--text-primary);
}
.abp-content-block h2 {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, tomato);
}
.abp-content-block ul,
.abp-content-block ol {
  padding-left: 2em;
}
.abp-content-block--alt {
  background-color: var(--layer-01);
}
.abp-content-block > * + * {
  margin-top: 0.75rem;
}
.abp-content-block .intro-text {
  text-align: center;
  font-size: 0.825rem;
  line-height: 1.25;
  color: var(--text-tertiary);
}
.abp-content-block .sources {
  font-size: 0.825rem;
}
.abp-content-block .sources h2 {
  font-size: 1rem;
}
.abp-content-block .sources h3,
.abp-content-block .sources ul li {
  font-size: 0.825rem;
}
.abp-content-block .sources h3 {
  font-weight: 500;
}
.abp-content-block .sources ul {
  padding-left: 1em;
}
.heading-lg {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5;
  color: var(--text-primary);
}
.main-copy {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.test-for-content-styles p,
.test-for-content-styles li {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.test-for-content-styles h1 {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.5;
  color: var(--text-primary);
}
.test-for-content-styles h2 {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, tomato);
}
.test-for-content-styles ul,
.test-for-content-styles ol {
  padding-left: 2em;
}
p + p {
  margin-top: 1.5rem;
}
.heading--container-heading {
  display: block;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  letter-spacing: -0.1;
  padding-bottom: 0.25rem;
  margin-bottom: 1rem;
}
.heading--content-heading {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, tomato);
}
.aan-title {
  background-color: #fff;
  padding-top: 24px;
  padding-bottom: 18px;
  padding-left: 28px;
  padding-right: 28px;
}
.aan-title .aan-title__sup-heading {
  font-size: var(--font-size--md);
  font-weight: var(--font-weight-medium);
  color: #5A5A5A;
  line-height: 1.4;
}
.aan-title h1 {
  font-size: var(--font-size--lg);
  font-weight: var(--font-weight--semi-bold);
  color: #3C9CBA;
  line-height: 1.2;
  text-transform: uppercase;
}
.aan-result {
  background-color: #E9F4F9;
  padding-top: 7px;
  padding-bottom: 28px;
  padding-left: 28px;
  padding-right: 28px;
}
.aan-result .aan-result__info {
  display: grid;
  grid-template-columns: 56px auto;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
}
.aan-result .aan-result__info .aan-result__meter svg {
  max-width: 100%;
}
.aan-result .aan-result__info .aan-result__meter .geen-verhoogd-risico {
  transform: rotate(0deg);
}
.aan-result .aan-result__info .aan-result__meter .licht-verhoogd-risico {
  transform: rotate(-90deg);
}
.aan-result .aan-result__info .aan-result__meter .verhoogd-risico {
  transform: rotate(-180deg);
}
.aan-result .aan-result__info .aan-result__title {
  font-size: var(--font-size--md);
  font-weight: var(--font-weight--semi-bold);
  color: #000000;
  line-height: 1.2;
}
.aan-result .aan-result__content p {
  font-size: var(--font-size--md);
}
.aan-information {
  background-color: white;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 16px;
  padding-right: 16px;
}
.aan-info-container .aan-info__block + .aan-info__block,
.aan-adviezen-container .aan-info__block + .aan-info__block,
.aan-info-container .aan-info_block + .aan-info_block,
.aan-adviezen-container .aan-info_block + .aan-info_block,
.aan-info-container .aan-adviezen__block + .aan-adviezen__block,
.aan-adviezen-container .aan-adviezen__block + .aan-adviezen__block,
.aan-info-container .aan-adviezen_blcok + .aan-adviezen_block,
.aan-adviezen-container .aan-adviezen_blcok + .aan-adviezen_block {
  margin-top: 10px;
}
.aan-info-container .aan-info__block,
.aan-adviezen-container .aan-info__block,
.aan-info-container .aan-info_block,
.aan-adviezen-container .aan-info_block,
.aan-info-container .aan-adviezen__block,
.aan-adviezen-container .aan-adviezen__block,
.aan-info-container .aan-adviezen_block,
.aan-adviezen-container .aan-adviezen_block {
  display: grid;
  grid-template-columns: 36px auto 18px;
  gap: 12px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-left: 9px;
  padding-right: 6px;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #d2d2d2;
  text-decoration: none;
  background-color: white;
}
.aan-info-container .aan-adviezen__block,
.aan-adviezen-container .aan-adviezen__block,
.aan-info-container .aan-adviezen_block,
.aan-adviezen-container .aan-adviezen_block {
  display: grid;
  grid-template-columns: 36px auto 18px;
  grid-template-rows: auto auto;
  gap: 0 12px;
}
.aan-info-container .aan-info__image,
.aan-adviezen-container .aan-info__image,
.aan-info-container .aan-info_image,
.aan-adviezen-container .aan-info_image,
.aan-info-container .aan-adviezen__image,
.aan-adviezen-container .aan-adviezen__image,
.aan-info-container .aan-adviezen_image,
.aan-adviezen-container .aan-adviezen_image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.aan-info-container .aan-info__image img,
.aan-adviezen-container .aan-info__image img,
.aan-info-container .aan-info_image img,
.aan-adviezen-container .aan-info_image img,
.aan-info-container .aan-adviezen__image img,
.aan-adviezen-container .aan-adviezen__image img,
.aan-info-container .aan-adviezen_image img,
.aan-adviezen-container .aan-adviezen_image img {
  max-width: 100%;
  display: block;
}
.aan-info-container .aan-info__content-wrapper,
.aan-adviezen-container .aan-info__content-wrapper,
.aan-info-container .aan-info_content-wrapper,
.aan-adviezen-container .aan-info_content-wrapper,
.aan-info-container .aan-adviezen__content-wrapper,
.aan-adviezen-container .aan-adviezen__content-wrapper,
.aan-info-container .aan-adviezen_content-wrapper,
.aan-adviezen-container .aan-adviezen_content-wrapper {
  padding-top: 2px;
}
.aan-info-container .aan-info__content-wrapper .aan-info__heading,
.aan-adviezen-container .aan-info__content-wrapper .aan-info__heading,
.aan-info-container .aan-info_content-wrapper .aan-info__heading,
.aan-adviezen-container .aan-info_content-wrapper .aan-info__heading,
.aan-info-container .aan-adviezen__content-wrapper .aan-info__heading,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info__heading,
.aan-info-container .aan-adviezen_content-wrapper .aan-info__heading,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info__heading,
.aan-info-container .aan-info__content-wrapper .aan-info_heading,
.aan-adviezen-container .aan-info__content-wrapper .aan-info_heading,
.aan-info-container .aan-info_content-wrapper .aan-info_heading,
.aan-adviezen-container .aan-info_content-wrapper .aan-info_heading,
.aan-info-container .aan-adviezen__content-wrapper .aan-info_heading,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info_heading,
.aan-info-container .aan-adviezen_content-wrapper .aan-info_heading,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info_heading,
.aan-info-container .aan-info__content-wrapper .aan-adviezen__heading,
.aan-adviezen-container .aan-info__content-wrapper .aan-adviezen__heading,
.aan-info-container .aan-info_content-wrapper .aan-adviezen__heading,
.aan-adviezen-container .aan-info_content-wrapper .aan-adviezen__heading,
.aan-info-container .aan-adviezen__content-wrapper .aan-adviezen__heading,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-adviezen__heading,
.aan-info-container .aan-adviezen_content-wrapper .aan-adviezen__heading,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-adviezen__heading,
.aan-info-container .aan-info__content-wrapper .aan-adviezen_heading,
.aan-adviezen-container .aan-info__content-wrapper .aan-adviezen_heading,
.aan-info-container .aan-info_content-wrapper .aan-adviezen_heading,
.aan-adviezen-container .aan-info_content-wrapper .aan-adviezen_heading,
.aan-info-container .aan-adviezen__content-wrapper .aan-adviezen_heading,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-adviezen_heading,
.aan-info-container .aan-adviezen_content-wrapper .aan-adviezen_heading,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-adviezen_heading {
  font-size: var(--font-size--md);
  font-weight: var(--font-weight--semi-bold);
  line-height: 1.2;
  color: #2D2F30;
  margin-bottom: 8px;
}
.aan-info-container .aan-info__content-wrapper .aan-info__content,
.aan-adviezen-container .aan-info__content-wrapper .aan-info__content,
.aan-info-container .aan-info_content-wrapper .aan-info__content,
.aan-adviezen-container .aan-info_content-wrapper .aan-info__content,
.aan-info-container .aan-adviezen__content-wrapper .aan-info__content,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info__content,
.aan-info-container .aan-adviezen_content-wrapper .aan-info__content,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info__content,
.aan-info-container .aan-info__content-wrapper .aan-info_content,
.aan-adviezen-container .aan-info__content-wrapper .aan-info_content,
.aan-info-container .aan-info_content-wrapper .aan-info_content,
.aan-adviezen-container .aan-info_content-wrapper .aan-info_content,
.aan-info-container .aan-adviezen__content-wrapper .aan-info_content,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info_content,
.aan-info-container .aan-adviezen_content-wrapper .aan-info_content,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info_content {
  font-size: var(--font-size--md);
  line-height: 1.25;
  margin-bottom: 0;
  color: #333;
}
.aan-info-container .aan-info__content-wrapper .aan-info__content p,
.aan-adviezen-container .aan-info__content-wrapper .aan-info__content p,
.aan-info-container .aan-info_content-wrapper .aan-info__content p,
.aan-adviezen-container .aan-info_content-wrapper .aan-info__content p,
.aan-info-container .aan-adviezen__content-wrapper .aan-info__content p,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info__content p,
.aan-info-container .aan-adviezen_content-wrapper .aan-info__content p,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info__content p,
.aan-info-container .aan-info__content-wrapper .aan-info_content p,
.aan-adviezen-container .aan-info__content-wrapper .aan-info_content p,
.aan-info-container .aan-info_content-wrapper .aan-info_content p,
.aan-adviezen-container .aan-info_content-wrapper .aan-info_content p,
.aan-info-container .aan-adviezen__content-wrapper .aan-info_content p,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info_content p,
.aan-info-container .aan-adviezen_content-wrapper .aan-info_content p,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info_content p {
  font-size: var(--font-size--md);
  line-height: 1.25;
  margin-bottom: 0;
  color: #333;
}
.aan-info-container .aan-info__content-wrapper .aan-info__content p + p,
.aan-adviezen-container .aan-info__content-wrapper .aan-info__content p + p,
.aan-info-container .aan-info_content-wrapper .aan-info__content p + p,
.aan-adviezen-container .aan-info_content-wrapper .aan-info__content p + p,
.aan-info-container .aan-adviezen__content-wrapper .aan-info__content p + p,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info__content p + p,
.aan-info-container .aan-adviezen_content-wrapper .aan-info__content p + p,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info__content p + p,
.aan-info-container .aan-info__content-wrapper .aan-info_content p + p,
.aan-adviezen-container .aan-info__content-wrapper .aan-info_content p + p,
.aan-info-container .aan-info_content-wrapper .aan-info_content p + p,
.aan-adviezen-container .aan-info_content-wrapper .aan-info_content p + p,
.aan-info-container .aan-adviezen__content-wrapper .aan-info_content p + p,
.aan-adviezen-container .aan-adviezen__content-wrapper .aan-info_content p + p,
.aan-info-container .aan-adviezen_content-wrapper .aan-info_content p + p,
.aan-adviezen-container .aan-adviezen_content-wrapper .aan-info_content p + p {
  margin-top: 1.4;
}
.aan-info-container .aan-info__control-indicator svg,
.aan-adviezen-container .aan-info__control-indicator svg,
.aan-info-container .aan-info_control-indicator svg,
.aan-adviezen-container .aan-info_control-indicator svg,
.aan-info-container .aan-adviezen__control-indicator svg,
.aan-adviezen-container .aan-adviezen__control-indicator svg,
.aan-info-container .aan-adviezen_control-indicator svg,
.aan-adviezen-container .aan-adviezen_control-indicator svg {
  width: 100%;
}
.aan-info-container .aan-adviezen__content,
.aan-adviezen-container .aan-adviezen__content,
.aan-info-container .aan-adviezen_content,
.aan-adviezen-container .aan-adviezen_content {
  grid-column: span 3;
}
.aan-info-container .aan-adviezen__content p,
.aan-adviezen-container .aan-adviezen__content p,
.aan-info-container .aan-adviezen_content p,
.aan-adviezen-container .aan-adviezen_content p {
  font-size: var(--font-size--md);
  line-height: 1.25;
  margin-bottom: 0;
  color: #333;
}
.aan-info-container .aan-adviezen__content p + p,
.aan-adviezen-container .aan-adviezen__content p + p,
.aan-info-container .aan-adviezen_content p + p,
.aan-adviezen-container .aan-adviezen_content p + p {
  margin-top: 1.4;
}
.aan-adviezen {
  background-color: #4CA6C1;
  padding-top: 12px;
  padding-bottom: 48px;
  padding-left: 16px;
  padding-right: 16px;
}
.aan-adviezen h2 {
  font-size: var(--font-size--lg);
  font-weight: var(--font-weight--bold);
  line-height: 1.2;
  color: white;
  margin-bottom: 12px;
}
.aan-info__block .aan-info__content {
  height: 2.4rem;
  overflow: hidden;
}
.aan-info__block.aan-info__block--expanded .aan-info__content {
  height: auto;
  overflow: auto;
}
.aan-info__block.aan-info__block--expanded .aan-info__control-indicator svg {
  transform: rotate(180deg);
}
.aan-adviezen__block.aan-adviezen__block--active .aan-adviezen__control-indicator svg,
.aan-adviezen__block.aan-adviezen__block--active .aan-adviezen_control-indicator svg {
  transform: rotate(180deg);
}
.module-overview {
  display: grid;
  grid-column-gap: var(--half-gutter);
  grid-row-gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  margin-top: 0;
  margin-bottom: var(2rem);
  margin-left: calc(var(--half-gutter) * -1);
  margin-right: calc(var(--half-gutter) * -1);
}
@media screen and (min-width: 41.75rem) {
  .module-overview {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-column-gap: var(--half-gutter);
    grid-row-gap: var(--half-gutter);
  }
}
@media screen and (min-width: 56.375rem) {
  .module-overview {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}
.module-card {
  display: flex;
  flex-direction: column;
  background-color: var(--ui-light-4);
  padding-top: var(--half-gutter);
  padding-bottom: calc(0.5 * var(--half-gutter));
  padding-left: var(--half-gutter);
  padding-right: var(--half-gutter);
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px 0px hsla(0, 0%, 0%, 0.1);
}
/*
.n-module-card--wide {

  grid-column: span 1;

  @media screen and (min-width: @breakpoint--md) { 
    grid-column: span 2;
  }

  @media screen and (min-width: @breakpoint--lg) {
    grid-column: span 3;
  }

}
*/
.module-card--max-span-2 {
  grid-column: span 1;
}
@media screen and (min-width: 41.75rem) {
  .module-card--max-span-2 {
    grid-column: span 2;
  }
}
@media screen and (min-width: 56.375rem) {
  .module-card--max-span-2 {
    grid-column: span 2;
  }
}
.module-card--max-span-3 {
  grid-column: span 1;
}
@media screen and (min-width: 41.75rem) {
  .module-card--max-span-3 {
    grid-column: span 2;
  }
}
@media screen and (min-width: 56.375rem) {
  .module-card--max-span-3 {
    grid-column: span 3;
  }
}
.module-card--wide-info,
.module-card--traits {
  grid-column: 1 / -1;
}
@media screen and (min-width: 41.75rem) {
  .module-card--wide-info,
  .module-card--traits {
    grid-column: span 2;
  }
}
@media screen and (min-width: 56.375rem) {
  .module-card--wide-info,
  .module-card--traits {
    grid-column: span 2;
  }
}
.module-card--not-activated {
  background-color: var(--ui-light-3);
}
.module-card__control--collapse {
  display: inline-flex;
}
.module-card__control--open {
  display: none;
}
.module-card--collapsed {
  align-self: flex-start;
}
.module-card--collapsed .module-card__header {
  padding-bottom: 0.5rem;
}
.module-card--collapsed .module-card__content,
.module-card--collapsed .module-card__footer {
  display: none;
}
.module-card--collapsed .module-card__control--collapse {
  display: none;
}
.module-card--collapsed .module-card__control--open {
  display: inline-flex;
}
.module-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.module-card__controls {
  display: flex;
  flex: 0 0 auto;
}
.module-card__collapse-toggle {
  --button-size: 1.5rem;
  --icon-size: 1.125rem;
  --button-size: 1.25rem;
  --icon-size: 0.875rem;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: transparent;
  border: none;
  width: var(--button-size);
  height: var(--button-size);
  color: var(--color-digi-blue);
  transition: all 0.5s ease-in-out;
}
.module-card__collapse-toggle > svg {
  position: absolute;
  z-index: 10;
  width: var(--icon-size);
  height: var(--icon-size);
  stroke: currentColor;
  background-color: #fff;
  border-radius: 50%;
}
.module-card__content,
.aandachtspunt-card__content {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
/*
    .n-result-list-control {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      margin-bottoM: 0.5rem;

      .more-result-info {
        flex: 1 0 100%;
        text-align: center;
        font-size: 0.75rem;
        line-height: 1.1;
        margin-bottom: 0.75rem;
        color: #777;
        font-weight: var(--font-weight--medium);

      }

      button {
        border-radius: 2em;
      }

    }
    */
/*
  .n-module-card__footer {

    margin-top: auto;

    margin-left: calc( -0.5 * var(--half-gutter));
    margin-right: calc( -0.5 * var(--half-gutter));
    // temp
    //background-color: goldenrod;

    // test
    //background-color: bisque;
    //border-top: 1px dashed var(--color-digi-blue);

    border-top: 1px solid hsl(209, 100%, 88%);
    background-color: hsla(210.9, 39.8%, 83.7%, 0.09);

    //margin-top: calc(0.5 * var(--half-gutter));
    margin-bottom: calc( -0.5 * var(--half-gutter));
    margin-left: calc( -1 * var(--half-gutter));
    margin-right: calc( -1 * var(--half-gutter));
    
    padding: calc( 0.5 * var(--half-gutter));
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;

  }
  */
.module-card__footer {
  background-color: hsl(0, 0%, 97%);
  border-top: 1px solid hsl(209, 100%, 88%);
  margin-top: auto;
  margin-bottom: calc(-0.5 * var(--half-gutter));
  margin-left: calc(-1 * var(--half-gutter));
  margin-right: calc(-1 * var(--half-gutter));
  padding: calc(0.5 * var(--half-gutter));
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.module__result-list {
  --gene-list-columns: 1;
  gap: 0 var(--half-gutter);
  column-count: var(--gene-list-columns);
  /*
  > .n-module__result-bak {

    display: flex;
    //align-items: baseline;
    align-items: flex-start;
    

    padding-top: 0.25rem; 
    padding-bottom: 0.25rem; 
    padding-left: 0.5rem;
    padding-right: 0.5rem;

    margin-top: 1px;
    margin-bottom: 1px;

    border-radius: 0.375rem;

    // 
    background-color: var(--ui-light-3); 
    background-color: var(--c-canary);

    // 
    break-inside: avoid;

  }
  */
}
.module__result-list > .module__item-header {
  display: flex;
  align-items: baseline;
  padding-top: 0.375rem;
  padding-bottom: 0.125rem;
  padding-left: 0.5rem;
  margin-top: 1px;
  margin-bottom: 1px;
  color: #666;
  break-after: avoid;
}
.module__result-list > .module__item-header:empty {
  background-color: salmon;
  display: none;
}
.module-card--wide .module__result-list {
  --gene-list-columns: 1;
}
@media screen and (min-width: 41.75rem) {
  .module-card--wide .module__result-list {
    --gene-list-columns: 2;
  }
}
@media screen and (min-width: 56.375rem) {
  .module-card--wide .module__result-list {
    --gene-list-columns: 3;
  }
}
.module-card--max-span-2 .module__result-list {
  --gene-list-columns: 1;
}
@media screen and (min-width: 41.75rem) {
  .module-card--max-span-2 .module__result-list {
    --gene-list-columns: 2;
  }
}
@media screen and (min-width: 56.375rem) {
  .module-card--max-span-2 .module__result-list {
    --gene-list-columns: 2;
  }
}
.module-card--max-span-3 .module__result-list {
  --gene-list-columns: 1;
}
@media screen and (min-width: 41.75rem) {
  .module-card--max-span-3 .module__result-list {
    --gene-list-columns: 2;
  }
}
@media screen and (min-width: 56.375rem) {
  .module-card--max-span-3 .module__result-list {
    --gene-list-columns: 3;
  }
}
ul.module__result-list {
  list-style-type: none;
  margin-bottom: var(--spacing--md);
  padding: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  /*
  > li.enzym--licht-verlaagd::marker {
    //color: @c-orange;
    color: var(--c-es-orange);
  }

  > li.enzym--normaal::marker {
    //color: @c-green;
    color: var(--c-es-green);
  }

  > li.enzym--verhoogd::marker {
    //color: @c-blue-darker;
    color: var(--c-es-blue-darker);
  }

  > li.enzym--verlaagd::marker {
    //color: @c-red;
    color: var(--c-es-red);
  }
  */
  /*
  //> li:before,
  > .enzym:before {
    content: " ";
    display: inline-block;
    flex: 0 0 auto;
    //width: 1em;
    //height: 1em;
    //border-radius: 0.5em;
    //margin-right: 0.25em;
    background-color: var(--ui-med);

    width: 0.5em;
    height: 0.75em;
    border-radius: .25em;
    margin-right: .375em;
    margin-top: 0.375em;

  }

  > li.enzym--licht-verlaagd:before {
    // background-color: @c-orange;
    background-color: var(--c-es-orange);
  }

  > li.enzym--normaal:before {
    // background-color: @c-green;
    background-color: var(--c-es-green);
  }

  > li.enzym--verhoogd:before {
    // background-color: @c-blue-darker;
    background-color: var(--c-es-blue-darker);
  }

  > li.enzym--verlaagd:before {
    // background-color: @c-red;
    background-color: var(--c-es-red);
  }
  */
}
ul.module__result-list .module__result {
  display: flex;
  align-items: flex-start;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin-top: 1px;
  margin-bottom: 1px;
  border-radius: 0.375rem;
  text-decoration: none;
  background-color: var(--ui-light-3);
  color: var(--txt-shade-2);
  break-inside: avoid;
}
ul.module__result-list a.module__result:hover {
  background-color: var(--color-digi-blue-transparent);
}
ul.module__result-list .module__result:before,
ul.module__result-list a:before {
  content: " ";
  display: inline-block;
  flex: 0 0 auto;
  background-color: var(--ui-med);
  width: 0.5em;
  height: 0.75em;
  border-radius: 0.25em;
  margin-right: 0.375em;
  margin-top: 0.375em;
}
ul.module__result-list .module__result--licht-verlaagd:before,
ul.module__result-list .enzym--licht-verlaagd:before {
  background-color: var(--c-es-orange);
}
ul.module__result-list .module__result--normaal:before,
ul.module__result-list .enzym--normaal:before {
  background-color: var(--c-es-green);
}
ul.module__result-list .module__result--verhoogd:before,
ul.module__result-list .enzym--verhoogd:before {
  background-color: var(--c-es-blue-darker);
}
ul.module__result-list .module__result--verlaagd:before,
ul.module__result-list .enzym--verlaagd:before {
  background-color: var(--c-es-red);
}
ul.module__result-list .module__result--geen-indicator:before,
ul.module__result-list .enzym--geen-indcator:before {
  background-color: #fff;
  border: 1px solid var(--ui-med);
}
ul.module__result-list .result--green:before {
  background-color: var(--c-es-green);
}
ul.module__result-list .result--red:before {
  background-color: var(--c-es-red);
}
ul.module__result-list .result--orange:before {
  background-color: var(--c-es-orange);
}
ul.module__result-list .result--blue:before {
  background-color: var(--c-es-blue-darker);
}
ul.module__result-list .result--carrier:before {
  background: linear-gradient(var(--c-es-green) 50%, var(--c-es-orange) 50% 100%);
}
.module-card--traits ul.module__result-list .module__result:before {
  background-color: #fff;
  border: 1px solid var(--ui-med);
}
.module-card--traits ul.module__result-list .result--green:before {
  background-color: var(--c-es-green);
  border: none;
}
.module-card--traits ul.module__result-list .result--red:before {
  background-color: var(--c-es-red);
  border: none;
}
.module-card--traits ul.module__result-list .result--orange:before {
  background-color: var(--c-es-orange);
  border: none;
}
.module-card--traits ul.module__result-list .result--blue:before {
  background-color: var(--c-es-blue-darker);
  border: none;
}
.module-card--traits ul.module__result-list .result--carrier:before {
  background: linear-gradient(var(--c-es-green) 50%, var(--c-es-orange) 50% 100%);
  border: none;
}
.module__result-sum {
  font-style: italic;
  margin-left: auto;
  color: var(--txt-shade-2);
}
.module__result--normaal .module__result-sum {
  color: var(--c-es-green);
}
.module__result--licht-verlaagd .module__result-sum {
  color: var(--c-es-orange);
}
.module-card__button {
  justify-content: flex-start;
  align-items: center;
  border-radius: 0.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.75rem;
  font-weight: var(--font-weight--medium);
  position: relative;
}
.module-card__button .dip-button__label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  margin-right: auto;
}
.module-card__button .point-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0.375rem;
  border-radius: 0.5rem;
  line-height: 1;
  font-size: 0.75rem;
  min-width: 1rem;
  font-weight: var(--font-weight--semi-bold);
  color: #fff;
  background-color: var(--c-orange);
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  transition: all 0.2s ease-in-out;
  /*
    .n-module-card__footer--alt-1 & {
      color: #fff;
      //background-color:hsl(24, 96%, 60%);
      background-color: var(--c-orange);
    
    }
    */
  position: absolute;
  top: -1.5em;
  left: 0.25em;
}
.module-card__button .point-counter--zero {
  background-color: hsl(89, 65%, 58%);
}
.module-card__button:Hover .point-counter {
  transform: scale3d(1.1, 1.1, 1.1);
}
.dip-module-overview-container {
  background-color: salmon;
}
.dip-module-overview-container {
  display: grid;
  grid-column-gap: var(--half-gutter);
  grid-row-gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin-left: -1rem;
  margin-right: -1rem;
}
@media screen and (min-width: 41.75rem) {
  .dip-module-overview-container {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-column-gap: var(--gutter);
  }
}
@media screen and (min-width: 56.375rem) {
  .dip-module-overview-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
/*
.module-selector {

 // margin-left: ~"calc("var(--half-gutter)~" * -1)";
 // margin-right: ~"calc("var(--half-gutter)~" * -1)";

  padding-left: var(--half-gutter);
  padding-right: var(--half-gutter);
  background-color: var(--ui-light-4);

  display: flex;
  flex-direction: column;

  > a.dip-button,
  > span.alert,
  > .dip-notification {
    margin-top: auto;
    margin-bottom: 0;
    //temp
    //background-color: seagreen;
    min-width: 1em;
  }

}
*/
.module-selector__gene-list--columns {
  column-count: 2;
  column-gap: var(--half-gutter);
}
.dip-enzym-markering {
  font-size: 0.875rem;
  display: inline-block;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: 0.75em;
  white-space: nowrap;
  background-color: #333;
  color: #fff;
  padding-top: 0.05em;
  padding-bottom: 0;
  padding-left: 0.75em;
  padding-right: 0.75em;
  line-height: 1.5;
  font-weight: var(--font-weight--medium);
  vertical-align: top;
  margin-left: 1rem;
}
.dip-enzym-markering:nth-child(2) {
  margin-left: 1rem;
}
.dip-enzym-markering:first-child {
  margin-left: 0;
}
.dip-enzym-markering--oranje,
.dip-enzym-markering--orange,
.dip-enzym-markering--licht-verlaagd {
  background-color: var(--c-es-orange);
}
.dip-enzym-markering--green,
.dip-enzym-markering--normaal {
  background-color: var(--c-es-green);
}
.dip-enzym-markering--blue,
.dip-enzym-markering--verhoogd {
  background-color: var(--c-es-blue-darker);
}
.dip-enzym-markering--red,
.dip-enzym-markering--verlaagd {
  background-color: var(--c-es-red);
}
.dip-enzym-markering--missing-data {
  background-color: hsl(0, 0%, 70%);
}
.modal__result {
  display: inline-flex;
  margin-left: 1rem;
  color: var(--txt-shade-2);
  font-size: 0.75rem;
  line-height: 1;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border-radius: 0.75em;
  background-color: var(--ui-light-2);
  align-items: baseline;
}
.modal__result:before {
  content: " ";
  display: inline-block;
  flex: 0 0 auto;
  background-color: var(--ui-med);
  width: 0.5em;
  height: 0.75em;
  border-radius: 0.25em;
  margin-right: 0.375em;
}
.modal__result--licht-verlaagd:before {
  background-color: var(--c-es-orange);
}
.modal__result--normaal:before {
  background-color: var(--c-es-green);
}
.modal__result--verhoogd:before {
  background-color: var(--c-es-blue-darker);
}
.modal__result--verlaagd:before {
  background-color: var(--c-es-red);
}
.modal__result--geen-indicator:before {
  background-color: #fff;
  border: 1px solid var(--ui-med);
}
/*
  .modal__result--green:before {
    background-color: var(--c-es-green);
    border: none;
  }

  .modal__result--red:before {
    background-color: var(--c-es-red);
    border: none;
  }

  .modal__result--orange:before {
    background-color: var(--c-es-orange);
    border: none;
  }

  .modal__result--blue:before {
    background-color: var(--c-es-blue-darker);
    border: none;
  }

  .modal__result--carrier:before {
    background: linear-gradient( var(--c-es-green) 50%, var(--c-es-orange) 50% 100%);
    border: none;
  }
  */
.result--green:before {
  background-color: var(--c-es-green);
}
.result--red:before {
  background-color: var(--c-es-red);
}
.result--orange:before {
  background-color: var(--c-es-orange);
}
.result--blue:before {
  background-color: var(--c-es-blue-darker);
}
.result--carrier:before {
  background: linear-gradient(var(--c-es-green) 50%, var(--c-es-orange) 50% 100%);
}
.nav-list {
  --nav-list-spacing: 0.625rem;
  display: flex;
  flex-direction: column;
  padding-left: var(--nav-list-spacing);
  padding-right: var(--nav-list-spacing);
}
.nav-list__module-seperator {
  font-size: 0.875rem;
  color: var(--text-tertiary);
  line-height: 1.2;
}
.nav-list__block + .nav-list__module-seperator {
  margin-top: 1.5rem;
}
.nav-list--related {
  padding-left: 0;
  padding-right: 0;
  margin-left: -6px;
  margin-right: -6px;
}
.nav-list__block {
  text-decoration: none;
  display: flex;
  flex-direction: row;
  gap: var(--nav-list-spacing);
  justify-content: flex-start;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--border-subtle, tomato);
}
.nav-list--related .nav-list__block {
  border-top: none;
  background-color: #fff;
  padding-left: 0.75rem;
  padding-right: 0.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 1px 0 var(--border-subtle);
}
.nav-list__block--alt-temp {
  background-color: bisque;
}
.nav-list__image {
  flex: 0 0 52px;
  align-self: flex-start;
}
.nav-list__image img {
  display: block;
  width: 100%;
  max-width: 60px;
}
.nav-list__content {
  flex: 1 1 auto;
}
.nav-list__control-indicator {
  flex: 0 0 1.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  width: 1.5rem;
}
.nav-list__control-indicator > svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--link-secondary, tomato);
}
.nav-list__block--alt-temp .nav-list__control-indicator {
  flex: 0 0 1rem;
  background-color: salmon;
}
.nav-list__heading {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, tomato);
}
.nav-list__intro {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary, tomato);
}
.nav-list__module-info {
  display: flex;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-tertiary);
  padding-top: 0.125rem;
  flex-wrap: wrap;
}
.module-info__pill {
  line-height: 1;
  padding: 0.2875rem 0.5rem 0.225rem 0.5rem;
  background-color: #dfdfdf;
  color: #303030;
  display: inline-block;
  border-radius: 1rem;
}
.related-list {
  --related-list-spacing: 0.625rem;
  display: flex;
  flex-direction: column;
}
.related-list__block-container {
  background-color: #fff;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 1px 0 var(--border-subtle);
}
.related-list__block {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--related-list-spacing);
  padding-top: var(--related-list-spacing);
  padding-bottom: var(--related-list-spacing);
  padding-left: var(--related-list-spacing);
  padding-right: var(--related-list-spacing);
  text-decoration: none;
}
.related-list__image {
  flex: 0 0 52px;
}
.related-list__image img {
  display: block;
  width: 100%;
}
.related-list__content {
  flex: 1 1 auto;
}
.related-list__control-indicator {
  display: block;
  position: absolute;
  top: var(--related-list-spacing);
  right: var(--related-list-spacing);
  width: 1.25rem;
}
.related-list__control-indicator > svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--link-secondary);
}
.related-list__block-container--expanded .related-list__control-indicator > svg {
  transform: rotate(180deg);
}
.related-list__heading {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, tomato);
  margin-right: 1rem;
}
.related-list__intro {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary, tomato);
}
.related-list__read-more a {
  display: block;
  padding-inline: var(--related-list-spacing);
  padding-block: 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--brand-green);
}
.related-list__read-more::before {
  display: block;
  content: " ";
  margin-left: var(--related-list-spacing);
  margin-right: var(--related-list-spacing);
  height: 1px;
  background-color: var(--border-subtle);
}
.result-overview {
  --result-list-spacing: 0.625rem;
}
.result-list__block-container {
  background-color: #fff;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 1px 0 var(--border-subtle);
}
.result-list__block {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--result-list-spacing);
  padding-top: var(--result-list-spacing);
  padding-bottom: var(--result-list-spacing);
  padding-left: var(--result-list-spacing);
  padding-right: var(--result-list-spacing);
  text-decoration: none;
}
.result-list__content {
  flex: 1 1 auto;
}
.result-list__content .result-list__heading {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary, tomato);
  margin-right: 1rem;
}
.result-list__content .result-list__intro {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary, tomato);
}
.result-list__control {
  margin-top: 0;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: center;
}
.result-list__overview {
  display: none;
}
.result-list__outro ul {
  padding-left: 0.875em;
}
.result-list__outro ul li {
  font-size: 0.925em;
}
.result-list__block-container--expanded .result-list__overview {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-secondary, tomato);
}
.result-list__control-indicator {
  display: block;
  position: absolute;
  top: var(--result-list-spacing);
  right: var(--result-list-spacing);
  width: 1.25rem;
}
.result-list__control-indicator > svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--link-secondary);
}
.result-list__block-container--expanded .result-list__control-indicator > svg {
  transform: rotate(180deg);
}
.abp-persoonlijke-boodschap {
  display: flex;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  gap: 0.625rem;
  color: var(--link-inverse);
  text-decoration: none;
  line-height: 1.2;
  font-size: 1rem;
  font-weight: 600;
  background-color: var(--support--info);
}
.abp-persoonlijke-boodschap svg {
  flex: 0 0 auto;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
.abp-persoonlijke-boodschap > div {
  text-decoration: none;
}
.abp-persoonlijke-boodschap:hover {
  color: #fff;
}
.tab-menu {
  --border-radius-outer: 0.75rem;
  --border-radius-inner: calc(var(--border-radius-outer) - var(--tab-menu-padding) - var(--border-width));
  --tab-menu-padding: 0.08rem;
  --border-width: 0.08rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: var(--tab-menu-padding);
  border: var(--border-width) solid hsl(156, 41%, 59%);
  border-radius: var(--border-radius-outer);
  background-color: hsl(240, 3%, 94%);
  overflow: hidden;
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
.tab-menu__item {
  flex: 1 1 50%;
  padding-top: 0.35rem;
  padding-bottom: 0.3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-color: transparent;
  border-radius: var(--border-radius-inner);
  color: var(--text-primary);
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tab-menu__item--selected {
  background-color: #fff;
  box-shadow: 0px 0px 3.6px -3px rgba(0, 0, 0, 0.029), 0px 0px 6.7px -3px rgba(0, 0, 0, 0.044), 0px 0px 10px -3px rgba(0, 0, 0, 0.059), 0px 0px 14.7px -3px rgba(0, 0, 0, 0.083), 0px 0px 31px -3px rgba(0, 0, 0, 0.21);
}
.tab-menu__label {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
/*


@onclick="@(() => ShowToolTip("CALC","BLAAT"))"

@GetClassName("CALC","BLAAT")

*/
.svg-test {
  --c-normal: hsl(155, 100%, 39%);
  --c-decreased: hsl(351, 73%, 58%);
  --c-normal: hsl(132, 100%, 40%);
  --c-increased: hsl(227, 60%, 30%);
  --c-not-determined: hsl(0, 0%, 80%);
  --c-slightly-decreased: hsl(32, 98%, 57%);
  --icon-normal-color: transparent;
  --icon-slightly-decreased-color: transparent;
  --icon-decreased-color: transparent;
  --icon-increased-color: transparent;
  --c-intermediate: hsl(150, 26%, 85%);
  --c-enzyme: hsl(211, 52%, 50%);
  --c-cofactor: hsl(45, 100%, 69%);
  --c-receptor: hsl(0, 10%, 85%);
  --c-process: hsl(285, 36%, 50%);
  --c-process: var(--c-indigo);
  --c-cytokine: hsl(55, 30%, 86%);
  --c-cytokine: vaR(--c-skyblue);
  --c-vitamin: hsl(246, 64%, 91%);
  --c-group-bg: hsl(160, 15%, 97%);
  --c-group-stroke-width: 3px;
  --c-group-stroke-color: hsl(175, 21%, 60%);
  --c-toxin: hsl(10, 80%, 90%);
  --c-explosion: hsl(32, 100%, 75%);
  --c-explosion--small: hsl(32, 100%, 50%);
  --c-explosion--small: var(--c-orange);
  --stroke-width: 6px;
  --font-family: 'Inter var', sans-serif;
  --font-weight: 500;
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("fonts/Inter-upright.var.woff2") format("woff2 supports variations(gvar)"), url("fonts/Inter-upright.var.woff2") format("woff2-variations"), url("fonts/Inter-upright.var.woff2") format("woff2");
}
.svg-test .svg-container__heading {
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 3.5rem;
  padding-right: 1rem;
}
.svg-test .svg-container__heading > .title {
  color: var(--txt-shade-3, tomato);
  font-size: 1rem;
  font-weight: 600;
}
.svg-test .svg-container__divider {
  width: 100%;
  height: 1rem;
  background-color: var(--ui-light-2, salmon);
}
.svg-test svg {
  stroke: inherit;
  fill: inherit;
}
.svg-test svg path,
.svg-test svg rect,
.svg-test svg circle {
  fill: inherit;
  stroke: inherit;
}
.svg-test svg text {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  fill: var(--font-color, #333);
  text-anchor: middle;
}
.svg-test svg .text-labels text {
  font-size: 24px;
  fill: #222;
  text-anchor: start;
  background-color: salmon;
}
.svg-test svg .text-labels-end text {
  font-size: 24px;
  fill: #222;
  text-anchor: end;
  background-color: salmon;
}
.svg-test svg .text-labels-middle text {
  font-size: 24px;
  fill: #222;
  text-anchor: middle;
  background-color: salmon;
}
.svg-test svg .text-labels--small text {
  font-size: 20px;
}
.svg-test svg .text-labels--thin text {
  font-weight: 400;
}
.svg-test svg text.group__text--heading {
  font-size: 36px;
  font-weight: 700;
  text-anchor: start;
}
.svg-test svg text.group__text {
  font-size: 24px;
  font-weight: 600;
  text-anchor: start;
}
.svg-test svg text.group__text--end {
  text-anchor: end;
}
.svg-test svg text.explosion__text {
  font-size: 24px;
  font-weight: 600;
  text-anchor: middle;
}
.svg-test svg text.explosion__text--small {
  font-size: 24px;
  font-weight: 600;
  text-anchor: middle;
}
.svg-test svg text.toxin__text {
  font-size: 26px;
  font-weight: 600;
  text-anchor: middle;
}
.svg-test .intermediate text {
  --font-weight: 600;
  --font-color: #222;
  font-size: 24px;
  line-height: 1;
  transform: translateX(120px) translateY(60px);
}
.svg-test .enzyme text {
  --font-weight: 800;
  --font-color: #fff;
  font-size: 26px;
  transform: translateX(120px) translateY(40px);
}
.svg-test .cofactor text {
  --font-weight: 400;
  --font-color: #222;
  font-size: 24px;
  transform: translateX(30px) translateY(40px);
}
.svg-test .cofactor--large text {
  transform: translateX(40px) translateY(50px);
}
.svg-test .receptor text {
  --font-weight: 500;
  --font-color: #222;
  font-size: 18px;
  transform: translateX(25px) translateY(26px);
  transform: translateX(80px) translateY(26px);
}
.svg-test .receptor {
  --stroke-width: 4px;
}
.svg-test .process text {
  --font-weight: 600;
  --font-color: #fff;
  font-size: 20px;
  line-height: 1;
  transform: translateX(120px) translateY(48px);
}
.svg-test .cytokine text {
  --font-weight: 600;
  --font-color: #222;
  font-size: 24px;
  line-height: 1;
  transform: translateX(120px) translateY(40px);
}
.svg-test .vitamin text {
  --font-weight: 500;
  --font-color: #222;
  font-size: 20px;
  line-height: 1;
  transform: translateX(120px) translateY(38px);
}
.svg-test .small-marker {
  transform: scaleX(0.667) scaleY(0.667) translate(60px, 60px);
}
.svg-test .cofactor--large .small-marker {
  transform: scaleX(0.666) scaleY(0.666) translate(40px, 40px);
}
.svg-test .receptor .small-marker {
  transform: scaleX(0.667) scaleY(0.667) translate(210px, 30px);
}
.svg-test a .intermediate:hover,
.svg-test a .enzyme:hover,
.svg-test a .cofactor:hover,
.svg-test a .receptor:hover,
.svg-test a .process:hover,
.svg-test a .explosion:hover,
.svg-test a .toxin:hover,
.svg-test a .cytokine:hover,
.svg-test a .vitamin:hover,
.svg-test a .svg__symbol:hover {
  --stroke-width: 8px;
  --stroke-color: hsla(0, 0%, 71%, 0.8);
}
.svg-test a .receptor:hover {
  --stroke-width: 6px;
}
.svg-test .s-none {
  --stroke-color: transparent;
  --marker-color: transparent;
  --marker-icon-color: transparent;
}
.svg-test .s-not-determined {
  --stroke-color: transparent;
  --marker-color: var(--c-not-determined);
}
.svg-test .s-increased {
  --stroke-color: var(--c-increased);
  --marker-color: var(--c-increased);
  --icon-increased-color: #fff;
}
.svg-test .s-normal {
  --stroke-color: var(--c-normal);
  --marker-color: var(--c-normal);
  --icon-normal-color: #fff;
}
.svg-test .s-slightly-decreased {
  --stroke-color: var(--c-slightly-decreased);
  --marker-color: var(--c-slightly-decreased);
  --icon-slightly-decreased-color: #fff;
}
.svg-test .s-decreased {
  --stroke-color: var(--c-decreased);
  --marker-color: var(--c-decreased);
  --icon-decreased-color: #fff;
}
.tooltip-container {
  position: relative;
}
.svg-tooltip {
  display: none;
  position: absolute;
  top: 2em;
  left: 2em;
  padding: 1em;
  background-color: #444;
  color: #fff;
  font-size: 0.75em;
  min-width: 500px;
  max-width: 75vw;
}
.svg-tooltip h3 {
  margin-bottom: 0.5em;
  line-height: 1.1;
  font-weight: 600;
}
.svg-tooltip h3 > span {
  font-style: italic;
  font-weight: 400;
}
.svg-tooltip p {
  line-height: 1.4;
}
.svg-tooltip .close-button {
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  border: none;
  margin: 0;
  background-color: transparent;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  color: #fff;
}
.svg-tooltip .close-button > svg * {
  stroke: currentColor;
}
.svg-tooltip .close-button:hover {
  cursor: pointer;
}
.svg-tooltip .close-button:active {
  background-color: hsla(0, 0%, 100%, 0.25);
}
.svg-tooltip--active {
  display: block;
}
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.u-transition {
  transition: all 0.2s ease-in-out;
}
.u-transition--smooth {
  transition: all 0.2s ease-in-out;
}