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: -

- - - - -
+ + + +
-
- - - - -
+ + + +
-
- - - - -
+ + + +
-
-

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"):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';"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\n\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