/*! #region --------------------------------------- VARIABLES 00__variables.css */

/* :root has higher specificity than html */

:root {
  /*! brand color */
  --color-brand-95: hsl(345deg 100% 95%);
  --color-brand-90: hsl(345deg 100% 90%);
  --color-brand-50: hsl(345deg 100% 50%);
  --color-brand: hsl(345deg 100% 40%);
  --color-brand-35: hsl(345deg 100% 35%);
  --color-brand-30: hsl(345deg 100% 30%);
  --color-brand-20: hsl(345deg 100% 20%);
  --color-brand-10: hsl(345deg 100% 10%);
  --color-brand-lightest: hsl(345deg 100% 95%);
  --color-brand-light: hsl(345deg 100% 50%);
  --color-brand-dark: hsl(345deg 100% 35%);
  --color-brand-darker: hsl(345deg 100% 30%);
  --color-brand-darkest: hsl(345deg 100% 20%);

  /*! accent color */
  --color-accent-95: hsl(196deg 90% 95%);
  --color-accent-90: hsl(196deg 90% 90%);
  --color-accent-40: hsl(196deg 100% 40%);
  --color-accent: hsl(196deg 100% 32%);
  --color-accent-30: hsl(196deg 90% 30%);
  --color-accent-20: hsl(196deg 90% 20%);
  --color-accent-10: hsl(196deg 100% 10%);
  --color-accent-lightest: hsl(196deg 90% 95%);
  --color-accent-lighter: hsl(196deg 90% 90%);
  --color-accent-light: hsl(196deg 100% 40%);
  --color-accent-dark: hsl(196deg 100% 30%);
  --color-accent-darker: hsl(196deg 90% 20%);
  --color-accent-darkest: hsl(196deg 100% 10%);

  /*! neutrals */
  --color-white: hsl(0deg 0% 100%);
  --color-gray-light: hsl(0deg 0% 95%);
  --color-gray-95: hsl(0deg 0% 95%);
  --color-gray-85: hsl(0deg 0% 85%);
  --color-gray-medium: hsl(0deg 0% 50%);
  --color-gray-50: hsl(0deg 0% 50%);
  --color-gray-dark: hsl(0deg 0% 30%);
  --color-gray-30: hsl(0deg 0% 30%);
  --color-black: hsl(0deg 0% 0%);
  --color-000: hsl(0deg 0% 0%);
  --color-010: hsl(0deg 0% 10%);
  --color-020: hsl(0deg 0% 20%);
  --color-030: hsl(0deg 0% 30%);
  --color-040: hsl(0deg 0% 40%);
  --color-050: hsl(0deg 0% 50%);
  --color-060: hsl(0deg 0% 60%);
  --color-070: hsl(0deg 0% 70%);
  --color-080: hsl(0deg 15% 85%);
  --color-090: hsl(0deg 0% 90%);
  --color-095: hsl(0deg 0% 95%);
  --color-100: hsl(0deg 0% 100%);

  /*! supporting (for example, messages) */
  --color-success-50: hsl(83deg 85% 50%);
  --color-success-90: hsl(83deg 100% 90%);
  --color-warning-50: hsl(47deg 90% 50%);
  --color-warning-90: hsl(47deg 100% 90%);

  /*! sizes */
  --size-1: 0.0625rem;
  --size-2: 0.125rem;
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-10: 0.625rem;
  --size-12: 0.75rem;
  --size-14: 0.875rem;
  --size-16: 1rem;
  --size-18: 1.125rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-40: 2.5rem;
  --size-48: 3rem;
  --size-56: 3.5rem;
  --size-64: 4rem;

  /*! spacing */
  --p: 0;
  --pt: 0;
  --pr: 0;
  --pb: 0;
  --pl: 0;
  --px: 0;
  --py: 0;
  --m: 0;
  --mt: 0;
  --mr: 0;
  --mb: 0;
  --ml: 0;
  --mx: 0;
  --my: 0;

  /*! fonts */
  --font-serif: "Newsreader", serif;
  --font-sans-serif: "Open Sans", sans-serif;
  --font-monospace: monospace, monospace;
  --font-size-xs: var(--size-14, 0.875rem);

  /* 14 */
  --font-size-base: var(--size-16, 1rem);

  /* 16 */
  --font-size-s: var(--size-18, 1.125rem);

  /* 18 */
  --font-size-m: var(--size-20, 1.25rem);

  /* 20 */
  --font-size-l: var(--size-24, 1.5rem);

  /* 24 */
  --font-size-xl: var(--size-32, 2rem);

  /* 32 */
  --font-size-xxl: var(--size-40, 2.5rem);

  /* 40 */
  --font-size-xxxl: var(--size-48, 3rem);

  /* 48 */

  /*! svg icons */
  --svg-required: url('data:image/svg+xml,<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23c03" d="M110.1,16.4L75.8,56.8l0.3,1l50.6-10.2v32.2l-50.9-8.9l-0.3,1l34.7,39.1l-28.3,16.5L63.7,78.2L63,78.5 l-18.5,49L17.2,111l34.1-39.8v-0.6l-50,9.2V47.6l49.3,9.9l0.3-0.6L17.2,16.7L45.5,0.5l17.8,48.7H64L82.1,0.5L110.1,16.4z" /></svg>');
  --svg-caret-accent: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z" fill="%23007fac" /></svg>');
  --svg-caret-black: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z" fill="%23000" /></svg>');
}

/*! #endregion */

/*! #region --------------------------------------- RESET | BASE 01__reset.css */

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  --csstools-color-scheme--light: initial;
  color-scheme: light dark;
  font:
    normal 400 16px/1 Arial,
    Helvetica,
    Verdana,
    sans-serif;

  /*! force scrollbar even on short pages to prevent layout jump on navigation to long pages */
  overflow-y: scroll;
}

@media (prefers-color-scheme: dark) {
  html {
    --csstools-color-scheme--light:  ;
  }
}

body {
  background-color: hsl(0deg 0% 95%);
  background-color: var(--color-gray-light);
  border: 0;
  color: hsl(0deg 0% 0%);
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 767px) {
  body {
    background-color: hsl(0deg 0% 100%);
    background-color: var(--color-white);
  }
}

p {
  line-height: 1.5;

  /*! top margin to avoid margin collapsing issues */
  margin-top: 1.5rem;
}

p:first-child,
p:first-child:last-child {
  margin-top: 0;
}

q {
  quotes: none;
}

/*! remove the marker arrow from all details */

summary {
  list-style: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

summary:hover {
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: none;
}

summary::before {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z" fill="%23007fac" /></svg>');
  background-image: var(--svg-caret-accent);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  content: "";
  display: inline-flex;
  height: 1.5em;
  min-width: 1.5em;
  transform: rotate(0deg);
  transform: rotate(var(--rotate, 0deg));
  transition: all 0.3s;
}

[open] summary::before {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z" fill="%23000" /></svg>');
  background-image: var(--svg-caret-black);
  transform: rotate(0);
}

canvas,
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

/*! #endregion */

/*! #region --------------------------------------- headings */

h1,
h2,
h3 {
  margin: 1rem 0;
}

.content__heading {
  font-size: 1.5rem;
}

.h {
  margin-top: max(1rem, calc((1em - 1rem) / 2));
}

.h + * {
  margin-top: 1rem;
}

* > .h:first-child {
  margin-top: 0;
}

/*! #endregion */

/*! #region --------------------------------------- LINKS 03__links.css */

a,
a:visited {
  --b-color: hsl(196deg 100% 34% / 0.25);
  --t-color: hsl(196deg 100% 30%);
  color: hsl(196deg 100% 30%);
  color: var(--t-color);
  font-weight: 700;
  outline: 0;
  padding: 3px 0 2px;
  text-decoration-color: hsl(196deg 100% 34% / 0.25);
  text-decoration-color: var(--b-color);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0.125em;
}

a:active,
a:focus,
a:focus-visible,
a:hover {
  --b-color: hsl(345deg 100% 35% / 0.25);
  --t-color: hsl(345deg 100% 35%);
  text-decoration-style: solid;
}

a:focus {
  outline-color: transparent;
}

:focus-visible {
  outline: 2px dashed hsl(345deg 100% 40%) !important;
  outline: 2px dashed var(--color-brand) !important;
  outline-offset: 2px;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: none !important;
}

/* :focus {
    outline: 2px dashed var(--color-brand) !important;
    outline-offset: 2px;
}  */

[target="_blank"]:focus-visible,
[target="_blank"]:hover {
  outline: 0;
  position: relative;
}

[rel="help"]::after,
[target="_blank"]::after {
  border-color: transparent currentColor transparent transparent;
  border-style: solid;
  border-width: 0 0.5rem 0.5rem 0;
  content: "\00a0";
  display: inline-block;
  height: 0;
  opacity: 0.5;
  position: relative;
  right: 0;
  top: 0;
  transform: none;
  transition: opacity 0.3s;
  width: 0;
}

[rel="help"]:hover::after,
[target="_blank"]:hover::after {
  opacity: 1;
  right: -0.125rem;
  top: -0.125rem;
}

/*! #endregion */

/*! #region --------------------------------------- lists */

ul {
  padding: 0 0 0 2.5rem;
}

ul li {
  line-height: 1.5;
}

.dl--horizontal > dd,
.dl--horizontal > dt {
  display: inline;
}

.dl--horizontal > dt {
  font-weight: 600;
}

.dl--horizontal > dt::after {
  content: ": ";
}

.dl--horizontal > dd {
  color: #444;
}

.dl--horizontal > dd + dd::before {
  content: ", ";
  display: inline;
  margin-left: -0.25em;
}

.dl--horizontal > dd + dt::before {
  content: "\A";
  white-space: pre;
}

/*! #endregion */

/*! #region --------------------------------------- faq q & a */

.faqs {
  display: flow-root;
  list-style: none;
  margin: 0;
  padding: 0;
}

.faqs__item {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.faqs__item + .faqs__item {
  border-top: 1px dashed #ddd;
}

.faq {
  transition: 0.5s;
}

[open].faq {
  margin-bottom: 1rem;
  margin-top: 1rem;
  position: relative;
}

[open].faq::before {
  border-right: 1px dashed hsl(0deg 0% 85%);
  border-right: 1px dashed var(--color-gray-85);
  bottom: 0;
  content: "";
  left: calc(0.75rem - 1px);
  position: absolute;
  top: 2rem;
  width: 1px;
}

.faq__q {
  background-color: transparent;
  color: var(--color-accent);
  color: var(--color-accent);
  cursor: pointer;
  display: inline-flex;
  font-weight: 400;
  outline-color: transparent;
  position: relative;
  transition: 0.3s;
  width: -moz-fit-content;
  width: fit-content;
}

.faq__q::before {
  margin: 0.5rem 0;
  position: relative;
  /* top: -1px; */
}

.faq__q:hover::before {
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z" fill="%23000" /></svg>');
}

[open] .faq__q {
  color: hsl(0deg 0% 0%);
  color: var(--color-black);
}

.faq__q span {
  display: inline-block;
  padding: 0.5rem;
  position: relative;
}

.faq__q:focus-visible,
.faq__q:hover {
  color: hsl(0deg 0% 0%);
  color: var(--color-black);
}

.faq__a {
  margin: 0 0 0 0.75rem;
  opacity: 0;
  padding: 0 1rem;
  transition: 0.5s;
}

[open] .faq__a {
  opacity: 1;
  padding: 1.5rem;
  transition: 0.5s;
}

/*! #endregion */

/*! #region --------------------------------------- LAYOUT 06__layout.css */

.content {
  clear: both;
  margin: 0 1.5rem 2rem;
  padding: 1rem 0;
}

.footer {
  align-items: center;
  background-color: hsl(0deg 0% 97%);
  /* border-top: 1px solid #ccc; */
  color: #555;
  display: flex;
  /* box-shadow: inset 0 8px 8px -8px hsl(0deg 0% 0% / .2); */
  margin-top: auto;
  padding: 1.5rem;
  position: relative;
}

@media (max-width: 767px) {
  .footer {
    flex-direction: column;
    text-align: center;
  }
}

.footer__logo {
  height: 100%;
  min-height: 32px;
}

a.footer__logo-link {
  border: 0;
}

.footer p {
  margin: 0;
  padding: 1.5rem 0 1.5rem 1.5rem;
}

/*! #endregion */

.row--grid {
  display: grid;
  gap: 1rem 1.5rem;
  grid-gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 767px) {
  .row--grid {
    grid-template-columns: none;
  }
}

/* @media (min-width: 767px) {
    .span-2 {
        grid-column: auto / span 2;
        box-shadow: 10px 10px 30px rgba(0, 0, 0, .1);
    }
} */

.row--short {
  max-width: calc(33% - 0.75rem);
  min-width: 264px;
  /* max-width: 33%; */
}

.row--medium {
  /* min-width: 264px; */
  max-width: 66%;
}

.column {
  align-self: self-end;
  flex: 1 1 0;
  min-width: 264px;
}

@media (max-width: 767px) {
  .row {
    padding: 0;
  }

  .row--flex {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .row--btn {
    margin-top: 1em;
    padding: 2em 0;
    text-align: center;
  }

  .row--flex label {
    width: 100% !important;
    /* margin: 1rem 0 0; */
  }

  .row--short,
  .row--medium {
    max-width: 100%;
    min-width: 0;
  }
}

/*! #region ----- stack - https: //every-layout.dev/layouts/stack/ */

[class^="stack"] > * {
  margin-bottom: 0;
  /* reset top and bottom margins */
  margin-top: 0;
}

.stack > * + * {
  /* margin-top: 1.5rem; */
  margin-top: 1.5rem;
  margin-top: var(--space, 1.5rem);
}

.stack-small,
X.stack-small > * + * {
  --space: 0.5rem;
}

.stack-medium,
X.stack-medium > * + * {
  --space: 1rem;
}

.stack-large,
X.stack-large > * + * {
  --space: 3rem;
}

.stack-exception,
.stack-exception + * {
  --space: 2rem;
}

/*! #endregion */

/* .item:first-child { */

/* margin-top: 0; */

/* } */

/* .item:not(:first-child) { */

/* margin-top: 1em; */

/* } */

/*! #region --------------------------------------- SITE HEADER 07__header.css */

.SiteHeader {
  align-items: center;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.Branding {
  /* overflow: hidden; */
  margin: 0;
  padding: 2rem 0 2rem clamp(5.25rem, 3.917rem + 2.083vw, 6rem);
  position: relative;
}

/*! vertical divider */

.Branding::before {
  background-color: hsl(0deg 0% 0% / 0.15);
  content: "";
  height: calc(100% - 4rem);
  position: absolute;
  width: 1px;
  z-index: 1;
}

/*! subtle rounded shadow */

/*! .Branding::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 80%;
    top: -10px;
    height: 10px;
    left: 10%;
    border-radius: 50%;
    box-shadow: 0 0 18px hsl(0deg 0% 0% / 0.5);
} */

@media (max-width: 767px) {
  .Branding {
    padding: 1rem 0 1rem clamp(4.875rem, 2.875rem + 3.125vw, 6rem);
  }

  .Branding::before {
    height: calc(100% - 2rem);
  }
}

.Branding__logo,
.Branding__logo:visited {
  border: 0;
  bottom: 2rem;
  left: 1.5rem;
  padding: 0;
  position: absolute !important;
  right: 1rem;
  top: 2rem;
  /* overflow: hidden; */
  width: -moz-max-content;
  width: max-content;
  z-index: 1;
}

.Branding__logo > svg {
  height: 100%;
  max-height: 3rem;
  width: auto;
}

.Branding__logo:focus,
.Branding__logo:hover {
  outline: #c03 dashed 2px;
  outline-offset: 8px;
}

/*! <div> container for unit breadcrumb and site name */

.Branding__org {
  align-items: flex-start;
  color: rgba(255, 255, 255, 0.5);
  /*! automatically v-center site name if school/dept is omitted */
  display: flex;
  flex-flow: column;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .Branding__logo {
    bottom: 1rem;
    left: 1rem;
    top: 1rem;
  }

  .Branding__logo > svg {
    height: 100%;
    max-height: 2.5rem;
  }

  .Branding__org {
    padding: 0 4.25rem 0 1rem;
  }
}

.Branding__orgBreadcrumb {
  margin-left: 0.125rem;
}

/*! @media (max-width: 479px) { */

@media (max-width: 400px) {
  .Branding__orgBreadcrumb {
    display: none;
  }
}

.Branding__orgParentUnit,
.Branding__orgParentUnit:visited {
  border: 0;
  color: rgba(0, 0, 0, 0.65);
  display: block;
  font-family: ff-meta-web-pro, sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.025em;
  /*! reduce font size to diminish importance and allow for space to nudge away from site name */
  line-height: 1rem;
  padding: 0;
  -webkit-text-decoration: none;
  text-decoration: none;
  text-transform: uppercase;
}

.Branding__orgParentUnit:focus,
.Branding__orgParentUnit:hover {
  color: #000;
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/*! Not used
.Branding__orgParentUnit abbr {
    text-decoration: none;
}

.Branding__orgParentUnit:first-child::before {
    content: "";
}

.Branding__orgParentUnit::before {
    content: "/ ";
    opacity: 0.5;
    position: absolute;
    left: 0;
}
*/

.Branding__orgName,
.Branding__orgName:visited {
  border: none;
  color: #c03;
  display: block;
  font-family: ff-meta-web-pro, sans-serif;
  /*! clamp should take into account min and max viewport width */
  font-size: clamp(1.25rem, -0.0833rem + 2.0833vw, 2rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  opacity: 1;
  padding: 0;
  position: relative;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.Branding__orgName:focus,
.Branding__orgName:hover {
  color: hsl(345deg 100% 40%);
  color: var(--color-brand);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-decoration-color: var(--b-color);
}

@media (max-width: 767px) {
  .Branding__orgName {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .Branding__orgName {
    white-space: nowrap;
  }
}

/*! #endregion  */

/*! #region --------------------------------------- NAVIGATION 08__navigation.css */

@media (max-width: 767px) {
  .Nav--utilities {
    display: none;
  }
}

.Utilities__list {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  list-style: none;
  margin: 0 1.5rem;
  padding: 0;
}

.Utilities__item {
  font-size: 0.875rem;
  padding: 0 0.25rem;
  text-align: right;
}

.Utilities__userRole {
  display: block;
  white-space: nowrap;
}

.Menu__userRoleLink,
.Utilities__userRoleLink {
  background: #eee;
  border: 0;
  border-radius: 0.25rem 0 0 0.25rem !important;
  border-right: 1px solid #ccc !important;
  line-height: 1rem;
  margin: 0;
  padding: 0.25rem 0.5rem;
}

.Menu__userRoleCurrent,
.Utilities__userRoleCurrent {
  background: #eee;
  border-radius: 0 0.25rem 0.25rem 0;
  display: inline-block;
  font-weight: 400;
  line-height: 1rem;
  margin: 0;
  padding: 0.25rem 0.5rem;
}

.logout {
  align-items: center;
  background-color: #eee;
  border: 2px solid #eee;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  line-height: 1rem;
  padding: 0.875rem 1rem;
  white-space: nowrap;
}

.logout::after {
  /* content: " \2192"; */
  content: "\00a0\0203A";
  display: inline-block;
  font-size: 1.25rem;
  line-height: calc(16 / 20);
  max-width: 0;
  overflow: hidden;
  position: relative;
  top: -1px;
  transition:
    max-width 0.3s,
    margin-left 0.3s;
}

.logout:hover::after,
.logout:focus::after {
  margin-left: 0.5rem;
  max-width: 1rem;
}

/*! #endregion */

/*! #region --------------------------------------- NAV MOBILE 09__navigation--mobile.css */

.Nav--mobile {
  display: none;
}

@media (max-width: 767px) {
  .Nav--mobile {
    display: block;
    position: fixed;
    right: 1rem;
    top: 1rem;
    z-index: 10;
  }

  .Menu {
    background-color: #fff;
    /* border-radius: 4px; */
    border-radius: 0.25rem;
    box-shadow: 0 0 0 1px #eee;
    display: block;
    max-width: 300px;
    padding: 0;
  }

  .Menu:hover,
  .Menu:focus {
    box-shadow: 0 0 0 2px var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent);
  }

  .Menu[open] {
    /* filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, .5)); */
    border-radius: 0.5rem;
    /* box-shadow: 0 0 0 1px #eee, 0 3px 5px hsl(0deg 0% 0% / 0.15); */
    /* box-shadow: 0 0 0 1px #eee, 0 3px 5px hsl(0deg 0% 0% / 0.15); */
    /* box-shadow: 0 0 0 8px hsl(196deg 100% 34% / .15), 0 5px 8px hsl(0deg 0% 0% / 0.5); */
    box-shadow: 0 5px 8px hsl(0deg 0% 0% / 0.2);
    overscroll-behavior: contain;
  }

  .Menu[open] * {
    border-radius: 0.25rem;
  }

  .Menu__toggle {
    align-items: center;
    background-color: hsl(0deg 0% 97%);
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    /* padding: .5rem .75rem; */
    padding: 0.5rem;
    position: relative;
    text-align: right;
    text-transform: uppercase;
  }

  .Menu__toggle::before {
    content: none;
  }

  .Menu__toggle:hover {
    /* background-color: var(--color-accent); */
    color: var(--color-accent);
    color: var(--color-accent);
  }

  .Menu[open] .Menu__toggle {
    border-bottom: 1px solid #eee;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0.5em;
    transition: margin 0.3s;
    /* padding: .5rem; */
  }

  /*! whole screen overlay to capture click and close open details */
  .Menu[open] > .Menu__toggle::before {
    /* background-color: transparent; */
    background-color: hsl(0deg 0% 50% / 0.5);
    bottom: 0;
    content: "";
    height: auto;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    z-index: -1;
  }

  /*
    .Menu__toggle::-webkit-details-marker {
        display: none;
    }

    .Menu__toggle::marker {
        content: none;
    } */

  /*! + - */
  /* .Menu__toggle::before,
    .Menu__toggle::after {
        content: "";
        position: absolute;
        top: calc(50% - 2px);
        right: 0.75rem;
        width: 1rem;
        height: 0.125rem;
        background-color: currentcolor;
    } */

  /*! | */
  /* .Menu__toggle::after {
        transform: rotate(90deg);
        transform-origin: 50% 50%;
    } */

  /*! - */
  /* .Menu[open] .Menu__toggle::after {
        transform: rotate(0deg);
    } */

  .Menu__label::after {
    content: "";
    display: block;
    margin-top: -0.125rem;
  }

  .Menu__icon {
    display: inline-block;
    height: 1.5rem;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 1.5rem;
  }

  .Menu__icon:hover .Menu__iconBar,
  .Menu__icon:focus .Menu__iconBar {
    background-color: currentColor;
  }

  .Menu__iconBar {
    background-color: currentColor;
    display: block;
    height: 0.125rem;
    margin: 0.375rem 0.125rem;
    opacity: 1;
    position: relative;
    top: -0.1725rem;
    transform-origin: center center;
    transition:
      top 0.3s 0.3s,
      transform 0.3s;
  }

  .Menu[open] .Menu__iconBar:nth-child(2) {
    opacity: 0;
  }

  .Menu[open] .Menu__iconBar:nth-child(1) {
    /*   top: 16px; */
    top: 0.3125rem;
    transform: rotate(45deg);
    transform-origin: center center;
    transition:
      top 0.3s,
      transform 0.3s 0.3s;
  }

  .Menu[open] .Menu__iconBar:nth-child(3) {
    top: -0.6875rem;
    transform: rotate(-45deg);
    transform-origin: center center;
    transition:
      top 0.3s,
      transform 0.3s 0.3s;
  }
}

@media (max-width: 479px) {
  .Menu__toggle {
    padding: 0.5rem;
  }

  .Menu:not([open]) .Menu__label {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

.Menu__list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 auto;
  max-width: 100%;
  padding: 0 0.5rem;
}

.Menu__item,
.Menu__link {
  border: 0;
  border-radius: 0.125rem;
  font-weight: 400;
  line-height: 1.125;
}

.Menu__item {
  margin: 0.375rem 0;
}

.Menu__item--utilities {
  align-items: center;
  background: hsl(0deg 0% 97%);
  border-top: 1px solid #eee;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  justify-content: space-between;
  margin: 0.5rem -0.5rem 0;
  padding: 0.5rem;
  text-align: right;
}

.Menu__link,
.Menu__link:visited {
  background-color: transparent;
  border-radius: 0.25rem;
  color: var(--color-accent);
  display: block;
  margin: 0 0.25rem;
  outline-color: transparent;
  padding: 0.25rem;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition:
    background-color 0.2s,
    outline 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.Menu__link:hover,
.Menu__link:focus,
.Menu__link:active {
  background-color: hsl(196deg 50% 94%);
  border-radius: 1px;
  color: hsl(196deg 100% 24%);
  outline: 0.25rem solid hsl(196deg 50% 94%);
  padding: 0.25rem;
  -webkit-text-decoration: underline;
  text-decoration: underline;

  /* background-color: hsl(0deg 0% 95%); */
}

.Menu__link:active {
  background-color: hsl(196deg 60% 96%);
  outline: 0.25rem solid hsl(196deg 60% 96%);
}

/* .ec .ec-tab, */

/* .au .au-link, */

/* .dl .dl-link, */

/* .cn .cn-link, */

/* .ou .ou-link, */

/* .faq .faq-link, */

.Menu__link[aria-current],
.Menu__link[aria-current]:hover,
.Menu__link[aria-current]:focus-visible {
  background-color: hsl(0deg 0% 95%);
  border-radius: 1px;
  color: #000;
  margin: 0 0.25rem;
  outline: 0.25rem solid hsl(0deg 0% 95%);
  padding: 0.25rem;
  -webkit-text-decoration: none;
  text-decoration: none;

  /* background-color: var(--color-accent); */
  /* color: #fff; */
  /* outline: 0.25rem solid var(--color-accent); */
}

.Menu__item--utilities .logout {
  background-color: #ddd;
  border-color: #ddd;
  font-weight: 400;
  line-height: 1rem;
  padding: 0.5rem;
}

.logout:hover,
.logout:focus,
.logout:active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/*! #endregion */

/*! #region --------------------------------------- messages */

.messages {
  clear: both;
  display: flow-root;
  margin: 1.5rem 1.5rem 0;

  --bs: 0 0 0 8px var(--color-gray-light);
}

@media (max-width: 767px) {
  .messages {
    --bs: 0 0 0 8px var(--color-white);
  }
}

.msg {
  /* variables for icon positioning */
  --pos: absolute;
  --left: -1rem;
  --top: -0.75rem;
  --z: 1;
  border: 0;
  border-left-width: 0.5rem;
  border-style: solid;
  margin: 1.5rem 0;
  padding: 1.5rem;

  position: relative;
}

.msg--error {
  background-color: hsl(345deg 100% 95%);
  background-color: var(--color-brand-95);
  border-color: hsl(345deg 100% 40%);
  border-color: var(--color-brand);
}

.msg--success {
  background-color: hsl(83deg 100% 90%);
  background-color: var(--color-success-90);
  border-color: hsl(83deg 85% 50%);
  border-color: var(--color-success-50);
}

.msg--info {
  background-color: hsl(196deg 90% 95%);
  background-color: var(--color-accent-lightest);
  border-color: var(--color-accent);
  border-color: var(--color-accent);
  color: hsl(0deg 0% 0%);
  color: var(--color-black);
}

.msg--help,
.msg--warning {
  background-color: hsl(47deg 100% 90%);
  background-color: var(--color-warning-90);
  border-color: hsl(47deg 90% 50%);
  border-color: var(--color-warning-50);
}

.msg > p {
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

.msg p:only-of-type {
  margin: 0;
}

.msg > p + p {
  margin-top: 1rem;
}

.msg > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.msg__closeButton {
  border: 0;
  height: 1.5rem;
  left: auto;
  margin: 0;
  padding: 0;
  position: absolute !important;
  right: -0.75rem;
  top: -0.75rem;
  width: 1.5rem;
}

.msg__closeButton > .icon--close {
  --top: 0;
  --left: auto;
  --right: 0;
}

/*! #endregion */

/*! #region --------------------------------------- icons */

.icon {
  border: 0;
  border-radius: 50%;
  bottom: auto;
  bottom: var(--bottom, auto);
  box-shadow: 0 0 0 8px #fff;
  box-shadow: var(--bs, 0 0 0 8px #fff);
  color: hsl(0deg 0% 100%);
  color: var(--color-white);
  display: inline-flex;
  height: 1.5rem;
  left: auto;
  left: var(--left, auto);
  overflow: hidden;
  padding: 0;
  position: relative;
  position: var(--pos, relative);
  right: auto;
  right: var(--right, auto);
  text-align: center;
  top: auto;
  top: var(--top, auto);
  vertical-align: middle;
  width: 1.5rem;
  z-index: 0;
  z-index: var(--z, 0);
}

.icon::after {
  border-radius: 50%;
  content: "i";
  font-family: monospace, monospace;
  font-size: 1rem;
  font-style: normal;
  font-weight: bold;
  height: 1.5rem;
  line-height: 1.5;
  position: absolute;
  text-align: center;
  width: 1.5rem;
  z-index: 2;
}

.icon--info::after {
  background-color: var(--color-accent);
  background-color: var(--color-accent);
  content: "i";
}

.icon--success::after {
  background-color: #77bd0f;
  content: "\2713";
}

.icon--error::after {
  background-color: hsl(345deg 100% 40%);
  background-color: var(--color-brand);
  content: "!";
}

.icon--warning::after {
  background-color: #ebb600;
  content: "!";
}

.icon--security::after {
  background-color: #ebb600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='14' viewBox='0 0 448 512'%3E%3Cpath fill='%23fff' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 12px;
  content: "";
}

.icon--help::after {
  background-color: #ebb600;
  content: "?";
}

.icon--close {
  --left: auto;
  --bg: #ddd;
  --bgX: #000;
  background-color: #ddd;
  background-color: var(--bg);
  box-shadow: 0 0 0 8px #fff;
  box-shadow: var(--bs, 0 0 0 8px #fff);
  cursor: pointer;
  left: auto;
  left: var(--left, auto);
  right: -0.75rem;
  right: var(--right, -0.75rem);
}

.icon--close:hover,
.icon--close:focus {
  --bg: var(--color-brand);
  --bgX: var(--color-white);
}

.icon--close::before,
.icon--close::after {
  background-color: var(--bgX);
  border-radius: 0;
  content: "";
  height: 13px;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 2px;
}

.icon--close:before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.icon--close:after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.icon--required {
  /* background-image: url('data:image/svg+xml,<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23c03" d="M110.1,16.4L75.8,56.8l0.3,1l50.6-10.2v32.2l-50.9-8.9l-0.3,1l34.7,39.1l-28.3,16.5L63.7,78.2L63,78.5 l-18.5,49L17.2,111l34.1-39.8v-0.6l-50,9.2V47.6l49.3,9.9l0.3-0.6L17.2,16.7L45.5,0.5l17.8,48.7H64L82.1,0.5L110.1,16.4z" /></svg>'); */
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23c03" d="M110.1,16.4L75.8,56.8l0.3,1l50.6-10.2v32.2l-50.9-8.9l-0.3,1l34.7,39.1l-28.3,16.5L63.7,78.2L63,78.5 l-18.5,49L17.2,111l34.1-39.8v-0.6l-50,9.2V47.6l49.3,9.9l0.3-0.6L17.2,16.7L45.5,0.5l17.8,48.7H64L82.1,0.5L110.1,16.4z" /></svg>');
  background-image: var(--svg-required);
  /* background-color: red; */
  /* -webkit-mask-image: url(data: image/svg+xml, %3Csvg%20width=%277%27%20height=%2712.19%27%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%207%2012.19%27%3E%3Cpath%20d=%27M.27, 10.64a.89.89, 0, 0, 0, 0, 1.28.91.91, 0, 0, 0, 1.28, 0L6.73, 6.73a.89.89, 0, 0, 0, 0-1.28L1.55.27A.89.89, 0, 0, 0, .27.27a.89.89, 0, 0, 0, 0, 1.28L4.81, 6.1Z%27%2F%3E%3C%2Fsvg%3E); */
  /* mask-image: url(data: image/svg+xml, %3Csvg%20width=%277%27%20height=%2712.19%27%20xmlns=%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox=%270%200%207%2012.19%27%3E%3Cpath%20d=%27M.27, 10.64a.89.89, 0, 0, 0, 0, 1.28.91.91, 0, 0, 0, 1.28, 0L6.73, 6.73a.89.89, 0, 0, 0, 0-1.28L1.55.27A.89.89, 0, 0, 0, .27.27a.89.89, 0, 0, 0, 0, 1.28L4.81, 6.1Z%27%2F%3E%3C%2Fsvg%3E); */
  /* background-size: .75em .75em; */
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  display: inline-flex;
  height: 0.75em;
  width: 0.75em;
}

.icon--required.-small {
  height: 0.75em;
  width: 0.75em;
}

/*! #endregion */

/* @import '12__tables.css); */

/*! --------------------------------------- FORMS 13__forms.css */

/*! #region --------------------------------------- fieldset layout */

/*
fieldSet
fieldSet__legend (hidden visually, shown accessibly) - not used.
- fieldset legend relationship implemented using aria-labelledby and heading

fieldSet__heading (hidden accessibly, shown visually)
- used instead of legend

fieldSet__group (nested fieldset for semantic grouping and labeling)
fieldSet__groupLegend
fieldSet__groupHeading

fieldGroup (mainly for layout purposes)
fieldGroup__heading (section heading)

https: //www.tpgi.com/fieldsets-legends-and-screen-readers-again/
https: //adrianroselli.com/2022/07/use-legend-and-fieldset.html
legend:not(:focus):not(:active) {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    white-space: nowrap;
}
<fieldset > <legend > Choose</legend > <div aria-hidden="true" > Choose</div > […] </fieldset >
*/

/* style fieldSet */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.fieldSet {
  background-color: #fff;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0 8px 1px #ddd;
  margin: 2rem 0;
  padding: 0;
  position: relative;
  width: auto;
}

.fieldSet__heading {
  background-color: transparent;
  color: inherit;
  display: block;
  font-size: 1.25rem;
  line-height: 1.125rem;
  margin: 0.5rem;
  padding: 0.9375rem 2rem 0.9375rem 1.5rem;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fieldSet__content {
  padding: 2rem;
}

.fieldSet__content--hasBorder {
  position: relative;
}

.fieldSet__content--hasBorder::before {
  background: #eee;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@media (max-width: 767px) {
  .fieldSet {
    background-color: #fff;
    box-shadow: none;
    margin: 0;
    padding: 0;
  }

  .fieldSet__heading {
    margin: 0.5rem -0.5rem 1rem;
    padding: 0.9375rem 0 0.9375rem 0.5rem;
  }

  .fieldSet__content {
    padding: 2rem 0;
  }
}

/* fieldset.fieldSet__group | nested fieldset */

.fieldSet__group {
  border: 0;
  margin: 0;
  padding: 0;
  position: relative;
}

.fieldSet__group::before {
  background: hsl(0deg 0% 85%);
  background: var(--color-gray-85);
  content: "";
  height: 2px;
  left: -2rem;
  position: absolute;
  right: -2rem;
  top: -2rem;
}

.fieldSet__group--checks::before {
  content: none;
}

.fieldSet__group + .fieldSet__group {
  margin-top: 4rem;
  padding-top: 0;
}

.fieldSet__groupHeading {
  font-size: 1.125rem;
  font-weight: bold;
}

/* legend.fieldSet__groupLegend */

.fieldSet__groupLegend {
  float: left;
  font-size: 0.875rem;
  font-weight: bold;
  margin: 1rem 0;
  padding: 0;
  text-wrap: balance;
  width: -moz-fit-content;
  width: fit-content;
}

legend span {
  color: #fff;
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1rem;
  margin: 0.5rem;
  padding: 0.5rem 2rem 0.5rem 1rem;
  position: relative;
  text-overflow: ellipsis;
  text-transform: none;
}

legend ~ * {
  clear: both;
}

@media (max-width: 767px) {
  legend {
    margin: 0 0 1.5rem;
    width: 100%;
  }

  legend span {
    margin: 0;
  }

  label {
    margin: 1.5em 0 0;
    position: static !important;
  }
}

.row {
  padding: 0.5em 0;
  position: relative;
  width: 100%;
}

.row--check {
  padding: 0.5rem 0;
}

.row--indented {
  padding: 0.5rem 0 0.5rem 2rem !important;
  position: static;
}

.row--indented::before {
  border-left: 1px dashed #aaa;
  bottom: 0;
  content: "";
  left: 0.625rem;
  position: absolute;
  top: 3rem;
  width: 1px;
}

.emergencyContacts {
  margin-bottom: 1.5rem;
}

.emergencyContacts .row--indented {
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .emergencyContacts .row--indented {
    padding-left: 0;
  }
}

.control--noContact:checked ~ .row--indented {
  display: none;
}

.row--flex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(264px, 1fr));
}

[for="read-term"] ~ div {
  display: none;
}

[for="read-term"]:has(input#read-term:checked) ~ div {
  display: block;
}

.checkList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checkList label {
  align-items: center;
  display: flex;
  font-weight: 400;
  line-height: 0;
  margin: 0.75rem 0;
  outline-color: transparent;
  transition: outline 0.3s;
  width: -moz-max-content;
  width: max-content;
}

.checkList [type="checkbox"] {
  float: left;
}

.row--btn {
  border-top: 1px solid hsl(0deg 0% 85%);
  border-top: 1px solid var(--color-gray-85);
  margin: 1rem 0;
  padding: 2rem 0;
}

/*! #endregion */

/*! #region --------------------------------------- labels ??? */

label {
  clear: both;
  cursor: pointer;
  display: block;
  font-size: 0.875rem;
  font-size: var(--font-size-xs, 1rem);
  font-weight: 700;
  line-height: 1.5;
  margin: 0.375rem 0 0;
  position: relative;
  text-wrap: balance;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.checkList label:focus-visible {
  background-color: #e0e0e0;
  border-radius: 0.125rem;
  box-shadow: 0 0 0 0.25rem #e0e0e0;
  transition:
    box-shadow 0.3s,
    background-color 0.2s;
}

/* TODO Remove / Refactor */

.control--city,
.control--city1,
.control--cname,
.control--country,
.control--country1,
.control--cphone,
.control--email,
.control--ephone,
.control--fax,
.control--ffname,
.control--hphone,
.control--lba-url,
.control--name,
.control--name1,
.control--phone,
.control--pphone,
.control--provider,
.control--relationship1,
.control--scname,
.control--sphone,
.control--state,
.control--state1,
.control--street,
.control--street1,
.control--universityEmail,
.control--url,
.control--wphone,
.control--zip,
.control--zip1,
.dl .control--ffname,
.dl .control--fname,
.dl .control--lfname {
  min-width: 100%;
  width: 100%;
}

/*! #endregion */

/*! #region --------------------------------------- form field styling ??? */

/*! remove default field styling */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input,
select {
  font: inherit;
  margin: 0;
}

input[type="email"],
input[type="text"],
select {
  background-color: #eee;
  border: 2px solid #ddd;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  min-height: 1.5em;
  outline: transparent solid;
  padding: 0.5em 0.75em;
  transition:
    outline 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
  vertical-align: middle;
}

/*! select	------------------------------------------------------------------ */

select {
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9.65685L7.41421 11.0711L11.6569 6.82843L15.8995 11.0711L17.3137 9.65685L11.6569 4L6 9.65685Z" fill="currentColor" /><path d="M6 14.4433L7.41421 13.0291L11.6569 17.2717L15.8995 13.0291L17.3137 14.4433L11.6569 20.1001L6 14.4433Z" fill="currentColor" /></svg>');
  background-position-x: calc(100% - 0.25rem);
  background-position-y: center;

  /* background-color: #fff; */
  background-repeat: no-repeat;
  color: inherit;
  min-height: 42px;
  padding: 0.5rem;
  padding: 0.5rem 2.5rem 0.5rem 0.5rem;
}

select:focus {
  outline-color: transparent;
}

/*! remove the persistent focus dotted outline in Firefox */

select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0#000;
}

@media (max-width: 767px) {
  /*!
    input[type="text"],
    input[type="email"],
    select {
        font-size: 1.333333em;
        float: none !important;
        margin: 0;
        width: 100% !important;
    } */
  input[type="email"],
  input[type="text"],
  select {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    position: static;
    width: 100% !important;
  }
}

/*! #endregion */

/*! #region --------------------------------------- required (*) marker and fields */

.required-marker {
  align-items: center;
  display: inline-flex;
  height: 0.75rem;
  justify-content: center;
  width: 0.75rem;
}

.required-marker > svg {
  fill: #c03;
  height: 100%;
  width: 100%;
}

/* TODO Use or remove | not implemented in HTML */

/* .required-field, */

/* .required-label, */

/* .required-region, */

/* input[type=text].required-field { */

/* background-color: #ffd; */

/* border-color: #c03; */

/* outline: 0; */

/* box-shadow: inset 0 0 3px 1px #c03; */

/* } */

/*! #endregion */

/*! focused fields ------------------------------------------------------------------ */

/*! remove focus highlight glow in webkit (Chrome and Safari) */

input:active,
input:focus,
select:active,
select:focus {
  border-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.25rem hsl(196deg 90% 95%) !important;
  box-shadow: 0 0 0 0.25rem var(--color-accent-lightest) !important;
}

input:hover,
select:hover {
  border-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}

input,
input[type="checkbox"]:focus {
  outline-color: transparent !important;
}

input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
select:focus-visible {
  border-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.25rem hsl(200deg 100% 92%);
  outline: 0;
}

/*! #region --------------------------------------- checkboxes and radio buttons  */

x.label--inline {
  display: inline-block;
  margin-right: 1rem;
}

.fieldSet__list .label--check:focus-within,
.fieldSet__list .label--check:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.125rem;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.05);
  transition:
    box-shadow 0.3s,
    background-color 0.2s;
}

.label--check:has(input:focus-visible) {
  outline: 2px dashed hsl(345deg 100% 40%);
  outline: 2px dashed var(--color-brand);
  outline-offset: 2px;
}

.label--checkSingle:has(input:focus-visible) {
  outline-color: transparent;
}

x.label--check:has(input:focus-visible) {
  outline-color: transparent;
}

/*! hide the real input control, but keep it accessible | display none won't work since it breaks keyboard accessibility */

[type="checkbox"],
x[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*! setup the custom control container and label text */

.label--check > span {
  cursor: pointer;
  display: inline-block;
  font: 400 0.875rem/1.5rem sans-serif;
  font: 400 var(--font-size-xs, 1rem)/1.5rem sans-serif;
  padding: 0 0.375rem 0 2rem;
  position: relative;
}

/*! unchecked control styles */

.label--check > span::before,
.label--checkSingle > span::after {
  background-color: #fff;
  background-position: center;
  background-size: 0;
  border: 2px solid #ccc;
  border-radius: 0.3125rem;
  box-sizing: content-box;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  transition: background 0.25s;
  width: 20px;
}

.label--checkSingle > span::after {
  background-color: transparent;
  border-color: transparent;
}

/*! provide affordance for focused or hovered controls */

x.control--noContact:focus + .label--noContact,
x.control--noContact:focus + .label--noContact > span::before,
.label--check input:focus + span,
.label--check input:focus + span::before,
.label--check:focus-within > span,
.label--check:focus-within > span::before,
.label--check:hover > span,
.label--check:hover > span::before {
  border-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent);
  color: var(--color-accent);
}

.label--checkSingle > span::before {
  /* outline: 0 solid rgba(0, 0, 0, .05); */
  transition: all 0.3s;
}

.label--checkSingle:hover > span::before {
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.05);
  outline: 0.25rem solid rgba(0, 0, 0, 0.05);
}

.label--checkSingle:focus-visible {
  outline: none !important;
}

.emergencyContacts .control--noContact:focus-visible + label > span::after,
.label--checkSingle input:focus-visible ~ span::after,
x.label--checkSingle:focus-within > span::before {
  content: "";
  outline: 2px dashed #c03 !important;
  outline-offset: 2px;
}

.label--checkSingle input:focus + span::before {
  outline: none !important;
}

/* .label--check:focus-within > span::before, */

.label--check input:focus + span::before {
  outline: 2px dashed #c03;
  outline-offset: 2px;
}

/*! the checked style using the :checked pseudo class */

.label--check input:checked ~ span::before,
input[type="checkbox"]:checked + .label--check > span::before {
  background-color: var(--color-accent);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  border-color: var(--color-accent);
}

/*! adds the checkmark to custom checkbox control */

.label--check input[type="checkbox"]:checked ~ span::before,
input[type="checkbox"]:checked + .label--check > span::before {
  background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z" fill="%23fff" /></svg>');
  background-position: center;
  background-size: 150%;
}

/*! make the radio controls round */

x.label--check input[type="radio"] ~ span::before {
  border-radius: 50%;
}

/*! give the checked radio a white ring inside */

x.label--check input[type="radio"]:checked ~ span::before {
  box-shadow: inset 0 0 0 2px #fff;
}

/*! disabled label */

.label--check input[disabled] ~ span,
.label--check:hover input[disabled] ~ span {
  color: #777;
  cursor: not-allowed;
}

/*! disabled custom control */

.label--check input[disabled] ~ span::before {
  background-color: #eee;
  border-color: #ddd;
}

.help-text {
  display: block;
  margin: 0.25rem 0;
}

/*! #endregion */

.formControl__help {
  display: block;
  font-size: 0.875rem;
  line-height: 1rem;
  margin: 0;
  padding-top: 0.25rem;
}

.row--flex {
  align-items: end;
  gap: 1rem 1.5rem;
}

.row--flex .col {
  flex: 1;
}

.col--padded {
  background-color: #f5f5f5;
  padding: 2rem;
}

/*! labels ------------------------------------------------------------------ */

option,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media (max-width: 767px) {
  /* .row--flex { */

  /* gap: 0; */

  /* } */

  .row--flex {
    gap: 0;
    grid-template-columns: 1fr;
  }

  /* .dl .column + .column, */

  /* .emergencyContacts .column + .column { */

  /* margin-top: 1rem; */

  /* } */

  .row--flex .column + .column {
    padding-top: 1rem;
  }

  .dl label,
  .emergencyContacts label {
    margin-top: 0;
  }

  /* todo remove ???  */
  .control--cphone,
  .control--phone,
  .control--relationship,
  .control--state,
  .control--wphone,
  .control--zip {
    position: static !important;
  }
}

[disabled],
[readonly],
[disabled]:hover,
[readonly]:hover,
[disabled]:focus,
[readonly]:focus,
[disabled]:active,
[readonly]:active,
[disabled]:focus-visible,
[readonly]:focus-visible {
  background-color: #eee;
  border-color: #eee !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/*! #region --------------------------------------- collapsible regions */

.Disclosure--contact {
  border-top: 1px solid #ddd;
  position: relative;
}

/* .Disclosure--instructions { */

/* display: flow-root; */

/* } */

.Disclosure--instructions {
  display: flow-root;
  margin: 0 0.5rem;
}

.Disclosure--instructions[open] {
  margin-bottom: 0.5rem;
}

@media (max-width: 767px) {
  .Disclosure--instructions {
    margin: -1rem -0.5rem 1.5rem;
  }
}

.Disclosure--instructions__trigger,
.Disclosure--contact__trigger {
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  line-height: 1.5rem;
  list-style: none;

  /* background-color: #000; */
  outline-color: transparent;
  padding: 0.5rem 0;
  transition: all 0.3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.Disclosure--contact__trigger {
  color: var(--color-accent);

  /* background-color: transparent; */
  position: relative;
}

.Disclosure--instructions__trigger {
  padding: 0.5rem;
  position: relative;

  /* text-overflow: ellipsis; */

  /* min-width: 100%; */

  /* max-width: calc(100vw - 3rem); */
}

.Disclosure--instructions__trigger.infotip {
  cursor: help;
  line-height: 1;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 2;
}

@media (max-width: 767px) {
  .Disclosure--instructions__trigger.infotip {
    right: 0;
  }
}

.Disclosure--instructions__trigger::before,
.Disclosure--contact__trigger::before {
  content: none;
}

.Disclosure--instructions__trigger::-webkit-details-marker,
.Disclosure--contact__trigger::-webkit-details-marker {
  display: none;
}

.Disclosure--instructions__trigger::marker,
.Disclosure--contact__trigger::marker {
  content: none;
}

x.Disclosure--instructions__trigger > b,
x.Disclosure--instructions__trigger > .Legend__heading,
.Disclosure--contact__trigger > .Legend__heading {
  display: block;
  font-size: inherit;
  font-size: var(--font-size, inherit);
  line-height: 1.125rem;
  margin: 0;
  padding: 0.4375rem 2rem 0.4375rem 1rem;
  position: relative;

  /* trigger ellipsis on long titles */

  /* overflow: hidden; */

  /* cuts off tooltips */

  /* white-space: nowrap; */

  /* text-overflow: ellipsis; */
}

.Disclosure--instructions__trigger > .icon {
  box-shadow: none;
  overflow: visible;
  transition: all 0.3s;
}

.Disclosure--instructions__trigger:hover > .icon {
  box-shadow: 0 0 0 4px hsl(196deg 100% 32% / 0.25);
  box-shadow: var(--bs, 0 0 0 4px hsl(196deg 100% 32% / 0.25));
  outline: 1px solid var(--color-accent);
  outline: 1px solid var(--color-accent);
  outline-offset: -1px;
  transition: box-shadow 0.3s;
}

.Disclosure--instructions__trigger > .icon::after {
  background-color: hsl(0deg 0% 50%);
  background-color: var(--color-gray-medium);
  color: hsl(0deg 0% 100%);
  color: var(--color-white);
}

[open] .Disclosure--instructions__trigger > .icon::after,
.Disclosure--instructions__trigger:hover > .icon::after {
  background-color: var(--color-accent);
  background-color: var(--color-accent);
  color: hsl(0deg 0% 100%);
  color: var(--color-white);
}

[open] .Disclosure--instructions__trigger > .icon::before {
  border-bottom: 0.5rem solid hsl(200deg 80% 95%);
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  content: "";
  position: absolute;
  right: 50%;
  top: calc(100% + 0.25rem);
  transform: translate(50%, 0);
  z-index: 2;
}

@media (max-width: 767px) {
  x.Disclosure--instructions__trigger > b,
  x.Disclosure--instructions__trigger > .Legend__heading,
  .Disclosure--contact__trigger > .Legend__heading {
    /* padding-left: .25rem; */
    pointer-events: none;
  }
}

/* .Disclosure--instructions__trigger > b::before, */

/* .Disclosure--instructions__trigger > .Legend__heading::before { */

/* content: "i"; */

/* width: 1.5rem; */

/* height: 1.5rem; */

/* display: block; */

/* background-color: #fff; */

/* border-radius: 50%; */

/* position: absolute; */

/* z-index: 1; */

/* line-height: 1.25; */

/* text-align: center; */

/* color: #000; */

/* font-weight: 400; */

/* right: 0; */

/* top: 0.3125rem; */

/* cursor: help; */

/* } */

x.Disclosure--instructions__trigger > b::before,
x.Disclosure--instructions__trigger > .Legend__heading::before {
  background-color: #fff;
  border-radius: 50%;
  color: #000;
  content: "i";
  cursor: help;
  display: block;
  font-family: monospace;
  font-size: 1rem;
  font-weight: bold;
  height: 1.5rem;
  line-height: 1.5;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0.3125rem;
  width: 1.5rem;
  z-index: 1;
}

x[open] .Disclosure--instructions__trigger > b::before,
x.Disclosure--instructions__trigger:hover > b::before,
x.Disclosure--instructions__trigger:hover > .Legend__heading::before {
  color: var(--color-accent);
  color: var(--color-accent);
}

x.Disclosure--instructions__trigger > b::after,
x.Disclosure--instructions__trigger > .Legend__heading::after {
  content: "";
  cursor: pointer;
  display: block;
  height: 100%;
  opacity: 0.5;
  pointer-events: initial;
  position: absolute;
  right: 2rem;
  top: 0;
  width: 1.75rem;
  z-index: 1;
}

x.Disclosure--instructions__trigger > b:hover,
x.Disclosure--instructions__trigger > .Legend__heading:hover {
  white-space: normal;
}

x.Disclosure--contact b::after,
.Disclosure--contact .Legend__heading::after {
  content: "";
  display: block;
  margin-top: -0.25rem;
}

x.Disclosure--contact b::before,
.Disclosure--contact .Legend__heading::before {
  content: "";
  display: block;
  margin-bottom: -1px;
}

/* .Disclosure--instructions__trigger > svg, */

/* .Disclosure--contact__trigger > svg { */

/* transform: rotate(-90deg); */

/* transition: transform .3s ease-in-out; */

/* position: absolute; */

/* top: 1.25rem; */

/* display: none; */

/* } */

/* .Disclosure--contact__trigger > svg { */

/* top: 50%; */

/* left: 0.25rem; */

/* transform: translateY(-50%) rotate(-90deg); */

/* } */

/* @media (max-width: 767px) { */

/* .Disclosure--instructions__trigger > svg { */

/* top: .75rem; */

/* } */

/* } */

/* [open] .Disclosure--instructions__trigger > svg, */

/* [open] .Disclosure--contact__trigger > svg, */

/* [open] .Disclosure--contact__trigger > b::before { */

/* transform: translateY(-50%) rotate(0deg); */

/* } */

/* [open] .Disclosure--instructions__trigger, */

/* .Disclosure--instructions:hover summary, */

/* [open].Disclosure--contact:hover summary, */

.Disclosure--contact:hover summary {
  background-color: var(--color-accent);
  color: #fff;
}

.Disclosure--instructions__content,
x.Disclosure--contact__content {
  margin-top: 0;
  opacity: 0;
  padding: 1rem;
  transition: rotate 0.3s ease-out;

  /*! transition-behavior: allow-discrete; */

  /*! Note: be sure to write this after the shorthand */
}

.Disclosure--instructions__content {
  padding: 0;
}

[open] .Disclosure--instructions__content,
[open] .Disclosure--contact__content {
  margin: 1rem;
  opacity: 1;
}

/* @media (max-width: 767px) { */

/* [open] .Disclosure--contact__content { */

/* /~ margin: 1rem; ~/ */

/* padding: 0; */

/* } */

/* } */

.Disclosure--instructions__content .msg,
[open] .Disclosure--instructions__content {
  border: 0;
  font-size: 1rem;
  /* margin: 0; */
  margin: -0.5rem 0 0;
}

.Disclosure--instructions__content .msg > p:first-child {
  margin: 0;
}

.Disclosure--instructions__content .msg > p + p {
  margin-bottom: 0;
  margin-top: 1rem;
}

.forDesktop,
.forMobile {
  display: none;
}

@media (max-width: 767px) {
  .forMobile {
    display: block;
  }
}

@media (min-width: 768px) {
  .forDesktop {
    display: block;
  }
}

/*!  #endregion */

/* from ens-student head */

.Disclosure--contact {
  border: 1px solid #d6d1e0;
  display: flow-root;
}

.Disclosure--contact + .Disclosure--contact {
  border-bottom: 1px solid #d6d1e0;
  border-top: 0;
}

.Disclosure--contact .Disclosure--contact__trigger:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -1px;
}

.Disclosure--contact .Disclosure--contact__trigger::after {
  border-bottom: 2px solid;
  border-right: 2px solid;
  content: "";
  height: 0.75em;
  position: absolute;
  right: 1rem;
  top: 0.75rem;
  transform: rotate(45deg);
  width: 0.75em;
}

/* .Disclosure--contact[open] .Disclosure--contact__trigger::after { */

/* top: 1.25rem; */

/* transform: rotate(225deg); */

/* } */

.Disclosure--contact:first-child {
  border-radius: 6px 6px 0 0;
}

.Disclosure--contact:last-child {
  border-bottom: 1px solid #d6d1e0;
  border-radius: 0 0 6px 6px;
}

/*! #region --------------------------------------- buttons - links, inputs, and buttons */

/*! remove extra padding on buttons in Firefox */

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  border: 0 none;
  padding: 0;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.btn,
.btn:visited {
  --_color-bg: #fff;
  --_color-text: #c03;
  --_color-border: #ddd;
  align-items: center;
  appearance: none;
  background-color: var(--_color-bg);
  border: 1px solid var(--_color-border);
  border-image: none;
  border-radius: 0.5em;
  color: var(--_color-text);
  cursor: pointer;
  display: inline-flex;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: 400;
  gap: 0.375rem;
  height: 2.75rem;
  line-height: 1.5;
  margin: 0;
  min-block-size: 1.5em;
  padding: 0.5rem 1.5rem;
  padding: 0.5rem 1rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.btn > span {
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
}

/* .btn:active, */
.btn:focus-visible,
.btn:hover {
  --_color-bg: hsl(from var(--color-brand) h s 97%);
  --_color-text: var(--color-brand);
  --_color-border: var(--color-brand);
}

.btn:focus-visible,
.btn:active {
  border-color: hsl(from var(--_color-border) h s 85%);
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.btn:active {
  transform: translateY(1px);
}

.btn > svg {
  --_rotate: var(--rotate, 0deg);
  --_size: var(--size, 1.125em);
  block-size: 1.125em;
  display: inline-block;
  inline-size: 1.125em;

  transform: rotate(var(--_rotate));
}

/* .btn--primary { */
/* letter-spacing: 0.05em; */
/* text-transform: uppercase; */
/* } */

.btn--primary,
.btn--primary:visited {
  --_color-bg: var(--color-brand);
  --_color-text: var(--color-100);
  --_color-border: var(--color-brand);
}

/* .btn--primary:focus, */
.btn--primary:focus-visible,
.btn--primary:hover {
  --_color-bg: hsl(from #c03 h s calc(l + 5));
  --_color-text: #fff;
}

.btn--primary:focus-visible,
.btn--primary:active {
  /* --_color-bg: hsl(from #c03 h s calc(l - 5)); */
  /* --_color-text: hsl(from #c03 h s 85%); */
  outline: 2px solid hsl(from #c03 h s calc(l - 10));
  outline-offset: 2px;
}

.btn--ghost {
  --_color-border: #e5e5e5;
  background: transparent;
  border: 1.5px solid var(--_color-border);
  color: black;
}

.btn--ghost:active,
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: #f7f7f7;
  border-color: #ccc;
}

.btn--ghost:active,
.btn--ghost:focus-visible {
  --_color-border: #aaa;
  outline: 2px solid var(--_color-border);
  outline-offset: 2px;
}

.btn--logout > svg {
  position: relative;
  transform: rotate(var(--_rotate)) translateY(0);
  transition: transform 0.2s;
}

.btn--logout:active > svg {
  /* left: .5rem; */
  transform: rotate(var(--_rotate)) translateY(0.25rem);
}

.btn--link,
.btn--link:visited {
  --_color-bg: var(--btn--link-bg, var(--color-accent));
  --_color-text: var(--btn--link-color, var(--color-100));
  --_color-border: var(--btn--link-border, var(--color-accent));
}

.btn--link:focus-visible,
.btn--link:hover {
  --_color-bg: hsl(from var(--btn--link-bg, var(--color-accent)) h s calc(l + 10));
  --_color-text: var(--btn--link-color, var(--color-100));
  --_color-border: var(--btn--link-border, var(--color-accent));
}

.btn--link:focus-visible,
.btn--link:active {
  outline: 2px solid var(--btn--link-bg, var(--color-accent)) !important;
  outline-offset: 2px;
}

.btn-u--small {
  height: 2.25rem !important;
  padding: 0.5rem 0.75rem !important;
}

.logout {
  align-items: center;
  background-color: #ccc;
  border: 2px solid #ccc;
  border-radius: 0.25rem;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.875rem;
  line-height: 1rem;
  outline-color: #fff;
  outline-offset: 0px;
  padding: 0.875rem 1rem;
  transition: all 0.3s;
  white-space: nowrap;
}

.logout::after {
  content: "\00a0\0203A";
  display: inline-block;
  font-size: 1.25rem;
  inset-block-start: -1px;
  line-height: 0.8;
  max-inline-size: 0;
  overflow: hidden;
  position: relative;
  transition:
    max-width 0.3s,
    margin-left 0.3s;
}

/* .logout:focus::after, */
/* .logout:hover::after, */
.logout:active::after {
  margin-inline-start: 0.5rem;
  max-inline-size: 1rem;
}

.logout:active,
.logout:focus-visible,
.logout:hover {
  background-color: hsl(from var(--color-accent) h s calc(l + 10));
  border-color: hsl(from var(--color-accent) h s calc(l + 10));
  color: #fff;
}

.logout:active,
.logout:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled],
.btn[disabled]:active,
.btn[disabled]:focus,
.btn[disabled]:hover {
  background-color: #eee !important;
  border-color: #eee !important;
  box-shadow: none !important;
  color: #777 !important;
  color: #555 !important;
  cursor: not-allowed;
  opacity: 0.5;
  opacity: 0.75;
  outline-color: transparent !important;
  transform: none;
}

/*! #region --------------------------------------- TABS */

.Tabs {
  display: none;
}

@media (min-width: 768px) {
  .Tabs {
    background-color: #fff;
    box-shadow: inset 0 -1px 0 0 hsl(0deg 0% 90%);
    display: block;
  }

  .Tabs__list {
    align-items: stretch;
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    max-width: 64rem;
    padding-bottom: 0;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0;
  }

  .Tabs__item {
    border: 1px solid transparent;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 0.5rem;
    flex: 1 1 0;
    position: relative;
  }

  /* .ec .ec-tab, */
  /* .au .au-tab, */
  /* .dl .dl-tab, */
  /* .cn .cn-tab, */
  /* .ou .ou-tab, */
  /* .faq .faq-tab { */
  .Tabs__item:has([aria-current]) {
    background-color: #eee;
    border-color: hsl(0deg 0% 90%);
  }

  .Tabs__link,
  .Tabs__link:visited {
    align-items: center;
    border: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 0.5rem;
    color: hsl(196deg 100% 30%);
    color: var(--color-accent-dark);
    display: flex;
    font-size: 14px;
    font-weight: 400;
    height: 100%;
    justify-content: center;
    letter-spacing: 0.05em;
    line-height: 1.125rem;
    min-height: 3.25rem;
    min-width: 100%;
    padding-bottom: 0.125rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    text-align: center;
    -webkit-text-decoration: none;
    text-decoration: none;
    transition:
      background-color 0.3s,
      padding-top 0.2s,
      box-shadow 0.3s;
    width: -moz-min-content;
    width: min-content;
  }

  .Tabs__link:hover,
  .Tabs__link:focus,
  .Tabs__link:active {
    background-color: hsl(0deg 0% 97%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 0.5rem;
    box-shadow: inset 0 -2px 0 0 var(--color-accent);
    box-shadow: inset 0 -2px 0 0 var(--color-accent);
    color: var(--color-accent);
    padding-top: 0.25rem;
  }

  .Tabs__link:focus-visible {
    border-radius: 0.25rem;
    outline: 2px dashed hsl(345deg 100% 40%);
    outline: 2px dashed var(--color-brand);
    outline-offset: -1px;
  }

  .ec .ec-link,
  .au .au-link,
  .dl .dl-link,
  .cn .cn-link,
  .ou .ou-link,
  .faq .faq-link,
  .Tabs__link[aria-current],
  .Tabs__link[aria-current]:hover,
  .Tabs__link[aria-current]:focus,
  .Tabs__link[aria-current]:active {
    background-color: hsl(0deg 0% 95%);
    background-color: var(--color-gray-light);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    box-shadow: none;
    color: hsl(0deg 0% 0%);
    color: var(--color-black);
    padding-top: 0.25rem;
  }
}

/*! #endregion */

/*! #region --------------------------------------- tooltips */

/*! IMPLEMENTATION 2 */

.tooltip-container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 100%;
  min-width: 264px;
  position: relative;
}

.tooltip-container--short {
  max-width: calc(33% - 0.75rem);
}

.tooltip-container--medium {
  max-width: 60%;
}

@media (max-width: 767px) {
  .tooltip-container--short,
  .tooltip-container--medium {
    max-width: 100%;
  }
}

.tooltip-trigger {
  cursor: help;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  height: 1.5rem;
  left: calc(100% - 2rem);
  position: absolute;
  top: 0.625rem;
  width: 1.5rem;
}

.tooltip-trigger--short {
  left: calc(30% - 2rem);
}

.tooltip-trigger--long {
  left: calc(62% - 2rem);
}

@media (max-width: 767px) {
  .tooltip-trigger {
    left: auto;
    right: 0.5rem;
    top: 0.625rem;
  }
}

.tooltip-trigger::before {
  background: hsl(0deg 0% 50%);
  background: var(--color-gray-medium);
  border-radius: 50%;
  color: #fff;
  content: "i";
  display: block;
  font-family: monospace, monospace;
  font-weight: bold;
  height: 1.5rem;
  line-height: 1.5;
  position: relative;
  text-align: center;
  width: 1.5rem;
}

.tooltip-trigger:hover::before,
.tooltip-trigger:focus::before {
  background-color: var(--color-accent);
  box-shadow: 0 0 0 4px hsl(196deg 100% 32% / 0.25);
  box-shadow: var(--bs, 0 0 0 4px hsl(196deg 100% 32% / 0.25));
  outline: 1px solid #007fac;
  outline-offset: -1px;
  transition: box-shadow 0.3s;
}

.tooltip-trigger .tooltip {
  background: #000;
  border-radius: 0.5rem;
  bottom: 100%;
  box-shadow: 0 0 8px 1px hsl(0deg 0% 100% / 0.5);
  color: white;
  display: block;
  font-size: 0.875rem;
  font-weight: 400;

  /* create a new stacking context without needing to set a z-index.
    This is beneficial since it allows us to guarantee that certain high-priority elements (modals, dropdowns, tooltips)
    will always show up above the other elements in our application. No weird stacking context bugs, */
  isolation: isolate;
  left: 50%;
  line-height: 1.5;
  margin-bottom: 15px;
  opacity: 0;
  padding: 1rem;
  pointer-events: none;
  position: absolute;
  transform: translateY(10px) translateX(-50%);
  transition: all 0.25s ease-out;
  width: 300px;
  z-index: 2;
}

.tooltip-trigger .tooltip {
  left: -110px;
}

.tooltip-trigger .tooltip ul {
  padding-left: 1rem;
}

@media (max-width: 767px) {
  .tooltip-trigger .tooltip {
    left: -110px;
  }
}

.tooltip-trigger .tooltip::before {
  bottom: -1.2em;
  content: "";
  display: block;
  height: 1.2em;
  left: 0;
  position: absolute;
  width: 100%;
}

.tooltip-trigger .tooltip::after {
  border-left: solid transparent 0.5rem;
  border-right: solid transparent 0.5rem;
  border-top: solid #000 0.5rem;
  bottom: -0.5rem;
  content: " ";
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
}

.tooltip-trigger .tooltip::after {
  left: calc(100% - 1.75rem);
}

@media (max-width: 767px) {
  .tooltip-trigger .tooltip::after {
    left: calc(100% - 1.75rem);
  }
}

.tooltip-trigger .tooltip.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) translateX(-50%);
}

/*! IMPLEMENTATION 3 */

.Disclosure--help {
  display: inline-block;
}

.Disclosure__summary--help {
  border-radius: 50%;
  color: #fff;
  cursor: help;
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
  width: 1.5rem;
}

.Disclosure__summary--help:hover::before,
.Disclosure__summary--help:focus::before {
  background-color: var(--color-accent);
}

[open] .Disclosure__summary--help {
  box-shadow: 0 0 8px 8px hsl(0deg 0% 0% / 0.2);
}

.Disclosure__summary--help::before {
  background: #999;
  border-radius: 50%;
  content: "i";
  display: block;
  height: 1.5rem;
  line-height: 1.5;
  position: absolute;
  width: 1.5rem;
  z-index: 2;
}

[open] .Disclosure__summary--help::before {
  box-shadow: 0 0 0 8px #fff;
}

.Disclosure--help div,
.Disclosure--help div * {
  line-height: 1.25rem;
}

.Disclosure--help div {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow:
    0 0 2px hsl(0deg 0% 0% / 0.2),
    0 0 8px hsl(0deg 0% 0% / 0.15);
  font-size: 14px;
  font-weight: 400;
  left: 50%;
  min-width: 300px;
  padding: 1.5rem;
  position: absolute;
  top: 1rem;
  transform: translate(-50%, 0);
  z-index: 1;
}

.Disclosure--help ul {
  font-size: 14px;
  padding-left: 0;
}

/*! #endregion */

.infotip {
  cursor: help;
  position: relative;
  z-index: 1;
}

.infotip::before {
  background: hsl(0deg 0% 0%);
  background: var(--color-black);
  border-radius: 0.3125rem;
  color: #fff;
  content: attr(data-infotip);
  font-family: monospace, monospace;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  height: auto;
  line-height: 1;
  max-width: 10rem;
  opacity: 0;
  outline: 3px solid hsl(0deg 0% 0%);
  outline: 3px solid var(--color-black);
  outline-offset: -1px;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-transform: none;
  transform: none;
  transition:
    transform 0.25s 0.2s ease-out,
    opacity 0.25s 0.2s ease-out,
    top 0.25s 0.2s ease-out;
  white-space: normal;
  width: -moz-max-content;
  width: max-content;
  z-index: 3;
}

.infotip::after {
  content: "";
  height: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition:
    transform 0.25s 0.2s ease-out,
    opacity 0.25s 0.2s ease-out,
    top 0.25s 0.2s ease-out;
  width: 0;
  z-index: 2;
}

@media (max-width: 767px) {
  .infotip::before,
  .infotip::after {
    content: none;
  }
}

.infotip:hover::after,
.infotip:hover::before {
  opacity: 1;
}

.Legend--hasInstructions .infotip-bottom {
  margin: -15px -2.5rem -15px -24px;
  padding: 15px 3rem 15px 24px;
}

.infotip-bottom::before {
  right: 50%;
  top: calc(100% + 0.375rem);
  transform: translate(50%, 0);
}

.infotip-bottom-left::before {
  right: 0;
  top: calc(100% + 0.375rem);
}

.infotip-bottom-right::before {
  left: 0;
  right: auto;
  top: calc(100% + 0.375rem);
}

.infotip-bottom-right::after {
  left: 0;
  right: auto;
  top: calc(100% + 0.375rem);
}

.infotip-bottom:hover::before {
  transform: translate(50%, 0.625rem);
}

.infotip-bottom-left:hover::before,
.infotip-bottom-right:hover::before {
  transform: translate(0, 0.625rem);
}

.infotip-bottom::after,
.infotip-bottom-left::after,
.infotip-bottom-right::after {
  border-bottom: 0.375rem solid #000;
  border-left: 0.375rem solid transparent;
  border-right: 0.375rem solid transparent;
  right: 50%;
  top: 100%;
  transform: translate(50%, 0);
}

.infotip-bottom:hover::after,
.infotip-bottom-left:hover::after,
.infotip-bottom-right:hover::after {
  transform: translate(50%, 0.625rem);
}

.infotip-top::before {
  bottom: 100%;
  right: 50%;
  transform: translate(50%, -0.5rem);
}

.infotip-top:hover::before {
  transform: translate(50%, -1rem);
}

.infotip-top::after {
  border-left: 0.375rem solid transparent;
  border-right: 0.375rem solid transparent;
  border-top: 0.375rem solid #000;
  bottom: 100%;
  right: 50%;
  transform: translate(50%, -0.125rem);
}

.infotip-top:hover::after {
  transform: translate(50%, calc(-0.5rem - 0.125rem));
}

.infotip-right::before {
  bottom: 50%;
  left: 100%;
  transform: translate(1em, 50%);
}

.infotip-right::after {
  border-bottom: 6px solid transparent;
  border-right: 6px solid #000;
  border-top: 6px solid transparent;
  right: 0%;
  top: 50%;
  transform: translate(1em, -50%);
}

/* Implementation 4 */

.ttip {
  --r: 20px;

  /* radius */
  --t: 10px;

  /* the arrow/tail size */
  --a: 90deg;

  /* the angle of the tail */
  --p: 50%;
  background: linear-gradient(135deg, #000, #000) border-box;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin: 20px;
  -webkit-mask: 0;
  mask: 0;
  -webkit-mask: var(--m);
  mask: var(--m);
  -webkit-mask: var(--m);
  mask: var(--m);
  max-width: 15rem;

  padding: calc(2 * 20px / 3);

  padding: calc(2 * var(--r) / 3);
  text-align: center;

  /* the position */

  width: -moz-fit-content;

  width: fit-content;

  --_main:
    conic-gradient(at var(--r) var(--r), #000 75%, rgba(0, 0, 0, 0) 0) calc(var(--r)/-2) calc(var(--r)/-2) padding-box,
    radial-gradient(ellipse at 50% 50%, #000 98%, rgba(0, 0, 0, 0)) 0 0/var(--r) var(--r) space padding-box;
  --_g: rgba(0, 0, 0, 0), #000 1deg var(--a), rgba(0, 0, 0, 0) calc(var(--a) + 1deg);
}

.ttip.top {
  --m: conic-gradient(from calc(180deg - var(--a)/2) at var(--p) 0%, var(--_g)) top/100% 50% no-repeat, var(--_main);

  border-top: var(--t) solid #000;
}

.ttip.bottom {
  --m: conic-gradient(from calc(var(--a)/-2) at var(--p) 100%, var(--_g)) bottom/100% 50% no-repeat, var(--_main);

  border-bottom: var(--t) solid #000;
}

.ttip.left {
  --m: conic-gradient(from calc(90deg - var(--a)/2) at 0% var(--p), var(--_g)) left/50% 100% no-repeat, var(--_main);

  border-left: var(--t) solid #000;
}

.ttip.right {
  --m: conic-gradient(from calc(-90deg - var(--a)/2) at 100% var(--p), var(--_g)) right/50% 100% no-repeat, var(--_main);

  border-right: var(--t) solid #000;
}

/* Trigger hover only if supported (desktop) - not on iPhone */

@media (hover: hover) {
  .card:hover {
    /* Add hover styles.. */
  }
}

/*! #region --------------------------------------- UTILITIES 18__utilities.css */

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.width-100\%\@md {
  width: 100%;
}

/* https: //css-tricks.com/efficient-infinite-utility-helpers-using-inline-css-custom-properties-and-calc/  */

/* https: //codepen.io/andyford/pen/MWmzxMv?editors=0100 */

/* CSS variables assigned in inline styles do not leak out. They’re scoped only to the current element and don’t change the value of the variable globally */

[style*="--p:"] {
  padding: calc(0.25rem * 0) !important;
  padding: calc(0.25rem * var(--p)) !important;
}

[style*="--pt:"] {
  padding-top: calc(0.25rem * 0) !important;
  padding-top: calc(0.25rem * var(--pt)) !important;
}

[style*="--pr:"] {
  padding-right: calc(0.25rem * 0) !important;
  padding-right: calc(0.25rem * var(--pr)) !important;
}

[style*="--pb:"] {
  padding-bottom: calc(0.25rem * 0) !important;
  padding-bottom: calc(0.25rem * var(--pb)) !important;
}

[style*="--pl:"] {
  padding-left: calc(0.25rem * 0) !important;
  padding-left: calc(0.25rem * var(--pl)) !important;
}

[style*="--px:"] {
  padding-left: calc(0.25rem * 0) !important;
  padding-left: calc(0.25rem * var(--px)) !important;
  padding-right: calc(0.25rem * 0) !important;
  padding-right: calc(0.25rem * var(--px)) !important;
}

[style*="--py:"] {
  padding-bottom: calc(0.25rem * 0) !important;
  padding-bottom: calc(0.25rem * var(--py)) !important;
  padding-top: calc(0.25rem * 0) !important;
  padding-top: calc(0.25rem * var(--py)) !important;
}

[style*="--m:"] {
  margin: calc(0.25rem * 0) !important;
  margin: calc(0.25rem * var(--m)) !important;
}

[style*="--mt:"] {
  margin-top: calc(0.25rem * 0) !important;
  margin-top: calc(0.25rem * var(--mt)) !important;
}

[style*="--mr:"] {
  margin-right: calc(0.25rem * 0) !important;
  margin-right: calc(0.25rem * var(--mr)) !important;
}

[style*="--mb:"] {
  margin-bottom: calc(0.25rem * 0) !important;
  margin-bottom: calc(0.25rem * var(--mb)) !important;
}

[style*="--ml:"] {
  margin-left: calc(0.25rem * 0) !important;
  margin-left: calc(0.25rem * var(--ml)) !important;
}

[style*="--mx:"] {
  margin-left: calc(0.25rem * 0) !important;
  margin-left: calc(0.25rem * var(--mx)) !important;
  margin-right: calc(0.25rem * 0) !important;
  margin-right: calc(0.25rem * var(--mx)) !important;
}

[style*="--my:"] {
  margin-bottom: calc(0.25rem * 0) !important;
  margin-bottom: calc(0.25rem * var(--my)) !important;
  margin-top: calc(0.25rem * 0) !important;
  margin-top: calc(0.25rem * var(--my)) !important;
}

.place-center {
  align-items: center;
  display: grid;
  justify-items: center;
  place-items: center;
}

/*! #endregion */

/* @import '99__debug.css'; */

/*! #region --------------------------------------- HELPERS */

@media (max-width: 767.98px) {
  .content {
    margin: 0 1em;
    padding: 1rem 0 3rem;
  }
}

@keyframes disclosureFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.check label:focus-within {
  outline: 2px dashed #c03 !important;
}

.ttt {
  background: hsl(200deg 70% 95%);
  border-bottom-left-radius: 0.125rem;
  border-bottom-right-radius: 0.125rem;
  box-shadow: 0 0 0 0.25rem hsl(200deg 70% 95%);
  margin-block-start: -0.25rem;
  margin-top: -0.25rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    opacity 0.25s,
    padding 0s 0.25s,
    max-height 0.25s ease-in-out;
}

.ttt ul {
  padding-left: 1rem;
}

.cname:focus + .ttt {
  font-size: 14px;
  margin-bottom: 0.75rem;
  max-height: 100vh;
  opacity: 1;
  padding: 1rem;
  transition:
    opacity 0.25s 0.2s,
    padding 0s 0s,
    max-height 0.25s ease-in-out;
  transition-delay: 0s;
}

.content__container {
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;

  max-width: 960px;
  width: min(960px, 100% - 4rem);
}