/**
 * Clay 3.166.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
/* Overwrite Bootstrap and Clay styles in scss build step
 TODO: see if we can use more modern @use 'variables/globals'; */
.breadcrumb {
  background-color: var(--ds-white-100);
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: var(--ds-padding-md) var(--ds-padding-lg);
}
@media (width > 992px) {
  .breadcrumb {
    margin-bottom: var(--ds-margin-lg);
    padding-left: var(--ds-margin-5xl);
  }
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "|";
  color: var(--ds-black-64);
  display: inline-block;
  position: static;
  background-image: none;
  background-repeat: initial;
  background-size: initial;
  height: auto;
  width: auto;
  float: none;
  margin-top: 0;
  padding: 0 0.5em;
}

.breadcrumb-link > .breadcrumb-text-truncate {
  font-weight: var(--ds-font-weight-bold);
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 0%;
  color: var(--ds-anchor-link);
}

.breadcrumb-link > .breadcrumb-text-truncate:hover {
  color: var(--ds-anchor-link-hover);
}

.breadcrumb-link > .breadcrumb-text-truncate:active {
  color: var(--ds-anchor-link-pressed);
}

.breadcrumb-item.active,
.breadcrumb-item .active {
  color: var(--ds-text-secondary);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
  display: flex;
  margin-right: 0;
}

/* SELECT */
.input-group-item.input-group-prepend {
  display: flex;
  align-items: stretch;
}

.input-group-item.input-group-prepend > .input-group-append.input-group-item.input-group-item-shrink,
.input-group-item.input-group-prepend > .btn {
  height: 100%;
}

.input-group-append.input-group-item.input-group-item-shrink > .btn {
  height: 56px;
  padding: unset;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* TYPOGRAPHY */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: var(--ds-line-height-base-title);
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
  font-weight: var(--ds-font-weight-bold);
}

[data-use-dark-mode],
[data-use-light-mode] {
  color: var(--ds-text-primary);
}

:not(.btn) > span,
strong,
div {
  color: inherit;
}

i {
  color: var(--ds-icon-primary);
}

h1,
.h1,
.display-1 {
  font-size: var(--ds-font-size-h1);
  font-weight: var(--ds-font-weight-semi-bold);
}

h2,
.h2,
.display-2 {
  font-size: var(--ds-font-size-h2);
}

h3,
.h3,
.display-3 {
  font-size: var(--ds-font-size-h3);
}

h4,
.h4,
.display-4 {
  font-size: var(--ds-font-size-h4);
}

h5,
.h5,
.display-5 {
  font-size: var(--ds-font-size-h5);
}

h6,
.h6,
.display-6 {
  font-size: var(--ds-font-size-h6);
}

p {
  font-size: var(--ds-font-size-text-md);
  line-height: var(--ds-line-height-base);
  margin: 0;
}

.text-regular {
  font-weight: var(--ds-font-weight-normal);
}

.text-bold {
  font-weight: var(--ds-font-weight-bold);
}

.text-lg {
  font-size: var(--ds-font-size-text-lg);
}

.text-md {
  font-size: var(--ds-font-size-text-md);
}

.text-sm {
  font-size: var(--ds-font-size-text-sm);
}

label,
.label {
  font-size: var(--ds-font-size-label);
  font-weight: var(--ds-font-weight-bold);
  line-height: normal;
}

svg {
  height: var(--ds-icon-5);
  min-width: 20px;
  color: var(--ds-icon-primary);
}

.btn.btn-secondary svg {
  color: var(--ds-button-outlined-content);
}

.btn.btn-primary svg {
  color: var(--ds-button-primary-content);
}

.btn.btn-secondary.btn--unlink svg {
  color: var(--ds-error-content);
}

.btn.btn-secondary.btn--unlink svg:hover {
  color: var(--ds-red-darken-24);
}

.btn.btn-secondary,
.btn.btn-primary,
.btn.btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ds-icon-95);
  min-height: var(--ds-icon-95);
  gap: var(--ds-spacer-4);
  padding: var(--ds-spacer-5) var(--ds-spacer-7) var(--ds-spacer-5) var(--ds-spacer-7);
  font-size: var(--ds-font-size-button);
  font-weight: var(--ds-font-weight-bold);
}
.btn.btn-secondary svg,
.btn.btn-primary svg,
.btn.btn-danger svg {
  width: var(--ds-icon-7);
  height: var(--ds-icon-7);
}
.btn.btn-secondary.squared,
.btn.btn-primary.squared,
.btn.btn-danger.squared {
  aspect-ratio: 1/1;
  padding: var(--ds-spacer-5);
}

.btn.btn-sm.btn-primary,
.btn.btn-sm.btn-secondary,
.btn.btn-sm.btn-danger {
  min-width: var(--ds-icon-95);
  min-height: var(--ds-icon-95);
  gap: var(--ds-spacer-3);
  padding: var(--ds-spacer-4) var(--ds-spacer-7) var(--ds-spacer-4) var(--ds-spacer-7);
  font-size: var(--ds-font-size-text-md);
}
.btn.btn-sm.btn-primary svg,
.btn.btn-sm.btn-secondary svg,
.btn.btn-sm.btn-danger svg {
  width: var(--ds-icon-6);
  height: var(--ds-icon-6);
}
.btn.btn-sm.btn-primary.squared,
.btn.btn-sm.btn-secondary.squared,
.btn.btn-sm.btn-danger.squared {
  aspect-ratio: 1/1;
  padding: var(--ds-spacer-4);
}

.btn.btn-xs {
  border-radius: var(--ds-border-radius-button);
}

.btn.btn-xs.btn-primary,
.btn.btn-xs.btn-secondary,
.btn.btn-xs.btn-danger {
  min-width: var(--ds-icon-9);
  min-height: var(--ds-icon-9);
  gap: var(--ds-spacer-3);
  padding: var(--ds-spacer-3) var(--ds-spacer-4) var(--ds-spacer-3) var(--ds-spacer-4);
  font-size: var(--ds-font-size-text-md);
}
.btn.btn-xs.btn-primary svg,
.btn.btn-xs.btn-secondary svg,
.btn.btn-xs.btn-danger svg {
  width: var(--ds-icon-5);
  height: var(--ds-icon-5);
}
.btn.btn-xs.btn-primary.squared,
.btn.btn-xs.btn-secondary.squared,
.btn.btn-xs.btn-danger.squared {
  aspect-ratio: 1/1;
  padding: var(--ds-spacer-3);
}

.btn.btn-tag.btn-primary,
.btn.btn-tag.btn-secondary,
.btn.btn-tag.btn-danger {
  min-width: var(--ds-icon-7);
  min-height: var(--ds-icon-7);
  gap: var(--ds-spacer-2);
  padding: var(--ds-spacer-2) var(--ds-spacer-3) var(--ds-spacer-2) var(--ds-spacer-3);
  font-weight: var(--ds-font-weight-normal);
  font-size: var(--ds-font-size-text-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn.btn-tag.btn-primary svg,
.btn.btn-tag.btn-secondary svg,
.btn.btn-tag.btn-danger svg {
  width: var(--ds-icon-5);
  height: var(--ds-icon-5);
}
.btn.btn-tag.btn-primary.squared,
.btn.btn-tag.btn-secondary.squared,
.btn.btn-tag.btn-danger.squared {
  aspect-ratio: 1/1;
  padding: var(--ds-spacer-3);
}

@media (width < 992px) {
  body.no-scroll {
    overflow: hidden !important;
    margin: 0;
    touch-action: none;
    height: 100vh;
  }
}

a:hover {
  text-decoration: none;
}

/* SHARED */
/* Help and error messages */
.alert {
  min-height: var(--ds-input-large);
  width: 100%;
  border-radius: var(--ds-radius-sm);
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-5);
  padding: var(--ds-padding-lg);
}

.alert__icon {
  height: var(--ds-icon-7);
}

/* info message */
.alert__info,
.alert-info {
  background-color: var(--ds-info-bg);
  color: var(--ds-text-primary);
}
.alert__info svg,
.alert-info svg {
  color: var(--ds-info-content);
}

.alert__icon--info {
  color: var(--ds-text-primary);
}

.alert__copy--allowed-email-domains {
  font-weight: var(--ds-font-weight-bold);
}

/* error message */
.alert__error,
.alert-error,
.alert-danger {
  background-color: var(--ds-error-bg);
  color: var(--ds-text-primary);
  border-color: var(--ds-error-bg);
}
.alert__error svg,
.alert-error svg,
.alert-danger svg {
  color: var(--ds-error-content);
}

.alert__icon--error {
  color: var(--ds-text-primary);
}

/* success message */
.alert__success,
.alert-success {
  background-color: var(--ds-success-bg);
  color: var(--ds-text-primary);
  border: none;
}
.alert__success svg,
.alert-success svg {
  color: var(--ds-success-content);
}

.alert__icon--success {
  color: var(--ds-text-primary);
}

/* warning message */
.alert__warning,
.alert-warning {
  background-color: var(--ds-warning-bg);
  color: var(--ds-text-primary);
}
.alert__warning svg,
.alert-warning svg {
  color: var(--ds-warning-content);
}

.alert__icon--warning {
  color: var(--ds-text-primary);
}

/* alert used in input help and error messages */
.alert--input {
  margin-top: var(--ds-margin-md);
  /* .alert is a flex row, so its width is driven by min-content unless the copy is allowed to
     shrink. In a narrow field column a long validation message would otherwise push the box
     outside its container (SQMAKITA-3543). */
  min-width: 0;
  /* Validation messages run to several lines in a narrow column, so anchor the icon to the first
     line, and claw back horizontal room from the padding and gap that the default .alert sizing
     spends — at mobile widths those cost more than the text they surround. */
  align-items: flex-start;
  gap: var(--ds-spacer-3);
  padding: var(--ds-padding-md);
}
.alert--input .alert__copy {
  min-width: 0;
  /* break-word, not anywhere: anywhere lets the box shrink to a ~1-character ribbon and hyphen-
     lessly splits words mid-token, which is harder to read than the original overflow. */
  overflow-wrap: break-word;
}
.alert--input svg {
  flex-shrink: 0;
}

/* alert info in partner details view errors */
.alert__partner-details {
  margin-top: var(--ds-margin-lg);
}

/* BUTTONS */
/*  Base button */
/* Primary */
/* Secondary */
/* Link */
/* Outline primary */
/* Outline secondary */
/* Info */
/* Success */
/* Warning */
/* Danger */
/* NEW: Primary Danger (solid) */
/* NEW: Secondary Danger (outlined) */
.btn--makita .btn {
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-4);
}

/* Alignment utility classes */
.btn--align-start .btn {
  justify-content: flex-start;
}

.btn--align-center .btn {
  justify-content: center;
}

.btn--align-end .btn {
  justify-content: flex-end;
}

/* Full width button layout */
.btn--full .btn {
  width: 100%;
  justify-content: center;
}

/*
 * LoadingButton (components/common): a leading icon that a spinner replaces while the action runs,
 * in a fixed box so the button keeps its width. The label stays visible.
 */
.btn.btn--leading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-spacer-3);
}

.btn__leading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}
.btn__leading-icon svg {
  width: 100%;
  height: 100%;
  color: currentcolor;
}

/*
 * While the action runs, the button is disabled only to stop a second submit. It is busy, not
 * unavailable, so it keeps its own colours, diluted, instead of the greyed-out disabled look (which
 * for danger buttons is an outline and would read as a different button).
 */
.btn.btn--loading:disabled,
.btn.btn--loading.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.btn-primary.btn--loading:disabled,
.btn-primary.btn--loading.disabled {
  background-color: var(--ds-button-primary-bg);
  border-color: transparent;
  color: var(--ds-button-primary-content);
}

.btn-danger.btn--loading:disabled,
.btn-danger.btn--loading.disabled {
  background-color: var(--ds-error-content);
  border-color: transparent;
  color: var(--ds-error-bg);
}

.btn-secondary.btn--loading:disabled,
.btn-secondary.btn--loading.disabled {
  background-color: var(--ds-button-outlined-bg);
  border-color: var(--ds-button-outlined-border);
  color: var(--ds-button-outlined-content);
}

/* Icon styling */
.btn--makita svg {
  color: currentcolor;
  width: var(--ds-icon-7, 1.5rem);
  height: var(--ds-icon-7, 1.5rem);
  flex-shrink: 0;
}

/* Disabled state styling */
.btn--makita a.disabled {
  pointer-events: none;
  opacity: 0.65;
  cursor: not-allowed;
}

/* Edit mode debug info */
.btn--makita .alert {
  font-size: 0.875rem;
}

.btn--makita .alert code {
  background: rgba(0, 0, 0, 0.1);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: monospace;
}

.form-controller {
  gap: var(--ds-spacer-5);
}

.form-controller__bottom {
  margin-top: var(--ds-margin-xxxl);
}

.form-controller__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-spacer-5);
}

.form-group__icon--spinner {
  animation: spin 1s linear infinite;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 4;
}

@media (width >= 992px) {
  .btn-submit--custom {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

.btn-submit--custom a {
  width: 100%;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.header {
  --header-max-width: var(--container-max-xxl);
  padding: var(--ds-padding-lg);
  border-bottom: 1px solid var(--ds-border-default);
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header {
    border: none;
    padding-bottom: 0;
  }
}

.header__logo {
  display: none;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__logo {
    display: block;
    grid-area: logo;
    align-content: center;
    margin-inline: auto;
  }
}

/* header desktop */
/* stylelint-disable*/
/* Disable style lint : complaing about invalid meadia query */
@media (width >= 992px) {
  .header {
    display: grid;
    grid-template-areas: "logo top" "logo bottom";
    grid-template-columns: min-content 1fr;
    max-width: var(--header-max-width);
    /* TODO */
    margin-inline: auto;
  }
  /* stylelint-enable */
  .header__item--search {
    flex-basis: clamp(200px, 50%, 650px);
    margin-right: auto;
    width: auto;
  }
  /* DealerZone hides .header__logo (d-none), so drop the logo column from
     the grid. Leaving it as `min-content 1fr` makes the top area compute
     against an empty intrinsic column and visibly breaks the search bar
     in the ~992–1185px range when the sidebar is open. */
  .header--dealerzone {
    grid-template-areas: "top" "bottom";
    /* minmax(0, 1fr) — `1fr` alone lets children's intrinsic min-content
       width expand the column beyond the available space. */
    grid-template-columns: minmax(0, 1fr);
  }
  /* Ensure --top/--bottom rows can shrink below their content's intrinsic
     min-content width, so a wide non-wrapping child (e.g. the cart)
     doesn't push the row past the header. */
  .header--dealerzone .header__items--top,
  .header--dealerzone .header__items--bottom {
    min-width: 0;
  }
  /* Keep the whole top row on a single line at every desktop/laptop width
     (SQMAKITA-3213). Search absorbs the free space and is the element that
     shrinks when the row gets tight; the other items are already icon-only,
     and the cart collapses to an icon in the narrow container band below.
     Wrapping (the old behaviour) produced a staggered multi-row "pyramid"
     on small laptops, even with the sidebar closed. */
  .header--dealerzone .header__items--top {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  /* Search absorbs remaining space and shrinks so the row never wraps. A
     small min-width keeps the input usable; the input-group is forced
     nowrap so the submit button never drops below the field as the input
     narrows. margin-right: 0 overrides the generic `.header__item--search`
     auto margin — without it the auto margin swallows the free space and
     search stays stuck at its (shrunk) basis with a large empty gap to its
     right instead of growing to fill the row. */
  .header--dealerzone .header__item--search {
    flex: 1 1 240px;
    min-width: 140px;
    margin-right: 0;
  }
  .header--dealerzone .header__item--search .input-group {
    flex-wrap: nowrap;
  }
  .header--dealerzone .header__item--search .input-group .form-control {
    min-width: 0;
  }
  /* The controls cluster (cart + user menu) must also stay on one line;
     the base .header__controls rule wraps, which stacked the cart above the
     user menu at mid widths (SQMAKITA-3213). Match the top row's gap too, so
     the cart and user-menu icons sit at the same spacing as globe/bell —
     the base spacer-3 gap left this pair visibly tighter than the rest since
     they share this sub-container. */
  .header--dealerzone .header__controls {
    flex-wrap: nowrap;
    gap: var(--ds-spacing-lg);
  }
}
/* Progressive collapse to keep the single (flex-nowrap) row fitting as the
   content area narrows, instead of overflowing over the sidebar. Each item
   drops its text and becomes icon-only — the mobile treatment Olena asked
   for. Container queries key off .portal-layout__content width, so they
   react to sidebar state (open sidebar => narrower content => earlier
   collapse). Text drops least-essential-first: cart name/count and the
   "Language" label go first, the user name last. The cart/language/user
   selectors are one level deeper than their `display: block` rules so they
   win regardless of source order. Thresholds intentionally collapse a little
   early: an icon-only control is fine, a row spilling over the sidebar is
   not. Tune the two breakpoints if the icon switch should happen later. */
@container (max-width: 1150px) {
  /* Cart + language collapse to icons. The cart trades its name/count text
     for the count bubble (the same treatment as the notification badge), and
     every caret drops so the icon row reads cleanly and consistently. */
  .header--dealerzone .header__item--cart-label,
  .header--dealerzone .header__item--cart-caret {
    display: none;
  }
  .header--dealerzone .header__item--cart .header__item--cart-badge {
    display: flex;
  }
  /* Icon-only, the cart no longer needs the room its name/count text took,
     so drop the wrapper's and the cart's minimum sizes. */
  .header.header--dealerzone .makita-mini-cart-wrapper {
    min-width: 0;
  }
  .header.header--dealerzone .header__controls .mini-cart {
    min-height: 0;
  }
  .header--dealerzone .header__item--language .language-selector__label,
  .header--dealerzone .header__item--language .language-selector__caret {
    display: none;
  }
  /* Collapsed, the globe sits in the right-side icon cluster, so the natural
     left-aligned 250px dropdown would overflow the content edge. Anchor it to
     the trigger's right edge only here; at wider widths it stays naturally
     left-aligned under the globe (the fragment default). Deeper selector so
     it wins over the fragment's own .language-selector .*__dropdown rule. */
  .header--dealerzone .language-selector .language-selector__dropdown {
    right: 0;
    left: auto;
  }
  .header--dealerzone .header__item--search {
    min-width: 120px;
  }
}
@container (max-width: 950px) {
  /* Narrowest: the user menu also drops to its avatar (name + caret hidden). */
  .header--dealerzone .header__item--user-menu .user-menu__content,
  .header--dealerzone .header__item--user-menu .user-menu__icon--caret {
    display: none;
  }
  .header--dealerzone .header__item--search {
    min-width: 96px;
  }
}
/* Top header items container */
.header__items--top {
  grid-area: top;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-spacer-3);
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__items--top {
    padding: 0 var(--ds-padding-lg) var(--ds-padding-lg);
    gap: var(--ds-spacing-lg);
  }
}

.header__item--search {
  order: 2;
  width: 100%;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__item--search {
    order: unset;
  }
}

.header__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--ds-spacer-3);
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width > 1280px) {
  .header__controls {
    gap: var(--ds-spacer-8);
  }
}

.header__controls .user-menu__icon {
  width: var(--ds-icon-7, 1.5rem);
  height: var(--ds-icon-7, 1.5rem);
  color: var(--ds-icon-secondary);
}

.header__item > .btn {
  font-weight: var(--ds-font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-3);
}

.header__item > .btn:not(:hover, :active, :focus-visible) {
  color: var(--ds-text-primary);
}

.header__item .btn i {
  color: var(--ds-icon-secondary);
  font-size: var(--ds-font-size-icon);
}

.header__item .header__product-menu i {
  color: var(--ds-icon-primary);
  font-size: var(--ds-font-size-base);
}

/* Bottom header items container */
.header__items--bottom {
  display: none;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__items--bottom {
    display: block;
    grid-area: bottom;
  }
}

.header__product-menu {
  text-transform: uppercase;
  font-weight: var(--ds-font-weight-black);
  padding: var(--ds-padding-md) var(--ds-padding-xl);
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__product-menu {
    width: unset;
    padding: var(--ds-padding-lg);
    gap: var(--ds-spacer-3);
  }
}

/* Navigation item within the bottom items */
.header__item--navigation {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
  width: fit-content;
  /* Cap at parent width so flex-wrap can actually wrap when the nav's
     intrinsic single-line width exceeds the available space. Without
     this, fit-content grows to max-content and items spill past the
     header (e.g. "New" is cut off when the sidebar is open). */
  max-width: 100%;
}

.header__item--cart {
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-3);
}
.header__item--cart svg {
  height: var(--ds-icon-6);
}
.header__item--cart .header__item--cart-text {
  display: none;
  overflow: hidden;
  /* max-width (not a fixed width): short cart names hug their content so the
     dropdown caret sits next to them, while long names still truncate at
     10vw with the hover tooltip. A fixed width padded short names out and
     pushed the caret far to the right (SQMAKITA-3213). */
  max-width: 10vw;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__item--cart .header__item--cart-text {
    display: block;
    color: var(--ds-text-primary);
    font-weight: var(--ds-font-weight-bold);
  }
}
.header__item--cart .header__item--cart-number-text {
  display: none;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__item--cart .header__item--cart-number-text {
    display: block;
    color: var(--ds-text-primary);
    font-weight: var(--ds-font-weight-normal);
  }
}

/* Cart label + caret visibility, replacing the Bootstrap d-none/d-lg-block
   utilities that used to be hard-coded in MiniCart's markup. Base (mobile):
   the cart is an icon with the count bubble; from $md-breakpoint up the
   name/count text and the caret appear instead. The dealerzone container
   band below re-hides them and re-shows the bubble for the icon-only state —
   all without !important, which is exactly why the markup no longer carries
   the d-lg-* utilities (a stylesheet can't beat their !important cleanly). */
.header__item--cart-label,
.header__item--cart-caret {
  display: none;
}

/* stylelint-disable */
@media (width >= 992px) {
  .header__item--cart-label,
  .header__item--cart-caret {
    display: block;
  }
  /* Redundant on desktop-expanded (the count sits in the label text). */
  .header__item--cart .header__item--cart-badge {
    display: none;
  }
}
/* stylelint-enable */
/* Size the cart caret to match the language and user-menu carets (1rem).
   Without this it inherits the 1.5rem .header__controls .user-menu__icon
   size, which read as an inconsistently large caret next to the others. */
.header__controls .header__item--cart .header__item--cart-caret {
  width: var(--ds-icon-5, 1rem);
  height: var(--ds-icon-5, 1rem);
}

/* Sidebar menu button and logo for mobile version */
.header__item--sidebar-menu {
  margin-right: var(--ds-margin-lg);
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__item--sidebar-menu {
    margin-right: 0;
  }
}

.header__item--sidebar-menu .user-menu__icon {
  width: var(--ds-icon-7, 1.5rem);
  height: var(--ds-icon-7, 1.5rem);
}

.header__item--mobile-logo,
.header__item--sidebar-menu {
  display: block;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width >= 992px) {
  .header__item--mobile-logo,
  .header__item--sidebar-menu {
    display: none;
  }
}

.header__item--mobile-logo img {
  width: 6.5rem;
  height: auto;
}

/* stylelint-disable*/
@media (width < 992px) {
  .header__controls .user-menu__icon,
  .header__item--notifications .header-notification__icon {
    color: var(--ds-icon-primary);
  }
  .header__items {
    display: grid;
    grid-template-areas: "menu  bell    logo   controls" "search search search search";
    grid-template-columns: 1fr 1fr auto 2fr;
  }
  .header__items .header__item--sidebar-menu {
    grid-area: menu;
  }
  .header__items .header__item--notifications {
    grid-area: bell;
  }
  .header__items .header__item--mobile-logo {
    grid-area: logo;
    justify-self: center;
  }
  .header__items .header__controls {
    grid-area: controls;
    flex-wrap: nowrap;
  }
  .header__items .header__item--search {
    grid-area: bottom;
    grid-column: 1/-1;
    min-width: 100%;
    max-width: 100%;
  }
}
@media (width < 400px) {
  .header__items .header__item--search {
    min-width: calc(100% - var(--ds-padding-lg));
    max-width: calc(100% - var(--ds-padding-lg));
    /* Without this, the grid item defaults to start-aligned (justify-self: stretch falls back to
       start once max-width clamps it below the full track width) — the missing padding-lg's worth
       of width all lands on the right, doubling up with .header's own right padding while the left
       only has .header's padding. Centering splits the deficit evenly, so left and right match. */
    margin-inline: auto;
  }
  .header__item--sidebar-menu {
    margin-right: 0;
  }
  .header__items {
    row-gap: 0.375rem;
  }
}
/* stylelint-enable */
.menu-item--dropdown {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-3);
  padding: var(--ds-spacer-3) var(--ds-spacer-5);
  margin-bottom: 0;
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-body);
  font-family: var(--ds-font-family-base);
  font-size: var(--ds-font-size-base);
  line-height: normal;
  text-decoration: none;
}

.menu-item__icon--dropdown {
  height: var(--ds-icon-7, 1.5rem);
  margin-block: auto;
}

.menu-item--dropdown:hover {
  color: var(--ds-teal-ui-darken-24);
  text-decoration-line: none;
}
.menu-item--dropdown:hover .menu-item__icon--dropdown {
  color: var(--ds-teal-ui-darken-24);
}

/* SHARED CSS */
/* label */
.form-group__label {
  font-weight: var(--ds-font-weight-bold);
  display: flex;
  gap: var(--ds-spacer-3);
  font-size: var(--ds-font-size-label);
  color: var(--ds-text-primary);
}

.form-group__required-indicator,
.form-group__label > .form-group__required-indicator {
  color: var(--ds-red-100);
}

/* Size, border, colors .... */
.form-group__shared, .form-group__select {
  border: 1px solid var(--ds-form-input-border);
  background-color: var(--ds-form-input-bg);
  box-shadow: none;
  border-radius: var(--ds-radius-sm);
}

.form-group__shared:hover, .form-group__select:hover {
  border: 1px solid var(--ds-form-input-border-hover);
  background-color: var(--ds-form-input-bg-hover);
}

.form-group__shared:active, .form-group__select:active,
.form-group__shared:focus,
.form-group__select:focus {
  border: 1px solid var(--ds-form-input-border-active);
  background-color: var(--ds-form-input-bg-active);
}

.form-group__shared:disabled, .form-group__select:disabled {
  cursor: not-allowed;
  background-color: var(--ds-form-input-bg-disabled);
}

.form-group__shared[readonly], [readonly].form-group__select {
  background-color: var(--ds-form-input-bg-disabled);
}

/* INPUT ADN TEXTAREA CSS */
.form-group__input-box {
  position: relative;
  min-width: 6rem;
}

/* Input tag */
.form-group__input {
  height: var(--ds-input-small);
}
@media (width > 992px) {
  .form-group__input {
    height: var(--ds-input-large);
  }
}

.form-group__input.form-group__textArea {
  font-size: var(--ds-font-size-text-sm);
  padding: var(--ds-padding-md) var(--ds-padding-sm);
}
@media (width > 992px) {
  .form-group__input.form-group__textArea {
    font-size: var(--ds-font-size-base);
    padding: var(--ds-padding-lg) var(--ds-padding-md);
  }
}

/* Input with icon position variations */
.form-group__input.form-group__input--icon-before {
  padding-left: 2.25rem;
}
@media (width > 992px) {
  .form-group__input.form-group__input--icon-before {
    padding-left: 2.75rem;
  }
}

.form-group__input.form-group__input--icon-after {
  padding-right: 2.25rem;
}
@media (width > 992px) {
  .form-group__input.form-group__input--icon-after {
    padding-right: 2.75rem;
  }
}

/* Input tag state variations */
.form-group__input:disabled ~ .form-group__icon {
  color: var(--ds-black-32);
}

/* Icon */
.form-group__icon {
  height: var(--ds-icon-6);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.form-group__icon.form-group__icon--before {
  left: var(--ds-padding-sm);
}
@media (width > 992px) {
  .form-group__icon.form-group__icon--before {
    left: var(--ds-padding-md);
  }
}

.form-group__icon.form-group__icon--after {
  right: var(--ds-padding-sm);
}
@media (width > 992px) {
  .form-group__icon.form-group__icon--after {
    right: var(--ds-padding-md);
  }
}

/* SELECT */
/* styles */
.form-group__select {
  width: 100%;
  height: var(--ds-input-small);
  font-size: var(--ds-font-size-text-sm);
  /* Theme-aware, not a raw --ds-black-*: selects render inside dark-mode wrappers too
     (e.g. the DealerZone guest self-registration page, which sets data-use-dark-mode).
     There --ds-form-input-bg flips to --ds-black-96, so a hardcoded black was invisible.
     Text inputs get their colour from Clay's .form-control; selects don't carry that
     class, so the token has to be applied here. */
  color: var(--ds-text-primary);
  padding: var(--ds-padding-md) var(--ds-padding-sm);
  transition: 0.4s;
  /* Style placeholder option */
}
@media (width > 992px) {
  .form-group__select {
    height: var(--ds-input-large);
    font-size: var(--ds-font-size-base);
    padding: var(--ds-padding-lg) var(--ds-padding-md);
  }
}
.form-group__select:hover {
  border: 1px solid var(--ds-form-input-border-hover);
  background-color: var(--ds-form-input-bg-hover);
}
.form-group__select:focus, .form-group__select:active {
  border: 1px solid var(--ds-form-input-border-active);
  background-color: var(--ds-form-input-bg-active);
}
.form-group__select:disabled {
  cursor: not-allowed;
  background-color: var(--ds-form-input-bg-disabled);
  border-color: var(--ds-form-input-border-disabled);
  color: var(--ds-black-32);
}
.form-group__select.is-invalid {
  border-color: var(--ds-red-100);
  background-color: var(--ds-form-input-bg);
}
.form-group__select option[disabled][hidden] {
  color: var(--ds-black-32);
}

/* Generic option styles - kept outside .form-group__select for compatibility
   with select elements that don't use the class (e.g., checkout, spare-parts) */
option {
  border: 2px solid var(--ds-form-input-border);
  background: var(--ds-form-input-bg);
  color: var(--ds-text-primary);
  padding: 10px;
  transition: 0.4s;
}

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:hover,
option:focus {
  background: var(--ds-form-input-bg-hover);
}

option:checked {
  background: var(--ds-teal-ui-darken-24);
  color: var(--ds-white-100);
  font-weight: bold;
}

option::checkmark {
  order: 1;
  margin-left: auto;
  content: "✔";
}

option:not(:last-of-type) {
  border-bottom: none;
}

/* CHECKBOX AND RADIO */
.form-group__wrapper {
  display: flex;
  gap: var(--ds-spacer-6);
}

.form-group__wrapper--column {
  flex-direction: column;
  align-items: flex-start;
}

.form-group__wrapper--row {
  flex-flow: row wrap;
  align-items: center;
}

/* CHECKBOX */
.form-group__checkbox-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  gap: var(--ds-spacer-4);
}

.form-group__checkbox {
  appearance: none;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  position: relative;
  transition: border 300ms ease-out, background-color 300ms ease-out;
  cursor: pointer;
}

.form-group__checkbox:checked {
  background-color: var(--ds-teal-100);
  border-color: transparent;
}

.form-group__checkbox[data-is-readonly=true] {
  pointer-events: none;
}

.form-group__checkbox:disabled,
.form-group__checkbox[data-is-readonly=true] {
  background-color: var(--ds-black-16);
  border: 1px solid var(--ds-black-48);
}

/* The Cookie Information banner injects an unscoped
   `input[type="checkbox"]:disabled { opacity: 0; }` into <body>, which
   hides every disabled checkbox on the page once the banner loads (not on
   LOCAL, where the banner has no config). Its selector is (0,2,1) and comes
   later, so the override needs a higher specificity, not just a later rule. */
input[type=checkbox].form-group__checkbox:disabled {
  opacity: 1;
}

.form-group__checkbox:not([data-input-style=toggle]):checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.875rem;
  height: 0.5rem;
  border: solid var(--ds-white-100);
  border-width: 0 0 2px 2px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.form-group__checkbox:disabled:checked::after,
.form-group__checkbox[data-is-readonly=true]:checked::after {
  /* Was --ds-black-48 (52% lightness) against the disabled box's own
     --ds-black-16 (84% lightness) background - ~2.3:1 contrast, so a
     checked+disabled checkbox (e.g. dealer-locator's default, locked-in
     location type) read as empty/invisible. --ds-black-88 (~12%
     lightness) gives the checkmark enough contrast to actually show. */
  border: solid var(--ds-black-88);
  border-width: 0 0 2px 2px;
}

.form-group__checkbox:not(:checked) {
  border-color: var(--ds-form-input-border);
  animation: showBorder 300ms ease-out forwards;
}

/* checkbox label */
.form-group__label--checkbox {
  display: inline;
  margin-bottom: 0;
  font-weight: var(--ds-font-weight-normal);
  gap: 6px;
}

.form-group__checkbox[data-is-readonly=true] ~ .form-group__label--checkbox {
  pointer-events: none;
}

/* CHECKBOX TOGGLE */
.form-group__checkbox[data-input-style=toggle] {
  width: 2.625rem;
  height: 1.5rem;
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-black-16);
  border: 1px solid var(--ds-black-48);
  position: relative;
  transition: background-color 300ms ease-out, border 300ms ease-out;
}

/* toggle button */
.form-group__checkbox[data-input-style=toggle]::after {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background: var(--ds-white-100);
  position: absolute;
  top: 50%;
  left: 3px;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: left 300ms ease-out;
  border-color: 1px solid var(--ds-black-48);
}

.form-group__checkbox[data-input-style=toggle]:hover {
  border: 1px solid var(--ds-form-input-border-hover);
  transition: background-color 300ms ease-out, border 300ms ease-out;
}

.form-group__checkbox[data-input-style=toggle]:checked {
  background-color: var(--ds-teal-100);
  border-color: var(--ds-teal-100);
}

/* active button */
.form-group__checkbox[data-input-style=toggle]:checked::after {
  left: calc(100% - 1.3rem);
  border-color: transparent;
}

.form-group__checkbox[data-input-style=toggle]:disabled,
.form-group__checkbox[data-input-style=toggle][data-is-readonly=true] {
  background-color: var(--ds-black-16);
  border-color: var(--ds-black-48);
  cursor: not-allowed;
}

.form-group__checkbox[data-input-style=toggle]:disabled::after,
.form-group__checkbox[data-input-style=toggle][data-is-readonly=true]::after {
  background: var(--ds-black-48);
}

.form-group__checkbox[data-input-style=toggle]:not(:checked) {
  border-color: var(--ds-black-48);
}

/* RADIO BUTTONS */
/* radio button wrapper */
.form-group__radio-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  gap: var(--ds-spacer-4);
}

.form-group__label-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: var(--ds-spacer-4);
}

.form-group__radio:hover {
  border: 1px solid var(--ds-form-input-border-hover);
  background-color: var(--ds-form-input-bg-hover);
}

/* radio button input */
.form-group__radio {
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--ds-form-input-border);
  border-radius: 50%;
  background-color: var(--ds-white-100);
  position: relative;
  transition: border 300ms ease-out, background-color 300ms ease-out;
  cursor: pointer;
}

.form-group__radio:checked {
  background-color: var(--ds-teal-100);
  border-color: var(--ds-teal-100);
}

/* check */
.form-group__radio:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.563rem;
  height: 0.563rem;
  background-color: var(--ds-white-100);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.form-group__radio:disabled:hover {
  background-color: var(--ds-black-16);
  border-color: var(--ds-black-48);
  cursor: not-allowed;
}

.form-group__radio:disabled:checked::after {
  background-color: var(--ds-black-48);
}

.form-group__radio:not(:checked) {
  animation: showBorder 300ms ease-out forwards;
}

/* RADIO BUTTON CARD STYLE */
.form-group__wrapper--card {
  border: 1px solid var(--ds-form-input-border);
  border-radius: var(--ds-radius-lg);
  gap: 0;
}

.form-group__radio-wrapper--card {
  border-bottom: 1px solid var(--ds-form-input-border);
  width: 100%;
  padding: var(--ds-padding-lg) var(--ds-padding-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--ds-spacer-5);
  background-color: var(--ds-white-100);
}

.form-group__radio-wrapper--card:first-of-type {
  border-top-right-radius: var(--ds-radius-lg);
  border-top-left-radius: var(--ds-radius-lg);
}

.form-group__radio-wrapper--card:last-of-type {
  border-bottom: none;
  border-bottom-right-radius: var(--ds-radius-lg);
  border-bottom-left-radius: var(--ds-radius-lg);
}

.form-group__label--radio-card {
  grid-column-start: 2;
  padding: unset;
  gap: var(--ds-spacer-4);
}

.form-group__label--checkbox-icon {
  height: 20px;
}

.form-group__label--description {
  font-size: var(--ds-font-size-text-sm);
  color: var(--ds-text-secondary);
  grid-column: 2;
  grid-row: 2;
}

.form-group__radio-wrapper--card.selected {
  background-color: var(--ds-bg-soft);
}

/* PASSWORD DOUBLE INPUT */
.form-group__input-box--password {
  margin-bottom: var(--ds-margin-xxl);
}

.position-relative {
  position: relative;
}

.toggle-password-visibility {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.toggle-password-visibility svg {
  width: 20px;
  height: 20px;
  fill: #666666;
}

/* SEARCH */
.search__wrapper {
  position: relative;
  width: 100%;
}
@media (width > 992px) {
  .search__wrapper {
    height: 72px;
    background-color: var(--ds-black-4);
    border-radius: 1rem;
    padding: var(--ds-padding-sm);
  }
}

.search__input {
  padding-left: var(--ds-padding-xxxl);
  height: var(--ds-input-small);
  width: 100%;
  border-color: var(--ds-black-24);
  color: var(--ds-text-secondary);
  /* iOS Safari auto-zooms the page when a focused text input resolves to a font-size
     below 16px, and the zoom sticks even after navigating away. .form-control inherits
     font-size from --ds-font-size-base, which drops to 0.938rem (~15px) below
     $large-breakpoint, so pin this input to 16px explicitly instead of inheriting it. */
  font-size: 16px;
}
@media (width > 992px) {
  .search__input {
    height: var(--ds-input-large);
  }
}

.search__button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
@media (width > 992px) {
  .search__button {
    left: 24px;
  }
}
@media (width > 992px) {
  .search__button svg {
    height: var(--ds-icon-7);
  }
}

.search__overlay-placeholder {
  position: absolute;
  top: 50%;
  left: 2.25rem;
  right: 12px;
  transform: translateY(-50%);
  color: var(--ds-text-secondary);
  pointer-events: none;
  white-space: normal;
  line-height: 1.3;
}
@media (width > 992px) {
  .search__overlay-placeholder {
    left: 2.75rem;
    right: var(--ds-spacer-7);
  }
}

.search__overlay-placeholder--hidden {
  display: none;
}

.search__wrapper--wrap-placeholder {
  display: grid;
}
@media (width > 992px) {
  .search__wrapper--wrap-placeholder {
    height: auto;
    min-height: 72px;
  }
}
.search__wrapper--wrap-placeholder .search__input,
.search__wrapper--wrap-placeholder .search__overlay-placeholder {
  grid-area: 1/1;
}
.search__wrapper--wrap-placeholder .search__input {
  height: auto;
  min-height: var(--ds-input-small);
}
@media (width > 992px) {
  .search__wrapper--wrap-placeholder .search__input {
    min-height: var(--ds-input-large);
  }
}
.search__wrapper--wrap-placeholder .search__overlay-placeholder {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  padding: var(--ds-spacer-3) 12px var(--ds-spacer-3) calc(var(--ds-padding-xxxl) + 1px);
  font-size: 16px;
}
.search__wrapper--wrap-placeholder .search__overlay-placeholder--hidden {
  display: none;
}

.search__clear-button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: var(--ds-black-64);
}
.search__clear-button svg {
  height: var(--ds-icon-5);
}
@media (width > 992px) {
  .search__clear-button {
    right: var(--ds-spacer-7);
  }
}
.search__clear-button:hover {
  color: var(--ds-black-100);
}

.search__input::-webkit-search-cancel-button {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: none;
  appearance: none;
}

/* LIFRAY INPUTS IN DARK MODE */
[data-use-dark-mode] .has-error .form-control {
  background-color: var(--ds-error-bg);
}

/* ANIMATIONS */
@keyframes showBorder {
  from {
    border-color: transparent;
  }
  to {
    border-color: var(--ds-form-input-border);
  }
}
@keyframes hideBorder {
  from {
    border-color: var(--ds-form-input-border);
  }
  to {
    border-color: transparent;
  }
}
.table {
  --table-heading-radius: 1rem;
  /* border-collapse: separate (with border-spacing: 0) is required to allow
     border-radius on th/td cells. The thead background is applied directly
     to cells rather than via a position:absolute ::before pseudo-element —
     position:relative on <thead> does not create a containing block on WebKit,
     causing the pseudo-element to expand to full viewport size and paint a
     gray overlay over the entire page on iOS. */
  border-collapse: separate;
  border-spacing: 0;
}

.table.use-auto-layout {
  table-layout: auto !important;
}

.table th {
  padding-top: 0;
  padding-bottom: 0;
  height: 2rem;
}

.table-responsive {
  transform: translateZ(0);
}

.table-sort thead th:hover,
.table-sort thead td:hover {
  background-color: var(--ds-bg-soft);
  color: var(--ds-text-primary);
}

@media (hover: hover) and (pointer: fine) {
  .table-sort thead th:hover,
  .table-sort thead td:hover {
    background-color: var(--ds-bg-faded-teal);
  }
  .table-hover tbody tr:hover {
    background-color: var(--ds-bg-faded-teal);
    color: var(--ds-text-primary);
  }
}
.table thead th,
.table thead td {
  background-color: var(--ds-bg-soft);
  border-bottom-width: 0;
}

.table th:first-child {
  border-top-left-radius: var(--table-heading-radius);
  border-bottom-left-radius: var(--table-heading-radius);
}

.table th:last-child {
  border-top-right-radius: var(--table-heading-radius);
  border-bottom-right-radius: var(--table-heading-radius);
  text-align: right;
}

.table-head-title,
.table-sort thead th .component-action,
.table-sort thead td .component-action {
  font-size: var(--ds-font-size-text-md);
}

.table-list {
  border-color: transparent;
}

.table tbody tr:first-child > td,
.table tbody tr:first-child > th {
  border-top: 0;
}

.tooltip__wrapper {
  position: relative;
  display: inline-block;
}

.tooltip__trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.tooltip__content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 0.75rem;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 240px;
}

.tooltip__text {
  font-weight: var(--ds-font-weight-normal);
}

@media (hover: hover) and (pointer: fine) {
  .tooltip__wrapper:hover .tooltip__content {
    display: block;
  }
}
.tooltip__content.active {
  display: block;
}

/* REACT COMPONENT */
.tooltip__wrapper--react {
  position: relative;
  display: inline-block;
}

.tooltip__content--react {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  /* Base centering, adjusted by --tooltip-shift (set in Tooltip.tsx) to stay inside the viewport */
  transform: translateX(calc(-50% + var(--tooltip-shift, 0px)));
  z-index: 10;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 0.75rem;
  font-size: 0.875rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 480px;
  max-width: calc(100vw - 32px);
  white-space: normal;
  text-align: left;
  font-weight: var(--ds-font-weight-normal);
}

/* Flipped above the trigger when there isn't room below (set in Tooltip.tsx) */
.tooltip__content--react[data-placement=top] {
  top: auto;
  bottom: calc(100% + 6px);
}

@media (hover: hover) and (pointer: fine) {
  .tooltip__trigger--react:hover ~ .tooltip__content--react {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}
.tooltip__trigger--react:focus-visible ~ .tooltip__content--react {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Tap-to-toggle for touch devices (no hover support) */
.tooltip__content--react.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* MODAL */
.modal__header {
  padding: var(--ds-padding-xl) var(--ds-padding-xxl);
  border: none;
  height: fit-content;
  min-height: 4.5rem;
}

.modal__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-spacer-5);
  text-overflow: unset;
  white-space: wrap;
}
.modal__title h3 {
  margin-bottom: 0;
}

.modal__header--icon {
  background-color: var(--ds-bg-brand-teal);
  border-radius: 100px;
  padding: var(--ds-padding-sm);
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__header--icon svg {
  height: 1.25rem;
  width: 1.25rem;
  color: var(--ds-white-100);
}

.modal__body {
  height: fit-content;
  padding: var(--ds-padding-xxl);
}

/* Every confirmation dialog is one width, the width of the design's modal frames. */
@media (width >= 576px) {
  .confirmation-modal--md .modal-dialog {
    max-width: 40rem;
  }
}
.modal__footer {
  height: fit-content;
}

/*
 * Footer actions sit together at the right edge, secondary first. Clay renders all three footer items
 * (first, middle, last) whether or not they hold anything, gives the middle one flex-grow and the last
 * one margin-left: auto, which together push the primary action away from the others. Undo both, drop
 * the empty items so they add no gap, and let the gap do the spacing.
 */
.confirmation-modal__footer {
  justify-content: flex-end;
  gap: var(--ds-spacer-3);
  padding: var(--ds-padding-lg) var(--ds-padding-xxl);
}
.confirmation-modal__footer .modal-item-first,
.confirmation-modal__footer .modal-item,
.confirmation-modal__footer .modal-item-last {
  flex-grow: 0;
  margin: 0;
}
.confirmation-modal__footer .modal-item-first:empty,
.confirmation-modal__footer .modal-item:empty,
.confirmation-modal__footer .modal-item-last:empty {
  display: none;
}

@media (width < 576px) {
  .confirmation-modal__footer {
    flex-wrap: wrap;
  }
  .confirmation-modal__footer .modal-item-first,
  .confirmation-modal__footer .modal-item,
  .confirmation-modal__footer .modal-item-last {
    width: 100%;
  }
  .confirmation-modal__footer .modal-item-first .btn,
  .confirmation-modal__footer .modal-item .btn,
  .confirmation-modal__footer .modal-item-last .btn {
    justify-content: center;
    width: 100%;
  }
}
/*
 * While a ConfirmationModal is `busy` (a request the user must not interrupt), the header [x] must
 * not be usable (SQMAKITA-3667). ConfirmationModal sets the native `disabled` attribute on it, which
 * blocks clicks and keyboard focus; here it is shown disabled, like the footer's secondary button,
 * rather than hidden. Esc and backdrop click are covered by Clay's own disableAutoClose.
 */
.modal-header .close:disabled,
.modal-header .close:disabled:hover,
.modal-header .close:disabled:focus {
  background: none;
  box-shadow: none;
  cursor: not-allowed;
}

.heading-button-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-spacer-3);
  margin-bottom: var(--ds-spacer-5);
}

@media (width < 992px) {
  .heading-button-layout__button {
    width: 100%;
  }
  .heading-button-layout__button .btn {
    width: 100%;
  }
}
.heading-with-icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-spacer-5);
}
.heading-with-icon .heading-with-icon__heading {
  min-width: 0;
  overflow-wrap: anywhere;
}
.heading-with-icon[data-visual-size=h1] {
  gap: 2rem;
  font-size: var(--ds-font-size-h1);
}
.heading-with-icon[data-visual-size=h1] .heading-with-icon__heading {
  font-size: var(--ds-font-size-h1);
}
.heading-with-icon[data-visual-size=h1] .heading-with-icon__icon-circle {
  width: 72px;
  height: 72px;
  padding: var(--ds-padding-lg);
}
.heading-with-icon[data-visual-size=h1] .heading-with-icon__icon-circle svg {
  width: 40px;
  height: 40px;
}
.heading-with-icon[data-visual-size=h2] {
  gap: 1.5rem;
  font-size: var(--ds-font-size-h2);
}
.heading-with-icon[data-visual-size=h2] .heading-with-icon__heading {
  font-size: var(--ds-font-size-h2);
}
.heading-with-icon[data-visual-size=h2] .heading-with-icon__icon-circle {
  width: 56px;
  height: 56px;
  padding: var(--ds-padding-md);
}
.heading-with-icon[data-visual-size=h2] .heading-with-icon__icon-circle svg {
  width: 32px;
  height: 32px;
}
.heading-with-icon[data-visual-size=h4] {
  gap: 1rem;
  font-size: var(--ds-font-size-h4);
}
.heading-with-icon[data-visual-size=h4] .heading-with-icon__heading {
  font-size: var(--ds-font-size-h4);
}
.heading-with-icon[data-visual-size=h4] .heading-with-icon__icon-circle {
  width: 40px;
  height: 40px;
  padding: 8px;
}
.heading-with-icon[data-visual-size=h4] .heading-with-icon__icon-circle svg {
  width: 24px;
  height: 24px;
}

.heading-with-icon__icon-circle {
  background-color: var(--ds-bg-brand-teal);
  border-radius: 100px;
  padding: var(--ds-padding-md);
  flex-shrink: 0;
}
.heading-with-icon__icon-circle svg {
  height: 2rem;
  width: 2rem;
  color: var(--ds-white-100);
  display: block;
}

.heading-with-icon--default-margin {
  margin-bottom: var(--ds-spacer-5);
}

.side-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--side-panel-width);
  height: 100%;
  background-color: var(--ds-bg-body);
  z-index: 1000;
  overflow-y: auto;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  transform: translateX(-100%);
  padding: 0;
  --side-panel-padding: var(--ds-padding-lg, 1rem);
  --side-panel-width: 350px;
  /* stylelint-disable*/
  /* stylelint-enable */
}
.side-panel.open {
  /* stylelint-disable*/
  transform: translateX(0px);
  /* stylelint-enable */
  box-shadow: var(--ds-shadow-lg);
}
@media screen and (min-width: 768px) {
  .side-panel {
    --side-panel-padding: var(--ds-padding-xl, 1.5rem);
    --side-panel-width: 380px;
  }
}

.mini-cart-side-panel {
  position: fixed;
  top: var(--ds-padding-lg);
  right: 0;
  width: var(--side-panel-width);
  height: calc(100% - 2rem);
  background-color: var(--ds-bg-body);
  z-index: 1000;
  transition: all 200ms ease;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  padding: 0;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  overscroll-behavior: contain;
  --side-panel-padding: var(--ds-padding-lg, 1rem);
  --side-panel-width: 350px;
}

.mini-cart-side-panel.open {
  transform: translateX(-1rem);
  box-shadow: var(--ds-shadow-lg);
}

body.no-scroll {
  overflow: hidden;
}

/* stylelint-disable*/
@media screen and (min-width: 768px) {
  .mini-cart-side-panel {
    --side-panel-padding: var(--ds-padding-xl, 1.5rem);
    --side-panel-width: 380px;
  }
}
@media (max-width: 768px) {
  .mini-cart-side-panel {
    width: 100%;
  }
  .mini-cart-side-panel.open {
    transform: translateX(0); /* avoid horizontal overflow */
  }
}
/* stylelint-enable */
.side-panel-header {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: var(--ds-spacer-5);
  border-bottom: 1px solid var(--ds-border-default);
  padding: var(--side-panel-padding);
}
.side-panel-header > span {
  background-color: var(--ds-bg-brand-teal);
  border-radius: 100px;
  padding: var(--ds-padding-md);
}
.side-panel-header > span svg {
  width: var(--ds-icon-7, 1.5rem);
  height: var(--ds-icon-7, 1.5rem);
}
.side-panel-header .close-btn {
  margin-left: auto;
}
.side-panel-header .close-btn > svg {
  width: var(--ds-icon-9, 2rem);
  height: var(--ds-icon-9, 2rem);
}

.side-panel-body {
  padding: var(--side-panel-padding);
  max-height: 80vh;
  overflow: auto;
  /* stylelint-disable*/
  /* stylelint-enable */
}
@media (width < 992px) {
  .side-panel-body {
    max-width: 95vw;
  }
}

.side-panel-footer {
  border-top: 1px solid var(--ds-border-default);
  padding: var(--side-panel-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-spacer-5);
  margin-top: auto;
}

.backdrop {
  background-color: var(--ds-black-100);
  opacity: 0.4;
  position: fixed;
  width: 100vw;
  top: 0;
  right: 0;
  height: 100vh;
}

.no-scroll {
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 16px;
  text-align: left;
  cursor: pointer;
}

.icon-before {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Accordion titles can embed user input such as a 30-character serial number. Without this the
     header is sized by its min-content width, pushing the expand icon off screen (SQMAKITA-3543). */
  min-width: 0;
}

.title {
  font-size: 16px;
  font-weight: 600;
}

.accordion-header .title {
  overflow-wrap: anywhere;
}

.sub-text {
  font-size: 13px;
  color: var(--ds-black-64);
  margin-top: 2px;
}

/* stylelint-disable*/
.accordion {
  margin-bottom: var(--ds-spacer-6);
}
.accordion .accordion-header {
  background-color: var(--ds-accordion-bg);
  padding: var(--ds-padding-md);
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-accordion-bg);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ds-spacer-5);
}
@media screen and (min-width: 768px) {
  .accordion .accordion-header {
    padding: var(--ds-padding-lg);
  }
}
.accordion .accordion-header .title {
  font-weight: bold;
  color: var(--ds-accordion-title);
  text-align: left;
}
.accordion .accordion-header svg {
  color: var(--ds-accordion-icon);
  width: var(--ds-icon-7);
  height: var(--ds-icon-7);
  flex-shrink: 0;
}
.accordion .accordion-header:hover {
  background-color: var(--ds-accordion-bg--hover);
  border: 1px solid var(--ds-accordion-title);
}
.accordion .accordion-header:hover .title {
  color: var(--ds-accordion-title--hover);
}
.accordion .accordion-header:hover button svg {
  color: var(--ds-accordion-icon--hover);
}

.accordionBody {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.accordionBodyOpen {
  grid-template-rows: 1fr;
}

.accordionBodyInner {
  overflow: hidden;
  min-height: 0;
}

/* stylelint-enable */
.tabs-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-spacer-4);
  margin-bottom: var(--ds-margin-md);
}
@media screen and (width >= 992px) {
  .tabs-header {
    margin-bottom: var(--ds-margin-xxl);
  }
}
.tabs-header .tabs {
  margin-bottom: 0;
}
.tabs-header-end .btn.btn {
  min-height: 0;
}
.tabs-header-end .btn.btn.squared {
  padding: var(--ds-padding-md);
}

.tabs {
  margin-bottom: var(--ds-margin-md);
  flex-direction: column;
  border: 0;
}
@media screen and (width >= 992px) {
  .tabs {
    margin-bottom: var(--ds-margin-xxl);
    gap: 0;
    flex-direction: row;
  }
}
.tabs .tab-item button {
  font-size: var(--ds-font-size-h6);
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-teal-ui-darken-8);
  padding: var(--ds-padding-md) var(--ds-padding-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  border: 1px solid var(--ds-border-default);
  background-color: transparent;
  transition: all 0.2s ease;
  border-radius: 0;
  border-color: var(--ds-border-default);
}
.tabs .tab-item button:hover {
  color: var(--ds-teal-ui-darken-24);
  border-color: var(--ds-black-32);
}
.tabs .tab-item button:hover svg {
  color: var(--ds-teal-ui-darken-24);
}
.tabs .tab-item button svg {
  width: var(--ds-icon-7);
  height: var(--ds-icon-7);
  color: var(--ds-teal-ui-darken-8);
}
.tabs .tab-item button.active {
  color: var(--ds-white-100);
  background-color: var(--ds-teal-ui-darken-8);
  border: 1px solid var(--ds-teal-ui-darken-8);
}
.tabs .tab-item button.active:hover {
  background-color: var(--ds-button-primary-bg-hover);
}
.tabs .tab-item button.active svg {
  color: var(--ds-white-100);
}
@media screen and (width >= 992px) {
  .tabs .tab-item:not(:last-child) button {
    border-right: none;
  }
}

.tab-item:last-child button {
  border-bottom-left-radius: var(--ds-radius-sm);
  border-bottom-right-radius: var(--ds-radius-sm);
}
@media screen and (width >= 992px) {
  .tab-item:last-child button {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--ds-radius-sm);
    border-bottom-right-radius: var(--ds-radius-sm);
  }
}

.tab-item:first-child button {
  border-top-left-radius: var(--ds-radius-sm);
  border-top-right-radius: var(--ds-radius-sm);
}
@media screen and (width >= 992px) {
  .tab-item:first-child button {
    border-top-right-radius: 0;
    border-top-left-radius: var(--ds-radius-sm);
    border-bottom-left-radius: var(--ds-radius-sm);
  }
}

/* =====================================================================
   Link Card — reusable container (works on div, li, section, article…)
   ===================================================================== */
.link-card {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border-default);
  background: var(--ds-bg-body);
  box-sizing: border-box;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.link-card > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  background: transparent;
}

.link-card,
.link-card > a {
  cursor: pointer;
}

.link-card:hover {
  box-shadow: var(--ds-shadow-lg);
}

@media (prefers-reduced-motion: no-preference) {
  .link-card:hover {
    transform: translateY(-4px);
  }
  .link-card:active {
    transform: translateY(-2px);
  }
  .link-card:focus-within {
    transform: translateY(-4px);
  }
}
/* Active/Focus */
.link-card:active {
  box-shadow: var(--ds-shadow-sm);
}

.link-card:focus,
.link-card:focus-within {
  outline: none;
}

.link-card:focus-within {
  box-shadow: 0 0 0 0.2rem var(--ds-teal-80);
}

.card {
  border-color: var(--ds-border-default, hsl(0deg, 0%, 20%));
  border-width: 1px;
  margin: 0;
}

.card-body {
  padding: var(--ds-padding-lg);
}

.card-title {
  font-size: var(--ds-font-size-h4, 1.75rem);
  font-weight: var(--ds-font-weight-bold, 700);
}

.price strong,
.price .text_bold {
  font-weight: var(--ds-font-weight-bold);
}
.price .list-price {
  color: var(--ds-text-primary);
  font-weight: var(--ds-font-weight-bold);
  font-size: var(--ds-font-size-text-lg);
}
.price .price-on-sale {
  color: var(--ds-text-primary);
}
.price .price-number {
  display: flex;
  gap: var(--ds-spacer-6);
  position: relative;
  align-items: center;
}
@media (width < 576px) {
  .price .price-number {
    gap: var(--ds-spacer-4);
  }
}
.price .list-price.crossed {
  text-decoration: line-through;
  color: var(--ds-text-secondary);
}
.price .crossed {
  text-decoration: line-through;
}
.price .text-secondary {
  color: var(--ds-text-secondary) !important;
}
.price .starting-from {
  color: var(--ds-text-secondary);
  font-size: var(--ds-font-size-text-sm);
  font-weight: var(--ds-font-weight-normal);
}
.price .makita-font-h4 {
  font-variation-settings: normal;
}
.price .info-button {
  width: var(--ds-icon-9);
  height: var(--ds-icon-9);
  padding: 0;
}
.price .info-button svg {
  width: var(--ds-icon-6);
  height: var(--ds-icon-6);
}

.price-popover {
  padding: var(--ds-spacer-2);
  box-shadow: var(--ds-shadow-sm);
  font-family: var(--ds-font-family-base);
  width: 280px;
}
@media (width < 576px) {
  .price-popover {
    width: 220px;
  }
}
.price-popover .arrow {
  display: none;
}
.price-popover .price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--ds-spacer-5);
  gap: var(--ds-spacer-3);
  flex-wrap: nowrap;
}

.rrp-popover {
  height: 28px;
  cursor: pointer;
}

.overlay-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background: var(--ds-black-24);
  opacity: 0.75;
  backdrop-filter: blur(2px);
}

.overlay-loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  background: var(--ds-black-8);
  opacity: 0.9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.overlay-loader__message {
  margin-top: var(--ds-margin-md);
}

.overlay-loader__spinner {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0.15);
  border-top-color: rgba(0, 0, 0, 0.55);
  animation: overlay-loader-spin 0.9s linear infinite;
}

@keyframes overlay-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(90deg, var(--ds-black-8) 25%, var(--ds-black-16) 37%, var(--ds-black-8) 63%);
  background-size: 400% 100%;
  border-radius: var(--ds-radius-sm);
  animation: skeleton-shimmer 1.4s ease infinite;
}

.skeleton--circle {
  border-radius: 50%;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.product-badge {
  background: var(--ds-bg-soft-linear-gradient-dark);
  position: relative;
  border-top-left-radius: var(--ds-radius-sm);
  border-bottom-left-radius: var(--ds-radius-sm);
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-3);
  color: var(--ds-button-primary-content);
  padding: 0 var(--ds-spacer-3);
  font-size: var(--ds-font-size-text-sm);
  height: 28px;
  width: max-content;
}
.product-badge::after {
  content: "";
  position: absolute;
  right: -11.5px;
  background: var(--ds-bg-brand-teal);
  width: 12px;
  height: 100%;
  clip-path: path("M10.644 16.0529L5.29625 24.9961C4.18211 26.8593 2.1709 28 0 28V0C2.1709 0 4.18211 1.14071 5.29625 3.00391L10.644 11.9471C11.4 13.2113 11.4 14.7887 10.644 16.0529Z");
}
.product-badge svg {
  width: var(--ds-icon-5);
  height: var(--ds-icon-5);
  color: var(--ds-button-primary-content);
}

/* =====================================================================
   Consent Block — the resolved consent checkboxes rendered at a
   touchpoint by shared-components/ConsentBlock. Layout only: the
   checkbox itself reuses .form-group__checkbox so a consent tick looks
   like every other tick in the portal.
   ===================================================================== */
.consent-block {
  display: flex;
  flex-direction: column;
  /* Matches the form's field-to-field rhythm (--ds-spacing-md) so consent rows embedded in a
     registration form line up with the checkboxes above them, rather than sitting tighter. The
     multi-statement blocks only appear on the registration/terms forms; single-statement
     touchpoints (repair, checkout, dealer link) render one row, so the gap is moot there. */
  gap: var(--ds-spacing-md);
  /* The form's field fragments each sit in a .form-group (Bootstrap margin-bottom: 1rem), but
     consent-capture renders this block bare - so without a matching bottom margin the following
     row (e.g. the Cancel / Create Account buttons) hugs the last statement. Match .form-group so
     the block spaces like any other field. */
  margin-bottom: var(--ds-spacing-md);
}

/* A block placed by the consent-capture fragment follows the form's last field — usually a checkbox
   group — and its statements use that group's own rhythm, so with no extra space it reads as more
   options of the field above. Set it apart by about a line. A React form that renders ConsentBlock
   directly opts in with the modifier; the other embedders (checkout, repair, seminars, the dealer
   link modal) place the block themselves and are left alone. */
consent-capture .consent-block,
.consent-block--spaced {
  margin-top: var(--ds-spacing-lg);
}

.consent-block__item {
  align-items: flex-start;
  /* The wrapper is a flex ROW (checkbox + label). The error is a third child and has to drop
     beneath both rather than squeeze in beside them, so the row wraps and the message claims a
     full line of its own. */
  flex-wrap: wrap;
}

.consent-block__item .form-group__label--checkbox {
  /* Base size 0 so the sentence wraps INSIDE the label, next to the checkbox. A flex item only
     shrinks when it cannot wrap, and this row wraps by design (the error needs a line of its own),
     so with the default auto basis a consent sentence — always longer than one line — is pushed
     whole onto the line below, leaving the checkbox stranded on its own. */
  flex: 1;
  min-width: 0;
  /* The global `label` rule sets font-size: var(--ds-font-size-label) (0.875rem) with
     line-height: normal, so the label's own first line box is only ~1rem tall next to a
     1.5rem-square checkbox. .consent-block__item aligns this row with align-items: flex-start
     (needed so the checkbox anchors to the first line rather than centering across a wrapped
     multi-line sentence), which otherwise leaves the checkbox's top flush with a line box far
     shorter than it is — reading as misaligned. Matching the line-height to the checkbox's
     height puts the checkbox and the first line's midpoint back together. */
  line-height: 1.5rem; /* matches .form-group__checkbox's fixed height */
}

/* Zero-size flex item that exists only to force a wrap: its own flex-basis: 100% claims the
   remainder of the checkbox/label line so nothing can share a line with it, guaranteeing
   .consent-block__error always starts on a fresh line regardless of viewport width (rather than
   relying on it being wide enough to overflow the line on its own, which isn't reliable on a
   wide screen). Rendered right before the error message, only while one exists. */
.consent-block__break {
  flex-basis: 100%;
  width: 0;
  height: 0;
}

.consent-block__error {
  margin: var(--ds-spacing-xs) 0 0;
  /* .alert sets width: 100% and min-height: var(--ds-input-large), sized for a full-width field
     banner. This message sits under a single sentence, so it should hug its own icon + copy
     instead of stretching across the whole row and claiming a fixed banner height it doesn't
     need. The forced line break above still guarantees it a line to itself; this just stops it
     from filling that line. */
  width: fit-content;
  max-width: 100%;
  min-height: 0;
}

.consent-block__link {
  /* The icon must not wrap onto a line of its own, and the link must not
     break the sentence it sits inside. */
  white-space: nowrap;
}

.consent-block__link-icon {
  display: inline-flex;
  vertical-align: text-bottom;
  margin-left: var(--ds-spacing-xxs);
}

.consent-block__link-icon svg {
  width: 1em;
  height: 1em;
  fill: currentcolor;
}

.button-group-quantity {
  flex-wrap: nowrap;
  display: flex;
}
.button-group-quantity .counter-input {
  width: 3rem;
  height: 2.5rem;
  border-radius: 0;
  border-color: var(--ds-border-default);
  border-left: 0;
  border-right: 0;
  text-align: center;
  padding: 0;
  /* stylelint-disable property-no-vendor-prefix, declaration-block-no-duplicate-properties */
  -moz-appearance: textfield;
  /* stylelint-enable */
  appearance: none;
  margin: 0;
}
.button-group-quantity .counter-input::-webkit-outer-spin-button,
.button-group-quantity .counter-input::-webkit-inner-spin-button {
  /* stylelint-disable property-no-vendor-prefix, declaration-block-no-duplicate-properties */
  -webkit-appearance: none;
  /* stylelint-enable */
}
.button-group-quantity button {
  min-width: unset !important;
  min-height: unset !important;
  width: 2.5rem;
  height: 2.5rem;
}

.button-group-quantity > button::after {
  content: "";
  display: none !important;
}

.makita-stock {
  display: flex;
  align-items: center;
  gap: var(--ds-spacer-5);
}
.makita-stock .icon {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--ds-icon-9);
  height: var(--ds-icon-9);
}
.makita-stock .icon svg {
  width: var(--ds-icon-5);
  height: var(--ds-icon-5);
}
.makita-stock.low {
  color: var(--ds-warning-content);
  margin-bottom: var(--ds-spacer-3);
}
.makita-stock.low .icon {
  background-color: var(--ds-warning-bg);
}
.makita-stock.low .icon svg {
  color: var(--ds-warning-content);
}
.makita-stock.high {
  color: var(--ds-success-content);
  margin-bottom: var(--ds-spacer-3);
}
.makita-stock.high .icon {
  background-color: var(--ds-success-bg);
}
.makita-stock.high .icon svg {
  color: var(--ds-success-content);
}
.makita-stock.unavailable {
  color: var(--ds-error-content);
  margin-bottom: var(--ds-spacer-3);
}
.makita-stock.unavailable .icon {
  background-color: var(--ds-error-bg);
}
.makita-stock.unavailable .icon svg {
  color: var(--ds-error-content);
}

/* =====================================================================
   Seminar status badge — rendered by getSeminarStatusBadge (shared-components) on the seminar
   card, seminar details and seminar registration pages
   ===================================================================== */
.seminar-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: var(--ds-spacer-2);
  margin-bottom: var(--ds-margin-lg);
}

.seminar-card__badges .seminar-card__badge {
  margin-bottom: 0;
}

.seminar-card__badge {
  display: flex;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  gap: var(--ds-spacer-2);
  padding: var(--ds-padding-xs) var(--ds-padding-sm);
  font-size: var(--ds-font-size-label);
  border-radius: var(--ds-border-radius-button);
  margin-bottom: var(--ds-margin-lg);
  color: var(--ds-text-primary) !important;
  white-space: nowrap;
}

.seminar-card__badge-icon {
  width: var(--ds-icon-6);
  height: var(--ds-icon-6);
  color: inherit;
}

.seminar-card__badge--registered {
  background: var(--ds-success-bg);
}

.seminar-card__badge--registered svg {
  color: var(--ds-success-content) !important;
}

.seminar-card__badge--fully-booked {
  background: var(--ds-info-bg);
}

.seminar-card__badge--fully-booked svg {
  color: var(--ds-info-content) !important;
}

.seminar-card__badge--pending {
  background: var(--ds-warning-bg);
}

.seminar-card__badge--pending svg {
  color: var(--ds-warning-content) !important;
}

.seminar-card__badge--cancelled {
  background: var(--ds-error-bg);
}

.seminar-card__badge--cancelled svg {
  color: var(--ds-error-content) !important;
}

.seminar-card__badge--attended {
  background: var(--ds-success-bg);
}

.seminar-card__badge--attended svg {
  color: var(--ds-success-content) !important;
}

.seminar-card__badge--no-show {
  background: var(--ds-error-bg);
}

.seminar-card__badge--no-show svg {
  color: var(--ds-error-content) !important;
}

/* TODO: should we remove this file as it is used in dialect to bring in / separate classic theme but we don't need it
 */
/* Override bootstrap to similiar to our spacing xxs-xxl */
/* TODO */
/* Grid */
/* Grid columns */
/* Pagination
Layout */
/* Basic */
/* Hovered */
/* Active */
/* Disabled */
/**
 * Clay 3.166.0
 *
 * SPDX-FileCopyrightText: © 2020 Liferay, Inc. <https://liferay.com>
 * SPDX-FileCopyrightText: © 2020 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
 *
 * SPDX-License-Identifier: BSD-3-Clause
 */
/**
 * Bootstrap v4.4.1
 *
 * SPDX-FileCopyrightText: © 2019 Twitter, Inc. <https://twitter.com>
 * SPDX-FileCopyrightText: © 2019 The Bootstrap Authors <https://getbootstrap.com/>
 *
 * SPDX-License-Identifier: LicenseRef-MIT-Bootstrap
 */
.quick-access-nav {
  position: fixed;
  z-index: 999;
}

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

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  overflow: visible;
  position: static;
  white-space: normal;
  width: auto;
}

.lfr-asset-column-details .lfr-asset-categories {
  color: var(--ds-black-64);
}
.lfr-asset-column-details .lfr-asset-categories .lfr-asset-category {
  color: var(--ds-black-80);
}
.lfr-asset-column-details .lfr-asset-description {
  color: var(--ds-black-80);
  font-style: italic;
  margin: 0.5em auto 2em;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
}
.lfr-asset-column-details .lfr-asset-icon {
  border-right: 1px solid transparent;
  color: var(--ds-black-56);
  float: left;
  line-height: 1em;
  margin-right: 10px;
  padding-right: 10px;
}
.lfr-asset-column-details .lfr-asset-icon.last {
  border-width: 0;
}
.lfr-asset-column-details .lfr-asset-tags {
  color: var(--ds-black-64);
}
.lfr-asset-column-details .lfr-asset-tags .tag {
  color: var(--ds-black-80);
}
.lfr-asset-column-details .lfr-asset-metadata {
  clear: both;
  margin-bottom: 1.5em;
  padding-bottom: 1.5em;
}
.lfr-asset-column-details .lfr-panel {
  clear: both;
  margin-bottom: 0.2em;
}
.lfr-asset-column-details .lfr-panel.lfr-extended {
  border: 1px solid var(--ds-black-40);
  margin-bottom: 0;
}
.lfr-asset-column-details .taglib-custom-attributes-list label,
.lfr-asset-column-details .lfr-asset-field label {
  display: block;
}
.lfr-asset-column-details .taglib-custom-attributes-list {
  margin-bottom: 1em;
}

.overlay {
  position: absolute;
}

.overlay-hidden,
.overlaymask-hidden {
  display: none;
}

.lfr-form-row {
  border-bottom: 1px solid var(--ds-black-40);
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 1px 5px 25px;
  position: relative;
}
.lfr-form-row:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.lfr-form-row:hover {
  border-color: var(--ds-black-40);
  border-style: solid;
  border-width: 1px 0;
  padding-top: 0;
}
.lfr-form-row.lfr-form-row-inline .form-group {
  margin-right: 5px;
}
.lfr-form-row legend .field-label {
  float: left;
  margin-right: 10px;
}
.lfr-form-row .handle-sort-vertical {
  background: url(../images/application/handle_sort_vertical.png) no-repeat 0 50%;
  cursor: move;
  padding-left: 20px;
}
.lfr-form-row fieldset {
  border-width: 0;
  margin: 0;
  padding: 0;
}

.lfr-autorow-controls {
  bottom: 5px;
  position: absolute;
  right: 5px;
}

.datepicker-popover-content .popover-content {
  padding: 0.75rem 1rem;
}

.dropdown.open > .dropdown-menu, .overlay-content .open > .dropdown-menu {
  display: block;
}

.user-avatar-link {
  display: block;
  position: relative;
}
.panel-notifications-count, html:not(#__):not(#___) .cadmin .panel-notifications-count {
  border-radius: 50rem;
  display: flex;
  margin: 0;
  max-width: none;
  position: absolute;
  right: calc(100% - 0.7rem);
  top: -0.4rem;
}

.badge, html:not(#__):not(#___) .cadmin .badge {
  margin: 0.25rem;
}

.user-avatar-link .text-default {
  align-items: center;
  display: flex;
}
.user-avatar-link .text-default .user-full-name {
  margin-left: 0.5rem;
}
@media (max-width: 575.98px) {
  .user-avatar-link .text-default .user-full-name {
    display: none;
  }
}

.user-personal-bar .fieldset {
  position: relative;
}
.user-personal-bar .user-avatar-link .panel-notifications-count {
  right: calc(100% - 1rem);
  top: -0.6rem;
}

.form-control-inline {
  background-color: transparent;
  font-size: 1.125rem;
  font-weight: 700;
}
.form-control-inline:not(:hover) {
  border-color: transparent;
}
.form-control-inline::placeholder {
  color: var(--ds-teal-ui-96);
  font-style: italic;
}

.form-search .input-group {
  position: relative;
}
.form-search .input-group.advanced-search .search-query {
  padding-left: 40px;
  z-index: 0;
}
.form-search .input-group.advanced-search .toggle-advanced {
  cursor: pointer;
  left: 0;
  line-height: 1;
  padding: 8px 10px;
  position: absolute;
  top: 0;
}
.form-search .input-group.advanced-search .toggle-advanced .caret {
  margin-top: 7px;
}
.form-search .input-group.advanced-search .toggle-advanced .icon-search {
  font-size: 14px;
}
@media (max-width: 991.98px) {
  .form-search .input-group {
    width: 100%;
  }
  .form-search .input-group .btn {
    clip: rect(0, 0, 0, 0);
    left: -9999px;
    position: absolute;
  }
  .form-search .input-group input.search-query {
    width: 100%;
  }
}

.lfr-table {
  border-collapse: collapse;
  clear: both;
}
.lfr-table > tbody > tr > td,
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > td,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > td,
.lfr-table > tfoot > tr > th {
  overflow-wrap: break-word;
  padding: 0 5px;
}
.lfr-table > tbody > tr > td:first-child, .lfr-table > tbody > tr > td.first-child,
.lfr-table > tbody > tr > th:first-child,
.lfr-table > tbody > tr > th.first-child,
.lfr-table > thead > tr > td:first-child,
.lfr-table > thead > tr > td.first-child,
.lfr-table > thead > tr > th:first-child,
.lfr-table > thead > tr > th.first-child,
.lfr-table > tfoot > tr > td:first-child,
.lfr-table > tfoot > tr > td.first-child,
.lfr-table > tfoot > tr > th:first-child,
.lfr-table > tfoot > tr > th.first-child {
  padding-left: 0;
}
.lfr-table > tbody > tr > td:last-child, .lfr-table > tbody > tr > td.last-child,
.lfr-table > tbody > tr > th:last-child,
.lfr-table > tbody > tr > th.last-child,
.lfr-table > thead > tr > td:last-child,
.lfr-table > thead > tr > td.last-child,
.lfr-table > thead > tr > th:last-child,
.lfr-table > thead > tr > th.last-child,
.lfr-table > tfoot > tr > td:last-child,
.lfr-table > tfoot > tr > td.last-child,
.lfr-table > tfoot > tr > th:last-child,
.lfr-table > tfoot > tr > th.last-child {
  padding-right: 0;
}
.lfr-table > tbody > tr > th,
.lfr-table > thead > tr > th,
.lfr-table > tfoot > tr > th {
  font-weight: bold;
}

.lfr-pagination:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}
.lfr-pagination .dropdown-menu {
  display: none;
}
.lfr-pagination .dropdown-toggle .icon-caret-down {
  margin-left: 5px;
}
.lfr-pagination .lfr-pagination-controls {
  float: left;
}
.lfr-pagination .lfr-pagination-controls .search-results {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  top: 10px;
}
.lfr-pagination .lfr-pagination-controls li .lfr-pagination-link {
  border-width: 0;
  clear: both;
  color: var(--ds-black-96);
  display: block;
  font-weight: normal;
  line-height: 20px;
  padding: 3px 20px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}
.lfr-pagination .lfr-pagination-delta-selector {
  float: left;
}
@media (max-width: 991.98px) {
  .lfr-pagination .lfr-pagination-delta-selector .lfr-icon-menu-text {
    display: none;
  }
}
.lfr-pagination .pagination-content {
  float: right;
}

.lfr-panel.lfr-extended {
  border: 1px solid transparent;
  border-color: var(--ds-black-24) var(--ds-black-40) var(--ds-black-40) var(--ds-black-24);
}
.lfr-panel.lfr-extended.lfr-collapsible .lfr-panel-button {
  display: block;
}
.lfr-panel.lfr-extended.lfr-collapsed .lfr-panel-titlebar {
  border-bottom-width: 0;
}
.lfr-panel.panel-default .panel-heading {
  border-bottom-width: 0;
}
.lfr-panel .toggler-header {
  cursor: pointer;
}

:root {
  --ck-content-image-style-spacing: 1.5em;
}

.image {
  display: table;
  margin: 0.9em auto;
}

.image.image-style-block-align-left,
.image.image-style-block-align-right {
  max-width: calc(100% - var(--ck-content-image-style-spacing));
}

.image.image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}

.image.image-style-block-align-right {
  margin-left: auto;
  margin-right: 0;
}

.image.image-style-side {
  float: right;
  margin-left: var(--ck-content-image-style-spacing);
  max-width: 50%;
}

img.image_resized {
  height: auto;
}

p + .image.image-style-align-left,
p + .image.image-style-align-right,
p + .image.image-style-side {
  margin-top: 0;
}

.sidebar-sm .sheet-subtitle {
  font-size: 0.75rem;
  margin-bottom: 1rem;
}
.sidebar-sm .form-control[type=file] {
  padding: 0;
}
.sidebar-sm .article-content-description .input-localized.input-localized-editor .input-group-item .wrapper .form-control {
  min-height: auto;
  padding: 0.285rem 0.75rem;
}
.sidebar-sm .list-group-item-flex {
  padding: 0.5rem 0.25rem;
}
.sidebar-sm .list-group-item-flex .autofit-col {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.lfr-translation-manager {
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.5em;
  min-height: 1.8em;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-default-locale {
  display: inline-block;
  width: auto;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu {
  float: none;
  padding: 0.4em 0;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li,
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-icon-menu li strong {
  display: inline;
}
.lfr-translation-manager .lfr-translation-manager-content .lfr-translation-manager-translations-message {
  margin: 10px 0;
}
.lfr-translation-manager .lfr-translation-manager-available-translations {
  white-space: normal;
}
.lfr-translation-manager .lfr-translation-manager-available-translations .lfr-translation-manager-available-translations-links {
  line-height: 1;
}
.lfr-translation-manager .lfr-translation-manager-translation {
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin: 0.2em;
  padding: 0.4em 0.3em 0.4em 0.5em;
  text-decoration: none;
}
.lfr-translation-manager .lfr-translation-manager-translation * {
  vertical-align: middle;
}
.lfr-translation-manager .lfr-translation-manager-translation img {
  margin-right: 0.3em;
}
.lfr-translation-manager .lfr-translation-manager-translation:hover {
  background-color: #e5f1ff;
}
.lfr-translation-manager .lfr-translation-manager-translation.lfr-translation-manager-translation-editing {
  background-color: #338fff;
  border-color: #0053b3;
  color: var(--ds-white-100);
}
.lfr-translation-manager .lfr-translation-manager-change-default-locale {
  margin: 0 0.4em;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation {
  display: inline-block;
  padding: 0 2px;
}
.lfr-translation-manager .lfr-translation-manager-delete-translation svg {
  pointer-events: none;
}

.lfr-tree a {
  text-decoration: none;
}
.lfr-tree li {
  margin-bottom: 2px;
  padding-left: 0;
}
.lfr-tree li ul li, .lfr-tree li.tree-item {
  padding-left: 0;
}
.lfr-tree li.tree-item {
  padding-left: 5px;
}
.lfr-tree li.tree-item li {
  padding-left: 20px;
}
.lfr-tree li.tree-item ul {
  margin-left: 0;
  margin-top: 5px;
}

.lfr-upload-container {
  margin-bottom: 1rem;
}
.lfr-upload-container .upload-target {
  border: 3px dashed var(--ds-teal-ui-96);
  margin-bottom: 1rem;
  min-height: 2rem;
  padding: 2rem 0;
  position: relative;
  text-align: center;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  z-index: 100;
}
.upload-drop-active .lfr-upload-container .upload-target {
  background-color: var(--ds-success-bg);
  border-color: var(--ds-success-content);
}
.lfr-upload-container .upload-target .drop-file-text {
  font-weight: normal;
}
.mobile .lfr-upload-container .upload-target .drop-file-text {
  display: none;
}
.lfr-upload-container .upload-target .small {
  display: block;
  margin: 5px 0;
  text-transform: lowercase;
}
.lfr-upload-container .manage-upload-target {
  padding-top: 5px;
  position: relative;
}
.lfr-upload-container .manage-upload-target .select-files {
  float: left;
  line-height: 0;
  margin: 0 1.125rem 1.125rem;
  padding: 0 0 0 5px;
}
.lfr-upload-container .cancel-uploads,
.lfr-upload-container .clear-uploads {
  background-repeat: no-repeat;
  float: right;
}
.lfr-upload-container .cancel-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAnFBMVEX////4YWP/dXjyS07/dXj9bXD6a234YWP4XWD2WVv2VFfsOTzoLzHmKSvkISP2VFf0TE/vREftPT/iHB72WVvvREf0TE//hon/gYX/fYD/e33/dXj/cXP9bXD/a236a23/Zmb4YWP4XWD/Wl32WVv/VVj2VFf3VFb0TE/yS072SUvvREfuQELtPT/sOTzrMzXoLzHnLC/mKSvkISPh2jkWAAAAF3RSTlMAESIiMzMzMzMzMzMzMzNERERERHd3qtw8lzkAAACOSURBVHjaZcjZDsIgEIXhcd+tu5YBKUixttS6vP+7OQKJTfxvTr4D7Tpxu/2w410SjDjwVvLQ805TPiRryfQeKM6OTI68K/BJPHGlJZJjSqSMofEOGXbJecsTgzkds58V5+J8refBU7Jx9yIrmkW0sA6gqbLyuaRjZZWtgXq58rEFan0jf3uTfRuIkf/7AO8DDcVPSSG3AAAAAElFTkSuQmCC);
  margin-right: 0;
}
.lfr-upload-container .clear-uploads {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAdVBMVEX///+6QwTEVx65RQPEVx3EWB64RQPDVxq5RAO5RAO5RQPATQ65RQO5RQO5RQPRczjJZCW9TQTLay28QgTdZAHhaAPmdyHqeQXrikDudgDvfxj0nWP1qHL2tY33tY34dgD+za7+1rj/dxH/fxj/hiH/kk3///9TM3sUAAAAFHRSTlMAbXd4eHh6gN3e3+Hi4+T5+/z8/mIsq5IAAABHSURBVBjTY2CgGWDlFuZhRuIz8cspyggxIgQ4ZFWVVCQ4EQLCCmpqalLCCAFeaWV5SVE+hAC7gJi4iCAbkqksXMK8bNRzNADCOQN++eLhCQAAAABJRU5ErkJggg==);
  padding-left: 16px;
}
.lfr-upload-container .upload-file.upload-complete.file-saved {
  padding-left: 25px;
}
.lfr-upload-container .upload-file .file-title {
  display: inline-block;
  max-width: 95%;
  overflow: hidden;
  padding-right: 16px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.lfr-upload-container .upload-file .icon-file {
  font-size: 40px;
}
.lfr-upload-container .upload-list-info {
  margin: 1em 0 0.5em;
}
.lfr-upload-container .upload-list-info .h4,
.lfr-upload-container .upload-list-info h4 {
  font-size: 1.3em;
}
.lfr-upload-container .cancel-button {
  color: var(--ds-teal-ui-96);
  margin-top: 1px;
  position: absolute;
  right: 5px;
  top: 50%;
  white-space: nowrap;
}
.lfr-upload-container .cancel-button .cancel-button-text {
  display: none;
  margin-left: 5px;
}
.lfr-upload-container .cancel-button:hover .cancel-button-text {
  display: inline;
}
.lfr-upload-container .cancel-button .lexicon-icon {
  height: 12px;
}
.lfr-upload-container .delete-button {
  color: var(--ds-teal-ui-96);
}
.lfr-upload-container .delete-button-col {
  padding-right: 10px;
}
.lfr-upload-container .file-added .success-message {
  float: right;
  font-weight: normal;
}
.lfr-upload-container .upload-error {
  opacity: 1;
  padding-left: 25px;
}
.lfr-upload-container .upload-complete .cancel-button,
.lfr-upload-container .delete-button,
.lfr-upload-container .upload-complete.file-saved .delete-button,
.lfr-upload-container .upload-complete.upload-error .delete-button {
  display: none;
}
.lfr-upload-container .multiple-files .upload-error {
  background: var(--ds-error-bg) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJPSURBVDjLpZPLS5RhFMYfv9QJlelTQZwRb2OKlKuINuHGLlBEBEOLxAu46oL0F0QQFdWizUCrWnjBaDHgThCMoiKkhUONTqmjmDp2GZ0UnWbmfc/ztrC+GbM2dXbv4ZzfeQ7vefKMMfifyP89IbevNNCYdkN2kawkCZKfSPZTOGTf6Y/m1uflKlC3LvsNTWArr9BT2LAf+W73dn5jHclIBFZyfYWU3or7T4K7AJmbl/yG7EtX1BQXNTVCYgtgbAEAYHlqYHlrsTEVQWr63RZFuqsfDAcdQPrGRR/JF5nKGm9xUxMyr0YBAEXXHgIANq/3ADQobD2J9fAkNiMTMSFb9z8ambMAQER3JC1XttkYGGZXoyZEGyTHRuBuPgBTUu7VSnUAgAUAWutOV2MjZGkehgYUA6O5A0AlkAyRnotiX3MLlFKduYCqAtuGXpyH0XQmOj+TIURt51OzURTYZdBKV2UBSsOIcRp/TVTT4ewK6idECAihtUKOArWcjq/B8tQ6UkUR31+OYXP4sTOdisivrkMyHodWejlXwcC38Fvs8dY5xaIId89VlJy7ACpCNCFCuOp8+BJ6A631gANQSg1mVmOxxGQYRW2nHMha4B5WA3chsv22T5/B13AIicWZmNZ6cMchTXUe81Okzz54pLi0uQWp+TmkZqMwxsBV74Or3od4OISPr0e3SHa3PX0f3HXKofNH/UIG9pZ5PeUth+CyS2EMkEqs4fPEOBJLsyske48/+xD8oxcAYPzs4QaS7RR2kbLTTOTQieczfzfTv8QPldGvTGoF6/8AAAAASUVORK5CYII=) no-repeat 5px 5px;
  border-color: var(--ds-error-content);
  color: var(--ds-error-content);
  font-weight: normal;
  margin-bottom: 16px;
  padding: 8px 8px 8px 24px;
}
.lfr-upload-container .multiple-files .upload-error .error-message {
  display: block;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .card-body,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .card-body {
  padding-left: 1rem;
}
.lfr-upload-container .multiple-files .upload-complete.file-saved .form-check-middle-left .custom-control-label,
.lfr-upload-container .multiple-files .upload-complete.upload-error .form-check-middle-left .custom-control-label {
  display: none;
}
.lfr-upload-container .single-file .upload-error {
  list-style: none;
  margin-top: 1em;
}
.lfr-upload-container .single-file .upload-error .upload-error-message {
  margin-bottom: 0.5em;
}
.lfr-upload-container .upload-complete {
  padding-left: 5px;
}
.lfr-upload-container .upload-complete .error-message,
.lfr-upload-container .upload-complete .success-message {
  font-weight: bold;
  margin-left: 1em;
}
.lfr-upload-container .upload-complete .delete-button {
  display: inline-block;
}
.lfr-upload-container .upload-complete .select-file:disabled + .custom-control-label {
  display: none;
}
.lfr-upload-container .progress {
  display: none;
  margin-top: 0.5rem;
}
.lfr-upload-container .file-uploading .progress {
  display: flex;
}

.lfr-alert-container {
  left: 0;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
  z-index: 430;
}
.lfr-alert-container.inline-alert-container {
  position: relative;
}
.lfr-alert-container.inline-alert-container .lfr-alert-wrapper {
  padding: 0;
}
.lfr-alert-container .lfr-alert-wrapper {
  margin-bottom: 5px;
  overflow: hidden;
}

.lfr-search-container td .overlay.entry-action {
  position: static;
}
.lfr-search-container td .overlay.entry-action .btn a {
  display: block;
  padding: 4px 12px;
}

.contextual-sidebar {
  height: calc(
		100vh - var(--control-menu-container-height) - 49px
	);
  pointer-events: none;
  position: fixed;
  right: 0;
  top: calc(var(--control-menu-container-height) + 49px);
  transform: translateX(100%);
  transition: transform ease 0.5s;
  visibility: hidden;
  width: 320px;
  will-change: transform;
}
.contextual-sidebar.contextual-sidebar-visible {
  pointer-events: auto;
  transform: translateX(0);
  visibility: visible;
}

@media (min-width: 768px) {
  .contextual-sidebar {
    height: calc(
			100vh - var(--control-menu-container-height) - 64px
		);
    top: calc(
			var(--control-menu-container-height) + 64px
		);
  }
  .contextual-sidebar-content {
    transition: padding ease 0.5s;
    will-change: padding;
  }
  .contextual-sidebar-visible .contextual-sidebar-content,
  .contextual-sidebar-visible + .contextual-sidebar-content {
    padding-right: 320px;
  }
}
.taglib-discussion {
  font-size: 0.875rem;
  margin-top: 1rem;
}
.taglib-discussion .actions-menu .component-action {
  display: inline-flex;
}
.taglib-discussion .button-holder {
  margin: 1rem 0;
}
.taglib-discussion .comment-container {
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion .lfr-discussion-form-edit .alloy-editor-placeholder {
  border-left-color: var(--ds-black-24);
}
.taglib-discussion .lfr-discussion-body {
  font-size: 1rem;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-body {
    padding-left: 3.5rem;
  }
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-details .taglib-user-display {
    word-wrap: break-word;
  }
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name {
  font-weight: bold;
  text-decoration: none;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-details .user-name:hover {
  text-decoration: underline;
}
.taglib-discussion .lfr-discussion-details .taglib-user-display .user-profile-image .avatar {
  background-size: 50px;
}
.taglib-discussion .lfr-discussion-container {
  border-bottom: 1px solid var(--ds-black-24);
  margin-bottom: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:first-of-type {
  border-top: 1px solid var(--ds-black-24);
  padding-top: 1.5rem;
}
.taglib-discussion .lfr-discussion-container:last-of-type {
  border-bottom: 0;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion {
  padding-left: 1rem;
}
.taglib-discussion .lfr-discussion-container .lfr-discussion .lfr-discussion .lfr-discussion .lfr-discussion {
  padding-left: 0;
}
@media (min-width: 576px) {
  .taglib-discussion .lfr-discussion-container .lfr-discussion {
    padding-left: 3.5rem;
  }
}
.taglib-discussion .lfr-discussion-parent-link {
  color: var(--ds-black-64);
  font-weight: 600;
  margin-left: 1em;
}
@media (max-width: 767.98px) {
  .taglib-discussion .lfr-discussion-parent-link {
    display: block;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.taglib-discussion .lfr-discussion-controls .autofit-col:first-of-type > .btn-outline-borderless {
  margin-left: -0.75rem;
}
.taglib-discussion .lfr-discussion-more-comments {
  border-top: 1px solid var(--ds-black-24);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  text-align: center;
}
.taglib-discussion .username {
  color: var(--ds-black-96);
  font-weight: 600;
}
.taglib-discussion .taglib-workflow-status {
  margin-left: 0.5rem;
}
.taglib-discussion .workflow-value {
  text-transform: uppercase;
}
@media (min-width: 576px) {
  .taglib-discussion .actions-menu {
    display: none;
  }
  .taglib-discussion .comment-container:hover .actions-menu,
  .taglib-discussion .actions-menu:focus,
  .taglib-discussion .actions-menu.open {
    display: inline-block;
  }
}

.drop-zone {
  min-height: 80px;
  padding: 20px;
  text-align: center;
}
.drop-zone.drop-enabled {
  outline: 2px dashed transparent;
}
.drop-zone.drop-enabled:not(.no-border) {
  outline-color: rgb(from var(--ds-black-56) r g b / 0.5);
}
.drop-zone p {
  margin: 10px auto 0;
  max-width: 75%;
}

.drop-here-info {
  font-size: 25px;
  height: 100%;
  left: 0;
  min-height: 100px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: 0;
  visibility: hidden;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info {
    transition: none;
  }
}
.drop-here-info {
  transition: none;
}

.drop-here-info .drop-here-indicator {
  height: 115px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}
.drop-here-info .drop-icons {
  display: inline-block;
  position: relative;
  width: 160px;
  transition: all 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons {
    transition: none;
  }
}
.drop-here-info .drop-icons {
  transition: none;
}

.drop-here-info .drop-icons span {
  border-radius: 3px;
  position: absolute;
  text-align: center;
  transition: all 0.3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .drop-here-info .drop-icons span {
    transition: none;
  }
}
.drop-here-info .drop-icons span {
  transition: none;
}

.drop-here-info .drop-icons span:nth-of-type(1) {
  box-shadow: 5px 4px 0 0 rgb(from var(--ds-black-100) r g b / 0.08);
  height: 60px;
  left: 0;
  line-height: 60px;
  opacity: 0;
  top: 10px;
  transform: rotate(25deg);
  width: 60px;
}
.drop-here-info .drop-icons span:nth-of-type(2) {
  background: #33bbff;
  color: var(--ds-white-100);
  height: 80px;
  left: 40px;
  line-height: 80px;
  width: 80px;
  z-index: 2;
}
.drop-here-info .drop-icons span:nth-of-type(3) {
  box-shadow: -5px 4px 0 0 rgb(from var(--ds-black-100) r g b / 0.08);
  display: block;
  font-size: 45px;
  height: 70px;
  left: 90px;
  line-height: 70px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-25deg);
  width: 70px;
  z-index: 1;
}
.drop-here-info .drop-icons span:nth-of-type(1), .drop-here-info .drop-icons span:nth-of-type(3) {
  background: var(--ds-black-24);
  color: var(--ds-black-56);
}
.drop-here-info .drop-text {
  color: var(--ds-white-100);
  display: block;
  font-size: 20px;
  margin-left: 0;
  margin-top: 20px;
}
.drop-active .drop-here-info {
  background-color: rgb(from var(--ds-black-100) r g b / 0.6);
  opacity: 1;
  visibility: visible;
  z-index: 100;
}
.drop-active .drop-here-info .drop-icons span:nth-of-type(1), .drop-active .drop-here-info .drop-icons span:nth-of-type(3) {
  opacity: 1;
}
.drop-active .drop-here-info span:nth-of-type(1) {
  transform: rotate(-20deg);
}
.drop-active .drop-here-info span:nth-of-type(2) {
  transform: scale(1);
}
.drop-active .drop-here-info span:nth-of-type(3) {
  transform: rotate(15deg);
}

.taglib-empty-result-message.sheet {
  margin-bottom: 24px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  color: var(--ds-black-64);
  margin-top: 8px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn,
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-left: auto;
  margin-right: auto;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  max-width: 200px;
  padding-top: 250px;
}
.taglib-empty-result-message .taglib-empty-result-message-header,
.taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(../images/states/empty_state.svg);
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-empty-result-message-header,
  .taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
    background-image: url(../images/states/empty_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-result-message-header,
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-result-message-header-has-plus-btn {
  background-image: url(../images/states/empty_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(../images/states/search_state.svg);
  max-width: 210px;
  padding-top: 232px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-empty-search-result-message-header {
    background-image: url(../images/states/search_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-search-result-message-header {
  background-image: url(../images/states/search_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-empty-state {
  background-image: url(../images/states/empty_state.svg);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-empty-state {
    background-image: url(../images/states/empty_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-empty-state {
  background-image: url(../images/states/empty_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-success-state {
  background-image: url(../images/states/success_state.svg);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-success-state {
    background-image: url(../images/states/success_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-success-state {
  background-image: url(../images/states/success_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-search-state {
  background-image: url(../images/states/search_state.svg);
  margin: auto;
  max-width: 250px;
  padding-top: 250px;
}
@media (prefers-reduced-motion: reduce) {
  .taglib-empty-result-message .taglib-search-state {
    background-image: url(../images/states/search_state_reduced_motion.svg);
  }
}
.c-prefers-reduced-motion .taglib-empty-result-message .taglib-search-state {
  background-image: url(../images/states/search_state_reduced_motion.svg);
}
.taglib-empty-result-message .taglib-empty-result-message-title {
  font-size: 1rem;
  margin-top: 48px;
}
.taglib-empty-result-message .taglib-empty-result-message-description {
  font-size: 0.875rem;
}
.taglib-empty-result-message .taglib-empty-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-search-result-message-header + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-empty-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-success-state + .taglib-empty-result-message-title,
.taglib-empty-result-message .taglib-search-state + .taglib-empty-result-message-title {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
}
.taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-description, .taglib-empty-result-message .taglib-empty-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-search-result-message-header ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-empty-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-success-state ~ .taglib-empty-result-message-actions,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-description,
.taglib-empty-result-message .taglib-search-state ~ .taglib-empty-result-message-actions {
  font-size: 1rem;
  text-align: center;
}

.field-wrapper.form-inline .control-label {
  display: inline-block;
}

.field-wrapper-html .input-localized .input-group-item {
  flex-wrap: nowrap;
}

.taglib-header {
  border-bottom: 1px solid var(--ds-black-40);
  color: var(--ds-black-80);
  margin-bottom: 1em;
  padding-bottom: 10px;
}
.taglib-header .header-title {
  display: inline-block;
  margin: 0.1em;
  max-width: 100%;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
}
.taglib-header .header-back-to {
  display: inline-block;
  vertical-align: middle;
}
.taglib-header .header-back-to a {
  display: block;
  font-weight: bold;
  padding: 0 0.3em 0 0;
  text-decoration: none;
}

.taglib-icon {
  text-decoration: none;
}
.taglib-icon:not(.btn):hover .taglib-text, .taglib-icon:not(.btn):focus .taglib-text {
  text-decoration: underline;
}
.taglib-icon[lang] > img {
  vertical-align: baseline;
  width: 16px;
}

.taglib-icon-help {
  color: var(--ds-teal-ui-96) !important;
}
.taglib-icon-help:hover, .taglib-icon-help:active {
  color: var(--ds-black-88) !important;
}

.icon-monospaced {
  color: inherit;
  display: inline-block;
  height: 2rem;
  line-height: 34px;
  text-align: center;
  width: 2rem;
}
.icon-monospaced.lexicon-icon {
  padding: 8px;
}

.taglib-icon-list li {
  float: left;
  margin-right: 1em;
}
.taglib-icon-list:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
}

.lfr-icon-menu .lfr-icon-menu-icon {
  max-width: none;
}
@media (max-width: 767.98px) {
  .table-cell.last .lfr-icon-menu .dropdown-toggle {
    text-align: center;
  }
  .table-cell.last .lfr-icon-menu .dropdown-toggle > img,
  .table-cell.last .lfr-icon-menu .dropdown-toggle .lfr-icon-menu-text {
    display: none;
  }
}

.lfr-menu-list {
  float: none;
  overflow-y: auto;
  position: relative;
}
.lfr-menu-list.direction-right {
  margin: 0 2px;
}
.lfr-menu-list.dropdown-menu {
  float: none;
  position: relative;
}
@media (max-width: 991.98px) {
  .lfr-menu-list.dropdown-menu > li > a {
    font-size: 22px;
    line-height: 40px;
    white-space: normal;
  }
  .lfr-menu-list.dropdown-menu > li > a img {
    margin-bottom: 3px;
  }
}
.lfr-menu-list.dropdown-menu .search-panel {
  margin-bottom: 0;
}
.lfr-menu-list.dropdown-menu .search-panel .form-group {
  margin: 0 16px;
}
.lfr-menu-list.dropdown-menu .search-panel .menu-item-filter {
  width: auto;
}
body > .lfr-menu-list ul {
  border-radius: 4px;
}

.lfr-icon-menu-open:after {
  clear: both;
  content: "";
  display: table;
}
.lfr-icon-menu-open .dropdown-menu {
  position: static;
}

.input-localized.input-localized-editor .form-control {
  border-width: 0;
  height: 100%;
  padding: 0;
}
.input-localized .input-group-item {
  flex-direction: column;
}
.input-localized .input-localized-content {
  margin-left: 6px;
}
.input-group .input-localized .input-localized-content {
  margin-top: 3px;
}
.input-localized .lfr-input-localized .lfr-input-localized-state {
  background-color: var(--ds-black-24);
}
.input-localized .lfr-input-localized .lfr-input-localized-state.lfr-input-localized-state-error {
  background-color: #ff4d4d;
}
.input-localized .lfr-input-localized-default a {
  margin-right: 14px;
}
.input-localized .lfr-input-localized-state {
  height: 4px;
  margin: 3px 5px;
  width: 4px;
}
.input-localized .palette-item-inner .lfr-input-localized-flag {
  font-size: 16px;
  opacity: 0.5;
}
.input-localized .palette-item,
.input-localized .palette-item-hover,
.input-localized .palette-item-hover .palette-item-inner {
  border-color: transparent;
}
.input-localized .palette-item-inner {
  border-color: var(--ds-black-64);
  display: block;
  height: 16px;
  width: 16px;
}
.input-localized .palette-item-selected .lfr-input-localized-state {
  background: #66ccff;
}

.input-localized-palette-container .palette-items-container {
  font-size: 0;
  margin: 0;
  white-space: normal;
}
.input-localized-palette-container .palette-item {
  border-width: 0;
  padding: 0.5rem 1.25rem;
}
.input-localized-palette-container .palette-item-inner {
  border: 1px solid;
  margin-right: 4px;
  width: 16px;
}
.input-localized-palette-container .palette-item-inner img {
  display: block;
}

.taglib-move-boxes {
  margin-bottom: 1em;
}
.taglib-move-boxes label {
  border-bottom: 1px solid transparent;
  display: block;
  margin-bottom: 5px;
  padding: 5px;
}
.taglib-move-boxes .toolbar {
  text-align: center;
}
.taglib-move-boxes .arrow-button img {
  border-width: 0;
  height: 16px;
  width: 16px;
}
.taglib-move-boxes .choice-selector {
  width: 100%;
}
.taglib-move-boxes .choice-selector label {
  background: #e5f1ff;
  border-bottom-color: #97c5ff;
}
.taglib-move-boxes .field-content {
  margin-bottom: 0;
}
.taglib-move-boxes .move-arrow-buttons {
  margin-top: 5em;
}
.taglib-move-boxes .move-arrow-buttons .arrow-button {
  display: block;
}
.taglib-move-boxes .sortable-container {
  margin-top: 10px;
}
.taglib-move-boxes .sortable-container .btn.edit-selection {
  margin-bottom: 10px;
}
.taglib-move-boxes .sortable-container .move-option {
  background-color: transparent;
  border-top: 1px solid var(--ds-black-24);
  display: none;
  margin: 2px 0;
  padding: 2px;
  position: relative;
}
.taglib-move-boxes .sortable-container .move-option.selected {
  display: block;
}
.taglib-move-boxes .sortable-container .move-option.move-option-dragging {
  background-color: var(--ds-black-4);
}
.taglib-move-boxes .sortable-container .move-option .checkbox,
.taglib-move-boxes .sortable-container .move-option .handle {
  position: absolute;
}
.taglib-move-boxes .sortable-container .move-option .checkbox {
  display: none;
  margin: 7px 0 0 5px;
}
.taglib-move-boxes .sortable-container .move-option .handle {
  color: var(--ds-black-56);
  cursor: pointer;
  font-size: 1.5em;
  padding: 6px;
}
.taglib-move-boxes .sortable-container .move-option .title {
  font-size: 1.2em;
  margin: 1px 0 1px 30px;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option {
  display: block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .checkbox {
  display: inline-block;
}
.taglib-move-boxes .sortable-container.edit-list-active .move-option .handle {
  display: none;
}
.mobile .taglib-move-boxes .selector-container {
  display: none;
}

.item-selector .card-row > .autofit-col-expand {
  padding-top: 4px;
}
.item-selector .drop-zone {
  background-color: var(--ds-black-16);
  margin-top: 1rem;
}
.item-selector .input-file {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}
.item-selector .input-file + label {
  position: relative;
}
.item-selector .input-file + label::before {
  border-radius: 4px;
  bottom: -2px;
  content: "";
  display: block;
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  transition: box-shadow 0.15s ease-in-out;
}
.item-selector .input-file:focus + label::before {
  box-shadow: 0 0 0 2px var(--ds-white-100), 0 0 0 4px var(--ds-teal-ui-100, hsl(187deg, 96%, 28%));
}
.item-selector .item-selector-list-row:hover {
  background-color: var(--ds-teal-ui-100, hsl(187deg, 96%, 28%));
  cursor: pointer;
}

.lfr-map {
  border: 1px solid var(--ds-black-40);
  min-height: 400px;
  width: 100%;
}
.lfr-map .home-button {
  margin: 5px;
}
@media (max-width: 575.98px) {
  .lfr-map .home-button {
    height: 35px;
    width: 45px;
  }
}
.lfr-map .search-controls {
  font-size: 15px;
  margin-top: 5px;
  width: 100%;
}
@media (min-width: 576px) {
  .lfr-map .search-controls {
    width: 50%;
  }
}
.lfr-map .search-controls .search-input {
  width: 100%;
}

.navbar .navbar-collapse {
  max-height: none;
}
.navbar .navbar-collapse:after, .navbar .navbar-collapse:before {
  display: inline;
}
@media (max-width: 767.98px) {
  .navbar .navbar-search {
    background-color: var(--ds-black-16);
    border-top-width: 0;
    width: 100%;
  }
}
.navbar .navbar-search .form-search {
  margin: 8px 0;
}
@media (min-width: 768px) {
  .navbar .navbar-search .form-search {
    float: right;
    max-width: 275px;
  }
}
@media (max-width: 767.98px) {
  .navbar .navbar-search .form-search .input-group {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .navbar .container .navbar-btn,
  .navbar .container-fluid .navbar-btn {
    margin-bottom: 5px;
    width: 45px;
  }
  .navbar .container .navbar-collapse.open,
  .navbar .container-fluid .navbar-collapse.open {
    border-width: 0;
    display: block;
    height: auto;
    overflow: visible;
  }
}

.taglib-portlet-preview.show-borders {
  border: 1px solid var(--ds-black-56);
  margin-bottom: 1em;
  padding: 3px 3px 1em;
}
.taglib-portlet-preview.show-borders .title {
  background-color: var(--ds-black-24);
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em;
}
.taglib-portlet-preview .preview {
  margin: 1em;
  min-height: 90px;
}

.lfr-search-container .entry-action {
  width: 1px;
}
.lfr-search-container .entry-action .taglib-icon {
  white-space: nowrap;
}

.lfr-search-container-wrapper.lfr-search-container-fixed-first-column {
  position: relative;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive {
    margin-left: 375px;
    width: auto;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table {
  position: static;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header {
  left: 12px;
  position: fixed;
  right: 12px;
  top: -1px;
  z-index: 989;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th {
  display: block;
  padding: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
  overflow-x: hidden;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper {
    margin-left: 375px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table {
  border-collapse: collapse;
  width: 100%;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table .lfr-search-iterator-fixed-header > th .lfr-search-iterator-fixed-header-inner-wrapper table th {
  border-radius: 0;
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td,
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  width: auto;
}
@media (min-width: 576px) {
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table td:first-child,
  .lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th:first-child {
    background-color: var(--ds-bg-soft);
    left: 0;
    position: absolute;
    right: 15px;
  }
}
.lfr-search-container-wrapper.lfr-search-container-fixed-first-column .table-responsive .table th {
  height: auto;
}
.lfr-search-container-wrapper a:not(.btn):not(.component-action):not(.page-link) {
  color: var(--ds-black-80);
  font-weight: 500;
  text-decoration: underline;
}
.lfr-search-container-wrapper a:not(.btn):not(.component-action):not(.page-link):focus, .lfr-search-container-wrapper a:not(.btn):not(.component-action):not(.page-link):hover {
  color: var(--ds-black-100);
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle {
  color: var(--ds-teal-ui-96);
}
.lfr-search-container-wrapper .dropdown-action .dropdown-toggle:hover {
  color: var(--ds-black-88);
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle {
  color: var(--ds-teal-ui-96);
}
.lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:active, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:focus, .lfr-search-container-wrapper .lfr-icon-menu > .dropdown-toggle:hover {
  background-color: var(--ds-black-4);
  border-radius: 4px;
  color: var(--ds-black-88);
}
.lfr-search-container-wrapper .lfr-search-container-list .list-group:first-child dt:not(.list-group-header) + .list-group-item {
  border-top-left-radius: var(--ds-radius-md);
  border-top-right-radius: var(--ds-radius-md);
}
.lfr-search-container-wrapper .lfr-search-container-list .list-group:last-child .list-group-item:nth-last-child(2) {
  border-bottom-left-radius: var(--ds-radius-md);
  border-bottom-right-radius: var(--ds-radius-md);
}
.lfr-search-container-wrapper .lfr-search-container-list + .taglib-search-iterator-page-iterator-bottom {
  margin-top: 20px;
}
.lfr-search-container-wrapper .list-group {
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group + .list-group .list-group-header:first-child,
.lfr-search-container-wrapper .list-group + .list-group .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item .h4,
.lfr-search-container-wrapper .list-group .list-group-item h4 {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item .h5,
.lfr-search-container-wrapper .list-group .list-group-item .h6,
.lfr-search-container-wrapper .list-group .list-group-item h5,
.lfr-search-container-wrapper .list-group .list-group-item h6 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0;
}
.lfr-search-container-wrapper .list-group .list-group-item span + h2.h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .list-group .list-group-item .h6 + .h5,
.lfr-search-container-wrapper .list-group .list-group-item h6 + h5 {
  font-weight: 600;
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:first-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:first-child {
  border-bottom-left-radius: var(--ds-radius-xs);
}
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) td:last-child,
.lfr-search-container-wrapper .table-list tbody tr:nth-last-child(2) th:last-child {
  border-bottom-right-radius: var(--ds-radius-xs);
}

.user-info {
  display: flex;
}
.user-info .sticker {
  align-self: center;
}
.user-info .user-details {
  margin-left: 1rem;
}
.user-info .user-name {
  color: var(--ds-black-88);
  font-weight: 600;
}
.user-info .date-info {
  color: var(--ds-teal-ui-96);
}

.user-status-tooltip .user-status-avatar {
  float: left;
  margin-right: 5px;
}
.user-status-tooltip .user-status-avatar .user-status-avatar-image {
  width: 27px;
}
.user-status-tooltip .user-status-info {
  display: inline-block;
  overflow: hidden;
}
.user-status-tooltip .user-status-info .user-status-date {
  font-size: 11px;
}

.lfr-search-container {
  margin-top: 1.5em;
  overflow: auto;
}
@media (max-width: 767.98px) {
  .lfr-search-container .selector-button {
    width: auto;
  }
}
.touch .lfr-search-container {
  -webkit-overflow-scrolling: touch;
}
.touch .lfr-search-container .searchcontainer-content .table {
  max-width: none;
}

.taglib-page-iterator {
  clear: both;
  height: auto;
  width: auto;
}
.taglib-page-iterator .lfr-pagination-buttons {
  float: right;
  margin: 0;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    width: 100%;
  }
}
@media (max-width: 991.98px) and (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-buttons {
    float: none;
    margin-top: 20px;
  }
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-buttons > li {
    display: inline-block;
    width: 50%;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li.first, .taglib-page-iterator .lfr-pagination-buttons > li.last {
    display: none;
  }
  .taglib-page-iterator .lfr-pagination-buttons > li > a {
    line-height: 20px;
    padding: 11px 19px;
  }
}
.taglib-page-iterator .lfr-pagination-config {
  float: left;
  line-height: 46px;
}
@media (max-width: 767.98px) {
  .taglib-page-iterator .lfr-pagination-config {
    float: none;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu {
    display: block;
  }
  .taglib-page-iterator .lfr-pagination-config .current-page-menu .btn {
    display: block;
  }
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector,
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-page-selector {
  display: inline;
}
.taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
  float: none;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .lfr-pagination-config .lfr-pagination-delta-selector {
    display: none;
  }
}
.taglib-page-iterator .search-results {
  float: left;
  line-height: 46px;
  margin-left: 10px;
}
@media (max-width: 991.98px) {
  .taglib-page-iterator .search-results {
    display: none;
  }
}

@media (max-width: 991.98px) {
  ul.pagination ul.inline-scroller {
    max-height: inherit;
  }
}
.taglib-search-toggle .form-search {
  position: relative;
}
.taglib-search-toggle .form-search .input-group-btn {
  position: absolute;
}
@media (min-width: 992px) {
  .taglib-search-toggle .form-search .input-group-btn {
    position: static;
  }
}
.taglib-search-toggle .toggle-advanced {
  color: inherit;
  margin-left: 10px;
  position: absolute;
  top: 8px;
}
.taglib-search-toggle .toggle-advanced, .taglib-search-toggle .toggle-advanced:hover, .taglib-search-toggle .toggle-advanced:focus {
  text-decoration: none;
}

.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  background-color: var(--ds-white-100);
  border: solid var(--ds-black-24);
  border-width: 0 1px 1px;
  margin-top: 0;
  padding: 15px 15px 0;
}
.navbar-search .taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced {
  border-width: 1px 0 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content {
  position: relative;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields {
  margin-bottom: 0;
}
.taglib-search-toggle-advanced-wrapper .taglib-search-toggle-advanced .taglib-search-toggle-advanced-content .match-fields-legend {
  color: var(--ds-black-56);
  font-size: 13px;
}
.taglib-search-toggle-advanced-wrapper .btn.close {
  margin-right: 5px;
  position: relative;
  z-index: 1;
}

.taglib-user-display {
  padding: 0.5em;
}
.taglib-user-display .avatar {
  background: no-repeat center;
  background-size: 60px;
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px;
}
.taglib-user-display .avatar.author:after {
  background: rgb(from #33bbff r g b / 0.5);
  border-radius: 50%;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}
.taglib-user-display .user-details {
  margin-top: 1em;
}
.taglib-user-display .user-name {
  font-size: 1.1em;
  font-weight: bold;
}
.taglib-user-display a .user-name {
  text-decoration: underline;
}
.taglib-user-display.display-style-1 .user-profile-image {
  float: left;
  margin-right: 24px;
}
.taglib-user-display.display-style-1 .user-name {
  display: inline-block;
  margin-top: 10px;
}
.taglib-user-display.display-style-1 .user-details {
  margin-top: 0;
}
.taglib-user-display.display-style-2 .user-profile-image,
.taglib-user-display.display-style-2 .user-name {
  clear: both;
  display: block;
  min-height: 20px;
  text-align: center;
}
.taglib-user-display.display-style-3 {
  padding: 0;
}
.taglib-user-display.display-style-3 .user-profile-image {
  display: inline-block;
  vertical-align: middle;
}

.taglib-workflow-status .workflow-id,
.taglib-workflow-status .workflow-version,
.taglib-workflow-status .workflow-status {
  color: var(--ds-black-56);
}
.table-cell .taglib-workflow-status {
  margin: 0;
}
.table-cell .taglib-workflow-status .workflow-status {
  padding-left: 0;
}

.lfr-autocomplete-input-list .yui3-aclist-list {
  margin: 0;
}

.portal-popup .sheet > .lfr-nav {
  margin-top: -24px;
}
.portal-popup .contacts-portlet .portlet-configuration-container .form {
  position: static;
}
.portal-popup .lfr-form-content {
  padding: 24px 12px;
}
.portal-popup .portlet-body,
.portal-popup .portlet-boundary,
.portal-popup .portlet-column,
.portal-popup .portlet-layout {
  height: 100%;
}
.portal-popup .portlet-column {
  position: static;
}
.portal-popup .dialog-body > .container-fluid-max-xl,
.portal-popup .dialog-body .container-view,
.portal-popup .export-dialog-tree > .container-fluid-max-xl,
.portal-popup .export-dialog-tree .container-view,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader .container-view,
.portal-popup .lfr-form-content > .container-fluid-max-xl,
.portal-popup .lfr-form-content .container-view,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content .container-view,
.portal-popup .process-list > .container-fluid-max-xl,
.portal-popup .process-list .container-view,
.portal-popup .roles-selector-body > .container-fluid-max-xl,
.portal-popup .roles-selector-body .container-view {
  padding-top: 20px;
}
.portal-popup .dialog-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .dialog-body .container-view .nav-tabs-underline,
.portal-popup .export-dialog-tree > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .export-dialog-tree .container-view .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-dynamic-uploader .container-view .nav-tabs-underline,
.portal-popup .lfr-form-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .lfr-form-content .container-view .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .portlet-configuration-body-content .container-view .nav-tabs-underline,
.portal-popup .process-list > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .process-list .container-view .nav-tabs-underline,
.portal-popup .roles-selector-body > .container-fluid-max-xl .nav-tabs-underline,
.portal-popup .roles-selector-body .container-view .nav-tabs-underline {
  margin-left: -12px;
  margin-right: -12px;
  margin-top: -20px;
}
.portal-popup .dialog-body > .lfr-nav + .container-fluid-max-xl,
.portal-popup .export-dialog-tree > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-dynamic-uploader > .lfr-nav + .container-fluid-max-xl,
.portal-popup .lfr-form-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .portlet-configuration-body-content > .lfr-nav + .container-fluid-max-xl,
.portal-popup .process-list > .lfr-nav + .container-fluid-max-xl,
.portal-popup .roles-selector-body > .lfr-nav + .container-fluid-max-xl {
  padding-top: 0;
}
.portal-popup .login-container {
  padding: 1rem;
}
.portal-popup .navbar ~ .portlet-configuration-setup,
.portal-popup .portlet-export-import-container {
  height: calc(100% - 48px);
  position: relative;
}
@media (min-width: 576px) {
  .portal-popup .navbar ~ .portlet-configuration-setup,
  .portal-popup .portlet-export-import-container {
    height: calc(100% - 48px);
  }
}
.portal-popup .panel-group .panel {
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
}
.portal-popup .panel-group .panel + .panel {
  border-top-width: 0;
  margin-top: 0;
}
.portal-popup .panel-heading {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.portal-popup .portlet-configuration-setup .lfr-nav {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding-left: 3px;
  padding-right: 3px;
}
@media (min-width: 576px) {
  .portal-popup .portlet-configuration-setup .lfr-nav {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.portal-popup .lfr-dynamic-uploader,
.portal-popup .process-list {
  bottom: 0;
  display: block;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 48px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 576px) {
  .portal-popup .lfr-dynamic-uploader,
  .portal-popup .process-list {
    top: 48px;
  }
}
.portal-popup .portlet-export-import-publish-processes {
  top: 0;
}
.portal-popup .dialog-footer {
  background-color: var(--ds-white-100);
  border-top: 1px solid var(--ds-black-24);
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  left: 0;
  margin: 0;
  padding: 10px 24px;
  width: 100%;
  z-index: 989;
}
@media (min-width: 768px) {
  .portal-popup .dialog-footer {
    position: fixed;
  }
}
.portal-popup .dialog-footer .btn {
  margin-left: 1rem;
  margin-right: 0;
}
.portal-popup .dialog-footer.dialog-footer-not-reverse {
  flex-direction: initial;
  justify-content: flex-end;
}
@media (min-width: 768px) {
  .portal-popup .dialog-body:not(:last-child),
  .portal-popup .lfr-dynamic-uploader:not(:last-child),
  .portal-popup .lfr-form-content:not(:last-child),
  .portal-popup .portlet-configuration-body-content:not(:last-child),
  .portal-popup .roles-selector-body:not(:last-child) {
    padding-bottom: 60px;
  }
}
.portal-popup .lfr-dynamic-uploader {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer {
  bottom: 0;
}
.portal-popup .lfr-dynamic-uploader.hide-dialog-footer + .dialog-footer {
  display: none;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.portal-popup .portlet-configuration-edit-permissions .portlet-configuration-body-content > form {
  flex-grow: 1;
  max-width: none;
  overflow: auto;
}
.portal-popup .portlet-configuration-edit-templates .portlet-configuration-body-content {
  bottom: 0;
}
.portal-popup:not(.article-preview) #main-content,
.portal-popup:not(.article-preview) #wrapper {
  bottom: 0;
  left: 0;
  overflow: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
}
@media print {
  .portal-popup:not(.article-preview) #main-content,
  .portal-popup:not(.article-preview) #wrapper {
    position: initial;
  }
}
.portal-popup .columns-max > .portlet-layout.row {
  margin-left: 0;
  margin-right: 0;
}
.portal-popup .columns-max > .portlet-layout.row > .portlet-column {
  padding-left: 0;
  padding-right: 0;
}

html:not(#__):not(#___) .portlet-layout.dragging {
  border-collapse: separate;
}
html:not(#__):not(#___) .drop-area {
  background-color: var(--ds-black-24);
}
html:not(#__):not(#___) .active-area {
  background: #fff1cc;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
}
html:not(#__):not(#___) .portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed var(--ds-black-40);
}
html:not(#__):not(#___) .sortable-layout-proxy {
  opacity: 1;
}
html:not(#__):not(#___) .sortable-layout-proxy .portlet-topper {
  background-image: none;
}
html:not(#__):not(#___) .proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
html:not(#__):not(#___) .proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
html:not(#__):not(#___) .proxy.generic-portlet .portlet-title {
  padding: 10px;
}
html:not(#__):not(#___) .proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}
html:not(#__):not(#___) .resizable-proxy {
  border: 1px dashed var(--ds-black-56);
  position: absolute;
  visibility: hidden;
}
html:not(#__):not(#___) .sortable-proxy {
  background: var(--ds-black-64);
  margin-top: 1px;
}
html:not(#__):not(#___) .sortable-layout-drag-target-indicator {
  margin: 2px 0;
}
html:not(#__):not(#___) .yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-layout.dragging {
  border-collapse: separate;
}

.drop-area {
  background-color: var(--ds-black-24);
}

.active-area {
  background: #fff1cc;
}

.portlet-boundary.yui3-dd-dragging {
  opacity: 0.6;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .portlet-boundary.yui3-dd-dragging {
    transition: none;
  }
}
.c-prefers-reduced-motion .portlet-boundary.yui3-dd-dragging {
  transition: none;
}
.portlet-boundary.yui3-dd-dragging .portlet {
  border: 2px dashed var(--ds-black-40);
}

.sortable-layout-proxy {
  opacity: 1;
}
.sortable-layout-proxy .portlet-topper {
  background-image: none;
}

.proxy {
  cursor: move;
  opacity: 0.65;
  position: absolute;
}
.proxy.generic-portlet {
  height: 200px;
  width: 300px;
}
.proxy.generic-portlet .portlet-title {
  padding: 10px;
}
.proxy.not-intersecting .forbidden-action {
  background: url(../images/application/forbidden_action.png) no-repeat;
  display: block;
  height: 32px;
  position: absolute;
  right: -15px;
  top: -15px;
  width: 32px;
}

.resizable-proxy {
  border: 1px dashed var(--ds-black-56);
  position: absolute;
  visibility: hidden;
}

.sortable-proxy {
  background: var(--ds-black-64);
  margin-top: 1px;
}

.sortable-layout-drag-target-indicator {
  margin: 2px 0;
}

.yui3-dd-proxy {
  z-index: 1110 !important;
}

.portlet-column-content.empty {
  padding: 50px;
}

.lfr-portlet-title-editable {
  margin-top: 0;
  z-index: 9999;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content {
  padding: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .field-input {
  margin-bottom: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .textfield-label {
  display: none;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-toolbar-content {
  display: inline-block;
  vertical-align: bottom;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn-group {
  margin-top: 0;
}
.lfr-portlet-title-editable .lfr-portlet-title-editable-content .btn {
  display: inline-block;
  float: none;
  margin-top: 0;
  width: auto;
}

.lfr-source-editor {
  border: solid 0 var(--ds-black-40);
  border-bottom-width: 2px;
  position: relative;
}
.lfr-source-editor .ace_editor {
  height: 100%;
}
.lfr-source-editor .lfr-source-editor-toolbar li > .btn {
  background-color: var(--ds-white-100);
  border: transparent;
  color: var(--ds-black-64);
  outline: 0;
}
.lfr-source-editor .lfr-source-editor-code {
  background-color: var(--ds-white-100);
  color: var(--ds-black-88);
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter {
  background-color: var(--ds-black-16);
  color: var(--ds-black-64);
  overflow: hidden;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget {
  font-family: fontawesome-alloy;
  text-align: center;
  vertical-align: middle;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open, .lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_open:before {
  content: "▾";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_fold-widget.ace_closed:before {
  content: "▸";
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-cell {
  color: var(--ds-white-100);
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: var(--ds-black-64);
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_gutter-layer {
  border-right: solid 1px var(--ds-black-40);
}
.lfr-source-editor .lfr-source-editor-code .ace_gutter .ace_info {
  background-image: none;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: var(--ds-black-16);
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_constant {
  color: #24a892;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_tag {
  color: #005fcc;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string {
  color: #ff6666;
}
.lfr-source-editor .lfr-source-editor-code .ace_content .ace_string.ace_regex {
  color: #dc3545;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code {
  background-color: var(--ds-black-88);
  color: var(--ds-white-100);
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter {
  background: var(--ds-black-80);
  color: var(--ds-white-100);
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_gutter .ace_gutter-active-line {
  background-color: #0099e6;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_active-line {
  background-color: #00334d;
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_cursor {
  color: var(--ds-white-100);
}
.lfr-source-editor.ace_dark .lfr-source-editor-code .ace_content .ace_tag {
  color: #338fff;
}

.lfr-fullscreen-source-editor {
  height: 100%;
  overflow: hidden;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-header {
  height: 40px;
  margin-right: 4px;
  margin-top: 4px;
  min-height: 40px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content {
  height: 95%;
  position: relative;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .panel-splitter {
  border: 1px solid var(--ds-black-40);
  position: absolute;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .preview-panel {
  display: inline-block;
  overflow-y: auto;
  padding-left: 20px;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content .source-panel {
  display: inline-block;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .preview-panel {
  height: 100%;
  width: 50%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.vertical .panel-splitter {
  height: 100%;
  left: 50%;
  top: 0;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .source-panel,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .preview-panel {
  height: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.horizontal .panel-splitter {
  top: 50%;
  width: 100%;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .panel-splitter,
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .preview-panel {
  display: none;
}
.lfr-fullscreen-source-editor .lfr-fullscreen-source-editor-content.simple .source-panel {
  height: 100%;
  width: 100%;
}

.lfr-fulscreen-source-editor-dialog .modal-footer {
  text-align: left;
}

.file-icon-color-0 {
  background-color: var(--ds-white-100);
  color: var(--ds-black-64);
}

.file-icon-color-1 {
  background-color: var(--ds-white-100);
  color: var(--ds-black-64);
}

.file-icon-color-2 {
  background-color: var(--ds-white-100);
  color: #24a892;
}

.file-icon-color-3 {
  background-color: var(--ds-white-100);
  color: #ff4d4d;
}

.file-icon-color-4 {
  background-color: var(--ds-white-100);
  color: #ff6200;
}

.file-icon-color-5 {
  background-color: var(--ds-white-100);
  color: #bf66ff;
}

.file-icon-color-6 {
  background-color: var(--ds-white-100);
  color: #0099e6;
}

.file-icon-color-7 {
  background-color: var(--ds-white-100);
  color: #ff4db2;
}

.lfr-item-viewer.uploading > div:not(.progress-container) {
  opacity: 0.3;
}
.lfr-item-viewer.uploading > .progress-container {
  visibility: visible;
}
.lfr-item-viewer .aspect-ratio a.item-preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  position: absolute;
  width: 100%;
}
.lfr-item-viewer .image-viewer-base-image-list {
  padding-top: 35px;
}
.lfr-item-viewer .item-preview:hover {
  cursor: pointer;
}
.lfr-item-viewer .progress-container {
  background-color: var(--ds-white-100);
  left: 0;
  margin: 0 auto;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
  width: 80%;
  z-index: 1000;
}
.lfr-item-viewer .progress-container a {
  position: absolute;
  right: 30px;
}
.lfr-item-viewer .progress-container .progress {
  margin-top: 10px;
}
.lfr-item-viewer .search-info {
  background-color: #e5f6ff;
}
.lfr-item-viewer .search-info .keywords {
  font-size: 1.4em;
  font-weight: bold;
}
.lfr-item-viewer .search-info .change-search-folder {
  font-size: 0.8em;
  font-weight: normal;
}
.lfr-item-viewer .upload-view {
  display: table;
  height: 400px;
  margin-top: 20px;
  width: 100%;
}
.lfr-item-viewer .upload-view > div {
  display: table-cell;
  vertical-align: middle;
}
.lfr-item-viewer .yui3-widget-bd {
  position: relative;
}

.lfr-menu-expanded li a:focus {
  background-color: var(--ds-black-64);
  color: var(--ds-white-100);
  text-shadow: -1px -1px var(--ds-black-96);
}

.lfr-url-error {
  display: inline-block;
  overflow-wrap: break-word;
  white-space: normal;
}

.lfr-page-layouts {
  padding: 0;
}
.lfr-page-layouts input[type=radio] {
  opacity: 0;
  position: absolute;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal {
  cursor: default;
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  bottom: calc(0.0625rem * -1);
  content: "";
  left: calc(0.0625rem * -1);
  position: absolute;
  right: calc(0.0625rem * -1);
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts input[type=radio]:checked + .card-horizontal::after {
  transition: none;
}

.lfr-page-layouts .card-horizontal {
  cursor: pointer;
  outline: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal {
  transition: none;
}

.lfr-page-layouts .card-horizontal::after {
  border-radius: 0rem 0rem var(--ds-radius-md) var(--ds-radius-md);
  bottom: calc(0.0625rem * -1);
  content: "";
  height: 0rem;
  left: calc(0.0625rem * -1);
  position: absolute;
  right: calc(0.0625rem * -1);
  transition: height 0.15s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-page-layouts .card-horizontal::after {
    transition: none;
  }
}
.lfr-page-layouts .card-horizontal::after {
  transition: none;
}

.modal-body.dialog-iframe-bd {
  overflow: hidden;
  padding: 0;
}

.modal-dialog:not(.dialog-iframe-modal):not(.modal-full-screen) {
  position: relative;
}
.modal-dialog.dialog-iframe-modal {
  max-width: none;
}
.modal-dialog.modal-dialog-sm {
  max-width: 500px;
}
.modal-dialog .yui3-resize-handles-wrapper {
  pointer-events: all;
}
.modal-dialog .yui3-resize-handles-wrapper .yui3-resize-handle-inner-br {
  bottom: 0;
  right: 0;
}

.modal-open .modal {
  display: block;
}

.sheet > .panel-group .sheet-footer {
  margin-bottom: 0;
}

.sheet-footer .btn {
  margin-right: var(--spacer-2, 0.25rem);
}
.sheet-footer .btn:last-child {
  margin-right: 0;
}

.tag-items {
  list-style: none;
  margin: 0 1em 0 0;
  padding: 0 1em 0.5em;
  white-space: normal;
}
.tag-items li {
  display: inline-block;
  margin: 0 1em 0 0;
  max-width: 100%;
}

.tag-selected {
  color: var(--ds-black-100);
  font-weight: bold;
  text-decoration: none;
}

.tag-cloud .tag-popularity-1 {
  font-size: 1em;
}
.tag-cloud .tag-popularity-2 {
  font-size: 1.3em;
}
.tag-cloud .tag-popularity-3 {
  font-size: 1.6em;
}
.tag-cloud .tag-popularity-4 {
  font-size: 1.9em;
}
.tag-cloud .tag-popularity-5 {
  font-size: 2.2em;
}
.tag-cloud .tag-popularity-6 {
  font-size: 2.5em;
}

.lfr-portal-tooltip {
  display: inline-flex;
}
.lfr-portal-tooltip,
.lfr-portal-tooltip a {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.tree-node .icon-check {
  padding-right: 2px;
}
.tree-node .tree-node-checked .icon-check {
  padding-right: 0;
}
.tree-node [class^=icon-] {
  margin-right: 5px;
}
.tree-node .tree-node-checkbox-container {
  margin-right: 0;
}
.tree-node .tree-node-selected .tree-label {
  background: none;
}

.tree-node-content .tree-hitarea {
  color: var(--ds-black-56);
  font-size: 10px;
  padding-right: 6px;
}
.tree-node-content .tree-label {
  margin-left: 3px;
}
.tree-node-content .tree-node-hidden-hitarea {
  visibility: hidden;
}

.tree-node-selected .tree-label {
  background-color: transparent;
}

.tree-view li.tree-node .tree-node-content svg.lexicon-icon {
  pointer-events: none;
}

.user-icon-color-0 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: var(--ds-black-64);
}

.user-icon-color-1 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #66abff;
}

.user-icon-color-2 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #ff6200;
}

.user-icon-color-3 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #ff4d4d;
}

.user-icon-color-4 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #24a892;
}

.user-icon-color-5 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #ff4db2;
}

.user-icon-color-6 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #53a117;
}

.user-icon-color-7 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #bf66ff;
}

.user-icon-color-8 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #b38900;
}

.user-icon-color-9 {
  background-color: var(--ds-white-100);
  box-shadow: 0 0 0 1px var(--ds-black-24);
  color: #0099e6;
}

.collapse.open {
  display: block;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox='0%200%2016%2016'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20class='lexicon-icon-outline'%20d='M15%203H1a1%201%200%200%201%200-2h14a1%201%200%200%201%200%202Zm0%206H1a1%201%200%200%201%200-2h14a1%201%200%200%201%200%202ZM1%2015h14a1%201%200%200%200%200-2H1a1%201%200%200%200%200%202Z'%20fill='var(--ds-black-96)'/%3E%3C/svg%3E");
  height: 1em;
  width: 1em;
}

.navbar-nav .nav-item.hover:after {
  bottom: -0.125rem;
  content: "";
  height: 0.125rem;
  left: 0;
  position: absolute;
  width: 100%;
}

.navbar .navbar-toggler .c-inner {
  max-width: none;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
html:not(#__):not(#___) .cadmin .component-action.portlet-options {
  color: var(--ds-white-100);
}

body.portlet {
  border-width: 0;
}

.portlet-icon-back {
  margin-top: -2px;
}
.portlet-topper .portlet-topper-toolbar .portlet-icon-back {
  background: url(../images/arrows/12_left.png) no-repeat 0 50%;
  padding: 5px 5px 5px 18px;
}

.portlet-options-dropdown {
  z-index: 1035;
}

.portlet-topper {
  position: relative;
}
.portlet-topper .portlet-topper-toolbar .portlet-options .lfr-icon-menu-text {
  display: none;
}
.portlet-draggable .portlet-topper {
  cursor: move;
}

.portlet-title-editable {
  cursor: pointer;
}

.portlet-title-text {
  display: inline-block;
  margin-top: 0;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
}
.panel-page-body .portlet-title-text, .panel-page-content .portlet-title-text {
  cursor: auto;
}

.portlet-minimized .portlet-content {
  padding: 0;
}

.portlet-nested-portlets .portlet-boundary {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}

.portlet-layout .portlet-header {
  margin-bottom: var(--spacer-3, 0.5rem);
}

@media (min-width: 576px) {
  .portlet .visible-interaction {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .controls-hidden .portlet .visible-interaction {
    display: none;
  }
}
.portlet:hover .visible-interaction, .portlet.open .visible-interaction, .portlet.focus .visible-interaction {
  display: block;
}

.controls-hidden .lfr-meta-actions,
.controls-hidden .lfr-configurator-visibility {
  display: none;
}
.controls-hidden .portlet-title-editable {
  pointer-events: none;
}
.controls-hidden .portlet-topper {
  display: none !important;
}
.controls-hidden .portlet-topper-toolbar {
  display: none !important;
}

html:not(#__):not(#___) .cadmin.portlet-topper {
  background-color: var(--ds-black-4);
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(var(--ds-black-100), 0.5);
  display: box;
  display: flex;
  height: 28px;
  padding: 3px 12px 3px 24px;
  position: relative;
}
html:not(#__):not(#___) .cadmin.portlet-topper .lexicon-icon {
  height: 12px;
  width: 12px;
}
html:not(#__):not(#___) .cadmin.portlet-topper .lexicon-icon.lexicon-icon-drag {
  height: 16px;
  width: 16px;
}
html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transform: translateY(-97%);
    transition: opacity 0.15s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  html:not(#__):not(#___) .portlet > .cadmin.portlet-topper {
    transition: none;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .portlet > .c-prefers-reduced-motion .cadmin.portlet-topper {
    transition: none;
  }
}
html:not(#__):not(#___) .cadmin .portlet-actions {
  float: right;
}
html:not(#__):not(#___) .cadmin .portlet-options {
  display: inline-block;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu {
  flex: 0 1 auto;
}
html:not(#__):not(#___) .cadmin .portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > span > a,
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(var(--ds-black-100), 0.5);
}
html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:focus, html:not(#__):not(#___) .cadmin .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
html:not(#__):not(#___) .cadmin .portlet-name-text {
  font-size: 12px;
  font-weight: 600;
  margin-left: 4px;
}
html:not(#__):not(#___) .cadmin .portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 576px) {
  html:not(#__):not(#___) .lfr-configurator-visibility .portlet:hover .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.focus .portlet-topper, html:not(#__):not(#___) .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.open > .portlet-content-editable, html:not(#__):not(#___) .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet:hover > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper, html:not(#__):not(#___) .controls-visible .portlet.focus > .cadmin.portlet-topper {
    opacity: 1;
  }
}
@media (min-width: 768px) {
  html:not(#__):not(#___) .controls-visible .portlet.open > .cadmin.portlet-topper {
    transition-duration: 0ms;
  }
}
@media (max-width: 767.98px) {
  html:not(#__):not(#___) .controls-visible .cadmin.portlet-topper {
    align-items: center;
    display: box;
    display: flex;
  }
}
html:not(#__):not(#___) .controls-visible .cadmin .portlet-topper-toolbar {
  display: block;
}

.portlet {
  margin-bottom: 10px;
  position: relative;
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-content-editable, .controls-visible .portlet.open > .portlet-content-editable, .controls-visible .portlet.focus > .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}
@media (min-width: 768px) {
  .controls-visible .portlet:hover > .portlet-topper, .controls-visible .portlet.open > .portlet-topper, .controls-visible .portlet.focus > .portlet-topper {
    opacity: 1;
  }
}
@media (min-width: 576px) {
  .lfr-configurator-visibility .portlet:hover .portlet-topper, .lfr-configurator-visibility .portlet.focus .portlet-topper, .lfr-configurator-visibility .portlet.open .portlet-topper {
    opacity: 0.5;
  }
}

.portlet-content-editable {
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  transition: border-color 0.15s ease;
}
.portlet > .portlet-content-editable {
  border-color: transparent;
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-content-editable {
    border-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.portlet-options {
  display: inline-block;
}

.portlet-title-default {
  flex: 1 1 auto;
  line-height: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portlet-title-menu {
  flex: 0 1 auto;
}
.portlet-title-menu > span > a {
  display: inline-block;
  text-decoration: none;
}

.portlet-topper {
  background-color: var(--ds-black-4);
  border-color: transparent;
  border-radius: 0 0;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  color: rgba(var(--ds-black-100), 0.5);
  display: box;
  display: flex;
  padding: 3px 12px 3px 24px;
  position: relative;
}
.portlet > .portlet-topper {
  display: none;
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    display: flex;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: opacity 0.15s;
    top: 0;
  }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (min-width: 768px) {
  .portlet > .portlet-topper {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .controls-visible .portlet-topper {
    display: box;
    display: flex;
  }
}

.portlet-topper-toolbar {
  margin: 0;
  padding-left: 0;
}
.portlet-topper-toolbar > a,
.portlet-topper-toolbar > span > a,
.portlet-topper-toolbar .lfr-icon-menu > a {
  color: rgba(var(--ds-black-100), 0.5);
}
.portlet-topper-toolbar > a:focus, .portlet-topper-toolbar > a:hover {
  text-decoration: none;
}
.controls-visible .portlet-topper-toolbar {
  display: block;
}

.lfr-panel-page .portlet-title {
  font-size: 13px;
}

.portlet-borderless .portlet-content {
  padding: var(--spacer-3, 0.5rem);
}
.portlet-decorate .portlet-content {
  background: var(--ds-white-100);
  border-color: transparent;
  border-style: solid;
  border-width: 2px 2px 2px 2px;
  padding: var(--spacer-3, 0.5rem);
  word-wrap: break-word;
}
.portlet-barebone .portlet-content {
  padding: 0;
}

.portlet-dynamic-data-lists-display .lfr-ddm-field-group,
.portlet-dynamic-data-lists .lfr-ddm-field-group {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 28px 24px;
}

.breadcrumb.breadcrumb-vertical {
  display: inline-block;
  text-align: center;
}
.breadcrumb.breadcrumb-vertical li {
  display: block;
}
.breadcrumb.breadcrumb-vertical li.last, .breadcrumb.breadcrumb-vertical li.only {
  background: none;
}
.breadcrumb.breadcrumb-vertical .divider {
  background: url(../images/arrows/07_down.png) no-repeat 50% 100%;
  display: block;
  height: 10px;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.navbar form {
  margin: 0;
}

:not(.inline-item) > .loading-animation {
  margin-bottom: 20px;
  margin-top: 20px;
}
.product-menu .loading-animation {
  margin-top: 160px;
}

@keyframes lfr-drop-active {
  0% {
    background-color: var(--ds-black-16);
    border-color: var(--ds-black-24);
  }
  50% {
    background-color: #f1fce9;
    border-color: #9de963;
    transform: scale(1.1);
  }
  75% {
    background-color: #f1fce9;
    border-color: #9de963;
  }
  100% {
    background-color: var(--ds-black-16);
    border-color: var(--ds-black-24);
  }
}
.lfr-upload-container .progress-bar,
.lfr-upload-container .progress {
  border-radius: 10px;
}
.lfr-upload-container .upload-file,
.lfr-upload-container .upload-target {
  border-radius: 5px;
}
.upload-drop-active .lfr-upload-container .upload-target {
  animation: none;
}
.upload-drop-intent .lfr-upload-container .upload-target {
  animation: lfr-drop-active 1s ease 0.2s infinite;
}

.select-files {
  border-radius: 5px;
}

.taglib-form-navigator > .form-steps > ul.form-navigator.list-group {
  box-shadow: none;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:hover .number, .taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label:focus .number {
  box-shadow: 0 0 5px 0 var(--ds-black-96);
  transition-duration: 0.25s;
  transition-property: box-shadow;
  transition-timing-function: ease-out;
}
.taglib-form-navigator > .form-steps > ul.form-navigator.list-group .tab .tab-label .number {
  border-radius: 50%;
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.lfr-progress-active .progress-bar-status,
.lfr-upload-container .file-uploading .progress-bar .progress {
  animation: progress-bar-stripes 0.5s linear infinite;
  background-image: linear-gradient(-45deg, rgb(from var(--ds-white-100) r g b / 0.3) 25%, rgb(from var(--ds-white-100) r g b / 0) 25%, rgb(from var(--ds-white-100) r g b / 0) 50%, rgb(from var(--ds-white-100) r g b / 0.3) 50%, rgb(from var(--ds-white-100) r g b / 0.3) 75%, rgb(from var(--ds-white-100) r g b / 0) 75%, rgb(from var(--ds-white-100) r g b / 0));
  background-size: 40px 40px;
  transition: width, 0.5s, ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .lfr-progress-active .progress-bar-status,
  .lfr-upload-container .file-uploading .progress-bar .progress {
    transition: none;
  }
}
.c-prefers-reduced-motion .lfr-progress-active .progress-bar-status,
.c-prefers-reduced-motion .lfr-upload-container .file-uploading .progress-bar .progress {
  transition: none;
}

@keyframes highlight-animation {
  from {
    background-color: #fff1cc;
  }
  to {
    background-color: transparent;
  }
}
.highlight-animation {
  animation: highlight-animation 0.7s;
}

.portlet-options.btn-group .dropdown-toggle, .portlet-options.btn-group.open .dropdown-toggle {
  box-shadow: none;
}

.form-group.form-inline.input-boolean-wrapper label, .form-group.form-inline.input-checkbox-wrapper label {
  gap: 0.3125rem;
}

body:has(.control-menu-container) .accessory-available-versions table thead th {
  top: var(--control-menu-height, 0);
}

/* Roboto Flex, served from the static-brand-assets client extension rather than Google Fonts:
   the same woff2 files and @font-face rules Google returned for this family request
   (opsz,wdth,wght,GRAD,YTLC; one face per script subset, fetched only for the unicode-range a
   page uses). Self-hosting keeps visitors' IP addresses away from a third party and saves the
   main.css -> Google CSS -> font file request chain. To change the axes or the version, request
   the family from fonts.googleapis.com/css2 with a current browser user agent and replace the
   files and rules below together. Licence: static-brand-assets/src/fonts/OFL-roboto-flex.txt. */
/* cyrillic-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/o/static-brand-assets/fonts/roboto-flex-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/o/static-brand-assets/fonts/roboto-flex-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/o/static-brand-assets/fonts/roboto-flex-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/o/static-brand-assets/fonts/roboto-flex-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/o/static-brand-assets/fonts/roboto-flex-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Roboto Flex";
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url("/o/static-brand-assets/fonts/roboto-flex-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched stand-ins for Roboto Flex while it loads (it is display=swap). Each scales Arial
   to Roboto Flex's width, so text set in the fallback takes the same space and nothing reflows
   when the web font swaps in. Without them the first paint used the system font (Segoe UI,
   San Francisco, ...), wider than Roboto Flex, and the public header's navigation row could
   paint on two lines and then collapse to one: a layout shift of the whole page. Text with the
   condensed variation settings (--ds-font-variation-settings-base: headings, navigation) runs
   about 10% narrower than plain text, so it needs its own stand-in. The ratios were measured
   against the header labels and body copy in Chromium. local() matches a face's exact name, so
   each weight names its own face: a single regular face would be faux-bolded, at other widths.
   Arial, ArialMT: Windows, macOS. Liberation Sans: Linux, where "Arial" is only an alias. */
@font-face {
  font-family: "Roboto Flex Fallback";
  font-weight: 100 599;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 99%;
}
@font-face {
  font-family: "Roboto Flex Fallback";
  font-weight: 600 1000;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust: 99%;
}
@font-face {
  font-family: "Roboto Flex Condensed Fallback";
  font-weight: 100 599;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 90%;
}
@font-face {
  font-family: "Roboto Flex Condensed Fallback";
  font-weight: 600 1000;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  size-adjust: 90%;
}
:root {
  /* Fonts */
  --ds-font-size-base: 1rem;
  --ds-font-size-h1: 3.25rem;
  --ds-font-size-h2: 2.75rem;
  --ds-font-size-h3: 2.375rem;
  --ds-font-size-h4: 1.75rem;
  --ds-font-size-h5: 1.313rem;
  --ds-font-size-h6: 1.063rem;
  --ds-font-size-text-sm: 0.875rem;
  --ds-font-size-text-md: 1rem;
  --ds-font-size-text-lg: 1.188rem;
  --ds-font-size-button: 1.063rem;
  --ds-font-size-label: 1rem;
  --ds-font-size-icon: 1.5rem;
  --ds-font-weight-black: 900;
  --ds-font-weight-bold: 700;
  --ds-font-weight-semi-bold: 660;
  --ds-font-weight-normal: 400;
  --ds-font-weight-button: var(--ds-font-weight-bold);
  --ds-font-family-base: "Roboto Flex", "Roboto Flex Fallback", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    helvetica, arial, sans-serif;
  /* For text with --ds-font-variation-settings-base; see the fallback faces above. */
  --ds-font-family-condensed: "Roboto Flex", "Roboto Flex Condensed Fallback", -apple-system, blinkmacsystemfont,
    "Segoe UI", roboto, helvetica, arial, sans-serif;
  --ds-font-variation-settings-base: "GRAD" -48, "XOPQ" 96, "XTRA" 468, "YOPQ" 79, "YTAS" 750, "YTDE" -203, "YTFI" 738,
    "YTLC" 570, "YTUC" 712, "slnt" 0, "wdth" 64;
  --ds-font-variation-button-base: "GRAD: -48, XOPQ: 96, XTRA: 468, YOPQ: 79, YTAS: 750, YTDE: -203, YTFI: 738, YTLC: 570, YTUC: 712, Slant: 0, Width: 64";
  --ds-line-height-base: 1.5;
  --ds-line-height-base-title: 1.12;
  --ds-font-size-category-link: 1.3125rem;
  --ds-font-size-secondary-link: 0.875rem;
  /* Colors - Primitives */
  --ds-white-100: hsl(0 0% 100%);
  --ds-black-100: hsl(0 0% 0%);
  --ds-black-96: hsl(0 0% 4%);
  --ds-black-88: hsl(0 0% 12%);
  --ds-black-80: hsl(0 0% 20%);
  --ds-black-72: hsl(0 0% 28%);
  --ds-black-64: hsl(0 0% 36%);
  --ds-black-56: hsl(0 0% 44%);
  --ds-black-48: hsl(0 0% 52%);
  --ds-black-40: hsl(0 0% 60%);
  --ds-black-32: hsl(0 0% 68%);
  --ds-black-24: hsl(0 0% 76%);
  --ds-black-16: hsl(0 0% 84%);
  --ds-black-8: hsl(0 0% 92%);
  --ds-black-4: hsl(0 0% 96%);
  --ds-blue-100: hsl(218 47% 44%);
  --ds-blue-88: hsl(218 39% 50%);
  --ds-blue-72: hsl(218 38% 60%);
  --ds-blue-56: hsl(218 38% 68%);
  --ds-blue-40: hsl(218 39% 76%);
  --ds-blue-24: hsl(218 48% 84%);
  --ds-blue-10: hsl(218 47% 95%);
  --ds-blue-8: hsl(218 47% 97%);
  --ds-red-100: hsl(0 80% 46%);
  --ds-red-88: hsl(0 72% 53%);
  --ds-red-72: hsl(0 72% 63%);
  --ds-red-56: hsl(0 72% 71%);
  --ds-red-40: hsl(0 72% 81%);
  --ds-red-24: hsl(0 72% 89%);
  --ds-red-10: hsl(0 72% 96%);
  --ds-red-8: hsl(0 72% 98%);
  --ds-red-darken-88: hsl(0 79% 6%);
  --ds-red-darken-72: hsl(0 79% 13%);
  --ds-red-darken-56: hsl(0 79% 21%);
  --ds-red-darken-40: hsl(0 79% 28%);
  --ds-red-darken-24: hsl(0 79% 35%);
  --ds-red-darken-8: hsl(0 79% 43%);
  --ds-blue-darken-88: hsl(218 38% 4%);
  --ds-blue-darken-72: hsl(218 38% 12%);
  --ds-blue-darken-56: hsl(218 38% 20%);
  --ds-blue-darken-40: hsl(218 38% 28%);
  --ds-blue-darken-24: hsl(218 38% 36%);
  --ds-blue-darken-8: hsl(218 38% 44%);
  --ds-green-100: hsl(130 62% 34%);
  --ds-green-88: hsl(130 38% 49%);
  --ds-green-72: hsl(130 38% 54%);
  --ds-green-56: hsl(130 38% 66%);
  --ds-green-40: hsl(130 38% 74%);
  --ds-green-24: hsl(130 38% 82%);
  --ds-green-10: hsl(130 38% 94%);
  --ds-green-8: hsl(130 38% 96%);
  --ds-green-darken-88: hsl(130 38% 4%);
  --ds-green-darken-72: hsl(130 38% 12%);
  --ds-green-darken-56: hsl(130 38% 20%);
  --ds-green-darken-40: hsl(130 38% 28%);
  --ds-green-darken-24: hsl(130 38% 36%);
  --ds-green-darken-8: hsl(130 38% 44%);
  --ds-orange-100: hsl(28 89% 48%);
  --ds-orange-88: hsl(28 79% 53%);
  --ds-orange-72: hsl(28 79% 63%);
  --ds-orange-56: hsl(28 79% 71%);
  --ds-orange-40: hsl(28 79% 81%);
  --ds-orange-24: hsl(28 79% 89%);
  --ds-orange-10: hsl(28 79% 96%);
  --ds-orange-8: hsl(28 79% 98%);
  --ds-orange-darken-88: hsl(28 79% 6%);
  --ds-orange-darken-72: hsl(28 79% 13%);
  --ds-orange-darken-56: hsl(28 79% 21%);
  --ds-orange-darken-40: hsl(28 79% 28%);
  --ds-orange-darken-24: hsl(28 79% 35%);
  --ds-orange-darken-8: hsl(28 79% 43%);
  /* Colors - Brand */
  /*  Use in UI - adjusted contrast */
  --ds-teal-ui-100: hsla(
    187,
    96%,
    28%,
    1
  ); /* // TODO: handle if variable is in style book and in custom.scss, how to sync? */
  --ds-teal-ui-96: hsl(187 89% 31%);
  --ds-teal-ui-88: hsl(187 78% 36%);
  --ds-teal-ui-80: hsl(187 67% 41%);
  --ds-teal-ui-72: hsl(187 58% 45%);
  --ds-teal-ui-64: hsl(187 50% 50%);
  --ds-teal-ui-56: hsl(187 43% 54%);
  --ds-teal-ui-48: hsl(187 38% 58%);
  --ds-teal-ui-40: hsl(187 34% 62%);
  --ds-teal-ui-32: hsl(187 30% 67%);
  --ds-teal-ui-24: hsl(187 26% 72%);
  --ds-teal-ui-16: hsl(187 22% 77%);
  --ds-teal-ui-8: hsl(187 18% 92%);
  --ds-teal-ui-darken-8: hsl(187 96% 27%);
  --ds-teal-ui-darken-16: hsl(187 96% 24%);
  --ds-teal-ui-darken-24: hsla(187, 96%, 21%, 1);
  --ds-teal-ui-darken-40: hsla(187, 95%, 17%, 1);
  --ds-teal-ui-darken-100: hsl(187, 100%, 8%);
  /*   // Brand colors - not directly for UI use due to contrast
  */
  --ds-teal-100: hsl(188 100% 30%);
  --ds-teal-96: hsl(188 90% 33%);
  --ds-teal-88: hsl(188 78% 38%);
  --ds-teal-80: hsl(188 67% 41%);
  --ds-teal-72: hsl(188 58% 45%);
  --ds-teal-64: hsl(188 50% 50%);
  --ds-teal-56: hsl(188 43% 54%);
  --ds-teal-48: hsl(188 38% 58%);
  --ds-teal-40: hsl(188 34% 62%);
  --ds-teal-32: hsl(188 30% 67%);
  --ds-teal-24: hsl(188 26% 72%);
  --ds-teal-16: hsl(188 22% 77%);
  --ds-teal-8: hsl(188 18% 92%); /* // TODO: handle if variable is in style book and in custom.scss, how to sync? */
  --ds-teal-darken-8: hsl(188 100% 28%);
  --ds-teal-darken-24: hsla(187, 96%, 21%, 1);
  --ds-teal-darken-40: hsla(187, 95%, 17%, 1);
  --ds-teal-darken-56: hsl(188 100% 14%);
  --ds-teal-darken-72: hsl(188 100% 10%);
  --ds-teal-darken-88: hsl(188 100% 5%);
  --ds-teal-faded: hsla(186, 13%, 61%, 1);
  /* Colors - UI States */
  --ds-info-content: var(--ds-teal-100);
  --ds-info-bg: hsla(185, 43%, 95%, 1);
  --ds-success-content: hsla(126, 62%, 34%, 1);
  --ds-success-bg: hsla(125, 33%, 94%, 1);
  --ds-warning-content: hsla(29, 89%, 48%, 1);
  --ds-warning-bg: hsla(27, 85%, 95%, 1);
  --ds-error-content: hsla(0, 81%, 47%, 1);
  --ds-error-bg: hsla(0, 70%, 95%, 1);
  /* Notificaitons */
  --ds-notification-info-bg: var(--ds-teal-ui-16);
  --ds-notification-error-bg: var(--ds-red-40);
  /* Links */
  --ds-anchor-link: var(--ds-teal-ui-100);
  --ds-anchor-link-hover: var(--ds-teal-ui-darken-24);
  --ds-anchor-link-pressed: var(--ds-teal-ui-darken-40);
  /* Buttons */
  --ds-line-height-button: 1.5;
  --ds-border-radius-button: var(--ds-radius-sm);
  /* Buttons - Primary */
  --ds-button-primary-bg: var(--ds-teal-ui-100);
  --ds-button-primary-content: var(--ds-white-100);
  --ds-button-primary-bg-hover: var(--ds-teal-ui-darken-24);
  --ds-button-primary-content-hover: var(--ds-white-100);
  --ds-button-primary-bg-pressed: var(--ds-teal-ui-darken-40);
  --ds-button-primary-content-pressed: var(--ds-white-100);
  --ds-button-primary-bg-disabled: var(--ds-teal-faded);
  --ds-button-primary-content-disabled: var(--ds-white-100);
  /* // Buttons - Secondary - NOT in use, in design "Outlined" acts as "Secondary"
  // --ds-button-secondary-bg: hsla(0, 0%, 92%, 1);
  // --ds-button-secondary-content: hsla(187, 96%, 28%, 1);
  // --ds-button-secondary-bg-hover:  var(--ds-black-16);
  // --ds-button-secondary-content-hover: var(--teal-ui-darken-24);
  // --ds-button-secondary-bg-pressed: hsla(0, 0%, 76%, 1);
  // --ds-button-secondary-content-pressed: hsla(187, 95%, 17%, 1);
  // --ds-button-secondary-bg-disabled: hsla(0, 0%, 92%, 1);
  // --ds-button-secondary-content-disabled: var(--teal-faded); */
  /* Buttons - Outlined */
  --ds-button-outlined-bg: var(--ds-white-100);
  --ds-button-outlined-border: var(--ds-black-16);
  --ds-button-outlined-content: var(--ds-teal-ui-100);
  --ds-button-outlined-border-hover: var(--ds-black-32);
  --ds-button-outlined-content-hover: var(--ds-teal-ui-darken-24);
  --ds-button-outlined-border-pressed: var(--ds-black-64);
  --ds-button-outlined-content-pressed: var(--ds-teal-ui-darken-40);
  --ds-button-outlined-border-disabled: var(--ds-teal-faded);
  --ds-button-outlined-content-disabled: var(--ds-teal-faded);
  --ds-accordion-bg: hsla(0, 0%, 96%, 1);
  --ds-accordion-title: hsla(187, 96%, 28%, 1);
  --ds-accordion-subtitle: var(--ds-black-64);
  --ds-accordion-icon: hsla(187, 96%, 28%, 1);
  /* stylelint-disable custom-property-pattern */
  --ds-accordion-bg--hover: var(--ds-white-100);
  --ds-accordion-bg--active: var(--ds-info-bg);
  --ds-accordion-title--hover: var(--ds-teal-ui-darken-24);
  --ds-accordion-subtitle--hover: var(--ds-black-80);
  --ds-accordion-icon--hover: var(--ds-teal-ui-darken-24);
  --ds-accordion-bg--pressed: var(--ds-white-100);
  --ds-accordion-title--pressed: var(--ds-teal-ui-darken-40);
  --ds-accordion--subtitle--pressed: var(--ds-black-80);
  --ds-accordion-icon--pressed: var(--ds-teal-ui-darken-40);
  /* stylelint-enable custom-property-pattern */
  /* Radii */
  --ds-radius-xs: 0.25rem;
  --ds-radius-sm: 0.5rem;
  --ds-radius-md: 0.75rem;
  --ds-radius-lg: 1rem;
  --ds-radius-xl: 1.5rem;
  /* Spacing */
  --ds-spacing-xxs: 0.125rem;
  --ds-spacing-xs: 0.25rem;
  --ds-spacing-sm: 0.5rem;
  --ds-spacing-md: 1rem;
  --ds-spacing-lg: 2rem;
  --ds-spacing-xl: 4rem;
  --ds-spacing-xxl: 6rem;
  /* Gap */
  --ds-spacer-1: 0.125rem;
  --ds-spacer-2: 0.25rem;
  --ds-spacer-3: 0.5rem;
  --ds-spacer-4: 0.75rem;
  --ds-spacer-5: 1rem;
  --ds-spacer-6: 1.25rem;
  --ds-spacer-7: 1.5rem;
  --ds-spacer-8: 2rem;
  --ds-spacer-8b: 3rem;
  --ds-spacer-9: 4rem;
  --ds-spacer-10: 6rem;
  /* Padding */
  --ds-padding-xs: 0.25rem;
  --ds-padding-sm: 0.5rem;
  --ds-padding-md: 0.75rem;
  --ds-padding-lg: 1rem;
  --ds-padding-xl: 1.5rem;
  --ds-padding-xxl: 2rem;
  --ds-padding-xxxl: 3rem;
  --ds-padding-button: 1em 1.5em;
  /* margin */
  --ds-margin-xs: 0.25rem;
  --ds-margin-sm: 0.5rem;
  --ds-margin-md: 0.75rem;
  --ds-margin-lg: 1rem;
  --ds-margin-xl: 1.5rem;
  --ds-margin-xxl: 2rem;
  --ds-margin-xxxl: 3rem;
  --ds-margin-4xl: 4rem;
  --ds-margin-5xl: 5rem;
  --ds-margin-button: 1em 1.5em;
  /* Icons */
  --ds-icon-primary: var(--ds-black-100);
  --ds-icon-secondary: var(--ds-black-56);
  --ds-icon-brand: var(--ds-teal-ui-100);
  --ds-icon-accent: var(--ds-red-100);
  /* Icons size */
  --ds-icon-1: 0.125rem;
  --ds-icon-2: 0.25rem;
  --ds-icon-3: 0.5rem;
  --ds-icon-4: 0.75rem;
  --ds-icon-5: 1rem;
  --ds-icon-6: 1.25rem;
  --ds-icon-7: 1.5rem;
  --ds-icon-8: 1.75rem;
  --ds-icon-9: 2rem;
  --ds-icon-95: 3rem;
  --ds-icon-10: 4rem;
  --ds-icon-11: 6rem;
  /* Touch target — WCAG 2.5.5 minimum interactive size (44x44px) */
  --ds-touch-target: 2.75rem;
  /* Typography */
  --ds-text-primary: var(--ds-black-100);
  --ds-text-brand: var(--ds-teal-ui-100);
  --ds-text-secondary: var(--ds-black-56);
  --ds-text-disabled: var(--ds-black-40);
  /* Background */
  --ds-bg-brand-teal: var(--ds-teal-ui-100);
  --ds-bg-brand-red: var(--ds-red-100);
  --ds-bg-shallow: var(--ds-black-4);
  --ds-bg-body: var(--ds-white-100);
  --ds-bg-faded-teal: var(--ds-teal-8);
  --ds-bg-soft: var(--ds-black-4);
  --ds-bg-footer: var(--ds-bg-soft);
  --ds-bg-soft-linear-gradient-dark: linear-gradient(90deg, #1c4349 0%, var(--ds-bg-brand-teal) 100%);
  /* Border */
  --ds-border-default: var(--ds-black-16);
  --ds-border-heavy: var(--ds-black-80);
  /* Form */
  /* Inputs */
  --ds-input-small: 3rem;
  --ds-input-large: 3.5rem;
  /* Inputs color variations */
  --ds-form-input-border: var(--ds-black-32);
  --ds-form-input-bg: var(--ds-white-100);
  --ds-form-input-border-hover: var(--ds-black-96);
  --ds-form-input-bg-hover: var(--ds-black-16);
  --ds-form-input-border-active: var(--ds-teal-100);
  --ds-form-input-bg-active: var(--ds-white-100);
  --ds-form-input-border-filled: var(--ds-black-56);
  --ds-form-input-bg-filled: var(--ds-white-100);
  --ds-form-input-border-disabled: var(--ds-black-32);
  --ds-form-input-bg-disabled: var(--ds-black-16);
  --ds-form-input-border-error: var(--ds-red-100);
  --ds-form-input-bg-error: var(--ds-red-10);
  --ds-form-input-border-success: var(--ds-green-10);
  --ds-form-input-bg-success: var(--ds-green-100);
  /* Shadows */
  --ds-shadow-sm: 2px 2px 16px 0 hsla(0, 0%, 0%, 0.12);
  --ds-shadow-lg: 12px 12px 56px hsla(0, 0%, 0%, 0.16);
  /* // Dialect overrides
  // --container-max-sm: 540px;
  // --container-max-md: 900px;
  // --container-max-lg: 960px;
  // --container-max-xl: 1248px; */
}

/* fix for reenter password jsp */
.sheet.sheet-lg .sheet-text form[name=fm] .panel-body {
  padding-left: 0;
}
.sheet.sheet-lg .sheet-text form[name=fm] .button-row {
  display: flex;
  gap: var(--ds-spacer-8);
}
.sheet.sheet-lg .sheet-text form[name=fm] .button-holder {
  display: flex;
  gap: var(--ds-spacing-md);
}

:root [data-use-dark-mode] {
  --ds-button-primary-bg: var(--ds-teal-ui-100);
  --ds-button-primary-content: var(--ds-white-100);
  --ds-button-primary-bg-hover: var(--ds-teal-ui-darken-24);
  --ds-button-primary-content-hover: var(--ds-white-100);
  --ds-button-primary-bg-pressed: var(--ds-teal-ui-darken-40);
  --ds-button-primary-content-pressed: var(--ds-white-100);
  --ds-button-primary-bg-disabled: var(--ds-teal-faded);
  --ds-button-primary-content-disabled: var(--ds-white-100);
  --ds-button-outlined-bg-hover: var(--ds-black-100);
  --ds-button-outlined-bg-pressed: var(--ds-black-100);
  /* // --ds-button-secondary-bg: var(--ds-black-88);
  // --ds-button-secondary-content: var(--ds-white-100);
  // --ds-button-secondary-bg--hover: var(--ds-black-96);
  // --ds-button-secondary-content--hover: hsl(187 96.3% 21%);
  // --ds-button-secondary-bg--pressed: hsl(0 0% 67.8%);
  // --ds-button-secondary-content--pressed: hsl(187 95.3% 16.7%);
  // --ds-button-secondary-bg--disabled: hsl(0 0% 67.8%);
  // --ds-button-secondary-content--disabled: var(--ds-teal-faded); */
  --ds-button-outlined-bg: var(--ds-black-100);
  --ds-button-outlined-border: var(--ds-black-80);
  --ds-button-outlined-content: var(--ds-white-100);
  --ds-button-outlined-border-hover: var(--ds-black-64);
  --ds-button-outlined-content-hover: var(--ds-white-100);
  --ds-button-outlined-border-pressed: var(--ds-black-48);
  --ds-button-outlined-content-pressed: var(--ds-teal-ui-56);
  --ds-button-outlined-border-disabled: var(--ds-teal-faded);
  --ds-button-outlined-content-disabled: var(--ds-teal-faded);
  /* Form */
  --ds-form-input-border: var(--ds-black-72);
  --ds-form-input-bg: var(--ds-black-96);
  --ds-form-input-border-hover: var(--ds-black-56);
  --ds-form-input-bg-hover: var(--ds-black-88);
  --ds-form-input-border-active: var(--ds-teal-ui-darken-16);
  --ds-form-input-bg-active: var(--ds-black-96);
  --ds-form-input-border-filled: var(--ds-black-96);
  --ds-form-input-bg-filled: var(--ds-black-96);
  --ds-form-input-border-disabled: var(--ds-black-72);
  --ds-form-input-bg-disabled: var(--ds-black-88);
  /* Shadows */
  --ds-shadow-sm: 2px 2px 16px 0 hsla(0, 0%, 0%, 0.12);
  --ds-shadow-lg: 12px 12px 56px hsla(0, 0%, 0%, 0.16);
  /* Notification */
  --ds-notification-info-bg: var(--ds-teal-ui-darken-100);
  --ds-notification-error-bg: var(--ds-red-darken-56);
  /* // --ds-tag-content: var(--ds-white-100);
  // --ds-tag-icon: var(--ds-white-100);
  // --ds-tag-bg: var(--ds-black-24);
  // --ds-tag-border: var(--ds-black-72);
  // --ds-tag-clickable-content: hsl(187 43.7% 72.2%);
  // --ds-tag-clickable-icon: hsl(187 43.7% 72.2%);
  // --ds-tag-clickable-bg: var(--ds-black-24);
  // --ds-tag-clickable-content-hover: hsl(186 43.5% 83.3%);
  // --ds-tag-clickable-icon-hover: hsl(186 43.5% 83.3%);
  // --ds-tag-clickable-bg-hover: hsl(0 0% 67.8%);
  // --ds-tag-clickable-content-pressed: hsl(185 42.9% 94.5%);
  // --ds-tag-clickable-icon-pressed: hsl(185 42.9% 94.5%);
  // --ds-tag-clickable-bg-pressed: var(--ds-black-24);
  // --ds-tag-clickable-content-disabled: hsl(186 13.2% 61%);
  // --ds-tag-clickable-icon-disabled: hsl(186 13.2% 61%);
  // --ds-tag-clickable-bg-disabled: hsl(0 0% 67.8%);
  // --ds-accordion-bg: hsl(0 0% 12.2%);
  // --ds-accordion-title: hsl(186 35.6% 88.4%);
  // --ds-accordion-subtitle: hsl(0 0% 67.8%);
  // --ds-accordion-icon: hsl(186 35.6% 88.4%);
  // --ds-accordion-bg--hover: var(--ds-white-100);
  // --ds-accordion-title--hover: hsl(187 100% 23.1%);
  // --ds-accordion-subtitle--hover: var(--ds-black-80);
  // --ds-accordion-icon--hover: hsl(187 100% 23.1%);
  // --ds-accordion-bg--pressed: var(--ds-white-100);
  // --ds-accordion-title--pressed: hsl(187 100% 18.2%);
  // --ds-accordion--subtitle--pressed: var(--ds-black-80);
  // --ds-accordion-icon--pressed: hsl(187 100% 18.2%);
  // --ds-tab-bg: var(--ds-white-100);
  // --ds-tab-border: var(--ds-black-80);
  // --ds-tab-title: var(--ds-teal-100);
  // --ds-tab-icon: var(--ds-teal-100);
  // --ds-tab-bg--hover: hsl(0 0% 67.8%);
  // --ds-tab-border-hover: hsl(187 100% 23.1%);
  // --ds-tab-title-hover: hsl(187 100% 23.1%);
  // --ds-tab-icon-hover: hsl(187 100% 23.1%);
  // --ds-tab-bg-pressed: var(--ds-white-100);
  // --ds-tab-border-pressed: hsl(187 100% 18.2%);
  // --ds-tab-title-pressed: hsl(187 100% 18.2%);
  // --ds-tab-icon-pressed: hsl(187 100% 18.2%);
  // --ds-tab-active-bg: var(--ds-white-100);
  // --ds-tab-active-border: var(--ds-teal-100);
  // --ds-tab-active-title: var(--ds-black-96);
  // --ds-tab-active-icon: var(--ds-black-96);
  // --ds-tooltip-bg: var(--ds-white-100);
  // --ds-tooltip-content: var(--ds-black-96); */
  --ds-info-content: hsl(187 43.7% 61%);
  --ds-info-bg: hsl(187 100% 8.43%);
  --ds-success-content: hsl(126 32.6% 63.3%);
  --ds-success-bg: hsl(126 63.3% 9.61%);
  --ds-warning-content: hsl(29 82.4% 71%);
  --ds-warning-bg: hsl(28.5 88.4% 13.5%);
  --ds-error-content: hsl(0 71.1% 70.2%);
  --ds-error-bg: hsl(0 81.8% 12.9%);
  --ds-icon-primary: var(--ds-white-100);
  --ds-icon-secondary: var(--ds-black-40);
  --ds-icon-brand: var(--ds-teal-100);
  --ds-icon-accent: var(--ds-red-100);
  --ds-text-primary: var(--ds-white-100);
  --ds-text-brand: var(--ds-teal-100);
  --ds-text-secondary: var(--ds-black-40);
  --ds-text-disabled: var(--ds-black-64);
  --ds-anchor-link: hsla(187, 69%, 39%, 1);
  --ds-anchor-link-hover: var(--ds-teal-72);
  --ds-anchor-link-pressed: var(--ds-teal-56);
  --ds-bg-brand-teal: var(--ds-teal-ui-100);
  --ds-bg-brand-red: var(--ds-red-100);
  --ds-bg-shallow: var(--ds-black-88);
  --ds-bg-body: var(--ds-black-96);
  --ds-bg-footer: var(--ds-black-96);
  /* // --ds-bg-faded-teal: hsl(187 100% 8.43%); */
  --ds-border-default: var(--ds-black-80);
  --ds-border-heavy: var(--ds-black-24);
}

:root [data-use-light-mode] {
  --ds-button-primary-bg: var(--ds-teal-ui-100);
  --ds-button-primary-content: var(--ds-white-100);
  --ds-button-primary-bg-hover: var(--ds-teal-ui-darken-24);
  --ds-button-primary-content-hover: var(--ds-white-100);
  --ds-button-primary-bg-pressed: var(--ds-teal-ui-darken-40);
  --ds-button-primary-content-pressed: var(--ds-white-100);
  --ds-button-primary-bg-disabled: var(--ds-teal-faded);
  --ds-button-primary-content-disabled: var(--ds-white-100);
  --ds-button-outlined-bg: var(--ds-white-100);
  --ds-button-outlined-border: var(--ds-black-16);
  --ds-button-outlined-content: var(--ds-teal-ui-100);
  --ds-button-outlined-border-hover: var(--ds-black-32);
  --ds-button-outlined-bg-hover: unset;
  --ds-button-outlined-content-hover: var(--ds-teal-ui-darken-24);
  --ds-button-outlined-border-pressed: var(--ds-black-64);
  --ds-button-outlined-bg-pressed: unset;
  --ds-button-outlined-content-pressed: var(--ds-teal-ui-darken-40);
  --ds-button-outlined-border-disabled: var(--ds-teal-faded);
  --ds-button-outlined-content-disabled: var(--ds-teal-faded);
  /* Form */
  --ds-form-input-border: var(--ds-black-32);
  --ds-form-input-bg: var(--ds-white-100);
  --ds-form-input-border-hover: var(--ds-black-96);
  --ds-form-input-bg-hover: var(--ds-black-16);
  --ds-form-input-border-active: var(--ds-teal-100);
  --ds-form-input-bg-active: var(--ds-white-100);
  --ds-form-input-border-filled: var(--ds-black-56);
  --ds-form-input-bg-filled: var(--ds-white-100);
  --ds-form-input-border-disabled: var(--ds-black-32);
  --ds-form-input-bg-disabled: var(--ds-black-16);
  /* Shadows */
  --ds-shadow-sm: 2px 2px 16px 0 hsla(0, 0%, 0%, 0.12);
  --ds-shadow-lg: 12px 12px 56px hsla(0, 0%, 0%, 0.16);
  /* Notification */
  --ds-notification-info-bg: var(--ds-teal-ui-16);
  --ds-notification-error-bg: var(--ds-red-40);
  --ds-info-content: var(--ds-teal-100);
  --ds-info-bg: hsla(185, 43%, 95%, 1);
  --ds-success-content: hsla(126, 62%, 34%, 1);
  --ds-success-bg: hsla(125, 33%, 94%, 1);
  --ds-warning-content: hsla(29, 89%, 48%, 1);
  --ds-warning-bg: hsla(27, 85%, 95%, 1);
  --ds-error-content: hsla(0, 81%, 47%, 1);
  --ds-error-bg: hsla(0, 70%, 95%, 1);
  --ds-icon-primary: var(--ds-black-100);
  --ds-icon-secondary: var(--ds-black-56);
  --ds-icon-brand: var(--ds-teal-ui-100);
  --ds-icon-accent: var(--ds-red-100);
  --ds-text-primary: var(--ds-black-100);
  --ds-text-brand: var(--ds-teal-ui-100);
  --ds-text-secondary: var(--ds-black-56);
  --ds-text-disabled: var(--ds-black-40);
  --ds-anchor-link: var(--ds-teal-ui-100);
  --ds-anchor-link-hover: var(--ds-teal-ui-darken-24);
  --ds-anchor-link-pressed: var(--ds-teal-ui-darken-40);
  --ds-bg-brand-teal: var(--ds-teal-ui-100);
  --ds-bg-brand-red: var(--ds-red-100);
  --ds-bg-shallow: var(--ds-black-4);
  --ds-bg-body: var(--ds-white-100);
  --ds-bg-footer: var(--ds-bg-soft);
  --ds-bg-faded-teal: var(--ds-teal-8);
  --ds-border-default: var(--ds-black-16);
  --ds-border-heavy: var(--ds-black-80);
}

/* // Too difficult to override with bootstrap overrides */
/* Off-canvas panels (e.g. .mini-cart-side-panel, .side-panel) sit outside the
   viewport at rest via `position: fixed` + `transform: translateX(...)`.
   Mobile Safari includes that off-screen box in the document's scrollable
   area even though it's invisible, which produced a phantom horizontal
   scrollbar / extra blank space on the right on narrow viewports (e.g.
   iPhone SE). Clipping at the root prevents any off-canvas or overflowing
   descendant from expanding page scroll width.

   Use `clip`, not `hidden`: `overflow-x: hidden` forces `overflow-y` to
   compute as `auto`, turning the root into a scroll container and breaking
   `position: sticky` on descendants (e.g. the DealerZone menu sidebar,
   SQMAKITA-3852). `overflow-x: clip` clips the same overflow without
   establishing a scroll container, so sticky keeps working. */
html {
  overflow-x: clip;
}

body {
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-body);
  font-family: var(--ds-font-family-base);
  font-size: var(--ds-font-size-base);
  line-height: var(--ds-line-height-base);
  overflow-x: clip;
}

.container-fluid-max-xl {
  max-width: var(--container-max-xl);
  padding-left: var(--ds-spacer-4) !important;
  padding-right: var(--ds-spacer-4) !important;
}

.btn:not(.btn-link):focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ds-teal-80);
}
.btn:not(.btn-link):active:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ds-teal-80);
}

.portlet {
  margin: 0;
}

/* // Don't target link and pagination buttons */
a:not(.btn, .page-link, .menu-item),
.btn-link:not(.page-link) {
  color: var(--ds-anchor-link);
}
a:not(.btn, .page-link, .menu-item):hover, a:not(.btn, .page-link, .menu-item).hover,
.btn-link:not(.page-link):hover,
.btn-link:not(.page-link).hover {
  color: var(--ds-anchor-link-hover);
}
a:not(.btn, .page-link, .menu-item):active, a:not(.btn, .page-link, .menu-item):focus,
.btn-link:not(.page-link):active,
.btn-link:not(.page-link):focus {
  color: var(--ds-anchor-link-pressed);
}
a:not(.btn, .page-link, .menu-item):focus-visible,
.btn-link:not(.page-link):focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ds-teal-80);
}
a:not(.btn, .page-link, .menu-item):active:focus-visible,
.btn-link:not(.page-link):active:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--ds-teal-80);
}

/* Pagination — separated rounded buttons */
.pagination-bar {
  gap: var(--ds-spacer-4);
  /* Allow flex children (picker, results, pagination nav) to shrink below their
     content size so .pagination's overflow-x can actually scroll on mobile. */
}
.pagination-bar > * {
  min-width: 0;
}

.pagination {
  gap: var(--ds-spacer-4);
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
}

@media (1280px > width > 768px) {
  .pagination-bar nav[aria-label=Pagination] {
    flex-basis: 100%;
    margin: auto;
    margin-top: var(--ds-spacer-5);
    display: flex;
    justify-content: center;
  }
}

/* Below desktop, always give the pagination its own row so layout stays
   consistent regardless of how many page buttons render (avoids jump between
   page 1 fitting on one row and page 2 wrapping). */
@media (width < 992px) {
  .pagination-bar > :last-child {
    flex-basis: 100%;
  }
}
.page-link {
  min-width: 3rem;
  min-height: 3rem;
}

.page-item.active .page-link {
  font-weight: var(--ds-font-weight-bold);
}

.page-link .lexicon-icon {
  color: inherit;
}

/* stylelint-disable no-descending-specificity */
.btn-link.focus,
.c-prefers-focus .btn-link:focus,
.page-link.focus,
.page-link:focus-visible,
.c-prefers-focus .page-link:focus {
  box-shadow: 0 0 0 0.2rem var(--ds-teal-80);
}

/* stylelint-enable no-descending-specificity */
.captcha {
  background-color: var(--ds-white-100);
}

.form-group.input-select-wrapper select option:hover {
  background-color: var(--ds-teal-ui-100);
  color: var(--ds-white-100);
}

.form-group.input-select-wrapper select option:checked {
  background-color: var(--ds-teal-ui-darken-24);
  color: var(--ds-white-100);
}

.form-group.input-select-wrapper select:not(:disabled) option:not(:disabled) {
  background-color: var(--ds-black-96);
  color: var(--ds-white-100);
}

input[type=radio]:checked {
  accent-color: var(--ds-teal-ui-100);
}

.makita-text-secondary {
  color: var(--ds-text-secondary) !important;
}

.makita-label {
  font-size: var(--ds-font-size-label);
  font-weight: var(--ds-font-weight-bold);
  line-height: normal;
}

.makita-font-base {
  font-size: var(--ds-font-size-base);
}

.makita-font-h1 {
  font-size: var(--ds-font-size-h1) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}

.makita-font-h2 {
  font-size: var(--ds-font-size-h2) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}

.makita-font-h3 {
  font-size: var(--ds-font-size-h3) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}

.makita-font-h4 {
  font-size: var(--ds-font-size-h4) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}

.makita-font-h5 {
  font-size: var(--ds-font-size-h5) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}

.makita-font-h6 {
  font-size: var(--ds-font-size-h6) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}

.makita-font-text-sm {
  font-size: var(--ds-font-size-text-sm) !important;
}

.makita-font-text-md {
  font-size: var(--ds-font-size-text-md) !important;
}

.makita-font-text-lg {
  font-size: var(--ds-font-size-text-lg) !important;
}

.makita-font-button {
  font-size: var(--ds-font-size-button) !important;
}

.makita-font-label {
  font-size: var(--ds-font-size-label) !important;
}

.makita-font-icon {
  font-size: var(--ds-font-size-icon) !important;
}

/*  Font weight helpers */
.fw-black {
  font-weight: var(--ds-font-weight-black) !important;
}

.fw-bold {
  font-weight: var(--ds-font-weight-bold) !important;
}

.fw-semi-bold {
  font-weight: var(--ds-font-weight-semi-bold) !important;
}

.fw-normal {
  font-weight: var(--ds-font-weight-normal) !important;
}

.fw-button {
  font-weight: var(--ds-font-weight-button) !important;
}

.modal-open {
  overflow: unset;
}

.search-bar-suggestions-dropdown-menu {
  border: 1px solid var(--ds-border-default);
}

.search-bar-suggestions-dropdown-menu .search-bar-suggestions-show-more {
  color: var(--ds-anchor-link) !important;
}

.search-bar-suggestions-dropdown-menu .search-bar-suggestions-show-more:hover {
  color: var(--ds-anchor-link-hover) !important;
  text-decoration: none !important;
}

.search-bar-suggestions-dropdown-menu .search-bar-suggestions-results-list .dropdown-subheader {
  font-size: var(--ds-font-size-h6) !important;
  font-weight: var(--ds-font-weight-bold) !important;
  font-family: var(--ds-font-family-condensed);
  font-variation-settings: var(--ds-font-variation-settings-base);
}
.search-bar-suggestions-dropdown-menu .search-bar-suggestions-results-list .dropdown-subheader,
.search-bar-suggestions-dropdown-menu .search-bar-suggestions-results-list .suggestion-item-title {
  color: var(--ds-text-primary) !important;
}

.modal-dialog-centered .modal-dialog::before,
.modal-dialog-centered.modal-dialog::before {
  height: calc(100vh - var(--control-menu-height, 0));
}

.pagination .page-item.active .page-link {
  cursor: not-allowed;
}

.makita-calendar .react-datepicker {
  border-color: var(--ds-border-default);
}
.makita-calendar .react-datepicker__header {
  background-color: var(--ds-black-4);
}
.makita-calendar .react-datepicker__day--in-selecting-range,
.makita-calendar .react-datepicker__day--in-range,
.makita-calendar .react-datepicker__day--selected {
  background-color: var(--ds-button-primary-bg);
  color: var(--ds-button-primary-content);
}
.makita-calendar .react-datepicker__day--keyboard-selected:not(.react-datepicker__day--selected) {
  background-color: transparent;
  color: inherit;
}
.makita-calendar .react-datepicker__navigation:hover *::before {
  border-color: var(--ds-button-primary-bg-hover);
}
.makita-calendar .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover {
  background-color: var(--ds-button-primary-bg-hover);
  color: var(--ds-button-primary-content-hover);
}
.makita-calendar .react-datepicker__day--outside-month:hover {
  background-color: transparent;
}
.makita-calendar .react-datepicker__day--selected:not([aria-disabled=true]):hover {
  background-color: var(--ds-button-primary-bg-hover);
  color: var(--ds-button-primary-content-hover);
}

.react-datepicker__input-container input {
  padding-right: 1.75rem;
}

.react-datepicker__input-container .react-datepicker__close-icon {
  padding-right: var(--ds-spacer-4);
}
@media (width > 992px) {
  .react-datepicker__input-container .react-datepicker__close-icon {
    padding-right: var(--ds-spacer-7);
  }
}

.react-datepicker__input-container .react-datepicker__close-icon::after {
  background-color: transparent;
  color: var(--ds-black-64);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  height: auto;
  width: auto;
  padding: 0;
}

.react-datepicker__input-container .react-datepicker__close-icon:hover::after {
  color: var(--ds-black-100);
}

.makita-calendar .react-datepicker__navigation-icon::before {
  border-color: var(--ds-button-primary-bg);
  width: 12px;
  height: 12px;
}

.b,
strong {
  font-weight: var(--ds-font-weight-bold);
}

@media (width < 992px) {
  :root {
    --ds-font-size-base: 0.938rem;
    --ds-font-size-h1: 2.5rem;
    --ds-font-size-h2: 2.063rem;
    --ds-font-size-h3: 1.75rem;
    --ds-font-size-h4: 1.438rem;
    --ds-font-size-h5: 1.188rem;
    --ds-font-size-h6: 1rem;
    --ds-font-size-text-sm: 0.75rem;
    --ds-font-size-text-md: 0.938rem;
    --ds-font-size-text-lg: 1.125rem;
    --ds-font-size-label: 0.875rem;
    --ds-font-size-category-link: 0.938rem;
    /* //buttons */
    --ds-font-size-button: 0.938rem;
    --ds-padding-button: 0.75em;
  }
}
@media (width < 480px) {
  .makita-toast-container .alert-notifications {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
  }
}
/* Toast alerts can carry long technical detail (e.g. a serialized upstream error). Keep the box
   from blowing out: let the copy shrink and wrap, top-align the icon/close for multi-line, and
   cap the height with a scroll for extreme cases. */
.makita-toast-container .alert {
  align-items: flex-start;
}
.makita-toast-container .alert__copy {
  min-width: 0;
  overflow-wrap: anywhere;
  max-height: 40vh;
  overflow-y: auto;
}

/* Fix for Dealer Price display in popover */
.price-popover .price-item .crossed {
  text-decoration: line-through;
  color: var(--ds-text-secondary) !important;
}

.ds-font-size-sm {
  font-size: var(--ds-font-size-sm, 0.875rem);
}

.info-popover {
  background: var(--ds-bg-body);
  border: 1px solid var(--ds-border-default);
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-sm);
  font-family: var(--ds-font-family-base);
  font-size: var(--ds-font-size-text-md);
}
.info-popover .arrow {
  display: none;
}

/* CookieInformation.com consent popup theming. Its own script sets --popup-* custom properties
   directly on .coi-banner-properties/.coi-renew-btn-properties (its popup container), so an
   override must target that same selector — custom properties resolve from the NEAREST ancestor
   that sets them, so a :root/html-level override would lose regardless of !important. */
.coi-banner-properties,
.coi-renew-btn-properties {
  /* stylelint-disable custom-property-pattern */
  --popup-bg-color--primary: var(--ds-white-100);
  --popup-bg-color--secondary: var(--ds-bg-shallow);
  --popup-text-color: var(--ds-text-primary);
  --popup-link-color: var(--ds-anchor-link);
  --popup-font-family: var(--ds-font-family-base);
  --popup-button-color: var(--ds-button-primary-bg);
  --popup-button-font-color: var(--ds-button-primary-content);
  --popup-button-color--hover: var(--ds-button-primary-bg-hover);
  --popup-button-font-color--hover: var(--ds-button-primary-content-hover);
  --popup-toggle-bg-color--active: var(--ds-teal-ui-100);
  --popup-toggle-bg-color--inactive: var(--ds-black-48);
  --popup-toggle-icon-color: var(--ds-white-100);
  /* stylelint-enable custom-property-pattern */
}

.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}

/* ---------------- Notifications widget ---------------- */
.user-notifications-portlet-fragment {
  /* SQMAKITA-3795 — hide the OOTB "Requests List" tab. The OOTB notifications
     portlet hardcodes both tabs in view.jsp with no preference/permission to
     disable them; the Clay navigation-bar tags the second item (actionRequired)
     as data-nav-item-index="1". Scoped to .navbar-nav so the portlet's
     management-toolbar .nav-item elements are unaffected. */
}
.user-notifications-portlet-fragment .lfr-search-container-wrapper a:not(.btn, .component-action, .page-link) {
  text-decoration: none;
  margin-bottom: 0.5rem;
}
.user-notifications-portlet-fragment .navbar-nav [data-nav-item-index="1"] {
  display: none;
}

/* Quantity stepper (Counter.tsx) spinner distortion.
   `.btn` is a flex container (`display: flex; align-items: center; justify-content: center;
   gap: ...`) so it can center an icon or the Loader spinner. The spinner span
   (`.loading-animation`) is a flex child with the browser's flex-shrink default of 1 — fine in a
   normal 3rem btn-sm/squared button, which has room for the spinner's natural ~1em size.
   `.button-group-quantity button` (above) shrinks these +/- buttons to a fixed 2.5rem with
   `!important`, well under that. There's no room left on the main (horizontal) axis, so flexbox
   shrinks the spinner's WIDTH to fit — but not its height, since cross-axis sizing isn't driven
   by the same shrink mechanism. The result is a squashed ellipse instead of a circle, which
   looks distorted/blurry once the mask animation is rotating it (confirmed via computed styles:
   width and height diverge here even though both are declared `1em`). `.btn` has
   `overflow: visible`, so simply stopping the shrink and letting the spinner render at its full,
   symmetric size is safe — worst case it overlaps the button padding slightly instead of being
   squeezed into a non-circular shape. */
.button-group-quantity .loading-animation {
  flex-shrink: 0;
}

/* Last on purpose: the public header's rules used to be the fragment's stylesheet, which followed
   every theme rule, and they keep that position (see the partial's header comment). */
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
/* Public header (the `header` fragment in site-init-global, company/public-website).

   These rules live in the theme rather than in the fragment's stylesheet because Liferay writes a
   fragment's <style> after its markup, drop-zone children included. The header's CSS arrived
   ~80KB after the <header> element, so the browser could paint the header with theme styles
   only and then re-lay it out: a layout shift of the whole page on every desktop load. The theme stylesheet is a <link> in <head>, so these apply at first paint.

   Imported last in _custom.scss, so it still follows every other theme rule, as the fragment
   stylesheet did. The header's child fragments (language selector, user menu, portal link,
   notifications) now load after it, so where the header overrides them it must win on
   specificity, not on order. */
.header {
  display: grid;
  grid-template-areas: "logo" "top" "bottom";
  padding: var(--ds-spacer-5);
  grid-template-columns: 1fr;
  position: relative;
  --header-nav-gap: var(--ds-spacer-7);
}

.header__logo {
  grid-area: logo;
  align-content: center;
  margin-inline: auto;
}

.header__items--top {
  grid-area: top;
  display: grid;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ds-spacer-3);
  /* Sub-992 (tablet/mobile): give the icon-only top-bar controls a WCAG tap target.
     The notification target is set on the inner `.header-notification` (rendered only
     when signed in) rather than its grid-cell wrapper — sizing the wrapper would leave
     an empty 44px box in the `bell` grid cell for guests. */
}
.header__items--top .user-icon-mobile {
  width: var(--ds-icon-7, 1.5rem);
  height: var(--ds-icon-7, 1.5rem);
}
@media (width < 992px) {
  .header__items--top {
    /* The bell is now centered in a 44px box, so re-anchor the unread dot to the
       icon's top-right corner (icon is 1.5em, so half is 0.75em from centre)
       instead of the enlarged box corner. */
    /* Keep the hamburger a fixed 44px box glued to the column's left edge, and
       center the icon within that box so it lines up with the search bar's left
       edge at narrow widths. `justify-self: start` stops the button stretching to
       fill the flexible `1fr` grid column — without it the icon drifts toward the
       centre as the column widens above 320px. The button carries Bootstrap's
       `.d-block` (display:block !important) so it can't be flexed; center the
       inline SVG with text-align instead (SQMAKITA-3645). */
  }
  .header__items--top .header__item--sidebar-menu,
  .header__items--top .header__controls .header__item--user-menu,
  .header__items--top .header__notification-icon-mobile .header-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--ds-touch-target, 2.75rem);
    min-height: var(--ds-touch-target, 2.75rem);
  }
  .header__items--top .header__notification-icon-mobile .header-notification.has-unread::after {
    top: calc(50% - 0.75em - 2px);
    right: calc(50% - 0.75em - 2px);
  }
  .header__items--top .header__item--sidebar-menu {
    justify-self: start;
    text-align: center;
  }
}

.header__item > .btn {
  font-weight: var(--ds-font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--ds-spacing-sm);
}
.header__item > .btn:not(:hover, :active, :focus-visible) {
  color: var(--ds-text-primary);
}

.header__items--bottom {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 0;
  background-color: var(--ds-black-80);
  display: flex;
  flex-flow: column;
  z-index: 2;
  height: 0;
  transition: width 0.4s ease;
  overflow: hidden;
}
.header__items--bottom.open {
  width: 100%;
  overflow: auto;
  padding-bottom: var(--ds-spacer-9);
}
@media (width >= 992px) {
  .header__items--bottom {
    position: relative;
    top: unset;
    left: unset;
    min-height: 50px;
    width: 100%;
    max-width: unset;
    z-index: unset;
    flex-flow: row nowrap;
    justify-content: flex-start;
    column-gap: var(--header-nav-gap);
    align-items: center;
    grid-area: bottom;
    border-top: 1px solid var(--ds-border-default);
    border-bottom: none;
    background-color: unset;
    overflow: visible;
    height: auto;
    flex-wrap: wrap;
  }
}

.header__item--navigation {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  border-top: none;
  flex-flow: column wrap;
  align-items: flex-start;
  padding: 0;
  width: 100%;
  background-color: var(--ds-black-100);
}
@media (width >= 992px) {
  .header__item--navigation {
    flex-direction: row;
    align-items: center;
    padding: 0;
    width: unset;
    background-color: unset;
    gap: 0 var(--ds-spacer-5);
  }
}
@media (width > 1280px) {
  .header__item--navigation {
    gap: 0 var(--ds-spacer-8);
  }
}

.close-top {
  width: 100%;
  background-color: var(--ds-bg-body);
  padding: var(--ds-spacer-4);
  padding-bottom: 0;
}
.close-top .header__close {
  padding: var(--ds-spacer-5) var(--ds-spacer-4);
  border-radius: 0;
}
.close-top .header__close .user-menu__icon {
  width: var(--ds-icon-7, 1.5rem);
  height: var(--ds-icon-7, 1.5rem);
}

.header__controls--mobile {
  display: flex;
  border-top: none;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  width: 100%;
  gap: 0;
}
.header__controls--mobile .header__item {
  width: 100%;
}
.header__controls--mobile .header__item button {
  gap: var(--ds-spacer-4);
  width: 100%;
  padding: var(--ds-spacer-5) var(--ds-spacer-7);
  display: flex;
  font-weight: var(--ds-font-weight-bold);
}
.header__controls--mobile .header__item button:hover {
  background-color: unset;
  color: var(--ds-anchor-link-hover);
}

/* Hide notification slot when the fragment rendered nothing (e.g. guest users) */
.header__item:has(.lfr-layout-structure-item-header-notification):not(:has(.header-notification)) {
  display: none;
}

/* Hide portal-link slot when the fragment rendered nothing (e.g. on the MyMakita/DealerZone
   page, or users without an applicable link) so its empty flex slot stops eating a gap and
   adding extra space between Dealer Locator and the notification icon. Keep it visible in the
   page editor so a fragment can still be dropped back in. */
body:not(.has-edit-mode-menu) .header__item--portal-link:not(:has(.portal-link)) {
  display: none;
}

.header__item--secondary-link {
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
}
@media (width >= 992px) {
  .header__item--secondary-link {
    padding-top: 0;
    gap: 0 var(--ds-spacer-4);
    flex-direction: row;
  }
}
@media (width > 1280px) {
  .header__item--secondary-link {
    gap: 0 var(--ds-spacer-7);
  }
}
.header__item--secondary-link .secondary-link {
  display: flex;
  gap: var(--ds-spacer-4);
  padding: var(--ds-spacer-5) var(--ds-spacer-7);
  align-items: center;
}
@media (width >= 992px) {
  .header__item--secondary-link .secondary-link {
    padding: 0;
  }
}
.header__item--secondary-link .secondary-link a {
  width: 100%;
  font-weight: var(--ds-font-weight-bold);
  color: var(--ds-white-100);
}
@media (width >= 992px) {
  .header__item--secondary-link .secondary-link a {
    font-weight: var(--ds-font-weight-normal);
    text-decoration: underline;
    color: var(--ds-black-100);
    font-size: var(--ds-font-size-secondary-link);
  }
}

/* Reserve the search bar's height before its fragment renders, at every width. On mobile it
   sits above the page content, so an empty slot growing to full height shifts the whole page. */
.header__item--search {
  min-height: 3.5rem;
}

@media (width >= 992px) {
  .header--has-cart .header__item--search {
    min-width: 175px;
  }
  .header__item--search {
    flex-basis: unset;
    width: auto;
    min-width: 250px;
  }
}
@media (width >= 992px) {
  .header__items--top {
    padding: 0;
    padding-bottom: var(--ds-spacer-7);
    display: flex;
    gap: var(--ds-spacing-lg);
  }
  .header {
    padding: var(--ds-spacing-lg);
    padding-bottom: 0;
    grid-template-columns: min-content 1fr;
    grid-template-areas: "logo top" "logo bottom";
    gap: 0 var(--ds-spacing-lg);
  }
  .header__item--search {
    order: 0;
    width: 0;
    flex: 1 1 0;
  }
  /* Desktop control-row spacing must apply across the whole >= 992px range, not only above
     1280px. The container flex gap sets the Dealer Locator <-> DealerZone spacing; .portal-link's
     own gap sets DealerZone <-> MyMakita. Both must match or the row looks unevenly padded in the
     992-1280px range (SQMAKITA-3645). Values mirror .portal-link (spacer-8 / spacer-7 has-cart). */
  .header__controls--desktop {
    gap: var(--ds-spacer-8);
    /* Never wrap the control cluster — the user menu was dropping to a second
       row just above 1280px. It stays one line; the compact band below
       collapses labels to icons so it always fits (SQMAKITA-2915). */
    flex-wrap: nowrap;
  }
  .header--has-cart .header__controls--desktop {
    gap: var(--ds-spacer-7);
  }
  .header--has-cart .portal-link {
    gap: var(--ds-spacer-7);
  }
}
@media (width >= 992px) and (width <= 1280px) {
  .header__logo img {
    width: 220px;
    height: auto;
  }
}
@media (width > 1280px) {
  .header {
    padding: var(--ds-padding-xl) var(--ds-spacer-8) 0;
    gap: 0 var(--ds-spacing-xl);
  }
  /* Improve layout shift: each control reserves its own measured width so the row doesn't
     jump as its fragment mounts. Sized per-item (not one min-width on .header__controls--desktop)
     because which items are present varies — guest vs signed-in, 0-2 portal-link entries — so a
     single reserved total would over- or under-shoot depending on state. */
  .language-selector__button {
    min-width: 135px;
  }
  .header__item--locator {
    min-width: 140px;
  }
  .portal-link__entry {
    min-width: 120px;
  }
  .user-menu--dealerzone {
    min-width: 185px;
  }
  .header-notification {
    min-width: 24px;
  }
  .makita-mini-cart-wrapper {
    min-width: 166px;
  }
  .header__controls--desktop {
    min-height: 3rem;
  }
  .header--has-cart .header__controls--desktop {
    min-height: 4.25rem;
  }
}
.header__category-navigation {
  min-width: 200px;
}

/* Separator between the category and content navigation, centred in the
   row's column gap and inset 0.5rem top and bottom. A border-image rather
   than column-rule: gap decorations in flex are Chromium-only. No
   position: relative here, so the content mega-menu keeps its anchor. */
@media (width >= 992px) {
  .header__content-navigation {
    margin-left: calc(var(--header-nav-gap) / -2);
    padding-left: calc(var(--header-nav-gap) / 2);
    border-left: 1px solid;
    border-image: linear-gradient(to bottom, transparent 0.5rem, var(--ds-black-16) 0.5rem, var(--ds-black-16) calc(100% - 0.5rem), transparent calc(100% - 0.5rem)) 1;
  }
}

/* Navigation density levels, set by setupNavDensity in index.ts. */
/* setupNavDensity must measure final sizes: an animated size in the row
   reads half-way and makes the level flip every frame. */
.header[data-nav-measuring] .header__items--bottom * {
  transition: none;
}

/* The header measures its navigation density before the first paint (an inline script after
   </header> in the fragment markup; index.ts takes over afterwards) and keeps the level on <html>
   as data-header-nav-density, so a header swapped in by an SPA navigation also paints at the
   level last measured. Until a level is set, the row's own spacing and font start at the tightest
   level (see below for the rest of the header, and for why the row is hidden meanwhile).
   The DealerZone header shares the .header class but has no density script, so it is excluded. */
@media (width >= 992px) {
  .header:not(.header--dealerzone) .header__product-menu,
  .header:not(.header--dealerzone) .content-nav__trigger {
    gap: var(--header-nav-item-gap, var(--ds-spacer-5));
    padding-inline: var(--header-nav-item-padding, var(--ds-padding-lg));
  }
  .header:not(.header--dealerzone) .header__product-menu:first-child,
  .header:not(.header--dealerzone) .content-nav__item:first-child .content-nav__trigger {
    padding-left: 0;
  }
  .header:not(.header--dealerzone) .header__product-menu svg,
  .header:not(.header--dealerzone) .content-nav__trigger .svg-icon {
    height: var(--header-nav-caret-size, var(--ds-icon-7));
    width: var(--header-nav-caret-size, var(--ds-icon-7));
  }
  .header:not(.header--dealerzone) .header__product-menu h5 {
    font-size: var(--header-nav-font-size, var(--ds-font-size-h5));
  }
  /* The content-nav template sets the condensed variation settings on desktop, so its fallback
     face has to be the condensed one (see the fallback faces in _custom.scss). */
  .header:not(.header--dealerzone) .content-nav__trigger {
    font-family: var(--ds-font-family-condensed);
    font-size: var(--header-nav-font-size, var(--ds-font-size-category-link));
  }
  :root[data-header-nav-density="1"] .header:not(.header--dealerzone),
  :root[data-header-nav-density="2"] .header:not(.header--dealerzone),
  :root[data-header-nav-density="3"] .header:not(.header--dealerzone),
  :root:not([data-header-nav-density]) .header:not(.header--dealerzone) {
    --header-nav-gap: var(--ds-spacer-5);
    --header-nav-item-gap: var(--ds-spacer-3);
    --header-nav-item-padding: var(--ds-padding-sm);
    --header-nav-caret-size: var(--ds-icon-6);
  }
  :root[data-header-nav-density="2"] .header:not(.header--dealerzone),
  :root[data-header-nav-density="3"] .header:not(.header--dealerzone),
  :root:not([data-header-nav-density]) .header:not(.header--dealerzone) {
    --header-nav-font-size: 1.1875rem;
  }
  :root[data-header-nav-density="3"] .header:not(.header--dealerzone) {
    column-gap: var(--ds-spacing-lg);
    padding-inline: var(--ds-spacing-lg);
  }
  :root[data-header-nav-density="3"] .header:not(.header--dealerzone) .header__logo img {
    width: 176px;
    height: auto;
  }
}
/* Before the first measurement, the tightest level's header padding, gap and smaller logo apply
   only where that level is likely to be the final one. On wider screens the row fits at a looser
   level, so tightening them there made the logo, search bar and controls jump once measured.
   1366px sits above the widths where the row has needed the tightest level (up to ~1330px with
   the current labels) and is a common laptop width itself. */
@media (width >= 992px) and (width < 1366px) {
  :root:not([data-header-nav-density]) .header:not(.header--dealerzone) {
    column-gap: var(--ds-spacing-lg);
    padding-inline: var(--ds-spacing-lg);
  }
  :root:not([data-header-nav-density]) .header:not(.header--dealerzone) .header__logo img {
    width: 176px;
    height: auto;
  }
}
/* The browser can paint while it is still parsing the header, before the inline measurement has
   run, so the navigation row is hidden until there is a level. visibility keeps its space, so
   nothing moves when it appears. The animation is a safety net: if no script ever sets a level,
   the row shows after a second at the first-load default instead of staying hidden. */
@keyframes header-nav-reveal {
  to {
    visibility: visible;
  }
}
@media (width >= 992px) {
  :root:not([data-header-nav-density]) .header:not(.header--dealerzone) .header__items--bottom {
    visibility: hidden;
    animation: header-nav-reveal 0s 1s forwards;
  }
}
.header__notification-icon-mobile {
  grid-area: bell;
}

/* set width and height for no fragments state. e.g. when no fragments are present in the dropzone in the page editor */
body:not(.has-edit-mode-menu) .has-control-menu .page-editor__no-fragments-state {
  padding: 1rem;
  height: 150px;
  width: 145px;
}

.makita-mini-cart-wrapper .price .price-number .price-popover {
  right: 0;
  bottom: 0;
  width: 300px;
}

html {
  scroll-padding-top: var(--control-menu-height, 100px);
}

.header__controls .mini-cart {
  min-height: 4.125rem;
}

/* SQMAKITA-2915 — keep the desktop header on one row from 992px up.
   Below ~1440px a signed-in partner's full-label control row can't fit, so
   collapse each control to its icon (the same treatment as the DealerZone
   header in SQMAKITA-3213 and the mobile layout). Viewport media queries,
   not container queries, because the public header has no sidebar/container
   context. Everything is scoped under .header__controls--desktop, which only
   exists in this fragment, so the DealerZone header is untouched.
   The 1440px ceiling is the tuning knob: it is roughly where the reserved
   label widths stop fitting. */
@media (width >= 992px) and (width <= 1440px) {
  /* The labels are hidden visually, not with display: none: each control's text label is its
     accessible name, and its icon is decorative, so a removed label would leave an unnamed link
     or button. Absolutely positioned, the label still takes no room in the row. The carets carry
     no meaning and are removed outright. */
  /* Language -> globe, Dealer Locator -> map pin, DealerZone / MyMakita -> icon, user menu ->
     avatar, cart -> icon + count bubble (reuses the SQMAKITA-3213 semantic classes; the deeper
     selector wins over the base display:block / badge:none). */
  .header__controls--desktop .language-selector__label,
  .header__controls--desktop .header__item--locator-label,
  .header__controls--desktop .portal-link__entry span,
  .header__controls--desktop .user-menu__content,
  .header__controls--desktop .header__item--cart-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .header__controls--desktop .language-selector__caret,
  .header__controls--desktop .user-menu__icon--caret,
  .header__controls--desktop .header__item--cart-caret {
    display: none;
  }
  .header__controls--desktop .header__item--cart .header__item--cart-badge {
    display: flex;
  }
  /* Drop the > 1280px per-item width reservations while collapsed so the icons
     sit tight instead of holding label-width gaps. */
  .header__controls--desktop .language-selector__button,
  .header__controls--desktop .header__item--locator,
  .header__controls--desktop .portal-link__entry,
  .header__controls--desktop .user-menu--dealerzone,
  .header__controls--desktop .makita-mini-cart-wrapper {
    min-width: 0;
  }
  /* Cart alignment (SQMAKITA-3645): center every control on the row, and drop the
     .mini-cart min-height that reserves space for the expanded two-line cart label.
     While collapsed the cart is icon-only, so that reserved height made its box taller
     than the sibling icons and floated the cart icon above the row. */
  .header__controls--desktop {
    align-items: center;
  }
  .header__controls--desktop .mini-cart {
    min-height: 0;
  }
}