@charset "UTF-8";
/* Theme configuration */
/* Fonts (@font-faces) */
/* Text fonts */
@font-face {
  font-family: "Fredoka";
  font-weight: 600;
  font-style: normal;
  src: url("./fonts/fredoka/Fredoka-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: normal;
  font-style: normal;
  src: url("./fonts/open-sans/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: normal;
  font-style: italic;
  src: url("./fonts/open-sans/OpenSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: bold;
  font-style: normal;
  src: url("./fonts/open-sans/OpenSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-weight: bold;
  font-style: italic;
  src: url("./fonts/open-sans/OpenSans-BoldItalic.ttf") format("truetype");
}
/* Icons */
/* Core variables */
/* These are core sets like color schemes, fonts
and spacing sets */
.border-radius-xs {
  border-radius: 0.125rem;
}

.border-radius-s {
  border-radius: 0.25rem;
}

.border-radius-m {
  border-radius: 0.5rem;
}

.border-radius-l {
  border-radius: 1rem;
}

.border-radius-xl {
  border-radius: 1.5rem;
}

.border-radius-xxl {
  border-radius: 2rem;
}

.border-radius-round {
  border-radius: 50%;
}

/* Black */
/* Grey */
/* Red */
/* Blue */
/* Yellow */
/* Green */
/* Orange */
/* Purple */
/* Ochre */
.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;
}

/* 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 */
/* Component variables */
.icon-paw {
  mask: url("./img/icons/kat/paw.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/kat/paw.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-adjustments {
  mask: url("./img/icons/tabler/adjustments.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/adjustments.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-affiliate {
  mask: url("./img/icons/tabler/affiliate.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/affiliate.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-alert {
  mask: url("./img/icons/tabler/alert.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/alert.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-alert-circle {
  mask: url("./img/icons/tabler/alert-circle.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/alert-circle.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-alert-triangle {
  mask: url("./img/icons/tabler/alert-triangle.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/alert-triangle.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-archive {
  mask: url("./img/icons/tabler/archive.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/archive.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-arrow-back-up {
  mask: url("./img/icons/tabler/arrow-back-up.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-back-up.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-arrow-down {
  mask: url("./img/icons/tabler/arrow-down.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-down.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-arrow-left {
  mask: url("./img/icons/tabler/arrow-left.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-left.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-arrow-right {
  mask: url("./img/icons/tabler/arrow-right.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-right.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-arrow-up {
  mask: url("./img/icons/tabler/arrow-up.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-up.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-ascending {
  mask: url("./img/icons/tabler/ascending.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/ascending.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-bell {
  mask: url("./img/icons/tabler/bell.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/bell.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-bell-off {
  mask: url("./img/icons/tabler/bell-off.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/bell-off.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-building {
  mask: url("./img/icons/tabler/building.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/building.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-bulb {
  mask: url("./img/icons/tabler/bulb.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/bulb.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-calendar {
  mask: url("./img/icons/tabler/calendar.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/calendar.svg") no-repeat center/contain;
  background-color: #000000;
}

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

.icon-confirmation {
  mask: url("./img/icons/tabler/check-circle.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/check-circle.svg") no-repeat center/contain;
  background-color: #000000;
}

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

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

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

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

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

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

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

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

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

.icon-circle-cross {
  mask: url("./img/icons/tabler/circle-cross.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/circle-cross.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-circle-dash {
  mask: url("./img/icons/tabler/circle-dash.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/circle-dash.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-circle-x {
  mask: url("./img/icons/tabler/circle-x.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/circle-x.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-clock {
  mask: url("./img/icons/tabler/clock.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/clock.svg") no-repeat center/contain;
  background-color: #000000;
}

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

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

.icon-dots {
  mask: url("./img/icons/tabler/dots.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/dots.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-dots-circle-horizontal {
  mask: url("./img/icons/tabler/dots-circle-horizontal.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/dots-circle-horizontal.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-dots-vertical {
  mask: url("./img/icons/tabler/dots-vertical.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/dots-vertical.svg") no-repeat center/contain;
  background-color: #000000;
}

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

.icon-edit {
  mask: url("./img/icons/tabler/edit.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/edit.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-error {
  mask: url("./img/icons/tabler/error.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/error.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-external-link {
  mask: url("./img/icons/tabler/external-link.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/external-link.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-eye {
  mask: url("./img/icons/tabler/eye.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/eye.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-eye-off {
  mask: url("./img/icons/tabler/eye-off.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/eye-off.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-eye-plus {
  mask: url("./img/icons/tabler/eye-plus.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/eye-plus.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-file {
  mask: url("./img/icons/tabler/file.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/file.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-file-alert {
  mask: url("./img/icons/tabler/file-alert.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/file-alert.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-file-upload {
  mask: url("./img/icons/tabler/file-upload.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/file-upload.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-filter {
  mask: url("./img/icons/tabler/filter.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/filter.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-folder {
  mask: url("./img/icons/tabler/folder.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/folder.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-grid {
  mask: url("./img/icons/tabler/grid.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/grid.svg") no-repeat center/contain;
  background-color: #000000;
}

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

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

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

.icon-informative {
  mask: url("./img/icons/tabler/informative.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/informative.svg") no-repeat center/contain;
  background-color: #000000;
}

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

.icon-link {
  mask: url("./img/icons/tabler/link.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/link.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-list {
  mask: url("./img/icons/tabler/list.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/list.svg") no-repeat center/contain;
  background-color: #000000;
}

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

.icon-minus {
  mask: url("./img/icons/tabler/minus.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/minus.svg") no-repeat center/contain;
  background-color: #000000;
}

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

.icon-pencil {
  mask: url("./img/icons/tabler/pencil.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/pencil.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-plus {
  mask: url("./img/icons/tabler/plus.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/plus.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-outgoing {
  mask: url("./img/icons/tabler/arrow-up-right.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-up-right.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-questionmark {
  mask: url("./img/icons/tabler/question-mark.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/question-mark.svg") no-repeat center/contain;
  background-color: #000000;
}

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

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

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

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

.icon-settings {
  mask: url("./img/icons/tabler/settings.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/settings.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-to-top {
  mask: url("./img/icons/tabler/arrow-bar-to-up.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/arrow-bar-to-up.svg") no-repeat center/contain;
  background-color: #000000;
}

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

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

.icon-warning {
  mask: url("./img/icons/tabler/warning.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/warning.svg") no-repeat center/contain;
  background-color: #000000;
}

.icon-x {
  mask: url("./img/icons/tabler/x.svg") no-repeat center/contain;
  -webkit-mask: url("./img/icons/tabler/x.svg") no-repeat center/contain;
  background-color: #000000;
}

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

.accordion > div > button, ul.accordion > li > button {
  width: 100%;
  text-decoration: none;
  padding: 0.75rem 1rem;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #006fb3;
  background-color: #ffffff;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #d4d4d4;
  border-radius: 0.25rem 0.25rem;
}
.accordion > div > button[aria-expanded=true], ul.accordion > li > button[aria-expanded=true] {
  border-radius: 0.25rem 0.25rem 0 0;
}

.accordion > div > div, ul.accordion > li > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 1rem;
  border-width: 0;
  border-style: solid;
  border-color: #d4d4d4;
  border-radius: 0 0 0.25rem 0.25rem;
}
.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 {
  /* 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: "";
  background-color: #006fb3;
  mask-image: url("./img/icons/tabler/chevron-down.svg");
  width: 1.5rem;
  height: 1.5rem;
}
.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]::before {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  content: "";
  background-color: #006fb3;
  mask-image: url("./img/icons/tabler/chevron-up.svg");
  width: 1.5rem;
  height: 1.5rem;
}

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: 2rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  display: flex;
}
article .content-wrapper {
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  width: 100%;
  max-width: 90rem;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
@media (width >= 24rem) {
  article {
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
  }
}
.avatar {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  max-width: 3rem;
  max-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-family: "Fredoka", sans-serif;
  font-weight: normal;
  border-radius: 50%;
  background-color: #8c7cd2;
  color: #ffffff;
}
.avatar:hover, .avatar:visited:hover {
  background-color: #6e5fae;
  color: #ffffff;
}
.avatar:visited {
  background-color: #8c7cd2;
  color: #ffffff;
}

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

body,
.manon-root {
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  /* 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-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  background-color: #eeecf8;
  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-top: 0.5rem;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  background-color: #eeecf8;
  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/tabler/chevron-right.svg");
  width: 1.5rem;
  height: 1.5rem;
}
.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;
  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.destructive,
a.button.destructive,
input[type=button].destructive,
input[type=submit].destructive,
input[type=reset].destructive {
  background-color: #c3372c;
  color: #ffffff;
  border-color: #c3372c;
}
button.destructive:hover,
a.button.destructive:hover,
input[type=button].destructive:hover,
input[type=submit].destructive:hover,
input[type=reset].destructive:hover {
  background-color: #c3372c;
  color: #ffffff;
  border-color: #c3372c;
}

.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: #006fb3;
  border-width: 1px;
  border-style: solid;
  border-color: #d4d4d4;
}
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: #ffffff;
  color: #006fb3;
  border-color: #006fb3;
}
button.secondary:active, button.secondary.active,
a.button.secondary:active,
a.button.secondary.active,
input[type=button].secondary:active,
input[type=button].secondary.active,
input[type=submit].secondary:active,
input[type=submit].secondary.active,
input[type=reset].secondary:active,
input[type=reset].secondary.active {
  border-color: #006fb3;
  outline: 2px solid #8c7cd2;
  outline-offset: 0.25rem;
}
button.secondary:focus, button.secondary.focus,
a.button.secondary:focus,
a.button.secondary.focus,
input[type=button].secondary:focus,
input[type=button].secondary.focus,
input[type=submit].secondary:focus,
input[type=submit].secondary.focus,
input[type=reset].secondary:focus,
input[type=reset].secondary.focus {
  outline: 2px solid #8c7cd2;
  outline-offset: 0.25rem;
}
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;
  gap: 0;
  z-index: 10;
}
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;
  font-weight: bold;
  gap: 0.5rem;
  background-color: #f9d100;
  color: #3b3b3b;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  padding-top: 0.75rem;
  padding-right: 1rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  border-width: 0;
  border-color: #f9d100;
  border-radius: 1rem;
  margin: 0;
}
button:hover, button.hover,
a.button:hover,
a.button.hover,
a.button:visited:hover,
a.button:visited.hover,
input[type=button]:hover,
input[type=button].hover,
input[type=submit]:hover,
input[type=submit].hover,
input[type=reset]:hover,
input[type=reset].hover {
  background-color: #ddb900;
  color: #3b3b3b;
  border-color: #ddb900;
}
button:active, button.active,
a.button:active,
a.button.active,
a.button:visited:active,
a.button:visited.active,
input[type=button]:active,
input[type=button].active,
input[type=submit]:active,
input[type=submit].active,
input[type=reset]:active,
input[type=reset].active {
  border-color: #006fb3;
  outline: 2px solid #8c7cd2;
  outline-offset: 0.25rem;
}
button:focus, button.focus,
a.button:focus,
a.button.focus,
a.button:visited:focus,
a.button:visited.focus,
input[type=button]:focus,
input[type=button].focus,
input[type=submit]:focus,
input[type=submit].focus,
input[type=reset]:focus,
input[type=reset].focus {
  outline: 2px solid #8c7cd2;
  outline-offset: 0.25rem;
}
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: #3b3b3b;
}
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;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
.checkbox {
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.checkbox input[type=checkbox] {
  padding: 0;
  cursor: pointer;
  width: 1.25rem;
  min-width: 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  accent-color: #006fb3;
}
.checkbox input[type=checkbox] + label {
  font-weight: normal;
  cursor: pointer;
}
.checkbox input[type=checkbox] + label:focus {
  outline: 2px solid #006fb3;
}
.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;
  padding: 2rem;
  background-color: #eeecf8;
  border-radius: 0.25rem;
  position: relative;
}
pre > code,
div.code-block > code {
  white-space: unset;
  width: 100%;
}
pre button,
div.code-block button {
  background: #ffffff;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border: 1px solid #d4d4d4;
}
pre button:hover,
div.code-block button:hover {
  background-color: #ffffff;
  color: #006fb3;
  border: 1px solid #006fb3;
}

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;
}
/* 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 {
  justify-content: space-between;
}
.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;
  justify-content: space-between;
  width: 100%;
  max-width: 250px;
  z-index: 20;
  background-color: #fff;
  color: #3b3b3b;
  -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);
}
.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: #f0f0f0;
}
.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:focus, .collapsible.collapsed .collapsing-element ul li.focus,
.collapsible.collapsed .collapsing-element ol li:focus,
.collapsible.collapsed .collapsing-element ol li.focus {
  outline: 2px solid #8c7cd2;
}
.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;
  text-decoration: none;
}
.collapsible.collapsed .collapsing-element ul li a:visited, .collapsible.collapsed .collapsing-element ul li a.visited,
.collapsible.collapsed .collapsing-element ol li a:visited,
.collapsible.collapsed .collapsing-element ol li a.visited {
  color: #3b3b3b;
}
.collapsible.collapsed .collapsing-element ul li a.destructive,
.collapsible.collapsed .collapsing-element ol li a.destructive {
  color: #c3372c;
}
.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] {
  background-color: #f6f6f6;
  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: #f6f6f6;
}
.collapsible.collapsed .collapsing-element ul li:hover a,
.collapsible.collapsed .collapsing-element ol li:hover a {
  background-color: #f6f6f6;
  text-decoration: none;
}
.collapsible.collapsed .collapsing-element ul li:hover a:visited,
.collapsible.collapsed .collapsing-element ol li:hover a:visited {
  background-color: #f6f6f6;
}
.collapsible.collapsed .collapsing-element ul li[aria-current],
.collapsible.collapsed .collapsing-element ol li[aria-current] {
  background-color: #f6f6f6;
}

/* 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.875rem;
  font-weight: regular;
  line-height: 1.375;
  color: #585858;
}

dl {
  width: 100%;
}
dl > div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1rem;
  padding: 0.75rem 0;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: #d4d4d4;
}
dl dt,
dl dd {
  overflow-wrap: anywhere;
  box-sizing: border-box;
  margin: 0;
}
dl dt {
  width: 33.3%;
}
dl dd {
  font-weight: bold;
}
fieldset dt,
fieldset dd {
  float: left;
}

.emphasized {
  font-size: 1.5rem;
  font-weight: medium;
  line-height: 1.75;
}

.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: #006fb3;
  mask-image: url("./img/icons/tabler/filter.svg");
  width: 1rem;
  height: 1rem;
}
.filter > div button[aria-expanded=true]::after {
  mask-size: contain;
  content: "";
  mask-image: url("./img/icons/tabler/close.svg");
}

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

*:focus-visible + label::before,
*.focus + label::before {
  position: relative;
}

body > footer,
.manon-root > footer,
.page-footer {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 5.5rem;
  background-color: #ffffff;
  color: #000000;
  padding-top: 2rem;
  padding-right: 3rem;
  padding-bottom: 2rem;
  padding-left: 3rem;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: #d4d4d4;
}
body > footer .content-wrapper,
.manon-root > footer .content-wrapper,
.page-footer .content-wrapper {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
body > footer a,
.manon-root > footer a,
.page-footer a {
  text-decoration: none;
  color: inherit;
}
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: row;
}
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 {
  display: flex;
  width: 100%;
  gap: 2rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  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,
body > footer nav ol li,
.manon-root > footer nav ul li,
.manon-root > footer nav ol li,
.page-footer nav ul li,
.page-footer nav ol li {
  list-style: none;
}
body > footer .meta p,
body > footer .meta span,
.manon-root > footer .meta p,
.manon-root > footer .meta span,
.page-footer .meta p,
.page-footer .meta span {
  font-size: 0.875rem;
  color: #585858;
}

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

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 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 input {
  border-radius: 0.5rem 0 0 0.5rem;
}
.combined-field button {
  min-height: 3rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

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;
}
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.25rem;
}
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;
}

form fieldset .radio {
  padding: 0;
  display: initial;
  margin: 0 0 0.5rem;
}
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 0 0.5rem;
}

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%;
  padding: 0;
  margin: 0;
  border-width: 0;
}
form > fieldset legend,
main section form > fieldset legend,
main article form > fieldset legend,
main div form > fieldset legend {
  font-weight: bold;
  margin: 0 0 1rem 0;
  padding: 0;
}
form > fieldset input,
main section form > fieldset input,
main article form > fieldset input,
main div form > fieldset input {
  margin: 0.5rem 0 1rem 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;
  padding: 0;
  margin: 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 input,
main section form > fieldset div input,
main article form > fieldset div input,
main div form > fieldset div input {
  margin: 0.5rem 0 1rem 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;
  padding-bottom: 0.5rem;
}

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: 2rem;
}
form.help .form-group {
  width: 100%;
  position: relative;
}
form.help .help-container {
  position: relative;
  box-sizing: border-box;
}
form.help .help-container:has(.column-2) .help-button, form.help .help-container:has(.column-3) .help-button, form.help .help-container:has(.column-4) .help-button {
  top: 2.75rem;
}
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: 0.75rem;
  width: 1.5rem;
  height: 1.5rem;
  right: 0;
  padding: 0;
  background-color: transparent;
  margin-right: -2rem;
}
form.help > div .help-button::before,
form.help > fieldset .help-button::before {
  mask-size: contain;
  content: "";
  background-color: #005c94;
  mask-image: url("./img/icons/tabler/informative.svg");
  width: 1.5rem;
  height: 1.5rem;
  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%;
  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%;
}
form.horizontal > div.form-group,
form.horizontal > section.form-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  width: 100%;
  align-items: center;
}
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;
}
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.25rem);
}
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 */
  }
}
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,
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%;
  }
}
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 > 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;
}
input {
  width: 100%;
  box-sizing: border-box;
  padding-top: 0.25rem;
  padding-right: 0.75rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  min-height: 3rem;
  border-width: 1px;
  border-style: solid;
  border-color: #888888;
  border-radius: 0.25rem;
}
input:disabled {
  cursor: not-allowed;
}

header input {
  min-height: 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 {
  width: 100%;
  min-height: 3rem;
}

form textarea {
  box-sizing: border-box;
  max-width: 100%;
  resize: vertical;
}

form {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  align-items: flex-start;
  color: #000000;
  gap: 2rem;
  max-width: 40rem;
}
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;
  padding-right: 3rem;
  padding-left: 3rem;
  background-color: #ffffff;
  min-height: 3.5rem;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #d6d1ef;
  color: #000000;
  font-weight: bold;
}
body > header > section,
body > header > div,
.manon-root > header > section,
.manon-root > header > div,
.page-header > section,
.page-header > div {
  width: 100%;
}
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;
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: transparent;
  padding: 1rem;
  display: flex;
  align-items: center;
  min-height: 100%;
  gap: 0.25rem;
}
body > header a .icon,
.manon-root > header a .icon,
.page-header a .icon {
  height: 1rem;
  width: 1rem;
}
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: #8c7cd2;
  border-width: 0 0 4px 0;
  border-style: solid;
  border-color: #8c7cd2;
}
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;
}
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: center;
}
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;
  gap: 2rem;
  justify-content: space-between;
  width: 100%;
}
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;
}
body > header .actions,
.manon-root > header .actions,
.page-header .actions {
  gap: 1rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  hyphens: auto;
}

h1,
h1 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 2.5rem;
}

h2,
h2 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 2rem;
}

h3,
h3 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 1.75rem;
}

h4,
h4 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 1.5rem;
}

h5,
h5 > a {
  font-size: 1.125rem;
}

h6,
h6 > a {
  font-size: 1rem;
}

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

h1,
h1 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 2.5rem;
}

h2,
h2 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 2rem;
}

h3,
h3 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 1.75rem;
}

h4,
h4 > a {
  font-family: "Fredoka", sans-serif;
  font-size: 1.5rem;
}

h5,
h5 > a {
  font-size: 1.125rem;
}

h6,
h6 > a {
  font-size: 1rem;
}

.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;
  width: calc(100% + 8rem);
  max-width: calc(100% + 8rem);
  background-color: #d6d1ef;
  margin: -4rem 0 0 -4rem;
  border-radius: 0;
  padding: 2rem;
  justify-content: center;
  flex-direction: column;
  color: #000000;
  font-size: 1.5rem;
  box-sizing: border-box;
  display: flex;
}
.hero .content-wrapper {
  z-index: 1;
  padding: 0;
  max-width: 40rem;
  text-align: center;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  gap: 2.5rem;
  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.5rem;
}
@media (width >= 50rem) {
  .hero {
    padding: 0;
  }
}

.icon {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center center;
  content: "";
  height: 1.5rem;
  width: 1.5rem;
  min-width: 1.5rem;
  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;
}
.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;
  background-color: #ffffff;
  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;
  border-color: #d4d4d4;
  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:hover,
body > header nav .language-selector ul li a:hover,
.manon-root > header nav .language-selector ul li a:hover,
.page-header nav .language-selector ul li a:hover {
  background-color: #f7f6fc;
  color: #000000;
}
.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:hover,
body > header nav .language-selector ul li:hover,
.manon-root > header nav .language-selector ul li:hover,
.page-header nav .language-selector ul li:hover {
  background-color: #f7f6fc;
  color: #000000;
}
.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: #006fb3;
  font-size: 1.125rem;
}
a:hover {
  color: #004e7e;
}
a:visited {
  color: #6e5fae;
}
a:visited:hover {
  color: #4d437a;
}

ul,
ol {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 0.5rem;
  padding: 0 0 0 1.5rem;
}
ul li,
ol li {
  box-sizing: border-box;
  padding: 0.25rem;
}

/*
 * 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;
  font-size: 0;
  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: 3.5rem;
  min-height: 3.5rem;
  max-height: 3.5rem;
  width: 3.5rem;
  min-width: 3.5rem;
  max-width: 3.5rem;
  border-radius: 50%;
  padding: 0.5rem 0.5rem;
  background-color: #000000;
}
main {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  gap: 4rem;
  padding-top: 4rem;
  padding-right: 4rem;
  padding-bottom: 4rem;
  padding-left: 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: #4d437a;
  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;
}
nav ul {
  padding: 0;
}
nav ul li {
  display: flex;
  align-items: center;
}
nav .collapsing-element,
nav .content-wrapper {
  display: flex;
  width: 100%;
}
.nota-bene {
  margin: 0;
  font-size: 0.875rem;
  color: #585858;
}

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.5rem;
  align-items: center;
}
table td.error .icon,
table th.error .icon,
table tr.error .icon {
  background-color: #c3372c;
}
table td.warning .icon,
table th.warning .icon,
table tr.warning .icon {
  background-color: #a87f05;
}
table td.confirmation .icon,
table th.confirmation .icon,
table tr.confirmation .icon {
  background-color: #157b31;
}
table td.explanation .icon,
table th.explanation .icon,
table tr.explanation .icon {
  background-color: #006fb3;
}
.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;
  border-width: 1px;
  border-style: solid;
  gap: 1rem;
}
.notification-type {
  align-items: center;
  display: inline-flex;
  font-weight: bold;
  gap: 0.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 {
  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;
  border-width: 1px;
  border-style: solid;
  gap: 1rem;
}
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: #ffe9e7;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
p.error .icon,
span.error .icon {
  background-color: #c3372c;
  color: #c3372c;
}
p.warning,
span.warning {
  background-color: #fff7e0;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
p.warning .icon,
span.warning .icon {
  background-color: #a87f05;
  color: #a87f05;
}
p.explanation,
span.explanation {
  background-color: #ddf0fc;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
p.explanation .icon,
span.explanation .icon {
  background-color: #006fb3;
  color: #006fb3;
}
p.confirmation,
span.confirmation {
  background-color: #ebfaef;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
p.confirmation .icon,
span.confirmation .icon {
  background-color: #157b31;
  color: #157b31;
}
p.system,
span.system {
  background-color: #ededed;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
.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;
  border-width: 1px;
  border-style: solid;
  gap: 1rem;
}
.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;
  gap: 0.5rem;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
}
.block-notification.error,
div.error,
section.error {
  background-color: #ffe9e7;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
.block-notification.error .icon,
div.error .icon,
section.error .icon {
  background-color: #c3372c;
  color: #c3372c;
}
.block-notification.warning,
div.warning,
section.warning {
  background-color: #fff7e0;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
.block-notification.warning .icon,
div.warning .icon,
section.warning .icon {
  background-color: #a87f05;
  color: #a87f05;
}
.block-notification.explanation,
div.explanation,
section.explanation {
  background-color: #ddf0fc;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
.block-notification.explanation .icon,
div.explanation .icon,
section.explanation .icon {
  background-color: #006fb3;
  color: #006fb3;
}
.block-notification.confirmation,
div.confirmation,
section.confirmation {
  background-color: #ebfaef;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
.block-notification.confirmation .icon,
div.confirmation .icon,
section.confirmation .icon {
  background-color: #157b31;
  color: #157b31;
}
.block-notification.system,
div.system,
section.system {
  background-color: #ededed;
  color: #000000;
  border-color: rgba(0, 0, 0, 0.05);
}
p {
  color: inherit;
  line-height: 1.75;
  font-size: 1.125rem;
  margin: 0;
}

.page-title {
  font-size: 2.5rem;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
}
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: #006fb3;
  color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #006fb3;
  font-weight: bold;
}

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;
  background-color: #ffffff;
  color: #006fb3;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  border-radius: 1rem;
  text-decoration: none;
}
ul.pagination li a:hover,
.pagination ul li a:hover, ul.pagination li span:hover,
.pagination ul li span:hover {
  background-color: #006fb3;
  color: #ffffff;
  border-color: #006fb3;
}
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 {
  font-size: 0;
}
.pagination .previous.adjacent {
  display: inline-flex;
}
.pagination .previous.adjacent::before {
  mask-size: contain;
  content: "";
  background-color: #006fb3;
  mask-image: url("./img/icons/tabler/chevron-left.svg");
  width: 1.5rem;
  height: 1.5rem;
}
.pagination .next.adjacent {
  display: inline-flex;
}
.pagination .next.adjacent::before {
  mask-size: contain;
  content: "";
  background-color: #006fb3;
  mask-image: url("./img/icons/tabler/chevron-right.svg");
  width: 1.5rem;
  height: 1.5rem;
}

ul.pagination, nav.pagination ul,
.pagination ul {
  display: flex;
  flex-direction: row;
  padding: 0;
  width: 100%;
  justify-content: center;
}
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: 3rem;
  min-width: 3rem;
}
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: center;
  gap: 0.25rem;
}
.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.4rem;
  accent-color: #004e7e;
  vertical-align: middle;
  cursor: pointer;
  width: 1.4rem;
  min-width: 1.4rem;
}
.radio input[type=radio] + label {
  margin-top: 0;
  font-weight: normal;
  width: auto;
  vertical-align: middle;
  cursor: pointer;
}
.radio input[type=radio] + label:focus {
  outline: 2px solid #004e7e;
}
.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: 1rem;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
}
section .content-wrapper {
  align-items: flex-start;
  flex-direction: column;
  background-color: #ffffff;
  gap: 2rem;
  width: 100%;
  max-width: 90rem;
  border-radius: 0.5rem;
  display: flex;
  width: 100%;
  margin: 0 auto;
}
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-right: 4rem;
    padding-bottom: 4rem;
    padding-left: 4rem;
  }
}
body.sidemenu > nav,
.manon-root.sidemenu > nav,
main.sidemenu > nav {
  width: 100%;
  padding-top: 4rem;
  padding-right: 2rem;
  padding-bottom: 4rem;
  padding-left: 2rem;
  border-width: 0 1px 0 0;
  border-style: solid;
  border-color: #d4d4d4;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  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 {
  /* List */
}
body.sidemenu > nav .sticky-container,
.manon-root.sidemenu > nav .sticky-container,
main.sidemenu > nav .sticky-container {
  position: sticky;
  top: 0;
  overflow: auto;
  display: block;
}
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 */
  gap: 0;
}
@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: 0.5rem;
  margin: 0.5rem 0;
  border-width: 1px;
  border-style: solid;
  border-color: #d4d4d4;
  background-color: #ffffff;
  color: #006fb3;
  order: 1;
  font-size: inherit;
  text-align: center;
}
a.slogan, .slogan {
  font-size: 1rem;
  white-space: nowrap;
}

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;
  background-color: currentColor;
}
/* 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;
  color: #585858;
  font-size: 0.875rem;
}

/* 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;
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: #d6d1ef;
  filter: unset;
}
table tr.expando-row td {
  position: relative;
}
table tr.expando-row .expando-row-content {
  display: flex;
  flex-direction: column;
}

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

.expanded-row {
  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 #ccc;
}

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

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: 0;
}
table thead th {
  border-width: 0 0 2px 0;
  border-style: solid;
  border-color: #8c7cd2;
  padding: 0.75rem 0.75rem 0.75rem 0;
  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 tbody th {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #efefef;
}
table td {
  padding: 0.75rem 0.75rem 0.75rem 0;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #efefef;
}
table tr {
  /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
}
table tfoot th {
  padding: 0.75rem 0.75rem 0.75rem 0;
}
table tfoot td {
  font-weight: bold;
}
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 0 1px 0;
  border-style: solid;
  border-color: #d4d4d4;
  color: #6a6a6a;
  padding: 0.5rem 0;
  text-decoration: none;
}
.tabs > ul li > :hover,
manon-tabs > ul li > :hover, ul.tabs li > :hover {
  color: #000000;
}

.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: #8c7cd2;
  color: #000000;
  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;
}

.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.5rem 0.5rem 0 0;
  width: calc(100% + 1.5rem + 1.5rem);
  margin-top: -1.5rem;
  margin-right: -1.5rem;
  margin-left: -1.5rem;
}

.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: 1rem;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: #d4d4d4;
  border-radius: 0.5rem;
  max-width: 100%;
}
.tile.image-cover img,
.tile img.image-cover {
  order: -1;
}
.tile .tile-group {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 1rem;
}

.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: 1rem;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: #d4d4d4;
  border-radius: 0.5rem;
}

ul.tiles {
  padding-left: 0;
}
ul.tiles > li {
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-width: 1px;
  border-style: solid;
  border-color: #d4d4d4;
  border-radius: 0.5rem;
}
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: 1.25rem;
  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;
  gap: 1rem;
}
@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: 2rem;
}
.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: 1.25rem;
  display: flex;
  flex-direction: column;
}
@media (width >= 42rem) {
  .one-third-two-thirds {
    gap: 2rem;
  }
  .one-third-two-thirds > *:nth-child(even) {
    width: calc(66.66% - 1rem);
  }
  .one-third-two-thirds > *:nth-child(odd) {
    width: calc(33.33% - 1rem);
  }
}

.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: 2rem;
  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: 1.25rem;
  display: flex;
  flex-direction: column;
}
@media (width >= 42rem) {
  .two-thirds-one-third {
    gap: 2rem;
  }
  .two-thirds-one-third > *:nth-child(even) {
    width: calc(33.33% - 1rem);
  }
  .two-thirds-one-third > *:nth-child(odd) {
    width: calc(66.66% - 1rem);
  }
}

.background-color-offset,
.background-color-offset-1 {
  padding: inherit 1.5rem;
}
.background-color-offset {
  background-color: #f0f0f0;
}
.background-color-offset .content-wrapper {
  background-color: transparent;
}

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