From e59d11b1f583bcadbda741a1cf2fbf2f61f64a39 Mon Sep 17 00:00:00 2001
From: Di Turner
Date: Wed, 13 Nov 2024 11:47:24 +0000
Subject: [PATCH 1/5] FISH-10039 Removed incorrectly nested div tags.
Divs cannot be nested inside P tags, this is the original cause of the
footer spacig issue.
---
starter-ui/src/main/webapp/index.html | 32 ++++++++++-----------------
1 file changed, 12 insertions(+), 20 deletions(-)
diff --git a/starter-ui/src/main/webapp/index.html b/starter-ui/src/main/webapp/index.html
index 8e99482..14530e1 100644
--- a/starter-ui/src/main/webapp/index.html
+++ b/starter-ui/src/main/webapp/index.html
@@ -438,31 +438,23 @@ Simply select your options, and click ‘Generate’ - and Payara Pl
Generate Code For:
-
-
- JPA
- Package
-
-
+
+ JPA
+ Package
+
-
-
- Repository
- Package
-
-
+
+ Repository
+ Package
+
-
-
- REST
- Package
-
-
+
+ REST
+ Package
+
-
Web
-
From 14836f1227a5856516375fdb649502063488eed2 Mon Sep 17 00:00:00 2001
From: Di Turner
Date: Thu, 21 Nov 2024 14:12:20 +0000
Subject: [PATCH 2/5] DS-252 updated to Blinky version 0.72.1.
---
starter-ui/src/main/webapp/ui/css/payara.css | 2340 +++++++----------
.../src/main/webapp/ui/css/payara.min.css | 54 +-
.../src/main/webapp/ui/images/icons.svg | 2 +-
starter-ui/src/main/webapp/ui/js/inits.js | 24 +-
starter-ui/src/main/webapp/ui/js/interface.js | 1824 +++++++++----
.../src/main/webapp/ui/js/interface.min.js | 4 +-
6 files changed, 2440 insertions(+), 1808 deletions(-)
diff --git a/starter-ui/src/main/webapp/ui/css/payara.css b/starter-ui/src/main/webapp/ui/css/payara.css
index 52aa3d7..fa19011 100644
--- a/starter-ui/src/main/webapp/ui/css/payara.css
+++ b/starter-ui/src/main/webapp/ui/css/payara.css
@@ -1,4 +1,4 @@
-/*! Payara Pattern Library version: 0.51.2 */
+/*! Payara Pattern Library version: 0.72.1 */
/*! DO NOT MODIFY THIS FILE, CHANGES WILL BE OVERWRITTEN! */
/* Reset */
@@ -80,6 +80,7 @@
button[class] {
cursor: pointer;
-webkit-appearance: none;
+ appearance: none;
}
input,
@@ -91,6 +92,7 @@
margin: 0;
outline: 0;
-webkit-appearance: none;
+ appearance: none;
}
/* This is hacky and we shouldn't be showing desfault checkboxes but whilst we are... */
@@ -113,13 +115,12 @@
/* Colours */
:root {
-
/* Primary Payara Colours. */
--tango: 240,152,27;
--midnight: 0,44,62;
/* Secondary Payara Colours. */
- --smurf: 5,152,214;
+ --smurf: 0,124,194;
--basalt: 50,68,74;
--concrete: 218,224,226;
@@ -136,8 +137,6 @@
--jet: 15,15,15;
--onyx: 11,11,11; /* Header and button text. */
- --post-it: 244,244,52;
-
--marmalade: 244,74,2;
--gecko: 98,196,0;
--plum: 170,0,250;
@@ -149,165 +148,129 @@
.color--marmalade {
- color: rgb(244,74,2) !important;
color: rgb(var(--marmalade)) !important;
}
.color-bk--marmalade {
- background: rgb(244,74,2) !important;
background: rgb(var(--marmalade)) !important;
}
.color-fill--marmalade {
- fill: rgb(244,74,2) !important;
fill: rgb(var(--marmalade)) !important;
}
.color--gecko {
- color: rgb(98,196,0) !important;
color: rgb(var(--gecko)) !important;
}
.color-bk--gecko {
- background: rgb(98,196,0) !important;
background: rgb(var(--gecko)) !important;
}
.color-fill--gecko {
- fill: rgb(98,196,0) !important;
fill: rgb(var(--gecko)) !important;
}
.color--plum {
- color: rgb(170,0,250) !important;
color: rgb(var(--plum)) !important;
}
.color-bk--plum {
- background: rgb(170,0,250) !important;
background: rgb(var(--plum)) !important;
}
.color-fill--plum {
- fill: rgb(170,0,250) !important;
fill: rgb(var(--plum)) !important;
}
.color--candy {
- color: rgb(255,66,180) !important;
color: rgb(var(--candy)) !important;
}
.color-bk--candy {
- background: rgb(255,66,180) !important;
background: rgb(var(--candy)) !important;
}
.color-fill--candy {
- fill: rgb(255,66,180) !important;
fill: rgb(var(--candy)) !important;
}
.color--mud {
- color: rgb(152,73,0) !important;
color: rgb(var(--mud)) !important;
}
.color-bk--mud {
- background: rgb(152,73,0) !important;
background: rgb(var(--mud)) !important;
}
.color-fill--mud {
- fill: rgb(152,73,0) !important;
fill: rgb(var(--mud)) !important;
}
.color--slate {
- color: rgb(152,147,138) !important;
color: rgb(var(--slate)) !important;
}
.color-bk--slate {
- background: rgb(152,147,138) !important;
background: rgb(var(--slate)) !important;
}
.color-fill--slate {
- fill: rgb(152,147,138) !important;
fill: rgb(var(--slate)) !important;
}
.color--ortolan {
- color: rgb(0,53,241) !important;
color: rgb(var(--ortolan)) !important;
}
.color-bk--ortolan {
- background: rgb(0,53,241) !important;
background: rgb(var(--ortolan)) !important;
}
.color-fill--ortolan {
- fill: rgb(0,53,241) !important;
fill: rgb(var(--ortolan)) !important;
}
.color--tango {
- color: rgb(240,152,27) !important;
color: rgb(var(--tango)) !important;
}
.color-bk--tango {
- background: rgb(240,152,27) !important;
background: rgb(var(--tango)) !important;
}
.color-fill--tango {
- fill: rgb(240,152,27) !important;
fill: rgb(var(--tango)) !important;
}
.color--midnight {
- color: rgb(0,44,62) !important;
color: rgb(var(--midnight)) !important;
}
.color-bk--midnight {
- background: rgb(0,44,62) !important;
background: rgb(var(--midnight)) !important;
}
.color-fill--midnight {
- fill: rgb(0,44,62) !important;
fill: rgb(var(--midnight)) !important;
}
.color--smurf {
- color: rgb(5,152,214) !important;
color: rgb(var(--smurf)) !important;
}
.color-bk--smurf {
- background: rgb(5,152,214) !important;
background: rgb(var(--smurf)) !important;
}
.color-fill--smurf {
- fill: rgb(5,152,214) !important;
fill: rgb(var(--smurf)) !important;
}
.color--cherry {
- color: rgb(155,18,0) !important;
color: rgb(var(--cherry)) !important;
}
.color-bk--cherry {
- background: rgb(155,18,0) !important;
background: rgb(var(--cherry)) !important;
}
.color-fill--cherry {
- fill: rgb(155,18,0) !important;
fill: rgb(var(--cherry)) !important;
}
.color--frog {
- color: rgb(0,103,41) !important;
color: rgb(var(--frog)) !important;
}
.color-bk--frog {
- background: rgb(0,103,41) !important;
background: rgb(var(--frog)) !important;
}
.color-fill--frog {
- fill: rgb(0,103,41) !important;
fill: rgb(var(--frog)) !important;
}
@@ -470,7 +433,34 @@
:not(.cards) > [class$="hidden"] + h3,
:not(.cards) > [class$="hidden"] + h4,
:not(.cards) > [class$="hidden"] + h5,
- :not(.cards) > [class$="hidden"] + h6 {
+ :not(.cards) > [class$="hidden"] + h6,
+ /* Squish the excessive margins when titles are placed next to each other. */
+ .h1 + .h1, .h1 + .h2, .h1 + .h3, .h1 + .h4, .h1 + .h5, .h1 + .h6,
+ .h2 + .h1, .h2 + .h2, .h2 + .h3, .h2 + .h4, .h2 + .h5, .h2 + .h6,
+ .h3 + .h1, .h3 + .h2, .h3 + .h3, .h3 + .h4, .h3 + .h5, .h3 + .h6,
+ .h4 + .h1, .h4 + .h2, .h4 + .h3, .h4 + .h4, .h4 + .h5, .h4 + .h6,
+ .h5 + .h1, .h5 + .h2, .h5 + .h3, .h5 + .h4, .h5 + .h5, .h5 + .h6,
+ .h6 + .h1, .h6 + .h2, .h6 + .h3, .h6 + .h4, .h6 + .h5, .h6 + .h6,
+ :not(.cards) > .h1:first-child,
+ :not(.cards) > .h2:first-child,
+ :not(.cards) > .h3:first-child,
+ :not(.cards) > .h4:first-child,
+ :not(.cards) > .h5:first-child,
+ :not(.cards) > .h6:first-child,
+ /* Sometimes a form will inject a hidden field and ruin the :first-child selector. */
+ :not(.cards) > input[type="hidden"] + .h1,
+ :not(.cards) > input[type="hidden"] + .h2,
+ :not(.cards) > input[type="hidden"] + .h3,
+ :not(.cards) > input[type="hidden"] + .h4,
+ :not(.cards) > input[type="hidden"] + .h5,
+ :not(.cards) > input[type="hidden"] + .h6,
+ /* If we want a hidden from the DOM class this should be compatible as long as it's name ends in 'hidden'. */
+ :not(.cards) > [class$="hidden"] + .h1,
+ :not(.cards) > [class$="hidden"] + .h2,
+ :not(.cards) > [class$="hidden"] + .h3,
+ :not(.cards) > [class$="hidden"] + .h4,
+ :not(.cards) > [class$="hidden"] + .h5,
+ :not(.cards) > [class$="hidden"] + .h6 {
margin-top: 0 !important;
}
h1:last-child,
@@ -478,7 +468,13 @@
h3:last-child,
h4:last-child,
h5:last-child,
- h6:last-child {
+ h6:last-child,
+ .h1:last-child,
+ .h2:last-child,
+ .h3:last-child,
+ .h4:last-child,
+ .h5:last-child,
+ .h6:last-child {
margin-bottom: 0 !important;
}
@@ -552,6 +548,20 @@
.dl--horizontal > dd:not(:last-child) {
margin-right: 1.6rem;
}
+
+ .dl--container {
+ container-type: inline-size;
+ container-name: dl;
+ }
+ @container dl (max-width: 60rem) {
+ .dl--horizontal > dd:not(:last-child) {
+ margin-right: 0;
+ }
+ .dl--horizontal dd::after {
+ content: "";
+ display: block;
+ }
+ }
/* Grid DL */
.dl--grid {
@@ -576,6 +586,22 @@
}
}
+ @container dl (max-width: 40rem) {
+ .dl--horizontal > * {
+ display: block;
+ }
+ .dl--grid {
+ display: block;
+ }
+ .dl--grid dt {
+ float: none;
+ margin-right: 0;
+ }
+ .dl--grid dd {
+ float: none;
+ }
+ }
+
/* Icon list */
@@ -598,7 +624,6 @@
top: 0.4rem;
}
.icon-list .icon--tick {
- fill: rgb(0,103,41);
fill: rgb(var(--frog));
}
@@ -665,152 +690,101 @@
/* Page Scrollbar */
- :root {
- --scrollbar-track: rgba(var(--basalt), 0.1);
- --scrollbar-thumb: rgba(var(--basalt), 0.4);
- --scrollbar-shadow: rgba(var(--onyx), 0.3);
-
- --scrollbar-sidebar-track: rgba(var(--onyx), 0.5);
- --scrollbar-sidebar-thumb: rgba(var(--smurf), 0.4);
- --scrollbar-sidebar-shadow: rgba(var(--onyx), 0.75);
- --scrollbar-status-track: rgba(var(--onyx), 0.2);
- --scrollbar-status-thumb: rgba(255,255,255, 0.4);
- --scrollbar-status-shadow: rgba(var(--onyx), 0.3);
- }
- .theme--light {
- --scrollbar-track: rgba(var(--basalt), 0.1);
- --scrollbar-thumb: rgba(var(--basalt), 0.4);
- --scrollbar-shadow: rgba(var(--onyx), 0.3);
- }
- @media (prefers-color-scheme: dark) {
- :root {
- --scrollbar-track: rgba(255,255,255, 0.15);
- --scrollbar-thumb: rgba(255,255,255, 0.6);
- --scrollbar-shadow: rgba(var(--onyx), 0.75);
+ /* This stops the default scroll chaining, if we have a scrollable area inside another scrollable area we don't want the user to scroll the outer one when over the inner one. */
+ /* 800px ish. */
+ @media only screen and (min-width: 50em) {
+ *:not(:has(> pre)) {
+ overscroll-behavior: contain;
}
}
- .theme--dark {
- --scrollbar-track: rgba(255,255,255, 0.15);
- --scrollbar-thumb: rgba(255,255,255, 0.6);
- --scrollbar-shadow: rgba(var(--onyx), 0.75);
- }
-
-
-
-
-
- .scroll {
- overflow: auto;
-
- /* Firefox */
- scrollbar-color: rgba(50,68,74, 0.4) rgba(50,68,74, 0.1);
- scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
- scrollbar-width: auto;
- }
- .page__sidebar .scroll {
- /* Firefox */
- scrollbar-color: rgba(5,152,214, 0.4) rgba(11,11,11, 0.5);
- scrollbar-color: var(--scrollbar-sidebar-thumb) var(--scrollbar-sidebar-track);
- }
- .status .scroll,
- .console.scroll {
- /* Firefox */
- scrollbar-color: rgba(255,255,255, 0.4) rgba(11,11,11, 0.2);
- scrollbar-color: var(--scrollbar-status-thumb) var(--scrollbar-status-track);
+ pre {
+ overscroll-behavior: auto;
}
+ /* Firefox and Chrome. */
+ @supports (scrollbar-width: auto) {
+ * {
+ /* CurrentColor can't be used as a value to then set an opacity on in the stand way, e.g. rgb(currentColor, 0.8);, it can be used in color-mix(), mixing it with transparent effectively means we can use a tint of currentClolr. Below we're setting the thumb and track. */
+ scrollbar-color: color-mix(in srgb, currentColor 75%, transparent) color-mix(in srgb, currentColor 15%, transparent);
+ /* Ok, a rant: If the OS is set to "Always show scrolbars: Off" then we need this value set to auto because thin is just way too thin. If the user switched to On then this will be quite wide, there is no fix for this since the setting is OS level and not exposed to the browser, so make a guess that if the user cares about seeing scrollbars then they don't have a problem with wider ones. */
+ scrollbar-width: auto;
+ }
-
- /* Prevents the PRE from stretching the page layout to it's fullest width. */
- .scroll pre {
- width: 0;
+ /* Chromium (not Safari) on Mac and Windows. */
+ /* The space between "not (" is critical, this will not be applied to Windows Chrome without it. We have to set Chrome scrollbar width to the narrower setting as "auto" isn't consistent visually with every other browser. */
+ @supports (not (-moz-appearance: none)) {
+ * {
+ scrollbar-width: thin;
+ }
+ }
}
-
-
- /* Chrome / Safari / Edge */
- .scroll::-webkit-scrollbar {
+ /* Safari. */
+ ::-webkit-scrollbar {
height: 10px;
width: 10px;
}
-
-
-
- .scroll::-webkit-scrollbar-track {
- background: rgba(50,68,74, 0.1);
- background: var(--scrollbar-track);
- }
- .page__sidebar .scroll::-webkit-scrollbar-track {
- background: rgba(11,11,11, 0.5);
- background: var(--scrollbar-sidebar-track);
- }
- .status .scroll::-webkit-scrollbar-track,
- .console.scroll::-webkit-scrollbar-track {
- background: rgba(11,11,11, 0.2);
- background: var(--scrollbar-status-track);
- }
-
-
-
- .scroll::-webkit-scrollbar-thumb {
- background: rgba(50,68,74, 0.4);
- background: var(--scrollbar-thumb);
- border-radius: 10px;
- }
- .page__sidebar .scroll::-webkit-scrollbar-thumb {
- background: rgba(5,152,214, 0.4);
- background: var(--scrollbar-sidebar-thumb);
+ ::-webkit-scrollbar-thumb {
+ background: currentColor;
+ opacity: 0.4;
border-radius: 10px;
}
- .status .scroll::-webkit-scrollbar-thumb,
- .console.scroll::-webkit-scrollbar-thumb {
- background: rgba(255,255,255, 0.4);
- background: var(--scrollbar-status-thumb);
- border-radius: 10px;
+ ::-webkit-scrollbar-track {
+ background: currentColor;
+ opacity: 0.15;
}
- /* Shadows */
- .js__scroll.scroll-shadow--top {
- box-shadow: 0 1em 1em -1em rgba(11,11,11, 0.3) inset;
- box-shadow: 0 1em 1em -1em var(--scrollbar-shadow) inset;
- }
- .js__scroll.scroll-shadow--bottom {
- box-shadow: 0 -1em 1em -1em rgba(11,11,11, 0.3) inset;
- box-shadow: 0 -1em 1em -1em var(--scrollbar-shadow) inset;
- }
- .js__scroll.scroll-shadow--top.scroll-shadow--bottom {
- box-shadow: 0 1em 1em -1em rgba(11,11,11, 0.3) inset, 0 -1em 1em -1em rgba(11,11,11, 0.3) inset;
- box-shadow: 0 1em 1em -1em var(--scrollbar-shadow) inset, 0 -1em 1em -1em var(--scrollbar-shadow) inset;
+ .js__scroll {
+ display: block;
}
- .page__sidebar .js__scroll.scroll-shadow--top {
- box-shadow: 0 1em 1em -1em rgba(11,11,11, 0.75) inset;
- box-shadow: 0 1em 1em -1em var(--scrollbar-sidebar-shadow) inset;
- }
- .page__sidebar .js__scroll.scroll-shadow--bottom {
- box-shadow: 0 -1em 1em -1em rgba(11,11,11, 0.75) inset;
- box-shadow: 0 -1em 1em -1em var(--scrollbar-sidebar-shadow) inset;
+ /* To get the shadows to display over the content we have to apply the shadows to elements. */
+ .js__scroll[data-shadow_top="1"]:before,
+ .js__scroll[data-shadow_bottom="1"] > .js__shadow {
+ display: block;
+ width: 100%;
+ height: 1em;
+ margin-top: -1em;
+ position: sticky;
}
- .page__sidebar .js__scroll.scroll-shadow--top.scroll-shadow--bottom {
- box-shadow: 0 1em 1em -1em rgba(11,11,11, 0.75) inset, 0 -1em 1em -1em rgba(11,11,11, 0.75) inset;
- box-shadow: 0 1em 1em -1em var(--scrollbar-sidebar-shadow) inset, 0 -1em 1em -1em var(--scrollbar-sidebar-shadow) inset;
+ .js__scroll[data-shadow_top="1"]:before {
+ content: '';
+ top: 0;
+ box-shadow:
+ 0 1em 1em -1em rgba(var(--onyx), 0.25) inset,
+ 0 1em 0.5em -1em rgba(var(--onyx), 0.25) inset,
+ 0 1em 0.25em -1em rgba(var(--onyx), 0.25) inset;
+ z-index: 110;
+ }
+ .js__scroll[data-shadow_bottom="1"] > .js__shadow {
+ top: calc(100% - 1em);
+ box-shadow:
+ 0 -1em 1em -1em rgba(var(--onyx), 0.25) inset,
+ 0 -1em 0.5em -1em rgba(var(--onyx), 0.25) inset,
+ 0 -1em 0.25em -1em rgba(var(--onyx), 0.25) inset;
+ z-index: 111;
+ }
+
+
+ /* Fixes issue where we are applying padding to the same element we want to scroll, not ideal and don't do it moving forward. */
+ .sidebar__content.js__scroll[data-shadow_top="1"]:before,
+ .sidebar__content.js__scroll[data-shadow_bottom="1"] > .js__shadow {
+ margin-left: calc(-1 * var(--padding));
+ margin-right: calc(-1 * var(--padding));
+ width: calc(100% + (var(--padding)*2));
}
- .status .js__scroll.scroll-shadow--top {
- box-shadow: 0 1em 1em -1em rgba(11,11,11, 0.3) inset;
- box-shadow: 0 1em 1em -1em var(--scrollbar-status-shadow) inset;
- }
- .status .js__scroll.scroll-shadow--bottom {
- box-shadow: 0 -1em 1em -1em rgba(11,11,11, 0.3) inset;
- box-shadow: 0 -1em 1em -1em var(--scrollbar-status-shadow) inset;
+
+ .scroll {
+ overflow: auto;
}
- .status .js__scroll.scroll-shadow--top.scroll-shadow--bottom {
- box-shadow: 0 1em 1em -1em rgba(11,11,11, 0.3) inset, 0 -1em 1em -1em rgba(11,11,11, 0.3) inset;
- box-shadow: 0 1em 1em -1em var(--scrollbar-status-shadow) inset, 0 -1em 1em -1em var(--scrollbar-status-shadow) inset;
+ /* Prevents the PRE from stretching the page layout to it's fullest width. */
+ .scroll pre {
+ width: 0;
}
@@ -844,7 +818,7 @@
-/* Gutters and Padding */
+/* Gutters */
:root {
@@ -858,13 +832,6 @@
--gutter-medium: 1.6rem;
--gutter-loose: 3.2rem;
--gutter: var(--gutter-medium);
-
- /* Padding is the space inside each block element, there is a choice of
- three sizes, the one chosen should be assigned to --padding. */
- --padding-tight: 1.2rem;
- --padding-medium: 1.6rem;
- --padding-loose: 2rem;
- --padding: var(--padding-medium);
}
/*
@@ -874,61 +841,82 @@
any block specific spacing there might be on any given block.
*/
.gutter {
- margin: 1.6rem;
margin: var(--gutter);
}
/* Top and bottom. */
.gutter--v {
- margin-top: 1.6rem;
margin-top: var(--gutter);
- margin-bottom: 1.6rem;
margin-bottom: var(--gutter);
}
/* Left and right. */
.gutter--h {
- margin-left: 1.6rem;
margin-left: var(--gutter);
- margin-right: 1.6rem;
margin-right: var(--gutter);
}
/* Left. */
.gutter--l {
- margin-left: 1.6rem;
margin-left: var(--gutter);
}
/* Right. */
.gutter--r {
- margin-right: 1.6rem;
margin-right: var(--gutter);
}
/* Top. */
.gutter--t {
- margin-top: 1.6rem;
margin-top: var(--gutter);
}
/* Bottom. */
.gutter--b {
- margin-bottom: 1.6rem;
margin-bottom: var(--gutter);
}
.gutter--v--double {
- margin-bottom: calc(1.6rem * 2);
margin-bottom: calc(var(--gutter) * 2);
- margin-top: calc(1.6rem * 2);
margin-top: calc(var(--gutter) * 2);
}
.gutter--t--double {
- margin-top: calc(1.6rem * 2);
margin-top: calc(var(--gutter) * 2);
}
.gutter--b--double {
- margin-bottom: calc(1.6rem * 2);
margin-bottom: calc(var(--gutter) * 2);
}
+/* Padding */
+
+ :root {
+ /* Padding is the space inside each block element, there is a choice of
+ three sizes, the one chosen should be assigned to --padding. */
+ --padding-tight: 1.2rem;
+ --padding-medium: 1.6rem;
+ --padding-loose: 2rem;
+ --padding: var(--padding-medium);
+ }
+
+ .padding {
+ padding: var(--padding);
+ }
+ .padding--v {
+ padding-top: var(--padding);
+ padding-bottom: var(--padding);
+ }
+ .padding--h {
+ padding-left: var(--padding);
+ padding-right: var(--padding);
+ }
+ .padding--l {
+ padding-left: var(--padding);
+ }
+ .padding--r {
+ padding-right: var(--padding);
+ }
+ .padding--t {
+ padding-top: var(--padding);
+ }
+ .padding--b {
+ padding-bottom: var(--padding);
+ }
/* Cards */
/* Cards will be split into equal widths by default. Individual cards can be
@@ -939,20 +927,24 @@
:root {
--card-background-opacity: 1;
--card-listing-border: rgba(var(--basalt), 0.25);
+ --card-calout-grey-bk: rgb(var(--basalt));
}
.theme--light {
--card-background-opacity: 1;
--card-listing-border: rgba(var(--basalt), 0.25);
+ --card-calout-grey-bk: rgba(var(--basalt), 0.25);
}
@media (prefers-color-scheme: dark) {
:root {
--card-background-opacity: 0.05;
--card-listing-border: rgba(255,255,255, 0.15);
+ --card-calout-grey-bk: rgba(var(--concrete), 0.3);
}
}
.theme--dark {
--card-background-opacity: 0.05;
--card-listing-border: rgba(255,255,255, 0.15);
+ --card-calout-grey-bk: rgba(var(--concrete), 0.3);
}
.cards {
@@ -960,79 +952,63 @@
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
- /* Apply half the gutter to all sides except bottom, that gets a minus value
- to account for the spacing on the card items. */
- margin:
- calc(1.6rem / 2)
- calc(1.6rem / 2)
- calc((1.6rem / 2) - 1.6rem)
- calc(1.6rem / 2);
- margin:
- calc(var(--gutter) / 2)
- calc(var(--gutter) / 2)
- calc((var(--gutter) / 2) - var(--gutter))
- calc(var(--gutter) / 2);
+ gap: var(--gutter);
+ margin: var(--gutter);
}
.cards--vertical {
flex-flow: column;
}
.cards .cards {
- /* This sets the margin of inner cards to a minus of half the gutter value
- to cancel out the spacing. */
- margin: calc((1.6rem / 2) - 1.6rem);
- margin: calc((var(--gutter) / 2) - var(--gutter));
+ margin: 0;
}
- /* Individual cards, we don't add a class for these, it's mirroring flexbox
- where any immediate child of .cards is treated as a card. */
- .cards > *,
- .cards .cards .card--bk {
- background: rgba(255,255,255, 1);
+ /* VERSION 1.0.0: This line is kept in purely for backwards compatibility, when we bump the major version number it can go. */
+ .cards > *,
+ .cards > .card,
+ /* Nested cards by default do not add the card background or padding, this is to try and discourage "everything in a box" design, we can add these back in by using this card--bk class. */
+ .cards .cards.card--bk > .card,
+ .cards .cards .card.card--bk {
background: rgba(255,255,255, var(--card-background-opacity));
- border-radius: 0.3rem;
border-radius: var(--block-radius);
/* IE11 fallback. */
flex: 1 0 6rem;
/* This fits a single icon-only button plus padding, realistically
nothing should actually be this small. */
- flex: 1 0 calc(4rem + calc(1.6rem * 2));
flex: 1 0 calc(4rem + calc(var(--padding) * 2));
- margin: calc(1.6rem / 2);
- margin: calc(var(--gutter) / 2);
- padding: 1.6rem;
padding: var(--padding);
}
- /* This will make a single button into a card, it will fill the width and
- height of a card, use sparingly for highlighting something super-important. */
- /* .cards > .button--block {
- border-radius: var(--block-radius);
- margin: calc(var(--gutter) / 2) !important;
- } */
/* Nested cards shouldn't use the background by default. .card--no-pad can
be applied to individual cards or the whole group to target all cards. */
+
+ /* VERSION 1.0.0: remove generic line targeting no-class. */
.cards .cards > *,
- .card--no-pad {
+ .cards .cards > .card,
+ .card--no-pad,
+ .card.card--no-pad {
background: none;
padding: 0;
}
+ /* As we already have padding on the header and footer we don't want the outmost card group to have spacing. */
.page__header .card--no-pad,
.page__footer .card--no-pad {
- margin: calc((1.6rem / 2) * -1);
- margin: calc((var(--padding) / 2) * -1);
+ margin: 0;
}
.cards.card--no-pad > * {
background: none;
+ margin: 0;
padding: 0;
}
/* For if we want to use the card layout without the backgrounds. */
- .card--no-bk {
+ .card--no-bk,
+ .card.card--no-bk {
background: none;
}
- .card--child-block {
+
+ .card.card--stretch-block {
display: flex;
}
- .card--child-block > * {
+ .card.card--stretch-block > * {
flex: 1 0 auto;
}
@@ -1049,149 +1025,144 @@
*/
/* Individual card widths. */
- .card--width-1 {
+ .card--width-1,
+ .card.card--width-1 {
/* This is for IE11, it doesn't support calc in flex so we need to approximate it. */
flex: 0 1 8%;
/* Sane browsers do this. */
- flex: 0 1 calc(calc(100% / 12) - 1.6rem);
flex: 0 1 calc(calc(100% / 12) - var(--gutter));
}
- .card--width-2 {
+ .card--width-2,
+ .card.card--width-2 {
flex: 0 1 16%;
- flex: 0 1 calc((calc(100% / 12) * 2) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 2) - var(--gutter));
}
- .card--width-3 {
+ .card--width-3,
+ .card.card--width-3 {
flex: 0 1 25%;
- flex: 0 1 calc((calc(100% / 12) * 3) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 3) - var(--gutter));
}
- .card--width-4 {
+ .card--width-4,
+ .card.card--width-4 {
flex: 0 1 33%;
- flex: 0 1 calc((calc(100% / 12) * 4) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 4) - var(--gutter));
}
- .card--width-5 {
+ .card--width-5,
+ .card.card--width-5 {
flex: 0 1 41%;
- flex: 0 1 calc((calc(100% / 12) * 5) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 5) - var(--gutter));
}
- .card--width-6 {
+ .card--width-6,
+ .card.card--width-6 {
flex: 0 1 50%;
- flex: 0 1 calc((calc(100% / 12) * 6) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 6) - var(--gutter));
}
- .card--width-7 {
+ .card--width-7,
+ .card.card--width-7 {
flex: 0 1 58%;
- flex: 0 1 calc((calc(100% / 12) * 7) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 7) - var(--gutter));
}
- .card--width-8 {
+ .card--width-8,
+ .card.card--width-8 {
flex: 0 1 66%;
- flex: 0 1 calc((calc(100% / 12) * 8) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 8) - var(--gutter));
}
- .card--width-9 {
+ .card--width-9,
+ .card.card--width-9 {
flex: 0 1 75%;
- flex: 0 1 calc((calc(100% / 12) * 9) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 9) - var(--gutter));
}
- .card--width-10 {
+ .card--width-10,
+ .card.card--width-10 {
flex: 0 1 83%;
- flex: 0 1 calc((calc(100% / 12) * 10) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 10) - var(--gutter));
}
- .card--width-11 {
+ .card--width-11,
+ .card.card--width-11 {
flex: 0 1 91%;
- flex: 0 1 calc((calc(100% / 12) * 11) - 1.6rem);
flex: 0 1 calc((calc(100% / 12) * 11) - var(--gutter));
}
- .card--width-12 {
+ .card--width-12,
+ .card.card--width-12 {
flex: 0 1 100%;
- flex: 0 1 100% - 1.6rem;
flex: 0 1 100% - var(--gutter);
}
+ /* Set a card to not allow its contents to wrap, use with caution. Not documented in the Blinky GUI docs as this is extremely dangerous in the wrong hands. */
.card--no-wrap {
white-space: nowrap;
}
-
- .card--min-width-100 {
+ /* Enforce some minimum widths on cards, they will wrap unless they can be
+ at least this wide in their row. */
+ .card--min-width-100,
+ .card.card--min-width-100,
+ .cards.card--min-width-100 > *,
+ .cards.card--min-width-100 > .card {
flex: 1 1 100rem;
}
- .card--min-width-90 {
+ .card--min-width-90,
+ .card.card--min-width-90,
+ .cards.card--min-width-90 > *,
+ .cards.card--min-width-90 > .card {
flex: 1 1 90rem;
}
- .card--min-width-80 {
+ .card--min-width-80,
+ .card.card--min-width-80,
+ .cards.card--min-width-80 > *,
+ .cards.card--min-width-80 > .card {
flex: 1 1 80rem;
}
- .card--min-width-70 {
+ .card--min-width-70,
+ .card.card--min-width-70,
+ .cards.card--min-width-70 > *,
+ .cards.card--min-width-70 > .card {
flex: 1 1 70rem;
}
- .card--min-width-60 {
+ .card--min-width-60,
+ .card.card--min-width-60,
+ .cards.card--min-width-60 > *,
+ .cards.card--min-width-60 > .card,
+ .cards.cards--min-width-large > *,
+ .cards.cards--min-width-large > .card {
flex: 1 1 60rem;
}
- .card--min-width-50 {
+ .card--min-width-50,
+ .card.card--min-width-50,
+ .cards.card--min-width-50 > *,
+ .cards.card--min-width-50 > .card,
+ .cards.cards--min-width-lardium > *,
+ .cards.cards--min-width-lardium > .card {
flex: 1 1 50rem;
}
- .card--min-width-40 {
+ .card--min-width-40,
+ .card.card--min-width-40,
+ .cards.card--min-width-40 > *,
+ .cards.card--min-width-40 > .card {
flex: 1 1 40rem;
}
- .card--min-width-30 {
+ .card--min-width-30,
+ .card.card--min-width-30,
+ .cards.card--min-width-30 > *,
+ .cards.card--min-width-30 > .card,
+ .cards.cards--min-width-medium > *,
+ .cards.cards--min-width-medium > .card {
flex: 1 1 30rem;
}
- .card--min-width-20 {
+ .card--min-width-20,
+ .card.card--min-width-20,
+ .cards.card--min-width-20 > *,
+ .cards.card--min-width-20 > .card,
+ .cards.cards--min-width-small > *,
+ .cards.cards--min-width-small > .card {
flex: 1 1 20rem;
}
-
- /* Enforce some minimum widths on cards, they will wrap unless they can be
- at least this wide in their row. */
- .cards--min-width-small > * {
- flex: 1 1 16rem;
- }
- .cards--min-width-medium > * {
- flex: 1 1 30rem;
- }
- .cards--min-width-lardium > * {
- flex: 1 1 45rem;
- }
- .cards--min-width-large > * {
- flex: 1 1 60rem;
- }
+ /* TODO: where is this being used? */
.cards--min-width-medium:not(.cards) {
flex: 1 1 200px;
}
- .cards.card--min-width-100 > * {
- flex: 1 1 100rem;
- }
- .cards.card--min-width-90 > * {
- flex: 1 1 90rem;
- }
- .cards.card--min-width-80 > * {
- flex: 1 1 80rem;
- }
- .cards.card--min-width-70 > * {
- flex: 1 1 70rem;
- }
- .cards.card--min-width-60 > * {
- flex: 1 1 60rem;
- }
- .cards.card--min-width-50 > * {
- flex: 1 1 50rem;
- }
- .cards.card--min-width-40 > * {
- flex: 1 1 40rem;
- }
- .cards.card--min-width-30 > * {
- flex: 1 1 30rem;
- }
- .cards.card--min-width-20 > * {
- flex: 1 1 20rem;
- }
-
/* Sets a maximum width on the card container, if the available screen size exceeds this amount the extra space is distributed evenly on the left and right margins. */
@@ -1199,9 +1170,7 @@
margin: auto;
}
.cards--max-width > .cards {
- margin-left: calc((1.6rem/ 2) - 1.6rem);
margin-left: calc((var(--gutter)/ 2) - var(--gutter));
- margin-right: calc((1.6rem/ 2) - 1.6rem);
margin-right: calc((var(--gutter)/ 2) - var(--gutter));
}
.cards--max-width--small {
@@ -1215,43 +1184,46 @@
}
- /* Cards that only take their content width. Should always be paired with
- a card that is allowed to grow. */
- /* .cards--no-grow {
- flex-wrap: nowrap;
- justify-content: start;
- }
- .cards--no-grow > * {
- flex: 0 0 auto;
- white-space: nowrap;
- }
- .card--grow {
- flex: 1 1 auto;
- white-space: normal;
- }
- .cards--no-grow > *:last-child {
- background: red;
- justify-self: flex-end;
- } */
-
/* If we want to limit a flex item to be only its own content width, think a card block containing a title and a menu. */
- .card--content-width {
+ .card--content-width,
+ .card.card--content-width {
flex: 0 0 auto;
}
-
- .cards--listing > * {
+ /* VERSION 1.0.0: remove this line. */
+ .cards--listing > *,
+ .cards--listing > .card {
background: none;
- border: solid 1px rgba(50,68,74, 0.25);
border: solid 1px var(--card-listing-border);
- padding: 1.6rem;
padding: var(--padding);
}
- .cards .cards--listing > * {
- padding: 1.6rem;
+ /* VERSION 1.0.0: remove this line. */
+ .cards .cards--listing > *,
+ .cards .cards--listing > .card {
padding: var(--padding);
}
+
+
+
+ .cards > .card.card--callout--tango {
+ background: rgb(var(--tango));
+ color: rgb(var(--basalt));
+ padding: var(--padding);
+ }
+ .cards > .card.card--callout--blue {
+ background: rgb(var(--smurf));
+ color: rgb(255,255,255);
+ padding: var(--padding);
+ }
+ .cards > .card.card--callout--grey {
+ background: var(--card-calout-grey-bk);
+ padding: var(--padding);
+ }
+ .cards > .card.card--callout--default {
+ background: rgba(255,255,255, var(--card-background-opacity));
+ padding: var(--padding);
+ }
@@ -1291,34 +1263,34 @@
}
-
+ html {
+ color: rgb(var(--page-text));
+ }
+ html:has(.theme--light) {
+ color: rgb(var(--basalt));
+ }
+ html:has(.theme--dark) {
+ color: rgb(255,255,255);
+ }
+
.page {
- background: rgb(236,239,240);
background: var(--page-background);
- color: rgb(50,68,74);
color: rgb(var(--page-text));
}
.page__header {
- background: rgb(11,11,11);
background: rgb(var(--onyx));
- color: rgb(255,255,255);
color: var(--header-text);
- padding: 1.6rem;
padding: var(--padding);
}
.page__sidebar {
align-self: stretch;
- background: rgb(0,44,62);
background: var(--sidebar-background);
- color: rgb(255,255,255);
color: var(--sidebar-text);
display: flex;
}
.page__footer {
- background: rgb(11,11,11);
background: rgb(var(--onyx));
color: rgba(255,255,255, 0.75);
- padding: 1.6rem;
padding: var(--padding);
text-align: center;
}
@@ -1355,7 +1327,6 @@
width: 100%;
}
.page__content-inner {
- margin-bottom: 1.6rem;
margin-bottom: var(--gutter);
}
@@ -1377,7 +1348,6 @@
flex: 999 0 auto;
height: 0;
overflow-y: auto;
- margin-bottom: calc(1.6rem / 2);
margin-bottom: calc(var(--gutter) / 2);
}
}
@@ -1387,27 +1357,15 @@
.page--sticky-header .page__header {
position: sticky;
top: 0;
- z-index: 3;
+ z-index: 210;
}
@media only screen and (max-width: calc(60rem - 1px) ) {
- .page__sidebar--expanded {
- overflow: hidden;
+ .page__content-inner {
+ margin-bottom: var(--gutter);
}
- .page__sidebar--expanded .page__sidebar {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
- z-index: 1;
- }
- .page__content-inner {
- margin-bottom: 1.6rem;
- margin-bottom: var(--gutter);
- }
}
@@ -1424,7 +1382,16 @@
-/* Sidebar Structure - menu open */
+/* Sidebar */
+
+ /* If the WC doesn't run then we want a basic non-JS powered element with column layout. */
+ /* At some point we can updte and use this when browser support permits: .page__sidebar:not(:has(.sidebar)) */
+ .page__sidebar:not(.js__sidebar) {
+ flex-direction: column;
+ }
+
+
+ /* SIDEBAR STRUCTURE - menu open */
.sidebar {
align-self: stretch;
@@ -1435,7 +1402,6 @@
.sidebar__header,
.sidebar__footer {
flex: 0 0 auto;
- padding: 1.6rem;
padding: var(--padding);
}
.sidebar__footer {
@@ -1449,18 +1415,14 @@
overflow-y: auto;
flex: 1 1 auto;
height: 0;
- padding: 0 1.6rem;
padding: 0 var(--padding);
}
.page__sidebar .menu {
- margin: 0 calc(-1 * 1.6rem);
margin: 0 calc(-1 * var(--padding));
- width: calc(100% + (1.6rem*2));
width: calc(100% + (var(--padding)*2));
}
.page__sidebar .sidebar__footer .menu {
- margin-bottom: calc(-1 * 1.6rem);
margin-bottom: calc(-1 * var(--padding));
}
@@ -1474,132 +1436,86 @@
}
+ /* TOGGLE BUTTON (added by JS) */
+ .js__sidebar .sidebar__toggle {
+ float: right;
+ margin: 0;
+ }
-
-
- .page__sidebar .logo {
- display: block;
- max-width: 12rem;
+ /* Smaller screens. */
+ @media only screen and (max-width: calc(60rem - 1px) ) {
+ .sidebar__toggle .icon {
+ transform: rotate(90deg);
}
- /* Hide small fish icon. */
- .page__sidebar .logo .logo__icon {
- display: none;
- }
+ }
+ /* SIDEBAR CLOSED */
-/* Sidebar - menu closed */
+ /* Larger screens. */
@media only screen and (min-width: 60rem) {
- .page__sidebar.page__sidebar--minimised,
- .page__properties.page__sidebar--minimised {
+ .js__sidebar[minimized='1'] {
flex: 0 0 5.6rem;
position: relative;
}
- .page__sidebar--minimised .sidebar__content,
- .page__sidebar--minimised .sidebar__footer {
+ .js__sidebar[minimized='1'] .sidebar__content,
+ .js__sidebar[minimized='1'] .sidebar__footer {
display: none;
}
-
- .page__sidebar.page__sidebar--minimised .logo {
- margin-top: 1.6rem;
- margin-top: var(--gutter);
- max-width: 4rem;
+ }
+ /* Smaller screens. */
+ @media only screen and (max-width: calc(60rem - 1px) ) {
+ /* Stops the page behind the sidebar from scrolling whilst the sidebar is expanded. */
+ .page:has(.js__sidebar[minimized='0']) {
+ overflow: hidden;
+ }
+ .js__sidebar[minimized='0'] {
+ bottom: 0;
+ left: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 200;
+ }
+ .sidebar__content,
+ .sidebar__footer {
+ display: none;
}
- /* Swap the full logo for the small fish only version. */
- .page__sidebar.page__sidebar--minimised .logo .logo__full {
- display: none;
+ .js__sidebar[minimized='0'] .sidebar__content {
+ display: block;
}
- .page__sidebar.page__sidebar--minimised .logo .logo__icon {
- clear: both;
- display: block;
- margin: 0 0.4rem;
+ .js__sidebar[minimized='0'] .sidebar__footer {
+ display: flex;
}
}
- /* Toggles */
- .page__sidebar .sidebar__toggle {
- display: none;
- }
- .page__sidebar .sidebar__toggle,
- .page__sidebar .sidebar__toggle__mob {
- float: right;
- margin: 0;
- }
- .page__sidebar .sidebar__toggle .icon,
- .page__sidebar .sidebar__toggle__mob .icon {
- transform: rotate(180deg);
- }
- @media only screen and (min-width: 60rem) {
- .page__sidebar--minimised .sidebar__toggle {
- float: none;
- }
- .page__sidebar--minimised .sidebar__toggle .icon {
- transform: rotate(00deg);
- }
- .page__sidebar .sidebar__toggle {
- display: block;
- }
- .page__sidebar .sidebar__toggle__mob {
- display: none;
- }
- }
- @media only screen and (max-width: calc(60rem - 1px) ) {
- .page__sidebar .sidebar__toggle__mob {
- display: block;
- }
- .sidebar__toggle__mob .icon {
- transition: transform .2s;
- }
- .page__sidebar--expanded .sidebar__toggle__mob .icon {
- transform: rotate(270deg);
- }
- .page__sidebar--expanded .sidebar__toggle__mob[aria-pressed="true"] .icon {
- transform: rotate(90deg);
- }
- .sidebar__content,
- .sidebar__footer {
- display: none;
- }
- .page__sidebar--expanded .sidebar__content {
- display: block;
- }
- .page__sidebar--expanded .sidebar__footer {
- display: flex;
- }
- }
+/* Hero */
-
- /* Profile block */
- .profile {
- align-items: center;
- display: flex;
- margin: 0 0.4rem 0.4rem 0;
- /* We don't want the spacing if the whole lot fits on one line so trick
- it by adding a negative margin. */
- margin-right: calc( (4rem - (1.6rem / 2)) * -1 );
- margin-right: calc( (4rem - (var(--padding) / 2)) * -1 );
- }
- .profile__av {
- border-radius: 0.3rem;
- border-radius: var(--button-radius);
- overflow: hidden;
- width: 4rem;
- }
- .profile__name {
- flex: 1 1 auto;
- padding: calc(1.6rem / 4);
- padding: calc(var(--padding) / 4);
- }
- .sidebar__logout {
- align-self: flex-end;
- justify-self: flex-end;
- margin-bottom: 0.4rem;
- /* Width of AV plus the spacing. */
- margin-left: calc(4rem + (1.6rem / 4));
- margin-left: calc(4rem + (var(--padding) / 4));
+ :root {
+ --hero-background:
+ linear-gradient(
+ 0deg,
+ rgba(5,152,214,0.5) 0,
+ rgba(5,152,214,0) 100%
+ ),
+ linear-gradient(
+ 0deg,
+ rgb(0,44,62) 0,
+ rgb(0,44,62) 100%
+ );
+ --hero-text: rgb(255,255,255);
+ }
+
+ .hero {
+ background: var(--hero-background);
+ background-position: right top;
+ background-size: cover;
+ color: var(--hero-text);
+ overflow: hidden;
+ padding-bottom: var(--gutter);
}
@@ -1703,60 +1619,48 @@
}
.table th,
.table td {
- border-bottom: solid 1px rgba(50,68,74, 0.25);
border-bottom: solid 1px rgba(var(--table), var(--table-border-opacity));
- padding: 0.8rem 1.6rem;
padding: 0.8rem var(--padding);
text-align: left;
}
.table th {
- background: rgba(50,68,74, 1);
background: rgba(var(--table), var(--table-header-opacity));
- color: rgb(255,255,255);
color: rgb(var(--table-header-text));
font-weight: 700;
}
/* Row header. */
.table [scope="row"] {
- background: rgba(50,68,74, 1);
background: rgba(var(--table), var(--table-header-opacity));
font-weight: 700;
}
/* Row header if there's a horizontal table header. */
.table thead + tbody [scope="row"],
.table__thead ~ tr [scope="row"] {
- background: rgba(50,68,74, 0.1);
background: rgba(var(--table), var(--table-horizontal-header-opacity));
font-weight: 500;
}
.table__tint td,
td.table__tint {
- background: rgba(50,68,74, 0.1);
background: rgba(var(--table), var(--table-horizontal-header-opacity));
}
/* Left and right table edges. */
.table thead th:first-child {
- border-left: solid 1px rgba(50,68,74, 1);
border-left: solid 1px rgba(var(--table), var(--table-header-opacity));
}
.table thead th:last-child {
- border-right: solid 1px rgba(50,68,74, 1);
border-right: solid 1px rgba(var(--table), var(--table-header-opacity));
}
.table td:first-child {
- border-left: solid 1px rgba(50,68,74, 0.25);
border-left: solid 1px rgba(var(--table), var(--table-border-opacity));
}
.table td:last-child {
- border-right: solid 1px rgba(50,68,74, 0.25);
border-right: solid 1px rgba(var(--table), var(--table-border-opacity));
}
/* If there's no THEAD we need to apply a border to the top of the top row. */
.table tbody tr:first-child td {
- border-top: solid 1px rgba(50,68,74, 0.25);
border-top: solid 1px rgba(var(--table), var(--table-border-opacity));
}
.table thead + tbody tr:first-child td {
@@ -1767,39 +1671,37 @@
padding: 0;
}
+ table.table__align--top th, table.table__align--top td,
+ .table__align--top {
+ vertical-align: top;
+ }
+ table.table__align--bottom th, table.table__align--bottom td,
+ .table__align--bottom {
+ vertical-align: bottom;
+ }
+
/* Highlights. */
tr.table--highlight > *,
td.table--highlight {
- background: rgba(240,152,27, 0.75);
background: var(--table-highlight);
}
tr.table--highlight > [scope="row"],
th.table--highlight {
- background: linear-gradient(
- rgba(240,152,27, 0.5),
- rgba(240,152,27, 0.5)),
- rgba(50,68,74, 1);
background: var(--table-highlight-th);
}
thead + tbody tr.table--highlight > [scope="row"] {
- background: linear-gradient(
- rgba(240,152,27, 0.8),
- rgba(240,152,27, 0.8)),
- rgba(50,68,74, 0.1);
background: var(--table-highlight-row);
}
tr.table--highlight td.table--highlight {
- background: rgba(240,152,27, 0.9);
background: var(--table-highlight-intersect);
}
- .table th .button--clear .icon {
- /* fill: rgb(var(--table-header-text)); */
- /* margin-right: -1.2rem; */
- }
.table th .sort--desc .icon {
transform: rotate(180deg);
}
+ .sort--inactive .icon {
+ opacity: 0.4;
+ }
.table td > .button {
margin-bottom: -0.8rem;
margin-top: -0.8rem;
@@ -1868,204 +1770,48 @@
}
.table__color-tag--tango:before,
.table__color-tag--tango:after {
- background: rgb(240,152,27);
background: rgb(var(--tango));
}
.table__color-tag--midnight:before,
.table__color-tag--midnight:after {
- background: rgb(0,44,62);
background: rgb(var(--midnight));
}
.table__color-tag--smurf:before,
.table__color-tag--smurf:after {
- background: rgb(5,152,214);
background: rgb(var(--smurf));
}
.table__color-tag--marmalade:before,
.table__color-tag--marmalade:after {
- background: rgb(244,74,2);
background: rgb(var(--marmalade));
}
.table__color-tag--gecko:before,
.table__color-tag--gecko:after {
- background: rgb(98,196,0);
background: rgb(var(--gecko));
}
.table__color-tag--plum:before,
.table__color-tag--plum:after {
- background: rgb(170,0,250);
background: rgb(var(--plum));
}
.table__color-tag--candy:before,
.table__color-tag--candy:after {
- background: rgb(255,66,180);
background: rgb(var(--candy));
}
.table__color-tag--mud:before,
.table__color-tag--mud:after {
- background: rgb(152,73,0);
background: rgb(var(--mud));
}
.table__color-tag--slate:before,
.table__color-tag--slate:after {
- background: rgb(152,147,138);
background: rgb(var(--slate));
}
.table__color-tag--ortolan:before,
.table__color-tag--ortolan:after {
- background: rgb(0,53,241);
background: rgb(var(--ortolan));
}
-/* Tab Panel */
-
- :root {
- --tab-panel-background: 255,255,255;
- --tab-text: 255,255,255;
- --inactive-tab-background: var(--tab-panel-background);
- }
- .theme--light {
- }
- @media (prefers-color-scheme: dark) {
- :root {
- --tab-panel-background: 255,255,255;
- --tab-text: 255,255,255;
- --inactive-tab-background: var(--tab-panel-background);
- }
- }
- .theme--dark {
- --tab-panel-background: 255,255,255;
- --tab-text: 255,255,255;
- --inactive-tab-background: var(--tab-panel-background);
- }
-
- .tab-panel {
- background: rgba(255,255,255, 0.1);
- background: rgba(var(--tab-panel-background), 0.1);
- border-radius: 0.3rem;
- border-radius: var(--block-radius);
- overflow: hidden;
- }
- .page__sidebar .tab-panel {
- background: rgba(var(--menu-sidebar-background), 0.15);
- }
-
-
- .tab-panel__header {
- display: flex;
- flex-direction: row-reverse;
- align-items: flex-start;
- }
- .tab-panel__header .tab-panel__icon {
- fill: rgba(11,11,11, 0.3);
- fill: rgba(var(--icon-colour), 0.3);
- flex: 0 0 auto;
- margin: 1.6rem;
- margin: var(--padding);
- }
- .tab-panel__header .tab-panel__title {
- align-self: center;
- flex: 1 1 auto;
- margin: 0;
- }
- .tab-panel__header .tab-panel__toggle {
- flex: 0 0 auto;
- margin: 0;
- }
- .tab-panel__header .tab-panel__toggle .icon {
- transform: rotate(90deg);
- }
- .tab-panel__header .tab-panel__toggle[aria-expanded="false"] .icon {
- transform: rotate(0deg);
- }
-
-
-
- .tab-panel__inner.minimised {
- display: none;
- }
-
-
-
- .tab-panel__tabs {
- display: flex;
- padding: 0 1.6rem;
- padding: 0 var(--gutter);
- }
- .tab-panel__tab {
- background: rgba(255,255,255, 0.2);
- background: rgba(var(--inactive-tab-background), 0.2);
- border: none;
- border-radius: 0.3rem 0.3rem 0 0;
- border-radius: var(--button-radius) var(--button-radius) 0 0;
- color: rgb(255,255,255);
- color: rgb(var(--tab-text));
- font-family: inherit;
- font-size: 100%;
- line-height: inherit;
- outline: 0;
- padding: 0.8rem 1.2rem;
- text-align: center;
- -webkit-appearance: none;
- }
- .page__sidebar .tab-panel__tab {
- background: rgba(var(--menu-sidebar-background), 0.35);
- }
- .tab-panel__tab:focus,
- .tab-panel__tab:focus-visible {
- box-shadow:
- -4px -4px 0 0px rgb(0,115,165),
- 4px -4px 0 0px rgb(0,115,165),
- -4px 0 0 0px rgb(0,115,165),
- 4px 0 0 0px rgb(0,115,165);
- box-shadow:
- -4px -4px 0 0px rgb(var(--link-color)),
- 4px -4px 0 0px rgb(var(--link-color)),
- -4px 0 0 0px rgb(var(--link-color)),
- 4px 0 0 0px rgb(var(--link-color));
- }
- .tab-panel__tab:focus:not(:focus-visible) {
- box-shadow: none;
- }
- .tab-panel__tab:hover {
- background: rgba(255,255,255, 0.15);
- background: rgba(var(--inactive-tab-background), 0.15);
- }
- .page__sidebar .tab-panel__tab:hover {
- background: rgba(var(--menu-sidebar-background), 0.3);
- }
- .tab-panel__tab + .tab-panel__tab {
- margin-left: 0.4rem;
- }
- .tab-panel__tab[aria-selected="true"] {
- background: rgba(255,255,255, 0.1);
- background: rgba(var(--tab-panel-background), 0.1);
- }
- .page__sidebar .tab-panel__tab[aria-selected="true"] {
- background: rgba(var(--menu-sidebar-background), 0.2);
- }
-
- .js .tab-panel__content {
- display: none;
- padding: 1.6rem;
- padding: var(--padding);
- }
- .js .tab-panel__tabs ~ .tab-panel__content {
- background: rgba(255,255,255, 0.1);
- background: rgba(var(--tab-panel-background), 0.1);
- }
- .js .page__sidebar .tab-panel__tabs ~ .tab-panel__content {
- background: rgba(var(--menu-sidebar-background), 0.2);
- }
- .tab-panel__content.tab-panel__active {
- display: block;
- }
-
-
-
/* Tab Group */
:root {
@@ -2097,11 +1843,8 @@
/* Group container, can be either a collapsible summary/details if we need to not use tonnes of space if JS isn't available or just a straigt up section. */
.tab-group.tab-group--box {
- background: rgb(218,224,226);
background: var(--tab-group-bk);
- border-radius: 0.3rem;
border-radius: var(--block-radius);
- padding: 1.6rem;
padding: var(--padding);
}
@@ -2113,48 +1856,36 @@
.js .tab-group__tabs {
display: block;
}
- .tab-group__tab.button {
- padding: 0.8rem 1.6rem;
+ .tab-group__tab.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear) {
padding: 0.8rem var(--padding);
- border-radius: 0.3rem 0.3rem 0 0;
border-radius: var(--button-radius) var(--button-radius) 0 0;
box-shadow: none;
margin: 0 0rem;
}
- .tab-group__tab[aria-selected=true]:not(:hover),
- .tab-group__tab[aria-selected=true]:hover {
- background: rgb(218,224,226);
+ .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):not(:hover),
+ .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover {
background: var(--tab-group-bk);
- color: rgb(50,68,74);
color: rgb(var(--page-text));
}
- .tab-group--box .tab-group__tab[aria-selected=true]:not(:hover),
- .tab-group--box .tab-group__tab[aria-selected=true]:hover {
- background: rgb(255,255,255);
+ .tab-group--box .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):not(:hover),
+ .tab-group--box .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover {
background: var(--tab-group-active-bk);
}
.tab-group__content {
- background: rgb(218,224,226);
background: var(--tab-group-bk);
- border-radius: 0.3rem;
border-radius: var(--block-radius);
- padding: 1.6rem;
padding: var(--padding);
}
.tab-group--box .tab-group__content {
- background: rgb(255,255,255);
background: var(--tab-group-active-bk);
- padding: 1.6rem;
padding: var(--padding);
}
.tab-group__content + .tab-group__content {
- margin-top: 1.6rem;
margin-top: var(--gutter);
}
.js .tab-group__content {
display: none;
- border-radius: 0 0.3rem 0.3rem 0.3rem;
border-radius: 0 var(--block-radius) var(--block-radius) var(--block-radius);
}
.js .tab-group__content + .tab-group__content {
@@ -2185,14 +1916,11 @@
.accordion__item {
- border: solid 1px rgba(50,68,74, 0.25);
border: solid 1px var(--accordion-border);
- column-gap: 1.6rem;
column-gap: var(--padding);
display: grid;
grid-template-columns: 1fr fit-content(50%);
grid-template-areas: 'a b''c c';
- padding: 0.8rem 1.6rem;
padding: 0.8rem var(--padding);
position: relative;
}
@@ -2200,11 +1928,9 @@
border-top: none;
}
.accordion__item:first-child {
- border-radius: 0.3rem 0.3rem 0 0;
border-radius: var(--button-radius) var(--button-radius) 0 0;
}
.accordion__item:last-child {
- border-radius: 0 0 0.3rem 0.3rem;
border-radius: 0 0 var(--button-radius) var(--button-radius);
}
@@ -2214,7 +1940,6 @@
.accordion__toggle,
.accordion__button {
grid-area: b;
- margin: -0.8rem calc(1.6rem * -1) !important;
margin: -0.8rem calc(var(--padding) * -1) !important;
white-space: nowrap;
}
@@ -2234,22 +1959,19 @@
.accordion__content {
grid-area: c;
- margin: -0.8rem calc(1.6rem * -1);
margin: -0.8rem calc(var(--padding) * -1);
margin-top: 0.4rem;
- padding: 0.3rem 1.6rem;
+ overflow: hidden;
padding: 0.3rem var(--padding);
transition: max-height 0.3s ease-in-out;
}
[aria-expanded="false"] + .accordion__content {
max-height: 0vh;
- padding: 0.3rem 1.6rem;
padding: 0.3rem var(--padding);
visibility: hidden;
}
[aria-expanded="true"] + .accordion__content {
max-height: 100vh;
- padding: 0.8rem 1.6rem;
padding: 0.8rem var(--padding);
visibility: visible;
}
@@ -2270,25 +1992,20 @@
/* Console log */
.console {
- background: rgb(23,24,24);
background: rgb(var(--coal));
color: rgb(255,255,255);
}
.console--light {
background: rgb(255,255,255);
- color: rgb(23,24,24);
color: rgb(var(--coal));
}
.console pre {
- padding: calc(1.6rem / 2);
padding: calc(var(--padding) / 2);
max-height: 30rem;
}
/* Adjust the padding slightly for consoles inside tables so the left margin matches. */
.table .console pre {
- padding-left: 1.6rem;
padding-left: var(--padding);
- padding-right: 1.6rem;
padding-right: var(--padding);
}
@@ -2312,113 +2029,122 @@
}
+
.highlights {
- --border-width: 0 4px 0 0;
- --display: flex;
- --dl: block;
- --pad: var(--padding);
- --radius: var(--block-radius) 0 0 var(--block-radius);
+ --hl-status-display: flex;
+ --hl-status-pad: var(--padding) var(--padding) var(--padding) 0;
+ --hl-status-border-h: solid 4px var(--page-background);
+ --hl-status-border-b: none;
}
@media only screen and (max-width: 40rem) {
- .highlights--width-40 {
- --border-width: 0 0 4px 0;
- --display: block;
- --dl: grid;
- --pad: 0 var(--padding) var(--padding) var(--padding);
- --radius: var(--block-radius) var(--block-radius) 0 0;
+ .highlights--width-40.highlights {
+ --hl-status-display: block;
+ --hl-status-pad: 0 var(--padding) var(--padding) var(--padding);
+ --hl-status-border-h: none;
+ --hl-status-border-b: solid 4px var(--page-background);
}
}
@media only screen and (max-width: 60rem) {
- .highlights--width-60 {
- --border-width: 0 0 4px 0;
- --display: block;
- --dl: grid;
- --pad: 0 var(--padding) var(--padding) var(--padding);
- --radius: var(--block-radius) var(--block-radius) 0 0;
+ .highlights--width-60.highlights {
+ --hl-status-display: block;
+ --hl-status-pad: 0 var(--padding) var(--padding) var(--padding);
+ --hl-status-border-h: none;
+ --hl-status-border-b: solid 4px var(--page-background);
}
}
@media only screen and (max-width: 80rem) {
- .highlights--width-80 {
- --border-width: 0 0 4px 0;
- --display: block;
- --dl: grid;
- --pad: 0 var(--padding) var(--padding) var(--padding);
- --radius: var(--block-radius) var(--block-radius) 0 0;
+ .highlights--width-80.highlights {
+ --hl-status-display: block;
+ --hl-status-pad: 0 var(--padding) var(--padding) var(--padding);
+ --hl-status-border-h: none;
+ --hl-status-border-b: solid 4px var(--page-background);
}
}
.page .highlights {
- background: rgba(50,68,74, 0.75);
background: var(--highlights-background);
color: #fff;
- display: var(--display);
+ display: var(--hl-status-display);
+ border-radius: var(--block-radius);
+ overflow: hidden;
}
.highlights__section {
- flex: 0 1 auto;
- padding: var(--pad);
- white-space: nowrap;
- display: flex;
+ padding: var(--hl-status-pad);
+ display: var(--hl-status-display);
align-items: center;
}
-
- .highlights__status,
+
+ /* First item needs full padding. */
+ .highlights__section:first-child,
.highlights__status + .highlights__section {
- padding-top: 1.6rem;
- padding-top: var(--padding);
- }
- .highlights__section:last-child {
- flex-grow: 1;
+ padding: var(--padding);
}
- .highlights__section--wrap {
- flex-grow: 999;
- white-space: normal;
+
+
+ .highlights--center {
+ justify-content: center;
+ }
+ .highlights--center .highlights__section {
+ text-align: center;
}
- .highlights__status {
- border: solid 4px rgb(236,239,240);
- border: solid 4px var(--page-background);
- border-radius: var(--radius);
- border-width: var(--border-width);
+ .highlights--right {
+ justify-content: flex-end;
+ }
+ .highlights--right .highlights__section {
+ text-align: right;
}
- .highlights .dl--horizontal {
- display: var(--dl);
- grid-template-columns: fit-content(50%) 1fr;
- }
- .highlights .dl--horizontal dt {
- margin-right: 0.4rem;
- }
-
.highlight--right {
+ flex-grow: 999;
justify-content: flex-end;
+ text-align: right;
}
- .highlights a:not([class]) {
+ .highlights__status {
+ border-right: var(--hl-status-border-h);
+ border-bottom: var(--hl-status-border-b);
+ }
+ .highlights--center .highlights__status,
+ .highlights--right .highlights__status {
+ /* We set as box-shadow because this needs to go away if the status box ends up slush left in its container. */
+ box-shadow: -4px 0 var(--page-background);
+ }
+
+
+ .highlights a:not([class]),
+ .highlights .button.button--plain {
color: currentColor;
}
.highlights a:focus:not([class]),
- .highlights a:focus-visible:not([class]) {
+ .highlights a:focus-visible:not([class]),
+ .highlights .button.button--plain:focus,
+ .highlights .button.button--plain:focus-visible {
background: rgb(255,255,255);
- color: rgb(23,24,24);
color: rgb(var(--coal));
}
- .highlights a:focus:not(:focus-visible):not([class]) {
+ .highlights a:focus:not(:focus-visible):not([class]),
+ .highlights .button.button--plain:focus:not(:focus-visible):not([class]) {
background: none;
color: currentColor;
}
+
/* Status colours. */
.highlights__status.highlights__status--good {
- background: rgb(0,103,41);
background: rgb(var(--frog));
}
.highlights__status.highlights__status--goodish {
- background: linear-gradient(45deg, rgba(155,18,0,1) 49%, rgba(0,103,41,1) 50%);
+ background: linear-gradient(45deg, rgba(var(--basalt),1) 49%, rgba(var(--frog),1) 50%);
+ }
+ .highlights__status.highlights__status--badish {
background: linear-gradient(45deg, rgba(var(--cherry),1) 49%, rgba(var(--frog),1) 50%);
}
+ .highlights__status.highlights__status--neutral {
+ background: rgb(var(--basalt));
+ }
.highlights__status.highlights__status--bad {
- background: rgb(155,18,0);
background: rgb(var(--cherry));
}
@@ -2426,23 +2152,35 @@
/* Copy Box */
- :root {
- --copy-box-background: rgb(255,255,255);
+ .copy-box {
--copy-box-border: rgb(var(--smurf));
}
- .theme--light {
+ .copy-box,
+ .theme--light .copy-box {
--copy-box-background: rgb(255,255,255);
- --copy-box-border: rgb(var(--smurf));
+ --copy-box-anim:
+ linear-gradient(
+ rgba(var(--smurf), 0.25),
+ rgba(var(--smurf), 0.25))
+ rgb(255,255,255);
}
@media (prefers-color-scheme: dark) {
- :root {
+ .copy-box {
--copy-box-background: rgb(var(--coal));
- --copy-box-border: rgb(var(--smurf));
+ --copy-box-anim:
+ linear-gradient(
+ rgba(var(--smurf), 0.5),
+ rgba(var(--smurf), 0.5))
+ rgb(var(--coal));
}
}
- .theme--dark {
+ .theme--dark .copy-box {
--copy-box-background: rgb(var(--coal));
- --copy-box-border: rgb(var(--smurf));
+ --copy-box-anim:
+ linear-gradient(
+ rgba(var(--smurf), 0.5),
+ rgba(var(--smurf), 0.5))
+ rgb(var(--coal));
}
.copy-box {
@@ -2451,17 +2189,17 @@
grid-template-columns: 1fr max-content;
position: relative;
}
+ .no-js .copy-box > *:first-child,
.copy-box__content {
- border: 1px dashed rgb(5,152,214);
border: 1px dashed var(--copy-box-border);
- background: rgb(255,255,255);
background: var(--copy-box-background);
- padding: 0.8rem;
+ padding: calc(0.8rem - 2px) 0.8rem;
position: relative;
/* Allows the trick to use the animation to click to select the content. */
user-select: all;
}
/* Played when the user clicks on the content to copy. The first click selects all the content, a second click allows the user to manually select. Without the animation they would only ever be able to select all. */
+ .no-js .copy-box > *:first-child:focus,
.copy-box__content:focus,
.copy-box__content--focussed {
animation: to-copy 100ms step-end forwards;
@@ -2479,16 +2217,13 @@
}
@keyframes copy-box {
0% {
- background: rgba(5,152,214, 0);
- background: rgba(var(--smurf), 0);
+ background: var(--copy-box-background);
}
50% {
- background: rgba(5,152,214, 0.25);
- background: rgba(var(--smurf), 0.25);
+ background: var(--copy-box-anim);
}
100% {
- background: rgba(5,152,214, 0);
- background: rgba(var(--smurf), 0);
+ background: var(--copy-box-background);
}
}
.copy-box__button {
@@ -2497,82 +2232,44 @@
-/* Callout */
-
- .callout {
- background: rgba(240,152,27,0.5);
- background: rgba(var(--tango),0.5);
- border-radius: 0.3rem;
- border-radius: var(--block-radius);
- padding: 1.6rem;
- padding: var(--padding);
- text-align: center;
- }
- .callout ul {
- margin-left: auto;
- margin-right: auto;
- display: inline-block;
- }
- .callout li {
- text-align: left;
- }
-
-
- /* .callout ul {
- list-style-type: none;
- padding-left: calc(1em + 0.4rem);
- }
- .callout li {
- position: relative;
- }
- .callout .icon {
- position: absolute;
- right: calc(100% + 0.4rem);
- top: 0.4rem;
- }
- .callout .icon--tick {
- fill: rgb(var(--frog));
- } */
/* Status Label */
.status-label {
- font-size: 1.4rem;
+ color: currentcolor;
+ font-size: 1.3rem;
font-weight: bold;
text-transform: uppercase;
white-space: nowrap;
}
- a.status-label {
- color: currentcolor;
- }
a.status-label:hover {
text-decoration: none;
}
a.status-label:focus,
a.status-label:focus-visible {
- background: rgb(0,115,165);
background: rgb(var(--link-color));
border-radius: 2px;
- color: rgb(255,255,255);
color: rgb(var(--link-color-focus));
text-decoration: none;
}
a.status-label:focus:not(:focus-visible) {
background: none;
border-radius: 0;
- color: rgb(0,115,165);
color: rgb(var(--link-color));
text-decoration: underline;
+ }
+ .status-label--bk {
+ background: color-mix(in srgb, currentColor 10%, transparent);
+ display: inline-block;
+ padding: 0.1rem 0.4rem;
}
.status-label .icon {
- fill: inherit;
+ fill: currentColor;
}
a.status-label:focus .icon,
a.status-label:focus-visible .icon {
- fill: rgb(255,255,255);
fill: rgb(var(--link-color-focus));
}
a.status-label:focus:not(:focus-visible) .icon {
- fill: rgb(0,115,165);
fill: rgb(var(--link-color));
}
@@ -2585,12 +2282,25 @@
--popup-text: var(--page-text);
--popup-page-text: var(--page-text);
--popup-status-link: 0,115,165;
+ --whisper: var(--concrete);
+ --whisper-form:
+ linear-gradient(
+ 0deg,
+ rgba(255,255,255,0.65) 0,
+ rgba(255,255,255,0.65) 100%
+ ),
+ linear-gradient(
+ 0deg,
+ rgb(var(--concrete)) 0,
+ rgb(var(--concrete)) 100%
+ );
}
.theme--light {
--popup-background: 255,255,255;
--popup-text: var(--page-text);
--popup-page-text: var(--page-text);
--popup-status-link: 0,115,165;
+ --whisper: var(--concrete);
}
@media (prefers-color-scheme: dark) {
:root {
@@ -2605,17 +2315,26 @@
--popup-text: var(--page-text);
--popup-page-text: 255,255,255;
--popup-status-link: 255,255,255;
+ --whisper: var(--jet);
+ --whisper-form:
+ linear-gradient(
+ 0deg,
+ rgba(255,255,255,0.03) 0,
+ rgba(255,255,255,0.03) 100%
+ ),
+ linear-gradient(
+ 0deg,
+ rgb(var(--jet)) 0,
+ rgb(var(--jet)) 100%
+ );
}
.status {
- background: rgb(50,68,74);
background: rgb(var(--basalt));
- border-radius: 0.3rem;
border-radius: var(--block-radius);
color: rgb(255,255,255);
- padding: 1.6rem;
padding: var(--padding);
position: relative;
}
@@ -2650,10 +2369,9 @@
right: 0;
top: 0;
}
- /* Add some spacing to accommodate the clcose button in top right. */
+ /* Add some spacing to accommodate the close button in top right. */
.status--cb .status__title,
.status--cb .status__content {
- margin-right: calc(4rem - 1.6rem);
margin-right: calc(4rem - var(--padding));
}
@@ -2664,7 +2382,7 @@
}
/* If there's a title and a close button in use we can remove the spacing
for the close button as the main content is likely underneath it. */
- .status--title.status--cb .status__content {
+ .status--title.status--cb:not(.status--icon) .status__content {
margin-right: 0;
}
@@ -2672,10 +2390,8 @@
/* With icon */
.status--icon .status__icon {
display: block;
- left: 1.6rem;
left: var(--padding);
position: absolute;
- top: 1.6rem;
top: var(--padding);
width: 3.2rem;
height: 3.2rem;
@@ -2687,23 +2403,20 @@
}
.status--icon .status__title,
.status--icon .status__content {
- margin-left: calc(1.6rem + 3.2rem);
margin-left: calc(var(--padding) + 3.2rem);
+ margin-right: calc(var(--padding) + 3.2rem);
}
.status.status--small {
- padding: calc(1.6rem / 2);
padding: calc(var(--padding) / 2);
}
.status--icon.status--small .status__icon {
width: 2rem;
height: 2rem;
- top: calc(1.6rem / 2);
top: calc(var(--padding) / 2);
}
.status--icon.status--small .status__content {
- margin-left: calc(1.6rem + 2rem);
margin-left: calc(var(--padding) + 2rem);
}
@@ -2711,38 +2424,41 @@
/* With actions */
.status--actions {
/* Add 25% extra padding to the bottom to visually balance things out. */
- padding-bottom: calc(1.6rem + calc(1.6rem / 2));
padding-bottom: calc(var(--padding) + calc(var(--padding) / 2));
}
.status--actions .status__actions {
display: block;
- padding-top: calc(1.6rem / 4);
padding-top: calc(var(--gutter) / 4);
text-align: center;
}
.status--actions:not(.status--small) .status__actions {
- padding-top: calc(1.6rem * 2);
padding-top: calc(var(--gutter) * 2);
}
- .status a {
+ .status:not(.status--whisper) a:not([class]),
+ /* Fix for the broken way we're implementing the popups in Cloud with Unpoly. */
+ .popup:not(.status--success):not(.status--error) .status:not(.status--whisper) a:not([class]) {
color: rgb(255,255,255);
}
.popup:not(.status--success):not(.status--error) a:not([class]) {
- color: rgb(0,115,165);
color: rgb(var(--popup-status-link));
}
.status--error {
- background: rgb(155,18,0) !important;
background: rgb(var(--cherry)) !important;
}
.status--success {
- background: rgb(0,103,41) !important;
background: rgb(var(--frog)) !important;
}
+ .status--whisper {
+ background: rgb(var(--whisper)) !important;
+ color: currentColor;
+ }
+ .form .status--whisper {
+ background: var(--whisper-form) !important;
+ }
@@ -2751,7 +2467,6 @@
}
.popup__overlay {
align-items: center;
- background: rgba(23,24,24, 0.9);
background: rgba(var(--coal), 0.9);
bottom: 0;
display: flex;
@@ -2761,21 +2476,16 @@
position: fixed;
right: 0;
top: 0;
- z-index: 100;
+ z-index: 700;
}
.popup {
- background: rgb(255,255,255);
background: rgb(var(--popup-background));
- border-radius: 0.3rem;
border-radius: var(--block-radius);
- box-shadow: 0px 20px 20px 4px rgba(11,11,11,0.9);
box-shadow: 0px 20px 20px 4px rgba(var(--onyx),0.9);
color: rgb(255,255,255);
display: inline-flex;
flex-direction: column;
- margin: 1.6rem 0;
margin: var(--gutter) 0;
- padding: 1.6rem;
padding: var(--padding);
position: relative;
width: 60rem;
@@ -2786,7 +2496,6 @@
/* Popup that isn't a success or error, on light theme by default or with .theme--light only, all other instances of this will be white. */
.popup:not(.status--success):not(.status--error) {
- color: rgb(50,68,74);
color: rgb(var(--popup-page-text));
}
.popup .status__title,
@@ -2802,14 +2511,11 @@
.status--tiny {
display: inline-block;
- padding: calc(1.6rem / 2);
padding: calc(var(--padding) / 2);
- padding-right: 1.6rem;
padding-right: var(--padding);
}
.status--tiny .status__icon {
display: block;
- left: 1.6rem;
left: var(--padding);
position: absolute;
/* This is to shrink the icon if we have short status text that is only
@@ -2819,11 +2525,9 @@
width: 2rem;
height: 2rem;
- top: calc(1.6rem/ 1.8);
top: calc(var(--padding)/ 1.8);
}
.status--tiny .status__icon ~ .status__content {
- margin-left: calc(1.6rem + 2rem);
margin-left: calc(var(--padding) + 2rem);
display: flex;
flex-wrap: wrap;
@@ -2867,18 +2571,15 @@
}
.notifications .button.notification__button:first-child {
- margin-left: calc((1.6rem/ 2) - 2px) !important;
margin-left: calc((var(--gutter)/ 2) - 2px) !important;
margin-right: 0 !important;
}
.notifications .button.notification__button[aria-expanded='true'] {
- background: rgb(255,255,255) !important;
background: var(--notifictions-bk) !important;
position: relative;
z-index: 1;
}
.button.notification__button[aria-expanded='true']:after {
- background: rgb(255,255,255);
background: var(--notifictions-bk);
bottom: -8px;
content: '';
@@ -2894,7 +2595,6 @@
width: 2.4rem;
}
.button.notification__button[aria-expanded='true'] .icon {
- fill: rgb(5,152,214);
fill: rgb(var(--smurf));
}
.notification__button use {
@@ -2907,19 +2607,14 @@
display: block;
}
.notification__button--new use[href$=icon-bell--new] {
- fill: rgb(240,152,27);
fill: rgb(var(--tango));
}
.notifications--popup .notifications__panel {
- background: rgb(255,255,255);
background: var(--notifictions-bk);
- box-shadow: 0 1px 6px 0px rgba(11,11,11,0.9);
box-shadow: 0 1px 6px 0px rgba(var(--onyx),0.9);
- color: rgb(50,68,74);
color: rgb(var(--notifictions-text));
display: none;
- padding: 1.6rem;
padding: var(--padding);
position: absolute;
right: 0;
@@ -2931,23 +2626,17 @@
display: block;
}
.notification__list {
- padding-bottom: 1.6rem;
padding-bottom: var(--padding);
- padding-top: 1.6rem;
padding-top: var(--padding);
}
.notification__list-inner {
display: flex;
flex-direction: column;
- gap: 1.6rem;
gap: var(--padding);
}
.notification {
- background: rgba(218,224,226, 0.4);
background: var(--notifiction-bk);
- border-radius: 0.3rem;
border-radius: var(--block-radius);
- padding: 1.6rem;
padding: var(--padding);
position: relative;
}
@@ -2966,9 +2655,7 @@
}
.notification-delete {
position: absolute;
- right: calc(1.6rem / 2);
right: calc(var(--padding) / 2);
- bottom: calc(1.6rem / 2);
bottom: calc(var(--padding) / 2);
}
@@ -2977,15 +2664,12 @@
}
.notification--time {
- fill: rgb(5,152,214);
fill: rgb(var(--smurf));
}
.notification--info {
- fill: rgb(0,103,41);
fill: rgb(var(--frog));
}
.notification--alert {
- fill: rgb(155,18,0);
fill: rgb(var(--cherry));
}
@@ -3015,9 +2699,7 @@
}
.page--sticky-header .notifications--popup .notification__list {
flex: 1 1 auto;
- margin-bottom: 1.6rem;
margin-bottom: var(--padding);
- margin-top: 1.6rem;
margin-top: var(--padding);
padding-top: 0;
padding-bottom: 0;
@@ -3026,63 +2708,119 @@
-/* Post-it */
+/* Shoutbox. */
- :root {
- --post-it-bk: rgb(var(--post-it));
+ .shoutbox {
+ --shoutbox-bk: rgb(var(--concrete));
+ --shoutbox-bk-fm: rgb(255,255,255);
}
- .theme--light {
- --post-it-bk: rgb(var(--post-it));
+ .theme--light .shoutbox {
+ --shoutbox-bk: rgb(var(--concrete));
+ --shoutbox-bk-fm: rgb(255,255,255);
}
@media (prefers-color-scheme: dark) {
- :root {
- --post-it-bk: rgba(var(--post-it),0.4);
+ .shoutbox {
+ --shoutbox-bk: rgba(var(--concrete), 0.1);
+ --shoutbox-bk-fm: rgba(var(--concrete), 0.1);
}
}
- .theme--dark {
- --post-it-bk: rgba(var(--post-it),0.4);
+ .theme--dark .shoutbox {
+ --shoutbox-bk: rgba(var(--concrete), 0.1);
+ --shoutbox-bk-fm: rgba(var(--concrete), 0.1);
}
-
-
- .post-it {
- background: rgb(244,244,52);
- background: var(--post-it-bk);
- border-radius: 0.3rem;
- border-radius: var(--block-radius);
- padding: 1.6rem;
- padding: var(--padding);
+ /* If JS is active but before the component has been fully inited we need to hide it. */
+ .js .shoutbox:not(.js__shoutbox) {
+ display: none;
}
- .post-it + .post-it {
- margin-top: 1.6rem;
- margin-top: var(--gutter);
+ /* This is applied if the b-cookie attribute is missing. */
+ .js .shoutbox.shoutbox--disabled,
+ /* This will also be applied if there's no JS. */
+ .shoutbox {
+ display: block;
}
- .post-it-table :not(.icon)[aria-hidden=true] {
- display: none;
+ .js__shoutbox {
+ text-align: end;
}
- .post-it__title {
- margin-top: 0;
+ .js__shoutbox .shoutbox__outer {
+ text-align: start;
+ }
+
+ /* We can use grid to animate from an unspecific height down to 0. */
+ .shoutbox__outer {
+ display: grid;
+ grid-template-rows: 1fr;
+ --transision-duration: 0;
+ transition: grid-template-rows var(--transision-duration) 0ms ease-in-out;
+ }
+ /* The end state of the closing animation. */
+ .js__shoutbox.shoutbox--closing .shoutbox__outer {
+ grid-template-rows: 0fr;
+ }
+
+ /* Actual styling for the shoutbox, as needed for inited custom elements. */
+ .shoutbox:not(.js__shoutbox),
+ .shoutbox .shoutbox__inner {
+ background: var(--shoutbox-bk);
+ border-radius: var(--block-radius);
+ color: currentColor;
+ margin-bottom: var(--gutter);
+ overflow: hidden;
+ padding: var(--padding);
+ position: relative;
+ /* We need to remove the padding otherwise this prevents the shoutbox from closing completely. */
+ transition: padding 100ms ease-in-out;
}
- .post-it__content--monospaced {
- font-family: 'Courier New', Courier, monospace;
+ .form .shoutbox:not(.js__shoutbox),
+ .form .shoutbox .shoutbox__inner {
+ background: var(--shoutbox-bk-fm);
+ /* color: rgb(var(--basalt)); */
}
- .post-it__footer {
- text-align: center;
+ .shoutbox:not(.js__shoutbox).shoutbox--loud,
+ .shoutbox.shoutbox--loud .shoutbox__inner {
+ background: rgb(var(--tango));
+ color: rgb(var(--basalt));
}
- .post-it__footer:before {
- background: rgba(50,68,74,0.7);
- background: var(--form-footer-border);
- border-radius: 1px;
- content: '';
- display: block;
- height: 2px;
- margin-bottom: calc(1.6rem + 2px);
- margin-bottom: calc(var(--gutter) + 2px);
- margin-top: calc(1.6rem / 2);
- margin-top: calc(var(--gutter) / 2);
- opacity: 0.2;
+
+ /* Set the vertical padding to 0 when animating closed otherwise we'll get the padding as the final height of the element. */
+ .js__shoutbox.shoutbox--closing .shoutbox__inner {
+ padding: 0 var(--padding);
+ }
+
+ /* Set the padding on the right side a little larger so we don't crash into the close button. */
+ .shoutbox .shoutbox__inner {
+ padding-right: calc(var(--padding) * 3);
}
+ .shoutbox:not(.js__shoutbox):last-child,
+ .shoutbox .shoutbox__inner:last-child {
+ margin-bottom: 0;
+ }
+
+ .button.shoutbox__close {
+ margin: 0;
+ right: 0;
+ position: absolute;
+ top: 0;
+ }
+
+ .button.shoutbox__undo {
+ display: none;
+ margin-top: -0.8rem;
+ opacity: 0;
+ transition: opacity 1000ms 10ms ease-in-out;
+ }
+ .button.shoutbox__undo.shoutbox__undo--show1 {
+ display: inline-block;
+ }
+ .button.shoutbox__undo.shoutbox__undo--show2 {
+ opacity: 1;
+ }
+
+ .shoutbox--loud a:not([class]) {
+ color: rgb(var(--basalt));
+ }
+
/* Chart JS */
@@ -3127,15 +2865,12 @@
}
.percentage-bar {
- border: solid 1px rgba(50,68,74, 0.5);
border: solid 1px var(--chart-border);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
height: 8px;
position: relative;
}
.percentage-bar__progress {
- background: rgb(240,152,27);
background: rgb(var(--tango));
height: 100%;
left: 0;
@@ -3147,28 +2882,30 @@
/* Buttons and Links */
:root {
- /* Smurf + 32% Midnight overlay. */
- --link-color: 0,115,165;
+ --link-color: var(--smurf);
--link-color-focus: 255,255,255;
+ --card-callout-grey-link: rgb(255,255,255);
}
.theme--light {
- --link-color: 0,115,165;
+ --link-color: var(--smurf);
--link-color-focus: 255,255,255;
+ --card-callout-grey-link: rgb(255,255,255);
}
@media (prefers-color-scheme: dark) {
:root {
- --link-color: 8,161,226;
+ --link-color: 5,152,214;
--link-color-focus: var(--onyx);
+ --card-callout-grey-link: rgb(var(--basalt));
}
}
.theme--dark {
- --link-color: 8,161,226;
+ --link-color: 5,152,214;
--link-color-focus: var(--onyx);
+ --card-callout-grey-link: rgb(var(--basalt));
}
/* Make life easier an only style links that have no assigned class. */
a:not([class]) {
- color: rgb(0,115,165);
color: rgb(var(--link-color));
text-decoration: underline;
outline: 0;
@@ -3180,31 +2917,66 @@
}
a:focus:not([class]),
a:focus-visible:not([class]) {
- background: rgb(0,115,165);
background: rgb(var(--link-color));
border-radius: 2px;
- color: rgb(255,255,255);
color: rgb(var(--link-color-focus));
text-decoration: none;
}
a:focus:not(:focus-visible):not([class]) {
background: none;
border-radius: 0;
- color: rgb(0,115,165);
color: rgb(var(--link-color));
text-decoration: underline;
}
.page__sidebar a:not([class]) {
- color: rgb(5,152,214);
color: rgb(var(--smurf));
}
.page__sidebar a:focus:not([class]) {
- color: rgb(0,44,62);
color: rgb(var(--midnight));
}
+ /* Callout card links. */
+ .card--callout--tango a:not([class]) {
+ color: rgb(var(--coal));
+ }
+ .card--callout--tango a:focus:not([class]),
+ .card--callout--tango a:focus-visible:not([class]) {
+ background: rgb(var(--basalt));
+ color: rgb(255,255,255);
+ }
+ .card--callout--tango a:focus:not(:focus-visible):not([class]) {
+ background: none;
+ color: rgb(var(--coal));
+ }
+
+ .card--callout--blue a:not([class]) {
+ color: rgb(255,255,255);
+ }
+ .card--callout--blue a:focus:not([class]),
+ .card--callout--blue a:focus-visible:not([class]) {
+ background: rgb(255,255,255);
+ color: rgb(var(--smurf));
+ }
+ .card--callout--blue a:focus:not(:focus-visible):not([class]) {
+ background: none;
+ color: rgb(255,255,255);
+ }
+
+ .card--callout--grey a:not([class]) {
+ color: currentColor;
+ }
+ .card--callout--grey a:focus:not([class]),
+ .card--callout--grey a:focus-visible:not([class]) {
+ background: rgb(var(--page-text));
+ color: var(--card-callout-grey-link);
+ }
+ .card--callout--grey a:focus:not(:focus-visible):not([class]) {
+ background: none;
+ color: currentColor;
+ }
+
/* Display external icon on links that have no class set whilst also having a target="_blank". */
a[target='_blank']:not([class]):after,
.button[target='_blank']:not(.button--small):after,
@@ -3278,7 +3050,6 @@
/* Corner radiuses. */
.button:not(.button--small),
.button--small .button__text {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
}
@@ -3300,7 +3071,7 @@
padding: 0.8rem 0.1rem;
}
/* Buttons that open in new tabs or windows. */
- .button:not(.button--small):not(.button--text)[target="_blank"] {
+ .button:not(.button--small):not(.button--text)[target="_blank"][target="_blank"] {
/* Adjust the right padding by roughly the width of the arrow. */
padding-right: 1.2rem;
}
@@ -3327,12 +3098,10 @@
/* Horizontal margins. */
.button,
.button__container .button {
- margin: 0 calc((1.6rem /2) - 2px);
margin: 0 calc((var(--gutter) /2) - 2px);
}
.button--small,
.button__container .button--small {
- margin: 0 calc((1.6rem /4) - 2px);
margin: 0 calc((var(--gutter) /4) - 2px);
}
@@ -3353,23 +3122,20 @@
/* Solid blue buttons. */
.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),
.button--small:not(.button--ghost) .button__text {
- background: rgb(0,76,108);
background: var(--button-bk);
- box-shadow: 0 1px 0 0 rgba(50,68,74, 0.3);
box-shadow: 0 1px 0 0 rgba(var(--button-shadow), 0.3);
color: rgb(255,255,255);
}
.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,
.button--small:not(.button--ghost):hover .button__text {
- background: rgb(0,86,123);
background: var(--button-bk-hover);
box-shadow: none;
}
/* Solid white buttons: most status blocks, table header. */
/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
- .status .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),
- .status .button--small:not(.button--ghost) .button__text,
+ .status:not(.status--whisper) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),
+ .status:not(.status--whisper) .button--small:not(.button--ghost) .button__text,
/* TODO: Table header buttons - once buttons--light added to cloud we can remove these two lines. */
.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),
.table th .button--small:not(.button--ghost) .button__text,
@@ -3377,12 +3143,11 @@
.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),
.buttons--light .button--small:not(.button--ghost) .button__text {
background: rgb(255,255,255);
- color: rgb(0,76,108);
color: var(--button-bk);
}
/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
- .status .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,
- .status .button--small:not(.button--ghost):hover .button__text,
+ .status:not(.status--whisper) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,
+ .status:not(.status--whisper) .button--small:not(.button--ghost):hover .button__text,
/* TODO: Table header buttons - once buttons--light added to cloud we can remove these two lines. */
.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,
.table th .button--small:not(.button--ghost):hover .button__text,
@@ -3394,13 +3159,10 @@
/* Solid blue buttons on light theme popup. */
.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear) {
- background: rgb(0,76,108);
background: var(--popup-button-bk);
- color: rgb(255,255,255);
color: var(--popup-button-text);
}
.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover {
- background: rgb(0,86,123);
background: var(--popup-button-bk-hover);
box-shadow: none;
}
@@ -3408,14 +3170,11 @@
/* Ghost buttons, all sizes, all themes. */
.button--ghost:not(.button--small),
.button--ghost.button--small .button__text {
- box-shadow: 0 0 0 1px rgb(0,76,108) inset;
box-shadow: 0 0 0 1px var(--button-bk) inset;
- color: rgb(0,76,108);
color: var(--button-ghost-text);
}
.button--ghost:not(.button--small):hover,
.button--ghost.button--small:hover .button__text {
- box-shadow: 0 0 0 2px rgb(0,86,123) inset;
box-shadow: 0 0 0 2px var(--button-bk-hover) inset;
}
@@ -3423,8 +3182,8 @@
.buttons--light .button--ghost:not(.button--small),
.buttons--light .button--ghost.button--small .button__text,
/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
- .status .button--ghost:not(.button--small),
- .status .button--ghost.button--small .button__text,
+ .status:not(.status--whisper) .button--ghost:not(.button--small),
+ .status:not(.status--whisper) .button--ghost.button--small .button__text,
/* Table header buttons - once buttons--light added to cloud we can remove these two lines. */
.table th .button--ghost:not(.button--small),
.table th .button--ghost.button--small .button__text {
@@ -3434,8 +3193,8 @@
.buttons--light .button--ghost:not(.button--small):hover,
.buttons--light .button--ghost.button--small:hover .button__text,
/* TODO: Status buttons - once buttons--light added to cloud we can remove these two lines. */
- .status .button--ghost:not(.button--small):hover,
- .status .button--ghost.button--small:hover .button__text,
+ .status:not(.status--whisper) .button--ghost:not(.button--small):hover,
+ .status:not(.status--whisper) .button--ghost.button--small:hover .button__text,
/* Table header buttons - once buttons--light added to cloud we can remove these two lines. */
.table th .button--ghost:not(.button--small):hover,
.table th .button--ghost.button--small:hover .button__text {
@@ -3444,26 +3203,31 @@
/* Ghost buttons on light theme popup. */
.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear) {
- box-shadow: 0 0 0 1px rgb(0,76,108) inset;
box-shadow: 0 0 0 1px var(--popup-button-bk) inset;
- color: rgb(0,76,108);
color: var(--popup-button-bk);
}
.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear):hover {
- box-shadow: 0 0 0 2px rgb(0,76,108) inset;
box-shadow: 0 0 0 2px var(--popup-button-bk) inset;
}
/* Links with button spacing. */
- .button--text:not(.button--small) {
- color: rgb(0,115,165);
+ .button--text:not(.button--small),
+ .button--plain:not(.button--small) {
color: rgb(var(--link-color));
text-decoration: underline;
}
- .button--text:not(.button--small):hover {
+ .button--text:not(.button--small):hover,
+ .button--plain:not(.button--small):hover {
text-decoration: none;
}
+ /* */
+ .button--plain {
+ display: inline;
+ /* padding: 0.2rem 0.1rem; */
+ padding: 0 0.1rem;
+ }
+
/* Clear buttons. */
.button--clear {
color: currentColor;
@@ -3487,11 +3251,8 @@
/* ALL FOCUS STATES */
- .button:not(.button--small):focus,
- .button:not(.button--small):focus-visible,
.button--small:focus .button__text,
.button--small:focus-visible .button__text {
- box-shadow: 0 0 0 4px rgb(5,152,214) !important;
box-shadow: 0 0 0 4px rgb(var(--smurf)) !important;
}
.button:not(.button--small):not(.button--ghost):focus:not(:focus-visible),
@@ -3500,27 +3261,80 @@
}
.button--ghost:not(.button--small):focus:not(:focus-visible),
.button--small.button--ghost:focus:not(:focus-visible) .button__text {
- box-shadow: 0 0 0 1px rgb(0,76,108) inset !important;
box-shadow: 0 0 0 1px var(--popup-button-bk) inset !important;
}
+ .button--plain:focus,
+ .button--plain:focus-visible {
+ background: rgb(var(--link-color));
+ border-radius: 2px;
+ color: rgb(var(--link-color-focus));
+ text-decoration: none;
+ }
+
+
+
+ .button--plain {
+ background: none !important;
+ box-shadow: none !important;
+ color: rgb(var(--link-color)) !important;
+ display: inline;
+ padding: 0 0.1rem !important;
+ text-decoration: underline;
+ }
+ .button--plain:hover {
+ opacity: .9;
+ text-decoration: none;
+ }
+ .button--plain:focus,
+ .button.button--plain:focus-visible {
+ background: rgb(var(--link-color)) !important;
+ border-radius: 2px;
+ box-shadow: none !important;
+ color: rgb(var(--link-color-focus)) !important;
+ text-decoration: none;
+ }
+ .buttons--light .button--plain {
+ color: rgb(255,255,255) !important;
+ }
+ .buttons--light .button--plain:focus,
+ .buttons--light .button.button--plain:focus-visible {
+ background: rgb(255,255,255) !important;
+ color: rgb(var(--coal)) !important;
+ }
+/* Toggle Button */
+
+ /* This is a fallback to fix the flash of the web component that happens before the JS has time to run. We create a simple animation that will run after a delay of 5 soconds. If JS loads then the animation is sidestepped because the component with its JS added class is set to full visibility. */
+ @keyframes view {
+ 0% { visibility: hidden; }
+ 100% { visibility: visible; }
+ }
+ /* Set the not yet setup WC to not display. */
+ blinky-toggle-button {
+ visibility: hidden;
+ }
+ /* After 5 seconds run the animation to make the WC visible, only if the WC contains the fallback `a` tag because buttons do nothing without JS to run them. */
+ blinky-toggle-button:has(a) {
+ /* duration, delay, fill-mode, iteration, name. */
+ animation: 0s 5s forwards 1 view;
+ }
+ /* Make the WC visible once it's been setup in JS. */
+ blinky-toggle-button.js__button--toggle {
+ visibility: visible;
+ }
- /* Because a toggle will only work with JavaScript we hide the toggle until it's been inited. */
- .button--toggle:not(.js__button--toggle) {
+ .js__button--toggle[toggled='1'] .toggle__0,
+ .js__button--toggle[toggled='0'] .toggle__1 {
display: none;
}
- .button--toggle .toggle__2,
- .button--toggle[data-toggled] .toggle__1 {
- display: none;
- }
- .button--toggle .toggle__1,
- .button--toggle[data-toggled] .toggle__2 {
- display: block;
- }
- .toggle__text {
+ .js__button--toggle .toggle__text {
+ display: inline-block;
margin-left: 0.4rem;
}
+
+
+
/* Menu */
:root {
@@ -3561,7 +3375,6 @@
.table .menu.menu--vertical.menu--dropdown {
display: inline-flex;
- margin: 0 calc((1.6rem/ 2) - 2px);
margin: 0 calc((var(--gutter)/ 2) - 2px);
}
.table .menu.menu--vertical.menu--dropdown:first-child {
@@ -3574,9 +3387,11 @@
.menu__title {
- padding: 0 1.6rem;
padding: 0 var(--padding);
}
+ .menu__title small {
+ font-weight: normal;
+ }
@@ -3614,7 +3429,6 @@
}
/* Second level, this is the UL that needs to be stacked under the main item. */
.menu--horizontal > .menu__group > .menu__item > .menu__group {
- box-shadow: 0px 1px 2px 0px rgba(11,11,11,0.5);
box-shadow: 0px 1px 2px 0px rgba(var(--menu-shadow),0.5);
position: absolute;
z-index: 5;
@@ -3631,9 +3445,7 @@
z-index: 3;
/* Apply the radius to the container to properly mask the shadow. */
- border-radius: 0 0 0.3rem 0.3rem;
border-radius: 0 0 var(--button-radius) var(--button-radius);
- box-shadow: 0px 1px 2px 0px rgba(11,11,11,0.5);
box-shadow: 0px 1px 2px 0px rgba(var(--menu-shadow),0.5);
}
.menu--vertical.menu--toggle-right .menu__main-toggle + .menu__group {
@@ -3668,46 +3480,35 @@
/* This is either an A or an H tag. */
.menu__content {
- background:
- linear-gradient(
- rgba(5,152,214, 0.3),
- rgba(5,152,214, 0.3)),
- rgb(0,44,62);
background:
linear-gradient(
rgba(var(--menu), 0.3),
rgba(var(--menu), 0.3)),
rgb(var(--midnight));
- color: rgb(255,255,255);
color: rgb(var(--menu-text));
display: flex;
- padding: 0.8rem 2rem;
+ /* padding: 0.8rem 2rem; */
+ padding: 0.8rem var(--padding);
text-decoration: none;
}
/* Second level. */
.menu__group .menu__group .menu__content {
background:
linear-gradient(
- rgba(5,152,214, 0.2),
- rgba(5,152,214, 0.2)),
- rgb(0,44,62);
- background:
- linear-gradient(
- rgba(var(--menu), 0.2),
- rgba(var(--menu), 0.2)),
+ /* rgba(var(--menu), 0.2), */
+ /* rgba(var(--menu), 0.2)), */
+ rgba(var(--menu), 0.25),
+ rgba(var(--menu), 0.25)),
rgb(var(--midnight));
}
/* Third level. */
.menu__group .menu__group .menu__group .menu__content {
background:
linear-gradient(
- rgba(5,152,214, 0.1),
- rgba(5,152,214, 0.1)),
- rgb(0,44,62);
- background:
- linear-gradient(
- rgba(var(--menu), 0.1),
- rgba(var(--menu), 0.1)),
+ /* rgba(var(--menu), 0.1), */
+ /* rgba(var(--menu), 0.1)), */
+ rgba(var(--menu), 0.2),
+ rgba(var(--menu), 0.2)),
rgb(var(--midnight));
}
.menu__content:not(a):not(button) {
@@ -3720,18 +3521,15 @@
/* Vertical menu radius. */
.menu--vertical > .menu__group > li:first-child {
- border-radius: 0.3rem 0.3rem 0 0;
border-radius: var(--button-radius) var(--button-radius) 0 0;
overflow: hidden;
}
.menu--vertical > .menu__group > li:last-child {
- border-radius: 0 0 0.3rem 0.3rem;
border-radius: 0 0 var(--button-radius) var(--button-radius);
overflow: hidden;
}
/* If this is the only item. */
.menu--vertical > .menu__group > li:first-child:last-child {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
}
.menu--vertical:not(.menu--toggle-right) > [aria-expanded=true] + .menu__group {
@@ -3752,21 +3550,17 @@
we add the radius to the first and last menu items, and the
submenus using the vertical styling as above. */
.menu--horizontal > .menu__group > .menu__item:first-child > .menu__content {
- border-radius: 0.3rem 0 0 0.3rem;
border-radius: var(--button-radius) 0 0 var(--button-radius);
}
.menu--horizontal > .menu__group > .menu__item:last-child > .menu__content {
- border-radius: 0 0.3rem 0.3rem 0;
border-radius: 0 var(--button-radius) var(--button-radius) 0;
}
/* Add radius to top corner of horizontal submenu when opened. */
.menu--horizontal > .menu__group > .menu__item .menu__group {
- border-radius: 0 0.3rem 0.3rem 0.3rem;
border-radius: 0 var(--button-radius) var(--button-radius) var(--button-radius);
overflow: hidden;
}
.menu--horizontal > .menu__group > .menu__item .menu__group--boundary + .menu__group {
- border-radius: 0.3rem 0 0.3rem 0.3rem;
border-radius: var(--button-radius) 0 var(--button-radius) var(--button-radius);
}
/* Remove radius on corners for entire menu toggles. */
@@ -3781,32 +3575,41 @@
.menu .menu__group .menu__group .menu__content {
/* White with a 35% smurf overlay. */
- color: rgba(166,218,241,1);
+ /* color: rgba(166,218,241,1); */
+ /* opacity: 0.8; */
/* Because the text is smaller we increase the vertical padding a little to keep the menu items the same minimum height as the top levels. */
- font-size: 1.4rem;
- padding: 0.9rem 2rem 1rem 2rem;
+ /* font-size: 1.4rem; */
+ /* padding: 0.9rem 2rem 1rem 2rem; */
}
.menu .menu__group .menu__group .menu__content > .icon:first-child {
flex: 0 0 auto;
}
/* Third level items. */
.menu .menu__group .menu__group .menu__group .menu__content {
- color: rgba(166,218,241,0.75);
+ /* color: rgba(166,218,241,0.75); */
+ /* opacity: 0.7; */
}
/* Indents. */
+ .menu {
+ --indent: 1.2rem;
+ }
.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content {
- padding-left: 3.2rem;
+ /* padding-left: 3.2rem; */
+ /* padding-left: calc(var(--padding) * 2); */
+ padding-left: calc(var(--padding) + var(--indent));
}
.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content {
- padding-left: 4.4rem;
+ /* padding-left: 4.4rem; */
+ /* padding-left: calc(var(--padding) * 3); */
+ padding-left: calc(var(--padding) + (var(--indent) * 2));
}
.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content > .icon:first-child {
- margin-left: 0.4rem;
+ /* margin-left: 0.4rem; */
}
.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content > .icon:first-child {
- margin-left: 1.6rem;
+ /* margin-left: 1.6rem; */
}
@@ -3815,24 +3618,17 @@
.menu form.menu__content:hover,
.menu span.menu__content:hover,
.menu a.menu__content:hover {
- background:
- linear-gradient(
- rgba(5,152,214, 0.4),
- rgba(5,152,214, 0.4)),
- rgb(0,44,62) !important;
background:
linear-gradient(
rgba(var(--menu), 0.4),
rgba(var(--menu), 0.4)),
rgb(var(--midnight)) !important;
- color: rgb(255,255,255) !important;
color: rgb(var(--menu-text)) !important;
}
.menu__form-button:focus,
.menu a.menu__content:focus,
.menu__form-button:focus-visible,
.menu a.menu__content:focus-visible {
- box-shadow: inset 0 0 0 4px rgb(0,115,165);
box-shadow: inset 0 0 0 4px rgb(var(--link-color));
outline: 0;
}
@@ -3842,52 +3638,40 @@
}
.menu__form-button:focus-visible,
.menu a.menu__content:focus-visible {
- box-shadow: inset 0 0 0 4px rgb(0,115,165);
box-shadow: inset 0 0 0 4px rgb(var(--link-color));
outline: 0;
}
/* Active page link. */
.menu [aria-current] {
- background: rgb(240,152,27) !important;
background: rgb(var(--tango)) !important;
- color: rgb(0,31,43) !important;
color: rgb(var(--menu-current-text)) !important;
}
.menu .menu__content[aria-current]:hover {
- background:
- linear-gradient(
- rgba(255,255,255, 0.2),
- rgba(255,255,255, 0.2)),
- rgb(240,152,27) !important;
background:
linear-gradient(
rgba(255,255,255, 0.2),
rgba(255,255,255, 0.2)),
rgb(var(--tango)) !important;
- color: rgb(0,31,43) !important;
color: rgb(var(--menu-current-text)) !important;
}
.menu[data-menu-type="split"] [aria-current] + .button.menu__split-button {
- color: rgb(0,31,43);
color: rgb(var(--menu-current-text));
}
.menu__current-parent {
- box-shadow: inset 4px 0px 0px 0px rgb(240,152,27);
box-shadow: inset 4px 0px 0px 0px rgb(var(--tango));
}
.menu a.menu__content.menu__current-parent:focus,
.menu a.menu__content.menu__current-parent:focus-visible {
- box-shadow: inset 4px 0px 0px 0px rgb(240,152,27), inset 0 0 0 4px rgb(0,115,165);
box-shadow: inset 4px 0px 0px 0px rgb(var(--tango)), inset 0 0 0 4px rgb(var(--link-color));
}
.menu a.menu__content.menu__current-parent:not(:focus-visible) {
- box-shadow: inset 4px 0px 0px 0px rgb(240,152,27);
box-shadow: inset 4px 0px 0px 0px rgb(var(--tango));
}
.menu__content .icon {
- margin: 0.2rem 0.8rem 0 -0.8rem;
+ /* margin: 0.2rem 0.8rem 0 -0.8rem; */
+ margin: 0.2rem 0.8rem 0 0;
}
.menu__content .icon--nav {
flex: 0 0 1.6rem;
@@ -3903,12 +3687,15 @@
}
.menu .icon.icon--av {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
height: 3.2rem;
margin-bottom: -0.8rem;
margin-left: -1.6rem;
margin-top: -0.8rem;
+
+ /* This fixes an issue where the default CSS for images is forcing a menu button to wrap on Safari. */
+ max-width: 3.2rem;
+
width: 3.2rem;
}
.menu.menu--vertical .icon.icon--av {
@@ -3951,11 +3738,6 @@
white-space: nowrap;
}
.menu .menu__main-toggle[aria-expanded="true"] {
- background:
- linear-gradient(
- rgba(5,152,214, 0.3),
- rgba(5,152,214, 0.3)),
- rgb(0,44,62);
background:
linear-gradient(
rgba(var(--menu), 0.3),
@@ -3963,11 +3745,6 @@
rgb(var(--midnight));
}
.menu .menu__main-toggle[aria-expanded="true"]:hover {
- background:
- linear-gradient(
- rgba(5,152,214, 0.4),
- rgba(5,152,214, 0.4)),
- rgb(0,44,62);
background:
linear-gradient(
rgba(var(--menu), 0.4),
@@ -4001,15 +3778,12 @@
/* Adjust the radius on the menus when the main toggle is open. */
.menu--horizontal .menu__main-toggle[aria-expanded="true"] {
- border-radius: 0.3rem 0 0 0.3rem;
border-radius: var(--button-radius) 0 0 var(--button-radius);
}
.menu--horizontal.menu--toggle-right .menu__main-toggle[aria-expanded="true"] {
- border-radius: 0 0.3rem 0.3rem 0;
border-radius: 0 var(--button-radius) var(--button-radius) 0;
}
.menu--vertical .menu__main-toggle[aria-expanded="true"] {
- border-radius: 0.3rem 0.3rem 0 0;
border-radius: var(--button-radius) var(--button-radius) 0 0;
}
.menu--vertical:not(.menu--toggle-right):not(.menu--jump-up) .menu__main-toggle[aria-expanded="true"] + .menu__group > .menu__item:first-child {
@@ -4019,12 +3793,11 @@
border-top-right-radius: 0;
}
.menu--jump-up .menu__main-toggle[aria-expanded="true"] {
- border-radius: 0 0 0.3rem 0.3rem;
border-radius: 0 0 var(--button-radius) var(--button-radius);
}
.table .menu .menu__main-toggle {
- padding: 0.2rem 1.4rem;
+ padding: 0.2rem 1.4rem !important;
}
.table .menu .menu__main-toggle .button__text {
margin-left: 1.2rem;
@@ -4039,13 +3812,13 @@
.menu__form-button {
background: transparent;
border: none;
- color: rgb(255,255,255);
color: rgb(var(--menu-text));
display: flex;
font-family: inherit;
font-size: inherit;
line-height: inherit;
- padding: 0.8rem 2rem;
+ /* padding: 0.8rem 2rem; */
+ padding: 0.8rem var(--padding);
text-align: left;
width: 100%;
}
@@ -4060,7 +3833,6 @@
padding-right: 4.8rem;
}
.menu[data-menu-type=split] .menu__item > .menu__split-button {
- background: rgba(5,152,214, 0.2);
background: rgba(var(--smurf), 0.2);
margin: 0;
position: absolute;
@@ -4068,12 +3840,18 @@
right: 0.4rem;
padding: 0.4rem 1.6rem;
}
+ .menu[data-menu-type=split] .menu__item > .menu__split-button:not(:hover) {
+ background: rgba(255,255,255,0.075) !important;
+ /* background: none !important; */
+ }
+ .menu[data-menu-type=split] .menu__item > .menu__split-button:hover {
+ background: rgba(255,255,255,0.125) !important;
+ }
.menu--jump-up[data-menu-type=split] .menu__item > .menu__split-button {
bottom: 0.4rem;
top: auto;
}
.menu[data-menu-type=split] .menu__item > .menu__split-button:hover {
- background: rgba(5,152,214, 0.5);
background: rgba(var(--smurf), 0.5);
}
.menu[data-menu-type=split] .menu__item > .menu__split-button .icon {
@@ -4098,7 +3876,6 @@
now read out text added via CSS, instead create an arrow using the border trick. */
.breadcrumb li + li:before {
border: 0.4rem solid transparent;
- border-left: 0.5rem solid rgba(50,68,74, 0.85);
border-left: 0.5rem solid rgba(var(--page-text), 0.85);
content: '';
display: inline-block;
@@ -4139,20 +3916,15 @@
.form {
- background: rgb(218,224,226);
background: var(--form-background);
- border-radius: 0.3rem;
border-radius: var(--block-radius);
- padding: 1.6rem;
padding: var(--padding);
/* Add 25% extra padding to the bottom to visually balance things out. */
- padding-bottom: calc(1.6rem + calc(1.6rem / 2));
padding-bottom: calc(var(--padding) + calc(var(--padding) / 2));
}
.form--horizontal--old {
align-items: flex-end;
display: flex;
- padding-bottom: 1.6rem;
padding-bottom: var(--padding);
}
@@ -4160,13 +3932,11 @@
position: relative;
}
.form__row ~ .form__row {
- margin: 1.6rem 0 0 0;
margin: var(--gutter) 0 0 0;
}
.form--horizontal--old .form__row {
flex: 1 1 auto;
flex-flow: row wrap;
- margin: 0 calc(1.6rem / 2);
margin: 0 calc(var(--gutter) / 2);
}
@@ -4175,13 +3945,11 @@
}
/* .form:not(.form--horizontal--old) .form__row--footer:before { */
.form__row--footer:before {
- background: rgba(50,68,74,0.7);
background: var(--form-footer-border);
border-radius: 1px;
content: '';
display: block;
height: 2px;
- margin-bottom: calc(1.6rem + 2px);
margin-bottom: calc(var(--gutter) + 2px);
opacity: 0.2;
}
@@ -4209,7 +3977,6 @@
}
.form--sections .form__section-list {
flex: 0 1 18em;
- padding: 0 calc(1.6rem * 1.5) 1.6rem 0;
padding: 0 calc(var(--gutter) * 1.5) var(--gutter) 0;
position: sticky;
top: 0;
@@ -4248,29 +4015,21 @@
height: auto;
overflow: hidden;
position: static;
- white-space: wrap;
+ white-space: normal;
width: auto;
}
}
.form--sections .form__row--footer {
bottom: 0;
- background: linear-gradient(
- 180deg,
- rgba(218,224,226,0) 0,
- rgba(218,224,226,1) 1.2rem,
- rgba(218,224,226,1) 0%);
background: linear-gradient(
180deg,
rgba(var(--form-section-footer),0) 0,
rgba(var(--form-section-footer),1) 1.2rem,
rgba(var(--form-section-footer),1) 0%);
- margin-left: calc((1.6rem / 2) - 1.6rem - 2px);
margin-left: calc((var(--gutter) / 2) - var(--gutter) - 2px);
- margin-right: calc((1.6rem / 2) - 1.6rem - 2px);
margin-right: calc((var(--gutter) / 2) - var(--gutter) - 2px);
margin-top: 0rem;
- padding-bottom: calc(1.6rem + calc(1.6rem / 2));
padding-bottom: calc(var(--padding) + calc(var(--padding) / 2));
padding-top: 1.6rem;
position: sticky;
@@ -4278,9 +4037,7 @@
}
/* Because we have to pull the footer out so it covers the form content when the footer is layered above we should reset the divider spacing. */
.form:not(.form--horizontal).form--sections .form__row--footer:before {
- margin-left: calc((1.6rem / 2) + 2px);
margin-left: calc((var(--gutter) / 2) + 2px);
- margin-right: calc((1.6rem / 2) + 2px);
margin-right: calc((var(--gutter) / 2) + 2px);
}
@@ -4288,11 +4045,9 @@
.form--horizontal {
display: flex;
flex-flow: row wrap;
- gap: 1.6rem;
gap: var(--gutter);
justify-content: space-between;
/* Adjust because on a vertical form the bottom margin is set larger due to optical trickery. */
- padding-bottom: 1.6rem;
padding-bottom: var(--padding);
padding-top: 0;
}
@@ -4303,7 +4058,6 @@
flex-flow: row wrap;
justify-content: flex-start;
/* gap: var(--gutter); */
- column-gap: 1.6rem;
column-gap: var(--gutter);
}
/* Set the submit area to be no wider than the width of the content. */
@@ -4321,7 +4075,6 @@
.form--horizontal .form__fields .form__row {
flex: 1 1 10em;
margin-top: 0;
- padding-top: 1.6rem;
padding-top: var(--padding);
}
.form--horizontal .form__fields fieldset.form__row {
@@ -4348,7 +4101,6 @@
display: none;
}
.form--horizontal .form__radbox-label:not(:last-child) {
- padding-right: calc(1.6rem / 2);
padding-right: calc(var(--gutter) / 2);
}
@@ -4435,29 +4187,15 @@
.form .fieldset.form__row {
- background: linear-gradient(
- rgba(255,255,255, 0.35),
- rgba(255,255,255, 0.35)),
- rgb(218,224,226);
background: var(--form-fieldset);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
- padding: 0 calc(1.6rem / 2) 1.6rem calc(1.6rem / 2);
padding: 0 calc(var(--gutter) / 2) 1.6rem calc(var(--gutter) / 2);
position: relative;
}
.form .fieldset .fieldset.form__row {
- background: linear-gradient(
- rgba(255,255,255, 0.7),
- rgba(255,255,255, 0.7)),
- rgb(218,224,226);
background: var(--form-fieldset2);
}
.form .fieldset .fieldset .fieldset.form__row {
- background: linear-gradient(
- rgba(255,255,255, 1),
- rgba(255,255,255, 1)),
- rgb(218,224,226);
background: var(--form-fieldset3);
}
.form.form--horizontal > .fieldset {
@@ -4468,9 +4206,7 @@
margin-top: 1rem;
}
.form:not(.form--horizontal) .fieldset.form__row {
- margin-left: calc((1.6rem / 2) - 1.6rem);
margin-left: calc((var(--gutter) / 2) - var(--gutter));
- margin-right: calc((1.6rem / 2) - 1.6rem);
margin-right: calc((var(--gutter) / 2) - var(--gutter));
}
.form:not(.form--horizontal) .fieldset .fieldset.form__row {
@@ -4482,21 +4218,14 @@
display: inline-block;
}
.form .fieldset.form__row legend {
- background: linear-gradient(
- rgba(255,255,255, 0.35),
- rgba(255,255,255, 0.35)),
- rgb(218,224,226);
background: var(--form-fieldset);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
- padding: calc(1.6rem / 4) 1.6rem 0 1.6rem;
padding: calc(var(--padding) / 4) var(--padding) 0 var(--padding);
margin-bottom: 1.6rem;
margin-top: 0;
}
.form.form--horizontal .fieldset.form__row legend {
font-size: 1.6rem;
- padding: 0 calc(1.6rem / 2);
padding: 0 calc(var(--padding) / 2);
}
@@ -4507,11 +4236,9 @@
.fieldset--active {
- box-shadow: 0 0 0 2px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--link-color));
}
.fieldset--active legend {
- box-shadow: 0 -2px 0 0 rgb(0,115,165);
box-shadow: 0 -2px 0 0 rgb(var(--link-color));
}
@@ -4550,7 +4277,6 @@
margin-right: 4.4rem;
/* Because it's a pain to do lookbacks in JS we set the default step style to 'completed'. */
- border-left: solid 2px rgba(50,68,74, 0.2);
border-left: solid 2px var(--step-line);
border-left-style: dashed;
position: relative;
@@ -4564,11 +4290,9 @@
/* Class is added with JS as there's no nice way to do this in pure CSS. */
.form--step-through-css .form__step--last {
border-left-color: transparent;
- padding-bottom: 1.6rem;
padding-bottom: var(--gutter);
}
.form__step:not(.form__step--active):not(.form__step--completed) {
- padding-bottom: calc(1.6rem / 2);
padding-bottom: calc(var(--gutter) / 2);
}
.form__step:not(.form__step--active):not(.form__step--completed) .h3 {
@@ -4586,7 +4310,6 @@
/* Icons */
.form__step .form__step__icon {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
display: block;
position: absolute;
@@ -4610,7 +4333,6 @@
background: rgb(255,255,255);
}
.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon {
- fill: rgba(50,68,74, 0.5);
fill: rgba(var(--basalt), 0.5);
}
.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon--dot-outline {
@@ -4618,19 +4340,16 @@
}
.form__step--active .form__step__icon {
- background: rgb(240,152,27);
background: rgb(var(--tango));
}
.form__step--active .form__step__icon .icon {
- fill: rgb(50,68,74);
fill: rgb(var(--basalt));
}
- .form__step--active .form__step__icon .icon--dot {
+ .form__step--active:not(.form__step--completed) .form__step__icon .icon--dot {
display: block;
}
.form__step--completed .form__step__icon {
- background: rgb(0,44,62);
background: rgb(var(--midnight));
}
.form__step--completed .form__step__icon .icon {
@@ -4687,7 +4406,6 @@
.form--step-through-css .form__row--step {
display: block;
- margin: calc(1.6rem * 2) 0 0 0;
margin: calc(var(--gutter) * 2) 0 0 0;
text-align: center;
}
@@ -4700,7 +4418,6 @@
margin-bottom: 1.6rem;
}
.form__step__noproceedmsg .icon {
- fill: rgb(155,18,0);
fill: rgb(var(--form-error));
}
@@ -4757,7 +4474,6 @@
padding-left: 2.8rem;
margin-left: 1.2rem;
margin-right: 4.4rem;
- border-left: solid 2px rgba(50,68,74, 0.2);
border-left: solid 2px var(--form-step-line);
border-left-style: dashed;
position: relative;
@@ -4765,16 +4481,13 @@
}
/* Reduce the spacing between fieldsets when hide previous fields is active. */
.js__form-steps.form-steps--hide-previous-fields .form-steps__step {
- padding-bottom: 1.6rem;
padding-bottom: var(--gutter);
}
.js__form-steps .form-steps__step--complete {
border-left-style: solid;
}
- .js__form-steps .form-steps__step--active {}
.js__form-steps .form-steps__step--last {
border-left-color: transparent;
- padding-bottom: 1.6rem;
padding-bottom: var(--gutter);
}
.js__form-steps .form-steps__step--complete .legend,
@@ -4797,7 +4510,6 @@
.js__form-steps .form-steps__step--incomplete .form-steps__fields,
/* Hide completed steps if this option is set in the HTML. */
.js__form-steps.form-steps--hide-previous-fields .form-steps__step--complete .form-steps__fields {
- display: none;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out, visibility 0.03s ease-in-out 0.3s;
visibility: hidden;
@@ -4825,7 +4537,6 @@
}
.js__form-steps .form-steps__icon {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
display: block;
position: absolute;
@@ -4845,22 +4556,17 @@
/* Completed */
.js__form-steps .form-steps__step--complete .form-steps__icon {
- background: rgb(0,44,62);
background: var(--form-step-icon-complete-bk);
fill: rgb(255,255,255);
}
/* Active */
.js__form-steps .form-steps__step--active .form-steps__icon {
- background: rgb(240,152,27);
background: rgb(var(--tango));
- fill: rgb(50,68,74);
fill: rgb(var(--basalt));
}
/* Incompleted */
.js__form-steps .form-steps__step--incomplete .form-steps__icon {
- background: rgb(255,255,255);
background: var(--form-step-icon-incomplete-bk);
- fill: rgba(50,68,74, 0.5);
fill: var(--form-step-icon-incomplete-fill);
}
/* Icon glyphs */
@@ -4875,7 +4581,6 @@
}
.js__form-steps .form-steps__step--active .form-steps__controls {
display: block;
- margin: calc(1.6rem * 2) 0 0 0;
margin: calc(var(--gutter) * 2) 0 0 0;
text-align: center;
}
@@ -4895,7 +4600,6 @@
margin-bottom: 1.6rem;
}
.js__form-steps .form-steps__error .icon {
- fill: rgb(155,18,0);
fill: rgb(var(--form-error));
}
@@ -4925,7 +4629,6 @@
container-name: form-horizontal-fields;
}
.form__horizontal-fields__inner {
- margin-bottom: 1.6rem;
margin-bottom: var(--gutter);
}
@container form-horizontal-fields (min-width: 40em) {
@@ -4933,7 +4636,6 @@
.form__horizontal-fields .form__horizontal-fields__inner {
display: grid;
grid-template-columns: minmax(0, max-content) minmax(50%, 1fr);
- gap: 1.6rem;
gap: var(--gutter);
}
.form__horizontal-fields .form__row {
@@ -4943,7 +4645,6 @@
.form--horizontal .form__horizontal-fields .form__row {
display: flex;
align-items: center;
- gap: calc(1.6rem / 2);
gap: calc(var(--gutter) / 2);
}
.form--horizontal .form__horizontal-fields .form__row .form__label {
@@ -4976,11 +4677,10 @@
.button.form__help-toggle {
background: none !important;
box-shadow: none !important;
- margin-left: calc((1.6rem /2) - 2px) !important;
margin-left: calc((var(--gutter) /2) - 2px) !important;
padding-bottom: 1.6rem;
position: absolute;
- top: -1rem;
+ bottom: 0.2rem;
}
.button.form__help-toggle:hover {
background: none;
@@ -4990,9 +4690,7 @@
box-shadow: none !important;
}
.form__help-toggle-icon {
- background: rgba(50,68,74, 0.7);
background: var(--form-help);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
display: block;
height: 1.6rem;
@@ -5017,7 +4715,6 @@
}
.button.form__help-toggle:focus .form__help-toggle-icon,
.button.form__help-toggle:focus-visible .form__help-toggle-icon {
- box-shadow: 0 0 0 4px rgb(5,152,214);
box-shadow: 0 0 0 4px rgb(var(--smurf));
}
.button.form__help-toggle:focus:not(:focus-visible) .form__help-toggle-icon {
@@ -5032,12 +4729,14 @@
@container form-horizontal-fields (min-width: 40em) {
@supports(display: contents) {
+ .form__horizontal-fields .form__label {
+ padding-top: 0.4rem;
+ }
.form__horizontal-fields .button.form__help-toggle {
/* By default we set the button to be positioned so it doesn't impact vertical spacing, we switch this off here. */
position: static;
/* Because it's no longer positioned it dickers with the margin, tweak it to match. */
- margin: 0 calc(-1 * 1.6rem) calc(-1 * 1.6rem) calc((1.6rem / 2) - 0.6rem) !important;
margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) calc((var(--gutter) / 2) - 0.6rem) !important;
/* Reduce the size of the button so we aren't overlapping the actual foed. */
@@ -5052,9 +4751,7 @@
/* Help text */
.form__help-text {
- background: rgba(50,68,74, 0.7);
background: var(--form-help);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
color: rgb(255,255,255);
display: block;
@@ -5080,7 +4777,6 @@
.form__help-text a:focus:not([class]),
.form__help-text a:focus-visible:not([class]) {
background: rgb(255,255,255);
- color: rgb(23,24,24);
color: rgb(var(--coal));
}
.form__help-text a:focus:not(:focus-visible):not([class]) {
@@ -5102,7 +4798,6 @@
display: block;
}
.form__error .icon {
- fill: rgb(155,18,0);
fill: rgb(var(--form-error));
}
/* Inline fields */
@@ -5162,11 +4857,8 @@
.form input[type=search],
.form input[type=tel],
.form input[type=url] {
- background: rgb(255,255,255);
background: var(--form-field-background);
- border: solid 1px rgba(50,68,74,0.7);
border: solid 1px var(--form-field-border);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
color: inherit;
display: inline-block;
@@ -5183,7 +4875,6 @@
.form input[type=search]:hover,
.form input[type=tel]:hover,
.form input[type=url]:hover {
- border-color: rgba(50,68,74,0.5);
border-color: var(--form-field-border-hover);
}
.form__text:focus,
@@ -5196,7 +4887,6 @@
.form input[type=tel]:focus,
.form input[type=url]:focus {
border-color: rgba(255,255,255, 0);
- box-shadow: 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 4px rgb(var(--link-color));
}
.form__text[aria-invalid="true"],
@@ -5209,7 +4899,6 @@
.form input[type=tel][aria-invalid="true"],
.form input[type=url][aria-invalid="true"] {
border-color: rgb(255,255,255, 0);
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
.form__text[aria-invalid="true"]:focus,
@@ -5222,7 +4911,6 @@
.form input[type=tel][aria-invalid="true"]:focus,
.form input[type=url][aria-invalid="true"]:focus {
border-color: rgb(255,255,255);
- box-shadow: 0 0 0 2px rgb(155,18,0), 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
}
@@ -5267,16 +4955,81 @@
+/* Output */
+
+ :root {
+ --output-border: rgba(var(--basalt),0.2);
+ --output-opacity: 0.75;
+ }
+ .theme--light {
+ --output-border: rgba(var(--basalt),0.2);
+ --output-opacity: 0.75;
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --output-border: rgba(255,255,255,0.15);
+ --output-opacity: 0.5;
+ }
+ }
+ .theme--dark {
+ --output-border: rgba(255,255,255,0.15);
+ --output-opacity: 0.5;
+ }
+
+
+ .form__pfix--output .form__pfix__text {
+ background: var(--output-border);
+ color: currentColor;
+ }
+ .form__pfix--output .form__pfix__text .icon {
+ fill: currentColor;
+ opacity: var(--output-opacity);
+ }
+ .form__output {
+ border: solid 1px var(--output-border);
+ border-radius: var(--button-radius);
+ color: inherit;
+ display: inline-block;
+ /* We deduct 1px to account for the border width. */
+ padding: 0.7rem;
+ cursor: not-allowed;
+ }
+
+
+
+/* Obfuscated field */
+
+ :root {
+ /* This is the spacing needed if we use the default icon only toggle, if we want to show the toggle label then
+ this value will need to be set directly on the form__obfuscated element. */
+ --obfuscated-padding: 4rem;
+ }
+
+ blinky-obfuscated-field {
+ display: block;
+ }
+ .js__form__obfuscated {
+ position: relative;
+ }
+ /* Need slightly more specifity to force this past the default .form__text settings. */
+ .js__form__obfuscated input.form__text {
+ padding-right: var(--obfuscated-padding);
+ }
+ .js__form__obfuscated .form__obfuscated__toggle {
+ display: inline-block;
+ position: absolute;
+ right: 0.4rem;
+ }
+
+
+
/* Textarea */
/* Uses the CSS variables from single line inputs. */
.form__textarea {
- background: rgb(255,255,255);
background: var(--form-field-background);
- border: solid 1px rgba(50,68,74,0.7);
border: solid 1px var(--form-field-border);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
color: inherit;
display: inline-block;
@@ -5285,22 +5038,18 @@
width: 100%;
}
.form__textarea:hover {
- border-color: rgba(50,68,74,0.5);
border-color: var(--form-field-border-hover);
}
.form__textarea:focus {
border-color: rgba(255,255,255, 0);
- box-shadow: 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 4px rgb(var(--link-color));
}
.form__textarea[aria-invalid="true"] {
border-color: rgb(255,255,255, 0);
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
.form__textarea[aria-invalid="true"]:focus {
border-color: rgb(255,255,255);
- box-shadow: 0 0 0 2px rgb(155,18,0), 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
}
@@ -5335,22 +5084,17 @@
}
.form__prefix__text,
.form__pfix__text {
- background: rgba(50,68,74,0.7);
background: var(--form-field-border);
- border-radius: 0.3rem 0 0 0.3rem;
border-radius: var(--button-radius) 0 0 var(--button-radius);
- color: rgb(255,255,255);
color: var(--form-pfix-text);
padding: 0.8rem;
}
.form__prefix__text + *:not(:focus):not([aria-invalid="true"]),
.form__pfix__text + *:not(:focus):not([aria-invalid="true"]) {
- border-radius: 0 0.3rem 0.3rem 0;
border-radius: 0 var(--button-radius) var(--button-radius) 0;
}
.form__prefix--radbox .form__prefix__text,
.form__pfix--radbox .form__pfix__text {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
margin: 0.3rem 0.8rem 0.3rem 0;
padding: 0.1rem 0.4rem;
@@ -5358,16 +5102,13 @@
/* pfix text positioning for postfix. */
.form__pfix--postfix .form__pfix__text {
- border-radius: 0 0.3rem 0.3rem 0;
border-radius: 0 var(--button-radius) var(--button-radius) 0;
order: 1;
}
.form__pfix--postfix .form__pfix__text + *:not(:focus):not([aria-invalid="true"]) {
- border-radius: 0.3rem 0 0 0.3rem;
border-radius: var(--button-radius) 0 0 var(--button-radius);
}
.form__pfix--postfix.form__pfix--radbox .form__pfix__text {
- border-radius: 0.3rem;
border-radius: var(--button-radius);
margin-left: 0.8rem;
margin-right: 0;
@@ -5378,22 +5119,17 @@
}
.form__pfix--warning:not(.form__pfix--postfix) .form__pfix__text + * {
- border-left-color: rgb(240,152,27) !important;
border-left-color: rgb(var(--tango)) !important;
}
.form__pfix--warning.form__pfix--postfix .form__pfix__text + * {
- border-right-color: rgb(240,152,27) !important;
border-right-color: rgb(var(--tango)) !important;
}
.form__pfix--warning .form__pfix__text {
- background: rgb(240,152,27);
background: rgb(var(--tango));
- color: rgb(50,68,74);
color: rgb(var(--form-pfix-warning));
}
.form__pfix--warning:not(.form__pfix--radbox) .form__pfix__text {
- border: 1px solid rgba(50,68,74,0.7);
border: 1px solid var(--form-field-border);
}
.form__pfix--warning:not(.form__pfix--postfix):not(.form__pfix--radbox) .form__pfix__text {
@@ -5426,11 +5162,8 @@
}
.form__radbox + .form__radbox-label:before,
.form__large-radios .form__radbox ~ .form__large-radios__content .form__radbox-label:before {
- background: rgb(255,255,255);
background: var(--form-field-background);
- border: solid 1px rgba(50,68,74,0.7);
border: solid 1px var(--form-field-border);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
content: '';
height: 2.6rem;
@@ -5440,7 +5173,6 @@
}
.form__radbox[type="checkbox"]:checked + .form__radbox-label:after,
.form__large-radios .form__radbox[type="checkbox"]:checked ~ .form__large-radios__content .form__radbox-label:after {
- border: 0.3rem solid rgb(50,68,74);
border: 0.3rem solid rgb(var(--page-text));
border-top: 0;
border-left: 0;
@@ -5456,37 +5188,31 @@
/* TODO: add style for radio checked. */
.form__radbox:hover + label:before {
- border-color: rgba(50,68,74,0.5);
border-color: var(--form-field-border-hover);
}
.form__radbox:focus + label:before,
.form__radbox:focus-visible + label:before {
border-color: rgba(255,255,255, 0);
- box-shadow: 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 4px rgb(var(--link-color));
}
.form__radbox:focus:not(:focus-visible) + label:before {
- border-color: rgba(50,68,74,0.7);
border-color: var(--form-field-border);
box-shadow: none;
}
.form__radbox[aria-invalid="true"] + label:before {
border-color: rgb(255,255,255, 0);
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
.form__radbox[aria-invalid="true"]:focus + label:before,
.form__radbox[aria-invalid="true"]:focus-visible + label:before {
border-color: rgb(255,255,255);
- box-shadow: 0 0 0 2px rgb(155,18,0), 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
}
.form__radbox[aria-invalid="true"]:focus:not(:focus-visible) + label:before {
border-color: rgb(255,255,255, 0);
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
@@ -5497,7 +5223,6 @@
}
.form__radbox[disabled="disabled"] + .form__radbox-label:after,
.form__large-radios .form__radbox[disabled="disabled"] ~ .form__large-radios__content .form__radbox-label:after {
- border-right: solid 1px rgba(50,68,74,0.7);
border-right: solid 1px var(--form-field-border);
content: '';
height: 3.67rem;
@@ -5535,7 +5260,6 @@
.form__radbox[type="radio"]:checked + .form__radbox-label:after,
.form__large-radios .form__radbox[type="radio"]:checked ~ .form__large-radios__content .form__radbox-label:after {
- background: rgb(50,68,74);
background: rgb(var(--page-text));
border-radius: 50%;
content: '';
@@ -5562,39 +5286,36 @@
.theme--light {
--large-radios-bk: rgba(var(--basalt), 1);
--large-radios-text: 255,255,255;
+ --large-radios-stripe-disabled: rgba(var(--basalt),0.3);
}
@media (prefers-color-scheme: dark) {
:root {
--large-radios-bk: rgba(var(--concrete), 0.4);
--large-radios-text: 255,255,255;
+ --large-radios-stripe-disabled: rgba(255,255,255,0.15);
}
}
.theme--dark {
--large-radios-bk: rgba(var(--concrete), 0.4);
--large-radios-text: 255,255,255;
+ --large-radios-stripe-disabled: rgba(255,255,255,0.15);
}
.form__large-radios {
display: grid;
- grid-gap: 1.6rem;
grid-gap: var(--padding);
/* This can be overridden with an inline var attached to the main section. */
- grid-template-columns: repeat( auto-fit, minmax(40rem, 1fr) );
grid-template-columns: repeat( auto-fit, minmax(var(--large-radios-min-width), 1fr) );
}
.form__large-radios--column {
grid-template-columns: 1fr !important;
}
.form__large-radios__item {
- border: solid 1px rgba(50,68,74,0.7);
border: solid 1px var(--form-field-border);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
- background: rgb(255,255,255);
background: var(--form-field-background);
color: inherit;
display: flex;
- padding: 1.6rem;
padding: var(--padding);
flex-direction: column;
justify-content: space-between;
@@ -5616,13 +5337,11 @@
cursor: default;
}
.form__large-radios .form__radbox:checked + .form__large-radios__label {
- background: rgba(50,68,74, 0.5);
background: var(--large-radios-bk);
}
.form__large-radios .form__radbox:checked ~ .form__large-radios__content,
.form__large-radios .form__radbox:checked ~ .form__large-radios__content a {
- color: rgb(255,255,255);
color: rgb(var(--large-radios-text));
}
@@ -5636,7 +5355,6 @@
padding-left: 3.4rem;
}
.form__large-radios__content + .form__large-radios__content {
- padding-top: 1.6rem;
padding-top: var(--padding);
}
.form__large-radios__content .form__radbox-label {
@@ -5651,11 +5369,9 @@
.form__large-radios .form__radbox:focus ~ .form__large-radios__content .form__radbox-label:before,
.form__large-radios .form__radbox:focus-visible ~ .form__large-radios__content .form__radbox-label:before {
border-color: rgba(255,255,255, 0);
- box-shadow: 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 4px rgb(var(--link-color));
}
.form__large-radios .form__radbox:focus:not(:focus-visible) ~ .form__large-radios__content .form__radbox-label:before {
- border-color: rgba(50,68,74,0.7);
border-color: var(--form-field-border);
box-shadow: none;
}
@@ -5669,29 +5385,29 @@
}
.form__large-radios .highlight-stripe {
- background: rgba(50,68,74,0.3);
background: var(--large-radios-stripe-disabled);
- margin-left: calc(1.6rem * -1);
margin-left: calc(var(--padding) * -1);
- margin-right: calc(1.6rem * -1);
margin-right: calc(var(--padding) * -1);
- padding: calc(1.6rem / 2);
padding: calc(var(--padding) / 2);
}
/* If there's a selectable radio button paint the highlight stripe orange. */
.form__large-radios .form__radbox:not([disabled="disabled"]) ~ .form__large-radios__content .highlight-stripe {
- background: rgb(240,152,27);
background: var(--large-radios-stripe);
}
/* Account for radio button spacing. */
.form__large-radios .form__radbox ~ .form__large-radios__content .highlight-stripe {
- margin-left: calc((3.4rem + 1.6rem) * -1);
margin-left: calc((3.4rem + var(--padding)) * -1);
}
.form__large-radios .form__radbox:checked ~ .form__large-radios__content .highlight-stripe {
- color: rgb(50,68,74);
color: rgb(var(--page-text));
}
+
+ .form__large-radios .form__radbox:checked ~ .form__large-radios__content .form__large-radios__tag .icon {
+ fill: rgb(255,255,255) !important;
+ }
+
+
+
/* Select dropdowns */
:root {
@@ -5726,11 +5442,8 @@
.form__select {
- background: rgb(255,255,255);
background: var(--form-field-background);
- border: solid 1px rgba(50,68,74,0.7);
border: solid 1px var(--form-field-border);
- border-radius: 0.3rem;
border-radius: var(--button-radius);
color: inherit;
display: inline-block;
@@ -5742,9 +5455,6 @@
width: auto;
}
.form__select:not([multiple]) {
- background: linear-gradient(45deg, transparent 50%, currentColor 50%),
- linear-gradient(135deg, currentColor 50%, transparent 50%),
- rgb(255,255,255);
background: var(--form-select-background);
background-position:
calc(100% - 2rem) calc(2rem - 0.2rem),
@@ -5763,49 +5473,33 @@
display: none;
}
.form__select:hover {
- border-color: rgba(50,68,74,0.5);
border-color: var(--form-field-border-hover);
}
.form__select:focus {
border-color: rgba(255,255,255, 0);
- box-shadow: 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 4px rgb(var(--link-color));
}
.form__select[aria-invalid="true"] {
border-color: rgb(255,255,255);
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
.form__select[aria-invalid="true"]:focus {
- box-shadow: 0 0 0 2px rgb(155,18,0), 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
}
.page__header .form__select,
.page__footer .form__select {
- background: linear-gradient(
- rgba(255,255,255, 0.15),
- rgba(255,255,255, 0.15)),
- rgb(23,24,24);
background: var(--form-field-background-dark);
- border: solid 1px rgba(255,255,255,0.4);
border: solid 1px var(--form-field-border-dark);
color: inherit;
}
.page__header .form__select:hover,
- .page__footer .form__select:hover, {
- border-color: rgba(255,255,255,0.2);
+ .page__footer .form__select:hover {
border-color: var(--form-field-border-hover-dark);
}
.page__header .form__select:not([multiple]),
.page__footer .form__select:not([multiple]) {
- background: linear-gradient(45deg, transparent 50%, currentColor 50%),
- linear-gradient(135deg, currentColor 50%, transparent 50%),
- linear-gradient(
- rgba(255,255,255, 0.15),
- rgba(255,255,255, 0.15)),
- rgb(23,24,24);
background: var(--form-select-background-dark);
background-position:
calc(100% - 2rem) calc(2rem - 0.2rem),
@@ -5819,70 +5513,9 @@
auto;
background-repeat: no-repeat;
}
- .page__header .form__select option,
- .page__footer .form__select option {
- /* color: rgb(var(--page-text)); */
- }
-/* Play / Pause Toggle */
-
- /* Because a toggle will only work with JavaScript we hide the toggle until it's been inited. */
- .toggle--play-pause:not(.js__toggle--play-pause) {
- display: none;
- }
-
- .button.toggle--play-pause,
- .button.toggle--play-pause:hover {
- background: none;
- box-shadow: 0 0 0 1px rgb(0,103,41) inset !important;
- box-shadow: 0 0 0 1px rgb(var(--frog)) inset !important;
- color: rgb(0,103,41);
- color: rgb(var(--frog));
- }
- .button.toggle--play-pause:hover {
- box-shadow: 0 0 0 2px rgb(0,103,41) inset !important;
- box-shadow: 0 0 0 2px rgb(var(--frog)) inset !important;
- }
- .button.toggle--play-pause[data-toggled],
- .button.toggle--play-pause[data-toggled]:hover {
- background: rgb(0,103,41);
- background: rgb(var(--frog));
- color: rgb(255,255,255);
- }
- .button.toggle--play-pause[data-toggled]:hover {
- opacity: 0.9;
- }
- .button.toggle--play-pause:focus,
- .button.toggle--play-pause:focus-visible {
- box-shadow: 0 0 0 4px rgb(5,152,214), 0 0 0 1px rgb(0,103,41) inset !important;
- box-shadow: 0 0 0 4px rgb(var(--smurf)), 0 0 0 1px rgb(var(--frog)) inset !important;
- }
- .button.toggle--play-pause:focus:not(:focus-visible),
- .button.toggle--play-pause:focus:not(:focus-visible) {
- box-shadow: none;
- }
-
- .button.toggle--play-pause .icon {
- fill: rgb(0,103,41);
- fill: rgb(var(--frog));
- }
- .button.toggle--play-pause[data-toggled] .icon {
- fill: rgb(255,255,255);
- }
-
- .toggle--play-pause .toggle__pause-icon,
- .toggle--play-pause[data-toggled] .toggle__play-icon {
- display: none;
- }
- .toggle--play-pause .toggle__play-icon,
- .toggle--play-pause[data-toggled] .toggle__pause-icon {
- display: block;
- }
-
-
-
/* Switch toggle */
:root {
@@ -5921,7 +5554,6 @@
/* Main pill. */
.form__switch:before {
- background: rgba(50,68,74,0.5);
background: var(--switch);
border-radius: 2em;
content: '';
@@ -5936,11 +5568,9 @@
min-height: 3.2rem;
}
.form__switch:hover:before {
- background: rgba(50,68,74,0.4);
background: var(--switch-hover);
}
.form__switch__dot {
- background: rgb(236,239,240);
background: var(--page-background);
border-radius: 2em;
content: '';
@@ -5955,14 +5585,12 @@
}
.form__switch[aria-pressed="true"]:before {
- background: rgb(0,103,41);
background: rgb(var(--frog));
}
.form__switch[aria-pressed="true"] .form__switch__dot {
transform: translateX(1.6rem);
}
.form__switch[aria-pressed="true"] .form__switch__dot:after {
- border: 0.3rem solid rgb(0,103,41);
border: 0.3rem solid rgb(var(--frog));
border-top: 0;
border-left: 0;
@@ -5980,7 +5608,6 @@
}
.form__switch:focus:before,
.form__switch:focus-visible:before {
- box-shadow: 0 0 0 4px rgb(5,152,214);
box-shadow: 0 0 0 4px rgb(var(--smurf));
}
.form__switch:focus:not(:focus-visible):before {
@@ -5988,11 +5615,9 @@
}
.form__switch[aria-invalid="true"]:before {
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
.form__switch[aria-invalid="true"]:focus:before {
- box-shadow: 0 0 0 2px rgb(155,18,0), 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
}
@@ -6000,23 +5625,44 @@
/* Nested Fields */
- .form__child-fields__group {
+ blinky-child-fields {
display: block;
- margin-left: 3.4rem;
}
- .js__form__child-fields .form__child-fields__group {
- display: grid;
- grid-template-rows: 0fr;
- transition: grid-template-rows 0.3s ease-in-out, visibility 0.03s ease-in-out 0.3s;
- visibility: hidden;
- }
- .js__form__child-fields .form__child-fields__group[aria-expanded="true"] {
- grid-template-rows: 1fr;
- transition: visibility 0.03s ease-in-out, grid-template-rows 0.3s ease-in-out 0.03s;
- visibility: visible;
- }
- .js__form__child-fields .form__child-fields__inner {
- overflow: hidden;
+ blinky-child-fields .children {
+ /* Uninitiated components will be styled here, a grid by default assumes a column structure. */
+ display: grid;
+ }
+ blinky-child-fields.js__form__child-fields .children {
+ grid-template-rows: 0fr;
+ transition: grid-template-rows 0.3s ease-in-out, visibility 0.03s ease-in-out 0.3s;
+ visibility: hidden;
+ }
+ blinky-child-fields.js__form__child-fields .children[aria-expanded="true"] {
+ grid-template-rows: 1fr;
+ transition: visibility 0.03s ease-in-out, grid-template-rows 0.3s ease-in-out 0.03s;
+ visibility: visible;
+ }
+ .js__form__child-fields .form__child-fields__inner {
+ overflow: hidden;
+ /* We need to shift some spacing focus styles on fields aren't cut off by the lack of overflow. */
+ padding: 0 4px 4px 4px;
+ margin-bottom: -4px;
+ }
+
+ /* Indents the child fields to give visual meaning. */
+ .form__child-fields {
+ margin-left: calc(3.4rem - 4px);
+ }
+
+ /* Because we're hiding the unexpanded fields showing the disabled styling is not helpful, so we clear the
+ styling and also set the text content of single line inputs and textareas to the same colour as the field
+ backgrounds, this is to reinforce to the user that their diabled fields will nt be submitted. */
+ .js__form__child-fields .form__radbox[disabled="disabled"] + .form__radbox-label::after {
+ display: none;
+ }
+ .js__form__child-fields .children input[disabled="disabled"],
+ .js__form__child-fields .children textarea[disabled="disabled"] {
+ color: var(--form-field-background);
}
@@ -6079,7 +5725,6 @@
}
.js .form__file__name {
display: block;
- padding-top: calc(1.6rem / 4);
padding-top: calc(var(--padding) / 4);
}
.js .form__file__name span {
@@ -6087,32 +5732,23 @@
}
.js .form__file__drag {
- background: rgb(255,255,255);
background: var(--file-upload-background);
- border: 1px dashed rgb(5,152,214);
border: 1px dashed var(--file-upload-border);
- border-radius: 0.3rem;
border-radius: var(--block-radius);
display: inline-block;
- padding: calc(1.6rem + 1px);
padding: calc(var(--padding) + 1px);
}
.js .form__file__drag-active ~ .form__file__drag {
- border: 2px dashed rgb(5,152,214);
border: 2px dashed var(--file-upload-border);
- padding: 1.6rem;
padding: var(--padding);
}
.js .form__file:focus ~ .form__file__drag {
- box-shadow: 0 0 0 4px rgb(5,152,214);
box-shadow: 0 0 0 4px rgb(var(--smurf));
}
.js .form__file[aria-invalid="true"] ~ .form__file__drag {
- box-shadow: 0 0 0 2px rgb(155,18,0);
box-shadow: 0 0 0 2px rgb(var(--form-error));
}
.js .form__file[aria-invalid="true"]:focus ~ .form__file__drag {
- box-shadow: 0 0 0 2px rgb(155,18,0), 0 0 0 4px rgb(0,115,165);
box-shadow: 0 0 0 2px rgb(var(--form-error)), 0 0 0 4px rgb(var(--link-color));
}
.js .form__file__drag * {
@@ -6122,25 +5758,43 @@
/* Loading spinner */
+ :root {
+ --progress-box: rgba(var(--basalt),0.25);
+ }
+ .theme--light {
+ --progress-box: rgba(var(--basalt),0.25);
+ }
+ @media (prefers-color-scheme: dark) {
+ :root {
+ --progress-box: rgba(255,255,255,0.2);
+ }
+ }
+ .theme--dark {
+ --progress-box: rgba(255,255,255,0.2);
+ }
+
+ .progress {
+ /* This fixes a bug where if this element is used directly in a flexbox the width could be set to 0. */
+ display: block;
+ width: 100%;
+ }
- .loader {
- background: rgba(240,152,27, 1);
+ .progress__box {
background: rgba(var(--tango), 1);
display: block;
- margin: 1.6rem auto;
margin: var(--gutter) auto;
overflow: hidden;
position: relative;
}
- .loader--circle {
+ .progress__box--circle {
border-radius: 50%;
height: 4rem;
padding: 0.3rem;
width: 4rem;
}
- .loader--circle .loader__fish,
- .theme--light .loader--circle .loader__fish {
+ .progress__box--circle .progress__fish,
+ .theme--light .progress__box--circle .progress__fish {
animation: fish-circle 1s linear infinite;
background: url(../images/loader-circle.svg) no-repeat center center;
display: block;
@@ -6152,18 +5806,20 @@
100% { transform: rotate(-360deg); }
}
- .loader--line {
- border-radius: 0.3rem;
+ .progress__box--line {
border-radius: var(--button-radius);
height: 1.6rem;
- margin: 1.6rem auto;
margin: var(--gutter) auto;
overflow: hidden;
width: 100%;
}
- .loader--line .loader__fish,
- .theme--light .loader--line .loader__fish {
- animation: fish-line 6s linear infinite;
+
+ .progress progress[value] + .progress__box--line {
+ background: var(--progress-box);
+ }
+ .progress__box--line .progress__fish,
+ .theme--light .progress__box--line .progress__fish {
+ animation: fish-line 0.5s linear infinite;
background: url(../images/loader-line.svg) repeat left top;
background-size: 6.7rem 1.6rem;
bottom: 0;
@@ -6172,10 +5828,57 @@
top: 0;
width: 200%;
}
+ .progress progress[value] + .progress__box--line .progress__fish {
+ background-color: rgba(var(--tango),1) !important;
+ right: auto;
+ width: 0%;
+ left: 0;
+ animation: none;
+ background-position: right;
+ /* This value is set in the JS for each specific element based on the element width. */
+ transition: width var(--speed);
+ }
+
+.button:has(.progress) {
+ position: relative;
+}
+.button .progress__box--line,
+.menu .progress__box--line {
+ position: absolute;
+ left: 0;
+ top: 0;
+ margin: 0;
+ height: 0.4rem;
+ border-bottom-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+.button .progress__box--line .progress__fish,
+.menu .progress__box--line .progress__fish {
+ background: repeating-linear-gradient(
+ -45deg,
+ rgba(var(--tango),1),
+ rgba(var(--tango),1) 25%,
+ rgba(255,255,255,0.25) 25%,
+ rgba(255,255,255,0.25) 50%,
+ rgba(var(--tango),1) 50%,
+ rgba(var(--tango),1) 75%,
+ rgba(255,255,255,0.25) 75%,
+ rgba(255,255,255,0.25) 100%
+ );
+ background-size: 6.7rem 0.4rem;
+}
+.button .progress progress[value] + .progress__box--line,
+.menu .progress progress[value] + .progress__box--line {
+ background: none;
+}
+.button .progress__fish,
+.menu .progress__fish {
+ animation: fish-line 1s linear infinite;
+}
@keyframes fish-line {
0% { transform: translateX(0); }
- 100% { transform: translateX(50%); }
+ 100% { transform: translateX(6.7rem); }
}
@@ -6297,7 +6000,6 @@
display: block;
}
.form--search-logs.form--horizontal > .form__row + .form__row {
- margin: 1.6rem 0 0 0;
margin: var(--gutter) 0 0 0;
}
}
diff --git a/starter-ui/src/main/webapp/ui/css/payara.min.css b/starter-ui/src/main/webapp/ui/css/payara.min.css
index b272bff..9a90aa4 100644
--- a/starter-ui/src/main/webapp/ui/css/payara.min.css
+++ b/starter-ui/src/main/webapp/ui/css/payara.min.css
@@ -1,43 +1,73 @@
-/*! Payara Pattern Library version: 0.51.2 *//*! DO NOT MODIFY THIS FILE, CHANGES WILL BE OVERWRITTEN! */img,table{border:none}.accordion__item,.copy-box,.copy-box__content,.icon-list li,.popup,.status,.tab-group__tabs,.table__color-tag{position:relative}html{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:62.5%}.tab-panel__tab,input,select,textarea{font-family:inherit;line-height:inherit;-webkit-appearance:none;outline:0}@media only screen and (min-width:100em){html{font-size:70.3125%}}@media screen and (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}*,:after,:before{box-sizing:inherit}details[open]>*,details[open]>:after,details[open]>:before{box-sizing:border-box}img{display:block;max-width:100%;height:auto}blockquote,body,cite,dd,dl,dt,h1,h2,h3,h4,h5,h6,ol,p,ul{font-weight:400;font-size:1em;font-style:normal;margin:0;padding:0}code,pre{font-size:2ex}ol,ul{list-style-type:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:400}pre{margin:0;tab-size:4}button[class]{cursor:pointer;-webkit-appearance:none}input,select,textarea{font-size:inherit;margin:0}.dl--grid dt,.dl--horizontal>dd:not(:last-child),.gutter--h{margin-right:1.6rem}input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox}fieldset{border:0;padding:0}legend{padding:0}:root{--tango:240,152,27;--midnight:0,44,62;--smurf:5,152,214;--basalt:50,68,74;--concrete:218,224,226;--cherry:155,18,0;--frog:0,103,41;--cherry-on-dark:255,150,130;--cherry-on-dark:255,86,65;--coal:23,24,24;--jet:15,15,15;--onyx:11,11,11;--post-it:244,244,52;--marmalade:244,74,2;--gecko:98,196,0;--plum:170,0,250;--candy:255,66,180;--mud:152,73,0;--slate:152,147,138;--ortolan:0,53,241;--scrollbar-track:rgba(var(--basalt), 0.1);--scrollbar-thumb:rgba(var(--basalt), 0.4);--scrollbar-shadow:rgba(var(--onyx), 0.3);--scrollbar-sidebar-track:rgba(var(--onyx), 0.5);--scrollbar-sidebar-thumb:rgba(var(--smurf), 0.4);--scrollbar-sidebar-shadow:rgba(var(--onyx), 0.75);--scrollbar-status-track:rgba(var(--onyx), 0.2);--scrollbar-status-thumb:rgba(255,255,255, 0.4);--scrollbar-status-shadow:rgba(var(--onyx), 0.3);--button-radius:0.3rem;--block-radius:0.3rem;--gutter-tight:0.8rem;--gutter-medium:1.6rem;--gutter-loose:3.2rem;--gutter:var(--gutter-medium);--padding-tight:1.2rem;--padding-medium:1.6rem;--padding-loose:2rem;--padding:var(--padding-medium);--page-background:rgb(236,239,240);--page-text:var(--basalt);--sidebar-background:rgb(var(--midnight));--sidebar-text:rgb(255,255,255);--header-text:rgb(255,255,255);--table:var(--basalt);--table-tint:var(--concrete);--table-header-text:255,255,255;--table-border-opacity:0.25;--table-header-opacity:1;--table-horizontal-header-opacity:0.1;--table-tint-opacity:0.5;--table-highlight:rgba(var(--tango), 0.75);--table-highlight-th:linear-gradient(
+/*! Payara Pattern Library version: 0.72.1 *//*! DO NOT MODIFY THIS FILE, CHANGES WILL BE OVERWRITTEN! */.button,img,table{border:none}.icon-list li,.table__color-tag{position:relative}.accordion__toggle .icon,.form__switch__dot{transition:all .2s ease-in-out}html{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:62.5%}@media only screen and (min-width:100em){html{font-size:70.3125%}}@media screen and (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}*,:after,:before{box-sizing:inherit}details[open]>*,details[open]>:after,details[open]>:before{box-sizing:border-box}img{display:block;max-width:100%;height:auto}blockquote,body,cite,dd,dl,dt,h1,h2,h3,h4,h5,h6,ol,p,ul{font-weight:400;font-size:1em;font-style:normal;margin:0;padding:0}code,pre{font-size:2ex}ol,ul{list-style-type:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:400}pre{margin:0;tab-size:4}.form__switch,.menu__form-button{font-size:inherit;line-height:inherit}button[class]{cursor:pointer;-webkit-appearance:none;appearance:none}input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0;outline:0;-webkit-appearance:none;appearance:none}input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox}fieldset{border:0;padding:0}legend{padding:0}.padding--h,.padding--r{padding-right:var(--padding)}.padding--t,.padding--v{padding-top:var(--padding)}.padding--b,.padding--v{padding-bottom:var(--padding)}:root{--tango:240,152,27;--midnight:0,44,62;--smurf:0,124,194;--basalt:50,68,74;--concrete:218,224,226;--cherry:155,18,0;--frog:0,103,41;--cherry-on-dark:255,150,130;--cherry-on-dark:255,86,65;--coal:23,24,24;--jet:15,15,15;--onyx:11,11,11;--marmalade:244,74,2;--gecko:98,196,0;--plum:170,0,250;--candy:255,66,180;--mud:152,73,0;--slate:152,147,138;--ortolan:0,53,241;--button-radius:0.3rem;--block-radius:0.3rem;--gutter-tight:0.8rem;--gutter-medium:1.6rem;--gutter-loose:3.2rem;--gutter:var(--gutter-medium);--padding-tight:1.2rem;--padding-medium:1.6rem;--padding-loose:2rem;--padding:var(--padding-medium);--card-background-opacity:1;--card-listing-border:rgba(var(--basalt), 0.25);--card-calout-grey-bk:rgb(var(--basalt));--page-background:rgb(236,239,240);--page-text:var(--basalt);--sidebar-background:rgb(var(--midnight));--sidebar-text:rgb(255,255,255);--header-text:rgb(255,255,255);--hero-background:linear-gradient(
+ 0deg,
+ rgba(5,152,214,0.5) 0,
+ rgba(5,152,214,0) 100%
+ ),linear-gradient(
+ 0deg,
+ rgb(0,44,62) 0,
+ rgb(0,44,62) 100%
+ );--hero-text:rgb(255,255,255);--table:var(--basalt);--table-tint:var(--concrete);--table-header-text:255,255,255;--table-border-opacity:0.25;--table-header-opacity:1;--table-horizontal-header-opacity:0.1;--table-tint-opacity:0.5;--table-highlight:rgba(var(--tango), 0.75);--table-highlight-th:linear-gradient(
rgba(var(--tango), 0.5),
rgba(var(--tango), 0.5)),rgba(var(--table), var(--table-header-opacity));--table-highlight-row:linear-gradient(
rgba(var(--tango), 0.8),
- rgba(var(--tango), 0.8)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.9);--tab-panel-background:255,255,255;--tab-text:255,255,255;--inactive-tab-background:var(--tab-panel-background);--button-bk:rgb(0,76,108);--button-bk-hover:rgb(0,86,123);--button-ghost-text:var(--button-bk);--button-shadow:var(--basalt);--popup-button-bk:var(--button-bk);--popup-button-text:rgb(255,255,255);--popup-button-bk-hover:var(--button-bk-hover);--menu:var(--smurf);--menu-shadow:var(--onyx);--menu-text:255,255,255;--menu-current-text:0,31,43;--step-line:rgba(var(--basalt), 0.2);--form-error:var(--cherry);--form-field-background:rgb(255,255,255);--form-field-border:rgba(var(--basalt),0.7);--form-field-border-hover:rgba(var(--basalt),0.5);--form-field-background-dark:linear-gradient(
+ rgba(var(--tango), 0.8)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.9);--popup-background:255,255,255;--popup-text:var(--page-text);--popup-page-text:var(--page-text);--popup-status-link:0,115,165;--whisper:var(--concrete);--whisper-form:linear-gradient(
+ 0deg,
+ rgba(255,255,255,0.65) 0,
+ rgba(255,255,255,0.65) 100%
+ ),linear-gradient(
+ 0deg,
+ rgb(var(--concrete)) 0,
+ rgb(var(--concrete)) 100%
+ );--button-bk:rgb(0,76,108);--button-bk-hover:rgb(0,86,123);--button-ghost-text:var(--button-bk);--button-shadow:var(--basalt);--popup-button-bk:var(--button-bk);--popup-button-text:rgb(255,255,255);--popup-button-bk-hover:var(--button-bk-hover);--menu:var(--smurf);--menu-shadow:var(--onyx);--menu-text:255,255,255;--menu-current-text:0,31,43;--step-line:rgba(var(--basalt), 0.2);--form-error:var(--cherry);--form-field-background:rgb(255,255,255);--form-field-border:rgba(var(--basalt),0.7);--form-field-border-hover:rgba(var(--basalt),0.5);--form-field-background-dark:linear-gradient(
rgba(255,255,255, 0.15),
- rgba(255,255,255, 0.15)),rgb(var(--coal));--form-field-border-dark:rgba(255,255,255,0.4);--form-field-border-hover-dark:rgba(255,255,255,0.2);--large-radios-min-width:40rem;--large-radios-bk:rgba(var(--basalt), 0.5);--large-radios-text:255,255,255;--large-radios-stripe:rgb(var(--tango));--large-radios-stripe-disabled:rgba(var(--basalt),0.3);--form-select-background:linear-gradient(45deg, transparent 50%, currentColor 50%),linear-gradient(135deg, currentColor 50%, transparent 50%),var(--form-field-background);--form-select-background-dark:linear-gradient(45deg, transparent 50%, currentColor 50%),linear-gradient(135deg, currentColor 50%, transparent 50%),linear-gradient(
+ rgba(255,255,255, 0.15)),rgb(var(--coal));--form-field-border-dark:rgba(255,255,255,0.4);--form-field-border-hover-dark:rgba(255,255,255,0.2);--obfuscated-padding:4rem;--large-radios-min-width:40rem;--large-radios-bk:rgba(var(--basalt), 0.5);--large-radios-text:255,255,255;--large-radios-stripe:rgb(var(--tango));--large-radios-stripe-disabled:rgba(var(--basalt),0.3);--form-select-background:linear-gradient(45deg, transparent 50%, currentColor 50%),linear-gradient(135deg, currentColor 50%, transparent 50%),var(--form-field-background);--form-select-background-dark:linear-gradient(45deg, transparent 50%, currentColor 50%),linear-gradient(135deg, currentColor 50%, transparent 50%),linear-gradient(
rgba(255,255,255, 0.15),
- rgba(255,255,255, 0.15)),rgb(var(--coal))}.color--marmalade{color:#f44a02!important;color:rgb(var(--marmalade))!important}.color-bk--marmalade{background:#f44a02!important;background:rgb(var(--marmalade))!important}.color-fill--marmalade{fill:#f44a02!important;fill:rgb(var(--marmalade))!important}.color--gecko{color:#62c400!important;color:rgb(var(--gecko))!important}.color-bk--gecko{background:#62c400!important;background:rgb(var(--gecko))!important}.color-fill--gecko{fill:#62c400!important;fill:rgb(var(--gecko))!important}.color--plum{color:#aa00fa!important;color:rgb(var(--plum))!important}.color-bk--plum{background:#aa00fa!important;background:rgb(var(--plum))!important}.color-fill--plum{fill:#aa00fa!important;fill:rgb(var(--plum))!important}.color--candy{color:#ff42b4!important;color:rgb(var(--candy))!important}.color-bk--candy{background:#ff42b4!important;background:rgb(var(--candy))!important}.color-fill--candy{fill:#ff42b4!important;fill:rgb(var(--candy))!important}.color--mud{color:#984900!important;color:rgb(var(--mud))!important}.color-bk--mud{background:#984900!important;background:rgb(var(--mud))!important}.color-fill--mud{fill:#984900!important;fill:rgb(var(--mud))!important}.color--slate{color:#98938a!important;color:rgb(var(--slate))!important}.color-bk--slate{background:#98938a!important;background:rgb(var(--slate))!important}.color-fill--slate{fill:#98938a!important;fill:rgb(var(--slate))!important}.color--ortolan{color:#0035f1!important;color:rgb(var(--ortolan))!important}.color-bk--ortolan{background:#0035f1!important;background:rgb(var(--ortolan))!important}.color-fill--ortolan{fill:#0035f1!important;fill:rgb(var(--ortolan))!important}.color--tango{color:#f0981b!important;color:rgb(var(--tango))!important}.color-bk--tango{background:#f0981b!important;background:rgb(var(--tango))!important}.color-fill--tango{fill:#f0981b!important;fill:rgb(var(--tango))!important}.color--midnight{color:#002c3e!important;color:rgb(var(--midnight))!important}.color-bk--midnight{background:#002c3e!important;background:rgb(var(--midnight))!important}.color-fill--midnight{fill:#002c3e!important;fill:rgb(var(--midnight))!important}.color--smurf{color:#0598d6!important;color:rgb(var(--smurf))!important}.color-bk--smurf{background:#0598d6!important;background:rgb(var(--smurf))!important}.color-fill--smurf{fill:#0598d6!important;fill:rgb(var(--smurf))!important}.color--cherry{color:#9b1200!important;color:rgb(var(--cherry))!important}.color-bk--cherry{background:#9b1200!important;background:rgb(var(--cherry))!important}.color-fill--cherry{fill:#9b1200!important;fill:rgb(var(--cherry))!important}.color--frog{color:#006729!important;color:rgb(var(--frog))!important}.color-bk--frog{background:#006729!important;background:rgb(var(--frog))!important}.color-fill--frog{fill:#006729!important;fill:rgb(var(--frog))!important}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;src:local('IBM Plex Sans'),local('IBMPlexSans'),url(../fonts/ibm-plex-sans-v2-latin-regular.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-regular.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;src:local('IBM Plex Sans Italic'),local('IBMPlexSans-Italic'),url(../fonts/ibm-plex-sans-v2-latin-italic.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-italic.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;src:local('IBM Plex Sans Bold'),local('IBMPlexSans-Bold'),url(../fonts/ibm-plex-sans-v2-latin-700.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-700.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:700;src:local('IBM Plex Sans Bold Italic'),local('IBMPlexSans-BoldItalic'),url(../fonts/ibm-plex-sans-v2-latin-700italic.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-700italic.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;src:local('IBM Plex Sans Medium'),local('IBMPlexSans-Medium'),url(../fonts/ibm-plex-sans-v2-latin-500.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-500.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:500;src:local('IBM Plex Sans Medium Italic'),local('IBMPlexSans-MediumItalic'),url(../fonts/ibm-plex-sans-v2-latin-500italic.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-500italic.woff) format('woff');font-display:swap}body{font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.5}.p,p:not([class]){margin-bottom:1.6rem}.p:last-child,p:not([class]):last-child{margin-bottom:0}.h1,.h2,.h3,.h4,h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]){margin-bottom:1.6rem;font-weight:700}.h1,h1:not([class]){font-size:3.2rem;margin-top:3.2rem}.h2,h2:not([class]){font-size:2.6rem;margin-top:3.2rem}.h3,h3:not([class]){font-size:2rem;margin-top:3.2rem}.h4,h4:not([class]){font-size:1.6rem;margin-top:2.4rem}.h5,.h6,h5:not([class]),h6:not([class]){font-size:1.6rem;font-weight:700}:not(.cards)>[class$=hidden]+h1,:not(.cards)>[class$=hidden]+h2,:not(.cards)>[class$=hidden]+h3,:not(.cards)>[class$=hidden]+h4,:not(.cards)>[class$=hidden]+h5,:not(.cards)>[class$=hidden]+h6,:not(.cards)>h1:first-child,:not(.cards)>h2:first-child,:not(.cards)>h3:first-child,:not(.cards)>h4:first-child,:not(.cards)>h5:first-child,:not(.cards)>h6:first-child,:not(.cards)>input[type=hidden]+h1,:not(.cards)>input[type=hidden]+h2,:not(.cards)>input[type=hidden]+h3,:not(.cards)>input[type=hidden]+h4,:not(.cards)>input[type=hidden]+h5,:not(.cards)>input[type=hidden]+h6,h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6,h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6,h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6,h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6,h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6{margin-top:0!important}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0!important}.h1.half-space,.h2.half-space,.h3.half-space,.h4.half-space{margin-bottom:.8rem}ul:not([class]){list-style-type:disc;margin-bottom:1.6rem;margin-left:4.8rem}ul:not([class]):last-child{margin-bottom:0}.ul--no-indent{list-style-type:disc;margin-bottom:1.6rem}.ul--no-indent:last-child,dl:not([class]):last-child,ol:not([class]):last-child{margin-bottom:0}ol:not([class]){list-style-type:decimal;margin-bottom:1.6rem;margin-left:4.8rem}.dl--horizontal,dl:not([class]){margin-bottom:1.6rem}dl:not([class]) dt{font-weight:700}.dl--horizontal:last-child{margin-bottom:0}.dl--horizontal>*{display:inline}.dl--horizontal dt{font-weight:700}.dl--grid{margin-bottom:1.6rem}.dl--grid:last-child{margin-bottom:0}.dl--grid dt{clear:left;float:left;font-weight:700}.dl--grid dd{float:left}@supports (display:grid){.dl--grid{display:grid;grid-template-columns:fit-content(50%) 1fr}}.icon-list{list-style-type:none;margin-bottom:1.6rem;padding-left:2rem}.icon-list:last-child{margin-bottom:0}.icon-list .icon{position:absolute;right:calc(100% + .4rem);top:.4rem}.icon-list .icon--tick{fill:#006729;fill:rgb(var(--frog))}.text--large{font-size:2em}p.text--large{margin-bottom:1.6rem}p.text--large:last-child,pre:not([class]):last-child{margin-bottom:0}.gutter--v,pre:not([class]){margin-bottom:1.6rem}small{font-size:1.4rem}small.block{display:block;margin:0}.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.dom-hidden{display:none!important}.card--child-block,.cards,.page__sidebar{display:flex}.theme--light{--scrollbar-track:rgba(var(--basalt), 0.1);--scrollbar-thumb:rgba(var(--basalt), 0.4);--scrollbar-shadow:rgba(var(--onyx), 0.3);--page-background:rgb(236,239,240);--page-text:var(--basalt);--table:var(--basalt);--table-tint:var(--concrete);--table-header-text:255,255,255;--table-border-opacity:0.25;--table-header-opacity:1;--table-tint-opacity:0.5;--table-highlight:rgba(var(--tango), 0.75);--table-highlight-th:linear-gradient(
+ rgba(255,255,255, 0.15)),rgb(var(--coal))}.color--marmalade{color:rgb(var(--marmalade))!important}.color-bk--marmalade{background:rgb(var(--marmalade))!important}.color-fill--marmalade{fill:rgb(var(--marmalade))!important}.color--gecko{color:rgb(var(--gecko))!important}.color-bk--gecko{background:rgb(var(--gecko))!important}.color-fill--gecko{fill:rgb(var(--gecko))!important}.color--plum{color:rgb(var(--plum))!important}.color-bk--plum{background:rgb(var(--plum))!important}.color-fill--plum{fill:rgb(var(--plum))!important}.color--candy{color:rgb(var(--candy))!important}.color-bk--candy{background:rgb(var(--candy))!important}.color-fill--candy{fill:rgb(var(--candy))!important}.color--mud{color:rgb(var(--mud))!important}.color-bk--mud{background:rgb(var(--mud))!important}.color-fill--mud{fill:rgb(var(--mud))!important}.color--slate{color:rgb(var(--slate))!important}.color-bk--slate{background:rgb(var(--slate))!important}.color-fill--slate{fill:rgb(var(--slate))!important}.color--ortolan{color:rgb(var(--ortolan))!important}.color-bk--ortolan{background:rgb(var(--ortolan))!important}.color-fill--ortolan{fill:rgb(var(--ortolan))!important}.color--tango{color:rgb(var(--tango))!important}.color-bk--tango{background:rgb(var(--tango))!important}.color-fill--tango{fill:rgb(var(--tango))!important}.color--midnight{color:rgb(var(--midnight))!important}.color-bk--midnight{background:rgb(var(--midnight))!important}.color-fill--midnight{fill:rgb(var(--midnight))!important}.color--smurf{color:rgb(var(--smurf))!important}.color-bk--smurf{background:rgb(var(--smurf))!important}.color-fill--smurf{fill:rgb(var(--smurf))!important}.color--cherry{color:rgb(var(--cherry))!important}.color-bk--cherry{background:rgb(var(--cherry))!important}.color-fill--cherry{fill:rgb(var(--cherry))!important}.color--frog{color:rgb(var(--frog))!important}.color-bk--frog{background:rgb(var(--frog))!important}.color-fill--frog{fill:rgb(var(--frog))!important}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;src:local('IBM Plex Sans'),local('IBMPlexSans'),url(../fonts/ibm-plex-sans-v2-latin-regular.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-regular.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400;src:local('IBM Plex Sans Italic'),local('IBMPlexSans-Italic'),url(../fonts/ibm-plex-sans-v2-latin-italic.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-italic.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;src:local('IBM Plex Sans Bold'),local('IBMPlexSans-Bold'),url(../fonts/ibm-plex-sans-v2-latin-700.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-700.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:700;src:local('IBM Plex Sans Bold Italic'),local('IBMPlexSans-BoldItalic'),url(../fonts/ibm-plex-sans-v2-latin-700italic.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-700italic.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;src:local('IBM Plex Sans Medium'),local('IBMPlexSans-Medium'),url(../fonts/ibm-plex-sans-v2-latin-500.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-500.woff) format('woff');font-display:swap}@font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:500;src:local('IBM Plex Sans Medium Italic'),local('IBMPlexSans-MediumItalic'),url(../fonts/ibm-plex-sans-v2-latin-500italic.woff2) format('woff2'),url(../fonts/ibm-plex-sans-v2-latin-500italic.woff) format('woff');font-display:swap}body{font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.5}.p,p:not([class]){margin-bottom:1.6rem}.p:last-child,p:not([class]):last-child{margin-bottom:0}.h1,.h2,.h3,.h4,h1:not([class]),h2:not([class]),h3:not([class]),h4:not([class]){margin-bottom:1.6rem;font-weight:700}.h1,h1:not([class]){font-size:3.2rem;margin-top:3.2rem}.h2,h2:not([class]){font-size:2.6rem;margin-top:3.2rem}.h3,h3:not([class]){font-size:2rem;margin-top:3.2rem}.h4,h4:not([class]){font-size:1.6rem;margin-top:2.4rem}.h5,.h6,h5:not([class]),h6:not([class]){font-size:1.6rem;font-weight:700}.h1+.h1,.h1+.h2,.h1+.h3,.h1+.h4,.h1+.h5,.h1+.h6,.h2+.h1,.h2+.h2,.h2+.h3,.h2+.h4,.h2+.h5,.h2+.h6,.h3+.h1,.h3+.h2,.h3+.h3,.h3+.h4,.h3+.h5,.h3+.h6,.h4+.h1,.h4+.h2,.h4+.h3,.h4+.h4,.h4+.h5,.h4+.h6,.h5+.h1,.h5+.h2,.h5+.h3,.h5+.h4,.h5+.h5,.h5+.h6,.h6+.h1,.h6+.h2,.h6+.h3,.h6+.h4,.h6+.h5,.h6+.h6,:not(.cards)>.h1:first-child,:not(.cards)>.h2:first-child,:not(.cards)>.h3:first-child,:not(.cards)>.h4:first-child,:not(.cards)>.h5:first-child,:not(.cards)>.h6:first-child,:not(.cards)>[class$=hidden]+.h1,:not(.cards)>[class$=hidden]+.h2,:not(.cards)>[class$=hidden]+.h3,:not(.cards)>[class$=hidden]+.h4,:not(.cards)>[class$=hidden]+.h5,:not(.cards)>[class$=hidden]+.h6,:not(.cards)>[class$=hidden]+h1,:not(.cards)>[class$=hidden]+h2,:not(.cards)>[class$=hidden]+h3,:not(.cards)>[class$=hidden]+h4,:not(.cards)>[class$=hidden]+h5,:not(.cards)>[class$=hidden]+h6,:not(.cards)>h1:first-child,:not(.cards)>h2:first-child,:not(.cards)>h3:first-child,:not(.cards)>h4:first-child,:not(.cards)>h5:first-child,:not(.cards)>h6:first-child,:not(.cards)>input[type=hidden]+.h1,:not(.cards)>input[type=hidden]+.h2,:not(.cards)>input[type=hidden]+.h3,:not(.cards)>input[type=hidden]+.h4,:not(.cards)>input[type=hidden]+.h5,:not(.cards)>input[type=hidden]+.h6,:not(.cards)>input[type=hidden]+h1,:not(.cards)>input[type=hidden]+h2,:not(.cards)>input[type=hidden]+h3,:not(.cards)>input[type=hidden]+h4,:not(.cards)>input[type=hidden]+h5,:not(.cards)>input[type=hidden]+h6,h1+h1,h1+h2,h1+h3,h1+h4,h1+h5,h1+h6,h2+h1,h2+h2,h2+h3,h2+h4,h2+h5,h2+h6,h3+h1,h3+h2,h3+h3,h3+h4,h3+h5,h3+h6,h4+h1,h4+h2,h4+h3,h4+h4,h4+h5,h4+h6,h5+h1,h5+h2,h5+h3,h5+h4,h5+h5,h5+h6,h6+h1,h6+h2,h6+h3,h6+h4,h6+h5,h6+h6{margin-top:0!important}.h1:last-child,.h2:last-child,.h3:last-child,.h4:last-child,.h5:last-child,.h6:last-child,h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0!important}.h1.half-space,.h2.half-space,.h3.half-space,.h4.half-space{margin-bottom:.8rem}ul:not([class]){list-style-type:disc;margin-bottom:1.6rem;margin-left:4.8rem}ul:not([class]):last-child{margin-bottom:0}.ul--no-indent{list-style-type:disc;margin-bottom:1.6rem}.ul--no-indent:last-child,dl:not([class]):last-child,ol:not([class]):last-child{margin-bottom:0}ol:not([class]){list-style-type:decimal;margin-bottom:1.6rem;margin-left:4.8rem}.dl--horizontal,dl:not([class]){margin-bottom:1.6rem}dl:not([class]) dt{font-weight:700}.dl--horizontal:last-child{margin-bottom:0}.dl--horizontal>*{display:inline}.dl--horizontal dt{font-weight:700}.dl--horizontal>dd:not(:last-child){margin-right:1.6rem}.dl--container{container-type:inline-size;container-name:dl}@container dl (max-width:60rem){.dl--horizontal>dd:not(:last-child){margin-right:0}.dl--horizontal dd::after{content:"";display:block}}.dl--grid{margin-bottom:1.6rem}.dl--grid:last-child{margin-bottom:0}.dl--grid dt{clear:left;float:left;font-weight:700;margin-right:1.6rem}.dl--grid dd{float:left}@supports (display:grid){.dl--grid{display:grid;grid-template-columns:fit-content(50%) 1fr}}@container dl (max-width:40rem){.dl--grid,.dl--horizontal>*{display:block}.dl--grid dt{float:none;margin-right:0}.dl--grid dd{float:none}}.icon-list{list-style-type:none;margin-bottom:1.6rem;padding-left:2rem}.padding--h,.padding--l{padding-left:var(--padding)}.icon-list:last-child{margin-bottom:0}.icon-list .icon{position:absolute;right:calc(100% + .4rem);top:.4rem}.icon-list .icon--tick{fill:rgb(var(--frog))}.text--large{font-size:2em}.form__error,small{font-size:1.4rem}p.text--large{margin-bottom:1.6rem}p.text--large:last-child,pre:not([class]):last-child{margin-bottom:0}pre:not([class]){margin-bottom:1.6rem}small.block{display:block;margin:0}.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.dom-hidden{display:none!important}@media only screen and (min-width:50em){:not(:has(>pre)){overscroll-behavior:contain}}pre{overscroll-behavior:auto}@supports (scrollbar-width:auto){*{scrollbar-color:color-mix(in srgb,currentColor 75%,transparent) color-mix(in srgb,currentColor 15%,transparent);scrollbar-width:auto}@supports (not (-moz-appearance:none)){*{scrollbar-width:thin}}}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-thumb{background:currentColor;opacity:.4;border-radius:10px}::-webkit-scrollbar-track{background:currentColor;opacity:.15}.js__scroll{display:block}.js__scroll[data-shadow_bottom="1"]>.js__shadow,.js__scroll[data-shadow_top="1"]:before{display:block;width:100%;height:1em;margin-top:-1em;position:sticky}.card.card--stretch-block,.cards,.page__sidebar{display:flex}.js__scroll[data-shadow_top="1"]:before{content:'';top:0;box-shadow:0 1em 1em -1em rgba(var(--onyx),.25) inset,0 1em .5em -1em rgba(var(--onyx),.25) inset,0 1em .25em -1em rgba(var(--onyx),.25) inset;z-index:110}.js__scroll[data-shadow_bottom="1"]>.js__shadow{top:calc(100% - 1em);box-shadow:0 -1em 1em -1em rgba(var(--onyx),.25) inset,0 -1em .5em -1em rgba(var(--onyx),.25) inset,0 -1em .25em -1em rgba(var(--onyx),.25) inset;z-index:111}.sidebar__content.js__scroll[data-shadow_bottom="1"]>.js__shadow,.sidebar__content.js__scroll[data-shadow_top="1"]:before{margin-left:calc(-1 * var(--padding));margin-right:calc(-1 * var(--padding));width:calc(100% + (var(--padding) *2))}.gutter--h,.gutter--l{margin-left:var(--gutter)}.gutter--h,.gutter--r{margin-right:var(--gutter)}.scroll{overflow:auto}.scroll pre{width:0}.page .text-align--left{text-align:left}.page .text-align--center{text-align:center}.page .text-align--right{text-align:right}.no-wrap{white-space:nowrap}@media only screen and (max-width:30em){.no-wrap{white-space:normal}}.gutter{margin:var(--gutter)}.gutter--v{margin-top:var(--gutter);margin-bottom:var(--gutter)}.gutter--t{margin-top:var(--gutter)}.gutter--t--double,.gutter--v--double{margin-top:calc(var(--gutter) * 2)}.gutter--b{margin-bottom:var(--gutter)}.gutter--b--double,.gutter--v--double{margin-bottom:calc(var(--gutter) * 2)}.padding{padding:var(--padding)}.theme--light{--card-background-opacity:1;--card-listing-border:rgba(var(--basalt), 0.25);--card-calout-grey-bk:rgba(var(--basalt), 0.25);--page-background:rgb(236,239,240);--page-text:var(--basalt);--table:var(--basalt);--table-tint:var(--concrete);--table-header-text:255,255,255;--table-border-opacity:0.25;--table-header-opacity:1;--table-tint-opacity:0.5;--table-highlight:rgba(var(--tango), 0.75);--table-highlight-th:linear-gradient(
rgba(var(--tango), 0.5),
rgba(var(--tango), 0.5)),rgba(var(--table), var(--table-header-opacity));--table-highlight-row:linear-gradient(
rgba(var(--tango), 0.8),
- rgba(var(--tango), 0.8)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.9);--button-ghost-text:var(--button-bk);--popup-button-bk:var(--button-bk);--popup-button-text:rgb(255,255,255);--popup-button-bk-hover:var(--button-bk-hover);--form-error:var(--cherry);--form-field-background:rgb(255,255,255);--form-field-border:rgba(var(--basalt),0.7);--form-field-border-hover:rgba(var(--basalt),0.5);--large-radios-bk:rgba(var(--basalt), 1);--large-radios-text:255,255,255;--form-select-background:linear-gradient(45deg, transparent 50%, currentColor 50%),linear-gradient(135deg, currentColor 50%, transparent 50%),var(--form-field-background)}.theme--dark{--scrollbar-track:rgba(255,255,255, 0.15);--scrollbar-thumb:rgba(255,255,255, 0.6);--scrollbar-shadow:rgba(var(--onyx), 0.75);--card-background-opacity:0.05;--card-listing-border:rgba(255,255,255, 0.15);--page-background:rgb(var(--coal));--page-text:255,255,255;--table:255,255,255;--table-tint:255,255,255;--table-header-text:255,255,255;--table-border-opacity:0.15;--table-header-opacity:0.2;--table-tint-opacity:0.1;--table-highlight:rgba(var(--tango), 0.4);--table-highlight-th:linear-gradient(
+ rgba(var(--tango), 0.8)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.9);--popup-background:255,255,255;--popup-text:var(--page-text);--popup-page-text:var(--page-text);--popup-status-link:0,115,165;--whisper:var(--concrete);--button-ghost-text:var(--button-bk);--popup-button-bk:var(--button-bk);--popup-button-text:rgb(255,255,255);--popup-button-bk-hover:var(--button-bk-hover);--form-error:var(--cherry);--form-field-background:rgb(255,255,255);--form-field-border:rgba(var(--basalt),0.7);--form-field-border-hover:rgba(var(--basalt),0.5);--large-radios-bk:rgba(var(--basalt), 1);--large-radios-text:255,255,255;--large-radios-stripe-disabled:rgba(var(--basalt),0.3);--form-select-background:linear-gradient(45deg, transparent 50%, currentColor 50%),linear-gradient(135deg, currentColor 50%, transparent 50%),var(--form-field-background)}.theme--dark{--card-background-opacity:0.05;--card-listing-border:rgba(255,255,255, 0.15);--card-calout-grey-bk:rgba(var(--concrete), 0.3);--page-background:rgb(var(--coal));--page-text:255,255,255;--table:255,255,255;--table-tint:255,255,255;--table-header-text:255,255,255;--table-border-opacity:0.15;--table-header-opacity:0.2;--table-tint-opacity:0.1;--table-highlight:rgba(var(--tango), 0.4);--table-highlight-th:linear-gradient(
rgba(var(--tango), 0.4),
rgba(var(--tango), 0.4)),rgba(var(--table), var(--table-header-opacity));--table-highlight-row:linear-gradient(
rgba(var(--tango), 0.4),
- rgba(var(--tango), 0.4)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.5);--tab-panel-background:255,255,255;--tab-text:255,255,255;--inactive-tab-background:var(--tab-panel-background);--tab-group-bk:linear-gradient(
+ rgba(var(--tango), 0.4)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.5);--tab-group-bk:linear-gradient(
rgba(255,255,255, 0.05),
- rgba(255,255,255, 0.05)),rgb(var(--coal));--tab-group-active-bk:rgba(var(--coal), 1);--accordion-border:rgba(255,255,255, 0.15);--highlights-background:rgba(255,255,255, 0.35);--copy-box-background:rgb(var(--coal));--copy-box-border:rgb(var(--smurf));--popup-background:var(--basalt);--popup-text:var(--page-text);--popup-page-text:255,255,255;--popup-status-link:255,255,255;--notifictions-bk:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),rgb(var(--coal));--notifiction-bk:rgba(var(--coal), 0.5);--notifictions-text:255,255,255;--post-it-bk:rgba(var(--post-it),0.4);--chart-border:rgba(255,255,255, 0.3);--link-color:8,161,226;--link-color-focus:var(--onyx);--button-ghost-text:rgb(255,255,255);--popup-button-bk:rgb(255,255,255);--popup-button-text:var(--button-bk);--popup-button-bk-hover:rgba(255,255,255,0.9);--form-background:rgba(var(--jet), 1);--form-footer-border:rgba(255,255,255,0.8);--form-section-footer:var(--jet);--form-fieldset:linear-gradient(
+ rgba(255,255,255, 0.05)),rgb(var(--coal));--tab-group-active-bk:rgba(var(--coal), 1);--accordion-border:rgba(255,255,255, 0.15);--highlights-background:rgba(255,255,255, 0.35);--popup-background:var(--basalt);--popup-text:var(--page-text);--popup-page-text:255,255,255;--popup-status-link:255,255,255;--whisper:var(--jet);--whisper-form:linear-gradient(
+ 0deg,
+ rgba(255,255,255,0.03) 0,
+ rgba(255,255,255,0.03) 100%
+ ),linear-gradient(
+ 0deg,
+ rgb(var(--jet)) 0,
+ rgb(var(--jet)) 100%
+ );--notifictions-bk:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),rgb(var(--coal));--notifiction-bk:rgba(var(--coal), 0.5);--notifictions-text:255,255,255;--chart-border:rgba(255,255,255, 0.3);--link-color:5,152,214;--link-color-focus:var(--onyx);--card-callout-grey-link:rgb(var(--basalt));--button-ghost-text:rgb(255,255,255);--popup-button-bk:rgb(255,255,255);--popup-button-text:var(--button-bk);--popup-button-bk-hover:rgba(255,255,255,0.9);--form-background:rgba(var(--jet), 1);--form-footer-border:rgba(255,255,255,0.8);--form-section-footer:var(--jet);--form-fieldset:linear-gradient(
rgba(255,255,255, 0.035),
rgba(255,255,255, 0.035)),rgb(var(--jet));--form-fieldset2:linear-gradient(
rgba(255,255,255, 0.07),
rgba(255,255,255, 0.07)),rgb(var(--jet));--form-fieldset3:linear-gradient(
rgba(255,255,255, 0.15),
- rgba(255,255,255, 0.15)),rgb(var(--jet));--form-step-line:rgba(255,255,255, 0.2);--form-step-icon-complete-bk:rgb(var(--smurf));--form-step-icon-incomplete-bk:rgb(var(--basalt));--form-step-icon-incomplete-fill:rgba(255,255,255, 0.5);--form-help:rgba(255,255,255, 0.25);--form-error:var(--cherry-on-dark);--form-field-background:var(--form-field-background-dark);--form-field-border:var(--form-field-border-dark);--form-field-border-hover:var(--form-field-border-hover-dark);--form-pfix-text:rgb(var(--coal));--form-pfix-warning:var(--basalt);--large-radios-bk:rgba(var(--concrete), 0.4);--large-radios-text:255,255,255;--form-select-background:var(--form-select-background-dark);--switch:rgba(255,255,255,0.3);--switch-hover:rgba(255,255,255,0.2);--file-upload-background:rgb(var(--coal));--file-upload-border:rgb(var(--smurf));--icon-colour:255,255,255}.scroll{overflow:auto;scrollbar-color:rgba(50,68,74,.4) rgba(50,68,74,.1);scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);scrollbar-width:auto}.page__sidebar .scroll{scrollbar-color:rgba(5,152,214,.4) rgba(11,11,11,.5);scrollbar-color:var(--scrollbar-sidebar-thumb) var(--scrollbar-sidebar-track)}.console.scroll,.status .scroll{scrollbar-color:rgba(255,255,255,.4) rgba(11,11,11,.2);scrollbar-color:var(--scrollbar-status-thumb) var(--scrollbar-status-track)}.scroll pre{width:0}.scroll::-webkit-scrollbar{height:10px;width:10px}.scroll::-webkit-scrollbar-track{background:var(--scrollbar-track)}.page__sidebar .scroll::-webkit-scrollbar-track{background:var(--scrollbar-sidebar-track)}.console.scroll::-webkit-scrollbar-track,.status .scroll::-webkit-scrollbar-track{background:var(--scrollbar-status-track)}.scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}.page__sidebar .scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-sidebar-thumb);border-radius:10px}.console.scroll::-webkit-scrollbar-thumb,.status .scroll::-webkit-scrollbar-thumb{background:var(--scrollbar-status-thumb);border-radius:10px}.js__scroll.scroll-shadow--top{box-shadow:0 1em 1em -1em rgba(11,11,11,.3) inset;box-shadow:0 1em 1em -1em var(--scrollbar-shadow) inset}.js__scroll.scroll-shadow--bottom{box-shadow:0 -1em 1em -1em rgba(11,11,11,.3) inset;box-shadow:0 -1em 1em -1em var(--scrollbar-shadow) inset}.js__scroll.scroll-shadow--top.scroll-shadow--bottom{box-shadow:0 1em 1em -1em rgba(11,11,11,.3) inset,0 -1em 1em -1em rgba(11,11,11,.3) inset;box-shadow:0 1em 1em -1em var(--scrollbar-shadow) inset,0 -1em 1em -1em var(--scrollbar-shadow) inset}.page__sidebar .js__scroll.scroll-shadow--top{box-shadow:0 1em 1em -1em rgba(11,11,11,.75) inset;box-shadow:0 1em 1em -1em var(--scrollbar-sidebar-shadow) inset}.page__sidebar .js__scroll.scroll-shadow--bottom{box-shadow:0 -1em 1em -1em rgba(11,11,11,.75) inset;box-shadow:0 -1em 1em -1em var(--scrollbar-sidebar-shadow) inset}.page__sidebar .js__scroll.scroll-shadow--top.scroll-shadow--bottom{box-shadow:0 1em 1em -1em rgba(11,11,11,.75) inset,0 -1em 1em -1em rgba(11,11,11,.75) inset;box-shadow:0 1em 1em -1em var(--scrollbar-sidebar-shadow) inset,0 -1em 1em -1em var(--scrollbar-sidebar-shadow) inset}.status .js__scroll.scroll-shadow--top{box-shadow:0 1em 1em -1em rgba(11,11,11,.3) inset;box-shadow:0 1em 1em -1em var(--scrollbar-status-shadow) inset}.status .js__scroll.scroll-shadow--bottom{box-shadow:0 -1em 1em -1em rgba(11,11,11,.3) inset;box-shadow:0 -1em 1em -1em var(--scrollbar-status-shadow) inset}.status .js__scroll.scroll-shadow--top.scroll-shadow--bottom{box-shadow:0 1em 1em -1em rgba(11,11,11,.3) inset,0 -1em 1em -1em rgba(11,11,11,.3) inset;box-shadow:0 1em 1em -1em var(--scrollbar-status-shadow) inset,0 -1em 1em -1em var(--scrollbar-status-shadow) inset}.page .text-align--left{text-align:left}.page .text-align--center{text-align:center}.page .text-align--right{text-align:right}.no-wrap{white-space:nowrap}@media only screen and (max-width:30em){.no-wrap{white-space:normal}}.gutter{margin:1.6rem;margin:var(--gutter)}.gutter--v{margin-top:1.6rem;margin-top:var(--gutter);margin-bottom:var(--gutter)}.gutter--h{margin-left:1.6rem;margin-left:var(--gutter);margin-right:var(--gutter)}.gutter--l{margin-left:1.6rem;margin-left:var(--gutter)}.gutter--r{margin-right:1.6rem;margin-right:var(--gutter)}.gutter--t{margin-top:1.6rem;margin-top:var(--gutter)}.gutter--t--double,.gutter--v--double{margin-top:calc(var(--gutter) * 2)}.gutter--b{margin-bottom:1.6rem;margin-bottom:var(--gutter)}.gutter--b--double,.gutter--v--double{margin-bottom:calc(var(--gutter) * 2)}.theme--light,:root{--card-background-opacity:1;--card-listing-border:rgba(var(--basalt), 0.25);--tab-group-bk:rgb(var(--concrete));--tab-group-active-bk:rgb(255,255,255);--accordion-border:rgba(var(--basalt), 0.25);--highlights-background:rgba(var(--basalt), 0.75);--copy-box-background:rgb(255,255,255);--copy-box-border:rgb(var(--smurf));--popup-background:255,255,255;--popup-text:var(--page-text);--popup-page-text:var(--page-text);--popup-status-link:0,115,165;--notifictions-bk:rgb(255,255,255);--notifiction-bk:rgba(var(--concrete), 0.4);--notifictions-text:var(--basalt);--post-it-bk:rgb(var(--post-it));--chart-border:rgba(var(--basalt), 0.5);--link-color:0,115,165;--link-color-focus:255,255,255;--form-background:rgb(var(--concrete));--form-footer-border:rgba(var(--basalt),0.7);--form-section-footer:var(--concrete);--form-fieldset:linear-gradient(
+ rgba(255,255,255, 0.15)),rgb(var(--jet));--form-step-line:rgba(255,255,255, 0.2);--form-step-icon-complete-bk:rgb(var(--smurf));--form-step-icon-incomplete-bk:rgb(var(--basalt));--form-step-icon-incomplete-fill:rgba(255,255,255, 0.5);--form-help:rgba(255,255,255, 0.25);--form-error:var(--cherry-on-dark);--form-field-background:var(--form-field-background-dark);--form-field-border:var(--form-field-border-dark);--form-field-border-hover:var(--form-field-border-hover-dark);--output-border:rgba(255,255,255,0.15);--output-opacity:0.5;--form-pfix-text:rgb(var(--coal));--form-pfix-warning:var(--basalt);--large-radios-bk:rgba(var(--concrete), 0.4);--large-radios-text:255,255,255;--large-radios-stripe-disabled:rgba(255,255,255,0.15);--form-select-background:var(--form-select-background-dark);--switch:rgba(255,255,255,0.3);--switch-hover:rgba(255,255,255,0.2);--file-upload-background:rgb(var(--coal));--file-upload-border:rgb(var(--smurf));--progress-box:rgba(255,255,255,0.2);--icon-colour:255,255,255}.cards{flex-flow:row wrap;justify-content:space-between;align-items:stretch;gap:var(--gutter);margin:var(--gutter)}.cards .cards,.cards.card--no-pad>*,.page__footer .card--no-pad,.page__header .card--no-pad{margin:0}.cards--vertical{flex-flow:column}.cards .cards .card.card--bk,.cards .cards.card--bk>.card,.cards>*,.cards>.card{background:rgba(255,255,255,var(--card-background-opacity));border-radius:var(--block-radius);flex:1 0 6rem;flex:1 0 calc(4rem + calc(var(--padding) * 2));padding:var(--padding)}.card--no-pad,.card.card--no-pad,.cards .cards>*,.cards .cards>.card,.cards.card--no-pad>*{padding:0;background:0 0}.card--no-bk,.card.card--no-bk{background:0 0}.card.card--stretch-block>*{flex:1 0 auto}.card--width-1,.card.card--width-1{flex:0 1 8%;flex:0 1 calc(calc(100% / 12) - var(--gutter))}.card--width-2,.card.card--width-2{flex:0 1 16%;flex:0 1 calc((calc(100% / 12) * 2) - var(--gutter))}.card--width-3,.card.card--width-3{flex:0 1 25%;flex:0 1 calc((calc(100% / 12) * 3) - var(--gutter))}.card--width-4,.card.card--width-4{flex:0 1 33%;flex:0 1 calc((calc(100% / 12) * 4) - var(--gutter))}.card--width-5,.card.card--width-5{flex:0 1 41%;flex:0 1 calc((calc(100% / 12) * 5) - var(--gutter))}.card--width-6,.card.card--width-6{flex:0 1 50%;flex:0 1 calc((calc(100% / 12) * 6) - var(--gutter))}.card--width-7,.card.card--width-7{flex:0 1 58%;flex:0 1 calc((calc(100% / 12) * 7) - var(--gutter))}.card--width-8,.card.card--width-8{flex:0 1 66%;flex:0 1 calc((calc(100% / 12) * 8) - var(--gutter))}.card--width-9,.card.card--width-9{flex:0 1 75%;flex:0 1 calc((calc(100% / 12) * 9) - var(--gutter))}.card--width-10,.card.card--width-10{flex:0 1 83%;flex:0 1 calc((calc(100% / 12) * 10) - var(--gutter))}.card--width-11,.card.card--width-11{flex:0 1 91%;flex:0 1 calc((calc(100% / 12) * 11) - var(--gutter))}.card--width-12,.card.card--width-12{flex:0 1 100%;flex:0 1 100% - var(--gutter)}.card--no-wrap{white-space:nowrap}.card--min-width-100,.card.card--min-width-100,.cards.card--min-width-100>*,.cards.card--min-width-100>.card{flex:1 1 100rem}.card--min-width-90,.card.card--min-width-90,.cards.card--min-width-90>*,.cards.card--min-width-90>.card{flex:1 1 90rem}.card--min-width-80,.card.card--min-width-80,.cards.card--min-width-80>*,.cards.card--min-width-80>.card{flex:1 1 80rem}.card--min-width-70,.card.card--min-width-70,.cards.card--min-width-70>*,.cards.card--min-width-70>.card{flex:1 1 70rem}.card--min-width-60,.card.card--min-width-60,.cards.card--min-width-60>*,.cards.card--min-width-60>.card,.cards.cards--min-width-large>*,.cards.cards--min-width-large>.card{flex:1 1 60rem}.card--min-width-50,.card.card--min-width-50,.cards.card--min-width-50>*,.cards.card--min-width-50>.card,.cards.cards--min-width-lardium>*,.cards.cards--min-width-lardium>.card{flex:1 1 50rem}.card--min-width-40,.card.card--min-width-40,.cards.card--min-width-40>*,.cards.card--min-width-40>.card{flex:1 1 40rem}.card--min-width-30,.card.card--min-width-30,.cards.card--min-width-30>*,.cards.card--min-width-30>.card,.cards.cards--min-width-medium>*,.cards.cards--min-width-medium>.card{flex:1 1 30rem}.card--min-width-20,.card.card--min-width-20,.cards.card--min-width-20>*,.cards.card--min-width-20>.card,.cards.cards--min-width-small>*,.cards.cards--min-width-small>.card{flex:1 1 20rem}.cards--min-width-medium:not(.cards){flex:1 1 200px}.cards--max-width{margin:auto}.cards--max-width>.cards{margin-left:calc((var(--gutter)/ 2) - var(--gutter));margin-right:calc((var(--gutter)/ 2) - var(--gutter))}.cards--max-width--small{max-width:45rem}.cards--max-width--medium{max-width:65rem}.cards--max-width--large{max-width:130rem}.card--content-width,.card.card--content-width{flex:0 0 auto}.cards--listing>*,.cards--listing>.card{background:0 0;border:1px solid var(--card-listing-border);padding:var(--padding)}.cards .cards--listing>*,.cards .cards--listing>.card{padding:var(--padding)}.cards>.card.card--callout--tango{background:rgb(var(--tango));color:rgb(var(--basalt));padding:var(--padding)}.cards>.card.card--callout--blue{background:rgb(var(--smurf));color:#fff;padding:var(--padding)}.cards>.card.card--callout--grey{background:var(--card-calout-grey-bk);padding:var(--padding)}.cards>.card.card--callout--default{background:rgba(255,255,255,var(--card-background-opacity));padding:var(--padding)}.form__switch__dot,.page{background:var(--page-background)}.max-width{max-width:60rem}html{color:rgb(var(--page-text))}html:has(.theme--light){color:rgb(var(--basalt))}.console,html:has(.theme--dark){color:#fff}.page{color:rgb(var(--page-text))}.page__header{background:rgb(var(--onyx));color:var(--header-text);padding:var(--padding)}.page__sidebar{align-self:stretch;background:var(--sidebar-background);color:var(--sidebar-text)}.page__footer{background:rgb(var(--onyx));color:rgba(255,255,255,.75);padding:var(--padding);text-align:center}@media only screen and (min-width:60rem){.page{display:flex;flex-direction:column;min-height:100vh}.page__header{flex:1 0 auto}.page__main{display:flex;flex:999 0 auto;flex-direction:row}.page__sidebar{flex:1 0 15em}.page__sidebar.page__sidebar--wider{flex:1 0 20em}.page__content{flex:999 0 0;width:100%}.page__content-inner{margin-bottom:var(--gutter)}.page__footer{flex:1 0 auto}.page--sticky{height:100vh;overflow:hidden}.page--sticky .page__content{display:flex;flex-direction:column}.page--sticky .page__content-inner{flex:999 0 auto;height:0;overflow-y:auto;margin-bottom:calc(var(--gutter)/ 2)}}.page--sticky-header .page__header{position:sticky;top:0;z-index:210}@media only screen and (max-width:calc(60rem - 1px)){.page__content-inner{margin-bottom:var(--gutter)}.sidebar__toggle .icon{transform:rotate(90deg)}}.page__header .logo{display:block;width:12rem}.js__main-menu--wrapped.js__main-menu{justify-content:center}.page__sidebar:not(.js__sidebar){flex-direction:column}.sidebar{align-self:stretch;display:flex;flex-direction:column;width:100%}.sidebar__footer,.sidebar__header{flex:0 0 auto;padding:var(--padding)}.sidebar__footer{display:flex;flex-flow:row wrap;justify-content:stretch;width:100%}.sidebar__content{min-height:4em;overflow-y:auto;flex:1 1 auto;height:0;padding:0 var(--padding)}.page__sidebar .menu{margin:0 calc(-1 * var(--padding));width:calc(100% + (var(--padding) *2))}.page__sidebar .sidebar__footer .menu{margin-bottom:calc(-1 * var(--padding))}@supports (position:sticky){.page:not(.page--sticky) .sidebar{top:0;position:sticky;max-height:100vh}}.js__sidebar .sidebar__toggle{float:right;margin:0}@media only screen and (min-width:60rem){.js__sidebar[minimized='1']{flex:0 0 5.6rem;position:relative}.js__sidebar[minimized='1'] .sidebar__content,.js__sidebar[minimized='1'] .sidebar__footer{display:none}}@media only screen and (max-width:calc(60rem - 1px)){.page:has(.js__sidebar[minimized='0']){overflow:hidden}.js__sidebar[minimized='0']{bottom:0;left:0;position:absolute;right:0;top:0;z-index:200}.sidebar__content,.sidebar__footer{display:none}.js__sidebar[minimized='0'] .sidebar__content{display:block}.js__sidebar[minimized='0'] .sidebar__footer{display:flex}}.hero{background:var(--hero-background);background-position:right top;background-size:cover;color:var(--hero-text);overflow:hidden;padding-bottom:var(--gutter)}.table [scope=row],.table th{background:rgba(var(--table),var(--table-header-opacity));font-weight:700}.table{border-collapse:separate}.table--full-width{width:100%}.table--align-center{margin-left:auto;margin-right:auto}.table td,.table th{border-bottom:solid 1px rgba(var(--table),var(--table-border-opacity));padding:.8rem var(--padding);text-align:left}.table th{color:rgb(var(--table-header-text))}.table thead+tbody [scope=row],.table__thead~tr [scope=row]{background:rgba(var(--table),var(--table-horizontal-header-opacity));font-weight:500}.table__tint td,td.table__tint{background:rgba(var(--table),var(--table-horizontal-header-opacity))}.table thead th:first-child{border-left:solid 1px rgba(var(--table),var(--table-header-opacity))}.table thead th:last-child{border-right:solid 1px rgba(var(--table),var(--table-header-opacity))}.table td:first-child{border-left:solid 1px rgba(var(--table),var(--table-border-opacity))}.table td:last-child{border-right:solid 1px rgba(var(--table),var(--table-border-opacity))}.table tbody tr:first-child td{border-top:solid 1px rgba(var(--table),var(--table-border-opacity))}.table thead+tbody tr:first-child td{border-top:none}.table .table__cell-no-pad{padding:0}.table__align--top,table.table__align--top td,table.table__align--top th{vertical-align:top}.table__align--bottom,table.table__align--bottom td,table.table__align--bottom th{vertical-align:bottom}td.table--highlight,tr.table--highlight>*{background:var(--table-highlight)}th.table--highlight,tr.table--highlight>[scope=row]{background:var(--table-highlight-th)}thead+tbody tr.table--highlight>[scope=row]{background:var(--table-highlight-row)}tr.table--highlight td.table--highlight{background:var(--table-highlight-intersect)}.table th .sort--desc .icon{transform:rotate(180deg)}.sort--inactive .icon{opacity:.4}.table td>.button{margin-bottom:-.8rem;margin-top:-.8rem}.table__nowrap,.table__nowrap--1 tr>:nth-child(1),.table__nowrap--2 tr>:nth-child(2),.table__nowrap--3 tr>:nth-child(3),.table__nowrap--4 tr>:nth-child(4),.table__nowrap--5 tr>:nth-child(5),.table__nowrap--6 tr>:nth-child(6),.table__nowrap--7 tr>:nth-child(7),.table__nowrap--8 tr>:nth-child(8),.table__nowrap--9 tr>:nth-child(9),tr.table__nowrap>*{white-space:nowrap}tr.table--grouped-with td,tr.table--grouped-with th{border-bottom:none;padding-bottom:0}td.table--grouped-with,th.table--grouped-with{padding-right:0}td.table--grouped-with+td,th.table--grouped-with+th{padding-left:.3em}.table__color-tag:after,.table__color-tag:before{content:"";width:.9rem;position:absolute;left:-1px}.table__color-tag:before{height:100%;top:0;opacity:.5}.table__color-tag:after{height:1px;bottom:-1px;opacity:.75}.table [scope=row]:before,.table__color-tag.table__tint:before,th.table__color-tag:before,tr.table__tint .table__color-tag:before{opacity:1}.table__color-tag--tango:after,.table__color-tag--tango:before{background:rgb(var(--tango))}.table__color-tag--midnight:after,.table__color-tag--midnight:before{background:rgb(var(--midnight))}.table__color-tag--smurf:after,.table__color-tag--smurf:before{background:rgb(var(--smurf))}.table__color-tag--marmalade:after,.table__color-tag--marmalade:before{background:rgb(var(--marmalade))}.table__color-tag--gecko:after,.table__color-tag--gecko:before{background:rgb(var(--gecko))}.table__color-tag--plum:after,.table__color-tag--plum:before{background:rgb(var(--plum))}.table__color-tag--candy:after,.table__color-tag--candy:before{background:rgb(var(--candy))}.table__color-tag--mud:after,.table__color-tag--mud:before{background:rgb(var(--mud))}.table__color-tag--slate:after,.table__color-tag--slate:before{background:rgb(var(--slate))}.table__color-tag--ortolan:after,.table__color-tag--ortolan:before{background:rgb(var(--ortolan))}.theme--light,:root{--tab-group-bk:rgb(var(--concrete));--tab-group-active-bk:rgb(255,255,255);--accordion-border:rgba(var(--basalt), 0.25);--highlights-background:rgba(var(--basalt), 0.75);--notifictions-bk:rgb(255,255,255);--notifiction-bk:rgba(var(--concrete), 0.4);--notifictions-text:var(--basalt);--chart-border:rgba(var(--basalt), 0.5);--link-color:var(--smurf);--link-color-focus:255,255,255;--card-callout-grey-link:rgb(255,255,255);--form-background:rgb(var(--concrete));--form-footer-border:rgba(var(--basalt),0.7);--form-section-footer:var(--concrete);--form-fieldset:linear-gradient(
rgba(255,255,255, 0.35),
rgba(255,255,255, 0.35)),rgb(var(--concrete));--form-fieldset2:linear-gradient(
rgba(255,255,255, 0.7),
rgba(255,255,255, 0.7)),rgb(var(--concrete));--form-fieldset3:linear-gradient(
rgba(255,255,255, 1),
- rgba(255,255,255, 1)),rgb(var(--concrete));--form-step-line:rgba(var(--basalt), 0.2);--form-step-icon-complete-bk:rgb(var(--midnight));--form-step-icon-incomplete-bk:rgb(255,255,255);--form-step-icon-incomplete-fill:rgba(var(--basalt), 0.5);--form-help:rgba(var(--basalt), 0.7);--form-pfix-text:rgb(255,255,255);--form-pfix-warning:var(--basalt);--switch:rgba(var(--basalt),0.5);--switch-hover:rgba(var(--basalt),0.4);--file-upload-background:rgb(255,255,255);--file-upload-border:rgb(var(--smurf));--icon-colour:var(--onyx)}.cards{flex-flow:row wrap;justify-content:space-between;align-items:stretch;margin:calc(var(--gutter)/ 2) calc(var(--gutter)/ 2) calc((var(--gutter)/ 2) - var(--gutter))}.cards--vertical{flex-flow:column}.cards .cards{margin:calc((var(--gutter)/ 2) - var(--gutter))}.cards .cards .card--bk,.cards>*{background:rgba(255,255,255,1);background:rgba(255,255,255,var(--card-background-opacity));border-radius:.3rem;border-radius:var(--block-radius);flex:1 0 6rem;flex:1 0 calc(4rem + calc(1.6rem * 2));flex:1 0 calc(4rem + calc(var(--padding) * 2));margin:calc(var(--gutter)/ 2);padding:1.6rem;padding:var(--padding)}.card--no-pad,.cards .cards>*,.cards.card--no-pad>*{padding:0;background:0 0}.page__footer .card--no-pad,.page__header .card--no-pad{margin:calc((var(--padding)/ 2) * -1)}.card--no-bk{background:0 0}.card--child-block>*{flex:1 0 auto}.card--width-1{flex:0 1 8%;flex:0 1 calc(calc(100% / 12) - 1.6rem);flex:0 1 calc(calc(100% / 12) - var(--gutter))}.card--width-2{flex:0 1 16%;flex:0 1 calc((calc(100% / 12) * 2) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 2) - var(--gutter))}.card--width-3{flex:0 1 25%;flex:0 1 calc((calc(100% / 12) * 3) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 3) - var(--gutter))}.card--width-4{flex:0 1 33%;flex:0 1 calc((calc(100% / 12) * 4) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 4) - var(--gutter))}.card--width-5{flex:0 1 41%;flex:0 1 calc((calc(100% / 12) * 5) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 5) - var(--gutter))}.card--width-6{flex:0 1 50%;flex:0 1 calc((calc(100% / 12) * 6) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 6) - var(--gutter))}.card--width-7{flex:0 1 58%;flex:0 1 calc((calc(100% / 12) * 7) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 7) - var(--gutter))}.card--width-8{flex:0 1 66%;flex:0 1 calc((calc(100% / 12) * 8) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 8) - var(--gutter))}.card--width-9{flex:0 1 75%;flex:0 1 calc((calc(100% / 12) * 9) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 9) - var(--gutter))}.card--width-10{flex:0 1 83%;flex:0 1 calc((calc(100% / 12) * 10) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 10) - var(--gutter))}.card--width-11{flex:0 1 91%;flex:0 1 calc((calc(100% / 12) * 11) - 1.6rem);flex:0 1 calc((calc(100% / 12) * 11) - var(--gutter))}.card--width-12{flex:0 1 100%;flex:0 1 100% - 1.6rem;flex:0 1 100% - var(--gutter)}.card--no-wrap{white-space:nowrap}.card--min-width-100{flex:1 1 100rem}.card--min-width-90{flex:1 1 90rem}.card--min-width-80{flex:1 1 80rem}.card--min-width-70{flex:1 1 70rem}.card--min-width-60{flex:1 1 60rem}.card--min-width-50{flex:1 1 50rem}.card--min-width-40{flex:1 1 40rem}.card--min-width-30{flex:1 1 30rem}.card--min-width-20{flex:1 1 20rem}.cards--min-width-small>*{flex:1 1 16rem}.cards--min-width-medium>*{flex:1 1 30rem}.cards--min-width-lardium>*{flex:1 1 45rem}.cards--min-width-large>*{flex:1 1 60rem}.cards--min-width-medium:not(.cards){flex:1 1 200px}.cards.card--min-width-100>*{flex:1 1 100rem}.cards.card--min-width-90>*{flex:1 1 90rem}.cards.card--min-width-80>*{flex:1 1 80rem}.cards.card--min-width-70>*{flex:1 1 70rem}.cards.card--min-width-60>*{flex:1 1 60rem}.cards.card--min-width-50>*{flex:1 1 50rem}.cards.card--min-width-40>*{flex:1 1 40rem}.cards.card--min-width-30>*{flex:1 1 30rem}.cards.card--min-width-20>*{flex:1 1 20rem}.cards--max-width{margin:auto}.cards--max-width>.cards{margin-left:calc((var(--gutter)/ 2) - var(--gutter));margin-right:calc((var(--gutter)/ 2) - var(--gutter))}.cards--max-width--small{max-width:45rem}.cards--max-width--medium{max-width:65rem}.cards--max-width--large{max-width:130rem}.card--content-width{flex:0 0 auto}.cards--listing>*{background:0 0;border:1px solid rgba(50,68,74,.25);border:1px solid var(--card-listing-border);padding:1.6rem;padding:var(--padding)}.cards .cards--listing>*{padding:1.6rem;padding:var(--padding)}.max-width{max-width:60rem}.page{background:var(--page-background);color:#32444a;color:rgb(var(--page-text))}.page__header{background:#0b0b0b;background:rgb(var(--onyx));color:#fff;color:var(--header-text);padding:1.6rem;padding:var(--padding)}.page__sidebar{align-self:stretch;background:var(--sidebar-background);color:#fff;color:var(--sidebar-text)}.page__footer{background:#0b0b0b;background:rgb(var(--onyx));color:rgba(255,255,255,.75);padding:1.6rem;padding:var(--padding);text-align:center}@media only screen and (min-width:60rem){.page{display:flex;flex-direction:column;min-height:100vh}.page__header{flex:1 0 auto}.page__main{display:flex;flex:999 0 auto;flex-direction:row}.page__sidebar{flex:1 0 15em}.page__sidebar.page__sidebar--wider{flex:1 0 20em}.page__content{flex:999 0 0;width:100%}.page__content-inner{margin-bottom:1.6rem;margin-bottom:var(--gutter)}.page__footer{flex:1 0 auto}.page--sticky{height:100vh;overflow:hidden}.page--sticky .page__content{display:flex;flex-direction:column}.page--sticky .page__content-inner{flex:999 0 auto;height:0;overflow-y:auto;margin-bottom:calc(var(--gutter)/ 2)}}.page--sticky-header .page__header{position:sticky;top:0;z-index:3}@media only screen and (max-width:calc(60rem - 1px)){.page__sidebar--expanded{overflow:hidden}.page__sidebar--expanded .page__sidebar{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}.page__content-inner{margin-bottom:1.6rem;margin-bottom:var(--gutter)}}.page__header .logo{display:block;width:12rem}.js__main-menu--wrapped.js__main-menu{justify-content:center}.sidebar{align-self:stretch;display:flex;flex-direction:column;width:100%}.sidebar__footer,.sidebar__header{flex:0 0 auto;padding:1.6rem;padding:var(--padding)}.sidebar__footer{display:flex;flex-flow:row wrap;justify-content:stretch;width:100%}.sidebar__content{min-height:4em;overflow-y:auto;flex:1 1 auto;height:0;padding:0 1.6rem;padding:0 var(--padding)}.page__sidebar .menu{margin:0 calc(-1 * var(--padding));width:calc(100% + (1.6rem*2));width:calc(100% + (var(--padding) *2))}.page__sidebar .sidebar__footer .menu{margin-bottom:calc(-1 * var(--padding))}@supports (position:sticky){.page:not(.page--sticky) .sidebar{top:0;position:sticky;max-height:100vh}}.page__sidebar .logo{display:block;max-width:12rem}.page__sidebar .logo .logo__icon{display:none}@media only screen and (min-width:60rem){.page__sidebar--minimised .sidebar__content,.page__sidebar--minimised .sidebar__footer,.page__sidebar.page__sidebar--minimised .logo .logo__full{display:none}.page__properties.page__sidebar--minimised,.page__sidebar.page__sidebar--minimised{flex:0 0 5.6rem;position:relative}.page__sidebar.page__sidebar--minimised .logo{margin-top:1.6rem;margin-top:var(--gutter);max-width:4rem}.page__sidebar.page__sidebar--minimised .logo .logo__icon{clear:both;display:block;margin:0 .4rem}}.page__sidebar .sidebar__toggle{display:none}.page__sidebar .sidebar__toggle,.page__sidebar .sidebar__toggle__mob{float:right;margin:0}.page__sidebar .sidebar__toggle .icon,.page__sidebar .sidebar__toggle__mob .icon{transform:rotate(180deg)}@media only screen and (min-width:60rem){.page__sidebar--minimised .sidebar__toggle{float:none}.page__sidebar--minimised .sidebar__toggle .icon{transform:rotate(00deg)}.page__sidebar .sidebar__toggle{display:block}.page__sidebar .sidebar__toggle__mob{display:none}}@media only screen and (max-width:calc(60rem - 1px)){.page__sidebar .sidebar__toggle__mob{display:block}.sidebar__toggle__mob .icon{transition:transform .2s}.page__sidebar--expanded .sidebar__toggle__mob .icon{transform:rotate(270deg)}.page__sidebar--expanded .sidebar__toggle__mob[aria-pressed=true] .icon{transform:rotate(90deg)}.sidebar__content,.sidebar__footer{display:none}.page__sidebar--expanded .sidebar__content{display:block}.page__sidebar--expanded .sidebar__footer{display:flex}}.accordion__toggle .icon,.form__switch__dot{transition:all .2s ease-in-out}.profile{align-items:center;display:flex;margin:0 .4rem .4rem 0;margin-right:calc((4rem - (var(--padding)/ 2)) * -1)}.profile__av{border-radius:.3rem;border-radius:var(--button-radius);overflow:hidden;width:4rem}.profile__name{flex:1 1 auto;padding:calc(var(--padding)/ 4)}.sidebar__logout{align-self:flex-end;justify-self:flex-end;margin-bottom:.4rem;margin-left:calc(4rem + (var(--padding)/ 4))}.table{border-collapse:separate}.table--full-width{width:100%}.table--align-center{margin-left:auto;margin-right:auto}.table td,.table th{border-bottom:solid 1px rgba(50,68,74,.25);border-bottom:solid 1px rgba(var(--table),var(--table-border-opacity));padding:.8rem 1.6rem;padding:.8rem var(--padding);text-align:left}.table th{background:rgba(50,68,74,1);background:rgba(var(--table),var(--table-header-opacity));color:#fff;color:rgb(var(--table-header-text));font-weight:700}.table [scope=row]{background:rgba(50,68,74,1);background:rgba(var(--table),var(--table-header-opacity));font-weight:700}.table thead+tbody [scope=row],.table__thead~tr [scope=row]{background:rgba(50,68,74,.1);background:rgba(var(--table),var(--table-horizontal-header-opacity));font-weight:500}.table__tint td,td.table__tint{background:rgba(50,68,74,.1);background:rgba(var(--table),var(--table-horizontal-header-opacity))}.table thead th:first-child{border-left:solid 1px rgba(50,68,74,1);border-left:solid 1px rgba(var(--table),var(--table-header-opacity))}.table thead th:last-child{border-right:solid 1px rgba(50,68,74,1);border-right:solid 1px rgba(var(--table),var(--table-header-opacity))}.table td:first-child{border-left:solid 1px rgba(50,68,74,.25);border-left:solid 1px rgba(var(--table),var(--table-border-opacity))}.table td:last-child{border-right:solid 1px rgba(50,68,74,.25);border-right:solid 1px rgba(var(--table),var(--table-border-opacity))}.table tbody tr:first-child td{border-top:solid 1px rgba(50,68,74,.25);border-top:solid 1px rgba(var(--table),var(--table-border-opacity))}.table thead+tbody tr:first-child td{border-top:none}.table .table__cell-no-pad{padding:0}td.table--highlight,tr.table--highlight>*{background:var(--table-highlight)}th.table--highlight,tr.table--highlight>[scope=row]{background:var(--table-highlight-th)}thead+tbody tr.table--highlight>[scope=row]{background:var(--table-highlight-row)}tr.table--highlight td.table--highlight{background:var(--table-highlight-intersect)}.table th .sort--desc .icon{transform:rotate(180deg)}.table td>.button{margin-bottom:-.8rem;margin-top:-.8rem}.table__nowrap,.table__nowrap--1 tr>:nth-child(1),.table__nowrap--2 tr>:nth-child(2),.table__nowrap--3 tr>:nth-child(3),.table__nowrap--4 tr>:nth-child(4),.table__nowrap--5 tr>:nth-child(5),.table__nowrap--6 tr>:nth-child(6),.table__nowrap--7 tr>:nth-child(7),.table__nowrap--8 tr>:nth-child(8),.table__nowrap--9 tr>:nth-child(9),tr.table__nowrap>*{white-space:nowrap}tr.table--grouped-with td,tr.table--grouped-with th{border-bottom:none;padding-bottom:0}td.table--grouped-with,th.table--grouped-with{padding-right:0}td.table--grouped-with+td,th.table--grouped-with+th{padding-left:.3em}.table__color-tag:after,.table__color-tag:before{content:"";width:.9rem;position:absolute;left:-1px}.table__color-tag:before{height:100%;top:0;opacity:.5}.table__color-tag:after{height:1px;bottom:-1px;opacity:.75}.table [scope=row]:before,.table__color-tag.table__tint:before,th.table__color-tag:before,tr.table__tint .table__color-tag:before{opacity:1}.table__color-tag--tango:after,.table__color-tag--tango:before{background:#f0981b;background:rgb(var(--tango))}.table__color-tag--midnight:after,.table__color-tag--midnight:before{background:#002c3e;background:rgb(var(--midnight))}.table__color-tag--smurf:after,.table__color-tag--smurf:before{background:#0598d6;background:rgb(var(--smurf))}.table__color-tag--marmalade:after,.table__color-tag--marmalade:before{background:#f44a02;background:rgb(var(--marmalade))}.table__color-tag--gecko:after,.table__color-tag--gecko:before{background:#62c400;background:rgb(var(--gecko))}.table__color-tag--plum:after,.table__color-tag--plum:before{background:#aa00fa;background:rgb(var(--plum))}.table__color-tag--candy:after,.table__color-tag--candy:before{background:#ff42b4;background:rgb(var(--candy))}.table__color-tag--mud:after,.table__color-tag--mud:before{background:#984900;background:rgb(var(--mud))}.table__color-tag--slate:after,.table__color-tag--slate:before{background:#98938a;background:rgb(var(--slate))}.table__color-tag--ortolan:after,.table__color-tag--ortolan:before{background:#0035f1;background:rgb(var(--ortolan))}.tab-panel{background:rgba(255,255,255,.1);background:rgba(var(--tab-panel-background),.1);border-radius:.3rem;border-radius:var(--block-radius);overflow:hidden}.page__sidebar .tab-panel{background:rgba(var(--menu-sidebar-background),.15)}.tab-panel__header{display:flex;flex-direction:row-reverse;align-items:flex-start}.tab-panel__header .tab-panel__icon{fill:rgba(11,11,11,.3);fill:rgba(var(--icon-colour),.3);flex:0 0 auto;margin:1.6rem;margin:var(--padding)}.tab-panel__header .tab-panel__title{align-self:center;flex:1 1 auto;margin:0}.tab-panel__header .tab-panel__toggle{flex:0 0 auto;margin:0}.tab-panel__header .tab-panel__toggle .icon{transform:rotate(90deg)}.tab-panel__header .tab-panel__toggle[aria-expanded=false] .icon{transform:rotate(0)}.tab-panel__inner.minimised{display:none}.tab-panel__tabs{display:flex;padding:0 1.6rem;padding:0 var(--gutter)}.tab-panel__tab{background:rgba(255,255,255,.2);background:rgba(var(--inactive-tab-background),.2);border:none;border-radius:.3rem .3rem 0 0;border-radius:var(--button-radius) var(--button-radius) 0 0;color:#fff;color:rgb(var(--tab-text));font-size:100%;padding:.8rem 1.2rem;text-align:center}.page__sidebar .tab-panel__tab{background:rgba(var(--menu-sidebar-background),.35)}.tab-panel__tab:focus,.tab-panel__tab:focus-visible{box-shadow:-4px -4px 0 0 #0073a5,4px -4px 0 0 #0073a5,-4px 0 0 0 #0073a5,4px 0 0 0 #0073a5;box-shadow:-4px -4px 0 0 rgb(var(--link-color)),4px -4px 0 0 rgb(var(--link-color)),-4px 0 0 0 rgb(var(--link-color)),4px 0 0 0 rgb(var(--link-color))}.tab-panel__tab:focus:not(:focus-visible){box-shadow:none}.tab-panel__tab:hover{background:rgba(255,255,255,.15);background:rgba(var(--inactive-tab-background),.15)}.page__sidebar .tab-panel__tab:hover{background:rgba(var(--menu-sidebar-background),.3)}.tab-panel__tab+.tab-panel__tab{margin-left:.4rem}.tab-panel__tab[aria-selected=true]{background:rgba(255,255,255,.1);background:rgba(var(--tab-panel-background),.1)}.page__sidebar .tab-panel__tab[aria-selected=true]{background:rgba(var(--menu-sidebar-background),.2)}.js .tab-panel__content{display:none;padding:1.6rem;padding:var(--padding)}.js .tab-panel__tabs~.tab-panel__content{background:rgba(255,255,255,.1);background:rgba(var(--tab-panel-background),.1)}.js .page__sidebar .tab-panel__tabs~.tab-panel__content{background:rgba(var(--menu-sidebar-background),.2)}.tab-panel__content.tab-panel__active{display:block}.tab-group.tab-group--box{background:var(--tab-group-bk);border-radius:.3rem;border-radius:var(--block-radius);padding:1.6rem;padding:var(--padding)}.tab-group__tabs{display:none;z-index:1}.js .tab-group__tabs{display:block}.tab-group__tab.button{padding:.8rem 1.6rem;padding:.8rem var(--padding);border-radius:.3rem .3rem 0 0;border-radius:var(--button-radius) var(--button-radius) 0 0;box-shadow:none;margin:0}.tab-group__tab[aria-selected=true]:hover,.tab-group__tab[aria-selected=true]:not(:hover){background:var(--tab-group-bk);color:#32444a;color:rgb(var(--page-text))}.tab-group--box .tab-group__tab[aria-selected=true]:hover,.tab-group--box .tab-group__tab[aria-selected=true]:not(:hover){background:var(--tab-group-active-bk)}.tab-group__content{background:var(--tab-group-bk);border-radius:.3rem;border-radius:var(--block-radius);padding:1.6rem;padding:var(--padding)}.tab-group--box .tab-group__content{background:var(--tab-group-active-bk);padding:1.6rem;padding:var(--padding)}.tab-group__content+.tab-group__content{margin-top:1.6rem;margin-top:var(--gutter)}.js .tab-group__content{display:none;border-radius:0 .3rem .3rem;border-radius:0 var(--block-radius) var(--block-radius)}.js .tab-group__content+.tab-group__content{margin-top:0}.js .tab-group__content--active{display:block}.accordion__item{border:1px solid rgba(50,68,74,.25);border:1px solid var(--accordion-border);column-gap:1.6rem;column-gap:var(--padding);display:grid;grid-template-columns:1fr fit-content(50%);grid-template-areas:'a b''c c';padding:.8rem 1.6rem;padding:.8rem var(--padding)}.accordion__item+.accordion__item{border-top:none}.accordion__item:first-child{border-radius:.3rem .3rem 0 0;border-radius:var(--button-radius) var(--button-radius) 0 0}.accordion__item:last-child{border-radius:0 0 .3rem .3rem;border-radius:0 0 var(--button-radius) var(--button-radius)}.accordion__visible{grid-area:a}.accordion__button,.accordion__toggle{grid-area:b;margin:-.8rem calc(var(--padding) * -1)!important;white-space:nowrap}.accordion__button.button--ghost,.accordion__toggle.button--ghost{margin:-.8rem 0!important}.accordion__toggle[aria-expanded=false] .icon{transform:rotate(90deg)}.accordion__toggle[aria-expanded=true] .icon{transform:rotate(-90deg)}.accordion__content{grid-area:c;margin:-.8rem calc(var(--padding) * -1);margin-top:.4rem;padding:.3rem 1.6rem;padding:.3rem var(--padding);transition:max-height .3s ease-in-out}[aria-expanded=false]+.accordion__content{max-height:0;padding:.3rem 1.6rem;padding:.3rem var(--padding);visibility:hidden}[aria-expanded=true]+.accordion__content{max-height:100vh;padding:.8rem 1.6rem;padding:.8rem var(--padding);visibility:visible}@media only screen and (max-width:18em){.accordion__item{display:block}.accordion .accordion__item .accordion__button,.accordion .accordion__item .accordion__toggle{display:block;margin:0 auto -.8rem!important}}.console{background:#171818;background:rgb(var(--coal));color:#fff}.console--light{background:#fff;color:#171818;color:rgb(var(--coal))}.console pre{padding:calc(var(--padding)/ 2);max-height:30rem}.table .console pre{padding-left:1.6rem;padding-left:var(--padding);padding-right:1.6rem;padding-right:var(--padding)}.highlights{--border-width:0 4px 0 0;--display:flex;--dl:block;--pad:var(--padding);--radius:var(--block-radius) 0 0 var(--block-radius)}@media only screen and (max-width:40rem){.highlights--width-40{--border-width:0 0 4px 0;--display:block;--dl:grid;--pad:0 var(--padding) var(--padding) var(--padding);--radius:var(--block-radius) var(--block-radius) 0 0}}@media only screen and (max-width:60rem){.highlights--width-60{--border-width:0 0 4px 0;--display:block;--dl:grid;--pad:0 var(--padding) var(--padding) var(--padding);--radius:var(--block-radius) var(--block-radius) 0 0}}@media only screen and (max-width:80rem){.highlights--width-80{--border-width:0 0 4px 0;--display:block;--dl:grid;--pad:0 var(--padding) var(--padding) var(--padding);--radius:var(--block-radius) var(--block-radius) 0 0}}.page .highlights{background:var(--highlights-background);color:#fff;display:var(--display)}.highlights__section{flex:0 1 auto;padding:var(--pad);white-space:nowrap;display:flex;align-items:center}.highlights__status,.highlights__status+.highlights__section{padding-top:1.6rem;padding-top:var(--padding)}.highlights__section:last-child{flex-grow:1}.highlights__section--wrap{flex-grow:999;white-space:normal}.highlights__status{border:4px solid #eceff0;border:4px solid var(--page-background);border-radius:var(--radius);border-width:var(--border-width)}.highlights .dl--horizontal{display:var(--dl);grid-template-columns:fit-content(50%) 1fr}.highlights .dl--horizontal dt{margin-right:.4rem}.highlight--right{justify-content:flex-end}.highlights a:not([class]){color:currentColor}.highlights a:focus-visible:not([class]),.highlights a:focus:not([class]){background:#fff;color:#171818;color:rgb(var(--coal))}.highlights a:focus:not(:focus-visible):not([class]){background:0 0;color:currentColor}.highlights__status.highlights__status--good{background:#006729;background:rgb(var(--frog))}.highlights__status.highlights__status--goodish{background:linear-gradient(45deg,rgba(var(--cherry),1) 49%,rgba(var(--frog),1) 50%)}.highlights__status.highlights__status--bad{background:#9b1200;background:rgb(var(--cherry))}.copy-box{align-items:start;display:inline-grid;grid-template-columns:1fr max-content}.copy-box__content{border:1px dashed #0598d6;border:1px dashed var(--copy-box-border);background:var(--copy-box-background);padding:.8rem;user-select:all}.copy-box__content--focussed,.copy-box__content:focus{animation:to-copy .1s step-end forwards}@keyframes to-copy{to{-webkit-user-select:text;user-select:text}}.copy-box__content--copied{animation:copy-box .5s ease-out;animation-fill-mode:forwards}@keyframes copy-box{0%,100%{background:rgba(5,152,214,0);background:rgba(var(--smurf),0)}50%{background:rgba(5,152,214,.25);background:rgba(var(--smurf),.25)}}.copy-box__button{flex:0 0 auto}.callout{background:rgba(240,152,27,.5);background:rgba(var(--tango),.5);border-radius:.3rem;border-radius:var(--block-radius);padding:1.6rem;padding:var(--padding);text-align:center}.popup,.status{padding:1.6rem}.callout ul{margin-left:auto;margin-right:auto;display:inline-block}.callout li{text-align:left}.status-label{font-size:1.4rem;font-weight:700;text-transform:uppercase;white-space:nowrap}a.status-label{color:currentcolor}a.status-label:hover{text-decoration:none}a.status-label:focus,a.status-label:focus-visible{background:#0073a5;background:rgb(var(--link-color));border-radius:2px;color:#fff;color:rgb(var(--link-color-focus));text-decoration:none}a.status-label:focus:not(:focus-visible){background:0 0;border-radius:0;color:#0073a5;color:rgb(var(--link-color));text-decoration:underline}.status-label .icon{fill:inherit}a.status-label:focus .icon,a.status-label:focus-visible .icon{fill:#fff;fill:rgb(var(--link-color-focus))}a.status-label:focus:not(:focus-visible) .icon{fill:#0073a5;fill:rgb(var(--link-color))}.status{background:#32444a;background:rgb(var(--basalt));border-radius:.3rem;border-radius:var(--block-radius);color:#fff;padding:var(--padding)}.status .status__close-button,.status__actions,.status__icon,.status__title{display:none}.status .icon{fill:currentColor}.status--cb .status__close-button{display:block;margin:0;position:absolute;right:0;top:0}.status--cb .status__content,.status--cb .status__title{margin-right:calc(4rem - var(--padding))}.status--title .status__title{display:block}.status--title.status--cb .status__content{margin-right:0}.status--icon .status__icon{display:block;left:1.6rem;left:var(--padding);position:absolute;top:1.6rem;top:var(--padding);width:3.2rem;height:3.2rem;max-height:50%}.status--icon .status__content,.status--icon .status__title{margin-left:calc(var(--padding) + 3.2rem)}.status.status--small{padding:calc(var(--padding)/ 2)}.status--icon.status--small .status__icon{width:2rem;height:2rem;top:calc(1.6rem / 2);top:calc(var(--padding)/ 2)}.status--icon.status--small .status__content{margin-left:calc(var(--padding) + 2rem)}.status--actions{padding-bottom:calc(var(--padding) + calc(var(--padding)/ 2))}.status--actions .status__actions{display:block;padding-top:calc(var(--gutter)/ 4);text-align:center}.status--actions:not(.status--small) .status__actions{padding-top:calc(var(--gutter) * 2)}.status a{color:#fff}.popup:not(.status--success):not(.status--error) a:not([class]){color:#0073a5;color:rgb(var(--popup-status-link))}.status--error{background:#9b1200!important;background:rgb(var(--cherry))!important}.status--success{background:#006729!important;background:rgb(var(--frog))!important}.popup__freeze-page{overflow:hidden}.popup__overlay{align-items:center;background:rgba(23,24,24,.9);background:rgba(var(--coal),.9);bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:100}.popup{background:#fff;background:rgb(var(--popup-background));border-radius:.3rem;border-radius:var(--block-radius);box-shadow:0 20px 20px 4px rgba(11,11,11,.9);box-shadow:0 20px 20px 4px rgba(var(--onyx),.9);color:#fff;display:inline-flex;flex-direction:column;margin:1.6rem 0;margin:var(--gutter) 0;padding:var(--padding);width:60rem}.popup:not(.status--success):not(.status--error){color:#32444a;color:rgb(var(--popup-page-text))}.popup .status__actions,.popup .status__title{flex:0 0 auto}.popup .status__content{flex:1 0 auto;max-height:calc(100vh - 22rem)}.status--tiny{display:inline-block;padding:calc(var(--padding)/ 2);padding-right:1.6rem;padding-right:var(--padding)}.status--tiny .status__icon{display:block;left:1.6rem;left:var(--padding);position:absolute;max-height:50%;width:2rem;height:2rem;top:calc(1.6rem/ 1.8);top:calc(var(--padding)/ 1.8)}.status--tiny .status__icon~.status__content{margin-left:calc(var(--padding) + 2rem);display:flex;flex-wrap:wrap;gap:.8rem}.status--tiny .status__actions{display:inline-block;margin:-.8rem 0}.notifications--popup.notifications{display:inline-block;position:relative;z-index:1}.notifications .button.notification__button:first-child{margin-left:calc((var(--gutter)/ 2) - 2px)!important;margin-right:0!important}.notifications .button.notification__button[aria-expanded=true]{background:var(--notifictions-bk)!important;position:relative;z-index:1}.button.notification__button[aria-expanded=true]:after{background:var(--notifictions-bk);bottom:-8px;content:'';display:block;height:10px;left:0;position:absolute;width:100%}.button.notification__button .icon{height:2.4rem;margin:-4px -12px;width:2.4rem}.button.notification__button[aria-expanded=true] .icon{fill:#0598d6;fill:rgb(var(--smurf))}.notification__button use{display:none}.notification__button--empty use[href$=icon-bell--empty],.notification__button--new use[href$=icon-bell--existing],.notification__button--new use[href$=icon-bell--new],.notification__button--old use[href$=icon-bell--existing]{display:block}.notification__button--new use[href$=icon-bell--new]{fill:#f0981b;fill:rgb(var(--tango))}.notifications--popup .notifications__panel{background:var(--notifictions-bk);box-shadow:0 1px 6px 0 rgba(11,11,11,.9);box-shadow:0 1px 6px 0 rgba(var(--onyx),.9);color:#32444a;color:rgb(var(--notifictions-text));display:none;padding:1.6rem;padding:var(--padding);position:absolute;right:0;text-align:left;top:calc(100% + 3px);width:40rem}.chart,.notification{position:relative}.button,.post-it__footer{text-align:center}.notification__button[aria-expanded=true]+.notifications__panel{display:block}.notification__list{padding-bottom:1.6rem;padding-bottom:var(--padding);padding-top:1.6rem;padding-top:var(--padding)}.notification__list-inner{display:flex;flex-direction:column;gap:1.6rem;gap:var(--padding)}.notification{background:var(--notifiction-bk);border-radius:.3rem;border-radius:var(--block-radius);padding:1.6rem;padding:var(--padding)}.notification .notification__title{font-weight:700;padding-right:.8rem}.icon.notification-pin{fill:currentColor;height:1.6rem;position:absolute;right:.4rem;top:.4rem;width:1.6rem}.notification-delete{position:absolute;right:calc(1.6rem / 2);right:calc(var(--padding)/ 2);bottom:calc(1.6rem / 2);bottom:calc(var(--padding)/ 2)}.notification__empty-text{margin:.8rem 0 1.6rem}.notification--time{fill:#0598d6;fill:rgb(var(--smurf))}.notification--info{fill:#006729;fill:rgb(var(--frog))}.notification--alert{fill:#9b1200;fill:rgb(var(--cherry))}@media only screen and (max-width:37.5rem){.notifications--popup.notifications{position:static}.notifications--popup .notifications__panel{left:0;margin-top:3px;right:auto;top:auto;width:100%}}.page--sticky-header .notifications--popup .notification__button[aria-expanded=true]+.notifications__panel{display:flex;flex-direction:column;max-height:calc(100vh - 4.5em)}.page--sticky-header .notifications--popup .notifications__panel>*{flex:0 0 auto}.page--sticky-header .notifications--popup .notification__list{flex:1 1 auto;margin-bottom:1.6rem;margin-bottom:var(--padding);margin-top:1.6rem;margin-top:var(--padding);padding-top:0;padding-bottom:0}.post-it{background:var(--post-it-bk);border-radius:.3rem;border-radius:var(--block-radius);padding:1.6rem;padding:var(--padding)}.form__row--footer:before,.post-it__footer:before{border-radius:1px;content:''}.post-it+.post-it{margin-top:1.6rem;margin-top:var(--gutter)}.post-it-table :not(.icon)[aria-hidden=true]{display:none}.post-it__title{margin-top:0}.post-it__content--monospaced{font-family:'Courier New',Courier,monospace}.button,.menu__form-button{font-family:inherit;line-height:inherit}.post-it__footer:before{background:var(--form-footer-border);display:block;height:2px;margin-bottom:calc(var(--gutter) + 2px);margin-top:calc(var(--gutter)/ 2);opacity:.2}.button--clear:hover,.button.toggle--play-pause[data-toggled]:hover,a:hover:not([class]){opacity:.9}.chart canvas,.js .chart__table{position:absolute}.no-js .chart{display:none}.js .chart__table{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;white-space:nowrap;width:1px}.percentage-bar{border:1px solid rgba(50,68,74,.5);border:1px solid var(--chart-border);border-radius:.3rem;border-radius:var(--button-radius);height:8px;position:relative}.percentage-bar__progress{background:#f0981b;background:rgb(var(--tango));height:100%;left:0;position:absolute}a:not([class]){color:#0073a5;color:rgb(var(--link-color));text-decoration:underline;outline:0;padding:.2rem .1rem}a:hover:not([class]){text-decoration:none}a:focus-visible:not([class]),a:focus:not([class]){background:#0073a5;background:rgb(var(--link-color));border-radius:2px;color:#fff;color:rgb(var(--link-color-focus));text-decoration:none}a:focus:not(:focus-visible):not([class]){background:0 0;border-radius:0;color:#0073a5;color:rgb(var(--link-color));text-decoration:underline}.page__sidebar a:not([class]){color:#0598d6;color:rgb(var(--smurf))}.page__sidebar a:focus:not([class]){color:#002c3e;color:rgb(var(--midnight))}.button--small[target='_blank'] .button__text:after,.button[target='_blank']:not(.button--small):after,a.menu__content[target='_blank'] .menu__text:after,a[target='_blank']:not([class]):after{color:currentColor;content:'\279C';display:inline-block;font-size:.7em;line-height:.1em;margin-left:.2em;transform:rotate(-45deg);vertical-align:super}.button{background:0 0;border:none;direction:ltr;display:inline-block;font-size:100%;font-weight:400;outline:0;text-decoration:none}.button--small .button__text,.button:not(.button--small){border-radius:.3rem;border-radius:var(--button-radius)}.button .button__text{pointer-events:none}.button:not(.button--small):not(.button--text){padding:.8rem 2rem}.button--text{padding:.8rem .1rem}.button:not(.button--small):not(.button--text)[target="_blank"]{padding-right:1.2rem}.button--small{padding:.6rem 0}.button--small .button__text{display:inline-block;padding:.2rem .8rem}.button__container{display:inline-block}.button,.button__container .button{margin:0 calc((var(--gutter)/ 2) - 2px)}.button--small,.button__container .button--small{margin:0 calc((var(--gutter)/ 4) - 2px)}.button__container:first-child .button:first-child,:not(.button__container)>.button:first-child{margin-left:0}.button__container:last-child .button:last-child,:not(.button__container)>.button:last-child{margin-right:0}.button--small:not(.button--ghost) .button__text,.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){background:var(--button-bk);box-shadow:0 1px 0 0 rgba(50,68,74,.3);box-shadow:0 1px 0 0 rgba(var(--button-shadow),.3);color:#fff}.button--small:not(.button--ghost):hover .button__text,.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover{background:var(--button-bk-hover);box-shadow:none}.buttons--light .button--small:not(.button--ghost) .button__text,.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),.status .button--small:not(.button--ghost) .button__text,.status .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),.table th .button--small:not(.button--ghost) .button__text,.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){background:#fff;color:#004c6c;color:var(--button-bk)}.buttons--light .button--small:not(.button--ghost):hover .button__text,.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,.status .button--small:not(.button--ghost):hover .button__text,.status .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,.table th .button--small:not(.button--ghost):hover .button__text,.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover{background:rgba(255,255,255,.9)}.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){background:var(--popup-button-bk);color:#fff;color:var(--popup-button-text)}.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover{background:var(--popup-button-bk-hover);box-shadow:none}.button--ghost.button--small .button__text,.button--ghost:not(.button--small){box-shadow:0 0 0 1px #004c6c inset;box-shadow:0 0 0 1px var(--button-bk) inset;color:#004c6c;color:var(--button-ghost-text)}.button--ghost.button--small:hover .button__text,.button--ghost:not(.button--small):hover{box-shadow:0 0 0 2px #00567b inset;box-shadow:0 0 0 2px var(--button-bk-hover) inset}.buttons--light .button--ghost.button--small .button__text,.buttons--light .button--ghost:not(.button--small),.status .button--ghost.button--small .button__text,.status .button--ghost:not(.button--small),.table th .button--ghost.button--small .button__text,.table th .button--ghost:not(.button--small){box-shadow:0 0 0 1px #fff inset;color:#fff}.buttons--light .button--ghost.button--small:hover .button__text,.buttons--light .button--ghost:not(.button--small):hover,.status .button--ghost.button--small:hover .button__text,.status .button--ghost:not(.button--small):hover,.table th .button--ghost.button--small:hover .button__text,.table th .button--ghost:not(.button--small):hover{box-shadow:0 0 0 2px #fff inset}.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear){box-shadow:0 0 0 1px #004c6c inset;box-shadow:0 0 0 1px var(--popup-button-bk) inset;color:#004c6c;color:var(--popup-button-bk)}.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear):hover{box-shadow:0 0 0 2px #004c6c inset;box-shadow:0 0 0 2px var(--popup-button-bk) inset}.button--text:not(.button--small){color:#0073a5;color:rgb(var(--link-color));text-decoration:underline}.button--text:not(.button--small):hover{text-decoration:none}.button--clear{color:currentColor}.button.button--large .icon{display:block;height:4.8rem;margin:auto auto .8rem;width:4.8rem}.button.button--large .icon+.button__text{margin-left:0}.button--small:focus .button__text,.button--small:focus-visible .button__text,.button:not(.button--small):focus,.button:not(.button--small):focus-visible{box-shadow:0 0 0 4px #0598d6!important;box-shadow:0 0 0 4px rgb(var(--smurf))!important}.button--small:not(.button--ghost):focus:not(:focus-visible) .button__text,.button:not(.button--small):not(.button--ghost):focus:not(:focus-visible){box-shadow:none!important}.button--ghost:not(.button--small):focus:not(:focus-visible),.button--small.button--ghost:focus:not(:focus-visible) .button__text{box-shadow:0 0 0 1px #004c6c inset!important;box-shadow:0 0 0 1px var(--popup-button-bk) inset!important}.button--toggle .toggle__2,.button--toggle:not(.js__button--toggle),.button--toggle[data-toggled] .toggle__1{display:none}.button--toggle .toggle__1,.button--toggle[data-toggled] .toggle__2{display:block}.toggle__text{margin-left:.4rem}.menu{position:relative}.menu__group{text-align:left}.scroll .menu{margin-top:0;margin-bottom:0}.table .menu.menu--vertical.menu--dropdown{display:inline-flex;margin:0 calc((var(--gutter)/ 2) - 2px)}.table .menu.menu--vertical.menu--dropdown:first-child{margin-left:0}.table .menu.menu--vertical.menu--dropdown:last-child{margin-right:0}.menu__title{padding:0 1.6rem;padding:0 var(--padding)}.menu:not(.js__menu):not([data-menu-behaviour=open]) .menu__item .menu__group,.menu:not(.js__menu)>.menu__main-toggle+.menu__group{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.menu [aria-expanded=false]~.menu__group{display:none}.menu [aria-expanded=true]~.menu__group{display:block}.menu--horizontal>[aria-expanded=true]~.menu__group{display:inline-flex}.menu--horizontal>.menu__group{display:inline-flex;flex-wrap:nowrap}.menu--horizontal>.menu__group>.menu__item>.menu__group{box-shadow:0 1px 2px 0 rgba(11,11,11,.5);box-shadow:0 1px 2px 0 rgba(var(--menu-shadow),.5);position:absolute;z-index:5}.menu__group--boundary+.menu__group{right:0}.menu--vertical .menu__main-toggle+.menu__group{position:absolute;top:100%;z-index:3;border-radius:0 0 .3rem .3rem;border-radius:0 0 var(--button-radius) var(--button-radius);box-shadow:0 1px 2px 0 rgba(11,11,11,.5);box-shadow:0 1px 2px 0 rgba(var(--menu-shadow),.5)}.form--sections,.form__row,.menu__item{position:relative}.menu--vertical.menu--toggle-right .menu__main-toggle+.menu__group{right:0}.menu--horizontal>.menu__group>.menu__item>.menu__group,.menu--vertical .menu__main-toggle+.menu__group{width:15em}.menu--jump-up .menu__main-toggle+.menu__group{top:auto;bottom:100%;z-index:1}.menu--jump-up>.menu__group>.menu__item{display:flex;flex-direction:column-reverse}.menu__content{background:linear-gradient(rgba(5,152,214,.3),rgba(5,152,214,.3)),#002c3e;background:linear-gradient(rgba(var(--menu),.3),rgba(var(--menu),.3)),rgb(var(--midnight));color:#fff;color:rgb(var(--menu-text));display:flex;padding:.8rem 2rem;text-decoration:none}.menu__group .menu__group .menu__content{background:linear-gradient(rgba(5,152,214,.2),rgba(5,152,214,.2)),#002c3e;background:linear-gradient(rgba(var(--menu),.2),rgba(var(--menu),.2)),rgb(var(--midnight))}.menu__group .menu__group .menu__group .menu__content{background:linear-gradient(rgba(5,152,214,.1),rgba(5,152,214,.1)),#002c3e;background:linear-gradient(rgba(var(--menu),.1),rgba(var(--menu),.1)),rgb(var(--midnight))}.menu__content:not(a):not(button){font-weight:700}.menu--vertical>.menu__group>li:first-child{border-radius:.3rem .3rem 0 0;border-radius:var(--button-radius) var(--button-radius) 0 0;overflow:hidden}.menu--vertical>.menu__group>li:last-child{border-radius:0 0 .3rem .3rem;border-radius:0 0 var(--button-radius) var(--button-radius);overflow:hidden}.menu--vertical>.menu__group>li:first-child:last-child{border-radius:.3rem;border-radius:var(--button-radius)}.menu--vertical:not(.menu--toggle-right)>[aria-expanded=true]+.menu__group{border-top-left-radius:0}.menu--vertical.menu--toggle-right>[aria-expanded=true]+.menu__group{border-top-right-radius:0}.page__sidebar .menu--vertical>.menu__group>li:first-child,.page__sidebar .menu--vertical>.menu__group>li:last-child{border-radius:0}.menu--vertical.menu--jump-up>.menu__group>li:last-child{border-bottom-left-radius:0}.menu--horizontal>.menu__group>.menu__item:first-child>.menu__content{border-radius:.3rem 0 0 .3rem;border-radius:var(--button-radius) 0 0 var(--button-radius)}.menu--horizontal>.menu__group>.menu__item:last-child>.menu__content{border-radius:0 .3rem .3rem 0;border-radius:0 var(--button-radius) var(--button-radius) 0}.menu--horizontal>.menu__group>.menu__item .menu__group{border-radius:0 .3rem .3rem;border-radius:0 var(--button-radius) var(--button-radius);overflow:hidden}.menu--horizontal>.menu__group>.menu__item .menu__group--boundary+.menu__group{border-radius:.3rem 0 .3rem .3rem;border-radius:var(--button-radius) 0 var(--button-radius) var(--button-radius)}.menu--horizontal.menu--toggle-right>[aria-expanded=true]+.menu__group>.menu__item:last-child>.menu__content,.menu--horizontal:not(.menu--toggle-right)>[aria-expanded=true]+.menu__group>.menu__item:first-child>.menu__content{border-radius:0}.menu .menu__group .menu__group .menu__content{color:rgba(166,218,241,1);font-size:1.4rem;padding:.9rem 2rem 1rem}.menu .menu__group .menu__group .menu__content>.icon:first-child{flex:0 0 auto}.menu .menu__group .menu__group .menu__group .menu__content{color:rgba(166,218,241,.75)}.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content{padding-left:3.2rem}.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content{padding-left:4.4rem}.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content>.icon:first-child{margin-left:.4rem}.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content>.icon:first-child{margin-left:1.6rem}.menu a.menu__content:hover,.menu form.menu__content:hover,.menu span.menu__content:hover{background:linear-gradient(rgba(5,152,214,.4),rgba(5,152,214,.4)),#002c3e!important;background:linear-gradient(rgba(var(--menu),.4),rgba(var(--menu),.4)),rgb(var(--midnight))!important;color:#fff!important;color:rgb(var(--menu-text))!important}.menu a.menu__content:focus,.menu a.menu__content:focus-visible,.menu__form-button:focus,.menu__form-button:focus-visible{box-shadow:inset 0 0 0 4px #0073a5;box-shadow:inset 0 0 0 4px rgb(var(--link-color));outline:0}.menu a.menu__content:focus:not(:focus-visible),.menu__form-button:focus:not(:focus-visible){box-shadow:none}.menu a.menu__content:focus-visible,.menu__form-button:focus-visible{box-shadow:inset 0 0 0 4px #0073a5;box-shadow:inset 0 0 0 4px rgb(var(--link-color));outline:0}.menu [aria-current]{background:#f0981b!important;background:rgb(var(--tango))!important;color:#001f2b!important;color:rgb(var(--menu-current-text))!important}.menu .menu__content[aria-current]:hover{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),#f0981b!important;background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),rgb(var(--tango))!important;color:#001f2b!important;color:rgb(var(--menu-current-text))!important}.menu[data-menu-type=split] [aria-current]+.button.menu__split-button{color:#001f2b;color:rgb(var(--menu-current-text))}.menu__current-parent{box-shadow:inset 4px 0 0 0 #f0981b;box-shadow:inset 4px 0 0 0 rgb(var(--tango))}.menu a.menu__content.menu__current-parent:focus,.menu a.menu__content.menu__current-parent:focus-visible{box-shadow:inset 4px 0 0 0 #f0981b,inset 0 0 0 4px #0073a5;box-shadow:inset 4px 0 0 0 rgb(var(--tango)),inset 0 0 0 4px rgb(var(--link-color))}.menu a.menu__content.menu__current-parent:not(:focus-visible){box-shadow:inset 4px 0 0 0 #f0981b;box-shadow:inset 4px 0 0 0 rgb(var(--tango))}.menu__content .icon{margin:.2rem .8rem 0 -.8rem}.menu__content .icon--nav{flex:0 0 1.6rem;margin:.2rem -.8rem 0 2rem;transition:transform .2s}.menu [aria-expanded=true] .icon--nav{transform:rotate(90deg)}.menu.menu--jump-up>.menu__group>.menu__item>.menu__content+[aria-expanded=true] .icon--nav,.menu.menu--jump-up>.menu__group>.menu__item>.menu__content[aria-expanded=true] .icon--nav{transform:rotate(-90deg)}.icon--90deg,.menu__main-toggle[aria-expanded=true] .icon:not(.icon--av){transform:rotate(90deg)}.menu .icon.icon--av{border-radius:.3rem;border-radius:var(--button-radius);height:3.2rem;margin-bottom:-.8rem;margin-left:-1.6rem;margin-top:-.8rem;width:3.2rem}.menu.menu--vertical .icon.icon--av{margin-top:-.6rem}.menu__spacer{width:1.6rem}.menu__content .menu__text{flex:1 1 auto}.menu--clone{font-style:italic}.menu--horizontal,.menu.menu--vertical.menu--dropdown{display:flex}.menu--horizontal.menu--toggle-right{flex-direction:row-reverse}.menu--vertical{flex-direction:column}.menu.menu--vertical.menu--dropdown.menu--inline{display:inline-flex}.menu .menu__main-toggle{margin:0;align-self:flex-start}.table .menu .menu__main-toggle{white-space:nowrap;padding:.2rem 1.4rem}.menu .menu__main-toggle[aria-expanded=true]{background:linear-gradient(rgba(5,152,214,.3),rgba(5,152,214,.3)),#002c3e;background:linear-gradient(rgba(var(--menu),.3),rgba(var(--menu),.3)),rgb(var(--midnight))}.menu .menu__main-toggle[aria-expanded=true]:hover{background:linear-gradient(rgba(5,152,214,.4),rgba(5,152,214,.4)),#002c3e;background:linear-gradient(rgba(var(--menu),.4),rgba(var(--menu),.4)),rgb(var(--midnight))}.menu.menu--toggle-right .menu__main-toggle{align-self:flex-end}.menu--jump-up .menu__main-toggle{z-index:2}.menu__main-toggle .icon{transition:transform .2s}.menu__main-toggle[aria-expanded=true] .icon.s180{transform:rotate(180deg)}.menu__main-toggle .icon.icon--av{opacity:.75}.menu__main-toggle[aria-expanded=true] .icon.icon--av{opacity:1}.menu--horizontal .menu__main-toggle[aria-expanded=true]{border-radius:.3rem 0 0 .3rem;border-radius:var(--button-radius) 0 0 var(--button-radius)}.menu--horizontal.menu--toggle-right .menu__main-toggle[aria-expanded=true]{border-radius:0 .3rem .3rem 0;border-radius:0 var(--button-radius) var(--button-radius) 0}.menu--vertical .menu__main-toggle[aria-expanded=true]{border-radius:.3rem .3rem 0 0;border-radius:var(--button-radius) var(--button-radius) 0 0}.menu--vertical:not(.menu--toggle-right):not(.menu--jump-up) .menu__main-toggle[aria-expanded=true]+.menu__group>.menu__item:first-child{border-top-left-radius:0}.menu--vertical.menu--toggle-right .menu__main-toggle[aria-expanded=true]+.menu__group>.menu__item:first-child{border-top-right-radius:0}.menu--jump-up .menu__main-toggle[aria-expanded=true]{border-radius:0 0 .3rem .3rem;border-radius:0 0 var(--button-radius) var(--button-radius)}.table .menu .menu__main-toggle .button__text{margin-left:1.2rem;margin-right:-.4rem}form.menu__content,span.menu__content{padding:0}.menu__form-button{background:0 0;border:none;color:#fff;color:rgb(var(--menu-text));display:flex;font-size:inherit;padding:.8rem 2rem;text-align:left;width:100%}.menu__group .menu__group .menu__form-button{padding-left:0}.menu[data-menu-type=split] .menu__item>.menu__content{padding-right:4.8rem}.menu[data-menu-type=split] .menu__item>.menu__split-button{background:rgba(5,152,214,.2);background:rgba(var(--smurf),.2);margin:0;position:absolute;top:.4rem;right:.4rem;padding:.4rem 1.6rem}.menu--jump-up[data-menu-type=split] .menu__item>.menu__split-button{bottom:.4rem;top:auto}.menu[data-menu-type=split] .menu__item>.menu__split-button:hover{background:rgba(5,152,214,.5);background:rgba(var(--smurf),.5)}.menu[data-menu-type=split] .menu__item>.menu__split-button .icon{transition:transform .2s}.menu[data-menu-type=split] .menu__item>[aria-current]+.menu__split-button{background:rgba(255,255,255,.2)}.menu[data-menu-type=split] .menu__item>[aria-current]+.menu__split-button:hover{background:rgba(255,255,255,.5)}.breadcrumb li{display:inline}.breadcrumb li+li:before{border:.4rem solid transparent;border-left:.5rem solid rgba(50,68,74,.85);border-left:.5rem solid rgba(var(--page-text),.85);content:'';display:inline-block;margin:0 0 .1rem .2rem}.breadcrumb [aria-current]{color:inherit;text-decoration:none}.form{background:var(--form-background);border-radius:.3rem;border-radius:var(--block-radius);padding:1.6rem;padding:var(--padding);padding-bottom:calc(var(--padding) + calc(var(--padding)/ 2))}.form--horizontal--old{align-items:flex-end;display:flex;padding-bottom:1.6rem;padding-bottom:var(--padding)}.form__row~.form__row{margin:1.6rem 0 0;margin:var(--gutter) 0 0}.form--horizontal--old .form__row{flex:1 1 auto;flex-flow:row wrap;margin:0 calc(var(--gutter)/ 2)}.form__row--footer{text-align:center}.form__row--footer:before{background:var(--form-footer-border);display:block;height:2px;margin-bottom:calc(var(--gutter) + 2px);opacity:.2}.form--horizontal--old .form__row--footer{flex:0 0 auto}.form__row--footer--rtl{direction:rtl}.form--sections{align-items:flex-start;display:flex;flex-flow:row wrap;justify-content:space-between;padding-bottom:0;--scroll-margin-top:0}.form--sections .form__section-list{flex:0 1 18em;padding:0 calc(1.6rem * 1.5) 1.6rem 0;padding:0 calc(var(--gutter) * 1.5) var(--gutter) 0;position:sticky;top:0;top:var(--scroll-margin-top)}.form--sections .form__section-content{flex:1 1 30em}.form--sections .fieldset{scroll-margin-top:var(--scroll-margin-top)}.form--sections__menu-anchor{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;padding:4px;position:absolute;white-space:nowrap;width:1px}@media only screen and (max-width:75rem){.form--sections{display:block}.form--sections .form__section-list{flex:1 1 18em;padding-right:0;position:static}.form--sections__menu-anchor{clip:auto;clip-path:none;height:auto;overflow:hidden;position:static;white-space:wrap;width:auto}}.form--sections .form__row--footer{bottom:0;background:linear-gradient(180deg,rgba(var(--form-section-footer),0) 0,rgba(var(--form-section-footer),1) 1.2rem,rgba(var(--form-section-footer),1) 0);margin-left:calc((var(--gutter)/ 2) - var(--gutter) - 2px);margin-right:calc((var(--gutter)/ 2) - var(--gutter) - 2px);margin-top:0;padding-bottom:calc(var(--padding) + calc(var(--padding)/ 2));padding-top:1.6rem;position:sticky;z-index:5}.form:not(.form--horizontal).form--sections .form__row--footer:before{margin-left:calc((var(--gutter)/ 2) + 2px);margin-right:calc((var(--gutter)/ 2) + 2px)}.form--horizontal{display:flex;flex-flow:row wrap;gap:1.6rem;gap:var(--gutter);justify-content:space-between;padding-bottom:1.6rem;padding-bottom:var(--padding);padding-top:0}.form--horizontal .form__fields{display:flex;flex:1 1 20em;flex-flow:row wrap;justify-content:flex-start;column-gap:1.6rem;column-gap:var(--gutter)}.form--horizontal .form__radbox~br,.form.form--horizontal .form__row--footer:before{display:none}.form--horizontal .form__row--footer{flex:0 1 max-content;align-self:flex-end}.form--horizontal .form__fields .form__row{flex:1 1 10em;margin-top:0;padding-top:1.6rem;padding-top:var(--padding)}.form--horizontal .form__fields fieldset.form__row{padding-top:0}.form--horizontal .form__fields.form__horizontal-fields .form__row{flex:1 1 15em}.form--horizontal .form__fields .form__row.form__row--content{flex:0 1 max-content}.form--horizontal .form__fields .form__row.form__row--full-width{flex:1 1 100%}.form__row--br{flex-basis:100%;height:0}.form--horizontal .form__radbox-label:not(:last-child){padding-right:calc(var(--gutter)/ 2)}.form--horizontal .form__fields .form__fields .form__row{flex-basis:5em}.form .fieldset.form__row{background:var(--form-fieldset);border-radius:.3rem;border-radius:var(--button-radius);padding:0 calc(var(--gutter)/ 2) 1.6rem;position:relative}.form .fieldset .fieldset.form__row{background:var(--form-fieldset2)}.form .fieldset .fieldset .fieldset.form__row{background:var(--form-fieldset3)}.form.form--horizontal>.fieldset{margin-top:-1rem;margin-bottom:-1rem}.form.form--horizontal .fieldset .fieldset{margin-top:1rem}.form:not(.form--horizontal) .fieldset.form__row{margin-left:calc((var(--gutter)/ 2) - var(--gutter));margin-right:calc((var(--gutter)/ 2) - var(--gutter))}.form:not(.form--horizontal) .fieldset .fieldset.form__row{margin-left:0;margin-right:0}.form.form--horizontal .fieldset .fieldset,.form.form--horizontal .fieldset.form__row .form__row{display:inline-block}.form .fieldset.form__row legend{background:var(--form-fieldset);border-radius:.3rem;border-radius:var(--button-radius);padding:calc(1.6rem / 4) 1.6rem 0;padding:calc(var(--padding)/ 4) var(--padding) 0;margin-bottom:1.6rem;margin-top:0}.form.form--horizontal .fieldset.form__row legend{font-size:1.6rem;padding:0 calc(var(--padding)/ 2)}.form legend.visually-hidden+.legend{margin-top:1rem}.fieldset--active{box-shadow:0 0 0 2px #0073a5;box-shadow:0 0 0 2px rgb(var(--link-color))}.fieldset--active legend{box-shadow:0 -2px 0 0 #0073a5;box-shadow:0 -2px 0 0 rgb(var(--link-color))}.button.form__help-toggle,.button.form__help-toggle:focus{box-shadow:none!important}@container form-horizontal-fields (min-width:40em){@supports(display:contents){.form__horizontal-fields .fieldset.form__row{display:unset;grid-column:1/span 2}}}.form--step-through{--scroll-margin-top:0}.form--step-through .form__row--step,.form--step-through .form__step__button,.form--step-through .form__step__icon{display:none}.form--step-through-css .form__step{padding-bottom:3.2rem;padding-left:2.8rem;margin-left:1.2rem;margin-right:4.4rem;border-left:solid 2px rgba(50,68,74,.2);border-left:solid 2px var(--step-line);border-left-style:dashed;position:relative;scroll-margin-top:var(--scroll-margin-top)}.form--step-through-css .form__step--completed{border-left-style:solid}.form--step-through-css .form__step--last{border-left-color:transparent;padding-bottom:1.6rem;padding-bottom:var(--gutter)}.form__step:not(.form__step--active):not(.form__step--completed){padding-bottom:calc(var(--gutter)/ 2)}.form__step:not(.form__step--active):not(.form__step--completed) .h3{font-size:1em;padding-top:.4rem}.form--step-through-css .form__step legend.visually-hidden+.legend{margin-top:0}.form--step-through-css .form__step .form__row{clear:both}.form__step .form__step__icon{border-radius:.3rem;border-radius:var(--button-radius);display:block;position:absolute;left:-1.3rem;padding:.4rem;top:.4rem;transform:rotate(45deg)}.form__step .form__step__icon .icon{transform:rotate(-45deg);display:block;top:0}.form__step .form__step__icon .icon--dot,.form__step .form__step__icon .icon--dot-outline,.form__step .form__step__icon .icon--tick{display:none}.form__step--active .form__step__icon .icon--dot,.form__step--completed .form__step__icon .icon--tick,.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon--dot-outline{display:block}.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon{background:#fff}.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon{fill:rgba(50,68,74,.5);fill:rgba(var(--basalt),.5)}.form__step--active .form__step__icon{background:#f0981b;background:rgb(var(--tango))}.form__step--active .form__step__icon .icon{fill:#32444a;fill:rgb(var(--basalt))}.form__step--completed .form__step__icon{background:#002c3e;background:rgb(var(--midnight))}.form__step--completed .form__step__icon .icon{fill:#fff}.form--step-through-css .form__step .form__step_p{margin-bottom:1.6rem;display:none}.form--step-through-css .form__step legend,.form--step-through-css .form__step--active .form__step_p{display:block}.form--step-through--hide-fields.form--step-through-css .form__step .form__row{display:none}.form--step-through--hide-fields.form--step-through-css .form__step--active .form__row{display:block}.form--step-through-css .form__step .button.form__step__button{display:none}.form--step-through-css .form__step--active .button.form__step__button{display:inline-block}.form--step-through-css .form__step:not(.form__step--active):not(.form__step--completed) .form__row{display:none}.form--step-through-css .form__step--active .form__row{display:block}.form--step-through-css .form__step--todo .form__row{display:none}.form--step-through-css .form__row--step{display:block;margin:calc(var(--gutter) * 2) 0 0;text-align:center}.form__step__noproceedmsg{display:none}.form__step__noproceedmsg[role=alert]{display:block;margin-bottom:1.6rem}.form__step__noproceedmsg .icon{fill:#9b1200;fill:rgb(var(--form-error))}.form-steps{--scroll-margin-top:0}.form-steps .form-steps__controls .button,.form-steps__controls,.form-steps__icon{display:none}.form__row--footer.form-steps__controls{display:block}.form__row--footer.form-steps__controls .button:not(.form__step__button):not(.form__step__button-back){display:inline-block}.js__form-steps .form-steps__step{padding-bottom:3.2rem;padding-left:2.8rem;margin-left:1.2rem;margin-right:4.4rem;border-left:solid 2px rgba(50,68,74,.2);border-left:solid 2px var(--form-step-line);border-left-style:dashed;position:relative;scroll-margin-top:var(--scroll-margin-top)}.js__form-steps.form-steps--hide-previous-fields .form-steps__step{padding-bottom:1.6rem;padding-bottom:var(--gutter)}.js__form-steps .form-steps__step--complete{border-left-style:solid}.js__form-steps .form-steps__step--last{border-left-color:transparent;padding-bottom:1.6rem;padding-bottom:var(--gutter)}.js__form-steps .form-steps__step--complete .legend,.js__form-steps .form-steps__step--incomplete .legend{font-size:1.6rem;padding-top:.4rem}.js__form-steps .form-steps__fields{display:grid;grid-template-rows:1fr;transition:visibility 30ms ease-in-out,grid-template-rows .3s ease-in-out 30ms;visibility:visible}.js__form-steps .form-steps__step--incomplete .form-steps__fields,.js__form-steps.form-steps--hide-previous-fields .form-steps__step--complete .form-steps__fields{display:none;grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out,visibility 30ms ease-in-out .3s;visibility:hidden}.js__form-steps .form-steps__inner{overflow:hidden;margin:-4px;padding:4px}.js__form-steps legend.visually-hidden+.legend{margin-top:0}.js__form-steps .form-steps__title a{color:currentColor;text-decoration:none}.js__form-steps .form-steps__title a:hover{text-decoration:underline}.js__form-steps .form-steps__title a *{pointer-events:none}.js__form-steps .form-steps__icon{border-radius:.3rem;border-radius:var(--button-radius);display:block;position:absolute;left:-1.3rem;padding:.4rem;top:.4rem;transform:rotate(45deg)}.js__form-steps .form-steps__icon .icon{transform:rotate(-45deg);display:block;top:0}.js__form-steps .form-steps__icon use{display:none}.js__form-steps .form-steps__step--complete .form-steps__icon{background:var(--form-step-icon-complete-bk);fill:#fff}.js__form-steps .form-steps__step--active .form-steps__icon{background:#f0981b;background:rgb(var(--tango));fill:#32444a;fill:rgb(var(--basalt))}.js__form-steps .form-steps__step--incomplete .form-steps__icon{background:var(--form-step-icon-incomplete-bk);fill:rgba(50,68,74,.5);fill:var(--form-step-icon-incomplete-fill)}.js__form-steps .form-steps__step--active .icon--dot,.js__form-steps .form-steps__step--complete .icon--tick,.js__form-steps .form-steps__step--incomplete .icon--dot-outline{display:block}.js__form-steps .form-steps__controls{display:none}.js__form-steps .form-steps__step--active .form-steps__controls{display:block;margin:calc(var(--gutter) * 2) 0 0;text-align:center}.js__form-steps .form-steps__controls .button[href],.js__form-steps .form__row--footer .button:not(a){display:inline-block}.form-steps__error{display:none}.js__form-steps .form-steps__error[role=alert]{display:block;margin-bottom:1.6rem}.js__form-steps .form-steps__error .icon{fill:#9b1200;fill:rgb(var(--form-error))}.form__horizontal-fields{container-type:inline-size;container-name:form-horizontal-fields}.form__horizontal-fields__inner{margin-bottom:1.6rem;margin-bottom:var(--gutter)}@container form-horizontal-fields (min-width:40em){@supports(display:contents){.form__horizontal-fields .form__horizontal-fields__inner{display:grid;grid-template-columns:minmax(0,max-content) minmax(50%,1fr);gap:1.6rem;gap:var(--gutter)}.form__horizontal-fields .form__row{display:contents}}.form--horizontal .form__horizontal-fields .form__row{display:flex;align-items:center;gap:calc(1.6rem / 2);gap:calc(var(--gutter)/ 2)}.form--horizontal .form__horizontal-fields .form__row .form__label{flex:0 1 max-content;white-space:nowrap;margin-bottom:0}.form--horizontal .form__horizontal-fields .form__row .form__field{flex:1 1 auto}}.form__label{display:block;font-weight:500;margin-bottom:.4rem;position:relative}.form__required{font-size:1.1rem;font-weight:700;vertical-align:super}.button.form__help-toggle{background:0 0!important;margin-left:calc((var(--gutter)/ 2) - 2px)!important;padding-bottom:1.6rem;position:absolute;top:-1rem}.button.form__help-toggle:hover{background:0 0;transform:translateY(0)}.form__help-text,.form__help-toggle-icon{background:var(--form-help);display:block;transition:all .3s cubic-bezier(.175,.885,.32,.5)}.form__help-toggle-icon{border-radius:.3rem;border-radius:var(--button-radius);height:1.6rem;margin:0 0 0 -2rem;pointer-events:none;position:relative;top:.4rem;width:1.6rem}.button.form__help-toggle .icon{fill:#fff;padding:.2rem;pointer-events:none;top:0;transition:inherit;vertical-align:top}body .form .button.form__help-toggle .icon{fill:#fff!important}.button.form__help-toggle:focus .form__help-toggle-icon,.button.form__help-toggle:focus-visible .form__help-toggle-icon{box-shadow:0 0 0 4px #0598d6;box-shadow:0 0 0 4px rgb(var(--smurf))}.button.form__help-toggle:focus:not(:focus-visible) .form__help-toggle-icon{box-shadow:none}.button.form__help-toggle[aria-expanded=true] .form__help-toggle-icon{transform:rotate(-45deg)}.button.form__help-toggle[aria-expanded=true] .icon{transform:rotate(45deg)}@container form-horizontal-fields (min-width:40em){@supports(display:contents){.form__horizontal-fields .button.form__help-toggle{position:static;margin:0 calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) calc((var(--gutter)/ 2) - .6rem)!important;padding:0 1.4rem 2.4rem 2rem}.form__horizontal-fields .form__help-toggle-icon{top:.2rem}}}.form__help-text{border-radius:.3rem;border-radius:var(--button-radius);color:#fff;height:0;opacity:0;overflow:hidden;padding:0 .8rem;transition-property:height,opacity;visibility:hidden}.form__help-text--open+.form__help-text,.form__help-text--open+span>.form__help-text{height:auto;margin-bottom:.8rem;opacity:1;padding:.4rem .8rem;visibility:visible}.form__help-text a:not([class]){color:currentColor}.form__help-text a:focus-visible:not([class]),.form__help-text a:focus:not([class]){background:#fff;color:#171818;color:rgb(var(--coal))}.form__help-text a:focus:not(:focus-visible):not([class]){background:0 0;color:currentColor}.form__error{display:none;font-size:1.4rem;margin-top:.4rem}.form__error--show,[aria-invalid=true]~.form__error{display:block}.form__error .icon{fill:#9b1200;fill:rgb(var(--form-error))}.form__inline{margin-right:.8rem;width:auto!important}.form input[type=date],.form input[type=email],.form input[type=number],.form input[type=password],.form input[type=search],.form input[type=tel],.form input[type=text],.form input[type=url],.form__text{background:var(--form-field-background);border:1px solid rgba(50,68,74,.7);border:1px solid var(--form-field-border);border-radius:.3rem;border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem;width:100%}.form input[type=date]:hover,.form input[type=email]:hover,.form input[type=number]:hover,.form input[type=password]:hover,.form input[type=search]:hover,.form input[type=tel]:hover,.form input[type=text]:hover,.form input[type=url]:hover,.form__text:hover{border-color:rgba(50,68,74,.5);border-color:var(--form-field-border-hover)}.form input[type=date]:focus,.form input[type=email]:focus,.form input[type=number]:focus,.form input[type=password]:focus,.form input[type=search]:focus,.form input[type=tel]:focus,.form input[type=text]:focus,.form input[type=url]:focus,.form__text:focus{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px #0073a5;box-shadow:0 0 0 4px rgb(var(--link-color))}.form input[type=date][aria-invalid=true],.form input[type=email][aria-invalid=true],.form input[type=number][aria-invalid=true],.form input[type=password][aria-invalid=true],.form input[type=search][aria-invalid=true],.form input[type=tel][aria-invalid=true],.form input[type=text][aria-invalid=true],.form input[type=url][aria-invalid=true],.form__text[aria-invalid=true]{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.form input[type=date][aria-invalid=true]:focus,.form input[type=email][aria-invalid=true]:focus,.form input[type=number][aria-invalid=true]:focus,.form input[type=password][aria-invalid=true]:focus,.form input[type=search][aria-invalid=true]:focus,.form input[type=tel][aria-invalid=true]:focus,.form input[type=text][aria-invalid=true]:focus,.form input[type=url][aria-invalid=true]:focus,.form__text[aria-invalid=true]:focus{border-color:#fff;box-shadow:0 0 0 2px #9b1200,0 0 0 4px #0073a5;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__text--large{max-width:50rem}.form__text--medium{max-width:25rem}.form__text--small{max-width:14rem}.form__text--tiny{max-width:6rem}.form__multilist{display:block;position:relative}.form__select.multilist__list{display:none;min-width:100%;overflow-y:auto;position:absolute;scrollbar-width:none;z-index:1}.form__pfix:has([aria-invalid=true])~.form__error,.js .form__multilist:focus-within .multilist__list{display:block}.multilist__list--empty{display:none!important}.form__radbox-label~.form__help-text+br,.multilist__list .hide{display:none}.form__textarea{background:var(--form-field-background);border:1px solid rgba(50,68,74,.7);border:1px solid var(--form-field-border);border-radius:.3rem;border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem;width:100%}.form__textarea:hover{border-color:rgba(50,68,74,.5);border-color:var(--form-field-border-hover)}.form__textarea:focus{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px #0073a5;box-shadow:0 0 0 4px rgb(var(--link-color))}.form__textarea[aria-invalid=true]{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.form__textarea[aria-invalid=true]:focus{border-color:#fff;box-shadow:0 0 0 2px #9b1200,0 0 0 4px #0073a5;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__pfix,.form__prefix{display:flex}.form__pfix__text,.form__prefix__text{background:var(--form-field-border);border-radius:.3rem 0 0 .3rem;border-radius:var(--button-radius) 0 0 var(--button-radius);color:#fff;color:var(--form-pfix-text);padding:.8rem}.form__pfix__text+:not(:focus):not([aria-invalid=true]),.form__prefix__text+:not(:focus):not([aria-invalid=true]){border-radius:0 .3rem .3rem 0;border-radius:0 var(--button-radius) var(--button-radius) 0}.form__pfix--radbox .form__pfix__text,.form__prefix--radbox .form__prefix__text{border-radius:.3rem;border-radius:var(--button-radius);margin:.3rem .8rem .3rem 0;padding:.1rem .4rem}.form__pfix--postfix .form__pfix__text{border-radius:0 .3rem .3rem 0;border-radius:0 var(--button-radius) var(--button-radius) 0;order:1}.form__pfix--postfix .form__pfix__text+:not(:focus):not([aria-invalid=true]){border-radius:.3rem 0 0 .3rem;border-radius:var(--button-radius) 0 0 var(--button-radius)}.form__pfix--postfix.form__pfix--radbox .form__pfix__text{border-radius:.3rem;border-radius:var(--button-radius);margin-left:.8rem;margin-right:0}.form__pfix--postfix .form__pfix__text~*{z-index:1}.form__pfix--warning:not(.form__pfix--postfix) .form__pfix__text+*{border-left-color:#f0981b!important;border-left-color:rgb(var(--tango))!important}.form__pfix--warning.form__pfix--postfix .form__pfix__text+*{border-right-color:#f0981b!important;border-right-color:rgb(var(--tango))!important}.form__pfix--warning .form__pfix__text{background:#f0981b;background:rgb(var(--tango));color:#32444a;color:rgb(var(--form-pfix-warning))}.form__pfix--warning:not(.form__pfix--radbox) .form__pfix__text{border:1px solid rgba(50,68,74,.7);border:1px solid var(--form-field-border)}.form__pfix--warning:not(.form__pfix--postfix):not(.form__pfix--radbox) .form__pfix__text{border-right:none}.form__pfix--warning.form__pfix--postfix:not(.form__pfix--radbox) .form__pfix__text{border-left:none}.form__radbox{background:0 0;opacity:.00001;position:absolute}.form__large-radios .form__radbox~.form__large-radios__content .form__radbox-label,.form__radbox+.form__radbox-label{cursor:pointer;display:inline-block;min-height:2.6rem;padding:.4rem 0 .4rem 3.4rem;position:relative}.form__large-radios .form__radbox~.form__large-radios__content .form__radbox-label:before,.form__radbox+.form__radbox-label:before{background:var(--form-field-background);border:1px solid rgba(50,68,74,.7);border:1px solid var(--form-field-border);border-radius:.3rem;border-radius:var(--button-radius);content:'';height:2.6rem;position:absolute;left:0;width:2.6rem}.form__large-radios .form__radbox[type=checkbox]:checked~.form__large-radios__content .form__radbox-label:after,.form__radbox[type=checkbox]:checked+.form__radbox-label:after{border:.3rem solid;border-top:0;border-left:0;content:'';height:1.2rem;left:1rem;position:absolute;width:.7rem;top:.9rem;transform:rotate(40deg)}.form__radbox:hover+label:before{border-color:rgba(50,68,74,.5);border-color:var(--form-field-border-hover)}.form__radbox:focus+label:before,.form__radbox:focus-visible+label:before{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px #0073a5;box-shadow:0 0 0 4px rgb(var(--link-color))}.form__radbox:focus:not(:focus-visible)+label:before{border-color:rgba(50,68,74,.7);border-color:var(--form-field-border);box-shadow:none}.form__radbox[aria-invalid=true]+label:before{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.form__radbox[aria-invalid=true]:focus+label:before,.form__radbox[aria-invalid=true]:focus-visible+label:before{border-color:#fff;box-shadow:0 0 0 2px #9b1200,0 0 0 4px #0073a5;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__radbox[aria-invalid=true]:focus:not(:focus-visible)+label:before{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.form__large-radios .form__radbox[disabled=disabled]~.form__large-radios__content .form__radbox-label:before,.form__radbox[disabled=disabled]+.form__radbox-label:before{opacity:.5}.form__large-radios .form__radbox[disabled=disabled]~.form__large-radios__content .form__radbox-label:after,.form__radbox[disabled=disabled]+.form__radbox-label:after{border-right:solid 1px rgba(50,68,74,.7);border-right:solid 1px var(--form-field-border);content:'';height:3.67rem;left:1.2rem;position:absolute;width:.1rem;top:-.1rem;transform:rotate(45deg);opacity:.5}.form__large-radios .form__radbox[disabled=disabled]~.form__large-radios__content .form__radbox-label,.form__radbox[disabled=disabled]+.form__radbox-label{cursor:not-allowed}.form__radbox-label .form__help-toggle{top:-.4rem}.form__radbox-label.form__help-text--open~.form__help-text{margin-bottom:0}.form__large-radios .form__radbox[type=radio]~.form__large-radios__content .form__radbox-label:before,.form__radbox[type=radio]+.form__radbox-label:before{border-radius:50%}.form__large-radios .form__radbox[type=radio]:checked~.form__large-radios__content .form__radbox-label:after,.form__radbox[type=radio]:checked+.form__radbox-label:after{background:#32444a;background:rgb(var(--page-text));border-radius:50%;content:'';height:1rem;left:.8rem;position:absolute;width:1rem;top:1.2rem}.form__large-radios{display:grid;grid-gap:1.6rem;grid-gap:var(--padding);grid-template-columns:repeat(auto-fit,minmax(40rem,1fr));grid-template-columns:repeat(auto-fit,minmax(var(--large-radios-min-width),1fr))}.form__large-radios--column{grid-template-columns:1fr!important}.form__large-radios__item{border:1px solid rgba(50,68,74,.7);border:1px solid var(--form-field-border);border-radius:.3rem;border-radius:var(--button-radius);background:var(--form-field-background);color:inherit;display:flex;padding:1.6rem;padding:var(--padding);flex-direction:column;justify-content:space-between;position:relative}.form__large-radios__item:has(.form__radbox[disabled=disabled]),.form__large-radios__item:not(:has(.form__radbox)){opacity:.65}.form__large-radios__label{position:absolute;inset:0;z-index:1;cursor:pointer}.form__large-radios .form__radbox[disabled=disabled]+.form__large-radios__label{cursor:default}.form__large-radios .form__radbox:checked+.form__large-radios__label{background:var(--large-radios-bk)}.form__large-radios .form__radbox:checked~.form__large-radios__content,.form__large-radios .form__radbox:checked~.form__large-radios__content a{color:#fff;color:rgb(var(--large-radios-text))}.form__large-radios__item .form__large-radios__content{pointer-events:none;position:relative;z-index:2}.form__large-radios__item .form__radbox~.form__large-radios__content{padding-left:3.4rem}.form__large-radios__content+.form__large-radios__content{padding-top:1.6rem;padding-top:var(--padding)}.form__large-radios__content .form__radbox-label{margin-bottom:.4em}.form__radbox~.form__large-radios__content .form__radbox-label{margin-left:-3.4rem}.form__large-radios .form__radbox:focus-visible~.form__large-radios__content .form__radbox-label:before,.form__large-radios .form__radbox:focus~.form__large-radios__content .form__radbox-label:before{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px #0073a5;box-shadow:0 0 0 4px rgb(var(--link-color))}.form__large-radios .form__radbox:focus:not(:focus-visible)~.form__large-radios__content .form__radbox-label:before{border-color:rgba(50,68,74,.7);border-color:var(--form-field-border);box-shadow:none}.form__large-radios__item .button,.form__large-radios__item a{position:relative;z-index:3;pointer-events:visible}.button .icon,.form__switch__dot,.js .form__file__drag *{pointer-events:none}.form__large-radios .highlight-stripe{background:var(--large-radios-stripe-disabled);margin-left:calc(var(--padding) * -1);margin-right:calc(var(--padding) * -1);padding:calc(var(--padding)/ 2)}.form__large-radios .form__radbox:not([disabled=disabled])~.form__large-radios__content .highlight-stripe{background:var(--large-radios-stripe)}.form__large-radios .form__radbox~.form__large-radios__content .highlight-stripe{margin-left:calc((3.4rem + var(--padding)) * -1)}.form__large-radios .form__radbox:checked~.form__large-radios__content .highlight-stripe{color:#32444a;color:rgb(var(--page-text))}.form__select{background:var(--form-field-background);border:1px solid rgba(50,68,74,.7);border:1px solid var(--form-field-border);border-radius:.3rem;border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem 3.2rem .7rem .7rem;width:100%}.toggle--play-pause .toggle__pause-icon,.toggle--play-pause:not(.js__toggle--play-pause),.toggle--play-pause[data-toggled] .toggle__play-icon{display:none}.form__select--content-width{width:auto}.form__select:not([multiple]){background:var(--form-select-background);background-position:calc(100% - 2rem) calc(2rem - .2rem),calc(100% - 1.5rem) calc(2rem - .2rem),100% 100%,100% 100%;background-size:.5rem .5rem,.5rem .5rem,auto,auto;background-repeat:no-repeat}.form__select::-ms-expand{display:none}.form__select:hover{border-color:rgba(50,68,74,.5);border-color:var(--form-field-border-hover)}.form__select:focus{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px #0073a5;box-shadow:0 0 0 4px rgb(var(--link-color))}.form__select[aria-invalid=true]{border-color:#fff;box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.form__select[aria-invalid=true]:focus{box-shadow:0 0 0 2px #9b1200,0 0 0 4px #0073a5;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.page__footer .form__select,.page__header .form__select{background:var(--form-field-background-dark);border:1px solid rgba(255,255,255,.4);border:1px solid var(--form-field-border-dark);color:inherit},.page__footer .form__select:hover,.page__header .form__select:hover{border-color:rgba(255,255,255,.2);border-color:var(--form-field-border-hover-dark)}.page__footer .form__select:not([multiple]),.page__header .form__select:not([multiple]){background:var(--form-select-background-dark);background-position:calc(100% - 2rem) calc(2rem - .2rem),calc(100% - 1.5rem) calc(2rem - .2rem),100% 100%,100% 100%;background-size:.5rem .5rem,.5rem .5rem,auto,auto;background-repeat:no-repeat}.button.toggle--play-pause,.button.toggle--play-pause:hover{background:0 0;box-shadow:0 0 0 1px #006729 inset!important;box-shadow:0 0 0 1px rgb(var(--frog)) inset!important;color:#006729;color:rgb(var(--frog))}.button.toggle--play-pause:hover{box-shadow:0 0 0 2px #006729 inset!important;box-shadow:0 0 0 2px rgb(var(--frog)) inset!important}.button.toggle--play-pause[data-toggled],.button.toggle--play-pause[data-toggled]:hover{background:#006729;background:rgb(var(--frog));color:#fff}.form__switch,.form__switch:hover{background:0 0}.button.toggle--play-pause:focus,.button.toggle--play-pause:focus-visible{box-shadow:0 0 0 4px #0598d6,0 0 0 1px #006729 inset!important;box-shadow:0 0 0 4px rgb(var(--smurf)),0 0 0 1px rgb(var(--frog)) inset!important}.button.toggle--play-pause:focus:not(:focus-visible){box-shadow:none}.button.toggle--play-pause .icon{fill:#006729;fill:rgb(var(--frog))}.button.toggle--play-pause[data-toggled] .icon{fill:#fff}.toggle--play-pause .toggle__play-icon,.toggle--play-pause[data-toggled] .toggle__pause-icon{display:block}.form__switch{border:none;font-size:inherit;line-height:inherit;padding:.4rem 0 .4rem 5rem;position:relative}.form__switch:before,.form__switch__dot{border-radius:2em;content:''}.form__switch:focus{box-shadow:none;outline:0}.form__switch:before{background:var(--switch);height:2.6rem;left:0;position:absolute;top:.4rem;width:4.2rem}.form__switch[aria-labelledby]{min-height:3.2rem}.form__switch:hover:before{background:var(--switch-hover)}.form__switch__dot{background:var(--page-background);height:1.8rem;left:.4rem;position:absolute;top:.8rem;transform:translateX(0);width:1.8rem}.form__switch[aria-pressed=true]:before{background:#006729;background:rgb(var(--frog))}.form__switch[aria-pressed=true] .form__switch__dot{transform:translateX(1.6rem)}.form__switch[aria-pressed=true] .form__switch__dot:after{border:.3rem solid;border-top:0;border-left:0;content:'';height:1rem;left:.65rem;position:absolute;width:.6rem;top:.3rem;transform:rotate(40deg)}.form__switch:focus-visible:before,.form__switch:focus:before{box-shadow:0 0 0 4px #0598d6;box-shadow:0 0 0 4px rgb(var(--smurf))}.form__switch:focus:not(:focus-visible):before{box-shadow:none}.form__switch[aria-invalid=true]:before{box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.form__switch[aria-invalid=true]:focus:before{box-shadow:0 0 0 2px #9b1200,0 0 0 4px #0073a5;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__child-fields__group{display:block;margin-left:3.4rem}.js__form__child-fields .form__child-fields__group{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out,visibility 30ms ease-in-out .3s;visibility:hidden}.js__form__child-fields .form__child-fields__group[aria-expanded=true]{grid-template-rows:1fr;transition:visibility 30ms ease-in-out,grid-template-rows .3s ease-in-out 30ms;visibility:visible}.js__form__child-fields .form__child-fields__inner{overflow:hidden}.fieldset-group{--scroll-margin-top:0}.fieldset-group .fieldset{scroll-margin-top:var(--scroll-margin-top)}.form:not(.form--horizontal) .fieldset-group .fieldset.form__row{margin-left:0;margin-right:0}.js__fieldset-group .fieldset[aria-expanded=false]{display:none}.js__fieldset-group .fieldset[aria-expanded=true]{display:block}.js .form__file{opacity:0;position:absolute}.js .form__file__button{margin-left:.4rem;margin-right:.4rem}.js .form__file__name{display:block;padding-top:calc(var(--padding)/ 4)}.js .form__file__name span{display:block}.js .form__file__drag{background:var(--file-upload-background);border:1px dashed #0598d6;border:1px dashed var(--file-upload-border);border-radius:.3rem;border-radius:var(--block-radius);display:inline-block;padding:calc(var(--padding) + 1px)}.js .form__file__drag-active~.form__file__drag{border:2px dashed #0598d6;border:2px dashed var(--file-upload-border);padding:1.6rem;padding:var(--padding)}.js .form__file:focus~.form__file__drag{box-shadow:0 0 0 4px #0598d6;box-shadow:0 0 0 4px rgb(var(--smurf))}.js .form__file[aria-invalid=true]~.form__file__drag{box-shadow:0 0 0 2px #9b1200;box-shadow:0 0 0 2px rgb(var(--form-error))}.js .form__file[aria-invalid=true]:focus~.form__file__drag{box-shadow:0 0 0 2px #9b1200,0 0 0 4px #0073a5;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.loader{background:rgba(240,152,27,1);background:rgba(var(--tango),1);display:block;margin:1.6rem auto;margin:var(--gutter) auto;overflow:hidden;position:relative}.loader--circle{border-radius:50%;height:4rem;padding:.3rem;width:4rem}.loader--circle .loader__fish,.theme--light .loader--circle .loader__fish{animation:fish-circle 1s linear infinite;background:url(../images/loader-circle.svg) center center no-repeat;display:block;height:100%;width:100%}@keyframes fish-circle{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}.loader--line{border-radius:.3rem;border-radius:var(--button-radius);height:1.6rem;margin:1.6rem auto;margin:var(--gutter) auto;overflow:hidden;width:100%}.loader--line .loader__fish,.theme--light .loader--line .loader__fish{animation:fish-line 6s linear infinite;background:url(../images/loader-line.svg) left top;background-size:6.7rem 1.6rem;bottom:0;position:absolute;right:0;top:0;width:200%}@keyframes fish-line{0%{transform:translateX(0)}100%{transform:translateX(50%)}}@media (prefers-color-scheme:dark){:root{--scrollbar-track:rgba(255,255,255, 0.15);--scrollbar-thumb:rgba(255,255,255, 0.6);--scrollbar-shadow:rgba(var(--onyx), 0.75);--card-background-opacity:0.05;--card-listing-border:rgba(255,255,255, 0.15);--page-background:rgb(var(--coal));--page-text:255,255,255;--table:255,255,255;--table-tint:255,255,255;--table-header-text:255,255,255;--table-border-opacity:0.15;--table-header-opacity:0.2;--table-tint-opacity:0.1;--table-highlight:rgba(var(--tango), 0.4);--table-highlight-th:linear-gradient(
+ rgba(255,255,255, 1)),rgb(var(--concrete));--form-step-line:rgba(var(--basalt), 0.2);--form-step-icon-complete-bk:rgb(var(--midnight));--form-step-icon-incomplete-bk:rgb(255,255,255);--form-step-icon-incomplete-fill:rgba(var(--basalt), 0.5);--form-help:rgba(var(--basalt), 0.7);--output-border:rgba(var(--basalt),0.2);--output-opacity:0.75;--form-pfix-text:rgb(255,255,255);--form-pfix-warning:var(--basalt);--switch:rgba(var(--basalt),0.5);--switch-hover:rgba(var(--basalt),0.4);--file-upload-background:rgb(255,255,255);--file-upload-border:rgb(var(--smurf));--progress-box:rgba(var(--basalt),0.25);--icon-colour:var(--onyx)}.tab-group.tab-group--box{background:var(--tab-group-bk);border-radius:var(--block-radius);padding:var(--padding)}.tab-group__tabs{display:none;position:relative;z-index:1}.js .tab-group__tabs{display:block}.tab-group__tab.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){padding:.8rem var(--padding);border-radius:var(--button-radius) var(--button-radius) 0 0;box-shadow:none;margin:0}.tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,.tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):not(:hover){background:var(--tab-group-bk);color:rgb(var(--page-text))}.tab-group--box .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,.tab-group--box .tab-group__tab[aria-selected=true]:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):not(:hover){background:var(--tab-group-active-bk)}.tab-group__content{background:var(--tab-group-bk);border-radius:var(--block-radius);padding:var(--padding)}.tab-group--box .tab-group__content{background:var(--tab-group-active-bk);padding:var(--padding)}.tab-group__content+.tab-group__content{margin-top:var(--gutter)}.js .tab-group__content+.tab-group__content,.scroll .menu{margin-top:0}.js .tab-group__content{display:none;border-radius:0 var(--block-radius) var(--block-radius)}.js .tab-group__content--active{display:block}.accordion__item{border:1px solid var(--accordion-border);column-gap:var(--padding);display:grid;grid-template-columns:1fr fit-content(50%);grid-template-areas:'a b''c c';padding:.8rem var(--padding);position:relative}.accordion__item+.accordion__item{border-top:none}.accordion__item:first-child{border-radius:var(--button-radius) var(--button-radius) 0 0}.accordion__item:last-child{border-radius:0 0 var(--button-radius) var(--button-radius)}.accordion__visible{grid-area:a}.accordion__button,.accordion__toggle{grid-area:b;margin:-.8rem calc(var(--padding) * -1)!important;white-space:nowrap}.accordion__button.button--ghost,.accordion__toggle.button--ghost{margin:-.8rem 0!important}.accordion__toggle[aria-expanded=false] .icon{transform:rotate(90deg)}.accordion__toggle[aria-expanded=true] .icon{transform:rotate(-90deg)}.accordion__content{grid-area:c;margin:-.8rem calc(var(--padding) * -1);margin-top:.4rem;overflow:hidden;padding:.3rem var(--padding);transition:max-height .3s ease-in-out}[aria-expanded=false]+.accordion__content{max-height:0;padding:.3rem var(--padding);visibility:hidden}[aria-expanded=true]+.accordion__content{max-height:100vh;padding:.8rem var(--padding);visibility:visible}.console pre,.status.status--small{padding:calc(var(--padding)/ 2)}@media only screen and (max-width:18em){.accordion__item{display:block}.accordion .accordion__item .accordion__button,.accordion .accordion__item .accordion__toggle{display:block;margin:0 auto -.8rem!important}}.console{background:rgb(var(--coal))}.console--light{background:#fff;color:rgb(var(--coal))}.console pre{max-height:30rem}.table .console pre{padding-left:var(--padding);padding-right:var(--padding)}.highlights{--hl-status-display:flex;--hl-status-pad:var(--padding) var(--padding) var(--padding) 0;--hl-status-border-h:solid 4px var(--page-background);--hl-status-border-b:none}@media only screen and (max-width:40rem){.highlights--width-40.highlights{--hl-status-display:block;--hl-status-pad:0 var(--padding) var(--padding) var(--padding);--hl-status-border-h:none;--hl-status-border-b:solid 4px var(--page-background)}}@media only screen and (max-width:60rem){.highlights--width-60.highlights{--hl-status-display:block;--hl-status-pad:0 var(--padding) var(--padding) var(--padding);--hl-status-border-h:none;--hl-status-border-b:solid 4px var(--page-background)}}@media only screen and (max-width:80rem){.highlights--width-80.highlights{--hl-status-display:block;--hl-status-pad:0 var(--padding) var(--padding) var(--padding);--hl-status-border-h:none;--hl-status-border-b:solid 4px var(--page-background)}}.page .highlights{background:var(--highlights-background);color:#fff;display:var(--hl-status-display);border-radius:var(--block-radius);overflow:hidden}.highlights__section{padding:var(--hl-status-pad);display:var(--hl-status-display);align-items:center}.highlights__section:first-child,.highlights__status+.highlights__section{padding:var(--padding)}.highlights--center{justify-content:center}.highlights--center .highlights__section{text-align:center}.highlights--right{justify-content:flex-end}.highlights--right .highlights__section{text-align:right}.highlight--right{flex-grow:999;justify-content:flex-end;text-align:right}.highlights__status{border-right:var(--hl-status-border-h);border-bottom:var(--hl-status-border-b)}.highlights--center .highlights__status,.highlights--right .highlights__status{box-shadow:-4px 0 var(--page-background)}.highlights .button.button--plain,.highlights a:not([class]){color:currentColor}.highlights .button.button--plain:focus,.highlights .button.button--plain:focus-visible,.highlights a:focus-visible:not([class]),.highlights a:focus:not([class]){background:#fff;color:rgb(var(--coal))}.highlights .button.button--plain:focus:not(:focus-visible):not([class]),.highlights a:focus:not(:focus-visible):not([class]){background:0 0;color:currentColor}.highlights__status.highlights__status--good{background:rgb(var(--frog))}.highlights__status.highlights__status--goodish{background:linear-gradient(45deg,rgba(var(--basalt),1) 49%,rgba(var(--frog),1) 50%)}.highlights__status.highlights__status--badish{background:linear-gradient(45deg,rgba(var(--cherry),1) 49%,rgba(var(--frog),1) 50%)}.highlights__status.highlights__status--neutral{background:rgb(var(--basalt))}.highlights__status.highlights__status--bad{background:rgb(var(--cherry))}.copy-box{--copy-box-border:rgb(var(--smurf));align-items:start;display:inline-grid;grid-template-columns:1fr max-content;position:relative}.copy-box,.theme--light .copy-box{--copy-box-background:rgb(255,255,255);--copy-box-anim:linear-gradient(
+ rgba(var(--smurf), 0.25),
+ rgba(var(--smurf), 0.25)) rgb(255,255,255)}.theme--dark .copy-box{--copy-box-background:rgb(var(--coal));--copy-box-anim:linear-gradient(
+ rgba(var(--smurf), 0.5),
+ rgba(var(--smurf), 0.5)) rgb(var(--coal))}.copy-box__content,.no-js .copy-box>:first-child{border:1px dashed var(--copy-box-border);background:var(--copy-box-background);padding:calc(.8rem - 2px) .8rem;position:relative;user-select:all}.copy-box__content--focussed,.copy-box__content:focus,.no-js .copy-box>:first-child:focus{animation:to-copy .1s step-end forwards}@keyframes to-copy{to{-webkit-user-select:text;user-select:text}}.copy-box__content--copied{animation:copy-box .5s ease-out;animation-fill-mode:forwards}@keyframes copy-box{0%,100%{background:var(--copy-box-background)}50%{background:var(--copy-box-anim)}}.copy-box__button{flex:0 0 auto}.status-label{color:currentcolor;font-size:1.3rem;font-weight:700;text-transform:uppercase;white-space:nowrap}a.status-label:hover{text-decoration:none}a.status-label:focus,a.status-label:focus-visible{background:rgb(var(--link-color));border-radius:2px;color:rgb(var(--link-color-focus));text-decoration:none}a.status-label:focus:not(:focus-visible){background:0 0;border-radius:0;color:rgb(var(--link-color));text-decoration:underline}.notification,.popup,.shoutbox .shoutbox__inner,.shoutbox:not(.js__shoutbox),.status{border-radius:var(--block-radius)}.popup,.popup:not(.status--success):not(.status--error) .status:not(.status--whisper) a:not([class]),.status,.status:not(.status--whisper) a:not([class]){color:#fff}.status-label--bk{background:color-mix(in srgb,currentColor 10%,transparent);display:inline-block;padding:.1rem .4rem}.status-label .icon{fill:currentColor}a.status-label:focus .icon,a.status-label:focus-visible .icon{fill:rgb(var(--link-color-focus))}a.status-label:focus:not(:focus-visible) .icon{fill:rgb(var(--link-color))}.status{background:rgb(var(--basalt));padding:var(--padding);position:relative}.status .status__close-button,.status__actions,.status__icon,.status__title{display:none}.status .icon{fill:currentColor}.status--cb .status__close-button{display:block;margin:0;position:absolute;right:0;top:0}.status--cb .status__content,.status--cb .status__title{margin-right:calc(4rem - var(--padding))}.status--title .status__title{display:block}.status--title.status--cb:not(.status--icon) .status__content{margin-right:0}.status--icon .status__icon{display:block;left:var(--padding);position:absolute;top:var(--padding);width:3.2rem;height:3.2rem;max-height:50%}.status--icon .status__content,.status--icon .status__title{margin-left:calc(var(--padding) + 3.2rem);margin-right:calc(var(--padding) + 3.2rem)}.status--icon.status--small .status__icon{width:2rem;height:2rem;top:calc(var(--padding)/ 2)}.status--icon.status--small .status__content{margin-left:calc(var(--padding) + 2rem)}.status--actions{padding-bottom:calc(var(--padding) + calc(var(--padding)/ 2))}.status--actions .status__actions{display:block;padding-top:calc(var(--gutter)/ 4);text-align:center}.status--actions:not(.status--small) .status__actions{padding-top:calc(var(--gutter) * 2)}.popup:not(.status--success):not(.status--error) a:not([class]){color:rgb(var(--popup-status-link))}.status--error{background:rgb(var(--cherry))!important}.status--success{background:rgb(var(--frog))!important}.status--whisper{background:rgb(var(--whisper))!important;color:currentColor}.form .status--whisper{background:var(--whisper-form)!important}.popup__freeze-page{overflow:hidden}.popup__overlay{align-items:center;background:rgba(var(--coal),.9);bottom:0;display:flex;flex-direction:column;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:700}.popup{background:rgb(var(--popup-background));box-shadow:0 20px 20px 4px rgba(var(--onyx),.9);display:inline-flex;flex-direction:column;margin:var(--gutter) 0;padding:var(--padding);position:relative;width:60rem}.popup:not(.status--success):not(.status--error){color:rgb(var(--popup-page-text))}.popup .status__actions,.popup .status__title{flex:0 0 auto}.popup .status__content{flex:1 0 auto;max-height:calc(100vh - 22rem)}.status--tiny{display:inline-block;padding:calc(var(--padding)/ 2);padding-right:var(--padding)}.status--tiny .status__icon{display:block;left:var(--padding);position:absolute;max-height:50%;width:2rem;height:2rem;top:calc(var(--padding)/ 1.8)}.status--tiny .status__icon~.status__content{margin-left:calc(var(--padding) + 2rem);display:flex;flex-wrap:wrap;gap:.8rem}.status--tiny .status__actions{display:inline-block;margin:-.8rem 0}.notifications--popup.notifications{display:inline-block;position:relative;z-index:1}.notifications .button.notification__button:first-child{margin-left:calc((var(--gutter)/ 2) - 2px)!important;margin-right:0!important}.notifications .button.notification__button[aria-expanded=true]{background:var(--notifictions-bk)!important;position:relative;z-index:1}.button.notification__button[aria-expanded=true]:after{background:var(--notifictions-bk);bottom:-8px;content:'';display:block;height:10px;left:0;position:absolute;width:100%}.button.notification__button .icon{height:2.4rem;margin:-4px -12px;width:2.4rem}.button.notification__button[aria-expanded=true] .icon{fill:rgb(var(--smurf))}.notification__button use{display:none}.notification__button--empty use[href$=icon-bell--empty],.notification__button--new use[href$=icon-bell--existing],.notification__button--new use[href$=icon-bell--new],.notification__button--old use[href$=icon-bell--existing]{display:block}.notification__button--new use[href$=icon-bell--new]{fill:rgb(var(--tango))}.notifications--popup .notifications__panel{background:var(--notifictions-bk);box-shadow:0 1px 6px 0 rgba(var(--onyx),.9);color:rgb(var(--notifictions-text));display:none;padding:var(--padding);position:absolute;right:0;text-align:left;top:calc(100% + 3px);width:40rem}.notification__button[aria-expanded=true]+.notifications__panel{display:block}.notification__list{padding-bottom:var(--padding);padding-top:var(--padding)}.notification__list-inner{display:flex;flex-direction:column;gap:var(--padding)}.notification{background:var(--notifiction-bk);padding:var(--padding);position:relative}.notification .notification__title{font-weight:700;padding-right:.8rem}.button,.menu__title small{font-weight:400}.icon.notification-pin{fill:currentColor;height:1.6rem;position:absolute;right:.4rem;top:.4rem;width:1.6rem}.notification-delete{position:absolute;right:calc(var(--padding)/ 2);bottom:calc(var(--padding)/ 2)}.notification__empty-text{margin:.8rem 0 1.6rem}.notification--time{fill:rgb(var(--smurf))}.notification--info{fill:rgb(var(--frog))}.notification--alert{fill:rgb(var(--cherry))}@media only screen and (max-width:37.5rem){.notifications--popup.notifications{position:static}.notifications--popup .notifications__panel{left:0;margin-top:3px;right:auto;top:auto;width:100%}}.page--sticky-header .notifications--popup .notification__button[aria-expanded=true]+.notifications__panel{display:flex;flex-direction:column;max-height:calc(100vh - 4.5em)}.page--sticky-header .notifications--popup .notifications__panel>*{flex:0 0 auto}.page--sticky-header .notifications--popup .notification__list{flex:1 1 auto;margin-bottom:var(--padding);margin-top:var(--padding);padding-top:0;padding-bottom:0}.shoutbox,.theme--light .shoutbox{--shoutbox-bk:rgb(var(--concrete));--shoutbox-bk-fm:rgb(255,255,255)}.theme--dark .shoutbox{--shoutbox-bk:rgba(var(--concrete), 0.1);--shoutbox-bk-fm:rgba(var(--concrete), 0.1)}.js .shoutbox:not(.js__shoutbox){display:none}.js .shoutbox.shoutbox--disabled,.shoutbox{display:block}.js__shoutbox{text-align:end}.js__shoutbox .shoutbox__outer{text-align:start}.shoutbox__outer{display:grid;grid-template-rows:1fr;--transision-duration:0;transition:grid-template-rows var(--transision-duration) 0s ease-in-out}.js__shoutbox.shoutbox--closing .shoutbox__outer{grid-template-rows:0fr}.shoutbox .shoutbox__inner,.shoutbox:not(.js__shoutbox){background:var(--shoutbox-bk);color:currentColor;margin-bottom:var(--gutter);overflow:hidden;padding:var(--padding);position:relative;transition:padding .1s ease-in-out}.form .shoutbox .shoutbox__inner,.form .shoutbox:not(.js__shoutbox){background:var(--shoutbox-bk-fm)}.shoutbox.shoutbox--loud .shoutbox__inner,.shoutbox:not(.js__shoutbox).shoutbox--loud{background:rgb(var(--tango));color:rgb(var(--basalt))}.js__shoutbox.shoutbox--closing .shoutbox__inner{padding:0 var(--padding)}.shoutbox .shoutbox__inner{padding-right:calc(var(--padding) * 3)}.shoutbox .shoutbox__inner:last-child,.shoutbox:not(.js__shoutbox):last-child{margin-bottom:0}.button.shoutbox__close{margin:0;right:0;position:absolute;top:0}.button.shoutbox__undo{display:none;margin-top:-.8rem;opacity:0;transition:opacity 1s 10ms ease-in-out}.menu[data-menu-type=split] .menu__item>.menu__split-button .icon,.menu__content .icon--nav,.menu__main-toggle .icon{transition:transform .2s}.button.shoutbox__undo.shoutbox__undo--show1{display:inline-block}.button.shoutbox__undo.shoutbox__undo--show2{opacity:1}.shoutbox--loud a:not([class]){color:rgb(var(--basalt))}.chart{position:relative}.chart canvas,.js .chart__table{position:absolute}.no-js .chart{display:none}.js .chart__table{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;white-space:nowrap;width:1px}.percentage-bar{border:1px solid var(--chart-border);border-radius:var(--button-radius);height:8px;position:relative}.percentage-bar__progress{background:rgb(var(--tango));height:100%;left:0;position:absolute}a:not([class]){color:rgb(var(--link-color));text-decoration:underline;outline:0;padding:.2rem .1rem}a:hover:not([class]){opacity:.9;text-decoration:none}a:focus-visible:not([class]),a:focus:not([class]){background:rgb(var(--link-color));border-radius:2px;color:rgb(var(--link-color-focus));text-decoration:none}a:focus:not(:focus-visible):not([class]){background:0 0;border-radius:0;color:rgb(var(--link-color));text-decoration:underline}.page__sidebar a:not([class]){color:rgb(var(--smurf))}.page__sidebar a:focus:not([class]){color:rgb(var(--midnight))}.card--callout--tango a:not([class]){color:rgb(var(--coal))}.card--callout--tango a:focus-visible:not([class]),.card--callout--tango a:focus:not([class]){background:rgb(var(--basalt));color:#fff}.card--callout--tango a:focus:not(:focus-visible):not([class]){background:0 0;color:rgb(var(--coal))}.card--callout--blue a:not([class]){color:#fff}.card--callout--blue a:focus-visible:not([class]),.card--callout--blue a:focus:not([class]){background:#fff;color:rgb(var(--smurf))}.card--callout--blue a:focus:not(:focus-visible):not([class]){background:0 0;color:#fff}.card--callout--grey a:not([class]){color:currentColor}.card--callout--grey a:focus-visible:not([class]),.card--callout--grey a:focus:not([class]){background:rgb(var(--page-text));color:var(--card-callout-grey-link)}.card--callout--grey a:focus:not(:focus-visible):not([class]){background:0 0;color:currentColor}.button--small[target='_blank'] .button__text:after,.button[target='_blank']:not(.button--small):after,a.menu__content[target='_blank'] .menu__text:after,a[target='_blank']:not([class]):after{color:currentColor;content:'\279C';display:inline-block;font-size:.7em;line-height:.1em;margin-left:.2em;transform:rotate(-45deg);vertical-align:super}.button{background:0 0;direction:ltr;display:inline-block;font-family:inherit;font-size:100%;line-height:inherit;outline:0;text-align:center;text-decoration:none}.button--small .button__text,.button:not(.button--small){border-radius:var(--button-radius)}.button .button__text{pointer-events:none}.button:not(.button--small):not(.button--text){padding:.8rem 2rem}.button--text{padding:.8rem .1rem}.button:not(.button--small):not(.button--text)[target="_blank"][target="_blank"]{padding-right:1.2rem}.button--small{padding:.6rem 0}.button--small .button__text{display:inline-block;padding:.2rem .8rem}.button__container{display:inline-block}.button,.button__container .button{margin:0 calc((var(--gutter)/ 2) - 2px)}.button--small,.button__container .button--small{margin:0 calc((var(--gutter)/ 4) - 2px)}.button__container:first-child .button:first-child,:not(.button__container)>.button:first-child{margin-left:0}.button__container:last-child .button:last-child,:not(.button__container)>.button:last-child{margin-right:0}.button--small:not(.button--ghost) .button__text,.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){background:var(--button-bk);box-shadow:0 1px 0 0 rgba(var(--button-shadow),.3);color:#fff}.button--small:not(.button--ghost):hover .button__text,.button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover{background:var(--button-bk-hover);box-shadow:none}.buttons--light .button--small:not(.button--ghost) .button__text,.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),.status:not(.status--whisper) .button--small:not(.button--ghost) .button__text,.status:not(.status--whisper) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear),.table th .button--small:not(.button--ghost) .button__text,.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){background:#fff;color:var(--button-bk)}.buttons--light .button--small:not(.button--ghost):hover .button__text,.buttons--light .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,.status:not(.status--whisper) .button--small:not(.button--ghost):hover .button__text,.status:not(.status--whisper) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover,.table th .button--small:not(.button--ghost):hover .button__text,.table th .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover{background:rgba(255,255,255,.9)}.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear){background:var(--popup-button-bk);color:var(--popup-button-text)}.popup.status:not(.status--success):not(.status--error) .button:not(.button--small):not(.button--ghost):not(.button--text):not(.button--clear):hover{background:var(--popup-button-bk-hover);box-shadow:none}.button--ghost.button--small .button__text,.button--ghost:not(.button--small){box-shadow:0 0 0 1px var(--button-bk) inset;color:var(--button-ghost-text)}.button--ghost.button--small:hover .button__text,.button--ghost:not(.button--small):hover{box-shadow:0 0 0 2px var(--button-bk-hover) inset}.buttons--light .button--ghost.button--small .button__text,.buttons--light .button--ghost:not(.button--small),.status:not(.status--whisper) .button--ghost.button--small .button__text,.status:not(.status--whisper) .button--ghost:not(.button--small),.table th .button--ghost.button--small .button__text,.table th .button--ghost:not(.button--small){box-shadow:0 0 0 1px #fff inset;color:#fff}.buttons--light .button--ghost.button--small:hover .button__text,.buttons--light .button--ghost:not(.button--small):hover,.status:not(.status--whisper) .button--ghost.button--small:hover .button__text,.status:not(.status--whisper) .button--ghost:not(.button--small):hover,.table th .button--ghost.button--small:hover .button__text,.table th .button--ghost:not(.button--small):hover{box-shadow:0 0 0 2px #fff inset}.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear){box-shadow:0 0 0 1px var(--popup-button-bk) inset;color:var(--popup-button-bk)}.popup.status:not(.status--success):not(.status--error) .button--ghost:not(.button--small):not(.button--text):not(.button--clear):hover{box-shadow:0 0 0 2px var(--popup-button-bk) inset}.button--plain:not(.button--small),.button--text:not(.button--small){color:rgb(var(--link-color));text-decoration:underline}.button--plain:not(.button--small):hover,.button--text:not(.button--small):hover{text-decoration:none}.button--clear{color:currentColor}.button--clear:hover{opacity:.9}.button.button--large .icon{display:block;height:4.8rem;margin:auto auto .8rem;width:4.8rem}.form__radbox-label.form__help-text--open~.form__help-text,.scroll .menu{margin-bottom:0}.button.button--large .icon+.button__text{margin-left:0}.button--small:focus .button__text,.button--small:focus-visible .button__text{box-shadow:0 0 0 4px rgb(var(--smurf))!important}.button--small:not(.button--ghost):focus:not(:focus-visible) .button__text,.button:not(.button--small):not(.button--ghost):focus:not(:focus-visible){box-shadow:none!important}.button--ghost:not(.button--small):focus:not(:focus-visible),.button--small.button--ghost:focus:not(:focus-visible) .button__text{box-shadow:0 0 0 1px var(--popup-button-bk) inset!important}.button--plain:focus,.button--plain:focus-visible{background:rgb(var(--link-color));border-radius:2px;color:rgb(var(--link-color-focus));text-decoration:none}.button--plain{background:0 0!important;box-shadow:none!important;color:rgb(var(--link-color))!important;display:inline;padding:0 .1rem!important;text-decoration:underline}.button--plain:hover{opacity:.9;text-decoration:none}.button--plain:focus,.button.button--plain:focus-visible{background:rgb(var(--link-color))!important;border-radius:2px;box-shadow:none!important;color:rgb(var(--link-color-focus))!important;text-decoration:none}.buttons--light .button--plain{color:#fff!important}.buttons--light .button--plain:focus,.buttons--light .button.button--plain:focus-visible{background:#fff!important;color:rgb(var(--coal))!important}@keyframes view{0%{visibility:hidden}100%{visibility:visible}}blinky-toggle-button{visibility:hidden}blinky-toggle-button:has(a){animation:0s 5s forwards 1 view}blinky-toggle-button.js__button--toggle{visibility:visible}.js__button--toggle[toggled='1'] .toggle__0,.js__button--toggle[toggled='0'] .toggle__1{display:none}.js__button--toggle .toggle__text{display:inline-block;margin-left:.4rem}.menu{position:relative;--indent:1.2rem}.menu__group{text-align:left}.table .menu.menu--vertical.menu--dropdown{display:inline-flex;margin:0 calc((var(--gutter)/ 2) - 2px)}.table .menu.menu--vertical.menu--dropdown:first-child{margin-left:0}.table .menu.menu--vertical.menu--dropdown:last-child{margin-right:0}.menu__title{padding:0 var(--padding)}.menu:not(.js__menu):not([data-menu-behaviour=open]) .menu__item .menu__group,.menu:not(.js__menu)>.menu__main-toggle+.menu__group{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.menu [aria-expanded=false]~.menu__group{display:none}.menu [aria-expanded=true]~.menu__group{display:block}.menu--horizontal>[aria-expanded=true]~.menu__group{display:inline-flex}.menu--horizontal>.menu__group{display:inline-flex;flex-wrap:nowrap}.menu--horizontal>.menu__group>.menu__item>.menu__group{box-shadow:0 1px 2px 0 rgba(var(--menu-shadow),.5);position:absolute;z-index:5}.menu__group--boundary+.menu__group{right:0}.menu--vertical .menu__main-toggle+.menu__group{position:absolute;top:100%;z-index:3;border-radius:0 0 var(--button-radius) var(--button-radius);box-shadow:0 1px 2px 0 rgba(var(--menu-shadow),.5)}.form--sections,.form__row,.menu__item{position:relative}.menu--vertical.menu--toggle-right .menu__main-toggle+.menu__group{right:0}.menu--horizontal>.menu__group>.menu__item>.menu__group,.menu--vertical .menu__main-toggle+.menu__group{width:15em}.menu--jump-up .menu__main-toggle+.menu__group{top:auto;bottom:100%;z-index:1}.menu--jump-up>.menu__group>.menu__item{display:flex;flex-direction:column-reverse}.menu__content{background:linear-gradient(rgba(var(--menu),.3),rgba(var(--menu),.3)),rgb(var(--midnight));color:rgb(var(--menu-text));display:flex;padding:.8rem var(--padding);text-decoration:none}.menu__group .menu__group .menu__content{background:linear-gradient(rgba(var(--menu),.25),rgba(var(--menu),.25)),rgb(var(--midnight))}.menu__group .menu__group .menu__group .menu__content{background:linear-gradient(rgba(var(--menu),.2),rgba(var(--menu),.2)),rgb(var(--midnight))}.menu__content:not(a):not(button){font-weight:700}.menu--vertical>.menu__group>li:first-child{border-radius:var(--button-radius) var(--button-radius) 0 0;overflow:hidden}.menu--vertical>.menu__group>li:last-child{border-radius:0 0 var(--button-radius) var(--button-radius);overflow:hidden}.menu--vertical>.menu__group>li:first-child:last-child{border-radius:var(--button-radius)}.menu--vertical:not(.menu--toggle-right)>[aria-expanded=true]+.menu__group{border-top-left-radius:0}.menu--vertical.menu--toggle-right>[aria-expanded=true]+.menu__group{border-top-right-radius:0}.page__sidebar .menu--vertical>.menu__group>li:first-child,.page__sidebar .menu--vertical>.menu__group>li:last-child{border-radius:0}.menu--vertical.menu--jump-up>.menu__group>li:last-child{border-bottom-left-radius:0}.menu--horizontal>.menu__group>.menu__item:first-child>.menu__content{border-radius:var(--button-radius) 0 0 var(--button-radius)}.menu--horizontal>.menu__group>.menu__item:last-child>.menu__content{border-radius:0 var(--button-radius) var(--button-radius) 0}.menu--horizontal>.menu__group>.menu__item .menu__group{border-radius:0 var(--button-radius) var(--button-radius);overflow:hidden}.menu--horizontal>.menu__group>.menu__item .menu__group--boundary+.menu__group{border-radius:var(--button-radius) 0 var(--button-radius) var(--button-radius)}.menu--horizontal.menu--toggle-right>[aria-expanded=true]+.menu__group>.menu__item:last-child>.menu__content,.menu--horizontal:not(.menu--toggle-right)>[aria-expanded=true]+.menu__group>.menu__item:first-child>.menu__content{border-radius:0}.menu .menu__group .menu__group .menu__content>.icon:first-child{flex:0 0 auto}.menu:not(.menu--horizontal) .menu__group .menu__group .menu__content{padding-left:calc(var(--padding) + var(--indent))}.menu:not(.menu--horizontal) .menu__group .menu__group .menu__group .menu__content{padding-left:calc(var(--padding) + (var(--indent) * 2))}.menu a.menu__content:hover,.menu form.menu__content:hover,.menu span.menu__content:hover{background:linear-gradient(rgba(var(--menu),.4),rgba(var(--menu),.4)),rgb(var(--midnight))!important;color:rgb(var(--menu-text))!important}.menu a.menu__content:focus,.menu a.menu__content:focus-visible,.menu__form-button:focus,.menu__form-button:focus-visible{box-shadow:inset 0 0 0 4px rgb(var(--link-color));outline:0}.menu a.menu__content:focus:not(:focus-visible),.menu__form-button:focus:not(:focus-visible){box-shadow:none}.menu a.menu__content:focus-visible,.menu__form-button:focus-visible{box-shadow:inset 0 0 0 4px rgb(var(--link-color));outline:0}.menu [aria-current]{background:rgb(var(--tango))!important;color:rgb(var(--menu-current-text))!important}.menu .menu__content[aria-current]:hover{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)),rgb(var(--tango))!important;color:rgb(var(--menu-current-text))!important}.menu[data-menu-type=split] [aria-current]+.button.menu__split-button{color:rgb(var(--menu-current-text))}.menu__current-parent{box-shadow:inset 4px 0 0 0 rgb(var(--tango))}.menu a.menu__content.menu__current-parent:focus,.menu a.menu__content.menu__current-parent:focus-visible{box-shadow:inset 4px 0 0 0 rgb(var(--tango)),inset 0 0 0 4px rgb(var(--link-color))}.menu a.menu__content.menu__current-parent:not(:focus-visible){box-shadow:inset 4px 0 0 0 rgb(var(--tango))}.menu__content .icon{margin:.2rem .8rem 0 0}.menu__content .icon--nav{flex:0 0 1.6rem;margin:.2rem -.8rem 0 2rem}.menu [aria-expanded=true] .icon--nav{transform:rotate(90deg)}.menu.menu--jump-up>.menu__group>.menu__item>.menu__content+[aria-expanded=true] .icon--nav,.menu.menu--jump-up>.menu__group>.menu__item>.menu__content[aria-expanded=true] .icon--nav{transform:rotate(-90deg)}.icon--90deg,.menu__main-toggle[aria-expanded=true] .icon:not(.icon--av){transform:rotate(90deg)}.menu .icon.icon--av{border-radius:var(--button-radius);height:3.2rem;margin-bottom:-.8rem;margin-left:-1.6rem;margin-top:-.8rem;max-width:3.2rem;width:3.2rem}.menu.menu--vertical .icon.icon--av{margin-top:-.6rem}.menu__spacer{width:1.6rem}.menu__content .menu__text{flex:1 1 auto}.menu--clone{font-style:italic}.menu--horizontal,.menu.menu--vertical.menu--dropdown{display:flex}.menu--horizontal.menu--toggle-right{flex-direction:row-reverse}.menu--vertical{flex-direction:column}.menu.menu--vertical.menu--dropdown.menu--inline{display:inline-flex}.menu .menu__main-toggle{margin:0;align-self:flex-start}.table .menu .menu__main-toggle{white-space:nowrap;padding:.2rem 1.4rem!important}.menu .menu__main-toggle[aria-expanded=true]{background:linear-gradient(rgba(var(--menu),.3),rgba(var(--menu),.3)),rgb(var(--midnight))}.menu .menu__main-toggle[aria-expanded=true]:hover{background:linear-gradient(rgba(var(--menu),.4),rgba(var(--menu),.4)),rgb(var(--midnight))}.menu.menu--toggle-right .menu__main-toggle{align-self:flex-end}.menu--jump-up .menu__main-toggle{z-index:2}.menu__main-toggle[aria-expanded=true] .icon.s180{transform:rotate(180deg)}.menu__main-toggle .icon.icon--av{opacity:.75}.menu__main-toggle[aria-expanded=true] .icon.icon--av{opacity:1}.menu--horizontal .menu__main-toggle[aria-expanded=true]{border-radius:var(--button-radius) 0 0 var(--button-radius)}.menu--horizontal.menu--toggle-right .menu__main-toggle[aria-expanded=true]{border-radius:0 var(--button-radius) var(--button-radius) 0}.menu--vertical .menu__main-toggle[aria-expanded=true]{border-radius:var(--button-radius) var(--button-radius) 0 0}.menu--vertical:not(.menu--toggle-right):not(.menu--jump-up) .menu__main-toggle[aria-expanded=true]+.menu__group>.menu__item:first-child{border-top-left-radius:0}.menu--vertical.menu--toggle-right .menu__main-toggle[aria-expanded=true]+.menu__group>.menu__item:first-child{border-top-right-radius:0}.menu--jump-up .menu__main-toggle[aria-expanded=true]{border-radius:0 0 var(--button-radius) var(--button-radius)}.table .menu .menu__main-toggle .button__text{margin-left:1.2rem;margin-right:-.4rem}form.menu__content,span.menu__content{padding:0}.menu__form-button{background:0 0;border:none;color:rgb(var(--menu-text));display:flex;font-family:inherit;padding:.8rem var(--padding);text-align:left;width:100%}.menu__group .menu__group .menu__form-button{padding-left:0}.menu[data-menu-type=split] .menu__item>.menu__content{padding-right:4.8rem}.menu[data-menu-type=split] .menu__item>.menu__split-button{background:rgba(var(--smurf),.2);margin:0;position:absolute;top:.4rem;right:.4rem;padding:.4rem 1.6rem}.menu[data-menu-type=split] .menu__item>.menu__split-button:not(:hover){background:rgba(255,255,255,.075)!important}.menu[data-menu-type=split] .menu__item>.menu__split-button:hover{background:rgba(255,255,255,.125)!important}.menu--jump-up[data-menu-type=split] .menu__item>.menu__split-button{bottom:.4rem;top:auto}.menu[data-menu-type=split] .menu__item>[aria-current]+.menu__split-button{background:rgba(255,255,255,.2)}.menu[data-menu-type=split] .menu__item>[aria-current]+.menu__split-button:hover{background:rgba(255,255,255,.5)}.breadcrumb li{display:inline}.breadcrumb li+li:before{border:.4rem solid transparent;border-left:.5rem solid rgba(var(--page-text),.85);content:'';display:inline-block;margin:0 0 .1rem .2rem}.breadcrumb [aria-current]{color:inherit;text-decoration:none}.form{background:var(--form-background);border-radius:var(--block-radius);padding:var(--padding);padding-bottom:calc(var(--padding) + calc(var(--padding)/ 2))}.form--horizontal--old{align-items:flex-end;display:flex;padding-bottom:var(--padding)}.form__row~.form__row{margin:var(--gutter) 0 0}.form--horizontal--old .form__row{flex:1 1 auto;flex-flow:row wrap;margin:0 calc(var(--gutter)/ 2)}.form__row--footer{text-align:center}.form__row--footer:before{background:var(--form-footer-border);border-radius:1px;content:'';display:block;height:2px;margin-bottom:calc(var(--gutter) + 2px);opacity:.2}.form .fieldset.form__row,.form .fieldset.form__row legend,.form__help-text,.form__help-toggle-icon,.form__step .form__step__icon,.js__form-steps .form-steps__icon{border-radius:var(--button-radius)}.form--horizontal--old .form__row--footer{flex:0 0 auto}.form__row--footer--rtl{direction:rtl}.form--sections{align-items:flex-start;display:flex;flex-flow:row wrap;justify-content:space-between;padding-bottom:0;--scroll-margin-top:0}.form--sections .form__section-list{flex:0 1 18em;padding:0 calc(var(--gutter) * 1.5) var(--gutter) 0;position:sticky;top:0;top:var(--scroll-margin-top)}.form--sections .form__section-content{flex:1 1 30em}.form--sections .fieldset{scroll-margin-top:var(--scroll-margin-top)}.form--sections__menu-anchor{clip:rect(0 0 0 0);clip-path:inset(100%);height:1px;overflow:hidden;padding:4px;position:absolute;white-space:nowrap;width:1px}@media only screen and (max-width:75rem){.form--sections{display:block}.form--sections .form__section-list{flex:1 1 18em;padding-right:0;position:static}.form--sections__menu-anchor{clip:auto;clip-path:none;height:auto;overflow:hidden;position:static;white-space:normal;width:auto}}.form--sections .form__row--footer{bottom:0;background:linear-gradient(180deg,rgba(var(--form-section-footer),0) 0,rgba(var(--form-section-footer),1) 1.2rem,rgba(var(--form-section-footer),1) 0);margin-left:calc((var(--gutter)/ 2) - var(--gutter) - 2px);margin-right:calc((var(--gutter)/ 2) - var(--gutter) - 2px);margin-top:0;padding-bottom:calc(var(--padding) + calc(var(--padding)/ 2));padding-top:1.6rem;position:sticky;z-index:5}.form:not(.form--horizontal).form--sections .form__row--footer:before{margin-left:calc((var(--gutter)/ 2) + 2px);margin-right:calc((var(--gutter)/ 2) + 2px)}.form--horizontal{display:flex;flex-flow:row wrap;gap:var(--gutter);justify-content:space-between;padding-bottom:var(--padding);padding-top:0}.form--horizontal .form__fields{display:flex;flex:1 1 20em;flex-flow:row wrap;justify-content:flex-start;column-gap:var(--gutter)}.form--horizontal .form__radbox~br,.form.form--horizontal .form__row--footer:before{display:none}.form--horizontal .form__row--footer{flex:0 1 max-content;align-self:flex-end}.form--horizontal .form__fields .form__row{flex:1 1 10em;margin-top:0;padding-top:var(--padding)}.form--horizontal .form__fields fieldset.form__row{padding-top:0}.form--horizontal .form__fields.form__horizontal-fields .form__row{flex:1 1 15em}.form--horizontal .form__fields .form__row.form__row--content{flex:0 1 max-content}.form--horizontal .form__fields .form__row.form__row--full-width{flex:1 1 100%}.form__row--br{flex-basis:100%;height:0}.form--horizontal .form__radbox-label:not(:last-child){padding-right:calc(var(--gutter)/ 2)}.form--horizontal .form__fields .form__fields .form__row{flex-basis:5em}.form .fieldset.form__row{background:var(--form-fieldset);padding:0 calc(var(--gutter)/ 2) 1.6rem;position:relative}.form .fieldset .fieldset.form__row{background:var(--form-fieldset2)}.form .fieldset .fieldset .fieldset.form__row{background:var(--form-fieldset3)}.form.form--horizontal>.fieldset{margin-top:-1rem;margin-bottom:-1rem}.form.form--horizontal .fieldset .fieldset{margin-top:1rem}.form:not(.form--horizontal) .fieldset.form__row{margin-left:calc((var(--gutter)/ 2) - var(--gutter));margin-right:calc((var(--gutter)/ 2) - var(--gutter))}.form:not(.form--horizontal) .fieldset .fieldset.form__row{margin-left:0;margin-right:0}.form.form--horizontal .fieldset .fieldset,.form.form--horizontal .fieldset.form__row .form__row{display:inline-block}.form .fieldset.form__row legend{background:var(--form-fieldset);padding:calc(var(--padding)/ 4) var(--padding) 0;margin-bottom:1.6rem;margin-top:0}.form.form--horizontal .fieldset.form__row legend{font-size:1.6rem;padding:0 calc(var(--padding)/ 2)}.form legend.visually-hidden+.legend{margin-top:1rem}.fieldset--active{box-shadow:0 0 0 2px rgb(var(--link-color))}.fieldset--active legend{box-shadow:0 -2px 0 0 rgb(var(--link-color))}.button.form__help-toggle,.button.form__help-toggle:focus{box-shadow:none!important}@container form-horizontal-fields (min-width:40em){@supports(display:contents){.form__horizontal-fields .fieldset.form__row{display:unset;grid-column:1/span 2}}}.form--step-through{--scroll-margin-top:0}.form--step-through .form__row--step,.form--step-through .form__step__button,.form--step-through .form__step__icon{display:none}.form--step-through-css .form__step{padding-bottom:3.2rem;padding-left:2.8rem;margin-left:1.2rem;margin-right:4.4rem;border-left:solid 2px var(--step-line);border-left-style:dashed;position:relative;scroll-margin-top:var(--scroll-margin-top)}.form--step-through-css .form__step--completed{border-left-style:solid}.form--step-through-css .form__step--last{border-left-color:transparent;padding-bottom:var(--gutter)}.form__step:not(.form__step--active):not(.form__step--completed){padding-bottom:calc(var(--gutter)/ 2)}.form__step:not(.form__step--active):not(.form__step--completed) .h3{font-size:1em;padding-top:.4rem}.form--step-through-css .form__step legend.visually-hidden+.legend{margin-top:0}.form--step-through-css .form__step .form__row{clear:both}.form__step .form__step__icon{display:block;position:absolute;left:-1.3rem;padding:.4rem;top:.4rem;transform:rotate(45deg)}.form__step .form__step__icon .icon{transform:rotate(-45deg);display:block;top:0}.form__step .form__step__icon .icon--dot,.form__step .form__step__icon .icon--dot-outline,.form__step .form__step__icon .icon--tick{display:none}.form__step--active:not(.form__step--completed) .form__step__icon .icon--dot,.form__step--completed .form__step__icon .icon--tick,.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon--dot-outline{display:block}.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon{background:#fff}.form__step:not(.form__step--active):not(.form__step--completed) .form__step__icon .icon{fill:rgba(var(--basalt),.5)}.form__step--active .form__step__icon{background:rgb(var(--tango))}.form__step--active .form__step__icon .icon{fill:rgb(var(--basalt))}.form__step--completed .form__step__icon{background:rgb(var(--midnight))}.form__step--completed .form__step__icon .icon{fill:#fff}.form--step-through-css .form__step .form__step_p{margin-bottom:1.6rem;display:none}.form--step-through-css .form__step legend,.form--step-through-css .form__step--active .form__step_p{display:block}.form--step-through--hide-fields.form--step-through-css .form__step .form__row{display:none}.form--step-through--hide-fields.form--step-through-css .form__step--active .form__row{display:block}.form--step-through-css .form__step .button.form__step__button{display:none}.form--step-through-css .form__step--active .button.form__step__button{display:inline-block}.form--step-through-css .form__step:not(.form__step--active):not(.form__step--completed) .form__row{display:none}.form--step-through-css .form__step--active .form__row{display:block}.form--step-through-css .form__step--todo .form__row{display:none}.form--step-through-css .form__row--step{display:block;margin:calc(var(--gutter) * 2) 0 0;text-align:center}.form__step__noproceedmsg{display:none}.form__step__noproceedmsg[role=alert]{display:block;margin-bottom:1.6rem}.form__step__noproceedmsg .icon{fill:rgb(var(--form-error))}.form-steps{--scroll-margin-top:0}.form-steps .form-steps__controls .button,.form-steps__controls,.form-steps__icon{display:none}.form__row--footer.form-steps__controls{display:block}.form__row--footer.form-steps__controls .button:not(.form__step__button):not(.form__step__button-back){display:inline-block}.js__form-steps .form-steps__step{padding-bottom:3.2rem;padding-left:2.8rem;margin-left:1.2rem;margin-right:4.4rem;border-left:solid 2px var(--form-step-line);border-left-style:dashed;position:relative;scroll-margin-top:var(--scroll-margin-top)}.js__form-steps.form-steps--hide-previous-fields .form-steps__step{padding-bottom:var(--gutter)}.js__form-steps .form-steps__step--complete{border-left-style:solid}.js__form-steps .form-steps__step--last{border-left-color:transparent;padding-bottom:var(--gutter)}.js__form-steps .form-steps__step--complete .legend,.js__form-steps .form-steps__step--incomplete .legend{font-size:1.6rem;padding-top:.4rem}.js__form-steps .form-steps__fields{display:grid;grid-template-rows:1fr;transition:visibility 30ms ease-in-out,grid-template-rows .3s ease-in-out 30ms;visibility:visible}.js__form-steps .form-steps__step--incomplete .form-steps__fields,.js__form-steps.form-steps--hide-previous-fields .form-steps__step--complete .form-steps__fields{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out,visibility 30ms ease-in-out .3s;visibility:hidden}.js__form-steps .form-steps__inner{overflow:hidden;margin:-4px;padding:4px}.js__form-steps legend.visually-hidden+.legend{margin-top:0}.js__form-steps .form-steps__title a{color:currentColor;text-decoration:none}.js__form-steps .form-steps__title a:hover{text-decoration:underline}.js__form-steps .form-steps__title a *{pointer-events:none}.js__form-steps .form-steps__icon{display:block;position:absolute;left:-1.3rem;padding:.4rem;top:.4rem;transform:rotate(45deg)}.js__form-steps .form-steps__icon .icon{transform:rotate(-45deg);display:block;top:0}.js__form-steps .form-steps__icon use{display:none}.js__form-steps .form-steps__step--complete .form-steps__icon{background:var(--form-step-icon-complete-bk);fill:#fff}.js__form-steps .form-steps__step--active .form-steps__icon{background:rgb(var(--tango));fill:rgb(var(--basalt))}.js__form-steps .form-steps__step--incomplete .form-steps__icon{background:var(--form-step-icon-incomplete-bk);fill:var(--form-step-icon-incomplete-fill)}.form__error .icon,.js__form-steps .form-steps__error .icon{fill:rgb(var(--form-error))}.js__form-steps .form-steps__step--active .icon--dot,.js__form-steps .form-steps__step--complete .icon--tick,.js__form-steps .form-steps__step--incomplete .icon--dot-outline{display:block}.js__form-steps .form-steps__controls{display:none}.js__form-steps .form-steps__step--active .form-steps__controls{display:block;margin:calc(var(--gutter) * 2) 0 0;text-align:center}.js__form-steps .form-steps__controls .button[href],.js__form-steps .form__row--footer .button:not(a){display:inline-block}.form-steps__error{display:none}.js__form-steps .form-steps__error[role=alert]{display:block;margin-bottom:1.6rem}.form__horizontal-fields{container-type:inline-size;container-name:form-horizontal-fields}.form__horizontal-fields__inner{margin-bottom:var(--gutter)}@container form-horizontal-fields (min-width:40em){@supports(display:contents){.form__horizontal-fields .form__horizontal-fields__inner{display:grid;grid-template-columns:minmax(0,max-content) minmax(50%,1fr);gap:var(--gutter)}.form__horizontal-fields .form__row{display:contents}}.form--horizontal .form__horizontal-fields .form__row{display:flex;align-items:center;gap:calc(var(--gutter)/ 2)}.form--horizontal .form__horizontal-fields .form__row .form__label{flex:0 1 max-content;white-space:nowrap;margin-bottom:0}.form--horizontal .form__horizontal-fields .form__row .form__field{flex:1 1 auto}}.form__label{display:block;font-weight:500;margin-bottom:.4rem;position:relative}.form__required{font-size:1.1rem;font-weight:700;vertical-align:super}.button.form__help-toggle{background:0 0!important;margin-left:calc((var(--gutter)/ 2) - 2px)!important;padding-bottom:1.6rem;position:absolute;bottom:.2rem}.button.form__help-toggle:hover{background:0 0;transform:translateY(0)}.form__help-text,.form__help-toggle-icon{background:var(--form-help);display:block}.button.form__help-toggle:focus .form__help-toggle-icon,.button.form__help-toggle:focus-visible .form__help-toggle-icon,.form__switch:focus-visible:before,.form__switch:focus:before,.js .form__file:focus~.form__file__drag{box-shadow:0 0 0 4px rgb(var(--smurf))}.form__help-toggle-icon{height:1.6rem;margin:0 0 0 -2rem;pointer-events:none;position:relative;top:.4rem;transition:all .3s cubic-bezier(.175,.885,.32,.5);width:1.6rem}.button.form__help-toggle .icon{fill:#fff;padding:.2rem;pointer-events:none;top:0;transition:inherit;vertical-align:top}body .form .button.form__help-toggle .icon{fill:#fff!important}.button.form__help-toggle:focus:not(:focus-visible) .form__help-toggle-icon{box-shadow:none}.button.form__help-toggle[aria-expanded=true] .form__help-toggle-icon{transform:rotate(-45deg)}.button.form__help-toggle[aria-expanded=true] .icon{transform:rotate(45deg)}@container form-horizontal-fields (min-width:40em){@supports(display:contents){.form__horizontal-fields .form__label{padding-top:.4rem}.form__horizontal-fields .button.form__help-toggle{position:static;margin:0 calc(-1 * var(--gutter)) calc(-1 * var(--gutter)) calc((var(--gutter)/ 2) - .6rem)!important;padding:0 1.4rem 2.4rem 2rem}.form__horizontal-fields .form__help-toggle-icon{top:.2rem}}}.form__help-text{color:#fff;height:0;opacity:0;overflow:hidden;padding:0 .8rem;transition:all .3s cubic-bezier(.175,.885,.32,.5);transition-property:height,opacity;visibility:hidden}.form__help-text--open+.form__help-text,.form__help-text--open+span>.form__help-text{height:auto;margin-bottom:.8rem;opacity:1;padding:.4rem .8rem;visibility:visible}.form__help-text a:not([class]){color:currentColor}.form__help-text a:focus-visible:not([class]),.form__help-text a:focus:not([class]){background:#fff;color:rgb(var(--coal))}.form__help-text a:focus:not(:focus-visible):not([class]){background:0 0;color:currentColor}.form__error{display:none;margin-top:.4rem}.form__error--show,[aria-invalid=true]~.form__error{display:block}.form__inline{margin-right:.8rem;width:auto!important}.form input[type=date],.form input[type=email],.form input[type=number],.form input[type=password],.form input[type=search],.form input[type=tel],.form input[type=text],.form input[type=url],.form__text{background:var(--form-field-background);border:1px solid var(--form-field-border);border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem;width:100%}.form input[type=date]:hover,.form input[type=email]:hover,.form input[type=number]:hover,.form input[type=password]:hover,.form input[type=search]:hover,.form input[type=tel]:hover,.form input[type=text]:hover,.form input[type=url]:hover,.form__text:hover{border-color:var(--form-field-border-hover)}.form input[type=date]:focus,.form input[type=email]:focus,.form input[type=number]:focus,.form input[type=password]:focus,.form input[type=search]:focus,.form input[type=tel]:focus,.form input[type=text]:focus,.form input[type=url]:focus,.form__text:focus{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px rgb(var(--link-color))}.form input[type=date][aria-invalid=true],.form input[type=email][aria-invalid=true],.form input[type=number][aria-invalid=true],.form input[type=password][aria-invalid=true],.form input[type=search][aria-invalid=true],.form input[type=tel][aria-invalid=true],.form input[type=text][aria-invalid=true],.form input[type=url][aria-invalid=true],.form__text[aria-invalid=true]{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px rgb(var(--form-error))}.form input[type=date][aria-invalid=true]:focus,.form input[type=email][aria-invalid=true]:focus,.form input[type=number][aria-invalid=true]:focus,.form input[type=password][aria-invalid=true]:focus,.form input[type=search][aria-invalid=true]:focus,.form input[type=tel][aria-invalid=true]:focus,.form input[type=text][aria-invalid=true]:focus,.form input[type=url][aria-invalid=true]:focus,.form__text[aria-invalid=true]:focus{border-color:#fff;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__text--large{max-width:50rem}.form__text--medium{max-width:25rem}.form__text--small{max-width:14rem}.form__text--tiny{max-width:6rem}.form__multilist{display:block;position:relative}.form__select.multilist__list{display:none;min-width:100%;overflow-y:auto;position:absolute;scrollbar-width:none;z-index:1}.js .form__multilist:focus-within .multilist__list{display:block}.multilist__list--empty{display:none!important}.form__radbox-label~.form__help-text+br,.multilist__list .hide{display:none}.form__pfix--output .form__pfix__text{background:var(--output-border);color:currentColor}.form__pfix--output .form__pfix__text .icon{fill:currentColor;opacity:var(--output-opacity)}.form__output{border:1px solid var(--output-border);border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem;cursor:not-allowed}.form__pfix:has([aria-invalid=true])~.form__error,blinky-child-fields,blinky-obfuscated-field{display:block}.js__form__obfuscated{position:relative}.js__form__obfuscated input.form__text{padding-right:var(--obfuscated-padding)}.js__form__obfuscated .form__obfuscated__toggle{display:inline-block;position:absolute;right:.4rem}.form__textarea{background:var(--form-field-background);border:1px solid var(--form-field-border);border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem;width:100%}.form__textarea:hover{border-color:var(--form-field-border-hover)}.form__textarea:focus{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px rgb(var(--link-color))}.form__textarea[aria-invalid=true]{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px rgb(var(--form-error))}.form__textarea[aria-invalid=true]:focus{border-color:#fff;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__pfix,.form__prefix{display:flex}.form__pfix__text,.form__prefix__text{background:var(--form-field-border);border-radius:var(--button-radius) 0 0 var(--button-radius);color:var(--form-pfix-text);padding:.8rem}.form__pfix__text+:not(:focus):not([aria-invalid=true]),.form__prefix__text+:not(:focus):not([aria-invalid=true]){border-radius:0 var(--button-radius) var(--button-radius) 0}.form__pfix--radbox .form__pfix__text,.form__prefix--radbox .form__prefix__text{border-radius:var(--button-radius);margin:.3rem .8rem .3rem 0;padding:.1rem .4rem}.form__pfix--postfix .form__pfix__text{border-radius:0 var(--button-radius) var(--button-radius) 0;order:1}.form__pfix--postfix .form__pfix__text+:not(:focus):not([aria-invalid=true]){border-radius:var(--button-radius) 0 0 var(--button-radius)}.form__pfix--postfix.form__pfix--radbox .form__pfix__text{border-radius:var(--button-radius);margin-left:.8rem;margin-right:0}.form__pfix--postfix .form__pfix__text~*{z-index:1}.form__pfix--warning:not(.form__pfix--postfix) .form__pfix__text+*{border-left-color:rgb(var(--tango))!important}.form__pfix--warning.form__pfix--postfix .form__pfix__text+*{border-right-color:rgb(var(--tango))!important}.form__pfix--warning .form__pfix__text{background:rgb(var(--tango));color:rgb(var(--form-pfix-warning))}.form__pfix--warning:not(.form__pfix--radbox) .form__pfix__text{border:1px solid var(--form-field-border)}.form__pfix--warning:not(.form__pfix--postfix):not(.form__pfix--radbox) .form__pfix__text{border-right:none}.form__pfix--warning.form__pfix--postfix:not(.form__pfix--radbox) .form__pfix__text{border-left:none}.form__radbox{background:0 0;opacity:.00001;position:absolute}.form__large-radios .form__radbox~.form__large-radios__content .form__radbox-label,.form__radbox+.form__radbox-label{cursor:pointer;display:inline-block;min-height:2.6rem;padding:.4rem 0 .4rem 3.4rem;position:relative}.form__large-radios .form__radbox~.form__large-radios__content .form__radbox-label:before,.form__radbox+.form__radbox-label:before{background:var(--form-field-background);border:1px solid var(--form-field-border);border-radius:var(--button-radius);content:'';height:2.6rem;position:absolute;left:0;width:2.6rem}.form__large-radios .form__radbox[type=checkbox]:checked~.form__large-radios__content .form__radbox-label:after,.form__radbox[type=checkbox]:checked+.form__radbox-label:after{border:.3rem solid;border-top:0;border-left:0;content:'';height:1.2rem;left:1rem;position:absolute;width:.7rem;top:.9rem;transform:rotate(40deg)}.form__radbox:hover+label:before{border-color:var(--form-field-border-hover)}.form__radbox:focus+label:before,.form__radbox:focus-visible+label:before{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px rgb(var(--link-color))}.form__radbox:focus:not(:focus-visible)+label:before{border-color:var(--form-field-border);box-shadow:none}.form__radbox[aria-invalid=true]+label:before{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px rgb(var(--form-error))}.form__radbox[aria-invalid=true]:focus+label:before,.form__radbox[aria-invalid=true]:focus-visible+label:before{border-color:#fff;box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.form__radbox[aria-invalid=true]:focus:not(:focus-visible)+label:before{border-color:rgb(255,255,255,0);box-shadow:0 0 0 2px rgb(var(--form-error))}.form__large-radios .form__radbox[disabled=disabled]~.form__large-radios__content .form__radbox-label:before,.form__radbox[disabled=disabled]+.form__radbox-label:before{opacity:.5}.form__large-radios .form__radbox[disabled=disabled]~.form__large-radios__content .form__radbox-label:after,.form__radbox[disabled=disabled]+.form__radbox-label:after{border-right:solid 1px var(--form-field-border);content:'';height:3.67rem;left:1.2rem;position:absolute;width:.1rem;top:-.1rem;transform:rotate(45deg);opacity:.5}.form__large-radios .form__radbox[disabled=disabled]~.form__large-radios__content .form__radbox-label,.form__radbox[disabled=disabled]+.form__radbox-label{cursor:not-allowed}.form__radbox-label .form__help-toggle{top:-.4rem}.form__large-radios .form__radbox[type=radio]~.form__large-radios__content .form__radbox-label:before,.form__radbox[type=radio]+.form__radbox-label:before{border-radius:50%}.form__large-radios .form__radbox[type=radio]:checked~.form__large-radios__content .form__radbox-label:after,.form__radbox[type=radio]:checked+.form__radbox-label:after{background:rgb(var(--page-text));border-radius:50%;content:'';height:1rem;left:.8rem;position:absolute;width:1rem;top:1.2rem}.form__large-radios{display:grid;grid-gap:var(--padding);grid-template-columns:repeat(auto-fit,minmax(var(--large-radios-min-width),1fr))}.form__large-radios--column{grid-template-columns:1fr!important}.form__large-radios__item{border:1px solid var(--form-field-border);border-radius:var(--button-radius);background:var(--form-field-background);color:inherit;display:flex;padding:var(--padding);flex-direction:column;justify-content:space-between;position:relative}.form__large-radios__item:has(.form__radbox[disabled=disabled]),.form__large-radios__item:not(:has(.form__radbox)){opacity:.65}.form__large-radios__label{position:absolute;inset:0;z-index:1;cursor:pointer}.form__large-radios .form__radbox[disabled=disabled]+.form__large-radios__label{cursor:default}.form__large-radios .form__radbox:checked+.form__large-radios__label{background:var(--large-radios-bk)}.form__large-radios .form__radbox:checked~.form__large-radios__content,.form__large-radios .form__radbox:checked~.form__large-radios__content a{color:rgb(var(--large-radios-text))}.form__large-radios__item .form__large-radios__content{pointer-events:none;position:relative;z-index:2}.form__large-radios__item .form__radbox~.form__large-radios__content{padding-left:3.4rem}.form__large-radios__content+.form__large-radios__content{padding-top:var(--padding)}.form__large-radios__content .form__radbox-label{margin-bottom:.4em}.form__radbox~.form__large-radios__content .form__radbox-label{margin-left:-3.4rem}.form__large-radios .form__radbox:focus-visible~.form__large-radios__content .form__radbox-label:before,.form__large-radios .form__radbox:focus~.form__large-radios__content .form__radbox-label:before{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px rgb(var(--link-color))}.form__large-radios .form__radbox:focus:not(:focus-visible)~.form__large-radios__content .form__radbox-label:before{border-color:var(--form-field-border);box-shadow:none}.form__large-radios__item .button,.form__large-radios__item a{position:relative;z-index:3;pointer-events:visible}.form__large-radios .highlight-stripe{background:var(--large-radios-stripe-disabled);margin-left:calc(var(--padding) * -1);margin-right:calc(var(--padding) * -1);padding:calc(var(--padding)/ 2)}.form__large-radios .form__radbox:not([disabled=disabled])~.form__large-radios__content .highlight-stripe{background:var(--large-radios-stripe)}.form__large-radios .form__radbox~.form__large-radios__content .highlight-stripe{margin-left:calc((3.4rem + var(--padding)) * -1)}.form__large-radios .form__radbox:checked~.form__large-radios__content .highlight-stripe{color:rgb(var(--page-text))}.form__large-radios .form__radbox:checked~.form__large-radios__content .form__large-radios__tag .icon{fill:#fff!important}.form__select{background:var(--form-field-background);border:1px solid var(--form-field-border);border-radius:var(--button-radius);color:inherit;display:inline-block;padding:.7rem 3.2rem .7rem .7rem;width:100%}.form__select--content-width{width:auto}.form__select:not([multiple]){background:var(--form-select-background);background-position:calc(100% - 2rem) calc(2rem - .2rem),calc(100% - 1.5rem) calc(2rem - .2rem),100% 100%,100% 100%;background-size:.5rem .5rem,.5rem .5rem,auto,auto;background-repeat:no-repeat}.form__select::-ms-expand{display:none}.form__select:hover{border-color:var(--form-field-border-hover)}.form__select:focus{border-color:rgba(255,255,255,0);box-shadow:0 0 0 4px rgb(var(--link-color))}.form__select[aria-invalid=true]{border-color:#fff;box-shadow:0 0 0 2px rgb(var(--form-error))}.form__select[aria-invalid=true]:focus{box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.page__footer .form__select,.page__header .form__select{background:var(--form-field-background-dark);border:1px solid var(--form-field-border-dark);color:inherit}.page__footer .form__select:hover,.page__header .form__select:hover{border-color:var(--form-field-border-hover-dark)}.page__footer .form__select:not([multiple]),.page__header .form__select:not([multiple]){background:var(--form-select-background-dark);background-position:calc(100% - 2rem) calc(2rem - .2rem),calc(100% - 1.5rem) calc(2rem - .2rem),100% 100%,100% 100%;background-size:.5rem .5rem,.5rem .5rem,auto,auto;background-repeat:no-repeat}.form__switch,.form__switch:hover{background:0 0}.form__switch{border:none;padding:.4rem 0 .4rem 5rem;position:relative}.form__switch:focus{box-shadow:none;outline:0}.form__switch:before{background:var(--switch);border-radius:2em;content:'';height:2.6rem;left:0;position:absolute;top:.4rem;width:4.2rem}.form__switch[aria-labelledby]{min-height:3.2rem}.form__switch:hover:before{background:var(--switch-hover)}.form__switch__dot{border-radius:2em;content:'';height:1.8rem;left:.4rem;pointer-events:none;position:absolute;top:.8rem;transform:translateX(0);width:1.8rem}.form__switch[aria-pressed=true]:before{background:rgb(var(--frog))}.form__switch[aria-pressed=true] .form__switch__dot{transform:translateX(1.6rem)}.form__switch[aria-pressed=true] .form__switch__dot:after{border:.3rem solid;border-top:0;border-left:0;content:'';height:1rem;left:.65rem;position:absolute;width:.6rem;top:.3rem;transform:rotate(40deg)}.form__switch:focus:not(:focus-visible):before{box-shadow:none}.form__switch[aria-invalid=true]:before{box-shadow:0 0 0 2px rgb(var(--form-error))}.form__switch[aria-invalid=true]:focus:before{box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}blinky-child-fields .children{display:grid}.js__fieldset-group .fieldset[aria-expanded=false],.js__form__child-fields .form__radbox[disabled=disabled]+.form__radbox-label::after{display:none}blinky-child-fields.js__form__child-fields .children{grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out,visibility 30ms ease-in-out .3s;visibility:hidden}blinky-child-fields.js__form__child-fields .children[aria-expanded=true]{grid-template-rows:1fr;transition:visibility 30ms ease-in-out,grid-template-rows .3s ease-in-out 30ms;visibility:visible}.js__form__child-fields .form__child-fields__inner{overflow:hidden;padding:0 4px 4px;margin-bottom:-4px}.form__child-fields{margin-left:calc(3.4rem - 4px)}.js__form__child-fields .children input[disabled=disabled],.js__form__child-fields .children textarea[disabled=disabled]{color:var(--form-field-background)}.fieldset-group{--scroll-margin-top:0}.fieldset-group .fieldset{scroll-margin-top:var(--scroll-margin-top)}.form:not(.form--horizontal) .fieldset-group .fieldset.form__row{margin-left:0;margin-right:0}.js .form__file__name,.js .form__file__name span,.js__fieldset-group .fieldset[aria-expanded=true]{display:block}.js .form__file{opacity:0;position:absolute}.js .form__file__button{margin-left:.4rem;margin-right:.4rem}.js .form__file__name{padding-top:calc(var(--padding)/ 4)}.js .form__file__drag{background:var(--file-upload-background);border:1px dashed var(--file-upload-border);border-radius:var(--block-radius);display:inline-block;padding:calc(var(--padding) + 1px)}.js .form__file__drag-active~.form__file__drag{border:2px dashed var(--file-upload-border);padding:var(--padding)}.js .form__file[aria-invalid=true]~.form__file__drag{box-shadow:0 0 0 2px rgb(var(--form-error))}.js .form__file[aria-invalid=true]:focus~.form__file__drag{box-shadow:0 0 0 2px rgb(var(--form-error)),0 0 0 4px rgb(var(--link-color))}.js .form__file__drag *{pointer-events:none}.progress{display:block;width:100%}.progress__box{background:rgba(var(--tango),1);display:block;margin:var(--gutter) auto;overflow:hidden;position:relative}.progress__box--circle{border-radius:50%;height:4rem;padding:.3rem;width:4rem}.progress__box--circle .progress__fish,.theme--light .progress__box--circle .progress__fish{animation:fish-circle 1s linear infinite;background:url(../images/loader-circle.svg) center center no-repeat;display:block;height:100%;width:100%}@keyframes fish-circle{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}.progress__box--line{border-radius:var(--button-radius);height:1.6rem;margin:var(--gutter) auto;overflow:hidden;width:100%}.progress progress[value]+.progress__box--line{background:var(--progress-box)}.progress__box--line .progress__fish,.theme--light .progress__box--line .progress__fish{animation:fish-line .5s linear infinite;background:url(../images/loader-line.svg) left top;background-size:6.7rem 1.6rem;bottom:0;position:absolute;right:0;top:0;width:200%}.progress progress[value]+.progress__box--line .progress__fish{background-color:rgba(var(--tango),1)!important;right:auto;width:0%;left:0;animation:none;background-position:right;transition:width var(--speed)}.button:has(.progress){position:relative}.button .progress__box--line,.menu .progress__box--line{position:absolute;left:0;top:0;margin:0;height:.4rem;border-bottom-left-radius:0}.button .progress__box--line .progress__fish,.menu .progress__box--line .progress__fish{background:repeating-linear-gradient(-45deg,rgba(var(--tango),1),rgba(var(--tango),1) 25%,rgba(255,255,255,.25) 25%,rgba(255,255,255,.25) 50%,rgba(var(--tango),1) 50%,rgba(var(--tango),1) 75%,rgba(255,255,255,.25) 75%,rgba(255,255,255,.25) 100%);background-size:6.7rem .4rem}.button .progress progress[value]+.progress__box--line,.menu .progress progress[value]+.progress__box--line{background:0 0}.button .progress__fish,.menu .progress__fish{animation:fish-line 1s linear infinite}@keyframes fish-line{0%{transform:translateX(0)}100%{transform:translateX(6.7rem)}}@media (prefers-color-scheme:dark){:root{--card-background-opacity:0.05;--card-listing-border:rgba(255,255,255, 0.15);--card-calout-grey-bk:rgba(var(--concrete), 0.3);--page-background:rgb(var(--coal));--page-text:255,255,255;--table:255,255,255;--table-tint:255,255,255;--table-header-text:255,255,255;--table-border-opacity:0.15;--table-header-opacity:0.2;--table-tint-opacity:0.1;--table-highlight:rgba(var(--tango), 0.4);--table-highlight-th:linear-gradient(
rgba(var(--tango), 0.4),
rgba(var(--tango), 0.4)),rgba(var(--table), var(--table-header-opacity));--table-highlight-row:linear-gradient(
rgba(var(--tango), 0.4),
- rgba(var(--tango), 0.4)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.5);--tab-panel-background:255,255,255;--tab-text:255,255,255;--inactive-tab-background:var(--tab-panel-background);--tab-group-bk:linear-gradient(
+ rgba(var(--tango), 0.4)),rgba(var(--table), var(--table-horizontal-header-opacity));--table-highlight-intersect:rgba(var(--tango), 0.5);--tab-group-bk:linear-gradient(
rgba(255,255,255, 0.05),
- rgba(255,255,255, 0.05)),rgb(var(--coal));--tab-group-active-bk:rgba(var(--coal), 1);--accordion-border:rgba(255,255,255, 0.15);--highlights-background:rgba(255,255,255, 0.35);--copy-box-background:rgb(var(--coal));--copy-box-border:rgb(var(--smurf));--popup-background:var(--basalt);--popup-text:var(--page-text);--popup-page-text:255,255,255;--popup-status-link:255,255,255;--notifictions-bk:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),rgb(var(--coal));--notifiction-bk:rgba(var(--coal), 0.5);--notifictions-text:255,255,255;--post-it-bk:rgba(var(--post-it),0.4);--chart-border:rgba(255,255,255, 0.3);--link-color:8,161,226;--link-color-focus:var(--onyx);--button-ghost-text:rgb(255,255,255);--popup-button-bk:rgb(255,255,255);--popup-button-text:var(--button-bk);--popup-button-bk-hover:rgba(255,255,255,0.9);--form-background:rgba(var(--jet), 1);--form-footer-border:rgba(255,255,255,0.8);--form-section-footer:var(--jet);--form-fieldset:linear-gradient(
+ rgba(255,255,255, 0.05)),rgb(var(--coal));--tab-group-active-bk:rgba(var(--coal), 1);--accordion-border:rgba(255,255,255, 0.15);--highlights-background:rgba(255,255,255, 0.35);--popup-background:var(--basalt);--popup-text:var(--page-text);--popup-page-text:255,255,255;--popup-status-link:255,255,255;--notifictions-bk:linear-gradient(rgba(255,255,255,0.05),rgba(255,255,255,0.05)),rgb(var(--coal));--notifiction-bk:rgba(var(--coal), 0.5);--notifictions-text:255,255,255;--chart-border:rgba(255,255,255, 0.3);--link-color:5,152,214;--link-color-focus:var(--onyx);--card-callout-grey-link:rgb(var(--basalt));--button-ghost-text:rgb(255,255,255);--popup-button-bk:rgb(255,255,255);--popup-button-text:var(--button-bk);--popup-button-bk-hover:rgba(255,255,255,0.9);--form-background:rgba(var(--jet), 1);--form-footer-border:rgba(255,255,255,0.8);--form-section-footer:var(--jet);--form-fieldset:linear-gradient(
rgba(255,255,255, 0.035),
rgba(255,255,255, 0.035)),rgb(var(--jet));--form-fieldset2:linear-gradient(
rgba(255,255,255, 0.07),
rgba(255,255,255, 0.07)),rgb(var(--jet));--form-fieldset3:linear-gradient(
rgba(255,255,255, 0.15),
- rgba(255,255,255, 0.15)),rgb(var(--jet));--form-step-line:rgba(255,255,255, 0.2);--form-step-icon-complete-bk:rgb(var(--smurf));--form-step-icon-incomplete-bk:rgb(var(--basalt));--form-step-icon-incomplete-fill:rgba(255,255,255, 0.5);--form-help:rgba(255,255,255, 0.25);--form-error:var(--cherry-on-dark);--form-field-background:var(--form-field-background-dark);--form-field-border:var(--form-field-border-dark);--form-field-border-hover:var(--form-field-border-hover-dark);--form-pfix-text:rgb(var(--coal));--form-pfix-warning:var(--basalt);--large-radios-bk:rgba(var(--concrete), 0.4);--large-radios-text:255,255,255;--form-select-background:var(--form-select-background-dark);--switch:rgba(255,255,255,0.3);--switch-hover:rgba(255,255,255,0.2);--file-upload-background:rgb(var(--coal));--file-upload-border:rgb(var(--smurf));--icon-colour:255,255,255}}.icon{display:inline-block;height:1.6rem;position:relative;top:.2rem;width:1.6rem}.button .icon{margin-left:-8px;margin-right:-8px}.button--small .icon{margin-left:0;margin-right:3px}.button--small .button__text .icon{margin-left:-.2rem;margin-right:-.2rem}.button--small .button__text .icon:last-child{margin-right:.4rem}.button--small .button__text .icon+.button__small-text{margin-left:.4rem}.button .icon+.button__text{margin-left:20px}.button .icon,.menu__content .icon{fill:currentColor}.icon--180deg{transform:rotate(180deg)}.icon--270deg{transform:rotate(270deg)}.anim--rotate-anticlockwise{animation:anim-rotate-anticlockwise 2s linear infinite}@keyframes anim-rotate-anticlockwise{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@media (prefers-reduced-motion){.anim{animation:none}}.form--search-logs.form--horizontal .form__app{flex:1 0 12em;min-width:12em}.form--search-logs.form--horizontal .form__date-range{flex:0 0 auto}.form--search-logs.form--horizontal .form__date{flex:0 0 9em;width:9em}.form--search-logs.form--horizontal fieldset.form__row legend{margin-bottom:.8rem}@media only screen and (max-width:85em){.form--search-logs.form--horizontal{display:block}.form--search-logs.form--horizontal>.form__row+.form__row{margin:1.6rem 0 0;margin:var(--gutter) 0 0}}
\ No newline at end of file
+ rgba(255,255,255, 0.15)),rgb(var(--jet));--form-step-line:rgba(255,255,255, 0.2);--form-step-icon-complete-bk:rgb(var(--smurf));--form-step-icon-incomplete-bk:rgb(var(--basalt));--form-step-icon-incomplete-fill:rgba(255,255,255, 0.5);--form-help:rgba(255,255,255, 0.25);--form-error:var(--cherry-on-dark);--form-field-background:var(--form-field-background-dark);--form-field-border:var(--form-field-border-dark);--form-field-border-hover:var(--form-field-border-hover-dark);--output-border:rgba(255,255,255,0.15);--output-opacity:0.5;--form-pfix-text:rgb(var(--coal));--form-pfix-warning:var(--basalt);--large-radios-bk:rgba(var(--concrete), 0.4);--large-radios-text:255,255,255;--large-radios-stripe-disabled:rgba(255,255,255,0.15);--form-select-background:var(--form-select-background-dark);--switch:rgba(255,255,255,0.3);--switch-hover:rgba(255,255,255,0.2);--file-upload-background:rgb(var(--coal));--file-upload-border:rgb(var(--smurf));--progress-box:rgba(255,255,255,0.2);--icon-colour:255,255,255}.copy-box{--copy-box-background:rgb(var(--coal));--copy-box-anim:linear-gradient(
+ rgba(var(--smurf), 0.5),
+ rgba(var(--smurf), 0.5)) rgb(var(--coal))}.shoutbox{--shoutbox-bk:rgba(var(--concrete), 0.1);--shoutbox-bk-fm:rgba(var(--concrete), 0.1)}}.icon{display:inline-block;height:1.6rem;position:relative;top:.2rem;width:1.6rem}.button .icon{margin-left:-8px;margin-right:-8px;pointer-events:none}.button--small .icon{margin-left:0;margin-right:3px}.button--small .button__text .icon{margin-left:-.2rem;margin-right:-.2rem}.button--small .button__text .icon:last-child{margin-right:.4rem}.button--small .button__text .icon+.button__small-text{margin-left:.4rem}.button .icon+.button__text{margin-left:20px}.button .icon,.menu__content .icon{fill:currentColor}.icon--180deg{transform:rotate(180deg)}.icon--270deg{transform:rotate(270deg)}.anim--rotate-anticlockwise{animation:anim-rotate-anticlockwise 2s linear infinite}@keyframes anim-rotate-anticlockwise{0%{transform:rotate(0)}100%{transform:rotate(-360deg)}}@media (prefers-reduced-motion){.anim{animation:none}}.form--search-logs.form--horizontal .form__app{flex:1 0 12em;min-width:12em}.form--search-logs.form--horizontal .form__date-range{flex:0 0 auto}.form--search-logs.form--horizontal .form__date{flex:0 0 9em;width:9em}.form--search-logs.form--horizontal fieldset.form__row legend{margin-bottom:.8rem}@media only screen and (max-width:85em){.form--search-logs.form--horizontal{display:block}.form--search-logs.form--horizontal>.form__row+.form__row{margin:var(--gutter) 0 0}}
\ No newline at end of file
diff --git a/starter-ui/src/main/webapp/ui/images/icons.svg b/starter-ui/src/main/webapp/ui/images/icons.svg
index 14ba0f5..e85a7c6 100644
--- a/starter-ui/src/main/webapp/ui/images/icons.svg
+++ b/starter-ui/src/main/webapp/ui/images/icons.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/starter-ui/src/main/webapp/ui/js/inits.js b/starter-ui/src/main/webapp/ui/js/inits.js
index 3e67ad8..45667aa 100644
--- a/starter-ui/src/main/webapp/ui/js/inits.js
+++ b/starter-ui/src/main/webapp/ui/js/inits.js
@@ -1,6 +1,7 @@
-/*! Payara Pattern Library version: 0.50.2 */
+/*! Payara Pattern Library version: 0.72.1 */
// ONLY FOR DEMONSTRATION!
+
// UI path function example.
var element_to_search = document.getElementById('ui-path-example');
@@ -14,25 +15,13 @@
menu_wrap.init();
-// Start sidebar toggle.
-sidebar_toggle.init();
-sidebar_toggle_mob.init();
-sidebar_height.init();
-
-// Tab panel.
-tab_panel.init();
-
// Tab panel.
tab_group.init();
accordion.init();
-// Start copy box.
-copy_box.init();
-
notification_toggle.init();
-button_toggle.init();
// Start menus.
menu.init();
@@ -64,16 +53,7 @@ grid_to_column.init({
});
-// Play/pause toggles
-play_pause.init();
-
switch_toggle.init();
-// Nested linked fieldsets
-
-child_fields.init();
-
-
-
// Nested linked fieldsets
fieldset_group.init({
diff --git a/starter-ui/src/main/webapp/ui/js/interface.js b/starter-ui/src/main/webapp/ui/js/interface.js
index 0fcf734..1bef349 100644
--- a/starter-ui/src/main/webapp/ui/js/interface.js
+++ b/starter-ui/src/main/webapp/ui/js/interface.js
@@ -1,4 +1,4 @@
-/*! Payara Pattern Library version: 0.51.2 */
+/*! Payara Pattern Library version: 0.72.1 */
/*! DO NOT MODIFY THIS FILE, CHANGES WILL BE OVERWRITTEN! */
// Always set a top level class to indicate if we have JS available.
@@ -7,29 +7,6 @@ document.getElementsByTagName("html")[0].className = document.getElementsByTagNa
-// IE11 Deson't support linked SVG sprite files, annd this polyfill.
-// svg4everybody();
-
-
-
-
-// Polyfill for .closest.
-
-if (window.Element && !Element.prototype.closest) {
- Element.prototype.closest =
- function(s) {
- var matches = (this.document || this.ownerDocument).querySelectorAll(s),
- i,
- el = this;
- do {
- i = matches.length;
- while (--i >= 0 && matches.item(i) !== el) {}
- } while ((i < 0) && (el = el.parentElement));
- return el;
- };
-}
-
-
function dispatch_resize_end() {
var ev;
try {
@@ -63,71 +40,277 @@ create_resize_end_event();
-// Scroll bars
+var blinky_addIcon = function(icon, t) {
-var scrollbar = function() {
+ if (!icon) return false;
- // Throw the bottom shadow on on page load.
- __init_first_shadow = function(e) {
- e.classList.add('scroll-shadow--bottom');
- };
+ // Create the SVG wrapper for the button icon.
+ const i = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ i.setAttribute('class', 'icon');
+ i.setAttribute('width', '1em');
+ i.setAttribute('height', '1em');
+ i.setAttribute('viewbox', '0 0 16 16');
+ i.setAttribute('aria-hidden', 'true');
+ i.setAttribute('focusable', 'false');
+ // Add the icon to the SVG.
+ if (typeof icon === 'string') {
+ const i_use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+ i_use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', ui_path({el: t})+'/ui/images/icons.svg#icon-'+icon);
+ i.append(i_use);
+ } else {
+ for (const [k, v] of icon.entries()) {
+ const k = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+ k.setAttributeNS('http://www.w3.org/1999/xlink', 'href', ui_path({el: t})+'/ui/images/icons.svg#icon-'+v.icon);
+ k.setAttribute('class', v.css);
+ i.append(k);
+ }
+ }
- __scrolling = function(e) {
- if (!scrolling) {
- window.requestAnimationFrame(function() {
- if (e.target.scrollTop > 0) {
- e.target.classList.add('scroll-shadow--top');
- } else {
- e.target.classList.remove('scroll-shadow--top');
- }
+ return i;
+};
+const Blinky_cookie = function() {
- // Height of containing element - height of scrollable content.
- if ( e.target.scrollTop < (e.target.firstElementChild.offsetHeight - e.target.offsetHeight) ) {
- e.target.classList.add('scroll-shadow--bottom');
- } else {
- e.target.classList.remove('scroll-shadow--bottom');
+ // A constructor for getting and setting cookies.
+
+ this.get_eTLD1 = (suffixes) => {
+ const hostname = document.location.hostname;
+
+ // // Check against the specified suffixes.
+ for (let suffix of suffixes) {
+ if (/^[a-z.]*$/.test(suffix)) {
+
+ // Add a dot to the front of the suffix if one hasn't been sent.
+ if (suffix.substring(0,1) !== '.') suffix= '.'+suffix;
+
+ // Chop the suffix off the hostname, if the reulting array
+ // contains more than a single item we found an allowed suffix.
+ const suffix_end = new RegExp(suffix+"$");
+ const hostbits = hostname.split(suffix_end);
+ if (hostbits.length > 1) {
+ // Send back the string from the last occurance . to the end of the string, plus the suffix.
+ // e.g. billing.payara.cloud or even bill.ing.payara.cloud will return .payara.cloud
+ return hostbits[0].substr(hostbits[0].lastIndexOf('.'), hostbits[0].length) + suffix;
}
- scrolling = false;
- });
- scrolling = true;
+ }
}
+
+ // Nothing matched.
+ return false;
};
- __calc = function() {
- var scrollers;
- scrollers = document.querySelectorAll('.scroll');
- if (scrollers !== null) {
- for (i=0; i {
+ // Required args: name.
+ // Optional args: val, expiry_days, path, domain, hostname.
- // Remove any existing scrollers.
- scrollers[i].classList.remove('js__scroll');
- scrollers[i].removeEventListener('scroll', __scrolling);
+ // Check name and val only contain allowed characters, and that they exist.
+ if (!args.name || !/^[A-Za-z0-9-_]*$/.test(args.name) ||
+ !/^[A-Za-z0-9-_!#$&()\[\]*+.:<>?@^`{}|~]*$/.test(args.val)) return false;
- // Bail if there's nothing to scroll.
- if (scrollers[i].firstElementChild === null) return false;
+ let cookie = args.name+'=';
+ if (args.val) cookie+= args.val;
- if ( scrollers[i].firstElementChild.offsetHeight > scrollers[i].offsetHeight ) {
- scrollers[i].classList.add('js__scroll');
- scrollers[i].addEventListener('scroll', __scrolling);
- __init_first_shadow(scrollers[i]);
- }
+ const expiry = new Date();
+
+ // Check expiry_days is greater than 0.
+ if (!isNaN(args.expiry_days) && args.expiry_days > 0) {
+ expiry.setTime(expiry.getTime() + (args.expiry_days*24*60*60*1000));
+ cookie+= ';expires='+expiry.toUTCString();
+
+ // If expiry is less then 0 we take this as an intent to delete the cookie so set the expiry 1
+ // day behind the current time(ish). Not dealing with BST here so could be 23-24 hours behind.
+ } else if (!isNaN(args.expiry_days) && args.expiry_days < 0) {
+ expiry.setTime(expiry.getTime() - 86400000);
+ cookie+= ';expires='+expiry.toUTCString();
+ }
+ // If the expiry value was 0 the we set no expiry value and assume a session cookie.
+
+ // Add the path if supplied and only contains allowed characters.
+ cookie+= ';path=';
+ cookie+= (args.path && /^[A-Za-z0-9-_\/]*$/.test(args.path)) ? args.path : '/';
+
+ // For the sake of simplicity we're running on the theory that if there's
+ // a properly formatted domain set then set Samesite and Secure as a
+ // matter of course. We could break these out as separate args but for
+ // the moment ¯\_(ツ)_/¯
+ if (args.hostname) {
+ // If anything was sent in the hostname parameter we will always
+ // try and grab the eTLD+1 and ignore any domain parameter.
+
+ // If we got the hostname as a string change it to an array because we can check for multiple suffixes.
+ let suffixes = (typeof args.hostname == 'string') ? new Array(args.hostname) : args.hostname;
+
+ const domain_from_hostname = this.get_eTLD1(suffixes);
+ if (domain_from_hostname) {
+ cookie+= ';Domain='+domain_from_hostname+';SameSite=None;Secure';
+ } else {
+ cookie+= ';SameSite=Lax';
}
+
+ } else if (args.domain && /^[A-Za-z0-9-.]*$/.test(args.domain)) {
+ // Use the domain sent, this makes no judgement as to the correctness
+ // of the domain compared to the actual domain in use so if they don't
+ // match the cookie will fail to be set.
+ cookie+= ';Domain='+args.domain+';SameSite=None;Secure';
+ } else {
+ cookie+= ';SameSite=Lax';
}
+
+ // Write the cookie.
+ document.cookie = cookie;
+ };
+
+
+ this.get = (args) => {
+ // Required args: name or a single string that will be interpretted as name.
+
+ // Is there anything that might be a cookie name and are there actually any cookies?
+ if (!args || !document.cookie) return false;
+
+ // Set the name to either the arg.name object or if sommeone
+ // shorthanded it did they sent the cookie name as a string?
+ const name = args.name || args;
+
+ // Split the cookie string, then look for a cookie that starts with the name=.
+ let cookie = document.cookie
+ .split('; ')
+ .find((c) => c.startsWith(name+'='));
+
+ if(!cookie) return false;
+ return cookie.split('=')[1];
};
+};
- var scrolling = false;
- // Recalculate the scrollers when the user resizes their screen.
- window.addEventListener('resize-end', __calc);
+const Blinky_wrap_content = function(args) {
+ // Take an element and wrap its contents in another element, turns out this is painful to do in vanilla JS because we want to make sure to move both children HTML elements and any text nodes. Since we can't grab text nodes with querySelector we have to rely on childNodes, this is promlematic as it's a live set of data. Directly moving the child elements messes with the live data so we have to move them out into a temporary array and then reattach them into the new wrapper.
+
+ let els = [];
+ for (let c of args.el.childNodes) {
+ els.push(c);
+ }
+ for (let e of els) {
+ args.wrapper.append(e);
+ }
- // First run.
- __calc();
+ // If there's a separate target to wrap the contents into...
+ let target = (args.target) ? args.target : args.el;
+ target.append(args.wrapper);
};
-scrollbar();
+
+
+// Scroll bars
+
+class BlinkyScrollHints extends HTMLElement {
+
+ constructor() {
+ super();
+ }
+
+
+ __scroll_pos_checker(e) {
+ // The styles for the shadows are set using data values, this is so
+ // the mutation observer we use later on can ignore the shadow changes.
+ window.requestAnimationFrame(function() {
+
+ // If the scroll position is at all scrolled from the top, show the top shadow.
+ e.dataset.shadow_top = (e.scrollTop > 0) ? '1' : '0';
+
+ // Deduct the clientHeight and scrollTop from the scrollHeight. ScrollHeight
+ // is non-rounded whilst the others are so we check here that the bottom of
+ // the scroll is somewhere near 0.
+ e.dataset.shadow_bottom = (Math.abs(e.scrollHeight - e.clientHeight - e.scrollTop) >= 1) ? '1' : '0';
+ });
+ }
+
+
+ __scrolling(e) {
+ // We're only doing this to standardise what's sent to the next function,
+ // otherwise we could just call this directly from the eventlistener.
+ this.__scroll_pos_checker(e.target);
+ }
+
+
+ connectedCallback() {
+ // Setup the component.
+
+ // Shadow CSS hangs off this.
+ this.classList.add('js__scroll');
+
+ // Because we can't add two elements as :before and :after (only :before works
+ // in conjunction with sticky) we need something to apply one of the shadows to.
+ const shadow = document.createElement('span');
+ shadow.classList.add('js__shadow');
+ this.prepend(shadow);
+
+ const debounce = new WeakMap();
+
+ this.resize_observer = new ResizeObserver((entries) => {
+ const entry = entries[0];
+
+ // Remove the old timeout, we'll be adding another below.
+ clearTimeout( debounce.get( entry.target ) );
+
+ // To minimise layout thrashing we need to throttle running code too quickly in
+ // sucsession so add a timeout, set to 150 ms as that's generally quick enough
+ // not to look janky.
+ debounce.set( entry.target, setTimeout(() => {
+
+ // Remove the current eventlistener since we'll be rechecking if we still need
+ // one next and adding it back if we do.
+ this.removeEventListener('scroll', this.__scrolling);
+
+ // Compare the total height of the content with the current height of its
+ // containing box, if the total height is larger than the space available the
+ // content will be scrollable so we add the eventlistener.
+ if (this.scrollHeight >= entry.contentBoxSize[0].blockSize) {
+ this.addEventListener('scroll', this.__scrolling);
+ this.__scroll_pos_checker(this);
+ }
+ }, 150) );
+
+ });
+ this.resize_observer.observe(this);
+
+ // Observe pretty much everything, we're adding the shadows to the scrollable
+ // element via some data attributes so they aren't detected in this because we're
+ // only checking class changes.
+ const observables = {
+ attributes: true,
+ attributeFilter: ['class'],
+ childList: true,
+ subtree: true
+ };
+
+ // Callback function runs when any changes specified in the observables is detected.
+ const mutation_cb = (mutations, mut_observer) => {
+ for (const mutation of mutations) {
+ this.__scroll_pos_checker(this);
+ }
+ };
+
+ // Create instance and link to the callback.
+ this.mut_observer = new MutationObserver(mutation_cb);
+
+ // Start the mutation observer.
+ this.mut_observer.observe(this, observables);
+
+ // Run on initial setup just to set any shadows on first load.
+ this.__scroll_pos_checker(this);
+ }
+
+
+ disconnectedCallback() {
+ this.removeEventListener('scroll', this.__scrolling);
+ this.resize_observer.disconnect();
+ this.mut_observer.disconnect();
+ }
+}
+
+customElements.define('blinky-scroll-hints', BlinkyScrollHints);
@@ -317,173 +500,216 @@ var menu_wrap = (function() {
-var sidebar_toggle = (function() {
+class BlinkySidebar extends HTMLElement {
+
+ static get observedAttributes() {
+ // Watched component attributes.
+ return ['minimized'];
+ }
+
- // Toggle sidebar.
- var __sidebar_toggle = function(b) {
+ constructor() {
+ super();
+ }
- var pressed = (b.getAttribute('aria-pressed') === 'true');
- b.setAttribute('aria-pressed', !pressed);
- // If the button
- if (!pressed) {
- b.closest('[aria-labelledby='+b.getAttribute('id')+']').classList.add('page__sidebar--minimised');
- // Title stuff is only used on Monitoring Console.
- // if (b.getAttribute('data-show-title')) {
- // document.querySelector(b.getAttribute('data-show-title')).textContent = b.closest('[aria-labelledby='+b.getAttribute('id')+']').querySelector('[aria-current="page"]').textContent;
- // }
+ __wrap_contents() {
+ // Take an element and wrap its contents in another element, turns out this is painful to do in vanilla JS because we want to make sure to move both children HTML elements and any text nodes. Since we can't grab text nodes with querySelector we have to rely on childNodes, this is promlematic as it's a live set of data. Directly moving the child elements messes with the live data so we have to move them out into a temporary array and then reattach them into the new wrapper.
- // Switched for cloud
- // window.localStorage.setItem(b.getAttribute('id'), 'true');
- } else {
- b.closest('[aria-labelledby='+b.getAttribute('id')+']').classList.remove('page__sidebar--minimised');
- // Title stuff is only used on Monitoring Console.
- // if (b.getAttribute('data-show-title')) {
- // document.querySelector(b.getAttribute('data-show-title')).textContent = '';
- // }
+ // Create a wrapper to wrap all the content of the shoutbox.
+ let wrapper = document.createElement('aside');
+ wrapper.setAttribute('class', 'sidebar');
- // Switched for cloud
- // window.localStorage.removeItem(b.getAttribute('id'));
+ let els = [];
+ for (let c of this.childNodes) {
+ els.push(c);
}
- // Switched for cloud
- window.localStorage.setItem(b.getAttribute('id'), !pressed);
- };
-
- function toggle(sidebarElement) {
- sidebarElement.addEventListener('click', function () {
- __sidebar_toggle(this);
- }, false);
-
- // Possibly need to look at inlining this to stop the flash of open sidebar on page load.
-
- // Switched for cloud
- // if (window.localStorage.getItem(sidebars[i].getAttribute('id'))) __sidebar_toggle(sidebars[i]);
- if (window.localStorage.getItem(sidebarElement.getAttribute('id')) != sidebarElement.getAttribute('aria-pressed')) {
- __sidebar_toggle(sidebarElement);
+ for (let e of els) {
+ wrapper.append(e);
}
+ this.appendChild(wrapper);
}
- function init() {
- // Find all sidebar toggles and loop through them.
- var sidebars = document.querySelectorAll('.js__sidebar__toggle');
- for (i = 0; i < sidebars.length; i++) {
- var sidebarElement = sidebars[i];
- toggle(sidebarElement);
+
+ __add_toggle() {
+ // Is there a .sidebar__header? Get it or create and attach it.
+ let sidebar_header = this.querySelector('.sidebar__header');
+ if (!sidebar_header) {
+ sidebar_header = document.createElement('header');
+ sidebar_header.setAttribute('class', 'sidebar__header');
}
- }
+ this.querySelector('.sidebar').prepend(sidebar_header);
- return {
- init: init,
- toggle: toggle,
- };
-})();
+ // Create button.
+ const button = document.createElement('button');
+ button.setAttribute('type', 'button');
+ button.setAttribute('class', 'button sidebar__toggle');
+ // Button icon.
+ const icon_svg = blinky_addIcon('sidebar', this);
+ button.append(icon_svg);
+ // Button label.
+ let label = this.getAttribute('toggle-label') || 'Toggle Sidebar';
+ const button_label = document.createElement('span');
+ button_label.innerText = label;
+ button_label.setAttribute('class', 'visually-hidden');
+ button.append(button_label);
-var sidebar_toggle_mob = (function() {
+ // Set the initial value of the aria-expanded based on the minimized attribute on load/creation.
+ button.setAttribute('aria-expanded', !Number(this.getAttribute('minimized')));
- // Toggle mobile sidebar.
- var __sidebar_toggle = function(b) {
+ sidebar_header.prepend(button);
+ button.addEventListener('click', this.__do_toggle.bind(this));
+ }
- var pressed = (b.getAttribute('aria-pressed') === 'true');
- b.setAttribute('aria-pressed', !pressed);
- // If the button
- if (!pressed) {
- document.getElementsByTagName('body')[0].classList.add('page__sidebar--expanded');
- } else {
- document.getElementsByTagName('body')[0].classList.remove('page__sidebar--expanded');
- }
- };
+ __do_toggle() {
+ // Update the minimized attribute, we only need to update this single value as the rest is handled by watching for changes on this attribute.
+ this.setAttribute('minimized', Number(!JSON.parse(this.getAttribute('minimized'))));
+ }
- function __toggle(sidebarElement) {
- sidebarElement.addEventListener('click', function () {
- __sidebar_toggle(this);
- }, false);
+
+ __set_mimimized_state() {
+
+ // Update the aria on the toggle button.
+ this.querySelector('.sidebar__toggle').setAttribute('aria-expanded', !JSON.parse(this.getAttribute('minimized')));
+
+ // Update persistent storage.
+ this.cookie.set({
+ name: this.id,
+ val: this.getAttribute('minimized'),
+ expiry_days: 365,
+ hostname: ['.fish', '.cloud']
+ });
}
- function __init() {
- // Find all sidebar toggles and loop through them.
- var sidebars = document.querySelectorAll('.js__sidebar__toggle__mob');
- for (i = 0; i < sidebars.length; i++) {
- var sidebarElement = sidebars[i];
- __toggle(sidebarElement);
+
+ __is_large_screen() {
+ const cssmq = window.matchMedia('(min-width: 60rem)');
+ let thing = this;
+ function test_cssmq(e) {
+ if (!e.matches) {
+
+ // Force minimize the sidebar on window resize to small width'
+ thing.setAttribute('minimized', '1');
+ }
}
+ cssmq.addEventListener('change', test_cssmq);
+ return cssmq.matches;
}
- return {
- init: __init,
- toggle: __toggle
- };
-})();
+ __get_mimimized_state() {
+ // If we're a small screen we need to show the sidebar minimized.
+ // Using a media query, it's a little janky but it does work.
+ // The code below handles forcing minimized on load, the code in __is_large_screen() deals
+ // with the transision of resizing the window and minimizing there. I did say it was janky.
-var sidebar_height = (function() {
+ if (this.__is_large_screen()) {
- var __init = function() {
- window.addEventListener('resize-end', __sidebar_height);
-
- // Fix to wait for any images to load in the header.
- window.addEventListener('load', function () {
- __sidebar_height();
- });
- };
+ // Check for any stored previous setting in browser localStorage,
+ // everything runs off the minimized attribute so we only need this one line.
+ if (this.cookie.get(this.id)) {
+ this.setAttribute('minimized', this.cookie.get(this.id));
+ }
+ } else {
+ this.setAttribute('minimized', 1);
+
+ // I'd have rather this got picked up in the attributeChangedCallback()
+ // but I think it's happening before the guard can pass.
+ this.cookie.set({
+ name: this.id,
+ val: this.getAttribute('minimized'),
+ expiry_days: 365,
+ hostname: '.fish'
+ });
+ }
+ }
- var __sidebar_height = function() {
- var header_height = 0;
- // Get the height of the page header if the header element exists, otherwise the height value remains set to 0.
- try {
- header_height = document.querySelector('.page--sticky-header .page__header').offsetHeight;
- } catch (e) {}
-
- if (!header_height) return false;
- var sidebar = document.querySelector('.page__sidebar .sidebar');
+ __set_sidebar_height() {
+
+ // If we detected a change to the height of the .page--sticky-header .page__header
+ // we need to adjust the CSS for the height of 100% - header height.
+
+ let sidebar = this.querySelector('.sidebar');
if (sidebar) {
+
+ let header_height = 0;
+ try {
+ header_height = document.querySelector('.page--sticky-header .page__header').offsetHeight;
+ } catch(e) {}
+
sidebar.setAttribute('style', 'top: '+header_height+'px; max-height: calc(100vh - '+header_height+'px);');
}
- };
-
- return {
- init: __init
- };
-})();
+ }
+ __sidebar_height() {
+ if (!document.querySelector('.page--sticky-header .page__header')) return false;
-var tab_panel = (function() {
+ const debounce = new WeakMap();
+ let old_height = 0;
+ this.resize_observer = new ResizeObserver((entries) => {
+ const entry = entries[0];
+ clearTimeout( debounce.get( entry.target ) );
+ debounce.set( entry.target, setTimeout(() => {
+ if (entry.contentBoxSize[0].blockSize !== old_height) {
+ this.__set_sidebar_height();
+ }
+ old_height = entry.contentBoxSize[0].blockSize;
+ }, 150) );
+ });
+ this.resize_observer.observe(document.querySelector('.page--sticky-header .page__header'));
+ }
+
- var __switch_tab = function() {
+ connectedCallback() {
+ if (!this.classList.contains('js__sidebar')) {
- // Reset all tabs in the panel.
- var panel_tabs = this.closest('.tab-panel').querySelectorAll('[role="tab"]');
- for (i=0; i
- var __bouncer = function(e) {
- if (e.target.closest(el)) __action(e.target.closest(el));
- };
-
- // This is used if someone wants to forego any of the init stuff and setup their own eventListener.
- var __copy = function(btn) {
- __action(btn.target);
- };
-
- var __action = function(copy_btn) {
- // Grab the element containing the copy content.
- var to_copy = copy_btn.previousElementSibling;
+ let button_class = 'button__text';
+ if (button_type == 'icon') {
+ button_class = 'visually-hidden';
+ }
+
+ // Button label.
+ const button_label = document.createElement('span');
+ button_label.innerText = label;
+ button_label.setAttribute('class', button_class);
+ button.append(button_label);
+
+ return button;
+ }
+
+ __upgrade_text() {
+ const text = this.firstElementChild;
+ text.setAttribute('tabIndex', '0');
+ text.classList.add('copy-box__content', 'scroll');
+ }
+ __copy() {
+ const text = this.firstElementChild;
// We can't directly select something that's not an input but being an input wouldn't be great for accessibility, so we create a temporary visually hidden textarea, add the content to copy, copy that into the clipboard then nuke the temporary textarea.
- temp_copy_box = document.createElement('textarea');
- temp_copy_box.setAttribute('style', 'position: absolute; left: 9999px;');
- temp_copy_box.textContent = to_copy.textContent;
- to_copy.parentNode.insertBefore(temp_copy_box, to_copy.nextSibling);
- temp_copy_box.select();
-
- // Add a CSS animation to the copy box content, then after some time remove the class so it could be played again.
- to_copy.classList.add('copy-box__content--copied');
+ const ta = document.createElement('textarea');
+ ta.setAttribute('style', 'position: absolute; left: 9999px;');
+ ta.textContent = text.textContent;
+ this.append(ta);
+ ta.select();
+
+ // CSS animation for text content.
+ text.classList.add('copy-box__content--copied');
setTimeout(function() {
- to_copy.classList.remove('copy-box__content--copied');
- }, 1000);
+ text.classList.remove('copy-box__content--copied');
+ }, 500);
document.execCommand("copy");
- // Change the icon on the button to a tick, then change it back after some time.
- var icon = copy_btn.querySelector('use').getAttribute('href');
- var default_icon = icon;
- icon = icon.split('-');
- icon[icon.length - 1] = 'tick';
- copy_btn.querySelector('use').setAttribute('href', icon.join('-'));
- setTimeout(function() {
- copy_btn.querySelector('use').setAttribute('href', default_icon);
- }, 2000);
-
- temp_copy_box.remove();
- };
+ ta.remove();
- return {
- init: __init,
- inject: __inject,
- copy: __copy
- };
+ let icon = this.querySelector('use');
+ let icon_href = icon.getAttribute('href').split('-');
+ icon.setAttribute('href', icon_href[0] + '-' + 'tick');
+ setTimeout(function() {
+ icon.setAttribute('href', icon_href[0] + '-' + icon_href[1]);
+ }, 1000);
+ }
-})();
+ connectedCallback() {
+ // Setup the component.
+ this.__upgrade_text();
+ const button = this.__create_button();
+ this.append(button);
+ button.addEventListener('click', this.__copy.bind(this));
+ }
+}
+
+customElements.define('blinky-copybox', BlinkyCopybox);
@@ -810,82 +1031,397 @@ var notification_toggle = (function() {
-// Charts JS
+// Closeable Card Custom Element
+
+class BlinkyShoutbox extends HTMLElement {
+ static get observedAttributes() {
+ return ['b-close'];
+ }
+
+ constructor() {
+ super();
+ }
+
+ __create_button(bits) {
+
+ // Creates a button, passes it back so we can attach it to the DOM and add the eventListener.
+
+ // Create button and attach it.
+ const button = document.createElement('button');
+ button.setAttribute('class', 'button '+bits.class);
+ button.setAttribute('type', 'button');
+
+ if (bits.icon) {
+ // Create the SVG wrapper for the button icon.
+ const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ icon.setAttribute('class', 'icon');
+ icon.setAttribute('width', '1em');
+ icon.setAttribute('height', '1em');
+ icon.setAttribute('viewbox', '0 0 16 16');
+ icon.setAttribute('aria-hidden', 'true');
+ icon.setAttribute('focusable', 'false');
+ button.append(icon);
+
+ // Add the icon to the SVG.
+ const icon_use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
+ icon_use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', ui_path({el: this})+'/ui/images/icons.svg#icon-'+bits.icon);
+ icon.append(icon_use);
+ }
+
+ // Button label.
+ const button_label = document.createElement('span');
+ button_label.setAttribute('class', (bits.type == 'icon') ? 'visually-hidden' : 'button__text');
+ button_label.innerText = bits.label;
+ button.append(button_label);
+
+ return button;
+ }
+
+ __close_card() {
+ // this.classList.add('shoutbox--closing');
+ // This sets the animation speed and waits for the speed before removing the element.
+ let speed = this.__set_speed();
+ this.querySelector('.shoutbox__outer').setAttribute('style', '--transision-duration: '+speed+'ms');
+ this.classList.add('shoutbox--closing');
+ setTimeout(() => {
+ if (this.querySelector('.shoutbox__undo')) {
+ this.__show_undo();
+ } else {
+ this.__remove_card();
+ }
+ }, speed);
+ }
+
+ __show_undo() {
+ this.querySelector('.shoutbox__undo').classList.add('shoutbox__undo--show1');
+ // Needs a small delay because CSS can't animate display states, so we add the class containing the display block above, wait a tiny amount and then we can animate the opacity.
+ setTimeout(() => {
+ this.querySelector('.shoutbox__undo').classList.add('shoutbox__undo--show2');
+ }, 1);
+ }
+
+ __remove_card() {
+ // Can be called to immediately remove the element.
+ // When the cookie is tested on page load is when this needs to be run quickly without the animation.
+ this.remove();
+ }
+
+ __reopen_shoutbox() {
+ this.classList.remove('shoutbox--closing');
+ this.querySelector('.shoutbox__undo').classList.remove('shoutbox__undo--show2');
+ this.querySelector('.shoutbox__undo').classList.remove('shoutbox__undo--show1');
+ // Remove the cookie.
+ this.cookieObj.set({
+ name: this.getAttribute('b-cookie'),
+ expiry_days: -1,
+ path: '/',
+ hostname: ['.fish', '.cloud']
+ });
+ }
+
+ __wrap_contents(wrapper) {
+ // Take an element and wrap its contents in another element, turns out this is painful to do in vanilla JS because we want to make sure to move both children HTML elements and any text nodes. Since we can't grab text nodes with querySelector we have to rely on childNodes, this is promlematic as it's a live set of data. Directly moving the child elements messes with the live data so we have to move them out into a temporary array and then reattach them into the new wrapper.
+ let els = [];
+ for (let c of this.childNodes) {
+ els.push(c);
+ }
+ for (let e of els) {
+ wrapper.append(e);
+ }
+ }
+
+ __set_speed() {
+ // We want a consistent transition speed but this depends on the amount of content we need to close so measure the height of the shoutout and double it, then if it falls outside of the range of 100-300 push it back into range.
+ let speed = Math.floor(this.offsetHeight * 1.5);
+ if (speed < 100) {
+ speed = 100;
+ } else if (speed > 300) {
+ speed = 300;
+ }
+ return speed;
+ }
+
+ connectedCallback() {
+
+ // This sets up the custom element bits and pieces, since we can have connectedCallback or attributeChangedCallback put a guard around the code because we're also callign this function from attributeChangedCallback to sest things up ASAP.
+ if (!this.classList.contains('js__shoutbox')) {
+
+ // If there's no cookie name value attached to the card then kill off any shoutbox custom element because if we definitely can't save the close state it's more trouble to keep it.
+ if (!this.getAttribute('b-cookie') || this.getAttribute('b-cookie') == '') {
+ this.classList.add('shoutbox--disabled');
+ return false;
+ }
+
+ // Initiate the cookie object.
+ this.cookieObj = new Blinky_cookie();
+
+ // Get the cookie.
+ let cookie = this.cookieObj.get({
+ name: this.getAttribute('b-cookie')
+ });
+
+ // If the cookie has a value of 'closed' the we get rid of the shoutbox ASAP, no animation.
+ if (cookie === 'closed') this.__remove_card();
+
+ // If we got here then we didn't remove the shoutbox so now set it up visually.
+ // As we're animating the closing of the shoutbox we need for the outer element to not have any padding as this causes jankiness when animating the height, it doesn't count and causes a jump.
+ // Create a wrapper to wrap all the content of the shoutbox.
+ let wrapper = document.createElement('div');
+ wrapper.setAttribute('class', 'shoutbox__inner');
+
+ // Send the wrapper over to the wrapping function (because it turns out this isn't a one-liner).
+ this.__wrap_contents(wrapper);
+
+ let outer_wrapper = document.createElement('div');
+ outer_wrapper.setAttribute('class', 'shoutbox__outer');
+ this.appendChild(outer_wrapper);
+
+ // Now the wrapper contains the child elements from the shoutbox we need to attach it to the shoutbox.
+ outer_wrapper.appendChild(wrapper);
+
+ // Add the close button.
+ let close_button = this.__create_button({
+ type: 'icon',
+ icon: 'cross',
+ class: 'button--clear shoutbox__close layout-hidden',
+ label: 'Close'
+ });
+ this.querySelector('.shoutbox__inner').prepend(close_button);
+
+ // Click handler.
+ close_button.addEventListener('click', () => {
+ this.__close_card();
+ this.cookieObj.set({
+ name: this.getAttribute('b-cookie'),
+ val: 'closed',
+ expiry_days: this.getAttribute('b-expiry') || 0,
+ path: '/',
+ hostname: '.fish'
+ });
+ });
+
+ // Check for any in-content cookie setting.
+ let close_in_content = this.querySelectorAll('.shoutbox__close-in-content');
+ if (close_in_content) {
+ for (let el of close_in_content) {
+ el.addEventListener('click', () => {
+ this.__close_card();
+ this.cookieObj.set({
+ name: this.getAttribute('b-cookie'),
+ val: 'closed',
+ expiry_days: this.getAttribute('b-expiry') || 0,
+ path: '/',
+ hostname: '.fish'
+ });
+ });
+ }
+ }
+
+ // If we want the show an undo button...
+ if (this.getAttribute('b-undo')) {
+ let undo_button = this.__create_button({
+ type: 'text',
+ class: 'button--text shoutbox__undo',
+ label: this.getAttribute('b-undo')
+ });
+ this.append(undo_button);
+ undo_button.addEventListener('click', () => {
+ this.__reopen_shoutbox();
+ });
+ }
+ }
+
+ // All the interactiviy is targeted via this class so we completely separate any non-JS CSS.
+ this.classList.add('js__shoutbox');
+ }
+
+ disconnectedCallback() {}
+
+ attributeChangedCallback(att, oldValue, newValue) {
+
+ // Force connectedCallback() to run before doing anything with the attribute values.
+ if (!this.classList.contains('js__shoutbox')) {
+ this.connectedCallback();
+ }
+
+ // If we see the b-close attribute set to 1, close the shoutbox.
+ if ((att === 'b-close') && (newValue === '1')) {
+ this.__close_card(this, this.speed);
+ }
+ }
+}
+
+customElements.define('blinky-shoutbox', BlinkyShoutbox);
+
+
+
+// Charts JS
+
+var chart_colors = {
+ tango: 'rgb(240, 152, 27)',
+ midnight: 'rgb(0, 44, 62)',
+ smurf: 'rgb(5, 152, 214)',
+ basalt: 'rgb(67, 68, 69)',
+ concrete: 'rgb(218, 224, 226)',
+ coal: 'rgb(23, 24, 24)'
+};
+
+
+
+class BlinkyToggleButton extends HTMLElement {
+
+ static get observedAttributes() {
+ // Watched component attributes.
+ return ['toggled'];
+ }
+
+ constructor() {
+ super();
+ }
+
+ __toggle_clicked() {
+ this.setAttribute('toggled', Number(!JSON.parse(this.getAttribute('toggled'))));
+ }
+
+ __equalise_label_width() {
+ // Under normal circumstances a button takes its width from the length of the text label, because we have two text labels the button can suffer width changes when it's clicked. This quickly sets the label to each state's text, grabs the width, then we take the highest value, convert it to rem and add it to the button as a min-width style.
+ let label_widths = [];
+ this.querySelector('.toggle__text').innerHTML = this.getAttribute('text-0');
+ label_widths.push(this.querySelector('.toggle__text').offsetWidth);
+ this.querySelector('.toggle__text').innerHTML = this.getAttribute('text-1');
+ label_widths.push(this.querySelector('.toggle__text').offsetWidth);
+ if (Math.max(...label_widths) > 1) {
+ this.querySelector('.toggle__text').setAttribute('style', 'min-width: '+(Math.max(...label_widths)/10)+'rem');
+ }
+ }
+
+ __build_toggle() {
+
+ if (!this.getAttribute('toggled')) this.setAttribute('toggled', '0');
+
+ // Create the actual toggle button.
+ let btn = document.createElement('button');
+
+ // This is where we store the button attributes.
+ let btn_atts = {
+ id: '',
+ class: ''
+ };
+
+ // Get the attributes from the WC.
+ if (this.getAttribute('button-class')) {
+ btn_atts.class = this.getAttribute('button-class');
+ }
+ if (this.getAttribute('button-id')) {
+ btn_atts.id = this.getAttribute('button-id');
+ }
+
+ // If there's an A fallback specified we can check it's attributes, if there are no WC attributes we get a second go at setting them from this A tag.
+ if (this.querySelector('a') && this.querySelector('a').tagName === 'A') {
+ let a = this.querySelector('a');
+ if (!btn_atts.class && a.getAttribute('class')) {
+ btn_atts.class = a.getAttribute('class');
+ }
+ if (!btn_atts.id && a.id) {
+ btn_atts.id = a.id;
+ }
+ // Remove the fallback.
+ a.remove();
+ }
+
+ // Add the class and ID attributes to the new button.
+ if (btn_atts.id) btn.id = btn_atts.id;
+ btn.setAttribute('class', btn_atts.class+' button--toggle');
+
+ if (!btn.classList.contains('button')) {
+ btn.classList.add('button');
+ }
+
+ // This stops the toggle from submitting if it's inside a form.
+ btn.setAttribute('type', 'button');
+
+ this.append(btn);
+
+ const text = document.createElement('span');
+ text.classList.add('toggle__text');
+
+ // Check of we have text labels, if we don't then add some.
+ if (!this.getAttribute('text-0')) this.setAttribute('text-0', 'Off');
+ if (!this.getAttribute('text-1')) this.setAttribute('text-1', 'On');
+
+ if (btn.classList.contains('button--small')) {
+
+ // Small buttons have their contents wrapped.
+ const span = document.createElement('span');
+ span.classList.add('button__text');
+ Blinky_wrap_content({
+ el: btn,
+ wrapper: span
+ });
+
+ // Because we know we're dealing with a small button change our 'shortcut' to the button content wrapper, everything we add after this point needs to go inside that.
+ btn = span;
+ } else {
+ text.classList.add('button__text');
+ }
+
+ if (this.getAttribute('type') === 'icon-only') {
+ text.classList.add('visually-hidden');
+ }
+
+ Blinky_wrap_content({
+ el: btn,
+ wrapper: text
+ });
+
+ // Under normal circumstances a button takes its width from the length of the text label, because we have two text labels the button can suffer width changes when it's clicked.
+ this.__equalise_label_width();
+
+ // Add the icons, there should be two, if there isn't we force some.
+ const icon0 = this.getAttribute('icon-0') || 'dot_outline';
+ const icon1 = this.getAttribute('icon-1') || 'dot';
+ const icon_svg = blinky_addIcon([{icon: icon0, css: 'toggle__0'},{icon: icon1, css: 'toggle__1'}], this);
+ btn.prepend(icon_svg);
+ }
-var chart_colors = {
- tango: 'rgb(240, 152, 27)',
- midnight: 'rgb(0, 44, 62)',
- smurf: 'rgb(5, 152, 214)',
- basalt: 'rgb(67, 68, 69)',
- concrete: 'rgb(218, 224, 226)',
- coal: 'rgb(23, 24, 24)'
-};
+ __update_toggle() {
+ // Get the toggled value or force to the off state.
+ const toggled = this.getAttribute('toggled') || '0';
+ this.querySelector('.toggle__text').innerHTML = this.getAttribute('text-'+toggled);
+ }
+ connectedCallback() {
+ // Setup the component.
+ this.__build_toggle();
+ // We use this to guard actions in attributeChangedCallback() but
+ // also to apply any CSS that may only be needed on the JSed element
+ this.classList.add('js__button--toggle');
-// Button Toggle
+ // Do an initial grabbing of the toggle state and set.
+ // This is also called on clicking the toggle.
+ this.__update_toggle();
-var button_toggle = (function() {
-
- // The value that ensures we only ever add one event listener.
- var event_listener = false;
-
-
- // Finds all toggles and kickstarts the setup process.
- var __init = function(el) {
-
- // If nothing was sent across then use the default .button--toggle, note this is only to init stuff,
- // toggles still need to use the .toggle class after this point.
- el = (el) ? el : '.button--toggle';
- var toggles = document.querySelectorAll(el);
- if (toggles.length === 0) return;
-
- for (var i=0; i {this.__toggle_clicked();});
+ }
- el.querySelector('.toggle__text').innerHTML = (el.hasAttribute('data-toggled')) ? el.getAttribute('data-toggle-2') : el.getAttribute('data-toggle-1');
-
- // Add a class we attach the event listener to, we do this to force a requirement of the aria attributes.
- el.classList.add('js__button--toggle');
- };
-
-
- // Called by the listener.
- var __action = function(e) {
-
- // We only ever want to add one event listener.
- event_listener = true;
-
- // Ignore anything that isn't a click on a toggle.
- if (!e.target.closest('.js__button--toggle')) return false;
+ disconnectedCallback() {}
- // If the toggle is already pressed.
- if (e.target.hasAttribute('data-toggled')) {
- e.target.removeAttribute('data-toggled');
- e.target.querySelector('.toggle__text').innerHTML = e.target.getAttribute('data-toggle-1');
- } else {
- e.target.setAttribute('data-toggled', '');
- e.target.querySelector('.toggle__text').innerHTML = e.target.getAttribute('data-toggle-2');
+ attributeChangedCallback(att, old_v, new_v) {
+
+ // Because this method fires purely on the element being inited we
+ // guard the actions by checking to make sure it's not the first run.
+ // Also, only run if the attribute was actually updated.
+ if ((!this.classList.contains('js__button--toggle')) || (old_v === new_v)) return false;
+
+ // Changes to watched attributes.
+ if (att === 'toggled') {
+ this.__update_toggle();
}
- };
-
-
- return {
- init: __init
- };
-
-})();
+ }
+}
+
+customElements.define('blinky-toggle-button', BlinkyToggleButton);
@@ -1564,6 +2100,14 @@ var form_steps = (function() {
e.target.closest('.form-steps').querySelector('.form-steps__step--active').classList.remove('form-steps__step--active');
e.target.closest('.form-steps').querySelector(e.target.getAttribute('href')).classList.add('form-steps__step--active');
+ // Because the form fieldsets that aren't active can be collapsed the browser is having difficulty
+ // keeping track of the vertical location, so we force a scroll to the new fieldset after the
+ // animation to hide / show the fields is done.
+ const next = e.target.closest('.form-steps').querySelector(e.target.getAttribute('href'));
+ setTimeout(function() {
+ next.scrollIntoView();
+ }, 300);
+
// Set the first field that isn't a hidden field to focus.
// Because we're not setting up a specific keyup eventListener we just check the x/y coords of the interaction,
// if they're 0 then assume it's a keypress.
@@ -1839,79 +2383,158 @@ var multi_suggest = (function() {
-var play_pause = (function() {
-
- // The value that ensures we only ever add one event listener.
- var event_listener = false;
+// Obfuscated field
+
+class BlinkyObfuscatedField extends HTMLElement {
+ static get observedAttributes() {
+ // Watched component attributes.
+ return ['state'];
+ }
- // Finds all toggles and kickstarts the setup process.
- var __init = function(el) {
-
- // If nothing was sent across then use the default .toggle, note this is only to init stuff,
- // toggles still need to use the .toggle class after this point.
- el = (el) ? el : '.toggle--play-pause';
- var toggles = document.querySelectorAll(el);
- if (toggles.length === 0) return;
+ constructor() {
+ super();
+ }
+
+ __add_toggle() {
+ const toggle = document.createElement('blinky-toggle-button');
+ toggle.setAttribute('type', 'icon-only');
+ toggle.setAttribute('button-class', 'button button--small form__obfuscated__toggle');
+
+ // Add the toggle button settings, we either use attributes passed
+ // on this component down to the toggle or some basic defaults.
+ toggle.setAttribute('icon-0', this.getAttribute('icon-0') || 'view-hidden');
+ toggle.setAttribute('text-0', this.getAttribute('text-0') || 'Show');
+ toggle.setAttribute('icon-1', this.getAttribute('icon-1') || 'view');
+ toggle.setAttribute('text-1', this.getAttribute('text-1') || 'Hide');
+ toggle.setAttribute('toggled', this.getAttribute('state') || '0');
+ this.append(toggle);
+
+
+ // Add an event listener for exposing the toggle change to this web component,
+ // we name it so we can remove the event handler if we remove the WC from the page.
+ toggle.querySelector('.button').addEventListener('click', this.toggle_state = () => {
+ this.setAttribute('state', toggle.getAttribute('toggled'));
+ });
+
+ // When we add an evenListener later on to monitor for form submits the only way to do this is to go outside
+ // this component and attach it to the parent form. But if the disconnectedCallback() is used we lose track of
+ // the parent form so we record any added evenListeners into this array.
+ this.event_items = [];
+ this.event_items.push({
+ ev: 'click',
+ el: toggle.querySelector('.button'),
+ fn: this.toggle_state
+ });
+ }
+
+ __add_aria() {
+ // Because we're updating elements on the page that deal with potentially
+ // sensitive data make doubly sure the user is aware, even if they can't see it.
+ const aria = document.createElement('span');
+ aria.classList.add('visually-hidden');
+ aria.setAttribute('aria-live', 'polite');
+ this.append(aria);
+ }
+
+ __change_state() {
+ // Runs once on component setup and then whenever the state attribute changes.
+
+ // The state and toggle attributes on the main WC and the toggle are binary,
+ // so we can reference the field type via the array key.
+ const states = ['password', 'text'];
- for (var i=0; i {
+ this.setAttribute('state', '0');
+ });
+ // Store the eventListener info because we will lose access to it if disconnectedCallback is fired.
+ this.event_items.push({
+ ev: 'submit',
+ el: form,
+ fn: this.submit_form
+ });
+ }
}
-
- // Add the event listener only once.
- if (!event_listener) document.addEventListener('click', __action);
- };
-
+ }
- var __setup = function(el) {
-
- // If data-toggled attribute is found it means the default state is pressed so the aria-label should be set to pause.
- if (!el.hasAttribute('data-toggle-play') || !el.hasAttribute('data-toggle-pause')) return false;
-
- el.setAttribute('aria-label', (el.hasAttribute('data-toggled')) ? el.getAttribute('data-toggle-pause') : el.getAttribute('data-toggle-play'));
+ connectedCallback() {
+ // Setup the component.
+
+ // Add toggle button.
+ this.__add_toggle();
+
+ // Add aria status, we add this separately to the toggle as if the
+ // field is set to password we don't need to alert the user for this.
+ this.__add_aria();
- el.querySelector('.button__text').innerHTML = (el.hasAttribute('data-toggled')) ? el.getAttribute('data-toggle-pause') : el.getAttribute('data-toggle-play');
+ // Setup the aria text content, either from attributes set on the web component or some sensible defaults.
+ // We set up this array so the keys correspond to the content of the state attribute.
+ this.aria_text = [];
+ this.aria_text.push(this.getAttribute('aria-0') || 'Your field content is hidden from view.');
+ this.aria_text.push(this.getAttribute('aria-1') || 'Your field content is being displayed in plain text.');
-// console.log( el.querySelector('.button__text').innerHTML = ; );
- // if (el.hasAttribute('data-toggled')) {
- // el.setAttribute('aria-label', el.getAttribute('data-toggle-pause'));
- // el.querySelector('.button__text').innerHTML = ;
- // } else {
- // el.setAttribute('aria-label', el.getAttribute('data-toggle-play'));
- // }
+ // Check for a state attribute, if none exists set it.
+ if (!this.hasAttribute('state')) this.setAttribute('state', '0');
+
+ // Set the initial state of the field.
+ this.__change_state();
- // Add a class we attach the event listener to, we do this to force a requirement of the aria attributes.
- el.classList.add('js__toggle--play-pause');
- };
+ // If the obsufacted field is set to display in plain text on initial appearance we need to let the user know.
+ if (this.getAttribute('state') === '1') this.__update_aria();
+
+ // We use this to guard actions in attributeChangedCallback() but
+ // also to apply any CSS that may only be needed on the JSed element
+ this.classList.add('js__form__obfuscated');
+
+ // Swap any visible fields back to passwords before submit.
+ this.__submit_pass();
+ }
+ disconnectedCallback() {
+ // When disconnectedCallback() we lose access to the parent data of the component (probably bacue it's already
+ // been yeeted from the DOM) so we need to keep a log when we set an eventListener so we can find them and
+ // remove them if the WC is removed.
+ for (let item of this.event_items) {
+ item.el.removeEventListener(item.ev, item.fn);
+ }
+ }
- // Called by the listener.
- var __action = function(e) {
+ attributeChangedCallback(att, old_v, new_v) {
- // We only ever want to add one event listener.
- event_listener = true;
+ // Because this method fires purely on the element being inited we guard the actions by checking
+ // to make sure it's not the first run. Also, only run if the attribute was actually updated.
+ if ((!this.classList.contains('js__form__obfuscated')) || (old_v === new_v)) return false;
- // Ignore anything that isn't a click on a toggle.
- if (!e.target.closest('.js__toggle--play-pause')) return false;
- // console.log( e.target.querySelector('.button__text').innerHTML );
- // If the toggle is already pressed.
- if (e.target.hasAttribute('data-toggled')) {
- e.target.removeAttribute('data-toggled');
- e.target.setAttribute('aria-label', e.target.getAttribute('data-toggle-play'));
- e.target.querySelector('.button__text').innerHTML = e.target.getAttribute('data-toggle-play');
- } else {
- e.target.setAttribute('data-toggled', '');
- e.target.setAttribute('aria-label', e.target.getAttribute('data-toggle-pause'));
- e.target.querySelector('.button__text').innerHTML = e.target.getAttribute('data-toggle-pause');
+ // Changes to watched attributes.
+ if (att === 'state') {
+ this.__change_state();
+ this.__update_aria();
}
- };
-
-
- return {
- init: __init
- };
-
-})();
+ }
+}
+
+customElements.define('blinky-obfuscated-field', BlinkyObfuscatedField);
@@ -1967,89 +2590,235 @@ var switch_toggle = (function() {
})();
// Nested linked fieldsets
- var child_fields = (function() {
+ class BlinkyChildFields extends HTMLElement {
- var __init = function(el) {
- // Check for the items to check and the class to toggle.
- if (!el) el = {};
- if (el.selector == null) el.selector = '.form__child-fields';
-
- // Get all nested field groups.
- var els = document.querySelectorAll(el.selector);
- if (els.length === 0) return;
-
- for (el of els) {
- __prep({el: el});
+ static get observedAttributes() {
+ return ['expanded'];
+ }
+
+ constructor() {
+ super();
+ }
+
+
+ __add_connection(parent) {
+ // Does .children have an id? If it doesn't then we can generate one based on the parent's ID. If the
+ // parent doesn't have an ID we can generate soething based on the current time in milliseconds.
+ let connection = '';
+ if (this.querySelector(':scope > .children').id) {
+ connection = this.querySelector(':scope > .children').id;
+ } else {
+ // No ID on .children, look for something on parent.
+ connection = (parent.id) ? 'connection-'+parent.id : 'connection-'+Date.now();
}
- };
- var __prep = function(el) {
- // If you call prep directly you need to provide an element to act upon.
- if (!el || !el.el) return;
-
- // Only prep if not previously prepped this element.
- if (!el.el.classList.contains('js__form__child-fields')) {
- el.el.classList.add('js__form__child-fields');
- el.el.addEventListener('change', __action);
-
- // Check for any pre-checked radio buttons or checkboxes so we can show the child group on inital load.
- try {
- __action( {target: el.el.querySelector('input[checked="checked"]')} );
- } catch (err) {}
+ // Add aria-controls to parent.
+ parent.setAttribute('aria-controls', connection);
+
+ // Add ID to .children.
+ this.querySelector(':scope > .children').id = connection;
+ }
+
+
+ __update_aria_expanded() {
+ // This keeps the aria-expanded on the .children in sync with the expanded attribute on the instance.
+ this.querySelector(':scope > .children').setAttribute('aria-expanded', this.getAttribute('expanded'));
+
+ this.__toggle();
+ this.__set_disabled_attribute();
+ }
+
+
+ __set_disabled_attribute() {
+ // Sets the fields as disabled or enabled. Because there's no nice way in CSS to get .el :not(.el) input
+ // without also unsing the restrictive immediate child selector of > we need to grab all the fields in the
+ // instance, then get a second group that will contain only the grandchildren. When we loop thorugh the
+ // main group we check to see if the current field is actually a grandchild, if it is we ignore it.
+
+ // Add fields under this instance.
+ let fields = this.querySelectorAll(`
+ :scope .children input:not([type=submit]),
+ :scope .children textarea,
+ :scope .children select
+ `);
+
+ // Fields to ignore.
+ let fields_to_ignore = this.querySelectorAll(`
+ :scope .children .children input:not([type=submit]),
+ :scope .children .children textarea,
+ :scope .children .children select
+ `);
+
+ // We can't use includes() on a nodeList so we
+ // duplicate the ignore fields into a normal array.
+ let arr_fields_to_ignore = Array.from(fields_to_ignore);
+
+ // This instance's expanded value.
+ let expanded = this.getAttribute('expanded');
+
+ for (let field of fields) {
+
+ // Make sure the current field isn't a grandchild.
+ if (!arr_fields_to_ignore.includes(field)) {
+
+ // Set the field to the needed disabled value.
+ if (expanded == 'true') {
+ field.removeAttribute('disabled');
+ } else {
+ field.setAttribute('disabled', 'disabled');
+ }
+ }
}
- };
+ }
- var __action = function(el) {
+ __toggle() {
+ // Gets all nested component instances and sets the expanded attributes.
- var all = el.target.closest('.js__form__child-fields').querySelectorAll('input[aria-controls]');
+ const bcfs = this.querySelectorAll(':scope blinky-child-fields');
- if (el.target.closest('.js__form__child-fields')) {
-
- var clear = el.target.closest('.js__form__child-fields').dataset.clear;
- if (!clear) clear = "true";
-
- for (var item of all) {
- if (!item.checked) {
- var children = document.querySelector('#'+item.getAttribute('aria-controls'));
- if (children.getAttribute('aria-expanded') == 'true') {
- document.querySelector('#'+item.getAttribute('aria-controls')).setAttribute('aria-expanded', 'false');
- if (clear === 'true') {
- __clear_hidden_fields(document.querySelector('#'+item.getAttribute('aria-controls')));
+ // The top level instance is not expanded then it follows that all nested should also be closed.
+ if (this.getAttribute('expanded') === 'false') {
+ if (bcfs.length > 0) {
+ for (let i of bcfs) {
+ i.setAttribute('expanded', 'false');
+ }
+ }
+
+ } else {
+ if (bcfs.length > 0) {
+ for (let i of bcfs) {
+
+ // Is this instance's parent field checked?
+ const input = i.querySelector(':scope .js__parent');
+ if (input && input.checked) {
+
+ // Just because this instance's parent field is checked doesn't mean we just go ahead
+ // and expand this instance because we also need the parent instance to be expanded.
+ // To get the parent instance, we have to use parentNode otherwise closest() just
+ // returns the current instance.
+ const parent = i.parentNode.closest('blinky-child-fields');
+
+ // Only if the parent instance is expanded do we
+ // actually set the curruent instance to expanded.
+ if (parent && parent.getAttribute('expanded') == 'true') {
+ i.setAttribute('expanded', 'true');
}
}
}
}
+ }
+ }
+
+
+ connectedCallback() {
+ // Find parent field, should be first checkbox or radio but not a child.
+ const parent = this.querySelector(':scope > input[type="radio"], :scope > input[type="checkbox"]');
+ if (!parent) return false;
- if ((el.target.checked) && (el.target.hasAttribute('aria-controls'))) {
- document.querySelector('#'+el.target.getAttribute('aria-controls')).setAttribute('aria-expanded', 'true');
+ // Check for children group, we don't need to find them all, just check for one field.
+ if (!this.querySelector(`
+ :scope > .children input,
+ :scope > .children textarea,
+ :scope > .children select`)) return false;
+
+ // Setup the aria-controls / id relationship between parent and children.
+ this.__add_connection(parent);
+
+ // We found an aria-controls/id pairing...
+ const children = this.querySelector(':scope > .children');
+ children.setAttribute('aria-expanded', 'false');
+ this.setAttribute('expanded', 'false');
+ parent.classList.add('js__parent');
+
+ // We use this to guard actions in attributeChangedCallback() but
+ // also to apply any CSS that may only be needed on the JSed element
+ this.classList.add('js__form__child-fields');
+
+ // Add the CSS class to the .children container to apply the indent.
+ children.classList.add('form__child-fields');
+
+ // Add the inner span to apply the overflow, this allows the fields to be animated closed.
+ const inner = document.createElement('span');
+ inner.classList.add('form__child-fields__inner');
+ Blinky_wrap_content({
+ el: children,
+ wrapper: inner
+ });
+
+ // Store any added eventListeners for removal in disconnectedCallback();
+ this.event_items = [];
+
+ // As there is no eventListener that will detect a radio being unchecked we have to add some other means
+ // to clear the active children. We add eventListeners to poke the current radio children to an uncecked
+ // state by monitoring all other radio buttons that have the same name attribute. It's not nice but it
+ // does work ¯\_(ツ)_/¯.
+ if (parent.type === 'radio') {
+ const radios = document.querySelectorAll('input[type="radio"][name="'+parent.getAttribute('name')+'"]');
+ for (let r of radios) {
+ r.addEventListener('change', this.untoggle_children = (e) => {
+ this.setAttribute('expanded', 'false');
+ children.setAttribute('aria-expanded', 'false');
+ });
+
+ // Save event.
+ this.event_items.push({
+ ev: 'change',
+ el: r,
+ fn: this.untoggle_children
+ });
}
}
- };
- var __clear_hidden_fields = function(el) {
- if (!el) return;
- var fields = el.querySelectorAll('input:not([type=submit]), textarea, select');
- if (fields.length === 0) return;
+ // Add the eventListener to the aria-controls. We need to save it so we can remove it if the
+ // component is removed from the page since it will be added outside the scope of this.
+ parent.addEventListener('change', this.toggle_children = (e) => {
+ this.setAttribute('expanded', (e.target.checked) ? 'true' : 'false' );
+ children.setAttribute('aria-expanded', (e.target.checked) ? 'true' : 'false' );
+ });
+
+ // Save event.
+ this.event_items.push({
+ ev: 'change',
+ el: parent,
+ fn: this.toggle_children
+ });
+
+ this.__update_aria_expanded();
+
+ // If the component has a field that's checked by default we need to make the children visible.
+ if (parent.getAttribute('checked')) {
+ children.setAttribute('aria-expanded', 'true');
+ this.setAttribute('expanded', 'true');
+ }
+ }
+
+
+ disconnectedCallback() {
+ // Remove all previously set eventListeners.
+ for (let item of this.event_items) {
+ item.el.removeEventListener(item.ev, item.fn);
+ }
+ }
+
+
+ attributeChangedCallback(att, old_v, new_v) {
- for (var field of fields) {
- if (field.type == 'radio' || field.type == 'checkbox') {
- field.checked = false;
- } else {
- field.value = '';
- }
+ // Because this method fires purely on the element being inited we
+ // guard the actions by checking to make sure it's not the first run.
+ // Also, only run if the attribute was actually updated.
+ if ((!this.classList.contains('js__form__child-fields')) || (old_v === new_v)) return false;
+
+ if (att === 'expanded') {
+ this.__update_aria_expanded();
}
- };
-
- return {
- init: __init,
- prep: __prep
- };
-
- })();
+ }
+
+ }
+ customElements.define('blinky-child-fields', BlinkyChildFields);
+
-
// Nested linked fieldsets
var fieldset_group = (function() {
@@ -2260,6 +3029,157 @@ var file_upload_prettifier = (function() {
+// Progress bar/circle
+
+class BlinkyProgress extends HTMLElement {
+
+ // Values that will / might change over time to keep track of.
+ // They are mapped to the value and max attributes of a progress element.
+ static get observedAttributes() {
+ return ['b-value', 'b-max', 'b-type'];
+ }
+
+ constructor() {
+ super();
+ }
+
+ connectedCallback() {
+
+ if (!this.getAttribute('data-init')) {
+
+ // Visually hide the native PROGRESS bar, we keep it "visible" to screen readers as this is the symantic
+ // element and has meaning compared to the visual pseudo element that will be just a collection of SPANs.
+ const progress = this.querySelector('progress');
+ progress.setAttribute('class', 'visually-hidden');
+
+ let b_type = (this.getAttribute('b-type') == 'circle') ? 'circle' : 'line';
+
+ // Create and attach the pseudo progress element that we can style.
+ const loader = document.createElement('span');
+ loader.setAttribute('class', 'progress__box progress__box--'+b_type);
+ loader.setAttribute('aria-hidden', 'true');
+ progress.after(loader);
+
+ // ... And the progress bar.
+ const bar = document.createElement('span');
+ bar.setAttribute('class', 'progress__fish');
+
+ // Fix so that indeterminate progress bars still show the fish animation because we're not setting the bar to 0 width;
+ if (this.hasAttribute('b-value')) {
+ bar.setAttribute('style', 'width: 0%');
+ }
+ loader.appendChild(bar);
+
+ // Chceck for is not circle because on the first run thorough this is still undefined.
+ // If it's a line it can be a determinate progress bar so needs the animation speed sestting.
+ if (b_type != 'circle') {
+
+ // Because the progress bar can vary in width we can't set the animation speed in CSS,
+ // so we take the width of the progress bar and divide it by 4, making sure to floor it,
+ // always make sure the speed is a minimum of 100ms as any faster is hard to register visually.
+ // Then we make it readable for the custom event later on.
+ let animation_speed = Math.floor((loader.offsetWidth / 4));
+ if (animation_speed < 100) animation_speed = 100;
+ loader.setAttribute('style', '--speed: '+animation_speed+'ms');
+ this.animation_speed = animation_speed;
+ }
+
+ }
+
+ this.setAttribute('data-init', '1');
+ }
+
+ disconnectedCallback() {}
+
+ // CE attributes have updated...
+ __update_value(att, old_v, new_v) {
+
+ if (!new_v) return false;
+ const progress = this.querySelector('progress');
+
+ // As we use the native attribute name prefixed with 'b-' we know how many characters we can always ignore.
+ // Update the attributes on the PROGRESS element.
+ progress.setAttribute(att.substring(2), new_v);
+
+ // Update the progress bar current value.
+ if (att == 'b-value') {
+
+ // Update the text content on the native PROGRESS for a11y.
+ progress.innerText = new_v+'%';
+
+ // Set the width on pseudo bar.
+ const bar = this.querySelector('.progress__fish');
+ if (bar) bar.setAttribute('style', 'width: '+new_v+'%');
+
+ // If we're using a determinate progress bar where it will eventually fill up to 100% send an event when it does.
+ if (new_v == '100') {
+
+ // Delay the event by the time of the CSS animation.
+ setTimeout(() => {
+ this.dispatchEvent(
+ new CustomEvent('progressBarFull', {bubbles: true, el: this})
+ );
+ }, this.animation_speed);
+ }
+ }
+ }
+
+ // If either b-value or b-max is changed on the main element update their usage in the CE.
+ attributeChangedCallback(att, oldValue, newValue) {
+
+ // Force connectedCallback() to run before doing anything with the attribute values.
+ if (!this.getAttribute('data-init')) {
+ this.connectedCallback();
+ }
+
+ let b_type = (this.getAttribute('b-type') == 'circle') ? 'circle' : 'line';
+
+ if (b_type != 'circle') {
+ this.__update_value(att, oldValue, newValue);
+ }
+ }
+}
+
+customElements.define("blinky-progress", BlinkyProgress);
+
+
+
+// Blinky Progress controller.
+var blinky_progress = (function() {
+
+ let __add = function(bits) {
+ if (!bits.el) return false;
+
+ let blinky_progress_tag = document.createElement('blinky-progress');
+ blinky_progress_tag.setAttribute('class', 'progress');
+ let blinky_progress_bar = document.createElement('progress');
+ blinky_progress_tag.appendChild(blinky_progress_bar);
+
+ if (bits.el.tagName == 'BUTTON' || bits.el.tagName == 'LI') bits.type = 'line';
+ if (bits.type) blinky_progress_tag.setAttribute('b-type', bits.type);
+
+ if (bits.value) blinky_progress_tag.setAttribute('b-value', bits.value);
+ if (bits.max) blinky_progress_tag.setAttribute('b-max', bits.max);
+ if (bits.id) blinky_progress_tag.setAttribute('id', bits.id);
+ if (bits.label) blinky_progress_bar.setAttribute('aria-label', bits.label);
+
+ bits.el.append(blinky_progress_tag);
+ };
+
+ let __remove = function(bits) {
+ if (!bits.el) return false;
+ bits.el.remove();
+ };
+
+ return {
+ add: __add,
+ remove: __remove
+ };
+
+})();
+
+
+
// Theme Switch web component
var theme_switcher_template = document.createElement('template');
diff --git a/starter-ui/src/main/webapp/ui/js/interface.min.js b/starter-ui/src/main/webapp/ui/js/interface.min.js
index 9362b48..724f39c 100644
--- a/starter-ui/src/main/webapp/ui/js/interface.min.js
+++ b/starter-ui/src/main/webapp/ui/js/interface.min.js
@@ -1,3 +1,3 @@
-/*! Payara Pattern Library version: 0.51.2 */
+/*! Payara Pattern Library version: 0.72.1 */
/*! DO NOT MODIFY THIS FILE, CHANGES WILL BE OVERWRITTEN! */
-function dispatch_resize_end(){var t;try{t=new Event("resize-end")}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("resize-end",!0,!0,{})}window.dispatchEvent(t)}document.getElementsByTagName("html")[0].className=document.getElementsByTagName("html")[0].className.replace(/no-js/,"").trim()+" js",window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(t){var e,r=(this.document||this.ownerDocument).querySelectorAll(t),i=this;do{for(e=r.length;--e>=0&&r.item(e)!==i;);}while(e<0&&(i=i.parentElement));return i});var create_resize_end_event=function(){var t;window.addEventListener("resize",(function(){clearTimeout(t),t=setTimeout((function(){dispatch_resize_end()}),100)}))};create_resize_end_event();var scrollbar=function(){__init_first_shadow=function(t){t.classList.add("scroll-shadow--bottom")},__scrolling=function(e){t||(window.requestAnimationFrame((function(){e.target.scrollTop>0?e.target.classList.add("scroll-shadow--top"):e.target.classList.remove("scroll-shadow--top"),e.target.scrollTopt[i].offsetHeight&&(t[i].classList.add("js__scroll"),t[i].addEventListener("scroll",__scrolling),__init_first_shadow(t[i]))}};var t=!1;window.addEventListener("resize-end",__calc),__calc()};scrollbar();var grid_to_column=function(){var t=function(t){var e,r,i;new ResizeObserver((e=function(e){e.target.classList.remove(t.class),e.target.offsetTop=a.length&&(s=0),r.tab_group.querySelector(".tab-group__tabs").setAttribute("role","tablist"),x=0;x'+e.label+" "):i[n].parentElement.querySelector(".accordion__toggle").setAttribute("aria-controls","acc"+a),i[n].setAttribute("id","acc"+a),i[n].setAttribute("aria-hidden","true"),a++;t||(document.addEventListener("click",r),t=!0)}},r=function(t){if(!t.target.closest(".accordion__toggle"))return!1;toggle="true"===t.target.getAttribute("aria-expanded"),t.target.setAttribute("aria-expanded",String(!toggle)),content="true"===t.target.parentElement.querySelector(".accordion__content").getAttribute("aria-hidden"),t.target.parentElement.querySelector(".accordion__content").setAttribute("aria-hidden",String(!content))};return{init:function(t){t=t||".accordion";var r=document.querySelectorAll(t);if(0!==r.length)for(var i=0;i .menu__group"),""!==r&&(e=t.el.querySelectorAll(r)),e&&0!==e.length){for(var a=0;a';"split"!==t.type?e.insertAdjacentHTML("beforeend",r):e.insertAdjacentHTML("afterend",'')}else t.el.parentNode.classList.add("menu--dropdown");var i="split"===t.type&&"A"===e.tagName?e.nextSibling:e;i.setAttribute("aria-haspopup","true"),i.setAttribute("aria-expanded",e.classList.contains("menu--expanded")?"true":"false")},a=function(t){var e="";if(t.hasAttribute("data-clone-label")?e=t.getAttribute("data-clone-label"):t.closest(".menu").hasAttribute("data-clone-label")&&(e=t.closest(".menu").getAttribute("data-clone-label")),""!==e){var r=t.cloneNode(!0),i=t.parentNode.cloneNode(!1);r.hasAttribute("aria-expanded")&&r.removeAttribute("aria-expanded"),r.hasAttribute("aria-current")&&r.removeAttribute("aria-current"),r.classList.remove("menu__current-parent"),r.classList.add("menu--clone");var a=r.querySelector(".menu__text").innerText;a=a.replace(/\r?\n|\r/g,""),e.indexOf(".")>-1?r.querySelector(".menu__text").innerText=e.replace(/\./,a):r.querySelector(".menu__text").innerText=e,i.appendChild(r),t.parentNode.querySelector(".menu__group > *:first-child").insertAdjacentElement("beforebegin",i)}},n=function(e){t=!0;var r=e.target;if(e.target.closest(".menu")&&!e.target.closest("[aria-haspopup]")){if(!e.target.classList.contains("menu"))return!1;r=e.target.parentNode}e.target.closest(".menu__content[aria-haspopup]")&&e.preventDefault();var i=s(r);if(0!==i.length)for(var a=0;ae.target.closest(".menu").parentNode.getBoundingClientRect().right&&e.target.closest("[aria-haspopup]").classList.add("menu__group--boundary"))},s=function(t){if(t.classList.contains("menu__item"))return!1;var e;t.closest(".menu")&&(t.closest(".menu").setAttribute("menu-current",""),"toggle"==t.closest(".menu").getAttribute("data-menu-behaviour")&&(null!==t.closest(".menu__group")&&t.closest(".menu__group").setAttribute("menu-scope",""),null!==t.closest("[aria-haspopup]")&&t.closest("[aria-haspopup]").setAttribute("menu-ignore","")));e=document.querySelectorAll('.menu--dropdown:not([menu-current]) [aria-expanded="true"], .menu--horizontal:not([menu-current]) [aria-expanded="true"], [menu-scope] [aria-expanded="true"]:not([menu-ignore])');try{t.closest(".menu").removeAttribute("menu-current"),t.closest(".menu__group").removeAttribute("menu-scope"),t.closest("[aria-haspopup]").removeAttribute("menu-ignore")}catch(t){}return e};return{init:function(t){t=t||".menu";var r=document.querySelectorAll(t);if(0!==r.length)for(var i=0;i{let e=t.step.closest(".form-steps").getAttribute("data-id"),r="st";e&&(r=e+"-"+r),t.step.setAttribute("id",r+t.i),t.step.closest(".form-steps--hide-previous-fields.form-steps--clickable-legends")&&(t=>{alink=document.createElement("a"),alink.setAttribute("href",t.href);let e=t.step.querySelectorAll(".form-steps__title");if(!e)return!1;alink.innerHTML=e[0].innerHTML;for(let t of e)t.textContent="",t.appendChild(alink.cloneNode(!0))})({step:t.step,href:"#"+r+t.i});let i=t.i+1,a=t.i-1;if(a>=0){let e=t.step.querySelector(".form__step__button-back");e&&e.setAttribute("href","#"+r+a)}if(i{let e=["form-steps__step--complete","form-steps__step--incomplete"],r=0;for(let i of t)i.classList.remove("form-steps__step--complete","form-steps__step--incomplete"),i.classList.contains("form-steps__step--active")?r=1:i.classList.add(e[r])},a=a=>{e++,a.setAttribute("data-id","stb"+e),a.classList.add("js__form-steps");let s,o=a.querySelectorAll(".form-steps__step");if(0!==o){for(const[t,e]of o.entries())r({step:e,i:t,length:o.length});s=window.location.hash&&document.querySelector(window.location.hash)?document.querySelector(window.location.hash):document.querySelector('[data-id="stb'+e+'"] .form-steps__step:first-child'),s.classList.add("form-steps__step--active"),i(o),o[o.length-1].classList.add("form-steps__step--last"),t||(document.addEventListener("click",n),t=!0)}},n=t=>{if(t.target.closest(".form__step__button")||t.target.closest(".form__step__button-back")||t.target.closest(".form-steps__title a")){let e=t.target.closest(".form-steps__step").querySelector("[aria-invalid=true]"),r=t.target.parentNode.querySelector(".form-steps__error");if(e)t.preventDefault(),r.setAttribute("role","alert"),r.querySelector("span").innerHTML=t.target.closest(".form-steps").getAttribute("data-step-error");else{try{r.removeAttribute("role"),r.querySelector("span").innerHTML=""}catch(t){}t.target.closest(".form-steps").querySelector(".form-steps__step--active").classList.remove("form-steps__step--active"),t.target.closest(".form-steps").querySelector(t.target.getAttribute("href")).classList.add("form-steps__step--active"),t.x+t.y===0&&(t=>{let e=t.querySelector("input:not([type=hidden]), textarea, select, button");e&&setTimeout((()=>{e.contentEditable=!0,e.focus(),e.contentEditable=!1}),300)})(t.target.closest(".form-steps").querySelector(t.target.getAttribute("href")));let e=t.target.closest(".form-steps").querySelectorAll(".form-steps__step");i(e)}}};return{init:t=>{t=t||".form-steps";let e=document.querySelectorAll(t);if(0!==e.length)for(let t of e)a(t)},form_steps:a}}(),help_toggle=function(){var t=function(t){t&&(t.tagName||(t=document.querySelector(t)),t&&t.addEventListener("click",(function(t){"false"==t.target.getAttribute("aria-expanded")?t.target.setAttribute("aria-expanded",!0):t.target.setAttribute("aria-expanded",!1),t.target.parentElement.classList.toggle("form__help-text--open"),t.preventDefault()}),!1))};return{init:function(e){var r;for(r=e?document.querySelectorAll(e):document.querySelectorAll(".form__help-toggle"),i=0;i0?(t.setAttribute("size",e),t.classList.remove("multilist__list--empty")):(t.setAttribute("size",1),t.classList.add("multilist__list--empty"))},u=function(t,e){var r=t.target.closest(".form__multilist").querySelector(".multilist__field"),a=r.value.split(" ");a.pop(),a.push(e),r.value=a.join(" ")+" ";var n=t.target.closest(".form__multilist").querySelectorAll(".hide");for(i=0;i0)for(var a=0;a0)for(i=0;i '+t.files[i].name+"";t.nextSibling.nextSibling.innerHTML=e},e=function(e){if(e){e.tagName||(e=document.querySelector(e)),file_list=document.createElement("span"),file_list.setAttribute("class","form__file__name"),e.parentNode.insertBefore(file_list,e.nextSibling),drag=document.createElement("span"),drag.setAttribute("class","form__file__drag"),drag.innerHTML="Drag file",null!==e.getAttribute("multiple")&&(drag.innerHTML+="s"),drag.innerHTML+=' here to upload or Browse to upload',e.parentNode.insertBefore(drag,e.nextSibling),function t(){drag.offsetHeight?e.setAttribute("style","height: "+drag.offsetHeight+"px; width: "+drag.offsetWidth+"px"):window.requestAnimationFrame(t)}(),e.addEventListener("change",(function(){t(e)}),!0);var r=0;e.addEventListener("dragenter",(function(){r++,e.classList.add("form__file__drag-active")}),!0),e.addEventListener("dragleave",(function(){!function(t){0==--r&&t.classList.remove("form__file__drag-active")}(e)}),!0),e.addEventListener("drop",(function(){!function(t){r=0,t.classList.remove("form__file__drag-active")}(e)}),!0),t(e)}};return{init:function(t){var r;for(r=t?document.querySelectorAll(t):document.querySelectorAll(".form__file"),i=0;i\n\t\t.theme-switch .button {\n\t\t\tmargin: 0;\n\t\t\ttext-align: left;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.theme-switch {\n\t\t\tdisplay: inline-flex;\n\t\t\tflex-direction: column;\n\t\t\tposition: relative;\n\t\t}\n\t\t.theme-switcher__options {\n\t\t\tflex-direction: column;\n\t\t\tposition: absolute;\n\t\t\ttop: calc(100% - 3px);\n\t\t}\n\t\t.theme-switch.theme-switch--right .theme-switcher__options {\n\t\t\tright: 0;\n\t\t}\n\t\t.theme-switch.theme-switch--up .theme-switcher__options {\n\t\t\tbottom: calc(100% - 3px);\n\t\t\ttop: auto;\n\t\t}\n\t\t\n\t\t.theme-switch__chooser[aria-expanded="false"] + .theme-switcher__options {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.theme-switch__chooser[aria-expanded="true"] + .theme-switcher__options {\n\t\t\tdisplay: inline-flex;\n\t\t}\n\t\t.theme-switch .icon {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.theme-switch [data-theme="theme--light"] [data-id="theme--light"], \n\t\t.theme-switch [data-theme="theme--system"] [data-id="theme--system"], \n\t\t.theme-switch [data-theme="theme--dark"] [data-id="theme--dark"] {\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t.theme-switch [aria-pressed="true"] {\n\t\t\tbackground: rgb(var(--tango)) !important;\n\t\t\tcolor: rgb(var(--menu-current-text))!important;\n\t\t}\n\t\t.theme-switch [aria-pressed="true"] .icon {\n\t\t\tfill: rgb(var(--menu-current-text));\n\t\t}\n\t\t\n\t\t.theme-switcher__options .button:first-child {\n\t\t\tborder-bottom-left-radius: 0;\n\t\t\tborder-bottom-right-radius: 0;\n\t\t}\n\t\t.theme-switcher__options .button[data-id="theme--system"] {\n\t\t\tborder-radius: 0;\n\t\t}\n\t\t.theme-switcher__options .button:last-child {\n\t\t\tborder-top-left-radius: 0;\n\t\t\tborder-top-right-radius: 0;\n\t\t}\n\t\n\t\n\t\t\n\t\t\t \n\t\t\t \n\t\t\t \n\t\t\t \n\t\t \n\t\t\n\t\t\n\t\t\t\n\t\t\t\t \n\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t \n\t \n';class ThemeSwitcher extends HTMLElement{connectedCallback(){this.innerHTML=theme_switcher_template.innerHTML;var t;try{t=JSON.parse(this.attributes.settings.value)[0]}catch(t){}t=Object.assign({default_theme:"light",title:"Choose Theme",light:"Light",system:"Follow System",dark:"Dark",display_label:"true",h_align:"left",v_align:"down"},t);var e=this.querySelectorAll("button");if(e)for(var r=0;e.length>r;r++)e[r].classList.contains("theme-switch__chooser")?"false"===t.display_label&&e[r].querySelector(".button__text").classList.add("visually-hidden"):e[r].setAttribute("aria-pressed","false");this.add_class(this.get_cookie("theme_setting",t.default_theme)||"theme--"+t.default_theme),this.querySelector(".theme-switch").classList.add("theme-switch--"+t.h_align,"theme-switch--"+t.v_align),this.querySelector('.theme-switcher__options [data-id="'+(this.get_cookie("theme_setting",t.default_theme)||"theme--"+t.default_theme)+'"]').setAttribute("aria-pressed","true"),this.querySelector(".theme-switch__chooser .button__text").innerHTML=t.title,this.querySelector('[data-id="theme--light"] .button__text').innerHTML=t.light,this.querySelector('[data-id="theme--system"] .button__text').innerHTML=t.system,this.querySelector('[data-id="theme--dark"] .button__text').innerHTML=t.dark,this.querySelector(".theme-switch__chooser").setAttribute("data-theme",this.get_cookie("theme_setting",t.default_theme)||"theme--"+t.default_theme),document.addEventListener("click",this,!0)}handleEvent(t){"click"===t.type&&(t.target.closest(".theme-switch")?t.target.classList.contains("theme-switch__chooser")?this.chooser(t):this.action(t):this.close_chooser(t))}close_chooser(t){document.querySelector(".theme-switch__chooser").setAttribute("aria-expanded","false")}chooser(t){t.target.setAttribute("aria-expanded","true"===t.target.getAttribute("aria-expanded")?"false":"true")}add_class(t){document.querySelector("body").classList.remove("theme--light","theme--dark","theme--system"),document.querySelector("body").classList.add(t)}get_cookie(t,e){var r=document.cookie.match("(^|;) ?"+t+"=([^;]*)(;|$)");return r?r[2]:null}set_cookie(t,e,r){var i=new Date;i.setTime(i.getTime()+864e5*r),document.cookie=t+"="+e+";path=/;expires="+i.toGMTString()}action(t){this.set_cookie("theme_setting",t.target.dataset.id,3650),this.add_class(t.target.dataset.id),t.target.closest(".theme-switch").querySelector('[aria-pressed="true"]').setAttribute("aria-pressed","false"),t.target.setAttribute("aria-pressed","true"),t.target.closest(".theme-switch").querySelector(".theme-switch__chooser").setAttribute("data-theme",t.target.dataset.id),t.target.closest(".theme-switch").querySelector(".theme-switch__chooser").setAttribute("aria-expanded","false")}}customElements.define("theme-switch",ThemeSwitcher);
\ No newline at end of file
+function dispatch_resize_end(){var t;try{t=new Event("resize-end")}catch(e){(t=document.createEvent("CustomEvent")).initCustomEvent("resize-end",!0,!0,{})}window.dispatchEvent(t)}document.getElementsByTagName("html")[0].className=document.getElementsByTagName("html")[0].className.replace(/no-js/,"").trim()+" js";var create_resize_end_event=function(){var t;window.addEventListener("resize",(function(){clearTimeout(t),t=setTimeout((function(){dispatch_resize_end()}),100)}))};create_resize_end_event();var blinky_addIcon=function(t,e){if(!t)return!1;const s=document.createElementNS("http://www.w3.org/2000/svg","svg");if(s.setAttribute("class","icon"),s.setAttribute("width","1em"),s.setAttribute("height","1em"),s.setAttribute("viewbox","0 0 16 16"),s.setAttribute("aria-hidden","true"),s.setAttribute("focusable","false"),"string"==typeof t){const i=document.createElementNS("http://www.w3.org/2000/svg","use");i.setAttributeNS("http://www.w3.org/1999/xlink","href",ui_path({el:e})+"/ui/images/icons.svg#icon-"+t),s.append(i)}else for(const[i,r]of t.entries()){const t=document.createElementNS("http://www.w3.org/2000/svg","use");t.setAttributeNS("http://www.w3.org/1999/xlink","href",ui_path({el:e})+"/ui/images/icons.svg#icon-"+r.icon),t.setAttribute("class",r.css),s.append(t)}return s};const Blinky_cookie=function(){this.get_eTLD1=t=>{const e=document.location.hostname;for(let s of t)if(/^[a-z.]*$/.test(s)){"."!==s.substring(0,1)&&(s="."+s);const t=new RegExp(s+"$"),i=e.split(t);if(i.length>1)return i[0].substr(i[0].lastIndexOf("."),i[0].length)+s}return!1},this.set=t=>{if(!t.name||!/^[A-Za-z0-9-_]*$/.test(t.name)||!/^[A-Za-z0-9-_!#$&()\[\]*+.:<>?@^`{}|~]*$/.test(t.val))return!1;let e=t.name+"=";t.val&&(e+=t.val);const s=new Date;if(!isNaN(t.expiry_days)&&t.expiry_days>0?(s.setTime(s.getTime()+24*t.expiry_days*60*60*1e3),e+=";expires="+s.toUTCString()):!isNaN(t.expiry_days)&&t.expiry_days<0&&(s.setTime(s.getTime()-864e5),e+=";expires="+s.toUTCString()),e+=";path=",e+=t.path&&/^[A-Za-z0-9-_\/]*$/.test(t.path)?t.path:"/",t.hostname){let s="string"==typeof t.hostname?new Array(t.hostname):t.hostname;const i=this.get_eTLD1(s);e+=i?";Domain="+i+";SameSite=None;Secure":";SameSite=Lax"}else t.domain&&/^[A-Za-z0-9-.]*$/.test(t.domain)?e+=";Domain="+t.domain+";SameSite=None;Secure":e+=";SameSite=Lax";document.cookie=e},this.get=t=>{if(!t||!document.cookie)return!1;const e=t.name||t;let s=document.cookie.split("; ").find((t=>t.startsWith(e+"=")));return!!s&&s.split("=")[1]}},Blinky_wrap_content=function(t){let e=[];for(let s of t.el.childNodes)e.push(s);for(let s of e)t.wrapper.append(s);(t.target?t.target:t.el).append(t.wrapper)};class BlinkyScrollHints extends HTMLElement{constructor(){super()}__scroll_pos_checker(t){window.requestAnimationFrame((function(){t.dataset.shadow_top=t.scrollTop>0?"1":"0",t.dataset.shadow_bottom=Math.abs(t.scrollHeight-t.clientHeight-t.scrollTop)>=1?"1":"0"}))}__scrolling(t){this.__scroll_pos_checker(t.target)}connectedCallback(){this.classList.add("js__scroll");const t=document.createElement("span");t.classList.add("js__shadow"),this.prepend(t);const e=new WeakMap;this.resize_observer=new ResizeObserver((t=>{const s=t[0];clearTimeout(e.get(s.target)),e.set(s.target,setTimeout((()=>{this.removeEventListener("scroll",this.__scrolling),this.scrollHeight>=s.contentBoxSize[0].blockSize&&(this.addEventListener("scroll",this.__scrolling),this.__scroll_pos_checker(this))}),150))})),this.resize_observer.observe(this);this.mut_observer=new MutationObserver(((t,e)=>{for(const e of t)this.__scroll_pos_checker(this)})),this.mut_observer.observe(this,{attributes:!0,attributeFilter:["class"],childList:!0,subtree:!0}),this.__scroll_pos_checker(this)}disconnectedCallback(){this.removeEventListener("scroll",this.__scrolling),this.resize_observer.disconnect(),this.mut_observer.disconnect()}}customElements.define("blinky-scroll-hints",BlinkyScrollHints);var grid_to_column=function(){var t=function(t){var e,s,i;new ResizeObserver((e=function(e){e.target.classList.remove(t.class),e.target.offsetTop{const i=s[0];clearTimeout(t.get(i.target)),t.set(i.target,setTimeout((()=>{i.contentBoxSize[0].blockSize!==e&&this.__set_sidebar_height(),e=i.contentBoxSize[0].blockSize}),150))})),this.resize_observer.observe(document.querySelector(".page--sticky-header .page__header"))}connectedCallback(){this.classList.contains("js__sidebar")||(this.cookie=new Blinky_cookie,this.__wrap_contents(),this.getAttribute("toggle")&&this.id&&(this.__get_mimimized_state(),this.__add_toggle()),this.__sidebar_height()),this.classList.add("js__sidebar")}attributeChangedCallback(t,e,s){if(!this.classList.contains("js__sidebar")||e===s)return!1;"minimized"===t&&this.__set_mimimized_state()}}customElements.define("blinky-sidebar",BlinkySidebar);var tab_group=function(){var t=function(t){37==t.keyCode&&(this.previousElementSibling?this.previousElementSibling.focus():this.parentElement.lastElementChild.focus()),39==t.keyCode&&(this.nextElementSibling?this.nextElementSibling.focus():this.parentElement.firstElementChild.focus())},e=function(){var t=this.closest(".tab-group").querySelectorAll(".tab-group__tab"),e=this.closest(".tab-group").querySelectorAll(".tab-group__content");for(i=0;i=r.length&&(a=0),s.tab_group.querySelector(".tab-group__tabs").setAttribute("role","tablist"),x=0;x'+e.label+" "):i[n].parentElement.querySelector(".accordion__toggle").setAttribute("aria-controls","acc"+r),i[n].setAttribute("id","acc"+r),i[n].setAttribute("aria-hidden","true"),r++;t||(document.addEventListener("click",s),t=!0)}},s=function(t){if(!t.target.closest(".accordion__toggle"))return!1;toggle="true"===t.target.getAttribute("aria-expanded"),t.target.setAttribute("aria-expanded",String(!toggle)),content="true"===t.target.parentElement.querySelector(".accordion__content").getAttribute("aria-hidden"),t.target.parentElement.querySelector(".accordion__content").setAttribute("aria-hidden",String(!content))};return{init:function(t){t=t||".accordion";var s=document.querySelectorAll(t);if(0!==s.length)for(var i=0;i{this.querySelector(".shoutbox__undo")?this.__show_undo():this.__remove_card()}),t)}__show_undo(){this.querySelector(".shoutbox__undo").classList.add("shoutbox__undo--show1"),setTimeout((()=>{this.querySelector(".shoutbox__undo").classList.add("shoutbox__undo--show2")}),1)}__remove_card(){this.remove()}__reopen_shoutbox(){this.classList.remove("shoutbox--closing"),this.querySelector(".shoutbox__undo").classList.remove("shoutbox__undo--show2"),this.querySelector(".shoutbox__undo").classList.remove("shoutbox__undo--show1"),this.cookieObj.set({name:this.getAttribute("b-cookie"),expiry_days:-1,path:"/",hostname:[".fish",".cloud"]})}__wrap_contents(t){let e=[];for(let t of this.childNodes)e.push(t);for(let s of e)t.append(s)}__set_speed(){let t=Math.floor(1.5*this.offsetHeight);return t<100?t=100:t>300&&(t=300),t}connectedCallback(){if(!this.classList.contains("js__shoutbox")){if(!this.getAttribute("b-cookie")||""==this.getAttribute("b-cookie"))return this.classList.add("shoutbox--disabled"),!1;this.cookieObj=new Blinky_cookie,"closed"===this.cookieObj.get({name:this.getAttribute("b-cookie")})&&this.__remove_card();let t=document.createElement("div");t.setAttribute("class","shoutbox__inner"),this.__wrap_contents(t);let e=document.createElement("div");e.setAttribute("class","shoutbox__outer"),this.appendChild(e),e.appendChild(t);let s=this.__create_button({type:"icon",icon:"cross",class:"button--clear shoutbox__close layout-hidden",label:"Close"});this.querySelector(".shoutbox__inner").prepend(s),s.addEventListener("click",(()=>{this.__close_card(),this.cookieObj.set({name:this.getAttribute("b-cookie"),val:"closed",expiry_days:this.getAttribute("b-expiry")||0,path:"/",hostname:".fish"})}));let i=this.querySelectorAll(".shoutbox__close-in-content");if(i)for(let t of i)t.addEventListener("click",(()=>{this.__close_card(),this.cookieObj.set({name:this.getAttribute("b-cookie"),val:"closed",expiry_days:this.getAttribute("b-expiry")||0,path:"/",hostname:".fish"})}));if(this.getAttribute("b-undo")){let t=this.__create_button({type:"text",class:"button--text shoutbox__undo",label:this.getAttribute("b-undo")});this.append(t),t.addEventListener("click",(()=>{this.__reopen_shoutbox()}))}}this.classList.add("js__shoutbox")}disconnectedCallback(){}attributeChangedCallback(t,e,s){this.classList.contains("js__shoutbox")||this.connectedCallback(),"b-close"===t&&"1"===s&&this.__close_card(this,this.speed)}}customElements.define("blinky-shoutbox",BlinkyShoutbox);var chart_colors={tango:"rgb(240, 152, 27)",midnight:"rgb(0, 44, 62)",smurf:"rgb(5, 152, 214)",basalt:"rgb(67, 68, 69)",concrete:"rgb(218, 224, 226)",coal:"rgb(23, 24, 24)"};class BlinkyToggleButton extends HTMLElement{static get observedAttributes(){return["toggled"]}constructor(){super()}__toggle_clicked(){this.setAttribute("toggled",Number(!JSON.parse(this.getAttribute("toggled"))))}__equalise_label_width(){let t=[];this.querySelector(".toggle__text").innerHTML=this.getAttribute("text-0"),t.push(this.querySelector(".toggle__text").offsetWidth),this.querySelector(".toggle__text").innerHTML=this.getAttribute("text-1"),t.push(this.querySelector(".toggle__text").offsetWidth),Math.max(...t)>1&&this.querySelector(".toggle__text").setAttribute("style","min-width: "+Math.max(...t)/10+"rem")}__build_toggle(){this.getAttribute("toggled")||this.setAttribute("toggled","0");let t=document.createElement("button"),e={id:"",class:""};if(this.getAttribute("button-class")&&(e.class=this.getAttribute("button-class")),this.getAttribute("button-id")&&(e.id=this.getAttribute("button-id")),this.querySelector("a")&&"A"===this.querySelector("a").tagName){let t=this.querySelector("a");!e.class&&t.getAttribute("class")&&(e.class=t.getAttribute("class")),!e.id&&t.id&&(e.id=t.id),t.remove()}e.id&&(t.id=e.id),t.setAttribute("class",e.class+" button--toggle"),t.classList.contains("button")||t.classList.add("button"),t.setAttribute("type","button"),this.append(t);const s=document.createElement("span");if(s.classList.add("toggle__text"),this.getAttribute("text-0")||this.setAttribute("text-0","Off"),this.getAttribute("text-1")||this.setAttribute("text-1","On"),t.classList.contains("button--small")){const e=document.createElement("span");e.classList.add("button__text"),Blinky_wrap_content({el:t,wrapper:e}),t=e}else s.classList.add("button__text");"icon-only"===this.getAttribute("type")&&s.classList.add("visually-hidden"),Blinky_wrap_content({el:t,wrapper:s}),this.__equalise_label_width();const i=this.getAttribute("icon-0")||"dot_outline",r=this.getAttribute("icon-1")||"dot",n=blinky_addIcon([{icon:i,css:"toggle__0"},{icon:r,css:"toggle__1"}],this);t.prepend(n)}__update_toggle(){const t=this.getAttribute("toggled")||"0";this.querySelector(".toggle__text").innerHTML=this.getAttribute("text-"+t)}connectedCallback(){this.__build_toggle(),this.classList.add("js__button--toggle"),this.__update_toggle(),this.querySelector(".button").addEventListener("click",(()=>{this.__toggle_clicked()}))}disconnectedCallback(){}attributeChangedCallback(t,e,s){if(!this.classList.contains("js__button--toggle")||e===s)return!1;"toggled"===t&&this.__update_toggle()}}customElements.define("blinky-toggle-button",BlinkyToggleButton);var menu=function(){var t=!1;function e(e){var i=e.getAttribute("data-menu-type")?e.getAttribute("data-menu-type"):"full";s({el:e,icon:ui_path({el:e}),type:i}),t||(document.addEventListener("click",n),t=!0)}var s=function(t){t.el.classList.contains("menu--horizontal")&&t.el.setAttribute("data-menu-behaviour","toggle");var e,s="";if(t.el.contains(t.el.querySelector(".menu__main-toggle"))&&(s=".menu__main-toggle + .menu__group"),"open"!==t.el.getAttribute("data-menu-behaviour")&&(""!==s&&(s+=", "),s+=".menu__item > .menu__group"),""!==s&&(e=t.el.querySelectorAll(s)),e&&0!==e.length){for(var r=0;r';"split"!==t.type?e.insertAdjacentHTML("beforeend",s):e.insertAdjacentHTML("afterend",'')}else t.el.parentNode.classList.add("menu--dropdown");var i="split"===t.type&&"A"===e.tagName?e.nextSibling:e;i.setAttribute("aria-haspopup","true"),i.setAttribute("aria-expanded",e.classList.contains("menu--expanded")?"true":"false")},r=function(t){var e="";if(t.hasAttribute("data-clone-label")?e=t.getAttribute("data-clone-label"):t.closest(".menu").hasAttribute("data-clone-label")&&(e=t.closest(".menu").getAttribute("data-clone-label")),""!==e){var s=t.cloneNode(!0),i=t.parentNode.cloneNode(!1);s.hasAttribute("aria-expanded")&&s.removeAttribute("aria-expanded"),s.hasAttribute("aria-current")&&s.removeAttribute("aria-current"),s.classList.remove("menu__current-parent"),s.classList.add("menu--clone");var r=s.querySelector(".menu__text").innerText;r=r.replace(/\r?\n|\r/g,""),e.indexOf(".")>-1?s.querySelector(".menu__text").innerText=e.replace(/\./,r):s.querySelector(".menu__text").innerText=e,i.appendChild(s),t.parentNode.querySelector(".menu__group > *:first-child").insertAdjacentElement("beforebegin",i)}},n=function(e){t=!0;var s=e.target;if(e.target.closest(".menu")&&!e.target.closest("[aria-haspopup]")){if(!e.target.classList.contains("menu"))return!1;s=e.target.parentNode}e.target.closest(".menu__content[aria-haspopup]")&&e.preventDefault();var i=a(s);if(0!==i.length)for(var r=0;re.target.closest(".menu").parentNode.getBoundingClientRect().right&&e.target.closest("[aria-haspopup]").classList.add("menu__group--boundary"))},a=function(t){if(t.classList.contains("menu__item"))return!1;var e;t.closest(".menu")&&(t.closest(".menu").setAttribute("menu-current",""),"toggle"==t.closest(".menu").getAttribute("data-menu-behaviour")&&(null!==t.closest(".menu__group")&&t.closest(".menu__group").setAttribute("menu-scope",""),null!==t.closest("[aria-haspopup]")&&t.closest("[aria-haspopup]").setAttribute("menu-ignore","")));e=document.querySelectorAll('.menu--dropdown:not([menu-current]) [aria-expanded="true"], .menu--horizontal:not([menu-current]) [aria-expanded="true"], [menu-scope] [aria-expanded="true"]:not([menu-ignore])');try{t.closest(".menu").removeAttribute("menu-current"),t.closest(".menu__group").removeAttribute("menu-scope"),t.closest("[aria-haspopup]").removeAttribute("menu-ignore")}catch(t){}return e};return{init:function(t){t=t||".menu";var s=document.querySelectorAll(t);if(0!==s.length)for(var i=0;i{let e=t.step.closest(".form-steps").getAttribute("data-id"),s="st";e&&(s=e+"-"+s),t.step.setAttribute("id",s+t.i),t.step.closest(".form-steps--hide-previous-fields.form-steps--clickable-legends")&&(t=>{alink=document.createElement("a"),alink.setAttribute("href",t.href);let e=t.step.querySelectorAll(".form-steps__title");if(!e)return!1;alink.innerHTML=e[0].innerHTML;for(let t of e)t.textContent="",t.appendChild(alink.cloneNode(!0))})({step:t.step,href:"#"+s+t.i});let i=t.i+1,r=t.i-1;if(r>=0){let e=t.step.querySelector(".form__step__button-back");e&&e.setAttribute("href","#"+s+r)}if(i{let e=["form-steps__step--complete","form-steps__step--incomplete"],s=0;for(let i of t)i.classList.remove("form-steps__step--complete","form-steps__step--incomplete"),i.classList.contains("form-steps__step--active")?s=1:i.classList.add(e[s])},r=r=>{e++,r.setAttribute("data-id","stb"+e),r.classList.add("js__form-steps");let a,o=r.querySelectorAll(".form-steps__step");if(0!==o){for(const[t,e]of o.entries())s({step:e,i:t,length:o.length});a=window.location.hash&&document.querySelector(window.location.hash)?document.querySelector(window.location.hash):document.querySelector('[data-id="stb'+e+'"] .form-steps__step:first-child'),a.classList.add("form-steps__step--active"),i(o),o[o.length-1].classList.add("form-steps__step--last"),t||(document.addEventListener("click",n),t=!0)}},n=t=>{if(t.target.closest(".form__step__button")||t.target.closest(".form__step__button-back")||t.target.closest(".form-steps__title a")){let e=t.target.closest(".form-steps__step").querySelector("[aria-invalid=true]"),s=t.target.parentNode.querySelector(".form-steps__error");if(e)t.preventDefault(),s.setAttribute("role","alert"),s.querySelector("span").innerHTML=t.target.closest(".form-steps").getAttribute("data-step-error");else{try{s.removeAttribute("role"),s.querySelector("span").innerHTML=""}catch(t){}t.target.closest(".form-steps").querySelector(".form-steps__step--active").classList.remove("form-steps__step--active"),t.target.closest(".form-steps").querySelector(t.target.getAttribute("href")).classList.add("form-steps__step--active");const e=t.target.closest(".form-steps").querySelector(t.target.getAttribute("href"));setTimeout((function(){e.scrollIntoView()}),300),t.x+t.y===0&&(t=>{let e=t.querySelector("input:not([type=hidden]), textarea, select, button");e&&setTimeout((()=>{e.contentEditable=!0,e.focus(),e.contentEditable=!1}),300)})(t.target.closest(".form-steps").querySelector(t.target.getAttribute("href")));let r=t.target.closest(".form-steps").querySelectorAll(".form-steps__step");i(r)}}};return{init:t=>{t=t||".form-steps";let e=document.querySelectorAll(t);if(0!==e.length)for(let t of e)r(t)},form_steps:r}}(),help_toggle=function(){var t=function(t){t&&(t.tagName||(t=document.querySelector(t)),t&&t.addEventListener("click",(function(t){"false"==t.target.getAttribute("aria-expanded")?t.target.setAttribute("aria-expanded",!0):t.target.setAttribute("aria-expanded",!1),t.target.parentElement.classList.toggle("form__help-text--open"),t.preventDefault()}),!1))};return{init:function(e){var s;for(s=e?document.querySelectorAll(e):document.querySelectorAll(".form__help-toggle"),i=0;i0?(t.setAttribute("size",e),t.classList.remove("multilist__list--empty")):(t.setAttribute("size",1),t.classList.add("multilist__list--empty"))},u=function(t,e){var s=t.target.closest(".form__multilist").querySelector(".multilist__field"),r=s.value.split(" ");r.pop(),r.push(e),s.value=r.join(" ")+" ";var n=t.target.closest(".form__multilist").querySelectorAll(".hide");for(i=0;i{this.setAttribute("state",t.getAttribute("toggled"))}),this.event_items=[],this.event_items.push({ev:"click",el:t.querySelector(".button"),fn:this.toggle_state})}__add_aria(){const t=document.createElement("span");t.classList.add("visually-hidden"),t.setAttribute("aria-live","polite"),this.append(t)}__change_state(){this.querySelector("input").setAttribute("type",["password","text"][this.getAttribute("state")]),this.querySelector("blinky-toggle-button").setAttribute("toggled",this.getAttribute("state"))}__update_aria(){this.querySelector("[aria-live]").innerText=this.aria_text[this.getAttribute("state")]}__submit_pass(){if("0"===(this.getAttribute("submit-pass")||"0")){const t=this.closest("form");t&&(t.addEventListener("submit",this.submit_form=t=>{this.setAttribute("state","0")}),this.event_items.push({ev:"submit",el:t,fn:this.submit_form}))}}connectedCallback(){this.__add_toggle(),this.__add_aria(),this.aria_text=[],this.aria_text.push(this.getAttribute("aria-0")||"Your field content is hidden from view."),this.aria_text.push(this.getAttribute("aria-1")||"Your field content is being displayed in plain text."),this.hasAttribute("state")||this.setAttribute("state","0"),this.__change_state(),"1"===this.getAttribute("state")&&this.__update_aria(),this.classList.add("js__form__obfuscated"),this.__submit_pass()}disconnectedCallback(){for(let t of this.event_items)t.el.removeEventListener(t.ev,t.fn)}attributeChangedCallback(t,e,s){if(!this.classList.contains("js__form__obfuscated")||e===s)return!1;"state"===t&&(this.__change_state(),this.__update_aria())}}customElements.define("blinky-obfuscated-field",BlinkyObfuscatedField);var switch_toggle=function(){var t=!1,e=function(e){e.classList.add("js__form__switch"),t||(document.addEventListener("click",s),t=!0)},s=function(t){if(!t.target.closest(".js__form__switch"))return!1;switched="true"===t.target.getAttribute("aria-pressed"),t.target.setAttribute("aria-pressed",String(!switched))};return{init:function(t){t=t||".form__switch";var s=document.querySelectorAll(t);if(0!==s.length)for(var i=0;i .children").id?this.querySelector(":scope > .children").id:t.id?"connection-"+t.id:"connection-"+Date.now(),t.setAttribute("aria-controls",e),this.querySelector(":scope > .children").id=e}__update_aria_expanded(){this.querySelector(":scope > .children").setAttribute("aria-expanded",this.getAttribute("expanded")),this.__toggle(),this.__set_disabled_attribute()}__set_disabled_attribute(){let t=this.querySelectorAll("\n\t\t\t\t:scope .children input:not([type=submit]),\n\t\t\t\t:scope .children textarea,\n\t\t\t\t:scope .children select\n\t\t\t"),e=this.querySelectorAll("\n\t\t\t\t:scope .children .children input:not([type=submit]),\n\t\t\t\t:scope .children .children textarea,\n\t\t\t\t:scope .children .children select\n\t\t\t"),s=Array.from(e),i=this.getAttribute("expanded");for(let e of t)s.includes(e)||("true"==i?e.removeAttribute("disabled"):e.setAttribute("disabled","disabled"))}__toggle(){const t=this.querySelectorAll(":scope blinky-child-fields");if("false"===this.getAttribute("expanded")){if(t.length>0)for(let e of t)e.setAttribute("expanded","false")}else if(t.length>0)for(let e of t){const t=e.querySelector(":scope .js__parent");if(t&&t.checked){const t=e.parentNode.closest("blinky-child-fields");t&&"true"==t.getAttribute("expanded")&&e.setAttribute("expanded","true")}}}connectedCallback(){const t=this.querySelector(':scope > input[type="radio"], :scope > input[type="checkbox"]');if(!t)return!1;if(!this.querySelector("\n\t\t\t\t:scope > .children input,\n\t\t\t\t:scope > .children textarea,\n\t\t\t\t:scope > .children select"))return!1;this.__add_connection(t);const e=this.querySelector(":scope > .children");e.setAttribute("aria-expanded","false"),this.setAttribute("expanded","false"),t.classList.add("js__parent"),this.classList.add("js__form__child-fields"),e.classList.add("form__child-fields");const s=document.createElement("span");if(s.classList.add("form__child-fields__inner"),Blinky_wrap_content({el:e,wrapper:s}),this.event_items=[],"radio"===t.type){const s=document.querySelectorAll('input[type="radio"][name="'+t.getAttribute("name")+'"]');for(let t of s)t.addEventListener("change",this.untoggle_children=t=>{this.setAttribute("expanded","false"),e.setAttribute("aria-expanded","false")}),this.event_items.push({ev:"change",el:t,fn:this.untoggle_children})}t.addEventListener("change",this.toggle_children=t=>{this.setAttribute("expanded",t.target.checked?"true":"false"),e.setAttribute("aria-expanded",t.target.checked?"true":"false")}),this.event_items.push({ev:"change",el:t,fn:this.toggle_children}),this.__update_aria_expanded(),t.getAttribute("checked")&&(e.setAttribute("aria-expanded","true"),this.setAttribute("expanded","true"))}disconnectedCallback(){for(let t of this.event_items)t.el.removeEventListener(t.ev,t.fn)}attributeChangedCallback(t,e,s){if(!this.classList.contains("js__form__child-fields")||e===s)return!1;"expanded"===t&&this.__update_aria_expanded()}}customElements.define("blinky-child-fields",BlinkyChildFields);var fieldset_group=function(){var t=function(t){t&&t.selector&&(null==t.clear_hidden&&(t.clear_hidden="false"),t.selector.classList.contains("js__fieldset-group")||(t.selector.classList.add("js__fieldset-group"),t.selector.setAttribute("data-clear-hidden",t.clear_hidden),document.addEventListener("change",e),e({target:t.selector.querySelector('input[checked="checked"]')})))},e=function(t){if(t.target.closest(".js__fieldset-group")&&null!==t.target.getAttribute("aria-controls")&&t.target.hasAttribute("aria-controls")&&t.target.closest(".fieldset-group").classList.contains("js__fieldset-group")){var e=t.target.getAttribute("aria-controls"),s="";t.target.closest(".js__fieldset-group").querySelector('[aria-expanded="true"]')&&(s=t.target.closest(".js__fieldset-group").querySelector('[aria-expanded="true"]').id),e!==s&&"true"==t.target.closest(".js__fieldset-group").getAttribute("data-clear-hidden")&&function(t){if(t){var e=t.querySelectorAll("input:not([type=submit]), textarea, select");if(0!==e.length){for(var s=0;s0)for(var r=0;r0)for(i=0;i '+t.files[i].name+"";t.nextSibling.nextSibling.innerHTML=e},e=function(e){if(e){e.tagName||(e=document.querySelector(e)),file_list=document.createElement("span"),file_list.setAttribute("class","form__file__name"),e.parentNode.insertBefore(file_list,e.nextSibling),drag=document.createElement("span"),drag.setAttribute("class","form__file__drag"),drag.innerHTML="Drag file",null!==e.getAttribute("multiple")&&(drag.innerHTML+="s"),drag.innerHTML+=' here to upload or Browse to upload',e.parentNode.insertBefore(drag,e.nextSibling),function t(){drag.offsetHeight?e.setAttribute("style","height: "+drag.offsetHeight+"px; width: "+drag.offsetWidth+"px"):window.requestAnimationFrame(t)}(),e.addEventListener("change",(function(){t(e)}),!0);var s=0;e.addEventListener("dragenter",(function(){s++,e.classList.add("form__file__drag-active")}),!0),e.addEventListener("dragleave",(function(){!function(t){0==--s&&t.classList.remove("form__file__drag-active")}(e)}),!0),e.addEventListener("drop",(function(){!function(t){s=0,t.classList.remove("form__file__drag-active")}(e)}),!0),t(e)}};return{init:function(t){var s;for(s=t?document.querySelectorAll(t):document.querySelectorAll(".form__file"),i=0;i{this.dispatchEvent(new CustomEvent("progressBarFull",{bubbles:!0,el:this}))}),this.animation_speed)}}attributeChangedCallback(t,e,s){this.getAttribute("data-init")||this.connectedCallback(),"circle"!=("circle"==this.getAttribute("b-type")?"circle":"line")&&this.__update_value(t,e,s)}}customElements.define("blinky-progress",BlinkyProgress);var blinky_progress={add:function(t){if(!t.el)return!1;let e=document.createElement("blinky-progress");e.setAttribute("class","progress");let s=document.createElement("progress");e.appendChild(s),"BUTTON"!=t.el.tagName&&"LI"!=t.el.tagName||(t.type="line"),t.type&&e.setAttribute("b-type",t.type),t.value&&e.setAttribute("b-value",t.value),t.max&&e.setAttribute("b-max",t.max),t.id&&e.setAttribute("id",t.id),t.label&&s.setAttribute("aria-label",t.label),t.el.append(e)},remove:function(t){if(!t.el)return!1;t.el.remove()}},theme_switcher_template=document.createElement("template");theme_switcher_template.innerHTML='\n\t\n\t\n\t\t\n\t\t\t \n\t\t\t \n\t\t\t \n\t\t\t \n\t\t \n\t\t\n\t\t\n\t\t\t\n\t\t\t\t \n\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t\t\t \n\t\t\t \n\t\t \n\t \n';class ThemeSwitcher extends HTMLElement{connectedCallback(){this.innerHTML=theme_switcher_template.innerHTML;var t;try{t=JSON.parse(this.attributes.settings.value)[0]}catch(t){}t=Object.assign({default_theme:"light",title:"Choose Theme",light:"Light",system:"Follow System",dark:"Dark",display_label:"true",h_align:"left",v_align:"down"},t);var e=this.querySelectorAll("button");if(e)for(var s=0;e.length>s;s++)e[s].classList.contains("theme-switch__chooser")?"false"===t.display_label&&e[s].querySelector(".button__text").classList.add("visually-hidden"):e[s].setAttribute("aria-pressed","false");this.add_class(this.get_cookie("theme_setting",t.default_theme)||"theme--"+t.default_theme),this.querySelector(".theme-switch").classList.add("theme-switch--"+t.h_align,"theme-switch--"+t.v_align),this.querySelector('.theme-switcher__options [data-id="'+(this.get_cookie("theme_setting",t.default_theme)||"theme--"+t.default_theme)+'"]').setAttribute("aria-pressed","true"),this.querySelector(".theme-switch__chooser .button__text").innerHTML=t.title,this.querySelector('[data-id="theme--light"] .button__text').innerHTML=t.light,this.querySelector('[data-id="theme--system"] .button__text').innerHTML=t.system,this.querySelector('[data-id="theme--dark"] .button__text').innerHTML=t.dark,this.querySelector(".theme-switch__chooser").setAttribute("data-theme",this.get_cookie("theme_setting",t.default_theme)||"theme--"+t.default_theme),document.addEventListener("click",this,!0)}handleEvent(t){"click"===t.type&&(t.target.closest(".theme-switch")?t.target.classList.contains("theme-switch__chooser")?this.chooser(t):this.action(t):this.close_chooser(t))}close_chooser(t){document.querySelector(".theme-switch__chooser").setAttribute("aria-expanded","false")}chooser(t){t.target.setAttribute("aria-expanded","true"===t.target.getAttribute("aria-expanded")?"false":"true")}add_class(t){document.querySelector("body").classList.remove("theme--light","theme--dark","theme--system"),document.querySelector("body").classList.add(t)}get_cookie(t,e){var s=document.cookie.match("(^|;) ?"+t+"=([^;]*)(;|$)");return s?s[2]:null}set_cookie(t,e,s){var i=new Date;i.setTime(i.getTime()+864e5*s),document.cookie=t+"="+e+";path=/;expires="+i.toGMTString()}action(t){this.set_cookie("theme_setting",t.target.dataset.id,3650),this.add_class(t.target.dataset.id),t.target.closest(".theme-switch").querySelector('[aria-pressed="true"]').setAttribute("aria-pressed","false"),t.target.setAttribute("aria-pressed","true"),t.target.closest(".theme-switch").querySelector(".theme-switch__chooser").setAttribute("data-theme",t.target.dataset.id),t.target.closest(".theme-switch").querySelector(".theme-switch__chooser").setAttribute("aria-expanded","false")}}customElements.define("theme-switch",ThemeSwitcher);
\ No newline at end of file
From ef7160c4c48d5ae021a22e8120dee4be2f8dd23e Mon Sep 17 00:00:00 2001
From: Di Turner
Date: Thu, 21 Nov 2024 14:15:04 +0000
Subject: [PATCH 3/5] DS-252 Added some styling for smaller screens to handle
the header and footer content.
This can't be done in Blinky as it's dependant on actual amounts of
content. If the window is less than 700 pixels wide the content in the
header and footer shift to stacked and centred.
---
.../src/main/webapp/ui-starter/styles.css | 20 +++++++++++++++++++
1 file changed, 20 insertions(+)
diff --git a/starter-ui/src/main/webapp/ui-starter/styles.css b/starter-ui/src/main/webapp/ui-starter/styles.css
index 95e0563..c7c0028 100644
--- a/starter-ui/src/main/webapp/ui-starter/styles.css
+++ b/starter-ui/src/main/webapp/ui-starter/styles.css
@@ -32,4 +32,24 @@
color: rgb(255,255,255);
overflow: hidden;
padding-bottom: var(--gutter);
+}
+
+/* Content driven layout shift on smaller screens, can't be part of
+ Blinky as that is content agnostic, has to happen on a project level. */
+/* At 700px ish stack the header and footer contents. */
+@media only screen and (max-width: 44rem) {
+ .page__header .cards,
+ .page__footer .cards {
+ flex-direction: column;
+ align-items: center;
+ }
+ .page__header .cards > *,
+ .page__footer .cards > * {
+ flex: 0 0 auto;
+ }
+}
+
+/* This kills page scolling when the Diagram Builder popup is open. */
+.page:has(.modal[style*="block"]) {
+ overflow: hidden;
}
\ No newline at end of file
From cb5ce4d52b1cb58b706933b94037c3b589d9b20c Mon Sep 17 00:00:00 2001
From: Di Turner
Date: Thu, 21 Nov 2024 14:23:08 +0000
Subject: [PATCH 4/5] DS-252 fixes and improvements to page.
Moved the diegram designer CSS into the head as it breaks validation to
put it in the footer.
Added a fix to ensure the diagram popup opens above the page header.
Removed the self closing /'s on BRs and INPUTSs.
Moved the copyright notice HTML comment because it's so long it cuases a
validation error that the meta charset is outside the first 1024 bytes.
Swapped the H2 content to a P with H2 styling as it isn't actually a
title, we just want larger text.
Removed the theme selector and forced light theme, this is a temporary
quick fix for the diagram designer not working with Blinky styles.
---
starter-ui/src/main/webapp/index.html | 402 +++++++++++++-------------
1 file changed, 199 insertions(+), 203 deletions(-)
diff --git a/starter-ui/src/main/webapp/index.html b/starter-ui/src/main/webapp/index.html
index 14530e1..b85861c 100644
--- a/starter-ui/src/main/webapp/index.html
+++ b/starter-ui/src/main/webapp/index.html
@@ -1,44 +1,44 @@
-
+
Generate Payara Application
@@ -78,6 +78,102 @@
+
+
@@ -139,19 +235,19 @@
Payara Starter
Payara Starter is a source code generator to create new Payara Server or Payara Micro projects. It allows you to quickly and easily start with Payara Platform!
Take advantage of customisation options: select your chosen JDK versions, Jakarta EE profiles, build tools, Docker support, and more. Payara Starter will also streamline your project by integrating with popular IDEs.
- Simply select your options, and click ‘Generate’ - and Payara Platform is ready to use.
+ Simply select your options, and click ‘Generate’ - and Payara Platform is ready to use.
-
+
-
-
- ER Diagram Designer
- ER Diagram Designer
-
-
-
-
-
-
-
-
-
+
+ ER Diagram Designer
+ ER Diagram Designer
+
+
+
+
+
+
+
+
+
Security Configuration
@@ -554,9 +650,6 @@ Simply select your options, and click ‘Generate’ - and Payara Pl