@charset "UTF-8";
/* Logoblauw 15% */
/* Logoblauw 30% */
/* Logoblauw 45% */
/* Logoblauw 60% */
/* Logoblauw 75% */
/* Logoblauw 100% */
/* Link colors */
/* Grijs 1 */
/* Grijs 2 */
/* Grijs 3 */
/* Grijs 4 */
/* Grijs 5 */
/* Grijs 6 */
/* Grijs 7 */
/* Paars 15% */
/* Paars 30% */
/* Paars 45% */
/* Paars 60% */
/* Paars 75% */
/* Paars 100% */
/* Violet 15% */
/* Violet 30% */
/* Violet 45% */
/* Violet 60% */
/* Violet 75% */
/* Violet 100% */
/* Robijnrood 15% */
/* Robijnrood 30% */
/* Robijnrood 45% */
/* Robijnrood 60% */
/* Robijnrood 75% */
/* Robijnrood 100% */
/* Roze 15% */
/* Roze 30% */
/* Roze 45% */
/* Roze 60% */
/* Roze 75% */
/* Roze 100% */
/* Rood 15% */
/* Rood 30% */
/* Rood 45% */
/* Rood 60% */
/* Rood 75% */
/* Rood 100% */
/* Oranje 15% */
/* Oranje 30% */
/* Oranje 45% */
/* Oranje 60% */
/* Oranje 75% */
/* Oranje 100% */
/* Donkergeel 15% */
/* Donkergeel 30% */
/* Donkergeel 45% */
/* Donkergeel 60% */
/* Donkergeel 75% */
/* Donkergeel 100% */
/* Geel 15% */
/* Geel 30% */
/* Geel 45% */
/* Geel 60% */
/* Geel 75% */
/* Geel 100% */
/* Donkerbruin 15% */
/* Donkerbruin 30% */
/* Donkerbruin 45% */
/* Donkerbruin 60% */
/* Donkerbruin 75% */
/* Donkerbruin 100% */
/* Bruin 15% */
/* Bruin 30% */
/* Bruin 45% */
/* Bruin 60% */
/* Bruin 75% */
/* Bruin 100% */
/* Donkergroen 15% */
/* Donkergroen 30% */
/* Donkergroen 45% */
/* Donkergroen 60% */
/* Donkergroen 75% */
/* Donkergroen 100% */
/* Groen 15% */
/* Groen 30% */
/* Groen 45% */
/* Groen 60% */
/* Groen 75% */
/* Groen 100% */
/* Mosgroen 15% */
/* Mosgroen 30% */
/* Mosgroen 45% */
/* Mosgroen 60% */
/* Mosgroen 75% */
/* Mosgroen 100% */
/* Mintgroen 15% */
/* Mintgroen 30% */
/* Mintgroen 45% */
/* Mintgroen 60% */
/* Mintgroen 75% */
/* Mintgroen 100% */
/* Donkerblauw 15% */
/* Donkerblauw 30% */
/* Donkerblauw 45% */
/* Donkerblauw 60% */
/* Donkerblauw 75% */
/* Donkerblauw 100% */
/* Hemelblauw 15% */
/* Hemelblauw 30% */
/* Hemelblauw 45% */
/* Hemelblauw 60% */
/* Hemelblauw 75% */
/* Hemelblauw 100% */
/* Lichtblauw 15% */
/* Lichtblauw 30% */
/* Lichtblauw 45% */
/* Lichtblauw 60% */
/* Lichtblauw 75% */
/* Lichtblauw 100% */
/* Explanation */
/* Confirmation */
/* Warning */
/* Error */
/* System */
/* Theme configuration */
/* Fonts (@font-faces) */
@font-face {
  font-family: "RO Sans Web";
  font-weight: normal;
  font-style: normal;
  font-display: var(--text-body-font-display, fallback);
  src: url("./fonts/ro-sans-web/RO-SansWebText-Regular.woff2") format("woff2"), url("./fonts/ro-sans-web/RO-SansWebText-Regular.woff") format("woff"), url("./fonts/ro-sans-web/RO-SansWebText-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "RO Sans Web";
  font-weight: normal;
  font-style: italic;
  font-display: var(--text-body-font-display, fallback);
  src: url("./fonts/ro-sans-web/RO-SansWebText-Italic.woff2") format("woff2"), url("./fonts/ro-sans-web/RO-SansWebText-Italic.woff") format("woff"), url("./fonts/ro-sans-web/RO-SansWebText-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "RO Sans Web";
  font-weight: bold;
  font-style: normal;
  font-display: var(--text-body-font-display, fallback);
  src: url("./fonts/ro-sans-web/RO-SansWebText-Bold.woff2") format("woff2"), url("./fonts/ro-sans-web/RO-SansWebText-Bold.woff") format("woff"), url("./fonts/ro-sans-web/RO-SansWebText-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "RO Serif Web";
  font-weight: normal;
  font-style: normal;
  font-display: var(--text-magazine-font-display, swap);
  src: url("./fonts/ro-serif-web/RO-SerifWeb-Regular.woff2") format("woff2"), url("./fonts/ro-serif-web/RO-SerifWeb-Regular.woff") format("woff"), url("./fonts/ro-serif-web/RO-SerifWeb-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "RO Serif Web";
  font-weight: normal;
  font-style: italic;
  font-display: var(--text-magazine-font-display, swap);
  src: url("./fonts/ro-serif-web/RO-SerifWeb-Italic.woff2") format("woff2"), url("./fonts/ro-serif-web/RO-SerifWeb-Italic.woff") format("woff"), url("./fonts/ro-serif-web/RO-SerifWeb-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "RO Serif Web";
  font-weight: bold;
  font-style: normal;
  font-display: var(--text-magazine-font-display, swap);
  src: url("./fonts/ro-serif-web/RO-SerifWeb-Bold.woff2") format("woff2"), url("./fonts/ro-serif-web/RO-SerifWeb-Bold.woff") format("woff"), url("./fonts/ro-serif-web/RO-SerifWeb-Bold.ttf") format("truetype");
}
@font-face {
  font-family: ro-icons-light;
  font-weight: normal;
  font-style: normal;
  font-display: var(--text-icon-font-display, block);
  src: url("./fonts/ro-icons-light/ro-icons-light.woff2") format("woff2"), url("./fonts/ro-icons-light/ro-icons-light.woff") format("woff"), url("./fonts/ro-icons-light/ro-icons-light.ttf") format("truetype");
}
/* Icon mask data URIs */
/* Core variables */
/* These are core sets like color schemes, fonts and spacing sets */
.spacing-0 {
  gap: 0;
}

.spacing-0125 {
  gap: 0.125rem;
}

.spacing-025 {
  gap: 0.25rem;
}

.spacing-0375 {
  gap: 0.375rem;
}

.spacing-050 {
  gap: 0.5rem;
}

.spacing-075 {
  gap: 0.75rem;
}

.spacing-100 {
  gap: 1rem;
}

.spacing-125 {
  gap: 1.25rem;
}

.spacing-150 {
  gap: 1.5rem;
}

.spacing-175 {
  gap: 1.75rem;
}

.spacing-200 {
  gap: 2rem;
}

.spacing-225 {
  gap: 2.25rem;
}

.spacing-250 {
  gap: 2.5rem;
}

.spacing-300 {
  gap: 3rem;
}

.spacing-400 {
  gap: 4rem;
}

.spacing-500 {
  gap: 5rem;
}

.spacing-800 {
  gap: 8rem;
}

.spacing-1200 {
  gap: 12rem;
}

/* Theme configuration */
/* Semantic variables */
/* These are variables that have a semantic value. Like branding color */
/* Component variables */
/* hover */
/* Hover */
/* Blue */
/* Green */
/* Yellow */
/* Orange */
/* Red */
/* Violet */
/* Color 1 */
/* Color 2 */
/* Color 3 */
/* Color 4 */
/* Color 5 */
/* Color 6 */
/* Semantic variables */
/* These are variables that have a semantic value. Like branding color */
/* Component variables */
.icon-ascending {
  mask: url("./img/icons/ro/ascending.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/ascending.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-caret-down-filled {
  mask: url("./img/icons/ro/caret-down-filled.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/caret-down-filled.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-caret-up-down-filled {
  mask: url("./img/icons/ro/caret-up-down-filled.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/caret-up-down-filled.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-caret-up-filled {
  mask: url("./img/icons/ro/caret-up-filled.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/caret-up-filled.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-check {
  mask: url("./img/icons/ro/check.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/check.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-down {
  mask: url("./img/icons/ro/chevron-down.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-down.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-left {
  mask: url("./img/icons/ro/chevron-left.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-left.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-light-down {
  mask: url("./img/icons/ro/chevron-light-down.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-light-down.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-light-left {
  mask: url("./img/icons/ro/chevron-light-left.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-light-left.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-light-right {
  mask: url("./img/icons/ro/chevron-light-right.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-light-right.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-light-up {
  mask: url("./img/icons/ro/chevron-light-up.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-light-up.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-right {
  mask: url("./img/icons/ro/chevron-right.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-right.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-chevron-up {
  mask: url("./img/icons/ro/chevron-up.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/chevron-up.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-close {
  mask: url("./img/icons/ro/close.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/close.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-confirmation {
  background: url("./img/icons/ro/confirmation.svg") no-repeat center/contain;
  background-color: unset;
}

.icon-descending {
  mask: url("./img/icons/ro/descending.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/descending.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-device-mobile {
  mask: url("./img/icons/ro/device-mobile.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/device-mobile.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-download {
  mask: url("./img/icons/ro/download.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/download.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-error {
  background: url("./img/icons/ro/error.svg") no-repeat center/contain;
  background-color: unset;
}

.icon-hamburger {
  mask: url("./img/icons/ro/hamburger.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/hamburger.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-heart {
  mask: url("./img/icons/ro/heart.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/heart.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-home {
  mask: url("./img/icons/ro/home.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/home.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-informative {
  background: url("./img/icons/ro/informative.svg") no-repeat center/contain;
  background-color: unset;
}

.icon-lock-closed {
  mask: url("./img/icons/ro/lock-closed.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/lock-closed.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-on-off {
  mask: url("./img/icons/ro/on-off.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/on-off.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-outgoing {
  mask: url("./img/icons/ro/outgoing.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/outgoing.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-power {
  mask: url("./img/icons/ro/power.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/power.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-questionmark {
  mask: url("./img/icons/ro/questionmark.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/questionmark.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-refresh {
  mask: url("./img/icons/ro/refresh.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/refresh.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-reset {
  mask: url("./img/icons/ro/reset.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/reset.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-search {
  mask: url("./img/icons/ro/search.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/search.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-smartphone {
  mask: url("./img/icons/ro/smartphone.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/smartphone.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-sort {
  mask: url("./img/icons/ro/sort.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/sort.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-to-top {
  mask: url("./img/icons/ro/to-top.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/to-top.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-trash {
  mask: url("./img/icons/ro/trash.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/trash.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-user {
  mask: url("./img/icons/ro/user.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/ro/user.svg") no-repeat center/contain;
  background-color: currentcolor;
}

.icon-warning {
  background: url("./img/icons/ro/warning.svg") no-repeat center/contain;
  background-color: unset;
}

.accordion, ul.accordion {
  display: flex;
  flex-direction: column;
}

.accordion > div > button, ul.accordion > li > button {
  width: 100%;
  text-decoration: none;
  padding: 0.75rem 1rem;
  color: #007bc7;
  background-color: #ffffff;
  border-width: 1px 0 1px 0.5rem;
  border-style: solid;
  border-color: #2c89d0 transparent;
}
.accordion > div > button:hover, ul.accordion > li > button:hover {
  color: #00438b;
  background-color: #f1f5f9;
}
.accordion > div > div, ul.accordion > li > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  gap: 0.5rem;
  padding: 1rem;
  border-width: 0 0 0 0.5rem;
  border-style: solid;
  border-color: #2c89d0;
}
.accordion > div > div > *:first-child, ul.accordion > li > div > *:first-child {
  margin-top: 0;
}

ul.accordion {
  padding: 0;
  width: 100%;
}
ul.accordion > li {
  list-style: none;
  width: 100%;
  max-width: 100%;
  padding: 0;
  gap: 0;
}
.accordion div:first-child button,
.accordion section:first-child button,
.accordion li:first-child button {
  border-width: 1px 0 0 0.5rem;
}
.accordion {
  /* Accordion item */
}
.accordion > div {
  width: 100%;
  gap: 0;
}
section.accordion > div {
  gap: 0;
}

/* The expanded state */
/* Collapsed state (only when JavaScript is loaded) */
.js-accordion-loaded {
  /* The collapsed state */
}
.js-accordion-loaded .accordion {
  width: 100%;
}
.js-accordion-loaded .accordion button[aria-expanded=false] {
  /* Open icon */
}
.js-accordion-loaded .accordion button[aria-expanded=false]::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  content: "";
  margin-right: 1rem;
  background-color: #01689b;
  mask-image: url("./img/icons/ro/chevron-down.svg");
  width: 1rem;
  height: 1rem;
}
.js-accordion-loaded .accordion button[aria-expanded=false] + div {
  display: none;
}
.js-accordion-loaded .accordion {
  /* The expanded state */
}
.js-accordion-loaded .accordion button[aria-expanded=true] {
  border-width: 1px 0 0 0.5rem;
  border-color: #2c89d0;
}
.js-accordion-loaded .accordion button[aria-expanded=true]::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  content: "";
  margin-right: 1rem;
  background-color: #01689b;
  mask-image: url("./img/icons/ro/chevron-up.svg");
  width: 1rem;
  height: 1rem;
}

article > section,
article > div > section {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

article {
  width: 100%;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  gap: 1.75rem;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
}
article .content-wrapper {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  width: 100%;
  max-width: 82rem;
  padding-top: 1.75rem;
  padding-right: 1rem;
  padding-bottom: 1.75rem;
  padding-left: 1rem;
  display: flex;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (width >= 24rem) {
  article .content-wrapper {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
.avatar {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.88889rem;
  border-radius: 100%;
  background-color: #f7d9e7;
  color: #000000;
  align-self: center;
}
.avatar:hover, .avatar:visited:hover {
  background-color: #f7d9e7;
  color: #000000;
}
.avatar:visited {
  background-color: #f7d9e7;
  color: #000000;
}

body > header a.avatar,
.manon-root > header a.avatar,
.page-header a.avatar {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
}

body,
.manon-root {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: "RO Sans Web", sans-serif;
  font-size: 1.125rem;
  /* Set to always fill the page and the footer
  will never be in the middle of the screen  		*/
  min-height: 100vh;
  /* Fallback set to a white because some browsers 
  (e.g: firefox on linux) do not use white as a 
  default color but this is often expected.		  */
  /* When the page doesn't have enough content to 
  fill the screen height this will place the 
  footer at the bottom of the screen 				    */
}
body > main,
.manon-root > main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.breadcrumb-bar,
.page-header .breadcrumb-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  flex-direction: row;
  gap: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  background-color: #f3f3f3;
  color: #000000;
}
.breadcrumb-bar > div.content-wrapper,
.page-header .breadcrumb-bar > div.content-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
}
.breadcrumb-bar ul,
.breadcrumb-bar ol,
.page-header .breadcrumb-bar ul,
.page-header .breadcrumb-bar ol {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  background-color: #f3f3f3;
  color: #000000;
}
.breadcrumb-bar ul li,
.breadcrumb-bar ol li,
.page-header .breadcrumb-bar ul li,
.page-header .breadcrumb-bar ol li {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  list-style: none;
  gap: 0.5rem;
}
.breadcrumb-bar ul li::after,
.breadcrumb-bar ol li::after,
.page-header .breadcrumb-bar ul li::after,
.page-header .breadcrumb-bar ol li::after {
  mask-repeat: no-repeat;
  mask-position: center center;
}
.breadcrumb-bar ul li:last-child,
.breadcrumb-bar ol li:last-child,
.page-header .breadcrumb-bar ul li:last-child,
.page-header .breadcrumb-bar ol li:last-child {
  font-weight: bold;
}
.breadcrumb-bar ul li:last-child::after,
.breadcrumb-bar ol li:last-child::after,
.page-header .breadcrumb-bar ul li:last-child::after,
.page-header .breadcrumb-bar ol li:last-child::after {
  content: none;
}
.breadcrumb-bar ul li:hover::after,
.breadcrumb-bar ol li:hover::after,
.page-header .breadcrumb-bar ul li:hover::after,
.page-header .breadcrumb-bar ol li:hover::after {
  color: #000000;
}
.breadcrumb-bar ul li a,
.breadcrumb-bar ol li a,
.page-header .breadcrumb-bar ul li a,
.page-header .breadcrumb-bar ol li a {
  /* Break words that won't fit the available space */
  overflow-wrap: anywhere;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.breadcrumb-bar ul li a:hover,
.breadcrumb-bar ol li a:hover,
.page-header .breadcrumb-bar ul li a:hover,
.page-header .breadcrumb-bar ol li a:hover {
  border: 0;
}
.breadcrumb-bar ul li::after,
.breadcrumb-bar ol li::after,
.page-header .breadcrumb-bar ul li::after,
.page-header .breadcrumb-bar ol li::after {
  mask-size: contain;
  content: "";
  background-color: #000000;
  mask-image: url("./img/icons/ro/chevron-light-right.svg");
  width: 1rem;
  height: 1rem;
}
.breadcrumb-bar ul li::before,
.breadcrumb-bar ol li::before,
.page-header .breadcrumb-bar ul li::before,
.page-header .breadcrumb-bar ol li::before {
  display: none;
}
.breadcrumb-bar ul li a,
.breadcrumb-bar ol li a,
.page-header .breadcrumb-bar ul li a,
.page-header .breadcrumb-bar ol li a {
  max-width: unset;
}

.button-container {
  display: flex;
  margin: 0;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}
.button-container button,
.button-container a.button,
.button-container input[type=button],
.button-container input[type=submit],
.button-container input[type=reset] {
  width: 100%;
  max-width: 100%;
}
@media (width >= 24rem) {
  .button-container button,
  .button-container a.button,
  .button-container input[type=button],
  .button-container input[type=submit],
  .button-container input[type=reset] {
    width: auto;
    max-width: 100%;
    flex-grow: 0;
  }
}

button.cta,
a.button.cta,
input[type=button].cta,
input[type=submit].cta,
input[type=reset].cta {
  background-color: #39870c;
  color: #ffffff;
  border-width: 2px;
  border-style: solid;
  border-color: #39870c;
}
button.cta:hover, button.cta.hover,
a.button.cta:hover,
a.button.cta.hover,
input[type=button].cta:hover,
input[type=button].cta.hover,
input[type=submit].cta:hover,
input[type=submit].cta.hover,
input[type=reset].cta:hover,
input[type=reset].cta.hover {
  background-color: #026900;
  color: #ffffff;
  border-color: #026900;
}
a.button {
  color: #ffffff;
}
a.button:visited, a.button.visited {
  color: #ffffff;
}

button.destructive,
a.button.destructive,
input[type=button].destructive,
input[type=submit].destructive,
input[type=reset].destructive {
  background-color: #d52b1e;
  color: #ffffff;
  border-color: #d52b1e;
}
button.destructive:hover,
a.button.destructive:hover,
input[type=button].destructive:hover,
input[type=submit].destructive:hover,
input[type=reset].destructive:hover {
  background-color: #b20000;
  color: #ffffff;
  border-color: #b20000;
}

.dropdown {
  width: auto;
  margin: 0;
  padding: 0;
  gap: 0;
}

button.icon-only,
a.button.icon-only,
input[type=button].icon-only,
input[type=submit].icon-only,
input[type=reset].icon-only {
  font-size: 0;
  gap: 0;
  /* Icon */
}
button.icon-only,
a.button.icon-only,
input[type=button].icon-only,
input[type=submit].icon-only,
input[type=reset].icon-only {
  /* Hover */
}
button.icon-only:hover,
a.button.icon-only:hover,
input[type=button].icon-only:hover,
input[type=submit].icon-only:hover,
input[type=reset].icon-only:hover {
  font-size: 0;
}

button.icon,
a.button.icon,
input[type=button].icon,
input[type=submit].icon,
input[type=reset].icon {
  gap: 0;
  min-width: 0;
  align-items: center;
  align-self: flex-start;
}
a.button,
input[type=button],
input[type=submit],
input[type=reset] {
  display: flex;
}

button.round,
a.button.round,
input[type=button].round,
input[type=submit].round,
input[type=reset].round {
  margin: auto 0;
  min-width: initial;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
}

button.secondary,
a.button.secondary,
input[type=button].secondary,
input[type=submit].secondary,
input[type=reset].secondary {
  margin: 0;
  box-sizing: border-box;
  width: auto;
  align-items: center;
  align-self: flex-start;
  background-color: #ffffff;
  color: #ffffff;
  border-width: 2px;
  border-style: solid;
  border-color: #ca005d;
}
button.secondary:hover, button.secondary.hover,
a.button.secondary:hover,
a.button.secondary.hover,
input[type=button].secondary:hover,
input[type=button].secondary.hover,
input[type=submit].secondary:hover,
input[type=submit].secondary.hover,
input[type=reset].secondary:hover,
input[type=reset].secondary.hover {
  background-color: #ca005d;
  color: #ffffff;
  border-color: #ca005d;
}
button.secondary > *,
a.button.secondary > *,
input[type=button].secondary > *,
input[type=submit].secondary > *,
input[type=reset].secondary > * {
  pointer-events: none;
}
a.button,
input[type=button],
input[type=submit],
input[type=reset] {
  display: flex;
}

.to-top,
button.to-top,
a.button.to-top,
a:visited.button.to-top {
  padding: 0;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  font-size: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #ffffff;
  background-color: #ca005d;
  color: #ffffff;
  gap: 0;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.to-top:hover, .to-top:focus, .to-top:active,
button.to-top:hover,
button.to-top:focus,
button.to-top:active,
a.button.to-top:hover,
a.button.to-top:focus,
a.button.to-top:active,
a:visited.button.to-top:hover,
a:visited.button.to-top:focus,
a:visited.button.to-top:active {
  border-radius: 50%;
  border-color: #ffffff;
}

button,
a.button,
a.button:visited,
input[type=button],
input[type=submit],
input[type=reset] {
  cursor: pointer;
  overflow-wrap: break-word;
  width: auto;
  align-items: center;
  box-sizing: border-box;
  gap: 0.5rem;
  background-color: #ca005d;
  color: #ffffff;
  font-size: 1.125rem;
  text-align: center;
  padding-top: 0.75rem;
  padding-right: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  border-width: 0;
  border-color: #ca005d;
  border-radius: 0;
  margin: 0;
}
button > *,
a.button > *,
a.button:visited > *,
input[type=button] > *,
input[type=submit] > *,
input[type=reset] > * {
  pointer-events: none;
}
@media (width >= 24rem) {
  button,
  a.button,
  a.button:visited,
  input[type=button],
  input[type=submit],
  input[type=reset] {
    display: flex;
  }
}

a.button,
input[type=button],
input[type=submit],
input[type=reset] {
  display: inline-flex;
  cursor: pointer;
}

a.button {
  text-decoration: none;
  color: #ffffff;
}
section.card,
article.card,
div.card,
p.card,
span.card,
main > section > div.card,
main.sidemenu div > section > div.card {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
.checkbox {
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.checkbox input[type=checkbox] {
  padding: 0;
  cursor: pointer;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  min-height: 1.5rem;
}
.checkbox input[type=checkbox] + label {
  cursor: pointer;
}
.checkbox input[type=checkbox]:disabled {
  cursor: not-allowed;
}
.checkbox input[type=checkbox]:disabled + label {
  cursor: not-allowed;
}
.checkbox.required {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.checkbox.required > div {
  padding: 0;
  display: flex;
  flex-direction: row;
}
.checkbox + .nota-bene {
  padding-bottom: 0;
  margin-bottom: 0;
}

pre,
div.code-block {
  display: flex;
  overflow: auto;
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  position: relative;
}
pre > code,
div.code-block > code {
  white-space: unset;
  padding: 2rem 1.5rem;
  width: 100%;
}
pre button,
div.code-block button {
  background: transparent;
  color: #535353;
  padding: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
}
pre button:hover,
div.code-block button:hover {
  background-color: #ca005d;
  color: #ffffff;
}

div.code-block {
  font-family: monospace;
  white-space: pre;
}

a:hover > code, a:visited > code, a:focus > code, a:active > code, h1 > code,
h2 > code,
h3 > code,
h4 > code,
h5 > code,
h6 > code, span > code,
li > code,
p > code, code {
  width: auto;
  box-sizing: border-box;
  background-color: #f3f3f3;
  padding: 0 0.5rem;
}
/* Code */
/* Code within text elements */
/* Code within headers */
/* Code within links */
.collapsible {
  /* Above breakpoint */
}
.collapsible button.collapsible-toggle {
  display: none;
}
.collapsible.collapsed {
  padding: 0;
  gap: 0;
  margin: 0;
  position: relative;
}
.collapsible.collapsed button.collapsible-toggle {
  display: flex;
  max-height: 100%;
  /* Let the icon’s height matches the button text height, 
  and its width adjusts automatically to maintain the correct aspect ratio. 
  */
}
.collapsible.collapsed button.collapsible-toggle .icon {
  height: 1em;
  width: 1em;
}
.collapsible.collapsed button.collapsible-toggle + .collapsing-element {
  display: flex;
}
.collapsible.collapsed button.collapsible-toggle[aria-expanded=false] + .collapsing-element {
  display: none;
}

.collapsing-element form {
  width: 100%;
}

.collapsible.collapsed .collapsing-element {
  position: absolute;
  max-height: initial;
  height: auto;
  box-sizing: border-box;
  margin: 1rem 0 0;
  min-width: 250px;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  z-index: 20;
  background-color: #fff;
  -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  top: 3.5rem;
}
.collapsible.collapsed .collapsing-element form {
  padding: 0;
  background-color: transparent;
}
.collapsible.collapsed .collapsing-element ul,
.collapsible.collapsed .collapsing-element ol {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}
.collapsible.collapsed .collapsing-element ul li,
.collapsible.collapsed .collapsing-element ol li {
  display: flex;
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: auto;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #e6e6e6;
}
.collapsible.collapsed .collapsing-element ul li::before,
.collapsible.collapsed .collapsing-element ol li::before {
  /* Preventing default nav before to show up */
  display: none;
}
.collapsible.collapsed .collapsing-element ul li a,
.collapsible.collapsed .collapsing-element ol li a {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  border: 0;
  white-space: nowrap;
  box-sizing: border-box;
  min-height: 3rem;
  padding-right: 1rem;
  padding-left: 1rem;
  color: #000000;
  text-decoration: none;
}
.collapsible.collapsed .collapsing-element ul li a[aria-selected=true], .collapsible.collapsed .collapsing-element ul li a[aria-current=page],
.collapsible.collapsed .collapsing-element ol li a[aria-selected=true],
.collapsible.collapsed .collapsing-element ol li a[aria-current=page] {
  font-weight: bold;
  text-decoration: none;
}
.collapsible.collapsed .collapsing-element ul li a[aria-selected=true]:hover, .collapsible.collapsed .collapsing-element ul li a[aria-current=page]:hover,
.collapsible.collapsed .collapsing-element ol li a[aria-selected=true]:hover,
.collapsible.collapsed .collapsing-element ol li a[aria-current=page]:hover {
  border: 0;
  text-decoration: none;
}
.collapsible.collapsed .collapsing-element ul li:hover,
.collapsible.collapsed .collapsing-element ol li:hover {
  background-color: #01689b;
}
.collapsible.collapsed .collapsing-element ul li:hover a,
.collapsible.collapsed .collapsing-element ol li:hover a {
  background-color: #01689b;
  color: #ffffff;
  text-decoration: none;
}
.collapsible.collapsed .collapsing-element ul li:hover a:visited,
.collapsible.collapsed .collapsing-element ol li:hover a:visited {
  background-color: #01689b;
}
.collapsible.collapsed .collapsing-element ul li[aria-current],
.collapsible.collapsed .collapsing-element ol li[aria-current] {
  background-color: #01689b;
  color: #ffffff;
}

/* color input */
input[type=color] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  cursor: pointer;
  box-sizing: border-box;
  width: 2.5rem;
  height: 2.75rem;
  padding: 0.25rem;
}
table .critical,
table .high,
table .medium,
table .low,
table .informational {
  display: inline-block;
}

.de-emphasized {
  font-size: 0.88889rem;
  color: #535353;
}

dl {
  width: 100%;
}
dl > div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  flex-direction: column;
  gap: 1rem;
  padding: 0.75rem 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #e6e6e6;
}
dl dt,
dl dd {
  overflow-wrap: anywhere;
  box-sizing: border-box;
  margin: 0;
}
dl dt {
  width: 15rem;
}
dl dd {
  font-weight: bold;
}
@media (width >= 50rem) {
  dl div dd {
    width: calc(80% - 16rem);
  }
}

fieldset dt,
fieldset dd {
  float: left;
}

.emphasized {
  font-size: 1.6rem;
}

.filter > div {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
  justify-content: space-between;
}
.filter > div p {
  font-size: inherit;
  color: inherit;
}
.filter > div button {
  display: none;
  min-width: 0;
  background-color: transparent;
  padding: 0;
  font-size: 0;
  gap: 0;
}
.filter > div button::after {
  mask-size: contain;
  content: "";
  background-color: #01689b;
  mask-image: url("./img/icons/ro/chevron-down.svg");
  width: 1rem;
  height: 1rem;
}
.filter > div button[aria-expanded=true]::after {
  mask-size: contain;
  content: "";
  mask-image: url("./img/icons/ro/chevron-up.svg");
}

.js-filters-loaded .filter > div > button {
  display: inline-flex;
}

*:focus-visible,
*.focus {
  outline: 2px dashed;
  outline-offset: -2px;
  outline-color: #000000;
  z-index: 1;
}
*:focus-visible + label::before,
*.focus + label::before {
  position: relative;
  outline: 2px dashed;
  z-index: 1;
}

body > footer,
.manon-root > footer,
.page-footer {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 4rem;
  background-color: #ca005d;
  color: #ffffff;
  padding-top: 3rem;
  padding-right: 5%;
  padding-bottom: 3rem;
  padding-left: 5%;
}
body > footer .content-wrapper,
.manon-root > footer .content-wrapper,
.page-footer .content-wrapper {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  padding-right: 3rem;
  padding-left: 3rem;
  max-width: 82rem;
  display: flex;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
body > footer a,
.manon-root > footer a,
.page-footer a {
  text-decoration: none;
  color: inherit;
}
body > footer a:hover,
.manon-root > footer a:hover,
.page-footer a:hover {
  color: inherit;
}
body > footer a:visited,
.manon-root > footer a:visited,
.page-footer a:visited {
  color: inherit;
}
body > footer a:visited:hover,
.manon-root > footer a:visited:hover,
.page-footer a:visited:hover {
  color: inherit;
}
body > footer a:focus-visible,
.manon-root > footer a:focus-visible,
.page-footer a:focus-visible {
  outline-color: #ffffff;
}
body > footer ul,
body > footer ol,
.manon-root > footer ul,
.manon-root > footer ol,
.page-footer ul,
.page-footer ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  flex-direction: column;
}
body > footer ul li,
body > footer ol li,
.manon-root > footer ul li,
.manon-root > footer ol li,
.page-footer ul li,
.page-footer ol li {
  display: flex;
  list-style: none;
  box-sizing: border-box;
}
body > footer h1,
body > footer h2,
body > footer h3,
body > footer h4,
body > footer h5,
body > footer h6,
body > footer p,
body > footer span,
body > footer li,
.manon-root > footer h1,
.manon-root > footer h2,
.manon-root > footer h3,
.manon-root > footer h4,
.manon-root > footer h5,
.manon-root > footer h6,
.manon-root > footer p,
.manon-root > footer span,
.manon-root > footer li,
.page-footer h1,
.page-footer h2,
.page-footer h3,
.page-footer h4,
.page-footer h5,
.page-footer h6,
.page-footer p,
.page-footer span,
.page-footer li {
  color: inherit;
  text-align: inherit;
}
body > footer nav,
.manon-root > footer nav,
.page-footer nav {
  flex-direction: column;
  width: auto;
}
body > footer nav ul,
body > footer nav ol,
.manon-root > footer nav ul,
.manon-root > footer nav ol,
.page-footer nav ul,
.page-footer nav ol {
  background-color: transparent;
}
body > footer nav ul li::before,
body > footer nav ol li::before,
.manon-root > footer nav ul li::before,
.manon-root > footer nav ol li::before,
.page-footer nav ul li::before,
.page-footer nav ol li::before {
  background-color: #ffffff;
}
body > footer .meta,
.manon-root > footer .meta,
.page-footer .meta {
  border-top: 1px solid #ffffff;
  padding: 1rem 0;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 3rem auto 0 auto;
  width: 100%;
  max-width: 82rem;
}
body > footer .meta,
.manon-root > footer .meta,
.page-footer .meta {
  display: flex;
}

form input[type=checkbox],
form input[type=radio],
form input[type=range],
form progress {
  accent-color: #01689b;
}

form.horizontal fieldset .button-container, form fieldset > div.button-container, form fieldset .button-container {
  /* Removing gap as it is not supported within fieldsets */
  gap: 0;
  width: auto;
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
}
form.horizontal fieldset .button-container button, form fieldset .button-container button,
form fieldset .button-container a.button,
form fieldset .button-container input[type=button],
form fieldset .button-container input[type=submit],
form fieldset .button-container input[type=reset] {
  float: left;
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
}
form .button-container {
  width: auto;
}
form.horizontal fieldset > div.button-container {
  gap: 1rem;
}

form button,
form a.button,
form input[type=button],
form input[type=submit],
form input[type=reset] {
  box-sizing: border-box;
}
form button > button:last-child,
form button > a.button:last-child,
form button > input[type=button]:last-child,
form button > input[type=submit]:last-child,
form button > input[type=reset]:last-child,
form a.button > button:last-child,
form a.button > a.button:last-child,
form a.button > input[type=button]:last-child,
form a.button > input[type=submit]:last-child,
form a.button > input[type=reset]:last-child,
form input[type=button] > button:last-child,
form input[type=button] > a.button:last-child,
form input[type=button] > input[type=button]:last-child,
form input[type=button] > input[type=submit]:last-child,
form input[type=button] > input[type=reset]:last-child,
form input[type=submit] > button:last-child,
form input[type=submit] > a.button:last-child,
form input[type=submit] > input[type=button]:last-child,
form input[type=submit] > input[type=submit]:last-child,
form input[type=submit] > input[type=reset]:last-child,
form input[type=reset] > button:last-child,
form input[type=reset] > a.button:last-child,
form input[type=reset] > input[type=button]:last-child,
form input[type=reset] > input[type=submit]:last-child,
form input[type=reset] > input[type=reset]:last-child {
  margin: 0 0 -2rem 0;
}
form > button:last-child,
form > a.button:last-child,
form > input[type=button]:last-child,
form > input[type=submit]:last-child,
form > input[type=reset]:last-child {
  margin: 0 0 -2rem 0;
}

form input[type=checkbox] {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}
form input[type=checkbox] + label {
  width: auto;
  cursor: pointer;
  margin-top: 0;
}
form input[type=checkbox]:disabled {
  cursor: not-allowed;
}
form .checkbox > div {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
form .checkbox p.error,
form .checkbox p.warning,
form .checkbox p.confirmation,
form .checkbox p.explanation,
form .checkbox p.primary {
  margin: 0;
}
form .required > div.checkbox {
  flex-direction: row;
}
.combined-field {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0;
  flex-wrap: nowrap;
}
.combined-field button {
  min-height: 100%;
  min-width: fit-content;
  justify-content: center;
}

input.error, input.warning, input.confirmation, input.explanation, input.primary,
select.error,
select.warning,
select.confirmation,
select.explanation,
select.primary,
textarea.error,
textarea.warning,
textarea.confirmation,
textarea.explanation,
textarea.primary,
input[type=checkbox]:not(:checked).error,
input[type=checkbox]:not(:checked).warning,
input[type=checkbox]:not(:checked).confirmation,
input[type=checkbox]:not(:checked).explanation,
input[type=checkbox]:not(:checked).primary,
input[type=radio]:not(:checked).error,
input[type=radio]:not(:checked).warning,
input[type=radio]:not(:checked).confirmation,
input[type=radio]:not(:checked).explanation,
input[type=radio]:not(:checked).primary {
  border-width: 1px;
  border-style: solid;
  background-color: #fff;
}

form fieldset .checkbox {
  padding: 0;
  display: initial;
  margin: 0 0 0.5rem 0;
}
form fieldset .checkbox input[type=checkbox] {
  padding: 0;
  cursor: pointer;
  margin: 0;
  min-height: 0;
  float: left;
}
form fieldset .checkbox input[type=checkbox] + label {
  cursor: pointer;
  padding-left: 0.5rem;
  margin: 0;
  display: block;
  width: unset;
  float: left;
  line-height: 1.5rem;
}
form fieldset .checkbox input[type=checkbox]:disabled {
  cursor: not-allowed;
}
form fieldset .checkbox input[type=checkbox]:disabled + label {
  cursor: not-allowed;
}
form fieldset .checkbox.required {
  flex-direction: column;
}
form fieldset .checkbox.required > div {
  padding: 0;
  display: initial;
}
form fieldset .checkbox fieldset .checkbox {
  margin: 0 0 0.5rem 0;
}

form fieldset .radio {
  padding: 0;
  display: initial;
  margin: 0;
}
form fieldset .radio input[type=radio] {
  padding: 0;
  cursor: pointer;
  margin: 0;
}
form fieldset .radio input[type=radio] + label {
  cursor: pointer;
  margin: 0;
}
form fieldset .radio input[type=radio]:disabled {
  cursor: not-allowed;
}
form fieldset .radio input[type=radio]:disabled + label {
  cursor: not-allowed;
}
form fieldset .radio.required {
  flex-direction: column;
}
form fieldset .radio.required > div {
  padding: 0;
  display: initial;
}
form fieldset fieldset .radio {
  margin: 0;
}

form.horizontal > fieldset > fieldset legend {
  font-weight: inherit;
  margin: 0;
  box-sizing: border-box;
  float: left;
}
@media (width >= 24rem) {
  form.horizontal > fieldset > fieldset > * {
    float: right;
  }
}

form fieldset {
  padding: 0;
  border: 0;
  margin: 0;
  display: inline-block;
  position: relative;
}

/* Fieldset styling is a bit different compared to the default form styling.
This is because of a couple of styling restrictions and issues concerning fieldsets and it's children.
- Fieldsets can't use flexbox 
- When elements within the fieldset use flexbox, unwanted white-space appears at the bottom of the fieldset.
The amount of whitespace depends on the length of the fieldset before flex positioning took place. And will not be removed after. 

The usage of fieldsets is recommended because it is the semantically correct element to use for form grouping.
As well as it improves the experience for users who are using a screenreader to navigate the form. 

To prevent these issues to cause unexpected behaviour the fieldset and it's children within this set do no use flexbox for their positioning.
But the alternative styling as you can see below.

For more information on the bug see: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
and: https://bugs.chromium.org/p/chromium/issues/detail?id=262679 */
form > fieldset,
main section form > fieldset,
main article form > fieldset,
main div form > fieldset {
  width: 100%;
  border-width: 0;
}
form > fieldset legend,
main section form > fieldset legend,
main article form > fieldset legend,
main div form > fieldset legend {
  margin: 1.5rem 0;
}
form > fieldset,
main section form > fieldset,
main article form > fieldset,
main div form > fieldset {
  /*Fieldsets within fieldsets ignore the "*" all selector */
}
form > fieldset > fieldset,
main section form > fieldset > fieldset,
main article form > fieldset > fieldset,
main div form > fieldset > fieldset {
  display: inline-block;
  margin: 1.5rem 0;
  border-width: 0;
}
form > fieldset > fieldset:last-child,
main section form > fieldset > fieldset:last-child,
main article form > fieldset > fieldset:last-child,
main div form > fieldset > fieldset:last-child {
  margin-bottom: 0;
}
form > fieldset div,
main section form > fieldset div,
main article form > fieldset div,
main div form > fieldset div {
  display: block;
  /* used to re-renders the div so long labels won't run out of the div */
  float: left;
  width: 100%;
}
form > fieldset div > div,
main section form > fieldset div > div,
main article form > fieldset div > div,
main div form > fieldset div > div {
  float: left;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
}
form > fieldset div label,
main section form > fieldset div label,
main article form > fieldset div label,
main div form > fieldset div label {
  margin: 1.5rem 0;
}
form > fieldset,
main section form > fieldset,
main article form > fieldset,
main div form > fieldset {
  /* Notifications */
}
form > fieldset > div.error > *, form > fieldset > div.warning > *, form > fieldset > div.explanation > *, form > fieldset > div.confirmation > *, form > fieldset > div.system > *,
main section form > fieldset > div.error > *,
main section form > fieldset > div.warning > *,
main section form > fieldset > div.explanation > *,
main section form > fieldset > div.confirmation > *,
main section form > fieldset > div.system > *,
main article form > fieldset > div.error > *,
main article form > fieldset > div.warning > *,
main article form > fieldset > div.explanation > *,
main article form > fieldset > div.confirmation > *,
main article form > fieldset > div.system > *,
main div form > fieldset > div.error > *,
main div form > fieldset > div.warning > *,
main div form > fieldset > div.explanation > *,
main div form > fieldset > div.confirmation > *,
main div form > fieldset > div.system > * {
  max-width: 100%;
  width: 100%;
}
form > fieldset .nota-bene,
main section form > fieldset .nota-bene,
main article form > fieldset .nota-bene,
main div form > fieldset .nota-bene {
  display: block;
}

form.horizontal .grouped-choice-list legend {
  font-weight: normal;
  width: auto;
  margin: 0;
}
@media (width >= 24rem) {
  form.horizontal .grouped-choice-list legend {
    position: absolute;
    padding: 0;
  }
}

form.help {
  position: relative;
  padding-right: 4rem;
}
form.help .form-group {
  width: 100%;
  position: relative;
}
form.help .help-container {
  position: relative;
  box-sizing: border-box;
}
form.help .help-container .form-group.required {
  border: 1px dashed red !important;
}
form.help > div .help-button,
form.help > fieldset .help-button {
  display: flex;
  position: absolute;
  gap: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  font-size: 0;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  top: 0rem;
  width: 2.75rem;
  height: 2.75rem;
  right: 0rem;
  padding: 0.5rem;
  border-width: 2px;
  border-style: solid;
  border-color: #ca005d;
  background-color: #ca005d;
  color: #ffffff;
  margin-right: -4rem;
}
form.help > div .help-button::before,
form.help > fieldset .help-button::before {
  mask-size: contain;
  content: "";
  background-color: #ffffff;
  mask-image: url("./img/icons/ro/questionmark.svg");
  width: 1rem;
  height: 1rem;
  mask-repeat: no-repeat;
  mask-position: center;
}
form.help > div .help-button + .explanation,
form.help > fieldset .help-button + .explanation {
  margin-bottom: 0;
}
form.help > div p.explanation.collapsed,
form.help > div div.explanation.collapsed,
form.help > fieldset p.explanation.collapsed,
form.help > fieldset div.explanation.collapsed {
  display: none;
}
form.help > div *:has(.help-button),
form.help > fieldset *:has(.help-button) {
  position: relative;
}
form.help fieldset {
  max-width: 100%;
  min-width: 0;
  gap: 0;
}
form.help fieldset .help-button {
  display: inline-block;
}
form.help fieldset .help-button + .explanation {
  margin-top: 0;
}
form.help fieldset .help-button::before {
  display: inline-block;
}

/* Fieldset styling is a bit different compared to the default form styling.
This is because of a couple of styling restrictions and issues concerning fieldsets and it's children.
- Fieldsets can't use flexbox
- When elements within the fieldset use flexbox, unwanted white-space appears at the bottom of the fieldset.
The amount of whitespace depends on the length of the fieldset before flex positioning took place. And will not be removed after.

The usage of fieldsets is recommended because it is the semantically correct element to use for form grouping.
As well as it improves the experience for users who are using a screenreader to navigate the form.

To prevent these issues to cause unexpected behaviour the fieldset and it's children within this set do no use flexbox for their positioning.
But the alternative styling as you can see below.

For more information on the bug see: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers
and: https://bugs.chromium.org/p/chromium/issues/detail?id=262679 */
form.horizontal > fieldset {
  width: 100%;
}
form.horizontal > fieldset > div {
  display: block;
  /* resetting gap as it can not be used within fieldsets */
  gap: 0;
  /* Adds margin instead of gap */
}
@media (width >= 24rem) {
  form.horizontal > fieldset > div > * {
    /* resetting gap as it can not be used within fieldsets */
    gap: 0;
    /* float objects to move inputs into place even when there is no label */
    float: right;
    width: 66.66%;
  }
  form.horizontal > fieldset > div > div {
    margin-bottom: 0;
  }
  form.horizontal > fieldset > div label {
    float: left;
    width: 33.33%;
    margin-top: 1rem;
  }
}
form.horizontal > fieldset .required .nota-bene {
  float: left;
}
form.horizontal > fieldset input[type=color] {
  float: left;
}
form.horizontal > fieldset > .checkbox,
form.horizontal > fieldset > .radio {
  margin-left: 0;
  width: 100%;
  float: right;
}
@media (width >= 24rem) {
  form.horizontal > fieldset > .checkbox,
  form.horizontal > fieldset > .radio {
    width: 66.66%;
  }
}
form.horizontal > fieldset > .checkbox .horizontal,
form.horizontal > fieldset > .radio .horizontal {
  display: block;
  gap: 0;
}
form.horizontal > fieldset > .checkbox input,
form.horizontal > fieldset > .checkbox label,
form.horizontal > fieldset > .radio input,
form.horizontal > fieldset > .radio label {
  float: none;
  margin: 0;
}
form.horizontal > fieldset > .checkbox input,
form.horizontal > fieldset > .radio input {
  float: left;
}
form.horizontal > fieldset > .checkbox label,
form.horizontal > fieldset > .radio label {
  margin-top: 0;
  display: block;
  float: left;
}
form.horizontal > fieldset > .checkbox,
form.horizontal > fieldset > .radio {
  /* Help button */
}
form.horizontal > fieldset > .checkbox > button,
form.horizontal > fieldset > .radio > button {
  top: 0;
}
form.horizontal > fieldset > .checkbox,
form.horizontal > fieldset > .radio {
  /* Help text */
}
form.horizontal > fieldset > .checkbox > p,
form.horizontal > fieldset > .checkbox > div,
form.horizontal > fieldset > .radio > p,
form.horizontal > fieldset > .radio > div {
  width: 100%;
}
@media (width >= 24rem) {
  form.horizontal > fieldset > button,
  form.horizontal > fieldset > a.button,
  form.horizontal > fieldset > input[type=button],
  form.horizontal > fieldset > input[type=submit],
  form.horizontal > fieldset > input[type=reset],
  form.horizontal > fieldset > a,
  form.horizontal > fieldset > fieldset {
    padding: 0;
    margin-left: 0;
  }
  form.horizontal > fieldset + button, form.horizontal > fieldset + a.button, form.horizontal > fieldset + input[type=button], form.horizontal > fieldset + input[type=submit], form.horizontal > fieldset + input[type=reset] {
    margin-left: 33.33%;
  }
}
form.horizontal fieldset.form-group {
  max-width: 100%;
  margin-left: 0;
}
form.horizontal fieldset.form-group legend {
  float: left;
  width: 100%;
  max-width: 33.33%;
  margin-top: 1rem;
}
@media (width >= 24rem) {
  form.horizontal fieldset.form-group > div {
    /* resetting gap as it can not be used within fieldsets */
    gap: 0;
    /* float objects to move inputs into place even when there is no label */
    float: right;
    width: 66.66%;
    margin-bottom: 0;
  }
  form.horizontal fieldset.form-group label {
    float: left;
    width: 33.33%;
    margin-top: 1rem;
  }
}

form.horizontal {
  flex-direction: column !important;
  align-items: flex-start;
}
form.horizontal label {
  width: 100%;
  max-width: 33.33%;
}
form.horizontal > div.form-group,
form.horizontal > section.form-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  width: 100%;
  gap: 0.5rem;
  align-items: flex-start;
}
form.horizontal > div.form-group > *,
form.horizontal > section.form-group > * {
  flex-grow: 1;
  box-sizing: border-box;
}
form.horizontal > div.form-group.checkbox,
form.horizontal > section.form-group.checkbox {
  margin: 0;
  flex-wrap: nowrap;
}
@media (width >= 24rem) {
  form.horizontal > div.form-group.checkbox,
  form.horizontal > section.form-group.checkbox {
    margin-left: calc(33.33% + 0.5rem);
  }
}
form.horizontal > div.form-group.checkbox > div,
form.horizontal > div.form-group.checkbox form.horizontal > section.form-group.checkbox > div,
form.horizontal > div.form-group.checkbox input[type=checkbox],
form.horizontal > section.form-group.checkbox form.horizontal > div.form-group.checkbox > div,
form.horizontal > section.form-group.checkbox > div,
form.horizontal > section.form-group.checkbox input[type=checkbox] {
  /* Align checkbox with input fields */
  margin-left: 0;
  flex-grow: 0;
  margin-right: 0;
}
form.horizontal > div.form-group.checkbox > div + label,
form.horizontal > div.form-group.checkbox form.horizontal > section.form-group.checkbox > div + label,
form.horizontal > div.form-group.checkbox input[type=checkbox] + label,
form.horizontal > section.form-group.checkbox form.horizontal > div.form-group.checkbox > div + label,
form.horizontal > section.form-group.checkbox > div + label,
form.horizontal > section.form-group.checkbox input[type=checkbox] + label {
  max-width: calc(100% - 1.5rem);
}
form.horizontal > div.form-group.checkbox > div input[type=checkbox],
form.horizontal > section.form-group.checkbox > div input[type=checkbox] {
  margin-left: 0;
}
form.horizontal > div.form-group.radio,
form.horizontal > section.form-group.radio {
  flex-wrap: nowrap;
}
form.horizontal > div.form-group.radio > div,
form.horizontal > div.form-group.radio form.horizontal > section.form-group.radio > div,
form.horizontal > div.form-group.radio input[type=radio],
form.horizontal > section.form-group.radio form.horizontal > div.form-group.radio > div,
form.horizontal > section.form-group.radio > div,
form.horizontal > section.form-group.radio input[type=radio] {
  flex-grow: 0;
  margin-right: 0;
}
@media (width >= 24rem) {
  form.horizontal > div.form-group.radio > div,
  form.horizontal > div.form-group.radio form.horizontal > section.form-group.radio > div,
  form.horizontal > div.form-group.radio input[type=radio],
  form.horizontal > section.form-group.radio form.horizontal > div.form-group.radio > div,
  form.horizontal > section.form-group.radio > div,
  form.horizontal > section.form-group.radio input[type=radio] {
    /* Align radio with input fields */
    margin-left: calc(33.33% + 0.5rem);
  }
}
form.horizontal > div.form-group.radio > div input[type=radio],
form.horizontal > section.form-group.radio > div input[type=radio] {
  margin-left: 0;
}
form.horizontal > div.form-group.checkbox, form.horizontal > div.form-group.radio,
form.horizontal > section.form-group.checkbox,
form.horizontal > section.form-group.radio {
  justify-content: flex-start;
}
form.horizontal > div.form-group.checkbox > .nota-bene, form.horizontal > div.form-group.radio > .nota-bene,
form.horizontal > section.form-group.checkbox > .nota-bene,
form.horizontal > section.form-group.radio > .nota-bene {
  margin-left: calc(33.33% + 0.5rem);
}
form.horizontal > div.form-group,
form.horizontal > section.form-group {
  /* Notifications */
}
form.horizontal > div.form-group.error, form.horizontal > div.form-group.warning, form.horizontal > div.form-group.explanation, form.horizontal > div.form-group.confirmation, form.horizontal > div.form-group.system,
form.horizontal > section.form-group.error,
form.horizontal > section.form-group.warning,
form.horizontal > section.form-group.explanation,
form.horizontal > section.form-group.confirmation,
form.horizontal > section.form-group.system {
  margin: 0;
}
form.horizontal > div.form-group.error > *, form.horizontal > div.form-group.warning > *, form.horizontal > div.form-group.explanation > *, form.horizontal > div.form-group.confirmation > *, form.horizontal > div.form-group.system > *,
form.horizontal > section.form-group.error > *,
form.horizontal > section.form-group.warning > *,
form.horizontal > section.form-group.explanation > *,
form.horizontal > section.form-group.confirmation > *,
form.horizontal > section.form-group.system > * {
  max-width: 100%;
}
form.horizontal > div.form-group > button,
form.horizontal > div.form-group > a.button,
form.horizontal > div.form-group > input[type=button],
form.horizontal > div.form-group > input[type=submit],
form.horizontal > div.form-group > input[type=reset],
form.horizontal > section.form-group > button,
form.horizontal > section.form-group > a.button,
form.horizontal > section.form-group > input[type=button],
form.horizontal > section.form-group > input[type=submit],
form.horizontal > section.form-group > input[type=reset] {
  flex-grow: 0;
}
@media (width >= 24rem) {
  form.horizontal > div.form-group,
  form.horizontal > section.form-group {
    flex-wrap: nowrap;
  }
  form.horizontal > div.form-group label,
  form.horizontal > section.form-group label {
    width: 100%;
    max-width: 33.33%;
  }
}
form.horizontal > div .option-group,
form.horizontal > section .option-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (width >= 24rem) {
  form.horizontal > div .option-group > *,
  form.horizontal > section .option-group > * {
    margin-left: calc(33.33% + 0.5rem);
  }
}
@media (width >= 24rem) {
  form.horizontal > div > button,
  form.horizontal > div > a.button,
  form.horizontal > div > input[type=button],
  form.horizontal > div > input[type=submit],
  form.horizontal > div > input[type=reset],
  form.horizontal > div > a,
  form.horizontal > div form.horizontal > section > button,
  form.horizontal > div form.horizontal > section > a.button,
  form.horizontal > div form.horizontal > section > input[type=button],
  form.horizontal > div form.horizontal > section > input[type=submit],
  form.horizontal > div form.horizontal > section > input[type=reset],
  form.horizontal > div form.horizontal > section > a,
  form.horizontal > section form.horizontal > div > div > button,
  form.horizontal > section form.horizontal > div > div > a.button,
  form.horizontal > section form.horizontal > div > div > input[type=button],
  form.horizontal > section form.horizontal > div > div > input[type=submit],
  form.horizontal > section form.horizontal > div > div > input[type=reset],
  form.horizontal > section form.horizontal > div > div > a,
  form.horizontal > section > div > button,
  form.horizontal > section > div > a.button,
  form.horizontal > section > div > input[type=button],
  form.horizontal > section > div > input[type=submit],
  form.horizontal > section > div > input[type=reset],
  form.horizontal > section > div > a,
  form.horizontal > section form.horizontal > div > button,
  form.horizontal > section form.horizontal > div > a.button,
  form.horizontal > section form.horizontal > div > input[type=button],
  form.horizontal > section form.horizontal > div > input[type=submit],
  form.horizontal > section form.horizontal > div > input[type=reset],
  form.horizontal > section form.horizontal > div > a,
  form.horizontal > section > button,
  form.horizontal > section > a.button,
  form.horizontal > section > input[type=button],
  form.horizontal > section > input[type=submit],
  form.horizontal > section > input[type=reset],
  form.horizontal > section > a {
    width: auto;
    max-width: 100%;
    flex-grow: 0;
  }
  form.horizontal > div > div.horizontal,
  form.horizontal > div > div.button-container,
  form.horizontal > section > div.horizontal,
  form.horizontal > section > div.button-container {
    flex-wrap: wrap;
  }
  form.horizontal > div > div.horizontal button,
  form.horizontal > div > div.horizontal a.button,
  form.horizontal > div > div.horizontal input[type=button],
  form.horizontal > div > div.horizontal input[type=submit],
  form.horizontal > div > div.horizontal input[type=reset],
  form.horizontal > div > div.button-container button,
  form.horizontal > div > div.button-container a.button,
  form.horizontal > div > div.button-container input[type=button],
  form.horizontal > div > div.button-container input[type=submit],
  form.horizontal > div > div.button-container input[type=reset],
  form.horizontal > section > div.horizontal button,
  form.horizontal > section > div.horizontal a.button,
  form.horizontal > section > div.horizontal input[type=button],
  form.horizontal > section > div.horizontal input[type=submit],
  form.horizontal > section > div.horizontal input[type=reset],
  form.horizontal > section > div.button-container button,
  form.horizontal > section > div.button-container a.button,
  form.horizontal > section > div.button-container input[type=button],
  form.horizontal > section > div.button-container input[type=submit],
  form.horizontal > section > div.button-container input[type=reset] {
    max-width: 100%;
  }
}

form.inline {
  padding: 0;
  background-color: transparent;
  max-width: unset;
  width: auto;
}
form.inline button,
form.inline a.button,
form.inline input[type=button],
form.inline input[type=submit],
form.inline input[type=reset] {
  box-sizing: border-box;
  align-self: stretch;
  margin: 0;
}
input {
  width: 100%;
  box-sizing: border-box;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  background-color: #ffffff;
  font-size: inherit;
  min-height: 2.75rem;
  border-width: 1px;
  border-style: solid;
  border-color: #01689b;
}
input:disabled {
  cursor: not-allowed;
}

header input {
  min-height: 0;
  border-width: 0;
}

form fieldset.form-group,
form.horizontal fieldset.form-group {
  max-width: 100%;
  margin-left: 0;
}
form .required > div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

form select {
  font-size: inherit;
  color: #292929;
  width: 100%;
  min-width: 15rem;
  max-width: 100%;
  min-height: 2.75rem;
  border: 1px solid #01689b;
  padding: 0 0.75rem;
}

form textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 1rem;
  font-size: inherit;
  border-radius: 0;
  max-width: 100%;
  resize: vertical;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start;
  padding-top: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  background-color: #f3f3f3;
  gap: 1.5rem;
  max-width: 50rem;
}
form div,
form div.form-group {
  display: flex;
  width: 100%;
  gap: 0.5rem;
  flex-direction: column;
}
form .form-group:has(.help-container) {
  padding: 0;
}
form div,
form fieldset {
  box-sizing: border-box;
}
form div.horizontal,
form fieldset.horizontal {
  flex-wrap: nowrap;
}
form .centered {
  display: table-cell;
  width: auto;
  text-align: center;
}

body > header,
.manon-root > header,
.page-header {
  display: flex;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: stretch;
  color: #ffffff;
  font-size: 1.25rem;
}
body > header > section.content-wrapper,
body > header > div.content-wrapper,
.manon-root > header > section.content-wrapper,
.manon-root > header > div.content-wrapper,
.page-header > section.content-wrapper,
.page-header > div.content-wrapper {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
}
body > header > section.content-wrapper button,
body > header > div.content-wrapper button,
.manon-root > header > section.content-wrapper button,
.manon-root > header > div.content-wrapper button,
.page-header > section.content-wrapper button,
.page-header > div.content-wrapper button {
  align-self: center;
}
body > header a,
.manon-root > header a,
.page-header a {
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  padding: 0 0.5rem;
  display: flex;
  gap: 0.5rem;
}
body > header a:visited, body > header a:visited:hover,
.manon-root > header a:visited,
.manon-root > header a:visited:hover,
.page-header a:visited,
.page-header a:visited:hover {
  color: inherit;
}
body > header a[aria-current=page], body > header a[aria-current=page]:hover, body > header a:hover, body > header a:visited:hover, body > header a[aria-current=page]:visited:hover,
.manon-root > header a[aria-current=page],
.manon-root > header a[aria-current=page]:hover,
.manon-root > header a:hover,
.manon-root > header a:visited:hover,
.manon-root > header a[aria-current=page]:visited:hover,
.page-header a[aria-current=page],
.page-header a[aria-current=page]:hover,
.page-header a:hover,
.page-header a:visited:hover,
.page-header a[aria-current=page]:visited:hover {
  color: #000000;
  background-color: #efb2ce;
}
body > header ul,
body > header ol,
.manon-root > header ul,
.manon-root > header ol,
.page-header ul,
.page-header ol {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  gap: 0;
}
body > header ul li,
body > header ol li,
.manon-root > header ul li,
.manon-root > header ol li,
.page-header ul li,
.page-header ol li {
  list-style: none;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
  align-items: stretch;
}
body > header ul li::before,
body > header ol li::before,
.manon-root > header ul li::before,
.manon-root > header ol li::before,
.page-header ul li::before,
.page-header ol li::before {
  /* Preventing default nav before to show up */
  display: none;
}
body > header ul li a,
body > header ol li a,
.manon-root > header ul li a,
.manon-root > header ol li a,
.page-header ul li a,
.page-header ol li a {
  max-width: unset;
}
body > header nav,
.manon-root > header nav,
.page-header nav {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  margin: 0;
  align-items: stretch;
  width: 100%;
  background-color: #ca005d;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  min-height: 4.375rem;
}
body > header nav .content-wrapper,
.manon-root > header nav .content-wrapper,
.page-header nav .content-wrapper {
  display: flex;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding-right: 3rem;
  padding-left: 3rem;
  max-width: 82rem;
}
body > header .actions,
.manon-root > header .actions,
.page-header .actions {
  gap: 1rem;
}
body > header form.inline,
body > header form,
.manon-root > header form.inline,
.manon-root > header form,
.page-header form.inline,
.page-header form {
  align-items: stretch;
  justify-content: center;
}
body > header form.inline button,
body > header form.inline a.button,
body > header form.inline input[type=button],
body > header form.inline input[type=submit],
body > header form.inline input[type=reset],
body > header form button,
body > header form a.button,
body > header form input[type=button],
body > header form input[type=submit],
body > header form input[type=reset],
.manon-root > header form.inline button,
.manon-root > header form.inline a.button,
.manon-root > header form.inline input[type=button],
.manon-root > header form.inline input[type=submit],
.manon-root > header form.inline input[type=reset],
.manon-root > header form button,
.manon-root > header form a.button,
.manon-root > header form input[type=button],
.manon-root > header form input[type=submit],
.manon-root > header form input[type=reset],
.page-header form.inline button,
.page-header form.inline a.button,
.page-header form.inline input[type=button],
.page-header form.inline input[type=submit],
.page-header form.inline input[type=reset],
.page-header form button,
.page-header form a.button,
.page-header form input[type=button],
.page-header form input[type=submit],
.page-header form input[type=reset] {
  align-self: stretch;
  height: 100%;
}
body > header form.inline button:hover,
body > header form.inline a.button:hover,
body > header form.inline input[type=button]:hover,
body > header form.inline input[type=submit]:hover,
body > header form.inline input[type=reset]:hover,
body > header form button:hover,
body > header form a.button:hover,
body > header form input[type=button]:hover,
body > header form input[type=submit]:hover,
body > header form input[type=reset]:hover,
.manon-root > header form.inline button:hover,
.manon-root > header form.inline a.button:hover,
.manon-root > header form.inline input[type=button]:hover,
.manon-root > header form.inline input[type=submit]:hover,
.manon-root > header form.inline input[type=reset]:hover,
.manon-root > header form button:hover,
.manon-root > header form a.button:hover,
.manon-root > header form input[type=button]:hover,
.manon-root > header form input[type=submit]:hover,
.manon-root > header form input[type=reset]:hover,
.page-header form.inline button:hover,
.page-header form.inline a.button:hover,
.page-header form.inline input[type=button]:hover,
.page-header form.inline input[type=submit]:hover,
.page-header form.inline input[type=reset]:hover,
.page-header form button:hover,
.page-header form a.button:hover,
.page-header form input[type=button]:hover,
.page-header form input[type=submit]:hover,
.page-header form input[type=reset]:hover {
  background-color: #f7d9e7;
  color: #000000;
}

.heading-xxl {
  font-size: 3rem;
  color: inherit;
}

.heading-xl {
  font-size: 2.88651rem;
  color: inherit;
}

.heading-large {
  font-size: 2.02729rem;
  font-weight: bold;
  color: inherit;
  margin: 1rem 0;
}

.heading-normal {
  font-size: 1.80203rem;
  font-weight: bold;
  color: inherit;
  margin: 1rem 0;
}

.heading-small {
  font-size: 1.60181rem;
  font-weight: normal;
  color: #01689b;
  margin: 0.5rem 0;
}

.heading-xs {
  font-size: 1.265625rem;
  font-weight: bold;
  color: inherit;
  margin: 0.5rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: auto;
}

h1,
h1 > a {
  font-size: 2.02729rem;
  font-weight: bold;
  margin: 1rem 0;
}

h2,
h2 > a {
  font-size: 1.80203rem;
  font-weight: bold;
  margin: 1rem 0;
}

h3,
h3 > a {
  font-size: 1.60181rem;
  color: #01689b;
  font-weight: normal;
  margin: 0.5rem 0;
}

h4,
h4 > a {
  font-size: 1.265625rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

h5,
h5 > a {
  font-size: 1.265625rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

h6,
h6 > a {
  font-size: initial;
  margin: 0.5rem 0;
}

.heading-xxl {
  font-size: 3rem;
  color: inherit;
}

.heading-xl {
  font-size: 2.88651rem;
  color: inherit;
}

.heading-large {
  font-size: 2.02729rem;
  font-weight: bold;
  color: inherit;
  margin: 1rem 0;
}

.heading-normal {
  font-size: 1.80203rem;
  font-weight: bold;
  color: inherit;
  margin: 1rem 0;
}

.heading-small {
  font-size: 1.60181rem;
  font-weight: normal;
  color: #01689b;
  margin: 0.5rem 0;
}

.heading-xs {
  font-size: 1.265625rem;
  font-weight: bold;
  color: inherit;
  margin: 0.5rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: auto;
}

h1,
h1 > a {
  font-size: 2.02729rem;
  font-weight: bold;
  margin: 1rem 0;
}

h2,
h2 > a {
  font-size: 1.80203rem;
  font-weight: bold;
  margin: 1rem 0;
}

h3,
h3 > a {
  font-size: 1.60181rem;
  color: #01689b;
  font-weight: normal;
  margin: 0.5rem 0;
}

h4,
h4 > a {
  font-size: 1.265625rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

h5,
h5 > a {
  font-size: 1.265625rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

h6,
h6 > a {
  font-size: initial;
  margin: 0.5rem 0;
}

.hero .content-container {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.hero .content-container ul,
.hero .content-container ol {
  display: flex;
  flex-direction: column;
  margin: 0;
  box-sizing: border-box;
}
.hero .content-container ul li,
.hero .content-container ol li {
  box-sizing: border-box;
}
.hero .content-container ul li a,
.hero .content-container ol li a {
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.hero .content-container .tile {
  display: flex;
  flex-direction: column;
}
.hero .content-container .tile > * {
  box-sizing: border-box;
  width: 100%;
}
.hero .content-container .tile h1 {
  color: inherit;
}
.hero .content-container .tile h2 {
  color: inherit;
}
.hero .content-container .tile ul,
.hero .content-container .tile ol {
  display: flex;
  flex-direction: column;
  margin: 0;
  box-sizing: border-box;
  padding-left: 2rem;
}
.hero .content-container .tile ul li,
.hero .content-container .tile ol li {
  box-sizing: border-box;
}
.hero .content-container .tile ul li a,
.hero .content-container .tile ol li a {
  line-height: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.hero > div {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.hero {
  position: relative;
  min-height: 25rem;
  height: auto;
  background-color: #f7d9e7;
  margin: -4rem 0 0 0;
  border-radius: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #000000;
  font-size: 1.6rem;
  box-sizing: border-box;
  display: flex;
}
.hero .content-wrapper {
  z-index: 1;
  padding: 1.75rem 3rem;
  max-width: 82rem;
  justify-content: center;
  gap: 1rem;
  display: flex;
}
.hero .cover {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  padding: 0;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6 {
  font-size: 2.88651rem;
  padding: 0;
}
@media (width >= 50rem) {
  .hero {
    padding: 0;
  }
}

.icon {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  content: "";
  height: 1rem;
  width: 1rem;
  min-width: 1rem;
  display: inline-block;
}

svg.icon,
img.icon,
a.icon {
  background-color: transparent;
}

img.image-background, .image-background img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  padding: 0; /* Resetting padding */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

*:has(> .image-background) {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  min-width: 100%;
}

div.image-background:has(img:only-child) {
  position: absolute;
  top: 0;
  left: 0;
}

img.image-cover, .image-covers > div img,
.image-covers li img, .image-cover img {
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  padding: 0; /* Resetting padding */
  height: 100%;
}

/* Image container */
ul.images-round li > div, .images-round > div, .image-round > div {
  width: 100%;
  padding: 0; /* Resetting padding */
  padding-bottom: 100%;
  position: relative;
}

ul.images-round li > div img, .images-round > div img, .image-round > div img {
  position: absolute;
  object-fit: cover;
  padding: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.image-round {
  margin: 0;
}
/* Div with round images inside */
/* List with round images */
ul.images-round {
  width: 100%;
  margin: 0;
  padding: 0;
}
ul.images-round li {
  list-style: none;
}
/* Image container */
ul.images-square li > div, .images-square > div, .image-square > div {
  width: 100%;
  padding: 0; /* Resetting padding */
  padding-bottom: 100%;
  position: relative;
}

ul.images-square li > div img, .images-square > div img, .image-square > div img {
  position: absolute;
  object-fit: cover;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}

.image-square {
  margin: 0;
}
/* Div with square images inside */
/* List with square images */
ul.images-square {
  width: 100%;
  margin: 0;
  padding: 0;
}
ul.images-square li {
  list-style: none;
}
.introduction {
  font-size: 1.6rem;
}

.label {
  display: inline-block;
  text-align: center;
}

.language-selector,
body > header nav .language-selector,
.manon-root > header nav .language-selector,
.page-header nav .language-selector {
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  width: auto;
  position: relative;
  margin: unset;
}
.language-selector > p,
body > header nav .language-selector > p,
.manon-root > header nav .language-selector > p,
.page-header nav .language-selector > p {
  white-space: nowrap;
}
.language-selector ul,
body > header nav .language-selector ul,
.manon-root > header nav .language-selector ul,
.page-header nav .language-selector ul {
  position: static;
  padding: 0;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  min-width: 250px;
  max-width: 250px;
}
.language-selector ul li,
body > header nav .language-selector ul li,
.manon-root > header nav .language-selector ul li,
.page-header nav .language-selector ul li {
  list-style: none;
  padding: 0;
  display: flex;
  order: 1;
  margin: 0;
  overflow: auto;
  border-width: 0 0 1px 0;
  border-style: solid;
  line-height: 0;
}
.language-selector ul li a,
body > header nav .language-selector ul li a,
.manon-root > header nav .language-selector ul li a,
.page-header nav .language-selector ul li a {
  display: flex;
  justify-content: flex-start;
  text-decoration: none;
  margin-left: 0;
  font-size: inherit;
  color: inherit;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  padding: 0 1rem;
  min-height: 3rem;
}
.language-selector ul li a > button,
body > header nav .language-selector ul li a > button,
.manon-root > header nav .language-selector ul li a > button,
.page-header nav .language-selector ul li a > button {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
}
.language-selector ul li:first-child a,
body > header nav .language-selector ul li:first-child a,
.manon-root > header nav .language-selector ul li:first-child a,
.page-header nav .language-selector ul li:first-child a {
  border-top-width: 0;
}
.language-selector ul li,
body > header nav .language-selector ul li,
.manon-root > header nav .language-selector ul li,
.page-header nav .language-selector ul li {
  /* Selected language */
}
.language-selector ul li[aria-current=true],
body > header nav .language-selector ul li[aria-current=true],
.manon-root > header nav .language-selector ul li[aria-current=true],
.page-header nav .language-selector ul li[aria-current=true] {
  order: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}
.language-selector,
body > header nav .language-selector,
.manon-root > header nav .language-selector,
.page-header nav .language-selector {
  /* Hide option list */
}
.language-selector div[aria-expanded=false] ul,
.language-selector div[aria-expanded=false] ul li,
body > header nav .language-selector div[aria-expanded=false] ul,
body > header nav .language-selector div[aria-expanded=false] ul li,
.manon-root > header nav .language-selector div[aria-expanded=false] ul,
.manon-root > header nav .language-selector div[aria-expanded=false] ul li,
.page-header nav .language-selector div[aria-expanded=false] ul,
.page-header nav .language-selector div[aria-expanded=false] ul li {
  display: none;
}
.language-selector,
body > header nav .language-selector,
.manon-root > header nav .language-selector,
.page-header nav .language-selector {
  /* Expand option list */
}
.language-selector div[aria-expanded=true] ul,
body > header nav .language-selector div[aria-expanded=true] ul,
.manon-root > header nav .language-selector div[aria-expanded=true] ul,
.page-header nav .language-selector div[aria-expanded=true] ul {
  display: block;
  position: absolute;
}
.language-selector div[aria-expanded=true] ul li,
body > header nav .language-selector div[aria-expanded=true] ul li,
.manon-root > header nav .language-selector div[aria-expanded=true] ul li,
.page-header nav .language-selector div[aria-expanded=true] ul li {
  display: block;
  /* Selected language */
}
.language-selector div[aria-expanded=true] ul li[aria-current=true] a,
body > header nav .language-selector div[aria-expanded=true] ul li[aria-current=true] a,
.manon-root > header nav .language-selector div[aria-expanded=true] ul li[aria-current=true] a,
.page-header nav .language-selector div[aria-expanded=true] ul li[aria-current=true] a {
  cursor: default;
}
.language-selector,
body > header nav .language-selector,
.manon-root > header nav .language-selector,
.page-header nav .language-selector {
  /* Language selector options */
}
.language-selector > div,
body > header nav .language-selector > div,
.manon-root > header nav .language-selector > div,
.page-header nav .language-selector > div {
  width: auto;
  padding: 0;
  display: initial;
  margin: unset;
}
.language-selector > div > button,
body > header nav .language-selector > div > button,
.manon-root > header nav .language-selector > div > button,
.page-header nav .language-selector > div > button {
  display: flex;
  justify-content: flex-start;
  margin-left: 0;
  box-sizing: border-box;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
a {
  display: inline-flex;
  align-items: center;
  color: #01689b;
}
a:hover {
  color: #004161;
}
a:visited {
  color: #814081;
}
a:visited:hover {
  color: #502650;
}

ul,
ol {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 1rem;
  margin: 0;
}
ul li,
ol li {
  box-sizing: border-box;
  line-height: 1.5;
}

/*
 * Nested Lists, eg. ol in ul
 */
li:has(ul) {
  flex-wrap: wrap;
}
li:has(ul) > ul {
  flex-basis: 100%;
  margin: 0.75rem;
}

ol > li {
  display: list-item;
}

.login-meta {
  display: flex;
  width: 100%;
  max-width: unset;
  flex-grow: 1;
  margin: 0;
  box-sizing: border-box;
  align-items: center;
}

body > header .logo,
body > header a.logo,
body > header a:visited.logo,
body > header a:hover.logo,
body > header a:active.logo,
body > header a:focus.logo,
.manon-root > header .logo,
.manon-root > header a.logo,
.manon-root > header a:visited.logo,
.manon-root > header a:hover.logo,
.manon-root > header a:active.logo,
.manon-root > header a:focus.logo, .logo,
a.logo,
a:visited.logo,
a:hover.logo,
a:active.logo,
a:focus.logo {
  align-self: center;
  background-color: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 40rem;
  max-width: 100%;
  height: 6.25rem;
  margin: 0 0 1.5rem 0;
  font-size: 0.88889rem;
  font-family: "RO Serif Web", serif;
  color: #000000;
  text-decoration: none;
  display: flex;
}
body > header .logo img,
body > header a:visited.logo img,
body > header a:hover.logo img,
body > header a:active.logo img,
body > header a:focus.logo img,
.manon-root > header .logo img, .logo img,
a:visited.logo img,
a:hover.logo img,
a:active.logo img,
a:focus.logo img {
  box-sizing: border-box;
  height: 6.25rem;
  min-height: 6.25rem;
  max-height: 6.25rem;
  width: 3.125rem;
  min-width: 3.125rem;
  max-width: 3.125rem;
  margin: 0 0 0 calc(50% - 1.25rem);
  object-position: top;
  object-fit: contain;
}
@media (width >= 24rem) {
  body > header .logo,
  body > header a.logo,
  body > header a:visited.logo,
  body > header a:hover.logo,
  body > header a:active.logo,
  body > header a:focus.logo,
  .manon-root > header .logo,
  .manon-root > header a.logo,
  .manon-root > header a:visited.logo,
  .manon-root > header a:hover.logo,
  .manon-root > header a:active.logo,
  .manon-root > header a:focus.logo, .logo,
  a.logo,
  a:visited.logo,
  a:hover.logo,
  a:active.logo,
  a:focus.logo {
    font-size: 1.25rem;
  }
}

main {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-top: 4rem;
  padding-bottom: 4rem;
  margin: 0 auto;
}
main > .content-wrapper {
  display: flex;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

p,
a,
span,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  max-width: 50rem;
}
a.message-counter:hover, a.message-counter:visited, a.message-counter:visited:hover, .message-counter {
  display: inline-flex;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  width: auto;
  box-sizing: initial;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0.25rem;
  background-color: #d52a1e;
  color: white;
  font-size: 0.8rem;
  border-radius: 1.125rem;
  margin: 0 0.25rem;
}

a.message-counter {
  text-decoration: none;
}
a:has(.message-counter) {
  text-decoration: none;
}
a:has(.message-counter) span {
  margin: 0 0.25rem;
}

nav.tabs ul,
nav.tabs ol {
  margin-top: 0;
  margin-bottom: 0;
}
nav.tabs ul li::before,
nav.tabs ol li::before {
  display: none; /* Preventing default nav before to show up */
}
nav.tabs ul li a,
nav.tabs ul li a:visited,
nav.tabs ol li a,
nav.tabs ol li a:visited {
  display: flex;
  align-items: center;
  color: inherit;
  height: 100%;
  box-sizing: border-box;
}
nav a {
  text-decoration: none;
  word-break: break-word;
}
nav ul.horizontal, nav .horizontal ul {
  gap: 1rem;
}
nav ul.horizontal li::before, nav .horizontal ul li::before {
  padding: 0;
}

nav ul {
  padding: 0;
  gap: 0.25rem;
  display: flex;
}
nav ul li {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
}
nav ul li::before {
  mask-size: contain;
  content: "";
  display: inline-block;
  mask-repeat: no-repeat;
  padding: 0 0.5rem 0 0;
  background-color: #01689b;
  mask-image: url("./img/icons/ro/chevron-right.svg");
  width: 0.8rem;
  height: 0.8rem;
}
nav ul li a {
  max-width: 85%;
}
nav .collapsing-element,
nav .content-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.nota-bene {
  margin: 0;
  font-size: 0.88889rem;
  color: #535353;
}

form div.notification p,
form div.error p,
form div.warning p,
form div.confirmation p,
form div.explanation p,
form div.system p {
  margin: 0;
}
form > div p,
form > div span {
  /* Message types that come after fields */
}
form > div p,
form > div span {
  /* Message types that come before fields */
}
table td,
table th,
table tr {
  align-items: center;
}
table td.error > div, table td.warning > div, table td.explanation > div, table td.confirmation > div, table td.system > div,
table th.error > div,
table th.warning > div,
table th.explanation > div,
table th.confirmation > div,
table th.system > div,
table tr.error > div,
table tr.warning > div,
table tr.explanation > div,
table tr.confirmation > div,
table tr.system > div {
  display: flex;
  gap: 0.25rem;
}
table td.error .notification-type, table td.warning .notification-type, table td.explanation .notification-type, table td.confirmation .notification-type, table td.system .notification-type,
table th.error .notification-type,
table th.warning .notification-type,
table th.explanation .notification-type,
table th.confirmation .notification-type,
table th.system .notification-type,
table tr.error .notification-type,
table tr.warning .notification-type,
table tr.explanation .notification-type,
table tr.confirmation .notification-type,
table tr.system .notification-type {
  font-size: 0;
}
.notification {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  gap: 0.5rem;
}
.notification .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.notification-type {
  align-items: center;
  display: inline-flex;
  font-weight: bold;
  gap: 0.25rem;
  font-size: 0;
}

p.notification, p.error, p.warning, p.confirmation, p.explanation, p.system,
span.notification,
span.error,
span.warning,
span.confirmation,
span.explanation,
span.system {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  gap: 0.5rem;
}
p.notification .icon, p.error .icon, p.warning .icon, p.confirmation .icon, p.explanation .icon, p.system .icon,
span.notification .icon,
span.error .icon,
span.warning .icon,
span.confirmation .icon,
span.explanation .icon,
span.system .icon {
  width: 1.25rem;
  height: 1.25rem;
}
p.notification, p.error, p.warning, p.confirmation, p.explanation, p.system,
span.notification,
span.error,
span.warning,
span.confirmation,
span.explanation,
span.system {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
p.error,
span.error {
  background-color: #f9dfdd;
  color: #000000;
}
p.warning,
span.warning {
  background-color: #fef4db;
  color: #000000;
}
p.explanation,
span.explanation {
  background-color: #d9ebf7;
  color: #000000;
}
p.confirmation,
span.confirmation {
  background-color: #e1edda;
  color: #000000;
}
p.system,
span.system {
  background-color: #e6e6e6;
  color: #000000;
}
.block-notification.error, .block-notification.warning, .block-notification.confirmation, .block-notification.explanation, .block-notification.system,
div.error,
div.warning,
div.confirmation,
div.explanation,
div.system,
section.error,
section.warning,
section.confirmation,
section.explanation,
section.system {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  gap: 0.5rem;
}
.block-notification.error .icon, .block-notification.warning .icon, .block-notification.confirmation .icon, .block-notification.explanation .icon, .block-notification.system .icon,
div.error .icon,
div.warning .icon,
div.confirmation .icon,
div.explanation .icon,
div.system .icon,
section.error .icon,
section.warning .icon,
section.confirmation .icon,
section.explanation .icon,
section.system .icon {
  width: 1.25rem;
  height: 1.25rem;
}
.block-notification.error, .block-notification.warning, .block-notification.confirmation, .block-notification.explanation, .block-notification.system,
div.error,
div.warning,
div.confirmation,
div.explanation,
div.system,
section.error,
section.warning,
section.confirmation,
section.explanation,
section.system {
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-start;
}
.block-notification.error,
div.error,
section.error {
  background-color: #f9dfdd;
  color: #000000;
}
.block-notification.warning,
div.warning,
section.warning {
  background-color: #fef4db;
  color: #000000;
}
.block-notification.explanation,
div.explanation,
section.explanation {
  background-color: #d9ebf7;
  color: #000000;
}
.block-notification.confirmation,
div.confirmation,
section.confirmation {
  background-color: #e1edda;
  color: #000000;
}
.block-notification.system,
div.system,
section.system {
  background-color: #e6e6e6;
  color: #000000;
}
p {
  color: inherit;
  line-height: 1.5;
  margin: 0;
}

.page-title {
  font-size: 2.02729rem;
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 0 0 1rem;
}
@media (width >= 24rem) {
  .page-title {
    padding: 0 0 0 3rem;
  }
}
ul.pagination li span[aria-current],
.pagination ul li span[aria-current], ul.pagination li[aria-current],
.pagination ul li[aria-current], ul.pagination li a[aria-current=page],
.pagination ul li a[aria-current=page], ul.pagination li span[aria-current=page],
.pagination ul li span[aria-current=page], ul.pagination li a[aria-current=true],
.pagination ul li a[aria-current=true], ul.pagination li span[aria-current=true],
.pagination ul li span[aria-current=true] {
  background-color: #01689b;
  color: #ffffff;
}

ul.pagination li a, nav.pagination ul li a,
.pagination ul li a, ul.pagination li span, nav.pagination ul li span,
.pagination ul li span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  color: #01689b;
}
ul.pagination li a:hover,
.pagination ul li a:hover, ul.pagination li span:hover,
.pagination ul li span:hover {
  background-color: #01689b;
  color: #ffffff;
}
ul.pagination li a::before, nav.pagination ul li a::before,
.pagination ul li a::before, ul.pagination li span::before, nav.pagination ul li span::before,
.pagination ul li span::before {
  content: none;
}

/* Previous and next links */
nav.pagination .adjacent,
.pagination .adjacent, ul.pagination li a.adjacent,
.pagination ul li a.adjacent {
  color: #01689b;
}
ul.pagination, nav.pagination ul,
.pagination ul {
  display: flex;
  flex-direction: row;
  padding: 0;
  width: 100%;
  margin: 0;
}
ul.pagination li, nav.pagination ul li,
.pagination ul li {
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  box-sizing: border-box;
  height: 2.75rem;
  min-width: 2.75rem;
}
ul.pagination li::before, nav.pagination ul li::before,
.pagination ul li::before {
  content: none;
}
nav.pagination,
.pagination {
  display: flex;
  width: 100%;
  align-items: center;
  overflow-x: auto;
  justify-content: flex-start;
}
.radio {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.radio > div {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.radio p.error,
.radio p.warning,
.radio p.confirmation,
.radio p.explanation,
.radio p.primary {
  margin: 0;
}
.radio input[type=radio] {
  padding: 0;
  margin-left: 0;
  margin-right: 0;
  min-height: auto;
  height: 1.25rem;
  vertical-align: middle;
  cursor: pointer;
  width: 1.25rem;
  min-width: 1.25rem;
}
.radio input[type=radio] + label {
  margin-top: 0;
  width: auto;
  vertical-align: middle;
  cursor: pointer;
}
.radio input[type=radio]:disabled {
  cursor: not-allowed;
}
.radio input[type=radio]:disabled + label {
  cursor: not-allowed;
}
.radio.required {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.radio.required > div {
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.required .radio {
  flex-direction: row;
}

section {
  width: 100%;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  gap: 1.75rem;
  padding-top: 1.75rem;
  padding-right: 0;
  padding-bottom: 1.75rem;
  padding-left: 0;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
}
section .content-wrapper {
  align-items: flex-start;
  flex-direction: column;
  gap: 1.75rem;
  padding-top: 1.75rem;
  padding-right: 1rem;
  padding-bottom: 1.75rem;
  padding-left: 1rem;
  width: 100%;
  max-width: 82rem;
  display: flex;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (width >= 24rem) {
  section .content-wrapper {
    padding-right: 3rem;
    padding-left: 3rem;
  }
}
body.sidemenu,
.manon-root.sidemenu,
main.sidemenu {
  /* Places sidemenu next to the main content of the page */
  display: flex;
  flex-direction: row;
  padding: 0;
  flex-wrap: nowrap;
}
@media (width >= 50rem) {
  body.sidemenu,
  .manon-root.sidemenu,
  main.sidemenu {
    flex-wrap: nowrap;
  }
}
body.sidemenu,
.manon-root.sidemenu,
main.sidemenu {
  /* main content of the page */
}
body.sidemenu > div,
body.sidemenu > article,
body.sidemenu > section,
.manon-root.sidemenu > div,
.manon-root.sidemenu > article,
.manon-root.sidemenu > section,
main.sidemenu > div,
main.sidemenu > article,
main.sidemenu > section {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
@media (width >= 50rem) {
  body.sidemenu > div,
  body.sidemenu > article,
  body.sidemenu > section,
  .manon-root.sidemenu > div,
  .manon-root.sidemenu > article,
  .manon-root.sidemenu > section,
  main.sidemenu > div,
  main.sidemenu > article,
  main.sidemenu > section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
body.sidemenu a,
.manon-root.sidemenu a,
main.sidemenu a {
  text-decoration: none;
}
body.sidemenu > nav,
.manon-root.sidemenu > nav,
main.sidemenu > nav {
  width: 100%;
  padding-top: 2rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #e6e6e6;
  gap: 1.5rem;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  background-color: white;
  margin: 0;
  display: block;
  box-sizing: border-box;
}
@media (width >= 20rem) {
  body.sidemenu > nav,
  .manon-root.sidemenu > nav,
  main.sidemenu > nav {
    width: 20rem;
  }
}
body.sidemenu > nav,
.manon-root.sidemenu > nav,
main.sidemenu > nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* List */
}
body.sidemenu > nav .sticky-container,
.manon-root.sidemenu > nav .sticky-container,
main.sidemenu > nav .sticky-container {
  position: sticky;
  top: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
body.sidemenu > nav button + ul,
.manon-root.sidemenu > nav button + ul,
main.sidemenu > nav button + ul {
  /* Compensating for the reserved space for the icon.
    Position sticky still reserves the space within the flow. */
  margin-top: 0;
}
body.sidemenu > nav,
.manon-root.sidemenu > nav,
main.sidemenu > nav {
  /* Button */
}
body.sidemenu > nav .sidemenu-toggle,
.manon-root.sidemenu > nav .sidemenu-toggle,
main.sidemenu > nav .sidemenu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  z-index: 2;
  /* Needed to keep the button to stick to the top */
  margin-left: 0;
  font-size: 0;
  background-color: #ca005d;
  padding: 0.5rem;
  color: #ffffff;
  gap: 0;
}
@media (width >= 50rem) {
  body.sidemenu > nav .sidemenu-toggle,
  .manon-root.sidemenu > nav .sidemenu-toggle,
  main.sidemenu > nav .sidemenu-toggle {
    margin-left: 18rem;
  }
}
body.sidemenu > nav .sidemenu-toggle::before,
.manon-root.sidemenu > nav .sidemenu-toggle::before,
main.sidemenu > nav .sidemenu-toggle::before {
  mask-size: contain;
  content: "";
  background-color: #ffffff;
  mask-image: url("./img/icons/ro/close.svg");
  width: 1rem;
  height: 1rem;
}
body.sidemenu > nav .sidemenu-toggle[aria-expanded=false],
.manon-root.sidemenu > nav .sidemenu-toggle[aria-expanded=false],
main.sidemenu > nav .sidemenu-toggle[aria-expanded=false] {
  margin-left: 0;
}
body.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before,
.manon-root.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before,
main.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before {
  mask-size: contain;
  content: "";
  mask-image: url("./img/icons/ro/hamburger.svg");
}
@media (width >= 50rem) {
  body.sidemenu > nav,
  .manon-root.sidemenu > nav,
  main.sidemenu > nav {
    /* nav */
    top: unset;
    left: unset;
    position: relative;
    height: unset;
  }
}
body.sidemenu.sidemenu-closed > nav,
.manon-root.sidemenu.sidemenu-closed > nav,
main.sidemenu.sidemenu-closed > nav {
  border: 0;
  width: 0;
  padding-left: 0;
  padding-right: 0;
}
body.sidemenu.sidemenu-closed > nav > ul,
.manon-root.sidemenu.sidemenu-closed > nav > ul,
main.sidemenu.sidemenu-closed > nav > ul {
  display: none;
}
body.sidemenu.sidemenu-closed > nav .sticky-container,
.manon-root.sidemenu.sidemenu-closed > nav .sticky-container,
main.sidemenu.sidemenu-closed > nav .sticky-container {
  width: 0;
}
body.sidemenu.sidemenu-closed > div,
.manon-root.sidemenu.sidemenu-closed > div,
main.sidemenu.sidemenu-closed > div {
  max-width: 100%;
}

/* Use to set the width of the page content. */
.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.skip-to-content,
a.button.skip-to-content {
  /* Visually removing the objects height. Without removing the object
  from the flow. */
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  max-width: 100%;
  font-size: 0;
}
.skip-to-content:focus,
a.button.skip-to-content:focus {
  position: static;
  display: flex;
  height: auto;
  padding: 1rem;
  margin: 0 0 1rem;
  border-width: 2px;
  border-style: solid;
  border-color: #ca005d;
  background-color: #ffffff;
  color: #ca005d;
  font-size: inherit;
  text-align: center;
  justify-content: center;
}
a.slogan, .slogan {
  font-size: 1.80203rem;
  font-family: "RO Serif Web", serif;
  font-style: italic;
}

a.slogan, .slogan a {
  color: inherit;
  text-decoration: none;
}
a.slogan:visited, .slogan a:visited {
  color: inherit;
}

table.action-buttons button,
table.action-buttons a.button,
table.action-buttons input[type=button],
table.action-buttons input[type=submit],
table.action-buttons input[type=reset], table button.action-button,
table a.button.action-button,
table input[type=button].action-button,
table input[type=submit].action-button,
table input[type=reset].action-button {
  /* Resetting button styling */
  margin: 0;
  padding: 0;
  border: 0;
  min-height: unset;
  color: inherit;
}
table.action-buttons button::before,
table.action-buttons a.button::before,
table.action-buttons input[type=button]::before,
table.action-buttons input[type=submit]::before,
table.action-buttons input[type=reset]::before, table button.action-button::before,
table a.button.action-button::before,
table input[type=button].action-button::before,
table input[type=submit].action-button::before,
table input[type=reset].action-button::before {
  color: inherit;
}
table.action-buttons button:hover,
table.action-buttons a.button:hover,
table.action-buttons input[type=button]:hover,
table.action-buttons input[type=submit]:hover,
table.action-buttons input[type=reset]:hover, table button.action-button:hover,
table a.button.action-button:hover,
table input[type=button].action-button:hover,
table input[type=submit].action-button:hover,
table input[type=reset].action-button:hover {
  border: 0;
}
/* Style a specific button within a table */
table {
  /* Resetting form styling */
}
table form {
  padding: 0;
  background-color: transparent;
}
table {
  /* Style all buttons within a parent */
}
table caption {
  text-align: left;
  font-size: 0.88889rem;
  padding: 1rem 0;
}

table.condensed td {
  padding: 0.5rem 1rem;
}
/* This bit of css solves a render issue that appears when a dl containing a
dd is used within a expando row.

Issue:
When the width of the dd has been set as a
percentage, the rest of the table (th and td) will change their width when the
expando row is opened.

Cause/findings:
There are a couple of issues found concerning this bug:
- A table set to 100% width is rendered as 100% - 1px width
  - Removing borders and adding box-sizing: border-sizing; or changing the table-layout
    do not seem to make a difference.
- An element within the table set to 100% width is also rendered as 100% - 1px width
- When using a calc(100% - 1px) the computed value is correct, however the
width of the th and td still change.
- When setting a px or rem value the th's and td's keep their original width

Using fixed values isn't ideal percentages would be less prone to issues when the width
of parent elements are altered. Suggestions on how this bug can be solved instead of patched
are welcome.
*/
table tr.expando-row td dl > div > dd,
table.condensed tr.expando-row td dl > div > dd,
table.sticky tr.expando-row td dl > div > dd {
  max-width: 47rem;
}

article table tr.expando-row td dl > div > dd,
article table.condensed tr.expando-row td dl > div > dd,
article table.sticky tr.expando-row td dl > div > dd {
  max-width: 30rem;
}

.auth table tr.expando-row td dl > div > dd,
.auth table.condensed tr.expando-row td dl > div > dd,
.auth table.sticky tr.expando-row td dl > div > dd {
  max-width: 37rem;
}

.form-view table tr.expando-row td dl > div > dd,
.form-view table.condensed tr.expando-row td dl > div > dd,
.form-view table.sticky tr.expando-row td dl > div > dd {
  max-width: 45rem;
}

table button.expando-button {
  display: none;
}
table tr.expando-row {
  display: table-layout;
  filter: unset;
}
table tr.expando-row td {
  position: relative;
  background-color: #eef7fc;
  padding: 1.5rem 0.5rem;
}
table tr.expando-row .expando-row-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0.5rem;
}

.js-expando-rows-loaded table button.expando-button {
  display: inline-flex;
}

.expanded-row {
  background-color: #ddeff8;
  filter: unset;
}
table form {
  background-color: transparent;
  padding: 0;
  justify-content: flex-start;
}

.number {
  font-variant-numeric: monospace;
  text-align: right;
}

table td[rowspan] {
  border: 1px solid #e6e6e6;
}

.sticky-header {
  position: relative;
  max-height: 100vh;
}
.sticky-header thead {
  position: relative;
  z-index: 1;
}
.sticky-header th {
  position: sticky;
  top: -1px;
}

table.summary {
  width: 30rem;
}
.horizontal-scroll.summary {
  width: auto;
  margin: 0;
}

table input[type=checkbox] {
  padding: 0;
}
table input[type=checkbox] + label {
  width: auto;
  cursor: pointer;
  margin-top: 0;
}
table th input[type=checkbox]:only-child,
table td input[type=checkbox]:only-child {
  margin: 0 auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  overflow: auto;
  text-align: left;
  margin: 2rem 0;
}
table thead th {
  background-color: #ffffff;
  color: #01689b;
  border-width: 0;
  border-color: #e6e6e6;
  padding: 0.75rem 1rem;
  font-weight: bold;
  text-align: left;
}
table thead a,
table thead a:visited,
table thead a:hover {
  color: inherit;
}
table thead a::before,
table thead a:visited::before,
table thead a:hover::before {
  color: inherit;
}
table td {
  padding: 0.75rem 1rem;
  gap: 0.25rem;
}
table tr {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #e6e6e6;
  /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
}
table tfoot th {
  padding: 0.75rem 1rem;
}
table {
  /* Form within table */
}
table .sortable {
  background-color: transparent;
  padding: unset;
  min-width: unset;
  height: unset;
  min-height: unset;
  border: unset;
  border-radius: unset;
  margin: unset;
  color: inherit;
}
.tabs > ul li > *,
manon-tabs > ul li > *, ul.tabs li > * {
  white-space: nowrap;
  display: inline-block;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  color: #01689b;
  padding: 0.5rem 0;
  text-decoration: none;
}
.tabs > ul li > :hover,
manon-tabs > ul li > :hover, ul.tabs li > :hover {
  color: #01689b;
}

.tabs [aria-selected=true],
manon-tabs [aria-selected=true], .tabs > ul li[aria-current=true] > *,
manon-tabs > ul li[aria-current=true] > *, ul.tabs li[aria-current=true] > *, .tabs > ul li a[aria-current=page],
manon-tabs > ul li a[aria-current=page], ul.tabs li a[aria-current=page] {
  cursor: pointer;
  border-width: 0 0 2px 0;
  border-color: #01689b;
  font-weight: bold;
}
.tabs,
manon-tabs {
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}

.tabs > ul,
manon-tabs > ul, ul.tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  width: 100%;
  gap: 1rem;
}
.tabs > ul li,
manon-tabs > ul li, ul.tabs li {
  list-style: none;
  padding: 0;
}
.tabs *:focus,
.tabs *.focus,
manon-tabs *:focus,
manon-tabs *.focus {
  outline-offset: inherit;
}
.tabs > div,
manon-tabs > div {
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0;
}

manon-tabs [role=tabpanel][hidden] {
  display: none;
}

.tags > p,
.tags > span, table.tags td p,
table.tags td span,
table .tags td p,
table .tags td span, ul.tags > li,
.tag {
  max-width: max-content;
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.75;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border-width: 1px;
}
.tags > p.plain,
.tags > span.plain, table.tags td p.plain,
table.tags td span.plain,
table .tags td p.plain,
table .tags td span.plain, ul.tags > li.plain, .tags > p.solid,
.tags > span.solid, table.tags td p.solid,
table.tags td span.solid,
table .tags td p.solid,
table .tags td span.solid, ul.tags > li.solid, .tags > p.dashed,
.tags > span.dashed, table.tags td p.dashed,
table.tags td span.dashed,
table .tags td p.dashed,
table .tags td span.dashed, ul.tags > li.dashed, .tags > p.dotted,
.tags > span.dotted, table.tags td p.dotted,
table.tags td span.dotted,
table .tags td p.dotted,
table .tags td span.dotted, ul.tags > li.dotted,
.tag.plain,
.tag.solid,
.tag.dashed,
.tag.dotted {
  border-width: 1px;
}
.tags > p.plain,
.tags > span.plain, table.tags td p.plain,
table.tags td span.plain,
table .tags td p.plain,
table .tags td span.plain, ul.tags > li.plain,
.tag.plain {
  border-style: solid;
  border-color: transparent;
}
.tags > p.solid,
.tags > span.solid, table.tags td p.solid,
table.tags td span.solid,
table .tags td p.solid,
table .tags td span.solid, ul.tags > li.solid,
.tag.solid {
  border-style: solid;
}
.tags > p.dashed,
.tags > span.dashed, table.tags td p.dashed,
table.tags td span.dashed,
table .tags td p.dashed,
table .tags td span.dashed, ul.tags > li.dashed,
.tag.dashed {
  border-style: dashed;
}
.tags > p.dotted,
.tags > span.dotted, table.tags td p.dotted,
table.tags td span.dotted,
table .tags td p.dotted,
table .tags td span.dotted, ul.tags > li.dotted,
.tag.dotted {
  border-style: dotted;
}

.tags {
  /* render each div directly within a tags group as a tag */
}
ul.tags {
  padding: 0;
}
ul.tags > li {
  list-style: none;
}

.tags.horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: left;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.25rem;
  padding-right: 0.5rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
}

/* Color 1 */
.tags-color-1 {
  background-color: #eef8fe;
  color: #006fb3;
  border-color: #006fb3;
}

.tags-color-1-light {
  background-color: #eef8fe;
  color: #006fb3;
  border-color: #006fb3;
}

.tags-color-1-medium {
  background-color: #abdbf8;
  color: #005c94;
  border-color: #005c94;
}

.tags-color-1-dark {
  background-color: #40adef;
  color: #003e64;
  border-color: #003e64;
}

/* Color 2 */
.tags-color-2 {
  background-color: #ebfaef;
  color: #157b31;
  border-color: #157b31;
}

.tags-color-2-light {
  background-color: #ebfaef;
  color: #157b31;
  border-color: #157b31;
}

.tags-color-2-medium {
  background-color: #94e6ab;
  color: #116629;
  border-color: #1b9d3f;
}

.tags-color-2-dark {
  background-color: #20bd4c;
  color: #134421;
  border-color: #116629;
}

/* Color 3 */
.tags-color-3 {
  background-color: #fff7cf;
  color: #7d6900;
  border-color: #7d6900;
}

.tags-color-3-light {
  background-color: #fff7cf;
  color: #7d6900;
  border-color: #7d6900;
}

.tags-color-3-medium {
  background-color: #fecf48;
  color: #685700;
  border-color: #a08700;
}

.tags-color-3-dark {
  background-color: #ddb900;
  color: #584a00;
  border-color: #685700;
}

/* Color 4 */
.tags-color-4 {
  background-color: #fff5ed;
  color: #a75312;
  border-color: #a75312;
}

.tags-color-4-light {
  background-color: #fff5ed;
  color: #a75312;
  border-color: #a75312;
}

.tags-color-4-medium {
  background-color: #ffcaa1;
  color: #8b450f;
  border-color: #d66a17;
}

.tags-color-4-dark {
  background-color: #ffa865;
  color: #5e2f0a;
  border-color: #a75312;
}

/* Color 5 */
.tags-color-5 {
  background-color: #fff4f3;
  color: #c3372c;
  border-color: #ffa49d;
}

.tags-color-5-light {
  background-color: #fff4f3;
  color: #c3372c;
  border-color: #ffa49d;
}

.tags-color-5-medium {
  background-color: #ffc7c3;
  color: #a22e25;
  border-color: #f84638;
}

.tags-color-5-dark {
  background-color: #ff7d73;
  color: #6e1f19;
  border-color: #a22e25;
}

/* Color 6 */
.tags-color-6 {
  background-color: #f7f6fc;
  color: #6e5fae;
  border-color: #bfb6e6;
}

.tags-color-6-light {
  background-color: #f7f6fc;
  color: #6e5fae;
  border-color: #bfb6e6;
}

.tags-color-6-medium {
  background-color: #d6d1ef;
  color: #5b4f90;
  border-color: #8c7cd2;
}

.tags-color-6-dark {
  background-color: #a89cdd;
  color: #3d3560;
  border-color: #5b4f90;
}

ul.tiles > li > div, .tiles > div > div,
ul.tiles > li > section,
.tiles > div > section,
.tile > div,
.tile > section {
  display: flex;
  gap: 1rem;
}

.tiles {
  /* render each div directly within a tiles group as a tile */
}
.tiles.image-covers > div img,
.tiles.image-covers li img, .tile.image-cover img {
  object-fit: cover;
  max-width: unset;
  width: 100%;
  border-radius: 0 0;
  width: calc(100% + 1rem + 1rem);
  margin-top: -1rem;
  margin-right: -1rem;
  margin-left: -1rem;
}

.tile.image-cover img {
  height: unset;
}

.tiles.image-covers > div img,
.tiles.image-covers li img {
  height: unset;
}

.tile {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #ffffff;
  color: #000000;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  max-width: 100%;
}
.tile.image-cover img,
.tile img.image-cover {
  order: -1;
}
.tile .tile-group {
  display: flex;
  width: 100%;
  flex-direction: row;
  margin: 0.5rem 0 0 0;
  padding: 1rem 0 0 0;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #cccccc;
}

.tiles {
  align-items: stretch;
  /* render each div, nav or section directly within a tiles group as a tile */
}
.tiles > div,
.tiles > nav,
.tiles > section {
  box-sizing: border-box;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.5rem;
  background-color: #ffffff;
  color: #000000;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
}

ul.tiles {
  padding-left: 0;
}
ul.tiles > li {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background-color: #ffffff;
  color: #000000;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
}
ul.tiles > li > a {
  text-decoration: none;
}

.centered {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.centered > div,
.centered > section,
.centered > article {
  width: auto;
}

.column-2,
.column-3,
.column-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 100%;
  box-sizing: border-box;
}
.column-2 > *,
.column-3 > *,
.column-4 > * {
  width: 100%;
  box-sizing: border-box;
}
.column-2 > section.content-wrapper,
.column-2 > article.content-wrapper,
.column-2 > div.content-wrapper,
.column-3 > section.content-wrapper,
.column-3 > article.content-wrapper,
.column-3 > div.content-wrapper,
.column-4 > section.content-wrapper,
.column-4 > article.content-wrapper,
.column-4 > div.content-wrapper {
  padding: 0;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
.column-2 img,
.column-3 img,
.column-4 img {
  max-width: 100%;
}

@media (width >= 42rem) {
  .column-2,
  .column-3,
  .column-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width >= 60rem) {
  .column-3,
  .column-4 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (width >= 70rem) {
  .column-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.container-s,
.container-m,
.container-l {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  gap: 1.25rem;
  display: flex;
  flex-direction: column;
}

*.focus-only,
*.button.focus-only {
  transform: scale(1, 1);
  font-size: inherit;
  padding: inherit;
}
*.focus-only:not(:focus),
*.button.focus-only:not(:focus) {
  transform: scale(1, 0);
  font-size: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
  border: 0;
}

.visually-hidden {
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  white-space: nowrap;
  overflow: hidden;
  width: 1px;
  height: 1px;
  min-width: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  position: absolute !important;
}

.horizontal-group > div, .horizontal {
  display: flex;
  /* Preventing specificity issues */
  flex-direction: row !important;
  align-items: center;
  flex-wrap: wrap;
}
@media (width >= 50rem) {
  .horizontal-group > div, .horizontal {
    flex-wrap: nowrap;
  }
}

.horizontal-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

*[hidden],
.hidden {
  display: none !important; /* !important added to solve/prevent any specificity issues. */
}

table tr.nowrap, table th.nowrap, table td.nowrap, table tfoot.nowrap th,
table tfoot.nowrap td, table tbody.nowrap th,
table tbody.nowrap td, table thead.nowrap th, table.nowrap th,
table.nowrap td,
.nowrap {
  white-space: nowrap;
}
table tr.nowrap a, table th.nowrap a, table td.nowrap a, table tfoot.nowrap th a,
table tfoot.nowrap td a, table tbody.nowrap th a,
table tbody.nowrap td a, table thead.nowrap th a, table.nowrap th a,
table.nowrap td a,
.nowrap a {
  white-space: nowrap;
}

.one-third-two-thirds {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  box-sizing: border-box;
  gap: 3rem;
}
.one-third-two-thirds > * {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.one-third-two-thirds img {
  max-width: 100%;
}
.one-third-two-thirds > section.content-wrapper,
.one-third-two-thirds > article.content-wrapper,
.one-third-two-thirds > div.content-wrapper {
  padding: 0;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
@media (width >= 42rem) {
  .one-third-two-thirds {
    gap: 3rem;
  }
  .one-third-two-thirds > *:nth-child(even) {
    width: calc(66.66% - 1.5rem);
  }
  .one-third-two-thirds > *:nth-child(odd) {
    width: calc(33.33% - 1.5rem);
  }
}

.overlay::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  top: 0;
  left: 0;
  opacity: 0.35;
  z-index: -1;
}
.overlay ~ .image-background {
  z-index: -2;
}

*:has(> .overlay) {
  position: relative;
  z-index: 0;
  color: #fff;
}

.two-thirds-one-third {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 3rem;
  width: 100%;
}
.two-thirds-one-third > * {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
.two-thirds-one-third img {
  max-width: 100%;
}
.two-thirds-one-third > section.content-wrapper,
.two-thirds-one-third > article.content-wrapper,
.two-thirds-one-third > div.content-wrapper {
  padding: 0;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
@media (width >= 42rem) {
  .two-thirds-one-third {
    gap: 3rem;
  }
  .two-thirds-one-third > *:nth-child(even) {
    width: calc(33.33% - 1.5rem);
  }
  .two-thirds-one-third > *:nth-child(odd) {
    width: calc(66.66% - 1.5rem);
  }
}

.background-color-offset {
  background-color: #f3f3f3;
}
.background-color-offset .content-wrapper {
  background-color: transparent;
}

.background-color-offset-1 {
  background-color: #01689b;
  color: #ffffff;
}
.background-color-offset-1 .content-wrapper {
  background-color: transparent;
}