@minvws/manon-themes 18.0.0-alpha.3 → 18.0.0

package/dist/icore-open/manon.icore-open.css

@@ -45,8 +45,7 @@
 }
 /* Icon mask data URIs */
 /* Core variables */
-/* These are core sets like color schemes, fonts
-and spacing sets */
+/* These are core sets like color schemes, fonts and spacing sets */
 .border-radius-xs {
   border-radius: 0.125rem;
 }
@@ -162,9 +161,7 @@ and spacing sets */
 /* Secundary */
 /* Component variables */
 /* hover */
-/* hover */
 /* Hover */
-/* content wrapper */
 /* Blue */
 /* Green */
 /* Yellow */
@@ -177,6 +174,199 @@ and spacing sets */
 /* Color 4 */
 /* Color 5 */
 /* Color 6 */
+/* Component variables */
+.icon-ascending {
+  mask: url("./img/icons/tabler/caret-up-filled.svg") no-repeat center/contain;
+  -webkit-mask: url("./img/icons/tabler/caret-up-filled.svg") no-repeat center/contain;
+  background-color: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.icon-confirmation {
+  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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.icon-close {
+  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: currentcolor;
+}
+
+.icon-descending {
+  mask: url("./img/icons/tabler/caret-down-filled.svg") no-repeat center/contain;
+  -webkit-mask: url("./img/icons/tabler/caret-down-filled.svg") no-repeat center/contain;
+  background-color: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.icon-hamburger {
+  mask: url("./img/icons/tabler/menu-2.svg") no-repeat center/contain;
+  -webkit-mask: url("./img/icons/tabler/menu-2.svg") no-repeat center/contain;
+  background-color: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.icon-sort {
+  mask: url("./img/icons/tabler/caret-up-down-filled.svg") no-repeat center/contain;
+  -webkit-mask: url("./img/icons/tabler/caret-up-down-filled.svg") no-repeat center/contain;
+  background-color: currentcolor;
+}
+
+.icon-to-top {
+  mask: url("./img/icons/tabler/to-top.svg") no-repeat center/contain;
+  -webkit-mask: url("./img/icons/tabler/to-top.svg") no-repeat center/contain;
+  background-color: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
+.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: currentcolor;
+}
+
 .accordion, ul.accordion {
   display: flex;
   flex-direction: column;
@@ -211,6 +401,7 @@ and spacing sets */
   border-width: 0 1px 1px 1px;
   border-style: solid;
   border-color: #e9ecef;
+  background-color: #ffffff;
   border-radius: 0 0 0.25rem 0.25rem;
 }
 .accordion > div > div > *:first-child, ul.accordion > li > div > *:first-child {
@@ -252,10 +443,12 @@ section.accordion > div {
 }
 .js-accordion-loaded .accordion button[aria-expanded=false]::after {
   mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center center;
   content: "";
   margin-left: auto;
   background-color: #212529;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==");
+  mask-image: url("./img/icons/tabler/chevron-down.svg");
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -267,14 +460,23 @@ section.accordion > div {
 }
 .js-accordion-loaded .accordion button[aria-expanded=true]::after {
   mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center center;
   content: "";
   margin-left: auto;
   background-color: #212529;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im02IDE1IDYtNiA2IDYiLz48L3N2Zz4=");
+  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;
@@ -282,6 +484,10 @@ article {
   align-items: flex-start;
   justify-content: flex-start;
   gap: 1.5rem;
+  padding-top: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+  padding-left: 1rem;
   max-width: 60rem;
   margin: 0 auto;
   display: flex;
@@ -291,43 +497,41 @@ article .content-wrapper {
   align-items: flex-start;
   background-color: #ffffff;
   gap: 1.5rem;
+  width: 100%;
+  max-width: 60rem;
+  border-radius: 0.5rem;
   padding-top: 2rem;
   padding-right: 2rem;
   padding-bottom: 3rem;
   padding-left: 2rem;
-  max-width: 60rem;
-  border-radius: 0.5rem;
   display: flex;
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
 }
-
-article > section,
-article > div > section {
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
+@media (width >= 24rem) {
+  article {
+    padding-top: 1rem;
+    padding-right: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 1rem;
+  }
 }
-
 .avatar {
   width: 2rem;
   height: 2rem;
-  max-width: 2rem;
-  max-height: 2rem;
-  min-height: unset;
-  padding: 0;
+  min-height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
+  font-size: 0.875rem;
   font-weight: bold;
   border-radius: 50%;
   background-color: #1971c2;
   color: #ffffff;
-  font-size: 0.875rem;
 }
-.avatar:hover {
+.avatar:hover, .avatar:visited:hover {
   background-color: #1c7ed6;
   color: #ffffff;
 }
@@ -336,8 +540,21 @@ article > div > section {
   outline: 2px solid #ffffff;
   outline-offset: -2px;
 }
+.avatar:visited {
+  background-color: #1971c2;
+  color: #ffffff;
+}
+
+body > header a.avatar,
+.manon-root > header a.avatar,
+.page-header a.avatar {
+  width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
 
-body {
+body,
+.manon-root {
   display: flex;
   flex-direction: column;
   margin: 0;
@@ -355,7 +572,8 @@ body {
   fill the screen height this will place the 
   footer at the bottom of the screen 				    */
 }
-body > main {
+body > main,
+.manon-root > main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -413,6 +631,13 @@ body > main {
   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,
@@ -455,116 +680,43 @@ body > main {
   mask-size: contain;
   content: "";
   background-color: #212529;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im05IDYgNiA2LTYgNiIvPjwvc3ZnPg==");
+  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;
+}
 
-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: 400;
-  gap: 0.5rem;
-  background-color: #1971c2;
-  color: #ffffff;
-  font-size: inherit;
-  padding-top: 0.75rem;
-  padding-right: 1rem;
-  padding-bottom: 0.75rem;
-  padding-left: 1rem;
-  border-width: 0;
-  border-color: #1971c2;
-  border-radius: 0.25rem;
+.button-container {
+  display: flex;
   margin: 0;
+  flex-direction: row;
+  gap: 1rem;
 }
-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: #1c7ed6;
-  color: #ffffff;
-  border-color: #1c7ed6;
-}
-button > *,
-a.button > *,
-a.button:visited > *,
-input[type=button] > *,
-input[type=submit] > *,
-input[type=reset] > * {
-  pointer-events: none;
+.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,
-  a.button,
-  a.button:visited,
-  input[type=button],
-  input[type=submit],
-  input[type=reset] {
-    display: flex;
+  .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;
   }
 }
 
-a.button,
-input[type=button],
-input[type=submit],
-input[type=reset] {
-  display: inline-flex;
-  cursor: pointer;
-}
-
-a.button {
-  text-decoration: none;
-  color: #ffffff;
-}
-a.button:visited, a.button.visited {
-  color: #ffffff;
-}
-
-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: #1971c2;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #ced4da;
-}
-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;
-}
-
 button.cta,
 a.button.cta,
 input[type=button].cta,
@@ -583,32 +735,6 @@ input[type=reset].cta:hover,
 input[type=reset].cta.hover {
   background-color: #1971c2;
 }
-.button-container {
-  display: flex;
-  margin: 0;
-  flex-direction: row;
-  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,
@@ -628,9 +754,100 @@ input[type=reset].destructive:hover {
   border-color: #c92a2a;
 }
 
+.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: #1971c2;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ced4da;
+}
+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.button.to-top,
+a:visited.button.to-top {
   padding: 0;
   font-size: 0;
   width: 2.5rem;
@@ -640,14 +857,16 @@ a.button.to-top {
   gap: 0;
   justify-content: center;
   align-items: center;
+  z-index: 10;
 }
 .to-top::after,
 button.to-top::after,
-a.button.to-top::after {
+a.button.to-top::after,
+a:visited.button.to-top::after {
   mask-size: contain;
   content: "";
   background-color: #ffffff;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAxMHYxME0xMiAxMGw0IDRNMTIgMTBsLTQgNE00IDRoMTYiLz48L3N2Zz4=");
+  mask-image: url("./img/icons/tabler/to-top.svg");
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -657,34 +876,83 @@ button.to-top:focus,
 button.to-top:active,
 a.button.to-top:hover,
 a.button.to-top:focus,
-a.button.to-top:active {
+a.button.to-top:active,
+a:visited.button.to-top:hover,
+a:visited.button.to-top:focus,
+a:visited.button.to-top:active {
   border-radius: 50%;
 }
 
-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,
+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: 400;
+  gap: 0.5rem;
+  background-color: #1971c2;
+  color: #ffffff;
+  padding-top: 0.75rem;
+  padding-right: 1rem;
+  padding-bottom: 0.75rem;
+  padding-left: 1rem;
+  border-width: 0;
+  border-color: #1971c2;
+  border-radius: 0.25rem;
+  margin: 0;
 }
-button.icon-only,
-a.button.icon-only,
-input[type=button].icon-only,
-input[type=submit].icon-only,
-input[type=reset].icon-only {
-  /* Hover */
+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: #1c7ed6;
+  color: #ffffff;
+  border-color: #1c7ed6;
 }
-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 > *,
+a.button > *,
+a.button:visited > *,
+input[type=button] > *,
+input[type=submit] > *,
+input[type=reset] > * {
+  pointer-events: none;
+}
+@media (width >= 24rem) {
+  button,
+  a.button,
+  a.button:visited,
+  input[type=button],
+  input[type=submit],
+  input[type=reset] {
+    display: flex;
+  }
+}
+
+a.button,
+input[type=button],
+input[type=submit],
+input[type=reset] {
+  display: inline-flex;
+  cursor: pointer;
 }
 
+a.button {
+  text-decoration: none;
+  color: #ffffff;
+}
 section.card,
 article.card,
 div.card,
@@ -751,18 +1019,6 @@ main.sidemenu div > section > div.card {
   margin-bottom: 0;
 }
 
-/* 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;
-  border-radius: 0.25rem;
-}
 pre,
 div.code-block {
   display: flex;
@@ -779,6 +1035,7 @@ div.code-block {
 pre > code,
 div.code-block > code {
   white-space: unset;
+  width: 100%;
 }
 pre button,
 div.code-block button {
@@ -800,6 +1057,23 @@ div.code-block {
   white-space: pre;
 }
 
+a:hover > code, a:visited > code, a:focus > code, a:active > code, h1 > code,
+h2 > code,
+h3 > code,
+h4 > code,
+h5 > code,
+h6 > code, span > code,
+li > code,
+p > code, code {
+  width: auto;
+  box-sizing: border-box;
+  background-color: #f1f3f5;
+  padding: 0.125rem;
+}
+/* Code */
+/* Code within text elements */
+/* Code within headers */
+/* Code within links */
 .collapsible {
   /* Above breakpoint */
 }
@@ -820,8 +1094,8 @@ div.code-block {
   */
 }
 .collapsible.collapsed button.collapsible-toggle .icon {
-  height: 100%;
-  width: auto;
+  height: 1em;
+  width: 1em;
 }
 .collapsible.collapsed button.collapsible-toggle + .collapsing-element {
   display: flex;
@@ -835,7 +1109,7 @@ div.code-block {
   align-items: center;
 }
 .collapsing-element form {
-  width: auto;
+  width: 100%;
 }
 
 .collapsible.collapsed .collapsing-element {
@@ -843,26 +1117,19 @@ div.code-block {
   max-height: initial;
   height: auto;
   box-sizing: border-box;
+  margin: 1rem 0 0;
+  min-width: 250px;
   flex-direction: column;
   justify-content: space-between;
   gap: 0;
-  width: auto;
+  width: 100%;
   max-width: 250px;
   z-index: 20;
-  padding-top: 0;
-  padding-right: 0;
-  padding-bottom: 0;
-  padding-left: 0;
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
   background-color: #fff;
   color: #212529;
   -webkit-box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
   box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
   top: 100%;
-  left: 0;
-  right: 0;
 }
 .collapsible.collapsed .collapsing-element form {
   padding: 0;
@@ -883,9 +1150,7 @@ div.code-block {
   width: 100%;
   max-width: 100%;
   padding: 0;
-  align-items: flex-start;
-  background-color: transparent;
-  color: #212529;
+  overflow: auto;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: #f1f3f5;
@@ -906,9 +1171,7 @@ div.code-block {
   white-space: nowrap;
   box-sizing: border-box;
   min-height: 3rem;
-  padding-top: 0;
   padding-right: 1rem;
-  padding-bottom: 0;
   padding-left: 1rem;
   color: #212529;
   text-decoration: none;
@@ -921,11 +1184,13 @@ div.code-block {
 .collapsible.collapsed .collapsing-element ol li a[aria-selected=true],
 .collapsible.collapsed .collapsing-element ol li a[aria-current=page] {
   font-weight: bold;
+  text-decoration: none;
 }
 .collapsible.collapsed .collapsing-element ul li a[aria-selected=true]:hover, .collapsible.collapsed .collapsing-element ul li a[aria-current=page]:hover,
 .collapsible.collapsed .collapsing-element ol li a[aria-selected=true]:hover,
 .collapsible.collapsed .collapsing-element ol li a[aria-current=page]:hover {
   border: 0;
+  text-decoration: none;
 }
 .collapsible.collapsed .collapsing-element ul li:hover,
 .collapsible.collapsed .collapsing-element ol li:hover {
@@ -934,6 +1199,7 @@ div.code-block {
 .collapsible.collapsed .collapsing-element ul li:hover a,
 .collapsible.collapsed .collapsing-element ol li:hover a {
   background-color: #e7f5ff;
+  text-decoration: none;
 }
 .collapsible.collapsed .collapsing-element ul li:hover a:visited,
 .collapsible.collapsed .collapsing-element ol li:hover a:visited {
@@ -944,6 +1210,18 @@ div.code-block {
   background-color: #e7f5ff;
 }
 
+/* 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;
+  border-radius: 0.25rem;
+}
 table .critical,
 table .high,
 table .medium,
@@ -958,7 +1236,6 @@ table .informational {
 }
 
 dl {
-  margin: 0;
   width: 100%;
 }
 dl > div {
@@ -983,6 +1260,11 @@ dl dt {
 dl dd {
   padding: 0.5rem 0;
 }
+fieldset dt,
+fieldset dd {
+  float: left;
+}
+
 .emphasized {
   font-size: 1.25rem;
   font-weight: medium;
@@ -1013,14 +1295,14 @@ dl dd {
   mask-size: contain;
   content: "";
   background-color: #1971c2;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1maWx0ZXIiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik00IDRoMTZ2Mi4xNzJhMiAyIDAgMCAxIC0uNTg2IDEuNDE0bC00LjQxNCA0LjQxNHY3bC02IDJ2LTguNWwtNC40OCAtNC45MjhhMiAyIDAgMCAxIC0uNTIgLTEuMzQ1di0yLjIyN3oiIC8+PC9zdmc+");
+  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("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOCA2IDYgMThNNiA2bDEyIDEyIi8+PC9zdmc+");
+  mask-image: url("./img/icons/tabler/x.svg");
 }
 
 .js-filters-loaded .filter > div > button {
@@ -1029,7 +1311,6 @@ dl dd {
 
 *:focus-visible,
 *.focus {
-  position: relative;
   outline: 2px solid;
   outline-offset: -2px;
   outline-color: #339af0;
@@ -1044,6 +1325,7 @@ dl dd {
 }
 
 body > footer,
+.manon-root > footer,
 .page-footer {
   display: flex;
   width: 100%;
@@ -1059,16 +1341,23 @@ body > footer,
   padding-left: 2rem;
 }
 body > footer .content-wrapper,
+.manon-root > footer .content-wrapper,
 .page-footer .content-wrapper {
   flex-direction: column;
   align-items: flex-start;
 }
 body > footer a,
+.manon-root > footer a,
 .page-footer a {
   text-decoration: none;
   color: #1971c2;
 }
 body > footer a[aria-current=page], body > footer a[aria-current=page]:hover, body > footer a:hover, body > footer a:visited:hover, body > footer a[aria-current=page]:visited:hover,
+.manon-root > footer a[aria-current=page],
+.manon-root > footer a[aria-current=page]:hover,
+.manon-root > footer a:hover,
+.manon-root > footer a:visited:hover,
+.manon-root > footer a[aria-current=page]:visited:hover,
 .page-footer a[aria-current=page],
 .page-footer a[aria-current=page]:hover,
 .page-footer a:hover,
@@ -1078,6 +1367,8 @@ body > footer a[aria-current=page], body > footer a[aria-current=page]:hover, bo
 }
 body > footer ul,
 body > footer ol,
+.manon-root > footer ul,
+.manon-root > footer ol,
 .page-footer ul,
 .page-footer ol {
   display: flex;
@@ -1089,19 +1380,14 @@ body > footer ol,
 }
 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 ul li::before,
-body > footer ol li::before,
-.page-footer ul li::before,
-.page-footer ol li::before {
-  /* Preventing default nav before to show up */
-  display: none;
-}
 body > footer h1,
 body > footer h2,
 body > footer h3,
@@ -1111,6 +1397,15 @@ 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,
@@ -1124,6 +1419,7 @@ body > footer li,
   text-align: inherit;
 }
 body > footer nav,
+.manon-root > footer nav,
 .page-footer nav {
   display: flex;
   width: 100%;
@@ -1132,61 +1428,20 @@ body > footer nav,
 }
 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 nav ul li::before,
-body > footer nav ol li::before,
-.page-footer nav ul li::before,
-.page-footer nav ol li::before {
-  /* Preventing default nav before to show up */
-  display: none;
-}
-
-form {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  box-sizing: border-box;
-  align-items: flex-start;
-  color: #212529;
-  gap: 1rem;
-  max-width: 40rem;
-}
-form div,
-form div.form-group {
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-}
-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;
-}
-
-form button,
-form a.button,
-form input[type=button],
-form input[type=submit],
-form input[type=reset] {
-  box-sizing: border-box;
-}
 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;
@@ -1212,6 +1467,13 @@ 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;
@@ -1238,6 +1500,53 @@ 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: 100%;
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0 1rem;
+  min-width: fit-content;
+  justify-content: center;
+}
+
+input.error, input.warning, input.confirmation, input.explanation, input.primary,
+select.error,
+select.warning,
+select.confirmation,
+select.explanation,
+select.primary,
+textarea.error,
+textarea.warning,
+textarea.confirmation,
+textarea.explanation,
+textarea.primary,
+input[type=checkbox]:not(:checked).error,
+input[type=checkbox]:not(:checked).warning,
+input[type=checkbox]:not(:checked).confirmation,
+input[type=checkbox]:not(:checked).explanation,
+input[type=checkbox]:not(:checked).primary,
+input[type=radio]:not(:checked).error,
+input[type=radio]:not(:checked).warning,
+input[type=radio]:not(:checked).confirmation,
+input[type=radio]:not(:checked).explanation,
+input[type=radio]:not(:checked).primary {
+  border-width: 1px;
+  border-style: solid;
+  background-color: #fff;
+}
+
 form fieldset .checkbox {
   padding: 0;
   display: initial;
@@ -1248,11 +1557,16 @@ form fieldset .checkbox input[type=checkbox] {
   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;
@@ -1271,6 +1585,57 @@ 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 
@@ -1289,9 +1654,7 @@ form > fieldset,
 main section form > fieldset,
 main article form > fieldset,
 main div form > fieldset {
-  padding: 0;
-  margin: 0;
-  border-width: 0;
+  width: 100%;
 }
 form > fieldset legend,
 main section form > fieldset legend,
@@ -1299,13 +1662,6 @@ 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,
@@ -1318,9 +1674,6 @@ 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,
@@ -1337,22 +1690,16 @@ main div form > fieldset div {
   float: left;
   width: 100%;
 }
-form > fieldset div > *,
-main section form > fieldset div > *,
-main article form > fieldset div > *,
-main div form > fieldset div > * {
+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,
@@ -1382,9 +1729,103 @@ 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: 2.5rem;
+}
+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.5rem;
+}
+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.5rem;
+  right: 0;
+  padding: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #ced4da;
+  border-radius: 50%;
+  background-color: transparent;
+  color: #1971c2;
+  margin-right: -2.5rem;
+}
+form.help > div .help-button::before,
+form.help > fieldset .help-button::before {
+  mask-size: contain;
+  content: "";
+  background-color: #1971c2;
+  mask-image: url("./img/icons/tabler/question-mark.svg");
+  width: 1rem;
+  height: 1rem;
+  mask-repeat: no-repeat;
+  mask-position: center;
+}
+form.help > div .help-button + .explanation,
+form.help > fieldset .help-button + .explanation {
+  margin-bottom: 0;
+}
+form.help > div p.explanation.collapsed,
+form.help > div div.explanation.collapsed,
+form.help > fieldset p.explanation.collapsed,
+form.help > fieldset div.explanation.collapsed {
+  display: none;
+}
+form.help > div *:has(.help-button),
+form.help > fieldset *:has(.help-button) {
+  position: relative;
+}
+form.help fieldset {
+  max-width: 100%;
+  min-width: 0;
+  gap: 0;
+}
+form.help fieldset .help-button {
+  display: inline-block;
+}
+form.help fieldset .help-button + .explanation {
+  margin-top: 0;
+}
+form.help fieldset .help-button::before {
+  display: inline-block;
+}
+
 /* Fieldset styling is a bit different compared to the default form styling.
 This is because of a couple of styling restrictions and issues concerning fieldsets and it's children.
 - Fieldsets can't use flexbox
@@ -1492,154 +1933,39 @@ form.horizontal > fieldset > .radio > div {
   form.horizontal > fieldset > a,
   form.horizontal > fieldset > fieldset {
     padding: 0;
-    margin-left: 33.33%;
+    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 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.form-group {
+  max-width: 100%;
+  margin-left: 0;
 }
-
-form.horizontal > fieldset > fieldset legend {
-  font-weight: inherit;
-  margin: 0;
-  box-sizing: border-box;
+form.horizontal fieldset.form-group legend {
   float: left;
+  width: 100%;
+  max-width: 33.33%;
+  margin-top: 1rem;
+  font-weight: bold;
 }
 @media (width >= 24rem) {
-  form.horizontal > fieldset > fieldset > * {
+  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 .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.horizontal fieldset.form-group label {
+    float: left;
+    width: 33.33%;
+    margin-top: 1rem;
   }
 }
 
-form textarea {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 1rem;
-  font-size: inherit;
-  max-width: 100%;
-  resize: vertical;
-}
-
-form.help {
-  position: relative;
-}
-form.help > div {
-  width: 100%;
-  position: relative;
-  padding: 0 2rem 0 0;
-}
-form.help > div:has(.help-container) {
-  padding: 0;
-}
-form.help .help-container {
-  width: 100%;
-  position: relative;
-  padding: 0 2rem 0 0;
-}
-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;
-  top: 0.5rem;
-  width: auto;
-  right: 0;
-  padding: 0.25rem;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #ced4da;
-  border-radius: 50%;
-  background-color: transparent;
-  color: #1971c2;
-}
-form.help > div .help-button::before,
-form.help > fieldset .help-button::before {
-  mask-size: contain;
-  content: "";
-  background-color: #1971c2;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04IDhhMy41IDMgMCAwIDEgMy41LTNoMUEzLjUgMyAwIDAgMSAxNiA4YTMgMyAwIDAgMS0yIDMgMyA0IDAgMCAwLTIgNE0xMiAxOXYuMDEiLz48L3N2Zz4=");
-  width: 1rem;
-  height: 1rem;
-}
-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;
-  min-height: 1.5rem;
-}
-form.help fieldset {
-  max-width: 100%;
-  min-width: 0;
-  gap: 0;
-}
-form.help fieldset .help-button {
-  display: inline-block;
-  margin: 1rem -2.5rem 0 0;
-}
-form.help fieldset .help-button + .explanation {
-  margin-top: 0;
-}
-form.help fieldset .help-button::before {
-  display: inline-block;
-}
-
 form.horizontal {
   flex-direction: column !important;
   align-items: flex-start;
@@ -1852,6 +2178,19 @@ form.horizontal > section .option-group {
   }
 }
 
+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;
@@ -1869,42 +2208,83 @@ input:disabled {
   cursor: not-allowed;
 }
 
-form.inline {
-  padding: 0;
-  background-color: transparent;
-  max-width: unset;
-  width: auto;
+form label {
+  font-weight: bold;
 }
-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;
+
+form fieldset.form-group,
+form.horizontal fieldset.form-group {
+  max-width: 100%;
+  margin-left: 0;
 }
-form label {
+form fieldset.form-group legend,
+form.horizontal fieldset.form-group legend {
   font-weight: bold;
 }
 
-.combined-field {
+form .required > div {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: 0;
-  flex-wrap: nowrap;
+  flex-direction: column;
+  width: 100%;
 }
-.combined-field input {
-  border-radius: 0.5rem 0 0 0.5rem;
+
+form select {
+  font-size: 1rem;
+  color: #212529;
+  width: 100%;
+  min-width: 15rem;
+  max-width: 100%;
+  min-height: 3rem;
+  border: 1px solid #ced4da;
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
 }
-.combined-field button {
-  min-height: 100%;
-  border-radius: 0 0.5rem 0.5rem 0;
-  padding: 0 1rem;
-  min-width: fit-content;
-  justify-content: center;
+
+form textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 1rem;
+  font-size: inherit;
+  max-width: 100%;
+  resize: vertical;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: flex-start;
+  color: #212529;
+  gap: 1rem;
+  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%;
@@ -1921,6 +2301,8 @@ body > header,
 }
 body > header > section,
 body > header > div,
+.manon-root > header > section,
+.manon-root > header > div,
 .page-header > section,
 .page-header > div {
   align-items: stretch;
@@ -1928,6 +2310,8 @@ body > header > div,
 }
 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;
@@ -1936,25 +2320,35 @@ body > header > div.content-wrapper,
 }
 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;
   padding: 0.25rem 0.5rem;
-  min-height: 100%;
   display: flex;
   align-items: center;
+  min-height: 100%;
 }
 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,
@@ -1965,6 +2359,8 @@ body > header a[aria-current=page], body > header a[aria-current=page]:hover, bo
 }
 body > header ul,
 body > header ol,
+.manon-root > header ul,
+.manon-root > header ol,
 .page-header ul,
 .page-header ol {
   display: flex;
@@ -1978,6 +2374,8 @@ body > header ol,
 }
 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;
@@ -1989,12 +2387,15 @@ body > header ol li,
 }
 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 nav,
+.manon-root > header nav,
 .page-header nav {
   display: flex;
   flex-direction: row;
@@ -2005,25 +2406,19 @@ body > header nav,
   align-items: stretch;
   width: 100%;
 }
+body > header nav > div,
+.manon-root > header nav > div,
+.page-header nav > div {
+  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: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
-}
-
 .heading-xxl {
   font-size: 3rem;
 }
@@ -2048,18 +2443,138 @@ h1 > a {
   font-size: 1rem;
 }
 
-.hero {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  hyphens: auto;
+}
+
+h1,
+h1 > a {
+  font-family: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
+}
+
+.heading-xxl {
+  font-size: 3rem;
+}
+
+.heading-xl {
+  font-size: 2.5rem;
+}
+
+.heading-large {
+  font-size: 2rem;
+}
+
+.heading-normal {
+  font-size: 1.5rem;
+}
+
+.heading-small {
+  font-size: 1.25rem;
+}
+
+.heading-xs {
+  font-size: 1rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  hyphens: auto;
+}
+
+h1,
+h1 > a {
+  font-family: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif;
+}
+
+.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;
-  height: 25rem;
+  min-height: 25rem;
+  height: auto;
   width: calc(100% + 8rem);
   max-width: calc(100% + 8rem);
   background-color: #228be6;
   margin: -4rem 0 0 -4rem;
   border-radius: 0;
+  padding: 2rem;
   justify-content: center;
   flex-direction: column;
   color: #ffffff;
   font-size: 1.25rem;
+  box-sizing: border-box;
   display: flex;
 }
 .hero .content-wrapper {
@@ -2092,12 +2607,17 @@ h1 > a {
 .hero h6 {
   font-size: 2.25rem;
 }
+@media (width >= 50rem) {
+  .hero {
+    padding: 0;
+  }
+}
 
 .icon {
   mask-size: contain;
   mask-repeat: no-repeat;
+  mask-position: center center;
   content: "";
-  background-color: currentcolor;
   height: 1.5rem;
   width: 1.5rem;
   min-width: 1.5rem;
@@ -2110,221 +2630,291 @@ a.icon {
   background-color: transparent;
 }
 
-.icon-ascending {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMS4yOTMgNy4yOTNhMSAxIDAgMCAxIDEuMzItLjA4M2wuMDk0LjA4MyA2IDYgLjA4My4wOTQuMDU0LjA3Ny4wNTQuMDk2LjAxNy4wMzYuMDI3LjA2Ny4wMzIuMTA4LjAxLjA1My4wMS4wNi4wMDQuMDU3TDE5IDE0bC0uMDAyLjA1OS0uMDA1LjA1OC0uMDA5LjA2LS4wMS4wNTItLjAzMi4xMDgtLjAyNy4wNjctLjA3LjEzMi0uMDY1LjA5LS4wNzMuMDgxLS4wOTQuMDgzLS4wNzcuMDU0LS4wOTYuMDU0LS4wMzYuMDE3LS4wNjcuMDI3LS4xMDguMDMyLS4wNTMuMDEtLjA2LjAxLS4wNTcuMDA0TDE4IDE1SDZjLS44NTIgMC0xLjI5Ny0uOTg2LS43ODMtMS42MjNsLjA3Ni0uMDg0eiIvPjwvc3ZnPg==");
-}
-
-.icon-check {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1jaXJjbGUtY2hlY2siPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAxMm0tOSAwYTkgOSAwIDEgMCAxOCAwYTkgOSAwIDEgMCAtMTggMCIgLz48cGF0aCBkPSJNOSAxMmwyIDJsNCAtNCIgLz48L3N2Zz4=");
-}
-
-.icon-chevron-down {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==");
-}
-
-.icon-chevron-left {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im0xNSA2LTYgNiA2IDYiLz48L3N2Zz4=");
-}
-
-.icon-chevron-light-down {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im00IDExIDggMyA4LTMiLz48L3N2Zz4=");
-}
-
-.icon-chevron-light-left {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im0xMyAyMC0zLTggMy04Ii8+PC9zdmc+");
-}
-
-.icon-chevron-light-right {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im0xMSA0IDMgOC0zIDgiLz48L3N2Zz4=");
-}
-
-.icon-chevron-light-up {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im00IDEzIDgtMyA4IDMiLz48L3N2Zz4=");
-}
-
-.icon-chevron-right {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im05IDYgNiA2LTYgNiIvPjwvc3ZnPg==");
-}
-
-.icon-chevron-up {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im02IDE1IDYtNiA2IDYiLz48L3N2Zz4=");
-}
-
-.icon-close {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOCA2IDYgMThNNiA2bDEyIDEyIi8+PC9zdmc+");
-}
-
-.icon-descending {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOCA5Yy44NTIgMCAxLjI5Ny45ODYuNzgzIDEuNjIzbC0uMDc2LjA4NC02IDZhMSAxIDAgMCAxLTEuMzIuMDgzbC0uMDk0LS4wODMtNi02LS4wODMtLjA5NC0uMDU0LS4wNzctLjA1NC0uMDk2LS4wMTctLjAzNi0uMDI3LS4wNjctLjAzMi0uMTA4LS4wMS0uMDUzLS4wMS0uMDYtLjAwNC0uMDU3di0uMTE4bC4wMDUtLjA1OC4wMDktLjA2LjAxLS4wNTIuMDMyLS4xMDguMDI3LS4wNjcuMDctLjEzMi4wNjUtLjA5LjA3My0uMDgxLjA5NC0uMDgzLjA3Ny0uMDU0LjA5Ni0uMDU0LjAzNi0uMDE3LjA2Ny0uMDI3LjEwOC0uMDMyLjA1My0uMDEuMDYtLjAxLjA1Ny0uMDA0eiIvPjwvc3ZnPg==");
-}
-
-.icon-download {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik00IDE3djJhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0ydi0yTTcgMTFsNSA1IDUtNU0xMiA0djEyIi8+PC9zdmc+");
-}
-
-.icon-error {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1leGNsYW1hdGlvbi1jaXJjbGUiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xMiAxMm0tOSAwYTkgOSAwIDEgMCAxOCAwYTkgOSAwIDEgMCAtMTggMCIgLz48cGF0aCBkPSJNMTIgOXY0IiAvPjxwYXRoIGQ9Ik0xMiAxNnYuMDEiIC8+PC9zdmc+");
-}
-
-.icon-filter {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1maWx0ZXIiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik00IDRoMTZ2Mi4xNzJhMiAyIDAgMCAxIC0uNTg2IDEuNDE0bC00LjQxNCA0LjQxNHY3bC02IDJ2LTguNWwtNC40OCAtNC45MjhhMiAyIDAgMCAxIC0uNTIgLTEuMzQ1di0yLjIyN3oiIC8+PC9zdmc+");
-}
-
-.icon-hamburger {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik00IDZoMTZNNCAxMmgxNk00IDE4aDE2Ii8+PC9zdmc+");
-}
-
-.icon-heart {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS41IDEyLjU3MiAxMiAyMGwtNy41LTcuNDI4QTUgNSAwIDEgMSAxMiA2LjAwNmE1IDUgMCAxIDEgNy41IDYuNTcyIi8+PC9zdmc+");
-}
-
-.icon-home {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik01IDEySDNsOS05IDkgOWgtMk01IDEydjdhMiAyIDAgMCAwIDIgMmgxMGEyIDIgMCAwIDAgMi0ydi03Ii8+PHBhdGggZD0iTTkgMjF2LTZhMiAyIDAgMCAxIDItMmgyYTIgMiAwIDAgMSAyIDJ2NiIvPjwvc3ZnPg==");
-}
-
-.icon-informative {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1pbmZvLWNpcmNsZSI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTMgMTJhOSA5IDAgMSAwIDE4IDBhOSA5IDAgMCAwIC0xOCAwIiAvPjxwYXRoIGQ9Ik0xMiA5aC4wMSIgLz48cGF0aCBkPSJNMTEgMTJoMXY0aDEiIC8+PC9zdmc+");
-}
-
-.icon-lock-closed {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik01IDEzYTIgMiAwIDAgMSAyLTJoMTBhMiAyIDAgMCAxIDIgMnY2YTIgMiAwIDAgMS0yIDJIN2EyIDIgMCAwIDEtMi0yeiIvPjxwYXRoIGQ9Ik0xMSAxNmExIDEgMCAxIDAgMiAwIDEgMSAwIDAgMC0yIDBNOCAxMVY3YTQgNCAwIDEgMSA4IDB2NCIvPjwvc3ZnPg==");
-}
-
-.icon-on-off {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik03IDZhNy43NSA3Ljc1IDAgMSAwIDEwIDBNMTIgNHY4Ii8+PC9zdmc+");
-}
-
-.icon-outgoing {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xNyA3IDcgMTdNOCA3aDl2OSIvPjwvc3ZnPg==");
-}
-
-.icon-questionmark {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04IDhhMy41IDMgMCAwIDEgMy41LTNoMUEzLjUgMyAwIDAgMSAxNiA4YTMgMyAwIDAgMS0yIDMgMyA0IDAgMCAwLTIgNE0xMiAxOXYuMDEiLz48L3N2Zz4=");
-}
-
-.icon-reset {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0yMCAxMUE4LjEgOC4xIDAgMCAwIDQuNSA5TTQgNXY0aDRNNCAxM2E4LjEgOC4xIDAgMCAwIDE1LjUgMm0uNSA0di00aC00Ii8+PC9zdmc+");
-}
-
-.icon-search {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0zIDEwYTcgNyAwIDEgMCAxNCAwIDcgNyAwIDEgMC0xNCAwTTIxIDIxbC02LTYiLz48L3N2Zz4=");
-}
-
-.icon-smartphone {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik02IDVhMiAyIDAgMCAxIDItMmg4YTIgMiAwIDAgMSAyIDJ2MTRhMiAyIDAgMCAxLTIgMkg4YTIgMiAwIDAgMS0yLTJ6TTExIDRoMk0xMiAxN3YuMDEiLz48L3N2Zz4=");
-}
-
-.icon-sort {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iY3VycmVudENvbG9yIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMS4yOTMgMy4yOTNhMSAxIDAgMCAxIDEuNDE0IDBsNiA2YTEgMSAwIDAgMSAuMDczLjA4MmwuMDA2LjAwOC4wMTYuMDIyLjA0Mi4wNTkuMDA5LjAxNS4wMDcuMDEuMDE0LjAyNy4wMjQuMDQ0LjAwNy4wMTcuMDEuMDIuMDEyLjAzMi4wMTUuMDM0LjAwNy4wMjUuMDA4LjAyLjAwNS4wMjYuMDEyLjAzNy4wMDQuMDI4LjAwNi4wMjUuMDAzLjAyNi4wMDYuMDMzLjAwMi4wMy4wMDMuMDI4di4wMjZMMTkgMTBsLS4wMDIuMDMzdi4wMjZsLS4wMDMuMDI2LS4wMDIuMDMyLS4wMDUuMDI5LS4wMDQuMDMtLjAwNi4wMjQtLjAwNC4wMy0uMDEyLjAzNS0uMDA1LjAyNy0uMDA4LjAxOS0uMDA3LjAyNi0uMDE1LjAzMy0uMDEyLjAzNC0uMDEuMDE4LS4wMDcuMDE4LS4wMjQuMDQzLS4wMTQuMDI4LS4wMDcuMDA5LS4wMDkuMDE2LS4wNDIuMDU4LS4wMTIuMDE5LS4wMDQuMDAzLS4wMDYuMDFhMSAxIDAgMCAxLS4xNTUuMTU0bC0uMDA5LjAwNi0uMDIyLjAxNi0uMDU4LjA0Mi0uMDE2LjAwOS0uMDA5LjAwNy0uMDI4LjAxNC0uMDQzLjAyNC0uMDE4LjAwNy0uMDE4LjAxLS4wMzQuMDEyLS4wMzMuMDE1LS4wMjQuMDA2LS4wMjEuMDA5LS4wMjcuMDA1LS4wMzYuMDEyLS4wMjkuMDA0LS4wMjQuMDA2LS4wMjguMDAzLS4wMzEuMDA2LS4wMzIuMDAyLS4wMjYuMDAzaC0uMDI2TDE4IDExSDZjLS44OSAwLTEuMzM3LTEuMDc3LS43MDctMS43MDd6TTE4IDEzbC4wMzMuMDAyaC4wMjZsLjAyNi4wMDMuMDMyLjAwMi4wMzEuMDA2LjAyOC4wMDMuMDI0LjAwNi4wMy4wMDQuMDM1LjAxMi4wMjcuMDA1LjAxOS4wMDguMDI2LjAwNy4wMzMuMDE1LjAzNC4wMTIuMDE4LjAxLjAxOC4wMDcuMDQzLjAyNC4wMjguMDE0LjAwOS4wMDcuMDE2LjAwOS4wNTEuMDM3LjAyNi4wMTcuMDAzLjAwNC4wMS4wMDZhMSAxIDAgMCAxIC4xNTQuMTU1bC4wMDYuMDA5LjAxNS4wMi4wNDMuMDYuMDA5LjAxNi4wMDcuMDA5LjAxNC4wMjguMDI0LjA0My4wMDUuMDEzLjAxMi4wMjMuMDEyLjAzNC4wMTUuMDMzLjAwNy4wMjYuMDA4LjAyLjAwNS4wMjYuMDEyLjAzNi4wMDQuMDI5LjAwNi4wMjQuMDAzLjAyOC4wMDYuMDMxLjAwMi4wMzIuMDAzLjAyNnYuMDI2TDE5IDE0bC0uMDAyLjAzM3YuMDI2bC0uMDAzLjAyNi0uMDAyLjAzMi0uMDA2LjAzMS0uMDAzLjAyOC0uMDA2LjAyNC0uMDA0LjAzLS4wMTIuMDM1LS4wMDUuMDI3LS4wMDguMDE5LS4wMDcuMDI2LS4wMTUuMDMzLS4wMTIuMDM0LS4wMS4wMTgtLjAwNy4wMTgtLjAyNC4wNDMtLjAxNC4wMjgtLjAwNy4wMDktLjAwOS4wMTYtLjA0Mi4wNTgtLjAxMi4wMTktLjAwNC4wMDMtLjAwNi4wMS0uMDczLjA4MS02IDZhMSAxIDAgMCAxLTEuNDE0IDBsLTYtNkM0LjY2MyAxNC4wNzcgNS4xMDkgMTMgNiAxM3oiLz48L3N2Zz4=");
-}
-
-.icon-to-top {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAxMHYxME0xMiAxMGw0IDRNMTIgMTBsLTQgNE00IDRoMTYiLz48L3N2Zz4=");
+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;
+  object-position: center;
 }
 
-.icon-trash {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik00IDdoMTZNMTAgMTF2Nk0xNCAxMXY2TTUgN2wxIDEyYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMi0ybDEtMTJNOSA3VjRhMSAxIDAgMCAxIDEtMWg0YTEgMSAwIDAgMSAxIDF2MyIvPjwvc3ZnPg==");
+*:has(> .image-background) {
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+  min-width: 100%;
+  padding: 1.5rem;
 }
 
-.icon-user {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik04IDdhNCA0IDAgMSAwIDggMCA0IDQgMCAwIDAtOCAwTTYgMjF2LTJhNCA0IDAgMCAxIDQtNGg0YTQgNCAwIDAgMSA0IDR2MiIvPjwvc3ZnPg==");
+div.image-background:has(img:only-child) {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-.icon-warning {
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgd2lkdGg9IjI0IiAgaGVpZ2h0PSIyNCIgIHZpZXdCb3g9IjAgMCAyNCAyNCIgIGZpbGw9Im5vbmUiICBzdHJva2U9ImN1cnJlbnRDb2xvciIgIHN0cm9rZS13aWR0aD0iMiIgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgIHN0cm9rZS1saW5lam9pbj0icm91bmQiICBjbGFzcz0iaWNvbiBpY29uLXRhYmxlciBpY29ucy10YWJsZXItb3V0bGluZSBpY29uLXRhYmxlci1hbGVydC10cmlhbmdsZSI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTEyIDl2NCIgLz48cGF0aCBkPSJNMTAuMzYzIDMuNTkxbC04LjEwNiAxMy41MzRhMS45MTQgMS45MTQgMCAwIDAgMS42MzYgMi44NzFoMTYuMjE0YTEuOTE0IDEuOTE0IDAgMCAwIDEuNjM2IC0yLjg3bC04LjEwNiAtMTMuNTM2YTEuOTE0IDEuOTE0IDAgMCAwIC0zLjI3NCAweiIgLz48cGF0aCBkPSJNMTIgMTZoLjAxIiAvPjwvc3ZnPg==");
+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-square li > div, .images-square > div, .image-square > div {
+ul.images-round li > div, .images-round > div, .image-round > 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 {
+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-square {
+.image-round {
   margin: 0;
 }
-/* Div with square images inside */
-/* List with square images */
-ul.images-square {
+/* Div with round images inside */
+/* List with round images */
+ul.images-round {
   width: 100%;
   margin: 0;
   padding: 0;
 }
-ul.images-square li {
+ul.images-round li {
   list-style: none;
 }
 /* Image container */
-ul.images-round li > div, .images-round > div, .image-round > div {
+ul.images-square li > div, .images-square > div, .image-square > 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 {
+ul.images-square li > div img, .images-square > div img, .image-square > div img {
   position: absolute;
   object-fit: cover;
   padding: 0;
-  border-radius: 50%;
   width: 100%;
   height: 100%;
   max-width: 100%;
 }
 
-.image-round {
+.image-square {
   margin: 0;
 }
-/* Div with round images inside */
-/* List with round images */
-ul.images-round {
+/* Div with square images inside */
+/* List with square images */
+ul.images-square {
   width: 100%;
   margin: 0;
   padding: 0;
 }
-ul.images-round li {
+ul.images-square li {
   list-style: none;
 }
-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%;
-}
+.label {
+  display: inline-block;
+  text-align: center;
+}
 
-img.image-background, .image-background img {
-  object-fit: cover;
+.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: #dee2e6;
+  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%;
-  padding: 0; /* Resetting padding */
-  height: 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: #e7f5ff;
+  color: #212529;
+}
+.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: #e7f5ff;
+  color: #212529;
+}
+.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;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  object-position: center;
 }
-
-*:has(> .image-background) {
-  position: relative;
-  z-index: 0;
+.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;
-  min-width: 100%;
-  padding: 1.5rem;
+  text-align: left;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
-
 a {
   display: inline-flex;
   align-items: center;
@@ -2388,7 +2978,13 @@ body > header a.logo,
 body > header a:visited.logo,
 body > header a:hover.logo,
 body > header a:active.logo,
-body > header a:focus.logo, .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,
@@ -2397,6 +2993,7 @@ a:focus.logo {
   align-self: center;
   background-color: transparent;
   border: 0;
+  display: flex;
   font-size: 0;
   padding: 0;
   display: flex;
@@ -2405,7 +3002,8 @@ 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, .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,
@@ -2418,35 +3016,6 @@ a:focus.logo img {
   min-width: 2rem;
   max-width: 2rem;
 }
-
-nav a {
-  text-decoration: none;
-}
-nav ul {
-  padding: 0;
-  gap: 0.5rem;
-  display: flex;
-}
-nav ul li {
-  display: flex;
-  align-items: center;
-  list-style: none;
-}
-
-.nota-bene {
-  margin: 0;
-  font-size: 0.75rem;
-  color: #495057;
-}
-
-body > header nav > div,
-.page-header nav > div {
-  display: flex;
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-
 main {
   display: flex;
   width: 100%;
@@ -2477,16 +3046,144 @@ h5,
 h6 {
   max-width: 50rem;
 }
-.message-counter {
+a.message-counter:hover, a.message-counter:visited, a.message-counter:visited:hover, .message-counter {
   display: inline-flex;
   flex-grow: 0;
   align-items: center;
   justify-content: center;
   width: auto;
   box-sizing: initial;
+  min-width: 1.125rem;
+  height: 1.125rem;
+  padding: 0.25rem;
+  background-color: #d52a1e;
+  color: white;
+  font-size: 0.8rem;
+  border-radius: 1.125rem;
+  margin: 0 0.25rem;
+}
+
+a.message-counter {
+  text-decoration: none;
+}
+a:has(.message-counter) {
+  text-decoration: none;
+}
+a:has(.message-counter) span {
+  margin: 0 0.25rem;
+}
+
+nav.tabs ul,
+nav.tabs ol {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+nav.tabs ul li::before,
+nav.tabs ol li::before {
+  display: none; /* Preventing default nav before to show up */
+}
+nav.tabs ul li a,
+nav.tabs ul li a:visited,
+nav.tabs ol li a,
+nav.tabs ol li a:visited {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  height: 100%;
+  box-sizing: border-box;
+}
+nav a {
+  text-decoration: none;
+}
+nav ul {
+  padding: 0;
+  gap: 0.5rem;
+  display: flex;
+}
+nav ul li {
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+.nota-bene {
   margin: 0;
+  font-size: 0.75rem;
+  color: #495057;
 }
 
+form div.notification p,
+form div.error p,
+form div.warning p,
+form div.confirmation p,
+form div.explanation p,
+form div.system p {
+  margin: 0;
+}
+form > div p,
+form > div span {
+  /* Message types that come after fields */
+}
+form > div p,
+form > div span {
+  /* Message types that come before fields */
+}
+table td,
+table th,
+table tr {
+  align-items: center;
+}
+table td.error > div, table td.warning > div, table td.explanation > div, table td.confirmation > div, table td.system > div,
+table th.error > div,
+table th.warning > div,
+table th.explanation > div,
+table th.confirmation > div,
+table th.system > div,
+table tr.error > div,
+table tr.warning > div,
+table tr.explanation > div,
+table tr.confirmation > div,
+table tr.system > div {
+  display: flex;
+  gap: 0.25rem;
+}
+table td.error .notification-type, table td.warning .notification-type, table td.explanation .notification-type, table td.confirmation .notification-type, table td.system .notification-type,
+table th.error .notification-type,
+table th.warning .notification-type,
+table th.explanation .notification-type,
+table th.confirmation .notification-type,
+table th.system .notification-type,
+table tr.error .notification-type,
+table tr.warning .notification-type,
+table tr.explanation .notification-type,
+table tr.confirmation .notification-type,
+table tr.system .notification-type {
+  font-size: 0;
+}
+table td.error .icon,
+table th.error .icon,
+table tr.error .icon {
+  background-color: #f03e3e;
+}
+table td.warning .icon,
+table th.warning .icon,
+table tr.warning .icon {
+  background-color: #f08c00;
+}
+table td.confirmation .icon,
+table th.confirmation .icon,
+table tr.confirmation .icon {
+  background-color: #37b24d;
+}
+table td.explanation .icon,
+table th.explanation .icon,
+table tr.explanation .icon {
+  background-color: #1c7ed6;
+}
+table td.system .icon,
+table th.system .icon,
+table tr.system .icon {
+  background-color: #212529;
+}
 .notification {
   max-width: 100%;
   width: 100%;
@@ -2503,7 +3200,6 @@ h6 {
   border-style: solid;
   gap: 1rem;
 }
-
 .notification-type {
   align-items: center;
   display: inline-flex;
@@ -2533,8 +3229,14 @@ span.system {
   border-width: 1px;
   border-style: solid;
   gap: 1rem;
-  box-sizing: border-box;
-  display: flex;
+}
+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;
@@ -2579,11 +3281,6 @@ span.confirmation {
   color: #212529;
   border-color: #37b24d;
 }
-p.confirmation::before,
-span.confirmation::before {
-  color: #37b24d;
-  background-color: #37b24d;
-}
 p.confirmation .icon,
 span.confirmation .icon {
   background-color: #37b24d;
@@ -2626,19 +3323,28 @@ section.system {
   border-width: 1px;
   border-style: solid;
   gap: 1rem;
-  display: flex;
-  margin: 0 auto;
-  box-sizing: border-box;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
 }
-.block-notification.error,
+.block-notification.error, .block-notification.warning, .block-notification.confirmation, .block-notification.explanation, .block-notification.system,
 div.error,
-section.error {
-  background-color: #ffe3e3;
-  color: #212529;
-  border-color: #f03e3e;
+div.warning,
+div.confirmation,
+div.explanation,
+div.system,
+section.error,
+section.warning,
+section.confirmation,
+section.explanation,
+section.system {
+  margin: 0 auto;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.block-notification.error,
+div.error,
+section.error {
+  background-color: #ffe3e3;
+  color: #212529;
+  border-color: #f03e3e;
 }
 .block-notification.error .icon,
 div.error .icon,
@@ -2679,12 +3385,6 @@ section.confirmation {
   color: #212529;
   border-color: #37b24d;
 }
-.block-notification.confirmation::before,
-div.confirmation::before,
-section.confirmation::before {
-  color: #37b24d;
-  background-color: #37b24d;
-}
 .block-notification.confirmation .icon,
 div.confirmation .icon,
 section.confirmation .icon {
@@ -2705,90 +3405,18 @@ section.system .icon {
   color: #212529;
 }
 
-/* Icon */
-table td,
-table th,
-table tr {
-  align-items: center;
-}
-table td.error > div, table td.warning > div, table td.explanation > div, table td.confirmation > div, table td.system > div,
-table th.error > div,
-table th.warning > div,
-table th.explanation > div,
-table th.confirmation > div,
-table th.system > div,
-table tr.error > div,
-table tr.warning > div,
-table tr.explanation > div,
-table tr.confirmation > div,
-table tr.system > div {
-  display: flex;
-  gap: 0.25rem;
-}
-table td.error .notification-type, table td.warning .notification-type, table td.explanation .notification-type, table td.confirmation .notification-type, table td.system .notification-type,
-table th.error .notification-type,
-table th.warning .notification-type,
-table th.explanation .notification-type,
-table th.confirmation .notification-type,
-table th.system .notification-type,
-table tr.error .notification-type,
-table tr.warning .notification-type,
-table tr.explanation .notification-type,
-table tr.confirmation .notification-type,
-table tr.system .notification-type {
-  font-size: 0;
-}
-table td.error .icon,
-table th.error .icon,
-table tr.error .icon {
-  background-color: #f03e3e;
-}
-table td.warning .icon,
-table th.warning .icon,
-table tr.warning .icon {
-  background-color: #f08c00;
-}
-table td.confirmation .icon,
-table th.confirmation .icon,
-table tr.confirmation .icon {
-  background-color: #37b24d;
-}
-table td.explanation .icon,
-table th.explanation .icon,
-table tr.explanation .icon {
-  background-color: #1c7ed6;
-}
-table td.system .icon,
-table th.system .icon,
-table tr.system .icon {
-  background-color: #212529;
-}
-table tr {
-  filter: brightness(90%);
-}
-
-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 */
-}
 p {
   color: inherit;
   max-width: 42rem;
   margin: 0;
 }
 
+.page-title {
+  width: 100%;
+  max-width: 60rem;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
 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],
@@ -2846,7 +3474,7 @@ nav.pagination .adjacent,
   mask-size: contain;
   content: "";
   background-color: #1971c2;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im0xNSA2LTYgNiA2IDYiLz48L3N2Zz4=");
+  mask-image: url("./img/icons/tabler/chevron-left.svg");
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -2857,7 +3485,7 @@ nav.pagination .adjacent,
   mask-size: contain;
   content: "";
   background-color: #1971c2;
-  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Im05IDYgNiA2LTYgNiIvPjwvc3ZnPg==");
+  mask-image: url("./img/icons/tabler/chevron-right.svg");
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -2868,9 +3496,7 @@ ul.pagination, nav.pagination ul,
   flex-direction: row;
   padding: 0;
   width: 100%;
-  overflow-x: auto;
   justify-content: center;
-  gap: 0.25rem;
 }
 ul.pagination li, nav.pagination ul li,
 .pagination ul li {
@@ -2893,12 +3519,71 @@ nav.pagination,
   display: flex;
   width: 100%;
   align-items: center;
+  overflow-x: auto;
   justify-content: center;
+  gap: 0.25rem;
 }
-.page-title {
-  width: 100%;
-  max-width: 60rem;
-  margin: 0 auto;
+.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: 1rem;
+  accent-color: #1971c2;
+  vertical-align: middle;
+  cursor: pointer;
+  width: 1rem;
+  min-width: 1rem;
+}
+.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 #1971c2;
+}
+.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 {
@@ -2921,6 +3606,7 @@ section .content-wrapper {
   padding-right: 2rem;
   padding-bottom: 3rem;
   padding-left: 2rem;
+  width: 100%;
   max-width: 60rem;
   border-radius: 0.5rem;
   display: flex;
@@ -2928,28 +3614,33 @@ section .content-wrapper {
   margin: 0 auto;
   box-sizing: border-box;
 }
-
 body.sidemenu,
+.manon-root.sidemenu,
 main.sidemenu {
   /* Places sidemenu next to the main content of the page */
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   padding: 0;
+  flex-wrap: nowrap;
 }
-@media (width >= 24rem) {
+@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 {
@@ -2957,10 +3648,13 @@ main.sidemenu > section {
   flex-direction: column;
   box-sizing: border-box;
 }
-@media (width >= 24rem) {
+@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 {
@@ -2970,103 +3664,146 @@ main.sidemenu > section {
   }
 }
 body.sidemenu > nav,
+.manon-root.sidemenu > nav,
 main.sidemenu > nav {
-  display: none;
-  width: 15rem;
+  width: 100%;
   padding-top: 1rem;
   padding-right: 2rem;
   padding-bottom: 1rem;
   padding-left: 2rem;
   gap: 1rem;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #f1f3f5;
+  margin: 0;
+  display: block;
+  box-sizing: border-box;
 }
-@media (width >= 24rem) {
+@media (width >= 15rem) {
   body.sidemenu > nav,
+  .manon-root.sidemenu > nav,
   main.sidemenu > nav {
-    /* nav */
-    margin: 0;
-    display: block;
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    /* List */
+    width: 15rem;
   }
-  body.sidemenu > nav .sticky-container,
-  main.sidemenu > nav .sticky-container {
-    position: sticky;
-    top: 0;
-    overflow: auto;
-    padding: 1rem 0;
-    /* Solves a bug in older safari versions where position sticky blocks overflow auto */
-    display: block;
+}
+@media (width >= 50rem) {
+  body.sidemenu > nav,
+  .manon-root.sidemenu > nav,
+  main.sidemenu > nav {
+    background-color: transparent;
   }
-  body.sidemenu > nav button + ul,
-  main.sidemenu > nav button + ul {
-    /* Compensating for the reserved space for the icon.
+}
+body.sidemenu > nav,
+.manon-root.sidemenu > nav,
+main.sidemenu > nav {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  /* List */
+}
+body.sidemenu > nav .sticky-container,
+.manon-root.sidemenu > nav .sticky-container,
+main.sidemenu > nav .sticky-container {
+  position: sticky;
+  top: 0;
+  overflow: auto;
+  padding: 1rem 0;
+  /* Solves a bug in older safari versions where position sticky blocks 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 > ul li,
-  body.sidemenu > nav button + ul li,
-  main.sidemenu > nav > ul li,
-  main.sidemenu > nav button + ul li {
-    padding: 0.25rem 0;
-  }
+  margin-top: 0;
+}
+body.sidemenu > nav > ul li,
+body.sidemenu > nav button + ul li,
+.manon-root.sidemenu > nav > ul li,
+.manon-root.sidemenu > nav button + ul li,
+main.sidemenu > nav > ul li,
+main.sidemenu > nav button + ul li {
+  padding: 0.25rem 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 */
+  font-size: 0;
+  background-color: #ffffff;
+  padding: 0.5rem;
+  color: #1971c2;
+  gap: 0;
+}
+body.sidemenu > nav .sidemenu-toggle::before,
+.manon-root.sidemenu > nav .sidemenu-toggle::before,
+main.sidemenu > nav .sidemenu-toggle::before {
+  mask-size: contain;
+  content: "";
+  background-color: #1971c2;
+  mask-image: url("./img/icons/tabler/x.svg");
+  width: 1.5rem;
+  height: 1.5rem;
+}
+body.sidemenu > nav .sidemenu-toggle[aria-expanded=false],
+.manon-root.sidemenu > nav .sidemenu-toggle[aria-expanded=false],
+main.sidemenu > nav .sidemenu-toggle[aria-expanded=false] {
+  margin-left: 2rem;
+}
+body.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before,
+.manon-root.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before,
+main.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before {
+  mask-size: contain;
+  content: "";
+  mask-image: url("./img/icons/tabler/menu-2.svg");
+}
+@media (width >= 50rem) {
   body.sidemenu > nav,
+  .manon-root.sidemenu > nav,
   main.sidemenu > nav {
-    /* Button */
-  }
-  body.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 */
-    font-size: 0;
-    background-color: #ffffff;
-    padding: 0.5rem;
-    color: #1971c2;
-    gap: 0;
-  }
-  body.sidemenu > nav .sidemenu-toggle::before,
-  main.sidemenu > nav .sidemenu-toggle::before {
-    mask-size: contain;
-    content: "";
-    background-color: #1971c2;
-    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOCA2IDYgMThNNiA2bDEyIDEyIi8+PC9zdmc+");
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-  body.sidemenu > nav .sidemenu-toggle[aria-expanded=false],
-  main.sidemenu > nav .sidemenu-toggle[aria-expanded=false] {
-    margin-left: 2rem;
-  }
-  body.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before,
-  main.sidemenu > nav .sidemenu-toggle[aria-expanded=false]::before {
-    mask-size: contain;
-    content: "";
-    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik00IDZoMTZNNCAxMmgxNk00IDE4aDE2Ii8+PC9zdmc+");
+    /* nav */
+    top: unset;
+    left: unset;
+    position: relative;
+    height: unset;
   }
 }
-@media (width >= 24rem) {
-  body.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,
-  main.sidemenu.sidemenu-closed > nav > ul {
-    display: none;
-  }
-  body.sidemenu.sidemenu-closed > div,
-  main.sidemenu.sidemenu-closed > div {
-    max-width: 100%;
-  }
+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. */
@@ -3077,157 +3814,42 @@ main.sidemenu > nav {
   gap: 4rem;
 }
 
-a.slogan, .slogan {
-  color: #212529;
-  font-size: 1.25rem;
-  font-weight: bold;
-}
-
-a.slogan, .slogan a {
-  color: inherit;
-  text-decoration: none;
-}
-a.slogan:visited, .slogan a:visited {
-  color: inherit;
-}
-
-.tabs > ul li > *,
-manon-tabs > ul li > *, ul.tabs li > * {
-  white-space: nowrap;
-  display: inline-block;
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  color: #1971c2;
-  padding: 0.5rem 0;
-  text-decoration: none;
-}
-.tabs > ul li > :hover,
-manon-tabs > ul li > :hover, ul.tabs li > :hover {
-  color: #1864ab;
-}
-
-.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: #1971c2;
-  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-left: 0;
-  width: 100%;
-  gap: 1rem;
-}
-.tabs > ul li,
-manon-tabs > ul li, ul.tabs li {
-  list-style: none;
+.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;
 }
-.tabs *:focus,
-.tabs *.focus,
-manon-tabs *:focus,
-manon-tabs *.focus {
-  outline-offset: -2px;
-}
-.tabs > div,
-manon-tabs > div {
-  white-space: normal;
+.skip-to-content:focus,
+a.button.skip-to-content:focus {
+  position: static;
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-manon-tabs [role=tabpanel][hidden] {
-  display: none;
-}
-
-table input[type=checkbox] {
-  padding: 0;
-}
-table input[type=checkbox] + label {
-  width: auto;
-  cursor: pointer;
-  margin-top: 0;
+  height: auto;
+  padding: 0.5rem;
+  margin: 0 1rem 0 0;
+  align-self: center;
+  order: 1;
+  font-size: inherit;
+  text-align: center;
 }
-table th input[type=checkbox]:only-child,
-table td input[type=checkbox]:only-child {
-  margin: 0 auto;
+a.slogan, .slogan {
+  color: #212529;
+  font-size: 1.25rem;
+  font-weight: bold;
 }
 
-table {
-  width: 100%;
-  border-collapse: collapse;
-  overflow: auto;
-  text-align: left;
-  margin: 0;
-}
-table thead th {
-  background-color: #f1f3f5;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #f1f3f5;
-  padding: 0.75rem 1rem;
-  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 {
+a.slogan, .slogan a {
   color: inherit;
+  text-decoration: none;
 }
-table tbody th {
-  padding: 0.75rem 1rem;
-}
-table td {
-  padding: 0.75rem 1rem;
-  gap: 0.25rem;
-}
-table tr {
-  border-width: 1px 0;
-  border-style: solid;
-  border-color: #f1f3f5;
-  /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
-}
-table tfoot th {
-  padding: 0.75rem 1rem;
-}
-table {
-  /* Form within table */
-}
-table .sortable {
-  background-color: transparent;
-  padding: unset;
-  min-width: unset;
-  height: unset;
-  min-height: unset;
-  border: unset;
-  border-radius: unset;
-  margin: unset;
+a.slogan:visited, .slogan a:visited {
   color: inherit;
 }
-table .sortable .icon {
-  width: 0.8rem;
-  height: 0.8rem;
-}
 
 table.action-buttons button,
 table.action-buttons a.button,
@@ -3289,63 +3911,256 @@ table.condensed {
 table.condensed thead th {
   padding: 0.25rem 1rem;
 }
-table.condensed td {
-  padding: 0.25rem 1rem;
+table.condensed td {
+  padding: 0.25rem 1rem;
+}
+/* This bit of css solves a render issue that appears when a dl containing a
+dd is used within a expando row.
+
+Issue:
+When the width of the dd has been set as a
+percentage, the rest of the table (th and td) will change their width when the
+expando row is opened.
+
+Cause/findings:
+There are a couple of issues found concerning this bug:
+- A table set to 100% width is rendered as 100% - 1px width
+  - Removing borders and adding box-sizing: border-sizing; or changing the table-layout
+    do not seem to make a difference.
+- An element within the table set to 100% width is also rendered as 100% - 1px width
+- When using a calc(100% - 1px) the computed value is correct, however the
+width of the th and td still change.
+- When setting a px or rem value the th's and td's keep their original width
+
+Using fixed values isn't ideal percentages would be less prone to issues when the width
+of parent elements are altered. Suggestions on how this bug can be solved instead of patched
+are welcome.
+*/
+table tr.expando-row td dl > div > dd,
+table.condensed tr.expando-row td dl > div > dd,
+table.sticky tr.expando-row td dl > div > dd {
+  max-width: 47rem;
+}
+
+article table tr.expando-row td dl > div > dd,
+article table.condensed tr.expando-row td dl > div > dd,
+article table.sticky tr.expando-row td dl > div > dd {
+  max-width: 30rem;
+}
+
+.auth table tr.expando-row td dl > div > dd,
+.auth table.condensed tr.expando-row td dl > div > dd,
+.auth table.sticky tr.expando-row td dl > div > dd {
+  max-width: 37rem;
+}
+
+.form-view table tr.expando-row td dl > div > dd,
+.form-view table.condensed tr.expando-row td dl > div > dd,
+.form-view table.sticky tr.expando-row td dl > div > dd {
+  max-width: 45rem;
+}
+
+table button.expando-button {
+  display: none;
+}
+table tr.expando-row {
+  display: table-layout;
+  filter: unset;
+}
+table tr.expando-row td {
+  position: relative;
+  padding: 0;
+}
+table tr.expando-row .expando-row-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 0.5rem;
+}
+
+.js-expando-rows-loaded table button.expando-button {
+  display: inline-flex;
+}
+
+.expanded-row {
+  background-color: #e7f5ff;
+  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 #f1f3f5;
+}
+
+.sticky-header {
+  position: relative;
+  max-height: 100vh;
+}
+.sticky-header thead {
+  position: relative;
+  z-index: 1;
+}
+.sticky-header th {
+  position: sticky;
+  top: -1px;
+}
+
+table.summary {
+  width: 30rem;
+  max-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 {
+  background-color: #f1f3f5;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #f1f3f5;
+  padding: 0.75rem 1rem;
+  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 {
+  padding: 0.75rem 1rem;
+}
+table td {
+  padding: 0.75rem 1rem;
+  gap: 0.25rem;
 }
-table button.expando-button {
-  display: none;
+table tr {
+  border-width: 1px 0;
+  border-style: solid;
+  border-color: #f1f3f5;
+  /* Zebra striping with opacity to keep background color. e.g for warnings or errors */
 }
-table tr.expando-row {
-  display: table-layout;
-  filter: unset;
+table tfoot th {
+  padding: 0.75rem 1rem;
 }
-table tr.expando-row td {
-  position: relative;
-  padding: 0;
+table {
+  /* Form within table */
 }
-table tr.expando-row .expando-row-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding: 0.5rem;
+table .sortable {
+  background-color: transparent;
+  padding: unset;
+  min-width: unset;
+  height: unset;
+  min-height: unset;
+  border: unset;
+  border-radius: unset;
+  margin: unset;
+  color: inherit;
 }
-
-.js-expando-rows-loaded table button.expando-button {
-  display: inline-flex;
+table .sortable .icon {
+  width: 0.8rem;
+  height: 0.8rem;
 }
 
-.expanded-row {
-  background-color: #e7f5ff;
-  filter: unset;
+.tabs > ul li > *,
+manon-tabs > ul li > *, ul.tabs li > * {
+  white-space: nowrap;
+  display: inline-block;
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  color: #1971c2;
+  padding: 0.5rem 0;
+  text-decoration: none;
 }
-.number {
-  font-variant-numeric: monospace;
-  text-align: right;
+.tabs > ul li > :hover,
+manon-tabs > ul li > :hover, ul.tabs li > :hover {
+  color: #1864ab;
 }
 
-table td[rowspan] {
-  border: 1px solid #f1f3f5;
+.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: #1971c2;
+  font-weight: bold;
+}
+.tabs,
+manon-tabs {
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
+  width: 100%;
 }
 
-.sticky-header {
-  position: relative;
-  max-height: 100vh;
+.tabs > ul,
+manon-tabs > ul, ul.tabs {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  gap: 1rem;
 }
-.sticky-header thead {
-  position: relative;
-  z-index: 1;
+.tabs > ul li,
+manon-tabs > ul li, ul.tabs li {
+  list-style: none;
+  padding: 0;
 }
-.sticky-header th {
-  position: sticky;
-  top: -1px;
+.tabs *:focus,
+.tabs *.focus,
+manon-tabs *:focus,
+manon-tabs *.focus {
+  outline-offset: -2px;
 }
-
-table.summary {
-  max-width: 30rem;
+.tabs > div,
+manon-tabs > div {
+  white-space: normal;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 0;
 }
-.horizontal-scroll.summary {
-  width: auto;
-  margin: 0;
+
+manon-tabs [role=tabpanel][hidden] {
+  display: none;
 }
 
 .tags > p,
@@ -3591,6 +4406,40 @@ ul.tags > li {
   border-color: #5b4f90;
 }
 
+ul.tiles > li > div, .tiles > div > div,
+ul.tiles > li > section,
+.tiles > div > section,
+.tile > div,
+.tile > section {
+  display: flex;
+  gap: 1rem;
+}
+
+.tiles {
+  /* render each div directly within a tiles group as a tile */
+}
+.tiles.image-covers > div img,
+.tiles.image-covers li img, .tile.image-cover img {
+  object-fit: cover;
+  max-width: unset;
+  width: 100%;
+  border-radius: 0.5rem 0.5rem 0 0;
+  margin-bottom: 1rem;
+  width: calc(100% + 1rem + 1rem);
+  margin-top: -1rem;
+  margin-right: -1rem;
+  margin-left: -1rem;
+}
+
+.tile.image-cover img {
+  height: unset;
+}
+
+.tiles.image-covers > div img,
+.tiles.image-covers li img {
+  height: unset;
+}
+
 .tile {
   display: flex;
   box-sizing: border-box;
@@ -3609,6 +4458,10 @@ ul.tags > li {
   border-radius: 0.5rem;
   max-width: 100%;
 }
+.tile.image-cover img,
+.tile img.image-cover {
+  order: -1;
+}
 .tile .tile-group {
   display: flex;
   width: 100%;
@@ -3665,118 +4518,6 @@ ul.tiles > li > a {
   text-decoration: none;
 }
 
-ul.tiles > li > div, .tiles > div > div,
-ul.tiles > li > section,
-.tiles > div > section,
-.tile > div,
-.tile > section {
-  display: flex;
-  gap: 1rem;
-}
-
-.tiles {
-  /* render each div directly within a tiles group as a tile */
-}
-.tiles.image-covers > div img,
-.tiles.image-covers li img, .tile.image-cover img {
-  object-fit: cover;
-  max-width: unset;
-  width: 100%;
-  border-radius: 0.5rem 0.5rem 0 0;
-  margin-bottom: 1rem;
-  width: calc(100% + 1rem + 1rem);
-  margin-top: -1rem;
-  margin-right: -1rem;
-  margin-left: -1rem;
-}
-
-.tile.image-cover img {
-  height: unset;
-}
-
-.tiles.image-covers > div img,
-.tiles.image-covers li img {
-  height: unset;
-}
-
-.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 1rem 0 0;
-  align-self: center;
-  order: 1;
-  font-size: inherit;
-  text-align: center;
-}
-form div.radio {
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-form div.radio > div {
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-form div.radio p.error,
-form div.radio p.warning,
-form div.radio p.confirmation,
-form div.radio p.explanation,
-form div.radio p.primary {
-  margin: 0;
-}
-form div.radio input[type=radio] {
-  padding: 0;
-  margin-left: 0;
-  margin-right: 0;
-  height: 1rem;
-  accent-color: #1971c2;
-  cursor: pointer;
-  width: 1rem;
-  min-width: 1rem;
-}
-form div.radio input[type=radio] + label {
-  margin-top: 0;
-  font-weight: normal;
-  width: auto;
-  cursor: pointer;
-}
-form div.radio input[type=radio] + label:focus {
-  outline: 2px solid #1971c2;
-}
-form div.radio input[type=radio]:disabled {
-  cursor: not-allowed;
-}
-form div.radio input[type=radio]:disabled + label {
-  cursor: not-allowed;
-}
-form div.radio.required {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-}
-form div.radio.required > div {
-  padding: 0;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
 .centered {
   display: flex;
   flex-direction: column;