/* The outermost app element — a full-height ground the themed tree renders on. */

.q2IaYdQ45a6WWwfPTP5O {
  width: 100%;
  min-height: 100vh;
}

/* The app shell ground: surface token, no border, no radius, and deliberately NO max-width — the
   1464px cap lives on each section row (PageSection), not here; a cap here would narrow every page. */
.uIPN4JCscaMpbv6Oh1VW {
  width: 100%;
  min-height: 100vh;
  background-color: var(--carina-background-color-surface);
}

/* The sticky Back / Cancel / Next bar. The 1464px content width matches PageSection.module.css;
   the box-shadow is a bespoke elevation with no matching token, so it stays a literal. */
.d962P55eeOGWyRKrOvUC {
  position: sticky;
  bottom: 0;
  background-color: var(--carina-background-color-surface);
  box-shadow: 0 -4px 8px -2px rgb(0 0 0 / 25%);
}

.DiYD4BlJhtTvSkhT1NDk {
  max-width: 1464px;
  margin: auto;
}

.aB6VFEE7JQ2NzeeNDrr6 {
  display: flex;
  align-items: center;
  gap: var(--carina-spacing-4);
  margin: 0 var(--carina-spacing-10);

  /* A half-step of breathing room above and below the buttons. */
  padding: var(--carina-spacing-2) 0;
}

/* Pins the first item (Back) to the left edge and lets Cancel + Next/Submit collect on the right;
   if Back is ever absent, whatever comes first is the one pinned left. */
.aB6VFEE7JQ2NzeeNDrr6 > *:first-child {
  margin-right: auto;
}

/* Narrow viewports: the 40px side margins are what shrink. */
@media only screen and (max-width: 30em) {
  .aB6VFEE7JQ2NzeeNDrr6 {
    gap: var(--carina-spacing-2);
    margin: 0 var(--carina-spacing-4);
  }
}

/* The shared confirm/cancel dialog body, used by five call sites in `src/dialogs/`
   (RemoveHotel, CancelRequest, RoomsError, ErrorsOnThePage, NoRoomsAdded). It is the Modal's
   content only — the title bar and dismiss control belong to `DialogHost`. */

/* No top padding: `DialogHost`'s header already pads the panel above this. */
.vh881v_Rtard2jFpq_Qf {
  padding: 0 var(--carina-spacing-4) var(--carina-spacing-4);
}

.GsfFon6uI6acim5EHAyQ {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* The button gap is the parent's `gap`, which keeps it correct when the cancel button is hidden. */
.vKO_reRxN6MWp_jrIxvp {
  display: flex;
  justify-content: flex-end;
  gap: var(--carina-spacing-2);
  padding-top: var(--carina-spacing-2);
}

/* The submit-progress dialog's body: Carina `LoadingSpinner` over the request status lines.
   Opened non-dismissable through `containers/submit/UpdatedProgress`, so this content is the whole
   dialog — there is no title bar above it.

   ⚠ Must stay in normal flow. The Carina Modal sizes its panel to its content: taking the spinner
   out of flow collapses the panel to zero height, so its background and border paint nothing and
   the spinner centres against the viewport instead of the dialog (#g25). Centring is the Modal's
   job, and the panel's height is this padding plus the spinner and text.

   ⚠ This dialog is also the reason DialogHost has a `fallbackFocus` wrapper: a spinner and two
   lines of text contain nothing tabbable, and focus-trap throws on activation without one
   (#g24). Keep it that way — do not add a control here expecting the wrapper to become
   unnecessary elsewhere. */

.vHThzec0khi793yCbyS2 {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Generous clear space around the spinner. */
  padding: var(--carina-spacing-32) var(--carina-spacing-8);
}

.ASCBykqhHIFi6D0reZae {
  text-align: center;
  padding-top: var(--carina-spacing-6);
}

/* The two status lines under the submit-progress spinner. Layout (centring, clear space) belongs
   to Spinner.module.css; this file is only type. */

.L0KkRIPHJXqsGu6pkFkv {
  width: 100%;
}

/* The status title; this rule is the only thing sizing it. */
.reuz0lB7c4dyPWUWDRdQ {
  margin: 0;
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-header-3);
}

.N5RNL6XJJKHizQccZATB {
  padding-top: var(--carina-spacing-2);
}

/* The page shell: a full-height column with the body growing between chrome. */

.Oas3XK3DiorfYOoUJ78U {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ⚠ Both children below paint the `surface` ground themselves, because of the FIXED `height: 100vh`
   above. On any page taller than one viewport the content OVERFLOWS that box, and overflow is not
   part of an ancestor's height — so AppContainer's `.container`, which paints `surface` and is
   `min-height: 100vh`, ends exactly one viewport down and paints nothing below the fold. Down there
   only the PageSections paint, and a margin that collapses out of the last section lands on the
   BODY, which is browser white because the tokens are scoped to `.carina` (#g35): a white band
   above the footer in dark mode. A flex item is its own formatting context, so the collapsed margin
   stays inside `.contentContainer`'s box, and painting these two closes it without changing layout
   (#g84).

   The root-cause alternative is `min-height: 100vh` on `.container`, the standard sticky-footer
   pattern. Not done because it has a side effect: `.navigationContainer` is `position: sticky;
   bottom: 0`, and the fixed-height containing block is what keeps it from actually sticking on tall
   pages. With `min-height` the Back/Next bar would start pinning to the viewport bottom on long
   pages — a UX decision (tokens.md §6). */
.FfyXgeg_mZDw7Zfn2oyA {
  flex: 1 0 auto;
  background-color: var(--carina-background-color-surface);
}

.DM3toSNjzt7ZbhLECI9E {
  width: 100%;
  background-color: var(--carina-background-color-surface);
}

.uoRMc0YdyhlCByF_eEVK {
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* 6xl (40px) was chosen on review over 5xl (36px), which read short; 7xl is 48px. The weight is
   `display`, and a bold 40px reads larger than a regular 45px, so change size and weight together
   if this needs another pass. Keep in step with EventName.module.css's success-page size. */
.mVQqWMF61yrIAuoF9nC5 {
  margin: 0.67em 0;
  color: var(--carina-text-color-heading);
  /* carina.css preflight resets h1 font-size/weight to inherit (0-0-1 specificity); :where(h1) in
     typography.css has zero specificity and loses. Class selector (0-1-0) beats the preflight. */
  font-size: var(--carina-font-size-6xl);
  font-weight: var(--carina-font-weight-display);
}

.eQNEhzAkpHaBbBt4m0Ip {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-lg);
}

.eQNEhzAkpHaBbBt4m0Ip a,
.eQNEhzAkpHaBbBt4m0Ip a:visited,
.eQNEhzAkpHaBbBt4m0Ip a:active {
  color: var(--carina-text-color-primary);
  text-decoration: none;
}

.eQNEhzAkpHaBbBt4m0Ip a:hover {
  color: var(--carina-text-color-primary);
  text-decoration: underline;
}

/* Applied to the date, venue and city/state lines. Same preflight cascade as .primaryText: the size
   must be set on the class (0-1-0). header-5 (21px) is the sub-header step below the h1's header-1
   (36px). */
.dOkzS7M393zfgE_HGOLx {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-header-5);
}

.v8ROmhhpa0o9OR0q3Vmv {
  display: flex;
  justify-content: center;
  padding-top: 0.625rem;
}

.T8AC7b61o5uMDOZXcqtp {
  display: flex;
  justify-content: center;
  padding-top: 0.625rem;
}

.mc0CXKqdvtd5uC05RDWF {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--carina-border-color-soft);
  border-bottom: 1px solid var(--carina-border-color-soft);
  margin-top: auto;
}

.dVrdc_xu8WFeIyRYfRl5 {
  position: relative;
  display: block;
  border-radius: 8px;
  padding: var(--carina-spacing-6) var(--carina-spacing-14);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  margin: var(--carina-spacing-2) 0 var(--carina-spacing-8) 0;
  background-color: var(--carina-background-color-surface);
}

.SmtBWeYqvRgtndtCik1Q {
  /* Width of one date input. The calendar-icon row below offsets by exactly this to line up with the
     second (checkout) input, so keep them linked. */
  --date-input-width: 12rem;
  --rooms-input-width: 7.5rem;
  /* Height of a Carina field label above its input (body-sm line box + the label's bottom margin).
     The Find-hotels button has no label, so it offsets by this to sit level with the input row. */
  --field-label-height: calc(var(--carina-line-height-body-sm) + var(--carina-spacing-1));
  /* One gap value for both column breaks, so the button sits the same distance from the rooms input
     as the rooms input sits from the checkout date. */
  --field-gap: 1rem;

  display: flex;
  flex-flow: row;
  align-items: flex-start;
  margin-top: 2em;
  padding: 0.625rem;
}

/* Carina sizes the range picker to 100% of its container; constrain it so the two joined inputs
   read as a pair rather than stretching across the card. */
.v5LErQpiePXxfYyiqlOw .carina-textbox__container {
  width: var(--date-input-width);
}

.ZO0_Pnyou2n12OHh7FYv {
  display: flex;
  align-items: center;
  /* Sits under the checkout input, which starts one input-width in. */
  margin-left: var(--date-input-width);
}

/* Wrapper that carries the icon's test id — see the note at the call site. Kept as a flex box so it
   takes the icon's own height rather than a line box, which would nudge the row off centre. */
.OIRgjs2dc1mkDz2882bF {
  display: flex;
}

.uX_yPOrqLtaC8ujYtZFG {
  margin-left: var(--carina-spacing-2);
  color: var(--carina-text-color-base);
}

/* Width is pinned to the input, not to the widest child: the checkbox below is deliberately wider
   and overflows this column (see .individualNightsCheckbox). That keeps the Find-hotels button
   beside the *input* rather than pushed out by the checkbox label. */
.XrW2XJEt8RLkTlbbWD_g {
  display: flex;
  flex-flow: column;
  flex: 0 0 var(--rooms-input-width);
  /* Required, not incidental: flex items default to `min-width: auto`, which resolves to their
     min-content width. Without this the single-line checkbox label below would enlarge this
     column's min-content size and override the fixed basis above, pushing the Find-hotels button
     out. Pinning it to 0 lets the label genuinely overflow instead of widening the column. */
  min-width: 0;
  margin-left: var(--field-gap);
}

/* The rooms field is a 1–3 digit number, so it only needs a narrow box. */
.XrW2XJEt8RLkTlbbWD_g .carina-textbox__container {
  width: var(--rooms-input-width);
}

/* One cell per date input, each exactly the input's width and with no gap between them — the inputs
   are butted together by InputGroup, so any gap here would drift the messages off their fields. Both
   cells always render, so an end-date-only error doesn't slide under the start input. */
.rIsdVKnvPwvsxt2EwPLf {
  display: flex;
}

.rIsdVKnvPwvsxt2EwPLf > * {
  width: var(--date-input-width);
  min-width: 0;
}

/* Carina's Checkbox puts `className` on the visually-hidden <input>, so styling the component from
   the outside cannot reach the <label> that actually lays out the box and its text — that has to be
   targeted directly. `max-content` keeps the label on one line; it overflows the fixed-width column
   on purpose so the trailing words run underneath the Find-hotels button. Do not add a max-width: any cap narrower than the label re-introduces wrapping. The
   overflow does not feed back into the card's width (the column has a fixed flex basis). */
/* No margin-top here on purpose: Carina's own .carina-checkbox__label already carries
   `padding: var(--carina-spacing-2) …` (8px top), so adding a margin stacks on top of it and
   doubles the gap under the rooms input. Let Carina's padding be the only spacing. */
.XrW2XJEt8RLkTlbbWD_g .carina-checkbox__label {
  width: max-content;
}

/* No flex-grow: the button sits directly after the rooms column rather than being pushed to the far
   edge, which also lets the card shrink to its content. */
.Fn9vYwf1mc5tMcK0LlBi {
  display: flex;
  align-items: flex-start;
  margin-left: var(--field-gap);
  /* Drop past the field labels so the button is level with the inputs, not with the labels. */
  margin-top: var(--field-label-height);
}

/* Results page only (.container is the isHotelSearchType branch; the splash page uses .cardWrapper).
   The splash card is content-sized, so its button sits beside the controls; this bar is `width: 100%`,
   so the button is pushed to the right edge (#g17). */
.mc0CXKqdvtd5uC05RDWF .Fn9vYwf1mc5tMcK0LlBi {
  flex-grow: 1;
  justify-content: flex-end;
}

.DHDNf1HfiUCy6jHuq2Ce {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  border-top: 1px solid var(--carina-border-color-soft);
  margin-left: -56px;
  margin-right: -56px;
  padding-left: 16.8px;
  padding-right: 16.8px;
}

._fvIQ52ztOHJIlWSi6SV {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  border-top: 1px solid var(--carina-border-color-soft);
  margin: 0;
  padding: 0.625rem;
}

.xlW5OzyoNRH5nsBtgKBr {
  display: flex;
  flex-flow: row;
  float: left;
  padding: 0;
  color: var(--carina-text-color-danger);
  /* Matches Carina's own field-level message (`carina-form-element__form-message`); without an
     explicit size these inherit body copy and read as loud as the fields they sit under. */
  font-size: var(--carina-font-size-body-xs);
  line-height: var(--carina-line-height-normal);
}

.B08JDmI4Xlg1LpNdf1Zl {
  display: flex;
  flex-flow: row;
  float: left;
  padding: 0;
  color: var(--carina-text-color-danger);
  gap: var(--carina-spacing-1);
  /* flex-start, not center: the message wraps to two lines in a 5em column, and
     centering drops the icon below the first line it belongs to */
  align-items: flex-start;
  font-size: var(--carina-font-size-body-2xs);
}

.VA3aCLIELjIGK5jAS5N1 {
  position: relative;
  display: block;
  margin: 0.5em;
  width: 5em;
}

.Kf5GPFj_UIcw8WZggYgV {
  margin-right: var(--carina-spacing-6);
  margin-left: 0;
}

.dvIQpa8hai88MyX8hV5A {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

._kNNgeycdsfl6UF2l4NM {
  text-align: center;
  justify-content: center;
  width: 100%;
}

.wJ8WrUiJkq1U_3VBPx8Z {
  text-align: center;
  justify-content: center;
  width: 100%;
}

.Wl4FgZY21d5E12eQSymw {
  display: inline-flex;
  width: 5em;
  white-space: normal;
}

.nlcWe7sBhcQe_9UaAtIA {
  float: left;
  min-width: 5em;
}

/* Exceeding a night's threshold is a warning, not a hard error, so Carina's danger
   hairline is recolored — matches the rooms-per-night box on the card above.
   !important because their rule is 0-2-0 and carina.css loads after the CSS modules. */
.nlcWe7sBhcQe_9UaAtIA .carina-input-fieldset--error {
  border-color: var(--carina-border-color-warning) !important;
}

.nlcWe7sBhcQe_9UaAtIA .carina-textbox__container--error:focus-within > fieldset {
  outline-color: var(--carina-border-color-warning) !important;
}

/* Centers the chevron on the input, clearing the label above it:
   label line box + label margin + half the 40px input / 32px icon difference */
.lk8l0b6eVbnydDcNLNl8 {
  background: none;
  border: none;
  padding: 0;
  float: left;
  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- the trailing 4px is
     a derived geometric constant, not a spacing choice: half the 40px input / 32px icon difference
     from the comment above. Tokenising it would erase the distinction between the label's margin
     and the centring correction; tokens.md §2.5. */
  margin-top: calc(
    var(--carina-font-size-body-sm) * var(--carina-line-height-normal) + var(--carina-spacing-1) + 4px
  );
  margin-left: 0.2em;
  cursor: pointer;
  color: var(--carina-text-color-primary);
}

._c7mAUOE8MyLQR69_zsm {
  font-weight: bold;
  margin: var(--carina-spacing-2);
  margin-left: 0;
}

.ndrvV8GpX0gIUTk8VbTT {
  display: flex;
}

.t7LNmVqVVM2hoV4vjZu8 {
  display: flex;
  overflow: auto;
  max-width: 100%;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.t7LNmVqVVM2hoV4vjZu8::-webkit-scrollbar {
  display: none;
}

.NHBErXHlCdk4cUGx4Gqn {
  display: flex;
}

.FPpgXi4co7uQ_573GC5j {
  display: flex;
  margin-top: 0.7em;
  cursor: pointer;
  /* Button reset: a real <button> for keyboard access, so the UA button chrome has to be
     stripped back off. */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.FPpgXi4co7uQ_573GC5j:disabled {
  cursor: default;
}
.QKuHRYOFujhNDdm_Yb1A {
  position: relative;
  width: 100%;
  border-top: 1px solid var(--carina-border-color-soft);
  border-bottom: 1px solid var(--carina-border-color-soft);
  margin-top: auto;
}

.DWVt_S5a8cLN9ln4AO2K {
  display: flex;
  justify-content: center;
  padding-top: 0.625rem;
}

/* ⚠ 812px is the OUTER width: `box-sizing` is `border-box` app-wide (#g80), so this is a 700px
   content box plus the 56px side padding. Narrowing it squeezes the copy inside `.holdOnContent`'s
   136px side padding and wraps the body text onto an extra line.

   ⚠ Keep in sync with DuplicatedRequest.module.css, which carries a byte-identical `.cardWrapper`.
   Neither has a media query, so 812px does not yield on a narrow viewport — pre-existing; note that
   `max-width: 100%` alone would not fix it while the inner padding stays a 272px literal. */
.MdSDLef0Uof5yXCnddlm {
  position: relative;
  display: block;
  border-radius: 8px;
  padding: var(--carina-spacing-6) var(--carina-spacing-14);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  margin: var(--carina-spacing-2) 0 var(--carina-spacing-8) 0;
  background-color: var(--carina-background-color-base);
  text-align: center;
  width: 812px;
}

.MdSDLef0Uof5yXCnddlm span {
  font-weight: bold;
}

.hPgSEXrzL1msMvs6uWLX {
  padding-bottom: var(--carina-spacing-2);
}

.aJhHCIw6kYpBer8kZ2U4 {
  padding: 0 136px;
}

.D5B6dzZ7QP4T4QnkEXZj {
  position: relative;
  width: 100%;
  margin-top: auto;
  display: flex;
  justify-content: center;
}

/* ⚠ 812px is the OUTER width: `box-sizing` is `border-box` app-wide (#g80), so this is a 700px
   content box plus the 56px side padding. Narrowing it squeezes the copy inside `.cardContent`'s
   136px side padding and wraps the body text onto an extra line.

   ⚠ Keep in sync with HoldOnPanel.module.css, which carries a byte-identical `.cardWrapper`.
   Neither has a media query, so 812px does not yield on a narrow viewport — pre-existing; note that
   `max-width: 100%` alone would not fix it while the inner padding stays a 272px literal. */
.nXwGafs3t7AIkaKZcZO2 {
  position: relative;
  display: block;
  border-radius: 8px;
  padding: var(--carina-spacing-6) var(--carina-spacing-14);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  margin: var(--carina-spacing-2) 0 var(--carina-spacing-8) 0;
  background-color: var(--carina-background-color-base);
  text-align: center;
  width: 812px;
}

.nXwGafs3t7AIkaKZcZO2 span {
  font-weight: bold;
}

.z4oVh0WiqJ_iuw1DiGLg {
  padding-bottom: var(--carina-spacing-2);
}

.xdm6wzpgHODTAwAunf3Y {
  padding: 0 136px var(--carina-spacing-4);
}

/* One page section: a full-width surface band wrapping a centred, width-capped content row.

   Padding is deliberately 0 — the gaps between widgets are whatever the widgets themselves set, and
   a pad here puts a white trim around the full-bleed preview banner. 1464px is a deliberate literal:
   the site's content width, not a design-token choice. */
.mQPd2cQwhsrPFO92SgDh {
  background-color: var(--carina-background-color-surface);
}

.c4DRF0xzgVpXthWi6uPe {
  width: 100%;
  max-width: 1464px;
  margin: auto;
}

/* The event name heads every interior wizard page, directly above the search bar. 0.625rem is
   `HotelSearch.module.css` `.searchContainer`'s padding, and Carina's `.carina-label` adds none of
   its own, so this puts the event name exactly on the "Earliest check-in" label's left edge. Keep
   the two values in step. */
.VVA3wlXoFV5Q917IogWg {
  padding-left: 0.625rem;
}

/* The success page has no search bar to align to; there the rest of the header stack — PlainText,
   ManualApprovalMessage, ConfirmationMessage — indents by 1rem, so the event name matches that. */
.bCjd3RwKfNbLsdRorlUi {
  padding-left: 1rem;
}

.StYqOtk8Vq0Hgl19VxwC {
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-header-3);
  font-weight: var(--carina-font-weight-semi-bold);
}

/* The success page leads with the event name as its page title, so it steps up to the top heading
   size.

   ⚠ Keep this in step with `Headline.module.css` `.primaryText`: the success page's event name and
   the splash page's "Welcome to …" are meant to render at exactly the same size. */
.hRF1FdH819lBxWa6NTTX {
  font-size: var(--carina-font-size-6xl);
}

.jPN94HgNjoBEZlB2p8GQ {
  color: var(--carina-text-color-base);
}

.Hg9Gq_E656cnZVql6cwX {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100px;
  border: 0.0625rem solid;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  font-size: 0.75rem;
}

.ilEjpSS7X8xoLafKR_w_ {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100px;
  border: 0.0625rem solid;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  font-size: 0.75rem;
  background-color: var(--carina-background-color-primary);
  color: var(--carina-text-color-on-primary);
}
.M33w3QDh6vX7Ph2COV2F {
  margin-top: 1.5rem;
  height: 0.25rem;
  display: flex;
  align-items: center;
}

.LdwQEUTJxXDWfjd9LC1k {
  margin-right: 0.125rem;
  height: 0.125rem;
  width: 7.812rem;
  background-color: var(--carina-background-color-primary);
}

.e6SbMKlyoVdatJeEPSfH {
  margin-left: 0.125rem;
  height: 0.125rem;
  width: 7.812rem;
  background-color: var(--carina-background-color-primary);
}

.kppfCleWH5Qd0Swy0tYZ {
  margin-right: 0.125rem;
  height: 0.125rem;
  width: 7.812rem;
  background-color: var(--carina-border-color-base);
}

.TrzhWeXHS19LSe6Zwh36 {
  margin-left: 0.125rem;
  height: 0.125rem;
  width: 7.812rem;
  background-color: var(--carina-border-color-base);
}

.esAPbo_Ped2G5dD53Yt2 {
  height: 0.125rem;
  width: 7.812rem;
  background-color: transparent;
}

._YWZCvxcdLNpW5uyxKw8 {
  margin-top: 0.75rem;
  font-size: var(--carina-font-size-sm);
}
.tXeD9mRtg5GuTf03kUpe {
  display: flex;
  /* Inherited by each Step's <p>, which is what centres the step names under their icons. */
  text-align: center;
  /* ⚠ `justify-content` is what centres the steps: this is a `display: flex` box in a plain block
     parent, so it takes `width: auto` (full width) and horizontal `auto` margins compute to 0 —
     `margin: auto` alone centres nothing here. */
  justify-content: center;
  margin: auto;
}
/* One hotel card in the results list. */
.zmcKSEEcQAuHvcBxi5GA {
  display: flex;
  padding: var(--carina-spacing-4);
  border-radius: 10px;
  box-shadow: 0 8px 20px 0 rgb(0 0 0 / 6%);
  margin-bottom: var(--carina-spacing-4);
}

/* Small-screen breakpoint. */
@media only screen and (max-width: 30em) {
  .zmcKSEEcQAuHvcBxi5GA {
    flex-direction: column;
  }
}

.H6irf7zyFLgtkSsjwko1 {
  width: 258px;
  flex-shrink: 0;
  align-self: stretch;
  height: 175px;
  object-fit: cover;
}

.UgjHj0tsV3h9CpBC4NSx {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  margin-left: var(--carina-spacing-4);
  margin-right: var(--carina-spacing-4);
  align-items: flex-start;
}

.Uu74R5c06Ae_Rz8waHjA {
  display: flex;
}

.uzu_aXk84WkX7CNZ5kWj {
  padding-right: var(--carina-spacing-4);
  font-size: var(--carina-font-size-header-5);
  font-weight: var(--carina-font-weight-normal);
  color: var(--carina-text-color-base);
}

.hYgQdGQM0Gs6QzDs5uSK {
  padding-top: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.Ad7kax50QyTcPbmBldU7 {
  position: relative;
  margin-top: auto;
}

/* --- Availability card ------------------------------------------------------------------ */

.CdQhN5XIChx7hzUiUUfk {
  display: flex;
  padding: var(--carina-spacing-4);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--carina-spacing-3);
  align-self: stretch;
  border-radius: 10px;
  background: var(--carina-background-color-surface-alt);
}

.FoXY2DTd5zEJZJyr4Oo6 {
  display: flex;
  align-items: center;
  gap: var(--carina-spacing-2);
  flex-wrap: wrap;
}

/* ⚠ This class lands on the <svg> itself, NOT on a wrapper — Carina's own `Icon`
   (`@cvent/carina/components/Icon`) forwards `className` and writes its `size` as SVG width/height
   *attributes*, which a stylesheet outranks. So no wrapper and no `!important` here. This is the
   opposite of the `@cvent/carina-icon` glyphs (EventPin, HotelPinPopover, ScrollArrow), which drop
   `className` and write width/height inline — those need a wrapper span plus `!important` (#g3).
   Check which family an icon comes from before writing a rule for it. */
._GSTieTiThgPPYnRtEnd {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  width: 13.619px;
  height: 19.5px;
}

.oEC8wp93xquL2JTly9rN,
.GGTx23wJJHAaxjLKDg2O {
  font-size: var(--carina-font-size-body-md);
  font-style: normal;
  font-weight: var(--carina-font-weight-bold);
  line-height: normal;
  color: var(--carina-text-color-base);
}

.OM21Yaw90vkSuVwf1J3t {
  display: flex;
  width: 392px;
  align-items: center;
  gap: var(--carina-spacing-4);
}

.uqMR8kmOVjl5XwYQmxL7 {
  display: flex;
  align-items: center;
  gap: var(--carina-spacing-1);
}

.EflHLh1yXkKQGRtwGDb9 {
  display: flex;
  align-items: center;
  gap: 0;
}

/* --- Actions column --------------------------------------------------------------------- */

.oyuGqvHo5mCHNwWAVd1p {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 245px;
  border-left: 1px solid var(--carina-border-color-soft);
}

@media only screen and (max-width: 30em) {
  .oyuGqvHo5mCHNwWAVd1p {
    border-left: 0;
    border-top: 1px solid var(--carina-border-color-soft);
  }
}

.f4Xg_QnW0w0GhVFWFBcE {
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.rD09ipzOb6_JoR3W5ZUn {
  padding-bottom: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-lg);
  font-weight: var(--carina-font-weight-bold);
  color: var(--carina-text-color-base);
}

/* Carina's `size` prop cannot set this 18px label — `md` and `lg` are BOTH
   `--carina-font-size-body-md` (16px); the prop only changes padding and min-height — so the size
   has to come from CSS, scoped through the wrapper to outrank `.carina-button--md`. */
.o7SdbkkVksRL48sv73OZ .carina-button {
  font-size: var(--carina-font-size-body-lg);
}

/* The just-removed state borrows Carina's disabled *appearance*. `carina.css`'s own disabled button
   does not recolour at all: `.carina-button--disabled { transform: none; cursor: default; opacity:
   var(--carina-opacity-40) }`. Using that mechanism means this state composes with whatever `lined`
   already resolves to, so it rethemes automatically and there is no second colour pair to keep in
   sync (#g81).

   ⚠ The button stays ENABLED — this is "click to undo", not a disabled control — so we borrow the
   disabled *appearance* only, never `isDisabled`. Carina has no "transitive / just-acted-on" role,
   and opacity is the closest thing the DS actually ships.

   ⚠⚠ THIS APPLIES HERE AND NOT IN HotelPinPopover, even though both modules have a `.removeButton`.
   The states are different: this one is applied on `justRemoved` — transient local state, a
   momentary "Removed" flash — where reading as inert is exactly right. The popover applies its copy
   on `isHotelSelected`, a PERSISTENT state whose button is a live "Remove" action, where opacity
   made a permanent primary action look disabled. Do not re-unify them.

   ⚠ Contrast is NOT fixed by this and is not a token problem. The label lands at ~1.83:1 light /
   ~2.27:1 dark against the card — far below the 4.5:1 WCAG AA minimum for an interactive control,
   and the disabled exemption does not apply because the control is live. The cause is a clickable
   control styled to look inert; that needs a design answer, not a different token. Tracked in
   docs/carina/tokens.md §6.

   Scoped through the wrapper (0-2-0) because a bare class cannot beat `.carina-button` on source
   order — see #g19. `.selectButton` still supplies the font size; the JSX applies both. */
.u7F4FIXfXkdmXCpucRAj .carina-button {
  opacity: var(--carina-opacity-40);
}

.eIMVCx_D3nAec6zsbNJ1 .carina-button {
  font-size: var(--carina-font-size-body-sm);
}

/* Carina's `ghost` paints a `surface-hover` fill on hover; this button must have no background in
   any state.

   ⚠ `!important` is deliberate here, not laziness. Carina's rule is *variant*-qualified:
   `.carina-button--brand.carina-button--ghost:hover:not(--disabled):not(--phase2)` = 0-5-0, and
   carina.css is emitted after the CSS modules, so a tie loses (#g19). Restating their compound
   behind the wrapper also lands on 0-5-0 and silently does nothing. Beating it on specificity means
   naming `--brand` — which hard-codes the default `variant` — or leaning on a stray element
   selector in the chain. `!important` says "never paint a hover fill" without depending on either.

   The hover *colour* change is left alone: it is the remaining hover affordance, and it matches the
   sort options. Same rule in HotelPinPopover.module.css, RoomListItem.module.css (Show more) and
   ReviewSubmit.module.css (Edit) — the four must move together. */
.eIMVCx_D3nAec6zsbNJ1 .carina-button:hover {
  background-color: transparent !important;
}

.S61bhJCHWSK5SVgWhyEY {
  flex: 1;
  min-height: 300px;
}

/* ⚠ Everything inside the map renders in Roboto without this, including OUR components.
   The Google Maps JS API injects its own stylesheet and puts `font-family: Roboto, Arial,
   sans-serif` on `.gm-style`, the element it wraps the whole map in. `.carina` sets the app font
   on a wrapper far above that, and for an inherited property the NEARER ancestor wins — so
   `.gm-style` re-fonts its entire subtree. That subtree contains the hotel pins, the price
   bubbles and the pin flyout, which are our React components handed to `google-map-react` as
   children, as well as Google's own Map/Satellite controls.

   Scoping through `.mapPanelContainer` gives this 0-2-0 against Google's 0-1-0, so it wins
   without `!important`. `:global` because `.gm-style` is third-party and must not be hashed
   (#g13).

   ⚠ This reaches into another library's DOM, so treat it as best-effort: if Google renames
   `.gm-style`, or gives a specific control its own `font-family`, that part silently returns to
   Roboto. The failure mode is benign — a wrong font, never a broken map — but it is why this is
   one broad rule rather than a set of brittle per-control selectors. Check it in a visual sweep,
   not in the suite: jsdom never loads Google's stylesheet. */
.S61bhJCHWSK5SVgWhyEY .gm-style {
  font-family: var(--carina-font-family-primary);
}

/* The pin marks the event's exact lat/lng, and Google positions the element by its top-left corner,
   so this transform is what puts the glyph's *point* on that coordinate. It is calibrated to the
   52px icon below — change one and you must change the other, or the pin drifts off the location it
   is marking. Literals, not spacing tokens: this is map geometry. */
.fuJTGVvDC_DXz0Zx_HRl {
  transform: translate(-26px, -52px);
}

/* ⚠ Carina icons only accept s/m/l/xl (max 32px) and always write `width`/`height` **inline** on
   the <svg> — omitting `size` does not skip them, it falls back to 1rem. Inline styles can only be
   beaten by `!important`, so that is what sets the 52px the pin's offset above is calibrated
   against. Colour inherits via `color="currentColor"` on the icon. */
.R3hS60pDER1SSSY04ULQ {
  display: inline-flex;
}

.R3hS60pDER1SSSY04ULQ > svg {
  width: 52px !important;
  height: 52px !important;
}

/* ⚠ The fill and text are Carina GRAYSCALE PRIMITIVES on purpose, not semantic tokens. This bubble
   sits on the Google map tiles, a ground that never rethemes (light in both app themes), so the
   property that matters here is theme-STABILITY: a semantic "inverse" fill flips light in dark mode
   and would sit light-on-light on the tiles. `grayscale-95` is #242424 in both palettes (12:1
   against a tile) and `grayscale-0` is white in both — both halves on the same side of the token
   boundary (#g81). Carina's own `StatusLabel` uses primitives the same way for its `inactive`
   variant. Same pair as HotelPin's selected bubble and its CSS tip; tokens.md §2.6. */
.mSwCp_v_3_UKQKcaDxXw {
  text-align: center;
  width: 136px;
  white-space: nowrap;
  transform: translate(35%, -120%);
  padding: var(--carina-spacing-1);
  border-radius: 5px;
  background-color: var(--carina-colors-grayscale-95);
  color: var(--carina-colors-grayscale-0);
  font-size: var(--carina-font-size-body-md);
}

/* The card that opens over a selected map pin. */
.mvL4nqR_mitEj7QKIrUu {
  position: relative;
  background-color: var(--carina-background-color-surface);
  border-radius: 10px;
  box-shadow: 0 8px 20px 0 rgb(0 0 0 / 6%);
}

.eVf_AMEbdAptU0YR1STv {
  width: 300px;
  height: 150px;
  object-fit: cover;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.QH03zcsZNXXW7eAcr4TL {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--carina-spacing-4);
}

.TTz7uO1rAFVQHBPX3xgJ {
  display: flex;
  text-align: left;
}

.GXZP_gqrzGk76iDyHmYQ {
  padding-right: var(--carina-spacing-4);
  font-size: var(--carina-font-size-header-5);
  font-weight: var(--carina-font-weight-normal);
  color: var(--carina-text-color-heading);
}

.QsxF7mmc0pzOiz4pp5Z3 {
  padding-right: var(--carina-spacing-4);
}

/* `.hotelSelectedContainer` spaces the "Hotel selected" `StatusLabel`; the chip itself needs no
   rule. */

.bLEwkbXDLjhKTiY1Lp_6 {
  padding-top: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.GP0d__IhCuNe8uVw6FCA {
  position: relative;
  margin-top: var(--carina-spacing-4);
}

/* The bed glyph is absolutely positioned in the gutter this container's margin reserves. */
.uwJln_Ohu5UnuzNoE2kE {
  margin-left: var(--carina-spacing-6);
}

/* Carina writes the icon's width/height inline on the <svg> (1rem when no `size` is given), so
   `!important` is the only way to set the 28px — see the fuller note in EventPin.module.css. */
.v3etbYAQvjpwLqqjyRc3 {
  position: absolute;
  left: 2px;
  bottom: 0;
  display: inline-flex;
  color: var(--carina-text-color-base);
}

.v3etbYAQvjpwLqqjyRc3 > svg {
  width: 28px !important;
  height: 28px !important;
}

.K_Y2Fd26HgkY0Z5qNfy5 {
  margin-left: var(--carina-spacing-3);
  margin-right: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-primary);
}

.FvG3zloABfrvZF31eY3_ {
  padding-top: var(--carina-spacing-4);
  margin-left: var(--carina-spacing-4);
  margin-right: var(--carina-spacing-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid var(--carina-border-color-soft);
}

.w769KDwKDxEspzohCH8H {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--carina-spacing-2);
}

.EY8twXno4PgiLJWsQb4h {
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.RKt_UPc8ntFI4WI6gAgT {
  padding-bottom: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-lg);
  font-weight: var(--carina-font-weight-bold);
  color: var(--carina-text-color-base);
}

.Egxw1OBzmUNyxoLSbgVN {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  padding-bottom: 15px;
}

/* ⚠ These two buttons sit in a 300px popover — the width comes from `.hotelPopupImage` — and both
   labels only just fit on one line.

   `nowrap` rather than a width or a font change, because the cause is how flex measures these. The
   wrappers are flex items, so their `min-width: auto` resolves to MIN-CONTENT; while the label may
   break, min-content is the longest WORD, so the item is free to shrink below the phrase and the
   text wraps inside it. Forbidding the break makes min-content the whole phrase, and the item stops
   shrinking (same family as #g16).

   The type sizes below are deliberately not touched to solve a layout problem. If a longer
   translation overflows the 300px, the next lever is the 24px side padding `.carina-button--md`
   applies — override it through these wrappers, the way the font size and the hover already are. */
.BNt5BiX3WyRMO5YAwwas .carina-button,
.sOzpAJyGCtBiaw0R4MNw .carina-button {
  white-space: nowrap;
}

/* Carina's `size` prop cannot set this 18px label — `md` and `lg` are BOTH
   `--carina-font-size-body-md` (16px); the prop only changes padding and min-height — so the size
   comes from CSS, scoped through the wrapper to outrank `.carina-button--md`. */
.sOzpAJyGCtBiaw0R4MNw .carina-button {
  font-size: var(--carina-font-size-body-lg);
}

/* ⚠ `.removeButton` is applied by the JSX but deliberately styles nothing: what a persistent
   "selected — click to remove" button should look like is an open design question —
   docs/carina/tokens.md §6. `*-disabled` is semantically wrong for a live control, opacity reads as
   inert (tried and reverted), and the old greys were 1.93:1 against WCAG AA's 4.5:1 — do not re-add
   them with `!important` or a third class. HotelPinPopover.js stops click propagation at its root,
   so the state is observable and a treatment added here can be seen. */

.BNt5BiX3WyRMO5YAwwas .carina-button {
  font-size: var(--carina-font-size-body-sm);
}

/* Carina's `ghost` paints a `surface-hover` fill on hover; this button must not. `!important` is
   deliberate — Carina's rule is variant-qualified
   (`.carina-button--brand.carina-button--ghost:hover:…` = 0-5-0) and carina.css is emitted after
   the CSS modules, so matching their compound behind the wrapper ties and loses (#g19). Full
   reasoning in HotelListItem.module.css; the hover *colour* change is kept as the remaining
   affordance. */
.BNt5BiX3WyRMO5YAwwas .carina-button:hover {
  background-color: transparent !important;
}

/* Price bubbles on the hotel map, and the CSS triangle that points each one at its pin.

   ⚠ The selected bubble's fill/text are grayscale PRIMITIVES (`grayscale-95` / `grayscale-0`), not
   semantic tokens, because the bubble sits on map tiles that never retheme — the note in
   EventPin.module.css has the reasoning. The tip below must stay the same colour as the bubble it
   points at, so the two share the token. */
.Ds2AmUuzxXGxuxCn2es2 {
  display: inline-block;
  white-space: nowrap;
  padding: var(--carina-spacing-2);
  border-radius: 5px;
  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-md);
  box-shadow: 0 2px 10px 1px rgb(0 0 0 / 50%);
}

._bwIY9Xy8ESA0C1M0A5T {
  display: inline-block;
  white-space: nowrap;
  padding: var(--carina-spacing-2);
  border-radius: 5px;
  background-color: var(--carina-colors-grayscale-95);
  color: var(--carina-colors-grayscale-0);
  font-size: var(--carina-font-size-body-md);
}

/* A zero-height div at the top of the tip, positioning the bubble a fixed distance above it. */
._w282j9TsSoaYGQ_CIVx {
  position: absolute;
  bottom: 8px;
  transform: translate(-50%);
  text-align: center;
}

/* The tip itself: an 8px-high, 12px-wide CSS triangle. */
._w282j9TsSoaYGQ_CIVx::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--carina-background-color-surface);
}

/* The selected pin lifts above its neighbours so its bubble is not overlapped, and its tip has to
   match the dark bubble. Applied *alongside* `.popupBubbleAnchor` via `cx()` rather than with
   `composes`, which this codebase does not use anywhere. */
.zCH46Qn1Av4MrqFdFNo3 {
  z-index: 1;
}

.zCH46Qn1Av4MrqFdFNo3::after {
  border-top-color: var(--carina-colors-grayscale-95);
}

.yAqSdVoo5tJckOlPVsL9 {
  background: var(--carina-background-color-surface);
  border-radius: var(--carina-border-radius-lg);
  padding: var(--carina-spacing-4);
  min-width: 200px;
  max-width: 320px;
}

.gdiGoWO01iMmVHYxWOWs {
  font-weight: var(--carina-font-weight-bold);
  font-size: var(--carina-font-size-body-md, 1rem);
  color: var(--carina-text-color-heading);
  margin-bottom: var(--carina-spacing-2);
}

._0JkOUy347nDoi2slk8e {
  font-size: var(--carina-font-size-body-sm, 0.875rem);
  color: var(--carina-text-color-secondary);
}

.J_jxFtClUPlioizuPqfu {
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  padding: var(--carina-spacing-1) var(--carina-spacing-3);
  gap: var(--carina-spacing-2);
  background: var(--carina-background-color-background);
  border: 1px solid var(--carina-border-color-soft);
  border-radius: 9999px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--carina-text-color-base);
}

.pCCmbHlDfCtc86j0mrIU {
  transform: translate(-16px, -32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}

.hy_3OUJD2CkHVouOemAN {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

._uotJI4bICgBJ7bb9J1g {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px;
  gap: 10px;
  background: var(--carina-background-color-surface-inverse);
  border-radius: var(--carina-border-radius-full);
  color: var(--carina-text-color-on-primary);
}

.ByfAiNzz2NQjrWalaIpO {
  display: inline-flex;
}

.ZDeb0TrjP1mzkoIAJrks {
  margin-top: var(--carina-spacing-1);
  white-space: nowrap;
  font-size: var(--carina-font-size-body-xs);
  font-weight: var(--carina-font-weight-semi-bold);
}

/*
 * GoogleMapReact places the child's top-left corner at the lat/lng coordinate.
 * We offset by -11px (half the 22px dot) so the dot's centre sits on the coordinate.
 * Fixed-pixel transform — does NOT change when the label or popover opens/closes.
 *
 * display: flex + align-items/justify-content centres the dot within the 22×22 box,
 * so when it grows to 28px on hover it extends 3px past each edge symmetrically and
 * the coordinate stays pinned.
 */
.UL8O4cHOa4ZuLveQNUwW {
  position: relative;
  transform: translate(-11px, -11px);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.OoBL7IyS8fRqPnQGzKAQ {
  z-index: 1;
}

.KubeSljceCXIYNKzjV10 {
  z-index: 10;
}

/*
 * Badge indicator overrides — all four need !important because Badge applies its own
 * classes at equal specificity.
 */
.ncZpXk7MgPfSSxgpOvoF {
  width: 22px !important;
  height: 22px !important;
  background: var(--carina-text-color-primary) !important;
  transform: none !important;
  box-shadow: 0 0 0 2px var(--carina-background-color-background);
  transition: width 0.1s ease, height 0.1s ease;
  flex-shrink: 0;
}

/* Dot grows centred on hover; flex centering on .anchor keeps it on the coordinate. */
.KubeSljceCXIYNKzjV10 .ncZpXk7MgPfSSxgpOvoF {
  width: 28px !important;
  height: 28px !important;
  background: var(--carina-colors-primary-60) !important;
}

/* Outline dot while its quick view is open. */
.OoBL7IyS8fRqPnQGzKAQ .ncZpXk7MgPfSSxgpOvoF {
  background: var(--carina-colors-primary-60) !important;
  box-shadow: 0 0 0 2px var(--carina-colors-primary-60);
}

/* ──────────────────────────────────────────────────────────────────────────
   Label — always in the DOM (visibility: hidden when not shown) so the
   resolver can measure its natural size before deciding whether to show it.
   display: none would measure as 0×0, breaking the collision geometry.

   LABEL_OFFSET_CSS = 33px = DOT_HALF(11) + HOVER_HALF(14) + GAP(8)
   Keep in sync with LABEL_OFFSET_CSS exported from labelCollision.js.
   ────────────────────────────────────────────────────────────────────────── */

.ViQTvXP0jqx4IWJpMNuE {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--carina-spacing-1);
  cursor: pointer;
  /* No transition — label snaps to its resolved position. */
}

.wZFwemYGVA8KNNiLgKYI {
  visibility: hidden;
  pointer-events: none;
}

/* Right of dot — label grows rightward from the dot on hover. */
.QvISCU8x33ULU7DCSVGA {
  left: 33px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

/* Left of dot — label grows leftward from the dot on hover. */
.dz1NrE_pJxIsD0DNOW73 {
  right: 33px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: right center;
  align-items: flex-end;
}

/* Above dot — label grows upward from the dot on hover. */
.RfKOCCDSbMlR6nfmO69d {
  bottom: 33px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  align-items: center;
}

/* Below dot — label grows downward from the dot on hover. */
._Dpr0w_BC1jTVLDZDvGR {
  top: 33px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center top;
  align-items: center;
}

/*
 * Hover scale: must combine with the placement's translate to avoid overriding it.
 * The double-class selector has higher specificity than the single placement classes.
 */
.QvISCU8x33ULU7DCSVGA.gdkd9qWp8WUEQVJMjI9k,
.dz1NrE_pJxIsD0DNOW73.gdkd9qWp8WUEQVJMjI9k {
  transform: translateY(-50%) scale(1.1);
}

.RfKOCCDSbMlR6nfmO69d.gdkd9qWp8WUEQVJMjI9k,
._Dpr0w_BC1jTVLDZDvGR.gdkd9qWp8WUEQVJMjI9k {
  transform: translateX(-50%) scale(1.1);
}

.gdkd9qWp8WUEQVJMjI9k .envlrvclqIc_G6dKWBex {
  color: var(--carina-colors-primary-60);
}

.envlrvclqIc_G6dKWBex {
  font-weight: var(--carina-font-weight-semi-bold);
  font-size: var(--carina-font-size-body-sm);
  line-height: 16px;
  letter-spacing: 0;
  color: var(--carina-text-color-heading);
  white-space: normal;
}

.BJuLrqbo7kZWCrNMq9XT {
  display: inline-flex;
  align-items: center;
  gap: var(--carina-spacing-1);
  padding: var(--carina-spacing-1) var(--carina-spacing-3);
  border-radius: var(--carina-border-radius-lg);
  height: 24px;
  background: var(--carina-background-color-background);
  border: 1px solid var(--carina-border-color-base);
  font-weight: var(--carina-font-weight-semi-bold);
  font-size: var(--carina-font-size-body-sm);
  line-height: 16px;
  color: var(--carina-text-color-primary);
  white-space: nowrap;
  box-sizing: border-box;
}


.aimOl0tNJHHJgwbXSS2z {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
}

.TvrVCsgE46HeKE8IMNoJ {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.PngddGaIQdb_8it7ST1E {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 6px;
  gap: 10px;
  background: var(--carina-background-color-surface-inverse);
  border-radius: var(--carina-border-radius-full);
  color: var(--carina-text-color-on-primary);
}

.GvkpahAQKm3eGEhY_bCm {
  margin-top: var(--carina-spacing-1);
  white-space: nowrap;
  font-size: var(--carina-font-size-body-xs);
}

.IKkBxaVk7e0YJCehpbpw {
  flex: 1;
  min-height: 300px;
}

/* Pagination controls under the hotel list. */
.gXnaRT4cn_hGT07k2tgA {
  display: flex;
  justify-content: center;
}

/* Every affordance in here is a real `<button>`, so this resets the UA chrome.

   ⚠ `padding: 0` is load-bearing. `appearance: none` does NOT drop the UA's `padding: 1px 6px`, so
   `.prev`/`.next` — which set no padding of their own — would grow by ~12px each and push the page
   numbers around (#g64).

   `.pageNumber` below re-declares `padding` at the same specificity and later in the file, so it
   still wins and the number buttons keep their `0 8px`; this reset only reaches the controls that
   declare none.

   `font: inherit` matters for the same class of reason: the number buttons take their 14px from
   `.pageNumber` rather than the UA's 13.333px. */
.vpgEvt249BWY90rpNSWC {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* The UA also greys `:disabled` text on its own; `.disabled` below is still what paints it,
   applied to the same elements, so the two agree. */
.vpgEvt249BWY90rpNSWC:disabled {
  cursor: default;
}

/* Previous/next affordances. The 24px comes from the chevrons' own `size="l"` prop rather than from
   here — a `@cvent/carina-icon` glyph writes width/height into an inline style, so a stylesheet
   only reaches it with `!important` and it is clearer to let the default come from the prop. The
   small-screen step up still needs the override below. No wrapper span: the classes land on the
   button itself, which is also what lets `.disabled` grey the `currentColor` chevron. */
.kyzb3cxG01jUiu7Xj2ew,
.DP5uidPwnhlg9nnF5ouh {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  vertical-align: middle;
}

.kyzb3cxG01jUiu7Xj2ew {
  margin-right: var(--carina-spacing-2);
}

.DP5uidPwnhlg9nnF5ouh {
  margin-left: var(--carina-spacing-2);
}

/* Small-screen breakpoint. */
@media only screen and (max-width: 30em) {
  .kyzb3cxG01jUiu7Xj2ew > svg,
  .DP5uidPwnhlg9nnF5ouh > svg {
    width: 32px !important;
    height: 32px !important;
  }

  .kyzb3cxG01jUiu7Xj2ew,
  .DP5uidPwnhlg9nnF5ouh {
    border-radius: 4px;
    line-height: 1;
  }
}

.hnsPg7_eEA9gHE22nFB_ {
  color: var(--carina-text-color-disabled);
  cursor: default;
}

.N20x7iRSqMhVaeVY1pvA {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 30em) {
  .N20x7iRSqMhVaeVY1pvA {
    display: none;
  }
}

/* The transparent 4px bottom border reserves the space the current-page underline occupies, so
   numbers do not shift when the page changes. */
.twtcyXXCnWe9GH4yq50b {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  padding: 0 var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-primary);
}

/* The current-page underline is a brand/active *border*, so it takes `border-primary` (tokens.md
   §2.3), not a text colour. */
.fe5fa0jpVLLPEWXVSwxr {
  text-align: center;
  border-bottom-color: var(--carina-border-color-primary);
  font-weight: var(--carina-font-weight-bold);
  cursor: text;
}

/* The hotel results list: title, count, filter checkbox, sort control and the empty-result warning. */

/* 15px is off-grid on purpose; tokens.md §2.5. */
.z_yHOSAc1ILsuYRxPBJL {
  display: flex;
  flex: 1 1 auto;
  padding: 15px;
  min-height: 528px;
}

.Tkx9HkpofdXYKpYZIoaT {
  flex: 2;
  padding: var(--carina-spacing-6);
}

.xKFskdKqovDtVQ4IeJxE {
  font-size: var(--carina-font-size-header-2);
  font-weight: var(--carina-font-weight-normal);
  color: var(--carina-text-color-heading);
}

.Iebx1irhaOarRRqgdc8H {
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--carina-spacing-4);
}

.MuUrF7Kg5UrIfJo9WLXG {
  display: flex;
  align-items: center;
}

.v3hpwshU4WUYDhyOB0nB {
  margin-right: var(--carina-spacing-8);
  font-size: var(--carina-font-size-body-lg);
  color: var(--carina-text-color-heading);
}

/* ⚠ Carina puts `className` on the visually hidden <input>, not the wrapper — size and spacing
   rules belong on `.carina-checkbox__label` (#g14). */
.owo9YZ0yD7VTrE3rL4XQ .carina-checkbox__label {
  padding-left: 0;
  padding-bottom: 0;
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.XqY2M0eNGTHLY87ILvg0 {
  margin-left: auto;
}

/* The sort control's trigger. It is a Carina `Menu` rather than a `Dropdown` so this
   link-and-chevron look survives (see HotelList.js); Carina's menu panel renders the options. The
   trigger is a real `<button>`, so the UA chrome is reset here (#g64). */
.zhGKnWEn0BmE1Ea8sgVk {
  display: flex;
  align-items: center;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  padding-top: var(--carina-spacing-2);
  font: inherit;
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-primary);
  cursor: pointer;
}

/* The chevron's size comes from its own `size="m"` prop rather than from here — a carina-icon glyph
   writes width/height inline and only `!important` reaches it. This span is the wrapper that
   carries the class, since carina-icon forwards nothing else to the <svg> (#g74). */
.fS7cYoaVrFg8uW3bQugP {
  display: inline-flex;
  vertical-align: middle;
  padding-left: var(--carina-spacing-2);
}

.MQdXJsEa3xDhuyuhcQnP {
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

/* The `hideVenueDistance` branch, which replaces the sort dropdown with a fixed "cost" caption;
   same type as the label above. */
.RulSanDdysUZAdDvCbg6 {
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

/* The empty-result warning is a status message, so it takes the danger token. */
.YOIT05akSr5SRJ7CSqB9 {
  border: 1px solid var(--carina-border-color-danger);
  border-radius: 4px;
  text-align: center;
  padding: 1rem 0;
}

.YuLrEE072f2fpcO1yEtH {
  font-size: var(--carina-font-size-body-lg);
  font-weight: var(--carina-font-weight-bold);
  color: var(--carina-text-color-danger);
}

.uPBVZHX4brhYQVLDLIDK {
  padding: 0 var(--carina-spacing-4) var(--carina-spacing-4) var(--carina-spacing-4);
}

.V4MXUUJpcPaALUH_myxD {
  display: flex;
  justify-content: flex-end;
}

.iktvcN5EiZgCvGHnt41G {
  margin: 0 var(--carina-spacing-2) var(--carina-spacing-2) 0;
}
.FvDu6KMsWUUNs7mnp9RP {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  width: 100%;
}

.bNPUd5uqxCoLiUK1qSIT {
  padding-top: 10px;
  padding-bottom: 15px;
  width: 100%;
}

.uywBXsNbDEXXY36iOTSC {
  font-size: var(--carina-font-size-header-3);
}

.mYheAVwAvhabiAq32v7q {
  font-size: var(--carina-font-size-body-md);
  padding-top: var(--carina-spacing-2);
}

.IdWZIJ34ohT0Yu4Hca45 {
  padding-top: 10px;
  padding-bottom: 25px;
}

.Yq5GH5ivh7Gf9CQ5_ngr {
  font-size: var(--carina-font-size-header-5);
  padding-bottom: var(--carina-spacing-1);
}

/* The 25px/15px are off-grid on purpose; tokens.md §2.5. */
.g5K5Kd9hKApHBA6eTeEZ {
  padding-top: 25px;
  padding-bottom: 15px;
  border-top: 1px solid var(--carina-border-color-soft);
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding-right: var(--carina-spacing-2);
}

/* A 3-column grid, zero gutter, 8px row gap. */
.b1WapgP_RIbG7B5ZGTaT {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--carina-spacing-2);
}

.uYRKz1WrLvUkwGMfFuz0 {
  overflow-y: auto;
  height: calc(100% - 200px);
  width: 100%;
}

.SMLvI_wR6Gj8zGsAMwQy {
  padding-right: var(--carina-spacing-2);
  padding-top: var(--carina-spacing-6);
}

.YMvImzV4TxOxCOfXbX6o,
.Wn9OigxyYU0irOvlNNx1,
.O9o5ZPw_XQqhBmXKdVgP {
  padding-top: var(--carina-spacing-4);
}

.uYRKz1WrLvUkwGMfFuz0 li,
.uYRKz1WrLvUkwGMfFuz0 ul {
  list-style-position: inside;
}
/* Shared table metrics — see the header comment in lib/Table/TableRow.module.css for why these are
   restated per file instead of imported. Keep in sync with TableRow.module.css and
   ScrollArrow.module.css. */
.JSuxggt74APZwVrS7Taj {
  --table-title-cell-width: 16rem;
  --table-arrow-size: 28px;

  position: relative;
  overflow-x: hidden;
  /* A light hairline, so `border-color-soft` (#g49). */
  border: solid 1px var(--carina-border-color-soft);
}

/* The title cell and the left arrow are positioned absolutely over this gutter, so the scrolling
   region starts clear of both and stops short of the right arrow. */
.dZeLqCLEWT_y33F3CmTT {
  overflow-x: scroll;
  margin-left: calc(var(--table-title-cell-width) + var(--table-arrow-size));
  margin-right: var(--table-arrow-size);

  /* Hides the scrollbar */
  -ms-overflow-style: none; /* for IE and Edge */
  scrollbar-width: none; /* for Firefox */
}

.dZeLqCLEWT_y33F3CmTT::-webkit-scrollbar {
  /* for Chrome, Safari and Opera */
  display: none;
}

.B7cVasfs5uH7wxNTbJxP {
  border: 0;
  border-collapse: collapse;
  min-width: 100%;
}

/* The "Rooms needed" footer row is shaded on the <tr> AND on every cell — it has to be, because the
   title and arrow cells are `position: absolute` and so are not painted over by the row's own
   background. `surface-alt` is the shaded-row token (tokens.md §2.1), the same one
   `TableRow.module.css` uses for its zebra rows. */
.B7cVasfs5uH7wxNTbJxP tfoot tr,
.B7cVasfs5uH7wxNTbJxP tfoot tr > * {
  background-color: var(--carina-background-color-surface-alt);
}

.o4Sk5Z21NFjOKwTvwMZE {
  position: relative;
}

/* The check mark is hung in the margin beside the count, so the number itself stays on the column's
   centre line. That is why this is out of flow and must stay out of flow: putting the glyph back
   in the flow shifts the count off the column's centre. The 24px is carina-icon's `l` step — the
   size `CheckIcon` is rendered at (1.5rem against the 16px root `globals.css` pins) — so the two
   have to move together.

   ⚠ Centre-anchored, not bottom-anchored. Lining the BOX's bottom edge up with the text baseline
   does not line the glyph up: `CheckIcon` paints a 24-unit viewBox whose path spans y 5–18, so
   ~5px of the box is empty above the check and ~6px empty below it, and the painted check stops
   ~6px short of the baseline — about half way up the digit beside it. No bottom offset fixes
   that, because the offset the glyph needs depends on padding inside someone else's viewBox.

   Centring sidesteps it: the path is centred in its own viewBox (mid-point y 11.5 of 24, half a
   pixel off box centre), so centring the box centres the check. The containing block is the
   inline `.roomsSelectedTotal` span's content box, which is font-derived — and for digits its
   mid-point lands within a pixel of their optical centre, since a digit has no descender to
   pull the two apart.

   `margin-top` of half the size rather than `translateY(-50%)`: an exact integer offset, no
   stacking context, and the size variable stays visibly load-bearing in both axes. */
.ekgjJhYhiMl5GVkgiym4 {
  --check-icon-size: 24px;

  position: absolute;
  top: 50%;
  right: 0;
  height: var(--check-icon-size);
  margin-top: calc(-0.5 * var(--check-icon-size));
  margin-right: calc(-1 * var(--check-icon-size));
}

/* `--table-arrow-size` is one of the three shared table metrics — see the header comment in
   TableRow.module.css. Declared here as well so an arrow rendered in any table container gets the
   right gutter width. */
.YIcDXMzpZXniXG8dNLC3 {
  --table-arrow-size: 28px;

  position: relative;
  height: 100%;
  width: var(--table-arrow-size);
  line-height: 3;
  cursor: pointer;
  color: var(--carina-text-color-base);
}

.g_pMTEUj9oJWTVkScYnK {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  display: flex;
}

.xM7s0I4ZwVEiOn3tpZ73 {
  right: 0;
}

.dhHt0U2ecLYdtHYf6u7V {
  /* Pulled left of the gutter so the arrow sits against the pinned title cell. */
  left: calc(-3 * var(--carina-spacing-2));
}
/* Both of TableRow's layouts live here, keyed by its `variant` prop (see TableRow.js).
   `.tableRow`…`.tableRowFinal` below are the DEFAULT `pinned` variant: a title cell and two arrow
   gutters positioned absolutely over the gutters that the caller's own `.tableWrapper` reserves.
   The `plain*` rules at the bottom are the `plain` variant.

   Shared table metrics: TableRow, ScrollArrow and RoomDetailsTable each declare the same three
   constants as custom properties on their own root element, and every use site carries the literal
   as a `var()` fallback. Keep the values in sync across the three files. */
.drFkg52jOa9wuZVXayuO {
  --table-title-cell-width: 16rem;
  --table-cell-width: 8rem;
  --table-arrow-size: 28px;

  float: left;
  min-width: 100%;
  overflow: visible;
  white-space: nowrap;
  display: flex;
}

.drFkg52jOa9wuZVXayuO:not(:first-child) {
  margin-top: -1px;
}

.Pofvq4ko8YIs1d0P8vGo {
  display: inline-block;
  width: var(--table-cell-width, 8rem);
  overflow: hidden;
}

.OdoXdCMqMcMZfLozqpbs {
  position: absolute;
  left: 0;
  width: var(--table-title-cell-width, 16rem);
  padding-left: 1em;
  flex-grow: 0;
  flex-shrink: 0;
}

.NRScacLmQGUoPaEILKZ_ {
  float: left;
  line-height: 3;
  padding: 0;
  font-weight: normal;
}

.QFixxxIsNINyOIZX5V4n {
  position: absolute;
  width: var(--table-arrow-size, 28px);
}

.QFixxxIsNINyOIZX5V4n.DMfxRPGuccW_B3GYeRj4 {
  left: var(--table-title-cell-width, 16rem);
}

.QFixxxIsNINyOIZX5V4n.IsYAn6OcppOh26MRfPtk {
  right: 0;
}

.QFixxxIsNINyOIZX5V4n.NX8ncwKOnja9C5h65awz {
  min-height: var(--table-arrow-size, 28px);
}

/* Row variants: header, zebra even rows, final row. */
.CU_pIkIpq_E3DQ83nry8 {
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-header-6);
  font-weight: var(--carina-font-weight-normal);
}

.iRz2RYbBfohBwAzldm9k {
  background-color: var(--carina-background-color-surface-alt);
}

.XDcFLmi5_sKg6ZociLP4 {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-md);
  font-weight: var(--carina-font-weight-bold);
}

/* ── The `plain` variant ──────────────────────────────────────────────────────────────────────────
   An ordinary HTML table: cells sized by the browser, no pinned title cell, no arrow gutters, no
   zebra striping. Used by ReadMoreDialog's RoomAvailabilityTable, which has no reserved gutters —
   applying the pinned rules above without them stacks every column at x=0.

   ⚠ These are deliberately DIFFERENT class names, not a media/attribute variation of the four keys
   above. Two reasons: neither variant can silently pick up the other's declarations, and the key
   names stay distinguishable under Jest, where `__mocks__/cssMock.js` returns the key name for
   every lookup. Which keys exist per variant is enforced in TableRow.js, not here. */
.TZkKCTAaD1Aft7NtdaYg {
  /* A light hairline, so `border-color-soft` rather than `-base`, which reads as black at 1px
     (#g49). */
  border: solid 1px var(--carina-border-color-soft);
  font-size: var(--carina-font-size-body-md);
  font-weight: normal;
}

.PeMp_S8EIAWEPPSb0vCq {
  font-weight: bold;
  background-color: var(--carina-background-color-surface-alt);
}

.PCCZYtgRbt7PakdIgs3h {
  padding: var(--carina-spacing-2) var(--carina-spacing-4);
}

.aTlBhhaKbaYQyjWMpY4P {
  text-align: right;
}

/* ⚠ Re-declares two UA `th` defaults. `TableRow` renders the row-title cell as a `<th>` in every
   row, header and body alike, and Carina's `preflight.css` resets `table` only and never touches
   `th` (#g80), so without this `th { font-weight: bold; text-align: center }` applies:
   RoomAvailabilityTable's whole date column renders centred and bold beside left-aligned,
   normal-weight `<td>` columns.

   `font-weight: inherit`, NOT `normal` — this rule is 0-1-1 and would otherwise outrank
   `.plainTableRowHeader` (0-1-0) and un-bold the header, which is correctly bold. Inheriting takes
   the weight from the `<tr>`, which already declares both cases: `.plainTableRow` normal for body
   rows, `.plainTableRowHeader` bold for the header.

   The pinned selector is currently INERT — its title text is a floated span carrying its own
   `font-weight: normal` (`.roomsTableCellData`), which masks both defaults — so the pinned tables
   never showed this. It is here so the masking is not what holds the line. */
.TZkKCTAaD1Aft7NtdaYg th,
.drFkg52jOa9wuZVXayuO th {
  text-align: left;
  font-weight: inherit;
}
/* The "Rooms selected" strip at the top of the Select Rooms page: a disclosure header over a
   per-night rooms-added / rooms-needed table. */

.p2euYJ9UYoESaU8JC0Ar {
  box-sizing: border-box;
  width: 100%;
  padding: var(--carina-spacing-4) var(--carina-spacing-8);
  /* A light hairline, so `border-color-soft` — `-base` reads as black at 1px (#g49). */
  border-bottom: 1px solid var(--carina-border-color-soft);
  /* Literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier); tokens.md §6. Same value as
     RoomLimitPanel.module.css `.cardWrapper`. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  margin-top: var(--carina-spacing-2);
}

/* No `align-items` here, deliberately: the label and the info icon take flexbox's `stretch` default
   and sit against the top of the 24px chevron rather than centred on it. Centring it is a design
   change, not a fix. */
.sdIeNDcI2wZj2mTNoFbz {
  display: flex;
  padding-bottom: var(--carina-spacing-2);
}

.W0FDKsvqfmHW2yMSiJYw {
  margin: 0 var(--carina-spacing-2);
}

/* Both header controls are bare glyphs, so they need the UA button chrome reset. `color` is what
   the icons resolve `currentColor` against (tokens.md §2.2: icon -> `text-base`). */
.RkCiGJaC33ZAFu_Tzz0P,
.gI6zQyRPaDThQMed5zNh {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--carina-text-color-base);
}

.gI6zQyRPaDThQMed5zNh {
  /* `InfoIcon`'s `m` step is 16px; `align-items: center` centres the glyph in the button box. */
  display: inline-flex;
  align-items: center;
}

.RkCiGJaC33ZAFu_Tzz0P:focus-visible,
.gI6zQyRPaDThQMed5zNh:focus-visible {
  outline-color: var(--carina-border-color-primary-focus);
}

/* The hotel banner at the top of the Select Rooms page: name, availability chip, address and
   distance, then the hero image. */

.cWw7HBfYyJUfDkRqXdrG {
  width: 100%;
  max-height: 550px;
  display: flex;
  flex-direction: column;
  background-color: var(--carina-background-color-surface);
  /* 15px is off-grid on purpose; tokens.md §2.5. */
  padding: 15px;
  flex: 1 1 auto;
}

.ofli8ozJOPHsoJIFAnIJ {
  padding: var(--carina-spacing-4) var(--carina-spacing-4) 0;
  display: flex;
  flex-direction: row;
}

/* header-2, not header-1: header-1 would make this the largest type on the page, above the event
   name. */
.Tl2MZ4CO3FAH7g8LdSkS {
  font-size: var(--carina-font-size-header-2);
  color: var(--carina-text-color-heading);
}

.PzgQz36Qdp3CLungWfVg {
  margin-left: var(--carina-spacing-2);
  align-self: center;
}

/* `.availabilityContainer` spaces the "Partial availability" `StatusLabel`; the chip itself needs
   no rule. */

.xkw9PSG0IQD1GStyOqQ0 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 var(--carina-spacing-4) var(--carina-spacing-6);
}

/* Address and distance share this type and must move together. */
.LmfBJU_KROk853uoOUV3,
.fRJ8FMINB7uQr_Nz1Sw4 {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.Wvg9R8RFZzU1MtsnCmdf {
  /* The 4px bottom offset optically centres the pipe. */
  padding: 0 var(--carina-spacing-2) var(--carina-spacing-1);
  color: var(--carina-text-color-base);
}

/* ⚠ Centring is FLEX here, and must stay flex. The classic inline-block-helper trick — a
   full-height helper span beside the image, both `vertical-align: middle`, inside a `text-align:
   center` box — depends on the `<img>` being an INLINE element, and Carina's preflight sets `img {
   display: block }` (#g80). A block image leaves the inline formatting context: `vertical-align`
   and `text-align` stop applying to it, so the grey box renders empty and the image escapes to
   overlap the description below it. Flex does not care what `display` the child has. */
.MvBM5RbouSTa3_FvWySe {
  height: 430px;
  margin: 0 var(--carina-spacing-4);
  /* The letterbox behind an image narrower than the banner. */
  background-color: var(--carina-background-color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.WUMtUFp8RwNl4avkh7MC {
  max-width: 500px;
  max-height: 375px;
}

/* Broken/unloaded image state. `brokenImageSection` intentionally carries none of `.imageSection`'s
   height or background, so the whole strip collapses rather than leaving a 430px grey box; the
   descendant rule then hides the <img>. The two class names are chosen by `imageLoaded` in the
   component. */
.g4Zj_5ooyo9rMAobcgAl .jrXhdF3q8LLCk54FKbaL {
  display: none;
}

.hMOyEl6NSdfiMuZD1VRY {
  display: flex;
  text-align: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding: 0 var(--carina-spacing-8);
}

.MCbz0RUqR6n8y8FLd9yV {
  cursor: pointer;
  padding: var(--carina-spacing-4) 0;
  margin: 0 var(--carina-spacing-6);
}

.MCbz0RUqR6n8y8FLd9yV:hover {
  border-bottom: 4px solid var(--carina-background-color-primary);
}

.NpnWy55XtbeBcEcA6391 {
  border-bottom: 4px solid var(--carina-background-color-primary);
}
/* The "Hotel Room Limits" card in the right-hand column of the Select Rooms page. */

.EiIKhXxMf8NS1yNzgBbw {
  display: flex;
  flex-direction: column;
  padding-left: var(--carina-spacing-4);
}

.DuiNSduL46k9poLGLUPy {
  justify-content: flex-start;
  border-radius: var(--carina-border-radius-lg);
  padding-left: var(--carina-spacing-2);
  padding-right: var(--carina-spacing-2);
  margin-top: var(--carina-spacing-4);
  margin-bottom: var(--carina-spacing-4);
  /* Literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier); tokens.md §6. Same value as
     RoomListItem.module.css `.card`. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  background-color: var(--carina-background-color-surface);
  overflow-x: auto;
}

.dDjI4YzCPNX1bsBKKMNq {
  display: flex;
  align-items: center;
  /* 5px is off-grid on purpose; tokens.md §2.5. */
  padding: var(--carina-spacing-2) var(--carina-spacing-2) 5px var(--carina-spacing-2);
}

.ZqnsE_UWGKoAZBR1Y6FA {
  font-size: var(--carina-font-size-header-5);
  color: var(--carina-text-color-base);
}

/* The info icon is the Tooltip trigger, so it has to be a real button for the tooltip to be
   reachable by keyboard. These rules strip the browser's button chrome so it renders as a bare
   glyph. */
.EDjePIHFbDtzN5yMwMch {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0 0 0 var(--carina-spacing-2);
  color: var(--carina-text-color-base);
}

.i7kBTb0lCvb2mOtaAGUL {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* The empty-state spacer: reserves the same 24px gutter the button occupies, so the date columns
   do not shift when there is nothing to scroll. */
.pDMirbf_UOB8G4QiZ1Bp {
  width: var(--carina-spacing-6);
}

/*
 * The paging control — a real <button>, not a clickable <div>, so it is focusable and exposed as
 * an actionable control. The UA resets keep it rendering as a bare glyph. The pointer cursor sits
 * on the glyph rather than the 24px container, because the button only exists when there is an
 * arrow to show.
 */
.I3qy6siTgGeByAw8YUSA {
  display: block;
  width: var(--carina-spacing-6);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  /* The glyphs are rendered with `color="currentColor"`, so this is what tokenizes them —
     `@cvent/carina-icon` writes its `color` prop into an inline `fill` and drops `className`. */
  color: var(--carina-text-color-base);
}

/* Carina's own convention for a focus ring: keep the UA outline, recolour it. */
.I3qy6siTgGeByAw8YUSA:focus-visible {
  outline-color: var(--carina-border-color-primary-focus);
}

/* One date column in the Hotel Room Limits card. */

.AZ7XIsv93MgjqMwSvl4e {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--carina-spacing-1);
}

.rWiS60RLSmVq_95DQ5OB {
  width: 4.5rem;
  text-align: center;
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.ty6vcH6AZmcYYkCxOpXz {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* Hides the room count for an unlimited (-1) date while keeping the column's height,
   so the donut stays aligned across the row. */
.iT5UWHIzEwuCjANRgYnz {
  visibility: hidden;
}

/* The ring under the room count in a RoomLimitItem column. The two arcs and the label are
   semantic tokens so a customer theme repaints them (tokens.md §5). */

/* ⚠ MARGIN, not padding, and it must stay margin. Padding on an `<svg>` is subtracted from its
   VIEWPORT under the app-wide `box-sizing: border-box` (#g80): 8px/13px of padding would come out
   of the element's own 40px height attribute and leave a 40x19 viewport.
   `DonutPercentageIndicator` draws the ring at `cy="50%"` with `r = size * 0.375` (15px), so the
   circle's centre would move to 9.5px while its radius stayed 15px, and the ring would be clipped
   flat at the top and bottom, leaving only its left and right arcs.

   Margin is never inside `box-sizing`, so the viewport stays the full 40x40 the attribute asks
   for and the ring keeps its 5px of slack. The outer footprint is 8 + 40 + 13 = 61px, and these
   are flex items, whose margins do not collapse.

   ⚠ Invisible to a CSS-only audit of box-sizing fallout: the size is a `height`/`width` ATTRIBUTE
   in the JSX, not a declaration in any stylesheet. It is the only hand-authored <svg> in `src/`
   sized that way — every other glyph comes from carina-icon.

   13px is off-grid on purpose; tokens.md §2.5. */
.arcrYaaFZg_bHhW4kDHm {
  margin: var(--carina-spacing-2) 0 13px 0;
}

/* The unfilled remainder of the ring: a hairline grey, so the soft border token (#g49). */
.ffHmgMwr8yGlpwW4qGVa {
  stroke: var(--carina-border-color-soft);
}

/* The filled arc: a brand highlight drawn as a stroke, so border-primary (tokens.md §2.3). */
.e6fJ6IFN7ZRaqYfFz6HZ {
  stroke: var(--carina-border-color-primary);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  /* Literal: the DSM defines no duration tokens. */
  transition: stroke-dashoffset 1s ease-in-out;
}

.mq2uW_plH_9jXuMWmAcV {
  fill: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
}

/* The Request Summary card in the right-hand column of the Select Rooms page. */

.zEz18bOv0XsyDT_24K0p {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding-left: var(--carina-spacing-4);
}

.arTwg8Gd0dFCMoKxd6YQ {
  display: block;
  border-radius: var(--carina-border-radius-lg);
  /* Literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier); tokens.md §6. Same value as
     RoomListItem.module.css `.card`. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  background-color: var(--carina-background-color-surface);
}

.nw9VXkUdgVUIP0F4zGdN {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--carina-border-color-soft);
  margin: var(--carina-spacing-2) var(--carina-spacing-6);
  padding-top: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);
}

.mrd11Nak1g3M_tDEl1sc {
  display: flex;
  flex-direction: column;
  padding-top: var(--carina-spacing-2);
  margin-top: var(--carina-spacing-2);
  border-top: 1px solid var(--carina-border-color-soft);
}

.h9ejUVxksvRjewQLy6Y2 {
  display: flex;
  flex-direction: column;
  padding-top: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);
}

.x_96XGI8BZlqku_aobC1 {
  display: flex;
  flex-direction: column;
  padding: var(--carina-spacing-4) var(--carina-spacing-6) var(--carina-spacing-6) var(--carina-spacing-6);
}

.Hm7kkX3fD0pouZFeztOw {
  display: flex;
  flex-direction: column;
  margin-top: var(--carina-spacing-14);
  margin-bottom: var(--carina-spacing-14);
  text-align: center;
}

.xMqNpTW_h53uVn53R9OB {
  font-size: var(--carina-font-size-header-5);
  color: var(--carina-text-color-base);
}

.qY8J3Dm5AOsb9uK4bZS0 {
  display: flex;
}

.qY8J3Dm5AOsb9uK4bZS0:not(:last-child) {
  padding-bottom: var(--carina-spacing-2);
}

.HzMr_UzigSsShC1ATrSf {
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.dFEOq6O4PoS296S8Ao4v {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.BeauXthrk_bSs3q30fy4 {
  display: flex;
}

.P14qKr4zjv4As4UA3vO1 {
  font-size: var(--carina-font-size-body-lg);
  font-weight: bold;
  color: var(--carina-text-color-base);
}

.T5bII6Jlkwkw8d7ZImVU {
  margin-bottom: var(--carina-spacing-6);
}

.gamZnlpJQSnlCTCdml3R {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.MqHxjwS0MPLTy2ZAoMTh {
  font-size: var(--carina-font-size-header-5);
  color: var(--carina-text-color-base);
}

.yslp5mjYxcnJYh04dsdw {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.C4G58aINtsTHd_TABdDN {
  margin-right: 0;
  margin-left: auto;
}

/* Carina's `size` prop cannot give an 18px label — `md` and `lg` are both body-md; the prop only
   moves padding and min-height (#g19). So the size is set here, scoped through this wrapper to
   beat Carina's own 0-1-0 rule on source order. */
.fpp5Sep__QQeFka3i6PO .carina-button {
  font-size: var(--carina-font-size-body-lg);
}

/* One room type inside a hotel's block in the Request Summary card, plus its per-night
   inventory rows. */

.ZRg2mklksIPCnhXlomNg {
  display: flex;
  flex-direction: column;
}

.vAtZWjoIjcOUNByZ843N {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  margin-bottom: var(--carina-spacing-2);
}

.VzTyirbn5pV2KoYoEtgd {
  font-size: var(--carina-font-size-body-lg);
  color: var(--carina-text-color-heading);
}

.LEV7Ouo1c8nklmYLU6rg {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* A <button>, so it carries the UA resets that keep it rendering as a bare glyph.
   `position: relative` anchors the warning glyph in the inventory rows below — but see the rule
   further down: in those rows this cell needs a HEIGHT to be a usable anchor. */
.xF6fM8fuPnJp3wLYOIWW {
  position: relative;
  display: block;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  /* ⚠ 2.25rem is the OUTER width (border-box, #g80): 1.25rem of content plus the 16px right
     padding. The two rows put different content in this cell, so a narrower declared width would
     not give them the same gutter — the header's <button> is pushed out by its chevron's
     min-content while the inventory cell, whose only child is out of flow, keeps whatever is
     declared, and the dates end up out of line with the room type name. */
  width: 2.25rem;
  padding: 0 var(--carina-spacing-4) 0 0;
  /* The gutter is a fixed column: never let a long date shrink it and pull the rows out of line. */
  flex-shrink: 0;
  color: var(--carina-text-color-base);
}

.WOaeJXIk1g5o2swg6bzM {
  flex-grow: 2;
  display: flex;
}

.U4yNfz376hHOI01NUtur {
  width: 8rem;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eWIVigzua633xbcvKXkS {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  width: 1.25rem;
  text-align: right;
  margin-right: 0;
  margin-left: auto;
  color: var(--carina-text-color-base);
}

/* Carina's own convention for a focus ring: keep the UA outline, recolour it. */
.xF6fM8fuPnJp3wLYOIWW:focus-visible,
.eWIVigzua633xbcvKXkS:focus-visible {
  outline-color: var(--carina-border-color-primary-focus);
}

.tgrIGN2ILqYE_4ChBMTI {
  width: 5rem;
  text-align: center;
  padding: 0 var(--carina-spacing-2);
}

.hKC8q9YbWxTxlw2YQGfx {
  width: 7.5rem;
  text-align: right;
  padding-right: 0;
}

/* ⚠ The inventory rows reuse the icon column, but their icon cell holds ONLY the absolutely
   positioned glyph below — no in-flow content — so it collapsed to zero height. Combined with
   `.roomTypeRowContainer`'s `align-items: flex-end`, that put the cell's top edge on the row's
   BOTTOM edge, and since the glyph is centred on that edge by the transform below, every warning
   triangle hung half an icon (~12px) beneath the date it decorates.

   Stretching the cell to the row's cross size is what makes `top: 50%` mean what it says: the row's
   height is set by the date text's line box, so the glyph then centres on the date.

   The header row is `.roomTypeInfo`, not `.roomTypeInventory`, so its disclosure <button> — which
   has real in-flow content and is correctly bottom-aligned — is untouched. */
.LEV7Ouo1c8nklmYLU6rg .xF6fM8fuPnJp3wLYOIWW {
  align-self: stretch;
}

/* The per-night rows are children of the collapsible room type above them, so their label is
   indented to show the nesting — the disclosure control is the parent's, and the dates hang off it.

   Indenting the label rather than widening the gutter keeps the warning triangle in the marker
   column directly under the disclosure chevron, and leaves the number and fee columns — both
   fixed-width — aligned across the two row types. 12px is deliberately the small step: the cell
   it borrows from holds a long localized date ("Wednesday 07/16/29") in a narrow sidebar card,
   and `--carina-spacing-4` would put that closer to wrapping. Off-grid on purpose; tokens.md §2.5. */
.LEV7Ouo1c8nklmYLU6rg .WOaeJXIk1g5o2swg6bzM {
  padding-left: var(--carina-spacing-3);
}

/* Positions the warning glyph in the icon column. The glyph is out of flow, so `left: 50%`
   resolves against `.roomTypeIcon`'s PADDING box — the whole 2.25rem gutter, 16px of right padding
   included — putting it at 18px rather than on the 20px slot the chevron occupies above it
   (chevron centre ~10px). Left as-is deliberately; changing it is a design call. The glyph itself
   is sized with the icon's `size` prop (`l` = 24px); this wrapper only positions it, because
   `@cvent/carina-icon` drops `className`. `top: 50%` is a true centre only because the anchor cell
   is stretched to the row height above. */
.YIk64LFGcYk5hkcVuGXf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

/* One hotel's block inside the Request Summary card: image + name/address, its room types,
   then the hotel's taxes/fees and tax policy. */

.uiGIET43rLxwQOQs9FaR {
  display: flex;
  flex-direction: column;
  /* A light hairline, so `border-color-soft` rather than `-base`, which reads as black at 1px (#g49). */
  border-bottom: 1px solid var(--carina-border-color-soft);
}

._d_rJveNZs1W3oFAhHwJ {
  display: grid;
  grid-template-columns: 100px 295px 30px;
  align-items: flex-start;
  padding: var(--carina-spacing-4) var(--carina-spacing-6) 0 var(--carina-spacing-6);
}

.J4Sc_BHQbHmRKZnOvn8z {
  display: flex;
  flex-direction: column;
  padding: var(--carina-spacing-4) var(--carina-spacing-6);
}

.Iej6RE5keQGLE9yoqykP {
  width: 100px;
  height: 75px;
  object-fit: cover;
  /* 5px has no Carina radius step (sm 4px, md 6px); off-grid on purpose, tokens.md §2.5. */
  border-radius: 5px;
  border: solid 1px var(--carina-border-color-soft);
  /* The placeholder behind a hotel image that is missing or still loading: `neutral-inactive` is
     the role for an inert placeholder, and nothing is layered on top of it, so it rethemes freely. */
  background-color: var(--carina-background-color-neutral-inactive);
}

.XXBUux2QRbtqWPLLCuPj {
  display: flex;
  flex-direction: column;
  margin-left: var(--carina-spacing-2);
  word-break: break-word;
}

.wF_mSy175RhSDocL4TEd {
  font-size: var(--carina-font-size-body-lg);
  color: var(--carina-text-color-heading);
}

.dlYvh7TP2ePUcB4Fv1D9 {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/*
 * The remove-hotel control. A real <button>, not a clickable <div>: a div is not focusable, is not
 * exposed as an actionable control, and `aria-label` on it does not reliably produce an accessible
 * name because a generic div has no role. `@cvent/carina-icon` glyphs carry no name of their own,
 * so the name has to come from the button (#g52).
 *
 * `display: block` plus the UA resets keep it rendering as a bare glyph right-aligned in the grid's
 * 30px third column, with no button chrome.
 */
.wTt9XN9PN_MDZyd5OZwv {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  width: 30px;
  text-align: right;
  margin-right: 0;
  margin-left: auto;
  color: var(--carina-text-color-base);
}

/* Carina's own convention for a focus ring: keep the UA outline, recolour it. */
.wTt9XN9PN_MDZyd5OZwv:focus-visible {
  outline-color: var(--carina-border-color-primary-focus);
}

.VLK9U47gv6Hg9t_sVaC5 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--carina-border-color-soft);
  padding: var(--carina-spacing-4) var(--carina-spacing-6);
}

.i_RO9HuAfArEjjKHe8_z {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pLUNTlngSuNW3PsrXtKQ div:not(:first-child) {
  padding-top: var(--carina-spacing-2);
}

.upY0AmYaWsAxe4dnqesl {
  padding: 0 var(--carina-spacing-6) var(--carina-spacing-4) var(--carina-spacing-6);
}

/* The Select Rooms page body: the room detail column on the left, the room-limit and
   request-summary cards on the right. */

.L3VgTNkV_wvy8RpZa1sw {
  display: flex;
  flex-direction: row;
  margin: var(--carina-spacing-4) var(--carina-spacing-8) 0;
}

.WxFxIo97r4Gb0NGzYjUr {
  width: 30.625rem;
  display: flex;
  flex-direction: column;
  margin: 0 0 0 auto;
}

.P67hNo6JNFVjrw0CNlvA {
  display: flex;
  text-align: center;
  justify-content: flex-start;
  border-bottom: 1px solid var(--carina-border-color-soft);
}

.b2EwWYpN1kiu05u7Wk39 {
  cursor: pointer;
  padding: var(--carina-spacing-2) var(--carina-spacing-4) var(--carina-spacing-1) var(--carina-spacing-2);
}

.b2EwWYpN1kiu05u7Wk39:hover {
  border-bottom: 4px solid var(--carina-background-color-primary);
  margin: 0;
}

.SARJbOrcDpAicQaXK2Du {
  border-bottom: 4px solid var(--carina-background-color-primary);
}
/* The "Description" section on the Select Rooms page. */

.PANBOBww55929HR1rVWy {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  /* A light hairline, so `border-color-soft` rather than `-base`, which reads as black at 1px (#g49). */
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-6);
}

/* This is an <h3>, so the size must be declared explicitly: carina.css resets headings at element
   specificity and beats typography.css's `:where()` (#g10). Kept in step with the Amenities and
   Photos section headings beside it. */
.NiuHxuFfHTYWsDfzRukC {
  font-size: var(--carina-font-size-header-3);
  font-weight: normal;
  color: var(--carina-text-color-heading);
  padding-bottom: var(--carina-spacing-2);
}

.V2pT7P36t7UEGdEXMTqi {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.w3eyOMmTrOBGWY7xjd1j {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-12);
}

.t69oao84Cp51LWdGPHX9 {
  padding-top: var(--carina-spacing-4);
}

/* ⚠ THE TWO CALLERS WANT DIFFERENT HEADINGS, chosen by the `variant` prop:

     RequestDetailsListWidget (success page, inside the Request Details card) -> `.headerStyle`
     RoomSummaryWidget (Select Rooms, a peer of the Amenities and Photos sections) -> `.headerStyleSection`

   See SelectRoomPolicy.js. */
.vHo2BFnizIOP82ghAV1A {
  margin: 0;
  padding-bottom: var(--carina-spacing-2);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-header-5);
  font-weight: var(--carina-font-weight-normal);
}

/* The Select Rooms section heading — the same size `SelectRoomAmenities` and `HotelImageGallery`
   use; all three are peer section headings on that page and must stay in step. */
.eObRiq7P0TDJnfyGf0uZ {
  margin: 0;
  padding-bottom: var(--carina-spacing-2);
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-header-3);
  font-weight: var(--carina-font-weight-normal);
}

.PreRO6c_W2dtHYjZL2XD {
  margin: 0;
  padding-bottom: var(--carina-spacing-2);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-md);
}
/* The "Photos" section on the Select Rooms page. */

.CNZhfYa6eJaMLjilvVzl {
  max-width: 968px;
  max-height: 550px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  /* A light hairline, so `border-color-soft` rather than `-base` (#g49). */
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-6);
  background-color: var(--carina-background-color-surface);
}

/* The same header style SelectRoomDescription and SelectRoomAmenities use, so all three must stay
   in step. Declared explicitly because this is an <h3> (#g10). */
.Nt6e2ox8yrVH04xOJuIw {
  font-size: var(--carina-font-size-header-3);
  font-weight: normal;
  color: var(--carina-text-color-heading);
  padding-bottom: var(--carina-spacing-2);
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--carina-ring-color-base);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--carina-ring-color-base);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: currentColor; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: var(--carina-font-family-mono); /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

html {
  font-size: 16px;
}

/* stylelint-disable selector-class-pattern */
.carina {
  font-family: var(--carina-font-family-primary);

  --carina-page-loaded: 0;
  animation: carina-page-load-flag 0ms var(--carina-transition-duration-100)
    forwards;
}

@keyframes carina-page-load-flag {
  from {
    --carina-page-loaded: 0;
  }
  to {
    --carina-page-loaded: 1;
  }
}

/* App-level base rules on the themed wrapper — the two things Carina's own globals leave to the app.

   1. BASE TEXT COLOUR. Neither Carina's `globals.css` (font-family only), its preflight (which
      inherits) nor anything in `src/` sets a `color` at the root, so without this every element
      with no `color` rule of its own would inherit the browser default — black — and be invisible
      on the dark palette. Components that set their own `color` are untouched — this works by
      inheritance, not by cascade order. Scoped to `.carina`, so all FOUR ThemeSource wrappers
      (#g35) get it, dialogs included.

   2. COLOR-SCHEME. The page never told the browser it was dark, so Chrome painted autofilled inputs
      (and native scrollbars and form chrome) from its LIGHT palette — the pale grey on a remembered
      check-in or checkout date. `color-scheme` is inherited and resolved per element, so declaring it
      on the wrapper makes Chrome's autofill fill resolve to its dark variant inside the dark theme.
      Keyed on the theme-name SUFFIX so it covers both `dark` and a future `rebrand-dark` without
      repeating the names that ThemeSource owns. If the remaining tint is still unwanted, the next
      step is the inset-box-shadow override on `input:-webkit-autofill` — not done here.
      ⚠ A cross-origin iframe inside a `color-scheme: dark` subtree paints as an opaque white box
      unless the embedding element opts back to `light` (#g83; Recaptcha.module.css does this).

   ⚠ This is a GLOBAL stylesheet, not a CSS module: `.carina` must not be hashed. It is one of two
   (carinaTailwind.css is the other); `pnpm lint:css` covers both. */
.carina {
  color: var(--carina-text-color-base);
  color-scheme: light;
}

.carina[data-carina-theme$='dark'] {
  color-scheme: dark;
}

.carina, :where(.carina[data-carina-theme="rebrand-light"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])), :where(.carina [data-carina-theme="rebrand-light"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])), :where(.carina[data-carina-theme="rebrand-dark"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])), :where(.carina [data-carina-theme="rebrand-dark"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])) {
  --carina-border-radius-none: 0px;
  --carina-border-radius-xs: 0.125rem;
  --carina-border-radius-sm: 0.25rem;
  --carina-border-radius-md: 0.375rem;
  --carina-border-radius-lg: 0.5rem;
  --carina-border-radius-xl: 0.625rem;
  --carina-border-radius-2xl: 1rem;
  --carina-border-radius-3xl: 1.5rem;
  --carina-border-radius-full: 9999px;
  --carina-border-width-0: 0px;
  --carina-border-width-1: 1px;
  --carina-border-width-2: 2px;
  --carina-border-width-4: 4px;
  --carina-border-width-8: 8px;
  --carina-box-shadow-none: 0 0 #0000;
  --carina-box-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --carina-box-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 0 6px -2px rgb(0 0 0 / 0.1);
  --carina-box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.12), 0 0 10px -4px rgb(0 0 0 / 0.1);
  --carina-box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.14), 0 2px 12px -6px rgb(0 0 0 / 0.12);
  --carina-box-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --carina-box-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --carina-box-shadow-soft: 0 8px 20px 0 rgb(0 0 0 / 0.06);
  --carina-box-shadow-hard: 0 4px 8px -2px rgb(0 0 0 / 0.25);
  --carina-box-shadow-reverse-sm: 0 -1px 2px 0 rgb(0 0 0 / 0.05);
  --carina-box-shadow-reverse-md: 0 -4px 6px -1px rgb(0 0 0 / 0.1), 0 0 6px -2px rgb(0 0 0 / 0.1);
  --carina-box-shadow-reverse-lg: 0 -10px 15px -3px rgb(0 0 0 / 0.12), 0 0 10px -4px rgb(0 0 0 / 0.1);
  --carina-box-shadow-reverse-xl: 0 -20px 25px -5px rgb(0 0 0 / 0.14), 0 -2px 12px -6px rgb(0 0 0 / 0.12);
  --carina-box-shadow-reverse-2xl: 0 -25px 50px -12px rgb(0 0 0 / 0.25);
  --carina-box-shadow-reverse-inner: inset 0 -2px 4px 0 rgb(0 0 0 / 0.05);
  --carina-breakpoint-sm: 640px;
  --carina-breakpoint-md: 768px;
  --carina-breakpoint-lg: 1024px;
  --carina-breakpoint-xl: 1280px;
  --carina-breakpoint-2xl: 1536px;
  --carina-icon-xs: 1rem;
  --carina-icon-sm: 1.25rem;
  --carina-icon-md: 1.5rem;
  --carina-icon-lg: 2rem;
  --carina-opacity-0: 0;
  --carina-opacity-5: 0.05;
  --carina-opacity-10: 0.1;
  --carina-opacity-20: 0.2;
  --carina-opacity-25: 0.25;
  --carina-opacity-30: 0.3;
  --carina-opacity-40: 0.4;
  --carina-opacity-50: 0.5;
  --carina-opacity-60: 0.6;
  --carina-opacity-70: 0.7;
  --carina-opacity-75: 0.75;
  --carina-opacity-80: 0.8;
  --carina-opacity-90: 0.9;
  --carina-opacity-95: 0.95;
  --carina-opacity-100: 1;
  --carina-ring-width-0: var(--carina-border-width-0);
  --carina-ring-width-1: var(--carina-border-width-1);
  --carina-ring-width-2: var(--carina-border-width-2);
  --carina-ring-width-4: var(--carina-border-width-4);
  --carina-ring-width-8: var(--carina-border-width-8);
  --carina-rotate-0: 0deg;
  --carina-rotate-1: 1deg;
  --carina-rotate-2: 2deg;
  --carina-rotate-3: 3deg;
  --carina-rotate-6: 6deg;
  --carina-rotate-12: 12deg;
  --carina-rotate-45: 45deg;
  --carina-rotate-90: 90deg;
  --carina-rotate-180: 180deg;
  --carina-rotate-270: 270deg;
  --carina-rotate-360: 360deg;
  --carina-rotate-negative-1: -1deg;
  --carina-rotate-negative-2: -2deg;
  --carina-rotate-negative-3: -3deg;
  --carina-rotate-negative-6: -6deg;
  --carina-rotate-negative-12: -12deg;
  --carina-rotate-negative-45: -45deg;
  --carina-rotate-negative-90: -90deg;
  --carina-rotate-negative-180: -180deg;
  --carina-rotate-negative-270: -270deg;
  --carina-rotate-negative-360: -360deg;
  --carina-scale-0: 0;
  --carina-scale-50: .50;
  --carina-scale-75: .75;
  --carina-scale-90: .90;
  --carina-scale-95: .95;
  --carina-scale-100: 1;
  --carina-scale-105: 1.05;
  --carina-scale-110: 1.1;
  --carina-scale-125: 1.25;
  --carina-scale-150: 1.5;
  --carina-scale-shrink: var(--carina-scale-95);
  --carina-scale-grow: var(--carina-scale-105);
  --carina-spacing-0: 0px;
  --carina-spacing-1: 0.25rem;
  --carina-spacing-2: 0.5rem;
  --carina-spacing-3: 0.75rem;
  --carina-spacing-4: 1rem;
  --carina-spacing-5: 1.25rem;
  --carina-spacing-6: 1.5rem;
  --carina-spacing-7: 1.75rem;
  --carina-spacing-8: 2rem;
  --carina-spacing-9: 2.25rem;
  --carina-spacing-10: 2.5rem;
  --carina-spacing-11: 2.75rem;
  --carina-spacing-12: 3rem;
  --carina-spacing-14: 3.5rem;
  --carina-spacing-16: 4rem;
  --carina-spacing-20: 5rem;
  --carina-spacing-24: 6rem;
  --carina-spacing-28: 7rem;
  --carina-spacing-32: 8rem;
  --carina-spacing-36: 9rem;
  --carina-spacing-40: 10rem;
  --carina-spacing-44: 11rem;
  --carina-spacing-48: 12rem;
  --carina-spacing-52: 13rem;
  --carina-spacing-56: 14rem;
  --carina-spacing-60: 15rem;
  --carina-spacing-64: 16rem;
  --carina-spacing-72: 18rem;
  --carina-spacing-80: 20rem;
  --carina-spacing-96: 24rem;
  --carina-spacing-px: 1px;
  --carina-spacing-0-5: 0.125rem;
  --carina-spacing-1-5: 0.375rem;
  --carina-spacing-2-5: 0.625rem;
  --carina-spacing-3-5: 0.875rem;
  --carina-text-transform-header-1: none;
  --carina-text-transform-header-5: none;
  --carina-text-transform-header-6: none;
  --carina-text-transform-m-header-1: none;
  --carina-text-transform-m-header-5: none;
  --carina-text-transform-m-header-6: uppercase;
  --carina-transition-delay-50: 50ms;
  --carina-transition-delay-100: 100ms;
  --carina-transition-delay-200: 200ms;
  --carina-transition-delay-300: 300ms;
  --carina-transition-delay-400: 400ms;
  --carina-transition-delay-550: 550ms;
  --carina-transition-delay-700: 700ms;
  --carina-transition-delay-800: 800ms;
  --carina-transition-delay-1200: 1200ms;
  --carina-transition-delay-reduced-motion: 100ms;
  --carina-transition-duration-50: 50ms;
  --carina-transition-duration-100: 100ms;
  --carina-transition-duration-150: 150ms;
  --carina-transition-duration-200: 200ms;
  --carina-transition-duration-300: 300ms;
  --carina-transition-duration-400: 400ms;
  --carina-transition-duration-550: 550ms;
  --carina-transition-duration-700: 700ms;
  --carina-transition-duration-800: 800ms;
  --carina-transition-duration-1200: 1200ms;
  --carina-transition-duration-reduced-motion: 100ms;
  --carina-transition-timing-function-expressive-ease-in: cubic-bezier(0.4, 0.14, 1, 1);
  --carina-transition-timing-function-expressive-ease-out: cubic-bezier(0, 0, 0.39, 1);
  --carina-transition-timing-function-expressive-ease-in-out: cubic-bezier(0.4, 0.15, 0.3, 1);
  --carina-transition-timing-function-productive-ease-in: cubic-bezier(0.2, 0, 1, 0.9);
  --carina-transition-timing-function-productive-ease-out: cubic-bezier(0, 0, 0.4, 0.9);
  --carina-transition-timing-function-productive-ease-in-out: cubic-bezier(0.2, 0, 0.4, 0.9);
  --carina-transition-timing-function-linear: cubic-bezier(0,0,1,1);
  --carina-z-index-0: 0;
  --carina-z-index-10: 10;
  --carina-z-index-20: 20;
  --carina-z-index-30: 30;
  --carina-z-index-40: 40;
  --carina-z-index-50: 50;
  --carina-z-index-auto: auto;
  --carina-z-index-current: 0;
  --carina-z-index-popper: 100;
  --carina-z-index-scrim: 300;
  --carina-z-index-panel: 400;
  --carina-z-index-fullscreen-modal: 800;
  --carina-z-index-modal: 1200;
  --carina-z-index-alert: 1600;
  --carina-z-index-popper-diff: 100;
  --carina-z-index-scrim-diff: -100;
  --carina-font-size-3xs: 10px;
  --carina-font-size-2xs: 12px;
  --carina-font-size-xs: 13px;
  --carina-font-size-sm: 14px;
  --carina-font-size-md: 16px;
  --carina-font-size-lg: 18px;
  --carina-font-size-xl: 21px;
  --carina-font-size-2xl: 24px;
  --carina-font-size-3xl: 28px;
  --carina-font-size-4xl: 32px;
  --carina-font-size-5xl: 36px;
  --carina-font-size-6xl: 40px;
  --carina-font-size-7xl: 48px;
  --carina-font-size-8xl: 56px;
  --carina-font-size-body-3xs: var(--carina-font-size-3xs);
  --carina-font-size-body-2xs: var(--carina-font-size-2xs);
  --carina-font-size-body-xs: var(--carina-font-size-xs);
  --carina-font-size-body-sm: var(--carina-font-size-sm);
  --carina-font-size-body-md: var(--carina-font-size-md);
  --carina-font-size-body-lg: var(--carina-font-size-lg);
  --carina-font-size-body-xl: var(--carina-font-size-xl);
  --carina-font-size-body-3xs-bold: var(--carina-font-size-3xs);
  --carina-font-size-body-2xs-bold: var(--carina-font-size-2xs);
  --carina-font-size-body-xs-bold: var(--carina-font-size-xs);
  --carina-font-size-body-sm-bold: var(--carina-font-size-sm);
  --carina-font-size-body-md-bold: var(--carina-font-size-md);
  --carina-font-size-body-lg-bold: var(--carina-font-size-lg);
  --carina-font-size-body-xl-bold: var(--carina-font-size-xl);
  --carina-font-size-mono-body-3xs: var(--carina-font-size-3xs);
  --carina-font-size-mono-body-2xs: var(--carina-font-size-2xs);
  --carina-font-size-mono-body-xs: var(--carina-font-size-xs);
  --carina-font-size-mono-body-sm: var(--carina-font-size-sm);
  --carina-font-size-mono-body-md: var(--carina-font-size-md);
  --carina-font-size-mono-body-lg: var(--carina-font-size-lg);
  --carina-font-size-mono-body-xl: var(--carina-font-size-xl);
  --carina-font-size-mono-body-3xs-bold: var(--carina-font-size-3xs);
  --carina-font-size-mono-body-2xs-bold: var(--carina-font-size-2xs);
  --carina-font-size-mono-body-xs-bold: var(--carina-font-size-xs);
  --carina-font-size-mono-body-sm-bold: var(--carina-font-size-sm);
  --carina-font-size-mono-body-md-bold: var(--carina-font-size-md);
  --carina-font-size-mono-body-lg-bold: var(--carina-font-size-lg);
  --carina-font-size-mono-body-xl-bold: var(--carina-font-size-xl);
  --carina-font-size-display-2xs: var(--carina-font-size-xl);
  --carina-font-size-display-xs: var(--carina-font-size-2xl);
  --carina-font-size-display-sm: var(--carina-font-size-3xl);
  --carina-font-size-display-md: var(--carina-font-size-4xl);
  --carina-font-size-display-lg: var(--carina-font-size-5xl);
  --carina-font-size-display-xl: var(--carina-font-size-6xl);
  --carina-font-size-display-2xl: var(--carina-font-size-7xl);
  --carina-font-size-display-3xl: var(--carina-font-size-8xl);
  --carina-font-size-mono-display-2xs: var(--carina-font-size-xl);
  --carina-font-size-mono-display-xs: var(--carina-font-size-2xl);
  --carina-font-size-mono-display-sm: var(--carina-font-size-3xl);
  --carina-font-size-mono-display-md: var(--carina-font-size-4xl);
  --carina-font-size-mono-display-lg: var(--carina-font-size-5xl);
  --carina-font-size-mono-display-xl: var(--carina-font-size-6xl);
  --carina-font-size-mono-display-2xl: var(--carina-font-size-7xl);
  --carina-font-size-mono-display-3xl: var(--carina-font-size-8xl);
  --carina-font-size-header-6: var(--carina-font-size-lg);
  --carina-font-size-header-5: var(--carina-font-size-xl);
  --carina-font-size-header-4: var(--carina-font-size-2xl);
  --carina-font-size-header-3: var(--carina-font-size-3xl);
  --carina-font-size-header-2: var(--carina-font-size-4xl);
  --carina-font-size-header-1: var(--carina-font-size-5xl);
  --carina-font-size-m-display-2xs: var(--carina-font-size-xl);
  --carina-font-size-m-display-xs: var(--carina-font-size-xl);
  --carina-font-size-m-display-sm: var(--carina-font-size-xl);
  --carina-font-size-m-display-md: var(--carina-font-size-2xl);
  --carina-font-size-m-display-lg: var(--carina-font-size-3xl);
  --carina-font-size-m-display-xl: var(--carina-font-size-4xl);
  --carina-font-size-m-display-2xl: var(--carina-font-size-5xl);
  --carina-font-size-m-display-3xl: var(--carina-font-size-6xl);
  --carina-font-size-m-header-6: var(--carina-font-size-sm);
  --carina-font-size-m-header-5: var(--carina-font-size-md);
  --carina-font-size-m-header-4: var(--carina-font-size-lg);
  --carina-font-size-m-header-3: var(--carina-font-size-xl);
  --carina-font-size-m-header-2: var(--carina-font-size-2xl);
  --carina-font-size-m-header-1: var(--carina-font-size-3xl);
  --carina-font-weight-thin: 100;
  --carina-font-weight-extra-light: 200;
  --carina-font-weight-light: 300;
  --carina-font-weight-normal: 400;
  --carina-font-weight-medium: 500;
  --carina-font-weight-semi-bold: 600;
  --carina-font-weight-bold: 700;
  --carina-font-weight-extra-bold: 800;
  --carina-font-weight-black: 900;
  --carina-font-weight-body: var(--carina-font-weight-normal);
  --carina-font-weight-body-bold: var(--carina-font-weight-semi-bold);
  --carina-font-weight-display: var(--carina-font-weight-semi-bold);
  --carina-font-weight-mono: var(--carina-font-weight-normal);
  --carina-font-weight-mono-bold: var(--carina-font-weight-bold);
  --carina-line-height-1: 12px;
  --carina-line-height-2: 16px;
  --carina-line-height-3: 20px;
  --carina-line-height-4: 24px;
  --carina-line-height-5: 28px;
  --carina-line-height-6: 32px;
  --carina-line-height-7: 36px;
  --carina-line-height-8: 40px;
  --carina-line-height-9: 44px;
  --carina-line-height-10: 48px;
  --carina-line-height-11: 52px;
  --carina-line-height-12: 56px;
  --carina-line-height-13: 60px;
  --carina-line-height-14: 72px;
  --carina-line-height-2-5: 18px;
  --carina-line-height-13-5: 64px;
  --carina-line-height-none: 1;
  --carina-line-height-tight: 1.25;
  --carina-line-height-snug: 1.375;
  --carina-line-height-normal: 1.5;
  --carina-line-height-relaxed: 1.625;
  --carina-line-height-loose: 2;
  --carina-line-height-body-3xs: var(--carina-line-height-2);
  --carina-line-height-body-2xs: var(--carina-line-height-2);
  --carina-line-height-body-xs: var(--carina-line-height-3);
  --carina-line-height-body-sm: var(--carina-line-height-3);
  --carina-line-height-body-md: var(--carina-line-height-4);
  --carina-line-height-body-lg: var(--carina-line-height-4);
  --carina-line-height-body-xl: var(--carina-line-height-5);
  --carina-line-height-display-2xs: var(--carina-line-height-5);
  --carina-line-height-display-xs: var(--carina-line-height-6);
  --carina-line-height-display-sm: var(--carina-line-height-7);
  --carina-line-height-display-md: var(--carina-line-height-8);
  --carina-line-height-display-lg: var(--carina-line-height-10);
  --carina-line-height-display-xl: var(--carina-line-height-11);
  --carina-line-height-display-2xl: var(--carina-line-height-13);
  --carina-line-height-display-3xl: var(--carina-line-height-14);
  --carina-line-height-m-display-2xs: var(--carina-line-height-5);
  --carina-line-height-m-display-xs: var(--carina-line-height-5);
  --carina-line-height-m-display-sm: var(--carina-line-height-5);
  --carina-line-height-m-display-md: var(--carina-line-height-6);
  --carina-line-height-m-display-lg: var(--carina-line-height-7);
  --carina-line-height-m-display-xl: var(--carina-line-height-8);
  --carina-line-height-m-display-2xl: var(--carina-line-height-10);
  --carina-line-height-m-display-3xl: var(--carina-line-height-11);
  --carina-line-height-header-6: var(--carina-line-height-4);
  --carina-line-height-header-5: var(--carina-line-height-5);
  --carina-line-height-header-4: var(--carina-line-height-6);
  --carina-line-height-header-3: var(--carina-line-height-7);
  --carina-line-height-header-2: var(--carina-line-height-8);
  --carina-line-height-header-1: var(--carina-line-height-10);
  --carina-line-height-m-header-6: var(--carina-line-height-3);
  --carina-line-height-m-header-5: var(--carina-line-height-4);
  --carina-line-height-m-header-4: var(--carina-line-height-4);
  --carina-line-height-m-header-3: var(--carina-line-height-5);
  --carina-line-height-m-header-2: var(--carina-line-height-6);
  --carina-line-height-m-header-1: var(--carina-line-height-7);
  --carina-font-family-primary: Rubik, Helvetica, Arial;
  --carina-font-family-secondary: Rubik, Helvetica, Arial;
  --carina-font-family-mono: 'Roboto Mono', monospace;
  --carina-font-family-body: var(--carina-font-family-primary);
  --carina-font-family-display: var(--carina-font-family-secondary);
  --carina-letter-spacing-0: 0em;
  --carina-letter-spacing-1: 0.01em;
  --carina-letter-spacing-2: 0.025em;
  --carina-letter-spacing-3: 0.05em;
  --carina-letter-spacing-4: 0.1em;
  --carina-letter-spacing-n-4: -0.04em;
  --carina-letter-spacing-n-3: -0.03em;
  --carina-letter-spacing-n-2: -0.02em;
  --carina-letter-spacing-n-1: -0.01em;
  --carina-letter-spacing-display-2xs: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-xs: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-sm: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-md: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-lg: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-xl: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-2xl: var(--carina-letter-spacing-0);
  --carina-letter-spacing-display-3xl: var(--carina-letter-spacing-0);
  --carina-letter-spacing-mono-display-2xs: var(--carina-letter-spacing-n-1);
  --carina-letter-spacing-mono-display-xs: var(--carina-letter-spacing-n-2);
  --carina-letter-spacing-mono-display-sm: var(--carina-letter-spacing-n-2);
  --carina-letter-spacing-mono-display-md: var(--carina-letter-spacing-n-3);
  --carina-letter-spacing-mono-display-lg: var(--carina-letter-spacing-n-3);
  --carina-letter-spacing-mono-display-xl: var(--carina-letter-spacing-n-4);
  --carina-letter-spacing-mono-display-2xl: var(--carina-letter-spacing-n-4);
  --carina-letter-spacing-mono-display-3xl: var(--carina-letter-spacing-n-4);
  --carina-letter-spacing-m-display-2xs: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-xs: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-sm: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-md: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-lg: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-xl: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-2xl: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-display-3xl: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-mono-display-2xs: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-mono-display-xs: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-mono-display-sm: var(--carina-letter-spacing-n-1);
  --carina-letter-spacing-m-mono-display-md: var(--carina-letter-spacing-n-2);
  --carina-letter-spacing-m-mono-display-lg: var(--carina-letter-spacing-n-2);
  --carina-letter-spacing-m-mono-display-xl: var(--carina-letter-spacing-n-3);
  --carina-letter-spacing-m-mono-display-2xl: var(--carina-letter-spacing-n-3);
  --carina-letter-spacing-m-mono-display-3xl: var(--carina-letter-spacing-n-4);
  --carina-letter-spacing-header-1: var(--carina-letter-spacing-0);
  --carina-letter-spacing-header-2: var(--carina-letter-spacing-0);
  --carina-letter-spacing-header-3: var(--carina-letter-spacing-0);
  --carina-letter-spacing-header-4: var(--carina-letter-spacing-0);
  --carina-letter-spacing-header-5: var(--carina-letter-spacing-0);
  --carina-letter-spacing-header-6: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-header-1: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-header-2: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-header-3: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-header-4: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-header-5: var(--carina-letter-spacing-0);
  --carina-letter-spacing-m-header-6: var(--carina-letter-spacing-0);
}

@media not all and (min-width: 640px) {
	.carina:not(:where([class~='not-carina-responsive-typography'])), :where(.carina[data-carina-theme="rebrand-light"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])):not(:where([class~='not-carina-responsive-typography'])), :where(.carina [data-carina-theme="rebrand-light"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])):not(:where([class~='not-carina-responsive-typography'])), :where(.carina[data-carina-theme="rebrand-dark"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])):not(:where([class~='not-carina-responsive-typography'])), :where(.carina [data-carina-theme="rebrand-dark"] [data-carina-theme]:not([data-carina-theme="rebrand-light"]):not([data-carina-theme="rebrand-dark"])):not(:where([class~='not-carina-responsive-typography'])) {
		--carina-font-size-display-2xs: var(--carina-font-size-m-display-2xs);
		--carina-font-size-display-xs: var(--carina-font-size-m-display-xs);
		--carina-font-size-display-sm: var(--carina-font-size-m-display-sm);
		--carina-font-size-display-md: var(--carina-font-size-m-display-md);
		--carina-font-size-display-lg: var(--carina-font-size-m-display-lg);
		--carina-font-size-display-xl: var(--carina-font-size-m-display-xl);
		--carina-font-size-display-2xl: var(--carina-font-size-m-display-2xl);
		--carina-font-size-display-3xl: var(--carina-font-size-m-display-3xl);
		--carina-font-size-header-6: var(--carina-font-size-m-header-6);
		--carina-font-size-header-5: var(--carina-font-size-m-header-5);
		--carina-font-size-header-4: var(--carina-font-size-m-header-4);
		--carina-font-size-header-3: var(--carina-font-size-m-header-3);
		--carina-font-size-header-2: var(--carina-font-size-m-header-2);
		--carina-font-size-header-1: var(--carina-font-size-m-header-1);
		--carina-line-height-display-2xs: var(--carina-line-height-m-display-2xs);
		--carina-line-height-display-xs: var(--carina-line-height-m-display-xs);
		--carina-line-height-display-sm: var(--carina-line-height-m-display-sm);
		--carina-line-height-display-md: var(--carina-line-height-m-display-md);
		--carina-line-height-display-lg: var(--carina-line-height-m-display-lg);
		--carina-line-height-display-xl: var(--carina-line-height-m-display-xl);
		--carina-line-height-display-2xl: var(--carina-line-height-m-display-2xl);
		--carina-line-height-display-3xl: var(--carina-line-height-m-display-3xl);
		--carina-line-height-header-6: var(--carina-line-height-m-header-6);
		--carina-line-height-header-5: var(--carina-line-height-m-header-5);
		--carina-line-height-header-4: var(--carina-line-height-m-header-4);
		--carina-line-height-header-3: var(--carina-line-height-m-header-3);
		--carina-line-height-header-2: var(--carina-line-height-m-header-2);
		--carina-line-height-header-1: var(--carina-line-height-m-header-1);
	}
}

[data-carina-theme="white"] {
  --carina-colors-inherit: inherit;
  --carina-colors-current: currentColor;
  --carina-colors-transparent: transparent;
  --carina-colors-body-background: #efefef;
  --carina-colors-accessory-0-10: #fdd1f6;
  --carina-colors-accessory-0-20: #f1aef3;
  --carina-colors-accessory-0-30: #d490f1;
  --carina-colors-accessory-0-40: #b473e9;
  --carina-colors-accessory-0-50: #8457d9;
  --carina-colors-accessory-0-60: #4d31ba;
  --carina-colors-accessory-0-70: #1c1386;
  --carina-colors-accessory-1-10: #a6f6e0;
  --carina-colors-accessory-1-20: #64e4e8;
  --carina-colors-accessory-1-30: #2fc7f0;
  --carina-colors-accessory-1-40: #17a6f8;
  --carina-colors-accessory-1-50: #0781da;
  --carina-colors-accessory-1-60: #1c4eb4;
  --carina-colors-accessory-1-70: #192887;
  --carina-colors-accessory-2-10: #b7f4ac;
  --carina-colors-accessory-2-20: #77e9a1;
  --carina-colors-accessory-2-30: #07d7a8;
  --carina-colors-accessory-2-40: #05baa5;
  --carina-colors-accessory-2-50: #059a9a;
  --carina-colors-accessory-2-60: #047885;
  --carina-colors-accessory-2-70: #02516c;
  --carina-colors-accessory-3-10: #ffe982;
  --carina-colors-accessory-3-20: #ffcc66;
  --carina-colors-accessory-3-30: #ffab00;
  --carina-colors-accessory-3-40: #ff7830;
  --carina-colors-accessory-3-50: #df4e0f;
  --carina-colors-accessory-3-60: #b22205;
  --carina-colors-accessory-3-70: #790c03;
  --carina-colors-accessory-4-10: #ffcca1;
  --carina-colors-accessory-4-20: #ffb2a3;
  --carina-colors-accessory-4-30: #ff8888;
  --carina-colors-accessory-4-40: #f05887;
  --carina-colors-accessory-4-50: #c2386c;
  --carina-colors-accessory-4-60: #891150;
  --carina-colors-accessory-4-70: #5d074a;
  --carina-colors-body-seed: #242424;
  --carina-colors-danger-0: #FFFFFF;
  --carina-colors-danger-5: #ffebe8;
  --carina-colors-danger-10: #ffe0dd;
  --carina-colors-danger-20: #fecec9;
  --carina-colors-danger-30: #fbb2aa;
  --carina-colors-danger-40: #f6978e;
  --carina-colors-danger-50: #eb645c;
  --carina-colors-danger-60: #dc222a;
  --carina-colors-danger-70: #c30002;
  --carina-colors-danger-80: #a90000;
  --carina-colors-danger-90: #820000;
  --carina-colors-danger-95: #470000;
  --carina-colors-danger-100: #000000;
  --carina-colors-danger-seed: #D9021F;
  --carina-colors-grayscale-0: #FFFFFF;
  --carina-colors-grayscale-5: #f8f8f8;
  --carina-colors-grayscale-10: #eeeeee;
  --carina-colors-grayscale-20: #dfdfdf;
  --carina-colors-grayscale-30: #cbcbcb;
  --carina-colors-grayscale-40: #b7b7b7;
  --carina-colors-grayscale-50: #959595;
  --carina-colors-grayscale-60: #757575;
  --carina-colors-grayscale-70: #646464;
  --carina-colors-grayscale-80: #575757;
  --carina-colors-grayscale-90: #424242;
  --carina-colors-grayscale-95: #242424;
  --carina-colors-grayscale-100: #000000;
  --carina-colors-grayscale-seed: #777777;
  --carina-colors-heading-seed: #242424;
  --carina-colors-info-0: #FFFFFF;
  --carina-colors-info-5: #e9f1fe;
  --carina-colors-info-10: #dbe9fd;
  --carina-colors-info-20: #c3dafb;
  --carina-colors-info-30: #a5c7f8;
  --carina-colors-info-40: #86b3f4;
  --carina-colors-info-50: #5090eb;
  --carina-colors-info-60: #0e6de2;
  --carina-colors-info-70: #0059ce;
  --carina-colors-info-80: #0048bd;
  --carina-colors-info-90: #0030a4;
  --carina-colors-info-95: #000078;
  --carina-colors-info-100: #000000;
  --carina-colors-info-seed: #006AE1;
  --carina-colors-neutral-0: #FFFFFF;
  --carina-colors-neutral-5: #eff0f1;
  --carina-colors-neutral-10: #e5e7e9;
  --carina-colors-neutral-20: #d6d8db;
  --carina-colors-neutral-30: #c1c4c8;
  --carina-colors-neutral-40: #adb1b7;
  --carina-colors-neutral-50: #8a9097;
  --carina-colors-neutral-60: #6a727b;
  --carina-colors-neutral-70: #596069;
  --carina-colors-neutral-80: #4b525b;
  --carina-colors-neutral-90: #373e47;
  --carina-colors-neutral-95: #191f27;
  --carina-colors-neutral-100: #000000;
  --carina-colors-neutral-seed: #69717A;
  --carina-colors-primary-0: #FFFFFF;
  --carina-colors-primary-5: #e9f1fe;
  --carina-colors-primary-10: #dbe9fd;
  --carina-colors-primary-20: #c3dafb;
  --carina-colors-primary-30: #a5c7f8;
  --carina-colors-primary-40: #86b3f4;
  --carina-colors-primary-50: #5090eb;
  --carina-colors-primary-60: #0e6de2;
  --carina-colors-primary-70: #0059ce;
  --carina-colors-primary-80: #0048bd;
  --carina-colors-primary-90: #0030a4;
  --carina-colors-primary-95: #000078;
  --carina-colors-primary-100: #000000;
  --carina-colors-primary-seed: #006AE1;
  --carina-colors-secondary-0: #FFFFFF;
  --carina-colors-secondary-5: #e4f3ee;
  --carina-colors-secondary-10: #d6ece5;
  --carina-colors-secondary-20: #bce0d5;
  --carina-colors-secondary-30: #98cfbf;
  --carina-colors-secondary-40: #73bfaa;
  --carina-colors-secondary-50: #01a286;
  --carina-colors-secondary-60: #008066;
  --carina-colors-secondary-70: #006d54;
  --carina-colors-secondary-80: #005d46;
  --carina-colors-secondary-90: #004732;
  --carina-colors-secondary-95: #002413;
  --carina-colors-secondary-100: #000000;
  --carina-colors-secondary-seed: #00A286;
  --carina-colors-success-0: #FFFFFF;
  --carina-colors-success-5: #e9f3e8;
  --carina-colors-success-10: #dcecda;
  --carina-colors-success-20: #c7e0c4;
  --carina-colors-success-30: #a7cea3;
  --carina-colors-success-40: #89be84;
  --carina-colors-success-50: #51a04c;
  --carina-colors-success-60: #008400;
  --carina-colors-success-70: #007000;
  --carina-colors-success-80: #006000;
  --carina-colors-success-90: #004900;
  --carina-colors-success-95: #002500;
  --carina-colors-success-100: #000000;
  --carina-colors-success-seed: #008600;
  --carina-colors-surface-0: #FFFFFF;
  --carina-colors-surface-5: #f7f7f7;
  --carina-colors-surface-10: #efefef;
  --carina-colors-surface-20: #e0e0e0;
  --carina-colors-surface-30: #cbcbcb;
  --carina-colors-surface-40: #b7b7b7;
  --carina-colors-surface-50: #959595;
  --carina-colors-surface-60: #757575;
  --carina-colors-surface-70: #646464;
  --carina-colors-surface-80: #565656;
  --carina-colors-surface-90: #424242;
  --carina-colors-surface-95: #242424;
  --carina-colors-surface-100: #000000;
  --carina-colors-surface-seed: #FFFFFF;
  --carina-colors-surface-alt: #f7f7f7;
  --carina-colors-tertiary-0: #FFFFFF;
  --carina-colors-tertiary-5: #f1eefd;
  --carina-colors-tertiary-10: #e9e4fb;
  --carina-colors-tertiary-20: #dcd4f8;
  --carina-colors-tertiary-30: #cabdf3;
  --carina-colors-tertiary-40: #b9a6ee;
  --carina-colors-tertiary-50: #9c7ee4;
  --carina-colors-tertiary-60: #8456d8;
  --carina-colors-tertiary-70: #7243c4;
  --carina-colors-tertiary-80: #6533b4;
  --carina-colors-tertiary-90: #52179b;
  --carina-colors-tertiary-95: #280063;
  --carina-colors-tertiary-100: #000000;
  --carina-colors-tertiary-seed: #8457D9;
  --carina-colors-warning-0: #FFFFFF;
  --carina-colors-warning-5: #ffefc1;
  --carina-colors-warning-10: #ffe59c;
  --carina-colors-warning-20: #ffd554;
  --carina-colors-warning-30: #f1be00;
  --carina-colors-warning-40: #dcaa00;
  --carina-colors-warning-50: #b88700;
  --carina-colors-warning-60: #986700;
  --carina-colors-warning-70: #855500;
  --carina-colors-warning-80: #774700;
  --carina-colors-warning-90: #613100;
  --carina-colors-warning-95: #3e0e00;
  --carina-colors-warning-100: #000000;
  --carina-colors-warning-seed: #FFCC00;
  --carina-background-color-background: var(--carina-colors-surface-alt);
  --carina-background-color-danger: var(--carina-colors-danger-60);
  --carina-background-color-danger-active: var(--carina-colors-danger-80);
  --carina-background-color-danger-hover: var(--carina-colors-danger-70);
  --carina-background-color-danger-pale: var(--carina-colors-danger-10);
  --carina-background-color-danger-pale-active: var(--carina-colors-danger-30);
  --carina-background-color-danger-pale-hover: var(--carina-colors-danger-20);
  --carina-background-color-illustration-neutral-light: var(--carina-colors-grayscale-40);
  --carina-background-color-illustration-neutral-medium: var(--carina-colors-grayscale-60);
  --carina-background-color-illustration-neutral-strong: var(--carina-colors-grayscale-90);
  --carina-background-color-illustration-neutral-x-light: var(--carina-colors-grayscale-10);
  --carina-background-color-illustration-neutral-x-strong: var(--carina-colors-grayscale-100);
  --carina-background-color-illustration-neutral-zero: var(--carina-colors-grayscale-0);
  --carina-background-color-illustration-primary-light: var(--carina-colors-primary-40);
  --carina-background-color-illustration-primary-medium: var(--carina-colors-primary-60);
  --carina-background-color-illustration-primary-strong: var(--carina-colors-primary-90);
  --carina-background-color-illustration-primary-x-light: var(--carina-colors-primary-10);
  --carina-background-color-illustration-primary-x-strong: var(--carina-colors-primary-100);
  --carina-background-color-illustration-primary-zero: var(--carina-colors-primary-0);
  --carina-background-color-illustration-secondary-light: var(--carina-colors-secondary-40);
  --carina-background-color-illustration-secondary-medium: var(--carina-colors-secondary-60);
  --carina-background-color-illustration-secondary-strong: var(--carina-colors-secondary-90);
  --carina-background-color-illustration-secondary-x-light: var(--carina-colors-secondary-10);
  --carina-background-color-illustration-secondary-x-strong: var(--carina-colors-secondary-100);
  --carina-background-color-illustration-secondary-zero: var(--carina-colors-secondary-0);
  --carina-background-color-illustration-tertiary-light: var(--carina-colors-tertiary-40);
  --carina-background-color-illustration-tertiary-medium: var(--carina-colors-tertiary-60);
  --carina-background-color-illustration-tertiary-strong: var(--carina-colors-tertiary-90);
  --carina-background-color-illustration-tertiary-x-light: var(--carina-colors-tertiary-10);
  --carina-background-color-illustration-tertiary-x-strong: var(--carina-colors-tertiary-100);
  --carina-background-color-illustration-tertiary-zero: var(--carina-colors-tertiary-0);
  --carina-background-color-info: var(--carina-colors-info-60);
  --carina-background-color-info-active: var(--carina-colors-info-80);
  --carina-background-color-info-hover: var(--carina-colors-info-70);
  --carina-background-color-info-pale: var(--carina-colors-info-10);
  --carina-background-color-info-pale-active: var(--carina-colors-info-30);
  --carina-background-color-info-pale-hover: var(--carina-colors-info-20);
  --carina-background-color-neutral: var(--carina-colors-grayscale-60);
  --carina-background-color-neutral-active: var(--carina-colors-grayscale-90);
  --carina-background-color-neutral-hover: var(--carina-colors-grayscale-70);
  --carina-background-color-neutral-inactive: var(--carina-colors-grayscale-20);
  --carina-background-color-neutral-inverse: var(--carina-colors-grayscale-0);
  --carina-background-color-neutral-inverse-active: var(--carina-colors-grayscale-20);
  --carina-background-color-neutral-inverse-hover: var(--carina-colors-grayscale-10);
  --carina-background-color-popper: var(--carina-colors-surface-seed);
  --carina-background-color-primary: var(--carina-colors-primary-seed);
  --carina-background-color-primary-active: var(--carina-colors-primary-80);
  --carina-background-color-primary-hover: var(--carina-colors-primary-70);
  --carina-background-color-primary-pale: var(--carina-colors-primary-10);
  --carina-background-color-primary-pale-active: var(--carina-colors-primary-30);
  --carina-background-color-primary-pale-hover: var(--carina-colors-primary-20);
  --carina-background-color-scrim: color-mix(in srgb, var(--carina-colors-grayscale-10) calc(var(--carina-opacity-80) * 100%), transparent);
  --carina-background-color-scrim-inverse: color-mix(in srgb, var(--carina-colors-grayscale-95) calc(var(--carina-opacity-80) * 100%), transparent);
  --carina-background-color-secondary: var(--carina-colors-secondary-seed);
  --carina-background-color-secondary-active: var(--carina-colors-secondary-30);
  --carina-background-color-secondary-hover: var(--carina-colors-secondary-40);
  --carina-background-color-secondary-pale: var(--carina-colors-secondary-10);
  --carina-background-color-secondary-pale-active: var(--carina-colors-secondary-30);
  --carina-background-color-secondary-pale-hover: var(--carina-colors-secondary-20);
  --carina-background-color-success: var(--carina-colors-success-60);
  --carina-background-color-success-active: var(--carina-colors-success-80);
  --carina-background-color-success-hover: var(--carina-colors-success-70);
  --carina-background-color-success-pale: var(--carina-colors-success-10);
  --carina-background-color-success-pale-active: var(--carina-colors-success-30);
  --carina-background-color-success-pale-hover: var(--carina-colors-success-20);
  --carina-background-color-surface: var(--carina-colors-surface-seed);
  --carina-background-color-surface-active: var(--carina-colors-primary-20);
  --carina-background-color-surface-alt: var(--carina-colors-surface-alt);
  --carina-background-color-surface-hover: var(--carina-colors-surface-10);
  --carina-background-color-surface-inverse: var(--carina-colors-surface-80);
  --carina-background-color-surface-selected: var(--carina-colors-primary-20);
  --carina-background-color-tertiary: var(--carina-colors-tertiary-seed);
  --carina-background-color-tertiary-active: var(--carina-colors-tertiary-80);
  --carina-background-color-tertiary-hover: var(--carina-colors-tertiary-70);
  --carina-background-color-tertiary-pale: var(--carina-colors-tertiary-10);
  --carina-background-color-tertiary-pale-active: var(--carina-colors-tertiary-30);
  --carina-background-color-tertiary-pale-hover: var(--carina-colors-tertiary-20);
  --carina-background-color-warning: var(--carina-colors-warning-30);
  --carina-background-color-warning-active: var(--carina-colors-warning-50);
  --carina-background-color-warning-hover: var(--carina-colors-warning-40);
  --carina-background-color-warning-pale: var(--carina-colors-warning-5);
  --carina-background-color-warning-pale-active: var(--carina-colors-warning-20);
  --carina-background-color-warning-pale-hover: var(--carina-colors-warning-10);
  --carina-border-color-base: var(--carina-colors-grayscale-60);
  --carina-border-color-danger: var(--carina-colors-danger-60);
  --carina-border-color-danger-focus: var(--carina-colors-danger-50);
  --carina-border-color-hard: var(--carina-colors-grayscale-100);
  --carina-border-color-info: var(--carina-colors-info-60);
  --carina-border-color-inverse: var(--carina-colors-grayscale-0);
  --carina-border-color-inverse-focus: var(--carina-colors-grayscale-20);
  --carina-border-color-primary: var(--carina-colors-primary-seed);
  --carina-border-color-primary-focus: var(--carina-colors-primary-seed);
  --carina-border-color-secondary: var(--carina-colors-secondary-seed);
  --carina-border-color-secondary-focus: var(--carina-colors-secondary-seed);
  --carina-border-color-soft: var(--carina-colors-grayscale-20);
  --carina-border-color-success: var(--carina-colors-success-60);
  --carina-border-color-tertiary: var(--carina-colors-tertiary-seed);
  --carina-border-color-tertiary-focus: var(--carina-colors-tertiary-seed);
  --carina-border-color-warning: var(--carina-colors-warning-60);
  --carina-text-color-base: var(--carina-colors-grayscale-100);
  --carina-text-color-base-inverse: var(--carina-colors-grayscale-0);
  --carina-text-color-body: var(--carina-colors-body-seed);
  --carina-text-color-danger: var(--carina-colors-danger-60);
  --carina-text-color-danger-active: var(--carina-colors-danger-80);
  --carina-text-color-danger-hover: var(--carina-colors-danger-70);
  --carina-text-color-danger-visited: var(--carina-colors-danger-80);
  --carina-text-color-disabled: var(--carina-colors-grayscale-40);
  --carina-text-color-disabled-inverse: var(--carina-colors-grayscale-50);
  --carina-text-color-heading: var(--carina-colors-heading-seed);
  --carina-text-color-info: var(--carina-colors-info-60);
  --carina-text-color-info-active: var(--carina-colors-info-80);
  --carina-text-color-info-hover: var(--carina-colors-info-70);
  --carina-text-color-info-visited: var(--carina-colors-info-80);
  --carina-text-color-on-danger: var(--carina-colors-grayscale-0);
  --carina-text-color-on-danger-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-danger-pale-soft: var(--carina-colors-danger-70);
  --carina-text-color-on-info: var(--carina-colors-grayscale-0);
  --carina-text-color-on-info-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-info-pale-soft: var(--carina-colors-info-70);
  --carina-text-color-on-neutral: var(--carina-colors-grayscale-0);
  --carina-text-color-on-neutral-inverse: var(--carina-colors-grayscale-100);
  --carina-text-color-on-primary: var(--carina-colors-grayscale-0);
  --carina-text-color-on-primary-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-primary-pale-soft: var(--carina-colors-primary-70);
  --carina-text-color-on-secondary: var(--carina-colors-grayscale-100);
  --carina-text-color-on-secondary-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-secondary-pale-soft: var(--carina-colors-secondary-70);
  --carina-text-color-on-success: var(--carina-colors-grayscale-0);
  --carina-text-color-on-success-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-success-pale-soft: var(--carina-colors-success-70);
  --carina-text-color-on-tertiary: var(--carina-colors-grayscale-0);
  --carina-text-color-on-tertiary-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-tertiary-pale-soft: var(--carina-colors-tertiary-70);
  --carina-text-color-on-warning: var(--carina-colors-grayscale-100);
  --carina-text-color-on-warning-pale: var(--carina-colors-grayscale-100);
  --carina-text-color-on-warning-pale-soft: var(--carina-colors-warning-70);
  --carina-text-color-primary: var(--carina-colors-primary-seed);
  --carina-text-color-primary-active: var(--carina-colors-primary-80);
  --carina-text-color-primary-hover: var(--carina-colors-primary-70);
  --carina-text-color-primary-visited: var(--carina-colors-primary-80);
  --carina-text-color-secondary: var(--carina-colors-grayscale-100);
  --carina-text-color-secondary-active: var(--carina-colors-grayscale-100);
  --carina-text-color-secondary-hover: var(--carina-colors-grayscale-100);
  --carina-text-color-secondary-visited: var(--carina-colors-grayscale-100);
  --carina-text-color-soft: var(--carina-colors-surface-70);
  --carina-text-color-soft-inverse: var(--carina-colors-grayscale-30);
  --carina-text-color-success: var(--carina-colors-success-60);
  --carina-text-color-success-active: var(--carina-colors-success-80);
  --carina-text-color-success-hover: var(--carina-colors-success-70);
  --carina-text-color-success-visited: var(--carina-colors-success-80);
  --carina-text-color-tertiary: var(--carina-colors-tertiary-seed);
  --carina-text-color-tertiary-active: var(--carina-colors-tertiary-80);
  --carina-text-color-tertiary-hover: var(--carina-colors-tertiary-70);
  --carina-text-color-tertiary-visited: var(--carina-colors-tertiary-80);
  --carina-text-color-warning: var(--carina-colors-warning-60);
  --carina-text-color-warning-active: var(--carina-colors-warning-80);
  --carina-text-color-warning-hover: var(--carina-colors-warning-70);
  --carina-text-color-warning-visited: var(--carina-colors-warning-80);
  --carina-ring-base: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-primary-focus);
  --carina-ring-white: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-inverse);
  --carina-ring-black: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-hard);
  --carina-ring-danger: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus);
  --carina-ring-color-base: var(--carina-border-color-primary-focus);
  --carina-ring-color-white: var(--carina-border-color-inverse);
  --carina-ring-color-black: var(--carina-border-color-hard);
  --carina-ring-color-danger: var(--carina-border-color-danger-focus);
  --carina-gradient-color-stops-transparent: transparent;
  --carina-gradient-color-stops-white: #ffffff;
  --carina-gradient-color-stops-black: #000000;
  --carina-gradient-color-stops-primary: var(--carina-background-color-primary);
  --carina-gradient-color-stops-secondary: var(--carina-background-color-secondary);
  --carina-gradient-color-stops-tertiary: var(--carina-background-color-tertiary);
  --carina-gradient-color-stops-surface: var(--carina-background-color-surface);
  --carina-gradient-color-stops-surface-alt: var(--carina-background-color-surface-alt);
}

[data-carina-theme="dark"] {
  --carina-colors-inherit: inherit;
  --carina-colors-current: currentColor;
  --carina-colors-transparent: transparent;
  --carina-colors-body-background: #efefef;
  --carina-colors-accessory-0-10: #1c1386;
  --carina-colors-accessory-0-20: #4d31ba;
  --carina-colors-accessory-0-30: #8457d9;
  --carina-colors-accessory-0-40: #b473e9;
  --carina-colors-accessory-0-50: #d490f1;
  --carina-colors-accessory-0-60: #f1aef3;
  --carina-colors-accessory-0-70: #fdd1f6;
  --carina-colors-accessory-1-10: #192887;
  --carina-colors-accessory-1-20: #1c4eb4;
  --carina-colors-accessory-1-30: #0781da;
  --carina-colors-accessory-1-40: #17a6f8;
  --carina-colors-accessory-1-50: #2fc7f0;
  --carina-colors-accessory-1-60: #64e4e8;
  --carina-colors-accessory-1-70: #a6f6e0;
  --carina-colors-accessory-2-10: #02516c;
  --carina-colors-accessory-2-20: #047885;
  --carina-colors-accessory-2-30: #059a9a;
  --carina-colors-accessory-2-40: #05baa5;
  --carina-colors-accessory-2-50: #07d7a8;
  --carina-colors-accessory-2-60: #77e9a1;
  --carina-colors-accessory-2-70: #b7f4ac;
  --carina-colors-accessory-3-10: #790c03;
  --carina-colors-accessory-3-20: #b22205;
  --carina-colors-accessory-3-30: #df4e0f;
  --carina-colors-accessory-3-40: #ff7830;
  --carina-colors-accessory-3-50: #ffab00;
  --carina-colors-accessory-3-60: #ffcc66;
  --carina-colors-accessory-3-70: #ffe982;
  --carina-colors-accessory-4-10: #5d074a;
  --carina-colors-accessory-4-20: #891150;
  --carina-colors-accessory-4-30: #c2386c;
  --carina-colors-accessory-4-40: #f05887;
  --carina-colors-accessory-4-50: #ff8888;
  --carina-colors-accessory-4-60: #ffb2a3;
  --carina-colors-accessory-4-70: #ffcca1;
  --carina-colors-body-seed: #F8F8F8;
  --carina-colors-danger-0: #000000;
  --carina-colors-danger-5: #910000;
  --carina-colors-danger-10: #9b0000;
  --carina-colors-danger-20: #ac0000;
  --carina-colors-danger-30: #c50005;
  --carina-colors-danger-40: #db1826;
  --carina-colors-danger-50: #e95f58;
  --carina-colors-danger-60: #f6938a;
  --carina-colors-danger-70: #fbb4ad;
  --carina-colors-danger-80: #fed1cb;
  --carina-colors-danger-90: #fffdfd;
  --carina-colors-danger-95: #ffffff;
  --carina-colors-danger-100: #FFFFFF;
  --carina-colors-danger-seed: #D9021F;
  --carina-colors-grayscale-0: #FFFFFF;
  --carina-colors-grayscale-5: #f8f8f8;
  --carina-colors-grayscale-10: #eeeeee;
  --carina-colors-grayscale-20: #dfdfdf;
  --carina-colors-grayscale-30: #cbcbcb;
  --carina-colors-grayscale-40: #b7b7b7;
  --carina-colors-grayscale-50: #959595;
  --carina-colors-grayscale-60: #757575;
  --carina-colors-grayscale-70: #646464;
  --carina-colors-grayscale-80: #575757;
  --carina-colors-grayscale-90: #424242;
  --carina-colors-grayscale-95: #242424;
  --carina-colors-grayscale-100: #000000;
  --carina-colors-grayscale-seed: #777777;
  --carina-colors-heading-seed: #F8F8F8;
  --carina-colors-info-0: #000000;
  --carina-colors-info-5: #003aae;
  --carina-colors-info-10: #0040b5;
  --carina-colors-info-20: #004bc0;
  --carina-colors-info-30: #005ad0;
  --carina-colors-info-40: #026ae1;
  --carina-colors-info-50: #4a8cea;
  --carina-colors-info-60: #82b0f3;
  --carina-colors-info-70: #a8c8f8;
  --carina-colors-info-80: #c8ddfb;
  --carina-colors-info-90: #fdfeff;
  --carina-colors-info-95: #ffffff;
  --carina-colors-info-100: #FFFFFF;
  --carina-colors-info-seed: #006AE1;
  --carina-colors-neutral-0: #000000;
  --carina-colors-neutral-5: #3f474f;
  --carina-colors-neutral-10: #444b54;
  --carina-colors-neutral-20: #4d555d;
  --carina-colors-neutral-30: #5a626b;
  --carina-colors-neutral-40: #687079;
  --carina-colors-neutral-50: #868d94;
  --carina-colors-neutral-60: #aaaeb4;
  --carina-colors-neutral-70: #c3c6ca;
  --carina-colors-neutral-80: #d9dbde;
  --carina-colors-neutral-90: #fdfefe;
  --carina-colors-neutral-95: #ffffff;
  --carina-colors-neutral-100: #FFFFFF;
  --carina-colors-neutral-seed: #69717A;
  --carina-colors-primary-0: #000000;
  --carina-colors-primary-5: #184584;
  --carina-colors-primary-10: #1d4a89;
  --carina-colors-primary-20: #265392;
  --carina-colors-primary-30: #3461a2;
  --carina-colors-primary-40: #426fb2;
  --carina-colors-primary-50: #5e8dd2;
  --carina-colors-primary-60: #7fb0f7;
  --carina-colors-primary-70: #a6c8fb;
  --carina-colors-primary-80: #c7ddfd;
  --carina-colors-primary-90: #fdfeff;
  --carina-colors-primary-95: #ffffff;
  --carina-colors-primary-100: #FFFFFF;
  --carina-colors-primary-seed: #7FB0F7;
  --carina-colors-secondary-0: #000000;
  --carina-colors-secondary-5: #00512e;
  --carina-colors-secondary-10: #005733;
  --carina-colors-secondary-20: #00603b;
  --carina-colors-secondary-30: #006f49;
  --carina-colors-secondary-40: #007f57;
  --carina-colors-secondary-50: #009f75;
  --carina-colors-secondary-60: #00c599;
  --carina-colors-secondary-70: #70d8b6;
  --carina-colors-secondary-80: #abe8d1;
  --carina-colors-secondary-90: #fdfefe;
  --carina-colors-secondary-95: #ffffff;
  --carina-colors-secondary-100: #FFFFFF;
  --carina-colors-secondary-seed: #00CA9D;
  --carina-colors-success-0: #000000;
  --carina-colors-success-5: #005200;
  --carina-colors-success-10: #005800;
  --carina-colors-success-20: #006200;
  --carina-colors-success-30: #007100;
  --carina-colors-success-40: #008100;
  --carina-colors-success-50: #4b9e46;
  --carina-colors-success-60: #84bc7f;
  --carina-colors-success-70: #a9d0a5;
  --carina-colors-success-80: #c9e2c7;
  --carina-colors-success-90: #fdfefd;
  --carina-colors-success-95: #ffffff;
  --carina-colors-success-100: #FFFFFF;
  --carina-colors-success-seed: #008600;
  --carina-colors-surface-0: #FFFFFF;
  --carina-colors-surface-5: #f7f7f8;
  --carina-colors-surface-10: #edeeee;
  --carina-colors-surface-20: #dedfe0;
  --carina-colors-surface-30: #cacbcd;
  --carina-colors-surface-40: #b5b7b9;
  --carina-colors-surface-50: #929598;
  --carina-colors-surface-60: #73767b;
  --carina-colors-surface-70: #616469;
  --carina-colors-surface-80: #52575c;
  --carina-colors-surface-90: #3e4248;
  --carina-colors-surface-95: #20252b;
  --carina-colors-surface-100: #000000;
  --carina-colors-surface-seed: #21262C;
  --carina-colors-surface-alt: #3e4248;
  --carina-colors-tertiary-0: #000000;
  --carina-colors-tertiary-5: #503a7a;
  --carina-colors-tertiary-10: #563f80;
  --carina-colors-tertiary-20: #5e4889;
  --carina-colors-tertiary-30: #6b5597;
  --carina-colors-tertiary-40: #7963a7;
  --carina-colors-tertiary-50: #9681c7;
  --carina-colors-tertiary-60: #b8a2eb;
  --carina-colors-tertiary-70: #cdbef3;
  --carina-colors-tertiary-80: #dfd6f8;
  --carina-colors-tertiary-90: #fefdff;
  --carina-colors-tertiary-95: #ffffff;
  --carina-colors-tertiary-100: #FFFFFF;
  --carina-colors-tertiary-seed: #B9A3EC;
  --carina-colors-warning-0: #000000;
  --carina-colors-warning-5: #6a3a00;
  --carina-colors-warning-10: #6f3f00;
  --carina-colors-warning-20: #794900;
  --carina-colors-warning-30: #875700;
  --carina-colors-warning-40: #966500;
  --carina-colors-warning-50: #b58300;
  --carina-colors-warning-60: #d9a700;
  --carina-colors-warning-70: #f2bf00;
  --carina-colors-warning-80: #ffd763;
  --carina-colors-warning-90: #fffef9;
  --carina-colors-warning-95: #ffffff;
  --carina-colors-warning-100: #FFFFFF;
  --carina-colors-warning-seed: #FFCC00;
  --carina-background-color-background: var(--carina-colors-surface-alt);
  --carina-background-color-danger: var(--carina-colors-danger-70);
  --carina-background-color-danger-active: var(--carina-colors-danger-50);
  --carina-background-color-danger-hover: var(--carina-colors-danger-60);
  --carina-background-color-danger-pale: var(--carina-colors-danger-5);
  --carina-background-color-danger-pale-active: var(--carina-colors-danger-20);
  --carina-background-color-danger-pale-hover: var(--carina-colors-danger-10);
  --carina-background-color-illustration-neutral-light: var(--carina-colors-grayscale-60);
  --carina-background-color-illustration-neutral-medium: var(--carina-colors-grayscale-40);
  --carina-background-color-illustration-neutral-strong: var(--carina-colors-grayscale-10);
  --carina-background-color-illustration-neutral-x-light: var(--carina-colors-grayscale-90);
  --carina-background-color-illustration-neutral-x-strong: var(--carina-colors-grayscale-0);
  --carina-background-color-illustration-neutral-zero: var(--carina-colors-grayscale-100);
  --carina-background-color-illustration-primary-light: var(--carina-colors-primary-50);
  --carina-background-color-illustration-primary-medium: var(--carina-colors-primary-60);
  --carina-background-color-illustration-primary-strong: var(--carina-colors-primary-80);
  --carina-background-color-illustration-primary-x-light: var(--carina-colors-primary-5);
  --carina-background-color-illustration-primary-x-strong: var(--carina-colors-primary-100);
  --carina-background-color-illustration-primary-zero: var(--carina-colors-primary-0);
  --carina-background-color-illustration-secondary-light: var(--carina-colors-secondary-60);
  --carina-background-color-illustration-secondary-medium: var(--carina-colors-secondary-70);
  --carina-background-color-illustration-secondary-strong: var(--carina-colors-secondary-80);
  --carina-background-color-illustration-secondary-x-light: var(--carina-colors-secondary-5);
  --carina-background-color-illustration-secondary-x-strong: var(--carina-colors-secondary-100);
  --carina-background-color-illustration-secondary-zero: var(--carina-colors-secondary-0);
  --carina-background-color-illustration-tertiary-light: var(--carina-colors-tertiary-50);
  --carina-background-color-illustration-tertiary-medium: var(--carina-colors-tertiary-60);
  --carina-background-color-illustration-tertiary-strong: var(--carina-colors-tertiary-80);
  --carina-background-color-illustration-tertiary-x-light: var(--carina-colors-tertiary-5);
  --carina-background-color-illustration-tertiary-x-strong: var(--carina-colors-tertiary-100);
  --carina-background-color-illustration-tertiary-zero: var(--carina-colors-tertiary-0);
  --carina-background-color-info: var(--carina-colors-info-70);
  --carina-background-color-info-active: var(--carina-colors-info-50);
  --carina-background-color-info-hover: var(--carina-colors-info-60);
  --carina-background-color-info-pale: var(--carina-colors-info-5);
  --carina-background-color-info-pale-active: var(--carina-colors-info-20);
  --carina-background-color-info-pale-hover: var(--carina-colors-info-10);
  --carina-background-color-neutral: color-mix(in srgb, var(--carina-colors-grayscale-0) calc(var(--carina-opacity-80) * 100%), transparent);
  --carina-background-color-neutral-active: color-mix(in srgb, var(--carina-colors-grayscale-0) calc(var(--carina-opacity-100) * 100%), transparent);
  --carina-background-color-neutral-hover: color-mix(in srgb, var(--carina-colors-grayscale-0) calc(var(--carina-opacity-90) * 100%), transparent);
  --carina-background-color-neutral-inactive: var(--carina-background-color-surface-hover);
  --carina-background-color-neutral-inverse: var(--carina-colors-grayscale-95);
  --carina-background-color-neutral-inverse-active: var(--carina-colors-grayscale-80);
  --carina-background-color-neutral-inverse-hover: var(--carina-colors-grayscale-90);
  --carina-background-color-popper: var(--carina-colors-surface-alt);
  --carina-background-color-primary: var(--carina-colors-primary-seed);
  --carina-background-color-primary-active: var(--carina-colors-primary-80);
  --carina-background-color-primary-hover: var(--carina-colors-primary-70);
  --carina-background-color-primary-pale: var(--carina-colors-primary-10);
  --carina-background-color-primary-pale-active: var(--carina-colors-primary-30);
  --carina-background-color-primary-pale-hover: var(--carina-colors-primary-20);
  --carina-background-color-scrim: color-mix(in srgb, var(--carina-colors-grayscale-95) calc(var(--carina-opacity-80) * 100%), transparent);
  --carina-background-color-scrim-inverse: color-mix(in srgb, var(--carina-colors-grayscale-10) calc(var(--carina-opacity-80) * 100%), transparent);
  --carina-background-color-secondary: var(--carina-colors-secondary-seed);
  --carina-background-color-secondary-active: var(--carina-colors-secondary-80);
  --carina-background-color-secondary-hover: var(--carina-colors-secondary-70);
  --carina-background-color-secondary-pale: var(--carina-colors-secondary-10);
  --carina-background-color-secondary-pale-active: var(--carina-colors-secondary-30);
  --carina-background-color-secondary-pale-hover: var(--carina-colors-secondary-20);
  --carina-background-color-success: var(--carina-colors-success-70);
  --carina-background-color-success-active: var(--carina-colors-success-50);
  --carina-background-color-success-hover: var(--carina-colors-success-60);
  --carina-background-color-success-pale: var(--carina-colors-success-5);
  --carina-background-color-success-pale-active: var(--carina-colors-success-20);
  --carina-background-color-success-pale-hover: var(--carina-colors-success-10);
  --carina-background-color-surface: var(--carina-colors-surface-seed);
  --carina-background-color-surface-active: var(--carina-colors-surface-70);
  --carina-background-color-surface-alt: var(--carina-colors-surface-alt);
  --carina-background-color-surface-hover: var(--carina-colors-surface-80);
  --carina-background-color-surface-inverse: var(--carina-colors-surface-20);
  --carina-background-color-surface-selected: var(--carina-colors-surface-70);
  --carina-background-color-tertiary: var(--carina-colors-tertiary-seed);
  --carina-background-color-tertiary-active: var(--carina-colors-tertiary-80);
  --carina-background-color-tertiary-hover: var(--carina-colors-tertiary-70);
  --carina-background-color-tertiary-pale: var(--carina-colors-tertiary-10);
  --carina-background-color-tertiary-pale-active: var(--carina-colors-tertiary-30);
  --carina-background-color-tertiary-pale-hover: var(--carina-colors-tertiary-20);
  --carina-background-color-warning: var(--carina-colors-warning-60);
  --carina-background-color-warning-active: var(--carina-colors-warning-80);
  --carina-background-color-warning-hover: var(--carina-colors-warning-70);
  --carina-background-color-warning-pale: var(--carina-colors-warning-5);
  --carina-background-color-warning-pale-active: var(--carina-colors-warning-20);
  --carina-background-color-warning-pale-hover: var(--carina-colors-warning-10);
  --carina-border-color-base: var(--carina-colors-surface-50);
  --carina-border-color-danger: var(--carina-colors-danger-70);
  --carina-border-color-danger-focus: var(--carina-colors-danger-50);
  --carina-border-color-hard: var(--carina-colors-grayscale-0);
  --carina-border-color-info: var(--carina-colors-info-70);
  --carina-border-color-inverse: var(--carina-colors-grayscale-95);
  --carina-border-color-inverse-focus: var(--carina-colors-grayscale-80);
  --carina-border-color-primary: var(--carina-colors-primary-seed);
  --carina-border-color-primary-focus: var(--carina-colors-primary-seed);
  --carina-border-color-secondary: var(--carina-colors-secondary-seed);
  --carina-border-color-secondary-focus: var(--carina-colors-secondary-seed);
  --carina-border-color-soft: var(--carina-colors-surface-70);
  --carina-border-color-success: var(--carina-colors-success-70);
  --carina-border-color-tertiary: var(--carina-colors-tertiary-seed);
  --carina-border-color-tertiary-focus: var(--carina-colors-tertiary-seed);
  --carina-border-color-warning: var(--carina-colors-warning-60);
  --carina-text-color-base: var(--carina-colors-grayscale-0);
  --carina-text-color-base-inverse: var(--carina-colors-grayscale-100);
  --carina-text-color-body: var(--carina-colors-body-seed);
  --carina-text-color-danger: var(--carina-colors-danger-70);
  --carina-text-color-danger-active: var(--carina-colors-danger-90);
  --carina-text-color-danger-hover: var(--carina-colors-danger-80);
  --carina-text-color-danger-visited: var(--carina-colors-danger-90);
  --carina-text-color-disabled: var(--carina-colors-surface-60);
  --carina-text-color-disabled-inverse: var(--carina-colors-surface-50);
  --carina-text-color-heading: var(--carina-colors-heading-seed);
  --carina-text-color-info: var(--carina-colors-info-70);
  --carina-text-color-info-active: var(--carina-colors-info-90);
  --carina-text-color-info-hover: var(--carina-colors-info-80);
  --carina-text-color-info-visited: var(--carina-colors-info-90);
  --carina-text-color-on-danger: var(--carina-colors-grayscale-100);
  --carina-text-color-on-danger-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-danger-pale-soft: var(--carina-colors-danger-70);
  --carina-text-color-on-info: var(--carina-colors-grayscale-100);
  --carina-text-color-on-info-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-info-pale-soft: var(--carina-colors-info-70);
  --carina-text-color-on-neutral: var(--carina-colors-grayscale-100);
  --carina-text-color-on-neutral-inverse: var(--carina-colors-grayscale-0);
  --carina-text-color-on-primary: var(--carina-colors-grayscale-100);
  --carina-text-color-on-primary-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-primary-pale-soft: var(--carina-colors-primary-70);
  --carina-text-color-on-secondary: var(--carina-colors-grayscale-100);
  --carina-text-color-on-secondary-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-secondary-pale-soft: var(--carina-colors-secondary-70);
  --carina-text-color-on-success: var(--carina-colors-grayscale-100);
  --carina-text-color-on-success-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-success-pale-soft: var(--carina-colors-success-70);
  --carina-text-color-on-tertiary: var(--carina-colors-grayscale-100);
  --carina-text-color-on-tertiary-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-tertiary-pale-soft: var(--carina-colors-tertiary-70);
  --carina-text-color-on-warning: var(--carina-colors-grayscale-100);
  --carina-text-color-on-warning-pale: var(--carina-colors-grayscale-0);
  --carina-text-color-on-warning-pale-soft: var(--carina-colors-warning-70);
  --carina-text-color-primary: var(--carina-colors-primary-seed);
  --carina-text-color-primary-active: var(--carina-colors-primary-80);
  --carina-text-color-primary-hover: var(--carina-colors-primary-70);
  --carina-text-color-primary-visited: var(--carina-colors-primary-80);
  --carina-text-color-secondary: var(--carina-colors-secondary-seed);
  --carina-text-color-secondary-active: var(--carina-colors-secondary-80);
  --carina-text-color-secondary-hover: var(--carina-colors-secondary-70);
  --carina-text-color-secondary-visited: var(--carina-colors-secondary-80);
  --carina-text-color-soft: var(--carina-colors-surface-40);
  --carina-text-color-soft-inverse: var(--carina-colors-surface-80);
  --carina-text-color-success: var(--carina-colors-success-70);
  --carina-text-color-success-active: var(--carina-colors-success-90);
  --carina-text-color-success-hover: var(--carina-colors-success-80);
  --carina-text-color-success-visited: var(--carina-colors-success-90);
  --carina-text-color-tertiary: var(--carina-colors-tertiary-seed);
  --carina-text-color-tertiary-active: var(--carina-colors-tertiary-80);
  --carina-text-color-tertiary-hover: var(--carina-colors-tertiary-70);
  --carina-text-color-tertiary-visited: var(--carina-colors-tertiary-80);
  --carina-text-color-warning: var(--carina-colors-warning-60);
  --carina-text-color-warning-active: var(--carina-colors-warning-80);
  --carina-text-color-warning-hover: var(--carina-colors-warning-70);
  --carina-text-color-warning-visited: var(--carina-colors-warning-80);
  --carina-ring-base: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-primary-focus);
  --carina-ring-white: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-inverse);
  --carina-ring-black: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-hard);
  --carina-ring-danger: 0 0 0 var(--carina-border-width-2) var(--carina-border-color-danger-focus);
  --carina-ring-color-base: var(--carina-border-color-primary-focus);
  --carina-ring-color-white: var(--carina-border-color-inverse);
  --carina-ring-color-black: var(--carina-border-color-hard);
  --carina-ring-color-danger: var(--carina-border-color-danger-focus);
  --carina-gradient-color-stops-transparent: transparent;
  --carina-gradient-color-stops-white: #ffffff;
  --carina-gradient-color-stops-black: #000000;
  --carina-gradient-color-stops-primary: var(--carina-background-color-primary);
  --carina-gradient-color-stops-secondary: var(--carina-background-color-secondary);
  --carina-gradient-color-stops-tertiary: var(--carina-background-color-tertiary);
  --carina-gradient-color-stops-surface: var(--carina-background-color-surface);
  --carina-gradient-color-stops-surface-alt: var(--carina-background-color-surface-alt);
}


/* stylelint-disable import-notation */

.container{
  width: 100%;
}

@media (min-width: 640px){

  .container{
    max-width: 640px;
  }
}

@media (min-width: 768px){

  .container{
    max-width: 768px;
  }
}

@media (min-width: 1024px){

  .container{
    max-width: 1024px;
  }
}

@media (min-width: 1280px){

  .container{
    max-width: 1280px;
  }
}

@media (min-width: 1536px){

  .container{
    max-width: 1536px;
  }
}

/* Carina Component Imports */

.carina-advanced-transition--loop-indefinitely {
  animation-iteration-count: infinite;
}

/** Easing */

.carina-advanced-transition--linear {
  animation-timing-function: var(--carina-transition-timing-function-linear);
}

.carina-advanced-transition--productive-ease-in-out {
  animation-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );
}

.carina-advanced-transition--productive-ease-in {
  animation-timing-function: var(
    --carina-transition-timing-function-productive-ease-in
  );
}

.carina-advanced-transition--productive-ease-out {
  animation-timing-function: var(
    --carina-transition-timing-function-productive-ease-out
  );
}

.carina-advanced-transition--expressive-ease-in-out {
  animation-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
}

.carina-advanced-transition--expressive-ease-in {
  animation-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in
  );
}

.carina-advanced-transition--expressive-ease-out {
  animation-timing-function: var(
    --carina-transition-timing-function-expressive-ease-out
  );
}

/** Duration */

.carina-advanced-transition--50 {
  animation-duration: var(--carina-transition-duration-50);
}

.carina-advanced-transition--100 {
  animation-duration: var(--carina-transition-duration-100);
}

.carina-advanced-transition--200 {
  animation-duration: var(--carina-transition-duration-200);
}

.carina-advanced-transition--300 {
  animation-duration: var(--carina-transition-duration-300);
}

.carina-advanced-transition--400 {
  animation-duration: var(--carina-transition-duration-400);
}

.carina-advanced-transition--550 {
  animation-duration: var(--carina-transition-duration-550);
}

.carina-advanced-transition--700 {
  animation-duration: var(--carina-transition-duration-700);
}

.carina-advanced-transition--800 {
  animation-duration: var(--carina-transition-duration-800);
}

.carina-advanced-transition--1200 {
  animation-duration: var(--carina-transition-duration-1200);
}

/** Snapping states **/

.carina-transition--appear-start,
.carina-transition--enter-start,
.carina-transition--exit-start {
  transition-property: none;
}

/** Easing */

.carina-transition--linear {
  transition-timing-function: var(--carina-transition-timing-function-linear);
}

.carina-transition--productive-ease-in-out {
  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );
}

.carina-transition--productive-ease-in {
  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in
  );
}

.carina-transition--productive-ease-out {
  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-out
  );
}

.carina-transition--expressive-ease-in-out {
  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
}

.carina-transition--expressive-ease-in {
  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in
  );
}

.carina-transition--expressive-ease-out {
  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-out
  );
}

/** Duration */

.carina-transition--appear-50,
.carina-transition--enter-50,
.carina-transition--exit-50 {
  transition-duration: var(--carina-transition-duration-50);
}

.carina-transition--appear-100,
.carina-transition--enter-100,
.carina-transition--exit-100 {
  transition-duration: var(--carina-transition-duration-100);
}

.carina-transition--appear-200,
.carina-transition--enter-200,
.carina-transition--exit-200 {
  transition-duration: var(--carina-transition-duration-200);
}

.carina-transition--appear-300,
.carina-transition--enter-300,
.carina-transition--exit-300 {
  transition-duration: var(--carina-transition-duration-300);
}

.carina-transition--appear-400,
.carina-transition--enter-400,
.carina-transition--exit-400 {
  transition-duration: var(--carina-transition-duration-400);
}

.carina-transition--appear-550,
.carina-transition--enter-550,
.carina-transition--exit-550 {
  transition-duration: var(--carina-transition-duration-550);
}

.carina-transition--appear-700,
.carina-transition--enter-700,
.carina-transition--exit-700 {
  transition-duration: var(--carina-transition-duration-700);
}

.carina-transition--appear-800,
.carina-transition--enter-800,
.carina-transition--exit-800 {
  transition-duration: var(--carina-transition-duration-800);
}

.carina-transition--appear-1200,
.carina-transition--enter-1200,
.carina-transition--exit-1200 {
  transition-duration: var(--carina-transition-duration-1200);
}

/** PRESETS **/

.carina-transition {
  /** opacity variables */
  --carina-transition-opacity: 1;

  /** scale variables */
  --carina-transition-scale: 1;
  --carina-transition-scale-x: var(--carina-transition-scale);
  --carina-transition-scale-y: var(--carina-transition-scale);

  /** translate variables */
  --carina-transition-translate-x: 0;
  --carina-transition-translate-y: 0;

  /** rotate variables */
  --carina-transition-rotate: 0;

  /** skew variables */
  --carina-transition-skew-x: 0;
  --carina-transition-skew-y: 0;

  transform: translate(
      var(--carina-transition-translate-x),
      var(--carina-transition-translate-y)
    )
    rotate(var(--carina-transition-rotate))
    skewX(var(--carina-transition-skew-x))
    skewY(var(--carina-transition-skew-y))
    scaleX(var(--carina-transition-scale-x))
    scaleY(var(--carina-transition-scale-y));

  opacity: var(--carina-transition-opacity);
}

/** Fade **/

.carina-transition--fade-in {
  --carina-transition-opacity: 1;
}

.carina-transition--fade-out {
  --carina-transition-opacity: 0;
}

/** Only apply motion transformations if not prefers-reduced-motion **/

@media not (prefers-reduced-motion) {
  /** Scale **/
  .carina-transition--scale-in {
    --carina-transition-scale: 1;
  }

  .carina-transition--scale-out {
    --carina-transition-scale: 0;
  }

  /** Slide **/
  .carina-transition--slide-up-in,
  .carina-transition--slide-left-in,
  .carina-transition--slide-right-in,
  .carina-transition--slide-down-in {
    --carina-transition-translate-x: 0;
    --carina-transition-translate-y: 0;
  }

  .carina-transition--slide-up-out {
    --carina-transition-translate-y: 100%;
  }

  .carina-transition--slide-right-out {
    --carina-transition-translate-x: -100%;
  }

  .carina-transition--slide-down-out {
    --carina-transition-translate-y: -100%;
  }

  .carina-transition--slide-left-out {
    --carina-transition-translate-x: 100%;
  }
}

/** REDUCED MOTION **/

@media (prefers-reduced-motion) {
  /** Easing */
  .carina-transition {
    transition-timing-function: var(--carina-transition-timing-function-linear);
    transition-duration: var(--carina-transition-duration-reduced-motion);
  }
}

@media not (prefers-reduced-motion) {
    .carina-collapse.carina-transition--enter-active:not(.carina-collapse--disabled),
    .carina-collapse.carina-transition--appear-active:not(.carina-collapse--disabled),
    .carina-collapse.carina-transition--exit-active:not(.carina-collapse--disabled),
    .carina-collapse.carina-transition--exit-done:not(.carina-collapse--disabled) {
      overflow: hidden;
    }

    .carina-collapse.carina-transition--enter-done:not(.carina-collapse--disabled),
    .carina-collapse.carina-transition--appear-done:not(.carina-collapse--disabled) {
      overflow: visible;
    }
    .carina-collapse--horizontal.carina-transition--enter-active:not(.carina-collapse--disabled),
    .carina-collapse--horizontal.carina-transition--appear-active:not(.carina-collapse--disabled),
    .carina-collapse--horizontal.carina-transition--exit-start:not(.carina-collapse--disabled) {
      width: var(--carina-collapse-size, var(--carina-collapse-element-size));
    }

    .carina-collapse--horizontal.carina-transition--out:not(.carina-collapse--disabled) {
      width: var(--carina-collapse-min-size, 0px);
    }

    .carina-collapse--horizontal.carina-transition--enter-done:not(.carina-collapse--disabled) {
      width: var(--carina-collapse-size, auto);
    }
    .carina-collapse--vertical.carina-transition--enter-active:not(.carina-collapse--disabled),
    .carina-collapse--vertical.carina-transition--appear-active:not(.carina-collapse--disabled),
    .carina-collapse--vertical.carina-transition--exit-start:not(.carina-collapse--disabled) {
      height: var(--carina-collapse-size, var(--carina-collapse-element-size));
    }

    .carina-collapse--vertical.carina-transition--out:not(.carina-collapse--disabled) {
      height: var(--carina-collapse-min-size, 0px);
    }

    .carina-collapse--vertical.carina-transition--enter-done:not(.carina-collapse--disabled) {
      height: var(--carina-collapse-size, auto);
    }
}

.carina-accordion > * {
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-bottom: var(--carina-border-width-0);
}

.carina-accordion > *:last-of-type {
    border-bottom: var(--carina-border-width-1) solid
      var(--carina-border-color-soft);
  }

.carina-accordion--inside-only > * {
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-bottom: var(--carina-border-width-0);
}

.carina-accordion--inside-only > *:first-of-type {
    border-top: var(--carina-border-width-0);
  }

.carina-accordion-header {
  display: flex;
  align-items: baseline;
  padding-top: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);

  cursor: pointer;
  opacity: var(--carina-opacity-100);

  padding-inline-end: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-2);

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-0);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;
}

.carina-accordion-header:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-accordion-header:hover:not(.carina-accordion-header--disabled) {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-accordion-header__header {
  display: flex;

  flex: 1 0 0;

  overflow: hidden;

  color: var(--carina-text-color-heading, var(--carina-text-color-base));

  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
  white-space: nowrap;
}

.carina-accordion-header__header--open {
  overflow: visible;

  white-space: normal;
  text-overflow: clip;
}

.carina-accordion-header__header--chevron-start {
  margin-inline-start: var(--carina-spacing-2);
}

.carina-accordion-header--disabled {
  cursor: default;
  opacity: var(--carina-opacity-40);
}

.carina-accordion-header--padding-mode-roomy {
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-4);
}

.carina-accordion-header__chevron {
  display: flex;
  flex: initial;
  align-items: flex-start;
  align-self: flex-start;

  color: var(--carina-text-color-soft);
}

.carina-accordion-header__chevron svg {
    transition-delay: var(--carina-transition-duration-100);
    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in
    );
    transition-duration: var(--carina-transition-duration-200);
    transition-property: transform;
  }

.carina-accordion-header__chevron--open--chevron-placement-end > svg {
  transform: rotate(-180deg);

  transition-delay: 0ms;
}

.carina-accordion-header__chevron--not-open--chevron-placement-start > svg {
  transform: rotate(-90deg);

  transition-delay: 0ms;
}

[dir='rtl'] .carina-accordion-header__chevron--not-open--chevron-placement-start > svg {
    transform: rotate(90deg);

    transition-delay: 0ms;
  }

.carina-accordion-header__chevron--reduce-motion > svg {
  transition-property: none;
}

.carina-accordion-icon {
  flex: initial;
  overflow: hidden;

  color: var(--carina-text-color-soft);
}

.carina-accordion-section {
  padding-right: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);
  padding-left: var(--carina-spacing-2);
  overflow: hidden;

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);

  visibility: hidden;
}

.carina-accordion-section--open,
.carina-accordion-section__collapse.carina-transition--exit-active .carina-accordion-section,
.carina-accordion-section__collapse.carina-transition--exit-start .carina-accordion-section {
  visibility: visible;
}

.carina-accordion-section__collapse {
  transition-duration: var(--carina-transition-duration-100);
}

.carina-accordion-section__collapse.carina-transition--exit-done {
  max-height: 0;
  overflow: hidden;
}

/* needed to prevent fixed position children from being constrained within the collapse container instead of the viewport.
For example, any component that uses a scrim (which is fixed positioned) such as DatePicker in mobile viewport or Modal */

.carina-accordion-section__collapse.carina-transition--enter-done,
.carina-accordion-section__collapse.carina-transition--appear-done {
  transform: none;
}

.carina-detailed-accordion-header {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  overflow: hidden;

  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
  text-overflow: ellipsis;
}

.carina-detailed-accordion-header--open {
  overflow: auto;

  white-space: normal;
  text-overflow: clip;
}

.carina-detailed-accordion-header__label-and-description {
  display: flex;
  flex-basis: 0%;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  padding-inline-end: var(--carina-spacing-2);
  padding-inline-start: var(--carina-spacing-0);
}

.carina-detailed-accordion-header__label-and-description--icon-at-start {
  margin-inline-start: var(--carina-spacing-2);
  margin-inline-end: var(--carina-spacing-0);
}

.carina-detailed-accordion-header__label-and-description--open {
  overflow: auto;

  white-space: normal;
  text-overflow: clip;
}

.carina-detailed-accordion-header__label-text {
  overflow: hidden;

  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.carina-detailed-accordion-header__label-text--open {
  overflow: auto;

  white-space: normal;
  text-overflow: clip;
}

.carina-detailed-accordion-header__description-text {
  overflow: hidden;

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.carina-detailed-accordion-header__description-text--open {
  overflow: auto;

  white-space: normal;
  text-overflow: clip;
}

/* prettier-ignore */

.carina-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-right: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: var(--carina-spacing-1);
  padding-bottom: 0;
  padding-left: var(--carina-spacing-1);
  border: var(--carina-border-width-1) solid transparent;
  border-radius: var(--carina-border-radius-xl);
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: inherit;
  line-height: inherit;

  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-out
  );
  transition-property: background-color, color, border-color, outline-color;
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
}

.carina-button:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-button--ghost:not(.carina-button--phase2) {
    outline-offset: var(--carina-border-width-0);
  }

/* phase2 drops the press shrink (the underline is the interaction feedback) */

.carina-button:active:not(.carina-button--disabled):not(.carina-button--phase2) {
    transform: scale(var(--carina-scale-shrink));
  }

.carina-button--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

/** PHASE 2 (rebrand) **/

/* Ghost buttons gain a subtle border. Base already reserves a 1px transparent
   border, so only the color needs to change. */

.carina-button--ghost:not(.carina-button--icon-only).carina-button--phase2 {
  border-color: var(--carina-border-color-soft);
}

/* Neutral-inverse ghost: per-theme border so it stays clearly less prominent than the lined button
   Pending a dedicated border-color-neutral-inverse-soft semantic token. */

[data-carina-theme='rebrand-light'] .carina-button--neutral-inverse.carina-button--ghost:not(.carina-button--icon-only).carina-button--phase2 {
  border-color: var(--carina-border-color-hard);
}

[data-carina-theme='rebrand-dark'] .carina-button--neutral-inverse.carina-button--ghost:not(.carina-button--icon-only).carina-button--phase2 {
  border-color: var(--carina-border-color-soft);
}

/* Hover underline on all variants: enters from the left on hover and exits out
   the right on unhover (continuous left-to-right travel), and persists while the
   button is pressed (:active) or held active.
   The origin flips between states (it's not transitioned): at rest the origin is
   the right (exit collapses rightward); on hover it's the left (enter grows from
   the left). Origin is visually irrelevant at scaleX 0/1, so the switch is seamless. */

.carina-button--phase2 {
  position: relative;
}

.carina-button--phase2::after {
    content: '';
    position: absolute;
    inset-inline: var(--carina-spacing-6);
    /* 6px from the visible border edge (subtract the 1px border the ::after sits inside) */
    bottom: calc(var(--carina-spacing-1-5) - var(--carina-border-width-1));

    height: var(--carina-border-width-2);

    background-color: currentColor;

    transform: scaleX(0);
    transform-origin: right;

    transition-timing-function: var(
      --carina-transition-timing-function-productive-ease-out
    );
    transition-property: transform;
    transition-duration: var(--carina-transition-duration-150);
  }

.carina-button--phase2:hover:not(.carina-button--disabled)::after,
  .carina-button--phase2:active:not(.carina-button--disabled)::after,
  .carina-button--phase2.carina-button--active:not(.carina-button--disabled)::after {
    transform: scaleX(1);
    transform-origin: left;
  }

/* lg sits 2px lower to match the design. Applies to icon-only too so the underline
   is at the same position for any lg button (text or icon) placed side by side. */

.carina-button--lg.carina-button--phase2::after {
  bottom: calc(var(--carina-spacing-2) - var(--carina-border-width-1));
}

/* Underline spans the content area (button width − horizontal padding), so its
   inset must match the button's padding. The base inset above (spacing-6) is the
   md/lg padding; sm pads by spacing-4, so it needs the smaller inset to avoid a
   too-narrow underline. (icon-only sizes override this with their own inset.) */

.carina-button--sm.carina-button--phase2::after {
  inset-inline: var(--carina-spacing-4);
}

/* Brand/primary buttons use the tertiary green underline — the primary brand accent.
   In light theme all appearances get it; in dark theme filled keeps currentColor
   (on-primary text) since the green doesn't contrast with the dark fill.
   Scoped to exact theme names — Carina has no generic light/dark selector. */

[data-carina-theme='rebrand-light'] .carina-button--brand.carina-button--phase2::after,
[data-carina-theme='rebrand-light'] .carina-button--primary.carina-button--phase2::after,
[data-carina-theme='rebrand-dark'] .carina-button--brand.carina-button--lined.carina-button--phase2::after,
[data-carina-theme='rebrand-dark'] .carina-button--primary.carina-button--lined.carina-button--phase2::after,
[data-carina-theme='rebrand-dark'] .carina-button--brand.carina-button--ghost.carina-button--phase2::after,
[data-carina-theme='rebrand-dark'] .carina-button--primary.carina-button--ghost.carina-button--phase2::after {
  background-color: var(--carina-border-color-tertiary);
}

/* Dark-theme filled buttons must stay currentColor even when a light-theme ancestor
   exists (e.g. the phase-comparison story wraps all content in a rebrand-light scope).
   The extra --filled class gives this selector higher specificity than the broader
   light-theme rule above, so it wins when both ancestor themes are present. */

[data-carina-theme='rebrand-dark'] .carina-button--brand.carina-button--filled.carina-button--phase2::after,
[data-carina-theme='rebrand-dark'] .carina-button--primary.carina-button--filled.carina-button--phase2::after {
  background-color: currentColor;
}

/* Icon buttons (non-FAB): the underline sits just below the glyph. inset-inline
   centers it; the fixed glyph rides lower in the smaller buttons, so sm also drops
   the offset (md inherits the base 6px, lg inherits the lg 8px override). */

.carina-button--icon-only.carina-button--sm.carina-button--phase2:not(.carina-button--fab)::after,
.carina-button--icons-only.carina-button--sm.carina-button--phase2:not(.carina-button--fab)::after {
  inset-inline: calc(var(--carina-spacing-1-5) - var(--carina-border-width-1));
  bottom: calc(var(--carina-spacing-1) - var(--carina-border-width-1));
}

.carina-button--icon-only.carina-button--md.carina-button--phase2:not(.carina-button--fab)::after,
.carina-button--icons-only.carina-button--md.carina-button--phase2:not(.carina-button--fab)::after {
  inset-inline: calc(var(--carina-spacing-2) - var(--carina-border-width-1));
}

.carina-button--icon-only.carina-button--lg.carina-button--phase2:not(.carina-button--fab)::after,
.carina-button--icons-only.carina-button--lg.carina-button--phase2:not(.carina-button--fab)::after {
  inset-inline: calc(var(--carina-spacing-2-5) - var(--carina-border-width-1));
}

/* Pill icon buttons: a narrower (18px) underline so it clears the fully rounded
   edge. Only the width changes — the vertical offset is inherited from the rules
   above. */

.carina-button--icon-only.carina-button--pill.carina-button--sm.carina-button--phase2:not(
    .carina-button--fab
  )::after,
.carina-button--icons-only.carina-button--pill.carina-button--sm.carina-button--phase2:not(
    .carina-button--fab
  )::after {
  inset-inline: var(--carina-spacing-2);
}

.carina-button--icon-only.carina-button--pill.carina-button--md.carina-button--phase2:not(
    .carina-button--fab
  )::after,
.carina-button--icons-only.carina-button--pill.carina-button--md.carina-button--phase2:not(
    .carina-button--fab
  )::after {
  inset-inline: var(--carina-spacing-2-5);
}

.carina-button--icon-only.carina-button--pill.carina-button--lg.carina-button--phase2:not(
    .carina-button--fab
  )::after,
.carina-button--icons-only.carina-button--pill.carina-button--lg.carina-button--phase2:not(
    .carina-button--fab
  )::after {
  inset-inline: var(--carina-spacing-3);
}

/* FAB: a 24px underline sitting just below the 32px glyph — higher and narrower
   than the icon-only default, which reads too low/wide on the 64px FAB. */

.carina-button--icon-only.carina-button--fab.carina-button--phase2::after,
.carina-button--icons-only.carina-button--fab.carina-button--phase2::after {
  inset-inline: calc(var(--carina-spacing-5) - var(--carina-border-width-1));
  bottom: calc(var(--carina-spacing-3-5) - var(--carina-border-width-1));
}

/* RTL: mirror the travel — enter from the right, exit out the left. */

[dir='rtl'] .carina-button--phase2::after {
  transform-origin: left;
}

[dir='rtl'] .carina-button--phase2:hover:not(.carina-button--disabled)::after,
[dir='rtl'] .carina-button--phase2:active:not(.carina-button--disabled)::after,
[dir='rtl'] .carina-button--phase2.carina-button--active:not(.carina-button--disabled)::after {
  transform-origin: right;
}

/* Reduced motion: reveal the underline with a fade instead of the directional sweep. */

@media (prefers-reduced-motion: reduce) {
  .carina-button--phase2::after {
    transform: scaleX(1);
    opacity: 0;

    transition-property: opacity;
  }

  .carina-button--phase2:hover:not(.carina-button--disabled)::after,
  .carina-button--phase2:active:not(.carina-button--disabled)::after,
  .carina-button--phase2.carina-button--active:not(.carina-button--disabled)::after {
    opacity: 1;
  }
}

/** DISABLED **/

.carina-button--disabled {
  transform: none;
  cursor: default;
  opacity: var(--carina-opacity-40);
}

.carina-button--disabled .carina-button__icon-start,
.carina-button--disabled .carina-button__icon-end {
  transform: none;
}

/** APPEARANCE & VARIANTS **/

/** primary/brand filled ***/

.carina-button--brand.carina-button--filled,
.carina-button--primary.carina-button--filled {
  color: var(--carina-text-color-on-primary);

  background-color: var(--carina-background-color-primary);
}

/* phase2: underline replaces the hover background change */

.carina-button--brand.carina-button--filled:hover:not(.carina-button--disabled):not(.carina-button--phase2), .carina-button--primary.carina-button--filled:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-primary-hover);
  }

.carina-button--brand.carina-button--filled:active:not(.carina-button--disabled),
  .carina-button--brand.carina-button--filled.carina-button--active:not(.carina-button--disabled),
  .carina-button--primary.carina-button--filled:active:not(.carina-button--disabled),
  .carina-button--primary.carina-button--filled.carina-button--active:not(.carina-button--disabled) {
    background-color: var(--carina-background-color-primary-active);
  }

/** primary/brand lined **/

.carina-button--brand.carina-button--lined,
.carina-button--primary.carina-button--lined {
  border-color: var(--carina-border-color-primary);
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-primary);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover fill */

.carina-button--brand.carina-button--lined:hover:not(.carina-button--disabled):not(.carina-button--phase2), .carina-button--primary.carina-button--lined:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-primary);

    background-color: var(--carina-background-color-primary);
  }

.carina-button--brand.carina-button--lined:active:not(.carina-button--disabled),
  .carina-button--brand.carina-button--lined.carina-button--active:not(.carina-button--disabled),
  .carina-button--primary.carina-button--lined:active:not(.carina-button--disabled),
  .carina-button--primary.carina-button--lined.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-primary);

    background-color: var(--carina-background-color-primary-hover);
    border-color: var(--carina-colors-transparent);
  }

.carina-button--brand.carina-button--lined:active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--brand.carina-button--lined.carina-button--active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--primary.carina-button--lined:active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--primary.carina-button--lined.carina-button--active:not(.carina-button--disabled).carina-button--phase2 {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);
    border-color: var(--carina-border-color-primary);
  }

/** primary/brand ghost **/

.carina-button--brand.carina-button--ghost,
.carina-button--primary.carina-button--ghost {
  color: var(--carina-text-color-primary);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover state change */

.carina-button--brand.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2), .carina-button--primary.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-button--brand.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--brand.carina-button--ghost.carina-button--active:not(.carina-button--disabled),
  .carina-button--primary.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--primary.carina-button--ghost.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);

    outline: none;
  }

/** Secondary **/

/** secondary filled ***/

.carina-button--secondary.carina-button--filled {
  color: var(--carina-text-color-on-secondary);

  background-color: var(--carina-background-color-secondary);
}

/* phase2: underline replaces the hover background change */

.carina-button--secondary.carina-button--filled:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-secondary-hover);
  }

.carina-button--secondary.carina-button--filled:active:not(.carina-button--disabled),
  .carina-button--secondary.carina-button--filled.carina-button--active:not(.carina-button--disabled) {
    background-color: var(--carina-background-color-secondary-active);
  }

/** secondary lined **/

.carina-button--secondary.carina-button--lined {
  border-color: var(--carina-border-color-secondary);
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-secondary);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover fill */

.carina-button--secondary.carina-button--lined:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-secondary);

    background-color: var(--carina-background-color-secondary);
  }

.carina-button--secondary.carina-button--lined:active:not(.carina-button--disabled),
  .carina-button--secondary.carina-button--lined.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-secondary);

    background-color: var(--carina-background-color-secondary-hover);
    border-color: var(--carina-colors-transparent);
  }

.carina-button--secondary.carina-button--lined:active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--secondary.carina-button--lined.carina-button--active:not(.carina-button--disabled).carina-button--phase2 {
    color: var(--carina-text-color-on-secondary-pale);

    background-color: var(--carina-background-color-secondary-pale);
    border-color: var(--carina-border-color-secondary);
  }

/** secondary ghost **/

.carina-button--secondary.carina-button--ghost {
  color: var(--carina-text-color-secondary);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover state change */

.carina-button--secondary.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-button--secondary.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--secondary.carina-button--ghost.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);

    outline: none;
  }

.carina-button--secondary.carina-button--ghost:active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--secondary.carina-button--ghost.carina-button--active:not(.carina-button--disabled).carina-button--phase2 {
    color: var(--carina-text-color-on-secondary-pale);

    background-color: var(--carina-background-color-secondary-pale);
  }

/** Tertiary **/

/** tertiary filled **/

.carina-button--tertiary.carina-button--filled {
  color: var(--carina-text-color-on-tertiary);

  background-color: var(--carina-background-color-tertiary);
}

/* phase2: underline replaces the hover background change */

.carina-button--tertiary.carina-button--filled:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-tertiary-hover);
  }

.carina-button--tertiary.carina-button--filled:active:not(.carina-button--disabled),
  .carina-button--tertiary.carina-button--filled.carina-button--active:not(.carina-button--disabled) {
    background-color: var(--carina-background-color-tertiary-active);
  }

/** tertiary lined **/

.carina-button--tertiary.carina-button--lined {
  border-color: var(--carina-border-color-tertiary);
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-tertiary);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover fill */

.carina-button--tertiary.carina-button--lined:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-tertiary);

    background-color: var(--carina-background-color-tertiary);
  }

.carina-button--tertiary.carina-button--lined:active:not(.carina-button--disabled),
  .carina-button--tertiary.carina-button--lined.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-tertiary);

    background-color: var(--carina-background-color-tertiary-hover);
    border-color: var(--carina-colors-transparent);
  }

.carina-button--tertiary.carina-button--lined:active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--tertiary.carina-button--lined.carina-button--active:not(.carina-button--disabled).carina-button--phase2 {
    color: var(--carina-text-color-on-tertiary-pale);

    background-color: var(--carina-background-color-tertiary-pale);
    border-color: var(--carina-border-color-tertiary);
  }

/** tertiary ghost **/

.carina-button--tertiary.carina-button--ghost {
  color: var(--carina-text-color-tertiary);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover state change */

.carina-button--tertiary.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-button--tertiary.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--tertiary.carina-button--ghost.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);

    outline: none;
  }

.carina-button--tertiary.carina-button--ghost:active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--tertiary.carina-button--ghost.carina-button--active:not(.carina-button--disabled).carina-button--phase2 {
    color: var(--carina-text-color-on-tertiary-pale);

    background-color: var(--carina-background-color-tertiary-pale);
  }

/** Neutral inverse **/

.carina-button--neutral-inverse:focus-visible {
    outline-color: var(
      --carina-border-color-inverse-focus,
      var(--carina-border-color-inverse)
    );
  }

/** neutral-inverse filled **/

.carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated) {
  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-neutral-inverse);
}

/* phase2: underline replaces the hover background change */

.carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated):hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-neutral-inverse);
    background-color: var(--carina-background-color-neutral-inverse-hover);
  }

.carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated):active:not(.carina-button--disabled),
  .carina-button--neutral-inverse.carina-button--filled:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-neutral-inverse);
    background-color: var(--carina-background-color-neutral-inverse-active);
  }

/** neutral inverse/white lined **/

.carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated) {
  border-color: var(--carina-border-color-inverse);
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-base-inverse);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover fill */

.carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated):hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-neutral-inverse);
    background-color: var(--carina-background-color-neutral-inverse-hover);
  }

.carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled),
  .carina-button--neutral-inverse.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-neutral-inverse);
    background-color: var(--carina-background-color-neutral-inverse-active);
  }

/** neutral inverse/white ghost **/

.carina-button--neutral-inverse.carina-button--ghost {
  color: var(--carina-text-color-base-inverse);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover state change */

.carina-button--neutral-inverse.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-neutral-inverse);
    background-color: var(--carina-background-color-neutral-inverse-hover);
  }

.carina-button--neutral-inverse.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--neutral-inverse.carina-button--ghost.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-neutral-inverse);
    background-color: var(--carina-background-color-neutral-inverse-active);
  }

/** neutral **/

.carina-button--neutral:focus-visible {
    outline-color: var(--carina-border-color-hard);
  }

/** neutral filled **/

.carina-button--neutral.carina-button--filled:not(.carina-button--elevated) {
  color: var(--carina-text-color-on-neutral);

  background-color: var(--carina-background-color-neutral);
}

.carina-button--neutral.carina-button--filled:not(.carina-button--elevated):focus-visible {
    outline-color: var(--carina-border-color-inverse);
  }

/* phase2: underline replaces the hover background change */

.carina-button--neutral.carina-button--filled:not(.carina-button--elevated):hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-neutral-hover);
  }

.carina-button--neutral.carina-button--filled:not(.carina-button--elevated):active:not(.carina-button--disabled),
  .carina-button--neutral.carina-button--filled:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) {
    background-color: var(--carina-background-color-neutral-active);
  }

/** neutral lined **/

.carina-button--neutral.carina-button--lined:not(.carina-button--elevated) {
  border-color: var(--carina-border-color-hard);
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-base);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover fill */

.carina-button--neutral.carina-button--lined:not(.carina-button--elevated):hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-neutral);
    background-color: var(--carina-background-color-neutral-hover);
  }

.carina-button--neutral.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled),
  .carina-button--neutral.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-neutral);
    background-color: var(--carina-background-color-neutral-active);
  }

/** neutral ghost **/

.carina-button--neutral.carina-button--ghost {
  color: var(--carina-text-color-base);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover state change */

.carina-button--neutral.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-button--neutral.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--neutral.carina-button--ghost.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-neutral);
    background-color: var(--carina-background-color-neutral-active);
  }

/** Menu button */

.carina-button--menu {
  border-radius: var(--carina-border-radius-xl);

  color: var(--carina-text-color-soft);

  background-color: var(--carina-colors-transparent);
}

.carina-button--menu:hover:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);
  }

/* phase2: underline replaces the hover background change */

.carina-button--menu:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-button--menu:active:not(.carina-button--disabled),
  .carina-button--menu.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);
  }

.carina-button--menu.carina-button--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

/* Danger button */

/** Danger **/

.carina-button--danger:focus-visible {
    outline-color: var(--carina-border-color-danger-focus);
  }

/** danger filled **/

.carina-button--danger.carina-button--filled:not(.carina-button--elevated) {
  border-color: var(--carina-border-color-danger);

  color: var(--carina-text-color-on-danger);

  background-color: var(--carina-background-color-danger);
}

/* phase2: underline replaces the hover background change */

.carina-button--danger.carina-button--filled:not(.carina-button--elevated):hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    border-color: var(--carina-background-color-danger-hover);

    background-color: var(--carina-background-color-danger-hover);
  }

.carina-button--danger.carina-button--filled:not(.carina-button--elevated):active:not(.carina-button--disabled),
  .carina-button--danger.carina-button--filled:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) {
    border-color: var(--carina-background-color-danger-active);

    background-color: var(--carina-background-color-danger-active);
  }

.carina-button--danger.carina-button--filled.carina-button--disabled {
  border-color: transparent;

  color: var(--carina-text-color-on-danger);

  background-color: var(--carina-background-color-neutral);
}

/** danger lined **/

.carina-button--danger.carina-button--lined:not(.carina-button--elevated) {
  border-color: var(--carina-border-color-danger);
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-danger);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover fill */

.carina-button--danger.carina-button--lined:not(.carina-button--elevated):hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-danger);

    background-color: var(--carina-background-color-danger-hover);
    border-color: var(--carina-colors-transparent);
  }

.carina-button--danger.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled),
  .carina-button--danger.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-danger);

    background-color: var(--carina-background-color-danger-active);
    border-color: var(--carina-colors-transparent);
  }

.carina-button--danger.carina-button--lined:not(.carina-button--elevated):active:not(.carina-button--disabled).carina-button--phase2,
  .carina-button--danger.carina-button--lined:not(.carina-button--elevated).carina-button--active:not(.carina-button--disabled).carina-button--phase2 {
    color: var(--carina-text-color-on-danger-pale);

    background-color: var(--carina-background-color-danger-pale-hover);
    border-color: var(--carina-border-color-danger);
  }

.carina-button--danger.carina-button--lined.carina-button--disabled {
  border-color: var(--carina-border-color-base);

  color: var(--carina-text-color-base);

  background-color: var(--carina-colors-transparent);
}

/** danger ghost **/

.carina-button--danger.carina-button--ghost {
  color: var(--carina-text-color-danger);

  background-color: var(--carina-colors-transparent);
}

/* phase2: underline replaces the hover state change */

.carina-button--danger.carina-button--ghost:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    color: var(--carina-text-color-on-danger-pale);

    background-color: var(--carina-background-color-danger-pale);
  }

.carina-button--danger.carina-button--ghost:active:not(.carina-button--disabled),
  .carina-button--danger.carina-button--ghost.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-on-danger-pale);

    background-color: var(--carina-background-color-danger-pale-hover);
  }

.carina-button--danger.carina-button--ghost:active:not(.carina-button--disabled):not(:focus-visible),
  .carina-button--danger.carina-button--ghost.carina-button--active:not(.carina-button--disabled):not(:focus-visible) {
    outline: none;
  }

.carina-button--danger.carina-button--ghost.carina-button--disabled {
  color: var(--carina-text-color-base);

  background-color: var(--carina-colors-transparent);
}

/* SIZES */

.carina-button--sm {
  min-width: 80px;

  min-height: 36px;
  padding-right: var(--carina-spacing-4);
  padding-left: var(--carina-spacing-4);

  font-size: var(--carina-font-size-body-sm);
}

.carina-button--md {
  min-width: 96px;

  min-height: 40px;
  padding-right: var(--carina-spacing-6);
  padding-left: var(--carina-spacing-6);

  font-size: var(--carina-font-size-body-md);
}

.carina-button--lg {
  min-width: 112px;

  min-height: 44px;
  padding-right: var(--carina-spacing-6);
  padding-left: var(--carina-spacing-6);

  font-size: var(--carina-font-size-body-md);
}

.carina-button--sm.carina-button--phase2,
.carina-button--md.carina-button--phase2,
.carina-button--lg.carina-button--phase2 {
  font-weight: var(--carina-font-weight-body-bold);
}

/* SHAPES AND POSITIONS */

.carina-button--pill {
  border-radius: var(--carina-border-radius-full);
}

.carina-button--block {
  width: 100%;
}

.carina-button.carina-button--elevated {
  color: var(--carina-text-color-on-primary);

  background-color: var(--carina-background-color-primary);
}

.carina-button.carina-button--elevated:hover:not(.carina-button--disabled) {
    box-shadow: var(--carina-box-shadow-2xl);
    transform: scale(var(--carina-scale-grow));
  }

.carina-button.carina-button--elevated:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-primary-hover);
  }

.carina-button.carina-button--elevated:active:not(.carina-button--disabled),
  .carina-button.carina-button--elevated.carina-button--active:not(.carina-button--disabled) {
    background-color: var(--carina-background-color-primary-active);
    transform: none;
  }

/* ICONS */

.carina-button--icon-only,
.carina-button--icons-only {
  min-width: 0;
  margin: 0;
  padding: var(--carina-spacing-1);
}

.carina-button--icons-only {
  justify-content: space-evenly;
}

.carina-button--icon-only.carina-button--sm {
  width: var(--carina-spacing-9);
  height: var(--carina-spacing-9);
}

.carina-button--icon-only.carina-button--md {
  width: var(--carina-spacing-10);
  height: var(--carina-spacing-10);
}

.carina-button--icon-only.carina-button--lg {
  width: var(--carina-spacing-11);
  height: var(--carina-spacing-11);
}

.carina-button--icons-only.carina-button--sm {
  width: var(--carina-spacing-15);
  height: var(--carina-spacing-9);
}

.carina-button--icons-only.carina-button--md {
  width: var(--carina-spacing-16);
  height: var(--carina-spacing-10);
}

.carina-button--icons-only.carina-button--lg {
  width: var(--carina-spacing-17);
  height: var(--carina-spacing-11);
}

.carina-button--icon-only.carina-button--fab {
  width: var(--carina-spacing-16);
  height: var(--carina-spacing-16);
}

.carina-button--icons-only.carina-button--fab {
  width: var(--carina-spacing-20);
  height: var(--carina-spacing-16);
}

.carina-button--icons-only.carina-button--fab svg {
    width: var(--carina-spacing-7);
    height: var(--carina-spacing-7);
  }

.carina-button--icon-only.carina-button--fab,
.carina-button--icons-only.carina-button--fab {
  padding: var(--carina-spacing-3);
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-on-primary);

  background-color: var(--carina-background-color-primary);
  box-shadow: var(--carina-box-shadow-2xl);
}

/* phase2: underline replaces the hover background change */

.carina-button--icon-only.carina-button--fab:hover:not(.carina-button--disabled):not(.carina-button--phase2), .carina-button--icons-only.carina-button--fab:hover:not(.carina-button--disabled):not(.carina-button--phase2) {
    background-color: var(--carina-background-color-primary-hover);
  }

.carina-button--icon-only.carina-button--fab:active:not(.carina-button--disabled), .carina-button--icons-only.carina-button--fab:active:not(.carina-button--disabled) {
    background-color: var(--carina-background-color-primary-active);
  }

.carina-button__icon-start,
.carina-button__icon-end {
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.carina-button__icon-start {
  margin-inline-end: var(--carina-spacing-2);
  margin-inline-start: 0;
}

.carina-button__icon-end {
  margin-inline-end: 0;
  margin-inline-start: var(--carina-spacing-2);
}

.carina-button--icon-only .carina-button__icon-start,
.carina-button--icons-only .carina-button__icon-start,
.carina-button--icon-only .carina-button__icon-end,
.carina-button--icons-only .carina-button__icon-end {
  margin: 0;
  margin-inline: 0;
}

.carina-alerts {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.carina-alerts--fixed {
  position: fixed;

  top: var(--carina-spacing-6);
  right: var(--carina-spacing-6);
  left: var(--carina-spacing-6);

  z-index: var(--carina-z-index-alert);

  align-items: center;
  width: calc(100% - var(--carina-spacing-12));

  pointer-events: none;
}

.carina-alerts__container {
  display: flex;
  justify-content: center;

  box-sizing: border-box;
  width: 100%;
}

.carina-alerts__collapse {
  width: 100%;

  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-out
  );
}

.carina-alerts__collapse-container {
  padding-bottom: var(--carina-spacing-3);
}

.carina-alerts__collapse-container--last {
  padding-bottom: var(--carina-spacing-0);
}

.carina-alerts--page .carina-alerts__collapse {
  transition-duration: var(--carina-transition-duration-200);
}

.carina-alerts--user .carina-alerts__collapse {
  transition-duration: var(--carina-transition-duration-400);
}

.carina-alerts__collapse.carina-transition--out {
  --carina-transition-opacity: var(--carina-opacity-0);
}

/** Disable collapse on the way in **/

.carina-alerts__collapse.carina-transition--appear-active {
  height: auto;
  overflow: visible;
}

@media not (prefers-reduced-motion) {
  .carina-alerts__collapse.carina-transition--appear-start {
    --carina-transition-translate-y: -100%;
  }

  .carina-alerts__collapse.carina-transition--exit-done {
    position: absolute;
  }
}

@media (prefers-reduced-motion) {
  .carina-alerts--page .carina-alerts__collapse,
  .carina-alerts--user .carina-alerts__collapse {
    transition-timing-function: var(--carina-transition-timing-function-linear);
    transition-duration: var(--carina-transition-duration-reduced-motion);
  }
}

.carina-app-alert {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 50px;
  padding-right: var(--carina-spacing-3);
  padding-left: var(--carina-spacing-3);

  border-style: solid;
  border-width: var(--carina-border-width-1);

  line-height: var(--carina-line-height-tight);

  box-shadow: none;

  pointer-events: auto;
}

.carina-app-alert--info {
  color: var(--carina-text-color-on-info);
  border-color: var(--carina-background-color-info);

  background-color: var(--carina-background-color-info);
}

.carina-app-alert--warning {
  color: var(--carina-text-color-on-warning);
  border-color: var(--carina-background-color-warning);

  background-color: var(--carina-background-color-warning);
}

.carina-app-alert--danger {
  color: var(--carina-text-color-on-danger);
  border-color: var(--carina-background-color-danger);

  background-color: var(--carina-background-color-danger);
}

.carina-app-alert--success {
  color: var(--carina-text-color-on-success);
  border-color: var(--carina-background-color-success);

  background-color: var(--carina-background-color-success);
}

.carina-app-alert__action-container {
  display: flex;
  flex-grow: 2;
  align-items: center;
  justify-content: center;
}

.carina-app-alert__action-container .carina-app-alert__action {
    margin-top: var(--carina-spacing-2);
    margin-bottom: var(--carina-spacing-2);

    font-weight: var(--carina-font-weight-body);

    background-color: transparent;
  }

.carina-app-alert__action-container .carina-app-alert__action a {
      border-color: transparent;
      border-style: solid;
      border-width: var(--carina-border-width-4);

      text-decoration: underline;

      background-color: transparent;

      border-radius: var(--carina-border-radius-md);
    }

.carina-app-alert--rebrand .carina-app-alert__action-container .carina-app-alert__action a {
        border-radius: var(--carina-border-radius-sm);
      }

.carina-app-alert__action-container .carina-app-alert__action a{

      outline-width: var(--carina-border-width-2);
      outline-style: solid;
      outline-color: var(--carina-colors-transparent);
      outline-offset: var(--carina-border-width-0);
      transition-timing-function: var(
        --carina-transition-timing-function-expressive-ease-in-out
      );
      transition-duration: calc(
        var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
      );
      transition-property: outline-color;
}

.carina-app-alert__action-container .carina-app-alert__action a:focus-visible {
        transition-duration: var(--carina-transition-duration-100);
      }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a,
  .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a {
    color: var(--carina-text-color-on-info);
  }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:focus-visible, .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:focus-visible {
      outline-color: var(--carina-text-color-on-info);
    }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a,
  .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a {
    color: var(--carina-text-color-on-success);
  }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:focus-visible, .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:focus-visible {
      outline-color: var(--carina-text-color-on-success);
    }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a,
  .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a {
    color: var(--carina-text-color-on-danger);
  }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:focus-visible, .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:focus-visible {
      outline-color: var(--carina-text-color-on-danger);
    }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a,
  .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a {
    color: var(--carina-text-color-on-warning);
  }

.carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:focus-visible, .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:focus-visible {
      outline-color: var(--carina-text-color-on-warning);
    }

.carina-app-alert__action--dismissible {
  margin-inline-end: 0;
}

.carina-app-alert__content-container {
  display: flex;
  flex-wrap: nowrap;
}

.carina-app-alert__content {
  margin-top: var(--carina-spacing-4);
  margin-inline-start: var(--carina-spacing-3);

  margin-bottom: var(--carina-spacing-4);
  margin-inline-end: var(--carina-spacing-4);

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

.carina-app-alert .carina-app-alert__dismiss-container {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 36px;
  margin: auto;

  cursor: pointer;
}

[dir='rtl'] .carina-app-alert .carina-app-alert__dismiss-container {
    margin-right: var(--carina-spacing-4);
    margin-left: 0;
  }

.carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button span {
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: var(--carina-border-radius-full);
  }

.carina-app-alert .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button {
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    border-color: transparent;

    border-style: solid;
    border-width: var(--carina-border-width-2);
    border-radius: var(--carina-border-radius-full);
    outline-offset: var(--carina-border-width-0);

    background-color: transparent;
  }

/* Per-appearance dismiss button colors only apply when phase1 is off. Under
 * phase1 the dark surface-inverse background lets the Button's neutral-inverse
 * variant drive every color/state on its own, so the alert layer stays out
 * of the way. */

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info {
    color: var(--carina-text-color-on-info);
  }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info:hover {
      background-color: var(--carina-background-color-info-hover);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info:active {
      background-color: var(--carina-background-color-info-active);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--info:focus-visible {
      outline-color: var(--carina-text-color-on-info);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger {
    color: var(--carina-text-color-on-danger);
  }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger:hover {
      background-color: var(--carina-background-color-danger-hover);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger:active {
      background-color: var(--carina-background-color-danger-active);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--danger:focus-visible {
      outline-color: var(--carina-text-color-on-danger);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success {
    color: var(--carina-text-color-on-success);
  }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success:hover {
      background-color: var(--carina-background-color-success-hover);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success:active {
      background-color: var(--carina-background-color-success-active);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--success:focus-visible {
      outline-color: var(--carina-text-color-on-success);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning {
    color: var(--carina-text-color-on-warning);
  }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning:hover {
      background-color: var(--carina-background-color-warning-hover);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning:active {
      background-color: var(--carina-background-color-warning-active);
    }

.carina-app-alert:not(.carina-app-alert--phase1, .carina-app-alert--phase2) .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button--warning:focus-visible {
      outline-color: var(--carina-text-color-on-warning);
    }

.carina-app-alert__icon {
  align-self: flex-start;
  height: 24px;
  margin-top: var(--carina-spacing-3);
  margin-bottom: var(--carina-spacing-3);

  background-color: transparent;
}

.carina-app-alert__icon--info {
  color: var(--carina-text-color-on-info);
}

.carina-app-alert__icon--warning {
  color: var(--carina-text-color-on-warning);
}

.carina-app-alert__icon--danger {
  color: var(--carina-text-color-on-danger);
}

.carina-app-alert__icon--success {
  color: var(--carina-text-color-on-success);
}

/* phase1: unified dark surface + base-inverse text/links across all appearances
 * and both formats. Selectors here match or exceed the specificity of the
 * existing per-appearance rules so the phase1 colors actually win. Per-appearance
 * icons switch to saturated tokens that read on the dark surface; border colors
 * collapse onto the dark surface. */

.carina-app-alert--phase1 {
  color: var(--carina-text-color-base-inverse);
  border-color: var(--carina-background-color-surface-inverse);

  background-color: var(--carina-background-color-surface-inverse);
}

/* `:where(&)` neutralises the phase1 part of the specificity so these match
   * the original per-appearance rules at 0,1,0 — both source-ordered after,
   * so phase1 wins via order rather than weight. */

:where(.carina-app-alert--phase1).carina-app-alert--info,
  :where(.carina-app-alert--phase1).carina-app-alert--warning,
  :where(.carina-app-alert--phase1).carina-app-alert--danger,
  :where(.carina-app-alert--phase1).carina-app-alert--success {
    border-color: var(--carina-background-color-surface-inverse);
    background-color: var(--carina-background-color-surface-inverse);
  }

.carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a,
    .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a {
      color: var(--carina-text-color-base-inverse);
    }

.carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:active,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:hover,
      .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:active {
        color: var(--carina-text-color-base-inverse);
      }

.carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:focus-visible, .carina-app-alert--phase1 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:focus-visible {
        outline-color: var(--carina-text-color-base-inverse);
      }

.carina-app-alert--phase1 .carina-app-alert__icon--info {
    color: var(--carina-border-color-info);
  }

.carina-app-alert--phase1 .carina-app-alert__icon--warning {
    color: var(--carina-border-color-warning);
  }

.carina-app-alert--phase1 .carina-app-alert__icon--danger {
    color: var(--carina-border-color-danger);
  }

.carina-app-alert--phase1 .carina-app-alert__icon--success {
    color: var(--carina-border-color-success);
  }

.carina-app-alert--phase2 {
  color: var(--carina-text-color-base-inverse);
  border-color: var(--carina-background-color-surface-inverse);
  background-color: var(--carina-background-color-surface-inverse);
  border-width: var(--carina-border-width-0);
  flex-direction: column;
  min-height: 60px;
  padding: var(--carina-spacing-0);
  position: relative;
}

/* `:where(&)` neutralises the phase1 part of the specificity so these match
   * the original per-appearance rules at 0,1,0 — both source-ordered after,
   * so phase1 wins via order rather than weight. */

:where(.carina-app-alert--phase2).carina-app-alert--info,
  :where(.carina-app-alert--phase2).carina-app-alert--warning,
  :where(.carina-app-alert--phase2).carina-app-alert--danger,
  :where(.carina-app-alert--phase2).carina-app-alert--success {
    border-color: var(--carina-background-color-surface-inverse);
    background-color: var(--carina-background-color-surface-inverse);
  }

.carina-app-alert--phase2 .carina-app-alert__container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    width: 100%;
    padding: var(--carina-spacing-0) var(--carina-spacing-3);
  }

.carina-app-alert--phase2 .carina-app-alert__indicator {
    position: absolute;
    top: 0;
    height: 4px;
    width: 100%;
    flex-shrink: 0;
  }

:where(.carina-app-alert--phase2).carina-app-alert--info .carina-app-alert__indicator {
    background-color: var(--carina-border-color-info);
  }

:where(.carina-app-alert--phase2).carina-app-alert--warning .carina-app-alert__indicator {
    background-color: var(--carina-border-color-warning);
  }

:where(.carina-app-alert--phase2).carina-app-alert--danger .carina-app-alert__indicator {
    background-color: var(--carina-border-color-danger);
  }

:where(.carina-app-alert--phase2).carina-app-alert--success .carina-app-alert__indicator {
    background-color: var(--carina-border-color-success);
  }

.carina-app-alert--phase2 .carina-app-alert__icon {
    align-self: center;
    margin-top: var(--carina-spacing-0);
    margin-bottom: var(--carina-spacing-0);
  }

.carina-app-alert--phase2 .carina-app-alert__icon--info {
    color: var(--carina-border-color-info);
  }

.carina-app-alert--phase2 .carina-app-alert__icon--warning {
    color: var(--carina-border-color-warning);
  }

.carina-app-alert--phase2 .carina-app-alert__icon--danger {
    color: var(--carina-border-color-danger);
  }

.carina-app-alert--phase2 .carina-app-alert__icon--success {
    color: var(--carina-border-color-success);
  }

.carina-app-alert--phase2 .carina-app-alert__content {
    line-height: var(--carina-line-height-body-sm);
    align-content: center;
    margin-bottom: var(--carina-spacing-3);
    margin-top: var(--carina-spacing-3);
  }

.carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a,
    .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a {
      color: var(--carina-text-color-base-inverse);
    }

.carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:active,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:hover,
      .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:active {
        color: var(--carina-text-color-base-inverse);
      }

.carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--info a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--warning a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--danger a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__action.carina-app-alert__action--success a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--info a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--warning a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--danger a:focus-visible, .carina-app-alert--phase2 .carina-app-alert__action-container .carina-app-alert__content.carina-app-alert__content--success a:focus-visible {
        outline-color: var(--carina-text-color-base-inverse);
      }

.carina-app-alert--phase2 .carina-app-alert__action {
    align-self: center;
  }

.carina-app-alert--phase2 .carina-app-alert__action--dismissible {
      margin-inline-end: var(--carina-spacing-4);
    }

.carina-app-alert--phase2 .carina-app-alert__dismiss-container {
    align-self: center;
  }

.carina-app-alert--phase2 .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button,
    .carina-app-alert--phase2 .carina-app-alert__dismiss-container .carina-app-alert__dismiss-button span {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-app-alert--phase2.carina-app-alert--multiline .carina-app-alert__content {
      padding-top: var(--carina-spacing-1);
    }

.carina-app-alert--phase2.carina-app-alert--multiline .carina-app-alert__icon,
    .carina-app-alert--phase2.carina-app-alert--multiline .carina-app-alert__action,
    .carina-app-alert--phase2.carina-app-alert--multiline .carina-app-alert__dismiss-container {
      margin-top: var(--carina-spacing-3);
      align-self: flex-start;
    }

.carina-page-alert {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding-right: var(--carina-spacing-3);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: 10px;

  line-height: var(--carina-line-height-tight);

  box-shadow: none;

  pointer-events: auto;
}

[dir='rtl'] .carina-page-alert {
    padding-left: var(--carina-spacing-4);
  }

.carina-page-alert--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-page-alert--info {
  border-color: var(--carina-border-color-info);
  color: var(--carina-text-color-on-info-pale);
  background-color: var(--carina-background-color-info-pale);
}

.carina-page-alert--warning {
  border-color: var(--carina-border-color-warning);
  color: var(--carina-text-color-on-warning-pale);
  background-color: var(--carina-background-color-warning-pale);
}

.carina-page-alert--danger {
  border-color: var(--carina-border-color-danger);
  color: var(--carina-text-color-on-danger-pale);
  background-color: var(--carina-background-color-danger-pale);
}

.carina-page-alert--success {
  border-color: var(--carina-border-color-success);
  color: var(--carina-text-color-on-success-pale);
  background-color: var(--carina-background-color-success-pale);
}

.carina-page-alert__title {
  margin-bottom: var(--carina-spacing-2);

  font-weight: var(--carina-font-weight-display);
}

.carina-page-alert__action-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.carina-page-alert__action-container--bottom {
  flex-wrap: wrap;
}

.carina-page-alert__action {
  margin-top: var(--carina-spacing-4);
  margin-inline-end: var(--carina-spacing-4);

  margin-bottom: var(--carina-spacing-4);
  margin-inline-start: auto;

  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-body-sm);
}

.carina-page-alert__action a {
    padding: var(--carina-spacing-0-5);

    text-decoration: underline;
    border-radius: var(--carina-border-radius-md);
    outline-width: var(--carina-border-width-2);
    outline-style: solid;
    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-0);

    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-duration: calc(
      var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
    );
    transition-property: outline-color;
  }

.carina-page-alert__action a:focus-visible {
      transition-duration: var(--carina-transition-duration-100);
    }

.carina-page-alert--rebrand .carina-page-alert__action a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-page-alert__action--bottom {
  flex: 0 0 100%;
  margin-top: 0;
  margin-bottom: var(--carina-spacing-4);
}

.carina-page-alert__action.carina-page-alert__action--info a,
.carina-page-alert__content.carina-page-alert__content--info a {
  color: var(--carina-text-color-on-info-pale);
}

.carina-page-alert__action.carina-page-alert__action--info a:hover, .carina-page-alert__content.carina-page-alert__content--info a:hover {
    color: var(--carina-text-color-on-info-pale);
  }

.carina-page-alert__action.carina-page-alert__action--info a:active, .carina-page-alert__content.carina-page-alert__content--info a:active {
    color: var(--carina-text-color-on-info-pale);
  }

.carina-page-alert__action.carina-page-alert__action--info a:focus-visible, .carina-page-alert__content.carina-page-alert__content--info a:focus-visible {
    outline-color: var(--carina-text-color-on-info-pale);
  }

.carina-page-alert__action.carina-page-alert__action--success a,
.carina-page-alert__content.carina-page-alert__content--success a {
  color: var(--carina-text-color-on-success-pale);
}

.carina-page-alert__action.carina-page-alert__action--success a:hover, .carina-page-alert__content.carina-page-alert__content--success a:hover {
    color: var(--carina-text-color-on-success-pale);
  }

.carina-page-alert__action.carina-page-alert__action--success a:active, .carina-page-alert__content.carina-page-alert__content--success a:active {
    color: var(--carina-text-color-on-success-pale);
  }

.carina-page-alert__action.carina-page-alert__action--success a:focus-visible, .carina-page-alert__content.carina-page-alert__content--success a:focus-visible {
    outline-color: var(--carina-text-color-on-success-pale);
  }

.carina-page-alert__action.carina-page-alert__action--danger a,
.carina-page-alert__content.carina-page-alert__content--danger a {
  color: var(--carina-text-color-on-danger-pale);
}

.carina-page-alert__action.carina-page-alert__action--danger a:hover, .carina-page-alert__content.carina-page-alert__content--danger a:hover {
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-page-alert__action.carina-page-alert__action--danger a:active, .carina-page-alert__content.carina-page-alert__content--danger a:active {
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-page-alert__action.carina-page-alert__action--danger a:focus-visible, .carina-page-alert__content.carina-page-alert__content--danger a:focus-visible {
    outline-color: var(--carina-text-color-on-danger-pale);
  }

.carina-page-alert__action.carina-page-alert__action--warning a,
.carina-page-alert__content.carina-page-alert__content--warning a {
  color: var(--carina-text-color-on-warning-pale);
}

.carina-page-alert__action.carina-page-alert__action--warning a:hover, .carina-page-alert__content.carina-page-alert__content--warning a:hover {
    color: var(--carina-text-color-on-warning-pale);
  }

.carina-page-alert__action.carina-page-alert__action--warning a:active, .carina-page-alert__content.carina-page-alert__content--warning a:active {
    color: var(--carina-text-color-on-warning-pale);
  }

.carina-page-alert__action.carina-page-alert__action--warning a:focus-visible, .carina-page-alert__content.carina-page-alert__content--warning a:focus-visible {
    outline-color: var(--carina-text-color-on-warning-pale);
  }

.carina-page-alert__action--dismissible {
  margin-inline-end: 0;
}

.carina-page-alert__action--dismissible a,
  .carina-page-alert__action--dismissible button {
    border-color: transparent;
  }

.carina-page-alert__content-container {
  margin-top: var(--carina-spacing-4);
  margin-inline-end: var(--carina-spacing-6);

  margin-bottom: var(--carina-spacing-4);
  margin-inline-start: 0;

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

.carina-page-alert__content-container--bottom {
  margin-bottom: var(--carina-spacing-3);
}

/* $(base)__content {} */

.carina-page-alert .carina-page-alert__dismiss-container {
  align-self: flex-start;
  height: 36px;
  margin-top: var(--carina-spacing-1-5);
  margin-right: 0;
  margin-left: var(--carina-spacing-0-5);

  cursor: pointer;
}

[dir='rtl'] .carina-page-alert .carina-page-alert__dismiss-container {
    margin-right: var(--carina-spacing-2);
    margin-left: 0;
  }

.carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    padding: 0;

    border-radius: var(--carina-border-radius-full);
    outline-offset: var(--carina-border-width-0);
  }

.carina-page-alert .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button span {
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: var(--carina-border-radius-full);
    }

/* Per-appearance dismiss button colors only apply when phase1 is off. Under
 * phase1 the dark surface-inverse background lets the Button's neutral-inverse
 * variant drive every color/state on its own. */

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info {
    color: var(--carina-text-color-on-info-pale);
  }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info:hover {
      color: var(--carina-text-color-on-info-pale);

      background-color: var(--carina-background-color-info-pale-hover);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info:active {
      color: var(--carina-text-color-on-info-pale);

      background-color: var(--carina-background-color-info-pale-active);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--info:focus-visible {
      outline-color: var(--carina-text-color-on-info-pale);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger {
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger:hover {
      color: var(--carina-text-color-on-danger-pale);

      background-color: var(--carina-background-color-danger-pale-hover);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger:active {
      color: var(--carina-text-color-on-danger-pale);

      background-color: var(--carina-background-color-danger-pale-active);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--danger:focus-visible {
      outline-color: var(--carina-text-color-on-danger-pale);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success {
    color: var(--carina-text-color-on-success-pale);
  }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success:hover {
      color: var(--carina-text-color-on-success-pale);

      background-color: var(--carina-background-color-success-pale-hover);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success:active {
      color: var(--carina-text-color-on-success-pale);

      background-color: var(--carina-background-color-success-pale-active);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--success:focus-visible {
      outline-color: var(--carina-text-color-on-success-pale);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning {
    color: var(--carina-text-color-on-warning-pale);
  }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning:hover {
      color: var(--carina-text-color-on-warning-pale);

      background-color: var(--carina-background-color-warning-pale-hover);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning:active {
      color: var(--carina-text-color-on-warning-pale);

      background-color: var(--carina-background-color-warning-pale-active);
    }

.carina-page-alert:not(.carina-page-alert--phase1, .carina-page-alert--phase2) .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button--warning:focus-visible {
      outline-color: var(--carina-text-color-on-warning-pale);
    }

.carina-page-alert__icon {
  display: flex;
  align-items: center;
  align-self: flex-start;

  padding-top: var(--carina-spacing-3);
  padding-inline-start: var(--carina-spacing-4);

  padding-bottom: var(--carina-spacing-3);
  padding-inline-end: var(--carina-spacing-3);

  border-radius: 10px;
}

.carina-page-alert__icon--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-page-alert__icon--info {
  color: var(--carina-text-color-on-info-pale-soft);
}

.carina-page-alert__icon--warning {
  color: var(--carina-text-color-on-warning-pale-soft);
}

.carina-page-alert__icon--danger {
  color: var(--carina-text-color-on-danger-pale-soft);
}

.carina-page-alert__icon--success {
  color: var(--carina-text-color-on-success-pale-soft);
}

/* phase1: unified dark surface + base-inverse text/links across all appearances.
 * Selectors here match or exceed the specificity of the existing per-appearance
 * rules so the phase1 colors actually win. Per-appearance border tokens are
 * intentionally not overridden; icons switch to saturated tokens that read on
 * the dark surface. */

.carina-page-alert--phase1 {
  color: var(--carina-text-color-base-inverse);
  background-color: var(--carina-background-color-surface-inverse);
}

/* `:where(&)` neutralises the phase1 part of the specificity so these match
   * the original per-appearance rules at 0,1,0 — both source-ordered after,
   * so phase1 wins via order rather than weight. */

:where(.carina-page-alert--phase1).carina-page-alert--info,
  :where(.carina-page-alert--phase1).carina-page-alert--warning,
  :where(.carina-page-alert--phase1).carina-page-alert--danger,
  :where(.carina-page-alert--phase1).carina-page-alert--success {
    background-color: var(--carina-background-color-surface-inverse);
  }

.carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--info a,
  .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--warning a,
  .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--danger a,
  .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--success a,
  .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--info a,
  .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--warning a,
  .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--danger a,
  .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--success a {
    color: var(--carina-text-color-base-inverse);
  }

.carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--info a:hover,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--info a:active,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--warning a:hover,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--warning a:active,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--danger a:hover,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--danger a:active,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--success a:hover,
    .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--success a:active,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--info a:hover,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--info a:active,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--warning a:hover,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--warning a:active,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--danger a:hover,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--danger a:active,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--success a:hover,
    .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--success a:active {
      color: var(--carina-text-color-base-inverse);
    }

.carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--info a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--warning a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--danger a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__action.carina-page-alert__action--success a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--info a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--warning a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--danger a:focus-visible, .carina-page-alert--phase1 .carina-page-alert__content.carina-page-alert__content--success a:focus-visible {
      outline-color: var(--carina-text-color-base-inverse);
    }

.carina-page-alert--phase1 .carina-page-alert__icon--info {
    color: var(--carina-border-color-info);
  }

.carina-page-alert--phase1 .carina-page-alert__icon--warning {
    color: var(--carina-border-color-warning);
  }

.carina-page-alert--phase1 .carina-page-alert__icon--danger {
    color: var(--carina-border-color-danger);
  }

.carina-page-alert--phase1 .carina-page-alert__icon--success {
    color: var(--carina-border-color-success);
  }

.carina-page-alert--phase2 {
  color: var(--carina-text-color-base-inverse);
  background-color: var(--carina-background-color-surface-inverse);
  border-color: transparent;
  min-height: 54px;
}

:where(.carina-page-alert--phase2).carina-page-alert--info {
    border-color: var(--carina-border-color-info);
  }

:where(.carina-page-alert--phase2).carina-page-alert--warning {
    border-color: var(--carina-border-color-warning);
  }

:where(.carina-page-alert--phase2).carina-page-alert--danger {
    border-color: var(--carina-border-color-danger);
  }

:where(.carina-page-alert--phase2).carina-page-alert--success {
    border-color: var(--carina-border-color-success);
  }

.carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--info a,
  .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--warning a,
  .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--danger a,
  .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--success a,
  .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--info a,
  .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--warning a,
  .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--danger a,
  .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--success a {
    padding: var(--carina-spacing-0);
    color: var(--carina-text-color-base-inverse);
  }

.carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--info a:hover,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--info a:active,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--warning a:hover,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--warning a:active,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--danger a:hover,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--danger a:active,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--success a:hover,
    .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--success a:active,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--info a:hover,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--info a:active,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--warning a:hover,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--warning a:active,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--danger a:hover,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--danger a:active,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--success a:hover,
    .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--success a:active {
      color: var(--carina-text-color-base-inverse);
    }

.carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--info a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--warning a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--danger a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__action.carina-page-alert__action--success a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--info a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--warning a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--danger a:focus-visible, .carina-page-alert--phase2 .carina-page-alert__content.carina-page-alert__content--success a:focus-visible {
      outline-color: var(--carina-text-color-base-inverse);
    }

.carina-page-alert--phase2 .carina-page-alert__action-container {
    margin: var(--carina-spacing-2);
    margin-inline-start: var(--carina-spacing-4);
    justify-content: space-between;
    gap: var(--carina-spacing-2);
    align-items: center;
  }

.carina-page-alert--phase2 .carina-page-alert__action-container--bottom {
      margin-bottom: var(--carina-spacing-4);
    }

.carina-page-alert--phase2 .carina-page-alert__content-container {
    margin: var(--carina-spacing-0);
    line-height: var(--carina-line-height-body-sm);
  }

.carina-page-alert--phase2 .carina-page-alert__action {
    display: flex;
    margin: var(--carina-spacing-0);
    align-self: flex-start;
  }

.carina-page-alert--phase2:not(.carina-page-alert--no-title)
    .carina-page-alert__action:has(.carina-text-link):not(.carina-page-alert__action--bottom) {
    margin-top: var(--carina-spacing-2);
  }

.carina-page-alert--phase2 .carina-page-alert__dismiss-container {
    margin-top: var(--carina-spacing-2);
    margin-inline-end: var(--carina-spacing-0);
    margin-left: var(--carina-spacing-0);
  }

.carina-page-alert--phase2 .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button,
    .carina-page-alert--phase2 .carina-page-alert__dismiss-container .carina-page-alert__dismiss-button span {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-page-alert--phase2 .carina-page-alert__icon {
    width: 48px;
    align-self: stretch;

    border-start-start-radius: var(--carina-border-radius-xs);
    border-start-end-radius: var(--carina-border-radius-none);
    border-end-start-radius: var(--carina-border-radius-xs);
    border-end-end-radius: var(--carina-border-radius-none);

    padding-inline-start: var(--carina-spacing-3);
  }

.carina-page-alert--phase2 .carina-page-alert__icon.carina-page-alert__icon--info {
      background-color: var(--carina-background-color-info);
      color: var(--carina-text-color-on-info);
    }

.carina-page-alert--phase2 .carina-page-alert__icon.carina-page-alert__icon--warning {
      background-color: var(--carina-background-color-warning);
      color: var(--carina-text-color-on-warning);
    }

.carina-page-alert--phase2 .carina-page-alert__icon.carina-page-alert__icon--danger {
      background-color: var(--carina-background-color-danger);
      color: var(--carina-text-color-on-danger);
    }

.carina-page-alert--phase2 .carina-page-alert__icon.carina-page-alert__icon--success {
      background-color: var(--carina-background-color-success);
      color: var(--carina-text-color-on-success);
    }

.carina-user-alert {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 560px;
  min-height: 50px;
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: 10px;

  line-height: var(--carina-line-height-body-sm);

  box-shadow: var(--carina-box-shadow-lg);

  pointer-events: auto;
}

.carina-user-alert--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-user-alert--info {
  border-color: var(--carina-border-color-info);
  color: var(--carina-text-color-on-info-pale);
  background-color: var(--carina-background-color-info-pale);
}

.carina-user-alert--warning {
  border-color: var(--carina-border-color-warning);
  color: var(--carina-text-color-on-warning-pale);
  background-color: var(--carina-background-color-warning-pale);
}

.carina-user-alert--danger {
  border-color: var(--carina-border-color-danger);
  color: var(--carina-text-color-on-danger-pale);
  background-color: var(--carina-background-color-danger-pale);
}

.carina-user-alert--success {
  border-color: var(--carina-border-color-success);
  color: var(--carina-text-color-on-success-pale);
  background-color: var(--carina-background-color-success-pale);
}

.carina-user-alert--fixed {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: var(--carina-z-index-alert);

  width: calc(100% - 40px);

  transform: translateX(-50%);
}

.carina-user-alert__title {
  margin-bottom: var(--carina-spacing-2);

  font-weight: var(--carina-font-weight-display);
}

.carina-user-alert__action-container {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.carina-user-alert__action {
  margin-top: var(--carina-spacing-5);
  margin-inline-end: var(--carina-spacing-5);

  margin-bottom: var(--carina-spacing-5);
  margin-inline-start: auto;

  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-body-sm);

  max-height: 20px;
}

.carina-user-alert__action a {
    padding: var(--carina-spacing-0-5);

    text-decoration: underline;

    border-radius: var(--carina-border-radius-md);
    outline-width: var(--carina-border-width-2);
    outline-style: solid;
    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-0);

    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-duration: calc(
      var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
    );
    transition-property: outline-color;
  }

.carina-user-alert__action a:focus-visible {
      transition-duration: var(--carina-transition-duration-100);
    }

.carina-user-alert--rebrand .carina-user-alert__action a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-user-alert__action button {
    margin-top: calc(-1 * var(--carina-spacing-2));
    margin-bottom: calc(-1 * var(--carina-spacing-2));
    font-weight: var(--carina-font-weight-body);
  }

.carina-user-alert__action--bottom {
  flex: 0 0 100%;
  margin-top: 0;
  margin-bottom: var(--carina-spacing-4);
}

.carina-user-alert__action.carina-user-alert__action--info a,
.carina-user-alert__content.carina-user-alert__content--info a {
  color: var(--carina-text-color-on-info-pale);
}

.carina-user-alert__action.carina-user-alert__action--info a:hover, .carina-user-alert__content.carina-user-alert__content--info a:hover {
    color: var(--carina-text-color-on-info-pale);
  }

.carina-user-alert__action.carina-user-alert__action--info a:active, .carina-user-alert__content.carina-user-alert__content--info a:active {
    color: var(--carina-text-color-on-info-pale);
  }

.carina-user-alert__action.carina-user-alert__action--info a:focus-visible, .carina-user-alert__content.carina-user-alert__content--info a:focus-visible {
    outline-color: var(--carina-text-color-on-info-pale);
  }

.carina-user-alert__action.carina-user-alert__action--success a,
.carina-user-alert__content.carina-user-alert__content--success a {
  color: var(--carina-text-color-on-success-pale);
}

.carina-user-alert__action.carina-user-alert__action--success a:hover, .carina-user-alert__content.carina-user-alert__content--success a:hover {
    color: var(--carina-text-color-on-success-pale);
  }

.carina-user-alert__action.carina-user-alert__action--success a:active, .carina-user-alert__content.carina-user-alert__content--success a:active {
    color: var(--carina-text-color-on-success-pale);
  }

.carina-user-alert__action.carina-user-alert__action--success a:focus-visible, .carina-user-alert__content.carina-user-alert__content--success a:focus-visible {
    outline-color: var(--carina-text-color-on-success-pale);
  }

.carina-user-alert__action.carina-user-alert__action--danger a,
.carina-user-alert__content.carina-user-alert__content--danger a {
  color: var(--carina-text-color-on-danger-pale);
}

.carina-user-alert__action.carina-user-alert__action--danger a:hover, .carina-user-alert__content.carina-user-alert__content--danger a:hover {
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-user-alert__action.carina-user-alert__action--danger a:active, .carina-user-alert__content.carina-user-alert__content--danger a:active {
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-user-alert__action.carina-user-alert__action--danger a:focus-visible, .carina-user-alert__content.carina-user-alert__content--danger a:focus-visible {
    outline-color: var(--carina-text-color-on-danger-pale);
  }

.carina-user-alert__action.carina-user-alert__action--warning a,
.carina-user-alert__content.carina-user-alert__content--warning a {
  color: var(--carina-text-color-on-warning-pale);
}

.carina-user-alert__action.carina-user-alert__action--warning a:hover, .carina-user-alert__content.carina-user-alert__content--warning a:hover {
    color: var(--carina-text-color-on-warning-pale);
  }

.carina-user-alert__action.carina-user-alert__action--warning a:active, .carina-user-alert__content.carina-user-alert__content--warning a:active {
    color: var(--carina-text-color-on-warning-pale);
  }

.carina-user-alert__action.carina-user-alert__action--warning a:focus-visible, .carina-user-alert__content.carina-user-alert__content--warning a:focus-visible {
    outline-color: var(--carina-text-color-on-warning-pale);
  }

.carina-user-alert__action--dismissible {
  margin-inline-end: 0;
}

.carina-user-alert__action--dismissible a,
  .carina-user-alert__action--dismissible button {
    border-color: transparent;
    border-style: solid;
    border-width: var(--carina-border-width-4);
  }

.carina-user-alert__content-container {
  margin-top: var(--carina-spacing-5);
  margin-inline-end: var(--carina-spacing-2);

  margin-bottom: var(--carina-spacing-5);
  margin-inline-start: 0;

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

/* $(base)__content {} */

.carina-user-alert .carina-user-alert__dismiss-container {
  align-self: flex-start;
  height: 36px;

  margin-top: var(--carina-spacing-3);
  margin-bottom: var(--carina-spacing-3);
  margin-right: var(--carina-spacing-3);
  margin-left: var(--carina-spacing-2);

  cursor: pointer;
}

[dir='rtl'] .carina-user-alert .carina-user-alert__dismiss-container {
    margin-right: var(--carina-spacing-2);
    margin-left: 0;
  }

.carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--carina-border-radius-full);
    outline-offset: var(--carina-border-width-0);

    cursor: pointer;
  }

.carina-user-alert .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button span {
      justify-content: center;
      width: 100%;
      height: 100%;
      border-radius: var(--carina-border-radius-full);
    }

/* Per-appearance dismiss button colors only apply when phase1 is off. Under
 * phase1 the dark surface-inverse background lets the Button's neutral-inverse
 * variant drive every color/state on its own. */

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info {
    color: var(--carina-text-color-on-info-pale);
  }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info:hover {
      color: var(--carina-text-color-on-info-pale);

      background-color: var(--carina-background-color-info-pale-hover);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info:active {
      color: var(--carina-text-color-on-info-pale);

      background-color: var(--carina-background-color-info-pale-active);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--info:focus-visible {
      outline-color: var(--carina-text-color-on-info-pale);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger {
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger:hover {
      color: var(--carina-text-color-on-danger-pale);

      background-color: var(--carina-background-color-danger-pale-hover);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger:active {
      color: var(--carina-text-color-on-danger-pale);

      background-color: var(--carina-background-color-danger-pale-active);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--danger:focus-visible {
      outline-color: var(--carina-text-color-on-danger-pale);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success {
    color: var(--carina-text-color-on-success-pale);
  }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success:hover {
      color: var(--carina-text-color-on-success-pale);

      background-color: var(--carina-background-color-success-pale-hover);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success:active {
      color: var(--carina-text-color-on-success-pale);

      background-color: var(--carina-background-color-success-pale-active);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--success:focus-visible {
      outline-color: var(--carina-text-color-on-success-pale);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning {
    color: var(--carina-text-color-on-warning-pale);
  }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning:hover {
      color: var(--carina-text-color-on-warning-pale);

      background-color: var(--carina-background-color-warning-pale-hover);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning:active {
      color: var(--carina-text-color-on-warning-pale);

      background-color: var(--carina-background-color-warning-pale-active);
    }

.carina-user-alert:not(.carina-user-alert--phase1, .carina-user-alert--phase2) .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button--warning:focus-visible {
      outline-color: var(--carina-text-color-on-warning-pale);
    }

.carina-user-alert__icon {
  display: flex;
  align-items: flex-start;
  align-self: stretch;

  padding-top: calc(var(--carina-spacing-4) + var(--carina-spacing-0-5));
  padding-inline-end: var(--carina-spacing-4);

  padding-bottom: calc(var(--carina-spacing-4) + var(--carina-spacing-0-5));
  padding-inline-start: var(--carina-spacing-3);
}

.carina-user-alert__icon--info {
  color: var(--carina-text-color-on-info-pale-soft);
}

.carina-user-alert__icon--warning {
  color: var(--carina-text-color-on-warning-pale-soft);
}

.carina-user-alert__icon--danger {
  color: var(--carina-text-color-on-danger-pale-soft);
}

.carina-user-alert__icon--success {
  color: var(--carina-text-color-on-success-pale-soft);
}

/* phase1: unified dark surface + base-inverse text/links across all appearances.
 * Selectors here match or exceed the specificity of the existing per-appearance
 * rules so the phase1 colors actually win. Per-appearance border tokens are
 * intentionally not overridden; icons switch to saturated tokens that read on
 * the dark surface. */

.carina-user-alert--phase1 {
  color: var(--carina-text-color-base-inverse);
  background-color: var(--carina-background-color-surface-inverse);
}

/* `:where(&)` neutralises the phase1 part of the specificity so these match
   * the original per-appearance rules at 0,1,0 — both source-ordered after,
   * so phase1 wins via order rather than weight. */

:where(.carina-user-alert--phase1).carina-user-alert--info,
  :where(.carina-user-alert--phase1).carina-user-alert--warning,
  :where(.carina-user-alert--phase1).carina-user-alert--danger,
  :where(.carina-user-alert--phase1).carina-user-alert--success {
    background-color: var(--carina-background-color-surface-inverse);
  }

.carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--info a,
  .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--warning a,
  .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--danger a,
  .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--success a,
  .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--info a,
  .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--warning a,
  .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--danger a,
  .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--success a {
    color: var(--carina-text-color-base-inverse);
  }

.carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--info a:hover,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--info a:active,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--warning a:hover,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--warning a:active,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--danger a:hover,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--danger a:active,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--success a:hover,
    .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--success a:active,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--info a:hover,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--info a:active,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--warning a:hover,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--warning a:active,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--danger a:hover,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--danger a:active,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--success a:hover,
    .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--success a:active {
      color: var(--carina-text-color-base-inverse);
    }

.carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--info a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--warning a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--danger a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__action.carina-user-alert__action--success a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--info a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--warning a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--danger a:focus-visible, .carina-user-alert--phase1 .carina-user-alert__content.carina-user-alert__content--success a:focus-visible {
      outline-color: var(--carina-text-color-base-inverse);
    }

.carina-user-alert--phase1 .carina-user-alert__icon--info {
    color: var(--carina-border-color-info);
  }

.carina-user-alert--phase1 .carina-user-alert__icon--warning {
    color: var(--carina-border-color-warning);
  }

.carina-user-alert--phase1 .carina-user-alert__icon--danger {
    color: var(--carina-border-color-danger);
  }

.carina-user-alert--phase1 .carina-user-alert__icon--success {
    color: var(--carina-border-color-success);
  }

.carina-user-alert--phase2 {
  color: var(--carina-text-color-base-inverse);
  background-color: var(--carina-background-color-surface-inverse);
  padding-inline-end: var(--carina-spacing-2);
  border-color: transparent;
}

:where(.carina-user-alert--phase2).carina-user-alert--info {
    border-color: var(--carina-border-color-info);
  }

:where(.carina-user-alert--phase2).carina-user-alert--warning {
    border-color: var(--carina-border-color-warning);
  }

:where(.carina-user-alert--phase2).carina-user-alert--danger {
    border-color: var(--carina-border-color-danger);
  }

:where(.carina-user-alert--phase2).carina-user-alert--success {
    border-color: var(--carina-border-color-success);
  }

.carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--info a,
  .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--warning a,
  .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--danger a,
  .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--success a,
  .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--info a,
  .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--warning a,
  .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--danger a,
  .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--success a {
    padding: var(--carina-spacing-0);
    color: var(--carina-text-color-base-inverse);
  }

.carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--info a:hover,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--info a:active,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--warning a:hover,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--warning a:active,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--danger a:hover,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--danger a:active,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--success a:hover,
    .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--success a:active,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--info a:hover,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--info a:active,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--warning a:hover,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--warning a:active,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--danger a:hover,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--danger a:active,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--success a:hover,
    .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--success a:active {
      color: var(--carina-text-color-base-inverse);
    }

.carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--info a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--warning a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--danger a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__action.carina-user-alert__action--success a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--info a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--warning a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--danger a:focus-visible, .carina-user-alert--phase2 .carina-user-alert__content.carina-user-alert__content--success a:focus-visible {
      outline-color: var(--carina-text-color-base-inverse);
    }

.carina-user-alert--phase2 .carina-user-alert__action-container {
    margin: var(--carina-spacing-2);
    margin-inline-start: var(--carina-spacing-4);
    margin-inline-end: var(--carina-spacing-0);
    justify-content: space-between;
    gap: var(--carina-spacing-2);
    min-height: 36px;
    align-items: center;
  }

.carina-user-alert--phase2 .carina-user-alert__content-container {
    margin: var(--carina-spacing-0);
    line-height: var(--carina-line-height-body-sm);
  }

.carina-user-alert--phase2 .carina-user-alert__action {
    margin: var(--carina-spacing-0);
    align-self: center;
    margin-inline-end: var(--carina-spacing-2);
  }

.carina-user-alert--phase2:not(.carina-user-alert--no-title) .carina-user-alert__action {
    margin-top: var(--carina-spacing-2);
    align-self: flex-start;
  }

.carina-user-alert--phase2 .carina-user-alert__dismiss-container {
    margin-top: var(--carina-spacing-2);
    margin-inline-end: var(--carina-spacing-0);
    margin-left: var(--carina-spacing-0);
    margin-bottom: var(--carina-spacing-2);
  }

.carina-user-alert--phase2 .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button,
    .carina-user-alert--phase2 .carina-user-alert__dismiss-container .carina-user-alert__dismiss-button span {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-user-alert--phase2 .carina-user-alert__icon {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    border-start-start-radius: var(--carina-border-radius-xs);
    border-start-end-radius: var(--carina-border-radius-none);
    border-end-start-radius: var(--carina-border-radius-xs);
    border-end-end-radius: var(--carina-border-radius-none);
  }

.carina-user-alert--phase2 .carina-user-alert__icon.carina-user-alert__icon--info {
      background-color: var(--carina-background-color-info);
      color: var(--carina-text-color-on-info);
    }

.carina-user-alert--phase2 .carina-user-alert__icon.carina-user-alert__icon--warning {
      background-color: var(--carina-background-color-warning);
      color: var(--carina-text-color-on-warning);
    }

.carina-user-alert--phase2 .carina-user-alert__icon.carina-user-alert__icon--danger {
      background-color: var(--carina-background-color-danger);
      color: var(--carina-text-color-on-danger);
    }

.carina-user-alert--phase2 .carina-user-alert__icon.carina-user-alert__icon--success {
      background-color: var(--carina-background-color-success);
      color: var(--carina-text-color-on-success);
    }

.carina-avatar {
  --indicator-height: 25%;
  --indicator-offset: -3.125%;

  --indicator-vertical-offset: 12.5%;
  --indicator-horizontal-offset: 12.5%;

  position: relative;

  width: 100%;
  height: 100%;

  border-radius: var(--carina-border-radius-full);

  cursor: default;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
}

.carina-avatar:focus-within {
    transition-duration: var(--carina-transition-duration-100);
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-avatar__main {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-color: var(--carina-avatar-bg);
  border-color: var(--carina-border-color-soft);
  border-style: none;
  color: var(--carina-avatar-fg);
  border-radius: var(--carina-border-radius-full);
  overflow: hidden;

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-md);
  font-family: var(--carina-font-family-primary);
}

.carina-avatar__main--background-0 {
  --carina-avatar-fg: var(--carina-text-color-base-inverse);
  --carina-avatar-bg: var(--carina-colors-accessory-1-50);
}

.carina-avatar__main--background-1 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-2-30);
}

.carina-avatar__main--background-2 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-3-30);
}

.carina-avatar__main--background-3 {
  --carina-avatar-fg: var(--carina-text-color-base-inverse);
  --carina-avatar-bg: var(--carina-colors-accessory-4-50);
}

.carina-avatar__main--background-4 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-0-40);
}

.carina-avatar__main--background-5 {
  --carina-avatar-fg: var(--carina-text-color-base-inverse);
  --carina-avatar-bg: var(--carina-colors-accessory-2-50);
}

.carina-avatar__main--background-6 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-1-20);
}

.carina-avatar__main--background-7 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-3-10);
}

.carina-avatar__main--background-8 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-4-30);
}

.carina-avatar__main--background-9 {
  --carina-avatar-fg: var(--carina-text-color-base);
  --carina-avatar-bg: var(--carina-colors-accessory-0-10);
}

.carina-avatar__main--border {
  border-style: solid;
}

.carina-avatar__main--circle {
  border-radius: var(--carina-border-radius-full);
}

.carina-avatar__main--square {
  border-radius: var(--carina-border-radius-2xl);
}

.carina-avatar__main--edit-scrim {
  cursor: pointer;
}

.carina-avatar__main--hover-scrim.carina-avatar__main--hover-shadow:hover {
    box-shadow: var(--carina-box-shadow-lg);
  }

.carina-avatar__main--hover-scrim.carina-avatar__main--hover-shadow:hover div {
      opacity: var(--carina-opacity-50);
    }

.carina-avatar__main--hover-scrim.carina-avatar__main--hover-shadow:hover span {
      opacity: var(--carina-opacity-100);
    }

.carina-avatar__main--hover-scrim:hover {
    box-shadow: none;
  }

.carina-avatar__main--hover-scrim:hover div {
      opacity: var(--carina-opacity-50);
    }

.carina-avatar__main--hover-scrim:hover span {
      opacity: var(--carina-opacity-100);
    }

.carina-avatar__main--hover-scrim div,
  .carina-avatar__main--hover-scrim span {
    opacity: var(--carina-opacity-0);
  }

.carina-avatar__main--hover-shadow:hover {
    box-shadow: var(--carina-box-shadow-lg);
  }

.carina-avatar__main--image {
  background-color: transparent;
}

.carina-avatar__main--interactive {
  cursor: pointer;
}

.carina-avatar__image {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;
  margin: 0;
  -o-object-fit: cover;
     object-fit: cover;

  transform: translate(-50%, -50%);
}

.carina-avatar__loading-image {
  position: absolute;
  top: 50%;
  left: 50%;

  height: 100%;

  transform: translate(-50%, -50%);
  visibility: hidden;
}

.carina-avatar__action,
.carina-avatar__action-icon {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;

  width: 100%;
  height: calc(100% * 42 / 128);
}

.carina-avatar__action {
  background-color: var(--carina-background-color-surface);
  opacity: var(--carina-opacity-50);
}

.carina-avatar__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: var(--carina-opacity-100);

  fill: var(--carina-text-color-base);
}

.carina-avatar__action--border,
.carina-avatar__action-icon--border {
  height: calc(100% * 48 / 128);
}

.carina-avatar__indicator {
  position: absolute;
  bottom: var(--indicator-offset);
  box-sizing: border-box;

  width: var(--indicator-height);
  height: var(--indicator-height);

  border-color: var(--carina-background-color-surface);
  border-style: solid;
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-on-neutral);

  background-color: var(--carina-background-color-neutral);
  inset-inline-end: var(--indicator-offset);
}

.carina-avatar__indicator--accent {
  color: var(--carina-text-color-on-secondary);

  background-color: var(--carina-background-color-secondary);
}

.carina-avatar__indicator--brand,
.carina-avatar__indicator--primary {
  color: var(--carina-text-color-on-primary);

  background-color: var(--carina-background-color-primary);
}

.carina-avatar__indicator--secondary {
  color: var(--carina-text-color-on-secondary);

  background-color: var(--carina-background-color-secondary);
}

.carina-avatar__indicator--danger {
  color: var(--carina-text-color-on-danger);

  background-color: var(--carina-background-color-danger);
}

.carina-avatar__indicator--interactive {
  color: var(--carina-text-color-on-primary);

  background-color: var(--carina-background-color-primary);
}

.carina-avatar__indicator--neutral {
  color: var(--carina-text-color-on-neutral);

  background-color: var(--carina-background-color-neutral);
}

.carina-avatar__indicator--success {
  color: var(--carina-text-color-on-success);

  background-color: var(--carina-background-color-success);
}

.carina-avatar__indicator--tertiary {
  color: var(--carina-text-color-on-tertiary);

  background-color: var(--carina-background-color-tertiary);
}

.carina-avatar__indicator--warning {
  color: var(--carina-text-color-on-warning);

  background-color: var(--carina-background-color-warning);
}

.carina-avatar__indicator--square {
  --indicator-offset: -6.25%;
}

.carina-avatar__indicator--top-end {
  top: var(--indicator-offset);
  inset-inline-end: var(--indicator-offset);
}

.carina-avatar__indicator--top-start {
  top: var(--indicator-offset);
  inset-inline-start: var(--indicator-offset);
}

.carina-avatar__indicator--bottom-end {
  bottom: var(--indicator-offset);
  inset-inline-end: var(--indicator-offset);
}

.carina-avatar__indicator--bottom-start {
  bottom: var(--indicator-offset);
  inset-inline-start: var(--indicator-offset);
}

.carina-avatar__indicator-top-end,
.carina-avatar__indicator-top-start,
.carina-avatar__indicator-bottom-end,
.carina-avatar__indicator-bottom-start {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carina-avatar__indicator-top-end {
  top: var(--indicator-vertical-offset);
  inset-inline-end: var(--indicator-horizontal-offset);

  transform: translate(50%, -50%);
}

[dir='rtl'] .carina-avatar__indicator-top-end {
    transform: translate(-50%, -50%);
  }

.carina-avatar__indicator-top-start {
  top: var(--indicator-vertical-offset);
  inset-inline-start: var(--indicator-horizontal-offset);

  transform: translate(-50%, -50%);
}

[dir='rtl'] .carina-avatar__indicator-top-start {
    transform: translate(50%, -50%);
  }

.carina-avatar__indicator-bottom-end {
  bottom: var(--indicator-vertical-offset);
  inset-inline-end: var(--indicator-horizontal-offset);

  transform: translate(50%, 50%);
}

[dir='rtl'] .carina-avatar__indicator-bottom-end {
    transform: translate(-50%, 50%);
  }

.carina-avatar__indicator-bottom-start {
  bottom: var(--indicator-vertical-offset);
  inset-inline-start: var(--indicator-horizontal-offset);

  transform: translate(-50%, 50%);
}

[dir='rtl'] .carina-avatar__indicator-bottom-start {
    transform: translate(50%, 50%);
  }

.carina-avatar-group {
  position: relative;

  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-avatar-group--grid {
  display: flex;
  flex-wrap: wrap;
}

.carina-avatar-group--stacked {
  display: flex;
  width: auto;
}

.carina-avatar-group__avatar-container {
  padding: var(--carina-spacing-0);
}

.carina-avatar-group__avatar-container--grid {
  margin: var(--carina-spacing-0-5);
}

.carina-avatar-group__front-avatar {
  position: absolute;
  bottom: 0;
  left: 0;
}

.carina-avatar-group__back-avatar {
  position: absolute;
  top: 0;
  right: 0;
}

.carina-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--carina-spacing-5);
  height: var(--carina-spacing-5);

  padding: 0 var(--carina-spacing-1-5);

  border-radius: var(--carina-border-radius-full);

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);

  line-height: var(--carina-line-height-normal);
}

.carina-badge--rebrand {
    line-height: var(--carina-line-height-none);
    font-family: var(--carina-font-family-mono);
    font-weight: var(--carina-font-weight-mono-bold);
  }

.carina-badge__indicator {
  display: inline-block;
  width: var(--carina-spacing-2-5);
  height: var(--carina-spacing-2-5);
  border-radius: var(--carina-border-radius-full);

  transform: translateY(-4px);
}

.carina-badge--danger {
  color: var(--carina-text-color-on-danger);

  background-color: var(--carina-background-color-danger);
}

.carina-badge--tertiary {
  color: var(--carina-text-color-on-tertiary);

  background-color: var(--carina-background-color-tertiary);
}

@keyframes carina-bounce {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }

  25%,
  75% {
    transform: translateY(var(--carina-bounce-distance));
  }
}

@media not (prefers-reduced-motion) {
  .carina-bounce {
    --carina-bounce-distance: -33%;

    animation-name: carina-bounce;
  }
}

.carina-text-link {
  box-sizing: border-box;
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;

  color: var(--carina-text-color-primary);
  font-weight: var(--carina-font-weight-body);
  font-size: inherit;
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-transform: none;
  text-decoration: underline;
  text-indent: 0;
  text-shadow: none;

  background: none;
  outline: 0;
  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-text-link svg {
    position: relative;
    top: -1px;

    display: inline-block;

    margin-inline-end: var(--carina-spacing-1);

    vertical-align: middle;
  }

.carina-text-link:hover {
    color: var(--carina-text-color-primary-hover);
  }

.carina-text-link:focus {
    outline-color: var(--carina-border-color-primary-focus);
    border-radius: var(--carina-border-radius-md);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-text-link:active {
    color: var(--carina-text-color-primary-active);
  }

.carina-text-link--rebrand:focus {
  border-radius: var(--carina-border-radius-sm);
}

.carina-text-link--block {
  top: 0;

  display: inline-flex;
}

.carina-text-link--bold {
  font-weight: var(--carina-font-weight-display);
}

.carina-text-link--sm {
  font-size: var(--carina-font-size-body-2xs);
}

.carina-text-link--md {
  font-size: var(--carina-font-size-body-sm);
}

.carina-text-link--lg {
  font-size: var(--carina-font-size-body-md);
}

.carina-text-link--neutral {
  color: var(--carina-text-color-base);
}

.carina-text-link--neutral:hover {
    color: var(--carina-text-color-base);
  }

.carina-text-link--neutral:active {
    color: var(--carina-text-color-base);
  }

.carina-text-link--neutral:visited {
    color: var(--carina-text-color-primary-visited);
  }

.carina-text-link--brand,
.carina-text-link--interactive {
  color: var(--carina-text-color-primary);
}

.carina-text-link--brand:hover, .carina-text-link--interactive:hover {
    color: var(--carina-text-color-primary-hover);
  }

.carina-text-link--brand:active, .carina-text-link--interactive:active {
    color: var(--carina-text-color-primary-active);
  }

.carina-text-link--brand:visited, .carina-text-link--interactive:visited {
    color: var(--carina-text-color-primary-visited);
  }

.carina-text-link--warning {
  color: var(--carina-text-color-warning);
}

.carina-text-link--warning:hover {
    color: var(--carina-text-color-warning-hover);
  }

.carina-text-link--warning:active {
    color: var(--carina-text-color-warning-active);
  }

.carina-text-link--warning:visited {
    color: var(--carina-text-color-warning-visited);
  }

.carina-text-link--danger {
  color: var(--carina-text-color-danger);
}

.carina-text-link--danger:hover {
    color: var(--carina-text-color-danger-hover);
  }

.carina-text-link--danger:active {
    color: var(--carina-text-color-danger-active);
  }

.carina-text-link--danger:visited {
    color: var(--carina-text-color-danger-visited);
  }

.carina-text-link--accent {
  color: var(--carina-text-color-secondary);
}

.carina-text-link--accent:hover {
    color: var(--carina-text-color-secondary-hover);
  }

.carina-text-link--accent:active {
    color: var(--carina-text-color-secondary-active);
  }

.carina-text-link--accent:visited {
    color: var(--carina-text-color-secondary-visited);
  }

.carina-text-link--tertiary {
  color: var(--carina-text-color-tertiary);
}

.carina-text-link--tertiary:hover {
    color: var(--carina-text-color-tertiary-hover);
  }

.carina-text-link--tertiary:active {
    color: var(--carina-text-color-tertiary-active);
  }

.carina-text-link--tertiary:visited {
    color: var(--carina-text-color-tertiary-visited);
  }

.carina-text-link--success {
  color: var(--carina-text-color-success);
}

.carina-text-link--success:hover {
    color: var(--carina-text-color-success-hover);
  }

.carina-text-link--success:active {
    color: var(--carina-text-color-success-active);
  }

.carina-text-link--success:visited {
    color: var(--carina-text-color-success-visited);
  }

.carina-text-link--info {
  color: var(--carina-text-color-info);
}

.carina-text-link--info:hover {
    color: var(--carina-text-color-info-hover);
  }

.carina-text-link--info:active {
    color: var(--carina-text-color-info-active);
  }

.carina-text-link--info:visited {
    color: var(--carina-text-color-info-visited);
  }

.carina-text-link--icon-sm svg {
  width: var(--carina-icon-xs);
  height: var(--carina-icon-xs);
}

.carina-text-link--icon-md svg {
  width: var(--carina-icon-md);
  height: var(--carina-icon-md);
}

.carina-text-link--icon-lg svg {
  width: var(--carina-icon-lg);
  height: var(--carina-icon-lg);
}

.carina-text-link.carina-text-link--icon-end {
  text-align: right;
}

.carina-text-link.carina-text-link--icon-end svg {
    margin-inline-end: 0;
    margin-inline-start: var(--carina-spacing-1);
  }

.carina-text-link--disabled {
  color: var(--carina-text-color-disabled);

  text-decoration: none;

  cursor: default;
}

.carina-text-link--disabled[aria-disabled]:focus {
    outline-color: var(--carina-text-color-disabled);
  }

.carina-text-link--disabled:hover,
  .carina-text-link--disabled:focus,
  .carina-text-link--disabled:active {
    color: var(--carina-text-color-disabled);
    text-decoration: none;

    cursor: default;
  }

.carina-truncating-list {
  display: flex;
}

.carina-truncating-list__item--truncated {
  position: absolute;

  visibility: hidden;
}

.carina-breadcrumbs__breadcrumb,
.carina-breadcrumbs__breadcrumb-list-item {
  display: none;
  align-items: center;
  box-sizing: border-box;
  height: var(--carina-spacing-5);
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0-5) var(--carina-spacing-0);

  font-family: var(--carina-font-family-body);
}

.carina-breadcrumbs__breadcrumb--expanded,
.carina-breadcrumbs__breadcrumb-list-item--expanded {
  display: inline-flex;
}

.carina-breadcrumbs__breadcrumb--mobile,
.carina-breadcrumbs__breadcrumb-list-item--mobile {
  display: inline-flex;
}

.carina-breadcrumbs__breadcrumb--hidden-mobile,
.carina-breadcrumbs__breadcrumb-list-item--hidden-mobile {
  display: none;
}

@media (min-width: 640px) {
  .carina-breadcrumbs__breadcrumb,
  .carina-breadcrumbs__breadcrumb-list-item {
    display: inline-flex;
  }

  .carina-breadcrumbs__breadcrumb--mobile,
  .carina-breadcrumbs__breadcrumb-list-item--mobile {
    display: none;
  }
}

.carina-breadcrumbs__breadcrumb-content {
  display: flex;
  box-sizing: border-box;
  max-width: 200px;
  margin: var(--carina-spacing-0);
  margin-inline-end: var(--carina-spacing-1);
  border: var(--carina-border-width-2) solid transparent;
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  cursor: default;

  border-radius: var(--carina-border-radius-md);
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
}

.carina-breadcrumbs__breadcrumb-content.carina-breadcrumbs__breadcrumb-content--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-breadcrumbs__breadcrumb-content{

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, -webkit-text-decoration;
  transition-property: text-decoration, outline-color;
  transition-property: text-decoration, outline-color, -webkit-text-decoration;
}

.carina-breadcrumbs__breadcrumb-content:focus-within {
    text-decoration: underline;
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-breadcrumbs__breadcrumb-content a:focus {
    outline: 0; /* removes the text link focus ring (from text-link) - needed because otherwise the focus ring will not respect the truncation on long text */
  }

.carina-breadcrumbs__breadcrumb-content > * {
    vertical-align: baseline;
  }

.carina-breadcrumbs__breadcrumb-content .carina-breadcrumbs__breadcrumb {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.carina-breadcrumbs__breadcrumb-icon {
  width: 16px;
  height: 16px;
  margin-top: 0;
  margin-right: var(--carina-spacing-0-5);
  margin-bottom: 0;
  margin-left: var(--carina-spacing-0-5);

  color: var(--carina-text-color-soft);
}

[dir='rtl'] .carina-breadcrumbs__breadcrumb-icon {
    transform: rotate(var(--carina-rotate-180));
  }

.carina-breadcrumbs__breadcrumb--current,
.carina-breadcrumbs__breadcrumb-list-item--current {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-2xs);
  text-decoration: none;
}

.carina-breadcrumbs__breadcrumb--current .carina-breadcrumbs__breadcrumb-content, .carina-breadcrumbs__breadcrumb-list-item--current .carina-breadcrumbs__breadcrumb-content {
    margin-inline-end: var(--carina-spacing-0);
  }

.carina-breadcrumbs__breadcrumb--collapsed,
.carina-breadcrumbs__breadcrumb-list-item--collapsed {
  margin: 0;

  transform: translateY(4px);
}

.carina-breadcrumbs__breadcrumb-content--collapsed {
  width: 16px;
  height: 16px;
  margin-top: 0;
  margin-right: var(--carina-spacing-0-5);
  margin-bottom: 0;
  margin-left: var(--carina-spacing-0-5);
  border: none;

  color: var(--carina-text-color-primary);

  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, -webkit-text-decoration;
  transition-property: text-decoration, outline-color;
  transition-property: text-decoration, outline-color, -webkit-text-decoration;

  border-radius: var(--carina-border-radius-md);
  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-0);
}

.carina-breadcrumbs__breadcrumb-content--collapsed.carina-breadcrumbs__breadcrumb-content--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-breadcrumbs__breadcrumb-content--collapsed:active {
    color: var(--carina-text-color-primary-active);
  }

.carina-breadcrumbs__breadcrumb-content--collapsed:focus {
    color: var(--carina-text-color-primary);
    text-decoration: underline;
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-breadcrumbs__breadcrumb-content--collapsed:hover {
    color: var(--carina-text-color-primary-hover);
  }

.carina-breadcrumbs {
  text-wrap: nowrap;
  margin-top: var(--carina-spacing-1);
  margin-bottom: var(--carina-spacing-1);
  padding: 0;
  line-height: var(--carina-line-height-body-2xs);

  font-size: var(--carina-font-size-body-2xs);

  list-style-type: none;
  background: transparent;
}

.carina-breadcrumbs--user_expanded {
  width: 100%;
  text-wrap: wrap;
}

.carina-checkbox {
  position: absolute;

  margin: var(--carina-spacing-0);

  cursor: pointer;
  opacity: var(--carina-opacity-0);
}

.carina-checkbox + div {
    outline-width: var(--carina-border-width-2);
    outline-style: solid;
    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-1);

    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-duration: calc(
      var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
    );
    transition-property: outline-color;
  }

.carina-checkbox:focus-visible + div {
    transition-duration: var(--carina-transition-duration-100);
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-checkbox--error:focus-visible + div {
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-checkbox__box {
  position: relative;

  display: flex;
  flex-shrink: 0;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  width: var(--carina-spacing-4);
  height: var(--carina-spacing-4);
  box-sizing: border-box;
  margin-right: var(--carina-spacing-2);
  border-color: var(--carina-border-color-base);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-sm);

  background-color: var(--carina-colors-transparent);

  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );
  transition-duration: var(--carina-transition-duration-100);
  transition-property: border-color, box-shadow;
}

[dir='rtl'] .carina-checkbox__box {
    margin-right: var(--carina-spacing-0);
    margin-left: var(--carina-spacing-2);
  }

.carina-checkbox__box--read-only {
  color: var(--carina-text-color-base);
  border-color: var(--carina-border-color-soft);
  background-color: var(--carina-background-color-surface-alt);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.carina-checkbox__box--read-only:focus {
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-checkbox__box--read-only:hover {
    cursor: default;
  }

.carina-checkbox__box--checked {
  border-color: var(--carina-border-color-primary);

  background-color: var(--carina-background-color-primary);
}

.carina-checkbox__box--error {
  border-color: var(--carina-border-color-danger);
}

.carina-checkbox__box--checked.carina-checkbox__box--error {
  background-color: var(--carina-background-color-danger);
}

.carina-checkbox__box--disabled,
.carina-checkbox__box--disabled.carina-checkbox__box--error {
  border-width: var(--carina-border-width-0);

  background-color: var(--carina-background-color-neutral-inactive);
  cursor: default;
}

.carina-checkbox__icon {
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--carina-spacing-4);
  height: var(--carina-spacing-4);
  box-sizing: border-box;

  transform: translate(-50%, -50%);

  /* svg can interrupt event bubbling (observed when used with final-form) */
  pointer-events: none;
  fill: var(--carina-text-color-on-primary);
}

.carina-checkbox__box--error.carina-checkbox__icon {
  fill: var(--carina-text-color-on-danger);
}

.carina-checkbox__icon--disabled {
  fill: var(--carina-text-color-soft);
}

.carina-checkbox__indeterminate-icon {
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--carina-spacing-4);
  height: var(--carina-spacing-4);
  box-sizing: border-box;

  transform: translate(-50%, -50%);

  fill: var(--carina-text-color-on-primary);
}

.carina-checkbox__indeterminate-icon--disabled {
  fill: var(--carina-text-color-soft);
}

.carina-checkbox__label {
  display: flex;
  align-items: center;
  min-height: var(--carina-spacing-4);
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
  padding-right: var(--carina-spacing-4);

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-tight);
  text-indent: 0;
  text-shadow: none;

  cursor: pointer;
}

[dir='rtl'] .carina-checkbox__label {
    padding-right: var(--carina-spacing-0);
    padding-left: var(--carina-spacing-4);
  }

.carina-checkbox__label--disabled {
  color: var(--carina-text-color-disabled);

  cursor: default;
}

.carina-checkbox__box--rebrand {
  border-radius: var(--carina-border-radius-xs);
}

.carina-checkbox__icon--rebrand {
  width: 11px;
  height: 8px;
}

.carina-checkbox__indeterminate-icon--rebrand {
  width: 8px;
  height: 2px;
}

.carina-popper {
  border-radius: var(--carina-border-radius-md);
  border-color: var(--carina-border-color-soft);
  border-style: solid;
  border-width: var(--carina-border-width-1);

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  /* Aligned with figma — base popper surface is bg-popper (distinct from bg-surface in dark).
     Components that need a different surface (Tooltip → bg-surface-inverse) override this. */
  background-color: var(--carina-background-color-popper);
}

.carina-popper--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-popper__container {
  z-index: var(--carina-z-index-scope, var(--carina-z-index-popper));
}

.carina-popper--shadow {
  box-shadow: var(--carina-box-shadow-lg);
}

.carina-popper__arrow::after,
.carina-popper__arrow::before {
  position: absolute;

  top: 1px;
  left: 0;

  border-style: solid;
  border-color: var(--carina-border-color-soft) var(--carina-border-color-soft)
    transparent transparent;
  transform: rotate(var(--carina-rotate-negative-45)) translate(-50%, -50%);
  transform-origin: 0 0;

  content: '';
}

.carina-popper__arrow::after {
  border-width: calc(
    var(--carina-border-width-4) + var(--carina-border-width-1)
  );
}

.carina-popper__arrow::before {
  border-color: var(--carina-background-color-popper)
    var(--carina-background-color-popper) transparent transparent;
  border-width: var(--carina-border-width-4);
  z-index: 1;
}

.carina-popper__arrow--top {
  bottom: 0;
}

.carina-popper__arrow--top::before,
  .carina-popper__arrow--top::after {
    top: -1px;
  }

.carina-popper__arrow--top::before {
    border-color: transparent transparent var(--carina-background-color-popper)
      var(--carina-background-color-popper);
  }

.carina-popper__arrow--top::after {
    border-color: transparent transparent var(--carina-border-color-soft)
      var(--carina-border-color-soft);
  }

.carina-popper__arrow--end {
  left: 0;
}

.carina-popper__arrow--end::before,
  .carina-popper__arrow--end::after {
    left: 1px;
  }

.carina-popper__arrow--end::before {
    border-color: var(--carina-background-color-popper) transparent transparent
      var(--carina-background-color-popper);
  }

.carina-popper__arrow--end::after {
    border-color: var(--carina-border-color-soft) transparent transparent
      var(--carina-border-color-soft);
  }

.carina-popper__arrow--bottom {
  top: 0;
}

.carina-popper__arrow--bottom::before {
    border-color: var(--carina-background-color-popper)
      var(--carina-background-color-popper) transparent transparent;
  }

.carina-popper__arrow--bottom::after {
    border-color: var(--carina-border-color-soft)
      var(--carina-border-color-soft) transparent transparent;
  }

.carina-popper__arrow--start {
  right: 0;
}

.carina-popper__arrow--start::before,
  .carina-popper__arrow--start::after {
    left: -1px;
  }

.carina-popper__arrow--start::before {
    border-color: transparent var(--carina-background-color-popper)
      var(--carina-background-color-popper) transparent;
  }

.carina-popper__arrow--start::after {
    border-color: transparent var(--carina-border-color-soft)
      var(--carina-border-color-soft) transparent;
  }

.carina-popper__arrow--top.carina-popper__arrow--shadow::before {
  box-shadow: -6px 6px 6px 0 rgb(0 0 0 / 4%);
}

.carina-popper__arrow--end.carina-popper__arrow--shadow::before {
  box-shadow: -6px -6px 6px 0 rgb(0 0 0 / 4%);
}

.carina-popper__arrow--bottom.carina-popper__arrow--shadow::before {
  box-shadow: 6px -6px 6px 0 rgb(0 0 0 / 4%);
}

.carina-popper__arrow--start.carina-popper__arrow--shadow::before {
  box-shadow: 6px 6px 6px 0 rgb(0 0 0 / 4%);
}

.carina-popper__arrow--medium::before {
  border-width: 7px;
}

.carina-popper__arrow--medium::after {
  border-width: 8px;
}

.carina-popper__arrow--large::before {
  border-width: 11px;
}

.carina-popper__arrow--large::after {
  border-width: 12px;
}

.carina-popper__backup-arrow {
  position: absolute;

  visibility: hidden;
}

.carina-popper__transition {
  transform: translate(
    var(--carina-transition-translate-x),
    var(--carina-transition-translate-y)
  );

  transition-delay: var(--carina-transition-delay-50);
}

.carina-popper__transition.carina-transition--out {
  --carina-transition-opacity: 0;
}

.carina-popper__transition--disabled {
  --carina-transition-opacity: 0;

  transition-property: none;
}

@media not (prefers-reduced-motion) {
  .carina-popper__transition--slide-top.carina-transition--out,
  .carina-popper__transition--slide-top.carina-popper__transition--disabled {
    --carina-transition-translate-y: var(--carina-spacing-1);
  }

  .carina-popper__transition--slide-bottom.carina-transition--out,
  .carina-popper__transition--slide-bottom.carina-popper__transition--disabled {
    --carina-transition-translate-y: calc(-1 * var(--carina-spacing-1));
  }

  .carina-popper__transition--slide-left.carina-transition--out,
  .carina-popper__transition--slide-left.carina-popper__transition--disabled {
    --carina-transition-translate-x: var(--carina-spacing-1);
  }

  .carina-popper__transition--slide-right.carina-transition--out,
  .carina-popper__transition--slide-right.carina-popper__transition--disabled {
    --carina-transition-translate-x: calc(-1 * var(--carina-spacing-1));
  }

  [dir='rtl'] .carina-popper__transition--slide-left.carina-transition--out,
  [dir='rtl'] .carina-popper__transition--slide-left.carina-popper__transition--disabled {
    --carina-transition-translate-x: var(--carina-spacing-1);
  }

  [dir='rtl'] .carina-popper__transition--slide-right.carina-transition--out,
  [dir='rtl'] .carina-popper__transition--slide-right.carina-popper__transition--disabled {
    --carina-transition-translate-x: calc(-1 * var(--carina-spacing-1));
  }
}

.carina-visually-hidden-element{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.carina-visually-hidden-element--focus:focus,
    .carina-visually-hidden-element--focus:active{
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.carina-tooltip__popper {
  max-width: 282px;

  padding: var(--carina-spacing-2);

  color: var(--carina-text-color-base-inverse);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-2xs);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-body-3xs);

  box-shadow: var(--carina-box-shadow-lg);

  pointer-events: none;

  word-break: break-word;

  background-color: var(--carina-background-color-surface-inverse);
  border: none;
}

.carina-tooltip__arrow::before {
  border-color: var(--carina-background-color-surface-inverse);
}

.carina-tooltip__arrow::after {
  border-color: transparent;
}

.carina-magazine {
  position: absolute;
  z-index: calc(
    var(--carina-z-index-current) + var(--carina-z-index-popper-diff)
  );

  display: block;
  box-sizing: border-box;
  width: -moz-max-content;
  width: max-content;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-md);
  overflow: auto;

  text-align: left;

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-popper);
  outline: none;
  box-shadow: var(--carina-box-shadow-lg);
}

[dir='rtl'] .carina-magazine {
    text-align: right;
  }

.carina-magazine--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

/* ===========================
   Base Element
   =========================== */

.carina-magazine-option {
  /* Positioning */
  position: relative;

  /* Display & Layout */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;

  /* Spacing */
  margin: var(--carina-spacing-0) var(--carina-spacing-2);
  padding: var(--carina-spacing-2);

  /* Borders */
  border: var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-md);
  outline: var(--carina-border-width-0);

  /* Typography */
  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  text-indent: var(--carina-spacing-0);
  text-shadow: none;
  word-break: break-word;

  /* Interaction */
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* Browser-specific */

.carina-magazine-option:-moz-focus-inner {
    border: var(--carina-border-width-0);
  }

/* State: Hover */

.carina-magazine-option:hover:where(:not(.carina-magazine-option--heading)) {
    background-color: var(--carina-background-color-surface-hover);
  }

/* State: Active */

.carina-magazine-option:active:where(:not(.carina-magazine-option--heading)) {
    color: var(--carina-text-color-base);
    /* Surface-active (not primary-pale-active) so clicking doesn't flash a primary tint.
       Matches Combobox active behavior. The persistent selected state below still uses
       primary-pale-active for a visible distinction against the popper bg. */
    background-color: var(--carina-background-color-surface-active);
  }

.carina-magazine-option--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

/* ===========================
   Child Elements
   =========================== */

.carina-magazine-option__label-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.carina-magazine-option__label-row svg {
    margin: auto;
  }

.carina-magazine-option__label-container {
  display: flex;
  align-items: flex-start;
}

.carina-magazine-option__label-check {
  display: flex;
  align-items: center;
}

.carina-magazine-option__label-check-icon {
  color: var(--carina-text-color-base);
}

.carina-magazine-option__line-break {
  width: 100%;
  margin-top: var(--carina-spacing-2);
  margin-bottom: var(--carina-spacing-2);
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
}

.carina-magazine-option__secondary-label-container {
  padding-inline-start: var(--carina-spacing-0);
  padding-top: var(--carina-spacing-2);
  display: flex;
  gap: var(--carina-spacing-2);
  color: var(--carina-text-color-soft);
  margin: 0;

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-2xs);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
}

.carina-magazine-option__list-item {
  list-style: none;
  list-style-type: disc;
  display: flex;
  gap: var(--carina-spacing-2);
  padding: 0;
  margin: 0;
}

.carina-magazine-option__list-item:not(:first-of-type)::before {
  vertical-align: middle;
  content: '\00b7';
}

/* ===========================
   Modifiers
   =========================== */

/* Heading Modifier */

.carina-magazine-option--heading {
  /* Layout */
  min-height: 20px;

  /* Spacing */
  margin-top: var(--carina-spacing-2-5);
  margin-bottom: var(--carina-spacing-1-5);
  padding-top: var(--carina-spacing-0);
  padding-bottom: var(--carina-spacing-0);

  /* Borders */
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-radius: var(--carina-border-radius-none);

  /* Typography */
  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-body-2xs);
  text-transform: uppercase;

  /* Interaction */
  cursor: default;
}

.carina-magazine-option--heading:where(:not(.carina-magazine-option--first-option)) {
  margin: 0;
  margin-top: var(--carina-spacing-1);
  padding: var(--carina-spacing-3) var(--carina-spacing-4)
    var(--carina-spacing-2);
}

/* Selected Modifier */

.carina-magazine-option--selected,
:where(.carina-magazine-option--selected) .carina-magazine-option__secondary-label-container {
  color: var(--carina-text-color-base);
  background-color: var(--carina-background-color-primary-pale-active);
}

.carina-magazine-option--selected:hover,
  .carina-magazine-option--selected:active,
  :where(.carina-magazine-option--selected) .carina-magazine-option__secondary-label-container:hover,
  :where(.carina-magazine-option--selected) .carina-magazine-option__secondary-label-container:active {
    background-color: var(--carina-background-color-primary-pale-active);
  }

/* Focused Modifier */

.carina-magazine-option--focused:focus-visible {
  box-shadow: var(--carina-ring-base) inset;
}

/* Destructive Modifier */

.carina-magazine-option--destructive {
  color: var(--carina-text-color-danger);
}

.carina-magazine-option--destructive:hover {
    background-color: var(--carina-background-color-danger-pale-hover);
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-magazine-option--destructive:active {
    background-color: var(--carina-background-color-danger-pale-active);
    color: var(--carina-text-color-on-danger-pale);
  }

.carina-magazine-option--destructive:focus-visible {
    box-shadow: var(--carina-ring-danger) inset;
  }

:where(.carina-magazine-option--destructive) .carina-magazine-option__secondary-label-container {
  color: var(--carina-text-color-danger);
}

:where(.carina-magazine-option--destructive:hover) .carina-magazine-option__secondary-label-container,
:where(.carina-magazine-option--destructive:active) .carina-magazine-option__secondary-label-container {
  color: var(--carina-text-color-on-danger-pale);
}

/* Disabled Modifier */

.carina-magazine-option--disabled {
  color: var(--carina-text-color-disabled);
  cursor: default;
}

/* The base block hard-sets nested li / div span to text-color-base, hiding the
     disabled color from rich/JSX labels (e.g. the Table's ItemLabel). Inherit the
     root color so disabled — and disabled+destructive — both reach nested text. */

.carina-magazine-option--disabled li,
  .carina-magazine-option--disabled div span {
    color: currentColor;
  }

.carina-magazine-option--disabled:hover,
  .carina-magazine-option--disabled:focus,
  .carina-magazine-option--disabled:active {
    color: var(--carina-text-color-disabled);
    background-color: unset;
  }

/* Soft inset ring so keyboard users can see where they are on a disabled option
     (it stays in the arrow-nav order per ARIA best practices). */

.carina-magazine-option--disabled:focus-visible {
    box-shadow: 0 0 0 1px var(--carina-border-color-soft) inset;
    outline: none;
  }

.carina-magazine-option--disabled:where(.carina-magazine-option--destructive),
  .carina-magazine-option--disabled:where(.carina-magazine-option--destructive):focus,
  .carina-magazine-option--disabled:where(.carina-magazine-option--destructive):hover,
  .carina-magazine-option--disabled:where(.carina-magazine-option--destructive):active {
    opacity: var(--carina-opacity-40);
    color: var(--carina-text-color-danger);
  }

:where(.carina-magazine-option--disabled) .carina-magazine-option__secondary-label-container {
  color: var(--carina-text-color-disabled);
}

:where(.carina-magazine-option--disabled.carina-magazine-option--destructive)
  .carina-magazine-option__secondary-label-container {
  color: var(--carina-text-color-danger);
}

/* First Option Modifier */

.carina-magazine-option--first-option {
  border-top: var(--carina-border-width-0);
}

.carina-menu__magazine {
  position: relative;

  width: -moz-max-content;

  width: max-content;
  min-width: 176px;
  max-width: 18rem;
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
}

.carina-bulk-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 56px;
  border-radius: var(--carina-border-radius-xl);

  container-type: inline-size;
}

.carina-bulk-action-bar.carina-bulk-action-bar--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-bulk-action-bar{

  color: var(--carina-text-color-base-inverse);
  font-family: var(--carina-font-family-primary);

  background-color: var(--carina-background-color-surface-inverse);
  box-shadow: var(--carina-box-shadow-none);
}

.carina-bulk-action-bar__label {
  box-sizing: border-box;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--carina-spacing-4) var(--carina-spacing-3)
    var(--carina-spacing-4) var(--carina-spacing-6);
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

[dir='rtl'] .carina-bulk-action-bar__label {
    padding-right: var(--carina-spacing-6);
    padding-left: var(--carina-spacing-3);
  }

.carina-bulk-action-bar__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 56px;
  height: 100%;

  border-inline-start: var(--carina-spacing-px) solid
    var(--carina-border-color-inverse);
}

.carina-bulk-action-bar__dismiss :hover {
    cursor: pointer;
  }

.carina-bulk-action-bar__actions {
  display: none;
  flex-grow: 1;
  flex-shrink: 100;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 100%;
  margin: 0 var(--carina-spacing-2);
  padding: var(--carina-spacing-2) 0;
}

.carina-bulk-action-bar__actions--small {
  display: flex;
}

@container (min-width: 640px) {
  .carina-bulk-action-bar__actions {
    display: flex;
    justify-content: flex-start;
  }

  .carina-bulk-action-bar__actions--small {
    display: none;
  }
}

.carina-bulk-action-bar__menu {
  position: absolute;

  padding: 0 var(--carina-spacing-1);

  visibility: hidden;
}

.carina-bulk-action-bar__menu--visible {
  position: static;

  visibility: visible;
}

.carina-bulk-action-bar__menu-action {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.carina-bulk-action-bar__action-value {
  margin-inline-start: var(--carina-spacing-4);
}

.carina-button-group {
  display: flex;
}

.carina-button-group__item {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 40px;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-4);
  border: var(--carina-border-width-1) solid var(--carina-border-color-soft);

  color: var(--carina-text-color-soft);

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);
  font-family: var(--carina-font-family-primary);

  background-color: var(--carina-background-color-surface);
  cursor: pointer;

  margin-inline-start: calc(-1 * var(--carina-spacing-px));

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;
}

.carina-button-group__item:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    z-index: calc(var(--carina-z-index-current) + 2);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-button-group__item--small {
  min-width: 96px;
  height: 32px;

  font-size: var(--carina-font-size-body-sm);
}

.carina-button-group__item--large {
  min-width: 128px;
  height: 44px;
}

.carina-button-group__item--disabled {
  cursor: default;
  opacity: var(--carina-opacity-40);
}

.carina-button-group__item:not(.carina-button-group__item--disabled):not(.carina-button-group__item--selected):not(
    .carina-button-group__item:active
  ):hover {
  color: var(--carina-text-color-base);

  background: var(--carina-background-color-surface-hover);
}

.carina-button-group__item:active:not(.carina-button-group__item--disabled),
.carina-button-group__item--selected,
.carina-button-group__item--selected:focus,
.carina-button-group__item--selected:hover {
  color: var(--carina-text-color-on-primary);

  background: var(--carina-background-color-primary);
  cursor: default;
}

.carina-button-group__item--selected {
  border: var(--carina-border-width-1) solid
    var(--carina-border-color-primary-focus);
  z-index: calc(var(--carina-z-index-current) + 1);
}

.carina-button-group__item--first {
  margin-inline-start: var(--carina-spacing-0);

  border-start-start-radius: var(--carina-spacing-2-5);
  border-end-start-radius: var(--carina-spacing-2-5);
}

.carina-button-group__item--first.carina-button-group__item--rebrand {
    border-start-start-radius: var(--carina-border-radius-sm);
    border-end-start-radius: var(--carina-border-radius-sm);
  }

.carina-button-group__item--last {
  border-start-end-radius: var(--carina-spacing-2-5);
  border-end-end-radius: var(--carina-spacing-2-5);
}

.carina-button-group__item--last.carina-button-group__item--rebrand {
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
  }

.carina-button-group__item--auto-width,
.carina-button-group__item--icon-only {
  min-width: unset;
}

.carina-button-group__item--icon-only {
  padding: var(--carina-spacing-2);
}

.carina-button-group__item-icon {
  display: flex;
  align-content: center;
  justify-content: center;
}

.carina-button-group__item-icon--start {
  padding-inline-end: var(--carina-spacing-2);
}

.carina-button-group__item-icon--end {
  padding-inline-start: var(--carina-spacing-2);
}

.carina-button-group__item-icon--icon-only {
  padding: var(--carina-spacing-0);
}

.carina-button-group__item--rebrand {
  color: var(--carina-text-color-base);
}

.carina-button-group__item--rebrand:active:not(.carina-button-group__item--disabled),
.carina-button-group__item--rebrand.carina-button-group__item--selected,
.carina-button-group__item--rebrand.carina-button-group__item--selected:focus,
.carina-button-group__item--rebrand.carina-button-group__item--selected:hover {
  color: var(--carina-text-color-primary);
  border-color: var(--carina-border-color-primary);
  background-color: var(--carina-background-color-surface-active);
}

.carina-card__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.carina-card__body--horizontal {
  flex: 1 0 50%;
}

.carina-card__body--vertical {
  flex: 1 0 40%;
  min-height: calc(var(--card-height, 500px) * 0.4);
}

.carina-card__container {
  display: flex;

  width: var(--card-width, 500px);
  max-height: var(--card-height, 500px);
  border-radius: var(--carina-border-radius-xl);
  overflow: hidden;

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-family: var(--carina-font-family-primary);
  direction: ltr;

  background-color: var(--carina-background-color-surface);
}

[dir='rtl'] .carina-card__container {
    direction: rtl;
  }

.carina-card__container--border {
  border-color: var(--carina-border-color-soft);
  border-style: solid;
  border-width: var(--carina-border-width-1);
}

.carina-card__container--horizontal {
  flex-direction: row;
}

[dir='rtl'] .carina-card__container--horizontal {
    direction: rtl;
  }

.carina-card__container--horizontal.carina-card__container--responsive {
  width: 100%;
}

.carina-card__container--vertical {
  flex-wrap: wrap;
}

.carina-card__container--vertical.carina-card__container--responsive {
  width: 100%;
  height: 100%;
}

.carina-card__container--vertical.carina-card__container--fixed-width {
  height: 100%;
}

.carina-card__container--shadow-none {
  box-shadow: var(--carina-box-shadow-none);
}

.carina-card__container--shadow-md {
  box-shadow: var(--carina-box-shadow-md);
}

.carina-card__container--shadow-lg {
  box-shadow: var(--carina-box-shadow-lg);
}

.carina-card__container--shadow-xl {
  box-shadow: var(--carina-box-shadow-xl);
}

.carina-card__container--shadow-2xl {
  box-shadow: var(--carina-box-shadow-2xl);
}

.carina-card__container--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-card__endcap {
  display: flex;
}

.carina-card__endcap--header {
  align-items: center;
  justify-content: center;
}

.carina-card__endcap--header.carina-card__endcap--horizontal {
  flex: 0 0 20%;
}

.carina-card__endcap--header.carina-card__endcap--vertical {
  width: 100%;
  min-height: calc(var(--card-height, 500px) * 0.4);
}

.carina-card__endcap--footer.carina-card__endcap--horizontal {
  align-items: flex-start;
  justify-content: center;
}

.carina-card__endcap--footer.carina-card__endcap--vertical {
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-height: 10%;
}

.carina-card__image {
  position: relative;

  padding: 0;
  overflow: hidden;
}

.carina-card__image--full {
  width: 100%;
  height: 100%;
}

.carina-card__image--padded {
  width: 80%;
  height: 80%;
}

.carina-card__image-canvas {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;

  transform: translate(-50%, -50%);
}

.carina-carousel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-2xs);
  font-family: var(--carina-font-family-primary);
}

.carina-carousel--show-overhang {
  padding: var(--carina-spacing-0)
    calc(var(--carina-spacing-4) + (0.5 * var(--carina-spacing-1)));
}

.carina-carousel__container {
  position: relative;

  padding: var(--carina-spacing-0) 0.4rem;
}

.carina-carousel__container--inset-controls {
  padding: var(--carina-spacing-0);
}

.carina-carousel--lg-dots {
  --carina-carousel-dot-size: 16px;
  --carina-carousel-dot-padding: 24px;
}

.carina-carousel--md-dots {
  --carina-carousel-dot-size: 12px;
  --carina-carousel-dot-padding: 20px;
}

/* TODO: update to use new 'black' color token when available. */

.carina-carousel__control {
  position: absolute;
  top: calc(50% - 24px);
  z-index: var(--carina-z-index-10);

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  width: 36px;
  height: 36px;
  padding: var(--carina-spacing-0-5);
  border: 0;
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-soft);

  line-height: 36px;
  text-align: center;

  background: var(--carina-background-color-surface);
  box-shadow: color-mix(
  in srgb,
  #000 calc(var(--carina-opacity-25) * 100%),
  transparent
) 0 var(--carina-spacing-1)
  var(--carina-spacing-2) calc(-1 * var(--carina-spacing-1));
  transform: translateY(-50%);

  transform-origin: 50% 50%;
  cursor: pointer;
  opacity: var(--carina-opacity-0);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-property: transform, box-shadow, outline-color;
  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: calc(-1 * var(--carina-border-width-4));

  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
}

.carina-carousel__control:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
    transition-property: transform, box-shadow, outline-color;
  }

.carina-carousel__control:active {
    transform: translateY(-50%) scale(1.03);
  }

@media (hover) {

.carina-carousel__control {
    /* We still want to have the controls in the dom, but hidden when the carousel isn't hovered opacity: 0 */
}
    div:hover > .carina-carousel__control,
    .carina-carousel__control:focus {
      opacity: var(--carina-opacity-100);
    }
  }

.carina-carousel__control--previous {
  inset-inline-start: 0;
}

[dir='rtl'] .carina-carousel__control--previous {
    box-shadow: color-mix(
  in srgb,
  #000 calc(var(--carina-opacity-25) * 100%),
  transparent
) 0 calc(-1 * var(--carina-spacing-1))
  var(--carina-spacing-2) calc(-1 * var(--carina-spacing-1));

    transform: rotate(180deg) translateY(50%);
    transform-origin: 50% 50%;
  }

.carina-carousel__control--next {
  inset-inline-end: 0;
}

[dir='rtl'] .carina-carousel__control--next {
    box-shadow: color-mix(
  in srgb,
  #000 calc(var(--carina-opacity-25) * 100%),
  transparent
) 0 calc(-1 * var(--carina-spacing-1))
  var(--carina-spacing-2) calc(-1 * var(--carina-spacing-1));

    transform: rotate(180deg) translateY(50%);
    transform-origin: 50% 50%;
  }

.carina-carousel__control--inset {
  width: 24px;
  height: 24px;
}

.carina-carousel__control--previous.carina-carousel__control--inset {
  inset-inline-start: calc(var(--carina-spacing-1));
}

.carina-carousel__control--next.carina-carousel__control--inset {
  inset-inline-end: calc(var(--carina-spacing-1));
}

/* Rebrand: the arrow control adopts the new elevation (shadow-lg) and a small
 * corner radius (sm) instead of the legacy soft shadow + circular shape.
 * Self-compounded ($(base)$(base)--rebrand) so it wins over the base rule, and the
 * RTL override beats the directional [dir='rtl'] box-shadow above. shadow-lg is
 * symmetric, so it is correct in both directions. */

.carina-carousel__control.carina-carousel__control--rebrand {
  border-radius: var(--carina-border-radius-sm);
  box-shadow: var(--carina-box-shadow-lg);
}

[dir='rtl'] .carina-carousel__control.carina-carousel__control--rebrand {
    box-shadow: var(--carina-box-shadow-lg);
  }

.carina-carousel__dot {
  position: absolute;
  width: var(--carina-carousel-dot-size);
  height: var(--carina-carousel-dot-size);
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  border: 0;
  border-radius: var(--carina-border-radius-full);

  text-decoration: none;

  background: var(--carina-background-color-neutral);

  transform-origin: 50% 50%;
  cursor: pointer;

  transition: transform var(--carina-transition-duration-400)
      var(--carina-transition-timing-function-productive-ease-in-out),
    opacity var(--carina-transition-duration-400)
      var(--carina-transition-timing-function-productive-ease-in-out),
    box-shadow var(--carina-transition-duration-100)
      var(--carina-transition-timing-function-productive-ease-in-out);
}

.carina-carousel__dot--active {
  background: var(--carina-background-color-surface-inverse);
  cursor: default;
}

.carina-carousel__dot--hidden {
  opacity: var(--carina-opacity-0);
}

@media (prefers-reduced-motion) {
  .carina-carousel__dot {
    transition-property: none;
  }
}

.carina-carousel__dots {
  position: relative;

  margin: var(--carina-spacing-4) auto 0;

  background: var(--carina-background-color-surface);
  padding: var(--carina-spacing-2);
  border-radius: var(--carina-border-radius-2xl);
  width: calc(
    var(--carina-carousel-dot-padding) * var(--carina-carousel-visible-dots) +
      16px
  );
  height: calc(var(--carina-carousel-dot-size) + 2 * var(--carina-spacing-2));
  box-sizing: border-box;
  display: flex;
  justify-content: center;

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-0);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;
}

.carina-carousel__dots:focus-visible {
    transition-duration: var(--carina-transition-duration-100);
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-carousel__dots--hidden {
  position: absolute;

  width: 1px;
  height: 1px;
  overflow: hidden;

  white-space: nowrap;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.carina-carousel__dots--1 {
  --carina-carousel-visible-dots: 1;
}

.carina-carousel__dots--2 {
  --carina-carousel-visible-dots: 2;
}

.carina-carousel__dots--3 {
  --carina-carousel-visible-dots: 3;
}

.carina-carousel__dots--4 {
  --carina-carousel-visible-dots: 4;
}

.carina-carousel__dots--5 {
  --carina-carousel-visible-dots: 5;
}

.carina-carousel__numbers {
  position: absolute;
  top: var(--carina-spacing-4);
  inset-inline-start: var(--carina-spacing-8);

  padding: calc(2 * var(--carina-spacing-px)) var(--carina-spacing-2);
  border-radius: calc(
    var(--carina-border-radius-sm) + var(--carina-border-radius-lg)
  );
}

.carina-carousel__numbers.carina-carousel__numbers--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-carousel__numbers{

  color: var(--carina-text-color-base-inverse);

  background: color-mix(
    in srgb,
    var(--carina-background-color-surface-inverse)
      calc(var(--carina-opacity-80) * 100%),
    transparent
  );

  pointer-events: none;
}

.carina-carousel__numbers--inset {
  top: var(--carina-spacing-2);
  inset-inline-start: var(--carina-spacing-2);
}

.carina-carousel__slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: var(--carina-spacing-0) calc(6 * var(--carina-spacing-px));
  overflow: hidden;
}

.carina-carousel__slide > * {
    border-radius: var(--carina-border-radius-xl);
  }

.carina-carousel__slide > * > img {
      border-radius: var(--carina-border-radius-xl);
    }

.carina-carousel__slide.carina-carousel__slide--rebrand > * {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-carousel__slide.carina-carousel__slide--rebrand > * > img {
        border-radius: var(--carina-border-radius-sm);
      }

.carina-carousel__slide--inset {
  padding: var(--carina-spacing-0);
}

.carina-carousel__slide--hidden {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}

/* stylelint-disable-next-line at-rule-no-unknown */

.carina-carousel__slide--1-cols {
    flex-basis: calc(100% / 1);
    width: calc(100% / 1);
    max-width: calc(100% / 1);
  }

.carina-carousel__slide--2-cols {
    flex-basis: calc(100% / 2);
    width: calc(100% / 2);
    max-width: calc(100% / 2);
  }

.carina-carousel__slide--3-cols {
    flex-basis: calc(100% / 3);
    width: calc(100% / 3);
    max-width: calc(100% / 3);
  }

.carina-carousel__slide--4-cols {
    flex-basis: calc(100% / 4);
    width: calc(100% / 4);
    max-width: calc(100% / 4);
  }

.carina-carousel__slide--5-cols {
    flex-basis: calc(100% / 5);
    width: calc(100% / 5);
    max-width: calc(100% / 5);
  }

.carina-carousel__slide--6-cols {
    flex-basis: calc(100% / 6);
    width: calc(100% / 6);
    max-width: calc(100% / 6);
  }

.carina-carousel__slide--7-cols {
    flex-basis: calc(100% / 7);
    width: calc(100% / 7);
    max-width: calc(100% / 7);
  }

.carina-carousel__slide--8-cols {
    flex-basis: calc(100% / 8);
    width: calc(100% / 8);
    max-width: calc(100% / 8);
  }

.carina-carousel__slide--9-cols {
    flex-basis: calc(100% / 9);
    width: calc(100% / 9);
    max-width: calc(100% / 9);
  }

.carina-carousel__slide--10-cols {
    flex-basis: calc(100% / 10);
    width: calc(100% / 10);
    max-width: calc(100% / 10);
  }

.carina-carousel__slide--11-cols {
    flex-basis: calc(100% / 11);
    width: calc(100% / 11);
    max-width: calc(100% / 11);
  }

.carina-carousel__slide--12-cols {
    flex-basis: calc(100% / 12);
    width: calc(100% / 12);
    max-width: calc(100% / 12);
  }

.carina-carousel__slider-wrapper {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.carina-carousel__slider-wrapper--show-overhang {
  padding: var(--carina-spacing-0) calc(50 * var(--carina-spacing-px));
}

.carina-carousel__slider {
  display: flex;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  list-style: none;

  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );
  transition-duration: var(--carina-transition-duration-400);
  transition-property: transform;
}

.carina-carousel__slider--touching {
  transition-duration: calc(0 * var(--carina-transition-duration-50));
}

@media (prefers-reduced-motion) {
  .carina-carousel__slider {
    transition-duration: calc(0 * var(--carina-transition-duration-50));
  }
}

.carina-label {
  position: relative;

  display: block;
  margin: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-spacing-1);

  padding: var(--carina-spacing-0);

  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
  vertical-align: top;
}

.carina-label,
.carina-label__abbr {
  font-weight: var(--carina-font-weight-body);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

.carina-label--hidden {
  position: absolute;

  width: var(--carina-spacing-px);
  height: var(--carina-spacing-px);
  overflow: hidden;

  white-space: nowrap;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.carina-label--underline,
.carina-label--outline {
  overflow: hidden;
  left: var(--carina-spacing-0);
}

.carina-label--underline,
.carina-label--outline,
.carina-label--grid {
  position: absolute;
  max-width: calc(100% - var(--carina-spacing-8));

  font-size: var(--carina-font-size-body-md);
  white-space: nowrap;
  text-overflow: ellipsis;

  transition: top var(--carina-transition-duration-100) ease
      calc(0 * var(--carina-transition-duration-100)),
    font-size var(--carina-transition-duration-100) ease
      calc(0 * var(--carina-transition-duration-100)),
    padding-left var(--carina-transition-duration-100) ease
      calc(0 * var(--carina-transition-duration-100));

  padding-inline-start: var(--carina-spacing-4);
}

[dir='rtl'] .carina-label--underline, [dir='rtl'] .carina-label--outline, [dir='rtl'] .carina-label--grid {
    right: var(--carina-spacing-0);
    left: unset;

    transition: top var(--carina-transition-duration-100) ease
        calc(0 * var(--carina-transition-duration-100)),
      font-size var(--carina-transition-duration-100) ease
        calc(0 * var(--carina-transition-duration-100)),
      padding-right var(--carina-transition-duration-100) ease
        calc(0 * var(--carina-transition-duration-100));
  }

.carina-label--grid {
  top: var(--carina-spacing-0-5);
  padding-inline-start: var(--carina-spacing-2);
}

.carina-label--outline,
.carina-label--underline {
  top: calc(var(--carina-spacing-2-5) - var(--carina-spacing-px));
}

.carina-label--animated {
  font-size: var(--carina-font-size-body-sm);
}

.carina-label--animated.carina-label--underline,
.carina-label--animated.carina-label--outline {
  top: calc(-1 * var(--carina-spacing-2-5));
}

.carina-label--icon.carina-label--underline,
.carina-label--icon.carina-label--outline {
  padding-inline-start: var(--carina-spacing-11);
}

.carina-label--icon.carina-label--required.carina-label--underline,
.carina-label--icon.carina-label--required.carina-label--outline {
  padding-inline-start: calc(
    var(--carina-spacing-12) + var(--carina-spacing-1)
  );
}

.carina-label--end-icon.carina-label--underline,
.carina-label--end-icon.carina-label--outline {
  max-width: calc(100% - var(--carina-spacing-8) - var(--carina-spacing-5));
}

.carina-label--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-label__abbr {
  position: absolute;
  inset-inline-start: calc(-1 * var(--carina-spacing-2-5));

  color: var(--carina-text-color-danger);
  font-size: var(--carina-font-size-body-xl);

  text-decoration: none;
  top: calc(-1 * var(--carina-spacing-0-5));
  transition: left var(--carina-transition-duration-100) ease
    calc(0 * var(--carina-transition-duration-100));
}

[dir='rtl'] .carina-label__abbr {
    transition: right var(--carina-transition-duration-100) ease
      calc(0 * var(--carina-transition-duration-100));
  }

.carina-label__abbr--grid {
  line-height: var(--carina-line-height-none);
  left: calc(-1 * var(--carina-spacing-2));
}

.carina-label__abbr--underline,
.carina-label__abbr--outline {
  inset-inline-start: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-sm);
}

.carina-label__abbr--icon.carina-label__abbr--underline,
.carina-label__abbr--icon.carina-label__abbr--outline {
  inset-inline-start: var(--carina-spacing-11);
}

.carina-helper-text {
  display: block;
  margin: var(--carina-spacing-1) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-xs);

  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  vertical-align: top;
}

.carina-helper-text > svg {
    position: relative;
    top: -1px;

    display: inline;

    vertical-align: middle;

    margin-inline-end: var(--carina-spacing-1);
  }

.carina-helper-text--error {
  color: var(--carina-text-color-danger);
}

.carina-helper-text--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-helper-text--grid{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.carina-checkbox-group {
  clear: both;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;

  color: var(--carina-text-color-base);
  text-align: left;

  list-style-type: none;
  outline: 0;
}

[dir='rtl'] .carina-checkbox-group {
    text-align: right;
  }

.carina-checkbox-group--horizontal > label {
    display: inline-flex;
    padding-right: var(--carina-spacing-6);
  }

[dir='rtl'] .carina-checkbox-group--horizontal > label {
      padding-right: var(--carina-spacing-0);
      padding-left: var(--carina-spacing-6);
    }

.carina-checkbox-group__container {
  display: inline-block;
}

.carina-input-fieldset {
  position: absolute;

  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  border-color: var(--carina-border-color-base);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-md);
  overflow: hidden;

  background: transparent;

  pointer-events: none;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: border-color, outline-color;
  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
}

.carina-input-fieldset--default.carina-input-fieldset--label {
  bottom: 0;
}

.carina-input-fieldset--grid {
  top: 0;
  inset-inline-start: 0;

  border-style: dashed;
  border-width: var(--carina-border-width-0) var(--carina-border-width-0)
    var(--carina-border-width-1) var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-none);
}

.carina-input-fieldset--outline {
  top: calc(-1 * var(--carina-spacing-2-5));
}

.carina-input-fieldset--underline {
  top: calc(-1 * var(--carina-spacing-2-5));

  border-width: var(--carina-border-width-0) var(--carina-border-width-0)
    var(--carina-border-width-1) var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-none);
}

.carina-input-fieldset--error:not(.carina-input-fieldset--disabled, .carina-input-fieldset-outer) {
  border-color: var(--carina-border-color-danger);
}

.carina-input-fieldset--disabled:not(.carina-input-fieldset-outer),
.carina-input-fieldset--read-only:not(.carina-input-fieldset-outer, .carina-input-fieldset--error) {
  border-color: var(--carina-border-color-soft);
}

.carina-input-fieldset--disabled.carina-input-fieldset-outer {
  border-color: var(--carina-colors-transparent);
}

.carina-input-fieldset__legend {
  display: block;
  width: 0;
  height: 19.5px;
  padding: 0;
  margin: var(--carina-spacing-0) var(--carina-spacing-3);

  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: 19.5px;
  letter-spacing: normal;

  visibility: hidden;

  transition-duration: var(--carina-animation-duration-100);
  transition-property: width;
}

.carina-input-fieldset--default .carina-input-fieldset__legend{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.carina-input-fieldset__legend--animated {
  width: unset;
  padding: var(--carina-spacing-0) var(--carina-spacing-1);
}

.carina-input-fieldset__legend--animated:empty {
    padding: var(--carina-spacing-0);
  }

.carina-input-fieldset__legend--animated.carina-input-fieldset__legend--hiddenlabel {
  width: 0;
  padding: var(--carina-spacing-0);
}

.carina-input-fieldset__legend--required {
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-input-fieldset__legend--animated.carina-input-fieldset__legend--required.carina-input-fieldset__legend--label {
  margin: var(--carina-spacing-0) var(--carina-spacing-1);

  padding: var(--carina-spacing-0) var(--carina-spacing-1)
    var(--carina-spacing-0) var(--carina-spacing-3);
}

[dir='rtl'] .carina-input-fieldset__legend--animated.carina-input-fieldset__legend--required.carina-input-fieldset__legend--label {
    padding: var(--carina-spacing-0) var(--carina-spacing-3)
      var(--carina-spacing-0) var(--carina-spacing-1);
  }

.carina-input-fieldset-outer {
  top: -13px;
  position: absolute;
  pointer-events: none;
  border-color: transparent;
  border-style: solid;
}

.carina-input-fieldset-outer--outline {
  left: -3px;
  width: calc(100% + 6px);
  border-radius: calc(var(--carina-border-radius-md) + 3px);
  border-width: var(--carina-border-width-2);
}

.carina-input-fieldset--rebrand:not(.carina-input-fieldset--grid, .carina-input-fieldset--underline) {
  border-radius: var(--carina-border-radius-sm);
}

.carina-input-fieldset-outer--rebrand.carina-input-fieldset-outer--outline:not(.carina-input-fieldset-outer--grid, .carina-input-fieldset-outer--underline) {
  border-radius: calc(var(--carina-border-radius-sm) + 3px);
}

.carina-input-fieldset-outer--underline,
.carina-input-fieldset-outer--grid {
  border-bottom-width: var(--carina-border-width-2);
}

.carina-input-fieldset-outer--default {
}

.carina-input-fieldset-outer__legend {
  background: transparent;
  border-color: transparent;
  color: transparent;
  margin-inline-start: calc(var(--carina-spacing-3) + 2px);
}

.carina-input-fieldset-outer__legend--animated.carina-input-fieldset-outer__legend--required.carina-input-fieldset-outer__legend--label {
  margin: var(--carina-spacing-0) calc(var(--carina-spacing-1) + 2px);
}

.carina-input-group {
  position: relative;

  box-sizing: border-box;
  width: 100%;

  border: 0;
  margin-inline: var(--carina-spacing-0);
  padding-block: var(--carina-spacing-0);
  padding-inline: var(--carina-spacing-0);
  min-inline-size: var(--carina-spacing-0);
}

.carina-input-group.carina-input-group--outline {
    margin-top: 19px;
  }

.carina-input-group.carina-input-group--outline legend {
      top: -19px;
    }

.carina-input-group.carina-input-group--underline {
    margin-top: 29px;
  }

.carina-input-group.carina-input-group--underline legend {
      top: -29px;
    }

/* Hide helper text within the group since we have a single instance. */

.carina-input-group__group .carina-input-group__item .carina-helper-text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Remove border radius from all inputs, dropdowns and fieldsets within the group */

.carina-input-group__group .carina-input-group__item .carina-textbox__input,
.carina-input-group__group .carina-input-group__item .carina-dropdown__button,
.carina-input-group__group .carina-input-group__item .carina-input-fieldset,
.carina-input-group__group .carina-input-group__item .carina-input-fieldset-outer {
  border-radius: 0;
}

/* Add rounded corners only to default and outline variants */

.carina-input-group__group
  > .carina-input-group__item:first-child
  :is(
    .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  ):first-child
  .carina-input-fieldset--default,
.carina-input-group__group
  > .carina-input-group__item:first-child
  :is(
    .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  ):first-child
  .carina-input-fieldset--outline {
  border-start-start-radius: var(--carina-border-radius-md);
  border-end-start-radius: var(--carina-border-radius-md);
}

.carina-input-group--rebrand .carina-input-group__group
  > .carina-input-group__item:first-child
  :is(
    .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  ):first-child
  .carina-input-fieldset--default, .carina-input-group--rebrand .carina-input-group__group
  > .carina-input-group__item:first-child
  :is(
    .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  ):first-child
  .carina-input-fieldset--outline {
    border-start-start-radius: var(--carina-border-radius-sm);
    border-end-start-radius: var(--carina-border-radius-sm);
  }

.carina-input-group__group
  > .carina-input-group__item:first-child
  :is(
    .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  ):first-child
  .carina-input-fieldset--outline.carina-input-fieldset-outer {
  border-start-start-radius: calc(var(--carina-border-radius-md) + 3px);
  border-end-start-radius: calc(var(--carina-border-radius-md) + 3px);
}

.carina-input-group--rebrand .carina-input-group__group
  > .carina-input-group__item:first-child
  :is(
    .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  ):first-child
  .carina-input-fieldset--outline.carina-input-fieldset-outer {
    border-start-start-radius: calc(var(--carina-border-radius-sm) + 3px);
    border-end-start-radius: calc(var(--carina-border-radius-sm) + 3px);
  }

.carina-input-group__group
  > .carina-input-group__item:last-child
  :nth-last-child(
    1 of .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  )
  .carina-input-fieldset--default,
.carina-input-group__group
  > .carina-input-group__item:last-child
  :nth-last-child(
    1 of .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  )
  .carina-input-fieldset--outline {
  border-start-end-radius: var(--carina-border-radius-md);
  border-end-end-radius: var(--carina-border-radius-md);
}

.carina-input-group--rebrand .carina-input-group__group
  > .carina-input-group__item:last-child
  :nth-last-child(
    1 of .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  )
  .carina-input-fieldset--default, .carina-input-group--rebrand .carina-input-group__group
  > .carina-input-group__item:last-child
  :nth-last-child(
    1 of .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  )
  .carina-input-fieldset--outline {
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
  }

.carina-input-group__group
  > .carina-input-group__item:last-child
  :nth-last-child(
    1 of .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  )
  .carina-input-fieldset--outline.carina-input-fieldset-outer {
  border-start-end-radius: calc(var(--carina-border-radius-md) + 3px);
  border-end-end-radius: calc(var(--carina-border-radius-md) + 3px);
}

.carina-input-group--rebrand .carina-input-group__group
  > .carina-input-group__item:last-child
  :nth-last-child(
    1 of .carina-textbox__container,
    .carina-dropdown,
    .carina-combobox:has(> .carina-combobox)
  )
  .carina-input-fieldset--outline.carina-input-fieldset-outer {
    border-start-end-radius: calc(var(--carina-border-radius-sm) + 3px);
    border-end-end-radius: calc(var(--carina-border-radius-sm) + 3px);
  }

/* Remove start border from all fieldsets except the first, to display without border-width glitch present when using margin-left: -1 instead */

.carina-input-group__group
  > .carina-input-group__item:not(:first-child)
  .carina-input-fieldset:not(.carina-input-fieldset-outer) {
  border-inline-start-width: var(--carina-border-width-0);
}

/* Make all grouped inputs take full width of the group container */

.carina-input-group__group > .carina-input-group__item {
  width: 100%;
}

/* Range pickers (date and time) need double width for two inputs side-by-side */

.carina-input-group__group > .carina-input-group__item:has(.carina-date-range-picker),
  .carina-input-group__group > .carina-input-group__item:has(.carina-time-range-picker) {
    width: 200%;
  }

/* Ensure focus states work properly on grouped inputs */

.carina-input-group__group > .carina-input-group__item:focus-within {
  position: relative;
  z-index: 1;
}

/* Restore the start border on the focused item */

.carina-input-group__group
  > .carina-input-group__item:focus-within
  :is(.carina-input-fieldset--default, .carina-input-fieldset--outline):not(
    .carina-input-fieldset-outer
  ) {
  border-inline-start-width: var(--carina-border-width-1);
}

/* Remove the end border of the previous item when the next item is focused */

.carina-input-group__group
  > .carina-input-group__item:has(+ .carina-input-group__item:focus-within)
  :is(.carina-input-fieldset--default, .carina-input-fieldset--outline):not(
    .carina-input-fieldset-outer
  ) {
  border-inline-end-width: var(--carina-border-width-0);
}

/* Remove the start border of the next item when a range picker's first input is focused */

.carina-input-group__group
  > .carina-input-group__item:has(
    .carina-date-range-picker__textbox-wrapper
      > .carina-textbox__container:first-child:focus-within
  )
  + .carina-input-group__item
  :is(.carina-input-fieldset--default, .carina-input-fieldset--outline):not(
    .carina-input-fieldset-outer
  ),
.carina-input-group__group
  > .carina-input-group__item:has(
    .carina-time-range-picker__inner-container
      > .carina-combobox:first-child:focus-within
  )
  + .carina-input-group__item
  :is(.carina-input-fieldset--default, .carina-input-fieldset--outline):not(
    .carina-input-fieldset-outer
  ) {
  border-inline-start-width: var(--carina-border-width-0);
}

/* Remove the end border of the first input in a range picker when the second input is focused */

.carina-input-group__item
  .carina-date-range-picker__textbox-wrapper
  > .carina-textbox__container:first-child:has(
    + .carina-textbox__container:focus-within
  )
  :is(.carina-input-fieldset--default, .carina-input-fieldset--outline):not(
    .carina-input-fieldset-outer
  ) {
  border-inline-end-width: var(--carina-border-width-0);
}

.carina-input-group__item
  .carina-time-range-picker__inner-container
  > .carina-combobox:first-child:has(+ .carina-combobox:focus-within)
  :is(
    .carina-combobox__fieldset--default,
    .carina-combobox__fieldset--outline,
    .carina-input-fieldset--default,
    .carina-input-fieldset--outline
  ):not(.carina-combobox__fieldset--outer, .carina-input-fieldset-outer) {
  border-inline-end-width: var(--carina-border-width-0);
}

/* Remove the start border of the second input in a range picker when the first input is focused */

.carina-input-group__item:has(
    .carina-date-range-picker__textbox-wrapper
      > .carina-textbox__container:first-child:focus-within
  )
  .carina-date-range-picker__textbox-wrapper
  > .carina-textbox__container:nth-child(2)
  :is(.carina-input-fieldset--default, .carina-input-fieldset--outline):not(
    .carina-input-fieldset-outer
  ) {
  border-inline-start-width: var(--carina-border-width-0);
}

.carina-input-group__item:has(
    .carina-time-range-picker__inner-container
      > .carina-combobox:first-child:focus-within
  )
  .carina-time-range-picker__inner-container
  > .carina-combobox:nth-child(2)
  :is(
    .carina-combobox__fieldset--default,
    .carina-combobox__fieldset--outline,
    .carina-input-fieldset--default,
    .carina-input-fieldset--outline
  ):not(.carina-combobox__fieldset--outer, .carina-input-fieldset-outer) {
  border-inline-start-width: var(--carina-border-width-0);
}

.carina-input-group__item .carina-time-range-picker__inner-container .carina-combobox--focus,
.carina-input-group__item
  .carina-date-range-picker__textbox-wrapper
  .carina-textbox__container:focus-within {
  z-index: 1;
}

.carina-textbox-icon {
  position: absolute;
  bottom: 8.5px;

  display: block;
  width: var(--carina-icon-md);
  height: var(--carina-icon-md);

  color: var(--carina-text-color-soft);
}

.carina-textbox-icon svg {
    display: block;
    vertical-align: middle;
  }

.carina-textbox-icon--readonly:hover {
    cursor: default;
  }

.carina-textbox-icon--small {
  bottom: var(--carina-spacing-1-5);
}

.carina-textbox-icon--grid {
  bottom: var(--carina-spacing-1);

  width: var(--carina-icon-xs);
  height: var(--carina-icon-xs);
}

.carina-textbox-icon--start {
  inset-inline-start: var(--carina-spacing-4);
}

.carina-textbox-icon--start.carina-textbox-icon--grid {
  inset-inline-start: var(--carina-spacing-1);
}

.carina-textbox-icon--end {
  inset-inline-end: var(--carina-spacing-4);
}

.carina-textbox-icon--end.carina-textbox-icon--grid {
  inset-inline-end: var(--carina-spacing-1);
}

/* No-op keyframe bound to `:-webkit-autofill` so Textbox.tsx can detect autofill via `animationstart`. */

@keyframes carina-textbox-autofill {
  from {
    opacity: 1;
  }
}

.carina-textbox__container {
  position: relative;

  box-sizing: border-box;
  width: 100%;
}

.carina-textbox__container > fieldset {
    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-duration: var(--carina-transition-duration-100);
    transition-property: border-color;
  }

.carina-textbox__container--default:focus-within > fieldset {
    outline-color: var(--carina-border-color-primary-focus);
    transition-property: border-color, outline-color;
  }

.carina-textbox__container--default.carina-textbox__container--error:focus-within > fieldset {
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-textbox__container--underline {
  border-radius: var(--carina-border-radius-md) var(--carina-border-radius-md) 0
    0;

  background-color: transparent;
}

.carina-textbox__container--underline:focus-within > .carina-input-fieldset-outer {
    bottom: -3px;
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textbox__container--underline.carina-textbox__container--error:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-danger-focus);
  }

.carina-textbox__container--grid {
  border-radius: var(--carina-border-radius-md) var(--carina-border-radius-md) 0
    0;

  background-color: transparent;
}

.carina-textbox__container--grid:focus-within > .carina-input-fieldset-outer {
    bottom: -3px;
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textbox__container--grid.carina-textbox__container--error:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-danger-focus);
  }

.carina-textbox__container--outline {
  margin-top: var(--carina-spacing-2-5);

  background-color: transparent;
}

.carina-textbox__container--outline:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textbox__container--outline.carina-textbox__container--error:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-danger-focus);
  }

.carina-textbox__container--error {
  border-color: var(--carina-border-color-danger);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );

  transition-duration: var(--carina-transition-duration-100);
  transition-property: border-color;
}

.carina-textbox__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 36px;

  padding: 0 var(--carina-spacing-4);
  border: 0;
  border-radius: var(--carina-border-radius-md);

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-md);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  vertical-align: middle;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

/* safari-ios: removes inner shadow  */

.carina-textbox__input::-moz-placeholder {
    color: var(--carina-text-color-soft);
  }

.carina-textbox__input::placeholder {
    color: var(--carina-text-color-soft);
  }

.carina-textbox__input:focus {
    outline: 0;
  }

.carina-textbox__input:-ms-clear {
    display: none;
  }

.carina-textbox__input:disabled {
    border-color: var(--carina-border-color-soft);

    color: var(--carina-text-color-disabled);

    pointer-events: none;
  }

.carina-textbox__input:disabled::-moz-placeholder {
      color: color-mix(
        in srgb,
        var(--carina-text-color-disabled) calc(var(--carina-opacity-40) * 100%),
        transparent
      );

      opacity: var(--carina-opacity-40);
    }

.carina-textbox__input:disabled::placeholder {
      color: color-mix(
        in srgb,
        var(--carina-text-color-disabled) calc(var(--carina-opacity-40) * 100%),
        transparent
      );

      opacity: var(--carina-opacity-40);
    }

.carina-textbox__input--rebrand:not(.carina-textbox__input--grid, .carina-textbox__input--underline) {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-textbox__input--grid {
  height: 24px;
}

.carina-textbox__input--underline,
.carina-textbox__input--outline {
  height: 42px;
}

.carina-textbox__input--default {
  height: 40px;
  margin: 0;

  background-color: transparent;
}

.carina-textbox__input--default.carina-textbox__input--small {
  height: 36px;
  padding: 0 var(--carina-spacing-3);

  font-size: var(--carina-font-size-xs);
}

.carina-textbox__input--underline {
  border-radius: var(--carina-border-radius-none);
  background-color: transparent;
}

.carina-textbox__input--grid {
  padding-inline-start: var(--carina-spacing-1);
  padding-inline-end: var(--carina-spacing-1);

  border-radius: var(--carina-border-radius-none);

  background-color: transparent;
}

.carina-textbox__input--outline {
  margin: var(--carina-spacing-2-5) 0 0;

  background-color: transparent;
}

.carina-textbox__input--outline:-webkit-autofill {
    animation-name: carina-textbox-autofill;
    animation-duration: 1ms;
  }

.carina-textbox__input--default.carina-textbox__input--icon-end {
  padding-inline-end: calc(var(--carina-spacing-10) + var(--carina-spacing-1));
}

.carina-textbox__input--default.carina-textbox__input--icon-start {
  padding-inline-start: calc(
    var(--carina-spacing-10) + var(--carina-spacing-1)
  );
}

.carina-textbox__input--underline.carina-textbox__input--icon-end {
  padding-inline-end: calc(var(--carina-spacing-10) + var(--carina-spacing-1));
}

.carina-textbox__input--underline.carina-textbox__input--icon-end:required {
    padding-inline-end: calc(var(--carina-spacing-9) + var(--carina-spacing-2));
  }

.carina-textbox__input--underline.carina-textbox__input--icon-start {
  padding-inline-start: calc(
    var(--carina-spacing-12) + var(--carina-spacing-1)
  );
}

.carina-textbox__input--grid.carina-textbox__input--icon-end {
  padding-inline-end: var(--carina-spacing-6);
}

.carina-textbox__input--grid.carina-textbox__input--icon-start {
  padding-inline-start: var(--carina-spacing-6);
}

.carina-textbox__input--outline.carina-textbox__input--icon-end {
  padding-inline-end: calc(var(--carina-spacing-10) + var(--carina-spacing-1));
}

.carina-textbox__input--outline.carina-textbox__input--icon-start {
  padding-inline-start: calc(
    var(--carina-spacing-10) + var(--carina-spacing-2)
  );
}

.carina-textbox__input:not(:disabled).carina-textbox__input--read-only {
  color: var(--carina-text-color-base);
}

.carina-textbox__input.carina-textbox__input--read-only {
  border-color: var(--carina-border-color-soft);
  background-color: var(--carina-background-color-surface-alt);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.carina-textbox__input.carina-textbox__input--read-only:focus {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textbox__input.carina-textbox__input--read-only:hover {
    cursor: default;
  }

.carina-textbox__container--default > .carina-input-fieldset {
  height: 40px;
  bottom: 0px;
}

.carina-textbox__container--default > .carina-input-fieldset-outer {
  bottom: -3px;
  height: 46px;
}

.carina-textbox__container--grid > .carina-input-fieldset {
  height: 100%;
}

.carina-textbox__container--grid > .carina-input-fieldset-outer {
  height: calc(100% + 6px);
  top: unset;
  bottom: -3px;
}

.carina-textbox__container--outline > .carina-input-fieldset,
.carina-textbox__container--underline > .carina-input-fieldset {
  height: calc(100% + var(--carina-spacing-2-5));
}

.carina-textbox__container--outline > .carina-input-fieldset-outer,
.carina-textbox__container--underline > .carina-input-fieldset-outer {
  height: calc(100% + calc(var(--carina-spacing-2-5) + 6px));
}

.carina-textbox__container--rebrand.carina-textbox__container--underline,
  .carina-textbox__container--rebrand.carina-textbox__container--grid {
    border-radius: var(--carina-border-radius-sm) var(--carina-border-radius-sm)
      0 0;
  }

.carina-dropdown {
  position: relative;

  display: block;

  box-sizing: border-box;
  width: 100%;

  font-weight: var(--carina-font-weight-body);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

.carina-dropdown--error
  > .carina-input-fieldset:not(
    .carina-input-fieldset-outer,
    .carina-input-fieldset--disabled
  ) {
  border-color: var(--carina-border-color-danger);
}

.carina-dropdown--default,
.carina-dropdown--default.carina-dropdown--open {
  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );

  transition-duration: var(--carina-transition-duration-100);

  transition-property: border-color;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, border-color;

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
}

.carina-dropdown--default:focus-within > .carina-input-fieldset,
  .carina-dropdown--default.focus-in-portal > .carina-input-fieldset,
  .carina-dropdown--default.carina-dropdown--open:focus-within > .carina-input-fieldset,
  .carina-dropdown--default.carina-dropdown--open.focus-in-portal > .carina-input-fieldset {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-dropdown--default.carina-dropdown--error:focus-within > .carina-input-fieldset,
    .carina-dropdown--default.carina-dropdown--error.focus-in-portal > .carina-input-fieldset,
    .carina-dropdown--default.carina-dropdown--open.carina-dropdown--error:focus-within > .carina-input-fieldset,
    .carina-dropdown--default.carina-dropdown--open.carina-dropdown--error.focus-in-portal > .carina-input-fieldset {
      outline-color: var(--carina-border-color-danger-focus);
    }

.carina-dropdown--grid {
  height: 24px;
}

.carina-dropdown--grid:focus-within > .carina-input-fieldset-outer,
  .carina-dropdown--grid.focus-in-portal > .carina-input-fieldset-outer {
    bottom: -3px;
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-dropdown--grid.carina-dropdown--error:focus-within > .carina-input-fieldset-outer,
    .carina-dropdown--grid.carina-dropdown--error.focus-in-portal > .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-danger-focus);
    }

.carina-dropdown--outline:focus-within > .carina-input-fieldset-outer,
  .carina-dropdown--outline.focus-in-portal > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-dropdown--outline.carina-dropdown--error:focus-within > .carina-input-fieldset-outer,
    .carina-dropdown--outline.carina-dropdown--error.focus-in-portal > .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-danger-focus);
    }

.carina-dropdown--underline:focus-within > .carina-input-fieldset-outer,
  .carina-dropdown--underline.focus-in-portal > .carina-input-fieldset-outer {
    bottom: -3px;
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-dropdown--underline.carina-dropdown--error:focus-within > .carina-input-fieldset-outer,
    .carina-dropdown--underline.carina-dropdown--error.focus-in-portal > .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-danger-focus);
    }

.carina-dropdown__button {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-4);

  border: 0;
  border-radius: var(--carina-border-radius-md);

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;

  outline: 0;

  cursor: pointer;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-dropdown__button:focus,
  .carina-dropdown__button:active {
    outline: 0;
  }

.carina-dropdown__button:focus-visible {
    outline-width: var(--carina-border-width-2);
    outline-style: solid;
    outline-color: var(--carina-colors-transparent);
  }

.carina-dropdown__button ::-moz-focus-inner {
    border: 0;
  }

.carina-dropdown__button.carina-dropdown__button--read-only {
  color: var(--carina-text-color-base);
  border-color: var(--carina-border-color-soft);
  background-color: var(--carina-background-color-surface-alt);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.carina-dropdown__button.carina-dropdown__button--read-only:focus {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-dropdown__button.carina-dropdown__button--read-only:hover {
    cursor: default;
  }

.carina-dropdown--underline .carina-dropdown__button {
  height: 42px;
}

.carina-dropdown__button--default {
  height: 40px;

  background-color: transparent;
}

.carina-dropdown__button--grid {
  padding: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-none);

  background-color: transparent;
}

.carina-dropdown__button--outline {
  margin-top: var(--carina-spacing-2-5);

  background-color: transparent;
  height: 42px;
}

.carina-dropdown__button--underline {
  border-radius: var(--carina-border-radius-none);

  background-color: transparent;
}

.carina-dropdown__button--disabled {
  color: var(--carina-text-color-disabled);

  pointer-events: none;
}

.carina-dropdown__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carina-spacing-6);
  height: var(--carina-spacing-6);
  color: var(--carina-text-color-base);
  pointer-events: none;
}

.carina-dropdown__icon--disabled,
.carina-dropdown__icon--read-only {
  color: var(--carina-text-color-disabled);
}

.carina-dropdown__placeholder {
  overflow: hidden;

  color: var(--carina-text-color-soft);

  white-space: nowrap;
  text-align: start;

  text-overflow: ellipsis;
}

.carina-dropdown__placeholder--disabled {
  /* TODO: Advanced Theming [CARINA-8500]
  update after opacity tokens are finalized */

  color: color-mix(
    in srgb,
    var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%),
    transparent
  );

  pointer-events: none;
}

.carina-dropdown__text--grid {
  padding-inline-start: var(--carina-spacing-1);
}

.carina-dropdown__text {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.carina-dropdown__text--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-dropdown--default > .carina-input-fieldset {
    height: 40px;
    bottom: 0px;
  }

.carina-dropdown--default > .carina-input-fieldset-outer {
    height: 46px;
    bottom: -3px;
  }

.carina-dropdown--default .carina-dropdown__label {
  height: 21px;
}

.carina-dropdown--outline > .carina-input-fieldset, .carina-dropdown--underline > .carina-input-fieldset {
    height: calc(100% + var(--carina-spacing-2-5));
  }

.carina-dropdown--outline > .carina-input-fieldset-outer, .carina-dropdown--underline > .carina-input-fieldset-outer {
    height: calc(100% + var(--carina-spacing-2-5) + 6px);
  }

.carina-dropdown--grid > .carina-input-fieldset {
    height: 100%;
  }

.carina-dropdown--grid > .carina-input-fieldset-outer {
    top: -3px;
    height: calc(100% + 6px);
  }

.carina-dropdown__magazine {
  position: static;

  width: 100%;
  max-height: 192px;
  padding: var(--carina-spacing-2) var(--carina-spacing-0);

  box-shadow: none;
}

.carina-dropdown--rebrand .carina-dropdown__button:not(.carina-dropdown__button--grid, .carina-dropdown__button--underline) {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-scrim {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--carina-z-index-scrim);

  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  background-color: var(--carina-background-color-scrim);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

/* prettier-ignore */

/* prettier-ignore */

/* prettier-ignore */

.carina-modal {
  --carina-z-index-current: var(--carina-z-index-modal);
  --carina-z-index-popper: calc(
    var(--carina-z-index-modal) + var(--carina-z-index-popper-diff)
  );
  --carina-z-index-scrim: calc(
    var(--carina-z-index-modal) + var(--carina-z-index-scrim-diff)
  );

  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--carina-z-index-modal);

  display: flex;
  align-items: center;
  justify-content: center;
}

.carina-modal--fullscreen {
    --carina-z-index-current: var(--carina-z-index-fullscreen-modal);
    --carina-z-index-popper: calc(
      var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-popper-diff)
    );
    --carina-z-index-scrim: calc(
      var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-scrim-diff)
    );
  }

.carina-modal--fluid {
    --carina-z-index-current: var(--carina-z-index-fullscreen-modal);
    --carina-z-index-popper: calc(
      var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-popper-diff)
    );
    --carina-z-index-scrim: calc(
      var(--carina-z-index-fullscreen-modal) + var(--carina-z-index-scrim-diff)
    );
  }

@media (min-width: 640px) {

.carina-modal--fluid {
      --carina-z-index-current: var(--carina-z-index-modal);
      --carina-z-index-popper: calc(
        var(--carina-z-index-modal) + var(--carina-z-index-popper-diff)
      );
      --carina-z-index-scrim: calc(
        var(--carina-z-index-modal) + var(--carina-z-index-scrim-diff)
      )
  }
    }

/** Dialog */

.carina-modal__dialog {
  z-index: var(--carina-z-index-modal);

  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  overflow: hidden;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  background-color: var(--carina-background-color-surface);
  outline: none;
  box-shadow: var(--_dialog-box-shadow, var(--carina-box-shadow-2xl));
}

.carina-modal__dialog--center {
  max-width: calc(100% - 16px);
  max-height: 100%;
  border-radius: var(--carina-border-radius-xl);
}

.carina-modal__dialog--rebrand {
  border: var(--carina-border-width-1) solid var(--carina-border-color-soft);
}

.carina-modal__dialog--rebrand:where(.carina-modal__dialog--center) {
  border-radius: var(--carina-border-radius-sm);
}

.carina-modal__dialog--sm {
  width: 420px;
}

.carina-modal__dialog--md {
  width: 560px;
}

@media (max-width: 560px) {
  .carina-modal__dialog--md {
    height: 100%;
    border-radius: 0;
  }
}

.carina-modal__dialog--lg {
  width: 800px;
}

@media (max-width: 800px) {
  .carina-modal__dialog--lg {
    height: 100%;
    border-radius: 0;
  }
}

.carina-modal__dialog--xl {
  width: 1240px;
}

@media (max-width: 1240px) {
  .carina-modal__dialog--xl {
    height: 100%;
    border-radius: 0;
  }
}

.carina-modal__dialog--fluid {
  z-index: var(--carina-z-index-modal);

  width: 100%;
  height: 100%;
}

@media (min-width: 640px) {

.carina-modal__dialog--fluid {
    min-width: 512px;
    width: 80vw
}
  }

.carina-modal__dialog--fullscreen {
  z-index: var(--carina-z-index-fullscreen-modal);

  width: 100%;
  height: 100%;
}

.carina-modal__dialog--side {
  position: fixed;
  top: 0;
  bottom: 0;

  width: 480px;
  max-width: 100%;
}

.carina-modal__dialog--start {
  left: 0;
}

[dir='rtl'] .carina-modal__dialog--start {
    right: 0;
    left: auto;
  }

.carina-modal__dialog--end {
  right: 0;
}

[dir='rtl'] .carina-modal__dialog--end {
    right: auto;
    left: 0;
  }

.carina-modal__dialog--bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;

  max-height: 100%;

  border-top-left-radius: var(--carina-border-radius-xl);
  border-top-right-radius: var(--carina-border-radius-xl);
}

.carina-modal__dialog--bottom.carina-modal__dialog--rebrand {
    border-top-left-radius: var(--carina-border-radius-sm);
    border-top-right-radius: var(--carina-border-radius-sm);
  }

/** Scrim */

.carina-modal__scrim {
  width: 100%;
  height: 100%;

  transition-property: opacity;
}

/** Content */

.carina-modal__content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

/** TRANSITIONS **/

/** Durations */

.carina-modal__dialog--productive,
.carina-modal__scrim--productive,
.carina-modal__content--productive {
  transition-duration: var(--carina-transition-duration-200);
}

.carina-modal__dialog--expressive,
.carina-modal__scrim--expressive,
.carina-modal__content--expressive {
  transition-duration: var(--carina-transition-duration-400);
}

.carina-modal__dialog.carina-transition--out {
  --carina-transition-opacity: 0;
}

/* needed to prevent fixed position children from being constrained within the modal container instead of the viewport.
For example, any component that uses a scrim (which is fixed positioned) such as DatePicker in mobile viewport */

.carina-modal__content.carina-transition--enter-done,
.carina-modal__content.carina-transition--appear-done,
.carina-modal__dialog.carina-transition--enter-done,
.carina-modal__dialog.carina-transition--appear-done {
  transform: none;
}

@media not (prefers-reduced-motion) {
  /** Start / End modals */
  [dir='rtl'] .carina-modal__dialog--start.carina-transition--out,
  .carina-modal__dialog--end.carina-transition--out {
    --carina-transition-translate-x: 100%;
  }

  [dir='rtl'] .carina-modal__dialog--end.carina-transition--out,
  .carina-modal__dialog--start.carina-transition--out {
    --carina-transition-translate-x: -100%;
  }

  /** Bottom Modal */
  .carina-modal__dialog--bottom.carina-transition--out {
    --carina-transition-translate-y: 100%;
  }

  /** Centered Modals */
  .carina-modal__dialog--center.carina-transition--out,
  .carina-modal__dialog--fullscreen.carina-transition--out {
    --carina-transition-scale-x: 0.5;
    --carina-transition-scale-y: 0.5;
  }

  /** Don't scale down on exit animation */
  .carina-modal__dialog--center.carina-transition--exit-active,
  .carina-modal__dialog--fullscreen.carina-transition--exit-active {
    --carina-transition-scale-x: 1;
    --carina-transition-scale-y: 1;
  }
}

/** Scrim */

.carina-modal__scrim.carina-transition--out {
  --carina-transition-opacity: 0;
}

/** Content */

.carina-modal__content--productive {
  transition-delay: var(--carina-transition-delay-200);
}

.carina-modal__content--expressive {
  transition-delay: var(--carina-transition-delay-400);
}

.carina-modal__content.carina-transition--out {
  --carina-transition-opacity: 0;
}

/** REDUCED MOTION **/

@media (prefers-reduced-motion) {
  /** Content */
  .carina-modal__content--productive {
    transition-delay: 0ms;
  }

  .carina-modal__content--expressive {
    transition-delay: 0ms;
  }
}

.carina-color-picker__picker {
  box-sizing: initial;

  width: 200px;
  padding: var(--carina-spacing-2-5) var(--carina-spacing-2-5) 0;
  border-radius: var(--carina-border-radius-sm);

  font-family: var(--carina-font-family-primary);

  background: var(--carina-background-color-popper);
  box-shadow: var(--carina-box-shadow-xl);
}

.carina-color-picker__picker-controls {
  display: flex;
}

.carina-color-picker__picker-sliders {
  flex: 1;
  padding: var(--carina-spacing-1) 0;
}

.carina-color-picker__picker-color {
  position: relative;

  width: 1.5rem;
  height: 1.5rem;
  margin: var(--carina-spacing-1) 0 0 var(--carina-spacing-1);
  border-radius: calc(1.5 * var(--carina-border-radius-xs));
}

.carina-color-picker__picker-active-color {
  position: absolute;

  border-radius: var(--carina-border-radius-xs);

  background: rgb(
    var(--carina-color-picker-picker-rgb-r)
      var(--carina-color-picker-picker-rgb-g)
      var(--carina-color-picker-picker-rgb-b) /
      var(--carina-color-picker-picker-rgb-a)
  );

  box-shadow: inset var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-0) var(--carina-spacing-px)
      rgb(0 0 0 / calc(var(--carina-opacity-5) + var(--carina-opacity-10))),
    inset var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-1) rgb(0 0 0 / var(--carina-opacity-25));
  inset: var(--carina-spacing-0);
}

.carina-color-picker__picker-hue {
  position: relative;

  box-sizing: content-box;
  height: 0.625rem;

  border-radius: var(--carina-border-radius-xs);

  overflow: hidden;

  box-shadow: inset var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-0) var(--carina-spacing-px)
      rgb(0 0 0 / calc(var(--carina-opacity-5) + var(--carina-opacity-10))),
    inset var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-1) rgb(0 0 0 / var(--carina-opacity-25));
}

.carina-color-picker__picker--disable-alpha.carina-color-picker__picker-hue {
  height: 1.5rem;
}

.carina-color-picker__picker-alpha {
  position: relative;

  box-sizing: content-box;
  height: 0.625rem;
  margin-top: var(--carina-spacing-1);
  border-radius: var(--carina-border-radius-xs);
  overflow: hidden;

  box-shadow: inset var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-0) var(--carina-spacing-px)
      rgb(0 0 0 / calc(var(--carina-opacity-5) + var(--carina-opacity-10))),
    inset var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-1) rgb(0 0 0 / var(--carina-opacity-25));
}

.carina-color-picker__picker-saturation {
  position: relative;

  box-sizing: content-box;

  width: 100%;

  margin: calc(-1 * var(--carina-spacing-px));

  padding-bottom: 75%;

  border: 1px solid rgb(0 0 0 / var(--carina-opacity-25));

  border-radius: var(--carina-border-radius-xs);
  overflow: hidden;
}

.carina-color-picker__picker--sketch-field-container input {
  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-popper);
}

.carina-color-picker__picker--sketch-field-container label {
  color: var(--carina-text-color-base) !important;
}

.carina-color-picker__pointer {
  width: var(--carina-border-width-4);
  height: var(--carina-spacing-2);
  margin-top: var(--carina-spacing-px);
  border-radius: var(--carina-border-width-1);

  background: var(--carina-colors-grayscale-5);
  box-shadow: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-spacing-0-5) rgb(0 0 0 / var(--carina-opacity-60));

  transform: translateX(-2px);
}

.carina-color-picker__pointer--disable-alpha {
  height: 22px;
}

.carina-color-picker__presets-container {
  margin: var(--carina-spacing-0) calc(-1 * var(--carina-spacing-2-5));
  padding: calc(var(--carina-spacing-2-5) / 2) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-2-5);
  border-top: var(--carina-spacing-px) solid var(--carina-border-color-soft);
}

.carina-color-picker__presets-label {
  margin: var(--carina-spacing-0);

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-normal);
}

.carina-color-picker__presets-colors {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  padding-top: calc(var(--carina-spacing-2-5) / 2);
}

.carina-color-picker__presets-swatch {
  width: 16px;
  height: 16px;

  margin: var(--carina-spacing-0) var(--carina-spacing-2-5)
    var(--carina-spacing-2-5) var(--carina-spacing-0);

  border-radius: 3px;

  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
  outline-color: var(--carina-colors-transparent);
}

.carina-color-picker__presets-swatch:focus-within {
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-color-picker__presets-swatch.carina-color-picker__presets-swatch--selected {
  outline-color: #0099e0;
}

.carina-color-picker__presets-swatch.carina-color-picker__presets-swatch--selected:focus-within {
    outline-color: var(--carina-border-color-hard);
  }

@keyframes carina-loading-icon--circle {
  0% {
    transform: rotateZ(var(--carina-rotate-0));
  }

  66% {
    transform: rotateZ(220deg);
  }

  100% {
    transform: rotateZ(var(--carina-rotate-360));
  }
}

@keyframes carina-loading-icon--tail-chase-xs {
  0% {
    stroke-dashoffset: 26;

    transform: rotateZ(var(--carina-rotate-0));
  }

  50% {
    stroke-dashoffset: 6;

    transform: rotateZ(var(--carina-rotate-45));
  }

  100% {
    stroke-dashoffset: 26;

    transform: rotateZ(var(--carina-rotate-360));
  }
}

@keyframes carina-loading-icon--tail-chase-sm {
  0% {
    stroke-dashoffset: 32;

    transform: rotateZ(var(--carina-rotate-0));
  }

  50% {
    stroke-dashoffset: 5;

    transform: rotateZ(var(--carina-rotate-45));
  }

  100% {
    stroke-dashoffset: 32;

    transform: rotateZ(var(--carina-rotate-360));
  }
}

@keyframes carina-loading-icon--tail-chase-md {
  0% {
    stroke-dashoffset: 40;

    transform: rotateZ(var(--carina-rotate-0));
  }

  50% {
    stroke-dashoffset: 3;

    transform: rotateZ(var(--carina-rotate-45));
  }

  100% {
    stroke-dashoffset: 40;

    transform: rotateZ(var(--carina-rotate-360));
  }
}

@keyframes carina-loading-icon--tail-chase-lg {
  0% {
    stroke-dashoffset: 48;

    transform: rotateZ(var(--carina-rotate-0));
  }

  50% {
    stroke-dashoffset: 2;

    transform: rotateZ(var(--carina-rotate-45));
  }

  100% {
    stroke-dashoffset: 48;

    transform: rotateZ(var(--carina-rotate-360));
  }
}

.carina-loading-icon {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: visible;

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-xl);
  font-family: var(--carina-font-family-primary);

  transform-origin: 50% 50%;
}

.carina-loading-icon__circle {
  margin-bottom: var(--carina-spacing-0-5);
  overflow: visible;

  transform-origin: 50% 50%;

  animation: carina-loading-icon--circle 3770ms linear infinite;

  fill: transparent;
  stroke: var(--carina-background-color-neutral-inactive);
  stroke-dasharray: 400;
  stroke-linecap: round;
  stroke-width: 2px;
}

.carina-loading-icon__circle--xs {
  width: var(--carina-icon-xs);
  height: var(--carina-icon-xs);
}

.carina-loading-icon__circle--sm {
  width: var(--carina-icon-sm);
  height: var(--carina-icon-sm);
}

.carina-loading-icon__circle--md {
  width: var(--carina-icon-md);
  height: var(--carina-icon-md);
}

.carina-loading-icon__circle--lg {
  width: var(--carina-icon-lg);
  height: var(--carina-icon-lg);
}

.carina-loading-icon__tail-chaser {
  transform-origin: 50% 50%;

  fill: transparent;
  stroke-linecap: round;
  stroke-width: 2px;
}

.carina-loading-icon__tail-chaser--xs {
  animation: carina-loading-icon--tail-chase-xs 2450ms linear infinite;
  stroke-dasharray: 33;
}

.carina-loading-icon__tail-chaser--sm {
  animation: carina-loading-icon--tail-chase-sm 2450ms linear infinite;
  stroke-dasharray: 40;
}

.carina-loading-icon__tail-chaser--md {
  animation: carina-loading-icon--tail-chase-md 2450ms linear infinite;
  stroke-dasharray: 50;
}

.carina-loading-icon__tail-chaser--lg {
  animation: carina-loading-icon--tail-chase-lg 2450ms linear infinite;
  stroke-dasharray: 66;
}

.carina-loading-icon__gradient-color-1 {
  stop-color: var(--carina-background-color-tertiary);
}

.carina-loading-icon__gradient-color-2 {
  stop-color: var(--carina-background-color-primary);
}

.carina-loading-icon__gradient-color-3 {
  stop-color: var(--carina-background-color-secondary);
}

.carina-loading-icon__rail {
  stroke: var(--carina-background-color-neutral-inactive);
}

.carina-loading-icon__gradient-color-1--phase1,
.carina-loading-icon__gradient-color-2--phase1,
.carina-loading-icon__gradient-color-3--phase1,
.carina-loading-icon__gradient-color-1--rebrand,
.carina-loading-icon__gradient-color-2--rebrand,
.carina-loading-icon__gradient-color-3--rebrand {
  stop-color: var(--carina-border-color-primary-focus);
}

.carina-tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--carina-spacing-1);
  border-color: var(--carina-tag-border-color, var(--carina-border-color-soft));
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-2xs);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);

  background-color: var(
    --carina-tag-background-color,
    var(--carina-background-color-surface-alt)
  );

  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: background-color, border-color, color, outline-color;
}

.carina-tag--clickable {
  border-color: var(--carina-tag-border-color, var(--carina-border-color-base));

  cursor: pointer;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
}

.carina-tag--clickable:hover {
    background-color: var(
      --carina-tag-background-hover,
      var(--carina-background-color-surface-hover)
    );
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tag--clickable:active {
    background-color: var(
      --carina-tag-background-active,
      var(--carina-background-color-surface-active)
    );
    color: var(--carina-text-color-base);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tag--clickable:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tag--dismissible {
  border-color: var(--carina-tag-border-color, var(--carina-border-color-base));
}

.carina-tag--dismissible.carina-tag--small {
  padding-inline-start: var(--carina-spacing-1);
  padding-inline-end: var(--carina-spacing-0);
}

.carina-tag--small {
  height: 20px;
}

.carina-tag--medium {
  height: 28px;
}

.carina-tag--large {
  height: 32px;
}

.carina-tag--disabled {
  opacity: var(--carina-opacity-40);

  pointer-events: none;
}

.carina-tag--outline.carina-tag--clickable,
.carina-tag--outline.carina-tag--dismissible {
  border-color: var(
    --carina-tag-border-color,
    var(--carina-border-color-primary)
  );

  color: var(--carina-tag-text-inverse, var(--carina-text-color-primary));

  background-color: transparent;
}

.carina-tag--clickable.carina-tag--outline:hover {
    color: var(--carina-tag-text-hover, var(--carina-text-color-on-primary));

    background-color: var(
      --carina-tag-background-hover,
      var(--carina-background-color-primary-hover)
    );
  }

.carina-tag--clickable.carina-tag--outline:active {
    color: var(--carina-tag-text-active, var(--carina-text-color-on-primary));

    background-color: var(
      --carina-tag-background-active,
      var(--carina-background-color-primary-active)
    );
  }

.carina-tag__dismiss-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--carina-spacing-0);
  border-width: 0;
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-base);

  background-color: var(--carina-colors-transparent);
  cursor: pointer;

  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in
  );
  transition-property: background-color, border-color, color, outline-color;

  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-0);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
}

.carina-tag__dismiss-button:hover {
    background-color: var(
      --carina-tag-background-hover,
      var(--carina-background-color-surface-hover)
    );
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tag__dismiss-button:active {
    background-color: var(
      --carina-tag-background-active,
      var(--carina-background-color-surface-active)
    );
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tag__dismiss-button:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tag__dismiss-button--disabled {
  pointer-events: none;
}

.carina-tag__dismiss-button--small {
  width: 18px;
  height: 18px;
  margin-inline-start: -1px;
}

.carina-tag__dismiss-button--medium {
  width: 20px;
  height: 20px;
}

.carina-tag__dismiss-button--large {
  width: 24px;
  height: 24px;
}

.carina-tag__dismiss-button--outline {
  color: var(--carina-tag-text-inverse, var(--carina-text-color-primary));
}

.carina-tag__dismiss-button--outline:hover {
    color: var(--carina-tag-text-hover, var(--carina-text-color-on-primary));

    background-color: var(
      --carina-tag-background-hover,
      var(--carina-background-color-primary-hover)
    );
  }

.carina-tag__dismiss-button--outline:active {
    color: var(--carina-tag-text-active, var(--carina-text-color-on-primary));

    background-color: var(
      --carina-tag-background-active,
      var(--carina-background-color-primary-active)
    );
  }

.carina-tag__indicator {
  width: 10px;
  height: 10px;
  border-radius: var(--carina-border-radius-full);
}

.carina-tag__indicator--brand,
.carina-tag__indicator--primary {
  background-color: var(--carina-background-color-primary);
}

.carina-tag__indicator--accent,
.carina-tag__indicator--secondary {
  background-color: var(--carina-background-color-secondary);
}

.carina-tag__indicator--danger {
  background-color: var(--carina-background-color-danger);
}

.carina-tag__indicator--interactive {
  background-color: var(--carina-background-color-primary);
}

.carina-tag__indicator--success {
  background-color: var(--carina-background-color-success);
}

.carina-tag__indicator--tertiary {
  background-color: var(--carina-background-color-tertiary);
}

.carina-tag__indicator--warning {
  background-color: var(--carina-background-color-warning);
}

.carina-tag__label {
  padding: var(--carina-spacing-0) var(--carina-spacing-2);
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.carina-tag__offset {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: var(--carina-spacing-2);
}

.carina-tag--clickable.carina-tag--outline.carina-tag--color-1,
  .carina-tag--dismissible.carina-tag--outline.carina-tag--color-1 {
    background-color: var(--carina-colors-transparent);
  }

.carina-tag--clickable.carina-tag--color-1,
  .carina-tag--dismissible.carina-tag--color-1 {
    border-color: var(--carina-colors-accessory-0-20);

    color: var(--carina-text-color-base);

    background-color: var(--carina-colors-accessory-0-20);
  }

.carina-tag--clickable.carina-tag--color-1,
  .carina-tag--color-1 .carina-tag__dismiss-button {
    color: var(--carina-text-color-base);
  }

.carina-tag--clickable.carina-tag--color-1:hover,
    .carina-tag--clickable.carina-tag--color-1:active,
    .carina-tag--color-1 .carina-tag__dismiss-button:hover,
    .carina-tag--color-1 .carina-tag__dismiss-button:active {
      border-color: var(--carina-colors-accessory-0-30);

      color: var(--carina-text-color-base);

      background-color: var(--carina-colors-accessory-0-30);
    }

.carina-tag--clickable.carina-tag--outline.carina-tag--color-2,
  .carina-tag--dismissible.carina-tag--outline.carina-tag--color-2 {
    background-color: var(--carina-colors-transparent);
  }

.carina-tag--clickable.carina-tag--color-2,
  .carina-tag--dismissible.carina-tag--color-2 {
    border-color: var(--carina-colors-accessory-1-20);

    color: var(--carina-text-color-base);

    background-color: var(--carina-colors-accessory-1-20);
  }

.carina-tag--clickable.carina-tag--color-2,
  .carina-tag--color-2 .carina-tag__dismiss-button {
    color: var(--carina-text-color-base);
  }

.carina-tag--clickable.carina-tag--color-2:hover,
    .carina-tag--clickable.carina-tag--color-2:active,
    .carina-tag--color-2 .carina-tag__dismiss-button:hover,
    .carina-tag--color-2 .carina-tag__dismiss-button:active {
      border-color: var(--carina-colors-accessory-1-30);

      color: var(--carina-text-color-base);

      background-color: var(--carina-colors-accessory-1-30);
    }

.carina-tag--clickable.carina-tag--outline.carina-tag--color-3,
  .carina-tag--dismissible.carina-tag--outline.carina-tag--color-3 {
    background-color: var(--carina-colors-transparent);
  }

.carina-tag--clickable.carina-tag--color-3,
  .carina-tag--dismissible.carina-tag--color-3 {
    border-color: var(--carina-colors-accessory-2-20);

    color: var(--carina-text-color-base);

    background-color: var(--carina-colors-accessory-2-20);
  }

.carina-tag--clickable.carina-tag--color-3,
  .carina-tag--color-3 .carina-tag__dismiss-button {
    color: var(--carina-text-color-base);
  }

.carina-tag--clickable.carina-tag--color-3:hover,
    .carina-tag--clickable.carina-tag--color-3:active,
    .carina-tag--color-3 .carina-tag__dismiss-button:hover,
    .carina-tag--color-3 .carina-tag__dismiss-button:active {
      border-color: var(--carina-colors-accessory-2-30);

      color: var(--carina-text-color-base);

      background-color: var(--carina-colors-accessory-2-30);
    }

.carina-tag--clickable.carina-tag--outline.carina-tag--color-4,
  .carina-tag--dismissible.carina-tag--outline.carina-tag--color-4 {
    background-color: var(--carina-colors-transparent);
  }

.carina-tag--clickable.carina-tag--color-4,
  .carina-tag--dismissible.carina-tag--color-4 {
    border-color: var(--carina-colors-accessory-3-20);

    color: var(--carina-text-color-base);

    background-color: var(--carina-colors-accessory-3-20);
  }

.carina-tag--clickable.carina-tag--color-4,
  .carina-tag--color-4 .carina-tag__dismiss-button {
    color: var(--carina-text-color-base);
  }

.carina-tag--clickable.carina-tag--color-4:hover,
    .carina-tag--clickable.carina-tag--color-4:active,
    .carina-tag--color-4 .carina-tag__dismiss-button:hover,
    .carina-tag--color-4 .carina-tag__dismiss-button:active {
      border-color: var(--carina-colors-accessory-3-30);

      color: var(--carina-text-color-base);

      background-color: var(--carina-colors-accessory-3-30);
    }

.carina-tag--clickable.carina-tag--outline.carina-tag--color-5,
  .carina-tag--dismissible.carina-tag--outline.carina-tag--color-5 {
    background-color: var(--carina-colors-transparent);
  }

.carina-tag--clickable.carina-tag--color-5,
  .carina-tag--dismissible.carina-tag--color-5 {
    border-color: var(--carina-colors-accessory-4-20);

    color: var(--carina-text-color-base);

    background-color: var(--carina-colors-accessory-4-20);
  }

.carina-tag--clickable.carina-tag--color-5,
  .carina-tag--color-5 .carina-tag__dismiss-button {
    color: var(--carina-text-color-base);
  }

.carina-tag--clickable.carina-tag--color-5:hover,
    .carina-tag--clickable.carina-tag--color-5:active,
    .carina-tag--color-5 .carina-tag__dismiss-button:hover,
    .carina-tag--color-5 .carina-tag__dismiss-button:active {
      border-color: var(--carina-colors-accessory-4-30);

      color: var(--carina-text-color-base);

      background-color: var(--carina-colors-accessory-4-30);
    }

.carina-multi-select__filter-area {
  padding: var(--carina-spacing-4);
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);
}

.carina-multi-select__filter-area :where(.carina-textbox-icon) {
    cursor: text;
    pointer-events: none;
  }

.carina-multi-select__filter-area-button {
  box-sizing: border-box;
  border: var(--carina-border-width-2) solid var(--carina-colors-transparent);

  color: var(--carina-text-color-primary);
  font-size: var(--carina-font-size-body-xs);
  font-family: var(--carina-font-family-primary);
  line-height: inherit;

  background-color: var(--carina-colors-transparent);
  cursor: pointer;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  padding-inline-start: var(--carina-spacing-2-5);
  padding-inline-end: var(--carina-spacing-2-5);

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-0);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, -webkit-text-decoration;
  transition-property: outline-color, text-decoration;
  transition-property: outline-color, text-decoration, -webkit-text-decoration;
}

.carina-multi-select__filter-area-button:hover {
    text-decoration: underline;
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-multi-select__filter-area-button:focus,
  .carina-multi-select__filter-area-button:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    border-radius: var(--carina-border-radius-md);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-popper--rebrand .carina-multi-select__filter-area-button:focus, .carina-popper--rebrand .carina-multi-select__filter-area-button:focus-visible {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-multi-select__filter-area-button-container {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding-top: var(--carina-spacing-4);

  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-xs);
  font-family: var(--carina-font-family-primary);
  margin-inline-start: calc(-1 * var(--carina-spacing-2-5));
  margin-inline-end: calc(-1 * var(--carina-spacing-2-5));
}

.carina-multi-select__item-renderer {
  position: relative;
  left: var(--carina-spacing-2);

  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--carina-spacing-0-5) var(--carina-spacing-2);
  border: 0;
  border-radius: var(--carina-border-radius-md);

  color: var(--carina-text-color-base);
}

.carina-popper--rebrand .carina-multi-select__item-renderer {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-multi-select__item-renderer{
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  line-height: inherit;

  background-color: var(--carina-background-color-popper);
  outline: none;
  cursor: pointer;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-multi-select__item-renderer:hover {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-multi-select__item-renderer:active {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-selected);
  }

.carina-multi-select__item-renderer--selected {
  border: 0;

  color: var(--carina-text-color-base);
}

.carina-multi-select__item-renderer--selected:hover {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-multi-select__item-renderer--heading {
  padding: var(--carina-spacing-2);

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-body-2xs);
  text-transform: uppercase;

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
  pointer-events: none;
}

.carina-multi-select__item-renderer--heading--typography-updates {
  font-weight: var(--carina-font-weight-display);
}

.carina-multi-select__item-renderer--keyboard-focus {
  background-color: var(--carina-background-color-surface-hover);
  box-shadow: inset 0 0 0 var(--carina-border-width-2)
    var(--carina-border-color-base);
}

.carina-multi-select__item-renderer--disabled {
  color: var(--carina-text-color-disabled);

  pointer-events: none;
}

.carina-multi-select__item-renderer-icon-space {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  height: 16px;

  pointer-events: none;
}

.carina-multi-select__item-renderer-highlight-label {
  flex-grow: 0;
  flex-shrink: 0;

  color: var(--carina-background-color-primary);
  font-weight: var(--carina-font-weight-display);
  letter-spacing: -0.3px;
}

.carina-multi-select__item-renderer-highlight-label--typography-updates {
  font-weight: var(--carina-font-weight-display);
}

.carina-multi-select__item-renderer-highlight-label--focus {
  color: var(--carina-background-color-primary);
}

.carina-multi-select__item-renderer-highlight-label--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-multi-select__item-renderer-label-container {
  width: 100%;
  overflow: hidden;

  font-size: var(--carina-font-size-body-sm);
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;

  background-color: var(--carina-colors-transparent);

  pointer-events: none;
  padding-inline-start: var(--carina-spacing-2);
  padding-inline-end: var(--carina-spacing-2);
}

[dir='rtl'] .carina-multi-select__item-renderer-label-container {
    text-align: right;
  }

.carina-multi-select__item-renderer-label-container--no-match-message {
  text-overflow: unset;
  white-space: normal;
}

.carina-multi-select__item-renderer--no-match-message {
  display: flex;
  align-items: flex-start;
}

.carina-multi-select__selected-indicator {
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-color: var(--carina-border-color-base);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-sm);
}

.carina-popper--rebrand .carina-multi-select__selected-indicator,
  .carina-combobox__list__option--rebrand .carina-multi-select__selected-indicator {
    border-radius: var(--carina-border-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

.carina-multi-select__selected-indicator--disabled {
  border-width: var(--carina-border-width-0);

  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-multi-select__selected-indicator--selected {
  border-color: var(--carina-colors-transparent);

  background-color: var(--carina-background-color-primary);
}

.carina-multi-select__selected-indicator--selected--disabled {
  border-width: var(--carina-border-width-0);

  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-multi-select__selected-indicator-check {
  color: var(--carina-text-color-on-primary);
}

.carina-multi-select__selected-indicator--disabled .carina-multi-select__selected-indicator-check,
.carina-multi-select__selected-indicator--selected--disabled .carina-multi-select__selected-indicator-check {
  color: var(--carina-text-color-soft);
}

.carina-multi-select__popper {
  border-radius: var(--carina-border-radius-xl);
}

.carina-multi-select__pseudo-focus {
  width: 300px;
  min-width: 296px;
  /* stylelint-disable-next-line unit-allowed-list */
  max-width: 100vw;
  height: 400px;
  max-height: calc(100vh - 10px);
  border-radius: var(--carina-border-radius-xl);
  overflow: hidden;

  background-color: var(--carina-background-color-popper);
}

.carina-multi-select .carina-popper {
    border-radius: var(--carina-border-radius-xl);
  }

.carina-multi-select--rebrand .carina-multi-select__popper,
  .carina-multi-select--rebrand .carina-multi-select__pseudo-focus {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-multi-select--rebrand .carina-popper {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-pseudo-focus {
  display: flex;
  flex-direction: column;
  width: 300px;
  min-width: 296px;
  /* stylelint-disable-next-line unit-allowed-list */
  max-width: 100vw;
  height: 400px;
  max-height: calc(100vh - 10px);
  border-radius: var(--carina-border-radius-xl);
  overflow: hidden;

  background-color: var(--carina-background-color-popper);

  outline: none;
}

.carina-popper--rebrand .carina-pseudo-focus {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-pseudo-focus__auto-sizer-inner-element {
  padding-top: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);
}

.carina-pseudo-focus__auto-sizer-container {
  height: 100%;
}

/* ** Combobox ** */

/* Elements */

/* States */

/* Variants */

/* -- Elements -- */

.carina-combobox {
  position: relative;

  box-sizing: border-box;
  width: 100%;

  font-size: var(--carina-font-size-body-md);
  line-height: var(--carina-line-height-normal);

  cursor: text;
}

.carina-combobox__input {
  display: flex;
  align-items: flex-start;
  min-height: 40px;
  border-radius: var(--carina-border-radius-md);

  color: var(--carina-text-color-base);
  background-color: transparent;
}

.carina-combobox--rebrand .carina-combobox__input {
  border-radius: var(--carina-border-radius-sm);
}

.carina-combobox__input--outline {
  margin: var(--carina-spacing-2-5) 0 0;
}

.carina-combobox__input--outline,
.carina-combobox__input--underline {
  min-height: 42px;
}

.carina-combobox__input--grid,
.carina-combobox__input--outline,
.carina-combobox__input--underline {
  background-color: transparent;
}

.carina-combobox__input__element {
  flex: 1 0 auto;
  width: 80px; /* minWidth since flex */
  height: 24px;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  border: var(--carina-border-width-0) none;

  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-md);
  font-family: var(--carina-font-family-primary);

  background: var(--carina-colors-transparent);

  outline: none;
}

.carina-combobox__input__element::-moz-placeholder {
    color: var(--carina-text-color-soft);
  }

.carina-combobox__input__element::placeholder {
    color: var(--carina-text-color-soft);
  }

.carina-combobox__input__multiselect {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - var(--carina-spacing-12));
  padding-top: var(--carina-spacing-2);
  padding-inline-end: var(--carina-spacing-px);

  -moz-column-gap: var(--carina-spacing-2);

       column-gap: var(--carina-spacing-2);

  padding-bottom: var(--carina-spacing-2);
  padding-inline-start: var(--carina-spacing-4);
}

.carina-combobox:has(.carina-combobox__input__buttongroup__item)
  .carina-combobox__input__element {
  padding-inline-end: var(--carina-spacing-8);
}

.carina-combobox__input__multiselect__option {
  height: 24px;
}

.carina-combobox__input__multiselect__option__tag {
  display: flex;
  align-items: center;
}

.carina-combobox__input__multiselect__option__input {
  display: flex;
  flex: 1 0 auto;
  width: 80px; /* minWidth since flex */
  padding-inline-end: var(--carina-spacing-3);
  padding-inline-start: var(--carina-spacing-0);
}

.carina-combobox__input__multiselect__option__placeholder {
  position: relative;
  top: 1px;

  display: flex;
  flex: 1 0 auto;
  align-items: center;
  width: 80px; /* minWidth since flex */
  padding-inline-end: var(--carina-spacing-3);

  overflow: hidden;

  color: var(--carina-text-color-soft);
  white-space: nowrap;
  text-overflow: ellipsis;

  pointer-events: none;
}

.carina-combobox__input__button-group {
  position: absolute;
  inset-inline-end: var(--carina-spacing-1);

  display: flex;
  align-items: center;

  padding-top: var(--carina-spacing-0-5);
  padding-inline-start: var(--carina-spacing-2);
  padding-inline-end: var(--carina-spacing-2);
}

.carina-combobox__input__button-group--grid {
  transform: translateY(var(--carina-spacing-1-5));
}

.carina-combobox__input__button-group--outline,
.carina-combobox__input__button-group--underline {
  padding-top: calc(var(--carina-spacing-0-5) + var(--carina-spacing-px));
}

.carina-combobox--grid .carina-combobox__input__button-group__item > .carina-button--icon-only {
    padding: var(--carina-spacing-0);
    min-height: unset;
    width: 24px;
    height: 24px;
    margin-inline-end: var(--carina-spacing-2);
  }

.carina-combobox__input--read-only {
  color: var(--carina-text-color-base);
  border-color: var(--carina-border-color-soft);
  background-color: var(--carina-background-color-surface-alt);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.carina-combobox__input--read-only:focus {
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-combobox__input--read-only:hover {
    cursor: default;
  }

.carina-combobox__input--read-only .carina-button {
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
  }

.carina-combobox__input--read-only .carina-button:hover {
      cursor: default;
      background-color: var(--carina-colors-transparent);
    }

.carina-combobox__input--read-only .carina-combobox__input__element {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.carina-combobox__input--read-only .carina-combobox__input__element:hover {
      cursor: default;
    }

.carina-combobox--grid > .carina-combobox__input--read-only,
.carina-combobox--underline > .carina-combobox__input--read-only {
  border-radius: var(--carina-border-radius-none);
}

.carina-combobox__input__loader {
  position: relative;
  top: 1px; /* optically adjust to align with icons */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-end: var(--carina-spacing-0-5);
  margin-inline-start: var(--carina-spacing-0-5);
}

.carina-combobox__virtualized__list__option {
  margin-inline-start: var(--carina-spacing-2);
  margin-inline-end: var(--carina-spacing-2);

  width: calc(100% - 16px);
}

/* -- States -- */

.carina-combobox--focus .carina-combobox__input__element,
  .carina-combobox--focus .carina-combobox__input__multiselect__option__input {
    flex: 1 0 auto;
    width: 80px; /* minWidth since flex */
  }

.carina-combobox--empty .carina-combobox__input__element,
  .carina-combobox--empty .carina-combobox__input__multiselect__option__input {
    flex: 0 0 auto;
    width: var(--carina-spacing-px);
  }

.carina-combobox--error {
  /* Intentionally left empty for overrides */
}

.carina-combobox--disabled {
  border-color: var(--carina-border-color-soft);

  color: var(--carina-text-color-disabled);

  cursor: default;
}

.carina-combobox--disabled .carina-combobox__input__element {
    color: var(--carina-text-color-disabled);
    -webkit-text-fill-color: var(--carina-text-color-disabled);

    cursor: default;
  }

.carina-combobox--disabled .carina-combobox__input__button-group__item button {
    cursor: default;
  }

.carina-combobox--disabled .carina-combobox__input__button {
    color: var(--carina-text-color-disabled);

    cursor: default;
  }

.carina-combobox--disabled .carina-combobox__input__button svg,
  .carina-combobox--disabled .carina-combobox__input__button svg path,
  .carina-combobox--disabled .carina-combobox__input__button svg group {
    fill: currentcolor;
  }

.carina-combobox--disabled .carina-combobox__input__multiselect__option__placeholder {
    color: color-mix(
      in srgb,
      var(--carina-text-color-disabled) calc(var(--carina-opacity-40) * 100%),
      transparent
    );
  }

.carina-combobox__input__multiselect__option:not(
    .carina-combobox__input__multiselect__option__input
  ):not(.carina-combobox__input__multiselect__option__placeholder)
  + .carina-combobox__input__multiselect__option__input,
.carina-combobox__input__multiselect__option:not(
    .carina-combobox__input__multiselect__option__input
  ):not(.carina-combobox__input__multiselect__option__placeholder)
  + .carina-combobox__input__multiselect__option__placeholder {
  padding-inline-start: var(--carina-spacing-0-5);
  padding-inline-end: var(--carina-spacing-0-5);
}

/* Default */

.carina-combobox--default.carina-combobox--focus .carina-input-fieldset {
      outline-color: var(--carina-border-color-primary-focus);
    }

.carina-combobox--default.carina-combobox--focus.carina-combobox--error .carina-input-fieldset {
      outline-color: var(--carina-border-color-danger-focus);
    }

/* Grid */

.carina-combobox--grid.carina-combobox--focus .carina-input-fieldset-outer {
      bottom: -3px;
      border-color: var(--carina-border-color-primary-focus);
    }

.carina-combobox--grid.carina-combobox--focus.carina-combobox--error .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-danger-focus);
    }

.carina-combobox--grid .carina-combobox__input__multiselect {
    padding-top: var(--carina-spacing-0);
    padding-bottom: var(--carina-spacing-0);
    padding-inline-start: var(--carina-spacing-1);
  }

.carina-combobox--grid .carina-combobox__input__multiselect__option {
    padding-top: var(--carina-spacing-0);
    padding-bottom: var(--carina-spacing-0);
  }

.carina-combobox--grid .carina-combobox__input {
    min-height: 24px;
    align-items: flex-end;
  }

.carina-combobox--grid .carina-combobox__input__button-group {
    padding-top: var(--carina-spacing-0);
    padding-inline-end: var(--carina-spacing-0);

    padding-bottom: var(--carina-spacing-0);
  }

.carina-combobox--outline.carina-combobox--focus .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-primary-focus);
    }

.carina-combobox--outline.carina-combobox--focus.carina-combobox--error .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-danger-focus);
    }

.carina-combobox--underline.carina-combobox--focus .carina-input-fieldset-outer {
      bottom: -3px;
      border-color: var(--carina-border-color-primary-focus);
    }

.carina-combobox--underline.carina-combobox--focus.carina-combobox--error .carina-input-fieldset-outer {
      border-color: var(--carina-border-color-danger-focus);
    }

.carina-combobox__popover {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
}

.carina-combobox__popover * {
    box-sizing: border-box;
  }

.carina-combobox__popover .carina-combobox__scrollview {
    padding: var(--carina-spacing-2);
    overflow-y: auto;
  }

.carina-combobox__popover .carina-combobox__list__option__text {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

.carina-combobox__popover .carina-combobox__list__option__check-container {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Reserve the same icon-sized footprint regardless of which glyph renders
     * inside (legacy 16x16 carina-glyph vs the 11x8 rebrand check). Without
     * this the smaller rebrand glyph crowds the right edge of the option. */
    width: var(--carina-icon-xs);
    height: var(--carina-icon-xs);

    /* The parent option-text row is taller than icon-xs; align-self keeps the
     * fixed-size container vertically centered instead of anchoring to the
     * default flex-start when the parent's `stretch` falls back. */
    align-self: center;

    visibility: hidden;
  }

.carina-combobox__popover .carina-combobox__list__option__check-icon {
    color: var(--carina-text-color-base);
  }

.carina-combobox__popover .carina-combobox__list {
    margin: var(--carina-spacing-0);
    padding: var(--carina-spacing-0);

    line-height: var(--carina-line-height-tight);

    list-style-type: none;
  }

.carina-combobox__popover .carina-combobox__list__subtext {
      color: var(--carina-text-color-soft);
      font-size: var(--carina-font-size-body-sm);
    }

.carina-combobox__popover .carina-combobox__list__option {
      margin-top: var(--carina-spacing-0);
      margin-bottom: var(--carina-spacing-0);
      line-height: var(--carina-line-height-normal);
      padding: var(--carina-spacing-2);
      font-size: var(--carina-font-size-body-sm);

      border-radius: var(--carina-border-radius-md);

      color: var(--carina-text-color-base);

      transition-timing-function: var(
        --carina-transition-timing-function-expressive-ease-in-out
      );

      transition-duration: var(--carina-transition-duration-100);

      transition-property: box-shadow;
    }

.carina-combobox__popover .carina-combobox__list__option:hover {
        background-color: var(--carina-background-color-surface-hover);
        cursor: pointer;
      }

.carina-combobox__popover .carina-combobox__list__option:active {
        color: var(--carina-text-color-base);

        background-color: var(--carina-background-color-surface-active);
      }

.carina-combobox__popover .carina-combobox__list__option--selected,
      .carina-combobox__popover .carina-combobox__list__option--selected:hover,
      .carina-combobox__popover .carina-combobox__list__option--selected --focus {
        color: var(--carina-text-color-base);
        /* bg-primary-pale-active so the selected state stays visible against the popper bg in
           dark mode (bg-surface-selected resolves to surface-70 = bg-popper in dark, blending
           in). Matches Magazine Option's selected state. */
        background-color: var(--carina-background-color-primary-pale-active);
      }

.carina-combobox__popover .carina-combobox__list__option--selected .carina-combobox__list__subtext, .carina-combobox__popover .carina-combobox__list__option--selected:hover .carina-combobox__list__subtext, .carina-combobox__popover .carina-combobox__list__option--selected --focus .carina-combobox__list__subtext {
          color: var(--carina-text-color-base);
        }

.carina-combobox__popover .carina-combobox__list__option--selected .carina-combobox__list__option__check-icon, .carina-combobox__popover .carina-combobox__list__option--selected:hover .carina-combobox__list__option__check-icon, .carina-combobox__popover .carina-combobox__list__option--selected --focus .carina-combobox__list__option__check-icon {
          visibility: visible;
        }

/* Keyboard nav focus ring — Combobox uses aria-activedescendant so DOM focus stays on
         the input; the option element itself never receives :focus-visible. The --focus class
         is the only signal we have, so the ring is applied directly to that class. */

.carina-combobox__popover .carina-combobox__list__option--focus {
        box-shadow: var(--carina-ring-base) inset;
      }

.carina-combobox__popover .carina-combobox__list__option--focus:not(.carina-combobox__popover .carina-combobox__list__option--selected) {
        background-color: var(--carina-background-color-surface-hover);
      }

.carina-combobox__popover .carina-combobox__list__option--disabled {
        color: var(--carina-text-color-disabled);

        background-color: var(--carina-background-color-surface);
      }

.carina-combobox__popover .carina-combobox__list__option--disabled.carina-combobox__popover .carina-combobox__list__option:hover {
        background-color: var(--carina-background-color-surface);
      }

.carina-combobox__popover .carina-combobox__list__option--disabled > .carina-combobox__list__subtext {
        color: var(--carina-text-color-disabled);
      }

.carina-combobox__popover .carina-combobox__list__option--disabled:hover {
        cursor: default;
      }

.carina-combobox__popover .carina-combobox__list__option__create {
        color: var(--carina-text-color-primary);
      }

.carina-combobox__popover .carina-combobox__list__option--rebrand {
        border-radius: var(--carina-border-radius-sm);
      }

.carina-combobox__popover .carina-combobox__list__heading {
      margin-top: var(--carina-spacing-1);
      margin-bottom: var(--carina-spacing-0-5);
      padding-top: var(--carina-spacing-1);
      padding-inline-start: var(--carina-spacing-2);

      padding-bottom: var(--carina-spacing-1);
      padding-inline-end: var(--carina-spacing-2);

      color: var(--carina-text-color-soft);
      font-weight: var(--carina-font-weight-body);
      font-size: var(--carina-font-size-body-2xs);
      font-family: var(--carina-font-family-primary);
      line-height: var(--carina-line-height-tight);
      text-transform: uppercase;
    }

.carina-combobox__popover .carina-combobox__list__divider {
      margin-top: var(--carina-spacing-1);
      margin-bottom: var(--carina-spacing-1);
      border: var(--carina-border-width-0) none;
      border-top: var(--carina-border-width-1) solid;
      border-top-color: var(--carina-border-color-soft);
    }

.carina-combobox__popover .carina-combobox__list--empty {
    padding-top: var(--carina-spacing-2);
    padding-inline-end: var(--carina-spacing-4);

    padding-bottom: var(--carina-spacing-2);
    padding-inline-start: var(--carina-spacing-4);

    color: var(--carina-text-color-soft);
    font-size: var(--carina-font-size-body-sm);
    font-style: italic;
  }

.carina-combobox > .carina-comboboxinput-input-fieldset {
  height: calc(var(--carina-combobox-fieldset-height) + 10px);
}

.carina-combobox > .carina-input-fieldset-outer {
  height: calc(var(--carina-combobox-fieldset-height) + 16px);
}

.carina-comboboxinput-input-fieldset.carina-comboboxinput-input-fieldset--default {
  height: var(--carina-combobox-fieldset-height);
  bottom: 0px;
}

.carina-comboboxinput-input-fieldset.carina-comboboxinput-input-fieldset--grid {
  height: 24px;
  top: unset;
  bottom: 0;
}

.carina-comboboxinput-input-fieldset--default.carina-comboboxinput-input-fieldset--label {
  top: 15px;
}

.carina-combobox-selected-footer__panel {
    margin-top: var(--carina-spacing-3);
    padding: var(--carina-spacing-3);
    border: var(--carina-border-width-1) solid
      var(--carina-colors-neutral-border);
    border-radius: var(--carina-border-radius-md);
    background-color: var(--carina-colors-neutral-background-subtle);
  }

.carina-combobox-selected-footer--rebrand .carina-combobox-selected-footer__panel {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-combobox-selected-footer__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--carina-spacing-2);
  }

.carina-combobox-selected-footer__title {
    font-weight: var(--carina-font-weight-medium);
    font-size: var(--carina-font-size-m);
  }

.carina-combobox-selected-footer__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--carina-spacing-2);
  }

.carina-combobox-select-option__container {
  display: flex;
  align-items: center;
  gap: var(--carina-spacing-2);
  width: 100%;
}

.carina-combobox-select-option__label-content {
  flex: 1;
  min-width: 0;
}

.carina-date-picker-modal {
  width: auto;
}

.carina-date-picker-modal__buttons {
  display: inline-flex;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-4);
}

.carina-date-picker-modal__buttons button:first-of-type {
    margin-inline-end: var(--carina-spacing-4);
  }

.carina-date-picker-popper {
  background-color: var(--carina-background-color-popper);
  color: var(--carina-text-color-body, var(--carina-text-color-base));
  box-shadow: var(--carina-box-shadow-lg);
}

.carina-date-picker-toggle-button {
  position: absolute;
  inset-inline-end: var(--carina-spacing-0);
  top: 50%;

  transform: translate(var(--carina-spacing-1-5), -50%);
}

.carina-date-picker-toggle-button .carina-button--disabled {
    color: var(--carina-text-color-disabled);
    opacity: unset;
  }

.carina-date-picker-toggle-button.carina-date-picker-toggle-button--outline,
.carina-date-picker-toggle-button.carina-date-picker-toggle-button--underline {
  transform: translate(
    var(--carina-spacing-1-5),
    calc(-50% - var(--carina-spacing-px))
  );
}

.carina-textbox-icon--grid > .carina-date-picker-toggle-button {
  transform: translateY(-50%);
}

.carina-day-picker__nav-button-left {
  position: absolute;
  left: 0;
}

.carina-day-picker__nav-button-right {
  position: absolute;
  right: 0;
}

/* Override absolute positioning of arrows when in dropdown mode */

.carina-day-picker__caption-dropdowns ~ .carina-day-picker__nav-button-left,
.carina-day-picker__caption:has(.carina-day-picker__caption-dropdowns) .carina-day-picker__nav-button-left,
.carina-day-picker__caption-dropdowns ~ .carina-day-picker__nav-button-right,
.carina-day-picker__caption:has(.carina-day-picker__caption-dropdowns) .carina-day-picker__nav-button-right {
  position: relative;
}

.carina-day-picker {
  /* calendar styles copied over from react-day-picker/dist/style.css to correctly scope the variables to the component */
  --rdp-cell-size: 40px;
  --rdp-accent-color: var(--carina-background-color-primary);
  --rdp-background-color: transparent;
  --rdp-accent-color-dark: var(--carina-background-color-primary);
  --rdp-background-color-dark: transparent;
  --rdp-outline: none;
  --rdp-outline-selected: none;

  padding: var(--carina-spacing-4);

  color: var(--carina-text-color-base);
  font-family: var(--carina-font-family-primary);
}

/* Hide elements for devices that are not screen readers */

.carina-day-picker__vhidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Buttons */

.carina-day-picker__button-reset {
  position: relative;

  margin: 0;
  padding: 0;

  color: inherit;
  font: inherit;

  background: none;
  outline: none;
  cursor: default;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-day-picker__button {
  border: 2px solid transparent;
}

.carina-day-picker__button[aria-disabled='true'] {
  opacity: 0.25;

  pointer-events: none;
}

.carina-day-picker__button:not([aria-disabled='true'], .carina-day-picker__day--disabled) {
  cursor: pointer;
}

.carina-day-picker__button:hover:not([aria-disabled='true'], .carina-day-picker__day--disabled) {
  border: var(--carina-border-width-2) solid
    var(--carina-border-color-primary-focus);
  border-radius: var(--carina-border-radius-xl);
}

.carina-day-picker--rebrand .carina-day-picker__button:hover:not([aria-disabled='true'], .carina-day-picker__day--disabled) {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-day-picker__months {
  display: flex;
}

@media (max-width: 639.98px) {

.carina-day-picker__months {
    flex-direction: column
}
  }

.carina-day-picker__month {
  margin: 0 1rem;
}

.carina-day-picker__month .carina-day-picker__caption-start {
  margin-left: 0;
}

.carina-day-picker__month .carina-day-picker__caption-end {
  margin-right: 0;
}

.carina-day-picker__table {
  max-width: calc(var(--rdp-cell-size) * 7);
  margin: 0;
  border-collapse: collapse;
}

.carina-day-picker__with-week-number .carina-day-picker__table {
  max-width: calc(var(--rdp-cell-size) * 8);
  border-collapse: collapse;
}

.carina-day-picker__caption {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;

  text-align: left;
}

.carina-day-picker__multiple-months .carina-day-picker__caption {
  position: relative;

  display: flex;
  min-height: 40px;

  text-align: center;
}

.carina-day-picker__caption-dropdowns {
  position: relative;

  display: inline-flex;
  gap: var(--carina-spacing-2);
  width: 100%;
  padding: 0 0.25rem;
}

.carina-day-picker__caption-label {
  position: relative;
  z-index: calc(var(--carina-z-index-current, 1) + 10);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  border: 2px solid transparent;

  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-lg);
  line-height: var(--carina-line-height-display-sm);
  font-family: inherit;
  white-space: nowrap;
}

.carina-day-picker__nav {
  white-space: nowrap;
}

.carina-day-picker__multiple-months .carina-day-picker__caption-start .carina-day-picker__nav {
  position: absolute;
  top: 50%;
  left: 0;

  transform: translateY(-50%);
}

.carina-day-picker__multiple-months .carina-day-picker__caption-end .carina-day-picker__nav {
  position: absolute;
  top: 50%;
  right: 0;

  transform: translateY(-50%);
}

.carina-day-picker__nav-button {
  display: none;
}

/* ---------- */

/* Dropdowns  */

/* ---------- */

.carina-day-picker__dropdown-year,
.carina-day-picker__dropdown-month {
  position: relative;

  display: inline-flex;
  align-items: center;
}

.carina-day-picker__dropdown-month {
  flex-grow: 1;
}

.carina-day-picker__dropdown-year__popper {
  min-width: 84px;
}

.carina-day-picker__dropdown {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--carina-z-index-current, 1) + 20);

  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;

  font-size: inherit;
  font-family: inherit;
  line-height: inherit;

  background-color: transparent;
  cursor: inherit;
  opacity: 0;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-day-picker__dropdown:focus-visible:not([disabled]) + .carina-day-picker__caption-label {
  outline-color: var(--carina-border-color-primary-focus);
  outline-offset: var(--carina-border-width-0);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
}

.carina-day-picker__dropdown[disabled] {
  color: unset;

  opacity: unset;
}

.carina-day-picker__dropdown:focus:not([disabled]) + .carina-day-picker__caption-label,
.carina-day-picker__dropdown:active:not([disabled]) + .carina-day-picker__caption-label {
  border-radius: 6px;

  background-color: var(--rdp-background-color);
}

.carina-day-picker__dropdown-icon {
  margin: 0 0 0 5px;
}

.carina-day-picker__head {
  border: 0;
}

.carina-day-picker__head-row,
.carina-day-picker__row {
  height: 100%;
}

tbody tr.carina-day-picker__row {
  border-bottom: 0;
}

.carina-day-picker__head-cell {
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  text-align: center;
  text-transform: none;
  vertical-align: middle;
}

.carina-day-picker__tbody {
  border: 0;
}

.carina-day-picker__tfoot {
  margin: 0.5rem;
}

.carina-day-picker__cell {
  width: var(--rdp-cell-size);
  height: 100%;
  height: var(--rdp-cell-size);
  padding: 0;
  position: relative;
  text-align: center;
}

.carina-day-picker__week-number {
  font-size: var(--carina-font-size-body-2xs);
}

.carina-day-picker__week-number,
.carina-day-picker__day {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--rdp-cell-size);
  max-width: var(--rdp-cell-size);
  height: var(--rdp-cell-size);
  margin: 0;
  padding: 1px;
  border: 2px solid transparent;
  border-radius: var(--carina-border-radius-xl);
  overflow: hidden;
}

.carina-day-picker__week-number:focus-visible, .carina-day-picker__day:focus-visible {
    outline-width: 3px;
    outline-style: solid;
    outline-color: var(--carina-text-color-on-primary);
    outline-offset: -6px;
  }

.carina-day-picker__week-number:not(.carina-day-picker__week-number--selected):focus-visible, .carina-day-picker__day:not(.carina-day-picker__day--selected):focus-visible {
    outline-width: 0px;
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-day-picker__week-number--selected:focus-visible, .carina-day-picker__day--selected:focus-visible {
    outline-color: var(--carina-text-color-on-primary);
  }

.carina-day-picker--rebrand .carina-day-picker__week-number,
  .carina-day-picker--rebrand .carina-day-picker__day {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-day-picker__day--today {
  position: relative;
}

.carina-day-picker__day--today:not(.carina-day-picker__day--outside) {
  font-weight: var(--carina-font-weight-display);
}

.carina-day-picker__cell:has(.carina-day-picker__day--today)::after {
  position: absolute;
  top: 75%;
  left: 30%;

  width: 40%;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--carina-border-color-secondary-focus);
  border-radius: var(--carina-border-radius-full);

  content: '';
  pointer-events: none;
}

.carina-day-picker--rebrand .carina-day-picker__cell:has(.carina-day-picker__day--today)::after {
    border-bottom-color: var(--carina-border-color-primary-focus);
  }

.carina-day-picker__cell:has(.carina-day-picker__day--selected.carina-day-picker__day--today)::after {
  border-bottom-color: var(--carina-text-color-on-primary);
}

.carina-day-picker__cell:has(
    .carina-day-picker__day--range-middle.carina-day-picker__day--selected.carina-day-picker__day--today
  )::after {
  border-bottom-color: var(--carina-text-color-on-primary-pale-soft);
}

.carina-day-picker__day--selected {
  border-radius: var(--carina-border-radius-xl);
  border-width: var(--carina-border-width-1);
  border-style: solid;
  border-color: var(--carina-border-color-primary-focus);
}

.carina-day-picker--rebrand .carina-day-picker__day--selected {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-day-picker__day--selected,
.carina-day-picker__day--selected:focus,
.carina-day-picker__day--selected:active,
.carina-day-picker__day--selected:hover:not(.carina-day-picker__day--range-middle) {
  border: 1px solid var(--carina-border-color-primary-focus);

  color: var(--carina-text-color-on-primary);

  background-color: var(--rdp-accent-color);
}

.carina-day-picker__day--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-day-picker__day--selected.carina-day-picker__day--disabled {
  color: var(--carina-text-color-on-primary);

  opacity: var(--carina-opacity-40);
}

.carina-day-picker__day--range-start:not(.carina-day-picker__day--range-end) {
  border-start-end-radius: var(--carina-border-radius-none);
  border-end-end-radius: var(--carina-border-radius-none);
}

.carina-day-picker__day--range-start:not(.carina-day-picker__day--range-end):hover {
    border-start-end-radius: var(--carina-border-radius-none);
    border-end-end-radius: var(--carina-border-radius-none);
  }

.carina-day-picker__day--range-end:not(.carina-day-picker__day--range-start) {
  border-start-start-radius: var(--carina-border-radius-none);
  border-end-start-radius: var(--carina-border-radius-none);
}

.carina-day-picker__day--range-end:not(.carina-day-picker__day--range-start):hover {
    border-start-start-radius: var(--carina-border-radius-none);
    border-end-start-radius: var(--carina-border-radius-none);
  }

.carina-day-picker__day--range-middle.carina-day-picker__day--selected {
  border-radius: var(--carina-border-radius-none);
  color: var(--carina-text-color-on-primary-pale);
  background-color: var(--carina-background-color-primary-pale);
  border-color: var(--carina-colors-transparent);
}

.carina-day-picker__day--range-middle.carina-day-picker__day--selected:hover {
    border-radius: var(--carina-border-radius-none);
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-day-picker__day--range-middle.carina-day-picker__day--selected:focus-visible {
    outline-width: var(--carina-border-width-2);
    outline-color: var(--carina-border-color-hard);
    outline-offset: calc(-1 * var(--carina-border-width-2));
  }

.carina-day-picker__day--range-middle.carina-day-picker__day--selected.carina-day-picker__day--disabled {
  opacity: var(--carina-opacity-40);
}

.carina-date-range-picker {
  position: relative;

  box-sizing: border-box;
  width: 100%;

  border: 0;
  margin-inline: var(--carina-spacing-0);
  padding-block: var(--carina-spacing-0);
  padding-inline: var(--carina-spacing-0);
  min-inline-size: var(--carina-spacing-0);
}

.carina-date-range-picker--outline input {
    margin-top: var(--carina-spacing-0);
  }

.carina-date-range-picker--all-labels.carina-date-range-picker--outline {
  margin-top: 29.5px;
}

.carina-date-range-picker--all-labels.carina-date-range-picker--outline legend {
    top: -29.5px;
  }

.carina-date-range-picker--all-labels.carina-date-range-picker--underline {
  margin-top: 29.5px;
}

.carina-date-range-picker--all-labels.carina-date-range-picker--underline legend {
    top: -29.5px;
  }

.carina-date-range-picker--only-top-label.carina-date-range-picker--outline {
  margin-top: 10px;
}

.carina-date-range-picker__textbox-wrapper {
  display: flex;
  align-items: flex-end;
}

.carina-date-range-picker__separator {
  display: flex;
  color: var(--carina-text-color-base);
  align-items: center;
  align-self: flex-end;
  padding-right: var(--carina-spacing-2);
  padding-left: var(--carina-spacing-2);
}

.carina-date-range-picker__separator--disabled,
.carina-date-range-picker__separator--read-only {
  color: var(--carina-text-color-disabled);
}

.carina-date-range-picker__separator--default {
  height: 40px;
}

.carina-date-range-picker__separator--outline {
  height: 42px;
  margin-top: 10px;
}

.carina-date-range-picker__separator--underline {
  height: 42px;
}

.carina-date-range-picker__separator--grid {
  height: 24px;
}

/* stylelint-disable selector-class-pattern */

.block {
  display: block;
}

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

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

@container (max-width: 1535.98px) {
  .\@max-2xl\:block {
    display: block;
  }

  .\@max-2xl\:inline-block {
    display: inline-block;
  }

  .\@max-2xl\:flex {
    display: flex;
  }

  .\@max-2xl\:grid {
    display: grid;
  }

  .\@max-2xl\:hidden {
    display: none;
  }
}

@container (max-width: 1279.98px) {
  .\@max-xl\:block {
    display: block;
  }

  .\@max-xl\:inline-block {
    display: inline-block;
  }

  .\@max-xl\:flex {
    display: flex;
  }

  .\@max-xl\:grid {
    display: grid;
  }

  .\@max-xl\:hidden {
    display: none;
  }
}

@container (max-width: 1023.98px) {
  .\@max-lg\:block {
    display: block;
  }

  .\@max-lg\:inline-block {
    display: inline-block;
  }

  .\@max-lg\:flex {
    display: flex;
  }

  .\@max-lg\:grid {
    display: grid;
  }

  .\@max-lg\:hidden {
    display: none;
  }
}

@container (max-width: 767.98px) {
  .\@max-md\:block {
    display: block;
  }

  .\@max-md\:inline-block {
    display: inline-block;
  }

  .\@max-md\:flex {
    display: flex;
  }

  .\@max-md\:grid {
    display: grid;
  }

  .\@max-md\:hidden {
    display: none;
  }
}

@container (max-width: 639.98px) {
  .\@max-sm\:block {
    display: block;
  }

  .\@max-sm\:inline-block {
    display: inline-block;
  }

  .\@max-sm\:flex {
    display: flex;
  }

  .\@max-sm\:grid {
    display: grid;
  }

  .\@max-sm\:hidden {
    display: none;
  }
}

@container (min-width: 640px) {
  .\@sm\:block {
    display: block;
  }

  .\@sm\:inline-block {
    display: inline-block;
  }

  .\@sm\:flex {
    display: flex;
  }

  .\@sm\:grid {
    display: grid;
  }

  .\@sm\:hidden {
    display: none;
  }
}

@container (min-width: 768px) {
  .\@md\:block {
    display: block;
  }

  .\@md\:inline-block {
    display: inline-block;
  }

  .\@md\:flex {
    display: flex;
  }

  .\@md\:grid {
    display: grid;
  }

  .\@md\:hidden {
    display: none;
  }
}

@container (min-width: 1024px) {
  .\@lg\:block {
    display: block;
  }

  .\@lg\:inline-block {
    display: inline-block;
  }

  .\@lg\:flex {
    display: flex;
  }

  .\@lg\:grid {
    display: grid;
  }

  .\@lg\:hidden {
    display: none;
  }
}

@container (min-width: 1280px) {
  .\@xl\:block {
    display: block;
  }

  .\@xl\:inline-block {
    display: inline-block;
  }

  .\@xl\:flex {
    display: flex;
  }

  .\@xl\:grid {
    display: grid;
  }

  .\@xl\:hidden {
    display: none;
  }
}

@container (min-width: 1536px) {
  .\@2xl\:block {
    display: block;
  }

  .\@2xl\:inline-block {
    display: inline-block;
  }

  .\@2xl\:flex {
    display: flex;
  }

  .\@2xl\:grid {
    display: grid;
  }

  .\@2xl\:hidden {
    display: none;
  }
}

@container (min-width: 640px) and (max-width: 1535.98px) {
  .\@sm\:max-2xl\:block {
    display: block;
  }

  .\@sm\:max-2xl\:inline-block {
    display: inline-block;
  }

  .\@sm\:max-2xl\:flex {
    display: flex;
  }

  .\@sm\:max-2xl\:grid {
    display: grid;
  }

  .\@sm\:max-2xl\:hidden {
    display: none;
  }
}

@container (min-width: 768px) and (max-width: 1535.98px) {
  .\@md\:max-2xl\:block {
    display: block;
  }

  .\@md\:max-2xl\:inline-block {
    display: inline-block;
  }

  .\@md\:max-2xl\:flex {
    display: flex;
  }

  .\@md\:max-2xl\:grid {
    display: grid;
  }

  .\@md\:max-2xl\:hidden {
    display: none;
  }
}

@container (min-width: 1024px) and (max-width: 1535.98px) {
  .\@lg\:max-2xl\:block {
    display: block;
  }

  .\@lg\:max-2xl\:inline-block {
    display: inline-block;
  }

  .\@lg\:max-2xl\:flex {
    display: flex;
  }

  .\@lg\:max-2xl\:grid {
    display: grid;
  }

  .\@lg\:max-2xl\:hidden {
    display: none;
  }
}

@container (min-width: 1280px) and (max-width: 1535.98px) {
  .\@xl\:max-2xl\:block {
    display: block;
  }

  .\@xl\:max-2xl\:inline-block {
    display: inline-block;
  }

  .\@xl\:max-2xl\:flex {
    display: flex;
  }

  .\@xl\:max-2xl\:grid {
    display: grid;
  }

  .\@xl\:max-2xl\:hidden {
    display: none;
  }
}

@container (min-width: 640px) and (max-width: 1279.98px) {
  .\@sm\:max-xl\:block {
    display: block;
  }

  .\@sm\:max-xl\:inline-block {
    display: inline-block;
  }

  .\@sm\:max-xl\:flex {
    display: flex;
  }

  .\@sm\:max-xl\:grid {
    display: grid;
  }

  .\@sm\:max-xl\:hidden {
    display: none;
  }
}

@container (min-width: 768px) and (max-width: 1279.98px) {
  .\@md\:max-xl\:block {
    display: block;
  }

  .\@md\:max-xl\:inline-block {
    display: inline-block;
  }

  .\@md\:max-xl\:flex {
    display: flex;
  }

  .\@md\:max-xl\:grid {
    display: grid;
  }

  .\@md\:max-xl\:hidden {
    display: none;
  }
}

@container (min-width: 1024px) and (max-width: 1279.98px) {
  .\@lg\:max-xl\:block {
    display: block;
  }

  .\@lg\:max-xl\:inline-block {
    display: inline-block;
  }

  .\@lg\:max-xl\:flex {
    display: flex;
  }

  .\@lg\:max-xl\:grid {
    display: grid;
  }

  .\@lg\:max-xl\:hidden {
    display: none;
  }
}

@container (min-width: 640px) and (max-width: 1023.98px) {
  .\@sm\:max-lg\:block {
    display: block;
  }

  .\@sm\:max-lg\:inline-block {
    display: inline-block;
  }

  .\@sm\:max-lg\:flex {
    display: flex;
  }

  .\@sm\:max-lg\:grid {
    display: grid;
  }

  .\@sm\:max-lg\:hidden {
    display: none;
  }
}

@container (min-width: 768px) and (max-width: 1023.98px) {
  .\@md\:max-lg\:block {
    display: block;
  }

  .\@md\:max-lg\:inline-block {
    display: inline-block;
  }

  .\@md\:max-lg\:flex {
    display: flex;
  }

  .\@md\:max-lg\:grid {
    display: grid;
  }

  .\@md\:max-lg\:hidden {
    display: none;
  }
}

@container (min-width: 640px) and (max-width: 767.98px) {
  .\@sm\:max-md\:block {
    display: block;
  }

  .\@sm\:max-md\:inline-block {
    display: inline-block;
  }

  .\@sm\:max-md\:flex {
    display: flex;
  }

  .\@sm\:max-md\:grid {
    display: grid;
  }

  .\@sm\:max-md\:hidden {
    display: none;
  }
}

@media not all and (min-width: 1536px) {
  .max-2xl\:block {
    display: block;
  }

  .max-2xl\:inline-block {
    display: inline-block;
  }

  .max-2xl\:flex {
    display: flex;
  }

  .max-2xl\:grid {
    display: grid;
  }

  .max-2xl\:hidden {
    display: none;
  }
}

@media not all and (min-width: 1280px) {
  .max-xl\:block {
    display: block;
  }

  .max-xl\:inline-block {
    display: inline-block;
  }

  .max-xl\:flex {
    display: flex;
  }

  .max-xl\:grid {
    display: grid;
  }

  .max-xl\:hidden {
    display: none;
  }
}

@media not all and (min-width: 1024px) {
  .max-lg\:block {
    display: block;
  }

  .max-lg\:inline-block {
    display: inline-block;
  }

  .max-lg\:flex {
    display: flex;
  }

  .max-lg\:grid {
    display: grid;
  }

  .max-lg\:hidden {
    display: none;
  }
}

@media not all and (min-width: 768px) {
  .max-md\:block {
    display: block;
  }

  .max-md\:inline-block {
    display: inline-block;
  }

  .max-md\:flex {
    display: flex;
  }

  .max-md\:grid {
    display: grid;
  }

  .max-md\:hidden {
    display: none;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:block {
    display: block;
  }

  .max-sm\:inline-block {
    display: inline-block;
  }

  .max-sm\:flex {
    display: flex;
  }

  .max-sm\:grid {
    display: grid;
  }

  .max-sm\:hidden {
    display: none;
  }
}

@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:grid {
    display: grid;
  }

  .sm\:hidden {
    display: none;
  }

  @media not all and (min-width: 1536px) {
    .sm\:max-2xl\:block {
      display: block;
    }

    .sm\:max-2xl\:inline-block {
      display: inline-block;
    }

    .sm\:max-2xl\:flex {
      display: flex;
    }

    .sm\:max-2xl\:grid {
      display: grid;
    }

    .sm\:max-2xl\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 1280px) {
    .sm\:max-xl\:block {
      display: block;
    }

    .sm\:max-xl\:inline-block {
      display: inline-block;
    }

    .sm\:max-xl\:flex {
      display: flex;
    }

    .sm\:max-xl\:grid {
      display: grid;
    }

    .sm\:max-xl\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 1024px) {
    .sm\:max-lg\:block {
      display: block;
    }

    .sm\:max-lg\:inline-block {
      display: inline-block;
    }

    .sm\:max-lg\:flex {
      display: flex;
    }

    .sm\:max-lg\:grid {
      display: grid;
    }

    .sm\:max-lg\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 768px) {
    .sm\:max-md\:block {
      display: block;
    }

    .sm\:max-md\:inline-block {
      display: inline-block;
    }

    .sm\:max-md\:flex {
      display: flex;
    }

    .sm\:max-md\:grid {
      display: grid;
    }

    .sm\:max-md\:hidden {
      display: none;
    }
  }
}

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

  .md\:inline-block {
    display: inline-block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:hidden {
    display: none;
  }

  @media not all and (min-width: 1536px) {
    .md\:max-2xl\:block {
      display: block;
    }

    .md\:max-2xl\:inline-block {
      display: inline-block;
    }

    .md\:max-2xl\:flex {
      display: flex;
    }

    .md\:max-2xl\:grid {
      display: grid;
    }

    .md\:max-2xl\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 1280px) {
    .md\:max-xl\:block {
      display: block;
    }

    .md\:max-xl\:inline-block {
      display: inline-block;
    }

    .md\:max-xl\:flex {
      display: flex;
    }

    .md\:max-xl\:grid {
      display: grid;
    }

    .md\:max-xl\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 1024px) {
    .md\:max-lg\:block {
      display: block;
    }

    .md\:max-lg\:inline-block {
      display: inline-block;
    }

    .md\:max-lg\:flex {
      display: flex;
    }

    .md\:max-lg\:grid {
      display: grid;
    }

    .md\:max-lg\:hidden {
      display: none;
    }
  }
}

@media (min-width: 1024px) {
  .lg\:block {
    display: block;
  }

  .lg\:inline-block {
    display: inline-block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  @media not all and (min-width: 1536px) {
    .lg\:max-2xl\:block {
      display: block;
    }

    .lg\:max-2xl\:inline-block {
      display: inline-block;
    }

    .lg\:max-2xl\:flex {
      display: flex;
    }

    .lg\:max-2xl\:grid {
      display: grid;
    }

    .lg\:max-2xl\:hidden {
      display: none;
    }
  }

  @media not all and (min-width: 1280px) {
    .lg\:max-xl\:block {
      display: block;
    }

    .lg\:max-xl\:inline-block {
      display: inline-block;
    }

    .lg\:max-xl\:flex {
      display: flex;
    }

    .lg\:max-xl\:grid {
      display: grid;
    }

    .lg\:max-xl\:hidden {
      display: none;
    }
  }
}

@media (min-width: 1280px) {
  .xl\:block {
    display: block;
  }

  .xl\:inline-block {
    display: inline-block;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:grid {
    display: grid;
  }

  .xl\:hidden {
    display: none;
  }

  @media not all and (min-width: 1536px) {
    .xl\:max-2xl\:block {
      display: block;
    }

    .xl\:max-2xl\:inline-block {
      display: inline-block;
    }

    .xl\:max-2xl\:flex {
      display: flex;
    }

    .xl\:max-2xl\:grid {
      display: grid;
    }

    .xl\:max-2xl\:hidden {
      display: none;
    }
  }
}

@media (min-width: 1536px) {
  .\32xl\:block {
    display: block;
  }

  .\32xl\:inline-block {
    display: inline-block;
  }

  .\32xl\:flex {
    display: flex;
  }

  .\32xl\:grid {
    display: grid;
  }

  .\32xl\:hidden {
    display: none;
  }
}

.carina-file-upload__dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--carina-spacing-2);
  border-color: var(--carina-border-color-base);
  border-style: dashed;
  border-width: var(--carina-border-width-2);
  border-radius: var(--carina-border-radius-xl);

  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, border-color;

  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
  outline-color: var(--carina-colors-transparent);
}

.carina-file-upload__dropzone:focus,
  .carina-file-upload__dropzone:focus-within {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

primary .carina-file-upload__dropzone--drag-active {
  border-color: var(--carina-border-color-primary-focus);
}

.carina-file-upload__dropzone--disabled {
  cursor: default;
  border-color: var(--carina-border-color-soft);
}

.carina-file-upload__dropzone--list-first {
  margin-top: var(--carina-spacing-6);
}

.carina-file-upload__dropzone--error {
  border-color: var(--carina-border-color-danger);
}

.carina-file-upload__dropzone--error:focus,
  .carina-file-upload__dropzone--error:focus-within {
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-file-upload__dropzone--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-file-upload {
  position: relative;

  width: 100%;
  max-width: 400px;

  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
}

.carina-file-upload--large {
  max-width: 992px;
}

.carina-file-upload--block {
  max-width: none;
}

.carina-file-upload__drop-area {
  padding: var(--carina-spacing-0) var(--carina-spacing-4);
}

.carina-file-upload__drop-area--large {
  padding-bottom: var(--carina-spacing-8);

  text-align: center;
}

.carina-file-upload__header {
  margin: var(--carina-spacing-6) var(--carina-spacing-0);

  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-size: var(--carina-font-size-display-xs);
}

.carina-file-upload__header--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-file-upload__upload {
  margin: 31px 0;

  color: var(--carina-text-color-primary);
  font-size: var(--carina-font-size-body-sm);
}

.carina-file-upload__upload > * {
    margin-inline-end: var(--carina-spacing-2);
  }

.carina-file-upload__upload > svg {
    position: relative;
    top: var(--carina-spacing-0-5);

    display: inline;

    color: var(--carina-text-color-base);
    vertical-align: unset;
  }

.carina-file-upload__upload--large {
  margin-bottom: var(--carina-spacing-2);

  color: var(--carina-text-color-base);
}

.carina-file-upload__upload--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-file-upload__upload--disabled > svg {
    color: var(--carina-text-color-soft);
  }

.carina-file-upload__upload--large.carina-file-upload__upload--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-file-upload__drop-area-labels-container {
  margin: var(--carina-spacing-2) var(--carina-spacing-0)
    var(--carina-spacing-4);
}

.carina-file-upload__accepted-files {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-2xs);
  padding-bottom: var(--carina-spacing-1);
}

.carina-file-upload__file-limit {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-2xs);
}

.carina-file-upload__button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--carina-spacing-4);
}

.carina-file-upload__action-bar {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  margin-top: var(--carina-spacing-4);

  font-size: var(--carina-font-size-body-sm);
}

.carina-file-upload__action-bar--list-first {
  margin-top: var(--carina-spacing-0);
}

.carina-file-upload__remove-all {
  box-sizing: border-box;
  padding: 0;
  border: 0;

  color: var(--carina-text-color-primary);
  font-family: inherit;
  font-size: var(--carina-font-size-body-2xs);
  line-height: inherit;

  background-color: var(--carina-colors-transparent);
  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );
  transition-property: outline-color, -webkit-text-decoration;
  transition-property: text-decoration, outline-color;
  transition-property: text-decoration, outline-color, -webkit-text-decoration;
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );

  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
  outline-color: var(--carina-colors-transparent);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-file-upload__remove-all:hover {
    text-decoration: underline;
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-file-upload__remove-all:focus,
  .carina-file-upload__remove-all:focus-visible {
    border-radius: var(--carina-border-radius-md);
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-file-upload__file-list {
  max-width: 400px;
  max-height: calc(
    42px * 10 + 8px
  ); /* 32 height, 8 margin, 2 border * 10 items + 8 padding */

  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  padding-top: var(--carina-spacing-2);
  overflow-y: auto;

  list-style: none;
}

.carina-file-upload__file {
  position: relative;

  display: flex;
  align-items: center;
  min-width: 296px;
  height: 42px;
  box-sizing: border-box;
  border-color: var(--carina-border-color-soft);
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-xl);
  border-style: solid;

  color: var(--carina-text-color-primary);
  font-size: var(--carina-font-size-body-sm);
  line-height: 32px;
  padding-inline-start: var(--carina-spacing-3);
  padding-inline-end: var(--carina-spacing-2);
}

.carina-file-upload__file:not(:last-of-type) {
    margin-bottom: var(--carina-spacing-2);
  }

.carina-file-upload__name {
  display: flex;
  flex-grow: 1;
  justify-content: flex-start;
  max-width: 100%;
  overflow: hidden;

  color: var(--carina-text-color-primary);

  font-weight: var(--carina-font-weight-body);

  /* File names should not be flipped for rtl */
  direction: ltr;
  text-align: start;
  text-decoration: none;
}

.carina-file-upload__name-start {
  overflow: hidden;

  white-space: pre;
  text-overflow: ellipsis;
}

.carina-file-upload__name-end {
  white-space: pre;
}

.carina-file-upload--rebrand .carina-file-upload__remove-all:focus,
  .carina-file-upload--rebrand .carina-file-upload__remove-all:focus-visible {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-file-upload--rebrand .carina-file-upload__file {
    border-radius: var(--carina-border-radius-sm);
  }

/* The following variables must be kept in sync with the consts in the ../enums/enums.ts file. */

.carina-file-upload-read-only {
  width: 100%;

  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
  text-align: start;
}

.carina-file-upload-read-only__content {
  position: relative;

  display: flex;
  flex-direction: column;

  font-weight: 300;
}

/* stylelint-disable-next-line at-rule-no-unknown */

.carina-file-upload-read-only__content--1-cols {
    max-width: calc(400px * 1);
  }

.carina-file-upload-read-only__content--2-cols {
    max-width: calc(400px * 2);
  }

.carina-file-upload-read-only__content--3-cols {
    max-width: calc(400px * 3);
  }

.carina-file-upload-read-only__content--4-cols {
    max-width: calc(400px * 4);
  }

.carina-file-upload-read-only__content--5-cols {
    max-width: calc(400px * 5);
  }

.carina-file-upload-read-only__content--6-cols {
    max-width: calc(400px * 6);
  }

.carina-file-upload-read-only__content--7-cols {
    max-width: calc(400px * 7);
  }

.carina-file-upload-read-only__content--8-cols {
    max-width: calc(400px * 8);
  }

.carina-file-upload-read-only__content--9-cols {
    max-width: calc(400px * 9);
  }

.carina-file-upload-read-only__content--10-cols {
    max-width: calc(400px * 10);
  }

.carina-file-upload-read-only__attachment-count {
  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-size: var(--carina-font-size-body-md);
}

.carina-file-upload-read-only__download-all {
  align-self: flex-end;
  box-sizing: border-box;
  padding: var(--carina-spacing-0);
  border: 0;

  color: var(--carina-text-color-primary);
  font-family: inherit;
  font-weight: revert;
  font-size: var(--carina-font-size-body-2xs);
  line-height: revert;

  background-color: transparent;
  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, -webkit-text-decoration;
  transition-property: outline-color, text-decoration;
  transition-property: outline-color, text-decoration, -webkit-text-decoration;

  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
  outline-color: var(--carina-colors-transparent);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-file-upload-read-only__download-all:hover {
    text-decoration: underline;
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-file-upload-read-only__download-all:focus,
  .carina-file-upload-read-only__download-all:focus-visible {
    border-radius: var(--carina-border-radius-md);
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-file-upload-read-only__header {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-3);
}

.carina-file-upload-read-only__show-all {
  align-self: flex-end;
  box-sizing: border-box;

  border: var(--carina-border-width-2) solid var(--carina-colors-transparent);

  color: var(--carina-text-color-primary);
  font-family: inherit;
  font-weight: revert;
  font-size: var(--carina-font-size-body-2xs);
  line-height: revert;

  background-color: transparent;
  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, -webkit-text-decoration;
  transition-property: outline-color, text-decoration;
  transition-property: outline-color, text-decoration, -webkit-text-decoration;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  padding-inline: var(--carina-spacing-2-5);

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
}

.carina-file-upload-read-only__show-all:hover {
    text-decoration: underline;
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-file-upload-read-only__show-all:focus,
  .carina-file-upload-read-only__show-all:focus-visible {
    border-radius: var(--carina-border-radius-md);
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

/* fileList */

.carina-file-upload-read-only__wrapper {
  max-height: calc(6 * (56px + 12px));
}

.carina-file-upload-read-only__file-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100%;
  max-height: calc(6 * (56px + 12px));
}

.carina-file-upload-read-only__wrapper-remaining {
  max-height: none;
}

.carina-file-upload-read-only__file-list-remaining {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100%;
  max-height: none;
}

/* file */

.carina-file-upload-read-only__file-item {
  box-sizing: border-box;
  min-width: 266px;
  max-width: 400px;
  padding-top: var(--carina-spacing-2-5);
  padding-inline-end: var(--carina-spacing-3);

  padding-bottom: 12px;
  padding-inline-start: var(--carina-spacing-0);

  font-family: var(--carina-font-family-primary);
}

/* stylelint-disable-next-line at-rule-no-unknown */

.carina-file-upload-read-only__file-item--1-cols {
    width: calc(100% / 1);
  }

.carina-file-upload-read-only__file-item--2-cols {
    width: calc(100% / 2);
  }

.carina-file-upload-read-only__file-item--3-cols {
    width: calc(100% / 3);
  }

.carina-file-upload-read-only__file-item--4-cols {
    width: calc(100% / 4);
  }

.carina-file-upload-read-only__file-item--5-cols {
    width: calc(100% / 5);
  }

.carina-file-upload-read-only__file-item--6-cols {
    width: calc(100% / 6);
  }

.carina-file-upload-read-only__file-item--7-cols {
    width: calc(100% / 7);
  }

.carina-file-upload-read-only__file-item--8-cols {
    width: calc(100% / 8);
  }

.carina-file-upload-read-only__file-item--9-cols {
    width: calc(100% / 9);
  }

.carina-file-upload-read-only__file-item--10-cols {
    width: calc(100% / 10);
  }

.carina-file-upload-read-only__paper-container {
  position: relative;

  box-sizing: border-box;

  border-color: var(--carina-border-color-soft);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-xl);

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  background-color: var(--carina-background-color-surface);
}

.carina-file-upload-read-only__file-content {
  position: relative;

  display: flex;
  align-items: center;
  box-sizing: border-box;

  height: 56px;
  padding: var(--carina-spacing-2);
}

.carina-file-upload-read-only__thumbnail {
  flex-shrink: 0;
  width: calc(56px - 1rem);
  height: calc(56px - 1rem);
}

.carina-file-upload-read-only__details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  margin-top: calc(-1 * var(--carina-spacing-4));
  padding: var(--carina-spacing-4) var(--carina-spacing-2)
    var(--carina-spacing-0);
  overflow: hidden;
}

.carina-file-upload-read-only__name {
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  margin-bottom: var(--carina-spacing-1);
  overflow: hidden;

  color: var(--carina-text-color-primary);

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);

  /* File names should not be flipped for rtl */
  direction: ltr;
  text-decoration: none;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
}

.carina-file-upload-read-only__name:focus,
  .carina-file-upload-read-only__name:focus-visible {
    border-radius: var(--carina-border-radius-md);
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-file-upload-read-only__name-start {
  overflow: hidden;

  white-space: pre;
  text-overflow: ellipsis;
}

.carina-file-upload-read-only__name-end {
  white-space: pre;
}

.carina-file-upload-read-only__date-and-size {
  display: flex;
  flex-direction: row;
  margin: var(--carina-spacing-0) calc(-1 * var(--carina-spacing-2));
}

/* border-start on second div to put up the separator while also handling the case where we only have date */

.carina-file-upload-read-only__date-and-size div:not(:first-of-type) {
    border-style: solid;
    border-inline-start-width: var(--carina-border-width-1);
    border-inline-start-color: var(--carina-border-color-soft);

    font-weight: var(--carina-font-weight-body);
  }

.carina-file-upload-read-only--rebrand .carina-file-upload-read-only__download-all:focus,
    .carina-file-upload-read-only--rebrand .carina-file-upload-read-only__download-all:focus-visible {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-file-upload-read-only--rebrand .carina-file-upload-read-only__show-all:focus,
    .carina-file-upload-read-only--rebrand .carina-file-upload-read-only__show-all:focus-visible {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-file-upload-read-only--rebrand .carina-file-upload-read-only__paper-container {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-file-upload-read-only--rebrand .carina-file-upload-read-only__name:focus,
    .carina-file-upload-read-only--rebrand .carina-file-upload-read-only__name:focus-visible {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-file-upload-read-only__date {
  padding: var(--carina-spacing-0) var(--carina-spacing-2);

  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-2xs);
}

.carina-file-upload-read-only__size {
  padding: var(--carina-spacing-0) var(--carina-spacing-2);

  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-2xs);
}

.carina-file-upload-read-only__menu:hover {
    background-color: var(--carina-background-color-surface);
  }

/** Container Styles **/

.carina-container {
  box-sizing: border-box;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.\@carina-container {
  container-type: inline-size;
}

.carina-container--normal {
  container-type: normal;
}

.carina-container--size {
  container-type: size;
}

.carina-container--inline-size {
  container-type: inline-size;
}

.carina-container--sm {
    max-width: var(--carina-breakpoint-sm);
  }

@media (min-width: 640px) {
    .carina-container--fixed {
      max-width: var(--carina-breakpoint-sm);
    }
  }

.carina-container--md {
    max-width: var(--carina-breakpoint-md);
  }

@media (min-width: 768px) {
    .carina-container--fixed {
      max-width: var(--carina-breakpoint-md);
    }
  }

.carina-container--lg {
    max-width: var(--carina-breakpoint-lg);
  }

@media (min-width: 1024px) {
    .carina-container--fixed {
      max-width: var(--carina-breakpoint-lg);
    }
  }

.carina-container--xl {
    max-width: var(--carina-breakpoint-xl);
  }

@media (min-width: 1280px) {
    .carina-container--fixed {
      max-width: var(--carina-breakpoint-xl);
    }
  }

.carina-container--2xl {
    max-width: var(--carina-breakpoint-2xl);
  }

@media (min-width: 1536px) {
    .carina-container--fixed {
      max-width: var(--carina-breakpoint-2xl);
    }
  }

@container (min-width: 640px) {
    .\@carina-container--fixed {
      max-width: var(--carina-breakpoint-sm);
    }
  }

@container (min-width: 768px) {
    .\@carina-container--fixed {
      max-width: var(--carina-breakpoint-md);
    }
  }

@container (min-width: 1024px) {
    .\@carina-container--fixed {
      max-width: var(--carina-breakpoint-lg);
    }
  }

@container (min-width: 1280px) {
    .\@carina-container--fixed {
      max-width: var(--carina-breakpoint-xl);
    }
  }

@container (min-width: 1536px) {
    .\@carina-container--fixed {
      max-width: var(--carina-breakpoint-2xl);
    }
  }

/* stylelint-disable at-rule-empty-line-before */

/* stylelint-disable at-rule-no-unknown */

/** Mixins **/

/** Row Styles **/

.carina-row {
  --carina-row-gutter-x: var(--carina-spacing-4);
  --carina-row-gutter-y: var(--carina-spacing-0);

  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--carina-row-gutter-y) * -1);
  margin-inline-start: calc(var(--carina-row-gutter-x) * -0.5);
  margin-inline-end: calc(var(--carina-row-gutter-x) * -0.5);
}

@media (min-width: 1024px) {
  .carina-row {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }
  .carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
}

.carina-row > * {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: var(--carina-row-gutter-y);
  padding-right: calc(var(--carina-row-gutter-x) * 0.5);
  padding-left: calc(var(--carina-row-gutter-x) * 0.5);
}

.carina-column {
  flex: 1 0 0%;
}

.carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

.carina-row--cols-default > * {
    flex: 1 0 0%;
  }

.carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }

.carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }

.carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }

.carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }

.carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }

.carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }

.carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

.carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

.carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

.carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

.carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

.carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }

.carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

.carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }

.carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

.carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }

.carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

.carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }

.carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

.carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }

.carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

.carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }

.carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

.carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }

@media (min-width: 640px) {
  .sm\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .sm\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .sm\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .sm\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .sm\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .sm\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .sm\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .sm\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .sm\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .sm\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .sm\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .sm\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .sm\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .sm\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .sm\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .sm\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .sm\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .sm\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .sm\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .sm\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .sm\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .sm\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .sm\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .sm\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .sm\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .sm\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@media (min-width: 768px) {
  .md\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .md\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .md\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .md\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .md\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .md\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .md\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .md\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .md\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .md\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .md\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .md\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .md\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .md\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .md\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .md\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .md\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .md\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .md\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .md\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .md\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .md\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .md\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .md\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .md\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .md\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@media (min-width: 1024px) {
  .lg\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .lg\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .lg\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .lg\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .lg\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .lg\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .lg\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .lg\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .lg\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .lg\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .lg\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .lg\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .lg\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .lg\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .lg\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .lg\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .lg\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .lg\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .lg\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .lg\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .lg\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .lg\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .lg\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .lg\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .lg\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .lg\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@media (min-width: 1280px) {
  .xl\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .xl\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .xl\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .xl\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .xl\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .xl\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .xl\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .xl\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .xl\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .xl\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .xl\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .xl\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .xl\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .xl\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .xl\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .xl\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .xl\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .xl\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .xl\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .xl\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .xl\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .xl\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .xl\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .xl\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .xl\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .xl\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@media (min-width: 1536px) {
  .\32xl\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .\32xl\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .\32xl\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .\32xl\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .\32xl\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .\32xl\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .\32xl\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .\32xl\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .\32xl\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .\32xl\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .\32xl\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .\32xl\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .\32xl\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .\32xl\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .\32xl\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .\32xl\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .\32xl\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .\32xl\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .\32xl\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .\32xl\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .\32xl\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .\32xl\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .\32xl\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .\32xl\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .\32xl\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .\32xl\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@container (min-width: 640px) {
  .\@sm\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .\@sm\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .\@sm\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .\@sm\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .\@sm\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .\@sm\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .\@sm\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .\@sm\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .\@sm\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .\@sm\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .\@sm\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .\@sm\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .\@sm\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .\@sm\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .\@sm\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .\@sm\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .\@sm\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .\@sm\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .\@sm\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .\@sm\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .\@sm\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .\@sm\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .\@sm\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .\@sm\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .\@sm\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .\@sm\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@container (min-width: 768px) {
  .\@md\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .\@md\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .\@md\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .\@md\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .\@md\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .\@md\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .\@md\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .\@md\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .\@md\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .\@md\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .\@md\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .\@md\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .\@md\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .\@md\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .\@md\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .\@md\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .\@md\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .\@md\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .\@md\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .\@md\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .\@md\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .\@md\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .\@md\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .\@md\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .\@md\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .\@md\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@container (min-width: 1024px) {
  .\@lg\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .\@lg\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .\@lg\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .\@lg\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .\@lg\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .\@lg\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .\@lg\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .\@lg\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .\@lg\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .\@lg\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .\@lg\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .\@lg\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .\@lg\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .\@lg\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .\@lg\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .\@lg\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .\@lg\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .\@lg\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .\@lg\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .\@lg\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .\@lg\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .\@lg\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .\@lg\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .\@lg\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .\@lg\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .\@lg\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@container (min-width: 1280px) {
  .\@xl\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .\@xl\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .\@xl\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .\@xl\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .\@xl\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .\@xl\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .\@xl\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .\@xl\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .\@xl\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .\@xl\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .\@xl\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .\@xl\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .\@xl\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .\@xl\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .\@xl\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .\@xl\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .\@xl\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .\@xl\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .\@xl\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .\@xl\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .\@xl\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .\@xl\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .\@xl\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .\@xl\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .\@xl\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .\@xl\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

@container (min-width: 1536px) {
  .\@\32xl\:carina-row--cols-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .\@\32xl\:carina-row--cols-default > * {
    flex: 1 0 0%;
  }
    .\@\32xl\:carina-row--cols-1 > * {
      flex: 0 0 auto;
      width: calc(100% / 1);
    }
    .\@\32xl\:carina-row--cols-2 > * {
      flex: 0 0 auto;
      width: calc(100% / 2);
    }
    .\@\32xl\:carina-row--cols-3 > * {
      flex: 0 0 auto;
      width: calc(100% / 3);
    }
    .\@\32xl\:carina-row--cols-4 > * {
      flex: 0 0 auto;
      width: calc(100% / 4);
    }
    .\@\32xl\:carina-row--cols-5 > * {
      flex: 0 0 auto;
      width: calc(100% / 5);
    }
    .\@\32xl\:carina-row--cols-6 > * {
      flex: 0 0 auto;
      width: calc(100% / 6);
    }
  .\@\32xl\:carina-row--gutter-x-compact {
    --carina-row-gutter-x: var(--carina-spacing-4);
  }

  .\@\32xl\:carina-row--gutter-y-compact {
    --carina-row-gutter-y: var(--carina-spacing-4);
  }

  .\@\32xl\:carina-row--gutter-x-default {
    --carina-row-gutter-x: var(--carina-spacing-6);
  }

  .\@\32xl\:carina-row--gutter-y-default {
    --carina-row-gutter-y: var(--carina-spacing-6);
  }

  .\@\32xl\:carina-row--gutter-x-roomy {
    --carina-row-gutter-x: var(--carina-spacing-8);
  }

  .\@\32xl\:carina-row--gutter-y-roomy {
    --carina-row-gutter-y: var(--carina-spacing-8);
  }
    .\@\32xl\:carina-row--gutter-x-0 {
      --carina-row-gutter-x: var(--carina-spacing-0);
    }

    .\@\32xl\:carina-row--gutter-y-0 {
      --carina-row-gutter-y: var(--carina-spacing-0);
    }
    .\@\32xl\:carina-row--gutter-x-2 {
      --carina-row-gutter-x: var(--carina-spacing-2);
    }

    .\@\32xl\:carina-row--gutter-y-2 {
      --carina-row-gutter-y: var(--carina-spacing-2);
    }
    .\@\32xl\:carina-row--gutter-x-4 {
      --carina-row-gutter-x: var(--carina-spacing-4);
    }

    .\@\32xl\:carina-row--gutter-y-4 {
      --carina-row-gutter-y: var(--carina-spacing-4);
    }
    .\@\32xl\:carina-row--gutter-x-6 {
      --carina-row-gutter-x: var(--carina-spacing-6);
    }

    .\@\32xl\:carina-row--gutter-y-6 {
      --carina-row-gutter-y: var(--carina-spacing-6);
    }
    .\@\32xl\:carina-row--gutter-x-8 {
      --carina-row-gutter-x: var(--carina-spacing-8);
    }

    .\@\32xl\:carina-row--gutter-y-8 {
      --carina-row-gutter-y: var(--carina-spacing-8);
    }
    .\@\32xl\:carina-row--gutter-x-10 {
      --carina-row-gutter-x: var(--carina-spacing-10);
    }

    .\@\32xl\:carina-row--gutter-y-10 {
      --carina-row-gutter-y: var(--carina-spacing-10);
    }
    }

.carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

.carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }

.carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }

.carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }

.carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }

.carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }

.carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }

.carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }

.carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }

.carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }

.carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }

.carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }

.carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }

.carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }

/* Omitted .carina-column--offset-0 because columns have a 0 offset by default. */

.carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }

[dir='rtl'] .carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }

.carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }

[dir='rtl'] .carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }

.carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }

[dir='rtl'] .carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }

.carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }

[dir='rtl'] .carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }

.carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }

[dir='rtl'] .carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }

.carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }

[dir='rtl'] .carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }

.carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }

[dir='rtl'] .carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }

.carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }

[dir='rtl'] .carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }

.carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }

[dir='rtl'] .carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }

.carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }

[dir='rtl'] .carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }

.carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }

[dir='rtl'] .carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }

@media (min-width: 640px) {
  .sm\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .sm\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .sm\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .sm\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .sm\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .sm\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .sm\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .sm\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .sm\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .sm\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .sm\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .sm\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .sm\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .sm\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .sm\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .sm\:carina-column--offset-0 {
      margin-right: 0;
    }
    .sm\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .sm\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .sm\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@media (min-width: 768px) {
  .md\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .md\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .md\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .md\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .md\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .md\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .md\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .md\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .md\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .md\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .md\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .md\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .md\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .md\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .md\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .md\:carina-column--offset-0 {
      margin-right: 0;
    }
    .md\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .md\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .md\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@media (min-width: 1024px) {
  .lg\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .lg\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .lg\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .lg\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .lg\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .lg\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .lg\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .lg\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .lg\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .lg\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .lg\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .lg\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .lg\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .lg\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .lg\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .lg\:carina-column--offset-0 {
      margin-right: 0;
    }
    .lg\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .lg\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .lg\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@media (min-width: 1280px) {
  .xl\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .xl\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .xl\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .xl\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .xl\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .xl\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .xl\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .xl\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .xl\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .xl\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .xl\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .xl\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .xl\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .xl\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .xl\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .xl\:carina-column--offset-0 {
      margin-right: 0;
    }
    .xl\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .xl\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .xl\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@media (min-width: 1536px) {
  .\32xl\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .\32xl\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .\32xl\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .\32xl\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .\32xl\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .\32xl\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .\32xl\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .\32xl\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .\32xl\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .\32xl\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .\32xl\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .\32xl\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .\32xl\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .\32xl\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .\32xl\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .\32xl\:carina-column--offset-0 {
      margin-right: 0;
    }
    .\32xl\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .\32xl\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .\32xl\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@container (min-width: 640px) {
  .\@sm\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .\@sm\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .\@sm\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .\@sm\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .\@sm\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .\@sm\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .\@sm\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .\@sm\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .\@sm\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .\@sm\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .\@sm\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .\@sm\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .\@sm\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .\@sm\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .\@sm\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .\@sm\:carina-column--offset-0 {
      margin-right: 0;
    }
    .\@sm\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .\@sm\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .\@sm\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@container (min-width: 768px) {
  .\@md\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .\@md\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .\@md\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .\@md\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .\@md\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .\@md\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .\@md\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .\@md\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .\@md\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .\@md\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .\@md\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .\@md\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .\@md\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .\@md\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .\@md\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .\@md\:carina-column--offset-0 {
      margin-right: 0;
    }
    .\@md\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .\@md\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .\@md\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@container (min-width: 1024px) {
  .\@lg\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .\@lg\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .\@lg\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .\@lg\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .\@lg\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .\@lg\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .\@lg\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .\@lg\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .\@lg\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .\@lg\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .\@lg\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .\@lg\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .\@lg\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .\@lg\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .\@lg\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .\@lg\:carina-column--offset-0 {
      margin-right: 0;
    }
    .\@lg\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .\@lg\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .\@lg\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@container (min-width: 1280px) {
  .\@xl\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .\@xl\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .\@xl\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .\@xl\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .\@xl\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .\@xl\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .\@xl\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .\@xl\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .\@xl\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .\@xl\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .\@xl\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .\@xl\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .\@xl\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .\@xl\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .\@xl\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .\@xl\:carina-column--offset-0 {
      margin-right: 0;
    }
    .\@xl\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .\@xl\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .\@xl\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

@container (min-width: 1536px) {
  .\@\32xl\:carina-column--fill {
    flex: 1 0 0%;
    width: 0;
  }

  .\@\32xl\:carina-column--auto {
    flex: 0 0 auto;
    width: auto;
  }
    .\@\32xl\:carina-column--span-1 {
      flex: 0 0 auto;
      width: calc(100% * 1 / 12);
    }
    .\@\32xl\:carina-column--span-2 {
      flex: 0 0 auto;
      width: calc(100% * 2 / 12);
    }
    .\@\32xl\:carina-column--span-3 {
      flex: 0 0 auto;
      width: calc(100% * 3 / 12);
    }
    .\@\32xl\:carina-column--span-4 {
      flex: 0 0 auto;
      width: calc(100% * 4 / 12);
    }
    .\@\32xl\:carina-column--span-5 {
      flex: 0 0 auto;
      width: calc(100% * 5 / 12);
    }
    .\@\32xl\:carina-column--span-6 {
      flex: 0 0 auto;
      width: calc(100% * 6 / 12);
    }
    .\@\32xl\:carina-column--span-7 {
      flex: 0 0 auto;
      width: calc(100% * 7 / 12);
    }
    .\@\32xl\:carina-column--span-8 {
      flex: 0 0 auto;
      width: calc(100% * 8 / 12);
    }
    .\@\32xl\:carina-column--span-9 {
      flex: 0 0 auto;
      width: calc(100% * 9 / 12);
    }
    .\@\32xl\:carina-column--span-10 {
      flex: 0 0 auto;
      width: calc(100% * 10 / 12);
    }
    .\@\32xl\:carina-column--span-11 {
      flex: 0 0 auto;
      width: calc(100% * 11 / 12);
    }
    .\@\32xl\:carina-column--span-12 {
      flex: 0 0 auto;
      width: calc(100% * 12 / 12);
    }
    .\@\32xl\:carina-column--offset-0 {
      margin-left: 0;
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-0 {
      margin-right: 0;
    }
    .\@\32xl\:carina-column--offset-1 {
      margin-right: 0;
      margin-left: calc(100% * 1 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-1 {
      margin-right: calc(100% * 1 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-2 {
      margin-right: 0;
      margin-left: calc(100% * 2 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-2 {
      margin-right: calc(100% * 2 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-3 {
      margin-right: 0;
      margin-left: calc(100% * 3 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-3 {
      margin-right: calc(100% * 3 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-4 {
      margin-right: 0;
      margin-left: calc(100% * 4 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-4 {
      margin-right: calc(100% * 4 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-5 {
      margin-right: 0;
      margin-left: calc(100% * 5 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-5 {
      margin-right: calc(100% * 5 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-6 {
      margin-right: 0;
      margin-left: calc(100% * 6 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-6 {
      margin-right: calc(100% * 6 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-7 {
      margin-right: 0;
      margin-left: calc(100% * 7 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-7 {
      margin-right: calc(100% * 7 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-8 {
      margin-right: 0;
      margin-left: calc(100% * 8 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-8 {
      margin-right: calc(100% * 8 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-9 {
      margin-right: 0;
      margin-left: calc(100% * 9 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-9 {
      margin-right: calc(100% * 9 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-10 {
      margin-right: 0;
      margin-left: calc(100% * 10 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-10 {
      margin-right: calc(100% * 10 / 12);
      margin-left: 0;
    }
    .\@\32xl\:carina-column--offset-11 {
      margin-right: 0;
      margin-left: calc(100% * 11 / 12);
    }
    [dir='rtl'] .\@\32xl\:carina-column--offset-11 {
      margin-right: calc(100% * 11 / 12);
      margin-left: 0;
    }
    }

.carina-filter-control-bar__tag-list {
  display: none;

  gap: var(--carina-spacing-2);
  margin-top: var(--carina-spacing-2);
  margin-bottom: var(--carina-spacing-2);
}

@media (min-width: 640px) {

.carina-filter-control-bar__tag-list {
    display: flex
}
  }

.carina-filter-button {
  padding: var(--carina-spacing-2) 0;

  white-space: nowrap;
}

/**
 * Rebrand: selected FilterButton (Button appearance="filled").
 * All interactive states share a light surface-active background with
 * dark label text and a base-tone border.
 */

.carina-filter-button .carina-button--rebrand.carina-button--filled {
  color: var(--carina-text-color-base);
  background-color: var(--carina-background-color-surface-active);
  border-color: var(--carina-border-color-base);
}

.carina-filter-button .carina-button--rebrand.carina-button--filled:hover:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-active);
    border-color: var(--carina-border-color-base);
  }

.carina-filter-button .carina-button--rebrand.carina-button--filled:active:not(.carina-button--disabled),
  .carina-filter-button .carina-button--rebrand.carina-button--filled.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-active);
    border-color: var(--carina-border-color-base);
  }

/**
 * Rebrand: not-selected FilterButton (Button appearance="lined").
 * Soft border by default; hover swaps to a light surface-hover background;
 * active/pressed elevate to surface-active with a base-tone border.
 */

.carina-filter-button .carina-button--rebrand.carina-button--lined {
  border-color: var(--carina-border-color-soft);
}

.carina-filter-button .carina-button--rebrand.carina-button--lined:hover:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-hover);
    border-color: var(--carina-border-color-soft);
  }

.carina-filter-button .carina-button--rebrand.carina-button--lined:active:not(.carina-button--disabled),
  .carina-filter-button .carina-button--rebrand.carina-button--lined.carina-button--active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-active);
    border-color: var(--carina-border-color-base);
  }

.carina-filter-control-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.carina-filter-control-bar__button {
  margin-left: var(--carina-spacing-2);
  margin-top: var(--carina-spacing-2);
}

@media (min-width: 640px) {

.carina-filter-control-bar__button {
    margin-top: var(--carina-spacing-0)
}
  }

.carina-filter-control-bar__empty-container {
  padding: var(--carina-spacing-4);
  padding-top: 0;
}

.carina-filter-control-bar__filters-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--carina-spacing-3);
  align-items: center;
  max-width: 100%;
}

.carina-filter-control-bar__tags-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.carina-filter-control-bar__visually-hidden-message {
  height: 0;
  overflow: hidden;
  width: 0;
}

@container (min-width: 640px) {
  .carina-filter-control-bar__filters-wrapper {
    flex-wrap: nowrap;
  }
}

@media (min-width: 640px) {
  .carina-filter-control-bar .carina-search-bar {
    flex-shrink: 0;
    width: 300px;
  }
}

.carina-filter-select {
  flex-grow: 1;
  box-sizing: border-box;
  height: 56px;
}

.carina-filter-select__inner {
  display: none;
  gap: var(--carina-spacing-2);
}

@media (min-width: 640px) {

.carina-filter-select__inner {
    display: flex
}
  }

.carina-search-bar.carina-textbox__container .carina-input-fieldset {
    border-radius: var(--carina-border-radius-full);
  }

.carina-search-bar.carina-textbox__container.carina-search-bar--rebrand .carina-input-fieldset {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-search-bar .carina-textbox-icon {
  bottom: 14px;
  inset-inline-end: var(--carina-spacing-2);
}

.carina-search-bar > .carina-textbox__input {
  border-radius: var(--carina-border-radius-full);
  padding-inline-end: 84px;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: var(--carina-transition-duration-100);
  transition-property: box-shadow;
}

.carina-search-bar > .carina-textbox__input:disabled {
    color: color-mix(
      in srgb,
      var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%),
      transparent
    );
  }

.carina-search-bar--rebrand > .carina-textbox__input {
  border-radius: var(--carina-border-radius-sm);
}

.carina-search-bar .carina-button {
  display: flex;

  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-md);
  text-decoration: none;
}

.carina-search-bar .carina-button:hover:not(.carina-button--disabled, :active) {
    color: var(--carina-text-color-base);
  }

.carina-search-bar .carina-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--carina-border-width-2)
      var(--carina-border-color-base);
  }

.carina-search-bar--rebrand .carina-button {
  border-radius: var(--carina-border-radius-sm);
}

.carina-search-bar__button-icons {
  position: absolute;
  display: flex;
  inset-inline-end: 0;
}

.carina-single-dimension-filters {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  height: 56px;
  display: inline-flex;
}

.carina-single-dimension-filters:has(.carina-single-dimension-filters__inner-container--scroll) {
    overflow: hidden;
    -ms-overflow-y: hidden;
  }

.carina-single-dimension-filters__inner-container {
  display: flex;
  gap: var(--carina-spacing-2);
  width: 100%;
  max-width: 100%;
  -ms-overflow-y: auto;
  margin-inline: var(--carina-spacing-0);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */

.carina-single-dimension-filters__inner-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;

    background-color: var(--carina-colors-transparent);
  }

.carina-single-dimension-filters__inner-container--scroll {
  margin-inline: 36px;
  overflow: auto;
  padding-inline: var(--carina-spacing-1);
  scroll-behavior: smooth;
}

.carina-single-dimension-filters__inner-container--scroll:focus-visible {
    outline: none;

    /** inset because there is overflow: hidden around the container */
    box-shadow: var(--carina-ring-base) inset;
  }

.carina-single-dimension-filters__scroll-arrow {
  position: absolute;
  top: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 56px;
  border-radius: 0;

  background-color: var(--carina-background-color-surface);
  box-shadow: var(--carina-box-shadow-md);
  cursor: pointer;
  inset-inline-end: auto;
  inset-inline-start: 0;
}

.carina-single-dimension-filters__scroll-arrow:hover {
    color: var(--carina-text-color-soft);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-single-dimension-filters__scroll-arrow:active {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);
  }

.carina-single-dimension-filters__end-scroll-arrow {
  inset-inline-end: 0;
  inset-inline-start: unset;
}

.carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  border: 0;

  color: var(--carina-text-color-soft);
}

.carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:focus {
    border-radius: var(--carina-border-radius-sm);

    box-shadow: var(--carina-ring-base);
  }

.carina-single-dimension-filters--rebrand .carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:focus {
      border-radius: var(--carina-border-radius-xs);
    }

.carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:hover:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-single-dimension-filters--rebrand .carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:hover:not(.carina-button--disabled)::after {
      content: unset;
    }

.carina-single-dimension-filters__scroll-arrow > .carina-button.carina-button--icon-only:active:not(.carina-button--disabled) {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-active);
  }

.carina-flyout__container {
  display: inline-block;
}

.carina-flyout__trigger {
  cursor: pointer;
}

.carina-flyout__popper {
  padding: var(--carina-spacing-4);
  border-radius: var(--carina-border-radius-xl);

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-2xs);
  font-family: var(--carina-font-family-primary);

  background-color: var(--carina-background-color-popper);
}

.carina-flyout__popper--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-flyout-icon__button {
  padding: 0;
  border: 0;

  background: transparent;
  cursor: pointer;

  color: inherit;

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;

  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-0);
}

.carina-flyout-icon__button:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    border-radius: var(--carina-border-radius-full);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-flyout-icon__button--disabled {
  color: var(--carina-text-color-disabled);

  cursor: default;
}

.carina-flyout-icon--xs {
  width: var(--carina-icon-xs);
  height: var(--carina-icon-xs);
}

.carina-flyout-icon--sm {
  width: var(--carina-icon-sm);
  height: var(--carina-icon-sm);
}

.carina-flyout-icon--md {
  width: var(--carina-icon-md);
  height: var(--carina-icon-md);
}

.carina-flyout-icon--lg {
  width: var(--carina-icon-lg);
  height: var(--carina-icon-lg);
}

.carina-form-element {
  display: block;
  box-sizing: border-box;

  width: 100%;
  margin: var(--carina-spacing-0);

  padding: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-spacing-4) var(--carina-spacing-0);

  vertical-align: top;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-form-element__form-label {
  position: relative;
}

.carina-form-element__form-label--visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.carina-form-element__form-label-container {
  display: block;

  margin-bottom: var(--carina-spacing-1);
  padding: var(--carina-spacing-0);

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);

  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  vertical-align: top;
}

.carina-form-element__form-label-required-indicator-container {
  position: absolute;

  inset-inline-start: -11px;
  top: -2px;

  color: var(--carina-text-color-danger);

  font-size: var(--carina-font-size-body-xl);

  font-family: var(--carina-font-family-primary);

  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

.carina-form-element__form-message {
  display: block;
  margin: var(--carina-spacing-1) var(--carina-spacing-0)
    var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-xs);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: normal;
  text-transform: none;
  text-indent: var(--carina-spacing-0);
  text-shadow: none;
  vertical-align: top;
}

.carina-form-element__form-message-error-icon-container {
  position: relative;

  vertical-align: middle;
  padding-inline: 0 calc(var(--carina-spacing-px) * 5);
}

.carina-form-element__form-message-error-icon-container svg {
    display: inline-block;

    vertical-align: text-bottom;
  }

.carina-form-element__form-message.carina-form-element__form-message--info {
  color: var(--carina-text-color-soft);
}

.carina-form-element__form-message.carina-form-element__form-message--error {
  color: var(--carina-text-color-danger);
}

.carina-form-element__form-message.carina-form-element__form-message--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-formlayout {
  position: relative;

  width: 100%;
}

.carina-formsection {
  display: flex;
  flex-direction: column;
}

@media (min-width: 640px) {

.carina-formsection.carina-formsection--stack-breakpoint-sm {
    flex-direction: row;
    border-bottom-color: var(--carina-border-color-base);
    border-bottom-width: var(--carina-border-width-1);
    border-bottom-style: solid
}

    .carina-formsection.carina-formsection--stack-breakpoint-sm:last-child {
      border-color: transparent;
    }
  }

@media (min-width: 768px) {

.carina-formsection.carina-formsection--stack-breakpoint-md {
    flex-direction: row;
    border-bottom-color: var(--carina-border-color-base);
    border-bottom-width: var(--carina-border-width-1);
    border-bottom-style: solid
}

    .carina-formsection.carina-formsection--stack-breakpoint-md:last-child {
      border-color: transparent;
    }
  }

@media (min-width: 1024px) {

.carina-formsection.carina-formsection--stack-breakpoint-lg {
    flex-direction: row;
    border-bottom-color: var(--carina-border-color-base);
    border-bottom-width: var(--carina-border-width-1);
    border-bottom-style: solid
}

    .carina-formsection.carina-formsection--stack-breakpoint-lg:last-child {
      border-color: transparent;
    }
  }

@media (min-width: 1280px) {

.carina-formsection.carina-formsection--stack-breakpoint-xl {
    flex-direction: row;
    border-bottom-color: var(--carina-border-color-base);
    border-bottom-width: var(--carina-border-width-1);
    border-bottom-style: solid
}

    .carina-formsection.carina-formsection--stack-breakpoint-xl:last-child {
      border-color: transparent;
    }
  }

@media (min-width: 1536px) {

.carina-formsection.carina-formsection--stack-breakpoint-2xl {
    flex-direction: row;
    border-bottom-color: var(--carina-border-color-base);
    border-bottom-width: var(--carina-border-width-1);
    border-bottom-style: solid
}

    .carina-formsection.carina-formsection--stack-breakpoint-2xl:last-child {
      border-color: transparent;
    }
  }

@media (min-width: 640px) {

.carina-formsection--stack.carina-formsection--stack-breakpoint-sm {
    flex-direction: column
}
  }

@media (min-width: 768px) {

.carina-formsection--stack.carina-formsection--stack-breakpoint-md {
    flex-direction: column
}
  }

@media (min-width: 1024px) {

.carina-formsection--stack.carina-formsection--stack-breakpoint-lg {
    flex-direction: column
}
  }

@media (min-width: 1280px) {

.carina-formsection--stack.carina-formsection--stack-breakpoint-xl {
    flex-direction: column
}
  }

@media (min-width: 1536px) {

.carina-formsection--stack.carina-formsection--stack-breakpoint-2xl {
    flex-direction: column
}
  }

.carina-formsection__content {
  flex: 1 0 0%;
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-4);
}

@media (min-width: 640px) {

.carina-formsection__content--stack-breakpoint-sm {
    padding-left: var(--carina-spacing-6)
}

    [dir='rtl'] .carina-formsection__content--stack-breakpoint-sm {
      padding-right: var(--carina-spacing-6);
      padding-left: 0;
    }
  }

@media (max-width: 639.98px) {

.carina-formsection__content--stack-breakpoint-sm {
    flex: 1 0 auto
}
  }

@media (min-width: 768px) {

.carina-formsection__content--stack-breakpoint-md {
    padding-left: var(--carina-spacing-6)
}

    [dir='rtl'] .carina-formsection__content--stack-breakpoint-md {
      padding-right: var(--carina-spacing-6);
      padding-left: 0;
    }
  }

@media (max-width: 767.98px) {

.carina-formsection__content--stack-breakpoint-md {
    flex: 1 0 auto
}
  }

@media (min-width: 1024px) {

.carina-formsection__content--stack-breakpoint-lg {
    padding-left: var(--carina-spacing-6)
}

    [dir='rtl'] .carina-formsection__content--stack-breakpoint-lg {
      padding-right: var(--carina-spacing-6);
      padding-left: 0;
    }
  }

@media (max-width: 1023.98px) {

.carina-formsection__content--stack-breakpoint-lg {
    flex: 1 0 auto
}
  }

@media (min-width: 1280px) {

.carina-formsection__content--stack-breakpoint-xl {
    padding-left: var(--carina-spacing-6)
}

    [dir='rtl'] .carina-formsection__content--stack-breakpoint-xl {
      padding-right: var(--carina-spacing-6);
      padding-left: 0;
    }
  }

@media (max-width: 1279.98px) {

.carina-formsection__content--stack-breakpoint-xl {
    flex: 1 0 auto
}
  }

@media (min-width: 1536px) {

.carina-formsection__content--stack-breakpoint-2xl {
    padding-left: var(--carina-spacing-6)
}

    [dir='rtl'] .carina-formsection__content--stack-breakpoint-2xl {
      padding-right: var(--carina-spacing-6);
      padding-left: 0;
    }
  }

@media (max-width: 1535.98px) {

.carina-formsection__content--stack-breakpoint-2xl {
    flex: 1 0 auto
}
  }

.carina-formsection__content--stack {
  flex: 1 0 auto;
}

@media (min-width: 640px) {

.carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-sm {
    padding-left: 0
}

    [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-sm {
      padding-right: 0;
    }
  }

@media (min-width: 768px) {

.carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-md {
    padding-left: 0
}

    [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-md {
      padding-right: 0;
    }
  }

@media (min-width: 1024px) {

.carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-lg {
    padding-right: 0;
    padding-left: 0
}
  }

@media (min-width: 1280px) {

.carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-xl {
    padding-left: 0
}

    [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-xl {
      padding-right: 0;
    }
  }

@media (min-width: 1536px) {

.carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-2xl {
    padding-left: 0
}

    [dir='rtl'] .carina-formsection__content--stack.carina-formsection__content--stack-breakpoint-2xl {
      padding-right: 0;
    }
  }

.carina-formsection__header {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);

  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);

  direction: ltr;
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

[dir='rtl'] .carina-formsection__header {
    direction: rtl;
  }

.carina-formsection__header h3 {
    margin: calc(var(--carina-spacing-5) + var(--carina-spacing-px)) 0;

    color: var(--carina-text-color-heading, var(--carina-text-color-base));
    font-weight: var(--carina-font-weight-body);
    font-size: var(--carina-font-size-display-2xs);
    font-family: var(--carina-font-family-primary);
    line-height: var(--carina-line-height-tight);
  }

@media (min-width: 640px) {

.carina-formsection__header.carina-formsection__header--stack-breakpoint-sm {
      width: 200px
  }
    }

@media (min-width: 768px) {

.carina-formsection__header.carina-formsection__header--stack-breakpoint-md {
      width: 200px
  }
    }

@media (min-width: 1024px) {

.carina-formsection__header.carina-formsection__header--stack-breakpoint-lg {
      width: 200px
  }
    }

@media (min-width: 1280px) {

.carina-formsection__header.carina-formsection__header--stack-breakpoint-xl {
      width: 200px
  }
    }

@media (min-width: 1536px) {

.carina-formsection__header.carina-formsection__header--stack-breakpoint-2xl {
      width: 200px
  }
    }

.carina-formsection__header--stack {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));

  direction: ltr;
}

[dir='rtl'] .carina-formsection__header--stack {
    direction: rtl;
  }

@media (min-width: 640px) {

.carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-sm {
      width: unset
  }
    }

@media (min-width: 768px) {

.carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-md {
      width: unset
  }
    }

@media (min-width: 1024px) {

.carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-lg {
      width: unset
  }
    }

@media (min-width: 1280px) {

.carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-xl {
      width: unset
  }
    }

@media (min-width: 1536px) {

.carina-formsection__header--stack.carina-formsection__header--stack-breakpoint-2xl {
      width: unset
  }
    }

.carina-numeric-selector {
  display: flex;
  flex-direction: row;
}

.carina-numeric-selector input {
    text-align: center;
  }

[dir='rtl'] .carina-numeric-selector input {
    text-align: center;
  }

.carina-numeric-selector__textbox {
  padding: 0 var(--carina-spacing-1);
  width: 56px;
  box-sizing: border-box;
  border: 0;
  font-size: 100%;
  font-family: inherit;
}

.carina-numeric-selector__textbox input {
    padding: 0;
  }

.carina-numeric-selector .carina-input-fieldset--default {
  top: 0px;
  bottom: unset;
}

.carina-numeric-selector--grid input {
    --moz-appearance: textfield;

    padding: 0;

    text-align: center;
  }

.carina-numeric-selector--grid button {
    width: var(--carina-spacing-6);

    height: var(--carina-spacing-6);
  }

.carina-numeric-selector--underline input {
    --moz-appearance: textfield;

    text-align: center;
  }

.carina-numeric-selector--outline {
  height: calc(40px + 2 * var(--carina-border-width-1));
}

.carina-numeric-selector--outline input {
    --moz-appearance: textfield;

    text-align: center;
  }

.carina-numeric-selector__buttons {
  width: 40px;

  height: 40px;
}

.carina-numeric-selector__buttons > button {
    color: var(--carina-text-color-soft);
  }

.carina-numeric-selector__buttons .carina-button {
    color: var(--carina-text-color-soft);
    outline-offset: var(--carina-border-width-0);
  }

.carina-numeric-selector__buttons.carina-numeric-selector__buttons--grid {
  width: var(--carina-spacing-6);
  height: var(--carina-spacing-6);
}

.carina-numeric-selector__buttons.carina-numeric-selector__buttons--grid button {
    width: var(--carina-spacing-6);
    height: var(--carina-spacing-6);
  }

.carina-numeric-selector__buttons.carina-numeric-selector__buttons--grid .carina-button {
    min-height: unset;
  }

.carina-numeric-selector__textbox.carina-numeric-selector__textbox--underline,
.carina-numeric-selector__textbox.carina-numeric-selector__textbox--outline {
  position: relative;
  top: calc(-1 * var(--carina-spacing-2-5));

  height: calc(40px + 2 * var(--carina-border-width-1));
}

.carina-numeric-selector__buttons.carina-numeric-selector__buttons--underline,
.carina-numeric-selector__buttons.carina-numeric-selector__buttons--outline {
  margin: var(--carina-border-width-1);
}

.carina-numeric-selector__text {
  align-self: center;
  margin: var(--carina-border-width-1) 0;
  padding: 0 var(--carina-spacing-1);
}

.carina-radiogroup__button {
  position: relative;

  display: inherit;
  padding: var(--carina-spacing-2) 0;

  outline: none;
}

.carina-radiogroup__button--inline {
  display: inline-block;
}

.carina-radiogroup__button-label {
  position: relative;

  display: inline-block;

  margin-inline-start: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-2);

  font-size: var(--carina-font-size-body-sm);
}

.carina-radiogroup__button-label::before {
    position: absolute;
    top: 0;

    left: calc(-1 * var(--carina-spacing-4));

    display: block;

    box-sizing: border-box;
    width: var(--carina-spacing-4);
    height: var(--carina-spacing-4);

    padding-inline-start: var(--carina-spacing-2);

    border-color: var(--carina-border-color-base);
    border-style: solid;
    border-width: var(--carina-border-width-1);

    border-radius: var(--carina-border-radius-xl);

    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-body-md);

    background-color: transparent;
    cursor: pointer;

    transition-duration: calc(
      var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
    );
    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-property: border-color, background-color, outline-color;

    outline-width: var(--carina-border-width-2);
    outline-style: solid;
    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-1);

    content: '';
  }

[dir='rtl'] .carina-radiogroup__button-label::before {
      right: calc(-1 * var(--carina-spacing-4));
      left: auto;
    }

.carina-radiogroup__button-label.carina-radiogroup__button-label--read-only:not(.carina-radiogroup__button-label--checked):not(
    .carina-radiogroup__button-label--disabled
  )::before {
    color: var(--carina-text-color-base);
    border-color: var(--carina-border-color-soft);
    background-color: var(--carina-background-color-surface-alt);
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    cursor: default;
  }

.carina-radiogroup__button-label.carina-radiogroup__button-label--read-only:not(.carina-radiogroup__button-label--checked):not(
    .carina-radiogroup__button-label--disabled
  )::before:focus {
      border-color: var(--carina-border-color-primary-focus);
    }

.carina-radiogroup__button-label--error::before {
    border-color: var(--carina-border-color-danger);
    border-style: solid;
    border-width: var(--carina-border-width-1);
  }

.carina-radiogroup__button-label--inline {
  padding-inline-end: var(--carina-spacing-4);
}

.carina-radiogroup__button-label--checked::before {
    border-color: var(--carina-border-color-primary);
    border-style: solid;
    border-width: var(--carina-border-width-1);

    background: var(--carina-background-color-primary);
  }

.carina-radiogroup__button-label--checked::after {
    position: absolute;
    top: 0.3125rem;

    left: -0.6875rem;

    display: block;
    box-sizing: border-box;
    width: 0.375rem;
    height: 0.375rem;

    border-radius: var(--carina-border-radius-xl);

    font-size: var(--carina-spacing-4);

    background: var(--carina-text-color-on-primary);
    cursor: pointer;

    content: '';
  }

[dir='rtl'] .carina-radiogroup__button-label--checked::after {
      right: -0.6875rem;
      left: auto;
    }

.carina-radiogroup__button-label--checked.carina-radiogroup__button-label--error::before {
    border-color: var(--carina-border-color-danger);
    border-style: solid;
    border-width: var(--carina-border-width-1);

    background-color: var(--carina-background-color-danger);
  }

.carina-radiogroup__button-label--focused::before {
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked::before {
    border-color: var(--carina-border-color-primary);
    border-style: solid;
    border-width: var(--carina-border-width-1);

    background: var(--carina-background-color-primary);
  }

.carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked::after {
    position: absolute;
    top: 0.3125rem;

    left: -0.6875rem;

    display: block;
    box-sizing: border-box;
    width: 0.375rem;
    height: 0.375rem;

    border-radius: var(--carina-border-radius-xl);

    font-size: var(--carina-spacing-4);

    background: var(--carina-text-color-on-primary);
    cursor: pointer;

    content: '';
  }

[dir='rtl'] .carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked::after {
      right: -0.6875rem;
      left: auto;
    }

.carina-radiogroup__button-label--focused.carina-radiogroup__button-label--checked.carina-radiogroup__button-label--error::before {
    border-color: var(--carina-border-color-danger);
    border-style: solid;
    border-width: var(--carina-border-width-1);

    background: var(--carina-background-color-danger);
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-radiogroup__button-label--focused.carina-radiogroup__button-label--error::before {
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-radiogroup__button-label--disabled {
  color: var(--carina-text-color-disabled);

  cursor: default;
}

.carina-radiogroup__button-label--disabled::before {
    border-width: 0;

    color: var(--carina-text-color-disabled);

    background-color: var(--carina-background-color-neutral-inactive);
    cursor: default;
  }

.carina-radiogroup__button-label--disabled.carina-radiogroup__button-label--checked::before {
    border-color: var(--carina-border-color-soft);
    border-style: solid;
    border-width: var(--carina-border-width-1);

    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-radiogroup__button-label--disabled.carina-radiogroup__button-label--checked::after {
    background: var(--carina-text-color-soft);
    cursor: default;
  }

.carina-radiogroup {
  display: block;
  clear: both;
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-tight);
  direction: ltr;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;

  list-style-type: none;
  outline: 0;
}

[dir='rtl'] .carina-radiogroup {
    direction: rtl;
    text-align: right;
  }

.carina-switch {
  display: inline-block;
}

.carina-switch__track {
  position: relative;

  display: block;

  box-sizing: border-box;

  width: 40px;
  height: 24px;
  border-color: var(--carina-border-color-base);
  border-style: solid;
  border-width: var(--carina-border-width-2);
  border-radius: var(--carina-border-radius-full);

  background-color: transparent;

  outline: none;
  cursor: pointer;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
  transition:
    background-color var(--carina-transition-duration-400),
    outline-color
      var(--carina-transition-timing-function-expressive-ease-in-out)
      calc(var(--carina-page-loaded, 0) * var(--carina-transition-duration-100));
}

.carina-switch__track:focus {
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-switch__thumb {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;

  width: 14px;
  height: 14px;
  border-radius: var(--carina-border-radius-xl);

  background-color: var(--carina-background-color-neutral);
  transform: translateX(0);

  transition: transform var(--carina-transition-duration-200)
    var(--carina-transition-timing-function-productive-ease-in);
}

.carina-switch__thumb--rebrand {
    background-color: var(--carina-background-color-primary);
  }

.carina-switch__track.carina-switch__track--read-only {
  border-color: var(--carina-border-color-soft);
  background-color: var(--carina-background-color-surface-alt);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.carina-switch__track.carina-switch__track--read-only:hover {
    cursor: default;
  }

.carina-switch__thumb.carina-switch__thumb--read-only {
  background-color: var(--carina-border-color-soft);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.carina-switch__thumb.carina-switch__thumb--read-only:hover {
    cursor: default;
  }

.carina-switch--on .carina-switch__track {
  border: 0;

  background-color: var(--carina-text-color-primary);
}

.carina-switch--on .carina-switch__thumb {
  top: 2px;
  inset-inline-start: -2px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  box-sizing: border-box;
  padding: var(--carina-spacing-0-5);

  color: var(--carina-text-color-primary);

  background-color: var(--carina-background-color-surface);
  transform: translateX(100%);
}

[dir='rtl'] .carina-switch--on .carina-switch__thumb {
    transform: translateX(-100%);
  }

.carina-switch--disabled .carina-switch__track {
  cursor: default;
  opacity: var(--carina-opacity-40);
}

.carina-switch--disabled .carina-switch--on .carina-switch__track {
  background-color: var(--carina-text-color-primary);

  cursor: default;
  opacity: var(--carina-opacity-40);
}

.carina-textarea-icon {
  position: absolute;
  bottom: var(--carina-spacing-4);
  padding: var(--carina-spacing-0-5);
}

.carina-textarea-icon svg {
    display: block;
    vertical-align: middle;
  }

.carina-textarea-icon--small {
  bottom: var(--carina-spacing-1-5);
}

.carina-textarea-icon--grid {
  bottom: var(--carina-spacing-1);

  width: var(--carina-icon-xs);
  height: var(--carina-icon-xs);
}

.carina-textarea-icon--start {
  inset-inline-start: var(--carina-spacing-4);
}

.carina-textarea-icon--start.carina-textarea-icon--grid {
  inset-inline-start: var(--carina-spacing-1);
}

.carina-textarea-icon--end {
  inset-inline-end: var(--carina-spacing-4);
}

.carina-textarea {
  position: relative;

  box-sizing: border-box;
  width: 100%;
}

.carina-textarea > fieldset {
    transition-timing-function: var(
      --carina-transition-timing-function-productive-ease-in-out
    );
    transition-duration: var(--carina-transition-duration-100);
    transition-property: border-color;

    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-1);
    outline-style: solid;
    outline-width: var(--carina-border-width-2);
  }

.carina-textarea.carina-textarea--default:focus-within > fieldset {
    outline-color: var(--carina-border-color-primary-focus);
    transition-property: border-color, outline-color;
  }

.carina-textarea.carina-textarea--default.carina-textarea--error:focus-within > fieldset {
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-textarea.carina-textarea--default .carina-input-fieldset:not(.carina-input-fieldset--hiddenlabel) {
    top: calc(var(--carina-textarea-label-height, 0px) + 4px);
    bottom: unset;
  }

.carina-textarea.carina-textarea--default .carina-input-fieldset--hiddenlabel {
    top: 0px;
    bottom: unset;
  }

.carina-textarea--grid {
  margin-top: var(--carina-spacing-0);
}

.carina-textarea--grid:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textarea--grid.carina-textarea--error:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-danger-focus);
  }

.carina-textarea--grid > .carina-input-fieldset-outer {
    top: -3px;
  }

.carina-textarea--outline {
  margin-top: 10px;
}

.carina-textarea--outline:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textarea--outline.carina-textarea--error:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-danger-focus);
  }

.carina-textarea--underline {
  margin-top: 10px;
}

.carina-textarea--underline .carina-input-fieldset-outer {
    bottom: 0;
    top: unset;
  }

.carina-textarea--underline:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-textarea--underline.carina-textarea--error:focus-within > .carina-input-fieldset-outer {
    border-color: var(--carina-border-color-danger-focus);
  }

.carina-textarea--error {
  border-color: var(--carina-border-color-danger);
}

.carina-textarea__textarea {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  margin: var(--carina-spacing-0) var(--carina-spacing-0)
    calc(-1 * var(--carina-spacing-1)) var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-4)
    var(--carina-spacing-2) var(--carina-spacing-4);
  border-color: transparent;
  border-radius: var(--carina-border-radius-md);
  border-style: solid;
  border-width: var(--carina-border-width-0) var(--carina-spacing-0-5)
    var(--carina-spacing-0-5) var(--carina-spacing-0-5);
  overflow: auto;

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);

  font-family: var(--carina-font-family-primary);
  font-style: normal;
  line-height: var(--carina-line-height-normal);
  letter-spacing: 0;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;

  background-color: transparent;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  resize: vertical;
}

/* TODO: react-native attribute, enable when supported
  text-align-vertical: top; */

.carina-textarea__textarea::-moz-placeholder {
    color: var(--carina-text-color-soft);
  }

.carina-textarea__textarea::placeholder {
    color: var(--carina-text-color-soft);
  }

[dir='rtl'] .carina-textarea__textarea {
    direction: rtl;
    text-align: right;
  }

.carina-textarea__textarea:focus {
    outline: 0;
  }

.carina-textarea__textarea:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
  }

.carina-textarea__textarea:disabled {
    border-color: transparent;

    color: var(--carina-text-color-disabled);

    pointer-events: none;
  }

.carina-textarea__textarea:disabled::-moz-placeholder {
      color: color-mix(
        in srgb,
        var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%),
        transparent
      );
    }

.carina-textarea__textarea:disabled::placeholder {
      color: color-mix(
        in srgb,
        var(--carina-text-color-soft) calc(var(--carina-opacity-40) * 100%),
        transparent
      );
    }

.carina-textarea__textarea svg {
    vertical-align: middle;
  }

.carina-textarea__textarea--rebrand:not(
    .carina-textarea__textarea--grid,
    .carina-textarea__textarea--underline
  ) {
  border-radius: var(--carina-border-radius-sm);
}

.carina-textarea__textarea.carina-textarea__textarea--read-only {
  color: var(--carina-text-color-base);
  background-color: var(--carina-background-color-surface-alt);
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.carina-textarea__textarea.carina-textarea__textarea--read-only:hover {
    cursor: default;
  }

.carina-textarea__textarea.carina-textarea__input--icon-end {
  padding-inline-end: calc(var(--carina-textarea-icon-width) + 16px);
}

.carina-textarea__textarea.carina-textarea__input--icon-start {
  padding-inline-start: calc(var(--carina-textarea-icon-width) + 16px);
}

.carina-textarea__textarea--fixed-size {
  resize: none;
}

.carina-textarea__textarea--s.carina-textarea__textarea--default {
  min-height: 4rem;
}

.carina-textarea__textarea--m.carina-textarea__textarea--default {
  min-height: 6rem;
}

.carina-textarea__textarea--l.carina-textarea__textarea--default {
  min-height: 8rem;
}

.carina-textarea__textarea--xl.carina-textarea__textarea--default {
  min-height: 16rem;
}

.carina-textarea__textarea--s {
  min-height: 3.5rem;
}

.carina-textarea__textarea--m {
  min-height: 5.5rem;
}

.carina-textarea__textarea--l {
  min-height: 7.5rem;
}

.carina-textarea__textarea--xl {
  min-height: 15.5rem;
}

.carina-textarea__textarea--grid {
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0) var(--carina-spacing-0-5)
    var(--carina-spacing-0) var(--carina-spacing-1);
  border-width: var(--carina-border-width-0) var(--carina-border-width-0)
    var(--carina-spacing-0-5) var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-none);

  background-color: transparent;
}

.carina-textarea__textarea--grid.carina-textarea__textarea--s {
  min-height: 0;
}

.carina-textarea__textarea--grid.carina-textarea__textarea--m {
  min-height: 0;
}

.carina-textarea__textarea--grid.carina-textarea__textarea--l {
  min-height: 0;
}

.carina-textarea__textarea--grid.carina-textarea__textarea--xl {
  min-height: 0;
}

.carina-textarea__textarea--outline {
  margin-top: var(--carina-spacing-2);
  padding: var(--carina-spacing-0-5)
    calc(var(--carina-spacing-4) - var(--carina-border-width-2))
    calc(var(--carina-spacing-2) - var(--carina-spacing-0-5))
    calc(var(--carina-spacing-4) - var(--carina-border-width-2));

  background-color: transparent;
}

.carina-textarea__textarea--underline {
  margin-top: var(--carina-spacing-2);
  padding: var(--carina-spacing-0-5) var(--carina-spacing-4)
    calc(var(--carina-spacing-2) - var(--carina-spacing-0-5))
    var(--carina-spacing-4);
  border-width: var(--carina-border-width-0) var(--carina-border-width-0)
    var(--carina-spacing-0-5) var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-none);

  background-color: transparent;
}

.carina-time-range-picker__label--hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.carina-time-range-picker__outer-container {
  box-sizing: border-box;

  width: 100%;

  margin-inline: var(--carina-spacing-0);
  padding-block: var(--carina-spacing-0);
  padding-inline: var(--carina-spacing-0);
  min-inline-size: var(--carina-spacing-0);

  border: 0;
}

.carina-time-range-picker__outer-container input {
    margin-top: var(--carina-spacing-0);
  }

.carina-time-range-picker--outline .carina-time-range-picker__outer-container.carina-time-range-picker__outer-container--all {
  margin-top: 29.5px;
}

.carina-time-range-picker--outline .carina-time-range-picker__outer-container.carina-time-range-picker__label--only-top,
.carina-time-range-picker--underline .carina-time-range-picker__outer-container.carina-time-range-picker__label--only-top {
  margin-top: 10px;
}

.carina-time-range-picker--underline .carina-time-range-picker__outer-container.carina-time-range-picker__outer-container--all {
  margin-top: 39.5px;
}

.carina-time-range-picker__inner-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
}

.carina-time-range-picker__separator {
  color: var(--carina-text-color-base);
  display: flex;
  align-items: center;
  align-self: flex-end;
  height: 40px;
  padding-right: var(--carina-spacing-2);
  padding-left: var(--carina-spacing-2);
}

.carina-time-range-picker__separator--disabled,
.carina-time-range-picker__separator--read-only {
  color: var(--carina-text-color-disabled);
}

.carina-time-range-picker--outline,
.carina-time-range-picker--underline {
  position: relative;
}

.carina-time-range-picker--outline .carina-time-range-picker__label.carina-time-range-picker__label--all {
  top: -29.5px;
}

.carina-time-range-picker--outline .carina-time-range-picker__separator {
  height: 42px;
  margin-top: 10px;
}

.carina-time-range-picker--underline .carina-time-range-picker__label.carina-time-range-picker__label--all {
  top: -39.5px;
}

.carina-time-range-picker--underline .carina-time-range-picker__label--only-top {
  top: -10px;
}

.carina-time-range-picker--underline .carina-time-range-picker__separator {
  height: 42px;
}

.carina-array-field__button-container {
  margin-bottom: var(--carina-spacing-6);
}

.carina-forms__read-only-text {
  width: 100%;
  padding-top: var(--carina-spacing-1);
  padding-bottom: var(--carina-spacing-0-5);

  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-md);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.carina-forms__read-only-text__no-entry {
  color: var(--carina-text-color-soft);

  -webkit-user-select: none;

     -moz-user-select: none;

          user-select: none;
}

.carina-link-list-item__heading {
  font-size: var(--carina-font-size-body-xl);
  line-height: var(--carina-line-height-tight);
}

.carina-link-list-item__heading--block {
    font-weight: var(--carina-font-weight-display);
    font-size: var(--carina-font-size-body-2xs);
    text-transform: uppercase;
  }

.carina-link-list-item__link {
  display: inline-block;
  border: 0;

  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-normal);
  text-align: left;
  text-decoration: none;

  background: none;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-link-list-item__heading-subtext,
  .carina-link-list-item__subtext {
    display: block;
    margin-top: var(--carina-spacing-0-5);

    color: var(--carina-text-color-soft);
    font-size: var(--carina-font-size-body-2xs);
    line-height: var(--carina-line-height-normal);
  }

.carina-link-list-item--interactive {
  color: var(--carina-text-color-primary);

  cursor: pointer;
}

.carina-link-list-item--interactive .carina-link-list-item__link:hover {
    color: var(--carina-text-color-primary-hover);
    text-decoration: underline;
  }

.carina-link-list-item--interactive .carina-link-list-item__link:active {
    color: var(--carina-text-color-primary-active);
  }

.carina-link-list-item__li {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 var(--carina-spacing-2) 0;

  font-family: var(--carina-font-family-primary);
  letter-spacing: normal;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;

  list-style: none;

  padding-inline: var(--carina-spacing-1-5);
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-spacing-0);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;
}

.carina-link-list-item__li:focus-visible {
    border-radius: var(--carina-border-radius-md);
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-link-list-item__li--rebrand:focus-visible {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-link-list {
  margin: 0 0 var(--carina-spacing-4) 0;
  padding: 0;

  font-family: var(--carina-font-family-primary);
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;

  list-style: none;
}

.carina-link-list .carina-link-list-item__heading-subtext,
  .carina-link-list .carina-link-list-item__subtext {
    display: none;
  }

.carina-link-list--block {
    display: block;
    padding: 0;

    text-decoration: none;
  }

.carina-link-list--block .carina-link-list-item__heading-subtext,
    .carina-link-list--block .carina-link-list-item__subtext {
      display: block;
    }

.carina-link-list--block .carina-link-list-item--interactive:hover {
      background-color: var(--carina-background-color-surface-hover);
      cursor: pointer;
    }

.carina-link-list--block .carina-link-list-item--interactive:hover .carina-link-list-item__link {
        color: var(--carina-text-color-primary-hover);
        text-decoration: underline;
      }

.carina-link-list--block .carina-link-list-item__li {
        box-sizing: border-box;
        width: 100%;
        margin: 0;

        padding: var(--carina-spacing-4);

        border-top-width: 1px;
        border-top-style: solid;
      }

.carina-link-list--block .carina-link-list-item__li .carina-link-list-item__heading {
          font-weight: var(--carina-font-weight-display);
          font-size: var(--carina-font-size-body-2xs);
          line-height: var(--carina-line-height-tight);
          text-transform: uppercase;
        }

.carina-link-list--block .carina-link-list-item__li .carina-link-list-item__heading-subtext {
          line-height: var(--carina-line-height-tight);
          text-transform: uppercase;
        }

.carina-link-list--block .carina-link-list-item__li:last-child {
          border-bottom-width: 1px;
          border-bottom-style: solid;
        }

.carina-link-list--block .carina-link-list-item--inert,
      .carina-link-list--block .carina-link-list-item--interactive {
        border-color: var(--carina-border-color-soft);
      }

.carina-link-list--block.carina-link-list--small .carina-link-list-item__li {
    padding: var(--carina-spacing-2);
  }

.carina-link-list--block.carina-link-list--clean .carina-link-list-item__li {
    border: initial;
  }

.carina-link-list--block.carina-link-list--clean .carina-link-list-item__li:last-child {
      border: initial;
    }

@keyframes carina-loading-spinner--circle {
  0% {
    transform: rotateZ(var(--carina-rotate-0));
  }

  66% {
    transform: rotateZ(220deg);
  }

  100% {
    transform: rotateZ(var(--carina-rotate-360));
  }
}

@keyframes carina-loading-spinner--tail-chase-md {
  0% {
    stroke-dashoffset: 100;

    transform: rotateZ(var(--carina-rotate-0));
  }

  50% {
    stroke-dashoffset: 0;

    transform: rotateZ(var(--carina-rotate-45));
  }

  100% {
    stroke-dashoffset: 100;

    transform: rotateZ(var(--carina-rotate-360));
  }
}

@keyframes carina-loading-spinner--tail-chase-lg {
  0% {
    stroke-dashoffset: 240;

    transform: rotateZ(var(--carina-rotate-0));
  }

  50% {
    stroke-dashoffset: 0;

    transform: rotateZ(var(--carina-rotate-45));
  }

  100% {
    stroke-dashoffset: 240;

    transform: rotateZ(var(--carina-rotate-360));
  }
}

.carina-loading-spinner {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--carina-spacing-8);
  overflow: visible;

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-lg);
  font-family: var(--carina-font-family-primary);

  transform-origin: 50% 50%;
}

.carina-loading-spinner--textinline {
  flex-direction: row;
  margin-right: var(--carina-spacing-2);
  margin-bottom: var(--carina-spacing-8);
}

.carina-loading-spinner__circle {
  width: 78px;
  height: 78px;
  margin: 33px;

  overflow: visible;

  transform-origin: 50% 50%;

  animation: carina-loading-spinner--circle 3773ms linear infinite;

  fill: transparent;

  stroke: var(--carina-background-color-neutral-inactive);
  stroke-linecap: round;
  stroke-width: 6px;
  stroke-dasharray: 600;
}

.carina-loading-spinner__circle--lg {
  stroke-dasharray: 900;

  width: 178px;
  height: 178px;
}

.carina-loading-spinner__tail-chaser {
  transform-origin: 50% 50%;

  animation: carina-loading-spinner--tail-chase-md 2450ms linear infinite;
  stroke-dasharray: 175;
  stroke-width: 6px;

  fill: transparent;
}

.carina-loading-spinner__tail-chaser--lg {
  transform-origin: 50% 50%;

  animation: carina-loading-spinner--tail-chase-lg 2450ms linear infinite;
  stroke-dasharray: 400;
  stroke-width: 6px;

  fill: transparent;
}

.carina-loading-spinner__text {
  position: relative;

  justify-content: center;
  height: auto;
  margin: 0;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-lg);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-display-2xs);
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.carina-loading-spinner__text--textinline {
  display: inline-block;
  margin-left: var(--carina-spacing-2);
}

.carina-loading-spinner__gradient-color-1 {
  stop-color: var(--carina-background-color-secondary);
}

.carina-loading-spinner__gradient-color-2 {
  stop-color: var(--carina-background-color-primary);
}

.carina-loading-spinner__gradient-color-3 {
  stop-color: var(--carina-background-color-tertiary);
}

.carina-loading-spinner__gradient-color-1--phase1,
.carina-loading-spinner__gradient-color-2--phase1,
.carina-loading-spinner__gradient-color-3--phase1,
.carina-loading-spinner__gradient-color-1--rebrand,
.carina-loading-spinner__gradient-color-2--rebrand,
.carina-loading-spinner__gradient-color-3--rebrand {
  stop-color: var(--carina-border-color-primary-focus);
}

.carina-panel {
  height: 100%;

  transform: none;
  opacity: var(--carina-opacity-100);

  --carina-z-index-current: var(--carina-z-index-panel);
  --carina-z-index-popper: calc(
    var(--carina-z-index-panel) + var(--carina-z-index-popper-diff)
  );
  --carina-z-index-scrim: calc(
    var(--carina-z-index-panel) + var(--carina-z-index-scrim-diff)
  );
  --carina-panel-width: 480px;
}

.carina-panel--inline {
  overflow: visible;
}

.carina-panel__outer-container {
  --carina-collapse-size: var(--carina-panel-width);
  border-color: var(--carina-border-color-soft);
  border-style: solid;
  border-inline-start-width: var(--carina-border-width-1);

  position: fixed;
  top: var(--carina-spacing-0);
  bottom: var(--carina-spacing-0);
  z-index: var(--carina-z-index-panel);

  box-sizing: border-box;

  width: var(--carina-collapse-size);
  /* stylelint-disable-next-line unit-allowed-list */
  max-width: 100vw;
  max-height: 100vh;

  overflow: hidden;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  background-color: var(--carina-background-color-surface);
  outline: none;

  box-shadow: var(--carina-box-shadow-2xl);

  transform: translateX(var(--carina-transition-translate-x));
}

.carina-panel--start .carina-panel__outer-container {
  inset-inline-start: var(--carina-spacing-0);
  border-inline-start-width: var(--carina-border-width-0);
  border-inline-end-width: var(--carina-border-width-1);
}

.carina-panel--end .carina-panel__outer-container {
  inset-inline-end: var(--carina-spacing-0);
}

.carina-panel__content-container {
  --carina-collapse-size: initial;

  box-sizing: border-box;
  width: var(--carina-panel-width);
  max-width: 100vw;
  height: 100%;
  overflow: hidden;

  opacity: var(--carina-transition-opacity);

  transition-duration: var(--carina-transition-duration-200);
}

.carina-panel__scrim {
  opacity: var(--carina-transition-opacity);
}

/** TRANSITIONS **/

.carina-panel--expressive .carina-panel__outer-container,
  .carina-panel--expressive .carina-panel__scrim {
    transition-duration: var(--carina-transition-duration-400);
  }

.carina-panel--productive .carina-panel__outer-container,
  .carina-panel--productive .carina-panel__scrim,
  .carina-transition--out .carina-panel__outer-container,
  .carina-transition--out .carina-panel__scrim {
    transition-duration: var(--carina-transition-duration-200);
  }

.carina-panel--productive.carina-panel--scrim.carina-transition--in .carina-panel__outer-container,
.carina-panel--productive .carina-panel__content-container,
.carina-panel--expressive.carina-transition--out .carina-panel__content-container {
  transition-delay: var(--carina-transition-delay-200);
}

.carina-panel--expressive.carina-panel--scrim.carina-transition--in .carina-panel__outer-container,
.carina-panel--expressive.carina-transition--in .carina-panel__content-container,
.carina-panel--productive.carina-panel--scrim.carina-transition--in .carina-panel__content-container {
  transition-delay: var(--carina-transition-delay-400);
}

.carina-panel--expressive.carina-panel--scrim.carina-transition--in .carina-panel__content-container {
  transition-delay: var(--carina-transition-delay-800);
}

/* needed to prevent fixed position children from being constrained within the panel container instead of the viewport.
For example, any component that uses a scrim (which is fixed positioned) such as DatePicker in mobile viewport or Modal */

.carina-panel.carina-transition--enter-done,
.carina-panel.carina-transition--appear-done {
  transform: none;
}

.carina-panel.carina-transition--enter-done .carina-panel__outer-container, .carina-panel.carina-transition--appear-done .carina-panel__outer-container {
    transform: none;
  }

.carina-panel.carina-transition--enter-done .carina-panel__content-container, .carina-panel.carina-transition--appear-done .carina-panel__content-container {
    transform: none;
  }

@media not (prefers-reduced-motion) {
  .carina-transition--out .carina-panel__outer-container {
    --carina-transition-translate-x: 100%;

    box-shadow: none;
  }

  [dir='rtl'] .carina-transition--out .carina-panel__outer-container,
  .carina-panel--start.carina-transition--out .carina-panel__outer-container {
    --carina-transition-translate-x: -100%;
  }

  [dir='rtl'] .carina-panel--start.carina-transition--out .carina-panel__outer-container {
    --carina-transition-translate-x: 100%;
  }
}

/** large screen inline panel styles (Panel is forced elevated when on md and less) **/

@media (min-width: 1024px) {
  .carina-panel--inline .carina-panel__outer-container {
    position: static;

    height: 100%;

    box-shadow: none;
  }
    .carina-panel--productive.carina-panel--inline.carina-panel--scrim .carina-panel__outer-container, .carina-panel--expressive.carina-panel--inline.carina-panel--scrim .carina-panel__outer-container {
      transition-delay: 0ms;
    }

  .carina-panel__scrim--inline {
    display: none;
  }

  .carina-panel--productive .carina-panel__content-container,
  .carina-panel--expressive.carina-transition--out .carina-panel__content-container {
    transition-delay: 0ms;
  }

  .carina-panel--productive.carina-transition--in .carina-panel__content-container,
  .carina-panel--productive.carina-panel--scrim.carina-transition--in .carina-panel__content-container {
    transition-delay: var(--carina-transition-delay-200);
  }

  .carina-panel--expressive.carina-transition--in .carina-panel__content-container,
  .carina-panel--expressive.carina-panel--scrim.carina-transition--in .carina-panel__content-container {
    transition-delay: var(--carina-transition-delay-400);
  }

  @media not (prefers-reduced-motion) {
    .carina-panel--inline.carina-transition--out .carina-panel__outer-container,
    [dir='rtl'] .carina-panel--inline.carina-transition--out .carina-panel__outer-container {
      --carina-transition-translate-x: 0;
    }
    .carina-panel--inline.carina-transition--out .carina-panel__outer-container {
      --carina-collapse-size: 0px;
    }
  }
}

/** REDUCED MOTION **/

@media (prefers-reduced-motion) {
  .carina-panel .carina-panel__scrim,
  .carina-panel .carina-panel__content-container,
  .carina-panel .carina-panel__outer-container {
    transition-timing-function: var(--carina-transition-timing-function-linear);
    transition-duration: var(--carina-transition-duration-reduced-motion);
  }

  .carina-panel__outer-container {
    opacity: var(--carina-transition-opacity);
  }

  .carina-panel.carina-panel--expressive.carina-panel--scrim .carina-panel__content-container,
  .carina-panel.carina-panel--productive.carina-panel--scrim .carina-panel__content-container,
  .carina-panel.carina-panel--expressive .carina-panel__content-container,
  .carina-panel.carina-panel--productive .carina-panel__content-container {
    transition-delay: 0ms;
  }
}

.carina-scroll-view-with-bars {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  box-sizing: border-box;
  width: 100%;
  max-width: inherit;
  height: 100%;
  max-height: inherit;
  overflow: hidden;
}

.carina-scroll-view-with-bars__header {
  flex-grow: 0;
  flex-shrink: 0;

  overflow: visible;

  transition: box-shadow var(--carina-transition-duration-200)
    var(--carina-transition-timing-function-productive-ease-in-out);
}

.carina-scroll-view-with-bars__header--shadow {
  z-index: calc(var(--carina-z-index-current) + 1);

  box-shadow: var(--carina-box-shadow-lg);
}

.carina-scroll-view-with-bars__footer {
  flex-grow: 0;
  flex-shrink: 0;

  overflow: visible;

  transition: box-shadow var(--carina-transition-duration-200)
    var(--carina-transition-timing-function-productive-ease-in-out);
}

.carina-scroll-view-with-bars__footer--shadow {
  z-index: calc(var(--carina-z-index-current) + 1);

  box-shadow: var(--carina-box-shadow-reverse-lg);
}

.carina-scroll-view-with-bars__scroll-view {
  position: relative;

  flex-grow: 1;
  flex-shrink: 1;

  width: 100%;

  height: 100%;
  max-height: 100vh;

  overflow-y: auto;

  outline-color: var(--carina-colors-transparent);
  outline-offset: calc(var(--carina-border-width-2) * -1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);
}

.carina-scroll-view-with-bars__scroll-view:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
  }

.carina-skip-link {
  position: absolute;

  /* 2px offset is to ensure entire focus ring is visible */
  top: 2px;
  left: 2px;
  z-index: var(--carina-z-index-modal);

  min-width: 112px;
  padding-top: var(--carina-spacing-3) var(--carina-spacing-6);

  border: 0;

  color: var(--carina-text-color-primary);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);
  text-align: center;
  text-decoration: none;

  background-color: var(--carina-background-color-surface);

  cursor: pointer;
}

.carina-navigation-next__app-switcher-button {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 40px;
  width: 40px;
  height: 40px;
  border-radius: var(--carina-border-radius-full);
  margin-top: var(--carina-spacing-0-5);
  margin-bottom: var(--carina-spacing-3);
  margin-inline-start: var(--carina-spacing-5);
  margin-inline-end: var(--carina-spacing-5);

  background-image: linear-gradient(
    85deg,
    var(--carina-colors-primary-70) 50%,
    var(--carina-colors-secondary-50) 95%
  );
}

@container (min-width: 5.01rem) {

.carina-navigation-next__app-switcher-button {
    height: 40px;
    width: calc(100% - 2 * var(--carina-spacing-4));
    margin-inline-start: var(--carina-spacing-4);
    margin-inline-end: var(--carina-spacing-4)
}
    .carina-navigation-next__app-switcher-button .carina-navigation-next__app-switcher-button-icon-container {
      padding: var(--carina-spacing-0);
      padding-inline-start: var(--carina-spacing-2);
    }
  }

.carina-navigation-next__app-switcher-button{

  cursor: pointer;
}

.carina-navigation-next__app-switcher-button::before {
    position: absolute;
    border-radius: var(--carina-border-radius-full);
    display: block;
    z-index: -1;

    background-image: linear-gradient(
      85deg,
      var(--carina-colors-primary-70) 0%,
      var(--carina-colors-primary-60) 60%,
      var(--carina-colors-secondary-40) 100%
    );
    opacity: 0;

    content: '';
    inset: 0;
  }

@container (min-width: 5.01rem) {

.carina-navigation-next__app-switcher-button::before {
      width: calc(100% - 2 * var(--carina-spacing-3));
      height: 40px
  }
    }

.carina-navigation-next__app-switcher-button:hover::before {
      z-index: 0;

      opacity: 1;
      width: 100%;

      transition: opacity var(--carina-transition-duration-100)
        var(--carina-transition-timing-function-productive-ease-out);
    }

.carina-navigation-next__app-switcher-button:focus-within {
    border-radius: var(--carina-border-radius-full);
    outline: var(--carina-border-width-2) solid
      var(--carina-border-color-inverse-focus);
  }

@media not (prefers-reduced-motion) {

.carina-navigation-next__app-switcher-button {
    transition:
      height var(--carina-transition-duration-100)
        var(--carina-transition-timing-function-productive-ease-out),
      margin var(--carina-transition-duration-100)
        var(--carina-transition-timing-function-productive-ease-out)
}
  }

@media (prefers-reduced-motion) {

.carina-navigation-next__app-switcher-button {
    transition: all var(--carina-transition-timing-function-linear)
      var(--carina-transition-duration-reduced-motion)
}
  }

.carina-navigation-next__app-switcher-button--rebrand {
    background-image: unset;
    border-color: var(--carina-border-color-inverse);
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__app-switcher-button--rebrand::before {
      background-image: unset;
      background-color: var(--carina-background-color-surface-alt);
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__app-switcher-button--rebrand:focus-within {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__app-switcher-button-icon-container {
  z-index: 1;

  display: flex;
  align-items: center;

  justify-content: left;
  padding: var(--carina-spacing-3);
  padding-inline-start: var(--carina-spacing-2);
}

@container (width: 16.5rem) {

.carina-navigation-next__app-switcher-button-icon {
    justify-content: center
}
  }

.carina-navigation-next__app-switcher-button-text-container {
  display: none;
}

@container (min-width: 16.5rem) {

.carina-navigation-next__app-switcher-button-text-container {
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline-start: var(--carina-spacing-2);

    color: var(--carina-text-color-base-inverse);
    line-height: normal
}
  }

.carina-navigation-next__app-switcher-button-text {
  font-size: var(--carina-font-size-md);
}

.carina-navigation-next__app-switcher-menu {
  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
  height: 100vh;
  width: 100%;
  margin-inline-end: var(--carina-spacing-0-5);
  position: relative;
  padding: var(--carina-spacing-4);
  overflow-y: auto;
}

.carina-navigation-next__app-switcher-menu-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.carina-navigation-next__app-switcher-menu-heading-button {
  height: 2.75rem;
  width: 2.75rem;
}

.carina-navigation-next__app-switcher-menu-heading-text {
  font-size: var(--carina-font-size-display-xs);
  margin: var(--carina-spacing-6) var(--carina-spacing-2);
  width: calc(100% - 3.75rem);
  word-wrap: break-word;
}

.carina-navigation-next__app-switcher-menu-list {
  margin: var(--carina-spacing-4) var(--carina-spacing-2)
    var(--carina-spacing-0) var(--carina-spacing-2);
  padding: var(--carina-spacing-0);
}

.carina-navigation-next__app-switcher-menu-card {
  position: relative;
  display: flex;
  width: 17rem;
  height: 100%;
  margin: var(--carina-spacing-2) var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-4)
    var(--carina-spacing-2) var(--carina-spacing-2);

  border-radius: var(--carina-border-radius-xl);

  cursor: pointer;
}

.carina-navigation-next__app-switcher-menu-card:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__app-switcher-menu-card:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__app-switcher-menu-card-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--carina-border-radius-2xl);
}

.carina-navigation-next__app-switcher-menu-card--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-navigation-next__app-switcher-menu-card--rebrand .carina-navigation-next__app-switcher-menu-card-icon-container {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__app-switcher-menu-card-icon-container--background-0 {
  background-image: linear-gradient(#179aeb, #015fb5);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-1 {
  background-image: linear-gradient(#05a5a5, #047885);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-2 {
  background-image: linear-gradient(#00a882, #008265);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-3 {
  background-image: linear-gradient(#ed7118, #e71063);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-4 {
  background-image: linear-gradient(#ff558a, #c538b7);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-5 {
  background-image: linear-gradient(#cc3dbe, #772adb);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-6 {
  background-image: linear-gradient(#179aeb, #772adb);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-7 {
  background-image: linear-gradient(#77a11e, #009070);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-8 {
  background-image: linear-gradient(#ed7118, #c538b7);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--background-9 {
  background-image: linear-gradient(#179aeb, #00a882);
}

.carina-navigation-next__app-switcher-menu-card-icon-container--current {
  outline: var(--carina-spacing-0-5) solid var(--carina-border-color-primary);
  outline-offset: calc(1.5 * var(--carina-spacing-0-5));
}

.carina-navigation-next__app-switcher-menu-card-text-container {
  display: flex;
  flex-direction: column;
  margin-inline-start: var(--carina-spacing-4);
  width: 11.5rem;
}

.carina-navigation-next__app-switcher-menu-card-heading {
  display: flex;
  align-items: center;
  margin: var(--carina-spacing-0);

  font-size: var(--carina-font-size-body-lg);
  line-height: var(--carina-line-height-header-5);
}

.carina-navigation-next__app-switcher-menu-card-link {
  text-decoration: none;
  color: var(--carina-text-color-base);
}

.carina-navigation-next__app-switcher-menu-card-link:focus-within {
    outline: 0;
  }

.carina-navigation-next__app-switcher-menu-card-link::after {
    content: '';
    inset: 0;
    position: absolute;
  }

.carina-navigation-next__app-switcher-menu-card-description {
  margin: var(--carina-spacing-0-5) var(--carina-spacing-0);
  line-height: var(--carina-line-height-normal);
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
  word-wrap: break-word;
}

.carina-navigation-next__mega-menu {
  --carina-border-color-secondary-focus: #00c89b;

  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 400px;
  max-width: 100vw;
  overflow-x: scroll;
  padding: var(--carina-spacing-6);

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-surface);
  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
  border-inline-start: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);
}

.carina-navigation-next__mega-menu.carina-navigation-next__mega-menu--rebrand {
    --carina-border-color-secondary-focus: var(
      --carina-colors-secondary-70
    ) !important;
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
    background-color: var(--carina-background-color-surface-alt);
  }

.carina-navigation-next__mega-menu{
  box-shadow: var(--carina-box-shadow-lg);
}

.carina-navigation-next__mega-menu-list {
  height: calc(100% - 2.5rem);
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* row gap stacks sections; column gap separates visual columns */
  gap: var(--carina-spacing-2) var(--carina-spacing-4);
}

.carina-navigation-next__mega-menu-buttons {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.carina-navigation-next__mega-menu-link {
  display: flex;
  margin: var(--carina-spacing-0-5) var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  padding-inline-end: var(--carina-spacing-2);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-sm);
  cursor: pointer;

  flex-direction: row;
  align-items: center;
}

.carina-navigation-next__mega-menu-link:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__mega-menu-link:hover a {
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__mega-menu-link:hover.carina-navigation-next__mega-menu-link--rebrand:hover {
      background-color: var(--carina-background-color-surface-hover);
    }

.carina-navigation-next__mega-menu-link:focus-within {
    box-shadow: var(--carina-ring-base);
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__mega-menu-link a {
    display: flex;
    border-radius: var(--carina-border-radius-xl);
    align-items: center;

    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-body-sm);
    text-decoration: none;
  }

.carina-navigation-next__mega-menu-link a:focus-visible {
      outline: 0;
    }

.carina-navigation-next__mega-menu-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__mega-menu-link--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__mega-menu-link--rebrand:has(.carina-navigation-next__mega-menu-link__indicator--current) {
      background-color: var(--carina-background-color-surface-selected);
    }

.carina-navigation-next__mega-menu-link--header {
  font-weight: var(--carina-font-weight-display);
  margin: var(--carina-spacing-0-5) var(--carina-spacing-0);
}

.carina-navigation-next__mega-menu-link--header a {
    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-md);
    padding: var(--carina-spacing-1) var(--carina-spacing-0);
  }

.carina-navigation-next__mega-menu-link--current {
  background-color: var(--carina-background-color-surface-alt);
}

.carina-navigation-next__mega-menu-link--current a {
    color: var(--carina-text-color-base);
    font-weight: var(--carina-font-weight-semi-bold);
  }

.carina-navigation-next__mega-menu-link--disabled {
  background-color: transparent;
  cursor: default;
}

.carina-navigation-next__mega-menu-link--disabled:hover {
    background-color: transparent;
  }

.carina-navigation-next__mega-menu-link--disabled:hover a {
      color: var(--carina-text-color-disabled);
    }

.carina-navigation-next__mega-menu-link--disabled:focus-within {
    outline: 0;
    background-color: transparent;
  }

.carina-navigation-next__mega-menu-link--disabled a {
    cursor: default;
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__mega-menu-link--disabled a:hover {
      color: var(--carina-text-color-disabled);
      background-color: transparent;
    }

.carina-navigation-next__mega-menu-link--disabled a:focus-visible {
      outline: 0;
    }

.carina-navigation-next__mega-menu-link--disabled svg {
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__mega-menu-link__indicator {
  align-self: stretch;
  background-color: var(--carina-border-color-secondary-focus);
  border-radius: var(--carina-border-radius-xl);
  margin: var(--carina-spacing-0-5) var(--carina-spacing-1);
  visibility: hidden;
  width: 0.25rem;
  flex-shrink: 0;
}

.carina-navigation-next__mega-menu-link--rebrand .carina-navigation-next__mega-menu-link__indicator {
    border-radius: var(--carina-border-radius-sm);
    background-color: var(--carina-background-color-primary) !important;
  }

.carina-navigation-next__mega-menu-link__indicator--current {
  visibility: visible;
}

.carina-navigation-next__mega-menu-link__link {
  margin: var(--carina-spacing-0-5) var(--carina-spacing-0);
  word-break: break-word;
  width: 100%;
}

.carina-navigation-next__mega-menu-link__link--header {
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__mega-menu-link__icon {
  visibility: hidden;
  margin-inline-end: var(--carina-spacing-2);
  flex-shrink: 0;
}

.carina-navigation-next__mega-menu-link__icon--header {
  visibility: visible;
}

.carina-navigation-next__mega-menu-link__spacer {
  width: var(--carina-spacing-3);
}

.carina-navigation-next__mega-menu-link:not(.carina-navigation-next__mega-menu-link--header) .carina-navigation-next__mega-menu-link__indicator {
    margin: var(--carina-spacing-1) var(--carina-spacing-0)
      var(--carina-spacing-1) var(--carina-spacing-4);
  }

.carina-navigation-next__mega-menu-link:not(.carina-navigation-next__mega-menu-link--header) .carina-navigation-next__mega-menu-link__link {
    margin-inline-start: var(--carina-spacing-2);
  }

.carina-navigation-next__mega-menu-link--r2 {
  padding-inline-start: var(--carina-spacing-2);
}

.carina-navigation-next__mega-menu-link--r2.carina-navigation-next__mega-menu-link--current {
  background-color: var(--carina-background-color-surface-selected);
}

.carina-navigation-next__mega-menu-link--r2:not(.carina-navigation-next__mega-menu-link--header) .carina-navigation-next__mega-menu-link__link {
    margin-inline-start: var(--carina-spacing-4);
  }

.carina-navigation-next__mega-menu-neighborhood {
  flex-shrink: 0;
}

.carina-navigation-next__mega-menu-neighborhood > div {
    height: 100%;
  }

/* Heading row: label text + rule */

.carina-navigation-next__mega-menu-neighborhood__heading {
  padding-block: var(--carina-spacing-1);
}

.carina-navigation-next__mega-menu-neighborhood__title {
  display: block;
  text-transform: uppercase;
  color: var(--carina-text-color-soft, #646465);
  font-family: var(--carina-font-family-mono, "Suisse Int'l Mono");
  font-size: var(--carina-font-size-body-2xs, 12px);
  letter-spacing: 0.05em;
}

.carina-navigation-next__mega-menu-neighborhood__rule {
  border: none;
  border-top: 1px solid var(--carina-border-color-base, #757677);
  margin: 0;
  margin-block-start: var(--carina-spacing-1);
}

.carina-navigation-next__mega-menu-neighborhood__sections {
  margin: 0;
  padding: 0;
  list-style: none;
  -moz-column-gap: var(--carina-spacing-4);
       column-gap: var(--carina-spacing-4);
  row-gap: var(--carina-spacing-1-5);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.carina-navigation-next__mega-menu-section {
  height: -moz-min-content;
  height: min-content;
  /* Prevents splitting when the parent neighborhood uses CSS column layout */
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  /* Flex item sizing for the outer mega-menu list */
  flex-shrink: 0;
  width: 200px;
}

.carina-navigation-next__mega-menu-section__list {
  margin: var(--carina-spacing-0-5) var(--carina-spacing-0);
  padding: var(--carina-spacing-0-5) var(--carina-spacing-0);
}

@media (max-width: 767.98px) {

.carina-navigation-next__mobile-navigation-container {
    --carina-navigation-mobile-header-height: 56px;
    --carina-navigation-mobile-z-index: 100;
    --carina-collapse-min-size: auto;

    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--carina-shell-banner-current-height, 0rem));
    overflow: hidden;
    position: relative
}
  }

@media (prefers-reduced-motion) {
    .carina-navigation-next__mobile-navigation-container .carina-transition {
      transition-timing-function: inherit;
      transition-duration: inherit;
    }

    .carina-navigation-next__mobile-navigation-container .carina-transition--slide-left-in,
    .carina-navigation-next__mobile-navigation-container .carina-transition--slide-right-in {
      --carina-transition-translate-x: 0;
      --carina-transition-translate-y: 0;
    }

    .carina-navigation-next__mobile-navigation-container .carina-transition--slide-right-out {
      --carina-transition-translate-x: -100%;
    }

    .carina-navigation-next__mobile-navigation-container .carina-transition--slide-left-out {
      --carina-transition-translate-x: 100%;
    }
  }

.carina-navigation-next__mobile-navigation-container__object-layer {
  --carina-background-color-surface-hover: #dedfe0;

  position: absolute;
  width: 100%;
  top: var(--carina-navigation-mobile-header-height, 56px);
  z-index: var(--carina-navigation-mobile-z-index, 100);
  height: calc(100% - var(--carina-navigation-mobile-header-height));
  overflow: hidden;
  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
  display: flex;
  flex-direction: column;
}

.carina-navigation-next__mobile-navigation-container__object-layer .carina-navigation-next__object-sidebar-dropdown {
    margin-bottom: var(--carina-spacing-2);
  }

.carina-navigation-next__mobile-navigation-container__object-layer--rebrand {
    --carina-background-color-surface-hover: var(
      --carina-colors-surface-10
    ) !important;
    background-color: var(--carina-background-color-surface-alt);
  }

@media (min-width: 768px) {

.carina-navigation-next__mobile-navigation-container__object-layer {
    display: none
}
  }

.carina-navigation-next__mobile-navigation-container__solution-layer {
  width: 100%;
  top: var(--carina-navigation-mobile-header-height, 56px);
  z-index: calc(var(--carina-navigation-mobile-z-index, 100) + 1);
  height: calc(100vh - var(--carina-navigation-mobile-header-height, 56px));
  overflow: hidden;
}

@media (min-width: 768px) {

.carina-navigation-next__mobile-navigation-container__solution-layer {
    display: none
}
  }

.carina-navigation-next__mobile-navigation-container__solution-layer-container {
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
}

.carina-navigation-next__mobile-navigation-container__solution-layer-scroll {
  padding: var(--carina-spacing-1) var(--carina-spacing-0);
}

@media (max-width: 767.98px) {

.carina-navigation-next__mobile-navigation-container__main {
    position: absolute;
    top: var(--carina-navigation-mobile-header-height);
    overflow: auto;
    height: calc(
      100vh - var(--carina-shell-banner-current-height, 0rem) -
        var(--carina-navigation-mobile-header-height)
    )
}
  }

.carina-navigation-next__mobile-navigation-container__community-panel {
  display: flex;
  height: 100vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--carina-background-color-surface);
}

.carina-navigation-next__mobile-navigation-container__user-profile-panel {
  display: flex;
  flex-direction: column;
  background-color: var(--carina-background-color-surface);
}

.carina-navigation-next__mobile-navigation-container__user-profile-panel-button {
  margin: var(--carina-spacing-4) var(--carina-spacing-6)
    var(--carina-spacing-0-5) var(--carina-spacing-0);
  align-self: end;
  padding: var(--carina-spacing-1);
}

.carina-navigation-next__mobile-navigation-container__skip-link {
  display: flex;
  border-radius: var(--carina-border-radius-xl);
  border-width: var(--carina-border-width-2);
  background-color: var(--carina-background-color-primary);
  color: var(--carina-text-color-on-primary);
  box-shadow: none;
  justify-content: center;
  outline: 0;
}

.carina-navigation-next__mobile-navigation-container__skip-link:focus + .carina-navigation-next__mobile-navigation-container__header {
    position: absolute;
    left: -9999px;
  }

@media (min-width: 768px) {

.carina-navigation-next__mobile-navigation-container__skip-link {
    display: none
}
  }

.carina-navigation-next__mobile-navigation-container__skip-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__mobile-navigation-container__skip-link--rebrand:focus {
    outline-color: var(--carina-border-color-primary-focus);
    outline-offset: 1px;
    outline-width: 2px;
    outline-style: solid;
  }

.carina-navigation-next__mobile-navigation-header {
  --carina-navigation-mobile-header-height: 56px;

  display: flex;
  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--carina-navigation-mobile-header-height);
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 768px) {

.carina-navigation-next__mobile-navigation-header {
    display: none
}
  }

.carina-navigation-next__mobile-navigation-header__logo-container {
  flex-shrink: 2;
  height: 100%;
  color: var(--carina-text-color-base);
}

.carina-navigation-next__mobile-navigation-header__logo-container:focus-visible {
    outline: var(--carina-border-width-2) var(--carina-border-color-hard) solid;
    outline-offset: calc(var(--carina-spacing-1) * -1);
    border-radius: var(--carina-border-radius-2xl);
  }

.carina-navigation-next__mobile-navigation-header__logo-container .carina-navigation-next__solution-navigation-logo__svg {
    position: relative;
  }

.carina-navigation-next__mobile-navigation-header__logo-container .carina-navigation-next__solution-navigation-logo__svg > g {
    transform: translate(0, -4px);
  }

.carina-navigation-next__mobile-navigation-header__logo-container--rebrand:focus-visible {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__mobile-navigation-header__logo {
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-4);
  height: 100%;
  width: auto;
  max-height: 100%;
  max-width: 100%;
}

.carina-navigation-next__mobile-navigation-header__logo:focus-within {
    border-radius: var(--carina-border-radius-lg);
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__mobile-navigation-header__logo--rebrand:focus-within {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__mobile-navigation-header__logo .carina-navigation-next__solution-navigation-logo__svg-animation-group {
    transform: translate(0, var(--carina-spacing-4)) scale(2);
  }

.carina-navigation-next__mobile-navigation-header__end-button {
  margin-top: var(--carina-spacing-2);
  margin-inline-end: var(--carina-spacing-4);
  margin-bottom: var(--carina-spacing-2);
  margin-inline-start: var(--carina-spacing-0);
}

.carina-navigation-next__mobile-navigation-header__end-button:focus-within {
    border-radius: var(--carina-border-radius-lg);
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__mobile-navigation-header__end-button--rebrand:focus-within {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__mobile-navigation-header__logo--rebrand .carina-navigation-next__solution-navigation-logo__svg:focus-visible {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-mobile-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.carina-navigation-next__object-mobile-container__solution-bar {
  display: flex;
  margin: var(--carina-spacing-4);
  width: calc(100vw - 2 * var(--carina-spacing-4));
  align-items: center;
  cursor: pointer;
}

.carina-navigation-next__object-mobile-container__solution-bar:focus-within {
    border-radius: var(--carina-border-radius-lg);
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__object-mobile-container__solution-bar--rebrand:focus-within {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-mobile-container__solution-bar-icon {
  margin-inline-end: var(--carina-spacing-2);
}

[dir='rtl'] .carina-navigation-next__object-mobile-container__solution-bar-icon {
    transform: rotate(180deg);
  }

.carina-navigation-next__object-mobile-container__solution-bar-text {
  display: flex;
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-xl);
  font-weight: var(--carina-font-weight-display);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__object-mobile-container__object-header-container {
  border-top-left-radius: var(--carina-border-radius-lg);
  border-top-right-radius: var(--carina-border-radius-lg);
  margin: var(--carina-spacing-0) var(--carina-spacing-4);
}

.carina-navigation-next__object-mobile-container__object-header-container--rebrand {
    border-top-left-radius: var(--carina-border-radius-sm);
    border-top-right-radius: var(--carina-border-radius-sm);
    border-bottom-color: var(--carina-border-color-soft);
    border-bottom-width: var(--carina-border-width-1);
    border-bottom-style: solid;
  }

.carina-navigation-next__object-mobile-container__object-header-container--r2 {
    background-color: var(--carina-colors-surface-10);
  }

.carina-navigation-next__object-mobile-container__object-layer-scroll {
  display: flex;
  margin: auto;
  flex-direction: column;
  width: calc(100% - 2 * var(--carina-spacing-4));
  background-color: var(--carina-background-color-surface-alt);
  padding: var(--carina-spacing-2) var(--carina-spacing-1-5);
}

.carina-navigation-next__object-mobile-container__object-layer-container {
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-navigation-next__solution-mobile-container {
  display: flex;
  flex-direction: column;
}

.carina-navigation-next__solution-mobile-container-dropdown-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  width: 100%;
}

.carina-navigation-next__solution-mobile-container-dropdown-list--r2 {
  gap: var(--carina-spacing-1);
}

.carina-navigation-next__navigation-community {
  display: flex;
  flex-direction: column;
  align-items: center;

  max-height: 800px;
  height: 800px;

  width: 420px;
  padding: var(--carina-spacing-6);

  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
}

.carina-navigation-next__navigation-community.carina-navigation-next__navigation-community--rebrand {
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__navigation-community{

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-surface);
}

.carina-navigation-next__navigation-community-header {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-lg);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__navigation-community-description {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-body-sm);
  margin: var(--carina-spacing-4) var(--carina-spacing-0);
  text-align: center;
}

.carina-navigation-next__navigation-community-image {
  height: 224px;
  width: 224px;
  margin-top: var(--carina-spacing-12);
}

.carina-navigation-next__navigation-flyout__trigger-container {
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  list-style: none;
}

.carina-navigation-next__navigation-flyout__popper.carina-popper {
  border-width: var(--carina-border-width-0);
}

.carina-navigation-next__search-box {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--carina-spacing-3);
}

.carina-navigation-next__search-box__header {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-header-4);
  font-weight: var(--carina-font-weight-display);
  margin: var(--carina-spacing-2-5);
  line-height: var(--carina-line-height-header-4);
}

.carina-navigation-next__search-item {
  display: flex;
  padding: var(--carina-spacing-0) var(--carina-spacing-2);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-sm);
  align-items: center;
  height: 100%;
  cursor: pointer;
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__search-item:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__search-item:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__search-item a {
    display: flex;
    min-height: 1.5rem;
    width: 100%;
    border-radius: var(--carina-border-radius-xl);

    align-items: center;
    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-body-sm);
    line-height: normal;
    text-decoration: none;
  }

.carina-navigation-next__search-item a:focus-visible {
      outline: 0;
    }

.carina-navigation-next__search-item--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__search-item--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__search-item__start-icon {
  margin-inline-end: var(--carina-spacing-2);
}

.carina-navigation-next__search-item__link {
  margin: var(--carina-spacing-2) var(--carina-spacing-0);
  flex: 1 1 100%;
  word-break: break-word;
}

.carina-navigation-next__search-list__header {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-header-6);
  font-weight: var(--carina-font-weight-display);
  margin: var(--carina-spacing-2) var(--carina-spacing-0);
  line-height: var(--carina-line-height-header-6);
  padding-left: var(--carina-spacing-2);
}

.carina-navigation-next__search-list__list {
  padding: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-5);
}

.carina-navigation-next__navigation-user-profile {
  width: 100%;
  min-width: 15.5rem;
  padding: var(--carina-spacing-0);

  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
}

.carina-navigation-next__navigation-user-profile.carina-navigation-next__navigation-user-profile--rebrand {
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__navigation-user-profile{

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-surface);
}

@media (min-width: 768px) {

.carina-navigation-next__navigation-user-profile {
    padding: var(--carina-spacing-2)
}
  }

.carina-navigation-next__navigation-user-profile::before {
    content: '';
    height: 2.5rem;
    width: 2rem;
    position: absolute;
    bottom: 0.125rem;
    left: -2rem;
    z-index: 1;
  }

.carina-navigation-next__navigation-user-profile__name {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-lg);
  font-weight: var(--carina-font-weight-display);
  margin: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-spacing-3) var(--carina-spacing-0);
}

.carina-navigation-next__navigation-user-profile__email,
.carina-navigation-next__navigation-user-profile__id {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-xs);
  line-height: var(--carina-line-height-3);
}

.carina-navigation-next__navigation-user-profile__scroll .carina-scroll-view-with-bars__scroll-view {
    padding-top: var(--carina-spacing-4);
    padding-inline-start: var(--carina-spacing-4);
    padding-inline-end: var(--carina-spacing-4);
    padding-bottom: var(--carina-spacing-4);

    /* Subtract the icon button height and its padding-top */
    max-height: calc(100vh - 40px - var(--carina-spacing-4));
    overflow-x: hidden;
    position: static;
    scrollbar-color: var(--carina-border-color-primary)
      var(--carina-background-color-surface);
    scrollbar-width: thin;
  }

.carina-navigation-next__navigation-user-profile__list {
  display: flex;
  margin: var(--carina-spacing-0);
  padding-top: var(--carina-spacing-2);
  padding-inline-start: var(--carina-spacing-0);
  padding-inline-end: var(--carina-spacing-0);
  padding-bottom: var(--carina-spacing-0);
  flex-direction: column;
  list-style-type: none;
  margin-inline-start: calc(-1 * var(--carina-spacing-2));
  margin-inline-end: calc(-1 * var(--carina-spacing-2));
}

.carina-navigation-next__navigation-user-profile__account-list,
.carina-navigation-next__navigation-user-profile__list-item {
  padding: var(--carina-spacing-0);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__navigation-user-profile__account-list {
  margin-inline-start: calc(-1 * var(--carina-spacing-2));
  margin-inline-end: calc(-1 * var(--carina-spacing-2));
}

.carina-navigation-next__navigation-user-profile__account-list > * {
    margin-bottom: var(--carina-spacing-1);
  }

.carina-navigation-next__navigation-user-profile__account-list > *:last-child {
      margin-bottom: var(--carina-spacing-0);
    }

.carina-navigation-next__navigation-user-profile__link,
.carina-navigation-next__navigation-user-profile__account-link {
  display: flex;
  border-radius: var(--carina-border-radius-xl);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2-5);
  text-decoration: none;
  align-items: center;
}

@media (min-width: 768px) {

.carina-navigation-next__navigation-user-profile__link,
.carina-navigation-next__navigation-user-profile__account-link {
    padding: var(--carina-spacing-1-5) var(--carina-spacing-2)
}
  }

.carina-navigation-next__navigation-user-profile__link:hover, .carina-navigation-next__navigation-user-profile__account-link:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__navigation-user-profile__link:focus-within, .carina-navigation-next__navigation-user-profile__account-link:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__navigation-user-profile__link--rebrand, .carina-navigation-next__navigation-user-profile__account-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__navigation-user-profile--expanded {
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 768px) {

.carina-navigation-next__navigation-user-profile--expanded {
    width: unset;
    min-width: 304px
}
  }

.carina-navigation-next__navigation-user-profile__container--expanded {
  text-align: center;
}

@media (min-width: 768px) {

.carina-navigation-next__navigation-user-profile__container--expanded {
    display: block;
    text-align: start
}
  }

.carina-navigation-next__navigation-user-profile__list-item--expanded {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.carina-navigation-next__navigation-user-profile__link--expanded {
  width: 100%;
}

.carina-navigation-next__navigation-user-profile__accounts-header {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-2xs);
  text-transform: uppercase;
  border-top: 1px solid var(--carina-border-color-soft);
  padding-top: var(--carina-spacing-4);
  margin-top: var(--carina-spacing-4);
}

.carina-navigation-next__navigation-user-profile__link-icon {
  margin-inline-end: var(--carina-spacing-2);
}

.carina-navigation-next__navigation-user-profile__account-link {
  display: grid;
  width: 100%;
  justify-content: space-between;
}

.carina-navigation-next__navigation-user-profile__account-link:hover .carina-navigation-next__navigation-user-profile__account-link-end {
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__navigation-user-profile__account-link-start {
  display: flex;
  color: var(--carina-text-color-base);
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.carina-navigation-next__navigation-user-profile__account-link-end {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-sm);
}

.carina-navigation-next__object-header-container {
  --carina-navigation-object-header-full-height: 80px;
  --carina-navigation-object-header-border-height: var(--carina-spacing-px);

  display: grid;
  grid-template-areas:
    'start'
    'end';
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;

  background-color: var(--carina-background-color-surface-alt);
  color: var(--carina-text-color-base);
  padding: var(--carina-spacing-4);
}

@media (min-width: 768px) {

.carina-navigation-next__object-header-container {
    grid-template-areas: 'start end';
    grid-template-rows: auto;
    grid-template-columns: 1fr min-content;
    height: calc(var(--carina-navigation-object-header-full-height));
    background-color: var(--carina-background-color-surface);
    border-bottom: var(--carina-navigation-object-header-border-height) solid
      var(--carina-border-color-soft)
}

.carina-navigation-next__object-header-container--rebrand {
      background-color: var(--carina-colors-surface-10)
  }
  }

.carina-navigation-next__object-header-container--r2 {
  background-color: var(--carina-colors-surface-10);
}

.carina-navigation-next__object-header-container .carina-navigation__title-bar {
  background: unset;
}

.carina-navigation-next__object-header-container__start {
  min-width: 320px;
  margin-inline-end: var(--carina-spacing-2);
}

.carina-navigation-next__object-header-container__end {
  height: 48px;
  margin-top: var(--carina-spacing-2);
  display: flex;
  align-items: center;
}

@media (min-width: 768px) {

.carina-navigation-next__object-header-container__end {
    margin-top: var(--carina-spacing-0)
}
  }

.carina-navigation-next__object-header-container__top {
  display: flex;
  width: 100%;
  align-items: center;
  margin: 0;
  padding-bottom: var(--carina-spacing-1);
}

.carina-navigation-next__object-header-container__top * {
  color: var(--carina-text-color-base);
}

.carina-navigation-next__object-header-container__top-breadcrumbs {
  width: calc(100% - 4rem);
}

.carina-navigation-next__object-header-container__top-chevron-container {
  display: none;
}

@media (min-width: 768px) {

.carina-navigation-next__object-header-container__top-chevron-container {
    display: flex;
    width: 24px
}
  }

.carina-navigation-next__object-header-container__top-icon-container {
  display: none;
}

@media (min-width: 768px) {

.carina-navigation-next__object-header-container__top-icon-container {
    display: flex;
    width: 32px;
    margin-inline-end: var(--carina-spacing-2)
}
  }

.carina-navigation-next__object-header-container__top-breadcrumbs-root {
  font-size: var(--carina-font-size-sm);
  white-space: nowrap;
}

.carina-navigation-next__object-header-container__top-breadcrumbs-object {
  display: block;

  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  font-weight: var(--carina-font-weight-bold);
  font-size: var(--carina-font-size-lg);
}

.carina-navigation-next__object-header-container__top-breadcrumbs-root,
.carina-navigation-next__object-header-container__top-chevron {
  display: none;
}

@media (min-width: 640px) {

.carina-navigation-next__object-header-container__top-breadcrumbs-root,
.carina-navigation-next__object-header-container__top-chevron {
    display: none
}
  }

@media (min-width: 768px) {

.carina-navigation-next__object-header-container__top-breadcrumbs-root,
.carina-navigation-next__object-header-container__top-chevron {
    display: flex
}
  }

.carina-navigation-next__object-header-container__top-chevron {
  margin: var(--carina-spacing-0) var(--carina-spacing-1);
}

.carina-navigation-next__object-header-container__top-end-content > * {
  display: flex;
  font-size: var(--carina-font-size-sm);
}

.carina-navigation-next__object-header-container__lower-container {
  display: flex;
  flex-direction: column;
  font-size: var(--carina-font-size-sm);
}

@media (min-width: 640px) {

.carina-navigation-next__object-header-container__lower-container {
    flex-direction: row
}
  }

@media (min-width: 768px) {

.carina-navigation-next__object-header-container__lower-start-text {
    margin-bottom: var(--carina-spacing-0)
}
  }

.carina-navigation-next__object-header-container__lower-divider-icon {
  display: none;
}

@media (min-width: 640px) {

.carina-navigation-next__object-header-container__lower-divider-icon {
    display: block;
    height: 12px;
    width: 0px;
    border: 1px solid var(--carina-border-color-base);
    margin: auto var(--carina-spacing-3)
}
  }

.carina-navigation-next__object-navigation-link {
  display: flex;
  padding: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-sm);
  align-items: center;
  min-height: 2rem;
  cursor: pointer;
}

.carina-navigation-next__object-navigation-link:hover,
  .carina-navigation-next__object-navigation-link:focus-within {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__object-navigation-link:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__object-navigation-link a {
    display: flex;
    align-self: stretch;
    width: 100%;
    border-radius: var(--carina-border-radius-xl);

    align-items: center;
    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-body-sm);
    line-height: var(--carina-line-height-body-sm);
    text-decoration: none;
    padding-inline-end: var(--carina-spacing-2-5);
  }

.carina-navigation-next__object-navigation-link a:hover,
    .carina-navigation-next__object-navigation-link a:focus-within {
      color: var(--carina-text-color-base);
      outline: 0;
    }

.carina-navigation-next__object-navigation-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-navigation-link--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__object-navigation-link--rebrand:has(.carina-navigation-next__object-navigation-link__indicator--current) {
      background-color: var(--carina-background-color-surface-selected);
    }

/* phase2 drops the indicator node; compensate with equivalent inline-start padding */

.carina-navigation-next__object-navigation-link--r2 a {
      padding-inline-start: calc(var(--carina-spacing-1) + 0.25rem + var(--carina-spacing-1));
    }

.carina-navigation-next__object-navigation-link--current {
  background-color: var(--carina-background-color-surface-selected);
}

.carina-navigation-next__object-navigation-link--current a {
    color: var(--carina-text-color-base);
    font-weight: var(--carina-font-weight-bold);
  }

.carina-navigation-next__object-navigation-link--disabled {
  background-color: transparent;
  cursor: default;
}

.carina-navigation-next__object-navigation-link--disabled:hover,
  .carina-navigation-next__object-navigation-link--disabled:focus-within {
    background-color: transparent;
  }

.carina-navigation-next__object-navigation-link--disabled:focus-within {
    outline: 0;
  }

.carina-navigation-next__object-navigation-link--disabled a {
    color: var(--carina-text-color-disabled);
    pointer-events: none;
  }

.carina-navigation-next__object-navigation-link--disabled a:focus-visible {
      outline: 0;
    }

.carina-navigation-next__object-navigation-link__indicator {
  align-self: stretch;
  background-color: var(--carina-border-color-secondary-focus);
  border-radius: var(--carina-border-radius-xl);
  margin: var(--carina-spacing-1-5) var(--carina-spacing-1);
  visibility: hidden;
  width: 0.25rem;
}

.carina-navigation-next__object-navigation-link__indicator--rebrand {
    border-radius: var(--carina-border-radius-sm);
    background-color: var(--carina-background-color-primary) !important;
  }

.carina-navigation-next__object-navigation-link__indicator--current {
  visibility: visible;
}

.carina-navigation-next__object-navigation-link__trailing-node {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-start: auto;
  padding-inline-start: var(--carina-spacing-2);
}

.carina-navigation-next__object-navigation-menu {
  --carina-background-color-surface: #eeeff0;
  --carina-background-color-surface-active: #f6f7f7;
  --carina-background-color-surface-hover: #dedfe0;
  --carina-background-color-surface-selected: #f6f7f7;
  --carina-border-color-secondary-focus: #00c89b;

  max-width: 15.5rem;
  padding: var(--carina-spacing-6);
  background-color: var(--carina-background-color-surface);

  box-shadow: var(--carina-box-shadow-lg);

  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
}

.carina-navigation-next__object-navigation-menu.carina-navigation-next__object-navigation-menu--rebrand {
    --carina-background-color-surface: var(--carina-colors-surface-0) !important;
    --carina-background-color-surface-active: var(--carina-colors-surface-20) !important;
    --carina-background-color-surface-hover: var(--carina-colors-surface-10) !important;
    --carina-background-color-surface-selected: var(--carina-colors-surface-20) !important;
    --carina-border-color-secondary-focus: var(--carina-colors-secondary-70) !important;
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
    background-color: var(--carina-background-color-surface-alt);
  }

.carina-navigation-next__object-navigation-menu::before {
    content: '';
    height: 2.5rem;
    width: 2rem;
    position: absolute;
    top: calc(50% - 1.25rem);
    left: -2rem;
    z-index: 1;
  }

.carina-popper:has(> .carina-navigation-next__object-navigation-menu) {
  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
}

.carina-popper:has(> .carina-navigation-next__object-navigation-menu--rebrand) {
  border-start-end-radius: var(--carina-border-radius-sm);
  border-end-end-radius: var(--carina-border-radius-sm);
}

.carina-navigation-next__object-navigation-menu__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--carina-spacing-2);
}

.carina-navigation-next__object-navigation-menu__heading-icon {
  margin-inline-end: var(--carina-spacing-2);
}

.carina-navigation-next__object-navigation-menu__heading-text {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-lg);
  font-weight: var(--carina-font-weight-display);
  line-height: var(--carina-line-height-body-lg);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__object-navigation-menu__description {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-xs);
}

.carina-navigation-next__object-navigation-menu__list {
  margin: var(--carina-spacing-2) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-navigation-next__object-sidebar-collapse {
  --carina-navigation-object-sidebar-full-width: 240px;
  --carina-navigation-object-sidebar-compact-width: 64px;

  width: 100%;
  min-width: var(--carina-navigation-object-sidebar-compact-width);
}

@media (min-width: 1024px) {

.carina-navigation-next__object-sidebar-collapse {
    min-width: var(--carina-navigation-object-sidebar-full-width)
}
  }

.carina-navigation-next__object-sidebar-container {
  --carina-background-color-surface-active: #f6f7f7;
  --carina-background-color-surface-hover: #dedfe0;
  --carina-background-color-surface-selected: #f6f7f7;
  --carina-border-color-secondary-focus: #00c89b;

  container-type: inline-size;
  container-name: object;

  height: calc(
    100vh - var(--carina-shell-banner-current-height) -
      var(--carina-shell-title-current-height)
  );

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-surface);

  position: relative;
}

.carina-navigation-next__object-sidebar-container--rebrand {
    --carina-background-color-surface-active: var(--carina-colors-surface-20) !important;
    --carina-background-color-surface-hover: var(--carina-colors-surface-10) !important;
    --carina-background-color-surface-selected: var(--carina-colors-surface-20) !important;
    --carina-border-color-secondary-focus: var(--carina-colors-secondary-70) !important;
    background-color: var(--carina-background-color-surface-alt);
  }

.carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-link,
  .carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-dropdown {
    margin: var(--carina-spacing-0);
    min-height: 40px;
    padding: 0;
    padding-inline-end: var(--carina-spacing-2);
  }

@media (min-width: 1024px) {

.carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-link,
  .carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-dropdown {
      padding-inline-end: 0
  }
    }

.carina-navigation-object-sidebar-container-scroll .carina-navigation-next__object-sidebar-dropdown {
    margin-top: var(--carina-spacing-0-5);
    margin-bottom: var(--carina-spacing-2);
  }

.carina-navigation-object-sidebar-container-scroll .carina-scroll-view-with-bars__footer {
    margin: var(--carina-spacing-0);
    padding: var(--carina-spacing-2);
    padding-inline-end: var(--carina-spacing-3);
  }

.carina-navigation-object-sidebar-container-scroll
    .carina-scroll-view-with-bars__footer
    .carina-navigation-next__object-sidebar-link__content {
    margin-top: 0;
  }

.carina-navigation-object-sidebar-container-scroll .carina-scroll-view-with-bars__scroll-view {
    overscroll-behavior: contain;
    position: static;
    scrollbar-width: thin;
  }

.carina-navigation-next__object-sidebar-container-container {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 100%;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-3) var(--carina-spacing-2-5);
}

@container object (max-width: 4.25rem) {

.carina-navigation-next__object-sidebar-container-container {
    align-items: flex-start
}
  }

.carina-navigation-next__object-sidebar-container-container > div,
.carina-navigation-next__object-sidebar-container-container > .carina-navigation-next__object-sidebar-segment,
.carina-navigation-next__object-sidebar-container-container
  > .carina-navigation-next__navigation-flyout__trigger-container {
  width: 100%;
}

.carina-navigation-next__object-sidebar-dropdown {
  display: flex;
  width: 100%;
  padding: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-sm);
  justify-content: center;
  min-height: 2rem;
  cursor: pointer;
  flex-direction: column;
}

@media (min-width: 768px) {

.carina-navigation-next__object-sidebar-dropdown {
    width: 100%;
    min-width: 42px
}

    @container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-dropdown {
      width: 100%
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown a {
    padding: var(--carina-spacing-0) var(--carina-spacing-2);
    border-radius: var(--carina-border-radius-xl);

    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-body-md);
    text-decoration: none;
  }

.carina-navigation-next__object-sidebar-dropdown:hover .carina-navigation-next__object-sidebar-dropdown__start-icon,
    .carina-navigation-next__object-sidebar-dropdown:hover .carina-navigation-next__object-sidebar-dropdown__title,
    .carina-navigation-next__object-sidebar-dropdown:hover .carina-navigation-next__object-sidebar-dropdown__chevron {
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__object-sidebar-dropdown--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__object-sidebar-dropdown__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--carina-spacing-1) var(--carina-spacing-3);
}

.carina-navigation-next__object-sidebar-dropdown__row:active {
    background-color: var(--carina-background-color-surface-active);
  }

.carina-navigation-next__object-sidebar-dropdown__row:hover {
    background-color: var(--carina-background-color-surface);
    border-radius: var(--carina-border-radius-xl);
  }

.carina-navigation-next__object-sidebar-dropdown__row--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown__row--rebrand:hover {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown__row:focus-within {
    border-radius: var(--carina-border-radius-xl);
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__object-sidebar-dropdown__row--rebrand:focus-within {
    border-radius: var(--carina-border-radius-sm);
  }

@media (min-width: 768px) {

.carina-navigation-next__object-sidebar-dropdown__row {
    padding: var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-spacing-0) var(--carina-spacing-2-5)

    /* styles when collapsed */
}
    @container object (max-width: 4.25rem) {

.carina-navigation-next__object-sidebar-dropdown__row {
      padding-left: var(--carina-spacing-0)
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown--disabled {
  background-color: transparent;
  pointer-events: none;
}

.carina-navigation-next__object-sidebar-dropdown--disabled a {
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__object-sidebar-dropdown--disabled a:focus-visible {
      box-shadow: var(--carina-ring-base);
      outline: 0;
    }

.carina-navigation-next__object-sidebar-dropdown--disabled svg {
    color: var(--carina-text-color-disabled);
  }

@media (min-width: 768px) {
    @container object (max-width: 4.25rem) {

.carina-navigation-next__object-sidebar-dropdown__indicator {
      width: 4px;
      margin: var(--carina-spacing-0) var(--carina-spacing-0-5)
        var(--carina-spacing-0) var(--carina-spacing-0-5)
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown__indicator--current {
  border-radius: var(--carina-border-radius-xl);
  height: 20px;
  width: 4px;
  background-color: var(--carina-border-color-secondary-focus);
  margin: 0 var(--carina-spacing-1) 0 var(--carina-spacing-0-5);
  flex-shrink: 0;

  display: none;
}

@media (min-width: 768px) {
    @container object (max-width: 13.99rem) {

.carina-navigation-next__object-sidebar-dropdown__indicator--current {
      display: block
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown__indicator--current--rebrand {
    background-color: var(--carina-background-color-primary);
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown-link__indicator {
  border-radius: var(--carina-border-radius-xl);
  height: 20px;
  width: 4px;
  background-color: var(--carina-border-color-secondary-focus);
  margin: var(--carina-spacing-0) var(--carina-spacing-3)
    var(--carina-spacing-0) var(--carina-spacing-1);
  flex-shrink: 0;
}

.carina-navigation-next__object-sidebar-dropdown-link__indicator--rebrand {
    background-color: var(--carina-background-color-primary) !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown__start-icon {
  color: var(--carina-text-color-base);
  min-width: 20px;
}

.carina-navigation-next__object-sidebar-dropdown__start-icon--current {
  color: var(--carina-text-color-base);
}

.carina-navigation-next__object-sidebar-dropdown__title {
  padding-inline-start: var(--carina-spacing-2);
  color: var(--carina-text-color-base);
}

@media (min-width: 768px) {

.carina-navigation-next__object-sidebar-dropdown__title {
    padding-inline-start: var(--carina-spacing-2-5);
    opacity: 0;
    clip: rect(0, 0, 0, 0);
    height: 0px;
    width: 1px;
    position: absolute
}

    @container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-dropdown__title {
      opacity: 1;
      clip: unset;
      height: unset;
      width: unset;
      position: static
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown__title:hover {
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__object-sidebar-dropdown__title:focus-within {
    outline: 0;
  }

.carina-navigation-next__object-sidebar-dropdown__chevron {
  color: var(--carina-text-color-base);
  margin-inline-start: auto;
}

@media (min-width: 768px) {

.carina-navigation-next__object-sidebar-dropdown__chevron {
    display: none
}

    @container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-dropdown__chevron {
      display: block
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown__chevron--link {
  display: none;
}

.carina-navigation-next__object-sidebar-dropdown__dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  border-radius: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-border-radius-xl) var(--carina-border-radius-xl);
  margin: var(--carina-spacing-1) var(--carina-spacing-0);
  padding-inline-start: var(--carina-spacing-0);
}

/* Hide dropdown when container is collapsed on desktop only */

@media (min-width: 768px) {
    @container object (max-width: 13.99rem) {

.carina-navigation-next__object-sidebar-dropdown__dropdown {
      display: none
}
    }
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown * {
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown--rebrand {
    border-radius: var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-border-radius-sm) var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown--expanded,
.carina-navigation-next__object-sidebar-dropdown--force-expanded {
  background-color: var(--carina-background-color-surface-selected);
}

.carina-navigation-next__object-sidebar-dropdown--expanded.carina-navigation-next__object-sidebar-dropdown--r2,
.carina-navigation-next__object-sidebar-dropdown--force-expanded.carina-navigation-next__object-sidebar-dropdown--r2 {
  background-color: transparent;
}

.carina-navigation-next__object-sidebar-dropdown__row--current.carina-navigation-next__object-sidebar-dropdown__row--r2 {
  background-color: var(--carina-background-color-surface-selected);
  font-weight: var(--carina-font-weight-semi-bold);
}

.carina-navigation-next__object-sidebar-dropdown--expanded,
.carina-navigation-next__object-sidebar-dropdown__title--expanded,
.carina-navigation-next__object-sidebar-dropdown__start-icon--expanded,
.carina-navigation-next__object-sidebar-dropdown__dropdown--expanded {
  color: var(--carina-text-color-base);
}

.carina-navigation-next__object-sidebar-dropdown--force-expanded .carina-navigation-next__object-sidebar-dropdown__title,
.carina-navigation-next__object-sidebar-dropdown--force-expanded .carina-navigation-next__object-sidebar-dropdown__start-icon,
.carina-navigation-next__object-sidebar-dropdown--force-expanded .carina-navigation-next__object-sidebar-dropdown__dropdown,
.carina-navigation-next__object-sidebar-dropdown--force-expanded .carina-navigation-next__object-sidebar-dropdown__row:hover {
  color: var(--carina-text-color-base);
}

@container object (min-width: 4.25rem) {

.carina-navigation-next__object-sidebar-dropdown--force-expanded .carina-navigation-next__object-sidebar-dropdown__row {
    padding-top: var(--carina-spacing-1-5);
    padding-bottom: var(--carina-spacing-1-5)
}
  }

.carina-navigation-next__object-sidebar-dropdown__title--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item {
  display: flex;
  align-items: center;
  text-align: start;
  width: 100%;
  padding: var(--carina-spacing-0) var(--carina-spacing-1);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item:has(.carina-navigation-next__object-sidebar-dropdown__dropdown-link--disabled) {
    cursor: default;
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link {
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-body-lg);
  display: flex;
  align-items: center;
  padding-inline-start: var(--carina-spacing-9);
  padding-top: var(--carina-spacing-1);
  padding-bottom: var(--carina-spacing-1);
  width: 100%;
  border-radius: var(--carina-border-radius-xl);
}

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link:hover {
    background-color: var(--carina-background-color-surface-hover);
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
    width: 100%;
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link:has(.carina-navigation-next__object-sidebar-dropdown-link__indicator) {
    padding-inline-start: var(--carina-spacing-4);
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link--current {
  font-weight: var(--carina-font-weight-display);
}

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link--current.carina-navigation-next__object-sidebar-dropdown__dropdown-link--r2 {
  font-weight: var(--carina-font-weight-semi-bold);
  background-color: var(--carina-background-color-surface-selected);
}

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link--disabled {
  background-color: transparent;
  pointer-events: none;

  color: var(--carina-text-color-disabled);
}

.carina-navigation-next__object-sidebar-dropdown__dropdown-list-item .carina-navigation-next__object-sidebar-dropdown__dropdown-link--disabled:focus-visible {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__object-sidebar-header {
  box-sizing: border-box;
  display: flex;
  gap: var(--carina-spacing-2);
  align-items: center;
  justify-content: flex-start;
  padding-inline-start: var(--carina-spacing-2-5);
  padding-inline-end: var(--carina-spacing-0);
  padding-top: var(--carina-spacing-3);
  padding-bottom: var(--carina-spacing-4);
  position: relative;
  flex-shrink: 0;
  width: 100%;
}

@container object (max-width: 4.25rem) {

.carina-navigation-next__object-sidebar-header {
    display: none
}
  }

.carina-navigation-next__object-sidebar-header__icon {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  flex-shrink: 0;
}

.carina-navigation-next__object-sidebar-header__icon--rebrand {
    color: var(--carina-text-color-soft);
  }

.carina-navigation-next__object-sidebar-header__icon--r2 {
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__object-sidebar-header__title {
  font-family: var(--carina-font-family-display);
  font-size: var(--carina-font-size-header-6);
  font-weight: var(--carina-font-weight-display);
  line-height: var(--carina-line-height-header-4);
  position: relative;
  flex-shrink: 0;
  color: var(--carina-text-color-base);
  white-space: nowrap;
}

@media (min-width: 768px) {

.carina-navigation-next__object-sidebar-header__title {
    font-size: var(--carina-font-size-header-4)
}
  }

@container (max-width: 4.25rem) {

.carina-navigation-next__object-sidebar-header__title {
    display: none
}
  }

.carina-navigation-next__object-sidebar-link {
  display: flex;
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-sm);
  align-items: center;
  min-height: 2rem;
  cursor: pointer;
  width: 100%;
  min-width: 42px;
  padding-inline-start: 0;
}

.carina-navigation-next__object-sidebar-link:active .carina-navigation-next__object-sidebar-link__content {
    background-color: var(--carina-background-color-surface-active);
  }

.carina-navigation-next__object-sidebar-link:focus-within .carina-navigation-next__object-sidebar-link__content {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__object-sidebar-link:hover .carina-navigation-next__object-sidebar-link__content {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__object-sidebar-link a,
  .carina-navigation-next__object-sidebar-link button {
    display: flex;
    width: 100%;
    text-decoration: none;
  }

.carina-navigation-next__object-sidebar-link a:focus-visible, .carina-navigation-next__object-sidebar-link button:focus-visible {
      outline: 0;
    }

.carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-link a,
  .carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-link button {
    margin-inline-start: calc(var(--carina-spacing-1) / 2);
  }

@container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-link {
    width: 100%
}
  }

.carina-navigation-next__object-sidebar-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__object-sidebar-link--current .carina-navigation-next__object-sidebar-link__content {
  background-color: var(--carina-background-color-surface-selected);
  font-weight: var(--carina-font-weight-semi-bold);
}

.carina-navigation-next__object-sidebar-link--disabled,
.carina-navigation-next__object-sidebar-link--disabled-style-only {
  background-color: transparent;
}

.carina-navigation-next__object-sidebar-link--disabled:hover .carina-navigation-next__object-sidebar-link__content, .carina-navigation-next__object-sidebar-link--disabled-style-only:hover .carina-navigation-next__object-sidebar-link__content {
    background-color: transparent;
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__object-sidebar-link--disabled:focus-within .carina-navigation-next__object-sidebar-link__content, .carina-navigation-next__object-sidebar-link--disabled-style-only:focus-within .carina-navigation-next__object-sidebar-link__content {
    outline: 0;
  }

.carina-navigation-next__object-sidebar-link--disabled a:focus-visible, .carina-navigation-next__object-sidebar-link--disabled button:focus-visible, .carina-navigation-next__object-sidebar-link--disabled-style-only a:focus-visible, .carina-navigation-next__object-sidebar-link--disabled-style-only button:focus-visible {
      outline: 0;
    }

.carina-navigation-next__object-sidebar-link--disabled-style-only .carina-navigation-next__object-sidebar-link__content,
.carina-navigation-next__object-sidebar-link--disabled .carina-navigation-next__object-sidebar-link__content {
  color: var(--carina-text-color-disabled);
  cursor: pointer;
}

.carina-navigation-next__object-sidebar-link--disabled-style-only .carina-navigation-next__object-sidebar-link__content svg, .carina-navigation-next__object-sidebar-link--disabled .carina-navigation-next__object-sidebar-link__content svg {
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__object-sidebar-link--disabled {
  pointer-events: none;
}

.carina-navigation-next__object-sidebar-link--disabled-style-only {
  cursor: default;
}

.carina-navigation-next__object-sidebar-link--disabled-style-only a,
  .carina-navigation-next__object-sidebar-link--disabled-style-only button {
    cursor: default;
  }

.carina-navigation-next__object-sidebar-link__indicator {
  align-self: stretch;
  background-color: var(--carina-border-color-secondary-focus);
  border-radius: var(--carina-border-radius-xl);
  visibility: hidden;
  width: 0.25rem;
  margin: var(--carina-spacing-0-5) var(--carina-spacing-0-5)
    var(--carina-spacing-0-5) var(--carina-spacing-1);
}

.carina-navigation-next__object-sidebar-link__indicator--rebrand {
    border-radius: var(--carina-border-radius-sm);
    background-color: var(--carina-background-color-primary) !important;
  }

.carina-navigation-next__object-sidebar-link__indicator--current {
  visibility: visible;
}

.carina-navigation-next__object-sidebar-link__spacer {
  min-width: var(--carina-spacing-5);
  height: var(--carina-spacing-5);
  width: var(--carina-spacing-5);
}

.carina-navigation-next__object-sidebar-link__start-icon {
  min-width: 20px;
}

.carina-navigation-next__object-sidebar-link__link {
  width: 100%;
  height: 100%;
}

.carina-navigation-next__object-sidebar-link__content {
  display: inline-flex;
  width: 100%;
  min-height: 32px;
  height: auto;

  border-radius: var(--carina-border-radius-xl);

  align-items: center;
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
  line-height: normal;

  margin: var(--carina-spacing-1) var(--carina-spacing-0);
  padding: var(--carina-spacing-1) var(--carina-spacing-0);
  word-break: break-word;

  transition: max-height var(--carina-transition-duration-300)
    var(--carina-transition-timing-function-productive-ease-out);
}

@container (min-width: 15rem) {

.carina-navigation-next__object-sidebar-link__content {
    display: flex;
    width: 100%
}

    .carina-navigation-next__object-sidebar-link__content:focus-within {
      outline: 0;
    }
  }

.carina-navigation-next__object-sidebar-link__content--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

@container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-link__content--r2 {
      padding-inline-start: var(--carina-spacing-3);
      padding-inline-end: var(--carina-spacing-0-5)
  }
    }

.carina-navigation-next__object-sidebar-link__chevron {
  min-width: 20px;
  opacity: var(--carina-opacity-0);
}

.carina-navigation-next__object-sidebar-link__chevron--flyout {
  margin-inline-start: var(--carina-spacing-2-5);
}

[dir='rtl'] .carina-navigation-next__object-sidebar-link__chevron--flyout {
    transform: rotate(180deg);
  }

@container (min-width: 15rem) {

.carina-navigation-next__object-sidebar-link:hover .carina-navigation-next__object-sidebar-link__chevron--flyout,
  .carina-navigation-next__object-sidebar-link:focus-within .carina-navigation-next__object-sidebar-link__chevron--flyout {
      opacity: var(--carina-opacity-100)
  }
    }

.carina-navigation-next__object-sidebar-link__children-wrapper {
  flex-grow: 2;
  text-align: start;
  margin-inline-start: var(--carina-spacing-2);

  /* @apply sr-only; */
  opacity: 0;
  clip: rect(0, 0, 0, 0);
  height: 0px;
  width: unset;
  position: absolute;
}

@container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-link__children-wrapper {
    /* @apply not-sr-only--focus; */
    height: unset;
    width: -moz-min-content;
    width: min-content;
    clip: unset;
    opacity: 1;
    position: static
}
  }

.carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-link__children-wrapper {
    height: unset;
    width: -moz-min-content;
    width: min-content;
    clip: unset;
    opacity: 1;
    position: static;
  }

.carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-link__content--r2 {
    padding-inline-start: var(--carina-spacing-2);
    padding-inline-end: var(--carina-spacing-2);
  }

.carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-link {
    width: 100%;
  }

@container object (max-width: calc(15rem - 1px)) {
  .carina-navigation-next__object-sidebar-link--rebrand .carina-navigation-next__object-sidebar-link__children-wrapper {
    display: none;
  }

  .carina-navigation-next__object-sidebar-link--rebrand .carina-navigation-next__object-sidebar-link__chevron,
  .carina-navigation-next__object-sidebar-link--rebrand .carina-navigation-next__object-sidebar-link__chevron--flyout {
    display: none;
  }

.carina-navigation-next__object-sidebar-link__content--rebrand {
    justify-content: center;
    padding-inline-start: 0;
    padding-inline-end: 0
}
}

.carina-navigation-next__object-sidebar-segment {
  padding-inline-start: var(--carina-spacing-0);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__object-sidebar-segment__header {
  text-transform: uppercase;
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-xs);
  line-height: var(--carina-line-height-body-xs);
  font-weight: var(--carina-font-weight-display);
  font-family: var(--carina-font-family-body);
  display: none;
  padding: var(--carina-spacing-3) var(--carina-spacing-0)
    var(--carina-spacing-2-5) var(--carina-spacing-3);
}

.carina-navigation-next__object-sidebar-segment__header div {
    margin-inline-end: var(--carina-spacing-2);
    max-width: calc(100% - 28px);
    word-wrap: break-word;
  }

.carina-navigation-next__object-sidebar-segment__header svg {
    min-width: 20px;
  }

@container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-segment__header {
    display: flex;
    justify-content: space-between;
    align-items: center
}
  }

.carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-segment__header {
    display: flex;
    justify-content: space-between;
    padding: var(--carina-spacing-3);
  }

.carina-navigation-next__object-sidebar-segment > ul {
  margin: 0;
  padding: 0;
}

.carina-navigation-object-sidebar-container-scroll
  .carina-navigation-next__object-sidebar-segment
  .carina-navigation-next__object-sidebar-link {
  min-height: 40px;
}

.carina-navigation-next__object-sidebar-segment::before {
  content: '';
  display: block;
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  max-width: 24px;
  margin: 24px 0px 24px 8px;
}

@container object (min-width: 15rem) {

.carina-navigation-next__object-sidebar-segment::before {
    max-width: 100%;
    border-top: none;
    margin: 0;
    height: 0
}
  }

.carina-navigation-next__mobile-navigation-container .carina-navigation-next__object-sidebar-segment::before {
    max-width: 100%;
    border-top: none;
    margin: 0;
    height: 0;
  }

.carina-navigation-next__solution-navigation-link {
  display: flex;
  padding: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-sm);
  align-items: center;
  min-height: 2rem;
  cursor: pointer;
}

.carina-navigation-next__solution-navigation-link:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__solution-navigation-link:hover a {
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__solution-navigation-link:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__solution-navigation-link a {
    display: flex;
    align-self: stretch;
    width: 100%;
    border-radius: var(--carina-border-radius-xl);

    align-items: center;
    color: var(--carina-text-color-soft);
    font-size: var(--carina-font-size-body-sm);
    line-height: normal;
    text-decoration: none;
    padding-inline-end: var(--carina-spacing-2-5);
  }

.carina-navigation-next__solution-navigation-link a:focus-visible {
      outline: 0;
    }

.carina-navigation-next__solution-navigation-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-navigation-link--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__solution-navigation-link--current {
  background-color: var(--carina-background-color-surface-hover);
}

.carina-navigation-next__solution-navigation-link--current a {
    color: var(--carina-text-color-base);
    font-weight: bold;
  }

.carina-navigation-next__solution-navigation-link--current--r2 {
  background-color: transparent;
}

.carina-navigation-next__solution-navigation-link--current--r2 a {
    color: var(--carina-text-color-tertiary);
    font-weight: var(--carina-font-weight-semi-bold);
  }

.carina-navigation-next__solution-navigation-link--disabled {
  background-color: transparent;
  cursor: default;
}

.carina-navigation-next__solution-navigation-link--disabled:hover {
    background-color: transparent;
  }

.carina-navigation-next__solution-navigation-link--disabled:hover a {
      color: var(--carina-text-color-disabled);
    }

.carina-navigation-next__solution-navigation-link--disabled:focus-within {
    outline: 0;
  }

.carina-navigation-next__solution-navigation-link--disabled a {
    color: var(--carina-text-color-disabled);
    pointer-events: none;
  }

.carina-navigation-next__solution-navigation-link--disabled a:focus-visible {
      outline: 0;
    }

.carina-navigation-next__solution-navigation-link__indicator {
  align-self: stretch;
  background-color: var(--carina-border-color-secondary-focus);
  border-radius: var(--carina-border-radius-xl);
  margin: var(--carina-spacing-1-5) var(--carina-spacing-1);
  visibility: hidden;
  width: 0.25rem;
}

.carina-navigation-next__solution-navigation-link__indicator--rebrand {
    background-color: var(--carina-background-color-tertiary) !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-navigation-link__indicator--current {
  visibility: visible;
}

.carina-navigation-next__solution-navigation-link__trailing-node {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-start: auto;
  padding-inline-start: var(--carina-spacing-2);
}

.carina-navigation-next__solution-navigation-logo {
  --carina-navigation-logo-height: 80px;
  --carina-navigation-logo-width: 80px;
  --carina-navigation-logo-x-offset: var(--carina-spacing-7);
  --carina-navigation-logo-y-offset: var(--carina-spacing-6);
  --carina-navigation-logo-full-offset: var(--carina-spacing-24);
  background-color: color-mix(
    in srgb,
    var(--carina-background-color-primary) 50%,
    transparent
  );
  align-items: center;
  display: flex;
  height: calc(var(--carina-navigation-logo-height) - var(--carina-spacing-px));
  justify-content: center;
  width: 100%;
}

.carina-navigation-next__solution-navigation-logo a {
    align-items: center;
    color: var(--carina-text-color-base);
    display: flex;
    height: 100%;
    justify-content: center;
    outline: none;
    position: relative;
    text-decoration: none;
    width: 100%;
  }

.carina-navigation-next__solution-navigation-logo a:focus,
    .carina-navigation-next__solution-navigation-logo a:focus-visible {
      outline: var(--carina-border-width-2) var(--carina-border-color-hard)
        solid;
      outline-offset: calc(var(--carina-border-width-8) * -1);
      border-radius: var(--carina-border-radius-2xl);
    }

.carina-navigation-next__solution-navigation-logo--rebrand .carina-navigation-next__solution-navigation-logo a:focus, .carina-navigation-next__solution-navigation-logo--rebrand .carina-navigation-next__solution-navigation-logo a:focus-visible {
        border-radius: var(--carina-border-radius-sm);
      }

.carina-navigation-next__solution-navigation-logo img {
    height: var(--carina-navigation-logo-height);
    width: auto;
    max-width: 100%;
    max-height: 100%;
  }

.carina-navigation-next__solution-navigation-logo .carina-navigation-next__solution-navigation-logo__svg-animation-group {
    transform: translate(
      var(--carina-navigation-logo-x-offset),
      var(--carina-navigation-logo-y-offset)
    );
  }

.carina-navigation-next__solution-navigation-logo .carina-navigation-next__solution-navigation-logo__svg {
    height: var(--carina-navigation-logo-height);
  }

.carina-navigation-next__solution-navigation-logo .carina-navigation-next__solution-navigation-logo__svg-full {
    opacity: 0;
  }

@container (min-width: 264px) {

.carina-navigation-next__solution-navigation-logo {
    width: 100%
}

    .carina-navigation-next__solution-navigation-logo .carina-navigation-next__solution-navigation-logo__svg-animation-group {
      transform: translate(
        var(--carina-navigation-logo-full-offset),
        var(--carina-navigation-logo-y-offset)
      );
      transition-duration: var(--carina-transition-duration-100);
    }

    .carina-navigation-next__solution-navigation-logo .carina-navigation-next__solution-navigation-logo__svg-full {
      opacity: 1;
    }
  }

.carina-navigation-next__solution-navigation-logo:focus-within {
    outline: 0;
  }

.carina-navigation-next__solution-navigation-logo--rebrand {
  --carina-navigation-logo-x-offset: var(--carina-spacing-6);
  --carina-navigation-logo-full-offset: var(--carina-spacing-6);
  background-color: transparent;
}

.carina-navigation-next__solution-navigation-logo--r2 {
  --carina-navigation-logo-x-offset: var(--carina-spacing-5);
  --carina-navigation-logo-width: 72px;
  --carina-navigation-logo-full-offset: calc(
    var(--carina-spacing-20) + var(--carina-spacing-2)
  );
  background-color: transparent;
  height: calc(
    var(--carina-navigation-logo-container-height) - var(--carina-spacing-px)
  );
  width: var(--carina-navigation-logo-width);
}

.carina-navigation-next__solution-navigation-logo--r2 img {
    height: var(--carina-navigation-logo-container-height);
  }

.carina-navigation-next__solution-navigation-logo--expanded {
  width: calc(
    var(--carina-shell-dock-start-expanded-width) - 36px - 2 *
      var(--carina-spacing-3)
  );
}

.carina-navigation-next__solution-navigation-logo__svg {
  position: absolute;
  top: 0;
  left: 0;
}

@media (min-width: 768px) {

.carina-navigation-next__solution-navigation-logo__svg--r2 {
    margin-top: var(--carina-spacing-4);
    margin-left: var(--carina-spacing-3)
}
  }

.carina-navigation-next__solution-navigation-logo__svg-animation-group {
  transition-property: transform;
  transition-duration: 0ms;
  transition-delay: 0ms;
  transition-timing-function: var(--carina-transition-timing-function-linear);
}

@media (prefers-reduced-motion) {

.carina-navigation-next__solution-navigation-logo__svg-animation-group {
    transition-duration: var(--carina-transition-duration-reduced-motion)
}
  }

.carina-navigation-next__solution-navigation-logo__svg-compact,
  .carina-navigation-next__solution-navigation-logo__svg-full {
    transition-property: opacity;
    transition-duration: var(--carina-transition-duration-100);
    transition-timing-function: var(--carina-transition-timing-function-linear);
  }

@media (prefers-reduced-motion) {

.carina-navigation-next__solution-navigation-logo__svg-compact,
  .carina-navigation-next__solution-navigation-logo__svg-full {
      transition-duration: var(--carina-transition-duration-reduced-motion)
  }
    }

@media (min-width: 768px) {

.carina-navigation-next__solution-navigation-logo--compact {
    width: 100%
}
  }

.carina-navigation-next__solution-navigation-logo__compact {
  display: none;
  opacity: 0%;

  transition-property: opacity;
  transition-duration: var(--carina-transition-duration-200);
  transition-timing-function: var(--carina-transition-timing-function-linear);
}

@media (prefers-reduced-motion) {

.carina-navigation-next__solution-navigation-logo__compact {
    transition-duration: var(--carina-transition-duration-reduced-motion)
}
  }

@container (max-width: 4.51rem) {

.carina-navigation-next__solution-navigation-logo__compact {
    display: block;
    opacity: 100%;
    transform: translateX(50%)
}
  }

.carina-navigation-next__solution-navigation-logo__compact--compact:hover {
    display: block;
    opacity: 0%;
  }

.carina-navigation-next__solution-navigation-logo__full {
  display: block;
  opacity: 100%;

  transform: translateX(0%);
  transition-property: transform;
  transition-duration: var(--carina-transition-duration-200);
  transition-timing-function: var(--carina-transition-timing-function-linear);
}

@media (prefers-reduced-motion) {

.carina-navigation-next__solution-navigation-logo__full {
    transition-duration: var(--carina-transition-duration-reduced-motion)
}
  }

/* Using rem for sizing in this container query is necessary to make sure Safari uses the compact logo image when the sidebar is condensed but zoomed in.
  ** 4.51rem was chosen because the container has a width of 72px, which is equivalent to 4.5rem, and max-width is not inclusive (i.e. up to but not including the max-width value).
  */

@container (max-width: 4.51rem) {

.carina-navigation-next__solution-navigation-logo__full {
    display: none;
    opacity: 0%;
    transform: translateX(-50%)
}
  }

.carina-navigation-next__solution-navigation-logo__full--compact {
  display: flex;
  opacity: 0%;
}

@container (min-width: 264px) {

.carina-navigation-next__solution-navigation-logo__full--compact {
    opacity: 100%
}
  }

.carina-navigation-next__solution-navigation-menu {
  --carina-background-color-surface-active: #003673;
  --carina-background-color-surface-alt: #183f6d;
  --carina-background-color-surface-hover: #003673;
  --carina-background-color-surface-selected: #003673;
  --carina-border-color-secondary-focus: #00c89b;

  max-width: 15.5rem;
  padding: var(--carina-spacing-6);
  background-color: var(--carina-background-color-surface);

  box-shadow: var(--carina-box-shadow-lg);

  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
}

.carina-navigation-next__solution-navigation-menu.carina-navigation-next__solution-navigation-menu--rebrand {
    --carina-background-color-surface-active: var(
      --carina-colors-surface-90
    ) !important;
    --carina-background-color-surface-alt: var(
      --carina-colors-surface-90
    ) !important;
    --carina-background-color-surface-hover: var(
      --carina-colors-surface-80
    ) !important;
    --carina-background-color-surface-selected: var(
      --carina-colors-surface-70
    ) !important;
    --carina-border-color-secondary-focus: var(
      --carina-colors-primary-50
    ) !important;
    border-start-end-radius: var(--carina-border-radius-sm);
    border-end-end-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-navigation-menu::before {
    content: '';
    height: 2.5rem;
    width: 2rem;
    position: absolute;
    top: calc(50% - 1.5625rem);
    left: -2rem;
    z-index: 1;
  }

.carina-popper:has(> .carina-navigation-next__solution-navigation-menu) {
  border-start-end-radius: var(--carina-border-radius-xl);
  border-end-end-radius: var(--carina-border-radius-xl);
}

.carina-popper:has(> .carina-navigation-next__solution-navigation-menu--rebrand) {
  border-start-end-radius: var(--carina-border-radius-sm);
  border-end-end-radius: var(--carina-border-radius-sm);
}

.carina-navigation-next__solution-navigation-menu__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: var(--carina-spacing-3);
}

.carina-navigation-next__solution-navigation-menu__heading-icon {
  margin-inline-end: var(--carina-spacing-2);
}

.carina-navigation-next__solution-navigation-menu__heading-text {
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-lg);
  font-weight: var(--carina-font-weight-display);
  line-height: var(--carina-line-height-body-lg);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__solution-navigation-menu__description {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-xs);
}

.carina-navigation-next__solution-navigation-menu__list {
  margin: var(--carina-spacing-2) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-navigation-next__solution-navigation-menu--r2 .carina-navigation-next__solution-navigation-menu__list {
    margin-inline-start: var(--carina-spacing-6);
    margin-inline-end: var(--carina-spacing-0-5);
  }

.carina-navigation-next__solution-navigation-menu__list .carina-navigation-next__solution-navigation-link--rebrand a {
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__solution-navigation-menu__list .carina-navigation-next__solution-navigation-link--rebrand.carina-navigation-next__solution-navigation-link--current--r2 a {
        color: var(--carina-text-color-tertiary);
      }

.carina-navigation-next__solution-navigation-menu__rail-wrapper {
  position: relative;
  overflow: hidden;
}

.carina-navigation-next__solution-navigation-menu__rail-indicator {
  position: absolute;
  top: var(--carina-spacing-2);
  width: 2px;
  height: var(--carina-indicator-rail-height, 0px);
  margin: var(--carina-spacing-0) var(--carina-spacing-2);
  left: 0;
  background-color: var(--carina-border-color-tertiary);
  transition: height var(--carina-transition-duration-300)
    var(--carina-transition-timing-function-expressive-ease-in-out);
  z-index: 1;
}

.carina-navigation-next__solution-navigation-menu--r2 .carina-navigation-next__solution-navigation-link a {
      padding-inline-start: var(--carina-spacing-2-5);
    }

.carina-navigation-next__solution-navigation-menu--r2 .carina-navigation-next__solution-navigation-menu__list .carina-navigation-next__solution-navigation-link--disabled a {
      color: var(--carina-text-color-disabled);
    }

.carina-navigation-next__solution-sidebar-collapse {
  width: 100%;
}

.carina-navigation-next__solution-sidebar-container {
  --carina-background-color-surface-active: #003673;
  --carina-background-color-surface-alt: #183f6d;
  --carina-background-color-surface-hover: #003673;
  --carina-background-color-surface-selected: #003673;
  --carina-border-color-secondary-focus: #00c89b;
}

.carina-navigation-next__solution-sidebar-container--rebrand {
    --carina-background-color-surface-active: var(
      --carina-colors-surface-80
    ) !important;
    --carina-background-color-surface-alt: var(
      --carina-colors-surface-90
    ) !important;
    --carina-background-color-surface-hover: var(
      --carina-colors-surface-80
    ) !important;
    --carina-background-color-surface-selected: var(
      --carina-colors-surface-70
    ) !important;
    --carina-border-color-secondary-focus: var(
      --carina-colors-secondary-50
    ) !important;
  }

.carina-navigation-next__solution-sidebar-container{

  container-type: inline-size;
  container-name: solution;
  height: calc(100vh - var(--carina-shell-banner-current-height, 0rem));

  background-color: var(--carina-background-color-surface);

  position: relative;
}

@media (max-width: 767.98px) {

.carina-navigation-next__solution-sidebar-container-scroll {
    height: calc(100% - var(--carina-navigation-mobile-header-height))
}
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-navigation-logo {
    margin-top: var(--carina-spacing-0);
    margin-bottom: var(--carina-spacing-5);
    margin-inline-start: var(--carina-spacing-0);
    margin-inline-end: var(--carina-spacing-0);
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-navigation-logo--r2 {
    margin-top: var(--carina-spacing-0);
    margin-bottom: var(--carina-spacing-4);
    margin-inline-start: var(--carina-spacing-0);
    margin-inline-end: var(--carina-spacing-0);
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-sidebar-link,
  .carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-sidebar-dropdown {
    margin-top: var(--carina-spacing-0-5);
    margin-bottom: var(--carina-spacing-3);
    margin-inline-start: var(--carina-spacing-4);
    margin-inline-end: var(--carina-spacing-4);
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-sidebar-link--r2,
  .carina-navigation-next__solution-sidebar-container-scroll .carina-navigation-next__solution-sidebar-dropdown--r2 {
    margin-top: var(--carina-spacing-0-5);
    margin-bottom: var(--carina-spacing-3);
    margin-inline-start: var(--carina-spacing-3);
    margin-inline-end: var(--carina-spacing-3);
  }

/* this is to blend the auto showing scrollbar in Windows with the background */

.carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__scroll-view {
    overflow-x: hidden;
    position: static;
    scrollbar-color: var(--carina-border-color-primary)
      var(--carina-background-color-surface);
    scrollbar-width: thin;
  }

@media (min-width: 768px) {

.carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__scroll-view {
      overscroll-behavior: contain
  }
    }

.carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__header--shadow {
    box-shadow: var(--carina-box-shadow-xl);
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__footer {
    margin-bottom: var(--carina-spacing-5);
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__footer > div:first-child {
    margin-top: var(--carina-spacing-5);
  }

.carina-navigation-next__solution-sidebar-container-scroll .carina-scroll-view-with-bars__footer--shadow {
    box-shadow: var(--carina-box-shadow-reverse-xl);
  }

.carina-navigation-next__solution-sidebar-container-scroll--rebrand .carina-scroll-view-with-bars__scroll-view {
      scrollbar-color: var(--carina-colors-surface-70)
        var(--carina-background-color-surface);
    }

.carina-navigation-next__solution-sidebar-container-scroll--r2 .carina-navigation-next__solution-navigation-logo {
      margin-bottom: var(--carina-spacing-2);
    }

.carina-navigation-next__solution-sidebar-container-scroll--r2 .carina-navigation-next__solution-sidebar-link,
    .carina-navigation-next__solution-sidebar-container-scroll--r2 .carina-navigation-next__solution-sidebar-dropdown {
      margin: var(--carina-spacing-0-5) var(--carina-spacing-3);
      width: 48px;
    }

@container solution (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-container-scroll--r2 .carina-navigation-next__solution-sidebar-link,
    .carina-navigation-next__solution-sidebar-container-scroll--r2 .carina-navigation-next__solution-sidebar-dropdown {
        width: initial
    }
      }

.carina-navigation-next__solution-sidebar-container-skip-link {
  display: flex;
  background-color: var(--carina-background-color-primary);
  border-radius: var(--carina-border-radius-xl);
  border-width: var(--carina-border-width-2);
  box-shadow: var(--carina-ring-base);
  justify-content: center;
  outline: 0;
}

.carina-navigation-next__solution-sidebar-container-skip-link:focus {
    position: absolute;
    width: 17.25rem;
  }

.carina-navigation-next__solution-sidebar-container-skip-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
    color: var(--carina-text-color-on-primary);
    box-shadow: none;
  }

.carina-navigation-next__solution-sidebar-container-skip-link--rebrand:focus {
    outline-color: var(--carina-border-color-primary-focus);
    outline-offset: 1px;
    outline-width: 2px;
    outline-style: solid;
  }

.carina-navigation-next__solution-sidebar-container-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
  list-style: none;
}

.carina-navigation-next__solution-sidebar-container-container--r2 {
  gap: var(--carina-spacing-1);
  padding-top: var(--carina-spacing-1);
}

.carina-navigation-next__solution-sidebar-container-footer {
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-navigation-next__solution-sidebar-container-footer--r2 {
  display: flex;
  flex-direction: column;
  gap: var(--carina-spacing-1);
}

.carina-navigation-next__solution-sidebar-dropdown {
  padding-top: var(--carina-spacing-0);
  padding-bottom: var(--carina-spacing-0);
  padding-inline-end: var(--carina-spacing-2);
  padding-inline-start: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-md);
  justify-content: center;
  min-height: 2.5rem;
  cursor: pointer;
  width: -moz-min-content;
  width: min-content;
  flex-direction: column;
}

.carina-navigation-next__solution-sidebar-dropdown .carina-collapse--vertical {
    --carina-collapse-size: 0px;
    opacity: var(--carina-opacity-0);
    width: 0px;
    height: 0px;
  }

.carina-navigation-next__solution-sidebar-dropdown{

  transition: opacity var(--carina-transition-duration-300)
    var(--carina-transition-timing-function-expressive-ease-in-out)
    var(--carina-transition-delay-100);
}

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-dropdown {
    padding: var(--carina-spacing-0) var(--carina-spacing-1)
      var(--carina-spacing-0) var(--carina-spacing-0);
    width: calc(100% - 2 * var(--carina-spacing-4))
}

    .carina-navigation-next__solution-sidebar-dropdown .carina-collapse--vertical {
      --carina-collapse-size: auto;
      opacity: var(--carina-opacity-100);
      width: 100%;
      height: auto;
    }
  }

.carina-navigation-next__solution-sidebar-dropdown a {
    padding: var(--carina-spacing-0) var(--carina-spacing-2);
    border-radius: var(--carina-border-radius-xl);

    color: var(--carina-text-color-soft);
    text-decoration: none;
  }

.carina-navigation-next__solution-sidebar-dropdown:active {
    background-color: var(--carina-background-color-surface-active);
  }

.carina-navigation-next__solution-sidebar-dropdown:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__solution-sidebar-dropdown:hover .carina-navigation-next__solution-sidebar-dropdown__chevron {
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__solution-sidebar-dropdown:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__solution-sidebar-dropdown--rebrand {
    background-color: var(--carina-background-color-surface-alt) !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-dropdown--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__solution-sidebar-dropdown--r2 {
    background-color: transparent !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-dropdown--r2 .carina-navigation-next__solution-sidebar-dropdown__row {
      /* phase2 drops the left indicator (4px + 2px*2 margin = 8px); add it back to the left padding to keep icons aligned. Right padding stays at its pre-phase2 value. */
      padding-inline-start: var(--carina-spacing-3);
    }

.carina-navigation-next__solution-sidebar-dropdown--r2 .carina-navigation-next__solution-sidebar-dropdown__title {
      font-family: var(--carina-font-family-mono);
      text-transform: uppercase;
    }

.carina-navigation-next__solution-sidebar-dropdown--r2 .carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link:hover,
    .carina-navigation-next__solution-sidebar-dropdown--r2 .carina-navigation-next__solution-sidebar-dropdown__row:hover {
      background-color: var(--carina-background-color-surface-hover);
      border-radius: var(--carina-border-radius-sm);
      color: var(--carina-text-color-base);
    }

.carina-navigation-next__solution-sidebar-dropdown--r2 .carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link {
      /* 42px matches the base dropdown-link indent; subtract spacing-2 because padding-inline-start adds it back */
      margin-inline-start: calc(42px - var(--carina-spacing-2));
      margin-inline-end: var(--carina-spacing-1);
      padding-inline-start: var(--carina-spacing-2);
      font-family: var(--carina-font-family-mono);
      text-transform: uppercase;
    }

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-dropdown--r2 {
      /* margin-inline on links provides spacing in phase2; remove the inherited padding */
      padding: var(--carina-spacing-0);
      width: calc(100% - 2 * var(--carina-spacing-3) - 2px)
  }
    }

.carina-navigation-next__solution-sidebar-dropdown--current {
  background-color: var(--carina-background-color-surface-active);
}

.carina-navigation-next__solution-sidebar-dropdown--current svg,
  .carina-navigation-next__solution-sidebar-dropdown--current .carina-navigation-next__solution-sidebar-dropdown__chevron {
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__solution-sidebar-dropdown--current.carina-navigation-next__solution-sidebar-dropdown--rebrand svg,
  .carina-navigation-next__solution-sidebar-dropdown--current.carina-navigation-next__solution-sidebar-dropdown--rebrand .carina-navigation-next__solution-sidebar-dropdown__chevron {
    color: var(--carina-background-color-tertiary) !important;
  }

.carina-navigation-next__solution-sidebar-dropdown--current.carina-navigation-next__solution-sidebar-dropdown--r2 .carina-navigation-next__solution-sidebar-dropdown__title {
  color: var(--carina-background-color-tertiary) !important;
}

.carina-navigation-next__solution-sidebar-dropdown--disabled {
  background-color: transparent;
  pointer-events: none;
}

.carina-navigation-next__solution-sidebar-dropdown--disabled a,
  .carina-navigation-next__solution-sidebar-dropdown--disabled svg {
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__solution-sidebar-dropdown--disabled a:focus-visible, .carina-navigation-next__solution-sidebar-dropdown--disabled svg:focus-visible {
      box-shadow: var(--carina-ring-base);
      outline: 0;
    }

.carina-navigation-next__solution-sidebar-dropdown__indicator {
  border-radius: var(--carina-border-radius-xl);
  height: 24px;
  width: 4px;
  background-color: var(--carina-border-color-secondary-focus);
  flex-shrink: 0;
  visibility: hidden;
  margin: var(--carina-spacing-0) var(--carina-spacing-0-5);
}

.carina-navigation-next__solution-sidebar-dropdown__indicator--rebrand {
    background-color: var(--carina-background-color-tertiary) !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-dropdown__indicator--current {
  visibility: visible;
}

.carina-navigation-next__solution-sidebar-dropdown-link__indicator {
  border-radius: var(--carina-border-radius-xl);
  height: 20px;
  width: 4px;
  flex-shrink: 0;
  background-color: var(--carina-border-color-secondary-focus);
  margin: var(--carina-spacing-0) var(--carina-spacing-2);
}

.carina-navigation-next__solution-sidebar-dropdown-link__indicator--rebrand {
    background-color: var(--carina-background-color-tertiary) !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-dropdown__start-icon {
  color: var(--carina-text-color-soft);
  flex-shrink: 0;
}

.carina-navigation-next__solution-sidebar-dropdown__title {
  display: none;
  color: var(--carina-text-color-soft);
}

.carina-navigation-next__solution-sidebar-dropdown__title:not(.carina-navigation-next__solution-sidebar-dropdown__title--expanded--rebrand):hover {
    color: var(--carina-text-color-base);
  }

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-dropdown__title {
    padding-inline-start: var(--carina-spacing-2);
    display: flex;
    width: calc(100% - (2 * var(--carina-spacing-8)))
}
  }

.carina-navigation-next__solution-sidebar-dropdown__title:focus-within {
    outline: 0;
  }

.carina-navigation-next__solution-sidebar-dropdown__start-icon--current {
  color: var(--carina-text-color-base);
}

.carina-navigation-next__solution-sidebar-dropdown__chevron {
  display: none;
  color: var(--carina-text-color-soft);
  margin-inline-end: var(--carina-spacing-1);
}

@container (min-width: 19rem) {

.carina-navigation-next__solution-sidebar-dropdown__chevron {
    display: block
}
  }

@media (max-width: 767.98px) {

.carina-navigation-next__solution-sidebar-dropdown__chevron {
    display: block
}
  }

.carina-navigation-next__solution-sidebar-dropdown__chevron--link {
  display: none;
}

.carina-navigation-next__solution-sidebar-dropdown__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--carina-spacing-2) var(--carina-spacing-1);
}

.carina-navigation-next__solution-sidebar-dropdown__row:focus-within {
    outline: 0;
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  border-radius: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-border-radius-xl) var(--carina-border-radius-xl);
  padding-inline-start: var(--carina-spacing-0);
  margin: var(--carina-spacing-0);
}

@container (max-width: 4.51rem) {

.carina-navigation-next__solution-sidebar-dropdown__dropdown {
    display: none
}
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown * {
    color: var(--carina-text-color-soft);
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown--rebrand {
    border-radius: var(--carina-spacing-0) var(--carina-spacing-0)
      var(--carina-border-radius-sm) var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-dropdown--expanded {
  background-color: var(--carina-background-color-surface-active);
}

.carina-navigation-next__solution-sidebar-dropdown--expanded--rebrand {
    background-color: var(--carina-background-color-surface-alt);
  }

.carina-navigation-next__solution-sidebar-dropdown--expanded,
.carina-navigation-next__solution-sidebar-dropdown__title--expanded,
.carina-navigation-next__solution-sidebar-dropdown__start-icon--expanded,
.carina-navigation-next__solution-sidebar-dropdown__dropdown--expanded,
.carina-navigation-next__solution-sidebar-dropdown__chevron--expanded {
  color: var(--carina-text-color-base);
}

.carina-navigation-next__solution-sidebar-dropdown--current .carina-navigation-next__solution-sidebar-dropdown__start-icon--expanded--rebrand,
.carina-navigation-next__solution-sidebar-dropdown--current .carina-navigation-next__solution-sidebar-dropdown__title--expanded--rebrand {
  color: var(--carina-background-color-tertiary) !important;
}

.carina-navigation-next__solution-sidebar-dropdown__dropdown--expanded {
  opacity: var(--carina-opacity-0);
  transition: opacity 0ms;
}

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-dropdown__dropdown--expanded {
    opacity: var(--carina-opacity-100);
    transition: opacity var(--carina-transition-duration-300)
      var(--carina-transition-timing-function-expressive-ease-in-out)
      var(--carina-transition-delay-100)
}
  }

.carina-navigation-next__solution-sidebar-dropdown__indicator--current-child {
  visibility: visible;
}

@container (min-width: 5.01rem) {

.carina-navigation-next__solution-sidebar-dropdown__indicator--current-child {
    visibility: hidden
}
  }

.carina-navigation-next__solution-sidebar-dropdown__title--current,
.carina-navigation-next__solution-sidebar-dropdown__title--current-child {
  font-weight: var(--carina-font-weight-display);
}

.carina-navigation-next__solution-sidebar-dropdown__title--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item {
  display: flex;
  align-items: center;
  text-align: start;
  width: 100%;
  padding: var(--carina-spacing-0) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-1);
  margin: var(--carina-spacing-0);
}

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item:has(.carina-navigation-next__solution-sidebar-dropdown__dropdown-link--disabled) {
    cursor: default;
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link {
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-body-lg);
  display: flex;
  align-items: center;
  padding-inline-start: 42px;
  padding-top: var(--carina-spacing-2-5);
  padding-bottom: var(--carina-spacing-2-5);
  width: 100%;
  border-radius: var(--carina-border-radius-xl);
}

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link:hover {
    background-color: var(--carina-background-color-surface);
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
    width: 100%;
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link.carina-navigation-next__solution-sidebar-dropdown__dropdown-link--current {
    font-weight: var(--carina-font-weight-display);
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link:has(.carina-navigation-next__solution-sidebar-dropdown-link__indicator) {
    padding-inline-start: 22px;
  }

@media (min-width: 768px) {

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link {
    padding-top: var(--carina-spacing-1-5);
    padding-bottom: var(--carina-spacing-1-5)
}
  }

.carina-navigation-next__solution-sidebar-dropdown--r2
  .carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item
  .carina-navigation-next__solution-sidebar-dropdown__dropdown-link--current {
  color: var(--carina-text-color-primary);
}

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link--disabled {
  background-color: transparent;
  pointer-events: none;

  color: var(--carina-text-color-disabled);
}

.carina-navigation-next__solution-sidebar-dropdown__dropdown-list-item .carina-navigation-next__solution-sidebar-dropdown__dropdown-link--disabled:focus-visible {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__solution-sidebar-dropdown__rail-wrapper {
  position: relative;
  overflow: hidden;
}

.carina-navigation-next__solution-sidebar-dropdown__rail-indicator {
  position: absolute;
  width: 2px;
  height: var(--carina-indicator-rail-height, 0px);
  top: 0;
  margin: var(--carina-spacing-0) var(--carina-spacing-2);
  left: var(--carina-spacing-3-5);
  background-color: var(--carina-border-color-tertiary);
  transition: height var(--carina-transition-duration-300)
    var(--carina-transition-timing-function-expressive-ease-in-out);
  z-index: 1;
}

.carina-navigation-next__solution-sidebar-link {
  display: flex;
  padding: var(--carina-spacing-0) var(--carina-spacing-1)
    var(--carina-spacing-0) var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);
  font-size: var(--carina-font-size-body-md);
  align-items: center;
  min-height: 2.5rem;
  cursor: pointer;
  width: calc(100% - 2 * var(--carina-spacing-4));
}

.carina-navigation-next__solution-sidebar-link:active {
    background-color: var(--carina-background-color-surface-active);
  }

.carina-navigation-next__solution-sidebar-link:focus-within {
    box-shadow: var(--carina-ring-base);
    outline: 0;
  }

.carina-navigation-next__solution-sidebar-link:hover:not(.carina-navigation-next__solution-sidebar-link--disabled):not(.carina-navigation-next__solution-sidebar-link--disabled-style-only) {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation-next__solution-sidebar-link:hover:not(.carina-navigation-next__solution-sidebar-link--disabled):not(.carina-navigation-next__solution-sidebar-link--disabled-style-only):not(.carina-navigation-next__solution-sidebar-link--rebrand) a,
      .carina-navigation-next__solution-sidebar-link:hover:not(.carina-navigation-next__solution-sidebar-link--disabled):not(.carina-navigation-next__solution-sidebar-link--disabled-style-only):not(.carina-navigation-next__solution-sidebar-link--rebrand) svg {
        color: var(--carina-text-color-base);
      }

.carina-navigation-next__solution-sidebar-link a,
  .carina-navigation-next__solution-sidebar-link button {
    padding-inline-start: var(--carina-spacing-1);
    border-radius: var(--carina-border-radius-xl);

    color: var(--carina-text-color-soft);
    font-size: var(--carina-font-size-body-md);
    text-decoration: none;
  }

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-link {
    padding: var(--carina-spacing-0);
    /* the 2px here is to make sure the scrollbar has a full 24px, a AA req */
    width: calc(100% - 2 * var(--carina-spacing-4) - 2px)
}
  }

.carina-navigation-next__solution-sidebar-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-link--rebrand a,
    .carina-navigation-next__solution-sidebar-link--rebrand button {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation-next__solution-sidebar-link--r2 a,
    .carina-navigation-next__solution-sidebar-link--r2 button {
      /* phase2 drops the left indicator (4px + 2px*2 margin = 8px); add it back to the left padding to keep labels aligned. Right padding stays at its pre-phase2 value. */
      padding-inline-start: var(--carina-spacing-3);
      font-family: var(--carina-font-family-mono);
      text-transform: uppercase;
    }

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-link--r2 {
      /* container provides margin-inline spacing in phase2; subtract both sides + scrollbar offset */
      width: calc(100% - 2 * var(--carina-spacing-3) - 2px)
  }
    }

.carina-navigation-next__solution-sidebar-link--current {
  background-color: var(--carina-background-color-surface-active);
}

.carina-navigation-next__solution-sidebar-link--current a,
  .carina-navigation-next__solution-sidebar-link--current svg {
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__solution-sidebar-link--current--rebrand a,
    .carina-navigation-next__solution-sidebar-link--current--rebrand svg {
      color: var(--carina-background-color-tertiary);
    }

.carina-navigation-next__solution-sidebar-link--current--r2 {
    background-color: transparent;
  }

.carina-navigation-next__solution-sidebar-link--current--r2 a,
    .carina-navigation-next__solution-sidebar-link--current--r2 button {
      color: var(--carina-text-color-tertiary);
      font-weight: var(--carina-font-weight-semi-bold);
    }

.carina-navigation-next__solution-sidebar-link--disabled,
.carina-navigation-next__solution-sidebar-link--disabled-style-only {
  background-color: transparent;
}

.carina-navigation-next__solution-sidebar-link--disabled:hover, .carina-navigation-next__solution-sidebar-link--disabled-style-only:hover {
    background-color: transparent;
  }

.carina-navigation-next__solution-sidebar-link--disabled:focus-within, .carina-navigation-next__solution-sidebar-link--disabled-style-only:focus-within {
    outline: 0;
  }

.carina-navigation-next__solution-sidebar-link--disabled a,
  .carina-navigation-next__solution-sidebar-link--disabled button,
  .carina-navigation-next__solution-sidebar-link--disabled-style-only a,
  .carina-navigation-next__solution-sidebar-link--disabled-style-only button {
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__solution-sidebar-link--disabled a:focus-visible, .carina-navigation-next__solution-sidebar-link--disabled button:focus-visible, .carina-navigation-next__solution-sidebar-link--disabled-style-only a:focus-visible, .carina-navigation-next__solution-sidebar-link--disabled-style-only button:focus-visible {
      outline: 0;
    }

.carina-navigation-next__solution-sidebar-link--disabled svg, .carina-navigation-next__solution-sidebar-link--disabled-style-only svg {
    color: var(--carina-text-color-disabled);
  }

.carina-navigation-next__solution-sidebar-link--disabled {
  pointer-events: none;
}

.carina-navigation-next__solution-sidebar-link--disabled-style-only {
  cursor: default;
}

.carina-navigation-next__solution-sidebar-link--disabled-style-only a,
  .carina-navigation-next__solution-sidebar-link--disabled-style-only button {
    cursor: default;
  }

.carina-navigation-next__solution-sidebar-link--mobile {
  background-color: var(--carina-background-color-surface-alt);
  width: calc(100% - 2 * var(--carina-spacing-3) - 2px);
}

.carina-navigation-next__solution-sidebar-link--mobile a,
  .carina-navigation-next__solution-sidebar-link--mobile svg {
    color: var(--carina-text-color-base);
  }

.carina-navigation-next__solution-sidebar-link__indicator {
  border-radius: var(--carina-border-radius-xl);
  height: 24px;
  width: 4px;
  background-color: var(--carina-border-color-secondary-focus);
  visibility: hidden;
  flex-shrink: 0;
  margin: var(--carina-spacing-0) var(--carina-spacing-0-5)
    var(--carina-spacing-0) var(--carina-spacing-0-5);
}

.carina-navigation-next__solution-sidebar-link--rebrand .carina-navigation-next__solution-sidebar-link__indicator {
    background-color: var(--carina-background-color-tertiary) !important;
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation-next__solution-sidebar-link__indicator--current {
  visibility: visible;
}

.carina-navigation-next__solution-sidebar-link__spacer {
  min-width: var(--carina-spacing-8);
  height: var(--carina-spacing-8);
  width: var(--carina-spacing-8);
}

.carina-navigation-next__solution-sidebar-link__start-icon {
  color: var(--carina-text-color-soft);
  flex-shrink: 0;
  box-sizing: content-box;
  margin-inline-end: var(--carina-spacing-2);
}

.carina-navigation-next__solution-sidebar-link__start-icon--current {
  color: var(--carina-text-color-base);
}

.carina-navigation-next__solution-sidebar-link__link {
  align-items: center;
  text-align: start;
  word-break: break-word;
  opacity: var(--carina-opacity-100);
  width: 100%;
  min-height: 40px;
  display: flex;
}

@media (min-width: 768px) {
    @container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-link__link {
      min-height: 24px;
      height: auto;
      width: calc(100% - 2 * var(--carina-spacing-3) - 2px);
      opacity: var(--carina-opacity-100);
      transition: opacity var(--carina-transition-duration-300)
        var(--carina-transition-timing-function-expressive-ease-in-out)
        var(--carina-transition-delay-100)
}
    }
  }

.carina-navigation-next__solution-sidebar-link__link:focus-within {
    outline: 0;
  }

@media (min-width: 768px) {

.carina-navigation-next__solution-sidebar-link__link-content {
    height: 0px;
    width: 0px;
    opacity: var(--carina-opacity-0);
    transition: opacity 0ms
}
  }

@container (min-width: 15rem) {

.carina-navigation-next__solution-sidebar-link__link-content {
    width: 100%;
    height: auto;
    opacity: var(--carina-opacity-100)
}
  }

.carina-navigation-next__solution-sidebar-link__link--mobile-top {
  opacity: var(--carina-opacity-100);
}

.carina-navigation-next__solution-sidebar-link__chevron {
  visibility: hidden;
}

.carina-navigation-next__solution-sidebar-link__chevron--flyout {
  color: var(--carina-text-color-soft);
  margin-inline-end: var(--carina-spacing-2);
}

[dir='rtl'] .carina-navigation-next__solution-sidebar-link__chevron--flyout {
    transform: rotate(180deg);
  }

@container (min-width: 19rem) {

.carina-navigation-next__solution-sidebar-link:hover .carina-navigation-next__solution-sidebar-link__chevron--flyout,
  .carina-navigation-next__solution-sidebar-link:focus-within .carina-navigation-next__solution-sidebar-link__chevron--flyout {
      visibility: visible
  }
    }

.carina-navigation__app-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  width: 45px;
  height: 56px;

  padding: var(--carina-spacing-0) var(--carina-spacing-1-5);

  background: var(--carina-background-color-primary);
  margin-inline-start: var(--carina-spacing-3-5);
}

.carina-navigation__app-switcher .carina-button--brand {
    background-color: var(--carina-background-color-primary);
  }

.carina-navigation__app-switcher .carina-button--brand:focus-visible {
      outline: var(--carina-border-color-soft) var(--carina-border-width-1);
      box-shadow: var(--carina-ring-white);
    }

.carina-navigation__app-switcher-container .carina-tooltip__container {
    z-index: calc(var(--carina-z-index-popper) + 1);
  }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container) {
    z-index: var(--carina-z-index-popper);
  }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container) .carina-popper {
      border-width: var(--carina-border-width-0);
    }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container) .carina-popper .carina-navigation__app-switcher-menu {
        border-radius: var(--carina-border-radius-md);
      }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container) .carina-popper .carina-navigation__app-switcher-menu--rebrand {
          border-radius: var(--carina-border-radius-sm);
        }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container):where([data-placement='bottom-end']) .carina-popper .carina-navigation__app-switcher-menu {
        border-top-right-radius: 0;
      }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container):where([data-placement='bottom-start']) .carina-popper .carina-navigation__app-switcher-menu {
        border-top-left-radius: 0;
      }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container):where([data-placement='top-end']) .carina-popper .carina-navigation__app-switcher-menu {
        border-bottom-right-radius: 0;
      }

.carina-navigation__app-switcher-container > .carina-popper__container:not(.carina-tooltip__container):where([data-placement='top-start']) .carina-popper .carina-navigation__app-switcher-menu {
        border-bottom-left-radius: 0;
      }

.carina-navigation__app-switcher-menu {
  box-sizing: border-box;
  width: 360px;
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
  overflow: auto;

  font-family: var(--carina-font-family-primary);
  background-color: var(--carina-background-color-primary);

  box-shadow: var(--carina-box-shadow-lg);
}

.carina-navigation__app-switcher-menu ul {
    margin: var(--carina-spacing-0);
    padding: var(--carina-spacing-0);

    list-style: none;
  }

/* Style buttons within the menu (e.g., back button) */

.carina-navigation__app-switcher-menu .carina-button--brand:focus-visible {
      box-shadow: var(--carina-ring-white);
      outline-color: var(--carina-border-color-inverse);
      outline-width: var(--carina-border-width-1);
    }

@media (max-width: 767.98px) {

.carina-navigation__app-switcher-menu {
    /* stylelint-disable unit-allowed-list */
    width: calc(100vw - var(--carina-spacing-8))
}
  }

.carina-navigation__app-switcher-menu-item {
  margin: var(--carina-spacing-0) var(--carina-spacing-2);
  border-radius: var(--carina-border-radius-xl);
}

.carina-navigation__app-switcher-menu-item:hover {
    background-color: var(--carina-background-color-primary-hover);
  }

.carina-navigation__app-switcher-menu-item:active {
    background-color: var(--carina-background-color-primary-active);
  }

.carina-navigation__app-switcher-menu-item a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: var(--carina-spacing-1) var(--carina-spacing-4);
    border-radius: var(--carina-border-radius-xl);

    color: var(--carina-text-color-on-primary);
    font-weight: var(--carina-font-weight-body);
    font-size: var(--carina-font-size-body-md);
    text-decoration: none;

    cursor: pointer;
  }

.carina-navigation__app-switcher-menu-item a:focus-visible {
      outline: var(--carina-border-width-2) solid
        var(--carina-colors-transparent);
      box-shadow: var(--carina-ring-white);
    }

.carina-navigation__app-switcher-menu-item--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation__app-switcher-menu-item--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation__app-switcher-menu-item a span {
  margin-inline-end: var(--carina-spacing-4);

  display: flex;
  align-items: center;

  color: var(--carina-text-color-on-primary);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);
}

.carina-navigation__app-switcher-menu-item a span div {
  min-width: 75%;

  overflow-wrap: break-word;
}

.carina-navigation__app-switcher-menu-item a span > span {
  display: flex;
  align-items: center;
  width: 1.25rem;
  height: 1.5rem;
  margin-inline-end: var(--carina-spacing-4);
}

.carina-navigation__app-switcher-menu-item a span > span svg {
  width: 1.25rem;
  height: 1.25rem;
}

.carina-navigation__divider {
  width: 1px;
  height: 32px;

  background-color: var(--carina-background-color-neutral);
}

.carina-navigation__flyout-menu {
  box-sizing: border-box;
  width: 360px;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);
  overflow: hidden;

  font-family: var(--carina-font-family-primary);

  list-style: none;
  /* bg inherited from the wrapping Popper (bg-popper). Setting an explicit color here would
     produce a second rounded inset visible against the popper's own rounded corner. */
  background-color: var(--carina-colors-transparent);
}

.carina-navigation__flyout-menu--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation__flyout-menu-popper {
  padding: var(--carina-spacing-0);
}

.carina-navigation__flyout-menu-item {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
}

.carina-navigation__flyout-menu-item a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 36px;
    border-radius: var(--carina-border-radius-md);

    color: var(--carina-text-color-base);
    font-weight: 300;
    font-size: var(--carina-font-size-body-sm);
    text-decoration: none;
    margin-inline: var(--carina-spacing-2);
    padding-inline: var(--carina-spacing-4);
  }

.carina-navigation__flyout-menu-item a span {
      margin-inline-end: var(--carina-spacing-4);

      display: flex;
      align-items: center;
    }

.carina-navigation__flyout-menu-item a div {
      min-width: 75%;

      overflow-wrap: break-word;
    }

.carina-navigation__flyout-menu-item a:focus-visible {
      outline: none;
      box-shadow: var(--carina-ring-base);
    }

.carina-navigation__flyout-menu-item:hover a {
      background-color: var(--carina-background-color-surface-hover);
    }

.carina-navigation__flyout-menu-item:active a {
      background-color: var(--carina-background-color-surface-active);
    }

.carina-navigation__flyout-menu-item--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation__global-navigation-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-md);
  font-family: var(--carina-font-family-primary);
  text-decoration: none;

  cursor: pointer;
}

.carina-navigation__global-navigation-link a,
  .carina-navigation__global-navigation-link div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - 0.5rem);
    border-radius: var(--carina-border-radius-xl);

    color: var(--carina-text-color-base);
    font-weight: var(--carina-font-weight-body);
    font-size: var(--carina-font-size-body-md);
    font-family: var(--carina-font-family-primary);
    white-space: nowrap;
    text-decoration: none;

    cursor: pointer;

    transition-timing-function: var(
      --carina-transition-timing-function-productive-ease-in-out
    );
    transition-duration: var(--carina-transition-duration-100);
    transition-property: box-shadow;
    margin-inline-end: var(--carina-spacing-1-5);
  }

.carina-navigation__global-navigation-link--rebrand a,
    .carina-navigation__global-navigation-link--rebrand div {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation__global-navigation-link a {
    padding-inline: var(--carina-spacing-5);
  }

.carina-navigation__global-navigation-link div {
    padding-inline: var(--carina-spacing-4);
    margin-inline-start: var(--carina-spacing-0);

    margin-top: var(--carina-spacing-1);
    margin-bottom: var(--carina-spacing-1);
  }

.carina-navigation__global-navigation-link div svg {
      padding-inline-start: var(--carina-spacing-2);
      box-sizing: border-box;
    }

.carina-navigation__global-navigation-link:hover a,
    .carina-navigation__global-navigation-link:hover div {
      background-color: var(--carina-background-color-surface-hover);
    }

.carina-navigation__global-navigation-link:active a,
    .carina-navigation__global-navigation-link:active div {
      background-color: var(--carina-background-color-surface-active);
    }

.carina-navigation__global-navigation-link:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
    box-shadow: var(--carina-ring-base);
  }

.carina-navigation__global-navigation-link--selected:hover a,
    .carina-navigation__global-navigation-link--selected:hover div,
    .carina-navigation__global-navigation-link--selected:active a,
    .carina-navigation__global-navigation-link--selected:active div {
      color: var(--carina-text-color-base);

      background-color: var(--carina-background-color-surface-selected);
    }

/* Selected state: icon stays the base text color (neither text nor icon is primary-tinted).
     The selected affordance is the bg state change only. */

.carina-navigation__global-navigation-link--selected span,
  .carina-navigation__global-navigation-link--selected svg {
    color: var(--carina-text-color-base);
  }

.carina-navigation__global-navigation-menu {
  position: relative;

  display: inline-block;
  height: 100%;
}

.carina-navigation__global-navigation-menu-container {
  position: absolute;
  bottom: var(--carina-spacing-0);
  z-index: var(--carina-z-index-panel);

  display: none;
  width: 220px;
  height: auto;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-xl);

  color: var(--carina-text-color-base);

  background: var(--carina-background-color-popper);
  box-shadow: var(--carina-box-shadow-lg);
  transform: translateY(100%);
  inset-inline-start: var(--carina-spacing-0);
}

.carina-navigation__global-navigation-menu--rebrand .carina-navigation__global-navigation-menu-container {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation__global-navigation-menu-container--selected {
  display: block;
}

.carina-navigation__global-navigation-menu-item {
  display: inline-block;
  width: 100%;

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  white-space: nowrap;
  padding-inline: var(--carina-spacing-2);
}

.carina-navigation__global-navigation-menu-item a {
    display: block;
    box-sizing: border-box;
    padding: var(--carina-spacing-2);
    border-radius: var(--carina-border-radius-md);

    color: var(--carina-text-color-base);
    font-weight: var(--carina-font-weight-body);
    font-size: var(--carina-font-size-body-sm);
    font-family: var(--carina-font-family-primary);
    white-space: normal;
    text-align: start;
    text-decoration: none;

    transition-timing-function: var(
      --carina-transition-timing-function-productive-ease-in-out
    );
    transition-duration: var(--carina-transition-duration-100);
    transition-property: box-shadow;
  }

.carina-navigation__global-navigation-menu-item a:hover {
      background-color: var(--carina-background-color-surface-hover);
    }

.carina-navigation__global-navigation-menu-item a:active {
      background-color: var(--carina-background-color-surface-active);
    }

.carina-navigation__global-navigation-menu-item a:focus-visible {
      outline: var(--carina-border-width-2) solid
        var(--carina-colors-transparent);
      box-shadow: var(--carina-ring-base);
    }

.carina-navigation__global-navigation-menu-item--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation__logo {
  display: flex;
  align-items: center;
  height: 18px;
  padding: var(--carina-spacing-0) var(--carina-spacing-6);
}

.carina-navigation__logo a {
    text-decoration: none;
  }

.carina-navigation__logo-image {
  display: inline;
  width: 93px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: initial;
}

.carina-navigation__page-title {
  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-xl);
  line-height: var(--carina-line-height-display-2xs);
  margin-inline-start: var(--carina-spacing-2);
  margin-block-end: 1rem;
  margin-block-start: 1rem;

  font-family: var(--carina-font-family-primary);
}

.carina-navigation__product-title {
  overflow: hidden;

  color: var(--carina-text-color-primary);

  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-xl);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-tight);
  letter-spacing: 1;
  white-space: nowrap;
  text-transform: uppercase;
  text-overflow: ellipsis;
  padding-inline-start: var(--carina-spacing-4);
}

.carina-navigation__search {
  display: flex;
  align-items: center;
  width: 40px;

  height: 40px;
  margin-inline: var(--carina-spacing-1);
}

@media (min-width: 768px) {

.carina-navigation__search {
    position: relative
}
  }

.carina-navigation__search-collapse {
  position: absolute;

  z-index: calc(var(--carina-z-index-current, 0) + 1);

  display: flex;
  align-items: center;

  height: 100%;
  inset-inline-end: var(--carina-spacing-0);
}

.carina-navigation__search-collapse-wrapper {
  display: flex;
  align-items: center;
}

.carina-navigation__search-button {
  margin-inline: var(--carina-spacing-0);
}

.carina-navigation__search-button,
.carina-navigation__search-small-screen-button {
  display: flex;
  align-items: center;
  padding-inline: var(--carina-spacing-2);
  inset-inline-end: var(--carina-spacing-4);
}

.carina-navigation__search-filters-container {
  position: absolute;
  top: 38px;

  box-sizing: border-box;
  width: 100%;
  padding: var(--carina-spacing-4);
  border-radius: var(--carina-border-radius-sm);

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-surface);
  box-shadow: var(--carina-box-shadow-lg);
}

.carina-navigation__search-filters-container--rebrand {
    border-radius: var(--carina-border-radius-xs);
  }

.carina-navigation__search-sub-container {
  position: relative;
  z-index: var(--carina-z-index-panel);

  display: flex;
  width: 560px;
  height: 100%;

  opacity: var(--carina-opacity-100);
}

@media (max-width: 767.98px) {

.carina-navigation__search-sub-container {
    /* stylelint-disable unit-allowed-list */
    width: calc(100vw - 32px)
}
  }

.carina-navigation__search-button-wrapper {
  min-width: 24px;
  margin-inline-start: var(--carina-spacing-1);
}

.carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m {
  position: relative;
  z-index: 0;

  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  background-color: transparent;
}

.carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:active {
    background-color: var(--carina-background-color-surface-active);
    transform: var(scale(var(--carina-scale-shrink)));
  }

.carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
    box-shadow: var(--carina-ring-black);
  }

.carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:disabled,
  .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:disabled:hover,
  .carina-navigation__search-button-wrapper .carina-button--icon-only.carina-button--m:disabled:active {
    cursor: default;
    opacity: var(--carina-opacity-40);
  }

.carina-navigation__search-container {
  position: relative;

  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  align-items: center;
}

.carina-navigation__search-container .carina-textbox-icon {
    position: absolute;
    top: 50%;
    inset-inline-start: var(--carina-spacing-2-5);

    transform: translateY(-50%);
  }

.carina-navigation__search-container .carina-textbox__container .carina-input-fieldset {
    height: 36px;
  }

.carina-navigation__search-container .carina-textbox__input {
    height: 36px;

    border-radius: var(--carina-border-radius-sm);

    font-size: var(--carina-font-size-sm);
    padding-inline-end: var(--carina-spacing-16);
  }

.carina-navigation__search-container--rebrand .carina-textbox__input {
      border-radius: var(--carina-border-radius-xs);
    }

.carina-navigation__search-container .carina-button__icon,
.carina-navigation__search-container .carina-textbox-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--carina-text-color-base);
}

.carina-navigation__search-container-icons {
  position: absolute;
  top: 50%;
  inset-inline-end: var(--carina-spacing-2-5);

  display: flex;

  transform: translateY(-50%);
}

/* stylelint-disable unit-allowed-list */

@keyframes carina-navigation__side-navigation--outer-container-in {
  from {
    width: 0;

    opacity: var(--carina-opacity-0);
  }

  to {
    width: 320px;

    opacity: var(--carina-opacity-100);
  }
}

@keyframes carina-navigation__side-navigation--outer-container-out {
  from {
    width: 320px;

    opacity: var(--carina-opacity-100);
  }

  to {
    width: 0;

    opacity: var(--carina-opacity-0);
  }
}

@keyframes carina-navigation__side-navigation--outer-container-in-small {
  from {
    width: 0;

    opacity: var(--carina-opacity-0);
  }

  to {
    width: 100vw;

    opacity: var(--carina-opacity-100);
  }
}

@keyframes carina-navigation__side-navigation--outer-container-out-small {
  from {
    width: 100vw;

    opacity: var(--carina-opacity-100);
  }

  to {
    width: 0;

    opacity: var(--carina-opacity-0);
  }
}

@keyframes carina-navigation__side-navigation--outer-container-in-fade {
  from {
    opacity: var(--carina-opacity-0);
  }

  to {
    opacity: var(--carina-opacity-100);
  }
}

@keyframes carina-navigation__side-navigation--outer-container-out-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.carina-navigation__side-navigation {
  flex-grow: 0;
  flex-shrink: 0;
  width: 0;
  height: 100%;

  overflow: auto;

  color: var(--carina-text-color-base);

  background-color: var(--carina-background-color-surface);
  opacity: 0;
}

.carina-navigation__side-navigation--open {
  border-inline-end: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  width: 320px;

  opacity: 1;
}

@media (max-width: 767.98px) {

.carina-navigation__side-navigation--open {
    width: 100vw
}
  }

.carina-navigation__side-navigation--animate {
  animation: carina-navigation__side-navigation--outer-container-in
    var(--carina-transition-duration-400)
    var(--carina-transition-timing-function-expressive-ease-out);
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion) {

.carina-navigation__side-navigation--animate {
    animation: carina-navigation__side-navigation--outer-container-in-fade
      var(--carina-transition-duration-reduced-motion)
      var(--carina-transition-timing-function-linear)
}
  }

@media (max-width: 767.98px) {

.carina-navigation__side-navigation--animate {
    animation: carina-navigation__side-navigation--outer-container-in-small
      var(--carina-transition-duration-400)
      var(--carina-transition-timing-function-expressive-ease-out)
}
  }

.carina-navigation__side-navigation--animate:not(.carina-navigation__side-navigation--open) {
  animation: carina-navigation__side-navigation--outer-container-out
    var(--carina-transition-duration-200)
    var(--carina-transition-timing-function-expressive-ease-out);
  animation-fill-mode: both;
}

@media (prefers-reduced-motion) {

.carina-navigation__side-navigation--animate:not(.carina-navigation__side-navigation--open) {
    animation: carina-navigation__side-navigation--outer-container-out-fade
      var(--carina-transition-duration-reduced-motion)
      var(--carina-transition-timing-function-linear)
}
  }

@media (max-width: 767.98px) {

.carina-navigation__side-navigation--animate:not(.carina-navigation__side-navigation--open) {
    animation: carina-navigation__side-navigation--outer-container-out-small
      var(--carina-transition-duration-200)
      var(--carina-transition-timing-function-expressive-ease-out)
}
  }

.carina-navigation__side-navigation-list {
  margin: var(--carina-spacing-2) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-0);
  padding: var(--carina-spacing-0);

  list-style: none;
}

.carina-navigation__side-navigation-header {
  display: flex;
  padding: var(--carina-spacing-3) var(--carina-spacing-6);
  overflow: hidden;

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
  white-space: nowrap;
  text-transform: uppercase;
  text-overflow: ellipsis;
}

.carina-navigation__side-navigation-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - var(--carina-spacing-4));
  margin: var(--carina-spacing-0) auto;
  padding: var(--carina-spacing-0);
  border-radius: var(--carina-border-radius-md);

  cursor: pointer;
}

.carina-navigation__side-navigation-link:hover:not(.carina-navigation__side-navigation-link--disabled) {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation__side-navigation-link:hover:not(.carina-navigation__side-navigation-link--disabled) a {
      color: var(--carina-text-color-base);
    }

.carina-navigation__side-navigation-link:active:not(.carina-navigation__side-navigation-link--disabled) {
    background-color: var(--carina-background-color-surface-active);
  }

.carina-navigation__side-navigation-link:active:not(.carina-navigation__side-navigation-link--disabled) a {
      color: var(--carina-text-color-base);
    }

.carina-navigation__side-navigation-link:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
    box-shadow: var(--carina-ring-base);
  }

.carina-navigation__side-navigation-link a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    min-height: 24px;
    padding: var(--carina-spacing-2) var(--carina-spacing-4);
    border-radius: var(--carina-border-radius-md);

    color: var(--carina-text-color-soft);
    font-weight: var(--carina-font-weight-body);
    font-size: var(--carina-font-size-body-md);
    font-family: var(--carina-font-family-primary);
    text-align: start;
    text-decoration: none;

    transition-timing-function: var(
      --carina-transition-timing-function-productive-ease-in-out
    );

    transition-duration: var(--carina-transition-duration-100);
    transition-property: box-shadow;
  }

.carina-navigation__side-navigation-link a:focus-visible {
      outline: var(--carina-border-width-2) solid
        var(--carina-colors-transparent);
      box-shadow: var(--carina-ring-base);
    }

.carina-navigation__side-navigation-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation__side-navigation-link--rebrand a {
      border-radius: var(--carina-border-radius-sm);
    }

.carina-navigation__side-navigation-link--current {
  position: relative;

  background-color: var(--carina-background-color-surface-selected);
  cursor: default;
}

.carina-navigation__side-navigation-link--current::before {
    position: absolute;
    top: 0;

    width: var(--carina-spacing-1);
    height: 100%;

    background-color: var(--carina-border-color-secondary-focus);

    content: '';
    inset-inline-start: 0;
    border-start-start-radius: var(--carina-border-radius-md);
    border-end-start-radius: var(--carina-border-radius-md);
  }

.carina-navigation__side-navigation-link--current.carina-navigation__side-navigation-link--rebrand::before {
      border-start-start-radius: var(--carina-border-radius-sm);
      border-end-start-radius: var(--carina-border-radius-sm);
    }

.carina-navigation__side-navigation-link--current a {
    color: var(--carina-text-color-base);
  }

.carina-navigation__side-navigation-link--disabled > div > a > svg {
  flex-shrink: 0;
  padding-inline-end: var(--carina-spacing-1);
}

.carina-navigation__side-navigation-link--disabled {
  position: relative;

  justify-content: flex-start;
  box-sizing: border-box;
  min-height: 40px;

  cursor: default;
}

.carina-navigation__side-navigation-link--disabled a {
    cursor: default;
  }

.carina-navigation__side-navigation-menu {
  list-style: none;
}

.carina-navigation__side-navigation-menu:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
    box-shadow: var(--carina-ring-base);
  }

.carina-navigation__side-navigation-menu-list {
  padding-inline-start: var(--carina-spacing-6);
  margin-block: var(--carina-spacing-4);
}

.carina-navigation__side-navigation-menu-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: calc(100% - var(--carina-spacing-4));
  min-height: 40px;
  margin: var(--carina-spacing-0) auto var(--carina-spacing-0-5);
  padding: var(--carina-spacing-2) var(--carina-spacing-4);
  border-radius: var(--carina-border-radius-md);

  color: var(--carina-text-color-soft);
  font-family: var(--carina-font-family-primary);
  white-space: nowrap;

  cursor: pointer;

  transition-timing-function: var(
    --carina-transition-timing-function-productive-ease-in-out
  );
  transition-duration: var(--carina-transition-duration-100);
  transition-property: box-shadow;
}

.carina-navigation__side-navigation-menu-trigger span {
    font-weight: var(--carina-font-weight-body);
    font-size: var(--carina-font-size-body-md);
    white-space: normal;
  }

.carina-navigation__side-navigation-menu-trigger svg {
    min-width: 24px;
    min-height: 24px;
  }

.carina-navigation__side-navigation-menu-trigger:hover {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-navigation__side-navigation-menu-trigger:active {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);
  }

.carina-navigation__side-navigation-menu-trigger:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
    box-shadow: var(--carina-ring-base);
  }

.carina-navigation__side-navigation-menu-trigger--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-navigation__title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  background: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
}

.carina-navigation__top-navigation {
  position: relative;

  width: 100%;
}

.carina-navigation__top-navigation-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 56px;

  background: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
}

.carina-navigation__top-navigation-border {
  width: 100%;
  height: 0.25rem;

  background: linear-gradient(
    90deg,
    var(--carina-background-color-primary) 0%,
    var(--carina-background-color-secondary) 95%
  );
}

@keyframes carina-navigation__top-navigation--outer-container-in {
  from {
    opacity: 0;
  }

  to {
    opacity: var(--carina-opacity-80);
  }
}

.carina-navigation__top-navigation-overlay {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 56px;

  background: var(--carina-background-color-surface);
  opacity: var(--carina-opacity-80);

  animation: carina-navigation__top-navigation--outer-container-in
    var(--carina-transition-duration-200)
    var(--carina-transition-timing-function-productive-ease-in-out);
}

@media (min-width: 768px) {

.carina-navigation__top-navigation-overlay {
    opacity: 1
}
  }

.carina-navigation__user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--carina-spacing-2);
  padding: var(--carina-spacing-3) var(--carina-spacing-6)
    var(--carina-spacing-6);
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  font-family: var(--carina-font-family-primary);
}

.carina-navigation__user-profile a {
    display: block;
    box-sizing: border-box;
    min-width: 112px;
    margin: var(--carina-spacing-4) auto;
    padding: var(--carina-spacing-2);
    border: var(--carina-border-width-1) solid var(--carina-border-color-hard);
    border-radius: var(--carina-border-radius-sm);

    color: var(--carina-text-color-base);
    font-size: var(--carina-font-size-body-md);
    text-align: center;
    text-decoration: none;
  }

.carina-navigation__user-profile a:hover {
      background-color: var(--carina-background-color-surface-hover);
    }

.carina-navigation__user-profile a:active {
      background-color: var(--carina-background-color-surface-active);
    }

.carina-navigation__user-profile a:focus-visible {
      outline: none;
      box-shadow: var(--carina-ring-black);
    }

.carina-navigation__user-profile--rebrand a {
      border-radius: var(--carina-border-radius-xs);
    }

.carina-navigation__user-profile-name {
  margin-top: var(--carina-spacing-4);

  font-size: var(--carina-font-size-body-md);
  text-align: center;

  cursor: default;
}

.carina-navigation__user-profile-email {
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-sm);
  text-align: center;

  cursor: default;
}

.carina-navigation__user-profile-description {
  margin-top: var(--carina-spacing-1);
  margin-bottom: var(--carina-spacing-4);

  font-size: var(--carina-font-size-body-xs);
  text-align: center;

  cursor: default;
}

.carina-pagination__item {
  position: relative;

  min-width: var(--carina-spacing-4);
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-2);
  border-color: transparent;
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-full);

  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-sm);
  font-family: inherit;
  line-height: 0;
  white-space: nowrap;
  text-align: center;
  text-transform: none;

  background: none;
  outline: none;
  cursor: pointer;

  outline-color: var(--carina-colors-transparent);
  outline-offset: calc(var(--carina-border-width-2) * -1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-pagination__item::-moz-focus-inner {
    padding: var(--carina-spacing-0);
    border: 0;
  }

.carina-pagination__item > svg {
    margin: -8px -5px;
  }

[dir='rtl'] .carina-pagination__item > svg {
      transform: rotate(var(--carina-rotate-negative-180));
      transform-origin: center;
    }

.carina-pagination__item:hover {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-hover);
  }

.carina-pagination__item:active {
    color: var(--carina-text-color-base);

    background-color: var(--carina-background-color-surface-active);
  }

.carina-pagination__item:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
    border-radius: var(--carina-border-radius-md);
  }

.carina-pagination__item--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-pagination__item--selected.carina-pagination__item--rebrand::before {
    background-color: var(--carina-border-color-primary-focus);
  }

.carina-pagination__item--disabled {
  color: var(--carina-text-color-disabled);

  pointer-events: none;
}

.carina-pagination__item--selected {
  border-radius: 0;

  color: var(--carina-text-color-base);

  pointer-events: none;
}

.carina-pagination__item--selected::before {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 4px;
    border-radius: var(--carina-border-radius-full);

    background-color: var(--carina-border-color-secondary-focus);

    content: '';
  }

.carina-pagination__item--selected:hover {
    background-color: transparent;
  }

.carina-pagination__item--selected:focus {
    outline: none;
  }

.carina-pagination {
  display: inline-flex;
  padding: var(--carina-spacing-0) var(--carina-border-width-2);
}

@keyframes carina-progress-bar--outer-container-in {
  0% {
    left: 0;

    width: 30%;

    background-position-x: 0%;
  }

  50% {
    left: 70%;

    width: 30%;

    background-position-x: 100%;
  }

  100% {
    left: 0;

    width: 30%;

    background-position-x: 0%;
  }
}

.carina-progress-bar {
  position: relative;

  justify-content: center;
  width: 100%;

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-body-lg);
  font-family: var(--carina-font-family-primary);
  text-align: center;
}

.carina-progress-bar__bar-container {
  position: relative;

  width: 100%;
  height: 5px;
  margin: var(--carina-spacing-6) auto;
  border-radius: var(--carina-border-radius-full);
  overflow: visible;

  background: var(--carina-background-color-neutral-inactive);
}

.carina-progress-bar__bar-progress-bar {
  position: relative;

  display: block;
  height: 5px;
  border-radius: var(--carina-border-radius-full);

  background-size: 100% 5px;
  opacity: var(--carina-opacity-100);

  transition:
    clip-path var(--carina-transition-duration-300) linear,
    width var(--carina-transition-duration-300) linear,
    background 2000ms linear,
    left 2000ms linear,
    background-image 2000ms linear,
    background-color 2000ms linear,
    opacity 2000ms linear;
}

.carina-progress-bar__determinate {
  background-image: linear-gradient(
    to right,
    var(
      --carina-progress-bar-background,
      var(
        --carina-progress-bar-background-stop-1,
        var(--carina-background-color-tertiary)
      )
    ),
    var(
      --carina-progress-bar-background,
      var(
        --carina-progress-bar-background-stop-2,
        var(--carina-background-color-primary)
      )
    ),
    var(
      --carina-progress-bar-background,
      var(
        --carina-progress-bar-background-stop-3,
        var(--carina-background-color-secondary)
      )
    )
  );

  clip-path: inset(
    0% var(--carina-progress-bar-percentage-remaining) 0% 0% round 6px
  );
}

.carina-progress-bar__indeterminate {
  background-image: linear-gradient(
    to right,
    var(--carina-background-color-secondary),
    var(--carina-background-color-tertiary),
    var(--carina-background-color-primary)
  );
  background-size: 333%;

  animation: carina-progress-bar--outer-container-in 3500ms ease-in-out infinite;
}

.carina-progress-bar__bar-container--phase1,
.carina-progress-bar__bar-container--rebrand {
  border-radius: var(--carina-border-radius-xs);
}

.carina-progress-bar__determinate--phase1,
.carina-progress-bar__determinate--rebrand {
  background-image: none;
  background: var(--carina-border-color-primary-focus);
  border-radius: var(--carina-border-radius-xs);

  clip-path: inset(
    0% var(--carina-progress-bar-percentage-remaining) 0% 0% round
      var(--carina-border-radius-xs)
  );
}

.carina-progress-bar__indeterminate--phase1,
.carina-progress-bar__indeterminate--rebrand {
  background-image: none;
  background: var(--carina-border-color-primary-focus);
  border-radius: var(--carina-border-radius-xs);
  transition: none;
}

@keyframes carina-pulse {
  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: var(--carina-pulse-opacity);
  }
}

.carina-pulse {
  --carina-pulse-opacity: 0;

  animation-name: carina-pulse;
}

@keyframes carina-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(calc(-1 * var(--carina-shake-distance)));
  }

  40%,
  80% {
    transform: translateX(var(--carina-shake-distance));
  }
}

@media not (prefers-reduced-motion) {
  .carina-shake {
    --carina-shake-distance: 33%;

    animation-name: carina-shake;
  }
}

.carina-shell-next__aside:not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside) {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-current-height) +
      var(--carina-shell-title-current-height)
  );
  z-index: var(--carina-shell-aside-z-index, 20);

  max-height: calc(
    100vh - var(--carina-shell-banner-offset) - var(--carina-shell-title-offset)
  );
  overflow-x: hidden;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  visibility: hidden;
  }

.carina-shell-next__aside--start:not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside--start) {
  translate: 0;
  height: 0;

  left: calc(var(--carina-shell-aside-start-width) * -1);

  grid-area: aside-start;
  width: var(--carina-shell-aside-start-width);

  transition:
    visibility 0ms ease-in-out var(--carina-transition-delay-300),
    translate var(--carina-transition-duration-300) ease-in-out;

  [dir='rtl'] & {
    translate: var(--carina-shell-aside-start-width);
  }

  @media (min-width: 768px) {
    translate: calc(var(--carina-shell-aside-start-width) * -1);
    height: calc(
      100vh - var(--carina-shell-banner-current-height) -
        var(--carina-shell-title-current-height)
    );
    min-width: 0rem;
  }

  @media (max-width: 1023.98px) {
    z-index: var(--carina-shell-aside-lgmax-z-index, 60);

    transition:
      left var(--carina-transition-duration-300) ease-in-out,
      right var(--carina-transition-duration-300) ease-in-out,
      width var(--carina-transition-duration-100) ease-in-out
        var(--carina-transition-delay-300),
      visibility 0ms ease-in-out var(--carina-transition-delay-300);

    [dir='rtl'] & {
      right: calc(var(--carina-shell-aside-start-width) * -1);
    }
  }

  @media (min-width: 1024px) {
    min-width: 15rem;
  }
    }

/* r2: placed here so the :not() wrapper gives enough specificity to
         override width and min-width set by the mixin above. The mixin sets
         min-width: 15rem at lg, which must be reset so the 80px condensed
         width applies correctly at md–lg. At lg+ the variable itself resolves
         to 320px so the aside is always fully expanded without a toggle. */

@media (min-width: 768px) {

.carina-shell-next--r2 .carina-shell-next__aside--start:not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside--start) {
          min-width: 0;
          width: var(--carina-shell-aside-start-width)
      }
        }

.carina-shell-next[data-shell-enabled*='aside-start'] .carina-shell-next__aside--start:not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside.carina-shell-next__aside--start) {
  visibility: inherit;

  @media (min-width: 768px) {
    translate: 0;

    transition:
      min-width var(--carina-transition-duration-300) ease-in-out,
      translate var(--carina-transition-duration-300) ease-in-out;

    [dir='rtl'] & {
      translate: 0;
    }
  }
      }

@media (min-width: 1536px) {

.carina-shell-next[data-shell-enabled*='aside-start'] .carina-shell-next__aside--start {
  visibility: inherit;

  @media (min-width: 768px) {
    translate: 0;

    transition:
      min-width var(--carina-transition-duration-300) ease-in-out,
      translate var(--carina-transition-duration-300) ease-in-out;

    [dir='rtl'] & {
      translate: 0;
    }
  }
    }

.carina-shell-next__aside--start {
  translate: 0;
  height: 0;

  left: calc(var(--carina-shell-aside-start-width) * -1);

  grid-area: aside-start;
  width: var(--carina-shell-aside-start-width);

  transition:
    visibility 0ms ease-in-out var(--carina-transition-delay-300),
    translate var(--carina-transition-duration-300) ease-in-out;

  [dir='rtl'] & {
    translate: var(--carina-shell-aside-start-width);
  }

  @media (min-width: 768px) {
    translate: calc(var(--carina-shell-aside-start-width) * -1);
    height: calc(
      100vh - var(--carina-shell-banner-current-height) -
        var(--carina-shell-title-current-height)
    );
    min-width: 0rem;
  }

  @media (max-width: 1023.98px) {
    z-index: var(--carina-shell-aside-lgmax-z-index, 60);

    transition:
      left var(--carina-transition-duration-300) ease-in-out,
      right var(--carina-transition-duration-300) ease-in-out,
      width var(--carina-transition-duration-100) ease-in-out
        var(--carina-transition-delay-300),
      visibility 0ms ease-in-out var(--carina-transition-delay-300);

    [dir='rtl'] & {
      right: calc(var(--carina-shell-aside-start-width) * -1);
    }
  }

  @media (min-width: 1024px) {
    min-width: 15rem;
  }
  }
      }

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell-next__aside.carina-shell-next__aside--end:not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside--end) {
        position: fixed;
        right: calc(var(--carina-shell-aside-end-width) * -1);
        left: unset;
        z-index: var(--carina-shell-aside-lgmax-z-index, 60);

        width: var(--carina-shell-aside-end-current-width);
        height: 100%;

        box-shadow: var(--carina-box-shadow-2xl);

        transition:
          left var(--carina-transition-duration-300) ease-in-out,
          right var(--carina-transition-duration-300) ease-in-out,
          width 0ms ease-in-out var(--carina-transition-delay-300),
          visibility 0ms ease-in-out var(--carina-transition-delay-300)
    }

        [dir='rtl'] .carina-shell-next__aside.carina-shell-next__aside--end:not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside--end) {
          right: unset;
          left: calc(var(--carina-shell-aside-end-width) * -1);
        }
      }

.carina-shell-next[data-shell-enabled*='aside-end'] .carina-shell-next__aside--end:is(.carina-shell-next__aside.carina-shell-next__aside--end):not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside.carina-shell-next__aside--end) {
        height: 0;
        right: calc(var(--carina-shell-aside-end-width) * -1);
      }

@media (min-width: 768px) {

.carina-shell-next[data-shell-enabled*='aside-end'] .carina-shell-next__aside--end:is(.carina-shell-next__aside.carina-shell-next__aside--end):not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside.carina-shell-next__aside--end) {
          height: unset
      }
        }

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell-next[data-shell-enabled*='aside-end'] .carina-shell-next__aside--end:is(.carina-shell-next__aside.carina-shell-next__aside--end):not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside.carina-shell-next__aside--end) {
          max-height: 100vh;
          top: 0;
          right: 0;
          left: unset;
          z-index: var(--carina-shell-aside-end-lgmax-z-index, 80);

          visibility: inherit;

          transition: 
            left var(--carina-transition-duration-300) ease-in-out,
            right var(--carina-transition-duration-300) ease-in-out
      }

          [dir='rtl'] .carina-shell-next[data-shell-enabled*='aside-end'] .carina-shell-next__aside--end:is(.carina-shell-next__aside.carina-shell-next__aside--end):not(.carina-shell-next__stacked-aside[data-stack-asides='true'] .carina-shell-next__aside.carina-shell-next__aside--end) {
            right: unset;
            left: 0;
          }
        }

@media (min-width: 1536px) {

.carina-shell-next[data-shell-enabled*='aside-end'] .carina-shell-next__aside--end:is(.carina-shell-next__aside.carina-shell-next__aside--end) {
        visibility: inherit
    }

.carina-shell-next__aside--end {
      grid-area: aside-end;
      width: var(--carina-shell-aside-end-current-width);

      transition:
        width 0ms ease-in-out var(--carina-transition-delay-300),
        visibility 0ms ease-in-out var(--carina-transition-delay-300)
  }

.carina-shell-next__aside {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-current-height) +
      var(--carina-shell-title-current-height)
  );
  z-index: var(--carina-shell-aside-z-index, 20);

  max-height: calc(
    100vh - var(--carina-shell-banner-offset) - var(--carina-shell-title-offset)
  );
  overflow-x: hidden;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  visibility: hidden
}
      }

.carina-shell-next__stacked-aside[data-stack-asides='false'] {
    display: contents;
  }

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell-next__stacked-aside[data-stack-asides='true'] {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-current-height) +
      var(--carina-shell-title-current-height)
  );
  z-index: var(--carina-shell-aside-z-index, 20);

  max-height: calc(
    100vh - var(--carina-shell-banner-offset) - var(--carina-shell-title-offset)
  );
  overflow-x: hidden;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  visibility: hidden;
  translate: 0;
  height: 0;

  left: calc(var(--carina-shell-aside-start-width) * -1);

  grid-area: aside-start;
  width: var(--carina-shell-aside-start-width);

  transition:
    visibility 0ms ease-in-out var(--carina-transition-delay-300),
    translate var(--carina-transition-duration-300) ease-in-out;

  [dir='rtl'] & {
    translate: var(--carina-shell-aside-start-width);
  }

  @media (min-width: 768px) {
    translate: calc(var(--carina-shell-aside-start-width) * -1);
    height: calc(
      100vh - var(--carina-shell-banner-current-height) -
        var(--carina-shell-title-current-height)
    );
    min-width: 0rem;
  }

  @media (max-width: 1023.98px) {
    z-index: var(--carina-shell-aside-lgmax-z-index, 60);

    transition:
      left var(--carina-transition-duration-300) ease-in-out,
      right var(--carina-transition-duration-300) ease-in-out,
      width var(--carina-transition-duration-100) ease-in-out
        var(--carina-transition-delay-300),
      visibility 0ms ease-in-out var(--carina-transition-delay-300);

    [dir='rtl'] & {
      right: calc(var(--carina-shell-aside-start-width) * -1);
    }
  }

  @media (min-width: 1024px) {
    min-width: 15rem;
  }

      display: flex;
      flex-direction: column
  }

      .carina-shell-next[data-shell-enabled*='aside-start'] .carina-shell-next__stacked-aside[data-stack-asides='true'] {
  visibility: inherit;

  @media (min-width: 768px) {
    translate: 0;

    transition:
      min-width var(--carina-transition-duration-300) ease-in-out,
      translate var(--carina-transition-duration-300) ease-in-out;

    [dir='rtl'] & {
      translate: 0;
    }
  }
      }
    }

@media (min-width: 1536px) {

.carina-shell-next__stacked-aside {
    display: contents
}
  }

.carina-shell-next__banner {
  height: var(--carina-shell-banner-current-height);
  max-height: var(--carina-shell-banner-current-height);
  overflow: hidden;

  visibility: hidden;
}

.carina-shell-next[data-shell-sticky*='banner'] .carina-shell-next__banner {
    position: sticky;
    top: 0;
    z-index: var(--carina-shell-banner-z-index);
  }

.carina-shell-next[data-shell-enabled*='banner'] .carina-shell-next__banner {
    visibility: inherit;
  }

.carina-shell-next__dock {
  position: sticky;
  z-index: var(--carina-shell-dock-z-index);

  display: none;

  visibility: hidden;
}

.carina-shell-next__dock--start {
    grid-area: unset;
  }

.carina-shell-next[data-shell-enabled*='dock-start'] .carina-shell-next__dock--start {
      display: flex;
      visibility: inherit;
    }

@media (min-width: 640px) {

.carina-shell-next[data-shell-enabled*='dock-start'] .carina-shell-next__dock--start {
        grid-area: dock-start;
        height: 0
    }
      }

@media (max-width: 767.98px) {

.carina-shell-next[data-shell-enabled*='dock-start'] .carina-shell-next__dock--start {
        max-width: 100%;
        max-height: var(--carina-shell-dock-start-max-height)
    }
      }

@media (min-width: 768px) {

.carina-shell-next[data-shell-enabled*='dock-start'] .carina-shell-next__dock--start {
        height: 100%;
        translate: 0;

        transition: width var(--carina-transition-duration-400)
          var(--carina-transition-timing-function-productive-ease-out)
    }

        @starting-style {

.carina-shell-next[data-shell-enabled*='dock-start'] .carina-shell-next__dock--start {
          transition: none
    }
        }

        @media (prefers-reduced-motion) {

.carina-shell-next[data-shell-enabled*='dock-start'] .carina-shell-next__dock--start {
          transition: width var(--carina-transition-duration-reduced-motion)
    }
        }
      }

@media (max-width: 767.98px) {

.carina-shell-next__dock--start {
      width: 100%
  }
    }

@media (min-width: 768px) {

.carina-shell-next__dock--start {
      top: var(--carina-shell-banner-current-height);
      translate: calc(var(--carina-shell-dock-start-width) * -1);

      width: var(--carina-shell-dock-start-current-width)
  }

      [dir='rtl'] .carina-shell-next__dock--start {
        translate: var(--carina-shell-dock-start-width);
      }

.carina-shell-next__dock--start-open {
      width: var(--carina-shell-dock-start-expanded-width)
  }
    }

.carina-shell-next__dock--end {
    grid-area: dock-end;
  }

.carina-shell-next[data-shell-enabled*='dock-end'] .carina-shell-next__dock--end {
      display: flex;
      visibility: inherit;
    }

@media (min-width: 768px) {

.carina-shell-next[data-shell-enabled*='dock-end'] .carina-shell-next__dock--end {
        z-index: var(--carina-shell-dock-end-lgmax-z-index)
    }
      }

@media (max-width: 767.98px) {

.carina-shell-next[data-shell-enabled*='dock-end'] .carina-shell-next__dock--end {
        max-width: 100%;
        height: 100%;
        max-height: var(--carina-shell-dock-end-max-height)
    }

.carina-shell-next__dock--end {
      bottom: 0;
      position: fixed;
      width: 100%;

      transition: visibility 0ms ease-in-out
  }
      }

@media (min-width: 768px) {

.carina-shell-next__dock--end {
      top: calc(
        var(--carina-shell-banner-current-height) +
          var(--carina-shell-title-current-height)
      );
      width: var(--carina-shell-dock-end-current-width);
      height: calc(
        100vh - var(--carina-shell-banner-current-height) -
          var(--carina-shell-title-current-height)
      )
  }
    }

.carina-shell-next__dock-items {
    display: flex;
  }

@media (max-width: 767.98px) {

.carina-shell-next__dock-items {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden
  }

      .carina-shell-next__dock-items::before,
      .carina-shell-next__dock-items::after {
        content: '';
      }
    }

@media (min-width: 768px) {

.carina-shell-next__dock-items {
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto
  }
    }

@media (max-width: 767.98px) {

.carina-shell-next__dock {
    height: 0;
    max-height: 0;
    overflow: hidden
}
  }

@media (min-width: 768px) {

.carina-shell-next__dock {
    max-height: calc(100vh - var(--carina-shell-banner-current-height));
    overflow-x: hidden;
    overflow-y: auto
}
    .carina-shell-next__dock--start {
      overflow: visible;
    }
  }

.carina-shell-next__dock__skip-link {
  display: flex;
  background-color: var(--carina-background-color-primary);
  border-radius: var(--carina-border-radius-xl);
  border-width: var(--carina-border-width-2);
  box-shadow: var(--carina-ring-base);
  color: var(--carina-text-color-on-primary);
  justify-content: center;
  outline: 0;
}

.carina-shell-next__dock__skip-link:focus {
    position: absolute;
    width: 17.25rem;
    z-index: calc(var(--carina-shell-panel-z-index) + 1);
  }

.carina-shell-next__dock__skip-link--rebrand {
    border-radius: var(--carina-border-radius-sm);
    color: var(--carina-text-color-on-primary);
    box-shadow: none;
  }

.carina-shell-next__dock__skip-link--rebrand:focus {
    outline-color: var(--carina-border-color-primary-focus);
    outline-offset: 1px;
    outline-width: 2px;
    outline-style: solid;
  }

.carina-shell-next__dock__button {
  position: absolute;
  top: calc(var(--carina-spacing-3) + var(--carina-spacing-2-5));
  inset-inline-start: calc(
    var(--carina-shell-dock-start-width) - var(--carina-spacing-5)
  );
  border-radius: var(--carina-border-radius-xl);
  padding: var(--carina-spacing-1-5);
  z-index: var(--carina-shell-panel-z-index);
  transition: inset-inline-start var(--carina-transition-duration-400)
    var(--carina-transition-timing-function-productive-ease-out);
}

.carina-shell-next__dock__button--expanded {
  /* Container width - horizontal spacing - button width */
  inset-inline-start: calc(
    var(--carina-shell-dock-start-expanded-width) - var(--carina-spacing-3) -
      36px
  );
}

.carina-shell-next__dock-item {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 5.5rem;
  margin: 0.25rem;
  padding: 0.5rem;
  border-width: 0;
  border-radius: 10px;

  color: rgb(26 32 38);
  text-decoration: none;

  background-color: transparent;
  cursor: pointer;

  transition: background-color 300ms ease 0ms;
}

.carina-shell-next__dock-item:hover {
    background-color: rgb(247 247 247);
  }

.carina-shell-next__dock-item__text {
    display: -webkit-box;
    overflow: hidden;

    font-size: var(--carina-font-size-xs);
    white-space: initial;
    text-align: center;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

@media (max-width: 767.98px) {

.carina-shell-next__dock-item {
    min-width: 5.5rem;
    max-width: 6rem
}
  }

.carina-shell-next__dock-item--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-shell-next__footer {
  position: relative;

  grid-area: footer;
  height: 0;
  overflow-x: hidden;

  visibility: hidden;
}

.carina-shell-next[data-shell-enabled*='footer'] .carina-shell-next__footer {
    height: -moz-fit-content;
    height: fit-content;
    bottom: var(--carina-shell-dock-end-max-height);
  }

@media (min-width: 768px) {

.carina-shell-next[data-shell-enabled*='footer'] .carina-shell-next__footer {
      bottom: unset;
  }
    }

.carina-shell-next[data-shell-enabled*='footer'] .carina-shell-next__footer{

    visibility: inherit;
}

.carina-shell-next__header {
  grid-area: header;
  height: 0;
  overflow-x: hidden;

  visibility: hidden;
}

.carina-shell-next[data-shell-enabled*='header'] .carina-shell-next__header {
    height: -moz-fit-content;
    height: fit-content;

    visibility: inherit;
  }

.carina-shell-next__main {
  grid-area: main;
  overflow: auto;
}

@media (min-width: 768px) {

.carina-shell-next__main {
    max-height: calc(
      100vh - var(--carina-shell-banner-current-height) -
        var(--carina-shell-title-current-height)
    )
}
  }

.carina-shell-next__page {
  display: grid;
  position: relative;
  z-index: var(--carina-shell-page-z-index, 10);

  grid-template-areas:
    'title'
    'header'
    'page-actions'
    'main'
    'dock-end';
  grid-template-rows: auto auto auto 1fr auto;
  grid-template-columns: 100%;

  transition:
    grid-template-columns var(--carina-transition-duration-300) ease-in-out,
    grid-template-rows var(--carina-transition-duration-300) ease-in-out;
}

@starting-style {

.carina-shell-next__page {
    transition: none
}
  }

@media (min-width: 768px) {

.carina-shell-next__page {
    grid-template-areas:
      'dock-start title title title'
      'dock-start aside-start header dock-end'
      'dock-start aside-start page-actions dock-end'
      'dock-start aside-start main dock-end';
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns:
      var(--carina-shell-dock-start-current-width) var(
        --carina-shell-aside-start-current-width
      )
      1fr var(--carina-shell-dock-end-current-width)
}
  }

@media (min-width: 1536px) {

.carina-shell-next__page {
    grid-template-areas:
      'dock-start title title title title'
      'dock-start aside-start header aside-end dock-end'
      'dock-start aside-start page-actions aside-end dock-end'
      'dock-start aside-start main aside-end dock-end';
    grid-template-rows: auto auto auto 1fr;

    grid-template-columns:
      var(--carina-shell-dock-start-current-width) var(
        --carina-shell-aside-start-current-width
      )
      1fr var(--carina-shell-aside-end-current-width)
      var(--carina-shell-dock-end-current-width);

    min-height: calc(100vh - var(--carina-shell-banner-current-height))
}
  }

.carina-shell-next__page-actions {
  grid-area: page-actions;
  height: 0;
  overflow-x: hidden;

  visibility: hidden;
}

@media (min-width: 768px) {

.carina-shell-next[data-shell-sticky*='page-actions'] .carina-shell-next__page-actions {
      position: sticky;
      top: calc(
        var(--carina-shell-banner-offset) + var(--carina-shell-title-offset)
      );
      z-index: 20;

      transition: top 300ms ease-in-out
  }
    }

.carina-shell-next[data-shell-enabled*='page-actions'] .carina-shell-next__page-actions {
    height: -moz-fit-content;
    height: fit-content;

    visibility: inherit;
  }

.carina-shell-next__panel {
  position: fixed;
  top: 0;
  z-index: var(--carina-shell-panel-z-index);

  background: var(--carina-background-color-background);
  width: var(--carina-shell-panel-width);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  visibility: hidden;

  transition:
    left var(--carina-transition-duration-300) ease-in-out,
    right var(--carina-transition-duration-300) ease-in-out,
    visibility 0ms ease-in-out var(--carina-transition-delay-300);
}

.carina-shell-next__panel--start {
    right: unset;
    left: calc(-1 * var(--carina-shell-panel-width));
  }

[dir='rtl'] .carina-shell-next__panel--start {
      right: calc(-1 * var(--carina-shell-panel-width));
      left: unset;
    }

/* Match when data-shell-enabled includes the 'panel-start' key, not 'xl-panel-start'. */

.carina-shell-next[data-shell-enabled^='panel-start'] .carina-shell-next__panel--start,
    .carina-shell-next[data-shell-enabled*=',panel-start'] .carina-shell-next__panel--start {
      right: unset;
      left: 0;

      visibility: inherit;

      transition:
        left var(--carina-transition-duration-300) ease-in-out,
        right var(--carina-transition-duration-300) ease-in-out;
    }

[dir='rtl'] .carina-shell-next[data-shell-enabled^='panel-start'] .carina-shell-next__panel--start, [dir='rtl'] .carina-shell-next[data-shell-enabled*=',panel-start'] .carina-shell-next__panel--start {
        right: 0;
        left: unset;
      }

.carina-shell-next__panel--end {
    right: calc(-1 * var(--carina-shell-panel-width));
    left: unset;
  }

[dir='rtl'] .carina-shell-next__panel--end {
      right: unset;
      left: calc(-1 * var(--carina-shell-panel-width));
    }

/* Match when data-shell-enabled includes the 'panel-end' key, not 'xl-panel-end'. */

.carina-shell-next[data-shell-enabled^='panel-end'] .carina-shell-next__panel--end,
    .carina-shell-next[data-shell-enabled*=',panel-end'] .carina-shell-next__panel--end {
      right: 0;
      left: unset;

      visibility: inherit;

      transition:
        left var(--carina-transition-duration-300) ease-in-out,
        right var(--carina-transition-duration-300) ease-in-out;
    }

[dir='rtl'] .carina-shell-next[data-shell-enabled^='panel-end'] .carina-shell-next__panel--end, [dir='rtl'] .carina-shell-next[data-shell-enabled*=',panel-end'] .carina-shell-next__panel--end {
        right: unset;
        left: 0;
      }

.carina-shell-next__title {
  grid-area: title;
  height: var(--carina-shell-title-current-height);
  max-height: var(--carina-shell-title-current-height);
  overflow: hidden;

  visibility: hidden;
}

@media (min-width: 768px) {

.carina-shell-next[data-shell-sticky*='title'] .carina-shell-next__title {
      position: sticky;
      top: var(--carina-shell-banner-offset);
      z-index: var(--carina-shell-title-z-index)
  }
    }

.carina-shell-next[data-shell-enabled*='title'] .carina-shell-next__title {
    visibility: inherit;
  }

.carina-shell-next__xl-panel {
  display: none;
  position: fixed;
  top: 0;
  z-index: var(--carina-shell-xl-panel-z-index);
}

@media (min-width: 768px) {

.carina-shell-next__xl-panel {
    display: grid
}
  }

.carina-shell-next__xl-panel{

  width: auto;
  min-width: var(--carina-shell-xl-panel-width);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  visibility: hidden;

  transition:
    left var(--carina-transition-duration-300) ease-in-out,
    right var(--carina-transition-duration-300) ease-in-out,
    visibility 0ms ease-in-out var(--carina-transition-delay-300);
}

@media (min-width: 768px) {

.carina-shell-next__xl-panel {
    display: grid
}
  }

.carina-shell-next__xl-panel--start {
    right: unset;
    left: -100%;
  }

[dir='rtl'] .carina-shell-next__xl-panel--start {
      right: -100%;
      left: unset;
    }

.carina-shell-next[data-shell-enabled*='xl-panel-start'] .carina-shell-next__xl-panel--start {
      right: unset;
      left: 0;

      visibility: inherit;

      transition:
        left var(--carina-transition-duration-300) ease-in-out,
        right var(--carina-transition-duration-300) ease-in-out;
    }

[dir='rtl'] .carina-shell-next[data-shell-enabled*='xl-panel-start'] .carina-shell-next__xl-panel--start {
        right: 0;
        left: unset;
      }

.carina-shell-next__xl-panel--end {
    right: calc(-1 * var(--carina-shell-xl-panel-width));
    left: unset;
  }

[dir='rtl'] .carina-shell-next__xl-panel--end {
      right: unset;
      left: calc(-1 * var(--carina-shell-xl-panel-width));
    }

.carina-shell-next[data-shell-enabled*='xl-panel-end'] .carina-shell-next__xl-panel--end {
      right: 0;
      left: unset;

      visibility: inherit;

      transition:
        left var(--carina-transition-duration-300) ease-in-out,
        right var(--carina-transition-duration-300) ease-in-out;
    }

[dir='rtl'] .carina-shell-next[data-shell-enabled*='xl-panel-end'] .carina-shell-next__xl-panel--end {
        right: unset;
        left: 0;
      }

/* $(base)-variables is used for .NET environments */

.carina-shell-next,
.carina-shell-next-variables {
  --carina-shell-aside-end-current-width: 0px;
  --carina-shell-aside-end-width: 80px;
  --carina-shell-aside-start-current-width: 0px;
  --carina-shell-aside-start-width: 80px;
  --carina-shell-banner-current-height: 0px;
  --carina-shell-banner-height: 52px;
  --carina-shell-banner-offset: 0px;
  --carina-shell-dock-end-current-width: 0px;
  --carina-shell-dock-end-max-height: 6rem;
  --carina-shell-dock-end-width: 80px;
  --carina-shell-dock-start-current-width: 0px;
  --carina-shell-dock-start-max-height: 8.5rem;
  --carina-shell-dock-start-width: 80px;
  --carina-shell-dock-start-expanded-width: 320px;
  --carina-shell-panel-width: 20rem;
  --carina-shell-xl-panel-width: 43.75rem;
  --carina-shell-title-current-height: 0px;
  --carina-shell-title-height: 80px;
  --carina-shell-title-offset: 0px;

  --carina-shell-banner-z-index: 60;
  --carina-shell-title-z-index: 20;
  --carina-shell-header-z-index: 10;
  --carina-shell-aside-z-index: 20;
  --carina-shell-aside-lgmax-z-index: 60;
  --carina-shell-aside-end-lgmax-z-index: 80;
  --carina-shell-dock-z-index: 100;
  --carina-shell-dock-end-lgmax-z-index: 80;
  --carina-shell-panel-z-index: 110;
  --carina-shell-xl-panel-z-index: 120;
  --carina-shell-page-z-index: 10;
}

@media (min-width: 768px) {

.carina-shell-next,
.carina-shell-next-variables {
    --carina-shell-aside-start-width: auto;
    --carina-shell-aside-end-width: 20rem;
    --carina-shell-dock-end-max-height: 8.5rem
}
  }

.carina-shell-next {
  position: relative;
  top: 0;

  min-width: 100%;
  height: 100vh;
  overflow: hidden;
}

.carina-shell-next[data-shell-enabled*='banner'] {
    --carina-shell-banner-current-height: var(--carina-shell-banner-height);
  }

.carina-shell-next[data-shell-sticky*='banner'] {
    --carina-shell-banner-offset: var(--carina-shell-banner-current-height);
  }

.carina-shell-next[data-shell-enabled*='title'] {
    --carina-shell-title-current-height: var(--carina-shell-title-height);
  }

.carina-shell-next[data-shell-sticky*='title'] {
    --carina-shell-title-offset: var(--carina-shell-title-current-height);
  }

.carina-shell-next[data-shell-enabled*='dock-start'] {
    --carina-shell-dock-start-current-width: var(
      --carina-shell-dock-start-width
    );
  }

.carina-shell-next[data-shell-enabled*='dock-end'] {
    --carina-shell-dock-end-current-width: var(--carina-shell-dock-end-width);
  }

.carina-shell-next[data-shell-enabled*='aside-start'] {
    --carina-shell-aside-start-current-width: var(
      --carina-shell-aside-start-width
    );
  }

.carina-shell-next[data-shell-enabled*='aside-end'] {
    --carina-shell-aside-end-current-width: var(--carina-shell-aside-end-width);
  }

.carina-shell-next--r2 {
  --carina-shell-dock-start-width: 72px;
  --carina-shell-dock-start-expanded-width: 312px;
  --carina-shell-aside-start-expanded-width: 240px;
}

/* Aside is condensed at md–lg, always fully expanded at lg+. */

@media (min-width: 768px) {

.carina-shell-next--r2 {
    --carina-shell-aside-start-width: 80px
}
  }

@media (min-width: 1024px) {

.carina-shell-next--r2 {
    --carina-shell-aside-start-width: var(
      --carina-shell-aside-start-expanded-width
    )
}
  }

.carina-shell-next--r2[data-shell-enabled*='aside-start'] {
    --carina-shell-aside-start-current-width: var(
      --carina-shell-aside-start-width
    );
  }

/* At md–lg the aside is condensed; expand the grid column while the
       object sidebar is open so page content is pushed rather than overlaid. */

@media (min-width: 768px) {

.carina-shell-next--r2[data-shell-enabled*='aside-start']:has(
      .carina-navigation-next__object-sidebar-collapse.carina-transition--enter-done
    ) {
        --carina-shell-aside-start-width: var(
          --carina-shell-aside-start-expanded-width
        )
    }
      }

/* Dock expands/collapses independently via its toggle button. */

@media (min-width: 768px) {

.carina-shell-next--r2:has(.carina-shell-next__dock--start-open) {
      --carina-shell-dock-start-current-width: var(
        --carina-shell-dock-start-expanded-width
      )
  }
    }

.carina-shell__aside:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside) {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) +
      var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset)
  );
  z-index: 30;

  max-height: calc(
    100vh - var(--carina-shell-banner-offset) -
      var(--carina-shell-header-offset) - var(--carina-shell-title-offset) -
      var(--carina-shell-breadcrumbs-offset)
  );
  overflow-x: hidden;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  background-color: var(--carina-background-color-surface);

  visibility: hidden;
  }

.carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--start) {
  @media (min-width: 1024px) {
    translate: calc(var(--carina-shell-aside-start-width) * -1);

    grid-area: aside-start;
    width: var(--carina-shell-aside-start-width);

    transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out;

    [dir='rtl'] & {
      translate: var(--carina-shell-aside-start-width);
    }
  }

  @media (max-width: 1023.98px) {
    --carina-shell-aside-start-width: 80px;
    position: absolute;
    right: unset;
    left: calc(var(--carina-shell-aside-start-width) * -1);
    z-index: 80;

    width: 0;

    box-shadow: var(--carina-box-shadow-2xl);

    transition: left 300ms ease-in-out, right 300ms ease-in-out,
      width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms;

    [dir='rtl'] & {
      right: calc(var(--carina-shell-aside-start-width) * -1);
      left: unset;
    }
  }
    }

.carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--start) {
  visibility: inherit;

  @media (min-width: 1024px) {
    translate: 0;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      translate 300ms ease-in-out;

    [dir='rtl'] & {
      translate: 0;
    }
  }

  @media (max-width: 1023.98px) {
    right: unset;
    left: var(--carina-shell-dock-start-width);

    width: var(--carina-shell-aside-start-width);

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      left 300ms ease-in-out, right 300ms ease-in-out;

    [dir='rtl'] & {
      right: var(--carina-shell-dock-start-width);
      left: unset;
    }
  }
      }

@media (min-width: 1536px) {

.carina-shell[data-shell-enabled*='aside-start'] .carina-shell__aside--start {
  visibility: inherit;

  @media (min-width: 1024px) {
    translate: 0;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      translate 300ms ease-in-out;

    [dir='rtl'] & {
      translate: 0;
    }
  }

  @media (max-width: 1023.98px) {
    right: unset;
    left: var(--carina-shell-dock-start-width);

    width: var(--carina-shell-aside-start-width);

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      left 300ms ease-in-out, right 300ms ease-in-out;

    [dir='rtl'] & {
      right: var(--carina-shell-dock-start-width);
      left: unset;
    }
  }
    }

.carina-shell__aside--start {
  @media (min-width: 1024px) {
    translate: calc(var(--carina-shell-aside-start-width) * -1);

    grid-area: aside-start;
    width: var(--carina-shell-aside-start-width);

    transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out;

    [dir='rtl'] & {
      translate: var(--carina-shell-aside-start-width);
    }
  }

  @media (max-width: 1023.98px) {
    --carina-shell-aside-start-width: 80px;
    position: absolute;
    right: unset;
    left: calc(var(--carina-shell-aside-start-width) * -1);
    z-index: 80;

    width: 0;

    box-shadow: var(--carina-box-shadow-2xl);

    transition: left 300ms ease-in-out, right 300ms ease-in-out,
      width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms;

    [dir='rtl'] & {
      right: calc(var(--carina-shell-aside-start-width) * -1);
      left: unset;
    }
  }
  }
      }

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell__aside.carina-shell__aside--end:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--end) {
        position: fixed;
        right: calc(var(--carina-shell-aside-end-width) * -1);
        left: unset;
        z-index: 80;

        width: var(--carina-shell-aside-end-current-width);
        height: 100%;

        box-shadow: var(--carina-box-shadow-2xl);

        transition: left 300ms ease-in-out, right 300ms ease-in-out, width 0ms ease-in-out 300ms,
          visibility 0ms ease-in-out 300ms
    }

        [dir='rtl'] .carina-shell__aside.carina-shell__aside--end:not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside--end) {
          right: unset;
          left: calc(var(--carina-shell-aside-end-width) * -1);
        }
      }

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell[data-shell-enabled*='aside-end'] .carina-shell__aside--end:is(.carina-shell__aside.carina-shell__aside--end):not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--end) {
          right: 0;
          left: unset;

          visibility: inherit;

          transition: max-height 300ms ease-in-out, top 300ms ease-in-out, left 300ms ease-in-out,
            right 300ms ease-in-out
      }
          
          [dir='rtl'] .carina-shell[data-shell-enabled*='aside-end'] .carina-shell__aside--end:is(.carina-shell__aside.carina-shell__aside--end):not(.carina-shell__stacked-aside[data-stack-asides='true'] .carina-shell__aside.carina-shell__aside--end) {
            right: unset;
            left: 0;
          }
        }

@media (min-width: 1536px) {

.carina-shell[data-shell-enabled*='aside-end'] .carina-shell__aside--end:is(.carina-shell__aside.carina-shell__aside--end) {
        visibility: inherit;

        transition: max-height 300ms ease-in-out, top 300ms ease-in-out
    }

.carina-shell__aside--end {
      grid-area: aside-end;
      width: var(--carina-shell-aside-end-current-width);

      transition: width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms
  }

.carina-shell__aside {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) +
      var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset)
  );
  z-index: 30;

  max-height: calc(
    100vh - var(--carina-shell-banner-offset) -
      var(--carina-shell-header-offset) - var(--carina-shell-title-offset) -
      var(--carina-shell-breadcrumbs-offset)
  );
  overflow-x: hidden;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  background-color: var(--carina-background-color-surface);

  visibility: hidden
}
      }

.carina-shell__stacked-aside[data-stack-asides='false'] {
    display: contents;
  }

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell__stacked-aside[data-stack-asides='true'] {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) +
      var(--carina-shell-title-offset) + var(--carina-shell-breadcrumbs-offset)
  );
  z-index: 30;

  max-height: calc(
    100vh - var(--carina-shell-banner-offset) -
      var(--carina-shell-header-offset) - var(--carina-shell-title-offset) -
      var(--carina-shell-breadcrumbs-offset)
  );
  overflow-x: hidden;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  background-color: var(--carina-background-color-surface);

  visibility: hidden;
  @media (min-width: 1024px) {
    translate: calc(var(--carina-shell-aside-start-width) * -1);

    grid-area: aside-start;
    width: var(--carina-shell-aside-start-width);

    transition: visibility 0ms ease-in-out 300ms, translate 300ms ease-in-out;

    [dir='rtl'] & {
      translate: var(--carina-shell-aside-start-width);
    }
  }

  @media (max-width: 1023.98px) {
    --carina-shell-aside-start-width: 80px;
    position: absolute;
    right: unset;
    left: calc(var(--carina-shell-aside-start-width) * -1);
    z-index: 80;

    width: 0;

    box-shadow: var(--carina-box-shadow-2xl);

    transition: left 300ms ease-in-out, right 300ms ease-in-out,
      width 0ms ease-in-out 300ms, visibility 0ms ease-in-out 300ms;

    [dir='rtl'] & {
      right: calc(var(--carina-shell-aside-start-width) * -1);
      left: unset;
    }
  }

      display: flex;
      flex-direction: column
  }

      .carina-shell[data-shell-enabled*='aside-start'] .carina-shell__stacked-aside[data-stack-asides='true'] {
  visibility: inherit;

  @media (min-width: 1024px) {
    translate: 0;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      translate 300ms ease-in-out;

    [dir='rtl'] & {
      translate: 0;
    }
  }

  @media (max-width: 1023.98px) {
    right: unset;
    left: var(--carina-shell-dock-start-width);

    width: var(--carina-shell-aside-start-width);

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      left 300ms ease-in-out, right 300ms ease-in-out;

    [dir='rtl'] & {
      right: var(--carina-shell-dock-start-width);
      left: unset;
    }
  }
      }
    }

@media (min-width: 1536px) {

.carina-shell__stacked-aside {
    display: contents
}
  }

.carina-shell__banner {
  height: 100%;
  max-height: var(--carina-shell-banner-current-height);
  overflow: hidden;

  visibility: hidden;

  transition: max-height 300ms ease-in-out, visibility 0ms ease-in-out 300ms,
    height 0ms ease-in-out 300ms;
}

.carina-shell[data-shell-sticky*='banner'] .carina-shell__banner {
    position: sticky;
    top: 0;
    z-index: 60;
  }

.carina-shell[data-shell-enabled*='banner'] .carina-shell__banner {
    visibility: inherit;

    transition: max-height 300ms ease-in-out;
  }

.carina-shell__breadcrumbs {
  grid-area: breadcrumbs;
  height: var(--carina-shell-breadcrumbs-current-height);
  max-height: var(--carina-shell-breadcrumbs-current-height);
  overflow: hidden;

  visibility: hidden;
}

@media (min-width: 768px) {

.carina-shell[data-shell-sticky*='breadcrumbs'] .carina-shell__breadcrumbs {
      position: sticky;
      top: calc(
        var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) +
          var(--carina-shell-title-offset)
      );
      z-index: 20;

      transition: top 300ms ease-in-out
  }
    }

.carina-shell[data-shell-enabled*='breadcrumbs'] .carina-shell__breadcrumbs {
    visibility: inherit;
  }

.carina-shell__dock {
  position: sticky;
  top: calc(
    var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) +
      var(--carina-shell-title-offset)
  );
  z-index: 1000;

  display: flex;

  background-color: rgb(255 255 255);
  visibility: hidden;
}

.carina-shell__dock--start {
    grid-area: dock-start;
  }

.carina-shell[data-shell-enabled*='dock-start'] .carina-shell__dock--start {
      visibility: inherit;
    }

@media (max-width: 767.98px) {

.carina-shell[data-shell-enabled*='dock-start'] .carina-shell__dock--start {
        max-width: 100%;
        height: 100%;
        max-height: var(--carina-shell-dock-start-max-height);

        transition:
          max-height 300ms ease-in-out,
          top 300ms ease-in-out
    }
      }

@media (min-width: 768px) {

.carina-shell[data-shell-enabled*='dock-start'] .carina-shell__dock--start {
        translate: 0;

        transition:
          max-height 300ms ease-in-out,
          top 300ms ease-in-out,
          translate 300ms ease-in-out
    }
      }

@media (max-width: 767.98px) {

.carina-shell__dock--start {
      width: 100%;

      transition:
        max-height 300ms ease-in-out,
        height 0ms ease-in-out 300ms,
        visibility 0ms ease-in-out 300ms
  }
    }

@media (min-width: 768px) {

.carina-shell__dock--start {
      translate: calc(var(--carina-shell-dock-start-width) * -1);

      width: var(--carina-shell-dock-start-width);

      transition:
        visibility 0ms ease-in-out 300ms,
        translate 300ms ease-in-out
  }

      .carina-shell__dock--start:hover,
      .carina-shell__dock--start:focus-within {
        width: var(--carina-shell-dock-start-expanded-width);
      }

      [dir='rtl'] .carina-shell__dock--start {
        translate: var(--carina-shell-dock-start-width);
      }
    }

.carina-shell__dock--end {
    grid-area: dock-end;
  }

.carina-shell[data-shell-enabled*='dock-end'] .carina-shell__dock--end {
      visibility: inherit;
    }

@media (max-width: 767.98px) {

.carina-shell[data-shell-enabled*='dock-end'] .carina-shell__dock--end {
        max-width: 100%;
        height: 100%;
        max-height: var(--carina-shell-dock-end-max-height);

        transition:
          max-height 300ms ease-in-out,
          top 300ms ease-in-out
    }
      }

@media (min-width: 768px) {

.carina-shell[data-shell-enabled*='dock-end'] .carina-shell__dock--end {
        transition:
          max-height 300ms ease-in-out,
          top 300ms ease-in-out
    }
      }

@media (max-width: 767.98px) {

.carina-shell__dock--end {
      bottom: 0;

      width: 100%;

      transition:
        max-height 300ms ease-in-out,
        height 0ms ease-in-out 300ms,
        visibility 0ms ease-in-out 300ms
  }
    }

@media (min-width: 768px) {

.carina-shell__dock--end {
      width: var(--carina-shell-dock-end-current-width);

      transition:
        visibility 0ms ease-in-out 300ms,
        width 0ms ease-in-out 300ms
  }
    }

.carina-shell__dock-items {
    display: flex;
  }

@media (max-width: 767.98px) {

.carina-shell__dock-items {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden
  }

      .carina-shell__dock-items::before,
      .carina-shell__dock-items::after {
        content: '';
      }
    }

@media (min-width: 768px) {

.carina-shell__dock-items {
      flex-direction: column;
      min-width: var(--carina-shell-dock-end-width);
      overflow-x: hidden;
      overflow-y: auto
  }
    }

@media (max-width: 767.98px) {

.carina-shell__dock {
    height: 0;
    max-height: 0;
    overflow: hidden
}
  }

@media (min-width: 768px) {

.carina-shell__dock {
    max-height: calc(
      100vh - var(--carina-shell-banner-offset) -
        var(--carina-shell-header-offset) - var(--carina-shell-title-offset)
    );
    overflow-x: hidden;
    overflow-y: auto
}
  }

.carina-shell__dock-item {
  position: relative;

  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--carina-shell-dock-start-width);
  margin: 0.25rem;
  padding: 0.5rem;
  border-width: 0;
  border-radius: 10px;

  color: var(--carina-text-color-body);
  text-decoration: none;

  background-color: transparent;
  cursor: pointer;

  transition: background-color var(--carina-transition-duration-300) ease;
}

.carina-shell__dock-item:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-shell__dock-item__text {
    display: -webkit-box;
    overflow: hidden;

    font-size: var(--carina-font-size-xs);
    white-space: initial;
    text-align: center;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

@media (max-width: 767.98px) {

.carina-shell__dock-item {
    width: var(--carina-shell-dock-start-width)
}
  }

.carina-shell__dock-item--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-shell__footer {
  position: relative;

  grid-area: footer;
  height: 0;
  overflow-x: hidden;

  visibility: hidden;
}

.carina-shell[data-shell-enabled*='footer'] .carina-shell__footer {
    height: -moz-fit-content;
    height: fit-content;

    visibility: inherit;
  }

.carina-shell__header {
  height: 100%;
  max-height: var(--carina-shell-header-current-height);
  overflow: hidden;

  visibility: hidden;

  transition: max-height 300ms ease-in-out, visibility 0ms ease-in-out 300ms;
}

.carina-shell[data-shell-sticky*='header'] .carina-shell__header {
    position: sticky;
    top: var(--carina-shell-banner-offset);
    z-index: 60;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      visibility 0ms ease-in-out 300ms;
  }

.carina-shell[data-shell-enabled*='header'] .carina-shell__header {
    visibility: inherit;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out;
  }

.carina-shell__main {
  grid-area: main;
  overflow-x: auto;
}

.carina-shell__page {
  display: grid;
  grid-template-areas: 'dock-start breadcrumbs breadcrumbs breadcrumbs dock-end' 'dock-start aside-start page-title aside-end dock-end' 'dock-start aside-start page-actions aside-end dock-end' 'dock-start aside-start main aside-end dock-end';
  grid-template-rows: auto auto auto 1fr;

  grid-template-columns:
    var(--carina-shell-dock-start-current-width) var(
      --carina-shell-aside-start-current-width
    )
    1fr var(--carina-shell-aside-end-current-width)
    var(--carina-shell-dock-end-current-width);

  min-height: calc(
    100vh - var(--carina-shell-banner-current-height) -
      var(--carina-shell-header-current-height) -
      var(--carina-shell-title-current-height)
  );

  transition: grid-template-columns 300ms ease-in-out,
    grid-template-rows 300ms ease-in-out;
}

/* prettier-ignore */

@media (max-width: 1535.98px) {

.carina-shell__page {
    grid-template-areas: 'dock-start breadcrumbs breadcrumbs dock-end' 'dock-start aside-start page-title dock-end' 'dock-start aside-start page-actions dock-end' 'dock-start aside-start main dock-end';
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: var(--carina-shell-dock-start-current-width) var(--carina-shell-aside-start-current-width) 1fr var(
        --carina-shell-dock-end-current-width
      )
}
  }

@media (max-width: 1023.98px) {

.carina-shell__page {
    grid-template-areas: 'dock-start breadcrumbs dock-end' 'dock-start page-title dock-end' 'dock-start page-actions dock-end' 'dock-start main dock-end';
    grid-template-rows: auto auto auto 1fr;
    grid-template-columns: var(--carina-shell-dock-start-current-width) 1fr var(
        --carina-shell-dock-end-current-width
      )
}
  }

@media (max-width: 767.98px) {

.carina-shell__page {
    grid-template-areas: 'dock-start' 'breadcrumbs' 'page-title' 'page-actions' 'main' 'dock-end';
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-columns: 1fr
}
  }

.carina-shell__page-actions {
  grid-area: page-actions;
  height: 0;
  overflow-x: hidden;

  visibility: hidden;
}

@media (min-width: 768px) {

.carina-shell[data-shell-sticky*='page-actions'] .carina-shell__page-actions {
      position: sticky;
      top: calc(
        var(--carina-shell-banner-offset) + var(--carina-shell-header-offset) +
          var(--carina-shell-title-offset) +
          var(--carina-shell-breadcrumbs-offset)
      );
      z-index: 20;

      transition: top 300ms ease-in-out
  }
    }

.carina-shell[data-shell-enabled*='page-actions'] .carina-shell__page-actions {
    height: -moz-fit-content;
    height: fit-content;

    visibility: inherit;
  }

.carina-shell__page-title {
  grid-area: page-title;
  height: 0;
  overflow-x: hidden;

  visibility: hidden;
}

.carina-shell[data-shell-enabled*='page-title'] .carina-shell__page-title {
    height: -moz-fit-content;
    height: fit-content;

    visibility: inherit;
  }

.carina-shell__panel {
  position: fixed;
  top: 0;
  z-index: 1000;

  width: var(--carina-shell-panel-width);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  visibility: hidden;

  transition: left 300ms ease-in-out, right 300ms ease-in-out,
    visibility 0ms ease-in-out 300ms;
}

.carina-shell__panel--start {
    right: unset;
    left: calc(-1 * var(--carina-shell-panel-width));
  }

[dir='rtl'] .carina-shell__panel--start {
      right: calc(-1 * var(--carina-shell-panel-width));
      left: unset;
    }

.carina-shell[data-shell-enabled*='panel-start'] .carina-shell__panel--start {
      right: unset;
      left: 0;

      visibility: inherit;

      transition: left 300ms ease-in-out, right 300ms ease-in-out;
    }

[dir='rtl'] .carina-shell[data-shell-enabled*='panel-start'] .carina-shell__panel--start {
        right: 0;
        left: unset;
      }

.carina-shell__panel--end {
    right: calc(-1 * var(--carina-shell-panel-width));
    left: unset;
  }

[dir='rtl'] .carina-shell__panel--end {
      right: unset;
      left: calc(-1 * var(--carina-shell-panel-width));
    }

.carina-shell[data-shell-enabled*='panel-end'] .carina-shell__panel--end {
      right: 0;
      left: unset;

      visibility: inherit;

      transition: left 300ms ease-in-out, right 300ms ease-in-out;
    }

[dir='rtl'] .carina-shell[data-shell-enabled*='panel-end'] .carina-shell__panel--end {
        right: unset;
        left: 0;
      }

.carina-shell__title-bar {
  height: 100%;
  max-height: var(--carina-shell-title-current-height);
  overflow: hidden;

  visibility: hidden;

  transition: max-height 300ms ease-in-out, visibility 0ms ease-in-out 300ms;
}

.carina-shell[data-shell-sticky*='title-bar'] .carina-shell__title-bar {
    position: sticky;
    top: calc(
      var(--carina-shell-banner-offset) + var(--carina-shell-header-offset)
    );
    z-index: 60;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out,
      visibility 0ms ease-in-out 300ms;
  }

.carina-shell[data-shell-enabled*='title-bar'] .carina-shell__title-bar {
    visibility: inherit;

    transition: max-height 300ms ease-in-out, top 300ms ease-in-out;
  }

.carina-shell__xl-panel {
  position: fixed;
  top: 0;
  z-index: var(--carina-shell-panel-z-index);

  width: auto;
  min-width: var(--carina-shell-xl-panel-width);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;

  visibility: hidden;

  transition: left 300ms ease-in-out, right 300ms ease-in-out,
    visibility 0ms ease-in-out 300ms;
}

.carina-shell__xl-panel--start {
    right: unset;
    left: -100%;
  }

[dir='rtl'] .carina-shell__xl-panel--start {
      right: -100%;
      left: unset;
    }

.carina-shell[data-shell-enabled*='xl-panel-start'] .carina-shell__xl-panel--start {
      right: unset;
      left: 0;

      visibility: inherit;

      transition: left 300ms ease-in-out, right 300ms ease-in-out;
    }

[dir='rtl'] .carina-shell[data-shell-enabled*='xl-panel-start'] .carina-shell__xl-panel--start {
        right: 0;
        left: unset;
      }

.carina-shell__xl-panel--end {
    right: calc(-1 * var(--carina-shell-xl-panel-width));
    left: unset;
  }

[dir='rtl'] .carina-shell__xl-panel--end {
      right: unset;
      left: calc(-1 * var(--carina-shell-xl-panel-width));
    }

.carina-shell[data-shell-enabled*='xl-panel-end'] .carina-shell__xl-panel--end {
      right: 0;
      left: unset;

      visibility: inherit;

      transition: left 300ms ease-in-out, right 300ms ease-in-out;
    }

[dir='rtl'] .carina-shell[data-shell-enabled*='xl-panel-end'] .carina-shell__xl-panel--end {
        right: unset;
        left: 0;
      }

.carina-shell {
  --carina-shell-aside-end-current-width: 0px;
  --carina-shell-aside-end-width: 5rem;
  --carina-shell-aside-start-current-width: 0px;
  --carina-shell-aside-start-width: 5rem;
  --carina-shell-banner-current-height: 0px;
  --carina-shell-banner-height: 60px;
  --carina-shell-banner-offset: 0px;
  --carina-shell-breadcrumbs-current-height: 0px;
  --carina-shell-breadcrumbs-height: 80px;
  --carina-shell-breadcrumbs-offset: 0px;
  --carina-shell-dock-end-current-width: 0px;
  --carina-shell-dock-end-max-height: 8.5rem;
  --carina-shell-dock-end-width: 5rem;
  --carina-shell-dock-end-expanded-width: 20rem;
  --carina-shell-dock-start-current-width: 0px;
  --carina-shell-dock-start-max-height: 8.5rem;
  --carina-shell-dock-start-width: 5rem;
  --carina-shell-dock-start-expanded-width: 19rem;
  --carina-shell-header-current-height: 0px;
  --carina-shell-header-height: 60px;
  --carina-shell-header-offset: 0px;
  --carina-shell-panel-width: 20rem;
  --carina-shell-xl-panel-width: 43.75rem;
  --carina-shell-title-current-height: 0px;
  --carina-shell-title-height: 60px;
  --carina-shell-title-offset: 0px;

  position: relative;
  top: 0;

  min-width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.carina-shell[data-shell-enabled*='banner'] {
    --carina-shell-banner-current-height: var(--carina-shell-banner-height);
  }

.carina-shell[data-shell-sticky*='banner'] {
    --carina-shell-banner-offset: var(--carina-shell-banner-current-height);
  }

.carina-shell[data-shell-enabled*='header'] {
    --carina-shell-header-current-height: var(--carina-shell-header-height);
  }

.carina-shell[data-shell-sticky*='header'] {
    --carina-shell-header-offset: var(--carina-shell-header-current-height);
  }

.carina-shell[data-shell-enabled*='title-bar'] {
    --carina-shell-title-current-height: var(--carina-shell-title-height);
  }

.carina-shell[data-shell-sticky*='title-bar'] {
    --carina-shell-title-offset: var(--carina-shell-title-current-height);
  }

.carina-shell[data-shell-enabled*='breadcrumbs'] {
    --carina-shell-breadcrumbs-current-height: var(
      --carina-shell-breadcrumbs-height
    );
  }

.carina-shell[data-shell-sticky*='breadcrumbs'] {
    --carina-shell-breadcrumbs-offset: var(
      --carina-shell-breadcrumbs-current-height
    );
  }

.carina-shell[data-shell-enabled*='dock-start'] {
    --carina-shell-dock-start-current-width: var(
      --carina-shell-dock-start-width
    );
  }

.carina-shell[data-shell-enabled*='dock-end'] {
    --carina-shell-dock-end-current-width: var(--carina-shell-dock-end-width);
  }

.carina-shell[data-shell-enabled*='aside-start'] {
    --carina-shell-aside-start-current-width: var(
      --carina-shell-aside-start-width
    );
  }

.carina-shell[data-shell-enabled*='aside-end'] {
    --carina-shell-aside-end-current-width: var(--carina-shell-aside-end-width);
  }

@media (min-width: 1024px) {

.carina-shell {
    --carina-shell-aside-start-width: 14.5rem;
    --carina-shell-aside-end-width: 14.5rem
}
  }

@keyframes carina-skeleton--pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes carina-skeleton--shimmer {
  60%,
  100% {
    transform: translateX(100%) skewX(173deg);
  }
}

.carina-skeleton {
  position: relative;

  display: inline-block;
  width: 100%;
  height: 1rem;
  border-radius: 0;

  border-radius: var(--carina-border-radius-sm);
  overflow: hidden;

  background-color: var(--carina-background-color-surface-alt);
}

.carina-skeleton--rebrand {
  border-radius: var(--carina-border-radius-xs);
}

.carina-skeleton--filled {
  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-skeleton--pulse,
.carina-skeleton--shimmer {
  animation-name: carina-skeleton--pulse;
  animation-duration: 2000ms;
  animation-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  animation-delay: var(--carina-transition-delay-100);
  animation-iteration-count: infinite;
}

[dir='rtl'] .carina-skeleton--pulse, [dir='rtl'] .carina-skeleton--shimmer {
    animation-direction: 'reverse';
  }

@media not (prefers-reduced-motion) {
  .carina-skeleton--shimmer::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background: linear-gradient(
      83deg,
      var(--carina-background-color-surface-alt) 0%,
      var(--carina-background-color-neutral-inactive) 40%,
      var(--carina-background-color-neutral-inactive) 60%,
      var(--carina-background-color-surface-alt) 100%
    );
    transform: translateX(-100%) skewX(173deg);

    animation-name: carina-skeleton--shimmer;
    animation-duration: 2000ms;
    animation-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    animation-delay: var(--carina-transition-delay-100);
    animation-iteration-count: infinite;

    content: '';
  }

    [dir='rtl'] .carina-skeleton--shimmer::after {
      animation-direction: 'reverse';
    }

  .carina-skeleton--carina-skeleton--shimmer.carina-skeleton--filled::after {
    background: linear-gradient(
      83deg,
      var(--carina-background-color-neutral-inactive) 0%,
      var(--carina-background-color-surface-alt) 40%,
      var(--carina-background-color-surface-alt) 60%,
      var(--carina-background-color-neutral-inactive) 100%
    );
  }
}

.carina-skeleton--has-children {
  height: inherit;
  padding: var(--carina-spacing-4);
}

.carina-slider {
  margin-top: var(--carina-spacing-0);
  margin-right: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-4);
  margin-left: var(--carina-spacing-0);

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  direction: ltr;
}

.carina-slider--carina-font-reset {
  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);
  font-family: var(--carina-font-family-primary);
  font-style: normal;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
}

.carina-slider__rheostat > div {
    position: relative;

    box-sizing: border-box;
    height: 2.25rem;
    margin: var(--carina-spacing-0) var(--carina-spacing-3);
    overflow: visible;

    cursor: pointer;
  }

.carina-slider__rheostat--disabled > div {
    position: relative;

    box-sizing: border-box;
    height: 2.25rem;
    margin: var(--carina-spacing-0) var(--carina-spacing-3);
    overflow: visible;

    cursor: default;
  }

.carina-slider__label {
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-normal);
}

.carina-slider__row {
  display: flex;
  align-items: center;
  margin-top: var(--carina-spacing-0);
  margin-right: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-2);
  margin-left: var(--carina-spacing-0);
}

.carina-slider__row > div {
    flex: 1 0 auto;
    padding-left: var(--carina-spacing-2);

    line-height: 0;
  }

.carina-slider__row > div:first-of-type {
      padding-left: var(--carina-spacing-0);

      text-align: left;
    }

.carina-slider__row > div:last-of-type {
      text-align: right;
    }

.carina-slider__row > div:not(first-of-type, last-of-type) {
      text-align: center;
    }

.carina-slider__row > div:only-child {
      padding: var(--carina-spacing-0);

      text-align: center;
    }

.carina-slider__row svg {
    display: inline;
    width: var(--carina-icon-md);
    height: var(--carina-icon-md);
  }

.carina-slider__row input {
    width: 65px;
  }

.carina-slider__row .carina-slider__row-cell {
    flex: 0 1 auto;
  }

.carina-slider__progress-bar {
  position: absolute;
  top: calc(50% - 0.125rem);
  left: 0;
  z-index: calc(var(--carina-z-index-current) + 40);

  box-sizing: border-box;
  height: 0.25rem;
  border-radius: var(--carina-border-radius-full);

  background-color: var(--carina-text-color-primary);
}

.carina-slider__progress-bar--disabled {
  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-slider__pit {
  top: calc(50% - 0.4375rem);
  z-index: calc(var(--carina-z-index-current) + 10);

  box-sizing: border-box;
  width: 2px;
  height: 0.875rem;
  border-radius: var(--carina-border-radius-sm);

  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-slider__pit--rebrand {
  border-radius: var(--carina-border-radius-xs);
}

.carina-slider__background {
  position: absolute;
  top: calc(50% - 0.125rem);
  left: 0;
  z-index: calc(var(--carina-z-index-current) + 20);

  box-sizing: border-box;
  width: 100%;
  height: 0.25rem;
  border-radius: var(--carina-border-radius-full);

  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-slider__handle {
  position: absolute;
  top: calc(50% - 1.125rem);
  z-index: calc(var(--carina-z-index-current) + 50);

  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: -1.125rem;
  border: none;
  border-radius: var(--carina-border-radius-full);
  overflow: visible;

  background-color: transparent;
  outline: 0;
  cursor: ew-resize;

  pointer-events: auto;
}

.carina-slider__handle::before {
    position: absolute;
    top: calc(50% - var(--carina-spacing-3));
    z-index: calc(var(--carina-z-index-current) + 20);

    display: block;
    box-sizing: border-box;
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--carina-border-radius-full);

    background-color: var(--carina-text-color-primary);

    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-1);
    outline-style: solid;
    outline-width: var(--carina-border-width-2);

    content: ' ';

    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-duration: calc(
      var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
    );
    transition-property: outline-color;
    transition-property: background-color, box-shadow, outline-color;
  }

.carina-slider__handle:focus::before {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-slider__handle:hover::before {
    z-index: calc(var(--carina-z-index-current) + 70);

    background-color: var(--carina-text-color-primary-hover);
  }

.carina-slider__handle:active::before {
    z-index: calc(var(--carina-z-index-current) + 30);

    background-color: var(--carina-text-color-primary);
    box-shadow: 0 0 0 1rem var(--carina-background-color-primary-pale);
  }

.carina-slider__handle--disabled {
  pointer-events: none;
}

.carina-slider__handle--disabled::before {
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-slider__handle--floating-label::after {
    bottom: 100%;
    z-index: calc(var(--carina-z-index-current) + 60);

    display: none;
    box-sizing: border-box;
    height: 1.5rem;
    margin-top: -2.75rem;
    padding: var(--carina-spacing-1) var(--carina-spacing-2);
    border-radius: var(--carina-border-radius-full);

    color: var(--carina-text-color-primary);
    font-size: var(--carina-font-size-body-sm);
    line-height: var(--carina-line-height-normal);
    white-space: nowrap;
    text-align: center;

    background-color: var(--carina-background-color-surface);
    transform: translate3d(0, 0, 0);

    content: attr(aria-valuenow);
  }

.carina-slider__handle--floating-label:hover.carina-slider__handle--floating-label::after,
  .carina-slider__handle--floating-label:focus.carina-slider__handle--floating-label::after,
  .carina-slider__handle--floating-label:active.carina-slider__handle--floating-label::after {
    display: block;
  }

.carina-slider__handle--persistent-floating-label::after {
    display: block;
  }

.carina-split-button {
  display: inline-flex;
}

.carina-split-button__text-button {
  /* top right corner */
  border-start-end-radius: var(--carina-border-radius-none);

  /* bottom right corner */
  border-end-end-radius: var(--carina-border-radius-none);
}

.carina-split-button__menu-button {
  margin-left: calc(-1 * var(--carina-spacing-px));

  /* top left corner */
  border-start-start-radius: var(--carina-border-radius-none);

  /* bottom left corner */
  border-end-start-radius: var(--carina-border-radius-none);
}

.carina-status-label {
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  padding: var(--carina-spacing-0) var(--carina-spacing-2);
  border-width: var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-md);

  color: var(--carina-text-color-base);
}

.carina-status-label--positive {
    background-color: var(--carina-background-color-success-pale);
  }

.carina-status-label--positive .carina-status-label__icon-start-container,
    .carina-status-label--positive .carina-status-label__icon-end-container {
      color: var(--carina-text-color-on-success-pale-soft);
    }

.carina-status-label--negative {
    background-color: var(--carina-background-color-danger-pale);
  }

.carina-status-label--negative .carina-status-label__icon-start-container,
    .carina-status-label--negative .carina-status-label__icon-end-container {
      color: var(--carina-text-color-on-danger-pale-soft);
    }

.carina-status-label--transitional {
    background-color: var(--carina-background-color-warning-pale);
  }

.carina-status-label--transitional .carina-status-label__icon-start-container,
    .carina-status-label--transitional .carina-status-label__icon-end-container {
      color: var(--carina-text-color-on-warning-pale-soft);
    }

.carina-status-label--neutral {
    background-color: var(--carina-background-color-info-pale);
  }

.carina-status-label--neutral .carina-status-label__icon-start-container,
    .carina-status-label--neutral .carina-status-label__icon-end-container {
      color: var(--carina-text-color-on-info-pale-soft);
    }

.carina-status-label--priority:not(.carina-status-label--ghost) {
    background-color: var(--carina-background-color-danger);
  }

.carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__icon-start-container,
    .carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__icon-end-container {
      color: var(--carina-text-color-on-danger);
    }

.carina-status-label--beta {
    background: linear-gradient(
      90deg,
      var(--carina-background-color-tertiary),
      var(--carina-background-color-secondary)
    );
    color: var(--carina-text-color-base-inverse);
  }

.carina-status-label--beta .carina-status-label__icon-start-container,
    .carina-status-label--beta .carina-status-label__icon-end-container {
      color: var(--carina-text-color-base-inverse);
    }

.carina-status-label--inactive {
    background-color: var(--carina-colors-neutral-10);
  }

.carina-status-label--inactive .carina-status-label__icon-start-container,
    .carina-status-label--inactive .carina-status-label__icon-end-container {
      color: var(--carina-colors-neutral-95);
    }

.carina-status-label__inner-container {
  position: relative;
  display: flex;
  align-items: center;

  box-sizing: border-box;
  border: var(--carina-border-width-0);
  overflow: hidden;

  font-family: var(--carina-font-family-primary);
  font-weight: var(--carina-font-weight-body);
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: baseline;
}

.carina-status-label__inner-container--positive {
    color: var(--carina-text-color-on-success-pale-soft);
  }

.carina-status-label__inner-container--negative {
    color: var(--carina-text-color-on-danger-pale-soft);
  }

.carina-status-label__inner-container--transitional {
    color: var(--carina-text-color-on-warning-pale-soft);
  }

.carina-status-label__inner-container--neutral {
    color: var(--carina-text-color-on-info-pale-soft);
  }

.carina-status-label__inner-container--priority:not(.carina-status-label--ghost) {
    color: var(--carina-text-color-on-danger);
  }

.carina-status-label__inner-container--inactive {
    color: var(--carina-colors-neutral-95);
  }

.carina-status-label--rebrand:not(.carina-status-label--pill) {
  border-radius: var(--carina-border-radius-sm);
}

.carina-status-label--pill {
  border-radius: var(--carina-border-radius-full);
  padding: var(--carina-spacing-0) var(--carina-spacing-3);
}

.carina-status-label.carina-status-label--ghost {
  background-color: var(--carina-colors-transparent);
}

.carina-status-label.carina-status-label--ghost.carina-status-label--priority .carina-status-label__inner-container--priority {
    color: var(--carina-text-color-on-danger-pale-soft);
  }

.carina-status-label.carina-status-label--ghost.carina-status-label--priority .carina-status-label__icon-start-container,
  .carina-status-label.carina-status-label--ghost.carina-status-label--priority .carina-status-label__icon-end-container {
    color: var(--carina-text-color-on-danger-pale-soft);
  }

.carina-status-label__icon-start-container,
.carina-status-label__icon-end-container {
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.carina-status-label__icon-start-container {
  margin-inline-end: var(--carina-spacing-2);
  margin-inline-start: 0;
}

.carina-status-label__icon-end-container {
  margin-inline-end: 0;
  margin-inline-start: var(--carina-spacing-2);
}

.carina-status-label--rebrand.carina-status-label--priority:not(.carina-status-label--ghost) {
  background-color: var(--carina-background-color-surface-inverse);
}

.carina-status-label--rebrand.carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__inner-container--priority {
    color: var(--carina-colors-tertiary-seed);
  }

.carina-status-label--rebrand.carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__icon-start-container,
  .carina-status-label--rebrand.carina-status-label--priority:not(.carina-status-label--ghost) .carina-status-label__icon-end-container {
    color: var(--carina-colors-tertiary-seed);
  }

.carina-status-label--rebrand.carina-status-label--ghost.carina-status-label--priority .carina-status-label__inner-container--priority {
    color: var(--carina-text-color-tertiary);
  }

.carina-status-label--rebrand.carina-status-label--ghost.carina-status-label--priority .carina-status-label__icon-start-container,
  .carina-status-label--rebrand.carina-status-label--ghost.carina-status-label--priority .carina-status-label__icon-end-container {
    color: var(--carina-text-color-tertiary);
  }

.carina-status-label--rebrand.carina-status-label--inactive .carina-status-label__inner-container--inactive {
    color: var(--carina-text-color-soft);
  }

.carina-status-label--rebrand.carina-status-label--inactive .carina-status-label__icon-start-container,
  .carina-status-label--rebrand.carina-status-label--inactive .carina-status-label__icon-end-container {
    color: var(--carina-text-color-soft);
  }

.carina-status-label--rebrand.carina-status-label--beta:not(.carina-status-label--ghost) {
  background: var(--carina-background-color-secondary);
  color: var(--carina-text-color-on-secondary);
}

.carina-status-label--rebrand.carina-status-label--beta:not(.carina-status-label--ghost) .carina-status-label__icon-start-container,
  .carina-status-label--rebrand.carina-status-label--beta:not(.carina-status-label--ghost) .carina-status-label__icon-end-container {
    color: var(--carina-text-color-on-secondary);
  }

.carina-status-label--xs {
  line-height: var(--carina-line-height-body-xs);
}

.carina-status-label--xs .carina-status-label__inner-container {
    font-size: var(--carina-font-size-body-2xs);
    padding: var(--carina-spacing-0);
  }

.carina-status-label--sm {
  line-height: var(--carina-line-height-body-sm);
}

.carina-status-label--sm .carina-status-label__inner-container {
    font-size: var(--carina-font-size-body-sm);
    padding: var(--carina-spacing-1) var(--carina-spacing-0);
  }

.carina-status-label--md {
  line-height: var(--carina-line-height-body-md);
}

.carina-status-label--md .carina-status-label__inner-container {
    font-size: var(--carina-font-size-body-md);
    padding: var(--carina-spacing-1-5) var(--carina-spacing-0);
  }

.carina-status-label--lg {
  line-height: var(--carina-line-height-body-xl);
}

.carina-status-label--lg .carina-status-label__inner-container {
    font-size: var(--carina-font-size-body-xl);
    padding: var(--carina-spacing-2) var(--carina-spacing-0);
  }

.carina-stepper__horizontal-step {
  width: 100%;
  text-align: center;
  height: 100%;
  padding: var(--carina-spacing-0);
  border: none;
  background: transparent;
  max-height: 104px;
  cursor: pointer;
  color: var(--carina-text-color-soft);
  line-height: var(--carina-line-height-body-lg);
}

.carina-stepper__horizontal-step:disabled,
.carina-stepper__horizontal-step--inert {
  cursor: default;
}

.carina-stepper__horizontal-step__container {
  padding: var(--carina-spacing-7) var(--carina-spacing-0);
  width: 100%;
  max-width: 174px;
  flex-grow: 1;
  flex-shrink: 1;
}

.carina-stepper__horizontal-step__container--first .carina-stepper__horizontal-step__progress-bar-left,
  .carina-stepper__horizontal-step__container--last .carina-stepper__horizontal-step__progress-bar-right {
    opacity: var(--carina-opacity-0);
  }

.carina-stepper__horizontal-step__name {
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  font-size: var(--carina-font-size-md);
  line-height: var(--carina-line-height-body-lg);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-top: var(--carina-spacing-3);
  margin-bottom: var(--carina-spacing-0);
}

.carina-stepper__horizontal-step__name--error {
    color: var(--carina-text-color-danger);
  }

.carina-stepper__horizontal-step__name--disabled {
    color: var(--carina-text-color-disabled);
  }

.carina-stepper__horizontal-step__name--active,
  .carina-stepper__horizontal-step__name--partial {
    color: var(--carina-text-color-base);
  }

.carina-stepper__horizontal-step__progress-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  padding: var(--carina-spacing-0);
  margin: var(--carina-spacing-0);
}

.carina-stepper__horizontal-step__progress-bar-left,
.carina-stepper__horizontal-step__progress-bar-right {
  width: 100%;
  height: 2px;
  display: flex;
  flex-grow: 2;
  background-color: var(--carina-border-color-secondary-focus);
}

.carina-stepper__horizontal-step__progress-bar-left {
  border-start-end-radius: var(--carina-border-radius-full);
  border-end-end-radius: var(--carina-border-radius-full);
  margin-inline-end: var(--carina-spacing-1);
}

.carina-stepper__horizontal-step__progress-bar-left--incomplete,
  .carina-stepper__horizontal-step__progress-bar-left--disabled,
  .carina-stepper__horizontal-step__progress-bar-left--optional,
  .carina-stepper__horizontal-step__progress-bar-left--processing {
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-stepper__horizontal-step__progress-bar-left--error {
    background-color: var(--carina-background-color-danger);
  }

.carina-stepper__horizontal-step__progress-bar-right {
  border-start-start-radius: var(--carina-border-radius-full);
  border-end-start-radius: var(--carina-border-radius-full);
  margin-inline-start: var(--carina-spacing-1);
}

.carina-stepper__horizontal-step__progress-bar-right--incomplete,
  .carina-stepper__horizontal-step__progress-bar-right--disabled,
  .carina-stepper__horizontal-step__progress-bar-right--optional,
  .carina-stepper__horizontal-step__progress-bar-right--processing {
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-stepper__horizontal-step__progress-bar-right--error {
    background-color: var(--carina-background-color-danger);
  }

.carina-stepper__horizontal-step__icon {
  height: 24px;
  width: 24px;
  font-size: var(--carina-font-size-2xs);
  box-sizing: border-box;
  border-radius: var(--carina-border-radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  background-color: var(--carina-background-color-surface);
}

.carina-stepper__horizontal-step__icon--processing {
    background-color: var(--carina-background-color-surface);
  }

.carina-stepper__horizontal-step__icon--completed {
    border: 4px solid var(--carina-background-color-secondary);
    color: var(--carina-background-color-secondary);
  }

.carina-stepper__horizontal-step__icon--completed svg {
      margin-top: 1px;
    }

.carina-stepper__horizontal-step__icon--incomplete,
  .carina-stepper__horizontal-step__icon--optional {
    background-color: var(--carina-background-color-surface);
    border: var(--carina-border-width-1) solid var(--carina-border-color-base);
  }

.carina-stepper__horizontal-step__icon--incomplete:hover, .carina-stepper__horizontal-step__icon--optional:hover {
      border: 1px solid var(--carina-text-color-soft);
    }

.carina-stepper__horizontal-step__icon--selected {
    background-color: var(--carina-text-color-base);
  }

.carina-stepper__horizontal-step__icon--disabled {
    border: var(--carina-border-width-1) solid var(--carina-border-color-soft);
    background-color: var(--carina-background-color-surface);
    color: var(--carina-text-color-disabled);
  }

.carina-stepper__horizontal-step__icon--disabled:hover {
      background-color: var(--carina-text-color-soft);
    }

.carina-stepper__horizontal-step__icon--partially-completed {
    background-color: var(--carina-background-color-secondary);
    color: var(--carina-text-color-on-secondary);
  }

.carina-stepper__horizontal-step__icon--partially-completed:hover {
      color: var(--carina-text-color-on-secondary-pale);
      background-color: var(--carina-background-color-secondary-pale);
    }

.carina-stepper__horizontal-step__icon--active,
  .carina-stepper__horizontal-step__icon--partial {
    border: var(--carina-border-width-1) solid
      var(--carina-border-color-secondary-focus);
    background-color: var(--carina-background-color-secondary);
    color: var(--carina-text-color-on-secondary);
  }

.carina-stepper__horizontal-step__icon--collapsed {
  }

.carina-stepper__horizontal-step__icon--error {
    color: var(--carina-background-color-danger);
    background-color: var(--carina-colors-transparent);
  }

.carina-stepper__horizontal-step__icon--error svg {
      margin-bottom: 2px;
    }

.carina-stepper__mobile {
  margin-top: 8px;
  padding-inline: 16px;

  width: 100%;
  box-sizing: border-box;
  display: block;
}

@media (min-width: 768px) {

.carina-stepper__mobile {
    display: none
}
  }

.carina-stepper__mobile__circular-progress-bar {
  fill: transparent;
}

.carina-stepper__mobile__circular-progress-bar circle {
    stroke: var(--carina-border-color-secondary-focus);
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }

.carina-stepper__mobile__progress-bar {
  display: flex;
  position: relative;
  top: calc(-1 * var(--carina-spacing-6));
}

@media (min-width: 768px) {

.carina-stepper__mobile__progress-bar {
    display: none
}
  }

.carina-stepper__mobile__step {
  display: flex;
  flex-direction: column;
}

.carina-stepper__step {
  display: flex;
  width: 100%;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

.carina-stepper__step > div {
    width: 100%;
  }

.carina-stepper__step__button {
  margin: var(--carina-spacing-0);
  border: none;
  width: 100%;
  background: transparent;
  padding: var(--carina-spacing-0);
  color: var(--carina-text-color-soft);
  text-align: left;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  font-family: inherit;
  line-height: inherit;
  font-size: 100%;
  cursor: pointer;
}

.carina-stepper__step__button > div {
    width: unset;
  }

.carina-stepper__step__button:disabled,
.carina-stepper__step__button--inert {
  cursor: default;
}

.carina-stepper__step__step-container {
  padding: var(--carina-spacing-4) var(--carina-spacing-0);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
  margin: var(--carina-spacing-1) var(--carina-spacing-0);
  width: 100%;
  box-sizing: border-box;
}

.carina-stepper__step__step-container--collapsed {
  padding: var(--carina-spacing-2) var(--carina-spacing-0);
}

.carina-stepper__step__name-wrapper {
  margin: var(--carina-spacing-0) var(--carina-spacing-2);
  font-size: var(--carina-font-size-md);
  font-weight: var(--carina-font-weight-body);
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.carina-stepper__step__name-wrapper:hover {
    color: var(--carina-font-color-hover);
  }

.carina-stepper__step__name-wrapper--error {
  color: var(--carina-text-color-danger);
}

.carina-stepper__step__name-wrapper--current:not(.carina-stepper__step__name-wrapper--error) {
  color: var(--carina-text-color-base);
}

.carina-stepper__step__name-wrapper--disabled,
.carina-stepper__step__name-wrapper--current.carina-stepper__step__name-wrapper--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-stepper__step__top-spacer {
  margin: 0 10px -16px 10px;
  pointer-events: none;
  background-color: var(--carina-border-color-secondary-focus);
}

.carina-stepper__step__top-spacer--incomplete,
  .carina-stepper__step__top-spacer--disabled,
  .carina-stepper__step__top-spacer--optional,
  .carina-stepper__step__top-spacer--processing {
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-stepper__step__top-spacer--error {
    background-color: var(--carina-background-color-danger);
  }

.carina-stepper__step__bottom-spacer,
.carina-stepper__step__top-spacer {
  width: 4px;
  height: 16px;
}

.carina-stepper__step__bottom-spacer {
  margin: -16px 10px 0 10px;
  pointer-events: none;
  background-color: var(--carina-border-color-secondary-focus);
}

.carina-stepper__step__bottom-spacer--incomplete,
  .carina-stepper__step__bottom-spacer--disabled,
  .carina-stepper__step__bottom-spacer--optional,
  .carina-stepper__step__bottom-spacer--processing {
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-stepper__step__bottom-spacer--error {
    background-color: var(--carina-background-color-danger);
  }

.carina-stepper__step__completed-spacer {
  background-color: var(--carina-border-color-secondary-focus);
}

.carina-stepper__step__sub-heading-wrapper {
  font-size: var(--carina-text-base-size-xs);
  color: var(--carina-text-color-soft);
  position: absolute;
  top: 40px;
  left: 48px;
}

.carina-stepper__step__chevron {
  margin: var(--carina-spacing-2) 0 var(--carina-spacing-2) auto;
  padding-top: 4;
  cursor: pointer;
}

.carina-stepper__step__icon {
  height: 24px;
  width: 24px;
  font-size: var(--carina-font-size-2xs);
  box-sizing: border-box;
  border-radius: var(--carina-border-radius-full);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  background-color: var(--carina-background-color-surface);
}

.carina-stepper__step__icon svg {
    margin-top: 2px;
    display: block;
    vertical-align: middle;
  }

.carina-stepper__step__icon--processing {
    background-color: var(--carina-background-color-surface);
  }

.carina-stepper__step__icon--completed {
    border: 4px solid var(--carina-border-color-secondary-focus);
    color: var(--carina-text-color-secondary);
  }

.carina-stepper__step__icon--error {
    border: none;
    color: var(--carina-background-color-danger);
    background-color: var(--carina-colors-transparent);
  }

@media (max-width: 639.98px) {
      .carina-stepper__step__icon--error svg {
        margin-top: unset;
        margin-bottom: 2px;
      }
    }

.carina-stepper__step__icon--incomplete,
  .carina-stepper__step__icon--optional {
    border: var(--carina-border-width-1) solid var(--carina-border-color-base);
    background-color: var(--carina-background-color-surface);
  }

.carina-stepper__step__icon--incomplete:hover, .carina-stepper__step__icon--optional:hover {
      border: 1px solid var(--carina-text-color-soft);
    }

.carina-stepper__step__icon--selected {
    background-color: var(--carina-text-color-base);
  }

.carina-stepper__step__icon--disabled {
    border: var(--carina-border-width-1) solid var(--carina-border-color-soft);
    background-color: var(--carina-background-color-surface);
    color: var(--carina-text-color-disabled);
  }

.carina-stepper__step__icon--disabled:hover {
      background-color: var(--carina-text-color-soft);
    }

.carina-stepper__step__icon--partially-completed {
    background-color: var(--carina-background-color-secondary);
    color: var(--carina-text-color-on-secondary);
  }

.carina-stepper__step__icon--partially-completed:hover {
      background-color: var(--carina-background-color-secondary-pale);
    }

.carina-stepper__step__icon--active:not(.carina-stepper__step__icon--error),
  .carina-stepper__step__icon--partial:not(.carina-stepper__step__icon--error) {
    border: var(--carina-border-width-1) solid
      var(--carina-border-color-secondary-focus);
    background-color: var(--carina-background-color-secondary);
    color: var(--carina-text-color-on-secondary);
  }

.carina-stepper__step__icon--collapsed {
  }

.carina-stepper__progress-bar {
  position: relative;
}

.carina-stepper__progress-bar__label {
  text-align: left;
}

.carina-stepper__progress-bar__status-wrapper {
  display: flex;
  justify-content: space-between;
  font-size: var(--carina-font-size-xs);
  color: var(--carina-text-color-soft);
  border-top: 2px solid var(--carina-border-color-soft);
  padding: var(--carina-spacing-1-5) var(--carina-spacing-0);
}

.carina-stepper__progress-bar__percentage {
  text-align: right;
}

.carina-stepper__sub-step {
  border: none;
  background: transparent;
  padding: var(--carina-spacing-0);
  text-align: left;
  display: flex;
  flex-grow: 1;
  position: relative;
  align-items: flex-end;
  font-size: var(--carina-font-size-xs);
  margin-inline-start: 16px;
  line-height: inherit;
  font-family: inherit;
  cursor: pointer;
}

.carina-stepper__sub-step:disabled,
.carina-stepper__sub-step--inert {
  cursor: default;
}

.carina-stepper__sub-step--wrapper {
  display: flex;
}

.carina-stepper__sub-step__name {
  flex-grow: 1;
  pointer-events: none;

  color: var(--carina-text-color-soft);
}

.carina-stepper__sub-step__icon-wrapper {
  pointer-events: none;
  color: var(--carina-text-color-danger);
}

.carina-stepper__sub-step__icon-wrapper--error {
    margin-bottom: 4px;
  }

.carina-stepper__sub-step__spacer {
  width: var(--carina-spacing-1);
  height: 36px;
  margin-inline: 10px;
  background-color: var(--carina-background-color-neutral-inactive);
}

.carina-stepper__sub-step__spacer--completed,
  .carina-stepper__sub-step__spacer--skipped,
  .carina-stepper__sub-step__spacer--partial {
    background-color: var(--carina-border-color-secondary-focus);
  }

.carina-stepper__sub-step__spacer--error {
    background-color: var(--carina-background-color-danger);
  }

.carina-stepper__sub-step__spacer--complete::after {
      background-color: var(--carina-border-color-secondary-focus);
    }

.carina-stepper__sub-step__spacer--complete::after, .carina-stepper__sub-step__spacer--active::after {
      content: ' ';
      height: var(--carina-spacing-4);
      width: var(--carina-spacing-4);
      margin-top: -1px;
      display: block;
      position: relative;
      top: 100%;
      border-bottom-left-radius: var(--carina-border-radius-full);
      border-bottom-right-radius: var(--carina-border-radius-full);
    }

.carina-stepper,
.carina-stepper__wrapper {
  display: flex;
  flex-direction: column;
}

.carina-stepper.carina-stepper--vertical {
  display: none;
  margin: calc(-1 * var(--carina-spacing-2)) var(--carina-spacing-0)
    var(--carina-spacing-0) var(--carina-spacing-0);
  width: 100%;
}

@media (min-width: 768px) {

.carina-stepper.carina-stepper--vertical {
    display: flex;
    flex-direction: column
}
  }

.carina-stepper.carina-stepper--horizontal {
  display: none;
  width: 100%;
  margin: var(--carina-spacing-0);
}

@media (min-width: 768px) {

.carina-stepper.carina-stepper--horizontal {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center
}
  }

.carina-stepper__progress-bar {
  position: relative;
  top: calc(-1 * var(--carina-spacing-6));
}

.carina-stepper__progress-bar-wrapper {
  display: none;
}

@media (min-width: 768px) {

.carina-stepper__progress-bar-wrapper {
    display: flex;
    flex-direction: column
}
  }

.carina-stepper-chevron {
  margin: var(--carina-spacing-2) 0 var(--carina-spacing-2) auto;
  padding-top: 4;
  cursor: pointer;
}

/* editable form elements */

.carina-tan-table {
  --carina-tan-table-border-color: var(--carina-border-color-soft);
  --carina-tan-table-border-radius: var(--carina-border-radius-xl);
  --carina-tan-table-border-width: var(--carina-border-width-1);
  --carina-tan-table-outside-border-width: var(--carina-tan-table-border-width);
  --carina-tan-table-horizontal-border-width: var(
    --carina-tan-table-border-width
  );
  --carina-tan-table-vertical-border-width: var(
    --carina-tan-table-border-width
  );
  --carina-tan-table-separator-border-width: calc(
    var(--carina-tan-table-border-width) * 2
  );
  --carina-tan-table-line-height: var(--carina-line-height-body-sm);
  --carina-tan-table-padding-horizontal: var(--carina-spacing-4);
  --carina-tan-table-padding-vertical: 18px;
  --carina-tan-table-row-height: 56px;
  --carina-tan-table-on-background-color: var(
    --carina-background-color-surface
  );
  --carina-tan-table-background-color: var(--carina-background-color-surface);
  --carina-tan-table-background-color-alt: var(
    --carina-background-color-surface-alt
  );

  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-0);
  word-break: break-word;
  text-wrap: stable;
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-tan-table-line-height);
  font-weight: var(--carina-font-weight-body);

  color: var(--carina-text-color-base);
}

.carina-tan-table--auto {
    table-layout: auto;
  }

.carina-tan-table--condensed {
    --carina-tan-table-row-height: 48px;
    --carina-tan-table-padding-vertical: var(--carina-spacing-3-5);
  }

.carina-tan-table--roomy {
    --carina-tan-table-row-height: 68px;
    --carina-tan-table-padding-vertical: var(--carina-spacing-6);
  }

.carina-tan-table--rebrand {
    --carina-tan-table-border-radius: var(--carina-border-radius-sm);
  }

.carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type > :first-child:is(th, td), .carina-tan-table--rounded:not(:has(thead))
    .carina-tan-table-body
    > tr:first-of-type
    > :first-child:is(th, td) {
    border-start-start-radius: var(--carina-tan-table-border-radius);
    transform-style: preserve-3d;
  }

.carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(thead))
    .carina-tan-table-body
    > tr:first-of-type
    > :first-child:is(th, td):not([data-dragging='true'])::after {
      width: var(--carina-tan-table-border-radius);
      height: var(--carina-tan-table-border-radius);
      background: var(--carina-tan-table-on-background-color);
      content: '';
      display: block;
      position: absolute;
      top: -1px;
      inset-inline-start: -1px;
      transform: translateZ(-1px);
    }

.carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type :last-child:is(th, td), .carina-tan-table--rounded:not(:has(thead))
    .carina-tan-table-body
    > tr:first-of-type
    > :last-child:is(th, td) {
    border-start-end-radius: var(--carina-tan-table-border-radius);
    transform-style: preserve-3d;
  }

.carina-tan-table--rounded .carina-tan-table-head > tr:first-of-type :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(thead))
    .carina-tan-table-body
    > tr:first-of-type
    > :last-child:is(th, td):not([data-dragging='true'])::after {
      width: var(--carina-tan-table-border-radius);
      height: var(--carina-tan-table-border-radius);
      background: var(--carina-tan-table-on-background-color);
      content: '';
      display: block;
      position: absolute;
      top: -1px;
      inset-inline-end: -1px;
      transform: translateZ(-1px);
    }

.carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :first-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(
      :first-child:is([rowspan='0'], [rowspan='1'], :not(rowspan))
    )
    + tr:last-of-type
    > :first-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:first-child:is([rowspan='2']))
    + tr:last-of-type
    > :first-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:first-child:is([rowspan='3']))
    + tr:last-of-type
    > :first-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(:first-child:is([rowspan='2']))
    > :first-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:first-child:is([rowspan='3']))
    > :first-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:first-child:is([rowspan='4']))
    > :first-child:is(th, td), .carina-tan-table--rounded:not(:has(tfoot))
    .carina-tan-table-body
    > tr:last-of-type
    > :first-child:is(th, td) {
    border-end-start-radius: var(--carina-tan-table-border-radius);
    transform-style: preserve-3d;
  }

.carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(
      :first-child:is([rowspan='0'], [rowspan='1'], :not(rowspan))
    )
    + tr:last-of-type
    > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:first-child:is([rowspan='2']))
    + tr:last-of-type
    > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:first-child:is([rowspan='3']))
    + tr:last-of-type
    > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(:first-child:is([rowspan='2']))
    > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:first-child:is([rowspan='3']))
    > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:first-child:is([rowspan='4']))
    > :first-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(tfoot))
    .carina-tan-table-body
    > tr:last-of-type
    > :first-child:is(th, td):not([data-dragging='true'])::after {
      width: var(--carina-tan-table-border-radius);
      height: var(--carina-tan-table-border-radius);
      background: var(--carina-tan-table-on-background-color);
      content: '';
      display: block;
      position: absolute;
      bottom: -1px;
      inset-inline-start: -1px;
      transform: translateZ(-1px);
    }

.carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :last-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(
      :last-child:is([rowspan='0'], [rowspan='1'], :not(rowspan))
    )
    + tr:last-of-type
    > :last-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:last-child:is([rowspan='2']))
    + tr:nth-last-of-type(2)
    > :last-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:last-child:is([rowspan='3']))
    + tr:nth-last-of-type(3)
    > :last-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(:last-child:is([rowspan='2']))
    > :last-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:last-child:is([rowspan='3']))
    > :last-child:is(th, td), .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:last-child:is([rowspan='4']))
    > :last-child:is(th, td), .carina-tan-table--rounded:not(:has(tfoot))
    .carina-tan-table-body
    > tr:last-of-type
    > :last-child:is(th, td) {
    border-end-end-radius: var(--carina-tan-table-border-radius);
    transform-style: preserve-3d;
  }

.carina-tan-table--rounded .carina-tan-table-footer > tr:only-child > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(
      :last-child:is([rowspan='0'], [rowspan='1'], :not(rowspan))
    )
    + tr:last-of-type
    > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:last-child:is([rowspan='2']))
    + tr:nth-last-of-type(2)
    > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:last-child:is([rowspan='3']))
    + tr:nth-last-of-type(3)
    > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(2):has(:last-child:is([rowspan='2']))
    > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(3):has(:last-child:is([rowspan='3']))
    > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded
    .carina-tan-table-footer
    > tr:nth-last-of-type(4):has(:last-child:is([rowspan='4']))
    > :last-child:is(th, td):not([data-dragging='true'])::after, .carina-tan-table--rounded:not(:has(tfoot))
    .carina-tan-table-body
    > tr:last-of-type
    > :last-child:is(th, td):not([data-dragging='true'])::after {
      width: var(--carina-tan-table-border-radius);
      height: var(--carina-tan-table-border-radius);
      background: var(--carina-tan-table-on-background-color);
      content: '';
      display: block;
      position: absolute;
      bottom: -1px;
      inset-inline-end: -1px;
      transform: translateZ(-1px);
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table {
    border-collapse: collapse
}
      .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:first-of-type .carina-tan-table-cell:first-of-type {
        border-radius: var(--carina-tan-table-border-radius)
          var(--carina-tan-table-border-radius) var(--carina-border-radius-none)
          var(--carina-border-radius-none);
      }

      .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:last-of-type .carina-tan-table-cell:last-of-type {
        border-radius: var(--carina-border-radius-none)
          var(--carina-border-radius-none) var(--carina-tan-table-border-radius)
          var(--carina-tan-table-border-radius);
      }
  }

/* add top border for headers and cells in the first row of the body when the table does not have a head. */

.carina-tan-table:not(:has(thead)) .carina-tan-table-body > tr:first-of-type :is(th, td) {
    border-top-width: var(--carina-tan-table-outside-border-width);
    border-top-style: solid;
    border-top-color: var(--carina-tan-table-border-color);
  }

/* remove bottom border for headers and cells in the last row of the body when the table has a footer. */

.carina-tan-table:has(tfoot) .carina-tan-table-body > tr:last-of-type > :is(th, td) {
    border-bottom-width: var(--carina-border-width-0);
  }

/* Add it back at the small breakpoint as the footer is hidden */

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table:has(tfoot) .carina-tan-table-body > tr:last-of-type > :is(th, td) {
      border-bottom-width: var(--carina-tan-table-horizontal-border-width);
      border-bottom-style: solid;
      border-bottom-color: var(--carina-tan-table-border-color)
  }

      .carina-tan-table:has(tfoot) .carina-tan-table-body > tr:last-of-type > :is(th, td):last-child {
        border-bottom-width: var(--carina-tan-table-outside-border-width);
      }
    }

.carina-tan-table--striped
    .carina-tan-table-body
    > tr:nth-child(
      2n + 1 of [data-carina-tan-table-row-depth='0'],
      :not([data-carina-tan-table-row-depth])
    )
    :is(.carina-tan-table-header, .carina-tan-table-cell),
      .carina-tan-table--striped .carina-tan-table-body .carina-tan-table-row--striped .carina-tan-table-cell {
    background-color: var(--carina-tan-table-background-color-alt);
  }

.carina-tan-table--no-dividers
    > :is(thead, tbody, tfoot)
    > .carina-tan-table-row
    > :is(.carina-tan-table-header, .carina-tan-table-cell):not(:last-child):not(.carina-tan-table--pinned-start) {
    border-inline-end-width: var(--carina-border-width-0);
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table--no-dividers
    > :is(thead, tbody, tfoot)
    > .carina-tan-table-row
    > :is(.carina-tan-table-header, .carina-tan-table-cell):not(:last-child):not(.carina-tan-table--pinned-start) {
      border-inline-end-width: var(--carina-tan-table-outside-border-width);
      border-inline-end-style: solid;
      border-inline-end-color: var(--carina-tan-table-border-color)
  }
    }

.carina-tan-table--no-outside-borders {
    --carina-tan-table-outside-border-width: var(--carina-border-width-0);
  }

.carina-tan-table [data-carina-tan-table-expand-button] span.carina-button__icon-start {
    transition: transform var(--carina-transition-duration-200)
      var(--carina-transition-timing-function-expressive-ease-in)
      var(--carina-transition-duration-100);
  }

.carina-tan-table [data-carina-tan-table-expand-button][data-expanded='false']
    span.carina-button__icon-start {
    transform: rotate(0deg);
  }

.carina-tan-table [data-carina-tan-table-expand-button][data-expanded='true']
    span.carina-button__icon-start {
    transform: rotate(-180deg);
  }

[dir='rtl'] .carina-tan-table [data-carina-tan-table-expand-button][data-expanded='true']
    span.carina-button__icon-start {
      transform: rotate(180deg);
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-body {
    display: block
}
  }

.carina-tan-table-body > tr > td {
    border-top-width: var(--carina-border-width-0);
  }

.carina-tan-table-body > tr > th {
    border-top-width: var(--carina-border-width-0);
    border-bottom-width: var(--carina-tan-table-horizontal-border-width);
    border-bottom-style: solid;
    border-bottom-color: var(--carina-tan-table-border-color);
  }

@container carina-table-responsive (max-width: 639.98px) {
    .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell {
      border-radius: var(--carina-border-radius-none);
    }

      .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell:first-child {
        border-top-width: var(--carina-tan-table-outside-border-width);
        border-top-style: solid;
        border-top-color: var(--carina-tan-table-border-color);
      }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row:not([data-carina-tan-table-row-depth]) .carina-tan-table-cell:last-child {
      margin-bottom: var(--carina-spacing-4);
    }

    .carina-tan-table
      .carina-tan-table-body
      .carina-tan-table-row:has(+ [data-carina-tan-table-row-depth='0'])
      .carina-tan-table-cell:last-child {
      margin-bottom: var(--carina-spacing-4);
    }
      .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:not([data-carina-tan-table-row-depth]) .carina-tan-table-cell:first-child {
        border-radius: var(--carina-tan-table-border-radius)
          var(--carina-tan-table-border-radius) var(--carina-border-radius-none)
          var(--carina-border-radius-none);
      }

      .carina-tan-table--rounded .carina-tan-table-body .carina-tan-table-row:not([data-carina-tan-table-row-depth]) .carina-tan-table-cell:last-child {
        border-radius: var(--carina-border-radius-none)
          var(--carina-border-radius-none) var(--carina-tan-table-border-radius)
          var(--carina-tan-table-border-radius);
      }

    .carina-tan-table--rounded
      .carina-tan-table-body
      .carina-tan-table-row[data-carina-tan-table-row-depth='0']
      .carina-tan-table-cell:first-child {
      border-radius: var(--carina-tan-table-border-radius)
        var(--carina-tan-table-border-radius) var(--carina-border-radius-none)
        var(--carina-border-radius-none);
    }

    .carina-tan-table--rounded
      .carina-tan-table-body
      .carina-tan-table-row:has(+ [data-carina-tan-table-row-depth='0'])
      .carina-tan-table-cell:last-child {
      border-radius: var(--carina-border-radius-none)
        var(--carina-border-radius-none) var(--carina-tan-table-border-radius)
        var(--carina-tan-table-border-radius);
    }
  }

.carina-tan-table-caption {
  caption-side: bottom;
}

.carina-tan-table-cell {
  position: relative;
  border-width: var(--carina-tan-table-horizontal-border-width)
    var(--carina-tan-table-vertical-border-width);
  border-style: solid;
  border-color: var(--carina-tan-table-border-color);
  border-inline-start-width: var(--carina-border-width-0);
  padding: var(--carina-tan-table-padding-vertical)
    var(--carina-tan-table-padding-horizontal);
  vertical-align: middle;
  background-color: var(--carina-tan-table-background-color);
  height: inherit;
}

/* Set default cursor for non-draggable cells */

.carina-tan-table-cell:not(:has(.carina-tan-table-reorder-handle)) {
    cursor: default;
  }

.carina-tan-table-cell:last-child {
    border-inline-end-width: var(--carina-tan-table-outside-border-width);
  }

.carina-tan-table:not(:has(tfoot)) > tbody > tr:last-child .carina-tan-table-cell {
    border-bottom-width: var(--carina-tan-table-outside-border-width);
  }

.carina-tan-table-row[data-dragging='true'] .carina-tan-table-cell,
  .carina-tan-table-row[data-add-border-top='true'] .carina-tan-table-cell {
    border-top-width: var(--carina-tan-table-horizontal-border-width);
    border-top-style: solid;
    border-top-color: var(--carina-tan-table-border-color);
  }

.carina-tan-table-cell[data-dragging='true']:not(.carina-tan-table--no-dividers td) {
    border-inline-start-width: var(--carina-tan-table-vertical-border-width);
    border-inline-start-style: solid;
    border-inline-style-color: var(--carina-tan-table-border-color);
  }

.carina-tan-table-cell:has(> :is(.carina-tan-table-reorder-handle, .carina-tan-table-row-actions, .carina-tan-table-expandable-container)) {
    padding: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal);
  }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) {
    padding: var(--carina-spacing-0);
  }

@supports (height: -moz-available) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) {
      height: 100%
  }
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):focus-within {
      box-shadow: inset 0 0 0 3px var(--carina-border-color-primary-focus);
      outline: none;
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):focus-within .carina-tan-table-fieldset {
        border: none;
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):has([aria-invalid='true']) {
      box-shadow: inset 0 0 0 1px var(--carina-border-color-danger);
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]):has([aria-invalid='true']):focus-within {
        box-shadow: inset 0 0 0 3px var(--carina-border-color-danger-focus);
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-fieldset {
      border: none;
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__container,
    .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textarea--grid {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      cursor: text;
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown--grid {
      width: 100%;
      height: 100%;
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector-tw__input--grid {
        padding-inline-start: calc(
          50% + 36px + var(--carina-tan-table-vertical-border-width)
        ) !important
    }
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input {
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      height: 100%;
      padding: var(--carina-tan-table-padding-vertical)
        var(--carina-tan-table-padding-horizontal);
      min-height: calc(
        (var(--carina-tan-table-padding-vertical) * 2) +
          var(--carina-line-height-body-sm)
      );
      border-bottom-width: var(--carina-tan-table-horizontal-border-width);
      border-bottom-style: solid;
      border-bottom-color: transparent;
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input--icon-end {
        padding-inline-end: calc(
          (2 * var(--carina-tan-table-padding-horizontal)) +
            var(--carina-icon-xs)
        );
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input--icon-start {
        padding-inline-start: calc(
          (2 * var(--carina-tan-table-padding-horizontal)) +
            var(--carina-icon-xs)
        );
      }

@container carina-table-responsive (max-width: 639.98px) {
        .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox__input:not(.carina-tan-table-date-range-picker__textbox-wrapper--grid *) {
          padding-inline-start: calc(
            50% + var(--carina-tan-table-vertical-border-width)
          );
        }
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--grid {
      bottom: calc(50% - (var(--carina-icon-xs) / 2));
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--end {
      inset-inline-end: var(--carina-tan-table-padding-horizontal);
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--start {
      inset-inline-start: var(--carina-tan-table-padding-horizontal);
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textbox-icon--start {
        inset-inline-start: calc(
          50% - var(--carina-icon-xs) -
            var(--carina-tan-table-padding-horizontal)
        )
    }
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textarea__textarea--grid {
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
      min-height: calc(var(--carina-tan-table-line-height) * 2);
      align-content: center;
      overflow: hidden;
      border-width: var(--carina-border-width-0);
      padding: var(--carina-tan-table-padding-vertical)
        var(--carina-tan-table-padding-horizontal);
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-textarea__textarea--grid {
        padding-inline-start: calc(
          50% + var(--carina-tan-table-vertical-border-width)
        )
    }
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__button--grid {
      font-size: inherit;
      font-weight: inherit;
      line-height: var(--carina-tan-table-line-height);
      height: 100%;
      padding: var(--carina-tan-table-padding-vertical)
        var(--carina-tan-table-padding-horizontal);
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__button--grid {
        padding-inline-start: calc(
          50% + var(--carina-tan-table-vertical-border-width)
        )
    }
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__text--grid,
    .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-dropdown__icon {
      height: 100%;
      align-content: center;
      padding-inline-start: var(--carina-spacing-0);
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector--grid {
        justify-content: center;
        height: 100%;
        position: relative;
        align-content: center;
        flex-wrap: wrap;
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__buttons--grid {
        justify-content: center;
        align-content: center;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
        top: calc(50% - (var(--carina-spacing-6) / 2));
        z-index: calc(var(--carina-z-index-current) + 1);
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__buttons--grid:nth-last-child(2) {
          inset-inline-end: calc(
            var(--carina-spacing-6) +
              (2 * var(--carina-tan-table-padding-horizontal))
          );
        }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__buttons--grid:last-child {
          inset-inline-end: var(--carina-tan-table-padding-horizontal);
        }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__textbox--grid {
        width: 100%;
        height: 100%;
        padding: var(--carina-spacing-0);
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__textbox--grid .carina-tan-table-textbox__input {
          padding-inline-end: calc(
            (2 * var(--carina-spacing-6)) +
              (3 * var(--carina-tan-table-padding-horizontal))
          );
          padding-inline-start: var(--carina-tan-table-padding-horizontal);
          text-align: start;
        }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-numeric-selector__textbox--grid .carina-tan-table-textbox__input {
            padding-inline-start: calc(
              50% + var(--carina-tan-table-vertical-border-width)
            )
        }
          }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-picker__container {
      height: 100%;
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-picker-toggle-button--neutral:focus-visible {
      box-shadow: inset var(--carina-ring-black);
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker--grid {
      height: 100%;
      align-content: center;
      container-type: inline-size;
      container-name: carina-tan-table-date-range-picker-responsive;
      min-width: 150px;
    }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker--grid {
        padding-inline-start: calc(
          50% - var(--carina-tan-table-padding-horizontal)
        )
    }
      }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__separator--grid {
      display: none;
    }

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid {
      height: 100%;
    }

@container carina-tan-table-date-range-picker-responsive (max-width: 299.9px) {

.carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid {
        flex-direction: column;
        min-height: calc(2 * var(--carina-tan-table-row-height))
    }

        .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid .carina-tan-table-textbox__container {
          height: 50%;
        }
            .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid .carina-tan-table-textbox__container:first-child::after {
              content: '';
              position: absolute;
              border-bottom-width: var(
                --carina-tan-table-horizontal-border-width
              );
              border-bottom-style: solid;
              border-bottom-color: var(--carina-tan-table-border-color);
              width: calc(
                100% - (2 * var(--carina-tan-table-padding-horizontal))
              );
              bottom: 0;
              margin: var(--carina-spacing-0)
                var(--carina-tan-table-padding-horizontal);
            }
      }

@container carina-tan-table-date-range-picker-responsive (min-width: 300px) {
        .carina-tan-table-cell--editable:has([data-carina-tan-table-editable-input]) .carina-tan-table-date-range-picker__textbox-wrapper--grid .carina-tan-table-textbox__container:first-child::after {
          content: '';
          position: absolute;
          border-left-width: var(--carina-tan-table-vertical-border-width);
          border-left-style: solid;
          border-left-color: var(--carina-tan-table-border-color);
          height: calc(100% - (2 * var(--carina-tan-table-padding-horizontal)));
          right: 0;
          margin: var(--carina-tan-table-padding-horizontal) 0;
        }
      }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-cell {
    display: block;
    border-width: var(--carina-tan-table-horizontal-border-width)
      var(--carina-tan-table-outside-border-width);
    border-style: solid;
    border-color: var(--carina-tan-table-border-color);
    position: relative;
    padding-inline-start: 50%;
    width: 100cqw;
    align-content: center;
    min-height: var(--carina-tan-table-row-height)
}

    .carina-tan-table:not(:has(tfoot)) > tbody > tr:last-child .carina-tan-table-cell:not(:last-child) {
      border-bottom-width: var(--carina-tan-table-horizontal-border-width);
    }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell:before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      inset-inline-start: 0;
      width: 45%;
      white-space: nowrap;
      content: attr(data-label);
      font-weight: var(--carina-font-weight-display);
      background: transparent;
      padding: var(--carina-tan-table-padding-vertical)
        var(--carina-tan-table-padding-horizontal);
      text-align: start;
    }

    .carina-tan-table-cell:has(.carina-tan-table-skeleton) {
      padding-inline-start: var(--carina-tan-table-padding-horizontal);
    }

    .carina-tan-table-cell:has(.carina-tan-table-expandable-container:empty){
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-cell {
      padding-inline-start: calc(
        50% + var(--carina-tan-table-padding-horizontal)
      );
    }

      .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-cell:before {
        padding-inline-start: calc(
          2 * var(--carina-tan-table-padding-horizontal)
        );
      }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-cell {
      padding-inline-start: calc(
        50% + (2 * var(--carina-tan-table-padding-horizontal))
      );
    }

      .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-cell:before {
        padding-inline-start: calc(
          3 * var(--carina-tan-table-padding-horizontal)
        );
      }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-cell {
      padding-inline-start: calc(
        50% + (3 * var(--carina-tan-table-padding-horizontal))
      );
    }

      .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-cell:before {
        padding-inline-start: calc(
          4 * var(--carina-tan-table-padding-horizontal)
        );
      }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-cell {
      padding-inline-start: calc(
        50% + (4 * var(--carina-tan-table-padding-horizontal))
      );
    }

      .carina-tan-table .carina-tan-table-body .carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-cell:before {
        padding-inline-start: calc(
          5 * var(--carina-tan-table-padding-horizontal)
        );
      }

    .carina-tan-table .carina-tan-table-head .carina-tan-table-row .carina-tan-table-cell {
      width: 0;
      padding: var(--carina-spacing-0);
      margin: var(--carina-spacing-0);
      border-width: var(--carina-border-width-0);
    }

    .carina-tan-table-cell:has(> .carina-tan-table-reorder-handle) {
      display: flex;
      justify-content: end;
      align-items: center;
    }
  }

.carina-tan-table-checkbox{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.carina-tan-table-checkbox__box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;
    border-width: var(--carina-border-width-1);
    border-style: solid;
    border-color: var(--carina-border-color-base);
    box-sizing: border-box;
    border-radius: var(--carina-border-radius-sm);
    outline-color: var(--carina-colors-transparent);
    outline-offset: var(--carina-border-width-1);
    outline-style: solid;
    outline-width: var(--carina-border-width-2);

    transition-timing-function: var(
      --carina-transition-timing-function-expressive-ease-in-out
    );
    transition-duration: calc(
      var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
    );
    transition-property: outline-color;
  }

.carina-tan-table--rebrand .carina-tan-table-checkbox__box {
    border-radius: var(--carina-border-radius-xs);
  }

.carina-tan-table-checkbox:hover ~ .carina-tan-table-checkbox__box {
    cursor: pointer;
  }

.carina-tan-table-checkbox:focus ~ .carina-tan-table-checkbox__box {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tan-table-checkbox--checked ~ .carina-tan-table-checkbox__box,
  .carina-tan-table-checkbox--indeterminate ~ .carina-tan-table-checkbox__box {
    background-color: var(--carina-background-color-primary);
    border-color: var(--carina-background-color-primary);
    color: var(--carina-text-color-on-primary);
  }

.carina-tan-table-checkbox--disabled ~ .carina-tan-table-checkbox__box {
    color: var(--carina-text-color-soft);
    border-width: var(--carina-border-width-0);
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-tan-table-checkbox__label-text{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@container carina-table-responsive (max-width: 639.98px) {
    .carina-tan-table-checkbox__box {
      margin-inline-start: auto;
    }
  }

.carina-tan-table-column--actions,
  .carina-tan-table-column--actions-1,
  .carina-tan-table-column--reordering,
  .carina-tan-table-column--expandable,
  .carina-tan-table-column--expandable-1 {
    width: calc(
      36px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--actions:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--actions-1:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--reordering:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--expandable:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--expandable-1:not(.carina-tan-table--no-dividers col) {
      width: calc(
        36px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--actions-2 {
    width: calc(
      72px + (2 * var(--carina-tan-table-padding-horizontal)) +
        (2 * var(--carina-spacing-1)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--actions-2:not(.carina-tan-table--no-dividers col) {
      width: calc(
        72px + (2 * var(--carina-tan-table-padding-horizontal)) +
          (2 * var(--carina-spacing-1)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--actions-3 {
    width: calc(
      108px + (2 * var(--carina-tan-table-padding-horizontal)) +
        (4 * var(--carina-spacing-1)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--actions-3:not(.carina-tan-table--no-dividers col) {
      width: calc(
        108px + (2 * var(--carina-tan-table-padding-horizontal)) +
          (4 * var(--carina-spacing-1)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--actions-4 {
    width: calc(
      144px + (2 * var(--carina-tan-table-padding-horizontal)) +
        (6 * var(--carina-spacing-1)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--actions-4:not(.carina-tan-table--no-dividers col) {
      width: calc(
        144px + (2 * var(--carina-tan-table-padding-horizontal)) +
          (6 * var(--carina-spacing-1)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--actions-5 {
    width: calc(
      180px + (2 * var(--carina-tan-table-padding-horizontal)) +
        (8 * var(--carina-spacing-1)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--actions-5:not(.carina-tan-table--no-dividers col) {
      width: calc(
        180px + (2 * var(--carina-tan-table-padding-horizontal)) +
          (8 * var(--carina-spacing-1)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--checkbox,
  .carina-tan-table-column--radio {
    width: calc(
      16px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--radio:not(.carina-tan-table--no-dividers col) {
      width: calc(
        16px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable.carina-tan-table-column--checkbox,
  .carina-tan-table-column--expandable-1.carina-tan-table-column--checkbox {
    width: calc(
      52px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-spacing-4) + var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col), col:first-child.carina-tan-table-column--expandable-1.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) {
      width: calc(
        52px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-spacing-4) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-2 {
    width: calc(
      72px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-2:not(.carina-tan-table--no-dividers col) {
      width: calc(
        72px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-2.carina-tan-table-column--checkbox {
    width: calc(
      88px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-spacing-4) + var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-2.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) {
      width: calc(
        88px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-spacing-4) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-3 {
    width: calc(
      108px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-3:not(.carina-tan-table--no-dividers col) {
      width: calc(
        108px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-3.carina-tan-table-column--checkbox {
    width: calc(
      124px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-spacing-4) + var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-3.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) {
      width: calc(
        124px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-spacing-4) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-4 {
    width: calc(
      144px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-4:not(.carina-tan-table--no-dividers col) {
      width: calc(
        144px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-4.carina-tan-table-column--checkbox {
    width: calc(
      160px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-spacing-4) + var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-4.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) {
      width: calc(
        160px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-spacing-4) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-5 {
    width: calc(
      180px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-5:not(.carina-tan-table--no-dividers col) {
      width: calc(
        180px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-column--expandable-5.carina-tan-table-column--checkbox {
    width: calc(
      196px + (2 * var(--carina-tan-table-padding-horizontal)) +
        var(--carina-spacing-4) + var(--carina-tan-table-vertical-border-width)
    );
  }

col:first-child.carina-tan-table-column--expandable-5.carina-tan-table-column--checkbox:not(.carina-tan-table--no-dividers col) {
      width: calc(
        196px + (2 * var(--carina-tan-table-padding-horizontal)) +
          var(--carina-spacing-4) +
          var(--carina-tan-table-vertical-border-width) +
          var(--carina-tan-table-outside-border-width)
      );
    }

.carina-tan-table-responsive {
  container-type: inline-size;
  container-name: carina-table-responsive;
}

.carina-tan-table-container {
  overflow: auto;
}

.carina-tan-table-container[tabindex]:focus-visible {
    outline: var(--carina-border-width-2) solid
      var(--carina-border-color-interactive-focus);
  }

.carina-tan-table-container:not(.carina-tan-table-container--horizontal-overflow,.carina-tan-table-container--vertical-overflow):has(
      .carina-tan-table--pinned-top,
      .carina-tan-table--pinned-bottom
    ) {
    overflow: visible;
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-container {
    overflow-x: hidden
}
  }

.carina-tan-table-empty__cell, .carina-tan-table-no-results__cell {
    border-width: var(--carina-tan-table-outside-border-width);
    border-style: solid;
    border-color: var(--carina-tan-table-border-color);
  }

@container carina-table-responsive (max-width: 639.98px) {
      .carina-tan-table-empty .carina-tan-table-empty__cell,
      .carina-tan-table-no-results .carina-tan-table-empty__cell,
      .carina-tan-table-empty .carina-tan-table-no-results__cell,
      .carina-tan-table-no-results .carina-tan-table-no-results__cell {
        width: 100cqw;
        border-top-width: var(--carina-tan-table-horizontal-border-width);
        border-top-style: solid;
        border-top-color: var(--carina-tan-table-border-color);
        padding-inline-start: var(--carina-tan-table-padding-horizontal);
      }
    }

.carina-tan-table-empty__container, .carina-tan-table-no-results__container {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 580px;
    justify-content: center;
  }

.carina-tan-table-empty__illustration, .carina-tan-table-no-results__illustration {
    height: 240px;
    width: 240px;
  }

.carina-tan-table-empty__text, .carina-tan-table-no-results__text {
    font-weight: var(--carina-font-weight-display);
    font-size: var(--carina-font-size-display-xs);
    line-height: var(--carina-line-height-display-xs);
    max-width: 450px;
    text-align: center;
    padding-bottom: var(--carina-spacing-6);
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-empty__text, .carina-tan-table-no-results__text {
      max-width: calc(100cqw - var(--carina-spacing-8))
  }
    }

.carina-tan-table-expandable-container {
  display: flex;
  align-items: center;
  gap: var(--carina-spacing-4);
}

.carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-expandable-container {
    margin-inline-start: 36px;
  }

.carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-expandable-container {
    margin-inline-start: 72px;
  }

.carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-expandable-container {
    margin-inline-start: 108px;
  }

.carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-expandable-container {
    margin-inline-start: 144px;
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-expandable-container {
    justify-content: end
}
  }

.carina-tan-table-head {
  background-color: var(--carina-tan-table-background-color);
}

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-head {
    display: block;
    border-width: var(--carina-border-width-0)
}

    .carina-tan-table-head .carina-tan-table-row{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  }

.carina-tan-table-head > tr:first-child > :is(th, td) {
    border-top-width: var(--carina-tan-table-outside-border-width);
  }

.carina-tan-table-head > tr:last-child > :is(th, td) {
    border-bottom-width: var(--carina-tan-table-separator-border-width);
    border-bottom-style: solid;
    border-bottom-color: var(--carina-tan-table-border-color);
  }

.carina-tan-table-head > tr > :is(th, td):not(:is([rowspan='0'], [rowspan='1'])) {
      border-bottom-width: var(--carina-tan-table-separator-border-width);
      border-bottom-style: solid;
      border-bottom-color: var(--carina-tan-table-border-color);
    }

.carina-tan-table-head:has(> :nth-child(2)) tr:first-child > :is(th, td) {
    background-color: var(--carina-tan-table-background-color-alt);
    font-size: var(--carina-font-size-body-md);
  }

.carina-tan-table-container--horizontal-overflow
    .carina-tan-table-head
    :is(th, td):not(.carina-tan-table--pinned-end):has(+ :is(th, td).carina-tan-table--pinned-end), .carina-tan-table-container--horizontal-overflow
    .carina-tan-table-head:has(:is(th, td).carina-tan-table--pinned-end)
    :is(th, td):is(:is(th, td):last-child:not(.carina-tan-table--pinned-end)) {
    border-inline-end-width: var(--carina-border-width-0);
  }

.carina-tan-table-header {
  box-sizing: content-box;
  padding: var(--carina-tan-table-padding-vertical)
    var(--carina-tan-table-padding-horizontal);
  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-display);
  text-align: start;
  vertical-align: middle;
  border-width: var(--carina-tan-table-horizontal-border-width)
    var(--carina-tan-table-vertical-border-width);
  border-style: solid;
  border-color: var(--carina-tan-table-border-color);
  border-inline-start-width: var(--carina-border-width-0);
  border-bottom-width: var(--carina-border-width-0);
  background-color: var(--carina-tan-table-background-color);
  position: relative;
}

.carina-tan-table-header:last-child {
    border-inline-end-width: var(--carina-tan-table-outside-border-width);
  }

.carina-tan-table-header:not(
      .carina-tan-table-header--hide-shadow,
      :has(.carina-tan-table-checkbox:focus, [data-carina-tan-table-expand-button]:focus)
    ):focus-within {
    box-shadow: inset 0 0 0 3px var(--carina-border-color-primary-focus);
  }

.carina-tan-table-header:focus-within {
    outline: none;
  }

.carina-tan-table-header--sortable {
    padding: var(--carina-spacing-0);
  }

.carina-tan-table-header__button {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal);
    color: var(--carina-text-color-base);
    font-weight: var(--carina-font-weight-display);
    text-align: start;
    vertical-align: middle;
    background-color: var(--carina-colors-transparent);
    cursor: pointer;
  }

.carina-tan-table-header__button:focus {
      outline: none;
    }

.carina-tan-table-header__button-content {
      align-self: center;
      padding: var(--carina-tan-table-padding-vertical) var(--carina-spacing-0);
    }

.carina-tan-table-header__button--reorderable {
      cursor: grab;
    }

.carina-tan-table-header__button--reorderable:active {
        cursor: grabbing;
      }

.carina-tan-table-header__icon {
    align-self: center;
  }

.carina-tan-table-header[data-dragging='true']:not(.carina-tan-table--no-dividers th) {
    border-inline-start-width: var(
      --carina-tan-table-vertical-border-width
    ) !important;
    border-inline-start-style: solid !important;
    border-inline-start-color: var(--carina-tan-table-border-color) !important;
  }

.carina-tan-table-header__subheader {
    font-weight: var(--carina-font-weight-body);
    color: var(--carina-text-color-soft);
  }

.carina-tan-table-header:has(> :is(.carina-tan-table-reorder-handle, .carina-tan-table-row-actions, .carina-tan-table-expandable-container)) {
    padding: var(--carina-spacing-0) var(--carina-tan-table-padding-horizontal);
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-header {
    display: block
}

    .carina-tan-table .carina-tan-table-head .carina-tan-table-row .carina-tan-table-header {
      width: 0;
      padding: var(--carina-spacing-0);
      margin: var(--carina-spacing-0);
      border-width: var(--carina-border-width-0);
    }

    .carina-tan-table .carina-tan-table-body .carina-tan-table-row .carina-tan-table-header {
      border-top-width: var(--carina-tan-table-horizontal-border-width);
      border-top-style: solid;
      border-top-color: var(--carina-tan-table-border-color);

      padding: var(--carina-tan-table-padding-vertical)
        var(--carina-tan-table-padding-horizontal);
    }
  }

.carina-tan-table-pagination {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-height: 72px;
}

.carina-tan-table-pagination__page-container {
    display: flex;
    gap: var(--carina-spacing-4);
    padding-inline-start: var(--carina-spacing-4);
    font-size: var(--carina-font-size-body-sm);
    line-height: var(--carina-line-height-body-sm);
    font-weight: var(--carina-font-weight-body);
    color: var(--carina-text-color-base);
  }

@media (max-width: 1023.98px) {

.carina-tan-table-pagination__page-container {
      padding-inline-start: var(--carina-spacing-0)
  }
    }

@media (max-width: 767.98px) {

.carina-tan-table-pagination__page-container {
      flex-direction: column;
      justify-content: center;
      align-items: center
  }
    }

.carina-tan-table-pagination__page {
    padding: var(--carina-spacing-0);
    margin: var(--carina-spacing-0);
    min-width: 36px;
    position: relative;
  }

.carina-tan-table-pagination__page-size-dropdown {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 96px;
  }

.carina-tan-table-pagination__page-count {
    display: flex;
    gap: var(--carina-spacing-2);
    align-items: center;
    color: var(--carina-text-color-soft);
  }

.carina-tan-table-pagination__page-size {
    display: flex;
    gap: var(--carina-spacing-2);
    align-items: center;
  }

.carina-tan-table-pagination__navigation {
    align-self: center;
    display: flex;
    justify-content: center;
  }

.carina-tan-table-pagination__list {
    list-style: none;
    display: flex;
    padding: var(--carina-spacing-0);
    margin: var(--carina-spacing-0);
  }

.carina-tan-table-pagination__item {
    padding: var(--carina-spacing-0);
    margin: var(--carina-spacing-0);
    position: relative;
  }

.carina-tan-table-pagination__item .carina-tan-table-pagination__button {
      color: var(--carina-text-color-soft);
    }

.carina-tan-table-pagination__item .carina-tan-table-pagination__button[aria-current='true'] {
        color: var(--carina-text-color-base);
        opacity: 1;
      }

.carina-tan-table-pagination__item:has(> [aria-current='true'])::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: var(--carina-border-width-4);
      width: 30px;
      margin: auto;
      border-radius: var(--carina-border-radius-full);
      background-color: var(--carina-border-color-secondary-focus);
      content: '';
    }

.carina-tan-table-pagination__item--rebrand:has(> [aria-current='true'])::after {
      background-color: var(--carina-border-color-primary-focus);
    }

@media (max-width: 767.98px) {

.carina-tan-table-pagination {
    flex-direction: column;
    align-items: center;
    padding-top: var(--carina-spacing-4);
    gap: var(--carina-spacing-2)
}
  }

@media (max-width: 1023.98px) {

.carina-tan-table-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
  }

.carina-tan-table-radio-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: var(--carina-border-radius-full);
  width: 16px;
  height: 16px;
  border-width: var(--carina-border-width-1);
  border-style: solid;
  border-color: var(--carina-border-color-base);
  display: block;
  outline-color: var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;
}

.carina-tan-table-radio-button:checked {
    background-color: var(--carina-text-color-primary);
    border-color: var(--carina-text-color-primary);
  }

.carina-tan-table-radio-button:checked::after {
      position: relative;
      top: 4px;
      margin: auto;
      display: block;
      width: 6px;
      height: 6px;
      border-radius: var(--carina-tan-table-border-radius);
      background: var(--carina-text-color-on-primary);
      content: '';
    }

.carina-tan-table-radio-button:hover {
    cursor: pointer;
  }

.carina-tan-table-radio-button:focus {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tan-table-radio-button:disabled {
    border-width: var(--carina-border-width-0);
    background-color: var(--carina-background-color-neutral-inactive);
  }

.carina-tan-table-radio-button__label{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-radio-button {
    margin-inline-start: auto
}
  }

.carina-tan-table-row {
  width: 100%;
  height: var(--carina-tan-table-row-height);
}

.carina-tan-table-row > th:first-child,
  .carina-tan-table-row > td:first-child {
    border-inline-start-width: var(--carina-tan-table-outside-border-width);
    border-inline-start-style: solid;
    border-inline-start-color: var(--carina-tan-table-border-color);
  }

.carina-tan-table-container--horizontal-overflow
    .carina-tan-table-row
    .carina-tan-table-cell:not(.carina-tan-table--pinned):has(+ .carina-tan-table-cell.carina-tan-table--pinned) {
    border-inline-end-width: var(--carina-border-width-0);
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-container--horizontal-overflow
    .carina-tan-table-row
    .carina-tan-table-cell:not(.carina-tan-table--pinned):has(+ .carina-tan-table-cell.carina-tan-table--pinned) {
      border-inline-end-width: var(--carina-tan-table-vertical-border-width);
      border-inline-end-style: solid;
      border-inline-end-color: var(--carina-tan-table-border-color)
  }
    }

.carina-tan-table-row[data-carina-tan-table-row-depth='1'] .carina-tan-table-expandable-container {
    margin-inline-start: 36px;
  }

.carina-tan-table-row[data-carina-tan-table-row-depth='2'] .carina-tan-table-expandable-container {
    margin-inline-start: 72px;
  }

.carina-tan-table-row[data-carina-tan-table-row-depth='3'] .carina-tan-table-expandable-container {
    margin-inline-start: 108px;
  }

.carina-tan-table-row[data-carina-tan-table-row-depth='4'] .carina-tan-table-expandable-container {
    margin-inline-start: 144px;
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-row {
    height: unset;
    border-width: var(--carina-border-width-0)
}
  }

.carina-tan-table-skeleton {
  height: var(--carina-tan-table-line-height);
}

.carina-tan-table-skeleton__container {
    height: var(--carina-tan-table-line-height);
  }

.carina-tan-table-reorder-handle {
  cursor: grab;
}

.carina-tan-table-reorder-handle:active {
    cursor: grabbing;
  }

.carina-tan-table-resize-handle {
  position: absolute;
  top: 0;
  height: 100%;
  inset-inline-end: 0;
  width: var(--carina-border-width-4);
  background: var(--carina-border-color-base);
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
  opacity: var(--carina-opacity-0);
}

.carina-tan-table-resize-handle:hover {
    opacity: var(--carina-opacity-100);
  }

.carina-tan-table-resize-handle:active {
    background: var(--carina-border-color-primary-focus);
    opacity: var(--carina-opacity-100);
    z-index: calc(var(--carina-z-index-current) + 5);
  }

.carina-tan-table-row-actions {
  display: flex;
  gap: var(--carina-spacing-1);
}

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-row-actions {
    justify-content: end
}
  }

.carina-tan-table-footer {
  font-weight: var(--carina-font-weight-display);
}

.carina-tan-table-footer > tr > th,
  .carina-tan-table-footer > tr > td {
    border-top-width: var(--carina-border-width-0);
  }

.carina-tan-table-footer > tr:last-child > :is(th, td) {
    border-bottom-width: var(--carina-tan-table-outside-border-width);
  }

.carina-tan-table-footer > tr:first-child > :is(th, td) {
    border-top-width: var(--carina-tan-table-separator-border-width);
    border-top-style: solid;
    border-top-color: var(--carina-tan-table-border-color);
  }

.carina-tan-table-container--horizontal-overflow
    .carina-tan-table-footer
    :not(.carina-tan-table--pinned-end):has(+ .carina-tan-table--pinned-end),
  .carina-tan-table-container--horizontal-overflow
    .carina-tan-table-footer
    :not(.carina-tan-table--pinned-end):has(+ .carina-tan-table--pinned-end) {
    border-inline-end-width: var(--carina-border-width-0);
  }

.carina-tan-table-footer:has(> :nth-child(2)) tr:first-child > :is(th, td) {
    background-color: var(--carina-tan-table-background-color-alt);
    font-size: var(--carina-font-size-body-md);
  }

@container carina-table-responsive (max-width: 639.98px) {

.carina-tan-table-footer {
    display: block;
    border-width: var(--carina-border-width-0)
}

    .carina-tan-table-footer .carina-tan-table-row{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
  }

.carina-tan-table--pinned {
  position: sticky;
}

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start {
    inset-inline-start: 0px;
    border-inline-end-width: var(--carina-tan-table-separator-border-width);
    border-inline-end-style: solid;
    border-inline-end-color: var(--carina-tan-table-border-color);
    box-shadow: 10px 0 15px -3px rgb(0 0 0 / 0.1),
  4px 0 6px -4px rgb(0 0 0 / 0.1);
    z-index: calc(var(--carina-z-index-current) + 20);
  }

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start::before {
      content: '';
      clip-path: inset(0px -15px 0px 0px);
    }

[dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start {
      box-shadow: -10px 0 15px -3px rgb(0 0 0 / 0.1),
  -4px 0 6px -4px rgb(0 0 0 / 0.1);
    }

[dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start::before {
        clip-path: inset(0px 0px 0px -15px);
      }

@container carina-table-responsive (max-width: 639.98px) {

[dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start {
        box-shadow: none
    }

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start {
      box-shadow: none
  }
      }

@container carina-table-responsive (min-width: 640px) {

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start {
      inset-inline-start: var(--carina-tan-table-pinned-start-offset, 0px)
  }
    }

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end {
    inset-inline-end: 0px;
    border-inline-start-width: var(--carina-tan-table-separator-border-width);
    border-inline-start-style: solid;
    border-inline-start-color: var(--carina-tan-table-border-color);
    box-shadow: -10px 0 15px -3px rgb(0 0 0 / 0.1),
  -4px 0 6px -4px rgb(0 0 0 / 0.1);
    z-index: calc(var(--carina-z-index-current) + 20);
  }

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end::before {
      content: '';
      clip-path: inset(0px 0px 0px -15px);
    }

[dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end {
      box-shadow: 10px 0 15px -3px rgb(0 0 0 / 0.1),
  4px 0 6px -4px rgb(0 0 0 / 0.1);
    }

[dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end::before {
        clip-path: inset(0px -15px 0px 0px);
      }

@container carina-table-responsive (max-width: 639.98px) {

[dir='rtl'] .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end {
        box-shadow: none
    }

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end {
      box-shadow: none
  }
      }

@container carina-table-responsive (min-width: 640px) {

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end {
      inset-inline-end: var(--carina-tan-table-pinned-end-offset, 0px)
  }
    }

.carina-tan-table--pinned-top {
    top: 0;
    z-index: calc(var(--carina-z-index-current) + 30);
  }

.carina-tan-table--pinned-bottom {
    bottom: 0;
    z-index: calc(var(--carina-z-index-current) + 30);
  }

.carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start.carina-tan-table--pinned-top,
  .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end.carina-tan-table--pinned-top,
  .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-start.carina-tan-table--pinned-bottom,
  .carina-tan-table-container--horizontal-overflow .carina-tan-table--pinned-end.carina-tan-table--pinned-bottom {
    z-index: calc(var(--carina-z-index-current) + 40);
  }

.carina-tan-table-container--rebrand .carina-tan-table-header,
.carina-tan-table-container--rebrand .carina-tan-table-header__button {
  font-family: var(--carina-font-family-mono);
  text-transform: uppercase;
}

@container carina-table-responsive (max-width: 639.98px) {
  .carina-tan-table-container--rebrand .carina-tan-table-body .carina-tan-table-row .carina-tan-table-cell:before {
    font-family: var(--carina-font-family-mono);
    text-transform: uppercase;
  }
}

.carina-table-basic-cell-renderer--default {
  max-width: 100%;
  overflow: visible;

  overflow-wrap: anywhere;
}

.carina-table-basic-cell-renderer--sticky {
  overflow: hidden;
}

.carina-table-basic-collapsed-cell-renderer {
  width: 100%;
  overflow: hidden;

  overflow-wrap: anywhere;
}

.carina-table-basic-heading-renderer {
  position: relative;

  display: flex;
  align-items: center;
  padding: 0;
  border: 0;

  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);

  background-color: transparent;
  outline: none;
  box-shadow: none;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

.carina-table-basic-heading-renderer:focus > .carina-table-basic-heading-renderer__heading::after {
      position: absolute;
      top: calc(100% + 1px);
      bottom: -2px;

      background-color: var(--carina-background-color-surface);

      content: '';
      pointer-events: none;
      inset-inline-start: 0;
      inset-inline-end: 0;
    }

.carina-table-basic-heading-renderer--sortable {
  width: 100%;
  height: 100%;
  margin: calc(-1 * var(--carina-spacing-3)) calc(-1 * var(--carina-spacing-2));
  padding: var(--carina-spacing-3) var(--carina-spacing-2);

  cursor: pointer;
}

.carina-table-basic-heading-renderer--sortable:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--carina-border-width-2)
      var(--carina-border-color-primary-focus);
  }

.carina-table-basic-heading-renderer__heading {
  position: relative;

  overflow: hidden;

  font-weight: var(--carina-font-weight-body);
  font-family: var(--carina-font-family-display);
}

.carina-table-basic-heading-renderer__heading--sorted {
  font-weight: var(--carina-font-weight-display);
}

.carina-table-basic-heading-renderer__heading--sticky {
  overflow: visible;
}

.carina-table-checkbox-heading-renderer {
  position: absolute;
  top: 50%;

  padding: 0;
  border: 0;

  background-color: transparent;
  outline: none;
  box-shadow: none;
  transform: translate(-50%, -50%);

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
  inset-inline-start: 50%;
}

.carina-table-checkbox-heading-renderer:focus-visible {
    outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
    box-shadow: var(--carina-ring-black);
  }

.carina-table-basic-collapsed-cell-renderer--default {
  max-width: 100%;
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.carina-table-start-column-renderer--drag {
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: grab;
}

.carina-table-start-column-renderer--multiselect {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carina-column-heading {
  position: relative;

  flex-grow: 1;
  flex-shrink: 1;

  box-sizing: border-box;
  width: 100%;
  padding-right: var(--carina-spacing-2);
  padding-left: var(--carina-spacing-2);

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);

  align-content: center;
  display: flex;
}

.carina-column-heading--edge {
  flex-grow: 0;
  flex-shrink: 0;
  word-wrap: break-word;
}

.carina-column-heading--sticky {
  position: sticky;
  z-index: calc(var(--carina-z-index-current) + 10);
  inset-inline-start: 0;
}

.carina-column-heading--rebrand {
  font-family: var(--carina-font-family-mono);
  text-transform: uppercase;
}

.carina-empty-state-container {
  box-sizing: border-box;
  width: 100%;
  border-color: var(--carina-border-color-soft);

  border-style: solid;
  border-width: var(--carina-border-width-1);
}

.carina-empty-state-container--top-borders {
  border-width: var(--carina-border-width-1) var(--carina-border-width-0);
}

.carina-table-page-controls {
  display: flex;
  gap: var(--carina-spacing-4);
  align-items: center;
  padding-top: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);
}

.carina-table-page-controls__message {
  margin-inline-end: var(--carina-spacing-2);
}

.carina-table-page-controls__nav {
  display: flex;
  gap: var(--carina-spacing-4);
}

.carina-selected-indicator {
  flex-grow: 0;
  flex-shrink: 0;

  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border-color: var(--carina-border-color-base);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-sm);
}

.carina-selected-indicator--rebrand {
  border-radius: var(--carina-border-radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carina-selected-indicator--disabled {
  border-width: var(--carina-border-width-0);

  color: var(--carina-text-color-disabled);

  background-color: var(--carina-background-color-neutral-inactive);

  pointer-events: none;
}

.carina-selected-indicator--focused {
  outline-width: var(--carina-border-width-2);
  outline-style: solid;
  outline-color: var(--carina-border-color-primary-focus);
  outline-offset: var(--carina-border-width-1);
}

.carina-selected-indicator--selected,
.carina-selected-indicator--indeterminate {
  border-color: transparent;

  background-color: var(--carina-background-color-primary);
}

.carina-selected-indicator--selected.carina-selected-indicator--disabled {
  border-width: var(--carina-border-width-0);

  color: var(--carina-text-color-disabled);

  background-color: var(--carina-background-color-neutral-inactive);

  pointer-events: none;
}

.carina-selected-indicator__check {
  fill: var(--carina-text-color-on-primary);
  vertical-align: middle;
  display: block;
}

.carina-selected-indicator__check--disabled {
  fill: var(--carina-text-color-soft);
}

.carina-table-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
}

.carina-table-cell {
  flex-grow: 1;
  flex-shrink: 1;
  align-self: center;

  box-sizing: border-box;
  width: 100%;
  padding-right: var(--carina-spacing-2);
  padding-left: var(--carina-spacing-2);

  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-sm);
  font-family: var(--carina-font-family-primary);
}

/* Set default cursor for non-draggable cells */

.carina-table-cell:not(:has(.carina-table-start-column-renderer--drag)) {
    cursor: default;
  }

.carina-table-cell--collapsed {
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-sm);
}

.carina-table-cell--disabled {
  color: var(--carina-text-color-disabled);
}

.carina-table-cell--edge {
  flex-grow: 0;
  flex-shrink: 0;
}

.carina-table-cell--sticky {
  position: sticky;
  inset-inline-start: 0;
}

.carina-table-cell__collapsed {
  width: 100%;
  overflow: hidden;

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-body-xs);
}

.carina-table-element {
  position: relative;

  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  padding: var(--carina-spacing-px);
}

.carina-table-element--scrollable {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100%;
}

.carina-table-header {
  box-sizing: border-box;
  width: 100%;
}

.carina-table-header__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: var(--carina-spacing-3) var(--carina-spacing-2);
  overflow: hidden;

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);

  outline-width: var(--carina-border-width-1);
  outline-style: solid;
  outline-color: var(--carina-border-color-soft);
  outline-offset: calc(-1 * var(--carina-spacing-px));
}

.carina-table-header__group--sticky {
  overflow: visible;
  display: flex;
  align-items: stretch;
}

.carina-table-row {
  position: relative;

  display: flex;
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-base);
}

.carina-table-row::before {
    position: absolute;
    z-index: calc(var(--carina-z-index-current) + 30);

    content: '';
    pointer-events: none;
    inset: 0;
  }

.carina-table-row .carina-table-row__actions-end-container:not(
      .carina-table-row__actions-end-container--always-visible
    ):focus-within
    .carina-action-button
    svg {
    color: var(--carina-text-color-base-inverse);
  }

.carina-table-row .carina-table-row__actions-end-container:not(
      .carina-table-row__actions-end-container--always-visible
    ):hover
    .carina-action-button
    svg {
    color: var(--carina-text-color-base-inverse);
  }

.carina-table-row:hover
    .carina-table-row__actions-start-container
    .carina-action-button:not(.carina-action-button--static-select-indicator)
    .carina-selected-indicator,
  .carina-table-row .carina-table-row__actions-start-container
    .carina-action-button:not(
      .carina-action-button--static-select-indicator
    ):focus-visible
    .carina-selected-indicator {
    border-color: var(--carina-text-color-base-inverse);

    background-color: transparent;
  }

.carina-table-row .carina-table-row__actions-start-container:not(:hover)
    .carina-action-button:not(.carina-action-button--static-select-indicator)
    .carina-selected-indicator--selected {
    background-color: transparent;
  }

.carina-table-row:hover
    .carina-table-row__actions-start-container:not(:hover)
    .carina-action-button:not(.carina-action-button--static-select-indicator)
    .carina-selected-indicator--selected {
    z-index: calc(var(--carina-z-index-current) + 20);

    border-color: var(--carina-text-color-disabled);

    background-color: var(--carina-text-color-disabled);
  }

.carina-table-row:hover
    .carina-table-row__actions-start-container:not(:hover)
    .carina-action-button:not(.carina-action-button--static-select-indicator)
    .carina-selected-indicator {
    z-index: calc(var(--carina-z-index-current) + 20);

    border-color: var(--carina-text-color-disabled);
  }

.carina-table-row--sticky {
  overflow-x: visible;
}

.carina-table-row--sticky div[role='cell']:first-of-type:first-of-type {
      background-color: inherit;
    }

.carina-table-row--side-borders {
  border-right: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);
  border-left: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);
}

.carina-table-row--striped:nth-of-type(odd) > div {
    background-color: var(--carina-background-color-surface-alt);
  }

@media (hover: hover) and (pointer: fine) {
      .carina-table-row--striped:nth-of-type(odd) > div:hover {
        /* background-color: var(--carina-colors-primary-pale); */
        background-color: var(--carina-background-color-surface-hover);
      }
    }

.carina-table-row--focus-within::after {
    position: absolute;
    z-index: calc(var(--carina-z-index-current) + 30);

    outline: var(--carina-border-width-2) solid
      var(--carina-border-color-primary-focus);

    content: '';
    inset: var(--carina-spacing-0-5);

    pointer-events: none;
  }

.carina-table-row__actions-start-container--x-ray {
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
}

@media (hover: hover) and (pointer: fine) {

.carina-table-row__actions-start-container--x-ray,
.carina-table-row__actions-end-container--x-ray {
    opacity: var(--carina-opacity-100)
}
  }

.carina-table-row__sliding {
  position: relative;
  z-index: calc(var(--carina-z-index-current) + 10);

  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;

  min-height: 56px;
  padding: var(--carina-spacing-2) var(--carina-spacing-2);

  background-color: var(--carina-background-color-surface);
}

.carina-table-row__sliding::after {
    position: absolute;

    content: '';
    inset: 0 var(--carina-spacing-px) var(--carina-spacing-px);

    pointer-events: none;
  }

.carina-table-row__sliding:focus {
    outline: none;
  }

@media (hover: hover) and (pointer: fine) {
    .carina-table-row__sliding:hover {
      background-color: var(--carina-background-color-surface-hover);
    }
  }

.carina-table-row__sliding--basic-outline {
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  outline: var(--carina-border-width-1) solid var(--carina-border-color-soft);
}

.carina-table-row--sticky .carina-table-row__sliding--basic-outline {
  outline: none;
}

.carina-table-row__sliding--top-outline {
  border-top: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);
}

.carina-table-row__sliding--dragging {
  outline: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  outline-offset: calc(-1 * var(--carina-spacing-px));
}

/* Remove side borders from parent when dragging to avoid double borders */

.carina-table-row:has(.carina-table-row__sliding--dragging) {
  border-left: none;
  border-right: none;
}

/* Reset margin-top for draggable rows to avoid border overlap issues */

.carina-table-row:has(.carina-table-row__sliding) {
  margin-top: 0;
}

.carina-table-row:has(.carina-table-row__sliding):not(:first-child) {
    margin-top: calc(-1 * var(--carina-border-width-1));
  }

.carina-table-row__sliding--condensed {
  min-height: 52px;
  padding-top: var(--carina-spacing-2);
  padding-bottom: var(--carina-spacing-2);
}

.carina-table-row__sliding--roomy {
  min-height: 68px;
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-4);
}

@media (hover: hover) and (pointer: fine) {
    .carina-table-row__sliding--disabled:hover {
      background-color: var(--carina-background-color-surface);
    }
  }

.carina-table-row__actions-end-container {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;

  display: flex;
  align-items: center;

  min-width: 60px;

  background-color: var(--carina-background-color-neutral);
  padding-inline-start: var(--carina-spacing-2);
  padding-inline-end: var(--carina-spacing-2);
}

.carina-table-row__actions-start-container {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;

  display: flex;
  align-items: center;

  min-width: 60px;
  padding-inline-start: var(--carina-spacing-2);
  padding-inline-end: var(--carina-spacing-2);

  background-color: var(--carina-background-color-neutral);
}

.carina-table-row__actions-start-container--reveal,
.carina-table-row__actions-end-container--reveal {
  opacity: var(--carina-opacity-100);
}

.carina-table-row__actions-start-container--reveal:hover .carina-action-button__x-ray, .carina-table-row__actions-end-container--reveal:hover .carina-action-button__x-ray {
    opacity: var(--carina-opacity-0);
  }

.carina-table-row__actions-start-container--hide,
.carina-table-row__actions-end-container--hide {
  opacity: var(--carina-opacity-0);
}

.carina-table-row__actions-start-container.carina-table-row__actions-start-container--always-visible {
  z-index: calc(var(--carina-z-index-current) + 20);
  opacity: var(--carina-opacity-100);

  min-width: 0;

  background-color: unset;
}

.carina-table-row__actions-end-container.carina-table-row__actions-end-container--always-visible {
  z-index: calc(var(--carina-z-index-current) + 20);
  opacity: var(--carina-opacity-100);

  min-width: 0;

  background-color: unset;
}

.carina-table-row__actions-start-trigger {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;

  width: 54px;
}

.carina-table-row__actions-start-trigger--hidden {
  display: none;
}

.carina-table-row__actions-end-trigger {
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;

  width: 54px;
}

.carina-table-row__actions-end-trigger--hidden {
  display: none;
}

.carina-table-row__contents {
  display: flex;
  width: 100%;
}

.carina-action-button {
  --carina-table-action-button-size: 38px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--carina-table-action-button-size);
  height: var(--carina-table-action-button-size);
  margin-right: var(--carina-spacing-2);
  margin-left: var(--carina-spacing-2);
  border: 0;
  border-radius: calc(var(--carina-table-action-button-size) / 2);

  background-color: transparent;
  outline: none;
  box-shadow: none;
  cursor: pointer;

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;
}

[dir='rtl'] .carina-action-button {
    transform: scaleX(-1);
  }

.carina-action-button:active:not(.carina-action-button--disabled) {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-action-button:focus {
    border: var(--carina-border-width-1) solid
      var(--carina-border-color-inverse);
  }

@media (hover: hover) and (pointer: fine) {

.carina-action-button:hover {
      background-color: var(--carina-text-color-base)
  }
    }

.carina-action-button--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-action-button--disabled {
  opacity: var(--carina-opacity-40);
  cursor: default;
}

.carina-action-button--disabled:hover,
  .carina-action-button--disabled:active {
    opacity: var(--carina-opacity-40);
    cursor: default;
  }

@media (hover: hover) and (pointer: fine) {

.carina-action-button--disabled:hover {
      background-color: transparent
  }

.carina-action-button--static-select-indicator:not(.carina-action-button--disabled):hover {
      background-color: var(--carina-background-color-surface-hover)
  }
    }

.carina-action-button--static-select-indicator:not(.carina-action-button--disabled):focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    outline-offset: var(--carina-border-width-0);
    outline-style: solid;
    outline-width: var(--carina-border-width-2);
  }

.carina-action-button--static-actions-menu:not(.carina-action-button--disabled):active {
    background-color: var(--carina-background-color-surface-active);
  }

@media (hover: hover) and (pointer: fine) {

.carina-action-button--static-actions-menu:not(.carina-action-button--disabled):hover {
      background-color: var(--carina-background-color-surface-hover)
  }
    }

.carina-action-button--static-actions-menu:not(.carina-action-button--disabled):focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    outline-offset: var(--carina-border-width-0);
    outline-style: solid;
    outline-width: var(--carina-border-width-2);
  }

.carina-action-button__x-ray {
  position: absolute;
  z-index: calc(var(--carina-z-index-current) + 50);

  opacity: var(--carina-opacity-0);

  transition: opacity var(--carina-transition-duration-200);

  pointer-events: none;
}

.carina-item-label {
  display: flex;
  align-items: center;
}

.carina-item-label__spacer {
  height: var(--carina-spacing-4);
  width: var(--carina-spacing-4);
}

.carina-item-label__text {
  padding-left: calc(2 * var(--carina-spacing-px));
}

.carina-tabs__wrapper {
  position: relative;

  display: inline-flex;
  flex: 1 0 0%;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: flex-start;
  box-sizing: border-box;
  min-width: 100%;
  max-width: 100%;
  overflow: auto;

  white-space: nowrap;
  vertical-align: middle;

  table-layout: fixed;
  background-color: transparent;

  scrollbar-width: none;
}

.carina-tabs__wrapper::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;

    background: transparent;
  }

.carina-tabs {
  position: relative;

  display: table;
  flex: 1 1 0%;

  align-content: start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  border-bottom: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);
  overflow: hidden;

  white-space: nowrap;
  vertical-align: top;

  table-layout: fixed;
}

.carina-tabs__arrow-right,
.carina-tabs__arrow-left {
  position: absolute;

  min-width: 40px;
  max-width: 100%;
  max-height: 72px;

  font-size: var(--carina-font-size-body-md);

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-soft);

  min-height: 48px;
  border-bottom-style: solid;
  border-bottom-width: var(--carina-border-width-1);
  border-color: var(--carina-border-color-soft);

  cursor: pointer;
}

.carina-tabs__arrow-right:focus, .carina-tabs__arrow-left:focus {
    outline: none;
  }

.carina-tabs__arrow-right:hover, .carina-tabs__arrow-left:hover {
    background-color: var(--carina-background-color-surface-hover);
    color: var(--carina-text-color-base);
  }

.carina-tabs__arrow-right:active, .carina-tabs__arrow-left:active {
    background-color: var(--carina-background-color-surface-selected);
  }

.carina-tabs__arrow-right svg, .carina-tabs__arrow-left svg {
    display: unset;
  }

.carina-tabs__arrow-right {
  right: 0;

  border-inline-end: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  min-height: 48px;
  border-bottom-style: solid;
  border-bottom-width: var(--carina-border-width-1);
  border-color: var(--carina-border-color-soft);
}

.carina-tabs__arrow-left {
  left: 0;

  margin-inline-start: 0;
  border-inline-start: var(--carina-border-width-1) solid
    var(--carina-border-color-soft);

  min-height: 48px;
  border-bottom-style: solid;
  border-bottom-width: var(--carina-border-width-1);
  border-color: var(--carina-border-color-soft);
}

[data-scroll-position='0'] .carina-tabs__arrow-left {
    display: none;
    visibility: hidden;
  }

[data-scroll-position='0'] .carina-tabs__arrow-right {
    display: none;
    visibility: hidden;
  }

[data-scroll-position='1'] .carina-tabs__arrow-left {
    display: none;
    visibility: hidden;
  }

[data-scroll-position='1'] .carina-tabs__arrow-right {
    display: unset;
    visibility: unset;
  }

[data-scroll-position='2'] .carina-tabs__arrow-left {
    display: unset;
    visibility: unset;
  }

[data-scroll-position='2'] .carina-tabs__arrow-right {
    display: none;
    visibility: hidden;
  }

[data-scroll-position='3'] .carina-tabs__arrow-left {
    display: unset;
    visibility: unset;
  }

[data-scroll-position='3'] .carina-tabs__arrow-right {
    display: unset;
    visibility: unset;
  }

[dir='rtl'] [data-scroll-position='2'] .carina-tabs__arrow-left {
      display: none;
      visibility: hidden;
    }

[dir='rtl'] [data-scroll-position='2'] .carina-tabs__arrow-right {
      display: unset;
      visibility: unset;
    }

[dir='rtl'] [data-scroll-position='1'] .carina-tabs__arrow-left {
      display: unset;
      visibility: unset;
    }

[dir='rtl'] [data-scroll-position='1'] .carina-tabs__arrow-right {
      display: none;
      visibility: hidden;
    }

.carina-tabs.carina-tabs--bottomless,
.carina-tabs.carina-tabs--secondary {
  border-bottom-width: 0;
}

.carina-tabs__list {
  display: flex;
  gap: var(--carina-spacing-0-5);
  padding: var(--carina-spacing-0) var(--carina-spacing-0-5);
}

.carina-tabs__tab {
  position: relative;

  display: flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  min-width: 5rem;
  min-height: 47px;
  margin: 0 auto;
  padding-top: 1px;
  padding-right: var(--carina-spacing-4);
  padding-left: var(--carina-spacing-4);
  border: 0;
  border-radius: var(--carina-border-radius-md);

  background: transparent;

  color: var(--carina-text-color-soft);
  font-family: inherit;
  line-height: inherit;
  font-size: var(--carina-font-size-body-md);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;

  outline-color: var(--carina-colors-transparent);
  outline-offset: calc(var(--carina-border-width-2) * -1);
  outline-style: solid;
  outline-width: var(--carina-border-width-2);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color;

  cursor: pointer;
}

.carina-tabs__tab::after {
    content: '';
  }

.carina-tabs__tab .carina-tabs__tab::-moz-focus-inner {
    padding: 0;
    border: 0;

    outline: none;
  }

.carina-tabs__tab:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tabs__tab:hover {
    color: var(--carina-text-color-base);
    vertical-align: middle;
  }

.carina-tabs__tab:hover::after {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;

      height: var(--carina-border-width-4);
      border-top-left-radius: var(--carina-border-radius-md);
      border-top-right-radius: var(--carina-border-radius-md);

      background-color: var(--carina-border-color-soft);
    }

.carina-tabs__tab--rebrand {
    border-radius: var(--carina-border-radius-sm);
  }

.carina-tabs__tab--rebrand:hover::after {
      border-top-left-radius: var(--carina-border-radius-sm);
      border-top-right-radius: var(--carina-border-radius-sm);
    }

.carina-tabs__tab--selected {
  color: var(--carina-text-color-base);

  cursor: auto;
}

.carina-tabs__tab--selected:focus-visible {
    border-radius: var(--carina-border-radius-md) var(--carina-border-radius-md)
      var(--carina-border-radius-none) var(--carina-border-radius-none);
  }

.carina-tabs__tab--rebrand .carina-tabs__tab--selected:focus-visible {
      border-radius: var(--carina-border-radius-sm)
        var(--carina-border-radius-sm) var(--carina-border-radius-none)
        var(--carina-border-radius-none);
    }

.carina-tabs__tab--selected::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  height: var(--carina-border-width-4);
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;

  content: '';
}

.carina-tabs__tab--pri.carina-tabs__tab--selected::after {
    background-color: var(--carina-border-color-primary-focus);
  }

.carina-tabs__tab--sec.carina-tabs__tab--selected::after {
    background-color: var(--carina-border-color-secondary-focus);
  }

.carina-tabs__tab--ter.carina-tabs__tab--selected::after {
    background-color: var(--carina-border-color-tertiary-focus);
  }

.carina-tabs__tab--rebrand .carina-tabs__tab--selected::after {
    border-top-left-radius: var(--carina-border-radius-sm);
    border-top-right-radius: var(--carina-border-radius-sm);
  }

.carina-tabs__tab--secondary {
  border: var(--carina-border-width-1) solid var(--carina-colors-transparent);
}

.carina-tabs__tab--secondary::after {
    content: none;
  }

.carina-tabs__tab--secondary:hover {
    background-color: var(--carina-background-color-surface-hover);
  }

.carina-tabs__tab--secondary.carina-tabs__tab--selected,
.carina-tabs__tab--secondary:active {
  border-width: var(--carina-border-width-1);
  border-style: solid;
  border-color: var(--carina-border-color-primary-focus);
}

.carina-tabs__tab--pri.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--pri.carina-tabs__tab--secondary:active {
    color: var(--carina-text-color-on-primary);
    background-color: var(--carina-background-color-primary);
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-tabs__tab--sec.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--sec.carina-tabs__tab--secondary:active {
    color: var(--carina-text-color-on-secondary);
    background-color: var(--carina-background-color-secondary);
    border-color: var(--carina-border-color-secondary-focus);
  }

.carina-tabs__tab--ter.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--ter.carina-tabs__tab--secondary:active {
    color: var(--carina-text-color-on-tertiary);
    background-color: var(--carina-background-color-tertiary);
    border-color: var(--carina-border-color-tertiary-focus);
  }

.carina-tabs__tab--rebrand.carina-tabs__tab--pri.carina-tabs__tab--secondary.carina-tabs__tab--selected, .carina-tabs__tab--rebrand.carina-tabs__tab--pri.carina-tabs__tab--secondary:active {
    color: var(--carina-text-color-base);
    background-color: var(--carina-background-color-surface-active);
  }

.carina-tag-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: var(--carina-spacing-0);

  line-height: var(--carina-line-height-normal);

  list-style: none;
  padding-inline-start: 0;
}

.carina-tag-group > li {
    margin-bottom: var(--carina-spacing-2);
    margin-inline-end: var(--carina-spacing-2);
  }

.carina-templates-body {
  display: flex;
  flex-shrink: 1;
  height: 100%;
  overflow-y: auto;
}

.carina-templates-default-actions {
  flex-shrink: 0;
}

.carina-templates-content-area {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-body, var(--carina-text-color-base));
}

.carina-templates-content-container {
  box-sizing: border-box;
  max-width: 1920px;
  margin: var(--carina-spacing-4);
  padding: var(--carina-spacing-6);
  border: var(--carina-border-width-1) solid var(--carina-border-color-soft);
  border-radius: var(--carina-border-radius-sm);
  overflow: auto;

  font-weight: var(--carina-font-weight-body);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-normal);

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-body, var(--carina-text-color-base));
}

.carina-templates-content-container--rebrand {
  border-radius: var(--carina-border-radius-xs);
}

.carina-templates-dock {
  flex-shrink: 0;
}

.carina-template-header {
  flex-shrink: 1;
  width: 100%;
}

.carina-template-hero-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: var(--carina-spacing-6) var(--carina-spacing-6)
    var(--carina-spacing-0);

  border-bottom: var(--carina-spacing-px) solid var(--carina-border-color-soft);

  font-weight: var(--carina-font-weight-body);
  font-family: var(--carina-font-family-primary);

  background-color: var(--carina-background-color-surface);
  color: var(--carina-text-color-body, var(--carina-text-color-base));
}

.carina-template-hero-header header {
    position: relative;

    display: flex;
    flex: 1 0 auto;
    width: 100%;

    margin: var(--carina-spacing-4) var(--carina-spacing-0)
      var(--carina-spacing-8) var(--carina-spacing-0);
  }

@media (max-width: 767.98px) {

.carina-template-hero-header header {
      margin: var(--carina-spacing-4) var(--carina-spacing-0)
        var(--carina-spacing-0) var(--carina-spacing-0)
  }
    }

.carina-template-hero-header--rebrand {
    background-color: var(--carina-background-color-surface-alt);
  }

.carina-template-hero-header--phase2 {
    font-family: var(--carina-font-family-mono);
  }

.carina-template-hero-header__title {
  -webkit-box-orient: vertical;

  display: -webkit-box;
  flex: 1 0 auto;
  margin: var(--carina-spacing-0);
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.carina-template-hero-header__logo {
  display: flex;
  margin: var(--carina-spacing-0);
  margin-inline-end: calc(var(--carina-spacing-8) + var(--carina-spacing-1));
}

@media (max-width: 767.98px) {

.carina-template-hero-header__logo {
    align-self: center;
    margin-inline-end: var(--carina-spacing-0)
}
  }

.carina-template-hero-header__content-block {
  flex: 1 1 0%;
  margin: var(--carina-spacing-0);
  padding: var(--carina-spacing-0);
}

@media (max-width: 767.98px) {

.carina-template-hero-header__content-block {
    margin: var(--carina-spacing-4) var(--carina-spacing-0)
      var(--carina-spacing-8) var(--carina-spacing-0)
}
  }

.carina-template-hero-header__content-wrapper {
  display: flex;
  flex: 1;
}

@media (max-width: 767.98px) {

.carina-template-hero-header__content-wrapper {
    flex-direction: column;
    align-items: flex-start
}
  }

@media (max-width: 1023.98px) {

.carina-template-hero-header__action-wrapper {
    position: absolute;
    top: -33px;
    right: 0
}

    [dir='rtl'] .carina-template-hero-header__action-wrapper {
      right: unset;
      left: 0;
    }
  }

.carina-template-illustration {
  max-height: 100vh;
  padding: var(--carina-spacing-6) var(--carina-spacing-10);
}

.carina-template-illustration__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding-top: var(--carina-spacing-8);

  font-weight: var(--carina-font-weight-body);

  font-family: var(--carina-font-family-primary);
}

.carina-template-illustration__illustration-container {
  max-width: 100%;

  margin: var(--carina-spacing-0) auto;

  text-align: center;
}

.carina-template-illustration__illustration-container svg {
    width: auto;
    height: auto;
    margin: auto;
  }

.carina-template-illustration__image {
  width: 70%;
  max-width: 375px;
}

.carina-template-illustration__wrapper--compact,
.carina-template-illustration__illustration-container--compact {
  margin-bottom: 26px;
}

.carina-template-illustration__error {
  margin: var(--carina-spacing-4) auto var(--carina-spacing-8);

  color: var(--carina-text-color-danger);

  font-size: var(--carina-font-size-sm);
  font-family: var(--carina-font-family-primary);
  text-align: center;
}

.carina-template-illustration__error-details {
  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);
  font-size: var(--carina-font-size-xs);
  font-family: var(--carina-font-family-primary);
  line-height: var(--carina-line-height-tight);
  text-align: center;
}

.carina-template-illustration__error-details-heading {
  margin-top: var(--carina-spacing-12);
  margin-bottom: var(--carina-spacing-4);
}

.carina-template-illustration__error-details-date-heading {
  margin-top: var(--carina-spacing-4);
}

.carina-template-illustration__header-wrapper {
  display: block;
  max-width: 375px;
  margin: 0 auto var(--carina-spacing-4);

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-2xl);
  line-height: var(--carina-line-height-9);
  font-family: var(--carina-font-family-primary);

  text-align: center;
}

@media (max-width: 639.98px) {

.carina-template-illustration__header-wrapper {
    /* small size */
    font-size: var(--carina-font-size-xl)
}
  }

.carina-template-illustration__body-wrapper {
  display: block;

  max-width: 375px;
  margin: var(--carina-spacing-4) auto var(--carina-spacing-8);

  color: var(--carina-text-color-soft);
  font-weight: var(--carina-font-weight-body);

  font-size: var(--carina-font-size-md);
  font-family: var(--carina-font-family-primary);

  text-align: center;
}

@media (max-width: 639.98px) {

.carina-template-illustration__body-wrapper {
    /* small size */
    max-width: 100%;

    font-size: var(--carina-font-size-sm)
}
  }

@media (min-width: 640px) {
  .carina-template-illustration__wrapper svg,
  .carina-template-illustration__illustration-container svg {
    width: 375px;
    height: 375px;
  }

  .carina-template-illustration__wrapper--compact,
  .carina-template-illustration__illustration-container--compact {
    margin-bottom: 32px;
  }

    .carina-template-illustration__wrapper--compact svg, .carina-template-illustration__illustration-container--compact svg {
      width: 250px;
      height: 250px;
    }
}

.carina-templates-main {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  width: 100%;
}

.carina-templates-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: flex;
}

.carina-templates-scroll-view {
  flex-grow: 1;
  overflow-y: auto;

  color: var(--carina-text-color-body, var(--carina-text-color-base));

  background: var(--carina-background-color-surface-alt);
}

.carina-templates-template-action-bar {
  flex-shrink: 0;
}

.carina-templates-template-actions {
  display: flex;
  flex: 0 0 30%;
  align-items: center;
  max-height: 48px;
}

.carina-templates-template-actions button {
    margin: var(--carina-spacing-2);
  }

.carina-templates-template-actions__small {
  position: relative;
  right: 0;

  min-height: 100%;
}

.carina-templates-template-actions--stacked {
  flex-direction: column-reverse;
}

.carina-templates-template-actions--position-flex-end {
  justify-content: flex-end;
}

.carina-templates-template-actions--position-flex-start {
  justify-content: flex-start;
}

.carina-templates-template-actions--position-center {
  justify-content: center;
}

.carina-templates-template-panel {
  flex-shrink: 0;
  height: 100%;
}

.carina-tile {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--carina-tile-padding, var(--carina-spacing-6));
  border-color: var(--carina-border-color-soft);
  border-style: solid;
  border-width: var(--carina-border-width-1);
  border-radius: var(--carina-border-radius-xl);

  color: var(--carina-text-color-body, var(--carina-text-color-base));
  font-family: var(--carina-font-family-primary);
  font-weight: var(--carina-font-weight-body);
  line-height: var(--carina-line-height-normal);
  background-color: var(--carina-background-color-surface);

  cursor: default;
  pointer-events: none;

  /* Always define outline for smooth transitions across all states */
  outline: var(--carina-border-width-2) solid var(--carina-colors-transparent);
  outline-offset: var(--carina-border-width-1);

  transition-timing-function: var(
    --carina-transition-timing-function-expressive-ease-in-out
  );
  transition-duration: calc(
    var(--carina-page-loaded, 0) * var(--carina-transition-duration-100)
  );
  transition-property: outline-color, border-color, box-shadow;
}

.carina-tile--rebrand {
  border-radius: var(--carina-border-radius-sm);
}

.carina-tile--interactive {
  cursor: pointer;
  pointer-events: auto;
  border-color: var(--carina-border-color-soft);
}

.carina-tile--interactive:focus-visible {
    outline-color: var(--carina-border-color-primary-focus);
    transition-duration: var(--carina-transition-duration-100);
  }

.carina-tile--interactive:not(.carina-tile--disabled):hover {
    box-shadow: var(--carina-box-shadow-lg);
  }

/* Targets child checkbox/radio borders within placeholder since they're readonly and don't handle their own hover states */

.carina-tile--interactive:not(.carina-tile--disabled):hover .carina-tile__placeholder-icon {
      border-color: var(--carina-border-color-primary);
    }

/* Targets child checkbox/radio borders within placeholder on focus */

.carina-tile--interactive:focus-within .carina-tile__placeholder-icon {
    border-color: var(--carina-border-color-primary-focus);
  }

.carina-tile--selected:not(.carina-tile--error):not(.carina-tile--disabled) {
  border-color: var(--carina-border-color-primary-focus);
  border-width: var(--carina-border-width-2);
}

.carina-tile--error {
  border-color: var(--carina-border-color-danger-focus);
}

.carina-tile--error:focus-visible {
    outline-color: var(--carina-border-color-danger-focus);
  }

.carina-tile--disabled {
  border-color: var(--carina-border-color-soft);
  background-color: var(--carina-background-color-surface);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

/* Fade out content and selected icon when disabled */

.carina-tile--disabled .carina-tile__content,
  .carina-tile--disabled .carina-tile__selected-icon {
    opacity: var(--carina-opacity-40);
  }

.carina-tile--condensed {
  --carina-tile-padding: var(--carina-spacing-2);
}

.carina-tile--default {
  --carina-tile-padding: var(--carina-spacing-4);
}

.carina-tile--roomy {
  --carina-tile-padding: var(--carina-spacing-6);
}

.carina-tile__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.carina-tile__body,
.carina-tile__footer {
  flex: 1 1 auto;
  padding: inherit;
}

.carina-tile__body {
  min-height: 75%;
}

/* Shared positioning & spacing */

.carina-tile__drag-icon,
.carina-tile__selected-icon,
.carina-tile__placeholder-icon {
  position: absolute;
}

.carina-tile__drag-icon--start {
    top: var(--carina-tile-padding);
    right: auto;
    left: var(--carina-tile-padding);
  }

[dir='rtl'] .carina-tile__drag-icon--start {
      right: var(--carina-tile-padding);
      left: auto;
    }

.carina-tile__drag-icon--end {
    top: var(--carina-tile-padding);
    right: var(--carina-tile-padding);
    left: auto;
  }

[dir='rtl'] .carina-tile__drag-icon--end {
      left: var(--carina-tile-padding);
      right: auto;
    }

.carina-tile__selected-icon *, .carina-tile__placeholder-icon * {
    pointer-events: none;
  }

/* Size variants */

.carina-tile__selected-icon--sm, .carina-tile__placeholder-icon--sm {
    --radio-outer-size: 20px;
    --radio-dot-size: 8px;
    --radio-dot-offset: 6px;
    --checkbox-size: 20px;
  }

.carina-tile__selected-icon--md, .carina-tile__placeholder-icon--md {
    --radio-outer-size: 32px;
    --radio-dot-size: 12px;
    --radio-dot-offset: 10px;
    --checkbox-size: 32px;
  }

/* Placement */

.carina-tile__selected-icon--top-start, .carina-tile__placeholder-icon--top-start {
    top: var(--carina-tile-padding);
    left: var(--carina-tile-padding);
  }

[dir='rtl'] .carina-tile__selected-icon--top-start, [dir='rtl'] .carina-tile__placeholder-icon--top-start {
      left: auto;
      right: var(--carina-tile-padding);
    }

.carina-tile__selected-icon--top-end, .carina-tile__placeholder-icon--top-end {
    top: var(--carina-tile-padding);
    right: var(--carina-tile-padding);
  }

[dir='rtl'] .carina-tile__selected-icon--top-end, [dir='rtl'] .carina-tile__placeholder-icon--top-end {
      right: auto;
      left: var(--carina-tile-padding);
    }

.carina-tile__selected-icon--bottom-start, .carina-tile__placeholder-icon--bottom-start {
    bottom: var(--carina-tile-padding);
    left: var(--carina-tile-padding);
  }

[dir='rtl'] .carina-tile__selected-icon--bottom-start, [dir='rtl'] .carina-tile__placeholder-icon--bottom-start {
      left: auto;
      right: var(--carina-tile-padding);
    }

.carina-tile__selected-icon--bottom-end, .carina-tile__placeholder-icon--bottom-end {
    bottom: var(--carina-tile-padding);
    right: var(--carina-tile-padding);
  }

[dir='rtl'] .carina-tile__selected-icon--bottom-end, [dir='rtl'] .carina-tile__placeholder-icon--bottom-end {
      right: auto;
      left: var(--carina-tile-padding);
    }

/* Checkbox Reset */

.carina-tile__selected-icon--checkbox .carina-checkbox__label, .carina-tile__placeholder-icon--checkbox .carina-checkbox__label {
    padding: 0;
    min-height: 0;
  }

.carina-tile__selected-icon--checkbox .carina-checkbox__box, .carina-tile__placeholder-icon--checkbox .carina-checkbox__box {
    margin: 0;
    width: var(--checkbox-size, 20px);
    height: var(--checkbox-size, 20px);
  }

.carina-tile__selected-icon--checkbox .carina-checkbox__icon, .carina-tile__placeholder-icon--checkbox .carina-checkbox__icon {
    width: 20px;
    height: 20px;
  }

/* Circle Checkbox Reset */

.carina-tile__selected-icon--circle-checkbox .carina-checkbox__label, .carina-tile__placeholder-icon--circle-checkbox .carina-checkbox__label {
    padding: 0;
    min-height: 0;
  }

.carina-tile__selected-icon--circle-checkbox .carina-checkbox__box, .carina-tile__placeholder-icon--circle-checkbox .carina-checkbox__box {
    margin: 0;
    width: var(--checkbox-size, 20px);
    height: var(--checkbox-size, 20px);
    border-radius: 50%;
  }

.carina-tile__selected-icon--circle-checkbox .carina-checkbox__icon, .carina-tile__placeholder-icon--circle-checkbox .carina-checkbox__icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }

/* Radio Button Reset & Customization */

.carina-tile__selected-icon--radio .carina-radiogroup__button, .carina-tile__placeholder-icon--radio .carina-radiogroup__button {
    padding: 0;
    display: block;
  }

.carina-tile__selected-icon--radio .carina-radiogroup__button-label, .carina-tile__placeholder-icon--radio .carina-radiogroup__button-label {
    display: block;
    margin: 0;
    padding: 0;
  }

.carina-tile__selected-icon--radio .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio .carina-radiogroup__button-label::before {
      /* Outer Circle */
      top: 0;
      left: 0;
      width: var(--radio-outer-size, 20px);
      height: var(--radio-outer-size, 20px);
      border-radius: 50%;
    }

[dir='rtl'] .carina-tile__selected-icon--radio .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__placeholder-icon--radio .carina-radiogroup__button-label::before {
        right: 0;
        left: auto;
      }

.carina-tile__selected-icon--radio .carina-radiogroup__button-label::after, .carina-tile__placeholder-icon--radio .carina-radiogroup__button-label::after {
      /* Inner Dot */
      border-radius: 50%;
      width: var(--radio-dot-size);
      height: var(--radio-dot-size);
      top: var(--radio-dot-offset);
      left: var(--radio-dot-offset);
    }

[dir='rtl'] .carina-tile__selected-icon--radio .carina-radiogroup__button-label::after, [dir='rtl'] .carina-tile__placeholder-icon--radio .carina-radiogroup__button-label::after {
        right: var(--radio-dot-offset);
        left: auto;
      }

/* Placement overrides for Radio internals */

.carina-tile__selected-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label::before, .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label::before {
      left: auto;
      right: 0;
    }

[dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label::before {
        left: 0;
        right: auto;
      }

.carina-tile__selected-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label--checked::after, .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label--checked::after, .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label--checked::after, .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label--checked::after {
      left: auto;
      right: var(--radio-dot-offset);
    }

[dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label--checked::after, [dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label--checked::after, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--top-end .carina-radiogroup__button-label--checked::after, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--top-end .carina-radiogroup__button-label--checked::after {
        left: var(--radio-dot-offset);
        right: auto;
      }

.carina-tile__selected-icon--radio.carina-tile__selected-icon--bottom-start .carina-radiogroup__button-label::before, .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--bottom-start .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--bottom-start .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--bottom-start .carina-radiogroup__button-label::before {
      top: auto;
      bottom: 0;
    }

.carina-tile__selected-icon--radio.carina-tile__selected-icon--bottom-start .carina-radiogroup__button-label--checked::after, .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--bottom-start .carina-radiogroup__button-label--checked::after, .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--bottom-start .carina-radiogroup__button-label--checked::after, .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--bottom-start .carina-radiogroup__button-label--checked::after {
      top: auto;
      bottom: var(--radio-dot-offset);
    }

.carina-tile__selected-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label::before, .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label::before, .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label::before {
      top: auto;
      bottom: 0;
      left: auto;
      right: 0;
    }

[dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label::before, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label::before {
        left: 0;
        right: auto;
      }

.carina-tile__selected-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label--checked::after, .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label--checked::after, .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label--checked::after, .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label--checked::after {
      top: auto;
      bottom: var(--radio-dot-offset);
      left: auto;
      right: var(--radio-dot-offset);
    }

[dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label--checked::after, [dir='rtl'] .carina-tile__selected-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label--checked::after, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__selected-icon--bottom-end .carina-radiogroup__button-label--checked::after, [dir='rtl'] .carina-tile__placeholder-icon--radio.carina-tile__placeholder-icon--bottom-end .carina-radiogroup__button-label--checked::after {
        left: var(--radio-dot-offset);
        right: auto;
      }

.carina-wizard__footer,
.carina-wizard__footer-end-container,
.carina-wizard__footer-start-container {
  display: flex;
}

.carina-wizard__footer {
  justify-content: center;
}

.carina-wizard__footer-end-container {
  margin-inline-start: 12px;
}

.carina-wizard__footer-start-container {
  margin-inline-end: 12px;
}

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

.pointer-events-none{
  pointer-events: none;
}

.visible{
  visibility: visible;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: var(--carina-spacing-0);
}

.-end-2{
  inset-inline-end: calc(var(--carina-spacing-2) * -1);
}

.-left-2{
  left: calc(var(--carina-spacing-2) * -1);
}

.-left-5{
  left: calc(var(--carina-spacing-5) * -1);
}

.-left-px{
  left: calc(var(--carina-spacing-px) * -1);
}

.-top-2{
  top: calc(var(--carina-spacing-2) * -1);
}

.-top-6{
  top: calc(var(--carina-spacing-6) * -1);
}

.bottom-0{
  bottom: var(--carina-spacing-0);
}

.bottom-1{
  bottom: var(--carina-spacing-1);
}

.end-1{
  inset-inline-end: var(--carina-spacing-1);
}

.left-0{
  left: var(--carina-spacing-0);
}

.left-1\/2{
  left: 50%;
}

.start-0{
  inset-inline-start: var(--carina-spacing-0);
}

.start-1{
  inset-inline-start: var(--carina-spacing-1);
}

.top-0{
  top: var(--carina-spacing-0);
}

.top-1\/2{
  top: 50%;
}

.top-\[-3px\]{
  top: -3px;
}

.top-\[3px\]{
  top: 3px;
}

.z-10{
  z-index: var(--carina-z-index-10);
}

.z-\[101\]{
  z-index: 101;
}

.z-\[9999\]{
  z-index: 9999;
}

.z-\[calc\(var\(--carina-z-index-current\)\+1\)\]{
  z-index: calc(var(--carina-z-index-current) + 1);
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.m-0{
  margin: var(--carina-spacing-0);
}

.-mx-px{
  margin-left: calc(var(--carina-spacing-px) * -1);
  margin-right: calc(var(--carina-spacing-px) * -1);
}

.mx-1{
  margin-left: var(--carina-spacing-1);
  margin-right: var(--carina-spacing-1);
}

.mx-3{
  margin-left: var(--carina-spacing-3);
  margin-right: var(--carina-spacing-3);
}

.my-1{
  margin-top: var(--carina-spacing-1);
  margin-bottom: var(--carina-spacing-1);
}

.my-1\.5{
  margin-top: var(--carina-spacing-1-5);
  margin-bottom: var(--carina-spacing-1-5);
}

.my-4{
  margin-top: var(--carina-spacing-4);
  margin-bottom: var(--carina-spacing-4);
}

.-me-px{
  margin-inline-end: calc(var(--carina-spacing-px) * -1);
}

.mb-2{
  margin-bottom: var(--carina-spacing-2);
}

.ms-0{
  margin-inline-start: var(--carina-spacing-0);
}

.ms-3{
  margin-inline-start: var(--carina-spacing-3);
}

.mt-4{
  margin-top: var(--carina-spacing-4);
}

.mt-6{
  margin-top: var(--carina-spacing-6);
}

.box-border{
  box-sizing: border-box;
}

.block{
  display: block;
}

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

.inline{
  display: inline;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.\!table{
  display: table !important;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.contents{
  display: contents;
}

.list-item{
  display: list-item;
}

.hidden{
  display: none;
}

.h-0{
  height: var(--carina-spacing-0);
}

.h-10{
  height: var(--carina-spacing-10);
}

.h-16{
  height: var(--carina-spacing-16);
}

.h-2{
  height: var(--carina-spacing-2);
}

.h-4{
  height: var(--carina-spacing-4);
}

.h-5{
  height: var(--carina-spacing-5);
}

.h-6{
  height: var(--carina-spacing-6);
}

.h-9{
  height: var(--carina-spacing-9);
}

.h-\[16px\]{
  height: 16px;
}

.h-\[200px\]{
  height: 200px;
}

.h-\[24px\]{
  height: 24px;
}

.h-\[36px\]{
  height: 36px;
}

.h-\[40px\]{
  height: 40px;
}

.h-\[calc\(100\%_\+_6px\)\]{
  height: calc(100% + 6px);
}

.h-fit{
  height: -moz-fit-content;
  height: fit-content;
}

.h-full{
  height: 100%;
}

.h-screen{
  height: 100vh;
}

.min-h-5{
  min-height: var(--carina-spacing-5);
}

.min-h-6{
  min-height: var(--carina-spacing-6);
}

.min-h-\[200px\]{
  min-height: 200px;
}

.min-h-\[36px\]{
  min-height: 36px;
}

.w-0{
  width: var(--carina-spacing-0);
}

.w-10{
  width: var(--carina-spacing-10);
}

.w-2{
  width: var(--carina-spacing-2);
}

.w-4{
  width: var(--carina-spacing-4);
}

.w-5{
  width: var(--carina-spacing-5);
}

.w-56{
  width: var(--carina-spacing-56);
}

.w-6{
  width: var(--carina-spacing-6);
}

.w-9{
  width: var(--carina-spacing-9);
}

.w-\[16px\]{
  width: 16px;
}

.w-\[300\%\]{
  width: 300%;
}

.w-\[360px\]{
  width: 360px;
}

.w-\[36px\]{
  width: 36px;
}

.w-fit{
  width: -moz-fit-content;
  width: fit-content;
}

.w-full{
  width: 100%;
}

.min-w-0{
  min-width: var(--carina-spacing-0);
}

.min-w-5{
  min-width: var(--carina-spacing-5);
}

.min-w-6{
  min-width: var(--carina-spacing-6);
}

.min-w-\[160px\]{
  min-width: 160px;
}

.min-w-\[58px\]{
  min-width: 58px;
}

.min-w-\[96px\]{
  min-width: 96px;
}

.max-w-\[230px\]{
  max-width: 230px;
}

.max-w-\[calc\(100\%_-_85px\)\]{
  max-width: calc(100% - 85px);
}

.max-w-full{
  max-width: 100%;
}

.flex-1{
  flex: 1 1 0%;
}

.shrink{
  flex-shrink: 1;
}

.flex-grow{
  flex-grow: 1;
}

.grow{
  flex-grow: 1;
}

.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-4{
  --tw-translate-x: calc(var(--carina-spacing-4) * -1);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-x-\[calc\(100\%\+16px\)\]{
  --tw-translate-x: calc(calc(100% + 16px) * -1);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-2\.5{
  --tw-translate-y: calc(var(--carina-spacing-2-5) * -1);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-\[calc\(50\%\+1px\)\]{
  --tw-translate-y: calc(calc(50% + 1px) * -1);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180{
  --tw-rotate: var(--carina-rotate-180);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform-none{
  transform: none;
}

@keyframes spin{

  to{
    transform: rotate(360deg);
  }
}

.animate-spin{
  animation: spin 1s linear infinite;
}

.cursor-crosshair{
  cursor: crosshair;
}

.cursor-default{
  cursor: default;
}

.cursor-grab{
  cursor: grab;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.select-text{
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

.select-all{
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize{
  resize: both;
}

.list-none{
  list-style-type: none;
}

.grid-cols-2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.flex-wrap{
  flex-wrap: wrap;
}

.items-center{
  align-items: center;
}

.justify-end{
  justify-content: flex-end;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

.gap-2{
  gap: var(--carina-spacing-2);
}

.gap-4{
  gap: var(--carina-spacing-4);
}

.justify-self-start{
  justify-self: start;
}

.justify-self-end{
  justify-self: end;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-visible{
  overflow: visible;
}

.overflow-x-hidden{
  overflow-x: hidden;
}

.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis{
  text-overflow: ellipsis;
}

.whitespace-nowrap{
  white-space: nowrap;
}

.rounded{
  border-radius: var(--carina-border-radius-sm);
}

.rounded-full{
  border-radius: var(--carina-border-radius-full);
}

.rounded-md{
  border-radius: var(--carina-border-radius-md);
}

.rounded-none{
  border-radius: var(--carina-border-radius-none);
}

.rounded-sm{
  border-radius: var(--carina-border-radius-sm);
}

.rounded-xs{
  border-radius: var(--carina-border-radius-xs);
}

.rounded-e-md{
  border-start-end-radius: var(--carina-border-radius-md);
  border-end-end-radius: var(--carina-border-radius-md);
}

.rounded-e-none{
  border-start-end-radius: var(--carina-border-radius-none);
  border-end-end-radius: var(--carina-border-radius-none);
}

.rounded-e-sm{
  border-start-end-radius: var(--carina-border-radius-sm);
  border-end-end-radius: var(--carina-border-radius-sm);
}

.rounded-s-\[calc\(var\(--carina-border-radius-md\)_\+_3px\)\]{
  border-start-start-radius: calc(var(--carina-border-radius-md) + 3px);
  border-end-start-radius: calc(var(--carina-border-radius-md) + 3px);
}

.rounded-s-\[calc\(var\(--carina-border-radius-sm\)_\+_3px\)\]{
  border-start-start-radius: calc(var(--carina-border-radius-sm) + 3px);
  border-end-start-radius: calc(var(--carina-border-radius-sm) + 3px);
}

.rounded-s-md{
  border-start-start-radius: var(--carina-border-radius-md);
  border-end-start-radius: var(--carina-border-radius-md);
}

.rounded-s-none{
  border-start-start-radius: var(--carina-border-radius-none);
  border-end-start-radius: var(--carina-border-radius-none);
}

.rounded-s-sm{
  border-start-start-radius: var(--carina-border-radius-sm);
  border-end-start-radius: var(--carina-border-radius-sm);
}

.rounded-ss-md{
  border-start-start-radius: var(--carina-border-radius-md);
}

.rounded-ss-sm{
  border-start-start-radius: var(--carina-border-radius-sm);
}

.border{
  border-width: var(--carina-border-width-1);
}

.border-0{
  border-width: var(--carina-border-width-0);
}

.border-2{
  border-width: var(--carina-border-width-2);
}

.border-b{
  border-bottom-width: var(--carina-border-width-1);
}

.border-b-0{
  border-bottom-width: var(--carina-border-width-0);
}

.border-b-2{
  border-bottom-width: var(--carina-border-width-2);
}

.border-solid{
  border-style: solid;
}

.border-dashed{
  border-style: dashed;
}

.border-none{
  border-style: none;
}

.border-\[--carina-colors-neutral-0\]{
  border-color: var(--carina-colors-neutral-0);
}

.border-\[color\:var\(--carina-colors-neutral-100\)\]{
  border-color: var(--carina-colors-neutral-100);
}

.border-\[transparent\]{
  border-color: transparent;
}

.border-base{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-base) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-danger{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-hard{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-hard) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-soft{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-tertiary{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-tertiary) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-s-\[transparent\]{
  border-inline-start-color: transparent;
}

.bg-\[transparent\]{
  background-color: transparent;
}

.bg-surface{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-surface) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-surface-active{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-surface-active) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-surface-alt{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-surface-alt) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-tertiary{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-tertiary) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-gradient-to-r{
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-\[--carina-background-color-tertiary\]{
  --tw-gradient-from: var(--carina-background-color-tertiary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[--carina-text-color-tertiary\]{
  --tw-gradient-from: var(--carina-text-color-tertiary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary{
  --tw-gradient-from: var(--carina-gradient-color-stops-primary) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-\[0\%\]{
  --tw-gradient-from-position: 0%;
}

.to-\[--carina-text-color-base\]{
  --tw-gradient-to: var(--carina-text-color-base) var(--tw-gradient-to-position);
}

.to-\[--carina-text-color-on-primary\]{
  --tw-gradient-to: var(--carina-text-color-on-primary) var(--tw-gradient-to-position);
}

.to-tertiary{
  --tw-gradient-to: var(--carina-gradient-color-stops-tertiary) var(--tw-gradient-to-position);
}

.to-\[50\%\]{
  --tw-gradient-to-position: 50%;
}

.bg-\[size\:200\%_100\%\]{
  background-size: 200% 100%;
}

.bg-\[position\:0\%_0\%\]{
  background-position: 0% 0%;
}

.p-0{
  padding: var(--carina-spacing-0);
}

.p-2{
  padding: var(--carina-spacing-2);
}

.p-4{
  padding: var(--carina-spacing-4);
}

.px-0{
  padding-left: var(--carina-spacing-0);
  padding-right: var(--carina-spacing-0);
}

.px-1{
  padding-left: var(--carina-spacing-1);
  padding-right: var(--carina-spacing-1);
}

.px-2{
  padding-left: var(--carina-spacing-2);
  padding-right: var(--carina-spacing-2);
}

.px-4{
  padding-left: var(--carina-spacing-4);
  padding-right: var(--carina-spacing-4);
}

.py-2\.5{
  padding-top: var(--carina-spacing-2-5);
  padding-bottom: var(--carina-spacing-2-5);
}

.py-\[var\(--carina-tan-table-padding-vertical\)\]{
  padding-top: var(--carina-tan-table-padding-vertical);
  padding-bottom: var(--carina-tan-table-padding-vertical);
}

.pb-0{
  padding-bottom: var(--carina-spacing-0);
}

.pb-1{
  padding-bottom: var(--carina-spacing-1);
}

.pb-4{
  padding-bottom: var(--carina-spacing-4);
}

.pe-1{
  padding-inline-end: var(--carina-spacing-1);
}

.pe-3{
  padding-inline-end: var(--carina-spacing-3);
}

.pe-4{
  padding-inline-end: var(--carina-spacing-4);
}

.ps-0{
  padding-inline-start: var(--carina-spacing-0);
}

.ps-1{
  padding-inline-start: var(--carina-spacing-1);
}

.ps-2{
  padding-inline-start: var(--carina-spacing-2);
}

.ps-4{
  padding-inline-start: var(--carina-spacing-4);
}

.ps-\[var\(--carina-tan-table-padding-horizontal\)\]{
  padding-inline-start: var(--carina-tan-table-padding-horizontal);
}

.text-center{
  text-align: center;
}

.text-start{
  text-align: start;
}

.indent-0{
  text-indent: var(--carina-spacing-0);
}

.font-body{
  font-family: var(--carina-font-family-body);
}

.font-mono{
  font-family: var(--carina-font-family-mono);
}

.text-body-sm{
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-body-sm);
}

.text-md{
  font-size: var(--carina-font-size-md);
  line-height: var(--carina-line-height-3);
}

.text-sm{
  font-size: var(--carina-font-size-sm);
  line-height: var(--carina-line-height-3);
}

.font-body{
  font-weight: var(--carina-font-weight-body);
}

.font-mono{
  font-weight: var(--carina-font-weight-mono);
}

.uppercase{
  text-transform: uppercase;
}

.lowercase{
  text-transform: lowercase;
}

.leading-normal{
  line-height: var(--carina-line-height-normal);
}

.text-\[--carina-background-color-tertiary\]{
  color: var(--carina-background-color-tertiary);
}

.text-\[transparent\]{
  color: transparent;
}

.text-base{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-base) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-disabled{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-disabled) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-on-tertiary{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-on-tertiary) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-primary{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-tertiary{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-tertiary) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.underline{
  text-decoration-line: underline;
}

.no-underline{
  text-decoration-line: none;
}

.opacity-0{
  opacity: var(--carina-opacity-0);
}

.opacity-100{
  opacity: var(--carina-opacity-100);
}

.opacity-60{
  opacity: var(--carina-opacity-60);
}

.shadow{
  --tw-shadow: var(--carina-box-shadow-md);
  --tw-shadow-colored: var(--carina-box-shadow-md);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_0_1px_var\(--carina-colors-neutral-100\)\2c inset_0_0_0_1px_var\(--carina-colors-neutral-100\)\]{
  --tw-shadow: 0 0 0 1px var(--carina-colors-neutral-100),inset 0 0 0 1px var(--carina-colors-neutral-100);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\2c var\(--carina-border-color-hard\)_calc\(var\(--carina-opacity-25\)_\*_100\%\)\2c transparent\)\]{
  --tw-shadow: inset 0 0 0 1px color-mix(in srgb,var(--carina-border-color-hard) calc(var(--carina-opacity-25) * 100%),transparent);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl{
  --tw-shadow: var(--carina-box-shadow-xl);
  --tw-shadow-colored: var(--carina-box-shadow-xl);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline{
  outline-style: solid;
}

.outline-2{
  outline-width: 2px;
}

.-outline-offset-4{
  outline-offset: -4px;
}

.outline-offset-1{
  outline-offset: 1px;
}

.outline-\[var\(--carina-border-color-primary-focus\)\]{
  outline-color: var(--carina-border-color-primary-focus);
}

.outline-\[var\(--carina-colors-neutral-0\)\]{
  outline-color: var(--carina-colors-neutral-0);
}

.outline-\[var\(--carina-colors-transparent\)\]{
  outline-color: var(--carina-colors-transparent);
}

.ring{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
}

.transition-\[background-color\]{
  transition-property: background-color;
}

.transition-\[background-position\]{
  transition-property: background-position;
}

.transition-all{
  transition-property: all;
}

.transition-none{
  transition-property: none;
}

.transition-opacity{
  transition-property: opacity;
}

.transition-transform{
  transition-property: transform;
}

.duration-100{
  transition-duration: var(--carina-transition-duration-100);
}

.duration-200{
  transition-duration: var(--carina-transition-duration-200);
}

.duration-300{
  transition-duration: var(--carina-transition-duration-300);
}

.\[--carina-avatar-bg\:var\(--carina-avatar-group-overflow-bg\2c \#c2c2c2\)\]{
  --carina-avatar-bg: var(--carina-avatar-group-overflow-bg,#c2c2c2);
}

.\[--carina-avatar-fg\:var\(--carina-avatar-group-overflow-fg\2c \#000\)\]{
  --carina-avatar-fg: var(--carina-avatar-group-overflow-fg,#000);
}

.\[background-clip\:text\]{
  -webkit-background-clip: text;
          background-clip: text;
}

.\[background\:linear-gradient\(var\(--carina-color-swatch-color\)\2c var\(--carina-color-swatch-color\)\)\2c repeating-conic-gradient\(var\(--carina-background-color-surface-alt\)_0\%_25\%\2c var\(--carina-background-color-surface\)_0\%_50\%\)_50\%_\/_16px_16px\]{
  background: linear-gradient(var(--carina-color-swatch-color),var(--carina-color-swatch-color)),repeating-conic-gradient(var(--carina-background-color-surface-alt) 0% 25%,var(--carina-background-color-surface) 0% 50%) 50% / 16px 16px;
}

.\[background\:var\(--carina-color-picker-slider-track-background\)\2c _repeating-conic-gradient\(var\(--carina-background-color-surface-alt\)_0\%_25\%\2c _var\(--carina-background-color-surface\)_0\%_50\%\)_50\%_\/_8px_8px\]{
  background: var(--carina-color-picker-slider-track-background), repeating-conic-gradient(var(--carina-background-color-surface-alt) 0% 25%, var(--carina-background-color-surface) 0% 50%) 50% / 8px 8px;
}

.before\:pointer-events-none::before{
  content: var(--tw-content);
  pointer-events: none;
}

.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}

.before\:-inset-px::before{
  content: var(--tw-content);
  inset: calc(var(--carina-spacing-px) * -1);
}

.before\:rounded-\[inherit\]::before{
  content: var(--tw-content);
  border-radius: inherit;
}

.before\:bg-\[linear-gradient\(to_right\2c var\(--carina-background-color-tertiary\)\2c var\(--carina-border-color-base\)\)\]::before{
  content: var(--tw-content);
  background-image: linear-gradient(to right,var(--carina-background-color-tertiary),var(--carina-border-color-base));
}

.before\:p-px::before{
  content: var(--tw-content);
  padding: var(--carina-spacing-px);
}

.before\:content-\[\'\'\]::before{
  --tw-content: '';
  content: var(--tw-content);
}

.before\:\[-webkit-mask-composite\:xor\]::before{
  content: var(--tw-content);
  -webkit-mask-composite: xor;
}

.before\:\[mask-clip\:content-box\2c border-box\]::before{
  content: var(--tw-content);
  -webkit-mask-clip: content-box,border-box;
          mask-clip: content-box,border-box;
}

.before\:\[mask-composite\:exclude\]::before{
  content: var(--tw-content);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.before\:\[mask-image\:linear-gradient\(\#fff\2c \#fff\)\2c linear-gradient\(\#fff\2c \#fff\)\]::before{
  content: var(--tw-content);
  -webkit-mask-image: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
          mask-image: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
}

.after\:pointer-events-none::after{
  content: var(--tw-content);
  pointer-events: none;
}

.after\:absolute::after{
  content: var(--tw-content);
  position: absolute;
}

.after\:bottom-\[calc\(var\(--carina-spacing-2\)-1px\)\]::after{
  content: var(--tw-content);
  bottom: calc(var(--carina-spacing-2) - 1px);
}

.after\:bottom-\[clamp\(6px\2c calc\(6px_\+_\(100\%_-_40px\)\/3\)\2c 14px\)\]::after{
  content: var(--tw-content);
  bottom: clamp(6px,calc(6px + (100% - 40px) / 3),14px);
}

.after\:end-6::after{
  content: var(--tw-content);
  inset-inline-end: var(--carina-spacing-6);
}

.after\:start-6::after{
  content: var(--tw-content);
  inset-inline-start: var(--carina-spacing-6);
}

.after\:start-\[calc\(50\%_-_clamp\(9px\2c calc\(9px_\+_\(100\%_-_40px\)\/8\)\2c 12px\)\)\]::after{
  content: var(--tw-content);
  inset-inline-start: calc(50% - clamp(9px,calc(9px + (100% - 40px) / 8),12px));
}

.after\:h-0\.5::after{
  content: var(--tw-content);
  height: var(--carina-spacing-0-5);
}

.after\:w-\[clamp\(18px\2c calc\(18px_\+_\(100\%_-_40px\)\/4\)\2c 24px\)\]::after{
  content: var(--tw-content);
  width: clamp(18px,calc(18px + (100% - 40px) / 4),24px);
}

.after\:origin-left::after{
  content: var(--tw-content);
  transform-origin: left;
}

.after\:scale-x-0::after{
  content: var(--tw-content);
  --tw-scale-x: var(--carina-scale-0);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:scale-x-100::after{
  content: var(--tw-content);
  --tw-scale-x: var(--carina-scale-100);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.after\:bg-\[--carina-background-color-tertiary\]::after{
  content: var(--tw-content);
  background-color: var(--carina-background-color-tertiary);
}

.after\:bg-\[--carina-text-color-primary\]::after{
  content: var(--tw-content);
  background-color: var(--carina-text-color-primary);
}

.after\:bg-\[--carina-text-color-tertiary\]::after{
  content: var(--tw-content);
  background-color: var(--carina-text-color-tertiary);
}

.after\:transition-transform::after{
  content: var(--tw-content);
  transition-property: transform;
}

.after\:duration-300::after{
  content: var(--tw-content);
  transition-duration: var(--carina-transition-duration-300);
}

.after\:content-\[\'\'\]::after{
  --tw-content: '';
  content: var(--tw-content);
}

.hover\:scale-grow:hover{
  --tw-scale-x: var(--carina-scale-grow);
  --tw-scale-y: var(--carina-scale-grow);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-x-\[1\.009\]:hover{
  --tw-scale-x: 1.009;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-y-\[1\.03\]:hover{
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:underline:hover{
  text-decoration-line: underline;
}

.hover\:duration-100:hover{
  transition-duration: var(--carina-transition-duration-100);
}

.focus\:underline:focus{
  text-decoration-line: underline;
}

.focus-visible\:z-\[calc\(var\(--carina-z-index-current\)\+1\)\]:focus-visible{
  z-index: calc(var(--carina-z-index-current) + 1);
}

.focus-visible\:border-b-0:focus-visible{
  border-bottom-width: var(--carina-border-width-0);
}

.focus-visible\:outline-none:focus-visible{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus-visible\:outline-\[var\(--carina-border-color-danger-focus\)\]:focus-visible{
  outline-color: var(--carina-border-color-danger-focus);
}

.focus-visible\:outline-\[var\(--carina-border-color-primary-focus\)\]:focus-visible{
  outline-color: var(--carina-border-color-primary-focus);
}

.focus-visible\:ring:focus-visible{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-visible\:duration-100:focus-visible{
  transition-duration: var(--carina-transition-duration-100);
}

.active\:scale-100:active{
  --tw-scale-x: var(--carina-scale-100);
  --tw-scale-y: var(--carina-scale-100);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-shrink:active{
  --tw-scale-x: var(--carina-scale-shrink);
  --tw-scale-y: var(--carina-scale-shrink);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-x-\[0\.991\]:active{
  --tw-scale-x: 0.991;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-y-\[0\.97\]:active{
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:cursor-default:active{
  cursor: default;
}

.active\:cursor-grabbing:active{
  cursor: grabbing;
}

.active\:cursor-not-allowed:active{
  cursor: not-allowed;
}

.active\:bg-tertiary-pale:active{
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-tertiary-pale) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.active\:text-on-tertiary-pale:active{
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-on-tertiary-pale) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.active\:duration-100:active{
  transition-duration: var(--carina-transition-duration-100);
}

.group\/item:focus-within .group-focus-within\/item\:pointer-events-auto{
  pointer-events: auto;
}

.group\/item:focus-within .group-focus-within\/item\:opacity-100{
  opacity: var(--carina-opacity-100);
}

.group\/item:hover .group-hover\/item\:pointer-events-auto{
  pointer-events: auto;
}

.group\/item:hover .group-hover\/item\:opacity-100{
  opacity: var(--carina-opacity-100);
}

.group:focus-visible .group-focus-visible\:outline-\[var\(--carina-border-color-primary-focus\)\]{
  outline-color: var(--carina-border-color-primary-focus);
}

.group:focus-visible .group-focus-visible\:duration-100{
  transition-duration: var(--carina-transition-duration-100);
}

.peer:focus-visible ~ .peer-focus-visible\:border-b-0{
  border-bottom-width: var(--carina-border-width-0);
}

.peer:focus-visible ~ .peer-focus-visible\:border-solid{
  border-style: solid;
}

.peer:focus-visible ~ .peer-focus-visible\:border-danger{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-danger) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.peer:focus-visible ~ .peer-focus-visible\:border-danger-focus{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-danger-focus) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.peer:focus-visible ~ .peer-focus-visible\:border-primary-focus{
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--carina-border-color-primary-focus) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.peer:focus-visible ~ .peer-focus-visible\:outline{
  outline-style: solid;
}

.peer:focus-visible ~ .peer-focus-visible\:outline-2{
  outline-width: 2px;
}

.peer:focus-visible ~ .peer-focus-visible\:outline-offset-1{
  outline-offset: 1px;
}

.peer:focus-visible ~ .peer-focus-visible\:outline-\[var\(--carina-border-color-danger-focus\)\]{
  outline-color: var(--carina-border-color-danger-focus);
}

.peer:focus-visible ~ .peer-focus-visible\:outline-\[var\(--carina-border-color-primary-focus\)\]{
  outline-color: var(--carina-border-color-primary-focus);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-danger{
  --tw-ring-color: var(--carina-ring-color-danger);
}

@media (min-width: 640px){

  .sm\:hidden{
    display: none;
  }
}

@media (min-width: 768px){

  .md\:hidden{
    display: none;
  }

  .md\:\!w-\[240px\]{
    width: 240px !important;
  }
}

.\[\&\:has\(\[data-focus-visible\]\)\]\:outline:has([data-focus-visible]){
  outline-style: solid;
}

.\[\&\:has\(\[data-focus-visible\]\)\]\:outline-2:has([data-focus-visible]){
  outline-width: 2px;
}

.\[\&\:has\(\[data-focus-visible\]\)\]\:outline-offset-1:has([data-focus-visible]){
  outline-offset: 1px;
}

.\[\&\:has\(\[data-focus-visible\]\)\]\:outline-\[--carina-border-color-danger-focus\]:has([data-focus-visible]){
  outline-color: var(--carina-border-color-danger-focus);
}

.\[\&\:has\(\[data-focus-visible\]\)\]\:outline-\[--carina-border-color-primary-focus\]:has([data-focus-visible]){
  outline-color: var(--carina-border-color-primary-focus);
}

.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:bg-\[transparent\]:hover:not(.carina-button--disabled){
  background-color: transparent;
}

.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:bg-\[radial-gradient\(var\(--carina-background-color-tertiary\)_0\%\2c _var\(--carina-background-color-tertiary-active\)_100\%\)\]:hover:not(.carina-button--disabled){
  background-image: radial-gradient(var(--carina-background-color-tertiary) 0%, var(--carina-background-color-tertiary-active) 100%);
}

.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:bg-\[position\:99\%_100\%\]:hover:not(.carina-button--disabled){
  background-position: 99% 100%;
}

.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:text-on-tertiary:hover:not(.carina-button--disabled){
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--carina-text-color-on-tertiary) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:after\:scale-x-100:hover:not(.carina-button--disabled)::after{
  content: var(--tw-content);
  --tw-scale-x: var(--carina-scale-100);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\:not\(\.carina-button--disabled\)\]\:active\:bg-surface-active:active:not(.carina-button--disabled){
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-surface-active) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.\[\&\:not\(\.carina-button--disabled\)\]\:active\:bg-tertiary-active:active:not(.carina-button--disabled){
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--carina-background-color-tertiary-active) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.\[\&\:not\(\.carina-button--disabled\)\]\:active\:after\:scale-x-100:active:not(.carina-button--disabled)::after{
  content: var(--tw-content);
  --tw-scale-x: var(--carina-scale-100);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
/* This file is a copy of the compiled output from the Tailwind typography plugin for non-tailwind consumers. */

.carina-typography {
  color: var(--carina-text-color-body, var(--carina-text-color-base));
  max-width: inherit;
}
.carina-typography
  :where(p):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-5);
  margin-bottom: var(--carina-spacing-5);
}
.carina-typography
  :where([class~='lead']):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-size: var(--carina-font-size-body-md);
  line-height: var(--carina-line-height-body-lg);
  margin-top: var(--carina-spacing-5);
  margin-bottom: var(--carina-spacing-5);
}
.carina-typography
  :where(a):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-primary);
  text-decoration: underline;
  font-weight: inherit;
}
.carina-typography
  :where(strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-weight: var(--carina-font-weight-semi-bold);
}
.carina-typography
  :where(a strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(blockquote strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(thead th strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(ol):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: decimal;
  margin-top: var(--carina-spacing-5);
  margin-bottom: var(--carina-spacing-5);
  padding-left: var(--carina-spacing-6);
  padding-inline-start: var(--carina-spacing-6);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(ol[type='A']):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: upper-alpha;
}
.carina-typography
  :where(ol[type='a']):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: lower-alpha;
}
.carina-typography
  :where(ol[type='A' s]):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: upper-alpha;
}
.carina-typography
  :where(ol[type='a' s]):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: lower-alpha;
}
.carina-typography
  :where(ol[type='I']):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: upper-roman;
}
.carina-typography
  :where(ol[type='i']):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: lower-roman;
}
.carina-typography
  :where(ol[type='I' s]):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: upper-roman;
}
.carina-typography
  :where(ol[type='i' s]):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: lower-roman;
}
.carina-typography
  :where(ol[type='1']):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: decimal;
}
.carina-typography
  :where(ul):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style-type: disc;
  margin-top: var(--carina-spacing-5);
  margin-bottom: var(--carina-spacing-5);
  padding-left: var(--carina-spacing-6);
  padding-inline-start: var(--carina-spacing-6);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(ol > li):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::marker {
  font-weight: var(--carina-font-weight-body);
  color: inherit;
}
.carina-typography
  :where(ul > li):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::marker {
  color: inherit;
}
.carina-typography
  :where(dt):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-weight: var(--carina-font-weight-display);
  margin-top: var(--carina-spacing-5);
}
.carina-typography
  :where(hr):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  border-top-width: var(--carina-border-width-1);
  margin-top: var(--carina-spacing-12);
  margin-bottom: var(--carina-spacing-12);
}
.carina-typography
  :where(blockquote):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  font-weight: var(--carina-font-weight-medium);
  font-style: italic;
  color: var(--carina-text-color-soft);
  border-left-width: var(--carina-spacing-1);
  border-left-color: var(--carina-border-color-soft);
  quotes: '\201C' '\201D' '\2018' '\2019';
  margin-top: var(--carina-spacing-6);
  margin-bottom: var(--carina-spacing-6);
  padding-left: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-0);
  border-inline-start-width: var(--carina-spacing-1);
  border-inline-start-color: var(--carina-border-color-soft);
}
.carina-typography
  :where(blockquote p:first-of-type):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::before {
  content: open-quote;
}
.carina-typography
  :where(blockquote p:last-of-type):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::after {
  content: close-quote;
}
.carina-typography
  :where(h1):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-header-1);
  margin-top: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-3-5);
  line-height: var(--carina-line-height-header-1);
  letter-spacing: var(--carina-letter-spacing-header-1, 0);
  text-transform: var(--carina-text-transform-header-1, none);
}
.carina-typography
  :where(h1 strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  font-weight: var(--carina-font-weight-display);
  color: inherit;
}
.carina-typography
  :where(h2):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-header-2);
  margin-top: var(--carina-spacing-8);
  margin-bottom: var(--carina-spacing-4);
  line-height: var(--carina-line-height-header-2);
  letter-spacing: var(--carina-letter-spacing-header-2, 0);
}
.carina-typography
  :where(h2 strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  font-weight: var(--carina-font-weight-display);
  color: inherit;
}
.carina-typography
  :where(h3):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-display);
  font-size: var(--carina-font-size-header-3);
  margin-top: var(--carina-spacing-7);
  margin-bottom: var(--carina-spacing-2-5);
  line-height: var(--carina-line-height-header-3);
  letter-spacing: var(--carina-letter-spacing-header-3, 0);
}
.carina-typography
  :where(h3 strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  font-weight: var(--carina-font-weight-display);
  color: inherit;
}
.carina-typography
  :where(h4):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-weight: var(--carina-font-weight-display);
  margin-top: var(--carina-spacing-6);
  margin-bottom: var(--carina-spacing-2);
  line-height: var(--carina-line-height-header-4);
  letter-spacing: var(--carina-letter-spacing-header-4, 0);
  font-size: var(--carina-font-size-header-4);
}
.carina-typography
  :where(h4 strong):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  font-weight: var(--carina-font-weight-display);
  color: inherit;
}
.carina-typography
  :where(img):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-8);
  margin-bottom: var(--carina-spacing-8);
}
.carina-typography
  :where(picture):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  display: block;
  margin-top: var(--carina-spacing-8);
  margin-bottom: var(--carina-spacing-8);
}
.carina-typography
  :where(kbd):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  font-weight: var(--carina-font-weight-display);
  font-family: inherit;
  color: var(--carina-text-color-base);
  box-shadow:
    0 0 0 1px
      color-mix(in srgb, var(--carina-border-color-hard) 40%, transparent),
    0 3px 0 color-mix(in srgb, var(--carina-border-color-hard) 40%, transparent);
  font-size: var(--carina-font-size-body-sm);
  border-radius: var(--carina-border-radius-sm);
  padding-top: var(--carina-spacing-0-5);
  padding-right: var(--carina-spacing-1-5);
  padding-bottom: var(--carina-spacing-0-5);
  padding-left: var(--carina-spacing-1-5);
  padding-inline-start: var(--carina-spacing-1-5);
  padding-inline-end: var(--carina-spacing-1-5);
}
.carina-typography
  :where(code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-weight: var(--carina-font-weight-medium);
  font-size: var(--carina-font-size-body-sm);
}
.carina-typography
  :where(code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::before {
  content: none;
}
.carina-typography
  :where(code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::after {
  content: none;
}
.carina-typography
  :where(a code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(h1 code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(h2 code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-size: var(--carina-font-size-display-sm);
}
.carina-typography
  :where(h3 code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-size: var(--carina-font-size-display-2xs);
}
.carina-typography
  :where(h4 code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(blockquote code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(thead th code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
}
.carina-typography
  :where(pre):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  background-color: var(--carina-background-color-surface-alt);
  overflow-x: auto;
  font-weight: var(--carina-font-weight-medium);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-body-md);
  margin-top: var(--carina-spacing-7);
  margin-bottom: var(--carina-spacing-7);
  border-radius: var(--carina-border-radius-md);
  padding-top: var(--carina-spacing-3-5);
  padding-right: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-3-5);
  padding-left: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-4);
}
.carina-typography
  :where(pre code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  background-color: var(--carina-colors-transparent);
  border-width: var(--carina-border-width-0);
  border-radius: var(--carina-border-radius-none);
  padding: var(--carina-spacing-0);
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.carina-typography
  :where(pre code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::before {
  content: none;
}
.carina-typography
  :where(pre code):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  )::after {
  content: none;
}
.carina-typography
  :where(table):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: var(--carina-spacing-8);
  margin-bottom: var(--carina-spacing-8);
  font-size: var(--carina-font-size-body-md);
  line-height: var(--carina-line-height-body-lg);
}
.carina-typography
  :where(thead):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  border-bottom-width: var(--carina-border-width-2);
  border-bottom-color: var(--carina-border-color-soft);
}
.carina-typography
  :where(thead th):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-display);
  vertical-align: bottom;
  padding-right: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-4);
  padding-left: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-4);
}
.carina-typography
  :where(tbody tr):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  border-bottom-width: var(--carina-border-width-1);
  border-bottom-color: var(--carina-border-color-soft);
}
.carina-typography
  :where(tbody tr:last-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  border-bottom-width: var(--carina-border-width-0);
}
.carina-typography
  :where(tbody td):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  vertical-align: baseline;
}
.carina-typography
  :where(tfoot):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  border-top-width: var(--carina-border-width-1);
  border-top-color: var(--carina-border-color-soft);
}
.carina-typography
  :where(tfoot td):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  vertical-align: top;
}
.carina-typography
  :where(figure > *):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-0);
}
.carina-typography
  :where(figcaption):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: inherit;
  font-size: var(--carina-font-size-body-2xs);
  line-height: var(--carina-line-height-body-2xs);
  margin-top: var(--carina-spacing-3-5);
}
.carina-typography {
  --tw-prose-body: unset;
  --tw-prose-headings: unset;
  --tw-prose-lead: unset;
  --tw-prose-links: unset;
  --tw-prose-bold: unset;
  --tw-prose-counters: unset;
  --tw-prose-bullets: unset;
  --tw-prose-hr: unset;
  --tw-prose-quotes: unset;
  --tw-prose-quote-borders: unset;
  --tw-prose-captions: unset;
  --tw-prose-kbd: unset;
  --tw-prose-kbd-shadows: unset;
  --tw-prose-code: unset;
  --tw-prose-pre-code: unset;
  --tw-prose-pre-bg: unset;
  --tw-prose-th-borders: unset;
  --tw-prose-td-borders: unset;
  --tw-prose-invert-body: unset;
  --tw-prose-invert-headings: unset;
  --tw-prose-invert-lead: unset;
  --tw-prose-invert-links: unset;
  --tw-prose-invert-bold: unset;
  --tw-prose-invert-counters: unset;
  --tw-prose-invert-bullets: unset;
  --tw-prose-invert-hr: unset;
  --tw-prose-invert-quotes: unset;
  --tw-prose-invert-quote-borders: unset;
  --tw-prose-invert-captions: unset;
  --tw-prose-invert-kbd: unset;
  --tw-prose-invert-kbd-shadows: unset;
  --tw-prose-invert-code: unset;
  --tw-prose-invert-pre-code: unset;
  --tw-prose-invert-pre-bg: unset;
  --tw-prose-invert-th-borders: unset;
  --tw-prose-invert-td-borders: unset;
  font-size: var(--carina-font-size-body-md);
  line-height: var(--carina-line-height-body-lg);
}
.carina-typography
  :where(picture > img):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
  margin-bottom: var(--carina-spacing-0);
}
.carina-typography
  :where(video):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-8);
  margin-bottom: var(--carina-spacing-8);
}
.carina-typography
  :where(li):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0-5);
  margin-bottom: var(--carina-spacing-0-5);
}
.carina-typography
  :where(ol > li):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-left: var(--carina-spacing-1-5);
  padding-inline-start: var(--carina-spacing-1-5);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(ul > li):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-left: var(--carina-spacing-1-5);
  padding-inline-start: var(--carina-spacing-1-5);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(.carina-typography > ul > li p):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-3);
  margin-bottom: var(--carina-spacing-3);
}
.carina-typography
  :where(.carina-typography > ul > li > *:first-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-5);
}
.carina-typography
  :where(.carina-typography > ul > li > *:last-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-bottom: var(--carina-spacing-5);
}
.carina-typography
  :where(.carina-typography > ol > li > *:first-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-5);
}
.carina-typography
  :where(.carina-typography > ol > li > *:last-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-bottom: var(--carina-spacing-5);
}
.carina-typography
  :where(ul ul, ul ol, ol ul, ol ol):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-3);
  margin-bottom: var(--carina-spacing-3);
}
.carina-typography
  :where(dl):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-5);
  margin-bottom: var(--carina-spacing-5);
}
.carina-typography
  :where(dd):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-1);
  padding-left: var(--carina-spacing-6);
  padding-inline-start: var(--carina-spacing-6);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(hr + *):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
}
.carina-typography
  :where(h2 + *):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
}
.carina-typography
  :where(h3 + *):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
}
.carina-typography
  :where(h4 + *):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
}
.carina-typography
  :where(thead th:first-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-left: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-4);
}
.carina-typography
  :where(thead th:last-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-right: var(--carina-spacing-4);
  padding-inline-start: var(--carina-spacing-4);
  padding-inline-end: var(--carina-spacing-4);
}
.carina-typography
  :where(tbody td, tfoot td):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-top: var(--carina-spacing-2-5);
  padding-right: var(--carina-spacing-2-5);
  padding-bottom: var(--carina-spacing-2-5);
  padding-left: var(--carina-spacing-2-5);
  padding-inline-start: var(--carina-spacing-2-5);
  padding-inline-end: var(--carina-spacing-2-5);
}
.carina-typography
  :where(tbody td:first-child, tfoot td:first-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-left: var(--carina-spacing-0);
  padding-inline-start: var(--carina-spacing-0);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(tbody td:last-child, tfoot td:last-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  padding-right: var(--carina-spacing-0);
  padding-inline-start: var(--carina-spacing-0);
  padding-inline-end: var(--carina-spacing-0);
}
.carina-typography
  :where(figure):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-8);
  margin-bottom: var(--carina-spacing-8);
}
.carina-typography
  :where(.carina-typography > :first-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-top: var(--carina-spacing-0);
}
.carina-typography
  :where(.carina-typography > :last-child):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  margin-bottom: var(--carina-spacing-0);
}
.carina-typography {
  -webkit-font-smoothing: antialiased;
}
.carina-typography
  :where(li:has(li)):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  list-style: none;
}
.carina-typography
  :where(h5):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-size: var(--carina-font-size-header-5);
  line-height: var(--carina-line-height-header-5);
  letter-spacing: var(--carina-letter-spacing-header-5, 0);
  font-weight: var(--carina-font-weight-display);
  text-transform: var(--carina-text-transform-header-5, none);
}
.carina-typography
  :where(h6):not(
    :where([class~='not-carina-typography'], [class~='not-carina-typography'] *)
  ) {
  color: var(--carina-text-color-heading, var(--carina-text-color-base));
  font-size: var(--carina-font-size-header-6);
  line-height: var(--carina-line-height-header-6);
  letter-spacing: var(--carina-letter-spacing-header-6, 0);
  font-weight: var(--carina-font-weight-display);
  text-transform: var(--carina-text-transform-header-6, none);
}

/* these fonts are all from google, they're open source.  */
/* Rubik-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src:
    local('Rubik Light'),
    local('Rubik-Light'),
    url(../fonts/Rubik-Light_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-Light_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-Light_[hash:base64:5].ttf) format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-300italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 300;
  src:
    local('Rubik Light Italic'),
    local('Rubik-LightItalic'),
    url(../fonts/Rubik-LightItalic_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-LightItalic_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-LightItalic_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-Regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src:
    local('Rubik'),
    local('Rubik-Regular'),
    url(../fonts/Rubik-Regular_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers*/ url(../fonts/Rubik-Regular_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-Regular_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 400;
  src:
    local('Rubik Italic'),
    local('Rubik-Italic'),
    url(../fonts/Rubik-Italic_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-Italic_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-Italic_[hash:base64:5].ttf) format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  src:
    local('Rubik Medium'),
    local('Rubik-Medium'),
    url(../fonts/Rubik-Medium_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-Medium_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-Medium_[hash:base64:5].ttf) format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-500italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 500;
  src:
    local('Rubik Medium Italic'),
    local('Rubik-MediumItalic'),
    url(../fonts/Rubik-MediumItalic_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-MediumItalic_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-MediumItalic_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  src:
    local('Rubik SemiBold'),
    local('Rubik-SemiBold'),
    url(../fonts/Rubik-SemiBold_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-SemiBold_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-SemiBold_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* Rubik-600italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Rubik';
  font-style: italic;
  font-weight: 600;
  src:
    local('Rubik SemiBold Italic'),
    local('Rubik-SemiBoldItalic'),
    url(../fonts/Rubik-SemiBoldItalic_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/Rubik-SemiBoldItalic_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/Rubik-SemiBoldItalic_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* roboto-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src:
    local('Roboto Mono'),
    local('RobotoMono-Regular'),
    url(../fonts/RobotoMono-Regular_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/RobotoMono-Regular_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/RobotoMono-Regular_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src:
    local('Open Sans Regular'),
    local('OpenSans-Regular'),
    url(../fonts/OpenSans-Regular_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/OpenSans-Regular_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/OpenSans-Regular_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src:
    local('Open Sans Italic'),
    local('OpenSans-Italic'),
    url(../fonts/OpenSans-Italic_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/OpenSans-Italic_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/OpenSans-Italic_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src:
    local('Open Sans Bold'),
    local('OpenSans-Bold'),
    url(../fonts/OpenSans-Bold_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/OpenSans-Bold_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/OpenSans-Bold_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* open-sans-700italic - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src:
    local('Open Sans Bold Italic'),
    local('OpenSans-BoldItalic'),
    url(../fonts/OpenSans-BoldItalic_[hash:base64:5].woff2) format('woff2'),
    /* Super Modern Browsers */ url(../fonts/OpenSans-BoldItalic_[hash:base64:5].woff)
      format('woff'),
    /* Modern Browsers */ url(../fonts/OpenSans-BoldItalic_[hash:base64:5].ttf)
      format('truetype'); /* Safari, Android, iOS */
}

/* Tailwind utilities layer.
 *
 * Only `@tailwind utilities` is emitted — NOT `@tailwind base` (that is preflight, which
 * carinaFoundation.js imports explicitly as Carina's prebuilt `preflight.css` so its order against
 * `globals.css` stays visible — #g9) and NOT `@tailwind components` (Carina's component CSS ships
 * prebuilt as `carina.css`, also imported there; a purged component layer was tried and rejected —
 * read #g86 before trying again).
 *
 * Processed by tailwindcss via a dedicated webpack rule (see webpack.config.js); tailwind.config.js
 * supplies the Carina preset, content scanning, and `preflight: false`.
 */
.visible {
    visibility: visible !important
}
.invisible {
    visibility: hidden !important
}
.collapse {
    visibility: collapse !important
}
.static {
    position: static !important
}
.fixed {
    position: fixed !important
}
.absolute {
    position: absolute !important
}
.relative {
    position: relative !important
}
.sticky {
    position: sticky !important
}
.z-\[2000\] {
    z-index: 2000 !important
}
.z-\[9999\] {
    z-index: 9999 !important
}
.me-\[0px\] {
    margin-inline-end: 0px !important
}
.ms-\[0px\] {
    margin-inline-start: 0px !important
}
.box-border {
    box-sizing: border-box !important
}
.block {
    display: block !important
}
.inline {
    display: inline !important
}
.flex {
    display: flex !important
}
.table {
    display: table !important
}
.table-row {
    display: table-row !important
}
.grid {
    display: grid !important
}
.contents {
    display: contents !important
}
.list-item {
    display: list-item !important
}
.hidden {
    display: none !important
}
.h-\[16px\] {
    height: 16px !important
}
.w-\[\.\.\] {
    width: .. !important
}
.w-\[100\%\] {
    width: 100% !important
}
.w-\[16px\] {
    width: 16px !important
}
.shrink {
    flex-shrink: 1 !important
}
.shrink-\[0\] {
    flex-shrink: 0 !important
}
.grow-\[0\] {
    flex-grow: 0 !important
}
.grow-\[1\] {
    flex-grow: 1 !important
}
.basis-\[auto\] {
    flex-basis: auto !important
}
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.resize {
    resize: both !important
}
.flex-wrap {
    flex-wrap: wrap !important
}
.items-stretch {
    align-items: stretch !important
}
.justify-start {
    justify-content: flex-start !important
}
.rounded {
    border-radius: var(--carina-border-radius-sm) !important
}
.border {
    border-width: var(--carina-border-width-1) !important
}
.border-\[transparent\] {
    border-color: transparent !important
}
.border-soft {
    --tw-border-opacity: 1 !important;
    border-color: color-mix(in srgb, var(--carina-border-color-soft) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important
}
.border-tertiary {
    --tw-border-opacity: 1 !important;
    border-color: color-mix(in srgb, var(--carina-border-color-tertiary) calc(var(--tw-border-opacity, 1) * 100%), transparent) !important
}
.bg-\[transparent\] {
    background-color: transparent !important
}
.bg-tertiary {
    --tw-bg-opacity: 1 !important;
    background-color: color-mix(in srgb, var(--carina-background-color-tertiary) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important
}
.from-\[--carina-background-color-tertiary\] {
    --tw-gradient-from: var(--carina-background-color-tertiary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
}
.from-\[--carina-text-color-tertiary\] {
    --tw-gradient-from: var(--carina-text-color-tertiary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
}
.from-primary {
    --tw-gradient-from: var(--carina-gradient-color-stops-primary) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important
}
.from-\[0\%\] {
    --tw-gradient-from-position: 0% !important
}
.to-\[--carina-text-color-base\] {
    --tw-gradient-to: var(--carina-text-color-base) var(--tw-gradient-to-position) !important
}
.to-\[--carina-text-color-on-primary\] {
    --tw-gradient-to: var(--carina-text-color-on-primary) var(--tw-gradient-to-position) !important
}
.to-tertiary {
    --tw-gradient-to: var(--carina-gradient-color-stops-tertiary) var(--tw-gradient-to-position) !important
}
.to-\[50\%\] {
    --tw-gradient-to-position: 50% !important
}
.bg-\[size\:200\%_100\%\] {
    background-size: 200% 100% !important
}
.bg-\[position\:0\%_0\%\] {
    background-position: 0% 0% !important
}
.pe-\[0px\] {
    padding-inline-end: 0px !important
}
.ps-\[0px\] {
    padding-inline-start: 0px !important
}
.uppercase {
    text-transform: uppercase !important
}
.italic {
    font-style: italic !important
}
.text-\[--carina-background-color-tertiary\] {
    color: var(--carina-background-color-tertiary) !important
}
.text-\[transparent\] {
    color: transparent !important
}
.text-on-danger {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-on-danger) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.text-on-primary {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-on-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.text-on-tertiary {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-on-tertiary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.text-on-warning {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-on-warning) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.text-primary {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-primary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.text-tertiary {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-tertiary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.underline {
    -webkit-text-decoration-line: underline !important;
            text-decoration-line: underline !important
}
.outline {
    outline-style: solid !important
}
.ring {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--carina-ring-width-2) + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important
}
.blur {
    --tw-blur: blur(8px) !important;
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}
.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color !important
}
.transition-\[background-color\] {
    transition-property: background-color !important
}
.transition-\[background-position\] {
    transition-property: background-position !important
}
.duration-300 {
    transition-duration: var(--carina-transition-duration-300) !important
}
.\[background-clip\:text\] {
    -webkit-background-clip: text !important;
            background-clip: text !important
}
.before\:pointer-events-none::before {
    content: var(--tw-content) !important;
    pointer-events: none !important
}
.before\:absolute::before {
    content: var(--tw-content) !important;
    position: absolute !important
}
.before\:-inset-px::before {
    content: var(--tw-content) !important;
    inset: calc(var(--carina-spacing-px) * -1) !important
}
.before\:rounded-\[inherit\]::before {
    content: var(--tw-content) !important;
    border-radius: inherit !important
}
.before\:bg-\[linear-gradient\(to_right\2c var\(--carina-background-color-tertiary\)\2c var\(--carina-border-color-base\)\)\]::before {
    content: var(--tw-content) !important;
    background-image: linear-gradient(to right,var(--carina-background-color-tertiary),var(--carina-border-color-base)) !important
}
.before\:p-px::before {
    content: var(--tw-content) !important;
    padding: var(--carina-spacing-px) !important
}
.before\:content-\[\'\'\]::before {
    --tw-content: '' !important;
    content: var(--tw-content) !important
}
.before\:\[-webkit-mask-composite\:xor\]::before {
    content: var(--tw-content) !important;
    -webkit-mask-composite: xor !important
}
.before\:\[mask-clip\:content-box\2c border-box\]::before {
    content: var(--tw-content) !important;
    -webkit-mask-clip: content-box,border-box !important;
            mask-clip: content-box,border-box !important
}
.before\:\[mask-composite\:exclude\]::before {
    content: var(--tw-content) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important
}
.before\:\[mask-image\:linear-gradient\(\#fff\2c \#fff\)\2c linear-gradient\(\#fff\2c \#fff\)\]::before {
    content: var(--tw-content) !important;
    -webkit-mask-image: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff) !important;
            mask-image: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff) !important
}
.after\:pointer-events-none::after {
    content: var(--tw-content) !important;
    pointer-events: none !important
}
.after\:absolute::after {
    content: var(--tw-content) !important;
    position: absolute !important
}
.after\:bottom-\[calc\(var\(--carina-spacing-2\)-1px\)\]::after {
    content: var(--tw-content) !important;
    bottom: calc(var(--carina-spacing-2) - 1px) !important
}
.after\:bottom-\[clamp\(6px\2c calc\(6px_\+_\(100\%_-_40px\)\/3\)\2c 14px\)\]::after {
    content: var(--tw-content) !important;
    bottom: clamp(6px, calc(6px + (100% - 40px) / 3), 14px) !important
}
.after\:end-6::after {
    content: var(--tw-content) !important;
    inset-inline-end: var(--carina-spacing-6) !important
}
.after\:start-6::after {
    content: var(--tw-content) !important;
    inset-inline-start: var(--carina-spacing-6) !important
}
.after\:start-\[calc\(50\%_-_clamp\(9px\2c calc\(9px_\+_\(100\%_-_40px\)\/8\)\2c 12px\)\)\]::after {
    content: var(--tw-content) !important;
    inset-inline-start: calc(50% - clamp(9px, calc(9px + (100% - 40px) / 8), 12px)) !important
}
.after\:h-0\.5::after {
    content: var(--tw-content) !important;
    height: var(--carina-spacing-0-5) !important
}
.after\:w-\[clamp\(18px\2c calc\(18px_\+_\(100\%_-_40px\)\/4\)\2c 24px\)\]::after {
    content: var(--tw-content) !important;
    width: clamp(18px, calc(18px + (100% - 40px) / 4), 24px) !important
}
.after\:origin-left::after {
    content: var(--tw-content) !important;
    transform-origin: left !important
}
.after\:scale-x-0::after {
    content: var(--tw-content) !important;
    --tw-scale-x: var(--carina-scale-0) !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.after\:scale-x-100::after {
    content: var(--tw-content) !important;
    --tw-scale-x: var(--carina-scale-100) !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.after\:bg-\[--carina-background-color-tertiary\]::after {
    content: var(--tw-content) !important;
    background-color: var(--carina-background-color-tertiary) !important
}
.after\:bg-\[--carina-text-color-primary\]::after {
    content: var(--tw-content) !important;
    background-color: var(--carina-text-color-primary) !important
}
.after\:bg-\[--carina-text-color-tertiary\]::after {
    content: var(--tw-content) !important;
    background-color: var(--carina-text-color-tertiary) !important
}
.after\:transition-transform::after {
    content: var(--tw-content) !important;
    transition-property: transform !important
}
.after\:duration-300::after {
    content: var(--tw-content) !important;
    transition-duration: var(--carina-transition-duration-300) !important
}
.after\:content-\[\'\'\]::after {
    --tw-content: '' !important;
    content: var(--tw-content) !important
}
.active\:bg-tertiary-pale:active {
    --tw-bg-opacity: 1 !important;
    background-color: color-mix(in srgb, var(--carina-background-color-tertiary-pale) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}
.active\:text-on-tertiary-pale:active {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-on-tertiary-pale) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:bg-\[transparent\]:hover:not(.carina-button--disabled) {
    background-color: transparent !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:bg-\[radial-gradient\(var\(--carina-background-color-tertiary\)_0\%\2c _var\(--carina-background-color-tertiary-active\)_100\%\)\]:hover:not(.carina-button--disabled) {
    background-image: radial-gradient(var(--carina-background-color-tertiary) 0%, var(--carina-background-color-tertiary-active) 100%) !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:bg-\[position\:99\%_100\%\]:hover:not(.carina-button--disabled) {
    background-position: 99% 100% !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:text-on-tertiary:hover:not(.carina-button--disabled) {
    --tw-text-opacity: 1 !important;
    color: color-mix(in srgb, var(--carina-text-color-on-tertiary) calc(var(--tw-text-opacity, 1) * 100%), transparent) !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:hover\:after\:scale-x-100:hover:not(.carina-button--disabled)::after {
    content: var(--tw-content) !important;
    --tw-scale-x: var(--carina-scale-100) !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:active\:bg-surface-active:active:not(.carina-button--disabled) {
    --tw-bg-opacity: 1 !important;
    background-color: color-mix(in srgb, var(--carina-background-color-surface-active) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:active\:bg-tertiary-active:active:not(.carina-button--disabled) {
    --tw-bg-opacity: 1 !important;
    background-color: color-mix(in srgb, var(--carina-background-color-tertiary-active) calc(var(--tw-bg-opacity, 1) * 100%), transparent) !important
}
.\[\&\:not\(\.carina-button--disabled\)\]\:active\:after\:scale-x-100:active:not(.carina-button--disabled)::after {
    content: var(--tw-content) !important;
    --tw-scale-x: var(--carina-scale-100) !important;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important
}

/* The hotel photo grid, and the lightbox dialog it opens. */

.gQmVFg0K6UcvpKquREDw {
  display: grid;
  grid-template-columns: 230px 230px 230px 230px;
  grid-template-rows: 257px 170px;
  gap: var(--carina-spacing-2);
}

.gQmVFg0K6UcvpKquREDw figure {
  margin: 0;
}

/*
 * Each tile is a real <button>: it opens the lightbox, so it has to be focusable and operable from
 * the keyboard (#g64). The UA resets keep it rendering as a bare <img> would — the button fills the
 * figure, which is what carries the grid placement.
 */
.aPDKFrW5HdiMAAT5QFES {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Carina's own convention for a focus ring: keep the UA outline, recolour it. */
.aPDKFrW5HdiMAAT5QFES:focus-visible {
  outline-color: var(--carina-border-color-primary-focus);
}

.HIs5Up3E7WP170ZbcvU6 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The button is the click target, so the image must not swallow the pointer or the hover. */
  display: block;
}

.sm99CPCAOc316BTLlbbY {
  position: relative;
}

/* A <span>, not a <div> — it lives inside the tile button, which may only contain phrasing
   content. `position: absolute` makes it a block box regardless. */
.aKAI6_1Stztx9P1MzWqk {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* Centres the "+ N" count on the tile. Not `position: relative; top: 45%; left: 45%`: that
     offsets the span's top-left corner rather than centring the text, and inside a <button> the
     count picks up the UA `text-align: center`, so it centres inside a full-width box that is then
     shifted 45% right, landing hard against the tile's right edge. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* A 50% black scrim over a PHOTO — a ground that never rethemes — so the fill must be theme-stable,
     not a semantic scrim token (`--carina-background-color-scrim-inverse` flips light in dark mode).
     Built the way the DSM builds its own scrims: a grayscale primitive mixed to a Carina opacity step. */
  background: color-mix(in srgb, var(--carina-colors-grayscale-100) calc(var(--carina-opacity-50) * 100%), transparent);
}

/* Positioning is the flex parent's job now — see `.overlay`. */
.V0JVXntvuindJYg1xWRv {
  /* On the theme-stable scrim above, so the text must be theme-stable too: `on-primary` flips to
     black in dark mode and vanishes into the scrim (#g81). `grayscale-0` is white in both palettes. */
  color: var(--carina-colors-grayscale-0);
  font-size: var(--carina-font-size-body-lg);
}

/* ---- lightbox ---- */

.bNPVpGN2BrAHPbyNnI9y {
  text-align: center;
}

/*
 * Wraps the image so the arrows can be positioned against the PHOTO rather than the panel, and so
 * the photo itself is centred.
 *
 * ⚠ `margin-inline: auto` is load-bearing. This is a fixed-width block, and `text-align: center` on
 * the parent does not centre a block child — it only centres inline content (#g61). Without the
 * auto margins the photo sits flush against the left of the content box and dumps all the leftover
 * width on the right.
 *
 * Carina's `lg` panel is 800px and `.carina-scroll-view-with-bars__scroll-view` adds
 * `--carina-spacing-4` (16px) of inline padding, so the content box is 768px — centring 760px in it
 * gives 4px, plus that 16px, for 20px of gutter each side. `max-width: 100%` keeps it shrinking on
 * narrow viewports instead of overflowing.
 */
.qEmfjIr7oj3ImMlrOeLh {
  position: relative;
  width: 760px;
  max-width: 100%;
  height: 450px;
  margin-inline: auto;
}

.RsfzuhgP43vmJRQfHe9M {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Positioned against `.imageFrame`, so the arrows sit just inside the photo's edges. Anchoring them
 * to the panel instead leaves the forward arrow stranded out in the gutter (#g63).
 *
 * White, because they overlay the PHOTO and never the panel. If white ever looks unusable here, the
 * photo is not centred — fix the frame, not the colour (#g62). Same token as `.imageCount` above
 * (white over image content), and the same choice ErrorBanner / InfoBanner make for white-on-dark.
 */
.NXhleSRQyiQxEbfJ8yO5 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--carina-text-color-on-primary);
}

.FFZKP2Mwk7MlWU8jPLzh {
  left: var(--carina-spacing-2);
}

.cj9_jtcUgc3H5R441WZI {
  right: var(--carina-spacing-2);
}

.bdaqU6DyzA5oPfCypKuw {
  display: block;
  padding-top: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* ---- grid placements ----
 * `getItemProp()` picks one of these by name for each figure, so the six keys below and the
 * `imageProps` array in ImageGrid.js must stay in step. Accessed as `styles['item-a']` because
 * the names are hyphenated. */

.qnV_RQLNKrp9Fsy4IUl6 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

.kNZXfCVjHQtkHYN483fA {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

.LNf0y_yHQ6OqxFy5OGeA {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
}

.axhF9xLtaQv2JP4y0jVB {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
}

.g6VlVYKyNUNLmJxY5wi_ {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.UCplDO79YzxnnVxGpBmY {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

.uHSS2In90srQc8tZpxQB {
  display: flex;
  justify-content: flex-end;
  padding: var(--carina-spacing-4) var(--carina-spacing-4) 0;
}

/* The "Amenities" section on the Select Rooms page: the hotel's amenities dealt into three
   columns. */

.baywkQRrpPUlGDdJK1k4 {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  /* A light hairline, so `border-color-soft` rather than `-base`, which reads as black at 1px (#g49). */
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-2);
}

/* The same heading treatment as SelectRoomDescription, so the two headers must stay in step.
   Declared explicitly because this is an <h3> (#g10). */
.Sa9pkdSmricjxDDXc6Mz {
  font-size: var(--carina-font-size-header-3);
  font-weight: normal;
  color: var(--carina-text-color-heading);
  padding-bottom: var(--carina-spacing-2);
}

.gRSjS986r4ET_x993wh2 {
  display: flex;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.Jtg0FbOOvvc9z9IXi7go {
  /* Off-grid and bespoke to this three-column layout; tokens.md §2.5. */
  padding-right: 130px;
}

.L2Ezav5XWQGm3_8bkSpq {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
  padding-bottom: var(--carina-spacing-4);
}

.zG2sPBRvnzlxCGXf9v0a {
  position: relative;
}

.Tx0luHnZ7FsPl7LpODtK {
  position: relative;
  height: 100%;
}

.PYwqwQggoqgbfjNl_ZKA {
  flex-grow: 0;
  background-color: var(--carina-background-color-surface-alt);
  width: 260px; /* fixed thumbnail column; off-grid on purpose, tokens.md §2.5 */
  height: 100%;
  object-fit: cover;
  border-radius: 3px; /* off-grid; between --carina-border-radius-xs (2px) and -sm (4px) */
  display: flex;
  justify-content: center;
  align-items: center;
}

.CueqZYx5XKVhn5hoX4qw {
  flex-grow: 0;
  width: 260px; /* fixed thumbnail column; off-grid on purpose, tokens.md §2.5 */
  height: 100%;
  object-fit: cover;
  border-radius: 3px; /* off-grid; between --carina-border-radius-xs (2px) and -sm (4px) */
}

/* Glyph colours live on the icons' `color` PROPS in the JS, not here: @cvent/carina-icon ignores
   CSS colour and defaults to black (#g68). The chevrons sit over a PHOTO — a ground that never
   rethemes — so they take the theme-stable primitive `--carina-colors-grayscale-100`; the
   placeholder glyph sits on `surface-alt`, which does retheme, so it takes `text-color-base`
   (tokens.md §2.6). */
.wNV3UNYNqYtUL5_dpm30 {
  /* Hook for the test id; the glyph's colour is its prop (see above). */
}

.zApCcn92Tyxbmvq903tX {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  left: 0;
}

.N44xpj6Qw3BYExT3InJ7 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  right: 0;
}
.ZT4vHT8s67d_O_gIaQBz {
  display: flex;
  /* Border deliberately takes the *background* warning token so it stays matched to the
     icon chip below. --carina-border-color-warning is #986700 and would draw a dark
     outline around a bright chip. */
  border: 1px solid var(--carina-background-color-warning);
  margin-bottom: var(--carina-spacing-4);
}

.RAeBpIgaobx3aGMdNDPC {
  flex-grow: 0;
  padding: var(--carina-spacing-2);
  color: var(--carina-text-color-on-warning);
  background-color: var(--carina-background-color-warning);
  display: flex;
  align-items: center;
}

.h1f7HQt0j_wFJo9Q7ElM {
  flex-grow: 1;
  margin: var(--carina-spacing-4);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
}

.tMqYok7IO5d6LyZiCImt {
  margin-left: 1em;
  list-style: none;
  padding: 0;
}

.CTf4pwNbdcsC_sLzQlA0 {
  display: flex;
}

.CTf4pwNbdcsC_sLzQlA0::before {
  content: "•";
  padding-right: var(--carina-spacing-4);
}

.CTf4pwNbdcsC_sLzQlA0:not(:first-child) {
  margin: var(--carina-spacing-4) 0 0 0;
}

.fwcjxPe86nkAhsEZHIZn {
  display: inline-grid;
  grid-template-columns: 1fr 150px; /* off-grid on purpose; tokens.md §2.5 */
  width: 100%;
}

.PF46d8aj4mGF3rHmpK7y {
  float: right;
  flex-grow: 0;
  flex-shrink: 0;
  color: var(--carina-text-color-primary);
  text-decoration: none;
}

.n_UjoLAukOujIvgEItZE {
  flex-grow: 1;
}
/* A filled brand banner, so the fill and border take the brand background/border tokens, not a
   text token (tokens.md §2.3). The icon takes `currentColor` from `.infoIconWrapper`. */
.lxFo2QDvekUPpZ90wDt1 {
  display: flex;
  border: 1px solid var(--carina-border-color-primary);
  margin-bottom: var(--carina-spacing-4);
}

.Btz72_MJO01r1H7vaym5 {
  flex-grow: 0;
  padding: var(--carina-spacing-3) var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-4);
  color: var(--carina-text-color-on-primary);
  background-color: var(--carina-background-color-primary);
  display: flex;
  align-items: flex-start;
}

.i_RrJFuP6EJZk6pgIYdJ {
  flex-grow: 1;
  margin: var(--carina-spacing-4);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
}
.SQ2Oz7lYtrnJpONRnDM2 {
  display: flex;
  border: 1px solid var(--carina-border-color-danger);
  margin-bottom: var(--carina-spacing-4);
}

.oD1G0yfJtuwVsMeF4jG6 {
  flex-grow: 0;
  padding: var(--carina-spacing-3) var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-4);
  color: var(--carina-text-color-on-danger);
  background-color: var(--carina-background-color-danger);
  display: flex;
  align-items: flex-start;
}

.sBxOaUL4SciSrOCvCNJz {
  flex-grow: 1;
  margin: var(--carina-spacing-4);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
}
.n_O8OGeY2fFo7ehpEhtP {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-radius: var(--carina-border-radius-lg);
  padding-top: var(--carina-spacing-6);
  padding-bottom: var(--carina-spacing-6);
  /* Literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier); tokens.md §6. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  margin: var(--carina-spacing-2) 0 var(--carina-spacing-8) 0;
  background-color: var(--carina-background-color-surface);
}

.GhACrcCfGo4E9DtXzCsD {
  display: flex;
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding-bottom: var(--carina-spacing-4);
  margin: 0 var(--carina-spacing-6) var(--carina-spacing-4);
}

.T8uXr3abw3Yygme6fhgK {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
}

.bvfWRp0UwxX8BEytU0gt {
  font-size: var(--carina-font-size-header-5);
  font-weight: bold;
}

/* "Room added" is a Carina `StatusLabel` (`positive`, `sm`, pill). Only the gap to the room name is
   ours; the component owns the rest. (`margin` is safe on a Carina root: carina.css sets none, so
   nothing ties — #g19.) */
.sQNQAaHagnzZTIymF6nq {
  margin-left: 1em;
}

.mRje8wiGvolOgYgzXQQk {
  flex-grow: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
}

.wYKcX_PFYbSz6grc87tP {
  margin-right: var(--carina-spacing-2);
  font-size: var(--carina-font-size-body-lg);
  font-weight: bold;
}

.VRU9gGZm7gDDz3A3mizt {
  font-size: var(--carina-font-size-body-sm);
}

.q0IT26R1Zv02A2SP3DZQ {
  font-size: var(--carina-font-size-body-sm);
}

.sx5ZTEr4lAykTYmOWvZr {
  display: inline-block;
  font-size: var(--carina-font-size-body-md);
}

.hNI1yRNQOVriwZ3rjR0a {
  display: inline-block;
  padding: 0 14px; /* off-grid on purpose; tokens.md §2.5 */
  font-size: var(--carina-font-size-body-md);
}

.JSBYXEo3rx2SDgoRJzqY {
  display: flex;
  flex-flow: column;
  padding: 0 var(--carina-spacing-6);
}

.caJ6avVfmADc9CngBpfJ {
  display: flex;
}

.poKOvQeHNPBcj0D_2v2X {
  margin-left: var(--carina-spacing-6);
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}

.GkkOU6Do8Yg7VcKVh3by {
  margin-bottom: var(--carina-spacing-2);
}

.LFFSB5VnehXI1m3bh03l {
  padding-left: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  font-size: var(--carina-font-size-body-sm) !important;
}

/* Carina's `ghost` paints a `surface-hover` fill on hover; this link-styled button must have no
   background in any state, like the Quick view buttons. `!important` for the same reason as the
   padding above: Carina's rule is variant-qualified (0-5-0) and emitted after the modules, so a
   plain override ties and loses (#g19). Same rule in HotelListItem.module.css,
   HotelPinPopover.module.css and ReviewSubmit.module.css — the four move together. */
.LFFSB5VnehXI1m3bh03l:hover {
  background-color: transparent !important;
}

.TT5pEqQayaVJROYEf5Kd {
  max-width: 120px; /* off-grid: the spacing scale has no 120px step */
}

/* Carina sets the input transparent, which would show the grey card through it */
.TT5pEqQayaVJROYEf5Kd .carina-textbox__input {
  background-color: var(--carina-background-color-surface);
}

/* Exceeding a room threshold is a warning, not a hard error, so Carina's danger
   hairline is recolored. !important because their rule is 0-2-0 and carina.css
   loads after the CSS modules — an equal-specificity override would silently lose. */
.TT5pEqQayaVJROYEf5Kd .carina-input-fieldset--error {
  border-color: var(--carina-border-color-warning) !important;
}

.TT5pEqQayaVJROYEf5Kd .carina-textbox__container--error:focus-within > fieldset {
  outline-color: var(--carina-border-color-warning) !important;
}

.GJiduPEvNH5w6uhC0uxl {
  --max-lines: 3;
  --lh: 1.3em;
  position: relative;
  display: inline-block;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
  font-size: var(--carina-font-size-body-md);
}

.GJiduPEvNH5w6uhC0uxl::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1em;
  left: 0;
  pointer-events: none;
  /* Fades the clamped copy into the card, so it must track the card's own surface token. */
  background-image: linear-gradient(to bottom, transparent, var(--carina-background-color-surface) 90%);
  width: 100%;
  bottom: 0;
}

.I_g1RCsvbzrgp3VK0c5E {
  display: block;
  border-radius: 3px; /* off-grid; between --carina-border-radius-xs (2px) and -sm (4px) */
  padding: var(--carina-spacing-4) var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-4);
  background-color: var(--carina-background-color-surface-alt);
}

.bMILABRwRdOJzna5tVfX {
  margin-top: var(--carina-spacing-6);
  border-top: 1px solid var(--carina-border-color-soft);
  padding: 0 var(--carina-spacing-6);
}

.qDxjXVFSI5BeJxWKoHJb {
  border-bottom: 1px solid var(--carina-border-color-soft);
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-2);
}

.VFW8zaYlM2hGue5BygPH {
  display: flex;
}

.M_HxABJcIovAwPJ1jGYF {
  font-size: var(--carina-font-size-header-3);
}

.XZlwb204WHZ737iVGZe3 {
  flex-grow: 1;
}

/* Body of the 'Show more' room dialog, rendered inside the shared ViewDialog. */

.A7vADTwqRJR07UHzqvDe {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  width: 100%;
}

.FlhHR4TXQfaoa37AQeni {
  padding-bottom: var(--carina-spacing-6);
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* ⚠ Centring is FLEX here, and must stay flex. The inline-block-helper trick depends on an INLINE
   `<img>`, and Carina's preflight sets `img { display: block }` (#g80), which leaves the photo
   flush against the left of the grey letterbox. Same defect family as HotelBanner.module.css
   `.imageSection`. Flex does not care what `display` the child has. */
.Pk6wlK2zmqHvopRpnEIh {
  width: 100%;
  /* The letterbox behind an image narrower than the dialog. */
  background-color: var(--carina-background-color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}

.SIQN4fsVnKlOkrfKZeMp {
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-6);
  border-bottom: 1px solid var(--carina-border-color-soft);
}

.YSk85MFPAE5Sb2Z4UqNg,
._VW0YCIIzXOJx2uBZlbb {
  font-size: var(--carina-font-size-header-5);
  color: var(--carina-text-color-base);
}

.ZUF564y3UJFJl6uWgy9K,
.MawiJbdwfMzcji5M0tBh {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.ZSPDB_aSjNrbpa8WanU0 {
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-6);
}

.DDsQ44IdVAlMFGm8frGp {
  display: flex;
  flex-direction: row;
  vertical-align: middle;
}

._VW0YCIIzXOJx2uBZlbb {
  vertical-align: middle;
}

.AE_vSiL8eKd7t_toGa6G {
  text-align: right;
  margin-right: 0;
  margin-left: auto;
}

.dIL9oKyxkjjXeN_y38P0 {
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-6);
}

.FKROJvAjFibUnwqXHTRT {
  max-width: 500px;
  max-height: 375px;
}

/* The room-availability table inside the 'Show more' dialog — the container, the scroll wrapper and
 * the <table> itself. Row styling lives in `TableRow.module.css` as that component's `plain`
 * variant, which this table selects with `variant="plain"` (#g58).
 */

.xzngsk0PqUZqJgkTu04c {
  position: relative;
  overflow-x: hidden;
}

.eZxzkh_1AJBtpl1P5Mjs {
  overflow-x: scroll;
}

.cj2nG5S0jZUAyEXkJNYp {
  width: 100%;
  /* A light hairline, so `border-color-soft` rather than `-base` (#g49). */
  border: solid 1px var(--carina-border-color-soft);
  border-collapse: collapse;
}

/* The contact-information form card — left column of the Contact Info page.

   Carina's Textbox has no size prop — width is the caller's job — so the four field widths are
   classes below, applied to the Carina container via `:global()` (#g13). They are deliberate
   literals, not spacing values: they sit off the 4px grid, and changing them would resize every
   field.

   ⚠ `.formContainer` is `width: min-content`, so the row widths are what size this whole column.
   If a field's width class stops applying, the column collapses rather than overflowing — check
   here first if the form looks narrow. */

.jBjyKWVvgh2Wa9mEIjFP {
  display: flex;
  border-radius: var(--carina-border-radius-lg);
  /* Kept literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier). Same value as RequestSummary.module.css
     `.cardWrapper` — the card beside this one. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  padding: var(--carina-spacing-4);
  height: fit-content;
}

/* No background on purpose: the card takes the section's ground, and the shadow alone marks its
   edge. */

.NIukkdZL6_u0xmX64Dr2 {
  display: flex;
  flex-direction: column;
  padding-left: var(--carina-spacing-8);
  width: min-content;
}

/* Every field row except the last carries the inter-row gap. Written as a child selector because
   the rows are generated (three fixed rows, or N composite rows) and the last one varies. */
.NIukkdZL6_u0xmX64Dr2 > div:not(:last-child) {
  display: flex;
  padding-bottom: var(--carina-spacing-4);
}

/* Gap between the two fields sharing a row. */
.vq59SmFOQekxKSCyl0_p {
  padding-left: var(--carina-spacing-4);
}

.grB0zUIWt_0dUxVADyBs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The form's "Contact Information" heading. */
.bOwfWHk0lXt6nBd09Z6i {
  font-size: var(--carina-font-size-header-3);
  font-weight: normal;
  color: var(--carina-text-color-heading);
}

/* Field widths. `:global()` reaches Carina's own container element, which is the box that
   carries the width (#g13, #g19 — a plain class here would lose to carina.css on source order). */
.HyRlEi_9xC85lgMODVQ4 .carina-textbox__container {
  width: 7.8125rem;
}

.EuZXAteV63olnRn6a2r2 .carina-textbox__container {
  width: 14.0625rem;
}

.eVD5A0wW4rzubJ9CnoXw .carina-textbox__container {
  width: 20.3125rem;
}

.DOej6djl4GvYWuEhYz5I .carina-textbox__container,
.DOej6djl4GvYWuEhYz5I .carina-dropdown__trigger {
  width: 100%;
}

/* One generated row of composite organization fields. Its 32px row gap is deliberately twice the
   16px the fixed rows get from `.formContainer > div:not(:last-child)`. */
.QJgZEaPjopfja971P3hC {
  display: flex;
  width: 100%;
  padding-bottom: var(--carina-spacing-8);
  align-items: flex-start;
}

/* First column grows to fill the row; the rest stay at their field width. */
.tzVbjKd74ksKFn8ogsnp {
  flex: 1;
}

.I4wmht3gZyxiRrk3KzGw {
  flex: 0;
}

/* Two-column body of the Contact Info page: the contact form on the left, RequestSummary on the
   right. Rendered by ContactInfoPage.js, which ContactInfoPageWidget wraps.

   (Not to be confused with src/pages/ContactInfoPage.js, which is the static *page* composition —
   the sections and their widget order. This file styles the widget's own body.) */

.sg6Pah9l54p6O48HYbcI {
  display: flex;
  /* Off-grid on purpose; tokens.md §2.5. */
  padding: 15px;
  flex: 1 1 auto;
  margin-left: var(--carina-spacing-4);
  margin-right: var(--carina-spacing-4);
}

/* The page heading above the form. Declared explicitly because this is an <h2> and the carina.css
   preflight beats `:where()` typography (#g10); no margin is declared (#g53). */
.plP4ubD_I7N2gFnrplXl {
  font-size: var(--carina-font-size-header-2);
  font-weight: normal;
  color: var(--carina-text-color-heading);
}

.y_xKjOsvEcARGCpfChOP {
  padding-bottom: var(--carina-spacing-4);
}

/* The instructional sentence under the heading — body copy, not a heading. */
.oWGStKqcAqaoHf1v7nFQ {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* The Review & Submit card on the review page: one block per selected hotel (HotelCard on the left,
   SelectionSummary rows on the right), then the estimated grand total. */

.kvcn9UAIjKMUEkXtTGmq {
  /* Literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier); tokens.md §6. Same value as
     RequestSummary.module.css `.cardWrapper` and RoomListItem.module.css `.card`. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  border-radius: var(--carina-border-radius-lg);
  padding: var(--carina-spacing-4);
  margin-top: var(--carina-spacing-4);
  margin-bottom: var(--carina-spacing-4);
}

.b_IZKKio9H9HPWuspUYb {
  display: flex;
  flex-direction: column;
}

/* The 40% column is the hotel card; `.totalSectionWrapper` below indents the grand total by the
   same 40% so it lines up under the summary column. */
.vWZwRdILey402JjM45w7 {
  display: grid;
  grid-template-columns: 40% 1fr;
  /* A light hairline, so `border-color-soft` (#g49). */
  border-bottom: 1px solid var(--carina-border-color-soft);
}

.j8_W4RTCTi0U39EeZGj5 {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
}

.hrw5KMBGj9F_hZZeaAlB {
  flex-grow: 1;
}

.xltJ20aNFqa89_IGJsMM {
  display: flex;
  margin-top: var(--carina-spacing-2);
  border: 1px solid var(--carina-border-color-danger);
}

/* The filled red gutter holding the warning glyph. `color` is here for documentation and for the
   `alwaysUseWith` pairing only — @cvent/carina-icon glyphs take their colour as a PROP and a CSS
   `color` never reaches them (#g68), so ReviewSubmit.js passes the token explicitly. */
.Lwa08z1EiNJ0vLy3sGj8 {
  margin-right: var(--carina-spacing-2);
  padding: var(--carina-spacing-4) var(--carina-spacing-2) var(--carina-spacing-2)
    var(--carina-spacing-2);
  background-color: var(--carina-background-color-danger);
  color: var(--carina-text-color-on-danger);
}

.PgpV58L1UEq8slirr68w {
  padding: var(--carina-spacing-4);
}

.D45xkMJEjJQ37tz9Awcs {
  font-size: var(--carina-font-size-body-lg);
  color: var(--carina-text-color-heading);
}

/* Right-aligns the edit link inside `.errorContainer`, a flex container, so the `auto` margin is
   doing real work. */
.A7aT_ZXZauBWY0pnA0Py {
  margin: auto 0 auto auto;
  padding-right: var(--carina-spacing-4);
}

/* Carina's `ghost` paints a `surface-hover` fill on hover; this link-style button has no background
   in any state.
   ⚠ `!important` is deliberate here, not laziness. Carina's rule is *variant*-qualified:
   `.carina-button--brand.carina-button--ghost:hover:not(--disabled):not(--phase2)` = 0-5-0, and
   carina.css is emitted after the CSS modules, so a tie loses (#g19). This is the same rule
   HotelListItem, HotelList and HotelPinPopover carry; all four must move together. */
.A7aT_ZXZauBWY0pnA0Py .carina-button:hover {
  background-color: transparent !important;
}

.hYZV_ufnMxiZDgYFkN7O {
  display: flex;
  flex-direction: column;
  margin: var(--carina-spacing-2) 0;
}

.Lq76gzj7GeSTiMf6LdRN {
  display: flex;
  flex-direction: column;
  margin: var(--carina-spacing-2) 0;
  border-top: 1px solid var(--carina-border-color-soft);
}

.z_VoDpGb7YK5Q_qN6bHh {
  display: flex;
  flex-direction: column;
  margin-left: 40%;
}

.RiJqdqx2vtRLLvSaiuYS {
  margin-top: var(--carina-spacing-2);
}

/* The matching children are the `.taxFeeEntry` rows. */
.HzcjFXyX7l8Rd7boPRm1 div:not(:first-child) {
  padding-top: var(--carina-spacing-2);
}

.rCQjb5qrERjExiFQ6Qgl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Margin, not padding: this block has no background or border of its own, `.totalSection` is a
   flex column so nothing collapses, and it then matches `.taxInformationContainer` right above it. */
.r78dDou8Py92WWyWXstO {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
  margin: var(--carina-spacing-4) 0;
}

.ES7LADciUSEiXaGZ5yJT,
.oPDHVDUAnwp_E_jWDbsG {
  display: flex;
  font-size: var(--carina-font-size-body-lg);
  font-weight: bold;
  color: var(--carina-text-color-heading);
}

/* Vertical spacing as margin, matching `.taxInfo`. The two values differ, so they cannot share the
   rule above: the sub total carries 16px of its own above it, which is what keeps it off the
   `.totalSection` hairline when the hotel has no tax policy, and stacks with `.taxInfo`'s 16px to
   the ~32px gap below the policy when it does. The grand total sits in `.totalSectionWrapper` and
   takes the smaller 8px. */
.ES7LADciUSEiXaGZ5yJT {
  margin: var(--carina-spacing-4) 0 var(--carina-spacing-2) 0;
}

.oPDHVDUAnwp_E_jWDbsG {
  margin: var(--carina-spacing-2) 0;
}

.aiwfX4corqEKpBPfZJrb,
.z8E0UDsNi8wpGx5_PbCB {
  margin-right: 0;
  margin-left: auto;
}

.sOJ72ddryCwu30EU3Z7d {
  margin-bottom: var(--carina-spacing-6);
}

/* The per-hotel card in the left column of the Review & Submit block: image, name, address, the
   earliest check-in / latest check-out pair, and the two actions. */

.OV1ZCPPbSdRMq_KPQAH4 {
  display: flex;
  flex-direction: column;
  background-color: var(--carina-background-color-surface);
  border-radius: var(--carina-border-radius-lg);
  padding: var(--carina-spacing-4);
}

.uqcf6RfbLyIP8CCLjmkQ {
  display: flex;
}

.Ec7UUcqPYZCMy_hrr0L2 {
  width: 100px;
  height: 75px;
  /* Off the radius scale (xs 2px, sm 4px); off-grid on purpose, tokens.md §2.5. */
  border-radius: 3px;
  margin-right: var(--carina-spacing-2);
}

.FesbYZhAwHRyBOP_SUg9 {
  font-size: var(--carina-font-size-header-5);
  color: var(--carina-text-color-base);
}

.yRBo5iR4Y0DH6MJUQ22W {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* `line-height: 1` so the second address line sits tight under the first. */
.yV8VuOpPAlVP8fG4wuOu {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
  line-height: var(--carina-line-height-none);
}

.TsrUVStZQHqCbbBjQx96 {
  padding-top: var(--carina-spacing-4);
}

/* Both columns float — `.checkInCheckOutContainer` is not a flex or grid container, so the floats
   are load-bearing. */
.et2mTNiaI7JdA6S0nA_b {
  float: left;
}

.B87veoTIw1KIz8TsuUbp {
  float: left;
  margin-left: var(--carina-spacing-16);
}

.v9hPBOi0bckXkZK75x74 {
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.m29MMJQYocNjtxROlV4_ {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.vkmL4jIgrKDgX_BKA4DW {
  padding-top: var(--carina-spacing-4);
}

/* Carina's `size` prop cannot give an 18px label — `md` and `lg` are both body-md; the prop only
   moves padding and min-height (#g19). So the size is set here, scoped through this wrapper to beat
   Carina's own 0-1-0 rule on source order. Same as RequestSummary's "add another hotel" button. */
.vkmL4jIgrKDgX_BKA4DW > .carina-button {
  font-size: var(--carina-font-size-body-lg);
}

/* `.carina-button` sets `margin-right: 0`, so this has to out-specify it as well as sit in the
   right place. */
.vkmL4jIgrKDgX_BKA4DW > .carina-button:not(:last-child) {
  margin-right: var(--carina-spacing-4);
}

/* One room type inside a hotel's block on the Review & Submit card, plus its per-night inventory
   rows. The close sibling of RequestSummary/RoomTypeItem.module.css — same four-column shape, same
   disclosure toggle, same warning glyph — but a CSS grid here rather than a flex row, which is why
   two details below differ from that file. */

.OD9MSoRAAaeuNZaj2fRr {
  display: flex;
  flex-direction: column;
  padding-top: var(--carina-spacing-4);
}

.tti2qfn3yxiHypU1tlRp {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1.7fr;
  align-items: center;
  margin-bottom: var(--carina-spacing-4);
}

.qBPlyGP40wmdjrZicWi5 {
  font-size: var(--carina-font-size-body-lg);
  color: var(--carina-text-color-heading);
}

.Eq1AIgkBJZv4Vh4CVnbe {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* The first grid column, used by both row kinds: the disclosure toggle on the header row and the
   warning-glyph cell on the night rows. `position: relative` anchors `.warningIcon` below.

   ⚠ In the night rows this cell holds ONLY the absolutely positioned glyph, so it has zero height —
   which is exactly the shape that put RoomTypeItem's triangles half an icon too low. It is harmless
   here because this row is a GRID with `align-items: center`: a zero-height item is centred in the
   row, so `top: 50%` of it already sits on the row's midline. RoomTypeItem's row is a flex line
   with `align-items: flex-end`, which put the same zero-height box on the row's bottom edge and
   needed an explicit `align-self: stretch`. Do not copy that fix here, and do not change this
   row's `align-items` without re-checking the glyph. */
.XvZVSdaLJxZ76j2l9w8E {
  position: relative;
  grid-column: 1;
  width: 1.25rem;
  padding: 0 var(--carina-spacing-2) 0 0;
}

/* The disclosure toggle is a real <button> (#g64), so it carries the UA chrome resets that keep it
   rendering as the bare glyph. Kept separate from `.roomTypeIcon` so the night rows' static cell
   does not inherit `cursor: pointer`. */
.fuISw_L52HJYlgVEPIxG {
  display: block;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Carina's own convention for a focus ring: keep the UA outline, recolour it. */
.fuISw_L52HJYlgVEPIxG:focus-visible {
  outline-color: var(--carina-border-color-primary-focus);
}

/* The night rows' date cell. ⚠ Only the night rows use this class — the header row's label is
   `.roomTypeNameHeader` below — so the indent that marks the nesting goes straight on it, with no
   descendant selector. (RequestSummary/RoomTypeItem needs `.roomTypeInventory .roomTypeName` for
   the same effect, because there both row kinds share one label class.)

   12px matches that panel's indent deliberately: the two cards show the same room-type/room-night
   hierarchy and should nest by the same amount. Safe to spend here — column 2 is a `1fr` track, so
   the item's padding does not resize the track, and the number and fee columns stay where they
   are. This card is also full width rather than a sidebar, so unlike RoomTypeItem there is no
   wrapping pressure on the localized date. Off-grid on purpose; tokens.md §2.5. */
.DIQrAGVuDE0u4u8s7hvy {
  grid-column: 2;
  padding-left: var(--carina-spacing-3);
}

.e26JVdM2L4hkmNhe_Xcc {
  grid-column: 2;
  display: flex;
  min-width: 0;
}

.TCcJdtZzcdBSVCLqXDXV {
  padding-right: var(--carina-spacing-2);
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._Q3K34n3x8Ok5a54B9aZ {
  grid-column: 3;
  text-align: right;
}

.y4fZovY5bUE78czpcQwi {
  grid-column: 4;
  text-align: right;
}

/* Centres the warning glyph inside the 1.25rem icon column. The glyph is sized with the icon's
   `size` prop (`l` = 24px) and coloured with its `color` prop, because @cvent/carina-icon drops
   `className` and ignores a CSS `color` (#g3, #g68); this wrapper only positions it. No padding
   here: on an absolutely positioned, shrink-to-fit box it widens the border box and puts
   `translate(-50%)` off centre. */
.WoTyqmg_vnh8IM9BCQ_k {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

/* The read-only "Contact information" recap card on the review page — the summary of what was
   entered on the Contact Info page, with an Edit button that routes back to it.

   (Not to be confused with src/lib/ContactInfoForm/*, which is the editable form itself, or with
   RequestSummary, which recaps the hotels and rooms.) */

.OdyGtegxXSR8eDZ0D1Ks {
  display: flex;
  flex-direction: column;
  /* Kept literal: no Carina shadow token matches this two-layer 0.06-alpha card lift
     (--carina-box-shadow-md/-lg are both heavier). Same value as ReviewSubmit.module.css
     `.topLevelContainer` and RequestSummary.module.css `.cardWrapper`. */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  padding: var(--carina-spacing-4);
  border-radius: var(--carina-border-radius-lg);
}

._lq5A6KQCSSpxghEoNAI {
  padding-bottom: var(--carina-spacing-2);
}

/* The card heading, on a <span>, so no preflight interaction (#g10). */
._bvQbEwMuDUKklcbHNYv {
  font-size: var(--carina-font-size-header-3);
  color: var(--carina-text-color-heading);
}

/* The four recap lines. */
._IvP2IzkMzNue5wE2XYy {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.Lgz_AYoSUYblX3cs420A {
  padding-top: var(--carina-spacing-4);
}

/* 18px type, which Carina's `size` prop cannot deliver — `md` and `lg` are both body-md; the prop
   only moves padding and min-height (#g19). Scoped through this wrapper to beat Carina's own 0-1-0
   rule on source order. */
.Lgz_AYoSUYblX3cs420A > .carina-button {
  font-size: var(--carina-font-size-body-lg);
}

/* The reCAPTCHA badge wrapper, last widget on the Review page. `justify-content: center` does the
   centring: on a block box with `width: auto` a horizontal `auto` margin computes to 0. */
.ndjhn6OJryCxqTgkRF70 {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: var(--carina-spacing-6) 0;
  /* ⚠ Opt this subtree OUT of the app-wide `color-scheme` (theme/appGlobals.css). Chrome paints a
     cross-origin iframe with an OPAQUE WHITE canvas when the frame's colour scheme does not match the
     element embedding it, and Google's anchor frame is 2px larger than the widget it draws — so under
     a dark embedder the dark reCAPTCHA shows a white rim (#g83). Google's frame declares no
     scheme, i.e. light; matching it here keeps the frame transparent. Nothing else in this container
     is a form control, so the autofill fix loses nothing. */
  color-scheme: light;
}

/* The success-page sub-title, directly under the event name. The left indent is 1rem so it lines up
   with the other blocks in this header stack — EventName, ManualApprovalMessage and
   ConfirmationMessage all indent by 16px. */
.NHMeQ7bRGjM3HOEDw3hT {
  padding: var(--carina-spacing-4) var(--carina-spacing-4) var(--carina-spacing-2);
  text-align: left;
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-header-3);
  font-weight: var(--carina-font-weight-normal);
}
/* Matches the indent the rest of the success page header block uses. */
.ZKC93yhokOpFT9CPAiCw {
  padding-left: 1rem;
  /* Preflight resets `p` margins to 0 (#g53), so this paragraph sits flush against the confirmation
     message below it unless the gap is restored explicitly. */
  margin: 0 0 var(--carina-spacing-2);
}
/* The message body is planner-authored rich text, so links arrive as bare <a> from the sanitizer
   rather than as Carina components — they have to be tokenized here. */
.dLGfi5kd2mnFu2c1F2jX a,
.dLGfi5kd2mnFu2c1F2jX a:visited,
.dLGfi5kd2mnFu2c1F2jX a:active {
  color: var(--carina-text-color-primary);
  text-decoration: none;
}

.dLGfi5kd2mnFu2c1F2jX a:hover {
  color: var(--carina-text-color-primary-hover);
  text-decoration: none;
}
.BYUdwSurqtC_n_6YXztN {
  padding-top: var(--carina-spacing-4);
  padding-right: var(--carina-spacing-4);
  width: 50%;
}

/* A small bold label rather than a heading — it and the sentence beneath it share a size, and only
   the weight separates them. */
.Huh4r9_id8xxUBhPXh6N {
  margin: 0 0 var(--carina-spacing-1);
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-body-sm);
  font-weight: var(--carina-font-weight-semi-bold);
}

.UDN8d4qpIKc3sX_tqpgq {
  margin: 0 0 var(--carina-spacing-2);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
}

/* Scoped through the container on purpose: `.carina-text-link` sets `margin: 0` and
   `text-decoration: underline` at plain class specificity, and carina.css is ordered after the CSS
   modules — so a bare `.link` rule loses. A descendant selector (0-2-0) outranks it. Size is not set
   here; the base declares `font-size: inherit` and would win, so it comes from TextLink's `size`
   prop instead. The links are deliberately not underlined, including on hover. */
.BYUdwSurqtC_n_6YXztN .carina-text-link {
  display: inline-block;
  overflow-wrap: anywhere;
  margin-bottom: var(--carina-spacing-2);
  text-decoration: none;
}

.w_drTddSzwZr7HbbwDvB {
  display: flex;
  align-items: center;
  gap: var(--carina-spacing-2);
}

/* "Link copied" acknowledgement: `text-color-success` is the Carina token for a positive result. */
.VxRmrxuxr3bvCD8h8GBr {
  color: var(--carina-text-color-success);
}

.MKQ2_0niWQAj_a1FQNVt {
  display: flex;
  flex-direction: column;
  margin-right: var(--carina-spacing-4);
}

/* Section heading within the panel — one step below the panel's own header. */
.RrSbCS7vieIaARO_M2X6 {
  margin: 0 0 var(--carina-spacing-1);
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-body-lg);
  font-weight: var(--carina-font-weight-semi-bold);
}

/* The deadline value itself, emphasized against the explanatory paragraph below it. */
.xbuVT50wVVC3Rw6F7s8G {
  color: var(--carina-text-color-base);
  font-weight: var(--carina-font-weight-semi-bold);
}

.PyG8oWiPXTEc9OxKDqaA {
  color: var(--carina-text-color-base);
}
.W9oHP1fs2tlrshd4TRYb {
  padding-top: var(--carina-spacing-4);
  padding-right: var(--carina-spacing-4);
  width: 50%;
}

/* Mirrors BookingWebsiteLink: small bold label, body copy at the same size but regular weight, and
   the link a step smaller again. */
.qC2X5qbGl_WYlOOHZavE {
  margin: 0 0 var(--carina-spacing-1);
  color: var(--carina-text-color-heading);
  font-size: var(--carina-font-size-body-sm);
  font-weight: var(--carina-font-weight-semi-bold);
}

.wVK2aqrTodtAROx3ozBF {
  margin: 0 0 var(--carina-spacing-2);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-sm);
}

/* See BookingWebsiteLink.module.css — `.carina-text-link` wins over a plain class on source order,
   so the underline removal is scoped through the container. Size comes from TextLink's `size` prop. */
.W9oHP1fs2tlrshd4TRYb .carina-text-link {
  text-decoration: none;
}
/* The outer margin insets the card from the section edges by the same 16px as the hotel-summary
   card below it (RequestDetailsListItem.module.css `.containerWrapper`) and leaves room for its
   own drop shadow, which the following section would otherwise paint over. */
.hLJKfe0cuZmyPt9U09VO {
  margin: var(--carina-spacing-2) var(--carina-spacing-4) var(--carina-spacing-4);
  border-radius: var(--carina-border-radius-lg);
  padding: var(--carina-spacing-4);
  box-shadow: var(--carina-box-shadow-lg);
}

.CeTb96PmXNTS93LCCSFN {
  display: flex;
}

/* Despite the `header` resx key this is body copy, not a heading — a full sentence explaining what
   to do next — so it keeps the regular weight, at the same 18px as the splash page's instructional
   message. */
.u877s5mAx5nTDpysNBjA {
  margin: 0 0 var(--carina-spacing-4);
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-body-lg);
}

/* Shared table metrics — see the header comment in lib/Table/TableRow.module.css for why these are
   restated per file instead of imported. Keep in sync with TableRow.module.css and
   ScrollArrow.module.css. */
.b9aSYB5LmGQ7C9ZckH2r {
  --table-title-cell-width: 16rem;
  --table-arrow-size: 28px;

  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;

  /* The faintest possible hairline, deliberately. */
  border: 1px solid var(--carina-border-color-soft);
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

/* The title cell and the left arrow are positioned absolutely over this gutter, so the scrolling
   region starts clear of both and stops short of the right arrow. */
.APt7t5OnPuCjPwtTT7dU {
  overflow-x: scroll;
  margin-left: calc(var(--table-title-cell-width) + var(--table-arrow-size));
  margin-right: var(--table-arrow-size);
  font-size: var(--carina-font-size-body-md);
}

.S2W9h25bzpvUpnxotaaB {
  border: 0;
  border-collapse: collapse;
  min-width: 100%;
}
.fM8q9kraEX4aGHlINtvF {
  max-width: 100%;
  box-shadow: var(--carina-box-shadow-lg);
  margin: 0 var(--carina-spacing-4) var(--carina-spacing-4);
  border-radius: var(--carina-border-radius-lg);
}

.U8V6YvU4fjqVy3XwOgd0 {
  background-color: var(--carina-background-color-surface);
  border-radius: var(--carina-border-radius-lg);
  padding: var(--carina-spacing-4);
}

.rpwgS8_MZPoBnEPfZmPK {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 50% 50%;
}

.hppuVAQK5wBySqfCrnew {
  float: left;
  grid-row-start: 1;
  grid-row-end: 3;
  width: 100px;
  height: 75px;
  border-radius: var(--carina-border-radius-lg);
  margin-right: var(--carina-spacing-2);
}

.btbSNi_XgfoeLP1aQ5nw {
  grid-row: 1;
  grid-column: 2;
}

.t8hihRXWegPv2TPTeX2K {
  width: 100%;
  font-size: var(--carina-font-size-header-5);
  font-style: normal;
  font-weight: var(--carina-font-weight-normal);
  line-height: 1.25;
  color: var(--carina-text-color-base);
}

.OLqs7ppXXhfqLhXaB9li {
  width: 100%;
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.wVOdBHiRPoKpAZWGaWSW {
  grid-row: 2;
  grid-column: 2;
  margin-top: var(--carina-spacing-4);
}

.ccXwvvCSzgZOM2nbuZdQ {
  float: left;
}

.jOum2RmEnCtYR8nlifnN {
  margin-left: var(--carina-spacing-16);
  float: left;
}

.eDn94YMBgiesndNuBYbY {
  width: 100%;
  font-size: var(--carina-font-size-body-sm);
  color: var(--carina-text-color-base);
}

.C7Uzo0omztKlFmRlp8fW {
  width: 100%;
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.OVVDyq4dsmvHc28JlEzg {
  padding: var(--carina-spacing-2) 0;
  font-size: var(--carina-font-size-header-5);
  font-weight: var(--carina-font-weight-normal);
  color: var(--carina-text-color-base);
}

/* carina.css ships Tailwind preflight, which resets `hr` to `border-top-width: 1px` in the current
   colour and leaves the other three edges to the UA — so both halves have to be stated here. */
.HLabJNb4ORr9qa7LBGFL {
  border: 0;
  border-top: 1px solid var(--carina-border-color-soft);
  margin: 0 var(--carina-spacing-4);
}
.wv9yPqgYPSX4O97c368g {
  background-color: var(--carina-background-color-primary);
  width: 100%;
  display: flex;
  justify-content: center;
}

.DowDcVs3J4Uc3fx3ibv1 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.dWstpLHs8Kl1cBV1aFz0 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.Y8IR6ph32xnDIKGqang2 {
  color: var(--carina-text-color-on-primary);
}

.wuAoJbnMZNNlHZ3du0ZB {
  color: var(--carina-text-color-on-primary);
}
.MVz3f0esLl0u0atbkC7g {
  max-height: 72px;
  min-height: 32px;
  height: 100%;
  max-width: 216px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.RO8Y4ckd_tsY6NPsQkDh {
  display: flex;
  align-items: center;
}

.Tm6rFmg_KZV3ADkHGm06 {
  background-color: var(--carina-background-color-primary);
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 1rem;
}

.PXv85vrUktwTZAnmiAro {
  vertical-align: top;
  font-size: 0.875rem;
  color: var(--carina-text-color-on-primary);
}

.qXPy6jBj69ckkTTz4DIy {
  text-align: center;
  padding-left: var(--carina-spacing-2);
  padding-right: var(--carina-spacing-2);
  font-size: var(--carina-font-size-sm);
  color: var(--carina-text-color-primary);
}

.u0Dg94ODEaXVf3jpg68P {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  padding: 1rem 1.5rem;
}
._LikCa6gLxlAuH5tE_yA {
  padding: 0.625rem;
  margin-top: auto;
  color: var(--carina-text-color-base);
  font-size: var(--carina-font-size-sm);
}

.B8onjKWSOmsOsrutT8iJ {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.XGx6GzAkaYR2nS2Bl5dD {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* This link is not underlined. `.carina-text-link` declares `text-decoration: underline` in
   carina.css, and because carina.css is ordered after the CSS modules a plain class here (0-1-0)
   loses on source order — scoping through the container (0-2-0) wins regardless (#g19). Hover keeps
   the underline as the affordance, matching how Headline styles its inline links. */
.XGx6GzAkaYR2nS2Bl5dD .carina-text-link {
  text-decoration: none;
}

.XGx6GzAkaYR2nS2Bl5dD .carina-text-link:hover {
  text-decoration: underline;
}

/* The "check your inbox" state of the public-link dialog, shown after the email is accepted. */

.ujGvd4oDfbmlbXcSwHMC {
  padding: 0 var(--carina-spacing-16) var(--carina-spacing-6);
  margin: auto;
  width: 85%;
  text-align: center;
}

/* ⚠ `margin-inline: auto` is load-bearing. This is a fixed-width (85%) block inside an already
   centred parent, and the parent's `text-align: center` only centres inline content, not a block
   child (#g61). Without it the whole panel — illustration, heading, email, copy, divider and the
   "try again" button — sits half the leftover width (~26px at the md dialog size) left of centre. */
.YMgPYVjWPEUqhe2AMWZp {
  width: 85%;
  margin-inline: auto;
  text-align: center;
}

.aRYby5opHyUuu2Ft9LP1 {
  margin-top: var(--carina-spacing-2);
  margin-bottom: var(--carina-spacing-2);
}

.zdKwM_jQM4vrIZlTjLLo {
  font-size: var(--carina-font-size-header-3);
  color: var(--carina-text-color-heading);
}

.SASXXFOeBkJ5de_U2RD4 {
  margin-top: var(--carina-spacing-4);
  margin-bottom: var(--carina-spacing-8);
}

/* Bold 20px sits between Carina's body-lg (18px) and header-4, so the literal is kept rather than
   snapped to a step. */
.rCGSDN_a4WqTvFV0PRUY {
  font-size: 20px;
  font-weight: 700;
  color: var(--carina-text-color-base);
}

.xnT8xWtvB7QVNf1KFfJ8 {
  font-size: var(--carina-font-size-body-md);
  color: var(--carina-text-color-base);
}

.cC_LPc3ovJLG3J2LRQqf {
  margin-top: var(--carina-spacing-6);
  margin-bottom: var(--carina-spacing-6);
}

/* The email-capture state of the public-link dialog: event name, welcome copy, email field,
   reCAPTCHA, send button. Opened non-dismissable from `containers/public_link`, so this content
   is the whole dialog. */

.Dxp2NMrDsVAdfWulbbBH {
  padding: var(--carina-spacing-8);
}

.e64D2ZqEv0tVmDOTAHTj {
  font-size: var(--carina-font-size-header-1);
  font-weight: var(--carina-font-weight-display);
  color: var(--carina-text-color-heading);
  margin-bottom: var(--carina-spacing-2);
}

.b31rucSo4342oizNGELg {
  font-size: var(--carina-font-size-body-lg);
  color: var(--carina-text-color-base);
}

.ag6nU4HBAErDf0tCqaLa {
  margin: auto;
  width: 80%;
}

/* The rate-limit notice inside the public-link dialog: info glyph, message, dismiss button.
   Shown only when the service answers a send request with `retryAfterEpochSeconds`.

   ⚠ `height` and `width` are fixed values and both are latent bugs: a longer translation of the
   retry message will clip against the 74px height, and 479px does not respond to the dialog's
   width. If clipping shows in any locale, `min-height` and a percentage width are the fix. */

.kfdRfk7lmn41R7IE7nYY {
  display: flex;
  align-items: flex-start;
  height: 74px;
  width: 479px;
  margin-top: var(--carina-spacing-4);
  background-color: var(--carina-background-color-info-pale);
  border-radius: 10px;
  /* Kept literal: no Carina shadow token matches this single-layer, negative-spread lift. Same
     reasoning as ReviewSubmit.module.css `.topLevelContainer`. */
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.1);
}

.g2Mgy7ATr1tEW0CjBY5r {
  flex: 0 0 auto;
  margin-top: 14px;
  margin-left: 14px;
}

.SDDPxhplJLGlyln_GEVh {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  margin-top: var(--carina-spacing-4);
  margin-left: var(--carina-spacing-4);
  margin-right: var(--carina-spacing-12);
  line-height: 21px;
  font-weight: 400;
}

/* A real `<button>` (#g64), so the UA chrome is reset. */
.XHhdmyzbwMT9PdIldBuH {
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-top: var(--carina-spacing-4);
  margin-right: var(--carina-spacing-2);
}

/* The fixed cookie-consent bar at the bottom of every page.
 *
 * ⚠ The bar's background, padding and fixed positioning are NOT here — they are an inline `style`
 * object in `CookieBanner.js`, marked there as a deliberate exception because the show/hide
 * animation drives `transform`. Do not migrate those up into this file without reading that note.
 */

.kuIDAUwMBvbyYiNWstmA {
  max-width: 1024px;
}

.unZFLkniysUZFiwQ1rHS {
  overflow-y: auto;
  max-height: 30vh;
}

.LPLcmxudOFzHiwzaILd1 {
  font-size: var(--carina-font-size-body-sm);
}

.nDkvkUqQrSNLhTLagzN2 {
  display: flex;
  flex-wrap: wrap;
}

/* `isS` = Carina's small breakpoint: the three buttons go full-width and stack. The pairs below
   differ only in `width` and the right margin, and the component picks between them. */
.BiolfYDF4ej2JxgRbWrS {
  margin-top: var(--carina-spacing-2);
  margin-right: 0;
  width: 100%;
}

.lcYrnVVKkit5PE8QBmu1 {
  margin-top: var(--carina-spacing-2);
  margin-right: var(--carina-spacing-2);
  width: auto;
}

.ZZxLdFfC4mQ28Wtn8eEK {
  margin-top: var(--carina-spacing-2);
  width: 100%;
}

.oeAF4YuMTBkyNj_MFwBn {
  margin-top: var(--carina-spacing-2);
  width: auto;
}

/* Header of the "Customize preferences" dialog: title, dismiss button and the collapsible
 * description with its show-more link.
 *
 * ⚠ No `font-family` declarations in the three cookie-banner stylesheets, deliberately: the subtree
 * renders inside `App.js`'s `ThemeSource` and inherits `--carina-font-family-primary` from `.carina`
 * (via Carina's `globals.css`). Declaring nothing is the stronger form of token purity — a future
 * customer theme repoints one token and these files need no edit. See the portal note in
 * CookieModal.module.css for why the inheritance is not in doubt.
 */

/* Wrapper around the <h2>. Largely inert, since the title below sets its own size. */
.SOKHLeve10SNgEPJK1hY {
  font-size: var(--carina-font-size-header-5);
  line-height: var(--carina-line-height-tight);
}

/* The <h2> itself, so it must state its own size and weight — the carina.css preflight resets
   heading typography and beats `:where()` (#g10). */
.YHrUe7U2r7GOr7yntahc {
  font-size: var(--carina-font-size-header-4);
  font-weight: var(--carina-font-weight-bold);
  line-height: var(--carina-line-height-tight);
}

/* The two description states differ only in whether the text is clamped. */
.Xw_weWC8uvHAxN__ylrW {
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
  margin-top: var(--carina-spacing-2);
}

.RWvdt0SOx0G9e837y4zh {
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
  margin-top: var(--carina-spacing-2);
  /* Two lines at the size/line-height above; `ModalHeader.js` measures scrollHeight against this
     to decide whether the show-more link is needed, so it is load-bearing, not decorative. */
  max-height: 2.25rem;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* The "Customize preferences" dialog body — category rows, their switches and the read-more text.
 * Shared by `CookieModal.js` and `CookieModalBody.js`.
 *
 * ⚠ Tokens resolve in here, but not for the reason the dialog gotchas would suggest. Carina's
 * `Modal` only portals when it is passed a truthy `portal` prop, and that prop DEFAULTS TO FALSE —
 * `CookieModal.js` does not pass it, so the dialog renders in place, inside `App.js`'s
 * `ThemeSource` wrapper, and inherits `.carina`'s custom properties normally. That is why this
 * file needs no `ThemeSource` of its own the way `DialogHost` and `ImageGrid` do (#g35, #g41).
 * If anyone ever sets `portal` on this Modal, every token below goes undefined and the dialog
 * paints unstyled — wrap it in `ThemeSource` in the same edit.
 */

/* Wraps the <h3> category label. */
.YbLuzV4chPI6VRoTz4sl {
  font-size: var(--carina-font-size-body-sm);
  font-weight: var(--carina-font-weight-medium);
  line-height: var(--carina-line-height-tight);
  margin-bottom: 2px;
}

._KhZ7vVbzfhapvGhzQUj {
  width: fit-content;
  color: var(--carina-text-color-soft);
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
  margin-left: -24px;
  margin-top: var(--carina-spacing-2);
  margin-bottom: var(--carina-spacing-2);
  overflow: hidden;
}

.RyX2QMpT7_fY2pW5lXmJ {
  display: none;
}

/* On an <h3>, so it must state its own size and weight: the carina.css preflight resets heading
   typography and beats `:where()` (#g10). */
.qvbtbMZNyVl9FWKbryaQ {
  font-size: var(--carina-font-size-body-sm);
  font-weight: var(--carina-font-weight-normal);
  line-height: var(--carina-line-height-tight);
  margin-bottom: 1px;
}

.htXnYdsnekArzvwBqYbc {
  margin: 0.25rem -0.25rem 0.15rem 0rem;
}

.Pqk5S_JkQTCp9koblNfw {
  font-size: var(--carina-font-size-body-sm);
  line-height: var(--carina-line-height-tight);
  color: var(--carina-text-color-soft);
  text-align: right;
  margin-left: -32px;
  margin-right: -16px;
  margin-top: 6px;
  padding-right: var(--carina-spacing-6);
}

/* Hairline divider between category rows — `-soft`, the project's hairline token (#g49). */
.e66gFJEweSq_ef_DsB0S {
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-4);
  padding-left: 0;
  border-bottom: 1px solid var(--carina-border-color-soft);
}

/* The last row gets the padding but no divider. */
.NKQF5cd8E0zdx7jPfFwA {
  padding-top: var(--carina-spacing-4);
  padding-bottom: var(--carina-spacing-4);
  padding-left: 0;
}

/* ⚠ Applied as Carina `Modal`'s `className`, which lands on the Modal's own element — so a plain
   class here competes with `carina.css`'s base declarations at equal specificity and loses on
   source order (#g19); this padding may never actually apply. */
.h3tyO7p5ITftA18WLyDo {
  padding: var(--carina-spacing-6);
}

/* Centres the boot loader in the viewport. */

.yh_ihRXnkiDeKihbTf7L {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}


/*# sourceMappingURL=styles.prod.jenkins_v62.0575ab380021456381b9.css.map*/