@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Fira Sans Regular */
/* Regular */
@font-face {
  font-family: "Fira";
  font-style: normal;
  font-weight: 400;
  src: local("Fira Sans Regular"), local("FiraSans-Regular"), url("fonts/fira-400.woff2") format("woff2");
}
/* Regular Italic */
@font-face {
  font-family: "Fira";
  font-style: italic;
  font-weight: 400;
  src: local("Fira Sans Italic"), local("FiraSans-Italic"), url("fonts/fira-400-italic.woff2") format("woff2");
}
/* Bold */
@font-face {
  font-family: "Fira";
  font-style: normal;
  font-weight: 700;
  src: local("Fira Sans Bold"), local("FiraSans-Bold"), url("fonts/fira-700.woff2") format("woff2");
}
/* Bold Italic */
@font-face {
  font-family: "Fira";
  font-style: italic;
  font-weight: 700;
  src: local("Fira Sans Bold Italic"), local("FiraSans-BoldItalic"), url("fonts/fira-700-italic.woff2") format("woff2");
}
/* Fira Sans Condensed */
/* Regular */
@font-face {
  font-family: "FiraCondensed";
  font-style: normal;
  font-weight: 400;
  src: local("Fira Sans Condensed Regular"), local("FiraSansCondensed-Regular"), url("fonts/fira-condensed-400.woff2") format("woff2");
}
/* Regular Italic */
@font-face {
  font-family: "FiraCondensed";
  font-style: normal;
  font-weight: 700;
  src: local("Fira Sans Condensed Bold"), local("FiraSansCondensed-Bold"), url("fonts/fira-condensed-700.woff2") format("woff2");
}
:root {
  --color-bg: #ffffff;
  --color-white: #ffffff;
  --color-white-fade30: rgba(255, 255, 255, 0.7);
  --color-white-fade40: rgba(255, 255, 255, 0.6);
  --color-white-fade50: rgba(255, 255, 255, 0.5);
  --color-white-fade60: rgba(255, 255, 255, 0.4);
  --color-white-fade70: rgba(255, 255, 255, 0.3);
  --color-white-fade80: rgba(255, 255, 255, 0.2);
  --color-white-fade90: rgba(255, 255, 255, 0.1);
  --color-white-fade95: rgba(255, 255, 255, 0.05);
  --color-white-fade98: rgba(255, 255, 255, 0.02);
  --color-link: #297ac2;
  --color-link-d1: #256dad;
  --color-link-hover: #1e88e6;
  --color-gray-l11: #fafafa;
  --color-gray-l10: #f6f6f5;
  --color-gray-l9: #ebebea;
  --color-gray-l8: #d6d5d3;
  --color-gray-l7: #c2c0bd;
  --color-gray-l6: #adaba6;
  --color-gray-l5: #989590;
  --color-gray-l4: #838079;
  --color-gray-l3: #6c6a65;
  --color-gray-l2: #565450;
  --color-gray-l1: #3f3e3b;
  --color-gray: #292826;
  --color-gray-d1: #21201f;
  --color-gray-d2: #1c1a1a;
  --color-gray-fade50: rgba(41, 40, 38, 0.5);
  --color-gray-fade100: rgba(41, 40, 38, 0);
  --color-sdglearn: #297ac2;
  --color-sdglearn-d1: #206098;
  --color-sdglearn-d2: #17456e;
  --color-sdglearn-d3: #0e2b44;
  --color-sdglearn-d3-fade5: rgba(14, 43, 68, 0.95);
  --color-course: #C11F33;
  --color-course-d1: #8f1725;
  --color-course-d2: #801421;
  --color-course-hover: #e8253c;
  --color-microlearning: #008099;
  --color-microlearning-d1: #005566;
  --color-microlearning-d2: #004857;
  --color-microlearning-hover: #009fbf;
  --color-event: #bd5b05;
  --color-event-d1: #8a4204;
  --color-event-d2: #7a3b04;
  --color-event-hover: #e36e07;
  --color-resource: #0c884a;
  --color-resource-d1: #08542e;
  --color-resource-d2: #074525;
  --color-resource-hover: #10ad5f;
  --color-assessment: #2E01AD;
  --color-assessment-d1: #1f0075;
  --color-assessment-d2: #1c0069;
  --color-assessment-hover: #3d02e0;
  --color-assessment-score-bar: rgba(46, 1, 173, 0.2);
  --color-pathway-l2: #DF80FF;
  --color-pathway-l1: #8802b5;
  --color-pathway: #7E01A8;
  --color-pathway-d1: #540070;
  --color-pathway-d2: #4b0063;
  --color-pathway-hover: #a502db;
  --color-pathway-score-bar: rgba(126, 1, 168, 0.2);
  --color-pathway-l2-score-bar: rgba(223, 128, 255, 0.4);
  --color-required: #c23e3e;
  --color-error: #c23e3e;
  --color-error-fade70: rgba(194, 62, 62, 0.3);
  --color-error-fade95: rgba(194, 62, 62, 0.05);
  --color-timer-bg: rgba(70, 151, 210, 0.3);
  --color-timer-fg: #4697D2;
  --color-timer-ending-bg: rgba(193, 31, 51, 0.3);
  --color-timer-ending-fg: #C11F33;
  --color-tooltip: #4d4d4d;
  --color-dropdown: #4d4d4d;
  --color-dropdown-d1: #454545;
  --color-dropdown-d2: #3d3d3d;
  --color-introductory-l1: #8bd975;
  --color-introductory: #72B260;
  --color-introductory-d1: #4E8F3D;
  --color-intermediate-l1: #faae4b;
  --color-intermediate: #E49A42;
  --color-intermediate-d1: #B86D15;
  --color-advanced-l1: #6bb3f2;
  --color-advanced: #5A97CC;
  --color-advanced-d1: #316EA3;
  --color-complete: #4E8F3D;
  --font-text: "Fira", Verdana, Geneva, sans-serif;
  --font-condensed: "FiraCondensed", Verdana, Geneva, sans-serif;
  --font-l10: 2.33rem;
  --font-l9: 2.01rem;
  --font-l8: 1.75rem;
  --font-l7: 1.55rem;
  --font-l6: 1.40rem;
  --font-l5: 1.29rem;
  --font-l4: 1.19rem;
  --font-l3: 1.12rem;
  --font-l2: 1.07rem;
  --font-l1: 1.03rem;
  --font-m: 1rem;
  --font-s1: 0.95rem;
  --font-s2: 0.90rem;
  --font-s3: 0.85rem;
  --font-s4: 0.8rem;
  --font-normal: 400;
  --font-bold: 700;
  --radius-l3: 48px;
  --radius-l2: 24px;
  --radius-l1: 12px;
  --radius-m: 6px;
  --radius-s1: 3px;
  --line-height-m: 1.5em;
  --line-height-s1: 1.25em;
  --line-height-s2: 1.1em;
  --line-height-s3: 1em;
  --padding-m: 1rem;
  --padding-s1: 0.66rem;
  --padding-s2: 0.33rem;
  --padding-s3: 0.165rem;
  --padding-card: 0.5rem;
  --max-width-s1: 480px;
  --max-width: 640px;
  --max-width-l1: 960px;
  --max-width-l2: 1280px;
  --max-width-l3: 1920px;
  --shadow: 0 0 0 1px rgba(0,0,0,0.1), 0 0 6px 0 rgba(0,0,0,0.05);
  --shadow-d1: 0 0 0 1px rgba(0,0,0,0.2), 0 0 12px 0 rgba(0,0,0,0.1);
  --shadow-d2: 0 0 0 1px rgba(0,0,0,0.1), 0 0 12px 0 rgba(0,0,0,0.3);
  --shadow-outline: 0 0 3px 3px rgba(0,0,0,0.25);
  --shadow-inset: inset 0 0 3px 0 rgba(0,0,0,0.25);
  --transition: 200ms;
}
@media screen and (min-width: 400px) {
  :root {
    --padding-m: 4vw;
    --padding-s1: 2.66vw;
    --padding-s2: 1.33vw;
    --padding-s3: 0.665vw;
    --padding-card: 2vw;
  }
}
@media screen and (min-width: 768px) {
  :root {
    --font-l10: 3.00rem;
    --font-l9: 2.52rem;
    --font-l8: 2.13rem;
    --font-l7: 1.83rem;
    --font-l6: 1.60rem;
    --font-l5: 1.43rem;
    --font-l4: 1.29rem;
    --font-l3: 1.18rem;
    --font-l2: 1.10rem;
    --font-l1: 1.04rem;
  }
}
@media screen and (min-width: 800px) {
  :root {
    --padding-card: 1rem;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --padding-m: 3rem;
    --padding-s1: 2rem;
    --padding-s2: 1rem;
    --padding-s3: 0.5rem;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  min-height: 101vh;
  font-family: var(--font-text);
  font-weight: var(--font-normal);
  font-size: var(--font-m);
  line-height: var(--line-height-m);
  width: 100%;
  color: var(--color-gray);
  font-variant-numeric: normal;
  font-feature-settings: "lnum" 1;
  transition: opacity 200ms;
  background: var(--color-bg);
  opacity: 1;
  overflow-x: hidden;
}

body > main {
  max-width: 100vw;
}

.page-content {
  min-height: 50vh;
}

body > main .main-content {
  min-height: calc(100vh - 25rem);
}

a {
  color: var(--color-link);
  text-decoration: none;
  display: inline;
  padding-bottom: 0;
  cursor: pointer;
}
a:hover, a:focus-visible {
  color: var(--color-link-hover);
}
a .icon {
  width: 1.5em;
  height: 1.5em;
  margin: -0.4em -0.35em -0.4em;
  fill: var(--color-link);
}
a .icon.left {
  margin: -0.4em -0.35em -0.4em;
}

pre {
  font-size: 10px;
  line-height: 10px;
  margin: 0;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-bold);
}

h1 {
  font-size: var(--font-l10);
}

h2 {
  font-size: var(--font-l9);
}

h3 {
  font-size: var(--font-l8);
}

h4 {
  font-size: var(--font-l7);
}

h5 {
  font-size: var(--font-l6);
}

h6 {
  font-size: var(--font-l5);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height-s2);
  margin-top: 1.25em;
  margin-bottom: 1em;
}

p {
  line-height: var(--line-height-m);
  margin: 1em 0;
}
p:first-child {
  margin-top: 0;
}

blockquote {
  margin: 3em 0 3em 0;
  padding-left: 1.5em;
  border-left: 2px solid var(--color-gray);
}
blockquote:first-child {
  margin-top: 0;
}

dl {
  margin: 2em 0;
  padding: 0;
}
dl:first-child {
  margin-top: 0;
}

dt {
  font-size: var(--font-s1);
  font-weight: var(--font-bold);
  line-height: var(--line-height-s2);
  margin: 1.5em 0 0.25em;
}
dt:first-child {
  margin-top: 0;
}

dd {
  line-height: var(--line-height-s2);
  margin: 0.25em 0;
}

ul,
ol {
  margin: 1em 0 2em;
  padding: 0;
  list-style: none;
}
ul li::before,
ol li::before {
  color: var(--color-link);
}
ul:first-child,
ol:first-child {
  margin-top: 0;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

li {
  padding-left: 1.5rem;
  position: relative;
}
li::before {
  position: absolute;
  left: 0;
}

ul li::before {
  content: "•";
  font-weight: bold;
}

ol {
  counter-reset: ordered-counter;
}
ol li::before {
  content: counter(ordered-counter) ".";
  counter-increment: ordered-counter;
  font-weight: bold;
}

button,
[type=button],
[type=reset],
[type=submit] {
  padding: 0.65rem 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-m);
  font-family: var(--font-text);
  font-weight: var(--font-normal);
  line-height: var(--line-height-s3);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-l3);
  color: var(--color-gray);
  background: none;
  white-space: normal;
  min-height: 3rem;
  text-decoration: none;
  margin: 0 -0.25rem;
  overflow: hidden;
}
button.block-bottom,
[type=button].block-bottom,
[type=reset].block-bottom,
[type=submit].block-bottom {
  margin: 2rem auto 0;
  width: auto;
  max-width: max-content;
  min-width: 15.75rem;
}
button.group-first,
[type=button].group-first,
[type=reset].group-first,
[type=submit].group-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
  padding-right: 0.6rem;
}
button.group-middle,
[type=button].group-middle,
[type=reset].group-middle,
[type=submit].group-middle {
  border-radius: 0;
  margin-left: -1px;
  margin-right: 0;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
button.group-last,
[type=button].group-last,
[type=reset].group-last,
[type=submit].group-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  padding-left: 0.6rem;
}
@media screen and (min-width: 768px) {
  button,
[type=button],
[type=reset],
[type=submit] {
    padding-left: calc(0.375rem + 0.775vw);
    padding-right: calc(0.375rem + 0.775vw);
  }
  button.group-first,
[type=button].group-first,
[type=reset].group-first,
[type=submit].group-first {
    padding-right: calc(0.3rem + 0.62vw);
  }
  button.group-middle,
[type=button].group-middle,
[type=reset].group-middle,
[type=submit].group-middle {
    padding-left: calc(0.3rem + 0.62vw);
    padding-right: calc(0.3rem + 0.62vw);
  }
  button.group-last,
[type=button].group-last,
[type=reset].group-last,
[type=submit].group-last {
    padding-left: calc(0.3rem + 0.62vw);
  }
}
@media screen and (min-width: 1712px) {
  button,
[type=button],
[type=reset],
[type=submit] {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  button.group-first,
[type=button].group-first,
[type=reset].group-first,
[type=submit].group-first {
    padding-right: 0.96rem;
  }
  button.group-middle,
[type=button].group-middle,
[type=reset].group-middle,
[type=submit].group-middle {
    padding-left: 0.96rem;
    padding-right: 0.96rem;
  }
  button.group-last,
[type=button].group-last,
[type=reset].group-last,
[type=submit].group-last {
    padding-left: 0.96rem;
  }
}
button .icon,
[type=button] .icon,
[type=reset] .icon,
[type=submit] .icon {
  width: 1.5em;
  height: 1.5em;
  margin: -0.25em -0.5em -0.25em 0;
  fill: var(--color-gray);
}
button .icon.left,
[type=button] .icon.left,
[type=reset] .icon.left,
[type=submit] .icon.left {
  margin: -0.25em 0 -0.25em -0.5em;
}
button .icon.spinner,
[type=button] .icon.spinner,
[type=reset] .icon.spinner,
[type=submit] .icon.spinner {
  animation: spin 2s linear infinite;
}
button.slide-toggle .icon,
[type=button].slide-toggle .icon,
[type=reset].slide-toggle .icon,
[type=submit].slide-toggle .icon {
  transition: transform 100ms;
}
button.slide-toggle[aria-expanded=true] .icon,
[type=button].slide-toggle[aria-expanded=true] .icon,
[type=reset].slide-toggle[aria-expanded=true] .icon,
[type=submit].slide-toggle[aria-expanded=true] .icon {
  transform: scaleY(-1);
}
button.compact,
[type=button].compact,
[type=reset].compact,
[type=submit].compact {
  padding: 0.3rem 0.5rem;
  min-height: 2.2rem;
  font-size: var(--font-s2);
  font-family: var(--font-condensed);
}
button.compact.group-first,
[type=button].compact.group-first,
[type=reset].compact.group-first,
[type=submit].compact.group-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
  padding-right: 0.325rem;
}
button.compact.group-middle,
[type=button].compact.group-middle,
[type=reset].compact.group-middle,
[type=submit].compact.group-middle {
  border-radius: 0;
  margin-left: -1px;
  margin-right: 0;
  padding-left: 0.325rem;
  padding-right: 0.325rem;
}
button.compact.group-last,
[type=button].compact.group-last,
[type=reset].compact.group-last,
[type=submit].compact.group-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  padding-left: 0.325rem;
}
@media screen and (min-width: 768px) {
  button.compact,
[type=button].compact,
[type=reset].compact,
[type=submit].compact {
    padding-left: 1.15vw;
    padding-right: 1.15vw;
  }
  button.compact.group-first,
[type=button].compact.group-first,
[type=reset].compact.group-first,
[type=submit].compact.group-first {
    padding-right: 0.75vw;
  }
  button.compact.group-middle,
[type=button].compact.group-middle,
[type=reset].compact.group-middle,
[type=submit].compact.group-middle {
    padding-left: 0.75vw;
    padding-right: 0.75vw;
  }
  button.compact.group-last,
[type=button].compact.group-last,
[type=reset].compact.group-last,
[type=submit].compact.group-last {
    padding-left: 0.75vw;
  }
}
@media screen and (min-width: 1024px) {
  button.compact,
[type=button].compact,
[type=reset].compact,
[type=submit].compact {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  button.compact.group-first,
[type=button].compact.group-first,
[type=reset].compact.group-first,
[type=submit].compact.group-first {
    padding-right: 0.45rem;
  }
  button.compact.group-middle,
[type=button].compact.group-middle,
[type=reset].compact.group-middle,
[type=submit].compact.group-middle {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  button.compact.group-last,
[type=button].compact.group-last,
[type=reset].compact.group-last,
[type=submit].compact.group-last {
    padding-left: 0.45rem;
  }
}
button.compact .icon,
[type=button].compact .icon,
[type=reset].compact .icon,
[type=submit].compact .icon {
  margin: -0.375em -0.5em -0.375em -0.05rem;
}
button.compact .icon.left,
[type=button].compact .icon.left,
[type=reset].compact .icon.left,
[type=submit].compact .icon.left {
  margin: -0.375em -0.05em -0.375em -0.5rem;
}
button.dropdown-toggle[aria-expanded=true] .icon,
[type=button].dropdown-toggle[aria-expanded=true] .icon,
[type=reset].dropdown-toggle[aria-expanded=true] .icon,
[type=submit].dropdown-toggle[aria-expanded=true] .icon {
  transform: scaleY(-1);
}
button.filled,
[type=button].filled,
[type=reset].filled,
[type=submit].filled {
  border-color: var(--color-gray);
  background: var(--color-gray);
  color: var(--color-white);
}
button.filled .icon,
[type=button].filled .icon,
[type=reset].filled .icon,
[type=submit].filled .icon {
  fill: var(--color-bg);
}
button.white,
[type=button].white,
[type=reset].white,
[type=submit].white {
  border-color: var(--color-white);
  color: var(--color-white);
}
button.white .icon,
[type=button].white .icon,
[type=reset].white .icon,
[type=submit].white .icon {
  fill: var(--color-bg);
}
button.white.filled,
[type=button].white.filled,
[type=reset].white.filled,
[type=submit].white.filled {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-gray);
}
button.white.filled .icon,
[type=button].white.filled .icon,
[type=reset].white.filled .icon,
[type=submit].white.filled .icon {
  fill: var(--color-gray);
}
button.gray,
[type=button].gray,
[type=reset].gray,
[type=submit].gray {
  border-width: 1px;
  border-color: var(--color-gray-l8);
  background: var(--color-gray-l11);
  color: var(--color-gray);
  font-weight: var(--font-normal);
}
button.gray .icon,
[type=button].gray .icon,
[type=reset].gray .icon,
[type=submit].gray .icon {
  fill: var(--color-gray);
}
button.gray.filled,
[type=button].gray.filled,
[type=reset].gray.filled,
[type=submit].gray.filled {
  border-color: var(--color-gray-l8);
  background: var(--color-gray-l8);
  color: var(--color-gray);
}
button.gray.filled .icon,
[type=button].gray.filled .icon,
[type=reset].gray.filled .icon,
[type=submit].gray.filled .icon {
  fill: var(--color-gray);
}
button.blue,
[type=button].blue,
[type=reset].blue,
[type=submit].blue {
  border-color: var(--color-link-d1);
  color: var(--color-link);
}
button.blue .icon,
[type=button].blue .icon,
[type=reset].blue .icon,
[type=submit].blue .icon {
  fill: var(--color-link);
}
button.blue.filled,
[type=button].blue.filled,
[type=reset].blue.filled,
[type=submit].blue.filled {
  border-color: var(--color-link-d1);
  background: var(--color-link);
  color: var(--color-bg);
}
button.blue.filled .icon,
[type=button].blue.filled .icon,
[type=reset].blue.filled .icon,
[type=submit].blue.filled .icon {
  fill: var(--color-bg);
}
button[disabled], button.disabled,
[type=button][disabled],
[type=button].disabled,
[type=reset][disabled],
[type=reset].disabled,
[type=submit][disabled],
[type=submit].disabled {
  border-color: var(--color-gray-l8);
  color: var(--color-gray-l6);
  opacity: 1;
  cursor: default;
}
button[disabled] .icon, button.disabled .icon,
[type=button][disabled] .icon,
[type=button].disabled .icon,
[type=reset][disabled] .icon,
[type=reset].disabled .icon,
[type=submit][disabled] .icon,
[type=submit].disabled .icon {
  fill: var(--color-gray-l6);
}
button[disabled].blue, button[disabled].gray, button.disabled.blue, button.disabled.gray,
[type=button][disabled].blue,
[type=button][disabled].gray,
[type=button].disabled.blue,
[type=button].disabled.gray,
[type=reset][disabled].blue,
[type=reset][disabled].gray,
[type=reset].disabled.blue,
[type=reset].disabled.gray,
[type=submit][disabled].blue,
[type=submit][disabled].gray,
[type=submit].disabled.blue,
[type=submit].disabled.gray {
  border-color: var(--color-gray-l8);
  color: var(--color-gray-l6);
  opacity: 1;
  cursor: default;
}
button[disabled].blue .icon, button[disabled].gray .icon, button.disabled.blue .icon, button.disabled.gray .icon,
[type=button][disabled].blue .icon,
[type=button][disabled].gray .icon,
[type=button].disabled.blue .icon,
[type=button].disabled.gray .icon,
[type=reset][disabled].blue .icon,
[type=reset][disabled].gray .icon,
[type=reset].disabled.blue .icon,
[type=reset].disabled.gray .icon,
[type=submit][disabled].blue .icon,
[type=submit][disabled].gray .icon,
[type=submit].disabled.blue .icon,
[type=submit].disabled.gray .icon {
  fill: var(--color-gray-l6);
}
button[disabled].filled, button[disabled].gray.filled, button[disabled].blue.filled, button.disabled.filled, button.disabled.gray.filled, button.disabled.blue.filled,
[type=button][disabled].filled,
[type=button][disabled].gray.filled,
[type=button][disabled].blue.filled,
[type=button].disabled.filled,
[type=button].disabled.gray.filled,
[type=button].disabled.blue.filled,
[type=reset][disabled].filled,
[type=reset][disabled].gray.filled,
[type=reset][disabled].blue.filled,
[type=reset].disabled.filled,
[type=reset].disabled.gray.filled,
[type=reset].disabled.blue.filled,
[type=submit][disabled].filled,
[type=submit][disabled].gray.filled,
[type=submit][disabled].blue.filled,
[type=submit].disabled.filled,
[type=submit].disabled.gray.filled,
[type=submit].disabled.blue.filled {
  border-color: var(--color-gray-l8);
  background: var(--color-gray-l8);
  color: var(--color-white);
  font-weight: var(--font-bold);
}
button[disabled].filled .icon, button[disabled].gray.filled .icon, button[disabled].blue.filled .icon, button.disabled.filled .icon, button.disabled.gray.filled .icon, button.disabled.blue.filled .icon,
[type=button][disabled].filled .icon,
[type=button][disabled].gray.filled .icon,
[type=button][disabled].blue.filled .icon,
[type=button].disabled.filled .icon,
[type=button].disabled.gray.filled .icon,
[type=button].disabled.blue.filled .icon,
[type=reset][disabled].filled .icon,
[type=reset][disabled].gray.filled .icon,
[type=reset][disabled].blue.filled .icon,
[type=reset].disabled.filled .icon,
[type=reset].disabled.gray.filled .icon,
[type=reset].disabled.blue.filled .icon,
[type=submit][disabled].filled .icon,
[type=submit][disabled].gray.filled .icon,
[type=submit][disabled].blue.filled .icon,
[type=submit].disabled.filled .icon,
[type=submit].disabled.gray.filled .icon,
[type=submit].disabled.blue.filled .icon {
  fill: var(--color-white);
}
button:not([disabled]):not(.disabled):hover, button:not([disabled]):not(.disabled):focus-visible,
[type=button]:not([disabled]):not(.disabled):hover,
[type=button]:not([disabled]):not(.disabled):focus-visible,
[type=reset]:not([disabled]):not(.disabled):hover,
[type=reset]:not([disabled]):not(.disabled):focus-visible,
[type=submit]:not([disabled]):not(.disabled):hover,
[type=submit]:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-link-hover);
  border-color: var(--color-link);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
button:not([disabled]):not(.disabled):hover .icon, button:not([disabled]):not(.disabled):focus-visible .icon,
[type=button]:not([disabled]):not(.disabled):hover .icon,
[type=button]:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset]:not([disabled]):not(.disabled):hover .icon,
[type=reset]:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit]:not([disabled]):not(.disabled):hover .icon,
[type=submit]:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
button.course,
[type=button].course,
[type=reset].course,
[type=submit].course {
  border-color: var(--color-course);
  color: var(--color-course);
}
button.course .icon,
[type=button].course .icon,
[type=reset].course .icon,
[type=submit].course .icon {
  fill: var(--color-course);
}
button.course.filled,
[type=button].course.filled,
[type=reset].course.filled,
[type=submit].course.filled {
  border-color: var(--color-course);
  background: var(--color-course);
  color: var(--color-bg);
}
button.course.filled .icon,
[type=button].course.filled .icon,
[type=reset].course.filled .icon,
[type=submit].course.filled .icon {
  fill: var(--color-bg);
}
button.course:not([disabled]):not(.disabled):hover, button.course:not([disabled]):not(.disabled):focus-visible, button.course.filled:not([disabled]):not(.disabled):hover, button.course.filled:not([disabled]):not(.disabled):focus-visible,
[type=button].course:not([disabled]):not(.disabled):hover,
[type=button].course:not([disabled]):not(.disabled):focus-visible,
[type=button].course.filled:not([disabled]):not(.disabled):hover,
[type=button].course.filled:not([disabled]):not(.disabled):focus-visible,
[type=reset].course:not([disabled]):not(.disabled):hover,
[type=reset].course:not([disabled]):not(.disabled):focus-visible,
[type=reset].course.filled:not([disabled]):not(.disabled):hover,
[type=reset].course.filled:not([disabled]):not(.disabled):focus-visible,
[type=submit].course:not([disabled]):not(.disabled):hover,
[type=submit].course:not([disabled]):not(.disabled):focus-visible,
[type=submit].course.filled:not([disabled]):not(.disabled):hover,
[type=submit].course.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-course-hover);
  border-color: var(--color-course-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.course:not([disabled]):not(.disabled):hover .icon, button.course:not([disabled]):not(.disabled):focus-visible .icon, button.course.filled:not([disabled]):not(.disabled):hover .icon, button.course.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].course:not([disabled]):not(.disabled):hover .icon,
[type=button].course:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].course.filled:not([disabled]):not(.disabled):hover .icon,
[type=button].course.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].course:not([disabled]):not(.disabled):hover .icon,
[type=reset].course:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].course.filled:not([disabled]):not(.disabled):hover .icon,
[type=reset].course.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].course:not([disabled]):not(.disabled):hover .icon,
[type=submit].course:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].course.filled:not([disabled]):not(.disabled):hover .icon,
[type=submit].course.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
button.event,
[type=button].event,
[type=reset].event,
[type=submit].event {
  border-color: var(--color-event);
  color: var(--color-event);
}
button.event .icon,
[type=button].event .icon,
[type=reset].event .icon,
[type=submit].event .icon {
  fill: var(--color-event);
}
button.event.filled,
[type=button].event.filled,
[type=reset].event.filled,
[type=submit].event.filled {
  border-color: var(--color-event);
  background: var(--color-event);
  color: var(--color-bg);
}
button.event.filled .icon,
[type=button].event.filled .icon,
[type=reset].event.filled .icon,
[type=submit].event.filled .icon {
  fill: var(--color-bg);
}
button.event:not([disabled]):not(.disabled):hover, button.event:not([disabled]):not(.disabled):focus-visible, button.event.filled:not([disabled]):not(.disabled):hover, button.event.filled:not([disabled]):not(.disabled):focus-visible,
[type=button].event:not([disabled]):not(.disabled):hover,
[type=button].event:not([disabled]):not(.disabled):focus-visible,
[type=button].event.filled:not([disabled]):not(.disabled):hover,
[type=button].event.filled:not([disabled]):not(.disabled):focus-visible,
[type=reset].event:not([disabled]):not(.disabled):hover,
[type=reset].event:not([disabled]):not(.disabled):focus-visible,
[type=reset].event.filled:not([disabled]):not(.disabled):hover,
[type=reset].event.filled:not([disabled]):not(.disabled):focus-visible,
[type=submit].event:not([disabled]):not(.disabled):hover,
[type=submit].event:not([disabled]):not(.disabled):focus-visible,
[type=submit].event.filled:not([disabled]):not(.disabled):hover,
[type=submit].event.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-event-hover);
  border-color: var(--color-event-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.event:not([disabled]):not(.disabled):hover .icon, button.event:not([disabled]):not(.disabled):focus-visible .icon, button.event.filled:not([disabled]):not(.disabled):hover .icon, button.event.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].event:not([disabled]):not(.disabled):hover .icon,
[type=button].event:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].event.filled:not([disabled]):not(.disabled):hover .icon,
[type=button].event.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].event:not([disabled]):not(.disabled):hover .icon,
[type=reset].event:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].event.filled:not([disabled]):not(.disabled):hover .icon,
[type=reset].event.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].event:not([disabled]):not(.disabled):hover .icon,
[type=submit].event:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].event.filled:not([disabled]):not(.disabled):hover .icon,
[type=submit].event.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
button.microlearning,
[type=button].microlearning,
[type=reset].microlearning,
[type=submit].microlearning {
  border-color: var(--color-microlearning);
  color: var(--color-microlearning);
}
button.microlearning .icon,
[type=button].microlearning .icon,
[type=reset].microlearning .icon,
[type=submit].microlearning .icon {
  fill: var(--color-microlearning);
}
button.microlearning.filled,
[type=button].microlearning.filled,
[type=reset].microlearning.filled,
[type=submit].microlearning.filled {
  border-color: var(--color-microlearning);
  background: var(--color-microlearning);
  color: var(--color-bg);
}
button.microlearning.filled .icon,
[type=button].microlearning.filled .icon,
[type=reset].microlearning.filled .icon,
[type=submit].microlearning.filled .icon {
  fill: var(--color-bg);
}
button.microlearning:not([disabled]):not(.disabled):hover, button.microlearning:not([disabled]):not(.disabled):focus-visible, button.microlearning.filled:not([disabled]):not(.disabled):hover, button.microlearning.filled:not([disabled]):not(.disabled):focus-visible,
[type=button].microlearning:not([disabled]):not(.disabled):hover,
[type=button].microlearning:not([disabled]):not(.disabled):focus-visible,
[type=button].microlearning.filled:not([disabled]):not(.disabled):hover,
[type=button].microlearning.filled:not([disabled]):not(.disabled):focus-visible,
[type=reset].microlearning:not([disabled]):not(.disabled):hover,
[type=reset].microlearning:not([disabled]):not(.disabled):focus-visible,
[type=reset].microlearning.filled:not([disabled]):not(.disabled):hover,
[type=reset].microlearning.filled:not([disabled]):not(.disabled):focus-visible,
[type=submit].microlearning:not([disabled]):not(.disabled):hover,
[type=submit].microlearning:not([disabled]):not(.disabled):focus-visible,
[type=submit].microlearning.filled:not([disabled]):not(.disabled):hover,
[type=submit].microlearning.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-microlearning-hover);
  border-color: var(--color-microlearning-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.microlearning:not([disabled]):not(.disabled):hover .icon, button.microlearning:not([disabled]):not(.disabled):focus-visible .icon, button.microlearning.filled:not([disabled]):not(.disabled):hover .icon, button.microlearning.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].microlearning:not([disabled]):not(.disabled):hover .icon,
[type=button].microlearning:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].microlearning.filled:not([disabled]):not(.disabled):hover .icon,
[type=button].microlearning.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].microlearning:not([disabled]):not(.disabled):hover .icon,
[type=reset].microlearning:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].microlearning.filled:not([disabled]):not(.disabled):hover .icon,
[type=reset].microlearning.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].microlearning:not([disabled]):not(.disabled):hover .icon,
[type=submit].microlearning:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].microlearning.filled:not([disabled]):not(.disabled):hover .icon,
[type=submit].microlearning.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
button.resource,
[type=button].resource,
[type=reset].resource,
[type=submit].resource {
  border-color: var(--color-resource);
  color: var(--color-resource);
}
button.resource .icon,
[type=button].resource .icon,
[type=reset].resource .icon,
[type=submit].resource .icon {
  fill: var(--color-resource);
}
button.resource.filled,
[type=button].resource.filled,
[type=reset].resource.filled,
[type=submit].resource.filled {
  border-color: var(--color-resource);
  background: var(--color-resource);
  color: var(--color-bg);
}
button.resource.filled .icon,
[type=button].resource.filled .icon,
[type=reset].resource.filled .icon,
[type=submit].resource.filled .icon {
  fill: var(--color-bg);
}
button.resource:not([disabled]):not(.disabled):hover, button.resource:not([disabled]):not(.disabled):focus-visible, button.resource.filled:not([disabled]):not(.disabled):hover, button.resource.filled:not([disabled]):not(.disabled):focus-visible,
[type=button].resource:not([disabled]):not(.disabled):hover,
[type=button].resource:not([disabled]):not(.disabled):focus-visible,
[type=button].resource.filled:not([disabled]):not(.disabled):hover,
[type=button].resource.filled:not([disabled]):not(.disabled):focus-visible,
[type=reset].resource:not([disabled]):not(.disabled):hover,
[type=reset].resource:not([disabled]):not(.disabled):focus-visible,
[type=reset].resource.filled:not([disabled]):not(.disabled):hover,
[type=reset].resource.filled:not([disabled]):not(.disabled):focus-visible,
[type=submit].resource:not([disabled]):not(.disabled):hover,
[type=submit].resource:not([disabled]):not(.disabled):focus-visible,
[type=submit].resource.filled:not([disabled]):not(.disabled):hover,
[type=submit].resource.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-resource-hover);
  border-color: var(--color-resource-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.resource:not([disabled]):not(.disabled):hover .icon, button.resource:not([disabled]):not(.disabled):focus-visible .icon, button.resource.filled:not([disabled]):not(.disabled):hover .icon, button.resource.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].resource:not([disabled]):not(.disabled):hover .icon,
[type=button].resource:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].resource.filled:not([disabled]):not(.disabled):hover .icon,
[type=button].resource.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].resource:not([disabled]):not(.disabled):hover .icon,
[type=reset].resource:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].resource.filled:not([disabled]):not(.disabled):hover .icon,
[type=reset].resource.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].resource:not([disabled]):not(.disabled):hover .icon,
[type=submit].resource:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].resource.filled:not([disabled]):not(.disabled):hover .icon,
[type=submit].resource.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
button.pathway,
[type=button].pathway,
[type=reset].pathway,
[type=submit].pathway {
  border-color: var(--color-pathway-d1);
  color: var(--color-pathway);
}
button.pathway .icon,
[type=button].pathway .icon,
[type=reset].pathway .icon,
[type=submit].pathway .icon {
  fill: var(--color-pathway);
}
button.pathway.filled,
[type=button].pathway.filled,
[type=reset].pathway.filled,
[type=submit].pathway.filled {
  border-color: var(--color-pathway-d1);
  background: var(--color-pathway);
  color: var(--color-bg);
}
button.pathway.filled .icon,
[type=button].pathway.filled .icon,
[type=reset].pathway.filled .icon,
[type=submit].pathway.filled .icon {
  fill: var(--color-bg);
}
button.pathway.filled:not([disabled]):not(.disabled):hover, button.pathway.filled:not([disabled]):not(.disabled):focus-visible, button.pathway:not([disabled]):not(.disabled):hover, button.pathway:not([disabled]):not(.disabled):focus-visible,
[type=button].pathway.filled:not([disabled]):not(.disabled):hover,
[type=button].pathway.filled:not([disabled]):not(.disabled):focus-visible,
[type=button].pathway:not([disabled]):not(.disabled):hover,
[type=button].pathway:not([disabled]):not(.disabled):focus-visible,
[type=reset].pathway.filled:not([disabled]):not(.disabled):hover,
[type=reset].pathway.filled:not([disabled]):not(.disabled):focus-visible,
[type=reset].pathway:not([disabled]):not(.disabled):hover,
[type=reset].pathway:not([disabled]):not(.disabled):focus-visible,
[type=submit].pathway.filled:not([disabled]):not(.disabled):hover,
[type=submit].pathway.filled:not([disabled]):not(.disabled):focus-visible,
[type=submit].pathway:not([disabled]):not(.disabled):hover,
[type=submit].pathway:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-pathway-hover);
  border-color: var(--color-pathway);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
button.pathway.filled:not([disabled]):not(.disabled):hover .icon, button.pathway.filled:not([disabled]):not(.disabled):focus-visible .icon, button.pathway:not([disabled]):not(.disabled):hover .icon, button.pathway:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].pathway.filled:not([disabled]):not(.disabled):hover .icon,
[type=button].pathway.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=button].pathway:not([disabled]):not(.disabled):hover .icon,
[type=button].pathway:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].pathway.filled:not([disabled]):not(.disabled):hover .icon,
[type=reset].pathway.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=reset].pathway:not([disabled]):not(.disabled):hover .icon,
[type=reset].pathway:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].pathway.filled:not([disabled]):not(.disabled):hover .icon,
[type=submit].pathway.filled:not([disabled]):not(.disabled):focus-visible .icon,
[type=submit].pathway:not([disabled]):not(.disabled):hover .icon,
[type=submit].pathway:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}

fieldset {
  padding: 0;
  border: none;
  margin: 2em 0;
}

legend {
  margin: 0 0 1em;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--font-l3);
  line-height: var(--line-height-s3);
}

label {
  display: block;
  font-size: var(--font-m);
  line-height: var(--line-height-s2);
  margin: 2em 0 0.25em;
  width: -moz-fit-content;
  width: fit-content;
}
label .required {
  color: var(--color-required);
}

[type=radio],
[type=checkbox] {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  width: unset;
  height: unset;
}
[type=radio] + label,
[type=checkbox] + label {
  font-size: var(--font-m);
  line-height: var(--line-height-s1);
  padding: 0.55em 0.5em 0.55em 2.5em;
  position: relative;
  margin: 0.25em -0.25em;
  width: -moz-fit-content;
  width: fit-content;
}
[type=radio] + label::before, [type=radio] + label::after,
[type=checkbox] + label::before,
[type=checkbox] + label::after {
  position: absolute;
  content: "";
  display: block;
}
[type=radio] + label::before,
[type=checkbox] + label::before {
  border: 1px solid var(--color-gray-l7);
  height: 1.75em;
  width: 1.75em;
  left: 0.25em;
  top: 0.275em;
  background: var(--color-gray-l11);
}
[type=radio]:focus-visible + label, [type=radio] + label:hover,
[type=checkbox]:focus-visible + label,
[type=checkbox] + label:hover {
  cursor: pointer;
}
[type=radio]:focus-visible + label::before, [type=radio] + label:hover::before,
[type=checkbox]:focus-visible + label::before,
[type=checkbox] + label:hover::before {
  border-color: var(--color-link-hover);
  box-shadow: var(--shadow-inset);
}
[type=radio]:focus-visible + label,
[type=checkbox]:focus-visible + label {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

[type=radio] + label::before {
  border-radius: 100%;
}
[type=radio] + label::after {
  content: none;
  background: var(--color-link);
  height: 0.65em;
  width: 0.65em;
  border-radius: 100%;
  top: 0.8em;
  left: 0.8em;
}
[type=radio]:checked + label::after {
  content: "";
}
[type=radio]:focus-visible + label::after, [type=radio] + label:hover::after {
  background-color: var(--color-link-hover);
}

[type=checkbox] + label::before {
  border-radius: var(--radius-s1);
}
[type=checkbox] + label::after {
  content: none;
  height: 0.6em;
  width: 1em;
  border-left: 0.25em solid var(--color-link);
  border-bottom: 0.25em solid var(--color-link);
  transform: rotate(-45deg);
  left: 0.625em;
  top: 0.7em;
}
[type=checkbox]:checked + label::after {
  content: "";
}
[type=checkbox]:focus-visible + label::after, [type=checkbox] + label:hover::after {
  border-color: var(--color-link-hover);
}

[type=text],
[type=email],
[type=tel],
[type=url],
[type=password],
[type=number],
[type=date],
[type=time],
[type=search],
[type=file] {
  padding: 0.65rem 0.75rem;
  min-height: 3rem;
  margin: 0 -0.25rem;
  border: 1px solid var(--color-gray-l7);
  background: var(--color-gray-l11);
  color: var(--color-gray);
  border-radius: var(--radius-l3);
  -webkit-appearance: none;
}
@media screen and (min-width: 768px) {
  [type=text],
[type=email],
[type=tel],
[type=url],
[type=password],
[type=number],
[type=date],
[type=time],
[type=search],
[type=file] {
    padding-left: calc(0.375rem + 0.775vw);
    padding-right: calc(0.375rem + 0.775vw);
  }
}
@media screen and (min-width: 1712px) {
  [type=text],
[type=email],
[type=tel],
[type=url],
[type=password],
[type=number],
[type=date],
[type=time],
[type=search],
[type=file] {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
}
[type=text]:not([disabled]):not(.disabled):hover, [type=text]:not([disabled]):not(.disabled):focus-visible,
[type=email]:not([disabled]):not(.disabled):hover,
[type=email]:not([disabled]):not(.disabled):focus-visible,
[type=tel]:not([disabled]):not(.disabled):hover,
[type=tel]:not([disabled]):not(.disabled):focus-visible,
[type=url]:not([disabled]):not(.disabled):hover,
[type=url]:not([disabled]):not(.disabled):focus-visible,
[type=password]:not([disabled]):not(.disabled):hover,
[type=password]:not([disabled]):not(.disabled):focus-visible,
[type=number]:not([disabled]):not(.disabled):hover,
[type=number]:not([disabled]):not(.disabled):focus-visible,
[type=date]:not([disabled]):not(.disabled):hover,
[type=date]:not([disabled]):not(.disabled):focus-visible,
[type=time]:not([disabled]):not(.disabled):hover,
[type=time]:not([disabled]):not(.disabled):focus-visible,
[type=search]:not([disabled]):not(.disabled):hover,
[type=search]:not([disabled]):not(.disabled):focus-visible,
[type=file]:not([disabled]):not(.disabled):hover,
[type=file]:not([disabled]):not(.disabled):focus-visible {
  border-color: var(--color-link-hover);
  box-shadow: var(--shadow-inset);
}
[type=text]:not([disabled]):not(.disabled):focus-visible,
[type=email]:not([disabled]):not(.disabled):focus-visible,
[type=tel]:not([disabled]):not(.disabled):focus-visible,
[type=url]:not([disabled]):not(.disabled):focus-visible,
[type=password]:not([disabled]):not(.disabled):focus-visible,
[type=number]:not([disabled]):not(.disabled):focus-visible,
[type=date]:not([disabled]):not(.disabled):focus-visible,
[type=time]:not([disabled]):not(.disabled):focus-visible,
[type=search]:not([disabled]):not(.disabled):focus-visible,
[type=file]:not([disabled]):not(.disabled):focus-visible {
  outline: 3px solid #2459c2;
}
[type=text].error,
[type=email].error,
[type=tel].error,
[type=url].error,
[type=password].error,
[type=number].error,
[type=date].error,
[type=time].error,
[type=search].error,
[type=file].error {
  border-color: var(--color-error);
}

[type=search] + [type=submit] {
  position: absolute;
  right: 1px;
  top: 1px;
  height: calc(100% - 2px);
  min-height: calc(100% - 2px);
  padding: 0;
  width: calc(3rem - 2px);
  border-radius: var(--radius-l3);
}
[type=search] + [type=submit]:not(:hover):not(:focus-visible) {
  background: none;
  border: none;
}
[type=search] + [type=submit] span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
[type=search] + [type=submit] .icon {
  display: block;
  width: 2.25em;
  height: 2.25em;
  margin: 0.125rem -0.25em;
  align-self: center;
  grid-column: 2;
  grid-row: 1/span 2;
}
[type=search] + [type=submit]:not(:hover):not(:focus-visible) {
  background: var(--color-gray-l11);
  border: transparent;
  color: var(--color-gray);
}
[type=search] + [type=submit]:not(:hover):not(:focus-visible) .icon {
  fill: var(--color-gray);
}
[type=search] + [type=submit]:hover, [type=search] + [type=submit]:focus-visible {
  color: var(--color-bg);
}
[type=search] + [type=submit]:hover .icon, [type=search] + [type=submit]:focus-visible .icon {
  fill: var(--color-bg);
}

.error [type=text],
.error [type=email],
.error [type=tel],
.error [type=url],
.error [type=password],
.error [type=number],
.error [type=date],
.error [type=time],
.error [type=search],
.error [type=file] {
  border-color: var(--color-error);
}

[type=password] {
  letter-spacing: 0.2em;
}

[type=text][readonly],
[type=email][readonly] {
  background: none;
  border-color: var(--color-gray-l10);
}
[type=text][disabled],
[type=email][disabled] {
  border-color: var(--color-gray-l10);
  background: none;
  color: var(--color-gray-l5);
}

[type=file]:focus-visible {
  outline-offset: -2px;
}

::placeholder {
  color: var(--color-gray-l5);
  opacity: 1;
}

:-ms-input-placeholder {
  color: var(--color-gray-l5);
  opacity: 1;
}

::-webkit-outer-spin-button,
::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[type=number] {
  -moz-appearance: textfield;
}

textarea {
  padding: 1.2rem 1.2rem;
  border: 1px solid var(--color-gray-l7);
  background: var(--color-gray-l11);
  color: var(--color-gray);
  line-height: var(--line-height-m);
  resize: vertical;
  border-radius: var(--radius-l2);
  border-bottom-right-radius: 0;
}
textarea:not([disabled]):not(.disabled):hover, textarea:not([disabled]):not(.disabled):focus-visible {
  border-color: var(--color-link-hover);
  box-shadow: var(--shadow-inset);
}
textarea:not([disabled]):not(.disabled):focus-visible {
  outline: 3px solid #2459c2;
}

select {
  display: block;
  min-height: 3rem;
  padding: 0.8rem 2.5rem 0.8rem 1.2rem;
  width: calc(100% + 0.5rem);
  margin: 0 -0.25rem;
  border: 1px solid var(--color-gray-l7);
  background: var(--color-gray-l11);
  color: var(--color-gray);
  border-radius: var(--radius-l3);
  max-width: calc(100% + 0.5rem);
  box-sizing: border-box;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23292826' d='M12.8233,18.5684l9.0156-9.0155l-2.1213-2.1213l-6.8943,6.8943L6.2825,7.785L4.1612,9.9064L12.8233,18.5684z'/%3E%3C/svg%3E"), var(--color-gray-l11);
  background-repeat: no-repeat, repeat;
  background-position: right 1.1em top 50%, 0 0;
  background-size: 1em auto, 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
select::-ms-expand {
  display: none;
  /* Hide arrow icon in IE browsers */
}
select:not([disabled]):not(.disabled):not([aria-disabled=true]):hover, select:not([disabled]):not(.disabled):not([aria-disabled=true]):focus-visible {
  border-color: var(--color-link-hover);
  box-shadow: var(--shadow);
  color: var(--color-bg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23ffffff' d='M12.8233,18.5684l9.0156-9.0155l-2.1213-2.1213l-6.8943,6.8943L6.2825,7.785L4.1612,9.9064L12.8233,18.5684z'/%3E%3C/svg%3E"), var(--color-link-hover);
  background-repeat: no-repeat, repeat;
  background-position: right 1.1em top 50%, 0 0;
  background-size: 1em auto, 100%;
}
select:not([disabled]):not(.disabled):not([aria-disabled=true]):focus-visible {
  outline: 3px solid #2459c2;
  box-shadow: var(--shadow-outline);
}
select option {
  font-weight: normal;
  /* Set options to normal weight */
}
select:disabled, select.disabled, select[aria-disabled=true] {
  color: graytext;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}
select.error {
  border-color: var(--color-error);
}

.error select {
  border-color: var(--color-error);
}
.error [type=checkbox] + label::before {
  border-color: var(--color-error);
}
.error [type=checkbox] + label + .custom_validation_error {
  padding-left: 2.25em;
  margin: -0.25em 0 0.75em;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir=rtl] select,
:root:lang(ar) select,
:root:lang(iw) select {
  background-position: left 0.7em top 50%, 0 0;
  padding: 0.6em 0.8em 0.5em 1.4em;
}

.max-width {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
}

.max-width-l1 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}

.max-width-l2 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l2);
}

.max-width-l3 {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}

.padding-m {
  padding: var(--padding-m);
}

.padding-s1 {
  padding: var(--padding-s1);
}

.padding-s2 {
  padding: var(--padding-s2);
}

.padding-s3 {
  padding: var(--padding-s3);
}

.padding-block {
  padding: calc(var(--padding-m) * 2) var(--padding-m);
}

.padding-block-last {
  padding-bottom: calc(var(--padding-m) * 4);
}

[class^=padding-block] [class^=padding-block] {
  padding-left: 0;
  padding-right: 0;
}

.sr-only {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hidden {
  display: none;
}

.button {
  padding: 0.65rem 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-m);
  font-family: var(--font-text);
  font-weight: var(--font-normal);
  line-height: var(--line-height-s3);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-l3);
  color: var(--color-gray);
  background: none;
  white-space: normal;
  min-height: 3rem;
  text-decoration: none;
  margin: 0 -0.25rem;
  overflow: hidden;
}
.button.block-bottom {
  margin: 2rem auto 0;
  width: auto;
  max-width: max-content;
  min-width: 15.75rem;
}
.button.group-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
  padding-right: 0.6rem;
}
.button.group-middle {
  border-radius: 0;
  margin-left: -1px;
  margin-right: 0;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.button.group-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  padding-left: 0.6rem;
}
@media screen and (min-width: 768px) {
  .button {
    padding-left: calc(0.375rem + 0.775vw);
    padding-right: calc(0.375rem + 0.775vw);
  }
  .button.group-first {
    padding-right: calc(0.3rem + 0.62vw);
  }
  .button.group-middle {
    padding-left: calc(0.3rem + 0.62vw);
    padding-right: calc(0.3rem + 0.62vw);
  }
  .button.group-last {
    padding-left: calc(0.3rem + 0.62vw);
  }
}
@media screen and (min-width: 1712px) {
  .button {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .button.group-first {
    padding-right: 0.96rem;
  }
  .button.group-middle {
    padding-left: 0.96rem;
    padding-right: 0.96rem;
  }
  .button.group-last {
    padding-left: 0.96rem;
  }
}
.button .icon {
  width: 1.5em;
  height: 1.5em;
  margin: -0.25em -0.5em -0.25em 0;
  fill: var(--color-gray);
}
.button .icon.left {
  margin: -0.25em 0 -0.25em -0.5em;
}
.button .icon.spinner {
  animation: spin 2s linear infinite;
}
.button.slide-toggle .icon {
  transition: transform 100ms;
}
.button.slide-toggle[aria-expanded=true] .icon {
  transform: scaleY(-1);
}
.button.compact {
  padding: 0.3rem 0.5rem;
  min-height: 2.2rem;
  font-size: var(--font-s2);
  font-family: var(--font-condensed);
}
.button.compact.group-first {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0;
  padding-right: 0.325rem;
}
.button.compact.group-middle {
  border-radius: 0;
  margin-left: -1px;
  margin-right: 0;
  padding-left: 0.325rem;
  padding-right: 0.325rem;
}
.button.compact.group-last {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  padding-left: 0.325rem;
}
@media screen and (min-width: 768px) {
  .button.compact {
    padding-left: 1.15vw;
    padding-right: 1.15vw;
  }
  .button.compact.group-first {
    padding-right: 0.75vw;
  }
  .button.compact.group-middle {
    padding-left: 0.75vw;
    padding-right: 0.75vw;
  }
  .button.compact.group-last {
    padding-left: 0.75vw;
  }
}
@media screen and (min-width: 1024px) {
  .button.compact {
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .button.compact.group-first {
    padding-right: 0.45rem;
  }
  .button.compact.group-middle {
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
  .button.compact.group-last {
    padding-left: 0.45rem;
  }
}
.button.compact .icon {
  margin: -0.375em -0.5em -0.375em -0.05rem;
}
.button.compact .icon.left {
  margin: -0.375em -0.05em -0.375em -0.5rem;
}
.button.dropdown-toggle[aria-expanded=true] .icon {
  transform: scaleY(-1);
}
.button.filled {
  border-color: var(--color-gray);
  background: var(--color-gray);
  color: var(--color-white);
}
.button.filled .icon {
  fill: var(--color-bg);
}
.button.white {
  border-color: var(--color-white);
  color: var(--color-white);
}
.button.white .icon {
  fill: var(--color-bg);
}
.button.white.filled {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-gray);
}
.button.white.filled .icon {
  fill: var(--color-gray);
}
.button.gray {
  border-width: 1px;
  border-color: var(--color-gray-l8);
  background: var(--color-gray-l11);
  color: var(--color-gray);
  font-weight: var(--font-normal);
}
.button.gray .icon {
  fill: var(--color-gray);
}
.button.gray.filled {
  border-color: var(--color-gray-l8);
  background: var(--color-gray-l8);
  color: var(--color-gray);
}
.button.gray.filled .icon {
  fill: var(--color-gray);
}
.button.blue {
  border-color: var(--color-link-d1);
  color: var(--color-link);
}
.button.blue .icon {
  fill: var(--color-link);
}
.button.blue.filled {
  border-color: var(--color-link-d1);
  background: var(--color-link);
  color: var(--color-bg);
}
.button.blue.filled .icon {
  fill: var(--color-bg);
}
.button[disabled], .button.disabled {
  border-color: var(--color-gray-l8);
  color: var(--color-gray-l6);
  opacity: 1;
  cursor: default;
}
.button[disabled] .icon, .button.disabled .icon {
  fill: var(--color-gray-l6);
}
.button[disabled].blue, .button[disabled].gray, .button.disabled.blue, .button.disabled.gray {
  border-color: var(--color-gray-l8);
  color: var(--color-gray-l6);
  opacity: 1;
  cursor: default;
}
.button[disabled].blue .icon, .button[disabled].gray .icon, .button.disabled.blue .icon, .button.disabled.gray .icon {
  fill: var(--color-gray-l6);
}
.button[disabled].filled, .button[disabled].gray.filled, .button[disabled].blue.filled, .button.disabled.filled, .button.disabled.gray.filled, .button.disabled.blue.filled {
  border-color: var(--color-gray-l8);
  background: var(--color-gray-l8);
  color: var(--color-white);
  font-weight: var(--font-bold);
}
.button[disabled].filled .icon, .button[disabled].gray.filled .icon, .button[disabled].blue.filled .icon, .button.disabled.filled .icon, .button.disabled.gray.filled .icon, .button.disabled.blue.filled .icon {
  fill: var(--color-white);
}
.button:not([disabled]):not(.disabled):hover, .button:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-link-hover);
  border-color: var(--color-link);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button:not([disabled]):not(.disabled):hover .icon, .button:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
.button.course {
  border-color: var(--color-course);
  color: var(--color-course);
}
.button.course .icon {
  fill: var(--color-course);
}
.button.course.filled {
  border-color: var(--color-course);
  background: var(--color-course);
  color: var(--color-bg);
}
.button.course.filled .icon {
  fill: var(--color-bg);
}
.button.course:not([disabled]):not(.disabled):hover, .button.course:not([disabled]):not(.disabled):focus-visible, .button.course.filled:not([disabled]):not(.disabled):hover, .button.course.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-course-hover);
  border-color: var(--color-course-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button.course:not([disabled]):not(.disabled):hover .icon, .button.course:not([disabled]):not(.disabled):focus-visible .icon, .button.course.filled:not([disabled]):not(.disabled):hover .icon, .button.course.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
.button.event {
  border-color: var(--color-event);
  color: var(--color-event);
}
.button.event .icon {
  fill: var(--color-event);
}
.button.event.filled {
  border-color: var(--color-event);
  background: var(--color-event);
  color: var(--color-bg);
}
.button.event.filled .icon {
  fill: var(--color-bg);
}
.button.event:not([disabled]):not(.disabled):hover, .button.event:not([disabled]):not(.disabled):focus-visible, .button.event.filled:not([disabled]):not(.disabled):hover, .button.event.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-event-hover);
  border-color: var(--color-event-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button.event:not([disabled]):not(.disabled):hover .icon, .button.event:not([disabled]):not(.disabled):focus-visible .icon, .button.event.filled:not([disabled]):not(.disabled):hover .icon, .button.event.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
.button.microlearning {
  border-color: var(--color-microlearning);
  color: var(--color-microlearning);
}
.button.microlearning .icon {
  fill: var(--color-microlearning);
}
.button.microlearning.filled {
  border-color: var(--color-microlearning);
  background: var(--color-microlearning);
  color: var(--color-bg);
}
.button.microlearning.filled .icon {
  fill: var(--color-bg);
}
.button.microlearning:not([disabled]):not(.disabled):hover, .button.microlearning:not([disabled]):not(.disabled):focus-visible, .button.microlearning.filled:not([disabled]):not(.disabled):hover, .button.microlearning.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-microlearning-hover);
  border-color: var(--color-microlearning-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button.microlearning:not([disabled]):not(.disabled):hover .icon, .button.microlearning:not([disabled]):not(.disabled):focus-visible .icon, .button.microlearning.filled:not([disabled]):not(.disabled):hover .icon, .button.microlearning.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
.button.resource {
  border-color: var(--color-resource);
  color: var(--color-resource);
}
.button.resource .icon {
  fill: var(--color-resource);
}
.button.resource.filled {
  border-color: var(--color-resource);
  background: var(--color-resource);
  color: var(--color-bg);
}
.button.resource.filled .icon {
  fill: var(--color-bg);
}
.button.resource:not([disabled]):not(.disabled):hover, .button.resource:not([disabled]):not(.disabled):focus-visible, .button.resource.filled:not([disabled]):not(.disabled):hover, .button.resource.filled:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-resource-hover);
  border-color: var(--color-resource-hover);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button.resource:not([disabled]):not(.disabled):hover .icon, .button.resource:not([disabled]):not(.disabled):focus-visible .icon, .button.resource.filled:not([disabled]):not(.disabled):hover .icon, .button.resource.filled:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}
.button.pathway {
  border-color: var(--color-pathway-d1);
  color: var(--color-pathway);
}
.button.pathway .icon {
  fill: var(--color-pathway);
}
.button.pathway.filled {
  border-color: var(--color-pathway-d1);
  background: var(--color-pathway);
  color: var(--color-bg);
}
.button.pathway.filled .icon {
  fill: var(--color-bg);
}
.button.pathway.filled:not([disabled]):not(.disabled):hover, .button.pathway.filled:not([disabled]):not(.disabled):focus-visible, .button.pathway:not([disabled]):not(.disabled):hover, .button.pathway:not([disabled]):not(.disabled):focus-visible {
  background: var(--color-pathway-hover);
  border-color: var(--color-pathway);
  color: var(--color-bg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.button.pathway.filled:not([disabled]):not(.disabled):hover .icon, .button.pathway.filled:not([disabled]):not(.disabled):focus-visible .icon, .button.pathway:not([disabled]):not(.disabled):hover .icon, .button.pathway:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-bg);
}

.block-bottom-group-buttons {
  margin: 3rem auto -0.25rem;
  display: flex;
  width: auto;
  flex-wrap: wrap;
  max-width: max-content;
  justify-content: center;
}
.block-bottom-group-buttons .button {
  min-width: 15.75rem;
  width: auto;
  max-width: max-content;
  margin: 0.25rem;
}

.tooltip {
  width: max-content;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--color-tooltip) !important;
  color: var(--color-bg) !important;
  padding: var(--padding-s3) var(--padding-s2);
  border-radius: var(--radius-s1);
  font-size: var(--font-s1);
  font-weight: var(--font-normal);
  line-height: var(--line-height-s1);
  pointer-events: none;
  display: none;
  z-index: 4;
  max-width: 280px;
}
.tooltip.tooltip-required {
  background: var(--color-required);
}
.tooltip[data-show] {
  display: block;
}
.tooltip .arrow,
.tooltip .arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}
.tooltip .arrow {
  visibility: hidden;
}
.tooltip .arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}
.tooltip[data-popper-placement^=top] > .arrow {
  bottom: -4px;
}
.tooltip[data-popper-placement^=bottom] > .arrow {
  top: -4px;
}
.tooltip[data-popper-placement^=left] > .arrow {
  right: -4px;
}
.tooltip[data-popper-placement^=right] > .arrow {
  left: -4px;
}

form .label {
  display: block;
  font-size: var(--font-m);
  line-height: var(--line-height-s2);
  margin: 2em 0 0.25em;
}
form .instructions {
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.5em 0;
  color: var(--color-gray-l4);
}
form .form-item [type=text],
form .form-item [type=email],
form .form-item [type=tel],
form .form-item [type=url],
form .form-item [type=password],
form .form-item [type=number],
form .form-item [type=date],
form .form-item [type=time],
form .form-item [type=search],
form .form-item [type=file],
form .form-item .selectstyle {
  width: calc(100% + 0.5rem);
}
form .errors {
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.5em 0;
  color: var(--color-error);
}
form .errors li {
  padding: 0;
  line-height: var(--line-height-s1);
  margin: 0.5em 0;
}
form .errors li::before {
  content: none;
  display: none;
}
form .custom_validation_error {
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.5em 0 !important;
  color: var(--color-error);
  display: none;
}
form .custom_validation_error li {
  padding: 0;
  line-height: var(--line-height-s1);
  margin: 0.5em 0;
}
form .custom_validation_error li::before {
  content: none;
  display: none;
}
form .form-item[data-validatecheckboxes].error p.custom_validation_error {
  margin: -0.5em 0 1em 2.5em;
}
form .instructions + .custom_validation_error {
  margin-top: -0.25em;
}
form .error .custom_validation_error {
  display: block;
}
form .message {
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.5em 0;
}
form .message.alert {
  color: var(--color-error);
}
form .required {
  color: var(--color-required);
}
form .required.popper {
  overflow: hidden;
  text-indent: 200%;
  position: relative;
  display: inline-block;
  width: 0.6em;
  white-space: nowrap;
  line-height: 1;
  margin: -1rem 0 0;
}
form .required.popper::after {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  text-indent: 0;
  font-size: 1.25em;
  color: var(--color-required);
}
form .required-checkboxes-group-checkbox {
  margin: -2px;
  display: block;
  position: absolute;
}

.avatar-uploader {
  width: 11.5rem;
  height: 11.5rem;
  border: 1px solid var(--color-gray-l7);
  background-color: var(--color-gray-l8);
  border-radius: 100px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.5rem;
}
.avatar-uploader.dragover {
  border-color: var(--color-link-hover);
}
.avatar-uploader img {
  z-index: 1;
  border: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  object-fit: cover;
}
.avatar-uploader [type=file] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 100%;
}
.avatar-uploader .button {
  position: absolute;
  bottom: -2rem;
  z-index: 4;
  text-transform: none;
  padding: 0.25rem 0.6rem;
  font-size: var(--font-s3);
  font-weight: var(--font-normal);
  line-height: var(--line-height-s2);
  border-width: 1px;
  width: 12.5rem;
  text-align: center;
}
.avatar-uploader .button:not(:hover):not(:focus-visible) {
  background: #fbfbfb;
}
.avatar-uploader:hover, .avatar-uploader.dragover {
  border: 1px solid var(--color-link-hover);
  box-shadow: inset 0 0 3px 0 black;
}
.avatar-uploader:hover img, .avatar-uploader.dragover img {
  opacity: 0.8;
}
.avatar-uploader:hover .button:not(:hover):not(:focus-visible), .avatar-uploader.dragover .button:not(:hover):not(:focus-visible) {
  border-color: var(--color-link-hover);
  background: var(--color-link-hover);
  color: var(--color-bg);
  box-shadow: var(--shadow-s-hover);
}

.search {
  position: relative;
  width: 100%;
}
.search [type=search] {
  width: calc(100% + 0.5rem);
  display: block;
  padding-right: 2.75rem;
  text-overflow: ellipsis;
  background: var(--color-gray-l11);
  border: 1px solid var(--color-gray-l8);
}
.search [type=search]::-webkit-search-decoration, .search [type=search]::-webkit-search-cancel-button, .search [type=search]::-webkit-search-results-button, .search [type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.site-footer {
  background-color: var(--color-gray-l1);
  color: var(--color-white);
}
.site-footer h2 {
  font-size: var(--font-l1);
  margin: 0;
}
.site-footer a {
  color: var(--color-white);
}
.site-footer a:hover, .site-footer a:focus-visible {
  color: var(--color-link-hover);
}
.site-footer > div + div {
  border-top: 1px solid var(--color-gray);
}

.site-footer-wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: var(--padding-m);
}

.site-footer-navs .site-footer-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.site-footer-navs .site-footer-wrapper > * {
  width: 100%;
}
.site-footer-navs .site-footer-wrapper a {
  padding: 0.5rem;
}
.site-footer-navs .site-footer-wrapper .social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.site-footer-navs .site-footer-wrapper .social a {
  display: flex;
  align-items: center;
}
.site-footer-navs .site-footer-wrapper .social svg {
  fill: var(--color-bg);
  width: 2em;
  height: 2em;
  margin: -0.4em 0.25em -0.4em -0.35em;
  display: inline-block;
}
.site-footer-navs .site-footer-wrapper .social span {
  line-height: var(--line-height-s3);
}
.site-footer-navs .site-footer-wrapper .social a:hover,
.site-footer-navs .site-footer-wrapper .social a:focus-visible {
  color: var(--color-link-hover);
}
.site-footer-navs .site-footer-wrapper .social a:hover svg,
.site-footer-navs .site-footer-wrapper .social a:focus-visible svg {
  fill: var(--color-link-hover);
}
.site-footer-navs h2 {
  margin: 0;
  padding: 0.5rem;
  font-size: var(--font-m);
  line-height: var(--line-height-m);
  align-self: center;
  font-weight: var(--font-normal);
}
.site-footer-navs ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: calc(var(--padding-s2) * -0.25) calc(var(--padding-s2) * -1);
  padding: var(--padding-s1) var(--padding-s2);
}
.site-footer-navs ul li {
  padding-left: 0;
}
.site-footer-navs ul li::before {
  content: none;
  display: none;
}

.site-footer-navs-secondary-menu ul {
  padding: calc(var(--padding-s1) - 0.5rem) var(--padding-s2);
}
.site-footer-navs-secondary-menu li {
  padding: 0.5rem 0;
}

.site-footer-credits .site-footer-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto calc(-1 * var(--padding-m));
  padding-top: calc(var(--padding-m) * 2 + 1rem);
  padding-bottom: calc(var(--padding-m) * 2 + 0.5rem);
  width: 100%;
}
@media (min-width: 1080px) {
  .site-footer-credits .site-footer-wrapper {
    flex-direction: row;
    padding-top: calc(var(--padding-m) * 1 + 1rem);
    padding-bottom: calc(var(--padding-m) * 1);
  }
}
.site-footer-credits .site-footer-wrapper h2 {
  margin: calc(var(--padding-m) * 0.125) 0 0;
  text-align: center;
  font-weight: var(--font-normal);
}
.site-footer-credits ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: calc(var(--padding-m) * 0.5) calc(var(--padding-m) * 0.75) var(--padding-m);
}
.site-footer-credits ul li {
  padding-left: 0;
}
.site-footer-credits ul li::before {
  content: none;
  display: none;
}
@media (min-width: 1080px) {
  .site-footer-credits ul {
    margin: calc(var(--padding-m) * 0.5) 2.9vw var(--padding-m);
  }
}
.site-footer-credits li {
  margin: calc(var(--padding-m) * -0.25) calc(var(--padding-m) * 0.25);
}
@media (min-width: 1080px) {
  .site-footer-credits li {
    margin: calc(var(--padding-m) * -0.25) 1vw;
  }
}
.site-footer-credits a {
  display: block;
  padding: 0.5rem;
  margin: -0.5rem;
  overflow: hidden;
}

.skip-to {
  padding: 0.25rem 6vw;
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translate(-50%, 0);
  color: var(--color-white);
  z-index: 100000;
  text-decoration: none;
  background: var(--color-link);
}
.skip-to:focus-visible {
  top: 0;
  color: var(--color-white);
  background: var(--color-link-hover);
  z-index: 100;
}

.no-js-message {
  padding: 0.25rem var(--padding-m);
  background: var(--color-event);
  color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: relative;
  z-index: 10;
}

.top-navs {
  border-bottom: 1px solid var(--color-gray-l9);
}
.top-navs > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: 0.75rem var(--padding-m);
  display: grid;
  grid-column-gap: 0.75rem;
  grid-row-gap: 1rem;
  grid-template-columns: 1fr 4.25rem;
  grid-template-areas: "logo menutoggle";
}
@media screen and (min-width: 520px) {
  .top-navs > .wrapper {
    grid-template-columns: 1fr 4.25rem 7.5rem;
    grid-template-areas: "logo menutoggle user";
  }
}
@media screen and (min-width: 1120px) {
  .top-navs > .wrapper {
    grid-template-columns: 13rem 1fr auto 7.5rem;
    grid-template-areas: "logo menu sites user";
  }
}
@media screen and (min-width: 1240px) {
  .top-navs > .wrapper {
    grid-template-columns: 9rem 11.5rem 1fr 11.5rem 9rem;
    grid-template-areas: "logo logo menu sites user";
  }
}
.top-navs .logo {
  grid-area: logo;
  display: block;
  margin: -0.25rem 0 -0.25rem -0.25rem;
  padding: 0;
  justify-self: start;
}
.top-navs .logo a {
  display: flex;
  margin: -0.25rem -0.75rem -0.25rem -0.25rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  height: 3rem;
  width: auto;
  align-items: center;
  justify-content: start;
  border-radius: var(--radius-l3);
}
.top-navs .logo img,
.top-navs .logo svg {
  display: block;
  height: 10.526316vw;
  width: auto;
  margin: 0;
}
@media screen and (min-width: 380px) {
  .top-navs .logo img,
.top-navs .logo svg {
    height: 2.5rem;
  }
}
.top-navs .menu-toggle {
  grid-area: menutoggle;
}
@media screen and (min-width: 1120px) {
  .top-navs .menu-toggle {
    display: none;
  }
}
.top-navs .main-nav {
  grid-area: main-menu;
}
@media screen and (max-width: 1119px) {
  .top-navs .main-nav {
    padding: 0.75rem var(--padding-m);
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .top-navs .main-nav {
    padding: 1.25rem var(--padding-m);
  }
}
@media screen and (min-width: 1120px) {
  .top-navs .main-nav {
    padding-top: 0;
    border-top: 1px solid var(--color-gray-l9);
    grid-area: menu;
    margin: 0 calc(var(--padding-m) * -1);
    border-top: none;
  }
}
.top-navs .main-nav ul {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.top-navs .main-nav ul li {
  padding-left: 0;
}
.top-navs .main-nav ul li::before {
  content: none;
  display: none;
}
@media screen and (min-width: 768px) {
  .top-navs .main-nav ul {
    flex-direction: row;
  }
}
.top-navs .main-nav .menu-item {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.top-navs .main-nav .menu-item:focus-within {
  outline: none;
}
.top-navs .main-nav .menu-item:before {
  content: none;
  display: none;
}
.top-navs .main-nav .menu-item.active a:not(:hover):not(:focus-visible) {
  color: var(--color-link);
}
.top-navs .main-nav a {
  line-height: 1em;
  padding: 0.8em 0.75em 0.2em;
  margin: 0;
  font-family: var(--font-condensed);
  font-size: calc(var(--font-l2) * 0.9);
  display: block;
}
@media screen and (min-width: 1380px) {
  .top-navs .main-nav a {
    padding: 0.6em 0.75em 0.4em;
    font-size: var(--font-l2);
  }
}
.top-navs .main-nav a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
@media screen and (min-width: 768px) {
  .top-navs .main-nav .menu-item + .menu-item a {
    margin-left: -0.95em;
  }
}
@media screen and (min-width: 1240px) {
  .top-navs .main-nav .menu-item + .menu-item a {
    margin-left: -0.55em;
  }
}
.top-navs .sites-toggle {
  grid-area: sitestoggle;
}
@media screen and (max-width: 1119px) {
  .top-navs .sites-toggle {
    display: none;
  }
}
.top-navs .sites-navs {
  grid-area: sites;
  display: flex;
  justify-content: end;
}
@media screen and (max-width: 1119px) {
  .top-navs .sites-navs {
    display: none;
  }
}
.top-navs .user-nav {
  grid-area: user;
  display: flex;
}
@media screen and (max-width: 1239px) {
  .top-navs .user-nav .register-link .icon,
.top-navs .user-nav .login-link .icon {
    display: none;
  }
}
.top-navs .user-nav .register-link {
  width: calc(56% + 0.5rem);
}
.top-navs .user-nav .login-link {
  width: calc(44% + 0.5rem);
}
@media screen and (max-width: 519px) {
  .top-navs .user-nav {
    display: none;
  }
}
.top-navs .user-nav-switch {
  padding: 0.2rem 0.75rem 0.2rem 0.2rem;
  width: calc(100% + 0.5rem);
  margin: 0 -0.25rem;
  justify-content: space-between;
}
.top-navs .user-nav-switch .user {
  display: flex;
  align-items: center;
  align-self: start;
  padding: 0;
}
.top-navs .user-nav-switch .user .avatar {
  border-radius: 100%;
  border: 1px solid var(--color-gray-l7);
  width: 1.675rem;
  height: 1.675rem;
  margin-right: 0.2rem;
  overflow: hidden;
  position: relative;
}
.top-navs .user-nav-switch .user .avatar img,
.top-navs .user-nav-switch .user .avatar svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.top-navs .user-nav-switch .user .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 5.5rem;
}
@media screen and (max-width: 1119px) and (max-width: 519px) {
  .top-navs.expanded > .wrapper {
    padding-bottom: 1.5rem;
    grid-template-columns: 1fr 4.25rem;
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "logo menutoggle" "main-menu main-menu" "sites sites" "user user";
  }
  .top-navs.expanded > .wrapper .main-nav {
    display: block;
    position: relative;
    padding-top: 1rem;
  }
  .top-navs.expanded > .wrapper .main-nav::before {
    content: "";
    position: absolute;
    width: 100vw;
    top: -0.25rem;
    left: calc(var(--padding-m) * -1);
    height: 1px;
    background: var(--color-gray-l9);
  }
  .top-navs.expanded > .wrapper .sites-navs,
.top-navs.expanded > .wrapper .user-nav {
    display: flex;
    justify-content: center;
  }
  .top-navs.expanded > .wrapper .sites-navs {
    padding-top: 1.5rem;
    position: relative;
  }
  .top-navs.expanded > .wrapper .sites-navs::before {
    content: "";
    position: absolute;
    width: 100vw;
    top: 0;
    left: calc(var(--padding-m) * -1);
    height: 1px;
    background: var(--color-gray-l9);
  }
  .top-navs.expanded > .wrapper .user-nav {
    width: 7.5rem;
    margin: 0 auto;
  }
}
@media screen and (max-width: 1119px) and (min-width: 520px) and (max-width: 1119px) {
  .top-navs.expanded > .wrapper {
    grid-template-columns: 1fr 4.25rem 7.5rem;
    grid-template-rows: auto auto auto;
    grid-template-areas: "logo menutoggle user" "main-menu main-menu main-menu" "sites sites sites";
  }
  .top-navs.expanded > .wrapper .main-nav {
    display: block;
    position: relative;
    padding-top: 1rem;
  }
  .top-navs.expanded > .wrapper .main-nav::before {
    content: "";
    position: absolute;
    width: 100vw;
    top: -0.25rem;
    left: calc(var(--padding-m) * -1);
    height: 1px;
    background: var(--color-gray-l9);
  }
  .top-navs.expanded > .wrapper .sites-navs {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    position: relative;
  }
  .top-navs.expanded > .wrapper .sites-navs::before {
    content: "";
    position: absolute;
    width: 100vw;
    top: 0;
    left: calc(var(--padding-m) * -1);
    height: 1px;
    background: var(--color-gray-l9);
  }
}
@media screen and (max-width: 1119px) and (min-width: 1120px) {
  .top-navs.expanded > .wrapper {
    grid-template-columns: 13rem 1fr 3.75rem 7.5rem;
    grid-template-areas: "logo menu sitestoggle user";
  }
}
@media screen and (max-width: 1119px) and (min-width: 1240px) {
  .top-navs.expanded > .wrapper {
    grid-template-columns: 9rem 3.75rem 1fr 3.75rem 9rem;
    grid-template-areas: "logo logo menu sitestoggle user";
  }
}

.dialog {
  background: var(--color-sdglearn-d3-fade5);
  padding: var(--padding-m);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.dialog.overlay {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.dialog.overlay.open {
  display: flex;
}
.dialog > .box {
  background: var(--color-white);
  border-radius: var(--radius-m);
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--padding-m);
  max-width: var(--max-width-s1);
}
.dialog > .box > * {
  text-align: center;
}
.dialog > .box > :first-child {
  margin-top: 0;
}
.dialog > .box > .button {
  margin: 2rem auto 0;
  width: 100%;
  max-width: 24rem;
}
.dialog > .box h2 {
  font-size: var(--font-l7);
}
.dialog > .box h3 {
  font-size: var(--font-l6);
}
.dialog > .box h4 {
  font-size: var(--font-l5);
}
.dialog > .box h5 {
  font-size: var(--font-l4);
}
.dialog > .box h6 {
  font-size: var(--font-l3);
}
.dialog > .box p {
  margin: 0.25em 0;
}
.dialog > .box form {
  text-align: left;
}
.dialog.large > .box {
  max-width: var(--max-width-l1);
}

.dialog-buttons {
  margin: 2rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.dialog-buttons button,
.dialog-buttons .button {
  margin: 0.125rem;
}

.dropdown-toggle-container {
  position: relative;
}
.dropdown-toggle-container .dropdown-toggle + * {
  position: absolute;
  top: 3.25rem;
  left: 0;
  width: 15rem;
  z-index: 4;
}
.dropdown-toggle-container .dropdown-toggle.right + * {
  left: auto;
  right: 0;
}
.dropdown-toggle-container .dropdown-toggle.compact + * {
  top: 2.55rem;
}

.dropdown {
  background: var(--color-dropdown);
  border-radius: var(--radius-m);
  padding: var(--radius-m) 0;
  display: none;
  font-family: var(--font-condensed);
  overflow: hidden;
}
.dropdown.expanded {
  display: block;
}
.dropdown ul {
  overflow: hidden;
  overflow-y: auto;
  margin: 0 -3rem 0 0;
  padding-right: 3rem;
}
.dropdown li {
  padding: 0;
  overflow: hidden;
}
.dropdown li::before {
  content: none;
  display: none;
}
.dropdown li.active {
  position: relative;
}
.dropdown li.active::after {
  content: "";
  position: absolute;
  display: inline-block;
  height: 8px;
  width: 15px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  right: 1.25rem;
  top: 0.85em;
}
.dropdown li.child {
  padding-left: 2.25rem;
}
.dropdown li + li {
  border-top: 1px solid var(--color-dropdown-d2);
}
.dropdown li + li.separator {
  margin-top: var(--radius-m);
  border-color: var(--color-dropdown-d3);
  padding-top: var(--radius-m);
}
.dropdown a {
  display: block;
  width: 100%;
  padding: 0.75rem 1.25rem;
  line-height: var(--line-height-s2);
  color: var(--color-bg);
}
.dropdown a:hover, .dropdown a:focus-visible {
  background: var(--color-link-hover);
  color: var(--color-bg);
}
.dropdown [type=radio] + label,
.dropdown [type=checkbox] + label {
  color: var(--color-bg);
  margin: 0;
  width: 100%;
  padding: 0.8em 1.25em 0.8em 3.25em;
}
.dropdown [type=radio] + label::before,
.dropdown [type=checkbox] + label::before {
  border-color: var(--color-white-fade80);
  background: none;
  left: 1em;
  top: 0.525em;
}
.dropdown [type=radio]:focus-visible + label::before, .dropdown [type=radio] + label:hover::before,
.dropdown [type=checkbox]:focus-visible + label::before,
.dropdown [type=checkbox] + label:hover::before {
  border-color: var(--color-link-hover);
}
.dropdown [type=radio] + label::after {
  background: var(--color-bg);
  top: 1.05em;
  left: 1.55em;
}
.dropdown [type=radio]:focus-visible + label::after, .dropdown [type=radio] + label:hover::after {
  background-color: var(--color-link-hover);
}
.dropdown [type=checkbox] + label::after {
  border-left: 0.25em solid var(--color-bg);
  border-bottom: 0.25em solid var(--color-bg);
  left: 1.375em;
  top: 0.95em;
}
.dropdown [type=checkbox]:focus-visible + label::after, .dropdown [type=checkbox] + label:hover::after {
  border-color: var(--color-link-hover);
}
.dropdown li.with-children label {
  padding-right: 3.25rem;
}
.dropdown .slide-toggle {
  position: absolute;
  top: 0;
  right: 0;
}
.dropdown > .filter-options-group {
  display: none;
}
.dropdown > .filter-options-group.expanded {
  display: block;
}
.dropdown .slide-toggle {
  position: absolute;
  top: 0.35rem;
  right: 0.75rem;
  padding: 0.5rem;
  min-height: unset;
}
.dropdown .slide-toggle span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.dropdown .slide-toggle .icon {
  margin: -0.25em;
}
.dropdown .slide-toggle:not(:hover):not(:focus-visible) {
  border-color: transparent;
  background: none;
}
.dropdown .slide-toggle:not(:hover):not(:focus-visible) .icon {
  fill: var(--color-bg);
}
.dropdown .filter-options-group {
  display: none;
  border-top: 1px solid var(--color-dropdown-d2);
}
.dropdown .filter-options-group.expanded {
  display: block;
}
.dropdown .filter-options-group [type=radio] + label,
.dropdown .filter-options-group [type=checkbox] + label {
  margin: 0;
  width: 100%;
  padding: 0.8em 1.25em 0.8em 4em;
  background: var(--color-dropdown-d1);
}
.dropdown .filter-options-group [type=radio] + label::before,
.dropdown .filter-options-group [type=checkbox] + label::before {
  left: 1.75em;
}
.dropdown .filter-options-group [type=radio] + label::after {
  top: 1.05em;
  left: 2.3em;
}
.dropdown .filter-options-group [type=checkbox] + label::after {
  top: 0.95em;
  left: 2.125em;
}
.dropdown .listbox-option + .listbox-option {
  margin-top: 1px;
}

.pagination,
.load-more {
  grid-column: 1/-1;
  width: 100%;
  padding-top: var(--padding-m);
  display: flex;
  justify-content: space-between;
}

.load-more-info {
  display: none;
}

.pagination .load-more-next {
  display: none;
}

.learning-content.js-enabled .pagination {
  display: none;
}

.load-more {
  border-top: 1px solid var(--color-gray-l7);
  flex-direction: column;
  align-items: center;
}
.load-more .load-more-info {
  display: block;
}
.load-more .load-more-next .icon.spinner {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.collapsible-block.collapsed {
  display: none;
}
.collapsible-block > :first-child {
  margin-top: 0;
}

.collapsible-block-toggle[aria-expanded=true] span.collapsed {
  display: none;
}
.collapsible-block-toggle[aria-expanded=true] .icon {
  transform: rotate(180deg);
}
.collapsible-block-toggle[aria-expanded=false] span.not-collapsed {
  display: none;
}

[class*=bg-pattern] > h2, [class*=bg-pattern] > h3, [class*=bg-pattern] > p, [class*=bg-pattern] > .wrapper > h2, [class*=bg-pattern] > .wrapper > h3, [class*=bg-pattern] > .wrapper > p,
.bg-image > h2,
.bg-image > h3,
.bg-image > p,
.bg-image > .wrapper > h2,
.bg-image > .wrapper > h3,
.bg-image > .wrapper > p {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  color: var(--color-white);
}
[class*=bg-pattern] > input, [class*=bg-pattern] > .button, [class*=bg-pattern] > .wrapper > input, [class*=bg-pattern] > .wrapper > .button, [class*=bg-pattern] > div:not(.wrapper):not(.glide),
.bg-image > input,
.bg-image > .button,
.bg-image > .wrapper > input,
.bg-image > .wrapper > .button,
.bg-image > div:not(.wrapper):not(.glide) {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
[class*=bg-pattern] > img,
.bg-image > img {
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

[class*=bg-pattern] {
  background-size: 2048px 1104px;
  background-position: center;
}
[class*=bg-pattern].bg-cover {
  background-size: cover;
}
@media screen and (min-width: 2048px) {
  [class*=bg-pattern] {
    background-size: cover;
  }
}

.bg-image,
.bg-regions {
  background-position: center;
}
.bg-image.bg-cover,
.bg-regions.bg-cover {
  background-size: cover;
}
@media screen and (min-width: 2400px) {
  .bg-image,
.bg-regions {
    background-size: cover;
  }
}

.bg-image {
  position: relative;
}
.bg-image .bg-image-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  box-shadow: none;
  filter: none;
}
.bg-image > .wrapper {
  position: relative;
  z-index: 1;
}

.bg-regions {
  color: var(--color-white);
}
.bg-regions h2,
.bg-regions h3,
.bg-regions p {
  text-shadow: none;
}
.bg-regions input,
.bg-regions .button,
.bg-regions div:not(.wrapper) {
  box-shadow: none;
}
.bg-regions img {
  -webkit-filter: none;
  filter: none;
}

.bg-pattern-color {
  background-image: url("/img/bg_pattern_color.svg");
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-d2);
  background-size: 320px 258px;
  background-repeat: repeat;
  background-position: center;
}

.bg-pattern-blue {
  background-image: url("/img/bg_pattern_blue.svg");
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-d2);
  background-size: 320px 258px;
  background-repeat: repeat;
  background-position: center;
}

.bg-pattern-blue + .bg-pattern-blue {
  border-top: 1px solid #12648f;
}

.bg-regions {
  background-image: url("/img/bg_regions.jpg");
}

.bg-white {
  background: var(--color-white);
  color: var(--color-gray);
}

.bg-gray-l10 {
  background: var(--color-gray-l10);
}

.page-description + .bg-gray-l10,
.bg-gray-l10 + .bg-gray-l10,
.bg-white + .bg-gray-l10,
.page-description + .bg-white,
.bg-gray-l10 + .bg-white,
.bg-white + .bg-white {
  border-top: 1px solid var(--color-gray-l8);
}

.box {
  padding: var(--padding-m);
  box-shadow: var(--shadow);
}

.glide {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.glide * {
  box-sizing: inherit;
}
.glide__track {
  overflow: hidden;
}
.glide__slides {
  position: relative;
  width: 100%;
  list-style: none;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  touch-action: pan-Y;
  overflow: hidden;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.glide__slides--dragging {
  user-select: none;
}
.glide__slides * {
  white-space: initial;
}
.glide__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  white-space: normal;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.glide__slide a {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.glide__arrows {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide__bullets {
  -webkit-touch-callout: none;
  user-select: none;
}
.glide--rtl {
  direction: rtl;
}

.glide {
  display: block;
}

.glide__track__wrapper {
  position: relative;
}
.glide__track__wrapper::before, .glide__track__wrapper::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  height: calc(100% + 1rem);
  width: 10px;
  z-index: 0;
}
.glide__track__wrapper::before {
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  left: calc(var(--padding-s2) * -0.5 - 10px);
  box-shadow: 4px 0 5px -3px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.glide__track__wrapper::after {
  border-left: 1px solid rgba(0, 0, 0, 0.25);
  right: calc(var(--padding-s2) * -0.5 - 10px);
  box-shadow: -4px 0 5px -3px rgba(0, 0, 0, 0.25);
}

.glide__track__wrapper2 {
  overflow: hidden;
  padding: calc(var(--padding-s2) * 0.5);
  margin: calc(var(--padding-s2) * -0.5);
}

.glide__track {
  overflow: visible;
}
.glide__track.no-scroll .glide__slides {
  transition: none !important;
  width: 100% !important;
  transform: none !important;
  justify-content: center !important;
}

.glide__slides {
  overflow: visible;
}

.glide__arrow {
  position: absolute;
  top: 50%;
  margin-top: -1.5rem;
  background: var(--color-white);
  z-index: 1;
}
.glide__arrow span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.glide__arrow .icon {
  margin: -0.5em;
}

.glide__arrow--left {
  left: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-left: -0.95rem;
}
@media screen and (min-width: 520px) {
  .glide__arrow--left {
    padding-left: calc(2.3vw - 0.5rem);
    padding-right: calc(2.3vw - 0.5rem);
    margin-left: calc((3.4vw - 0.15rem) * -1);
  }
}
@media screen and (min-width: 1200px) {
  .glide__arrow--left {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    margin-left: -2.4rem;
  }
}

.glide__arrow--right {
  right: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  margin-right: -0.95rem;
}
@media screen and (min-width: 520px) {
  .glide__arrow--right {
    padding-left: calc(2.3vw - 0.5rem);
    padding-right: calc(2.3vw - 0.5rem);
    margin-right: calc((3.4vw - 0.15rem) * -1);
  }
}
@media screen and (min-width: 1200px) {
  .glide__arrow--right {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    margin-right: -2.4rem;
  }
}

.no-left-arrow .glide__track__wrapper::before {
  display: none;
}
.no-left-arrow .glide__arrow--left {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  display: none;
}

.no-right-arrow .glide__track__wrapper::after {
  display: none;
}
.no-right-arrow .glide__arrow--right {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  display: none;
}

.glide__slide.learning-card {
  height: auto;
}

.glide__nav {
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto 2rem;
  display: none;
}
@media screen and (min-width: 520px) {
  .glide__nav {
    display: flex;
  }
}

.glide__bullet:not([disabled]):not(.disabled):hover, .glide__bullet:not([disabled]):not(.disabled):focus-visible {
  border-color: var(--color-gray);
  background: var(--color-gray);
  color: var(--color-white);
}

.glide__bullet--active {
  border-color: rgba(41, 40, 38, 0.5);
  background: var(--color-gray);
  color: var(--color-white);
}
.glide__bullet--active:not(:hover):not(:focus-visible) {
  border-color: rgba(41, 40, 38, 0.5);
  background: var(--color-gray);
  color: var(--color-white);
}

.glide__nav.white .glide__bullet:not(:hover):not(:focus-visible) {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}
.glide__nav.white .glide__bullet:not([disabled]):not(.disabled):hover, .glide__nav.white .glide__bullet:not([disabled]):not(.disabled):focus-visible {
  border-color: rgba(255, 255, 255, 0.5);
  background: var(--color-white);
  color: var(--color-gray);
}
.glide__nav.white .glide__bullet--active {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-gray);
}
.glide__nav.white .glide__bullet--active:not(:hover):not(:focus-visible) {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-gray);
}

.glide__nav.shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  width: max-content;
  border-radius: 3rem;
}
.glide__nav.shadow .glide__bullet {
  margin: 0;
  backdrop-filter: blur(1rem);
}
.glide__nav.shadow .glide__bullet.group-middle, .glide__nav.shadow .glide__bullet.group-last {
  border-left: none;
}

.profile.page-content {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 4);
}
.profile.page-content > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}
.profile.page-content h1 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.profile.page-content h2 {
  text-align: center;
  width: 100%;
  padding: 0;
}
.profile.page-content button[type=submit] {
  margin: 2.5rem auto 0;
  width: 100%;
  max-width: 24rem;
}
.profile.page-content .account-nav {
  margin: 1rem auto 0;
  font-size: var(--font-s3);
  display: flex;
  justify-content: center;
}
.profile.page-content form > .message {
  text-align: center;
  margin: -3rem 0 3rem;
  font-size: var(--font-l1);
}

.dialog.register > .box {
  max-width: var(--max-width-l1);
}
.dialog.register h1 {
  width: 100%;
  max-width: 24rem;
  overflow: hidden;
  display: block;
  text-align: center;
  margin: 1rem auto 3.5rem;
}
.dialog.register h1 a {
  display: block;
}
.dialog.register h1 img {
  display: block;
  margin: 0;
}
.dialog.register h2 {
  text-align: center;
  width: 100%;
  margin: 0 auto 3rem;
  padding: 0;
  font-size: var(--font-l9);
  line-height: var(--line-height-s3);
}
.dialog.register h3 {
  text-align: center;
  width: 100%;
  padding: 0;
  margin: 0 auto 0.5rem;
  font-size: var(--font-l7);
}
.dialog.register .user-mental-models,
.dialog.register .user-sdgs,
.dialog.register .user-other {
  padding-top: calc(var(--padding-m) * 2.5);
}
.dialog.register .user-mental-models .instructions,
.dialog.register .user-sdgs .instructions {
  margin: 0 auto 1rem;
}
.dialog.register #sdg17-themes [type=checkbox] + label {
  width: -moz-fit-content;
  width: fit-content;
}
.dialog.register .user-other {
  margin-top: calc(var(--padding-m) * -1);
}
.dialog.register [type=submit] {
  max-width: 24rem;
  margin: 2.5rem auto 1rem;
  width: 100%;
}
.dialog.register .account-nav {
  margin: 1rem auto 0;
  font-size: var(--font-s3);
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 24rem;
}

.account-account h2 {
  margin: 0 auto 1em;
}

.account-photo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.account-details,
.account-info,
#hidden-account-details {
  display: grid;
  grid-column-gap: 1.25rem;
}

.user-account {
  grid-template-columns: 1fr;
}

@media screen and (min-width: 520px) {
  .account-details.registration {
    grid-template-columns: 1fr 1fr;
  }
  .account-details.registration .form-item-fullName {
    grid-column: 1/-1;
  }
  .account-details.registration .form-item-email {
    grid-column: 1;
  }
}

#hidden-account-details {
  grid-template-columns: 1fr 1fr;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
#hidden-account-details .form-item-email {
  grid-column: span 2;
}
#hidden-account-details.toggleable {
  display: none;
}
#hidden-account-details.expanded {
  display: grid;
}

.account-details.hidden-account-details-toggleable {
  grid-template-columns: calc(100% - 7.75rem) 6.5rem;
}
.account-details.hidden-account-details-toggleable .form-item-hidden-account-details-toggle {
  margin-top: 55px;
}
.account-details.hidden-account-details-toggleable .hidden-account-details-toggle {
  padding: 0.25rem 0.6rem;
  font-size: var(--font-s3);
  font-weight: var(--font-normal);
  line-height: var(--line-height-s2);
  border-width: 1px;
}
.account-details.hidden-account-details-toggleable .form-item-hidden-account-details-toggle + div:not(.hidden-user-account) {
  display: grid;
  grid-column: span 2;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0 1rem;
}

.account-info {
  grid-template-columns: 1fr;
}
@media screen and (min-width: 520px) {
  .account-info {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1024px) {
  .account-info {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.account-mental-models,
.account-sdgs,
.account-other {
  padding: calc(var(--padding-m) * 1.5 + 3rem) 0 0;
}

.account-mental-models,
.account-sdgs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.account-mental-models h2,
.account-sdgs h2 {
  margin: 0 auto 0.5rem;
}
.account-mental-models .instructions,
.account-sdgs .instructions {
  margin: 0 auto 2rem;
  color: var(--color-gray);
  font-size: var(--font-m);
  text-align: center;
  border: 1px solid transparent;
  padding: var(--padding-s2) var(--padding-s1);
  border-radius: var(--radius-s1);
}
.account-mental-models .instructions .selected,
.account-sdgs .instructions .selected {
  display: block;
}
.account-mental-models.error .instructions,
.account-sdgs.error .instructions {
  border-color: var(--color-error-fade70);
  background-color: var(--color-error-fade95);
  color: var(--color-error);
}
.account-mental-models > ul,
.account-sdgs > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  margin: 0 -0.25rem;
  width: calc(100% + 1rem);
}
.account-mental-models > ul > li,
.account-sdgs > ul > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0;
  margin: 0 0.25rem;
  width: 100%;
}
@media screen and (min-width: 620px) {
  .account-mental-models > ul > li,
.account-sdgs > ul > li {
    width: calc((100% - 1rem) / 2);
  }
}
@media screen and (min-width: 960px) {
  .account-mental-models > ul > li,
.account-sdgs > ul > li {
    width: calc((100% - 1.5rem) / 3);
  }
}
.account-mental-models > ul > li::before,
.account-sdgs > ul > li::before {
  content: none;
  display: none;
}
.account-mental-models > ul > li > div,
.account-sdgs > ul > li > div {
  width: 100%;
}
.account-mental-models > ul > li > div > input[type=checkbox]:disabled + label,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled + label {
  opacity: 0.75;
}
.account-mental-models > ul > li > div > input[type=checkbox]:disabled + label > span span,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled + label > span span {
  opacity: 0.5;
}
.account-mental-models > ul > li > div > input[type=checkbox]:disabled + label + svg,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled + label + svg {
  opacity: 0.2;
}
.account-mental-models > ul > li > div > input[type=checkbox]:disabled + label:hover, .account-mental-models > ul > li > div > input[type=checkbox]:disabled:focus-visible + label,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled + label:hover,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled:focus-visible + label {
  color: var(--color-gray);
  cursor: default;
}
.account-mental-models > ul > li > div > input[type=checkbox]:disabled + label:hover span:after, .account-mental-models > ul > li > div > input[type=checkbox]:disabled:focus-visible + label span:after,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled + label:hover span:after,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled:focus-visible + label span:after {
  border-color: var(--color-gray-l8);
  background-color: var(--color-gray-l11);
}
.account-mental-models > ul > li > div > input[type=checkbox]:disabled + label:hover::before, .account-mental-models > ul > li > div > input[type=checkbox]:disabled:focus-visible + label::before,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled + label:hover::before,
.account-sdgs > ul > li > div > input[type=checkbox]:disabled:focus-visible + label::before {
  border-color: transparent;
  box-shadow: none;
}
.account-mental-models > ul > li > div > input[type=checkbox]:not(:disabled) + label:hover, .account-mental-models > ul > li > div > input[type=checkbox]:not(:disabled):focus-visible + label,
.account-sdgs > ul > li > div > input[type=checkbox]:not(:disabled) + label:hover,
.account-sdgs > ul > li > div > input[type=checkbox]:not(:disabled):focus-visible + label {
  color: var(--color-link);
  cursor: pointer;
}
.account-mental-models > ul > li > div > input[type=checkbox]:not(:disabled) + label:hover span:after, .account-mental-models > ul > li > div > input[type=checkbox]:not(:disabled):focus-visible + label span:after,
.account-sdgs > ul > li > div > input[type=checkbox]:not(:disabled) + label:hover span:after,
.account-sdgs > ul > li > div > input[type=checkbox]:not(:disabled):focus-visible + label span:after {
  border-color: var(--color-link);
  background-color: var(--color-gray-l10);
}
.account-mental-models > ul > li > div > input[type=checkbox]:checked + label::after,
.account-sdgs > ul > li > div > input[type=checkbox]:checked + label::after {
  left: unset;
  right: 26px;
  top: 28px;
  z-index: 2;
  border-color: var(--color-link);
  width: 20px;
  height: 12px;
}
.account-mental-models > ul > li > div > input[type=checkbox]:checked + label span:after,
.account-sdgs > ul > li > div > input[type=checkbox]:checked + label span:after {
  border: 2px solid var(--color-link-hover);
  background-color: var(--color-gray-l10);
}
.account-mental-models > ul > li > div > label,
.account-sdgs > ul > li > div > label {
  padding: 0 0 0 0;
  height: 4.75rem;
  display: block;
  transition: all calc(var(--transition) * 2);
  width: 100%;
  margin: 0.25em 0;
  z-index: 1;
}
.account-mental-models > ul > li > div > label::before,
.account-sdgs > ul > li > div > label::before {
  left: unset;
  height: 32px;
  width: 32px;
  right: 20px;
  top: 21px;
  transform: none;
  z-index: 1;
  border: 1px solid transparent;
  background: none;
  transition: all calc(var(--transition) * 2);
}
.account-mental-models > ul > li > div > label > span,
.account-sdgs > ul > li > div > label > span {
  padding: 0.25rem 4rem 0.25rem 4.65rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
.account-mental-models > ul > li > div > label > span span,
.account-sdgs > ul > li > div > label > span span {
  font-size: var(--font-l1);
  font-weight: var(--font-normal);
  font-family: var(--font-condensed);
  position: relative;
  line-height: 1em;
  z-index: 3;
  display: block;
}
.account-mental-models > ul > li > div > label > span span.short-description,
.account-sdgs > ul > li > div > label > span span.short-description {
  margin-top: 0.2em;
  font-size: var(--font-s3);
}
.account-mental-models > ul > li > div > label > span::after,
.account-sdgs > ul > li > div > label > span::after {
  transition: all calc(var(--transition) * 2);
  content: "";
  border: 1px solid var(--color-gray-l8);
  background-color: var(--color-gray-l11);
  border-radius: var(--radius-m);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.account-mental-models > ul > li .icon,
.account-sdgs > ul > li .icon {
  width: 3.75rem;
  height: 3.75rem;
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.5rem;
}
.account-mental-models > ul > li.sdg-17 ul,
.account-sdgs > ul > li.sdg-17 ul {
  display: none;
  border: 1px solid var(--color-gray-l8);
  border-bottom-left-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
  border-top: none;
  background-color: var(--color-gray-l11);
}
.account-mental-models > ul > li.sdg-17 li,
.account-sdgs > ul > li.sdg-17 li {
  padding: 0.75rem;
}
.account-mental-models > ul > li.sdg-17 li [type=checkbox] + label,
.account-sdgs > ul > li.sdg-17 li [type=checkbox] + label {
  margin: -0.25em -0.25em;
  font-size: var(--font-m);
}
.account-mental-models > ul > li.sdg-17 li::before,
.account-sdgs > ul > li.sdg-17 li::before {
  content: none;
  display: none;
}
.account-mental-models > ul > li.sdg-17 li [type=checkbox][disabled] + label,
.account-sdgs > ul > li.sdg-17 li [type=checkbox][disabled] + label {
  opacity: 0.4;
  cursor: pointer;
}
.account-mental-models > ul > li.sdg-17.expanded,
.account-sdgs > ul > li.sdg-17.expanded {
  display: block;
  width: 100%;
}
.account-mental-models > ul > li.sdg-17.expanded > div > label,
.account-sdgs > ul > li.sdg-17.expanded > div > label {
  margin-bottom: 0;
}
.account-mental-models > ul > li.sdg-17.expanded > div > label > span::after,
.account-sdgs > ul > li.sdg-17.expanded > div > label > span::after {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.account-mental-models > ul > li.sdg-17.expanded ul,
.account-sdgs > ul > li.sdg-17.expanded ul {
  display: flex;
  flex-wrap: wrap;
}

#sdg17-themes-toggle {
  background: #19486a;
  border: 2px solid var(--color-white);
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  position: absolute;
  right: -0.75rem;
  top: 1.625rem;
  z-index: 2;
  display: block;
  min-height: unset;
}
@media screen and (min-width: 520px) {
  #sdg17-themes-toggle {
    right: -1rem;
  }
}
#sdg17-themes-toggle span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#sdg17-themes-toggle::before, #sdg17-themes-toggle::after {
  content: "";
  position: absolute;
  background: var(--color-white);
  width: 1rem;
  height: 2px;
  top: calc(38px - 1.5rem - 1px);
  right: calc(0.5rem - 2px);
}
#sdg17-themes-toggle::after {
  transform: rotate(90deg);
  transition: transform calc(var(--transition) * 2);
}

.account-other {
  margin: -2rem auto 0;
  width: 100%;
  max-width: 24rem;
}
.account-other [type=radio] + label,
.account-other [type=checkbox] + label,
.account-other [type=radio] + label + .custom_validation_error,
.account-other [type=checkbox] + label + .custom_validation_error {
  font-size: var(--font-s1);
}
.account-other .form-item-community {
  margin: 0 0 2rem;
}
.account-other .form-item-community label {
  margin: 0 0 0.5em;
  font-size: var(--font-l1);
  line-height: var(--line-height-s1);
  max-width: 280px;
}

.dash-header {
  padding: 0;
  background-color: var(--color-gray-l1);
  color: var(--color-white);
}
.dash-header > .wrapper {
  display: grid;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: 1.75rem var(--padding-m);
  grid-template-columns: 2rem 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: "avatar user" "interests interests";
  grid-column-gap: 0.75rem;
  grid-row-gap: 1rem;
}
@media screen and (min-width: 520px) {
  .dash-header > .wrapper {
    grid-template-columns: 2rem 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "avatar user" "interests interests";
  }
}
@media screen and (min-width: 768px) {
  .dash-header > .wrapper {
    grid-template-columns: 2.5rem 1fr;
    grid-template-areas: "avatar user" "interests interests";
    grid-column-gap: 1rem;
  }
}
@media screen and (min-width: 920px) {
  .dash-header > .wrapper {
    grid-template-columns: 3rem 1fr 20rem;
    grid-template-rows: auto;
    grid-template-areas: "avatar user interests";
    grid-column-gap: 1rem;
  }
}
@media screen and (min-width: 1280px) {
  .dash-header > .wrapper {
    grid-template-columns: 3.5rem 1fr 26rem;
  }
}
@media screen and (min-width: 1440px) {
  .dash-header > .wrapper {
    grid-template-columns: 3.5rem 1fr 32rem;
  }
}
.dash-header.with-community > .wrapper {
  grid-template-columns: 2rem 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: "avatar user" "community community" "interests interests";
  grid-column-gap: 0.75rem;
  grid-row-gap: 1rem;
}
@media screen and (min-width: 520px) {
  .dash-header.with-community > .wrapper {
    grid-template-columns: 2rem 1fr 10rem;
    grid-template-rows: auto auto;
    grid-template-areas: "avatar user community" "interests interests interests";
  }
}
@media screen and (min-width: 768px) {
  .dash-header.with-community > .wrapper {
    grid-template-columns: 2.5rem 1fr 10rem;
    grid-template-areas: "avatar user community" "interests interests interests";
    grid-column-gap: 1rem;
  }
}
@media screen and (min-width: 920px) {
  .dash-header.with-community > .wrapper {
    grid-template-columns: 3rem 1fr 20rem 10rem;
    grid-template-rows: auto;
    grid-template-areas: "avatar user interests community";
    grid-column-gap: 1rem;
  }
}
@media screen and (min-width: 1280px) {
  .dash-header.with-community > .wrapper {
    grid-template-columns: 3.5rem 1fr 26rem 13rem;
  }
}
@media screen and (min-width: 1440px) {
  .dash-header.with-community > .wrapper {
    grid-template-columns: 3.5rem 1fr 32rem 16rem;
  }
}
.dash-header h1 {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.dash-header .avatar {
  grid-area: avatar;
  border-radius: 100%;
  border: 1px solid var(--color-bg);
  overflow: hidden;
  align-self: start;
  margin: 0 -0.25rem 0.25rem;
}
@media screen and (min-width: 768px) {
  .dash-header .avatar {
    margin: 0 -0.25rem;
  }
}
.dash-header .avatar img {
  width: 100%;
  height: auto;
  display: block;
}
.dash-header .user {
  grid-column: user;
  padding: 0.25em 0 0 0;
  margin: 0;
  align-self: start;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 2rem;
  grid-row-gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .dash-header .user {
    padding: 0.45em 0 0 0;
  }
}
@media screen and (min-width: 920px) {
  .dash-header .user {
    padding: 0.65em 0 0 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}
@media screen and (min-width: 1280px) {
  .dash-header .user {
    padding: 0.85em 0 0 0;
  }
}
.dash-header .user h2 {
  display: inline;
  font-size: var(--font-l6);
  line-height: var(--line-height-s2);
  margin: 0;
}
@media screen and (min-width: 768px) {
  .dash-header .user h2 {
    font-size: var(--font-l7);
  }
}
@media screen and (min-width: 920px) {
  .dash-header .user h2 {
    font-size: var(--font-l8);
  }
}
.dash-header .user .edit-profile-link {
  margin: 0 0 -0.5rem;
  padding: 0.1rem 0.2rem 0.2rem 0.1rem;
  min-height: unset;
  width: 2rem;
  height: 2rem;
  display: inline-block;
}
.dash-header .user .edit-profile-link:not(:hover):not(:focus-visible) {
  border-color: transparent;
}
.dash-header .user .edit-profile-link span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.dash-header .user .edit-profile-link .icon {
  width: 1.7em;
  height: 1.7em;
  margin: 0;
  display: block;
}
.dash-header .interests {
  grid-area: interests;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  padding: 0.25em 0 0 0;
}
@media screen and (min-width: 768px) {
  .dash-header .interests {
    padding: 0.45em 0 0 0;
  }
}
@media screen and (min-width: 920px) {
  .dash-header .interests {
    padding: 0.65em 0 0 0;
  }
}
@media screen and (min-width: 1280px) {
  .dash-header .interests {
    padding: 0.85em 0 0 0;
  }
}
.dash-header .interests-group {
  position: relative;
  padding-right: 1.5rem;
  display: grid;
  margin: 0;
  width: 50%;
  max-width: 15rem;
  font-size: var(--font-s3);
}
.dash-header .interests-group .interests-group-label {
  display: flex;
  justify-content: start;
  align-items: center;
  opacity: 0.9;
}
.dash-header .interests-group .icon {
  display: block;
  width: calc(1em + 0.1rem);
  height: calc(1em + 0.1rem);
  fill: var(--color-bg);
  padding: 0.05rem;
  margin: -0.15rem 0.15rem 0 -0.05rem;
}
.dash-header .interests-group .interest-text {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-bg);
  font-size: var(--font-s1);
  line-height: var(--line-height-s1);
  margin: 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  min-width: 0;
}
.dash-header .interests-group .interest-text > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-spacing: -0.075em;
  padding: 0.35rem;
  margin: -0.35rem;
}
.dash-header .interests-group .interest-text .separator {
  display: inline-block;
  width: 0.5em;
  padding: 0;
  margin: 0;
}
.dash-header .interests-group .interest-text a {
  padding: 0.05rem 0.15rem;
  margin: -0.05rem -0.15rem;
}
.dash-header .interests-group .interest-text a:not(:hover):not(:focus-visible) {
  color: var(--color-gray-l2);
}
.dash-header .community-link {
  grid-area: community;
  font-weight: var(--font-normal);
  justify-self: start;
  align-self: start;
  margin-top: 0.25em;
}
@media screen and (min-width: 520px) {
  .dash-header .community-link {
    justify-self: end;
  }
}
@media screen and (min-width: 768px) {
  .dash-header .community-link {
    margin-top: 0.45em;
  }
}
@media screen and (min-width: 920px) {
  .dash-header .community-link {
    margin-top: 0.65em;
  }
}
@media screen and (min-width: 1280px) {
  .dash-header .community-link {
    margin-top: 0.85em;
  }
}

.dash-navs {
  background-color: var(--color-gray-l1);
  color: var(--color-white);
  padding: 0.5rem var(--padding-m);
  border-top: 1px solid var(--color-gray);
}
.dash-navs .dash-nav-toggle {
  width: calc(100% + 0.5rem);
}
.dash-navs .dash-nav-toggle .icon {
  margin-left: 0;
}
.dash-navs .dash-nav-toggle:not(:hover):not(:focus-visible) {
  border-color: transparent;
}
@media screen and (min-width: 640px) {
  .dash-navs .dash-nav-toggle {
    display: none;
  }
}
@media screen and (max-width: 639px) {
  .dash-navs .dash-nav-toggle + div,
.dash-navs .dash-nav-toggle + .dash-nav {
    margin: 0.5rem calc(var(--padding-m) * -1) 0;
    padding: 0.75rem var(--padding-m);
    border-top: 1px solid var(--color-gray-d1);
  }
}
@media screen and (max-width: 639px) {
  .dash-navs .dash-nav:not(.expanded) {
    display: none;
  }
}
.dash-navs ul {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: center;
}
.dash-navs ul li {
  padding-left: 0;
}
.dash-navs ul li::before {
  content: none;
  display: none;
}
@media screen and (max-width: 639px) {
  .dash-navs ul {
    flex-direction: column;
    align-items: center;
  }
}
.dash-navs ul a {
  line-height: 1em;
  padding: 0.65rem;
  margin: 0;
  font-family: var(--font-condensed);
  font-size: var(--font-l2);
  display: block;
  color: var(--color-white);
}
@media screen and (min-width: 640px) {
  .dash-navs ul a {
    padding: 0.5em;
    margin: 0;
    font-size: var(--font-l2);
  }
}
.dash-navs ul .active a,
.dash-navs ul a:hover,
.dash-navs ul a:focus-visible {
  color: var(--color-link-hover);
}

.dashboard-block:not([class*=" bg-pattern"]) {
  background: var(--color-gray-l10);
}
.dashboard-block > .wrapper {
  padding: calc(2rem + var(--padding-m)) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.dashboard-block > .wrapper > h2, .dashboard-block > .wrapper > p {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}
.dashboard-block > .wrapper h2 {
  margin-top: 0;
  margin-bottom: 2rem;
}
.dashboard-block.assessments + .recommendations > .wrapper, .dashboard-block.pathways + .learning-list > .wrapper {
  padding-top: 0;
}
.dashboard-block.forum, .dashboard-block.survey {
  position: relative;
  padding: var(--padding-m);
}
.dashboard-block.forum h2,
.dashboard-block.forum h3,
.dashboard-block.forum p, .dashboard-block.survey h2,
.dashboard-block.survey h3,
.dashboard-block.survey p {
  text-shadow: none;
}
.dashboard-block.forum input,
.dashboard-block.forum .button,
.dashboard-block.forum div:not(.wrapper), .dashboard-block.survey input,
.dashboard-block.survey .button,
.dashboard-block.survey div:not(.wrapper) {
  box-shadow: none;
}
.dashboard-block.forum img, .dashboard-block.survey img {
  -webkit-filter: none;
  filter: none;
}
.dashboard-block.forum > img, .dashboard-block.survey > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard-block.forum > .wrapper, .dashboard-block.survey > .wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l2);
  padding: calc(var(--padding-card) * 2) calc(var(--padding-card) * 3);
  background: var(--color-bg);
  border-radius: var(--radius-l2);
}
@media (min-width: 980px) {
  .dashboard-block.forum > .wrapper, .dashboard-block.survey > .wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: var(--padding-m);
  }
}
.dashboard-block.forum .content > h2, .dashboard-block.forum .content > p, .dashboard-block.survey .content > h2, .dashboard-block.survey .content > p {
  text-align: center;
  color: var(--color-gray);
}
.dashboard-block.forum .content > h2, .dashboard-block.survey .content > h2 {
  margin: 0 auto;
  font-size: var(--font-l8);
}
.dashboard-block.forum .content > p, .dashboard-block.survey .content > p {
  margin: 0.5rem auto 0;
}
@media (min-width: 980px) {
  .dashboard-block.forum .content > h2, .dashboard-block.forum .content > p, .dashboard-block.survey .content > h2, .dashboard-block.survey .content > p {
    text-align: left;
  }
  .dashboard-block.forum .content > h2, .dashboard-block.survey .content > h2 {
    margin: 0 auto 0 0;
  }
  .dashboard-block.forum .content > p, .dashboard-block.survey .content > p {
    margin: 0.25rem auto 0 0;
  }
}
.dashboard-block.forum .button, .dashboard-block.survey .button {
  margin: 1rem auto 0;
}
@media (min-width: 980px) {
  .dashboard-block.forum .button, .dashboard-block.survey .button {
    margin: 0;
    align-self: center;
  }
}

.main-content.dash > .dashboard-block:last-child > .wrapper {
  padding-bottom: calc(var(--padding-m) * 4);
}

.page-content.recommendations {
  background: var(--color-gray-l10);
  min-height: 70vh;
}
.page-content.recommendations > .wrapper {
  padding: calc(2rem + var(--padding-m)) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.page-content.recommendations > .wrapper h2 {
  margin-top: 0;
  text-align: center;
}
.page-content.recommendations > .wrapper h3 {
  text-align: center;
  margin-top: 1.75em;
  margin-bottom: 0.75em;
}
.page-content.recommendations > .wrapper h3 span {
  display: block;
}
.page-content.recommendations > .wrapper h3 .label {
  font-size: var(--font-l2);
  font-weight: var(--font-normal);
  line-height: var(--line-height-s3);
}
.page-content.recommendations > .wrapper h3 .title {
  font-size: var(--font-l7);
}
.page-content.recommendations > .wrapper > p {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}

.assessments-recommendations {
  background: var(--color-gray-l9);
  border-top: 1px solid var(--color-gray-l8);
}
.assessments-recommendations > .wrapper {
  padding: calc(2rem + var(--padding-m)) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.assessments-recommendations > .wrapper h2 {
  margin-top: 0;
  text-align: center;
  font-size: var(--font-l6);
}

.page-content.learning-list {
  background: var(--color-gray-l10);
  min-height: 70vh;
}
.page-content.learning-list > .wrapper {
  padding: calc(2rem + var(--padding-m)) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l2);
}
.page-content.learning-list > .wrapper h2 {
  margin-top: 0;
  text-align: center;
}
.page-content.learning-list > .wrapper > p {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto;
}
.page-content.learning-list > .wrapper .cards-list {
  padding: 0;
  display: grid;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
  grid-gap: var(--padding-s2);
  grid-template-columns: 1fr;
  max-width: 300px;
}
@media (min-width: 768px) {
  .page-content.learning-list > .wrapper .cards-list {
    max-width: unset;
    grid-template-columns: 1fr;
  }
}

.dialog.auth .box {
  width: 100%;
}
.dialog.auth.login > .box {
  max-width: var(--max-width-s1);
}
.dialog.auth.login > .box h2 {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.dialog.auth h1 {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto 2.5rem;
  overflow: hidden;
  display: block;
  text-align: center;
}
.dialog.auth h1 a {
  display: block;
}
.dialog.auth h1 img {
  display: block;
  margin: 0;
}
.dialog.auth h2 {
  width: 100%;
  text-align: center;
  margin: 0 auto 2.5rem;
}
.dialog.auth form {
  width: 100%;
}
.dialog.auth label {
  width: 100%;
}
.dialog.auth input {
  width: calc(100% + 0.5rem);
}
.dialog.auth .rememberMeLabel {
  margin: 1.25rem 0 -1.25rem;
}
.dialog.auth button[type=submit] {
  margin: 2.5rem -0.25rem 0;
  width: calc(100% + 0.5rem);
}
.dialog.auth .login-nav {
  margin: 1rem 0 0;
  font-size: var(--font-s3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 0.5rem;
}
.dialog.auth .login-nav .login-nav-home,
.dialog.auth .login-nav .login-nav-register {
  grid-row: 2;
  margin: 0.5rem 0 -0.5rem;
}
.dialog.auth .login-nav .login-nav-home {
  grid-column: 1;
  text-align: left;
}
.dialog.auth .login-nav .login-nav-reset {
  grid-column: 1/-1;
  grid-row: 1;
  text-align: center;
}
.dialog.auth .login-nav .login-nav-register {
  grid-column: 2;
  text-align: right;
}
@media (min-width: 540px) {
  .dialog.auth .login-nav {
    display: flex;
    justify-content: space-between;
  }
  .dialog.auth .login-nav .login-nav-home,
.dialog.auth .login-nav .login-nav-register {
    margin: 0;
  }
}

.page-error {
  background: var(--color-sdglearn-d3-fade5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 100vh;
  color: var(--color-white);
}
.page-error .logo {
  width: 13rem;
  margin: 0 auto;
}
.page-error .logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-error .logo path {
  fill: var(--color-white) !important;
}
.page-error h1 {
  font-size: 6rem;
  margin: 0.25em 0 0.25em;
}
.page-error .button {
  margin-top: 4rem;
}

.page-maintenance {
  background: var(--color-sdglearn-d3-fade5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 100vh;
  color: var(--color-white);
}

.page-maintenance-main {
  padding: calc(3rem + var(--padding-m)) var(--padding-m);
}
.page-maintenance-main .logo {
  width: 15rem;
  margin: 2rem auto;
}
.page-maintenance-main .logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-maintenance-main .logo path {
  fill: var(--color-white) !important;
}
.page-maintenance-main h1 {
  font-size: var(--font-l8);
  margin: 0.5em;
}
.page-maintenance-main p {
  font-size: var(--font-l6);
  margin: 1.25em;
}

.page-header > .wrapper {
  padding: calc(2rem + var(--padding-m)) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  border: none;
  position: relative;
}
.page-header h1,
.page-header h2 {
  text-align: center;
  width: 100%;
  max-width: var(--max-width-l1);
  margin: 0 auto;
  padding: 0 var(--padding-m);
  font-size: var(--font-l10);
}
.page-header h1 > .pre-title, .page-header h1 > .title,
.page-header h2 > .pre-title,
.page-header h2 > .title {
  display: block;
}
.page-header h1 > .pre-title.with-pre-title-logo > span,
.page-header h2 > .pre-title.with-pre-title-logo > span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.page-header h1 > .pre-title.with-pre-title-logo .pre-title-logo,
.page-header h2 > .pre-title.with-pre-title-logo .pre-title-logo {
  width: 200px;
  height: auto;
}

.page-description > .wrapper {
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  text-align: center;
  font-size: var(--font-l2);
}
.page-description > .wrapper > :last-child {
  margin-bottom: 0;
}
.page-description.no-banner > .wrapper {
  padding-top: 0;
  margin-top: calc(var(--padding-m) * -1);
}
.page-description .description-title {
  text-align: center;
  margin: 0 0 1em;
  font-size: var(--font-l8);
}

.page-content.page {
  min-height: 60vh;
}
.page-content.page > .wrapper {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}
.page-content.page > .wrapper > :first-child {
  margin-top: 0;
}
.page-content.page > .wrapper h1, .page-content.page > .wrapper h2, .page-content.page > .wrapper h3, .page-content.page > .wrapper h4, .page-content.page > .wrapper h5, .page-content.page > .wrapper h6 {
  margin-top: 2em;
}
.page-content.page > .wrapper h2 {
  font-size: var(--font-l8);
}
.page-content.page > .wrapper h3 {
  font-size: var(--font-l6);
}
.page-content.page > .wrapper h4 {
  font-size: var(--font-l4);
}
.page-content.page > .wrapper img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}
.page-content.page > .wrapper iframe {
  width: 100% !important;
  height: unset !important;
  aspect-ratio: 1/0.5625;
  margin: 1rem 0;
}
.page-content.page > .wrapper figure {
  margin: 0;
  padding: 0;
}
.page-content.page > .wrapper figure img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}
.page-content.page > .wrapper figure iframe {
  width: 100% !important;
  height: unset !important;
  aspect-ratio: 1/0.5625;
  margin: 1rem 0;
}
.page-content.page > .wrapper figure figcaption {
  margin: -0.75rem 0 2rem;
  font-size: var(--font-s2);
  line-height: var(--line-height-s1);
  color: var(--color-gray-l2);
}
.page-content.page > .wrapper .button {
  width: max-content;
  margin-bottom: 2em;
  margin-top: 2em;
}

.page-block > .wrapper {
  padding: calc(var(--padding-m) * 1.5 + 2rem) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.page-block > .wrapper h2 {
  font-size: var(--font-l8);
  margin: 0 0 2.5rem;
  text-align: center;
}
.page-block > .wrapper > .button {
  width: 100%;
  max-width: 18rem;
  margin: 2.5rem auto 0;
}
.page-block .box {
  border-radius: var(--radius-l2);
}
.page-block:last-child > .wrapper {
  padding-bottom: calc(10rem + var(--padding-m));
}

.sitegroup-unsdglearn.about-us .page-content.page [src*=about_icon] {
  display: block;
  margin: 3rem auto -1rem;
  width: 7rem;
  height: 7rem;
}
.sitegroup-unsdglearn.about-us .page-content.page > .wrapper {
  padding-bottom: calc(var(--padding-m) * 1.5);
}
.sitegroup-unsdglearn.about-us .page-content.page > .wrapper * {
  text-align: center;
}

.page-block-partners ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -0.5rem;
  mix-blend-mode: multiply;
}
.page-block-partners ul li {
  padding-left: 0;
}
.page-block-partners ul li::before {
  content: none;
  display: none;
}
.page-block-partners ul li {
  display: block;
  padding: 0.5rem;
  mix-blend-mode: multiply;
}
.page-block-partners ul li span {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.page-block-partners ul li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  mix-blend-mode: multiply;
}

.sitegroup-unsdglearn.contacts .page-content.page > .wrapper > figure {
  margin: 0 0 1rem;
}
.sitegroup-unsdglearn.contacts .page-content.page > .wrapper > figure img {
  display: block;
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
}
.sitegroup-unsdglearn.contacts .page-content.page > .wrapper * {
  text-align: center;
}
.sitegroup-unsdglearn.contacts .page-content.page > .wrapper > * + figure, .sitegroup-unsdglearn.contacts .page-content.page > .wrapper > h2 {
  margin-top: 5rem;
}
.sitegroup-unsdglearn.contacts .page-content.page > .wrapper > figure + h2 {
  margin-top: 0;
}
.sitegroup-unsdglearn.contacts .page-content.page > .wrapper .smaller {
  font-size: var(--font-l5);
}

.page-content.region-main,
.page-content.region-highlight,
.page-content.region-secondary {
  min-height: unset;
}
.page-content.region-main > .wrapper,
.page-content.region-highlight > .wrapper,
.page-content.region-secondary > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}
.page-content.region-main > .wrapper > :first-child,
.page-content.region-highlight > .wrapper > :first-child,
.page-content.region-secondary > .wrapper > :first-child {
  margin-top: 0;
}
.page-content.region-main > .wrapper figure,
.page-content.region-highlight > .wrapper figure,
.page-content.region-secondary > .wrapper figure {
  margin: 0;
  padding: 0;
}
.page-content.region-main > .wrapper figure img,
.page-content.region-highlight > .wrapper figure img,
.page-content.region-secondary > .wrapper figure img {
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}
.page-content.region-main > .wrapper figure iframe,
.page-content.region-highlight > .wrapper figure iframe,
.page-content.region-secondary > .wrapper figure iframe {
  width: 100% !important;
  height: unset !important;
  aspect-ratio: 1/0.5625;
  margin: 1rem 0;
}
.page-content.region-main > .wrapper figure figcaption,
.page-content.region-highlight > .wrapper figure figcaption,
.page-content.region-secondary > .wrapper figure figcaption {
  margin: -0.75rem 0 2rem;
  font-size: var(--font-s2);
  line-height: var(--line-height-s1);
  color: var(--color-gray-l2);
}

.page-content.region-main > .wrapper,
.page-content.region-highlight > .wrapper {
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}

.page-content.region-secondary > .wrapper {
  padding: calc(var(--padding-m) * 1.5) var(--padding-m) calc(var(--padding-m) * 4);
}

.sitegroup-statistics.about-us .page-content.page > .wrapper,
.sitegroup-evaluation.about-us .page-content.page > .wrapper {
  padding-bottom: calc(var(--padding-m) * 3);
}
.sitegroup-statistics.about-us .page-content.page > .wrapper *,
.sitegroup-evaluation.about-us .page-content.page > .wrapper * {
  text-align: center;
}

.page-footer {
  background: var(--color-gray-l10);
  overflow: hidden;
  font-weight: var(--font-bold);
  color: var(--color-gray);
  font-size: var(--font-s1);
  border-top: 1px solid var(--color-gray-l8);
}
.page-footer > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: 1rem var(--padding-m);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}
@media (min-width: 1080px) {
  .page-footer > .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.page-footer h2 {
  font-size: var(--font-s1);
  margin: 0;
}
.page-footer a {
  color: var(--color-gray);
  display: flex;
  align-items: center;
}
.page-footer .share-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: -0.5rem calc(-0.5rem - var(--padding-s2));
  padding: calc(var(--padding-s1) - 0.1rem) var(--padding-s2);
}
.page-footer .share-links h2 {
  margin: 0.5rem;
}
.page-footer .share-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
}
.page-footer .share-links ul li {
  padding-left: 0;
}
.page-footer .share-links ul li::before {
  content: none;
  display: none;
}
.page-footer .share-links li {
  margin: 0.5rem;
}
.page-footer .share-links a {
  margin: -0.5rem;
  padding: 0.5rem;
  width: auto;
  display: flex;
  align-items: center;
}
.page-footer .share-links a svg {
  fill: var(--color-gray);
  width: 2em;
  height: 2em;
  margin: -0.4em 0.25em -0.4em -0.35em;
  display: block;
}
.page-footer .share-links a span {
  line-height: var(--line-height-s3);
}
@media (min-width: 1080px) {
  .page-footer .share-links a span {
    width: auto;
  }
}
.page-footer .share-links a:hover, .page-footer .share-links a:focus-visible {
  color: var(--color-link-hover);
}
.page-footer .share-links a:hover svg, .page-footer .share-links a:focus-visible svg {
  fill: var(--color-link-hover);
}

.page-content.partners {
  min-height: 60vh;
}
.page-content.partners > .wrapper {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.page-content.partners .partners-list {
  display: grid;
  grid-column-gap: var(--padding-m);
  grid-row-gap: calc(var(--padding-s1) + 1.5rem);
  margin: 0 auto;
  align-items: start;
  grid-template-columns: 1fr;
  padding: 0 0 4rem;
}
@media screen and (min-width: 600px) {
  .page-content.partners .partners-list {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}
.page-content.partners .partner {
  display: grid;
  grid-template-areas: "logo" "header" "description";
  grid-column-gap: var(--padding-m);
  grid-row-gap: 0.5rem;
}
@media screen and (min-width: 400px) {
  .page-content.partners .partner {
    grid-template-columns: 4rem 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "logo header" "logo description";
    grid-column-gap: var(--padding-m);
  }
}
@media screen and (min-width: 580px) {
  .page-content.partners .partner {
    grid-template-columns: 5rem 1fr;
    grid-column-gap: 1.25rem;
  }
}
.page-content.partners .partner-logo {
  grid-area: logo;
  width: 4rem;
  aspect-ratio: 1;
  display: flex;
  justify-content: start;
  align-items: center;
  align-self: start;
}
@media screen and (min-width: 580px) {
  .page-content.partners .partner-logo {
    width: 5rem;
  }
}
.page-content.partners .partner-logo img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}
.page-content.partners .partner-header {
  grid-area: header;
  margin: 0.25rem 0 0;
  position: relative;
  padding-top: 1.65rem;
}
.page-content.partners .partner-name {
  font-size: var(--font-l5);
  margin: 0;
}
.page-content.partners .partner-name a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.page-content.partners .partner-abbreviation {
  font-size: var(--font-s3);
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.page-content.partners .partner-description {
  grid-area: description;
  margin: 0;
  line-height: var(--line-height-s1);
}

.page-header.learning {
  padding: 0.75rem 0;
}
.page-header.learning > .wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}
.page-header.learning > .wrapper:before {
  content: none;
  display: none;
}
.page-header.learning > .wrapper h1 {
  width: auto;
  text-align: left;
  align-self: center;
  margin: 0;
  font-size: var(--font-l9);
  line-height: var(--line-height-s3);
  padding: 0;
}
.page-header.learning > .wrapper h2 {
  padding: 0;
}

.learning-nav:not(.js-enabled) .learning-nav-toggle {
  display: none;
}

.learning-nav-wrapper {
  display: block;
}
.learning-nav-wrapper > div {
  display: grid;
  grid-column-gap: 0.85rem;
  grid-row-gap: 0.75rem;
  position: relative;
  font-family: var(--font-condensed);
}
.learning-nav-wrapper > div.filters {
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
}
.learning-nav-wrapper > div.sort {
  grid-template-columns: auto;
  grid-template-rows: auto auto;
}
.learning-nav-wrapper > div > h2 {
  margin: 0;
  font-size: var(--font-s2);
  font-weight: var(--font-normal);
  align-self: center;
  justify-self: start;
  text-align: left;
}
.learning-nav-wrapper > div .search {
  position: relative;
  width: 100%;
}
.learning-nav-wrapper > div .search [type=search] {
  width: calc(100% + 0.5rem);
  display: block;
  padding-right: 2.75rem;
  text-overflow: ellipsis;
  background: var(--color-gray-l11);
  border: 1px solid var(--color-gray-l8);
}
.learning-nav-wrapper > div .search [type=search]::-webkit-search-decoration, .learning-nav-wrapper > div .search [type=search]::-webkit-search-cancel-button, .learning-nav-wrapper > div .search [type=search]::-webkit-search-results-button, .learning-nav-wrapper > div .search [type=search]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.learning-nav-toggle {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.learning-nav .filter .filter-toggle {
  justify-content: space-between;
  font-family: var(--font-condensed);
  width: 100%;
}
.learning-nav .filter .filter-toggle .count {
  position: absolute;
  top: -0.6rem;
  right: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  color: var(--color-gray);
  border: 1px solid var(--color-gray-l7);
  margin: 0 -0.6rem 0 0;
  border-radius: 18px;
  padding: 0;
  z-index: 0;
  font-size: 0.85rem;
  background: var(--color-gray-l10);
}
@media screen and (min-width: 768px) {
  .learning-nav .filter .filter-toggle .count {
    right: calc(0.5rem + 0.75vw);
  }
}
@media screen and (min-width: 1712px) {
  .learning-nav .filter .filter-toggle .count {
    right: 1.3rem;
  }
}
.learning-nav .filter .filter-toggle + div:not(.dropdown),
.learning-nav .filter .filter-toggle + .dropdown {
  display: none;
}
.learning-nav .filter .filter-toggle + div:not(.dropdown).expanded,
.learning-nav .filter .filter-toggle + .dropdown.expanded {
  display: block;
}
.learning-nav .filter .filter-toggle + div:not(.dropdown) > div,
.learning-nav .filter .filter-toggle + .dropdown > div {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .learning-nav .filter .filter-toggle[aria-controls=filter-dropdown-sdg] + div:not(.dropdown), .learning-nav .filter .filter-toggle[aria-controls=filter-dropdown-sdg] + .dropdown {
    width: 26rem;
  }
}
@media screen and (min-width: 768px) {
  .learning-nav .filter .filter-toggle[aria-controls=filter-dropdown-subtype] + div:not(.dropdown), .learning-nav .filter .filter-toggle[aria-controls=filter-dropdown-subtype] + .dropdown,
.learning-nav .filter .filter-toggle[aria-controls=filter-dropdown-region] + div:not(.dropdown),
.learning-nav .filter .filter-toggle[aria-controls=filter-dropdown-region] + .dropdown {
    width: 20rem;
  }
}

@media screen and (max-width: 639px) {
  .learning-nav {
    padding-top: 1.5rem;
    padding-bottom: 0.75rem;
  }
  .learning-nav .filter {
    width: calc(100% + 0.5rem);
    margin: 0 -0.25rem;
    font-family: var(--font-condensed);
    border: 1px solid var(--color-gray-l8);
    background: var(--color-gray-l10);
    color: var(--color-gray);
    font-weight: var(--font-normal);
    border-radius: var(--radius-l2);
  }
  .learning-nav .filter:not(:first-child) {
    margin-top: 0.75rem;
  }
  .learning-nav .filter .filter-toggle + div:not(.dropdown),
.learning-nav .filter .filter-toggle + .dropdown {
    position: initial;
    top: unset;
    right: unset;
    width: 100%;
    z-index: unset;
    background: none;
    border-radius: 0;
    padding: 0;
    font-family: var(--font-condensed);
    overflow: hidden;
  }
  .learning-nav .filter .filter-toggle + div:not(.dropdown) > div > ul, .learning-nav .filter .filter-toggle + div:not(.dropdown) > .dropdown > div > ul,
.learning-nav .filter .filter-toggle + .dropdown > div > ul,
.learning-nav .filter .filter-toggle + .dropdown > .dropdown > div > ul {
    margin: 0;
    padding: 0.5rem 0;
    max-height: unset;
  }
  .learning-nav .filter .filter-toggle + div:not(.dropdown) > div,
.learning-nav .filter .filter-toggle + .dropdown > div {
    background: none;
    min-width: unset;
    width: 100%;
    max-height: unset;
  }
  .learning-nav .filter .filter-toggle + div:not(.dropdown) > div li[data-href].active:not(:hover):not(:focus-visible)::after,
.learning-nav .filter .filter-toggle + .dropdown > div li[data-href].active:not(:hover):not(:focus-visible)::after {
    border-color: var(--color-gray);
  }
  .learning-nav .filter .filter-toggle + div:not(.dropdown) > div li[data-href] > label:not(:hover):not(:focus-visible),
.learning-nav .filter .filter-toggle + .dropdown > div li[data-href] > label:not(:hover):not(:focus-visible) {
    color: var(--color-gray);
  }
  .learning-nav .filter .filter-toggle + div:not(.dropdown) > div li[data-href].active > label:not(:hover):not(:focus-visible),
.learning-nav .filter .filter-toggle + .dropdown > div li[data-href].active > label:not(:hover):not(:focus-visible) {
    background: var(--color-gray-l10);
  }
  .learning-nav .filter .filter-toggle {
    margin: -1px;
    width: calc(100% + 2px);
    border: none;
    padding-left: 1.5rem;
    padding-right: 1.2rem;
    border-radius: var(--radius-l3);
  }
  .learning-nav .filter .filter-toggle:not(:hover):not(:focus-visible) {
    border: 1px solid var(--color-gray-l8);
    background: var(--color-gray-l11);
  }
  .learning-nav .filter .filter-toggle .count {
    right: 1.45rem;
  }
  .learning-nav .filter .dropdown {
    padding: 0;
  }
  .learning-nav .filter .dropdown [type=radio] + label,
.learning-nav .filter .dropdown [type=checkbox] + label {
    color: var(--color-gray);
  }
  .learning-nav .filter .dropdown [type=radio] + label::before,
.learning-nav .filter .dropdown [type=checkbox] + label::before {
    border-color: var(--color-gray-l8);
    background: var(--color-gray-l11);
  }
  .learning-nav .filter .dropdown [type=radio]:focus-visible + label::before, .learning-nav .filter .dropdown [type=radio] + label:hover::before,
.learning-nav .filter .dropdown [type=checkbox]:focus-visible + label::before,
.learning-nav .filter .dropdown [type=checkbox] + label:hover::before {
    border-color: var(--color-link-hover);
  }
  .learning-nav .filter .dropdown [type=radio] + label::after {
    background: #292826;
  }
  .learning-nav .filter .dropdown [type=radio]:focus-visible + label::after, .learning-nav .filter .dropdown [type=radio] + label:hover::after {
    background: var(--color-link-hover);
  }
  .learning-nav .filter .dropdown [type=checkbox] + label::after {
    border-color: #292826;
  }
  .learning-nav .filter .dropdown [type=checkbox]:focus-visible + label::after, .learning-nav .filter .dropdown [type=checkbox] + label:hover::after {
    border-color: var(--color-link-hover);
  }
  .learning-nav .filter .dropdown .slide-toggle:not(:hover):not(:focus-visible) .icon {
    fill: var(--color-gray);
  }
  .learning-nav .filter .dropdown .filter-options-group {
    border-top: 1px solid var(--color-gray-l8);
  }
  .learning-nav .filter .dropdown .filter-options-group [type=radio] + label,
.learning-nav .filter .dropdown .filter-options-group [type=checkbox] + label {
    background: rgba(0, 0, 0, 0.025);
  }
  .learning-nav .filter .dropdown li + li {
    border-top: 1px solid var(--color-gray-l8);
  }
}
@media screen and (max-width: 1179px) {
  .page-header.learning {
    padding: 0.75rem 0;
  }
  .page-header.learning > .wrapper h1 {
    font-size: 2.33rem;
  }

  .learning-nav-toggle + div,
.learning-nav-toggle + .learning-nav {
    grid-column: span 2;
    margin-left: calc(var(--padding-m) * -1);
    margin-right: calc(var(--padding-m) * -1);
    padding-left: var(--padding-m);
    padding-right: var(--padding-m);
  }

  .learning-nav-toggle + div .learning-nav {
    margin-left: calc(var(--padding-m) * -1);
    margin-right: calc(var(--padding-m) * -1);
    padding-left: var(--padding-m);
    padding-right: var(--padding-m);
  }

  .learning-nav {
    display: none;
    background: var(--color-bg);
    padding-top: 1.25rem;
    padding-bottom: 0.5rem;
    border-top: 1px solid var(--color-gray-l8);
    margin-top: 0.75rem;
  }
  .learning-nav.expanded {
    display: block;
  }
}
@media screen and (max-width: 639px) {
  .learning-nav {
    padding-top: 1.5rem;
    padding-bottom: 0.75rem;
  }
}
@media screen and (min-width: 640px) {
  .learning-nav .filters-wrapper {
    --middleFiltersWidth: calc(6rem + (0.75rem * 0.8) + (1.55vw * 0.8));
    --endFiltersWidth: calc(6rem + (0.75rem / 2 * 0.8) + (1.55vw / 2 * 0.8) + (0.75rem / 2) + (1.55vw / 2));
    margin: 0 auto;
    display: grid;
    justify-self: start;
  }
  .learning-nav .filters-wrapper.filters-2 {
    grid-template-columns: repeat(2, var(--middleFiltersWidth));
  }
  .learning-nav .filters-wrapper.filters-3 {
    grid-template-columns: var(--endFiltersWidth) var(--middleFiltersWidth) var(--endFiltersWidth);
  }
  .learning-nav .filters-wrapper.filters-4 {
    grid-template-columns: var(--endFiltersWidth) repeat(2, var(--middleFiltersWidth)) var(--endFiltersWidth);
  }
  .learning-nav .filters-wrapper.filters-5 {
    grid-template-columns: var(--endFiltersWidth) repeat(3, var(--middleFiltersWidth)) var(--endFiltersWidth);
  }
  .learning-nav .filters-wrapper.filters-6 {
    grid-template-columns: var(--endFiltersWidth) repeat(4, var(--middleFiltersWidth)) var(--endFiltersWidth);
  }
  .learning-nav .filters-wrapper.filters-7 {
    grid-template-columns: var(--endFiltersWidth) repeat(5, var(--middleFiltersWidth)) var(--endFiltersWidth);
  }
  .learning-nav .filters-wrapper .filter-toggle {
    width: auto;
  }
  .learning-nav .filters-wrapper .filter-toggle.group-first {
    width: calc(100% + 0.25rem);
  }
  .learning-nav .filters-wrapper .filter-toggle.group-middle {
    width: calc(100% + 1px);
  }
  .learning-nav .filters-wrapper .filter-toggle.group-last {
    width: calc(100% + 0.25rem + 1px);
  }
  .learning-nav .filters-wrapper .filter-toggle.group-last .count {
    right: 1.25rem;
  }

  .learning-nav-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 1rem;
    grid-row-gap: 0.25rem;
  }
  .learning-nav-wrapper > div.filters {
    grid-template-rows: auto auto;
  }
  .learning-nav-wrapper > div.filters h2 {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
  .learning-nav-wrapper > div .filters-search {
    position: relative;
    width: 100%;
    max-width: 18rem;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1180px) {
  .page-header.learning > .wrapper {
    grid-template-columns: 14rem 1fr;
    grid-template-rows: auto;
    grid-row-gap: 1rem;
    grid-column-gap: 1rem;
    position: initial;
  }

  .learning-nav {
    padding: 0;
  }

  .learning-nav-toggle {
    display: none;
  }

  .learning-nav-wrapper {
    grid-template-columns: 1fr;
    grid-column-gap: 1rem;
  }
  .learning-nav-wrapper > div.filters {
    grid-template-columns: 1fr 14rem;
    grid-template-rows: auto;
    margin: 0;
  }
  .learning-nav-wrapper > div .filters-search {
    justify-self: end;
    max-width: 13rem;
    margin-right: 0;
  }
}
@media screen and (min-width: 1280px) {
  .page-header.learning > .wrapper h1 {
    align-self: center;
  }

  .learning-nav-wrapper > div .filters-search {
    max-width: 14rem;
  }
}
.learning-content {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
  min-height: 60vh;
}
.learning-content > .wrapper {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.learning-content .results-header {
  padding: 0.75rem 0;
  width: 100%;
  font-family: var(--font-condensed);
  display: grid;
  grid-template-columns: 1fr auto;
}
.learning-content .results-header .info,
.learning-content .results-header .applied-filters,
.learning-content .results-header .applied-filters ul,
.learning-content .results-header .applied-filters li {
  display: inline;
}
.learning-content .results-header .info {
  align-self: center;
}
.learning-content .results-header .count {
  font-weight: var(--font-bold);
  margin-right: 0.75em;
}
.learning-content .results-header .applied-filters ul {
  list-style: none;
  margin: 0;
}
.learning-content .results-header .applied-filters ul li {
  padding-left: 0;
}
.learning-content .results-header .applied-filters ul li::before {
  content: none;
  display: none;
}
.learning-content .results-header .applied-filters > ul > li, .learning-content .results-header .applied-filters > a {
  margin-right: 0.75em;
}
.learning-content .results-header .applied-filters a {
  display: inline-block;
  margin-right: -0.25rem;
  padding-right: 0.25rem;
}
.learning-content .results-header .applied-filters a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.learning-content .results-header .applied-filters a:not(:hover):not(:focus-visible) .icon {
  fill: var(--color-gray);
}
.learning-content .results-header .sort {
  display: flex;
}
.learning-content .results-header .sort h2 {
  font-size: var(--font-s2);
  margin: 0;
}
.learning-content .results-header .sort .button:not(:hover):not(:focus-visible) {
  background: var(--color-gray-l10);
}
.learning-content .cards-list {
  padding: 0;
  display: grid;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
  grid-column-gap: var(--padding-s2);
  grid-row-gap: var(--padding-s2);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (min-width: 600px) {
  .learning-content .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  }
}
@media (min-width: 980px) {
  .learning-content .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 1440px) {
  .learning-content .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
.learning-content .no-results {
  padding: calc(var(--padding-m) * 2) 0;
}
.learning-content .no-results p {
  display: block;
  text-align: center;
  margin: 0;
}
.learning-content .no-results p:first-child {
  font-weight: var(--font-bold);
  font-size: var(--font-l6);
}

.learning-card {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l1);
  padding: 0;
  position: relative;
  width: 100%;
  display: grid;
  transition: var(--transition) box-shadow;
  font-family: var(--font-condensed);
  grid-template-rows: auto 1fr auto;
}
.learning-card.hidden {
  display: none;
}
.learning-card .image {
  width: 100%;
  overflow: hidden;
  position: relative;
  color: transparent;
  background: var(--color-gray-l2);
  aspect-ratio: 1/0.56;
  border-top-left-radius: var(--radius-l1);
  border-top-right-radius: var(--radius-l1);
}
.learning-card .image::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 100%);
}
.learning-card .image img,
.learning-card .image svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  transition: var(--transition) opacity;
}
.learning-card .image.no-image {
  background: var(--color-gray-l7);
}
.learning-card.archived .image img,
.learning-card.archived .image svg {
  filter: grayscale(1);
}
.learning-card .content {
  position: relative;
  text-align: left;
  padding: calc(var(--padding-card) + 0.72rem) var(--padding-card) var(--padding-card);
}
.learning-card .content .title {
  margin: 0;
  font-size: var(--font-l4);
  line-height: var(--line-height-s2);
}
.learning-card .content .title a {
  display: block;
  padding: 0.25rem 0.25rem 0.05rem;
  margin: -0.25rem -0.25rem -0.05rem;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning-card .content .title a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.learning-card .content .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  font-size: var(--font-s2);
  color: var(--color-bg);
}
.learning-card .content .labels .wrapper1 {
  position: relative;
}
.learning-card .content .labels .wrapper2 {
  list-style: none;
  margin: 0;
  position: absolute;
  bottom: -0.72rem;
  left: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  margin-right: var(--padding-card);
  padding: 0.1rem 0.3rem 0.1rem var(--padding-card);
  border-top-right-radius: var(--radius-s1);
  border-bottom-right-radius: var(--radius-s1);
}
.learning-card .content .labels .wrapper2 li {
  padding-left: 0;
}
.learning-card .content .labels .wrapper2 li::before {
  content: none;
  display: none;
}
.learning-card .content .labels p {
  display: block;
  margin: 0;
  font-size: var(--font-s4);
  line-height: var(--font-s4);
  padding: 0.2rem;
  text-align: left;
}
.learning-card .content .labels p.entry-type {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  margin-left: -0.2rem;
}
.learning-card .content .labels p.entry-subtype {
  display: flex;
}
.learning-card .content .labels p.entry-subtype img {
  display: block;
  height: 1em;
  width: auto;
  margin: 0 0.35em 0 0;
}
.learning-card .content .labels p.entry-startdate {
  font-weight: var(--font-bold);
}
.learning-card .content .labels p + p {
  margin-left: -0.1rem;
}
.learning-card .content .info {
  display: grid;
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.2em 0 0;
}
.learning-card .content .info .offered-by {
  display: inline;
  color: var(--color-gray-l2);
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.15rem 0 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning-card.course.hover .title a,
.learning-card.course .title a:hover,
.learning-card.course .title a:focus-visible {
  color: var(--color-course-hover);
}
.learning-card.course .labels .wrapper2 {
  background: var(--color-course);
}
.learning-card.course .labels p,
.learning-card.course .labels a {
  background: var(--color-course);
}
.learning-card.course .labels a:hover, .learning-card.course .labels a:focus-visible {
  background: var(--color-course-hover);
}
.learning-card.event.hover .title a,
.learning-card.event .title a:hover,
.learning-card.event .title a:focus-visible {
  color: var(--color-event-hover);
}
.learning-card.event .labels .wrapper2 {
  background: var(--color-event);
}
.learning-card.event .labels p,
.learning-card.event .labels a {
  background: var(--color-event);
}
.learning-card.event .labels a:hover, .learning-card.event .labels a:focus-visible {
  background: var(--color-event-hover);
}
.learning-card.microlearning.hover .title a,
.learning-card.microlearning .title a:hover,
.learning-card.microlearning .title a:focus-visible {
  color: var(--color-microlearning-hover);
}
.learning-card.microlearning .labels .wrapper2 {
  background: var(--color-microlearning);
}
.learning-card.microlearning .labels p,
.learning-card.microlearning .labels a {
  background: var(--color-microlearning);
}
.learning-card.microlearning .labels a:hover, .learning-card.microlearning .labels a:focus-visible {
  background: var(--color-microlearning-hover);
}
.learning-card.resource.hover .title a,
.learning-card.resource .title a:hover,
.learning-card.resource .title a:focus-visible {
  color: var(--color-resource-hover);
}
.learning-card.resource .labels .wrapper2 {
  background: var(--color-resource);
}
.learning-card.resource .labels p,
.learning-card.resource .labels a {
  background: var(--color-resource);
}
.learning-card.resource .labels a:hover, .learning-card.resource .labels a:focus-visible {
  background: var(--color-resource-hover);
}
.learning-card.archived.hover .title a,
.learning-card.archived .title a:hover,
.learning-card.archived .title a:focus-visible {
  color: var(--color-gray-l4);
}
.learning-card.archived .labels .wrapper2 {
  background: var(--color-gray-l3);
}
.learning-card.archived .labels p,
.learning-card.archived .labels a {
  background: var(--color-gray-l3);
}
.learning-card.archived .labels a:hover, .learning-card.archived .labels a:focus-visible {
  background: var(--color-gray-l4);
}
.learning-card .footer {
  position: relative;
  text-align: left;
  padding: 0 var(--padding-card) var(--padding-card);
}
.learning-card .footer .card-tags {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.learning-card .footer .card-tags .group {
  display: grid;
  grid-template-columns: 1em 1fr;
  grid-gap: 0.4em;
  margin: 2px 0 0;
  width: 100%;
  max-width: 100%;
  font-size: var(--font-s3);
}
.learning-card .footer .card-tags .group.level.introductory .group-text {
  color: var(--color-introductory);
}
.learning-card .footer .card-tags .group.level.introductory .icon {
  fill: var(--color-introductory);
}
.learning-card .footer .card-tags .group.level.intermediate .group-text {
  color: var(--color-intermediate);
}
.learning-card .footer .card-tags .group.level.intermediate .icon {
  fill: var(--color-intermediate);
}
.learning-card .footer .card-tags .group.level.advanced .group-text {
  color: var(--color-advanced);
}
.learning-card .footer .card-tags .group.level.advanced .icon {
  fill: var(--color-advanced);
}
.learning-card .footer .card-tags .icon {
  display: block;
  width: calc(1em + 0.2rem);
  height: calc(1em + 0.2rem);
  fill: var(--color-gray-l2);
  padding: 0.1rem;
  margin: -0.1rem;
}
.learning-card .footer .card-tags .group-text {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-gray-l2);
  font-size: var(--font-s3);
  line-height: var(--line-height-s2);
  margin: 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  min-width: 0;
}
.learning-card .footer .card-tags .group-text > span {
  display: inline-block;
  max-width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-spacing: -0.075em;
}
.learning-card .footer .card-tags .group-text .separator {
  display: inline-block;
  width: 0.5em;
  padding: 0;
  margin: 0;
}
.learning-card .footer .card-tags .group-text a {
  padding: 0.05rem 0.15rem;
  margin: -0.05rem -0.15rem;
}
.learning-card .footer .card-tags .group-text a:not(:hover):not(:focus-visible) {
  color: var(--color-gray-l2);
}
.learning-card .footer .card-tags .group-text.subject > span {
  display: inline;
  white-space: normal;
  overflow: unset;
  text-overflow: unset;
}
.learning-card .learning-list-tools {
  position: absolute;
  right: 0;
  top: 0;
  padding: var(--padding-card);
  width: 100%;
  display: flex;
  justify-content: end;
  aspect-ratio: 1/0.56;
  background: radial-gradient(94% 104% at 100% 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.1) 90%);
  border-top-left-radius: var(--radius-l1);
  border-top-right-radius: var(--radius-l1);
}
.learning-card .learning-list-tools svg {
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.75));
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.75));
}
.learning-card .no-image ~ .learning-list-tools {
  background: rgba(0, 0, 0, 0.4);
}
.learning-card .no-image ~ .learning-list-tools svg {
  -webkit-filter: none;
  filter: none;
}
.learning-card .learning-list-tool .icon {
  fill: var(--color-bg);
}
.learning-card .learning-list-tool .icon:hover, .learning-card .learning-list-tool .icon:focus-visible {
  fill: var(--color-bg);
}
.learning-card.hover {
  cursor: pointer;
  box-shadow: var(--shadow-d1);
}
.learning-card.hover .image img,
.learning-card.hover .image svg {
  opacity: 0.9;
}
.learning-card.hover .image.no-image {
  background: var(--color-gray-l8);
}
.learning-card.hover.course .title a:not(:hover):not(:focus-visible), .learning-card.hover.course .title a:hover, .learning-card.hover.course .title a:focus-visible {
  color: var(--color-course-hover);
}
.learning-card.hover.microlearning .title a:not(:hover):not(:focus-visible), .learning-card.hover.microlearning .title a:hover, .learning-card.hover.microlearning .title a:focus-visible {
  color: var(--color-microlearning-hover);
}
.learning-card.hover.archived .title a:not(:hover):not(:focus-visible), .learning-card.hover.archived .title a:hover, .learning-card.hover.archived .title a:focus-visible {
  color: var(--color-gray-l4);
}

.learning-list-tool {
  display: block;
  margin: 0;
  width: 20px;
  height: 20px;
}
.learning-list-tool .icon {
  width: 30px;
  height: 30px;
  margin: -5px;
  fill: var(--color-gray);
}
.learning-list-tool .book,
.learning-list-tool .clip,
.learning-list-tool .learning-list-tool-icon,
.learning-list-tool .circle,
.learning-list-tool .circle-border,
.learning-list-tool .check {
  transition: all 100ms;
}
.learning-list-tool.hidden {
  display: none;
}
.learning-list-tool.drag {
  cursor: grab;
}
.learning-list-tool.drag .icon {
  cursor: grab;
}
.learning-list-tool.drag:hover, .learning-list-tool.drag:focus-visible {
  cursor: grab;
}
.learning-list-tool.drag:hover .icon, .learning-list-tool.drag:focus-visible .icon {
  opacity: 1;
}
.learning-list-tool.remove .learning-list-tool-icon, .learning-list-tool.mark-as-not-complete .learning-list-tool-icon {
  opacity: 0;
}
.learning-list-tool.remove:hover .learning-list-tool-icon, .learning-list-tool.remove:focus-visible .learning-list-tool-icon, .learning-list-tool.mark-as-not-complete:hover .learning-list-tool-icon, .learning-list-tool.mark-as-not-complete:focus-visible .learning-list-tool-icon {
  opacity: 1;
}
.learning-list-tool.mark-as-complete .circle {
  opacity: 0;
}
.learning-list-tool.mark-as-complete .icon {
  width: 36px;
  height: 36px;
  margin: -8px;
}
.learning-list-tool.mark-as-not-complete .icon {
  width: 40px;
  height: 40px;
  margin: -10px;
}
.learning-list-tool.mark-as-not-complete .circle {
  fill: var(--color-complete);
}
.learning-list-tool.mark-as-not-complete .check,
.learning-list-tool.mark-as-not-complete .circle-border {
  fill: var(--color-white);
}
.learning-list-tool:hover .icon, .learning-list-tool:focus-visible .icon {
  fill: var(--color-link-hover);
}
.learning-list-tool:hover.add .clip, .learning-list-tool:focus-visible.add .clip {
  d: path("M0,0v30h30V0H0z M15,29c-5.3071,0-9.625-4.3179-9.625-9.625S9.6929,9.75,15,9.75s9.625,4.3179,9.625,9.625 S20.3071,29,15,29z M15,10.75c-4.7438,0-8.625,3.8812-8.625,8.625S10.2562,28,15,28s8.625-3.8812,8.625-8.625 S19.7438,10.75,15,10.75z M20.0966,20.5511h-3.9205v3.9205h-2.3523v-3.9205H9.9034v-2.3523h3.9205v-3.9205h2.3523v3.9205h3.9205 V20.5511z");
}
.learning-list-tool:hover.add .learning-list-tool-icon, .learning-list-tool:focus-visible.add .learning-list-tool-icon {
  d: path("M15,10.75c-4.7438,0-8.625,3.8812-8.625,8.625S10.2562,28,15,28s8.625-3.8812,8.625-8.625S19.7438,10.75,15,10.75z  M20.0966,20.5511h-3.9205v3.9205h-2.3523v-3.9205H9.9034v-2.3523h3.9205v-3.9205h2.3523v3.9205h3.9205V20.5511z");
}
.learning-list-tool:hover.remove .clip, .learning-list-tool:focus-visible.remove .clip {
  d: path("M0,0v30h30V0H0z M15,29c-5.3071,0-9.625-4.3179-9.625-9.625S9.6929,9.75,15,9.75s9.625,4.3179,9.625,9.625 S20.3071,29,15,29z M15,10.75c-4.7438,0-8.625,3.8812-8.625,8.625S10.2562,28,15,28s8.625-3.8812,8.625-8.625 S19.7438,10.75,15,10.75z M19.4355,22.1472l-1.6633,1.6633L15,21.0383l-2.7722,2.7722l-1.6633-1.6633l2.7722-2.7722 l-2.7722-2.7722l1.6633-1.6633L15,17.7117l2.7722-2.7722l1.6633,1.6633l-2.7722,2.7722L19.4355,22.1472z");
}
.learning-list-tool:hover.remove .learning-list-tool-icon, .learning-list-tool:focus-visible.remove .learning-list-tool-icon {
  d: path("M15,10.75c-4.7438,0-8.625,3.8812-8.625,8.625S10.2562,28,15,28s8.625-3.8812,8.625-8.625S19.7438,10.75,15,10.75z  M19.4355,22.1472l-1.6633,1.6633L15,21.0383l-2.7722,2.7722l-1.6633-1.6633l2.7722-2.7722l-2.7722-2.7722l1.6633-1.6633 L15,17.7117l2.7722-2.7722l1.6633,1.6633l-2.7722,2.7722L19.4355,22.1472z");
}
.learning-list-tool:hover.mark-as-not-complete .icon, .learning-list-tool:focus-visible.mark-as-not-complete .icon {
  width: 40px;
  height: 40px;
  margin: -10px;
}
.learning-list-tool:hover.mark-as-not-complete .learning-list-tool-icon, .learning-list-tool:focus-visible.mark-as-not-complete .learning-list-tool-icon {
  opacity: 1;
}
.learning-list-tool:hover.mark-as-not-complete .circle, .learning-list-tool:focus-visible.mark-as-not-complete .circle {
  fill: var(--color-link-hover);
}
.learning-list-tool:hover.mark-as-complete .check,
.learning-list-tool:hover.mark-as-complete .circle-border, .learning-list-tool:focus-visible.mark-as-complete .check,
.learning-list-tool:focus-visible.mark-as-complete .circle-border {
  fill: var(--color-link-hover);
}

.learning-list-card,
.article-card,
.podcast-card {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l1);
  padding: 0;
  position: relative;
  width: 100%;
  display: grid;
  transition: var(--transition) box-shadow;
  font-family: var(--font-condensed);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "image" "content" "footer";
}
@media (min-width: 768px) {
  .learning-list-card,
.article-card,
.podcast-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "image content" "image footer";
  }
}
@media (min-width: 768px) {
  .learning-list-card.with-tools,
.article-card.with-tools,
.podcast-card.with-tools {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas: "image content tools" "image footer tools";
  }
}
.learning-list-card.hidden,
.article-card.hidden,
.podcast-card.hidden {
  display: none;
}
.learning-list-card.dragging,
.article-card.dragging,
.podcast-card.dragging {
  opacity: 0.25;
}
.learning-list-card .image,
.article-card .image,
.podcast-card .image {
  grid-area: image;
  width: 100%;
  overflow: hidden;
  position: relative;
  color: transparent;
  background: var(--color-gray-l2);
  aspect-ratio: 1/0.56;
  border-top-left-radius: var(--radius-l1);
  border-top-right-radius: var(--radius-l1);
}
@media (min-width: 768px) {
  .learning-list-card .image,
.article-card .image,
.podcast-card .image {
    margin: var(--padding-card) 0 var(--padding-card) var(--padding-card);
    border-radius: var(--radius-s1);
    width: 280px;
  }
}
.learning-list-card .image::after,
.article-card .image::after,
.podcast-card .image::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.1) 100%);
}
.learning-list-card .image img,
.learning-list-card .image svg,
.article-card .image img,
.article-card .image svg,
.podcast-card .image img,
.podcast-card .image svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  transition: var(--transition) opacity;
}
.learning-list-card .image.no-image,
.article-card .image.no-image,
.podcast-card .image.no-image {
  background: var(--color-gray-l7);
}
@media (min-width: 768px) {
  .learning-list-card.podcast-card .image,
.article-card.podcast-card .image,
.podcast-card.podcast-card .image {
    aspect-ratio: 1;
    width: 9.75rem;
  }
  .learning-list-card.podcast-card .image img,
.article-card.podcast-card .image img,
.podcast-card.podcast-card .image img {
    object-fit: cover;
  }
}
.learning-list-card .content,
.article-card .content,
.podcast-card .content {
  grid-area: content;
  position: relative;
  text-align: left;
  padding: calc(var(--padding-card) + 0.72rem) var(--padding-card) var(--padding-card);
}
@media (min-width: 768px) {
  .learning-list-card .content,
.article-card .content,
.podcast-card .content {
    padding-top: calc(var(--padding-card) + 2rem);
  }
}
.learning-list-card .content .title,
.article-card .content .title,
.podcast-card .content .title {
  margin: 0;
  font-size: var(--font-l4);
  line-height: var(--line-height-s2);
}
.learning-list-card .content .title a,
.article-card .content .title a,
.podcast-card .content .title a {
  display: block;
  padding: 0.25rem 0.25rem 0.05rem;
  margin: -0.25rem -0.25rem -0.05rem;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning-list-card .content .title a:not(:hover):not(:focus-visible),
.article-card .content .title a:not(:hover):not(:focus-visible),
.podcast-card .content .title a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.learning-list-card .content .labels,
.article-card .content .labels,
.podcast-card .content .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  font-size: var(--font-s2);
  color: var(--color-bg);
}
@media (min-width: 768px) {
  .learning-list-card .content .labels,
.article-card .content .labels,
.podcast-card .content .labels {
    top: var(--padding-card);
    left: var(--padding-card);
    height: auto;
    width: auto;
  }
}
.learning-list-card .content .labels .wrapper1,
.article-card .content .labels .wrapper1,
.podcast-card .content .labels .wrapper1 {
  position: relative;
}
.learning-list-card .content .labels .wrapper2,
.article-card .content .labels .wrapper2,
.podcast-card .content .labels .wrapper2 {
  list-style: none;
  margin: 0;
  position: absolute;
  bottom: -0.72rem;
  left: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  margin-right: var(--padding-card);
  padding: 0.1rem 0.3rem 0.1rem var(--padding-card);
  border-top-right-radius: var(--radius-s1);
  border-bottom-right-radius: var(--radius-s1);
}
.learning-list-card .content .labels .wrapper2 li,
.article-card .content .labels .wrapper2 li,
.podcast-card .content .labels .wrapper2 li {
  padding-left: 0;
}
.learning-list-card .content .labels .wrapper2 li::before,
.article-card .content .labels .wrapper2 li::before,
.podcast-card .content .labels .wrapper2 li::before {
  content: none;
  display: none;
}
@media (min-width: 768px) {
  .learning-list-card .content .labels .wrapper2,
.article-card .content .labels .wrapper2,
.podcast-card .content .labels .wrapper2 {
    position: unset;
    left: unset;
    border-radius: var(--radius-s1);
    padding: 0.1rem 0.3rem;
  }
}
.learning-list-card .content .labels p,
.article-card .content .labels p,
.podcast-card .content .labels p {
  display: block;
  margin: 0;
  font-size: var(--font-s4);
  line-height: var(--font-s4);
  padding: 0.2rem;
  text-align: left;
}
.learning-list-card .content .labels p.entry-type,
.article-card .content .labels p.entry-type,
.podcast-card .content .labels p.entry-type {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  margin-left: -0.2rem;
}
@media (min-width: 768px) {
  .learning-list-card .content .labels p.entry-type,
.article-card .content .labels p.entry-type,
.podcast-card .content .labels p.entry-type {
    margin-left: 0;
  }
}
.learning-list-card .content .labels p.entry-subtype,
.article-card .content .labels p.entry-subtype,
.podcast-card .content .labels p.entry-subtype {
  display: flex;
}
.learning-list-card .content .labels p.entry-subtype img,
.article-card .content .labels p.entry-subtype img,
.podcast-card .content .labels p.entry-subtype img {
  display: block;
  height: 1em;
  width: auto;
  margin: 0 0.35em 0 0;
}
.learning-list-card .content .labels p.entry-startdate,
.article-card .content .labels p.entry-startdate,
.podcast-card .content .labels p.entry-startdate {
  font-weight: var(--font-bold);
}
.learning-list-card .content .labels p + p,
.article-card .content .labels p + p,
.podcast-card .content .labels p + p {
  margin-left: -0.1rem;
}
.learning-list-card .content .info,
.article-card .content .info,
.podcast-card .content .info {
  display: grid;
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.2em 0 0;
}
.learning-list-card .content .info .date,
.article-card .content .info .date,
.podcast-card .content .info .date {
  display: inline;
  color: var(--color-gray-l3);
  font-size: var(--font-s3);
  line-height: var(--line-height-s3);
  margin: 0.45rem 0 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning-list-card .content .info .offered-by,
.article-card .content .info .offered-by,
.podcast-card .content .info .offered-by {
  display: inline;
  color: var(--color-gray-l2);
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.15rem 0 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.learning-list-card.course.hover .title a, .learning-list-card.course.hover .title a:not(:hover), .learning-list-card.course.hover .title a:not(:focus-visible), .learning-list-card.course.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.course .title a:hover,
.learning-list-card.course .title a:focus-visible,
.article-card.course.hover .title a,
.article-card.course.hover .title a:not(:hover),
.article-card.course.hover .title a:not(:focus-visible),
.article-card.course.hover .title a:not(:hover):not(:focus-visible),
.article-card.course .title a:hover,
.article-card.course .title a:focus-visible,
.podcast-card.course.hover .title a,
.podcast-card.course.hover .title a:not(:hover),
.podcast-card.course.hover .title a:not(:focus-visible),
.podcast-card.course.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.course .title a:hover,
.podcast-card.course .title a:focus-visible {
  color: var(--color-course-hover);
}
.learning-list-card.course .labels .wrapper2,
.article-card.course .labels .wrapper2,
.podcast-card.course .labels .wrapper2 {
  background: var(--color-course);
}
.learning-list-card.course .labels p,
.learning-list-card.course .labels a,
.article-card.course .labels p,
.article-card.course .labels a,
.podcast-card.course .labels p,
.podcast-card.course .labels a {
  background: var(--color-course);
}
.learning-list-card.course .labels a:hover, .learning-list-card.course .labels a:focus-visible,
.article-card.course .labels a:hover,
.article-card.course .labels a:focus-visible,
.podcast-card.course .labels a:hover,
.podcast-card.course .labels a:focus-visible {
  background: var(--color-course-hover);
}
.learning-list-card.microlearning.hover .title a, .learning-list-card.microlearning.hover .title a:not(:hover), .learning-list-card.microlearning.hover .title a:not(:focus-visible), .learning-list-card.microlearning.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.microlearning .title a:hover,
.learning-list-card.microlearning .title a:focus-visible, .learning-list-card.article-card.hover .title a, .learning-list-card.article-card.hover .title a:not(:hover), .learning-list-card.article-card.hover .title a:not(:focus-visible), .learning-list-card.article-card.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.article-card .title a:hover,
.learning-list-card.article-card .title a:focus-visible, .learning-list-card.podcast-card.hover .title a, .learning-list-card.podcast-card.hover .title a:not(:hover), .learning-list-card.podcast-card.hover .title a:not(:focus-visible), .learning-list-card.podcast-card.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.podcast-card .title a:hover,
.learning-list-card.podcast-card .title a:focus-visible,
.article-card.microlearning.hover .title a,
.article-card.microlearning.hover .title a:not(:hover),
.article-card.microlearning.hover .title a:not(:focus-visible),
.article-card.microlearning.hover .title a:not(:hover):not(:focus-visible),
.article-card.microlearning .title a:hover,
.article-card.microlearning .title a:focus-visible,
.article-card.article-card.hover .title a,
.article-card.article-card.hover .title a:not(:hover),
.article-card.article-card.hover .title a:not(:focus-visible),
.article-card.article-card.hover .title a:not(:hover):not(:focus-visible),
.article-card.article-card .title a:hover,
.article-card.article-card .title a:focus-visible,
.article-card.podcast-card.hover .title a,
.article-card.podcast-card.hover .title a:not(:hover),
.article-card.podcast-card.hover .title a:not(:focus-visible),
.article-card.podcast-card.hover .title a:not(:hover):not(:focus-visible),
.article-card.podcast-card .title a:hover,
.article-card.podcast-card .title a:focus-visible,
.podcast-card.microlearning.hover .title a,
.podcast-card.microlearning.hover .title a:not(:hover),
.podcast-card.microlearning.hover .title a:not(:focus-visible),
.podcast-card.microlearning.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.microlearning .title a:hover,
.podcast-card.microlearning .title a:focus-visible,
.podcast-card.article-card.hover .title a,
.podcast-card.article-card.hover .title a:not(:hover),
.podcast-card.article-card.hover .title a:not(:focus-visible),
.podcast-card.article-card.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.article-card .title a:hover,
.podcast-card.article-card .title a:focus-visible,
.podcast-card.podcast-card.hover .title a,
.podcast-card.podcast-card.hover .title a:not(:hover),
.podcast-card.podcast-card.hover .title a:not(:focus-visible),
.podcast-card.podcast-card.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.podcast-card .title a:hover,
.podcast-card.podcast-card .title a:focus-visible {
  color: var(--color-microlearning-hover);
}
.learning-list-card.microlearning .labels .wrapper2, .learning-list-card.article-card .labels .wrapper2, .learning-list-card.podcast-card .labels .wrapper2,
.article-card.microlearning .labels .wrapper2,
.article-card.article-card .labels .wrapper2,
.article-card.podcast-card .labels .wrapper2,
.podcast-card.microlearning .labels .wrapper2,
.podcast-card.article-card .labels .wrapper2,
.podcast-card.podcast-card .labels .wrapper2 {
  background: var(--color-microlearning);
}
.learning-list-card.microlearning .labels p,
.learning-list-card.microlearning .labels a, .learning-list-card.article-card .labels p,
.learning-list-card.article-card .labels a, .learning-list-card.podcast-card .labels p,
.learning-list-card.podcast-card .labels a,
.article-card.microlearning .labels p,
.article-card.microlearning .labels a,
.article-card.article-card .labels p,
.article-card.article-card .labels a,
.article-card.podcast-card .labels p,
.article-card.podcast-card .labels a,
.podcast-card.microlearning .labels p,
.podcast-card.microlearning .labels a,
.podcast-card.article-card .labels p,
.podcast-card.article-card .labels a,
.podcast-card.podcast-card .labels p,
.podcast-card.podcast-card .labels a {
  background: var(--color-microlearning);
}
.learning-list-card.microlearning .labels a:hover, .learning-list-card.microlearning .labels a:focus-visible, .learning-list-card.article-card .labels a:hover, .learning-list-card.article-card .labels a:focus-visible, .learning-list-card.podcast-card .labels a:hover, .learning-list-card.podcast-card .labels a:focus-visible,
.article-card.microlearning .labels a:hover,
.article-card.microlearning .labels a:focus-visible,
.article-card.article-card .labels a:hover,
.article-card.article-card .labels a:focus-visible,
.article-card.podcast-card .labels a:hover,
.article-card.podcast-card .labels a:focus-visible,
.podcast-card.microlearning .labels a:hover,
.podcast-card.microlearning .labels a:focus-visible,
.podcast-card.article-card .labels a:hover,
.podcast-card.article-card .labels a:focus-visible,
.podcast-card.podcast-card .labels a:hover,
.podcast-card.podcast-card .labels a:focus-visible {
  background: var(--color-microlearning-hover);
}
.learning-list-card.event.hover .title a, .learning-list-card.event.hover .title a:not(:hover), .learning-list-card.event.hover .title a:not(:focus-visible), .learning-list-card.event.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.event .title a:hover,
.learning-list-card.event .title a:focus-visible,
.article-card.event.hover .title a,
.article-card.event.hover .title a:not(:hover),
.article-card.event.hover .title a:not(:focus-visible),
.article-card.event.hover .title a:not(:hover):not(:focus-visible),
.article-card.event .title a:hover,
.article-card.event .title a:focus-visible,
.podcast-card.event.hover .title a,
.podcast-card.event.hover .title a:not(:hover),
.podcast-card.event.hover .title a:not(:focus-visible),
.podcast-card.event.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.event .title a:hover,
.podcast-card.event .title a:focus-visible {
  color: var(--color-event-hover);
}
.learning-list-card.event .labels .wrapper2,
.article-card.event .labels .wrapper2,
.podcast-card.event .labels .wrapper2 {
  background: var(--color-event);
}
.learning-list-card.event .labels p,
.learning-list-card.event .labels a,
.article-card.event .labels p,
.article-card.event .labels a,
.podcast-card.event .labels p,
.podcast-card.event .labels a {
  background: var(--color-event);
}
.learning-list-card.event .labels a:hover, .learning-list-card.event .labels a:focus-visible,
.article-card.event .labels a:hover,
.article-card.event .labels a:focus-visible,
.podcast-card.event .labels a:hover,
.podcast-card.event .labels a:focus-visible {
  background: var(--color-event-hover);
}
.learning-list-card.resource.hover .title a, .learning-list-card.resource.hover .title a:not(:hover), .learning-list-card.resource.hover .title a:not(:focus-visible), .learning-list-card.resource.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.resource .title a:hover,
.learning-list-card.resource .title a:focus-visible,
.article-card.resource.hover .title a,
.article-card.resource.hover .title a:not(:hover),
.article-card.resource.hover .title a:not(:focus-visible),
.article-card.resource.hover .title a:not(:hover):not(:focus-visible),
.article-card.resource .title a:hover,
.article-card.resource .title a:focus-visible,
.podcast-card.resource.hover .title a,
.podcast-card.resource.hover .title a:not(:hover),
.podcast-card.resource.hover .title a:not(:focus-visible),
.podcast-card.resource.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.resource .title a:hover,
.podcast-card.resource .title a:focus-visible {
  color: var(--color-resource-hover);
}
.learning-list-card.resource .labels .wrapper2,
.article-card.resource .labels .wrapper2,
.podcast-card.resource .labels .wrapper2 {
  background: var(--color-resource);
}
.learning-list-card.resource .labels p,
.learning-list-card.resource .labels a,
.article-card.resource .labels p,
.article-card.resource .labels a,
.podcast-card.resource .labels p,
.podcast-card.resource .labels a {
  background: var(--color-resource);
}
.learning-list-card.resource .labels a:hover, .learning-list-card.resource .labels a:focus-visible,
.article-card.resource .labels a:hover,
.article-card.resource .labels a:focus-visible,
.podcast-card.resource .labels a:hover,
.podcast-card.resource .labels a:focus-visible {
  background: var(--color-resource-hover);
}
.learning-list-card.archived.hover .title a, .learning-list-card.archived.hover .title a:not(:hover), .learning-list-card.archived.hover .title a:not(:focus-visible), .learning-list-card.archived.hover .title a:not(:hover):not(:focus-visible),
.learning-list-card.archived .title a:hover,
.learning-list-card.archived .title a:focus-visible,
.article-card.archived.hover .title a,
.article-card.archived.hover .title a:not(:hover),
.article-card.archived.hover .title a:not(:focus-visible),
.article-card.archived.hover .title a:not(:hover):not(:focus-visible),
.article-card.archived .title a:hover,
.article-card.archived .title a:focus-visible,
.podcast-card.archived.hover .title a,
.podcast-card.archived.hover .title a:not(:hover),
.podcast-card.archived.hover .title a:not(:focus-visible),
.podcast-card.archived.hover .title a:not(:hover):not(:focus-visible),
.podcast-card.archived .title a:hover,
.podcast-card.archived .title a:focus-visible {
  color: var(--color-gray-l4);
}
.learning-list-card.archived .image,
.article-card.archived .image,
.podcast-card.archived .image {
  filter: grayscale(1);
}
.learning-list-card.archived .labels .wrapper2,
.article-card.archived .labels .wrapper2,
.podcast-card.archived .labels .wrapper2 {
  background: var(--color-gray-l3);
}
.learning-list-card.archived .labels p,
.learning-list-card.archived .labels a,
.article-card.archived .labels p,
.article-card.archived .labels a,
.podcast-card.archived .labels p,
.podcast-card.archived .labels a {
  background: var(--color-gray-l3);
}
.learning-list-card.archived .labels a:hover, .learning-list-card.archived .labels a:focus-visible,
.article-card.archived .labels a:hover,
.article-card.archived .labels a:focus-visible,
.podcast-card.archived .labels a:hover,
.podcast-card.archived .labels a:focus-visible {
  background: var(--color-gray-l4);
}
.learning-list-card .footer,
.article-card .footer,
.podcast-card .footer {
  grid-area: footer;
  position: relative;
  text-align: left;
  padding: 0 var(--padding-card) var(--padding-card);
}
.learning-list-card .footer .card-tags,
.article-card .footer .card-tags,
.podcast-card .footer .card-tags {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.learning-list-card .footer .card-tags .group,
.article-card .footer .card-tags .group,
.podcast-card .footer .card-tags .group {
  display: grid;
  grid-template-columns: 1em 1fr;
  grid-gap: 0.4em;
  margin: 2px 0 0;
  width: 100%;
  max-width: 100%;
  font-size: var(--font-s3);
}
.learning-list-card .footer .card-tags .group.level.introductory .group-text,
.article-card .footer .card-tags .group.level.introductory .group-text,
.podcast-card .footer .card-tags .group.level.introductory .group-text {
  color: var(--color-introductory);
}
.learning-list-card .footer .card-tags .group.level.introductory .icon,
.article-card .footer .card-tags .group.level.introductory .icon,
.podcast-card .footer .card-tags .group.level.introductory .icon {
  fill: var(--color-introductory);
}
.learning-list-card .footer .card-tags .group.level.intermediate .group-text,
.article-card .footer .card-tags .group.level.intermediate .group-text,
.podcast-card .footer .card-tags .group.level.intermediate .group-text {
  color: var(--color-intermediate);
}
.learning-list-card .footer .card-tags .group.level.intermediate .icon,
.article-card .footer .card-tags .group.level.intermediate .icon,
.podcast-card .footer .card-tags .group.level.intermediate .icon {
  fill: var(--color-intermediate);
}
.learning-list-card .footer .card-tags .group.level.advanced .group-text,
.article-card .footer .card-tags .group.level.advanced .group-text,
.podcast-card .footer .card-tags .group.level.advanced .group-text {
  color: var(--color-advanced);
}
.learning-list-card .footer .card-tags .group.level.advanced .icon,
.article-card .footer .card-tags .group.level.advanced .icon,
.podcast-card .footer .card-tags .group.level.advanced .icon {
  fill: var(--color-advanced);
}
.learning-list-card .footer .card-tags .icon,
.article-card .footer .card-tags .icon,
.podcast-card .footer .card-tags .icon {
  display: block;
  width: calc(1em + 0.2rem);
  height: calc(1em + 0.2rem);
  fill: var(--color-gray-l2);
  padding: 0.1rem;
  margin: -0.1rem;
}
.learning-list-card .footer .card-tags .group-text,
.article-card .footer .card-tags .group-text,
.podcast-card .footer .card-tags .group-text {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-gray-l2);
  font-size: var(--font-s3);
  line-height: var(--line-height-s2);
  margin: 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  min-width: 0;
}
.learning-list-card .footer .card-tags .group-text > span,
.article-card .footer .card-tags .group-text > span,
.podcast-card .footer .card-tags .group-text > span {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-spacing: -0.075em;
  padding: 0.35rem;
  margin: -0.35rem;
}
.learning-list-card .footer .card-tags .group-text .separator,
.article-card .footer .card-tags .group-text .separator,
.podcast-card .footer .card-tags .group-text .separator {
  display: inline-block;
  width: 0.5em;
  padding: 0;
  margin: 0;
}
.learning-list-card .footer .card-tags .group-text a,
.article-card .footer .card-tags .group-text a,
.podcast-card .footer .card-tags .group-text a {
  padding: 0.05rem 0.15rem;
  margin: -0.05rem -0.15rem;
}
.learning-list-card .footer .card-tags .group-text a:not(:hover):not(:focus-visible),
.article-card .footer .card-tags .group-text a:not(:hover):not(:focus-visible),
.podcast-card .footer .card-tags .group-text a:not(:hover):not(:focus-visible) {
  color: var(--color-gray-l2);
}
.learning-list-card .footer .card-tags .group-text.subject > span,
.article-card .footer .card-tags .group-text.subject > span,
.podcast-card .footer .card-tags .group-text.subject > span {
  display: inline;
  white-space: normal;
  overflow: unset;
  text-overflow: unset;
}
.learning-list-card .learning-list-tools,
.article-card .learning-list-tools,
.podcast-card .learning-list-tools {
  padding: calc(var(--padding-card) - 0.35rem);
  display: flex;
  justify-content: end;
}
.learning-list-card .learning-list-tools .learning-list-tool,
.article-card .learning-list-tools .learning-list-tool,
.podcast-card .learning-list-tools .learning-list-tool {
  margin: 0.35rem;
}
@media (max-width: 767px) {
  .learning-list-card .learning-list-tools,
.article-card .learning-list-tools,
.podcast-card .learning-list-tools {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1/0.56;
    background: radial-gradient(64% 74% at 100% 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.1) 90%), radial-gradient(44% 74% at 0% 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.1) 90%);
    border-top-left-radius: var(--radius-l1);
    border-top-right-radius: var(--radius-l1);
  }
}
@media (min-width: 768px) {
  .learning-list-card .learning-list-tools,
.article-card .learning-list-tools,
.podcast-card .learning-list-tools {
    grid-area: tools;
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  .learning-list-card .no-image ~ .learning-list-tools,
.article-card .no-image ~ .learning-list-tools,
.podcast-card .no-image ~ .learning-list-tools {
    background: rgba(0, 0, 0, 0.4);
  }
  .learning-list-card .no-image ~ .learning-list-tools svg,
.article-card .no-image ~ .learning-list-tools svg,
.podcast-card .no-image ~ .learning-list-tools svg {
    -webkit-filter: none;
    filter: none;
  }
}
.learning-list-card .learning-list-tool,
.article-card .learning-list-tool,
.podcast-card .learning-list-tool {
  border: transparent;
  min-width: unset;
  min-height: unset;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}
.learning-list-card .learning-list-tool span,
.article-card .learning-list-tool span,
.podcast-card .learning-list-tool span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.learning-list-card .learning-list-tool.drag,
.article-card .learning-list-tool.drag,
.podcast-card .learning-list-tool.drag {
  margin-right: auto;
}
@media (min-width: 768px) {
  .learning-list-card .learning-list-tool.drag,
.article-card .learning-list-tool.drag,
.podcast-card .learning-list-tool.drag {
    margin-right: 0.35rem;
    margin-bottom: auto;
  }
  .learning-list-card .learning-list-tool.drag:not(:hover):not(:focus-visible),
.article-card .learning-list-tool.drag:not(:hover):not(:focus-visible),
.podcast-card .learning-list-tool.drag:not(:hover):not(:focus-visible) {
    opacity: 0.5;
  }
}
.learning-list-card .learning-list-tool:not([disabled]):not(.disabled):hover, .learning-list-card .learning-list-tool:not([disabled]):not(.disabled):focus-visible,
.article-card .learning-list-tool:not([disabled]):not(.disabled):hover,
.article-card .learning-list-tool:not([disabled]):not(.disabled):focus-visible,
.podcast-card .learning-list-tool:not([disabled]):not(.disabled):hover,
.podcast-card .learning-list-tool:not([disabled]):not(.disabled):focus-visible {
  background: none;
  border: none;
  box-shadow: none;
}
@media (max-width: 767px) {
  .learning-list-card .learning-list-tool .icon,
.article-card .learning-list-tool .icon,
.podcast-card .learning-list-tool .icon {
    fill: var(--color-bg);
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
  }
  .learning-list-card .learning-list-tool.drag .icon,
.article-card .learning-list-tool.drag .icon,
.podcast-card .learning-list-tool.drag .icon {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
  }
  .learning-list-card .learning-list-tool.mark-as-complete .icon,
.article-card .learning-list-tool.mark-as-complete .icon,
.podcast-card .learning-list-tool.mark-as-complete .icon {
    -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
  }
}
@media (min-width: 768px) {
  .learning-list-card .learning-list-tool:not([disabled]):not(.disabled):hover .icon, .learning-list-card .learning-list-tool:not([disabled]):not(.disabled):focus-visible .icon,
.article-card .learning-list-tool:not([disabled]):not(.disabled):hover .icon,
.article-card .learning-list-tool:not([disabled]):not(.disabled):focus-visible .icon,
.podcast-card .learning-list-tool:not([disabled]):not(.disabled):hover .icon,
.podcast-card .learning-list-tool:not([disabled]):not(.disabled):focus-visible .icon {
    fill: var(--color-link-hover);
    -webkit-filter: none;
    filter: none;
    box-shadow: none;
  }
}
.learning-list-card.hover,
.article-card.hover,
.podcast-card.hover {
  cursor: pointer;
  box-shadow: var(--shadow-d1);
}
.learning-list-card.hover .image img,
.learning-list-card.hover .image svg,
.article-card.hover .image img,
.article-card.hover .image svg,
.podcast-card.hover .image img,
.podcast-card.hover .image svg {
  opacity: 0.9;
}
.learning-list-card.hover .image.no-image,
.article-card.hover .image.no-image,
.podcast-card.hover .image.no-image {
  background: var(--color-gray-l8);
}
.learning-list-card .summary,
.article-card .summary,
.podcast-card .summary {
  margin: calc(var(--padding-card) * 1) 0 0;
  display: none;
}
@media (min-width: 768px) {
  .learning-list-card .summary,
.article-card .summary,
.podcast-card .summary {
    display: block;
  }
}

.page-header.learning-entry {
  padding: var(--padding-m) 0;
  color: var(--color-bg);
}
.page-header.learning-entry.course {
  background: var(--color-course-d1);
  background: linear-gradient(var(--color-course-d1) 20%, var(--color-course) 80%);
}
.page-header.learning-entry.event {
  background: var(--color-event-d1);
  background: linear-gradient(var(--color-event-d1) 20%, var(--color-event) 80%);
}
.page-header.learning-entry.microlearning {
  background: var(--color-microlearning-d1);
  background: linear-gradient(var(--color-microlearning-d1) 20%, var(--color-microlearning) 80%);
}
.page-header.learning-entry.resource {
  background: var(--color-resource-d1);
  background: linear-gradient(var(--color-resource-d1) 20%, var(--color-resource) 80%);
}
.page-header.learning-entry.archived {
  background: var(--color-gray-l2);
  background: linear-gradient(var(--color-gray-l2) 20%, var(--color-gray-l3) 80%);
}
.page-header.learning-entry > .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: var(--padding-s1);
  grid-column-gap: var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: 0 var(--padding-m);
  border: none;
}
.page-header.learning-entry > .wrapper::before {
  content: none;
  display: none;
}
@media (min-width: 768px) {
  .page-header.learning-entry > .wrapper {
    grid-template-columns: 1fr 16rem;
    grid-template-rows: auto auto 1fr;
    grid-row-gap: 1rem;
  }
}
@media (min-width: 880px) {
  .page-header.learning-entry > .wrapper {
    grid-template-columns: 1fr calc((100% - 2 * var(--padding-m)) / 2.8);
  }
}
@media (min-width: 1440px) {
  .page-header.learning-entry > .wrapper {
    grid-template-columns: 1fr 27.5rem;
  }
}
.page-header.learning-entry.with-media > .wrapper {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .page-header.learning-entry.with-media > .wrapper {
    grid-template-columns: 1fr 16rem;
  }
}
@media (min-width: 880px) {
  .page-header.learning-entry.with-media > .wrapper {
    grid-template-columns: 1fr calc((100% - 2 * var(--padding-m)) / 2.8);
  }
}
@media (min-width: 1440px) {
  .page-header.learning-entry.with-media > .wrapper {
    grid-template-columns: 1fr 27.5rem;
  }
}
.page-header.learning-entry h1 {
  grid-row: 2;
  grid-column: 1/-1;
  width: auto;
  text-align: left;
  align-self: center;
  margin: 0 2rem 0 0;
  font-size: var(--font-l9);
  line-height: var(--line-height-s2);
  padding: 0;
}
.page-header.learning-entry h2 {
  padding: 0;
}
@media (min-width: 1180px) {
  .page-header.learning-entry.with-media h1 {
    grid-column: 1;
  }
}
@media (min-width: 1180px) {
  .page-header.learning-entry.article h1, .page-header.learning-entry.podcast h1 {
    grid-column: 1/-1;
  }
}
.page-header.learning-entry .entry-labels {
  grid-row: 1;
  grid-column: 1/-1;
  width: auto;
  text-align: left;
  align-self: center;
  margin: 0;
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  color: var(--color-bg);
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 1180px) {
  .page-header.learning-entry .entry-labels {
    grid-column: 1;
  }
}
.page-header.learning-entry .entry-labels p {
  display: block;
  margin: 0 -1px -1px 0;
  line-height: var(--line-height-s3);
  padding: 0;
  border: 1px solid var(--color-white);
}
.page-header.learning-entry .entry-labels p a {
  padding: 0.5rem 0.6rem;
  display: block;
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  overflow: hidden;
  margin: 0;
}
.page-header.learning-entry .entry-labels p a:not(:hover):not(:focus-visible) {
  color: var(--color-bg);
}
.page-header.learning-entry .entry-labels p a:hover, .page-header.learning-entry .entry-labels p a:focus-visible {
  color: var(--color-bg);
  position: relative;
  z-index: 2;
}
.page-header.learning-entry .entry-labels p.entry-type {
  font-weight: var(--font-bold);
  text-transform: uppercase;
}
.page-header.learning-entry .entry-labels p.entry-subtype a {
  display: flex;
}
.page-header.learning-entry .entry-labels p.entry-subtype img {
  display: inline-flex;
  height: 1.2em;
  width: auto;
  margin: -0.2em 0.35em -0.05em -0.1em;
}
.page-header.learning-entry .entry-labels p.entry-startdate, .page-header.learning-entry .entry-labels p.entry-byunparter {
  padding: 0.5rem 0.6rem;
  display: block;
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  overflow: hidden;
}
.page-header.learning-entry .entry-labels p.entry-startdate {
  font-weight: var(--font-bold);
}
.page-header.learning-entry .entry-labels p.entry-byunparter {
  background: var(--color-link);
}
.page-header.learning-entry .entry-labels p:first-child {
  border-top-left-radius: var(--radius-m);
  border-bottom-left-radius: var(--radius-m);
  overflow: hidden;
}
.page-header.learning-entry .entry-labels p:last-child {
  border-top-right-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
  overflow: hidden;
}
.page-header.learning-entry .entry-info {
  grid-row: 3;
  grid-column: 1;
}
@media (min-width: 768px) {
  .page-header.learning-entry .entry-info {
    padding-right: 3rem;
  }
}
.page-header.learning-entry .entry-info h2 {
  font-size: var(--font-s3);
  margin: 0 0 0.5em;
  text-align: left;
}
.page-header.learning-entry .entry-info p {
  margin: 0.3rem 0;
  line-height: var(--line-height-s1);
}
.page-header.learning-entry .entry-info p > span:first-child {
  margin-right: -1rem;
}
.page-header.learning-entry .entry-info p [data-tooltip] {
  display: inline-block;
  margin: 0 0 0 -4rem;
  width: 0;
  padding: 0;
}
.page-header.learning-entry .entry-info p [data-tooltip] .icon {
  margin: -0.5em -5rem -0.35em 5rem;
  width: 1.5em;
  height: 1.5em;
  fill: var(--color-bg);
}
.page-header.learning-entry .entry-info .series-title {
  font-size: var(--font-l3);
  font-weight: var(--font-bold);
  margin: -0.25rem 0 2rem;
}
.page-header.learning-entry .entry-info .authors {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  margin: 0.25rem 0 0.5rem;
}
.page-header.learning-entry .entry-info .authors li {
  padding-left: 0;
}
.page-header.learning-entry .entry-info .authors li::before {
  content: none;
  display: none;
}
.page-header.learning-entry .entry-info .authors .author {
  padding-left: 3.5rem;
}
.page-header.learning-entry .entry-info .author {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0.15rem;
}
.page-header.learning-entry .entry-info .author.with-picture {
  position: relative;
  min-height: 3rem;
}
.page-header.learning-entry .entry-info .author.with-picture img {
  position: absolute;
  width: 3rem;
  height: 3rem;
  left: 0;
  top: 0;
  border: 1px solid var(--color-white);
  border-radius: 100%;
}
.page-header.learning-entry .entry-info .author span {
  line-height: var(--line-height-s2);
}
.page-header.learning-entry .entry-info .author .name {
  font-size: var(--font-l1);
  font-weight: var(--font-bold);
}
.page-header.learning-entry .entry-info .author + .author {
  margin-top: 0.5rem;
}
.page-header.learning-entry .entry-info audio {
  display: block;
  width: 100%;
  margin-top: var(--padding-s1);
}
.page-header.learning-entry .entry-tools {
  margin-top: var(--padding-s1);
  display: flex;
  flex-wrap: wrap;
}
.page-header.learning-entry .entry-tools .community-link {
  width: auto;
  padding: 0.25rem 1.2rem;
  font-weight: var(--font-normal);
  margin: 0 -0.25rem;
}
.page-header.learning-entry .entry-tools .community-link .icon {
  fill: var(--color-white);
  width: 2em;
  height: 2em;
  margin: -0.5em -0.5em -0.25em 0.25em;
}
.page-header.learning-entry .entry-tools .community-link span span {
  display: block;
  font-size: var(--font-s2);
  text-align: left;
}
.page-header.learning-entry .entry-tools .button {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.page-header.learning-entry .learning-list-tool {
  width: auto;
  padding: 0.25rem 1.2rem;
  font-weight: var(--font-normal);
  margin: 0 -0.25rem;
}
.page-header.learning-entry .learning-list-tool:not(.hidden) {
  display: inline-flex;
}
.page-header.learning-entry .learning-list-tool .icon {
  fill: var(--color-white);
  width: 2em;
  height: 2em;
  margin: -0.5em 0.25em -0.25em -0.25em;
}
.page-header.learning-entry .learning-list-tool span {
  font-size: var(--font-s2);
  text-align: left;
}
.page-header.learning-entry .learning-list-tool.add span {
  max-width: 82px;
}
.page-header.learning-entry .learning-list-tool.remove span {
  max-width: 116px;
}
.page-header.learning-entry .learning-list-tool:hover, .page-header.learning-entry .learning-list-tool:focus-visible {
  background: var(--color-white);
  border-color: var(--color-white);
}
.page-header.learning-entry.course .learning-list-tool:hover, .page-header.learning-entry.course .learning-list-tool:focus-visible {
  color: var(--color-course);
}
.page-header.learning-entry.course .learning-list-tool:hover .icon, .page-header.learning-entry.course .learning-list-tool:focus-visible .icon {
  fill: var(--color-course);
}
.page-header.learning-entry.event .learning-list-tool:hover, .page-header.learning-entry.event .learning-list-tool:focus-visible {
  color: var(--color-event);
}
.page-header.learning-entry.event .learning-list-tool:hover .icon, .page-header.learning-entry.event .learning-list-tool:focus-visible .icon {
  fill: var(--color-event);
}
.page-header.learning-entry.microlearning .learning-list-tool:hover, .page-header.learning-entry.microlearning .learning-list-tool:focus-visible {
  color: var(--color-microlearning);
}
.page-header.learning-entry.microlearning .learning-list-tool:hover .icon, .page-header.learning-entry.microlearning .learning-list-tool:focus-visible .icon {
  fill: var(--color-microlearning);
}
.page-header.learning-entry.resource .learning-list-tool:hover, .page-header.learning-entry.resource .learning-list-tool:focus-visible {
  color: var(--color-resource);
}
.page-header.learning-entry.resource .learning-list-tool:hover .icon, .page-header.learning-entry.resource .learning-list-tool:focus-visible .icon {
  fill: var(--color-resource);
}
.page-header.learning-entry.archived .learning-list-tool:hover, .page-header.learning-entry.archived .learning-list-tool:focus-visible {
  color: var(--color-gray-l3);
}
.page-header.learning-entry.archived .learning-list-tool:hover .icon, .page-header.learning-entry.archived .learning-list-tool:focus-visible .icon {
  fill: var(--color-gray-l3);
}
.page-header.learning-entry .entry-media-spacer {
  display: none;
}
@media (min-width: 768px) {
  .page-header.learning-entry .entry-media-spacer {
    display: block;
    align-self: end;
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    height: 0;
    margin: var(--padding-s3) 0 calc(-1 * var(--padding-m) + 81px);
  }
}
@media (min-width: 1180px) {
  .page-header.learning-entry .entry-media-spacer {
    grid-row: 1/span 3;
  }
}
@media (min-width: 1180px) {
  .page-header.learning-entry.article .entry-media-spacer, .page-header.learning-entry.podcast .entry-media-spacer {
    grid-row: 3;
  }
}
@media (min-width: 768px) {
  .page-header.learning-entry.with-media > .wrapper .entry-media-spacer {
    height: auto;
    aspect-ratio: 1/0.56;
    margin: var(--padding-s3) 0 calc(-1 * var(--padding-m));
  }
}
@media (min-width: 768px) {
  .page-header.learning-entry.with-media.with-link > .wrapper .entry-media-spacer {
    aspect-ratio: 1/0.56;
    margin: var(--padding-s3) 0 calc(-1 * var(--padding-m) + 81px);
  }
}
.page-header.learning-entry.course .entry-labels p {
  border-color: var(--color-course-d2);
}
.page-header.learning-entry.course .entry-labels p:not(.entry-byunparter),
.page-header.learning-entry.course .entry-labels a {
  background: var(--color-course);
}
.page-header.learning-entry.course .entry-labels a:hover, .page-header.learning-entry.course .entry-labels a:focus-visible {
  background: var(--color-course-hover);
}
.page-header.learning-entry.event .entry-labels p {
  border-color: var(--color-event-d2);
}
.page-header.learning-entry.event .entry-labels p:not(.entry-byunparter),
.page-header.learning-entry.event .entry-labels a {
  background: var(--color-event);
}
.page-header.learning-entry.event .entry-labels a:hover, .page-header.learning-entry.event .entry-labels a:focus-visible {
  background: var(--color-event-hover);
}
.page-header.learning-entry.microlearning .entry-labels p {
  border-color: var(--color-microlearning-d2);
}
.page-header.learning-entry.microlearning .entry-labels p:not(.entry-byunparter),
.page-header.learning-entry.microlearning .entry-labels a {
  background: var(--color-microlearning);
}
.page-header.learning-entry.microlearning .entry-labels a:hover, .page-header.learning-entry.microlearning .entry-labels a:focus-visible {
  background: var(--color-microlearning-hover);
}
.page-header.learning-entry.resource .entry-labels p {
  border-color: var(--color-resource-d2);
}
.page-header.learning-entry.resource .entry-labels p:not(.entry-byunparter),
.page-header.learning-entry.resource .entry-labels a {
  background: var(--color-resource);
}
.page-header.learning-entry.resource .entry-labels a:hover, .page-header.learning-entry.resource .entry-labels a:focus-visible {
  background: var(--color-resource-hover);
}
.page-header.learning-entry.archived .entry-labels p {
  border-color: var(--color-gray-l1);
}
.page-header.learning-entry.archived .entry-labels p:not(.entry-byunparter),
.page-header.learning-entry.archived .entry-labels a {
  background: var(--color-gray-l3);
}
.page-header.learning-entry.archived .entry-labels a:hover, .page-header.learning-entry.archived .entry-labels a:focus-visible {
  background: var(--color-gray-l4);
}

.entry-details > .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: calc(var(--padding-m) * 1.5);
  grid-column-gap: var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: 0 var(--padding-m) var(--padding-m);
}
@media (min-width: 768px) {
  .entry-details > .wrapper {
    grid-template-columns: 1fr 16rem;
    grid-row-gap: var(--padding-m);
  }
}
@media (min-width: 880px) {
  .entry-details > .wrapper {
    grid-template-columns: 1fr calc((100% - 2 * var(--padding-m)) / 2.8);
  }
}
@media (min-width: 1440px) {
  .entry-details > .wrapper {
    grid-template-columns: 1fr 27.5rem;
  }
}
.entry-details .box-container {
  grid-column: 1/-1;
  background: var(--color-course);
  margin: calc(-1 * var(--padding-m));
  padding: calc(1 * var(--padding-m));
}
@media (min-width: 768px) {
  .entry-details .box-container {
    grid-row: 1/span 2;
    grid-column: 2;
    margin: 0;
    padding: 0;
  }
}
.entry-details.course .box-container {
  background: var(--color-course);
}
@media (min-width: 768px) {
  .entry-details.course .box-container {
    background: none;
  }
}
.entry-details.event .box-container {
  background: var(--color-event);
}
@media (min-width: 768px) {
  .entry-details.event .box-container {
    background: none;
  }
}
.entry-details.microlearning .box-container {
  background: var(--color-microlearning);
}
@media (min-width: 768px) {
  .entry-details.microlearning .box-container {
    background: none;
  }
}
.entry-details.resource .box-container {
  background: var(--color-resource);
}
@media (min-width: 768px) {
  .entry-details.resource .box-container {
    background: none;
  }
}
.entry-details.archived .box-container {
  background: var(--color-gray-l3);
}
@media (min-width: 768px) {
  .entry-details.archived .box-container {
    background: none;
  }
}
.entry-details .box {
  grid-column: 2;
  background: var(--color-gray-l2);
  color: var(--color-bg);
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  border-radius: var(--radius-m);
  overflow: hidden;
  padding: 0;
  max-width: 18rem;
}
@media (min-width: 768px) {
  .entry-details .box {
    display: block;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: visible;
    max-width: unset;
  }
  .entry-details .box:not(.with-media):not(.with-link) {
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
  }
}
.entry-details .box-top {
  width: 100%;
}
@media (min-width: 768px) {
  .entry-details .box-top {
    grid-column: 1;
    grid-row: unset;
    height: 0;
    position: relative;
  }
}
.entry-details .box-top > .wrapper {
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-gray);
}
@media (min-width: 768px) {
  .entry-details .box-top > .wrapper {
    border-top-right-radius: var(--radius-m);
    border-left: none;
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
    left: 0;
  }
}
.entry-details .media {
  width: 100%;
  aspect-ratio: 1/0.56;
  position: relative;
}
.entry-details .media img,
.entry-details .media iframe {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
}
.entry-details .media .button {
  width: 3rem;
  position: absolute;
  left: 50%;
  bottom: 50%;
  margin: 0 0 -1.5rem -1.5rem;
  padding: 0.25rem;
  box-shadow: var(--shadow-d1);
}
.entry-details .media .button span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.entry-details .media .button svg {
  margin: 0;
}
.entry-details.archived .media img,
.entry-details.archived .media svg {
  filter: grayscale(1);
}
.entry-details .media + .action {
  border-top: 1px solid var(--color-gray);
}
.entry-details .action {
  padding: var(--padding-card);
}
@media (min-width: 768px) {
  .entry-details .action {
    grid-column: 1;
    grid-row: 1;
    border-left: none;
  }
}
.entry-details .action .button {
  width: 100%;
  margin: 0;
}
.entry-details .action .archived-label {
  padding: 0.65rem 0.75rem;
  margin: 0;
  font-weight: var(--font-bold);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-m);
  font-family: var(--font-text);
  line-height: var(--line-height-s3);
  border: 1px solid transparent;
  min-height: 3rem;
}
.entry-details .box-bottom {
  padding: 0;
  font-family: var(--font-condensed);
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  background: var(--color-gray-l1);
}
@media (min-width: 768px) {
  .entry-details .box-bottom {
    grid-row: unset;
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
    overflow: hidden;
  }
}
.entry-details .box-bottom > dl {
  width: 100%;
  margin: 0;
}
.entry-details .box-bottom > dl > div {
  border-top: 1px solid var(--color-gray);
  padding: calc(var(--padding-card) * 0.75) calc(var(--padding-card) * 1.5);
  overflow: hidden;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.25rem;
}
.entry-details .box-bottom > dl > div:first-child {
  border-top: none;
}
@media (min-width: 768px) {
  .entry-details .box-bottom > dl > div:first-child {
    border-top: 1px solid var(--color-gray);
  }
}
.entry-details .box-bottom dt {
  grid-column: 1;
  margin: 0;
  padding: 0;
  font-size: var(--font-s3);
  line-height: var(--font-l2);
  font-weight: var(--font-bold);
  opacity: 0.9;
}
.entry-details .box-bottom dd {
  grid-column: 2;
  margin: 0;
  text-align: left;
  font-size: var(--font-s1);
  line-height: var(--font-l2);
  font-weight: var(--font-normal);
}
.entry-details .box-bottom dd.level.introductory {
  color: var(--color-introductory-l1);
}
.entry-details .box-bottom dd.level.intermediate {
  color: var(--color-intermediate-l1);
}
.entry-details .box-bottom dd.level.advanced {
  color: var(--color-advanced-l1);
}
.entry-details .summary {
  padding-top: calc(var(--padding-m) * 1.5);
  grid-row: 2;
  grid-column: 1;
  max-width: 780px;
  font-size: var(--font-l2);
}
@media (min-width: 768px) {
  .entry-details .summary {
    grid-row: 1;
    padding-top: var(--padding-m);
  }
}
.entry-details .summary > :last-child {
  margin-bottom: 0;
}
.entry-details .box-container + .entry-topics {
  padding-top: calc(var(--padding-m) * 1.5);
}
@media (min-width: 768px) {
  .entry-details .box-container + .entry-topics {
    padding-top: var(--padding-m);
  }
}
.entry-details .entry-topics {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--padding-s1);
}
.entry-details .entry-topics h2 {
  width: 100%;
  margin: 0 0 var(--padding-s1);
  font-size: var(--font-l3);
}
.entry-details .entry-topics > div {
  font-family: var(--font-condensed);
}
.entry-details .entry-topics dl {
  margin: 0;
}
.entry-details .entry-topics dt {
  font-size: var(--font-l1);
  line-height: var(--line-height-s2);
  margin: 0 0 0.75em;
}
.entry-details .entry-topics a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.entry-details .entry-topics .sdgs dd,
.entry-details .entry-topics .mental-models dd {
  padding: 0.75rem 0 0;
  min-height: 2.75rem;
}
@media (min-width: 980px) {
  .entry-details .entry-topics .sdgs dd,
.entry-details .entry-topics .mental-models dd {
    padding: 1.1rem 0 0;
    min-height: 3.5rem;
  }
}
.entry-details .entry-topics .sdgs dd > span,
.entry-details .entry-topics .mental-models dd > span {
  display: inline-block;
  width: 100%;
  padding: 0 0 0 2.85rem;
  position: relative;
}
@media (min-width: 980px) {
  .entry-details .entry-topics .sdgs dd > span,
.entry-details .entry-topics .mental-models dd > span {
    padding: 0 0 0 3.5rem;
  }
}
.entry-details .entry-topics .sdgs dd > span > span:not(:hover):not(:focus-visible),
.entry-details .entry-topics .mental-models dd > span > span:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.entry-details .entry-topics .sdgs dd > span > span > .icon,
.entry-details .entry-topics .mental-models dd > span > span > .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 1em;
  margin: 0;
  align-self: start;
}
@media (min-width: 980px) {
  .entry-details .entry-topics .sdgs dd > span > span > .icon,
.entry-details .entry-topics .mental-models dd > span > span > .icon {
    width: 3rem;
  }
}
.entry-details .entry-topics .sdgs dd > span > span > .icon svg,
.entry-details .entry-topics .mental-models dd > span > span > .icon svg {
  width: 2.75rem;
  height: 2.75rem;
  margin: calc((2.75rem - 1em) / 2 * -1) -10%;
}
@media (min-width: 980px) {
  .entry-details .entry-topics .sdgs dd > span > span > .icon svg,
.entry-details .entry-topics .mental-models dd > span > span > .icon svg {
    width: 3.5rem;
    height: 3.5rem;
    margin: calc((3.5rem - 1em) / 2 * -1) -10%;
  }
}
.entry-details .entry-topics .sdgs dd > span > span > span,
.entry-details .entry-topics .mental-models dd > span > span > span {
  display: inline;
}
.entry-details .entry-topics .sdgs dd .description-icon,
.entry-details .entry-topics .mental-models dd .description-icon {
  display: inline-block;
  margin: -0.25em 0;
  width: 1em;
  height: 1em;
  padding: 0;
  position: relative;
}
.entry-details .entry-topics .sdgs dd .description-icon > span,
.entry-details .entry-topics .mental-models dd .description-icon > span {
  position: absolute;
  width: calc(100% + 0.8em);
  height: calc(100% + 0.8em);
  margin: 0;
  left: -0.4em;
  top: -0.4em;
  padding: 0.4em;
}
.entry-details .entry-topics .sdgs dd .description-icon svg,
.entry-details .entry-topics .mental-models dd .description-icon svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: 0;
}
.entry-details .entry-topics .sdgs dt + dd,
.entry-details .entry-topics .mental-models dt + dd {
  margin-top: 1rem;
}
.entry-details .entry-topics .other > div + div {
  margin-top: 1rem;
}
@media (min-width: 500px) {
  .entry-details .entry-topics {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 500px) {
  .entry-details .entry-topics.with-mental-models .other {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--padding-s1);
  }
  .entry-details .entry-topics.with-mental-models .other > div + div {
    margin-top: 0;
  }
}
@media (min-width: 640px) {
  .entry-details .entry-topics.with-mental-models {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .entry-details .entry-topics.with-mental-models .other {
    grid-column: unset;
    display: block;
  }
  .entry-details .entry-topics.with-mental-models .other > div + div {
    margin-top: 1rem;
  }
}
@media (min-width: 768px) {
  .entry-details .entry-topics.with-mental-models {
    grid-template-columns: 1fr 1fr;
  }
  .entry-details .entry-topics.with-mental-models .other {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--padding-s1);
  }
  .entry-details .entry-topics.with-mental-models .other > div + div {
    margin-top: 0;
  }
}
@media (min-width: 1080px) {
  .entry-details .entry-topics.with-mental-models {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .entry-details .entry-topics.with-mental-models .other {
    grid-column: unset;
    display: block;
  }
  .entry-details .entry-topics.with-mental-models .other > div + div {
    margin-top: 1rem;
  }
}

.page-header.article + .entry-details .box, .page-header.podcast + .entry-details .box {
  display: block;
  background: none;
  border: none;
  box-shadow: none;
}
.page-header.article + .entry-details .box-top > .wrapper, .page-header.podcast + .entry-details .box-top > .wrapper {
  border-radius: var(--radius-m);
  width: 100%;
}
@media (min-width: 767px) {
  .page-header.article + .entry-details .box-top > .wrapper, .page-header.podcast + .entry-details .box-top > .wrapper {
    margin-bottom: var(--padding-m);
  }
}

.entry-content {
  background: var(--color-gray-l10);
  min-height: 50vh;
}

.entry-contentblock {
  border-top: 1px solid var(--color-gray-l9);
}
.entry-contentblock > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.entry-contentblock > .wrapper > :first-child {
  margin-top: 0;
}
.entry-contentblock h2 {
  font-size: var(--font-l8);
  text-align: center;
}
.entry-contentblock:first-child {
  border-top: 1px solid var(--color-gray-l8);
}
.entry-contentblock:last-child > .wrapper {
  padding-bottom: calc(var(--padding-m) * 4);
}
.entry-contentblock.embed {
  background: var(--color-gray-l9);
  border-bottom: 1px solid var(--color-gray-l8);
}
.entry-contentblock.embed > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.entry-contentblock.embed .video {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-m);
  aspect-ratio: 1/0.56;
}
.entry-contentblock.embed iframe {
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
.entry-contentblock.offered-by .list {
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: -10px 0 1rem;
}
.entry-contentblock.offered-by .list li {
  padding-left: 0;
}
.entry-contentblock.offered-by .list li::before {
  content: none;
  display: none;
}
.entry-contentblock.offered-by .institution {
  display: inline-block;
  position: relative;
  margin: 10px;
  padding: 0;
  border-radius: var(--round-corners-m);
}
.entry-contentblock.offered-by .logo {
  display: block;
  width: 120px;
  height: 120px;
  background: transparent;
  padding: 10px;
  position: relative;
}
.entry-contentblock.offered-by img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  position: absolute;
  left: 10px;
  top: 10px;
  mix-blend-mode: multiply;
}
.entry-contentblock figure {
  margin: 2em 0;
  padding: 0;
}
.entry-contentblock img {
  max-width: 100%;
  height: auto;
}

.entry-related {
  background: var(--color-gray-l9);
  border-top: 1px solid var(--color-gray-l8);
}
.entry-related h2 {
  font-size: var(--font-l6);
  text-align: center;
}
.entry-related > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.entry-related > .wrapper > :first-child {
  margin-top: 0;
}

.blog-list,
.podcast-list {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
}
.blog-list > .wrapper,
.podcast-list > .wrapper {
  padding: var(--padding-m) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l2);
}
.blog-list .cards-list,
.podcast-list .cards-list {
  padding: 0;
  display: grid;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
  grid-column-gap: var(--padding-s2);
  grid-row-gap: var(--padding-s2);
}

.blog-list .cards-list {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (min-width: 768px) {
  .blog-list .cards-list {
    grid-template-columns: 1fr;
  }
}

.podcast-list .cards-list {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (min-width: 768px) {
  .podcast-list .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
}

.blog-list .no-results,
.podcast-list .no-results {
  padding: calc(var(--padding-m) * 2) 0;
}
.blog-list .no-results p,
.podcast-list .no-results p {
  display: block;
  text-align: center;
  margin: 0;
}
.blog-list .no-results p:first-child,
.podcast-list .no-results p:first-child {
  font-weight: var(--font-bold);
  font-size: var(--font-l6);
}

.page-content.communities-list .community {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
}
.page-content.communities-list .community > .wrapper {
  padding: calc(var(--padding-m) * 2) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l2);
  display: grid;
}
.page-content.communities-list .community > .wrapper * {
  text-align: center;
  max-width: var(--max-width-l1);
  align-self: center;
  justify-self: center;
}
.page-content.communities-list .community > .wrapper h2, .page-content.communities-list .community > .wrapper h3 {
  margin: 0 0 1.5rem;
}
.page-content.communities-list .community > .wrapper > p {
  font-size: var(--font-l4);
  line-height: var(--line-height-s1);
  margin: 0 0 0.5rem;
}
.page-content.communities-list .community:last-child > .wrapper {
  padding-bottom: calc(var(--padding-m) * 4);
}
.page-content.communities-list .community:only-child {
  min-height: 50vh;
}
.page-content.communities-list .community-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  border: none;
  padding-bottom: 0;
  margin: 1.25rem auto;
  width: 100%;
}
.page-content.communities-list .community-tags li {
  padding-left: 0;
}
.page-content.communities-list .community-tags li::before {
  content: none;
  display: none;
}
.page-content.communities-list .community-tags li {
  text-align: center;
  min-width: 7.5rem;
  max-width: 12rem;
  width: 20%;
  padding: 0.5rem 0.35rem;
}
.page-content.communities-list .community-tags svg {
  display: block;
  margin: 0 auto;
  width: 3.5rem;
  height: 3.5rem;
}
@media screen and (min-width: 768px) {
  .page-content.communities-list .community-tags svg {
    width: 4.5rem;
    height: 4.5rem;
  }
}
.page-content.communities-list .community-tags a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.page-content.communities-list .community-tags a:hover, .page-content.communities-list .community-tags a:focus-visible {
  cursor: pointer;
}
.page-content.communities-list .community-tags a:hover .icon, .page-content.communities-list .community-tags a:focus-visible .icon {
  opacity: 0.85;
}
.page-content.communities-list .community-tags p {
  display: block;
  font-size: var(--font-l1);
  line-height: var(--line-height-s1);
  font-family: var(--font-condensed);
}
@media screen and (min-width: 768px) {
  .page-content.communities-list .community-tags p {
    font-size: var(--font-l2);
    line-height: var(--line-height-s1);
  }
}

.page-content.assessments {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
  min-height: 60vh;
}
.page-content.assessments > .wrapper {
  padding: var(--padding-m) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.page-content.assessments .cards-list {
  padding: 0;
  display: grid;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
  grid-column-gap: var(--padding-s2);
  grid-row-gap: var(--padding-s2);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .page-content.assessments .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
@media (min-width: 980px) {
  .page-content.assessments .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}
@media (min-width: 1640px) {
  .page-content.assessments .cards-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-content.assessments .cards-list > :only-child {
  grid-column: 1/-1;
  max-width: 560px;
}

.page-header.assessment > .wrapper {
  display: grid;
  grid-template-rows: auto auto auto;
  position: relative;
  text-align: center;
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
}
.page-header.assessment .assessment-label {
  margin: 0 auto 1rem;
  color: var(--color-assessment);
  font-weight: var(--font-bold);
  font-size: var(--font-l2);
  line-height: var(--line-height-s2);
  grid-row: 1;
  text-transform: uppercase;
  font-family: var(--font-condensed);
}
.page-header.assessment .institution-logo {
  display: block;
  margin: 1rem auto 0;
  width: auto;
  height: 3rem;
  grid-row: 3;
}

.page-content.assessment-instructions {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
}
.page-content.assessment-instructions > .wrapper {
  padding: calc(var(--padding-m) * 1.5) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  border: none;
  position: relative;
  text-align: center;
}
.page-content.assessment-instructions > .wrapper > h2 {
  text-align: center;
  font-size: var(--font-l8);
  margin-top: 0;
  margin-bottom: 1em;
}
.page-content.assessment-instructions form {
  max-width: 400px;
  margin: 4rem auto 0;
  text-align: left;
}
.page-content.assessment-instructions form [type=radio] + label,
.page-content.assessment-instructions form [type=checkbox] + label,
.page-content.assessment-instructions form [type=radio] + label + .custom_validation_error,
.page-content.assessment-instructions form [type=checkbox] + label + .custom_validation_error {
  font-size: var(--font-s1);
}
.page-content.assessment-instructions form button {
  width: 100%;
  max-width: unset;
}

.assessment-header {
  position: fixed;
  z-index: 10;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-gray-l8);
}
.assessment-header > .wrapper {
  justify-items: start;
  align-items: start;
  display: grid;
  padding: 0.75rem var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-column-gap: 0.75rem;
  grid-row-gap: 0.5rem;
  grid-template-areas: "title title" "exit instructions" "submit submit";
}
@media (min-width: 400px) {
  .assessment-header > .wrapper {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: "title title title" "exit instructions submit";
  }
}
@media (min-width: 768px) {
  .assessment-header > .wrapper {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "title exit instructions" "title submit submit";
  }
}
@media (min-width: 1024px) {
  .assessment-header > .wrapper {
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: auto;
    grid-template-areas: "title exit instructions submit";
  }
}

.assessment-header-title {
  margin: 0;
  padding: 0;
  font-size: var(--font-l8);
  line-height: var(--font-l8);
  grid-area: title;
}

#assessment-exit,
#assessment-instructions-toggle,
#assessment-submit-confirmation-header,
#assessment-timer {
  width: calc(100% + 0.5rem);
}
@media (min-width: 400px) {
  #assessment-exit,
#assessment-instructions-toggle,
#assessment-submit-confirmation-header,
#assessment-timer {
    width: auto;
  }
}
@media (min-width: 768px) {
  #assessment-exit,
#assessment-instructions-toggle,
#assessment-submit-confirmation-header,
#assessment-timer {
    width: calc(100% + 0.5rem);
  }
}

#assessment-exit,
#assessment-submit-confirmation-header {
  min-width: 8.5rem;
}

#assessment-exit {
  grid-area: exit;
}

#assessment-instructions-toggle {
  grid-area: instructions;
}

#assessment-submit-confirmation-header {
  grid-area: submit;
}

.assessment-started[data-timelimit] .assessment-header > .wrapper {
  grid-template-areas: "title title" "exit instructions" "timer submit";
}
@media (min-width: 400px) {
  .assessment-started[data-timelimit] .assessment-header > .wrapper {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: "title title" "exit instructions" "timer submit";
  }
  .assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-exit,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-instructions-toggle,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-submit-confirmation-header,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-timer {
    width: calc(100% + 0.5rem);
  }
}
@media (min-width: 520px) {
  .assessment-started[data-timelimit] .assessment-header > .wrapper {
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: "title title title title" "exit instructions timer submit";
  }
  .assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-exit,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-instructions-toggle,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-submit-confirmation-header,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-timer {
    width: auto;
  }
}
@media (min-width: 768px) {
  .assessment-started[data-timelimit] .assessment-header > .wrapper {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "title exit instructions" "title timer submit";
  }
  .assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-exit,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-instructions-toggle,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-submit-confirmation-header,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-timer {
    width: calc(100% + 0.5rem);
  }
}
@media (min-width: 1024px) {
  .assessment-started[data-timelimit] .assessment-header > .wrapper {
    grid-template-columns: 1fr auto auto auto auto;
    grid-template-rows: auto;
    grid-template-areas: "title exit instructions timer submit";
  }
  .assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-exit,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-instructions-toggle,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-submit-confirmation-header,
.assessment-started[data-timelimit] .assessment-header > .wrapper #assessment-timer {
    width: calc(100% + 0.5rem);
  }
}

.assessment-timer {
  grid-area: timer;
  position: relative;
  color: var(--color-gray);
  display: flex;
  align-items: center;
  margin: 0 -0.25rem;
  height: 100%;
  font-size: var(--font-l2);
  border-radius: 2rem;
  border: 1px solid var(--color-gray-l9);
  padding: 0.16rem;
}
.assessment-timer > span {
  text-align: left;
  display: flex;
  min-width: 3.1rem;
}
.assessment-timer .divider {
  margin: 0 0.1rem;
}
.assessment-timer.ending {
  color: var(--color-timer-ending-fg);
}
.assessment-timer.ending .timerchart {
  background: var(--color-timer-ending-bg);
}
.assessment-timer.ending .timerchart .c4 div {
  background: var(--color-timer-ending-fg);
}

.timerchart {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--color-timer-bg);
  border-radius: 100%;
  overflow: hidden;
  margin: 0 0.25rem 0 0;
}
.timerchart .parts {
  width: 1.75rem;
  height: 1.75rem;
  position: relative;
}
.timerchart .parts::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  background: var(--color-bg);
  border-radius: 100%;
}
.timerchart .c1,
.timerchart .c2,
.timerchart .c3 {
  position: absolute;
  width: 15px;
  height: 15px;
  background: var(--color-timer-fg);
  clip: rect(0, 15px, 15px, 0);
}
.timerchart .c1 {
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
}
.timerchart .c2 {
  top: 15px;
  left: 0;
  transform-origin: 100% 0;
}
.timerchart .c3 {
  top: 15px;
  left: 15px;
  transform-origin: 0 0;
}
.timerchart .c4 {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 0;
  left: 15px;
  clip: rect(0, 15px, 15px, 0);
}
.timerchart .c4 div {
  width: 15px;
  height: 15px;
  background: var(--color-timer-fg);
  transform-origin: 0 100%;
}

.assessment-started > main {
  overflow: hidden;
}

.assessment-started > main .main-content {
  --header-height: 8.75rem;
}
@media screen and (min-width: 400px) {
  .assessment-started > main .main-content {
    --header-height: 6rem;
  }
}
@media screen and (min-width: 768px) {
  .assessment-started > main .main-content {
    --header-height: 6.5rem;
  }
}
@media screen and (min-width: 1024px) {
  .assessment-started > main .main-content {
    --header-height: 3.75rem;
  }
}

.assessment-started > main .main-content {
  min-height: unset;
}

.assessment-started .assessment-instructions {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-gray-l8);
  text-align: center;
  display: none;
}
.assessment-started .assessment-instructions > .wrapper {
  padding: calc(var(--padding-m) * 1.5 + var(--header-height)) var(--padding-m) calc(var(--padding-m) * 1.5);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  border: none;
  position: relative;
}
.assessment-started .assessment-instructions > .wrapper > h2 {
  text-align: center;
  font-size: var(--font-l6);
  margin-top: 0;
  margin-bottom: 1em;
}
.assessment-started .assessment-instructions.visible {
  display: block;
}

.assessment-started button.hidden,
.assessment-started .button.hidden {
  display: none;
}

.assessment-questions {
  background: var(--color-gray-l10);
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.assessment-questions > .wrapper {
  padding: calc(var(--padding-m) * 1.5 + var(--header-height)) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}
.assessment-questions form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.assessment-questions form > ul {
  margin: 0;
  width: 100%;
}
.assessment-questions form > ul > * {
  margin-left: -100vw;
  margin-right: -100vw;
  padding-left: 100vw;
  padding-right: 100vw;
  width: calc(100% + 200vw);
}
.assessment-questions form > ul > :first-child {
  margin-top: 0;
}
.assessment-questions form > ul > .assessment-question:first-child {
  padding-top: 0;
}

#assessment-next-question,
#assessment-submit-confirmation {
  margin: calc(var(--padding-s2) + 3rem) auto 0;
}

#assessment-next-question + .button,
#assessment-submit + .button {
  margin-top: 0.5rem;
}

.assessment-separator {
  display: none;
  flex-direction: column;
  align-items: center;
  margin: calc((var(--padding-m) + 2rem) * 2) 0 0;
  width: 100%;
}
.assessment-separator:first-child {
  margin-top: 0;
}
.assessment-separator.visible {
  display: flex;
}
.assessment-separator .separator-text {
  font-size: var(--font-l1);
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  line-height: var(--line-height-m);
  position: relative;
}
.assessment-separator .separator-text:before {
  content: "";
  position: absolute;
  left: -100vw;
  top: calc((var(--padding-m) + 2rem) * -1);
  width: calc(100% + 200vw);
  height: 1px;
  background: var(--color-gray-l8);
}
.assessment-separator .separator-text * {
  line-height: var(--line-height-m);
  margin: 0 0 0.75rem;
}
.assessment-separator .separator-text .separator-label {
  margin: 0;
  font-size: var(--font-l4);
  line-height: var(--line-height-s2);
  font-weight: var(--font-bold);
}
.assessment-separator .separator-text h2 {
  margin: 0;
  font-size: var(--font-l8);
  font-weight: var(--font-bold);
  text-align: center;
}
.assessment-separator .separator-text img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 70vw;
  max-height: 60vh;
  margin: 1rem auto 0.75rem;
  object-fit: contain;
  border-radius: var(--radius-s1);
}
.assessment-separator:first-child .separator-text {
  margin: 4rem 0 0;
}
.assessment-separator:first-child .separator-text:before {
  display: none;
  content: none;
}

.assessment-question {
  counter-reset: answer;
  display: none;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: calc((var(--padding-m) + 1rem) * 2) 0 0;
  width: 100%;
}
.assessment-question.visible {
  display: flex;
}
.assessment-question .question-label {
  margin: 0 0 0.5rem;
  font-size: var(--font-l3);
  font-weight: var(--font-bold);
}
.assessment-question .question-text {
  font-size: var(--font-l3);
  font-weight: var(--font-normal);
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  line-height: var(--line-height-m);
}
.assessment-question .question-text * {
  line-height: var(--line-height-m);
  margin: 0 0 0.75rem;
}
.assessment-question .question-text img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 70vw;
  max-height: 60vh;
  margin: 1rem auto 0.75rem;
  object-fit: contain;
  border-radius: var(--radius-s1);
}
.assessment-question .answers {
  margin: 1rem 0 0;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(56px, auto);
  justify-items: center;
  max-width: 1024px;
  width: 100%;
}
@media (min-width: 768px) {
  .assessment-question .answers {
    grid-template-columns: 1fr 1fr;
  }
}
.assessment-question.assessment-question-scale .answers {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: unset;
}
.assessment-question.assessment-question-scale .answers > * + * {
  margin-left: 1%;
}
.assessment-question.assessment-question-scale .answers .scale-label,
.assessment-question.assessment-question-scale .answers .answer {
  max-width: 6rem;
}
.assessment-question.assessment-question-scale .answers .scale-label {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-m);
  line-height: var(--line-height-s2);
  font-weight: var(--font-bold);
  text-align: center;
  min-width: 2.5rem;
}
.assessment-question.assessment-question-scale .answers .answer .answer-text {
  min-height: 50px;
  padding: 1rem 0.5rem;
  text-align: center;
}
.assessment-question.assessment-question-scale .answers .answer input[type=checkbox] + label .answer-text::before,
.assessment-question.assessment-question-scale .answers .answer input[type=radio] + label .answer-text::before {
  display: none;
  content: none;
}
.assessment-question.assessment-question-scale .answers input[type=checkbox]:checked + label .answer-text::after,
.assessment-question.assessment-question-scale .answers input[type=radio]:checked + label .answer-text::after {
  display: none;
  content: none;
}
.assessment-question .answer {
  width: 100%;
  max-width: 32rem;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}
.assessment-question .answer label {
  background: var(--color-white);
  border: 2px solid transparent;
  border-radius: var(--radius-l1);
  padding: 0;
  margin: 0;
  color: var(--color-gray);
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: left;
  display: block;
  box-shadow: var(--shadow);
  font-size: var(--font-m);
  line-height: var(--line-height-m);
}
.assessment-question .answer label::before, .assessment-question .answer label::after {
  content: none;
}
.assessment-question .answer input[type=checkbox]:checked + label::after,
.assessment-question .answer input[type=radio]:checked + label::after {
  content: none;
}
.assessment-question .answer .answer-text {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 56px;
  position: relative;
  padding: 1.25rem 4rem 1.25rem 3em;
  font-size: var(--font-m);
  line-height: var(--line-height-m);
}
.assessment-question .answer input[type=checkbox] + label .answer-text::before,
.assessment-question .answer input[type=radio] + label .answer-text::before {
  position: absolute;
  left: 1.5rem;
  top: 1.25rem;
  display: inline-block;
  transition: var(--transition) all;
  font-weight: bold;
  counter-increment: answer;
  content: counter(answer, upper-latin) ". ";
  font-size: var(--font-m);
  line-height: var(--line-height-m);
}
.assessment-question .answer input[type=checkbox]:checked + label .answer-text::after,
.assessment-question .answer input[type=radio]:checked + label .answer-text::after {
  position: absolute;
  display: inline-block;
  transition: var(--transition) all;
  content: "";
  border-left: 3px solid var(--color-link);
  border-bottom: 3px solid var(--color-link);
  transform: rotate(-45deg);
  top: calc(5px + 0.8rem);
  right: calc(4px + 0.8rem);
  height: 12px;
  width: 20px;
}
.assessment-question .answer input[type=checkbox]:checked + label,
.assessment-question .answer input[type=radio]:checked + label {
  border-color: var(--color-link);
  color: var(--color-link);
}
@media (min-width: 768px) {
  .assessment-question .answer:last-child:nth-child(odd) {
    margin-left: 50%;
    margin-right: -50%;
  }
}
.assessment-question .answer input[type=checkbox]:focus-visible + label,
.assessment-question .answer input[type=checkbox] + label:hover,
.assessment-question .answer input[type=radio]:focus-visible + label,
.assessment-question .answer input[type=radio] + label:hover,
.assessment-question .answer input[type=checkbox]:checked:focus-visible + label,
.assessment-question .answer input[type=checkbox]:checked + label:hover,
.assessment-question .answer input[type=radio]:checked:focus-visible + label,
.assessment-question .answer input[type=radio]:checked + label:hover {
  border-color: var(--color-link);
  color: var(--color-link);
  box-shadow: var(--shadow-d1);
}
.assessment-question .answer-with-image label {
  display: grid;
}
.assessment-question .answer-with-image label .answer-text {
  grid-row: 2;
}
.assessment-question .answer-with-image label .answer-image {
  grid-row: 1;
  width: 100%;
  margin: 0;
  aspect-ratio: 2;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-gray-l9);
  background: var(--color-gray-light4);
  overflow: hidden;
  position: relative;
}
.assessment-question .answer-with-image label img {
  position: absolute;
  display: block;
  object-fit: contain;
  border-radius: var(--radius-s1);
  width: auto;
  height: auto;
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

* + .assessment-question {
  position: relative;
}
* + .assessment-question:before {
  content: "";
  position: absolute;
  left: -100vw;
  top: calc(var(--padding-m) + 2rem);
  width: calc(100% + 200vw);
  height: 1px;
  background: var(--color-gray-l9);
}

.assessment-separator + .assessment-question {
  padding-top: calc((var(--padding-m) + 2rem) * 2);
}
.assessment-separator + .assessment-question:before {
  background: var(--color-gray-l8);
  top: calc(var(--padding-m) + 2rem);
}

.assessment-question + .assessment-question {
  padding-top: calc((var(--padding-m) + 1rem) * 2);
}
.assessment-question + .assessment-question:before {
  top: calc(var(--padding-m) + 1rem);
}

.assessment-submitted .page-header > .wrapper {
  max-width: var(--max-width-l2);
  display: grid;
  grid-template-rows: auto auto auto;
  position: relative;
  text-align: center;
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
}
.assessment-submitted .page-header .assessment-label {
  margin: 0 auto 1rem;
  color: var(--color-assessment);
  font-weight: var(--font-bold);
  font-size: var(--font-l2);
  line-height: var(--line-height-s2);
  grid-row: 1;
  text-transform: uppercase;
  font-family: var(--font-condensed);
}
.assessment-submitted .page-header .title {
  font-size: var(--font-l6);
  line-height: var(--line-height-s3);
  text-align: center;
  width: 100%;
  margin: 0 auto 1rem;
  padding: 0;
}
.assessment-submitted .page-header .institution-logo {
  display: block;
  margin: 0 auto 2rem;
  width: auto;
  height: 2rem;
  grid-row: 3;
}
.assessment-submitted .page-content > .wrapper {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width);
  text-align: center;
}
.assessment-submitted .page-content .sub-title {
  margin: 0 0 0.5rem;
  font-size: var(--font-l8);
}
.assessment-submitted .page-content p {
  margin: 0 0 3rem;
  font-size: var(--font-l3);
}

body.assessment-results .page-header > .wrapper {
  display: grid;
  padding-top: var(--padding-m);
  padding-bottom: 0;
  max-width: var(--max-width-l2);
}
body.assessment-results .page-header .assessment-label {
  margin: 0 auto 1rem;
  color: var(--color-assessment);
  font-weight: var(--font-bold);
  font-size: var(--font-l2);
  line-height: var(--line-height-s2);
  grid-row: 1;
  text-transform: uppercase;
  font-family: var(--font-condensed);
}
body.assessment-results .page-header .title {
  font-size: var(--font-l10);
  line-height: var(--line-height-s3);
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
body.assessment-results .page-header .institution-logo {
  display: block;
  margin: 1rem auto 2rem;
  width: auto;
  height: 3rem;
  grid-row: 3;
}
body.assessment-results .page-content {
  background: var(--color-gray-l10);
}
body.assessment-results .page-content > .wrapper {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  text-align: center;
}
body.assessment-results .page-content .sub-title {
  margin: 0 0 0.5rem;
  font-size: var(--font-l10);
}

.attempt-results {
  background: var(--color-white);
}
.attempt-results > .wrapper {
  padding: 0 var(--padding-m) calc(var(--padding-m) * 1.5);
  width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  text-align: center;
}
.attempt-results .section-title {
  text-align: center;
  margin-top: 1.25em;
  margin-bottom: 0.25em;
  font-size: var(--font-l8);
}
.attempt-results .score {
  margin-top: 1rem;
}
.attempt-results .score .chart-label {
  text-align: center;
  font-size: var(--font-l3);
  line-height: var(--line-height-s2);
  font-weight: var(--font-bold);
  margin-top: 0;
  margin-bottom: var(--padding-s3);
}
@media screen and (min-width: 768px) {
  .attempt-results .score .chart-label {
    font-size: var(--font-l5);
  }
}
.attempt-results .score.ubiquity {
  --badge-size: 13vw;
  margin-bottom: calc(var(--badge-size) / 2);
}
@media screen and (min-width: 920px) {
  .attempt-results .score.ubiquity {
    --badge-size: 120px;
  }
}
@media screen and (min-width: 400px) {
  .attempt-results .score.ubiquity {
    display: grid;
    grid-template-columns: var(--badge-size) 1fr;
    grid-gap: var(--padding-s2);
  }
}
.attempt-results .score.ubiquity .badge {
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
@media screen and (min-width: 400px) {
  .attempt-results .score.ubiquity .badge {
    display: flex;
  }
}
.attempt-results .score.ubiquity .badge > img {
  width: 100%;
  height: auto;
  margin-top: calc(var(--badge-size) * 1.275 * -0.6);
  margin-bottom: calc(var(--badge-size) * 1.275 * -0.4);
}
.attempt-results .score.ubiquity .chart {
  width: 100%;
}
@media screen and (min-width: 400px) {
  .attempt-results .score.ubiquity .chart-label {
    padding-right: calc(var(--badge-size) + var(--padding-s2));
  }
}

.results {
  margin-top: var(--padding-m);
  background: var(--color-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l2);
  padding: calc(var(--radius-l1) - var(--padding-card)) 0;
  display: grid;
  grid-gap: 0.5rem;
}
.results .group {
  padding: var(--padding-card);
}
.results .group + .group {
  border-top: 1px solid var(--color-gray-l9);
}
.results .results-group-toggle {
  display: none;
  margin: -2.2rem auto 0;
  position: relative;
}
.results .levels {
  display: grid;
  grid-gap: var(--padding-card);
  position: relative;
}
@media screen and (min-width: 768px) {
  .results .levels {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (max-width: 767px) {
  .results .level.empty {
    display: none;
  }
}
.results .group-label,
.results .level-label {
  display: flex;
  align-items: center;
  margin: 0;
}
.results .group-label .icon,
.results .level-label .icon {
  width: 1em;
  height: 1em;
}
.results .group-label {
  padding: 0 0 0.5em;
  font-size: var(--font-l5);
  line-height: 1em;
}
.results .group-label .icon {
  margin: 0 0.25em 0.175em 0;
}
.results .level-label {
  padding: 0.2em 0.55em 0.2em 0.4em;
  color: var(--color-white);
  margin: 0 auto 0.1em 0;
  font-size: var(--font-l1);
  line-height: 1em;
  width: 100%;
  border-radius: var(--radius-s1);
}
.results .level-label .icon {
  margin: 0 0.25em 0 0;
  fill: var(--color-white);
}
.results .level-label.introductory {
  background: var(--color-introductory);
}
.results .level-label.intermediate {
  background: var(--color-intermediate);
}
.results .level-label.advanced {
  background: var(--color-advanced);
}
.results .results-items {
  text-align: left;
  display: grid;
}
.results .results-item {
  border-top: 1px solid transparent;
  display: inline;
  padding: 0.2rem 0;
  font-size: var(--font-m);
  line-height: var(--line-height-s1);
  margin: 0;
}
.results .results-item:first-child {
  border-top: none;
}
.results .results-item .description-icon {
  display: inline-block;
  margin: -0.25em 0;
  width: 1em;
  height: 1em;
  padding: 0;
  position: relative;
}
.results .results-item .description-icon > span {
  position: absolute;
  width: calc(100% + 0.8em);
  height: calc(100% + 0.8em);
  margin: 0;
  left: -0.4em;
  top: -0.4em;
  padding: 0.4em;
}
.results .results-item .description-icon svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: -0.1em 0 0.1em;
}
.results .introductory .results-item {
  border-color: var(--color-introductory);
}
.results .intermediate .results-item {
  border-color: var(--color-intermediate);
}
.results .advanced .results-item {
  border-color: var(--color-advanced);
}
.results .group.collapsed .levels {
  overflow: hidden;
  max-height: 7rem;
}
.results .group.collapsed .levels:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4rem;
  background: linear-gradient(0deg, white 0, rgba(255, 255, 255, 0.8) 25%, rgba(255, 255, 255, 0) 100%);
  left: 0;
  bottom: 0;
  transition: opacity 100ms;
}
.results .group.collapsed .levels .description-icon {
  display: none;
}
.results .group.collapsed .results-group-toggle {
  display: block;
}
.results .group.collapsed .results-group-toggle:not(:hover):not(:focus) {
  box-shadow: 0 0 10px var(--color-bg), 0 0 20px var(--color-bg), 0 0 40px var(--color-bg);
  background: var(--color-bg);
}

.attempt-recommendations {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
}
.attempt-recommendations > .wrapper {
  padding: calc(var(--padding-m) * 1.5) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  text-align: center;
}
.attempt-recommendations .section-title {
  text-align: center;
  margin-top: 0;
  font-size: var(--font-l8);
}
.attempt-recommendations .cards-list {
  padding: 0;
  display: grid;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
  grid-gap: var(--padding-s2);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (min-width: 600px) {
  .attempt-recommendations .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  }
}
@media (min-width: 980px) {
  .attempt-recommendations .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 1440px) {
  .attempt-recommendations .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

.assessment-certificate {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
}
.assessment-certificate > .wrapper {
  padding: calc(var(--padding-m) * 1.5) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  text-align: center;
}
.assessment-certificate .section-title {
  text-align: center;
  margin-top: 0;
  font-size: var(--font-l8);
}

#overlay-assessment-results-registerorlogin > .box {
  max-width: var(--max-width);
}
@media (max-width: 599px) {
  #overlay-assessment-results-registerorlogin .dialog-buttons {
    flex-direction: column;
  }
  #overlay-assessment-results-registerorlogin .dialog-buttons .button {
    width: 16.25rem;
    margin: 0.125rem auto;
  }
}

#assessment-results-register,
#assessment-results-login {
  width: 80vw;
}
@media (min-width: 600px) {
  #assessment-results-register,
#assessment-results-login {
    width: calc((100% - 0.5rem) / 2);
  }
}

#assessment-results-registerorlogin-close {
  margin: 0.125rem auto;
}

.chart-label {
  margin: 0 0 0.5rem;
  font-size: var(--font-s2);
  line-height: var(--font-s2);
  font-weight: var(--font-normal);
}

.chart-bar-and-score {
  display: grid;
  grid-template-columns: 1fr calc(2.4 * var(--font-l1));
  grid-gap: 0.5rem;
}

.chart-bar {
  background: var(--color-assessment-score-bar);
  position: relative;
  grid-column: 1;
  grid-row: -1;
  height: 0.6rem;
  margin: 0.1rem 0;
  align-self: center;
  border-radius: 1.25rem;
  overflow: hidden;
}
.chart-bar.large {
  height: 1.2rem;
}
.chart-bar div {
  background: var(--color-assessment);
  height: 100%;
}

.chart-score {
  display: block;
  text-align: right;
  margin: 0;
  font-size: var(--font-l1);
  font-weight: var(--font-bold);
  line-height: 1em;
  color: var(--color-assessment);
  align-self: center;
}

.chart-bar-and-score.large {
  grid-gap: 0.5rem;
  grid-template-columns: 1fr calc(2.4 * var(--font-l4));
}
@media screen and (min-width: 768px) {
  .chart-bar-and-score.large {
    grid-template-columns: 1fr calc(2.4 * var(--font-l6));
    grid-gap: 0.75rem;
  }
}
.chart-bar-and-score.large .chart-bar {
  height: 1.25rem;
}
@media screen and (min-width: 768px) {
  .chart-bar-and-score.large .chart-bar {
    height: 1.75rem;
  }
}
.chart-bar-and-score.large .chart-score {
  font-size: var(--font-l4);
  line-height: 1em;
}
@media screen and (min-width: 768px) {
  .chart-bar-and-score.large .chart-score {
    font-size: var(--font-l6);
    line-height: 1em;
  }
}

.assessment-card {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l2);
  padding: 0;
  position: relative;
  width: 100%;
  display: grid;
  transition: var(--transition) box-shadow;
  font-family: var(--font-condensed);
  grid-template-rows: auto 1fr auto;
}
.assessment-card .content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  text-align: center;
  padding: var(--padding-card);
  border-top-left-radius: var(--radius-l2);
  border-top-right-radius: var(--radius-l2);
  min-height: 9rem;
}
.assessment-card .content .assessment-label {
  margin: 0.25rem auto;
  color: var(--color-assessment);
  font-weight: var(--font-bold);
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  grid-row: 1;
  text-transform: uppercase;
  font-family: var(--font-condensed);
}
.assessment-card .content .title {
  margin: 0.25rem auto 0;
  font-size: var(--font-l6);
  line-height: var(--line-height-s2);
}
.assessment-card .content .title a {
  display: block;
  padding: 0.25rem 0.25rem 0.05rem;
  margin: -0.25rem -0.25rem -0.05rem;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.assessment-card .content .title a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.assessment-card .content .title a:hover, .assessment-card .content .title a:focus-visible {
  color: var(--color-assessment-hover);
}
.assessment-card .content .institution-logo {
  display: block;
  width: auto;
  height: 1.75rem;
  margin: 0 auto;
  grid-row: 3;
}
.assessment-card .details {
  background: var(--color-gray-l11);
  text-align: center;
  padding: var(--radius-l2) var(--padding-card);
  border-bottom-left-radius: var(--radius-l2);
  border-bottom-right-radius: var(--radius-l2);
  border-top: 1px solid var(--color-gray-l8);
  min-height: calc(var(--radius-l2) * 2);
}
.assessment-card .details > p:last-child {
  margin-bottom: 0;
}
.assessment-card.hover {
  cursor: pointer;
  box-shadow: var(--shadow-d1);
}
.assessment-card.hover .title a:not(:hover):not(:focus-visible), .assessment-card.hover .title a:hover, .assessment-card.hover .title a:focus-visible,
.assessment-card.hover .assessment-label:not(:hover):not(:focus-visible),
.assessment-card.hover .assessment-label:hover,
.assessment-card.hover .assessment-label:focus-visible,
.assessment-card.hover .chart-score:not(:hover):not(:focus-visible),
.assessment-card.hover .chart-score:hover,
.assessment-card.hover .chart-score:focus-visible {
  color: var(--color-assessment-hover);
}
.assessment-card.hover .chart-bar div {
  background: var(--color-assessment-hover);
}

.page-content.pathways {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l10);
  min-height: 60vh;
}
.page-content.pathways > .wrapper {
  padding: var(--padding-m) var(--padding-m) calc(var(--padding-m) * 4);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.page-content.pathways .cards-list {
  padding: 0;
  display: grid;
  margin: 0 auto;
  align-items: stretch;
  justify-items: center;
  grid-column-gap: var(--padding-s2);
  grid-row-gap: var(--padding-s2);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .page-content.pathways .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}
@media (min-width: 980px) {
  .page-content.pathways .cards-list {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  }
}
@media (min-width: 1640px) {
  .page-content.pathways .cards-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-content.pathways .cards-list > :only-child {
  grid-column: 1/-1;
  max-width: 560px;
}

.pathway-card {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l2);
  padding: 0;
  position: relative;
  width: 100%;
  display: grid;
  transition: var(--transition) box-shadow;
  font-family: var(--font-condensed);
  grid-template-rows: auto 1fr auto;
}
.pathway-card .content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  text-align: center;
  padding: var(--padding-card);
  border-top-left-radius: var(--radius-l2);
  border-top-right-radius: var(--radius-l2);
  min-height: 9rem;
}
.pathway-card .content .pathway-label {
  margin: 0.25rem auto;
  color: var(--color-pathway);
  font-weight: var(--font-bold);
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  grid-row: 1;
  text-transform: uppercase;
}
.pathway-card .content .title {
  margin: 0.25rem auto;
  font-size: var(--font-l6);
  line-height: var(--line-height-s2);
}
.pathway-card .content .title a {
  display: block;
  padding: 0.25rem 0.25rem 0.05rem;
  margin: -0.25rem -0.25rem -0.05rem;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pathway-card .content .title a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.pathway-card .content .title a:hover, .pathway-card .content .title a:focus-visible {
  color: var(--color-pathway-hover);
}
.pathway-card .content .card-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
  column-gap: 0.5rem;
  row-gap: 0;
}
.pathway-card .content .card-tags .group {
  display: inline;
  margin: 2px 0 0;
  font-size: var(--font-s3);
  line-height: var(--line-height-s2);
  width: 100%;
}
.pathway-card .content .card-tags .icon {
  display: inline-block;
  width: calc(1em + 0.2rem);
  height: calc(1em + 0.2rem);
  fill: var(--color-gray-l2);
  padding: 0.1rem;
  margin: 0 -0.1rem -0.2rem;
}
.pathway-card .content .card-tags .group-text {
  display: inline;
  color: var(--color-gray-l2);
  font-size: var(--font-s3);
  line-height: var(--line-height-s2);
  margin: 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  min-width: 0;
}
.pathway-card .content .card-tags .group-text .separator {
  display: inline-block;
  width: 0.5em;
  padding: 0;
  margin: 0;
}
.pathway-card .content .card-tags .group-text a {
  padding: 0.05rem 0.15rem;
  margin: -0.05rem -0.15rem;
}
.pathway-card .content .card-tags .group-text a:not(:hover):not(:focus-visible) {
  color: var(--color-gray-l2);
}
.pathway-card .content .card-tags .group-text.subject > span {
  display: inline;
  white-space: normal;
  overflow: unset;
  text-overflow: unset;
}
.pathway-card .details {
  background: var(--color-gray-l11);
  text-align: center;
  padding: var(--radius-l2) var(--padding-card);
  border-bottom-left-radius: var(--radius-l2);
  border-bottom-right-radius: var(--radius-l2);
  border-top: 1px solid var(--color-gray-l8);
  min-height: calc(var(--radius-l2) * 2);
}
.pathway-card .details > p:last-child {
  margin-bottom: 0;
}
.pathway-card .details .chart-score {
  color: var(--color-pathway);
}
.pathway-card .details .chart-bar {
  background: var(--color-pathway-score-bar);
}
.pathway-card .details .chart-bar div {
  background: var(--color-pathway);
}
.pathway-card.hover {
  cursor: pointer;
  box-shadow: var(--shadow-d1);
}
.pathway-card.hover .title a:not(:hover):not(:focus-visible), .pathway-card.hover .title a:hover, .pathway-card.hover .title a:focus-visible,
.pathway-card.hover .pathway-label:not(:hover):not(:focus-visible),
.pathway-card.hover .pathway-label:hover,
.pathway-card.hover .pathway-label:focus-visible,
.pathway-card.hover .chart-score:not(:hover):not(:focus-visible),
.pathway-card.hover .chart-score:hover,
.pathway-card.hover .chart-score:focus-visible {
  color: var(--color-pathway-hover);
}
.pathway-card.hover .chart-bar div {
  background: var(--color-pathway-hover);
}

.page-header.pathway {
  padding: var(--padding-m) 0;
  color: var(--color-bg);
  background: var(--color-pathway-d1);
  background: linear-gradient(var(--color-pathway-d1) 20%, var(--color-pathway) 80%);
}
.page-header.pathway > .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: var(--padding-s1);
  grid-column-gap: var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
  padding: 0 var(--padding-m);
  border: none;
}
.page-header.pathway > .wrapper::before {
  content: none;
  display: none;
}
@media (min-width: 768px) {
  .page-header.pathway > .wrapper {
    grid-template-columns: 1fr 16rem;
    grid-template-rows: auto auto 1fr;
    grid-row-gap: 1rem;
  }
}
@media (min-width: 880px) {
  .page-header.pathway > .wrapper {
    grid-template-columns: 1fr calc((100% - 2 * var(--padding-m)) / 2.8);
  }
}
@media (min-width: 1440px) {
  .page-header.pathway > .wrapper {
    grid-template-columns: 1fr 27.5rem;
  }
}
.page-header.pathway h1 {
  grid-row: 2;
  grid-column: 1/-1;
  width: auto;
  text-align: left;
  align-self: center;
  margin: 0 2rem 0 0;
  font-size: var(--font-l9);
  line-height: var(--line-height-s2);
  padding: 0;
}
.page-header.pathway .entry-labels {
  grid-row: 1;
  grid-column: 1/-1;
  width: auto;
  text-align: left;
  align-self: center;
  margin: 0;
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  color: var(--color-bg);
  display: flex;
  flex-wrap: wrap;
}
@media (min-width: 1180px) {
  .page-header.pathway .entry-labels {
    grid-column: 1;
  }
}
.page-header.pathway .entry-labels p {
  display: block;
  margin: 0 -1px -1px 0;
  line-height: var(--line-height-s3);
  padding: 0;
  border: 1px solid var(--color-white);
  border-color: var(--color-pathway-d2);
}
.page-header.pathway .entry-labels p a {
  padding: 0.5rem 0.6rem;
  display: block;
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  overflow: hidden;
  margin: 0;
  background: var(--color-pathway);
}
.page-header.pathway .entry-labels p a:not(:hover):not(:focus-visible) {
  color: var(--color-bg);
}
.page-header.pathway .entry-labels p a:hover, .page-header.pathway .entry-labels p a:focus-visible {
  color: var(--color-bg);
  position: relative;
  z-index: 2;
  background: var(--color-pathway-hover);
}
.page-header.pathway .entry-labels p.entry-type {
  font-weight: var(--font-bold);
  text-transform: uppercase;
}
.page-header.pathway .entry-labels p.entry-subtype a {
  display: flex;
}
.page-header.pathway .entry-labels p.entry-subtype img {
  display: inline-flex;
  height: 1.2em;
  width: auto;
  margin: -0.2em 0.35em -0.05em -0.1em;
}
.page-header.pathway .entry-labels p.entry-startdate, .page-header.pathway .entry-labels p.entry-byunparter {
  padding: 0.5rem 0.6rem;
  display: block;
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  overflow: hidden;
}
.page-header.pathway .entry-labels p.entry-startdate {
  font-weight: var(--font-bold);
}
.page-header.pathway .entry-labels p.entry-byunparter {
  background: var(--color-link);
}
.page-header.pathway .entry-labels p:first-child {
  border-top-left-radius: var(--radius-m);
  border-bottom-left-radius: var(--radius-m);
  overflow: hidden;
}
.page-header.pathway .entry-labels p:last-child {
  border-top-right-radius: var(--radius-m);
  border-bottom-right-radius: var(--radius-m);
  overflow: hidden;
}
.page-header.pathway .entry-tools {
  margin-top: var(--padding-s1);
  display: flex;
  flex-wrap: wrap;
}
.page-header.pathway .entry-tools .community-link {
  width: auto;
  padding: 0.25rem 1.2rem;
  font-weight: var(--font-normal);
  margin: 0 -0.25rem;
}
.page-header.pathway .entry-tools .community-link .icon {
  fill: var(--color-white);
  width: 2em;
  height: 2em;
  margin: -0.5em -0.5em -0.25em 0.25em;
}
.page-header.pathway .entry-tools .community-link span span {
  display: block;
  font-size: var(--font-s2);
  text-align: left;
}
.page-header.pathway .entry-tools .button {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.page-header.pathway .entry-media-spacer {
  display: none;
}
@media (min-width: 768px) {
  .page-header.pathway .entry-media-spacer {
    display: block;
    align-self: end;
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    height: 0;
    margin: var(--padding-s3) 0 calc(-1 * var(--padding-m) + 81px);
  }
}
@media (min-width: 1180px) {
  .page-header.pathway .entry-media-spacer {
    grid-row: 1/span 3;
  }
}
@media (min-width: 768px) {
  .page-header.pathway.with-media > .wrapper .entry-media-spacer {
    height: auto;
    aspect-ratio: 1/0.56;
    margin: var(--padding-s3) 0 calc(-1 * var(--padding-m));
  }
}

.entry-details.pathway .box-container {
  grid-row: unset;
  background: var(--color-pathway);
}
@media (min-width: 768px) {
  .entry-details.pathway .box-container {
    background: none;
  }
}
.entry-details.pathway .box {
  grid-column: 2;
  background: var(--color-gray-l2);
  color: var(--color-bg);
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr;
  border-radius: var(--radius-m);
  overflow: hidden;
  padding: 0;
  max-width: 18rem;
}
@media (min-width: 768px) {
  .entry-details.pathway .box {
    display: block;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    overflow: visible;
    max-width: unset;
  }
  .entry-details.pathway .box:not(.with-media):not(.with-link) {
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
  }
}
.entry-details.pathway .box-top {
  width: 100%;
}
@media (min-width: 768px) {
  .entry-details.pathway .box-top {
    grid-column: 1;
    grid-row: unset;
    height: 0;
    position: relative;
  }
}
.entry-details.pathway .box-top > .wrapper {
  border-top-left-radius: var(--radius-m);
  border-top-right-radius: var(--radius-m);
  overflow: hidden;
  background: var(--color-gray);
}
@media (min-width: 768px) {
  .entry-details.pathway .box-top > .wrapper {
    border-top-right-radius: var(--radius-m);
    border-left: none;
    position: absolute;
    height: auto;
    width: 100%;
    bottom: 0;
    left: 0;
  }
}
.entry-details.pathway .media {
  width: 100%;
  aspect-ratio: 1/0.56;
  position: relative;
}
.entry-details.pathway .media img,
.entry-details.pathway .media iframe {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
}
.entry-details.pathway .media .button {
  width: 3rem;
  position: absolute;
  left: 50%;
  bottom: 50%;
  margin: 0 0 -1.5rem -1.5rem;
  padding: 0.25rem;
  box-shadow: var(--shadow-d1);
}
.entry-details.pathway .media .button span {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.entry-details.pathway .media .button svg {
  margin: 0;
}
.entry-details.pathway .action {
  padding: var(--padding-card) calc(var(--padding-card) * 1.5);
  border-bottom: 1px solid var(--color-gray);
  background: var(--color-gray);
}
@media (min-width: 768px) {
  .entry-details.pathway .action {
    grid-column: 1;
    grid-row: 1;
    border-left: none;
  }
}
.entry-details.pathway .action .button {
  width: 100%;
  margin: 0;
}
.entry-details.pathway .action .chart {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-column-gap: 1rem;
  grid-row-gap: 0.5rem;
  padding: 0.2rem 0;
  min-height: 3rem;
}
.entry-details.pathway .action .chart-label {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  font-size: var(--font-l1);
  font-weight: var(--font-normal);
  line-height: 1em;
}
.entry-details.pathway .action .chart-score {
  color: var(--color-bg);
  grid-row: 1;
  grid-column: 2;
}
.entry-details.pathway .action .chart-bar {
  background: var(--color-pathway-l2-score-bar);
  grid-row: 2;
  grid-column: 1/-1;
  height: 1rem;
  margin: 0;
}
.entry-details.pathway .action .chart-bar div {
  background: var(--color-pathway-l2);
}
.entry-details.pathway .box-bottom {
  padding: 0;
  font-family: var(--font-condensed);
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  background: var(--color-gray-l1);
}
@media (min-width: 768px) {
  .entry-details.pathway .box-bottom {
    grid-row: unset;
    border-bottom-left-radius: var(--radius-m);
    border-bottom-right-radius: var(--radius-m);
    overflow: hidden;
  }
}
.entry-details.pathway .box-bottom > dl {
  width: 100%;
  margin: 0;
}
.entry-details.pathway .box-bottom > dl > div {
  border-top: 1px solid var(--color-gray);
  padding: calc(var(--padding-card) * 0.75) calc(var(--padding-card) * 1.5);
  overflow: hidden;
  display: grid;
  grid-template-columns: 5rem 1fr;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.25rem;
}
.entry-details.pathway .box-bottom > dl > div:first-child {
  border-top: none;
}
@media (min-width: 768px) {
  .entry-details.pathway .box-bottom > dl > div:first-child {
    border-top: 1px solid var(--color-gray);
  }
}
@media (min-width: 1280px) {
  .entry-details.pathway .box-bottom > dl > div {
    grid-template-columns: 6rem 1fr;
  }
}
.entry-details.pathway .box-bottom dt {
  grid-column: 1;
  margin: 0;
  padding: 0;
  font-size: var(--font-s3);
  line-height: var(--font-l2);
  font-weight: var(--font-bold);
  opacity: 0.9;
}
.entry-details.pathway .box-bottom dd {
  grid-column: 2;
  margin: 0;
  text-align: left;
  font-size: var(--font-s1);
  line-height: var(--font-l2);
  font-weight: var(--font-normal);
}
.entry-details.pathway .box-bottom dd.level.introductory {
  color: var(--color-introductory-l1);
}
.entry-details.pathway .box-bottom dd.level.intermediate {
  color: var(--color-intermediate-l1);
}
.entry-details.pathway .box-bottom dd.level.advanced {
  color: var(--color-advanced-l1);
}
.entry-details.pathway .summary {
  padding-top: calc(var(--padding-m) * 1.5);
  grid-row: 2;
  grid-column: 1;
  max-width: 780px;
  font-size: var(--font-l4);
}
@media (min-width: 768px) {
  .entry-details.pathway .summary {
    grid-row: 1;
    padding-top: var(--padding-m);
  }
}
.entry-details.pathway .summary > :last-child {
  margin-bottom: 0;
}
.entry-details.pathway .box-container + .entry-topics {
  padding-top: calc(var(--padding-m) * 1.5);
}
@media (min-width: 768px) {
  .entry-details.pathway .box-container + .entry-topics {
    padding-top: var(--padding-m);
  }
}
@media (min-width: 768px) {
  .entry-details.pathway:not(.with-media) .box-container {
    margin-top: calc(-1 * (3rem + var(--padding-card) * 2 + 2px));
    border-top-left-radius: var(--radius-m);
    border-top-right-radius: var(--radius-m);
    overflow: hidden;
  }
}
.entry-details.pathway .entry-topics {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--padding-s1);
}
.entry-details.pathway .entry-topics h2 {
  width: 100%;
  margin: 0 0 var(--padding-s1);
  font-size: var(--font-l3);
}
.entry-details.pathway .entry-topics > div {
  font-family: var(--font-condensed);
}
.entry-details.pathway .entry-topics dl {
  margin: 0;
}
.entry-details.pathway .entry-topics dt {
  font-size: var(--font-l1);
  line-height: var(--line-height-s2);
  margin: 0 0 0.75em;
}
.entry-details.pathway .entry-topics a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.entry-details.pathway .entry-topics .sdgs dd,
.entry-details.pathway .entry-topics .mental-models dd,
.entry-details.pathway .entry-topics .statistics dd {
  padding: 0.75rem 0 0;
  min-height: 2.75rem;
}
@media (min-width: 980px) {
  .entry-details.pathway .entry-topics .sdgs dd,
.entry-details.pathway .entry-topics .mental-models dd,
.entry-details.pathway .entry-topics .statistics dd {
    padding: 1.1rem 0 0;
    min-height: 3.5rem;
  }
}
.entry-details.pathway .entry-topics .sdgs dd > span,
.entry-details.pathway .entry-topics .mental-models dd > span,
.entry-details.pathway .entry-topics .statistics dd > span {
  display: inline-block;
  width: 100%;
  padding: 0 0 0 2.85rem;
  position: relative;
}
@media (min-width: 980px) {
  .entry-details.pathway .entry-topics .sdgs dd > span,
.entry-details.pathway .entry-topics .mental-models dd > span,
.entry-details.pathway .entry-topics .statistics dd > span {
    padding: 0 0 0 3.5rem;
  }
}
.entry-details.pathway .entry-topics .sdgs dd > span > span:not(:hover):not(:focus-visible),
.entry-details.pathway .entry-topics .mental-models dd > span > span:not(:hover):not(:focus-visible),
.entry-details.pathway .entry-topics .statistics dd > span > span:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.entry-details.pathway .entry-topics .sdgs dd > span > span > .icon,
.entry-details.pathway .entry-topics .mental-models dd > span > span > .icon,
.entry-details.pathway .entry-topics .statistics dd > span > span > .icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.25rem;
  height: 1em;
  margin: 0;
  align-self: start;
}
@media (min-width: 980px) {
  .entry-details.pathway .entry-topics .sdgs dd > span > span > .icon,
.entry-details.pathway .entry-topics .mental-models dd > span > span > .icon,
.entry-details.pathway .entry-topics .statistics dd > span > span > .icon {
    width: 3rem;
  }
}
.entry-details.pathway .entry-topics .sdgs dd > span > span > .icon svg,
.entry-details.pathway .entry-topics .mental-models dd > span > span > .icon svg,
.entry-details.pathway .entry-topics .statistics dd > span > span > .icon svg {
  width: 2.75rem;
  height: 2.75rem;
  margin: calc((2.75rem - 1em) / 2 * -1) -10%;
}
@media (min-width: 980px) {
  .entry-details.pathway .entry-topics .sdgs dd > span > span > .icon svg,
.entry-details.pathway .entry-topics .mental-models dd > span > span > .icon svg,
.entry-details.pathway .entry-topics .statistics dd > span > span > .icon svg {
    width: 3.5rem;
    height: 3.5rem;
    margin: calc((3.5rem - 1em) / 2 * -1) -10%;
  }
}
.entry-details.pathway .entry-topics .sdgs dd > span > span > span,
.entry-details.pathway .entry-topics .mental-models dd > span > span > span,
.entry-details.pathway .entry-topics .statistics dd > span > span > span {
  display: inline;
}
.entry-details.pathway .entry-topics .sdgs dd .description-icon,
.entry-details.pathway .entry-topics .mental-models dd .description-icon,
.entry-details.pathway .entry-topics .statistics dd .description-icon {
  display: inline-block;
  margin: -0.25em 0;
  width: 1em;
  height: 1em;
  padding: 0;
  position: relative;
}
.entry-details.pathway .entry-topics .sdgs dd .description-icon > span,
.entry-details.pathway .entry-topics .mental-models dd .description-icon > span,
.entry-details.pathway .entry-topics .statistics dd .description-icon > span {
  position: absolute;
  width: calc(100% + 0.8em);
  height: calc(100% + 0.8em);
  margin: 0;
  left: -0.4em;
  top: -0.4em;
  padding: 0.4em;
}
.entry-details.pathway .entry-topics .sdgs dd .description-icon svg,
.entry-details.pathway .entry-topics .mental-models dd .description-icon svg,
.entry-details.pathway .entry-topics .statistics dd .description-icon svg {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin: 0;
}
.entry-details.pathway .entry-topics .sdgs dt + dd,
.entry-details.pathway .entry-topics .mental-models dt + dd,
.entry-details.pathway .entry-topics .statistics dt + dd {
  margin-top: 1rem;
}
.entry-details.pathway .entry-topics .other > div + div {
  margin-top: 1rem;
}
@media (min-width: 500px) {
  .entry-details.pathway .entry-topics {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 500px) {
  .entry-details.pathway .entry-topics.with-mental-models .other {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--padding-s1);
  }
  .entry-details.pathway .entry-topics.with-mental-models .other > div + div {
    margin-top: 0;
  }
}
@media (min-width: 640px) {
  .entry-details.pathway .entry-topics.with-mental-models {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .entry-details.pathway .entry-topics.with-mental-models .other {
    grid-column: unset;
    display: block;
  }
  .entry-details.pathway .entry-topics.with-mental-models .other > div + div {
    margin-top: 1rem;
  }
}
@media (min-width: 768px) {
  .entry-details.pathway .entry-topics.with-mental-models {
    grid-template-columns: 1fr 1fr;
  }
  .entry-details.pathway .entry-topics.with-mental-models .other {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--padding-s1);
  }
  .entry-details.pathway .entry-topics.with-mental-models .other > div + div {
    margin-top: 0;
  }
}
@media (min-width: 1080px) {
  .entry-details.pathway .entry-topics.with-mental-models {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .entry-details.pathway .entry-topics.with-mental-models .other {
    grid-column: unset;
    display: block;
  }
  .entry-details.pathway .entry-topics.with-mental-models .other > div + div {
    margin-top: 1rem;
  }
}

.entry-content.pathway {
  background: var(--color-gray-l10);
  min-height: 50vh;
}
.entry-content.pathway .entry-contentblock > .wrapper > :first-child,
.entry-content.pathway .module > .wrapper > :first-child,
.entry-content.pathway .assessment > .wrapper > :first-child,
.entry-content.pathway .actions > .wrapper > :first-child {
  margin-top: 0;
}
.entry-content.pathway .entry-contentblock:last-child > .wrapper,
.entry-content.pathway .module:last-child > .wrapper,
.entry-content.pathway .assessment:last-child > .wrapper,
.entry-content.pathway .actions:last-child > .wrapper {
  padding-bottom: calc(var(--padding-m) * 3);
}
.entry-content.pathway .entry-contentblock {
  background: var(--color-white);
  border-top: 1px solid var(--color-gray-l8);
}
.entry-content.pathway .entry-contentblock > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.entry-content.pathway .entry-contentblock h2 {
  font-size: var(--font-l9);
  text-align: left;
}
.entry-content.pathway .entry-contentblock:last-child > .wrapper {
  padding-bottom: calc(var(--padding-m) * 4);
}
.entry-content.pathway .entry-contentblock figure {
  margin: 2em 0;
  padding: 0;
}
.entry-content.pathway .entry-contentblock figure iframe {
  width: 100% !important;
  height: unset !important;
  aspect-ratio: 1/0.56 !important;
  margin: 2em 0;
}
@media (min-width: 1240px) {
  .entry-content.pathway .entry-contentblock figure iframe {
    width: calc(100% + 12rem) !important;
    margin-left: -6rem;
  }
}
@media (min-width: 1440px) {
  .entry-content.pathway .entry-contentblock figure iframe {
    width: calc(100% + 24rem) !important;
    margin-left: -12rem;
  }
}
.entry-content.pathway .entry-contentblock img {
  max-width: 100%;
  height: auto;
}
.entry-content.pathway .entry-contentblock .collapsible-block-toggle {
  margin-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.entry-content.pathway .entry-contentblock .collapsible-block-toggle[aria-expanded=false] {
  margin-top: 0;
}
.entry-content.pathway .module {
  border-top: 1px solid var(--color-gray-l8);
}
.entry-content.pathway .module > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.entry-content.pathway .module > .wrapper > :last-child {
  margin-bottom: 0;
}
.entry-content.pathway .module > .wrapper > h2 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.entry-content.pathway .module .activities {
  margin-top: 2rem;
}
.entry-content.pathway .module .activities h2 {
  margin-top: 0;
}
.entry-content.pathway .module .activities:not(.enrolled) {
  padding: 0;
  display: grid;
  align-items: stretch;
  justify-items: center;
  grid-column-gap: var(--padding-s2);
  grid-row-gap: var(--padding-s2);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (min-width: 600px) {
  .entry-content.pathway .module .activities:not(.enrolled) {
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  }
}
@media (min-width: 980px) {
  .entry-content.pathway .module .activities:not(.enrolled) {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
@media (min-width: 1440px) {
  .entry-content.pathway .module .activities:not(.enrolled) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
.entry-content.pathway .module .activities:not(.enrolled) > * {
  min-height: 17rem;
}
.entry-content.pathway .module .activities.enrolled {
  display: flex;
  flex-direction: column;
  gap: var(--padding-s2);
  max-width: 300px;
}
@media (min-width: 640px) {
  .entry-content.pathway .module .activities.enrolled {
    max-width: unset;
  }
}
.entry-content.pathway .module .activities .assessment-card {
  border-radius: var(--radius-l1);
}
.entry-content.pathway .module:first-child .top > .wrapper {
  padding-top: 0;
}
.entry-content.pathway .module:last-child .top > .wrapper, .entry-content.pathway .module:last-child .activities > .wrapper {
  padding-bottom: calc(var(--padding-m) * 3);
}
.entry-content.pathway .module:last-child .top + .activities {
  margin-top: calc(1rem - var(--padding-m) * 3);
}
.entry-content.pathway .entry-contentblock + .module {
  border-top: 1px solid var(--color-gray-l8);
}
.entry-content.pathway .assessment {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l9);
}
.entry-content.pathway .assessment > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.entry-content.pathway .actions {
  border-top: 1px solid var(--color-gray-l8);
  background: var(--color-gray-l9);
}
.entry-content.pathway .actions > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.entry-content.pathway .actions .block-bottom {
  margin-top: 0;
}

.pathway-activity-card,
.pathway-assessment-card {
  background: var(--color-bg);
  box-shadow: var(--shadow);
  border-radius: var(--radius-l1);
  padding: 0;
  position: relative;
  width: 100%;
  display: grid;
  transition: var(--transition) box-shadow;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "image" "content" "footer" "tools";
  min-height: 18rem;
}
@media (min-width: 640px) {
  .pathway-activity-card,
.pathway-assessment-card {
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "image content" "image footer" "tools tools";
    min-height: 9rem;
  }
}
.pathway-activity-card .content,
.pathway-assessment-card .content {
  font-family: var(--font-condensed);
}
.pathway-activity-card .pathway-info,
.pathway-assessment-card .pathway-info {
  padding: var(--padding-card);
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--color-gray-l11);
  border-bottom-left-radius: var(--radius-l1);
  border-bottom-right-radius: var(--radius-l1);
  border-top: 1px solid var(--color-gray-l8);
  grid-area: tools;
  gap: 1rem;
}
@media (min-width: 640px) {
  .pathway-activity-card .pathway-info,
.pathway-assessment-card .pathway-info {
    flex-direction: row;
  }
}
.pathway-activity-card .pathway-info .description > :last-child,
.pathway-assessment-card .pathway-info .description > :last-child {
  margin-bottom: 0;
}
.pathway-activity-card .pathway-tools,
.pathway-assessment-card .pathway-tools {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  column-gap: 10rem;
  row-gap: 0.5rem;
  padding: 0.2rem 0;
  min-width: 12rem;
}
.pathway-activity-card .pathway-tools .button,
.pathway-assessment-card .pathway-tools .button {
  padding-left: 1rem;
  padding-right: 1rem;
}

.pathway-activity-card .image {
  grid-area: image;
  width: 100%;
  overflow: hidden;
  position: relative;
  color: transparent;
  background: var(--color-gray-l2);
  aspect-ratio: 1/0.56;
  border-top-left-radius: var(--radius-l1);
  border-top-right-radius: var(--radius-l1);
}
@media (min-width: 640px) {
  .pathway-activity-card .image {
    margin: var(--padding-card) 0 var(--padding-card) var(--padding-card);
    border-radius: var(--radius-s1);
    width: 12rem;
  }
}
.pathway-activity-card .image img,
.pathway-activity-card .image svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  transition: var(--transition) opacity;
}
.pathway-activity-card .image.no-image {
  background: var(--color-gray-l7);
}
@media (min-width: 640px) {
  .pathway-activity-card.podcast-card .image {
    aspect-ratio: 1;
    width: 9.75rem;
  }
  .pathway-activity-card.podcast-card .image img {
    object-fit: cover;
  }
}
.pathway-activity-card .content {
  grid-area: content;
  position: relative;
  text-align: left;
  padding: calc(var(--padding-card) + 0.72rem) var(--padding-card) var(--padding-card);
}
@media (min-width: 640px) {
  .pathway-activity-card .content {
    padding-top: calc(var(--padding-card) + 2rem);
  }
}
.pathway-activity-card .content .title {
  margin: 0;
  font-size: var(--font-l4);
  line-height: var(--line-height-s2);
}
.pathway-activity-card .content .title a {
  display: block;
  padding: 0.25rem 0.25rem 0.05rem;
  margin: -0.25rem -0.25rem -0.05rem;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pathway-activity-card .content .title a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.pathway-activity-card .content .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  font-size: var(--font-s2);
  color: var(--color-bg);
}
@media (min-width: 640px) {
  .pathway-activity-card .content .labels {
    top: var(--padding-card);
    left: var(--padding-card);
    height: auto;
    width: auto;
  }
}
.pathway-activity-card .content .labels .wrapper1 {
  position: relative;
}
.pathway-activity-card .content .labels .wrapper2 {
  list-style: none;
  margin: 0;
  position: absolute;
  bottom: -0.72rem;
  left: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  margin-right: var(--padding-card);
  padding: 0.1rem 0.3rem 0.1rem var(--padding-card);
  border-top-right-radius: var(--radius-s1);
  border-bottom-right-radius: var(--radius-s1);
}
.pathway-activity-card .content .labels .wrapper2 li {
  padding-left: 0;
}
.pathway-activity-card .content .labels .wrapper2 li::before {
  content: none;
  display: none;
}
@media (min-width: 640px) {
  .pathway-activity-card .content .labels .wrapper2 {
    position: unset;
    left: unset;
    border-radius: var(--radius-s1);
    padding: 0.1rem 0.3rem;
  }
}
.pathway-activity-card .content .labels p {
  display: block;
  margin: 0;
  font-size: var(--font-s4);
  line-height: var(--font-s4);
  padding: 0.2rem;
  text-align: left;
}
.pathway-activity-card .content .labels p.entry-type {
  font-weight: var(--font-bold);
  text-transform: uppercase;
  margin-left: -0.2rem;
}
@media (min-width: 640px) {
  .pathway-activity-card .content .labels p.entry-type {
    margin-left: 0;
  }
}
.pathway-activity-card .content .labels p.entry-subtype {
  display: flex;
}
.pathway-activity-card .content .labels p.entry-subtype img {
  display: block;
  height: 1em;
  width: auto;
  margin: 0 0.35em 0 0;
}
.pathway-activity-card .content .labels p.entry-startdate {
  font-weight: var(--font-bold);
}
.pathway-activity-card .content .labels p + p {
  margin-left: -0.1rem;
}
.pathway-activity-card .content .info {
  display: grid;
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.2em 0 0;
}
.pathway-activity-card .content .info .date {
  display: inline;
  color: var(--color-gray-l3);
  font-size: var(--font-s3);
  line-height: var(--line-height-s3);
  margin: 0.45rem 0 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pathway-activity-card .content .info .offered-by {
  display: inline;
  color: var(--color-gray-l2);
  font-size: var(--font-s2);
  line-height: var(--line-height-s2);
  margin: 0.15rem 0 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pathway-activity-card.course.hover .title a, .pathway-activity-card.course.hover .title a:not(:hover), .pathway-activity-card.course.hover .title a:not(:focus-visible), .pathway-activity-card.course.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.course .title a:hover,
.pathway-activity-card.course .title a:focus-visible {
  color: var(--color-course-hover);
}
.pathway-activity-card.course .labels .wrapper2 {
  background: var(--color-course);
}
.pathway-activity-card.course .labels p,
.pathway-activity-card.course .labels a {
  background: var(--color-course);
}
.pathway-activity-card.course .labels a:hover, .pathway-activity-card.course .labels a:focus-visible {
  background: var(--color-course-hover);
}
.pathway-activity-card.microlearning.hover .title a, .pathway-activity-card.microlearning.hover .title a:not(:hover), .pathway-activity-card.microlearning.hover .title a:not(:focus-visible), .pathway-activity-card.microlearning.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.microlearning .title a:hover,
.pathway-activity-card.microlearning .title a:focus-visible, .pathway-activity-card.article-card.hover .title a, .pathway-activity-card.article-card.hover .title a:not(:hover), .pathway-activity-card.article-card.hover .title a:not(:focus-visible), .pathway-activity-card.article-card.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.article-card .title a:hover,
.pathway-activity-card.article-card .title a:focus-visible, .pathway-activity-card.podcast-card.hover .title a, .pathway-activity-card.podcast-card.hover .title a:not(:hover), .pathway-activity-card.podcast-card.hover .title a:not(:focus-visible), .pathway-activity-card.podcast-card.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.podcast-card .title a:hover,
.pathway-activity-card.podcast-card .title a:focus-visible {
  color: var(--color-microlearning-hover);
}
.pathway-activity-card.microlearning .labels .wrapper2, .pathway-activity-card.article-card .labels .wrapper2, .pathway-activity-card.podcast-card .labels .wrapper2 {
  background: var(--color-microlearning);
}
.pathway-activity-card.microlearning .labels p,
.pathway-activity-card.microlearning .labels a, .pathway-activity-card.article-card .labels p,
.pathway-activity-card.article-card .labels a, .pathway-activity-card.podcast-card .labels p,
.pathway-activity-card.podcast-card .labels a {
  background: var(--color-microlearning);
}
.pathway-activity-card.microlearning .labels a:hover, .pathway-activity-card.microlearning .labels a:focus-visible, .pathway-activity-card.article-card .labels a:hover, .pathway-activity-card.article-card .labels a:focus-visible, .pathway-activity-card.podcast-card .labels a:hover, .pathway-activity-card.podcast-card .labels a:focus-visible {
  background: var(--color-microlearning-hover);
}
.pathway-activity-card.event.hover .title a, .pathway-activity-card.event.hover .title a:not(:hover), .pathway-activity-card.event.hover .title a:not(:focus-visible), .pathway-activity-card.event.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.event .title a:hover,
.pathway-activity-card.event .title a:focus-visible {
  color: var(--color-event-hover);
}
.pathway-activity-card.event .labels .wrapper2 {
  background: var(--color-event);
}
.pathway-activity-card.event .labels p,
.pathway-activity-card.event .labels a {
  background: var(--color-event);
}
.pathway-activity-card.event .labels a:hover, .pathway-activity-card.event .labels a:focus-visible {
  background: var(--color-event-hover);
}
.pathway-activity-card.resource.hover .title a, .pathway-activity-card.resource.hover .title a:not(:hover), .pathway-activity-card.resource.hover .title a:not(:focus-visible), .pathway-activity-card.resource.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.resource .title a:hover,
.pathway-activity-card.resource .title a:focus-visible {
  color: var(--color-resource-hover);
}
.pathway-activity-card.resource .labels .wrapper2 {
  background: var(--color-resource);
}
.pathway-activity-card.resource .labels p,
.pathway-activity-card.resource .labels a {
  background: var(--color-resource);
}
.pathway-activity-card.resource .labels a:hover, .pathway-activity-card.resource .labels a:focus-visible {
  background: var(--color-resource-hover);
}
.pathway-activity-card.archived.hover .title a, .pathway-activity-card.archived.hover .title a:not(:hover), .pathway-activity-card.archived.hover .title a:not(:focus-visible), .pathway-activity-card.archived.hover .title a:not(:hover):not(:focus-visible),
.pathway-activity-card.archived .title a:hover,
.pathway-activity-card.archived .title a:focus-visible {
  color: var(--color-gray-l4);
}
.pathway-activity-card.archived .image {
  filter: grayscale(1);
}
.pathway-activity-card.archived .labels .wrapper2 {
  background: var(--color-gray-l3);
}
.pathway-activity-card.archived .labels p,
.pathway-activity-card.archived .labels a {
  background: var(--color-gray-l3);
}
.pathway-activity-card.archived .labels a:hover, .pathway-activity-card.archived .labels a:focus-visible {
  background: var(--color-gray-l4);
}
.pathway-activity-card .footer {
  grid-area: footer;
  position: relative;
  text-align: left;
  padding: 0 var(--padding-card) var(--padding-card);
}
.pathway-activity-card .footer .card-tags {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.pathway-activity-card .footer .card-tags .group {
  display: grid;
  grid-template-columns: 1em 1fr;
  grid-gap: 0.4em;
  margin: 2px 0 0;
  width: 100%;
  max-width: 100%;
  font-size: var(--font-s3);
}
.pathway-activity-card .footer .card-tags .group.level.introductory .group-text {
  color: var(--color-introductory);
}
.pathway-activity-card .footer .card-tags .group.level.introductory .icon {
  fill: var(--color-introductory);
}
.pathway-activity-card .footer .card-tags .group.level.intermediate .group-text {
  color: var(--color-intermediate);
}
.pathway-activity-card .footer .card-tags .group.level.intermediate .icon {
  fill: var(--color-intermediate);
}
.pathway-activity-card .footer .card-tags .group.level.advanced .group-text {
  color: var(--color-advanced);
}
.pathway-activity-card .footer .card-tags .group.level.advanced .icon {
  fill: var(--color-advanced);
}
.pathway-activity-card .footer .card-tags .icon {
  display: block;
  width: calc(1em + 0.2rem);
  height: calc(1em + 0.2rem);
  fill: var(--color-gray-l2);
  padding: 0.1rem;
  margin: -0.1rem;
}
.pathway-activity-card .footer .card-tags .group-text {
  display: flex;
  flex-wrap: wrap;
  color: var(--color-gray-l2);
  font-size: var(--font-s3);
  line-height: var(--line-height-s2);
  margin: 0;
  text-align: left;
  font-family: var(--font-condensed);
  word-spacing: -0.075em;
  min-width: 0;
}
.pathway-activity-card .footer .card-tags .group-text > span {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-spacing: -0.075em;
  padding: 0.35rem;
  margin: -0.35rem;
}
.pathway-activity-card .footer .card-tags .group-text .separator {
  display: inline-block;
  width: 0.5em;
  padding: 0;
  margin: 0;
}
.pathway-activity-card .footer .card-tags .group-text a {
  padding: 0.05rem 0.15rem;
  margin: -0.05rem -0.15rem;
}
.pathway-activity-card .footer .card-tags .group-text a:not(:hover):not(:focus-visible) {
  color: var(--color-gray-l2);
}
.pathway-activity-card .footer .card-tags .group-text.subject > span {
  display: inline;
  white-space: normal;
  overflow: unset;
  text-overflow: unset;
}
.pathway-activity-card.hover {
  cursor: pointer;
  box-shadow: var(--shadow-d2);
}
.pathway-activity-card.hover .image img,
.pathway-activity-card.hover .image svg {
  opacity: 0.9;
}
.pathway-activity-card.hover .image.no-image {
  background: var(--color-gray-l8);
}

.pathway-assessment-card {
  grid-template-areas: "content" "content" "content" "tools";
}
@media (min-width: 640px) {
  .pathway-assessment-card {
    grid-template-areas: "content content" "content content" "tools tools";
  }
}
.pathway-assessment-card .content {
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  text-align: left;
  padding: var(--padding-card);
  background: var(--color-pathway);
  border-top-left-radius: var(--radius-l1);
  border-top-right-radius: var(--radius-l1);
  min-height: 9rem;
  grid-area: content;
}
.pathway-assessment-card .content .assessment-label {
  margin: 0.25rem 0;
  color: var(--color-assessment);
  font-weight: var(--font-bold);
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  grid-row: 1;
  text-transform: uppercase;
  font-family: var(--font-condensed);
}
.pathway-assessment-card .content .title {
  margin: 0.25rem 0 0;
  font-size: var(--font-l6);
  line-height: var(--line-height-s2);
}
.pathway-assessment-card .content .title a {
  display: block;
  padding: 0.25rem 0.25rem 0.05rem;
  margin: -0.25rem -0.25rem -0.05rem;
  hyphens: auto;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pathway-assessment-card .content .title a:not(:hover):not(:focus-visible) {
  color: var(--color-bg);
}
.pathway-assessment-card .content .title a:hover, .pathway-assessment-card .content .title a:focus-visible {
  color: var(--color-assessment-hover);
}
.pathway-assessment-card .content .institution-logo {
  display: block;
  width: auto;
  height: 1.75rem;
  margin: 0;
  grid-row: 3;
}
.pathway-assessment-card.hover {
  cursor: pointer;
  box-shadow: var(--shadow-d2);
}
.pathway-assessment-card.hover .content {
  background: var(--color-pathway-l1);
}
.pathway-assessment-card.hover .title a:not(:hover):not(:focus-visible), .pathway-assessment-card.hover .title a:hover, .pathway-assessment-card.hover .title a:focus-visible,
.pathway-assessment-card.hover .assessment-label:not(:hover):not(:focus-visible),
.pathway-assessment-card.hover .assessment-label:hover,
.pathway-assessment-card.hover .assessment-label:focus-visible,
.pathway-assessment-card.hover .chart-score:not(:hover):not(:focus-visible),
.pathway-assessment-card.hover .chart-score:hover,
.pathway-assessment-card.hover .chart-score:focus-visible {
  color: var(--color-bg);
}

.pathway-tool,
.assessment-status {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  border: transparent;
  min-width: unset;
  min-height: unset;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  gap: 0.5rem;
  position: relative;
  margin: 0.35rem;
}
.pathway-tool span,
.assessment-status span {
  position: absolute;
  right: 2rem;
  width: max-content;
  text-align: right;
  inline-size: max-content;
  font-size: var(--font-s2);
}
.pathway-tool .icon,
.assessment-status .icon {
  fill: var(--color-gray);
}
.pathway-tool .clip,
.pathway-tool .circle,
.pathway-tool .circle-border,
.pathway-tool .check,
.assessment-status .clip,
.assessment-status .circle,
.assessment-status .circle-border,
.assessment-status .check {
  transition: all 100ms;
}
.pathway-tool.hidden,
.assessment-status.hidden {
  display: none;
}
.pathway-tool.mark-as-complete .icon,
.assessment-status.mark-as-complete .icon {
  width: 44px;
  height: 44px;
  margin: -12px;
}
.pathway-tool.mark-as-complete .circle,
.assessment-status.mark-as-complete .circle {
  opacity: 0;
}
.pathway-tool.mark-as-not-completea:not([disabled]):not(.disabled):not(:hover):not(:focus-visible) span,
.assessment-status.mark-as-not-completea:not([disabled]):not(.disabled):not(:hover):not(:focus-visible) span {
  color: var(--color-complete);
}
.pathway-tool.mark-as-not-complete .icon,
.assessment-status.mark-as-not-complete .icon {
  width: 50px;
  height: 50px;
  margin: -15px;
}
.pathway-tool.mark-as-not-complete .circle,
.assessment-status.mark-as-not-complete .circle {
  fill: var(--color-complete);
}
.pathway-tool.mark-as-not-complete .check,
.pathway-tool.mark-as-not-complete .circle-border,
.assessment-status.mark-as-not-complete .check,
.assessment-status.mark-as-not-complete .circle-border {
  fill: var(--color-white);
}

a.pathway-tool:not([disabled]):not(.disabled):hover, a.pathway-tool:not([disabled]):not(.disabled):focus-visible,
a.assessment-status:not([disabled]):not(.disabled):hover,
a.assessment-status:not([disabled]):not(.disabled):focus-visible,
button.pathway-tool:not([disabled]):not(.disabled):hover,
button.pathway-tool:not([disabled]):not(.disabled):focus-visible,
button.assessment-status:not([disabled]):not(.disabled):hover,
button.assessment-status:not([disabled]):not(.disabled):focus-visible {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--color-link-hover);
}
a.pathway-tool:not([disabled]):not(.disabled):hover .icon, a.pathway-tool:not([disabled]):not(.disabled):focus-visible .icon,
a.assessment-status:not([disabled]):not(.disabled):hover .icon,
a.assessment-status:not([disabled]):not(.disabled):focus-visible .icon,
button.pathway-tool:not([disabled]):not(.disabled):hover .icon,
button.pathway-tool:not([disabled]):not(.disabled):focus-visible .icon,
button.assessment-status:not([disabled]):not(.disabled):hover .icon,
button.assessment-status:not([disabled]):not(.disabled):focus-visible .icon {
  fill: var(--color-link-hover);
}
a.pathway-tool:not([disabled]):not(.disabled):hover.mark-as-not-complete .circle, a.pathway-tool:not([disabled]):not(.disabled):focus-visible.mark-as-not-complete .circle,
a.assessment-status:not([disabled]):not(.disabled):hover.mark-as-not-complete .circle,
a.assessment-status:not([disabled]):not(.disabled):focus-visible.mark-as-not-complete .circle,
button.pathway-tool:not([disabled]):not(.disabled):hover.mark-as-not-complete .circle,
button.pathway-tool:not([disabled]):not(.disabled):focus-visible.mark-as-not-complete .circle,
button.assessment-status:not([disabled]):not(.disabled):hover.mark-as-not-complete .circle,
button.assessment-status:not([disabled]):not(.disabled):focus-visible.mark-as-not-complete .circle {
  fill: var(--color-link-hover);
}
a.pathway-tool:not([disabled]):not(.disabled):hover.mark-as-complete .check,
a.pathway-tool:not([disabled]):not(.disabled):hover.mark-as-complete .circle-border, a.pathway-tool:not([disabled]):not(.disabled):focus-visible.mark-as-complete .check,
a.pathway-tool:not([disabled]):not(.disabled):focus-visible.mark-as-complete .circle-border,
a.assessment-status:not([disabled]):not(.disabled):hover.mark-as-complete .check,
a.assessment-status:not([disabled]):not(.disabled):hover.mark-as-complete .circle-border,
a.assessment-status:not([disabled]):not(.disabled):focus-visible.mark-as-complete .check,
a.assessment-status:not([disabled]):not(.disabled):focus-visible.mark-as-complete .circle-border,
button.pathway-tool:not([disabled]):not(.disabled):hover.mark-as-complete .check,
button.pathway-tool:not([disabled]):not(.disabled):hover.mark-as-complete .circle-border,
button.pathway-tool:not([disabled]):not(.disabled):focus-visible.mark-as-complete .check,
button.pathway-tool:not([disabled]):not(.disabled):focus-visible.mark-as-complete .circle-border,
button.assessment-status:not([disabled]):not(.disabled):hover.mark-as-complete .check,
button.assessment-status:not([disabled]):not(.disabled):hover.mark-as-complete .circle-border,
button.assessment-status:not([disabled]):not(.disabled):focus-visible.mark-as-complete .check,
button.assessment-status:not([disabled]):not(.disabled):focus-visible.mark-as-complete .circle-border {
  fill: var(--color-link-hover);
}

.block > .wrapper {
  padding: calc(3rem + var(--padding-m)) var(--padding-m);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l3);
}
.block > .wrapper h2 {
  font-size: var(--font-l8);
  margin: 0 0 2.5rem;
  text-align: center;
}
.block > .wrapper h3 {
  font-size: var(--font-l8);
  margin: 0 0 2.5rem;
  text-align: center;
}
.block > .wrapper > .glide {
  margin: 0 calc(var(--padding-s2) * 0.5);
  width: calc(100% - var(--padding-s2));
}
.block .box {
  border-radius: var(--radius-l2);
}
.block .box > p {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}
.block:last-child > .wrapper {
  padding-bottom: calc(10rem + var(--padding-m));
}

.block .glide.sdgs ul {
  list-style: none;
  margin: 0;
}
.block .glide.sdgs ul li {
  padding-left: 0;
}
.block .glide.sdgs ul li::before {
  content: none;
  display: none;
}
.block .glide.sdgs ul > li {
  padding: 0 calc(var(--padding-m) * 0.25);
}
.block .glide.sdgs ul a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}
.block .glide.sdgs ul a svg {
  display: block;
  width: calc(2rem + var(--padding-m));
  height: calc(2rem + var(--padding-m));
  margin: 0 0 0.2rem;
}
.block .glide.sdgs ul .title,
.block .glide.sdgs ul .description {
  display: block;
  line-height: var(--line-height-s2);
}
.block .glide.sdgs ul .title {
  font-size: var(--font-l2);
  font-weight: var(--font-bold);
}
.block .glide.sdgs ul .description {
  font-size: var(--font-s2);
  font-family: var(--font-condensed);
}
.block .glide.sdgs ul a {
  background: var(--color-white);
}
.block .glide.sdgs ul a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.block .glide.sdgs ul a:hover .icon, .block .glide.sdgs ul a:focus-visible .icon {
  opacity: 0.85;
}
.block.bg-image .glide.sdgs ul {
  padding: var(--padding-m) calc(var(--padding-m) * 0.75);
  background: var(--color-white);
  border-radius: var(--radius-l2);
}
.block .general-sdgs,
.block .specialized-sdgs,
.block .community-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  margin: 2rem -0.5rem 0;
}
.block .general-sdgs li,
.block .specialized-sdgs li,
.block .community-tags li {
  padding-left: 0;
}
.block .general-sdgs li::before,
.block .specialized-sdgs li::before,
.block .community-tags li::before {
  content: none;
  display: none;
}
.block .general-sdgs li,
.block .specialized-sdgs li,
.block .community-tags li {
  padding: 0.5rem 0.5rem;
  text-align: center;
}
.block .general-sdgs svg,
.block .specialized-sdgs svg,
.block .community-tags svg {
  display: block;
  margin: 0 auto;
}
.block .general-sdgs a:not(:hover):not(:focus-visible),
.block .specialized-sdgs a:not(:hover):not(:focus-visible),
.block .community-tags a:not(:hover):not(:focus-visible) {
  color: var(--color-gray);
}
.block .general-sdgs a:hover, .block .general-sdgs a:focus-visible,
.block .specialized-sdgs a:hover,
.block .specialized-sdgs a:focus-visible,
.block .community-tags a:hover,
.block .community-tags a:focus-visible {
  cursor: pointer;
}
.block .general-sdgs a:hover .icon, .block .general-sdgs a:focus-visible .icon,
.block .specialized-sdgs a:hover .icon,
.block .specialized-sdgs a:focus-visible .icon,
.block .community-tags a:hover .icon,
.block .community-tags a:focus-visible .icon {
  opacity: 0.85;
}
.block .general-sdgs a > span,
.block .specialized-sdgs a > span,
.block .community-tags a > span {
  display: block;
  font-size: var(--font-l1);
  line-height: var(--line-height-s2);
}
.block .general-sdgs span,
.block .specialized-sdgs span,
.block .community-tags span {
  display: block;
}
.block .general-sdgs .title,
.block .specialized-sdgs .title,
.block .community-tags .title {
  font-weight: var(--font-bold);
}
.block .general-sdgs .short-description,
.block .specialized-sdgs .short-description,
.block .community-tags .short-description {
  font-size: var(--font-s2);
  line-height: var(--line-height-s3);
  font-family: var(--font-condensed);
  margin-top: 0.1em;
}
.block .specialized-sdgs li {
  width: 120px;
}
.block .specialized-sdgs svg {
  width: 3.5rem;
  height: 3.5rem;
}
@media screen and (min-width: 1024px) {
  .block .specialized-sdgs svg {
    width: 4.5rem;
    height: 4.5rem;
  }
}
.block .general-sdgs li,
.block .community-tags li {
  width: 240px;
}
.block .general-sdgs svg,
.block .community-tags svg {
  margin-bottom: 0.4rem;
  width: 4rem;
  height: 4rem;
}
@media screen and (min-width: 1024px) {
  .block .general-sdgs svg,
.block .community-tags svg {
    width: 5rem;
    height: 5rem;
  }
}
.block .community-tags {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-gray-l9);
  margin-bottom: 3rem;
}
.block .community-tags.circles li {
  width: 10.5rem;
}
@media screen and (min-width: 1024px) {
  .block .community-tags.circles li {
    width: 12rem;
  }
}
.block .community-tags.circles .button {
  font-size: var(--font-l2);
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  border-radius: 100%;
  width: 9rem;
  height: 9rem;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: var(--font-bold);
}
@media screen and (min-width: 1024px) {
  .block .community-tags.circles .button {
    width: 10rem;
    height: 10rem;
  }
}
.block .community-tags.circles .button:not(:hover):not(:focus-visible) {
  color: var(--color-white);
}
.block .community-tags.circles .button span {
  font-size: var(--font-l1);
  line-height: var(--line-height-s2);
}
@media screen and (min-width: 1024px) {
  .block .community-tags.circles .button span {
    font-size: var(--font-l2);
    line-height: var(--line-height-s2);
  }
}
.block .community-tags.circles .button .icon {
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
}
.block .community-tags.circles li:first-child .button:not(:hover):not(:focus-visible) {
  background: #D7378C;
  border-color: #D7378C;
}
.block .community-tags.circles li:first-child .button:hover, .block .community-tags.circles li:first-child .button:focus-visible {
  background: #db4c98;
  border-color: #db4c98;
}
.block .community-tags.circles li:nth-child(2) .button:not(:hover):not(:focus-visible) {
  background: #36A150;
  border-color: #36A150;
}
.block .community-tags.circles li:nth-child(2) .button:hover, .block .community-tags.circles li:nth-child(2) .button:focus-visible {
  background: #3cb459;
  border-color: #3cb459;
}
.block .community-tags.circles li:nth-child(3) .button:not(:hover):not(:focus-visible) {
  background: #EC7B3C;
  border-color: #EC7B3C;
}
.block .community-tags.circles li:nth-child(3) .button:hover, .block .community-tags.circles li:nth-child(3) .button:focus-visible {
  background: #ee8b53;
  border-color: #ee8b53;
}
.block .community-tags.circles li:nth-child(4) .button:not(:hover):not(:focus-visible) {
  background: #2684B2;
  border-color: #2684B2;
}
.block .community-tags.circles li:nth-child(4) .button:hover, .block .community-tags.circles li:nth-child(4) .button:focus-visible {
  background: #2a94c7;
  border-color: #2a94c7;
}
.block .community-tags.circles li:nth-child(5) .button:not(:hover):not(:focus-visible) {
  background: #C03B4B;
  border-color: #C03B4B;
}
.block .community-tags.circles li:nth-child(5) .button:hover, .block .community-tags.circles li:nth-child(5) .button:focus-visible {
  background: #c84c5b;
  border-color: #c84c5b;
}
.block .community-tags.circles li:nth-child(6) .button:not(:hover):not(:focus-visible) {
  background: #8FBE2A;
  border-color: #8FBE2A;
}
.block .community-tags.circles li:nth-child(6) .button:hover, .block .community-tags.circles li:nth-child(6) .button:focus-visible {
  background: #9ed130;
  border-color: #9ed130;
}
.block .community-tags.circles li:nth-child(7) .button:not(:hover):not(:focus-visible) {
  background: #3951A8;
  border-color: #3951A8;
}
.block .community-tags.circles li:nth-child(7) .button:hover, .block .community-tags.circles li:nth-child(7) .button:focus-visible {
  background: #3f5abb;
  border-color: #3f5abb;
}
.block .community-tags.circles li:nth-child(8) .button:not(:hover):not(:focus-visible) {
  background: #9E5ED0;
  border-color: #9E5ED0;
}
.block .community-tags.circles li:nth-child(8) .button:hover, .block .community-tags.circles li:nth-child(8) .button:focus-visible {
  background: #aa72d6;
  border-color: #aa72d6;
}
.block .community-tags.circles li:nth-child(9) .button:not(:hover):not(:focus-visible) {
  background: #933D18;
  border-color: #933D18;
}
.block .community-tags.circles li:nth-child(9) .button:hover, .block .community-tags.circles li:nth-child(9) .button:focus-visible {
  background: #a9461c;
  border-color: #a9461c;
}
.block .community-tags.circles li:nth-child(10) .button:not(:hover):not(:focus-visible) {
  background: #54929F;
  border-color: #54929F;
}
.block .community-tags.circles li:nth-child(10) .button:hover, .block .community-tags.circles li:nth-child(10) .button:focus-visible {
  background: #619fac;
  border-color: #619fac;
}

.block-about > .wrapper {
  display: flex;
  flex-direction: column;
}
.block-about > .wrapper * {
  text-align: center;
  max-width: var(--max-width-l1);
  align-self: center;
  justify-self: center;
}
.block-about > .wrapper h2, .block-about > .wrapper h3 {
  margin: 0 0 1.5rem;
}
.block-about > .wrapper p {
  font-size: var(--font-l3);
  line-height: var(--line-height-s1);
  margin: 0 0 0.5rem;
}
.block-about .community-tags {
  border: none;
  padding-bottom: 0;
  margin: 1.25rem auto;
}
.block-about .community-tags li {
  width: 7.5rem;
  padding: 0.5rem 0.35rem;
}
.block-about .community-tags li svg {
  width: 3.5rem;
  height: 3.5rem;
}
.block-about .community-tags li p {
  display: block;
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  font-family: var(--font-condensed);
  font-weight: var(--font-bold);
}

.block-banner-communities .box,
.block-communities .box {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-top: none;
}
.block-banner-communities .box *,
.block-communities .box * {
  text-align: center;
  max-width: var(--max-width);
  align-self: center;
  justify-self: center;
}
.block-banner-communities .box h3,
.block-communities .box h3 {
  margin: 0 0 1.5rem;
}
.block-banner-communities .box p,
.block-communities .box p {
  font-size: var(--font-l3);
  line-height: var(--line-height-s1);
  margin: 0 0 0.5rem;
}
.block-banner-communities .community-tags,
.block-communities .community-tags {
  border: none;
  padding-bottom: 0;
  margin: 1.25rem auto;
}
.block-banner-communities .community-tags li,
.block-communities .community-tags li {
  width: 7.5rem;
  padding: 0.5rem 0.35rem;
}
.block-banner-communities .community-tags li svg,
.block-communities .community-tags li svg {
  width: 3.5rem;
  height: 3.5rem;
}
.block-banner-communities .community-tags li p,
.block-communities .community-tags li p {
  display: block;
  font-size: var(--font-s1);
  line-height: var(--line-height-s2);
  font-family: var(--font-condensed);
  font-weight: var(--font-bold);
}

body.home .page-header.block-banner-communities > .wrapper,
body.home .page-header.block-banner-search-and-sdgs > .wrapper,
body.home .page-header.block-banner-highlight > .wrapper,
body.home .page-header.block-banner-community > .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.home .page-header.block-banner-communities > .wrapper > *,
body.home .page-header.block-banner-search-and-sdgs > .wrapper > *,
body.home .page-header.block-banner-highlight > .wrapper > *,
body.home .page-header.block-banner-community > .wrapper > * {
  position: relative;
  z-index: 2;
}
body.home .page-header.block-banner-communities > .wrapper h2, body.home .page-header.block-banner-communities > .wrapper h3,
body.home .page-header.block-banner-search-and-sdgs > .wrapper h2,
body.home .page-header.block-banner-search-and-sdgs > .wrapper h3,
body.home .page-header.block-banner-highlight > .wrapper h2,
body.home .page-header.block-banner-highlight > .wrapper h3,
body.home .page-header.block-banner-community > .wrapper h2,
body.home .page-header.block-banner-community > .wrapper h3 {
  max-width: var(--max-width-l1);
}
body.home .page-header.block-banner-communities > .wrapper h2,
body.home .page-header.block-banner-search-and-sdgs > .wrapper h2,
body.home .page-header.block-banner-highlight > .wrapper h2,
body.home .page-header.block-banner-community > .wrapper h2 {
  font-size: var(--font-l10);
  margin: 0 auto 2.5rem;
  text-align: center;
}
body.home .page-header.block-banner-communities > .wrapper h2 + h3,
body.home .page-header.block-banner-search-and-sdgs > .wrapper h2 + h3,
body.home .page-header.block-banner-highlight > .wrapper h2 + h3,
body.home .page-header.block-banner-community > .wrapper h2 + h3 {
  margin: -1rem auto 1.5rem;
  font-size: var(--font-l7);
}

body.home .page-header.block-banner-community::before {
  background: rgba(0, 0, 0, 0.5);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 20%, rgba(0, 0, 0, 0) 90%);
}
body.home .page-header.block-banner-community .banner-image {
  opacity: 1;
}

body.home .page-header.block-banner-highlight > .wrapper p {
  margin: -0.25rem 0 1.5rem;
  font-size: var(--font-l5);
  max-width: var(--max-width-l1);
  text-align: center;
}

body.home .page-header.block-banner-communities > .wrapper,
body.home .page-header.block-banner-search-and-sdgs > .wrapper,
body.home .page-header.block-banner-highlight > .wrapper {
  min-height: 70vh;
}

body.home .page-header.block-banner-statistics > .wrapper {
  min-height: 25vh;
}

.block-search > .wrapper {
  padding: calc(1.5rem + var(--padding-m)) var(--padding-m);
}
.block-search > .wrapper h2 {
  font-size: var(--font-l7);
  margin: 0 0 1.5rem;
}

.block-search-form {
  max-width: 30rem;
  margin: 0 auto;
}

.block-search-and-sdgs > .wrapper,
.block-banner-search-and-sdgs > .wrapper {
  padding: calc(1.5rem + var(--padding-m)) var(--padding-m);
}
.block-search-and-sdgs .block-search-form,
.block-banner-search-and-sdgs .block-search-form {
  margin-bottom: 3rem;
}

.block-content-types .glide .box {
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-top: none;
}
.block-content-types .glide .box h3 {
  text-align: center;
  font-size: var(--font-l7);
  margin-top: 0;
}
.block-content-types .glide .box .cards-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--padding-s2);
  max-width: 18rem;
  margin: 0 auto;
}
@media screen and (max-width: 679px) {
  .block-content-types .glide .box .cards-list > :nth-child(2) {
    display: none;
  }
}
@media screen and (min-width: 680px) {
  .block-content-types .glide .box .cards-list {
    grid-template-columns: repeat(2, 1fr);
    max-width: 40rem;
  }
}

.block-assessments .glide__slides {
  align-items: stretch;
}
.block-assessments .assessment-card {
  align-self: stretch;
  height: auto;
}

.block-register .box * {
  text-align: center;
}
.block-register .box h3 {
  margin-top: 0;
}
.block-register .box p {
  margin-top: 0;
}

.block-regions h2 {
  color: var(--color-gray);
}
.block-regions ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -0.48rem;
}
.block-regions ul li {
  padding-left: 0;
}
.block-regions ul li::before {
  content: none;
  display: none;
}
@media screen and (min-width: 768px) {
  .block-regions ul {
    margin: 0 -1vw;
  }
}
.block-regions ul li {
  padding: 0.48rem;
}
@media screen and (min-width: 768px) {
  .block-regions ul li {
    padding: 0.5rem 1vw;
  }
}
.block-regions .button {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  border-radius: 100%;
  width: 8rem;
  height: 8rem;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 0.5rem;
  font-family: var(--font-condensed);
  font-weight: var(--font-bold);
}
.block-regions .button span {
  font-size: var(--font-l1);
  line-height: var(--line-height-s2);
}
@media screen and (min-width: 1024px) {
  .block-regions .button {
    width: 9rem;
    height: 9rem;
  }
  .block-regions .button span {
    font-size: var(--font-l2);
    line-height: var(--line-height-s2);
  }
}
.block-regions .button .icon {
  margin: 0 auto;
}

.block-partners.about-us-block {
  border-top: 1px solid var(--color-gray-l8);
}
.block-partners > .wrapper {
  padding-top: calc(3rem + var(--padding-m));
  padding-bottom: calc(3rem + var(--padding-m) * 4);
}
.block-partners ul {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -0.5rem;
  mix-blend-mode: multiply;
}
.block-partners ul li {
  padding-left: 0;
}
.block-partners ul li::before {
  content: none;
  display: none;
}
.block-partners ul li {
  display: block;
  padding: 0.5rem;
  mix-blend-mode: multiply;
}
.block-partners ul li span {
  display: block;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  mix-blend-mode: multiply;
}
.block-partners ul li img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  mix-blend-mode: multiply;
}

.block-survey > .wrapper {
  padding: calc(2rem + var(--padding-m)) var(--padding-m);
}
.block-survey > .wrapper h2 {
  color: var(--color-gray);
  margin: 0 0 1.25rem;
}
.block-survey p {
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l1);
}
.block-survey .button {
  margin-top: 1.25rem;
}

.block-video > .wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max-width-l2);
  padding: calc(var(--padding-m) * 1.5) var(--padding-m);
}
.block-video iframe {
  width: 100% !important;
  height: unset !important;
  aspect-ratio: 1/0.5625;
  margin: 1rem 0;
}

body.with-banner .top-navs {
  position: relative;
  background: none;
}
body.with-banner .top-navs .wrapper {
  position: relative;
  z-index: 3;
}
body.with-banner .top-navs:not(.expanded) {
  background: none;
}
body.with-banner .top-navs:not(.expanded) > .wrapper {
  background: none;
}
body.with-banner .top-navs:not(.expanded) > .wrapper::after {
  content: "";
  width: 300vw;
  height: 100%;
  position: absolute;
  left: -100vw;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--color-white-fade30);
  z-index: -1;
}
@media screen and (min-width: 1120px) {
  body.with-banner .top-navs .logo img {
    filter: grayscale(100%) brightness(1000%) contrast(300%);
  }
  body.with-banner .top-navs .button:not(.filled):not(:hover):not(:focus-visible) {
    border-color: var(--color-white-fade30);
    background: transparent;
    color: var(--color-white);
  }
  body.with-banner .top-navs .button:not(.filled):not(:hover):not(:focus-visible) .icon {
    fill: var(--color-white);
  }
  body.with-banner .top-navs .main-nav {
    border-color: var(--color-white-fade70);
    position: relative;
    z-index: 1;
  }
  body.with-banner .top-navs .main-nav a:not(:hover):not(:focus-visible) {
    color: var(--color-white);
  }
  body.with-banner .top-navs > .wrapper .main-nav::before,
body.with-banner .top-navs > .wrapper .sites-navs::before {
    background: var(--color-white-fade30);
  }
}
@media screen and (max-width: 1119px) {
  body.with-banner .top-navs:not(.expanded) .logo img {
    filter: grayscale(100%) brightness(1000%) contrast(300%);
  }
  body.with-banner .top-navs:not(.expanded) .button:not(.filled):not(:hover):not(:focus-visible) {
    border-color: var(--color-white-fade30);
    background: transparent;
    color: var(--color-white);
  }
  body.with-banner .top-navs:not(.expanded) .button:not(.filled):not(:hover):not(:focus-visible) .icon {
    fill: var(--color-white);
  }
  body.with-banner .top-navs:not(.expanded) .main-nav {
    border-color: var(--color-white-fade70);
    position: relative;
    z-index: 1;
  }
  body.with-banner .top-navs:not(.expanded) .main-nav a:not(:hover):not(:focus-visible) {
    color: var(--color-white);
  }
  body.with-banner .top-navs:not(.expanded) > .wrapper .main-nav::before,
body.with-banner .top-navs:not(.expanded) > .wrapper .sites-navs::before {
    background: var(--color-white-fade30);
  }
}
body.with-banner .page-header {
  background: var(--color-gray);
  color: white;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 16.5rem;
}
@media screen and (min-width: 768px) {
  body.with-banner .page-header {
    min-height: 26rem;
  }
}
@media screen and (min-width: 1440px) {
  body.with-banner .page-header {
    min-height: 30rem;
  }
}
body.with-banner .page-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 80%;
  z-index: 1;
  background: rgba(0, 0, 0, 0.5);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 12%, rgba(0, 0, 0, 0.45) 36%, rgba(0, 0, 0, 0) 100%);
}
body.with-banner .page-header > .wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
  z-index: 2;
}
body.with-banner .page-header > .wrapper > .button {
  box-shadow: var(--shadow-d2);
}
body.with-banner .page-header h1 {
  position: relative;
  margin: 0;
  width: auto;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
body.with-banner .page-header .banner-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.7;
  filter: none;
  box-shadow: none;
}

body.blog.with-banner .page-header .wrapper,
body.podcast.with-banner .page-header .wrapper {
  min-height: 14rem;
}

body.podcast.with-banner h1 {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
body.podcast.with-banner .page-header {
  overflow: hidden;
}
body.podcast.with-banner .page-header::before {
  height: 40%;
}
body.podcast.with-banner .page-header .banner-image {
  opacity: 1;
  left: calc((2560px - 100%) / 2 * -1);
  top: calc((720px - 100%) / 2 * -1);
  width: 2560px;
  height: auto;
  margin-top: 1.75rem;
}
@media screen and (min-width: 1640px) {
  body.podcast.with-banner .page-header .banner-image {
    margin-top: 2rem;
  }
}

body.with-banner:not(.menu-expanded) .top-navs {
  margin-bottom: -3.75rem;
}
body.with-banner:not(.menu-expanded) .page-header {
  padding-top: 3.75rem;
}
@media screen and (max-width: 1119px) {
  body.with-banner:not(.menu-expanded) .page-header .wrapper {
    min-height: 14rem;
  }
}

@media screen and (max-width: 1119px) {
  body.with-banner.menu-expanded .top-navs::before {
    height: calc(70vh + 8rem);
    bottom: calc((70vh + 8rem) * -1 + 8rem);
    z-index: 1;
  }
  body.with-banner.menu-expanded .page-header .wrapper {
    min-height: 14rem;
  }
}
@media screen and (min-width: 1120px) {
  body.with-banner.menu-expanded .top-navs {
    margin-bottom: -3.75rem;
    background: linear-gradient(to bottom, var(--color-gray-fade50) 20%, var(--color-gray-fade100) 100%);
  }
  body.with-banner.menu-expanded .page-header {
    padding-top: 3.75rem;
  }
}

.sg-color {
  width: 4.2rem;
}

.sg-color > * {
  margin: 0 0 0.25rem;
}

.sg-color-swatch {
  width: 100%;
  height: 4.2rem;
  border: 1px solid var(--color-link);
}

.sg-color-name {
  font-size: var(--font-size-s3);
  margin: 0.25rem 0 0;
  line-height: var(--line-height-xxs);
  display: block;
}

.sg-ref-code {
  font-size: var(--font-size-s4);
  line-height: var(--line-height-xxs);
  margin: 0.25rem 0 0;
  font-family: var(--font-heading);
  display: block;
}

[class*=flex] {
  display: flex;
  flex-wrap: wrap;
}
[class*=flex][class*=gap] > * {
  margin: 0 1rem 1rem 0;
}
[class*=flex][class*=gaps] > * {
  margin: 0 0.5rem 0.5rem 0;
}
[class*=flex] > :last-child {
  margin: 0;
}

[class*=grid]:not([class*=gridjs]) {
  display: grid;
}
@media screen and (min-width: 120px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmax120] {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}
@media screen and (min-width: 200px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmax200] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
@media screen and (min-width: 280px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmax280] {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media screen and (min-width: 360px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmax360] {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  }
}
@media screen and (min-width: 440px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmax440] {
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
}
@media screen and (min-width: 120px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmin120] {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
@media screen and (min-width: 200px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmin200] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media screen and (min-width: 280px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmin280] {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
@media screen and (min-width: 360px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmin360] {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  }
}
@media screen and (min-width: 440px) {
  [class*=grid]:not([class*=gridjs])[class*=-colmin440] {
    grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  }
}
[class*=grid]:not([class*=gridjs])[class*=-gap] {
  grid-gap: calc(var(--padding-m) / 3);
}
[class*=grid]:not([class*=gridjs])[class*=-gapl] {
  grid-gap: calc(var(--padding-m) / 2);
}
[class*=grid]:not([class*=gridjs])[class*=-gapxl] {
  grid-gap: var(--padding-m);
}

[class*=grid] [type=text],
[class*=grid] [type=email],
[class*=grid] [type=tel],
[class*=grid] [type=url],
[class*=grid] [type=password],
[class*=grid] [type=number],
[class*=grid] [type=date],
[class*=grid] [type=time],
[class*=grid] [type=search],
[class*=grid] [type=file],
[class*=grid] textarea,
[class*=grid] select {
  width: calc(100% + 0.5rem);
}

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