@orangesk/orange-design-system 3.0.0 → 3.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/build/components/BodyBanner/style.css +1 -1
  2. package/build/components/BodyBanner/style.css.map +1 -1
  3. package/build/components/Carousel/style.css +1 -1
  4. package/build/components/Carousel/style.css.map +1 -1
  5. package/build/components/FeatureAccordion/style.css +1 -1
  6. package/build/components/FeatureAccordion/style.css.map +1 -1
  7. package/build/components/Grid/style.css +1 -1
  8. package/build/components/Grid/style.css.map +1 -1
  9. package/build/components/Link/style.css +1 -1
  10. package/build/components/Link/style.css.map +1 -1
  11. package/build/components/List/style.css +1 -1
  12. package/build/components/List/style.css.map +1 -1
  13. package/build/components/PromoBanner/style.css +1 -1
  14. package/build/components/PromoBanner/style.css.map +1 -1
  15. package/build/components/index.js +1 -1
  16. package/build/components/index.js.map +1 -1
  17. package/build/components/tsconfig.tsbuildinfo +1 -1
  18. package/build/components/types/index.d.ts +16 -4
  19. package/build/components/types/src/components/Carousel/Carousel.d.ts +10 -3
  20. package/build/components/types/src/components/index.d.ts +2 -2
  21. package/build/lib/base.css.map +1 -1
  22. package/build/lib/components.css +1 -1
  23. package/build/lib/components.css.map +1 -1
  24. package/build/lib/scripts.js +1 -1
  25. package/build/lib/scripts.js.map +1 -1
  26. package/build/lib/style.css +1 -1
  27. package/build/lib/style.css.map +1 -1
  28. package/build/lib/utilities.css +1 -1
  29. package/build/lib/utilities.css.map +1 -1
  30. package/build/search-index.json +3 -3
  31. package/build/sprite.svg +1 -1
  32. package/package.json +8 -8
  33. package/src/assets/icons/add.svg +4 -1
  34. package/src/assets/icons/close.svg +3 -3
  35. package/src/assets/icons/communication-settings.svg +5 -0
  36. package/src/assets/icons/cookies.svg +4 -0
  37. package/src/assets/icons/device-mobile-package.svg +6 -0
  38. package/src/assets/icons/identity-protection.svg +4 -0
  39. package/src/assets/icons/menu.svg +4 -1
  40. package/src/assets/icons/pause.svg +3 -3
  41. package/src/assets/icons/play.svg +2 -2
  42. package/src/assets/icons/remove.svg +4 -1
  43. package/src/assets/icons/search.svg +4 -1
  44. package/src/components/BodyBanner/styles/mixins.scss +5 -1
  45. package/src/components/Carousel/Carousel.tsx +27 -8
  46. package/src/components/Carousel/styles/mixins.scss +0 -1
  47. package/src/components/Carousel/tests/Carousel.unit.test.jsx +29 -0
  48. package/src/components/FeatureAccordion/styles/mixins.scss +0 -4
  49. package/src/components/Forms/Autocomplete/styles/mixins.scss +3 -2
  50. package/src/components/Forms/Autocomplete/tests/Autocomplete.styles.unit.test.jsx +20 -0
  51. package/src/components/Grid/styles/mixins.scss +34 -2
  52. package/src/components/Link/styles/style.scss +8 -0
  53. package/src/components/List/styles/config.scss +1 -1
  54. package/src/components/PromoBanner/styles/mixins.scss +6 -0
  55. package/src/components/PromoBanner/styles/style.scss +1 -0
  56. package/src/components/index.ts +2 -1
  57. package/src/styles/typography/mixins.scss +4 -0
  58. package/src/styles/utilities/text.scss +3 -0
package/build/lib/utilities.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer utilities{.background-primary{background-color:var(--color-background-primary)!important}.background-secondary{background-color:var(--color-background-secondary)!important}.background-contrast{background-color:var(--color-background-contrast)!important}.background-accent{background-color:var(--color-background-accent)!important}.background-accent1-blog{background-color:var(--color-background-accent1-blog)!important}.background-accent2-blog{background-color:var(--color-background-accent2-blog)!important}.surface-primary{background-color:var(--color-surface-primary)!important}.surface-secondary{background-color:var(--color-surface-secondary)!important}.surface-tertiary{background-color:var(--color-surface-tertiary)!important}.surface-subtle{background-color:var(--color-surface-subtle)!important}.surface-moderate{background-color:var(--color-surface-moderate)!important}.surface-contrast{background-color:var(--color-surface-contrast)!important}.surface-accent{background-color:var(--color-surface-accent)!important}.fill-primary{background-color:var(--color-fill-primary)!important}.fill-secondary{background-color:var(--color-fill-secondary)!important}.fill-tertiary{background-color:var(--color-fill-tertiary)!important}.fill-subtle{background-color:var(--color-fill-subtle)!important}.fill-moderate{background-color:var(--color-fill-moderate)!important}.fill-disabled{background-color:var(--color-fill-disabled)!important}.fill-contrast{background-color:var(--color-fill-contrast)!important}.fill-accent1{background-color:var(--color-fill-accent1)!important}.fill-accent2{background-color:var(--color-fill-accent2)!important}.fill-accent3{background-color:var(--color-fill-accent3)!important}.fill-accent4{background-color:var(--color-fill-accent4)!important}.fill-accent5{background-color:var(--color-fill-accent5)!important}.fill-information{background-color:var(--color-fill-information)!important}.fill-positive{background-color:var(--color-fill-positive)!important}.fill-warning{background-color:var(--color-fill-warning)!important}.fill-negative{background-color:var(--color-fill-negative)!important}.border-subtle{border-color:var(--color-border-subtle)!important}.border-strong{border-color:var(--color-border-strong)!important}.border-contrast{border-color:var(--color-border-contrast)!important}.border-accent{border-color:var(--color-border-accent)!important}.border-information{border-color:var(--color-border-information)!important}.border-positive{border-color:var(--color-border-positive)!important}.border-warning{border-color:var(--color-border-warning)!important}.border-negative{border-color:var(--color-border-negative)!important}.text-default{color:var(--color-text-default)!important}.text-secondary{color:var(--color-text-secondary)!important}.text-disabled{color:var(--color-text-disabled)!important}.text-inverse{color:var(--color-text-inverse)!important}.text-accent{color:var(--color-text-accent)!important}.icon-default{color:var(--color-icon-default)!important}.icon-inverse{color:var(--color-icon-inverse)!important}.icon-brand{color:var(--color-icon-brand)!important}.icon-accent{color:var(--color-icon-accent)!important}.icon-disabled{color:var(--color-icon-disabled)!important}.icon-information{color:var(--color-icon-information)!important}.icon-positive{color:var(--color-icon-positive)!important}.icon-warning{color:var(--color-icon-warning)!important}.icon-negative{color:var(--color-icon-negative)!important}.surface-secondary::selection,.surface-tertiary::selection{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.background-none{background:none!important}.bold,strong{font-weight:700!important}.normal{font-weight:400!important}.thin{font-weight:300!important}.italic,em{font-style:italic!important}.underline{text-decoration:underline!important}.no-underline,.underline-hover{text-decoration:none!important}.underline-hover:hover{text-decoration:underline!important}.no-accent{color:inherit!important;text-decoration:underline}.small,small{font-size:.875rem;font-weight:400;letter-spacing:0;line-height:1.25rem}}@layer utilities{@media screen and (min-width:768px){.small,small{font-size:1rem;font-weight:400;letter-spacing:-.00625rem;line-height:1.5rem}}@media screen and (min-width:992px){.small,small{font-size:1rem;font-weight:400;letter-spacing:-.00625rem;line-height:1.5rem}}.large{font-size:1.125rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.625rem}@media screen and (min-width:768px){.large{font-size:1.25rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.875rem}}@media screen and (min-width:992px){.large{font-size:1.25rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.875rem}}.text-nowrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-left{text-align:left!important}.align-center{text-align:center!important}.align-right{text-align:right!important}@media screen and (min-width:480px){.align-sm-right{text-align:right!important}.align-sm-left{text-align:left!important}.align-sm-center{text-align:center!important}}@media screen and (min-width:768px){.align-md-right{text-align:right!important}.align-md-left{text-align:left!important}.align-md-center{text-align:center!important}}@media screen and (min-width:992px){.align-lg-right{text-align:right!important}.align-lg-left{text-align:left!important}.align-lg-center{text-align:center!important}}@media screen and (min-width:1240px){.align-xl-right{text-align:right!important}.align-xl-left{text-align:left!important}.align-xl-center{text-align:center!important}}@media screen and (min-width:1380px){.align-xxl-right{text-align:right!important}.align-xxl-left{text-align:left!important}.align-xxl-center{text-align:center!important}}.reset-text-decoration{text-decoration:none!important}.align-middle{vertical-align:middle!important}.align-top{vertical-align:top!important}.align-bottom{vertical-align:bottom!important}.align-baseline{vertical-align:baseline!important}@media screen and (min-width:480px){.align-middle--sm{vertical-align:middle!important}.align-top--sm{vertical-align:top!important}.align-bottom--sm{vertical-align:bottom!important}.align-baseline--sm{vertical-align:baseline!important}}@media screen and (min-width:768px){.align-middle--md{vertical-align:middle!important}.align-top--md{vertical-align:top!important}.align-bottom--md{vertical-align:bottom!important}.align-baseline--md{vertical-align:baseline!important}}@media screen and (min-width:992px){.align-middle--lg{vertical-align:middle!important}.align-top--lg{vertical-align:top!important}.align-bottom--lg{vertical-align:bottom!important}.align-baseline--lg{vertical-align:baseline!important}}@media screen and (min-width:1240px){.align-middle--xl{vertical-align:middle!important}.align-top--xl{vertical-align:top!important}.align-bottom--xl{vertical-align:bottom!important}.align-baseline--xl{vertical-align:baseline!important}}@media screen and (min-width:1380px){.align-middle--xxl{vertical-align:middle!important}.align-top--xxl{vertical-align:top!important}.align-bottom--xxl{vertical-align:bottom!important}.align-baseline--xxl{vertical-align:baseline!important}}.reset-font-weight{font-weight:400!important}.reset-font-size{font-size:16px!important;line-height:1.25!important}.text-fullwidth{max-width:none}.text-readable{max-width:35em}.text-narrow{max-width:22em}.border-radius--medium{border-radius:10px}.border{border:2px solid var(--color-border-contrast)}.border.is-invalid{border-color:var(--color-border-negative)!important}.border--gray{border-color:var(--color-border-subtle)}.border--gray.border-hover:hover,.border--gray.is-indicating:hover{border-color:var(--color-text-secondary)}.border--orange{border-color:var(--color-border-accent)}.mb{margin-bottom:1.25rem}.mb-xsmall{margin-bottom:5px!important}.mb-small{margin-bottom:10px!important}.mb-medium{margin-bottom:20px!important}.mb-large{margin-bottom:30px!important}.mb-xlarge{margin-bottom:60px!important}.mb-none{margin-bottom:0!important}}@layer utilities{@media screen and (min-width:480px){.mb-sm-xsmall{margin-bottom:5px!important}.mb-sm-small{margin-bottom:10px!important}.mb-sm-medium{margin-bottom:20px!important}.mb-sm-large{margin-bottom:30px!important}.mb-sm-xlarge{margin-bottom:60px!important}.mb-sm-none{margin-bottom:0!important}}@media screen and (min-width:768px){.mb-md-xsmall{margin-bottom:5px!important}.mb-md-small{margin-bottom:10px!important}.mb-md-medium{margin-bottom:20px!important}.mb-md-large{margin-bottom:30px!important}.mb-md-xlarge{margin-bottom:60px!important}.mb-md-none{margin-bottom:0!important}}@media screen and (min-width:992px){.mb-lg-xsmall{margin-bottom:5px!important}.mb-lg-small{margin-bottom:10px!important}.mb-lg-medium{margin-bottom:20px!important}.mb-lg-large{margin-bottom:30px!important}.mb-lg-xlarge{margin-bottom:60px!important}.mb-lg-none{margin-bottom:0!important}}@media screen and (min-width:1240px){.mb-xl-xsmall{margin-bottom:5px!important}.mb-xl-small{margin-bottom:10px!important}.mb-xl-medium{margin-bottom:20px!important}.mb-xl-large{margin-bottom:30px!important}.mb-xl-xlarge{margin-bottom:60px!important}.mb-xl-none{margin-bottom:0!important}}@media screen and (min-width:1380px){.mb-xxl-xsmall{margin-bottom:5px!important}.mb-xxl-small{margin-bottom:10px!important}.mb-xxl-medium{margin-bottom:20px!important}.mb-xxl-large{margin-bottom:30px!important}.mb-xxl-xlarge{margin-bottom:60px!important}.mb-xxl-none{margin-bottom:0!important}}.mt-none{margin-top:0!important}.pt-none{padding-top:0!important}.mr-none{margin-right:0!important}.pr-none{padding-right:0!important}.pb-none{padding-bottom:0!important}.ml-none{margin-left:0!important}.pl-none{padding-left:0!important}.no-mrg{margin:0!important}.no-pad{padding:0!important}.clearfix:after,.clearfix:before{content:"";display:table}.clear,.clearfix:after{clear:both}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-space-around{justify-content:space-around}.justify-content-space-between{justify-content:space-between}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.align-self-left{margin-left:0;margin-right:auto}.align-self-right{margin-left:auto;margin-right:0}.align-self-center{margin-left:auto;margin-right:auto}.align-self-top{align-self:flex-start}.align-self-bottom{align-self:flex-end}.align-self-middle{align-self:center}.align-self-stretch{align-self:stretch}.align-self-last{order:999}@media screen and (min-width:480px){.justify-content-start--sm{justify-content:flex-start}.justify-content-end--sm{justify-content:flex-end}.justify-content-center--sm{justify-content:center}.justify-content-space-around--sm{justify-content:space-around}.justify-content-space-between--sm{justify-content:space-between}.align-items-start--sm{align-items:flex-start}.align-items-end--sm{align-items:flex-end}.align-items-center--sm{align-items:center}.align-items-stretch--sm{align-items:stretch}.align-self-left--sm{margin-left:0;margin-right:auto}.align-self-right--sm{margin-left:auto;margin-right:0}.align-self-center--sm{margin-left:auto;margin-right:auto}.align-self-top--sm{align-self:flex-start}.align-self-bottom--sm{align-self:flex-end}.align-self-middle--sm{align-self:center}.align-self-stretch--sm{align-self:stretch}.align-self-last--sm{order:999}}@media screen and (min-width:768px){.justify-content-start--md{justify-content:flex-start}.justify-content-end--md{justify-content:flex-end}.justify-content-center--md{justify-content:center}.justify-content-space-around--md{justify-content:space-around}.justify-content-space-between--md{justify-content:space-between}.align-items-start--md{align-items:flex-start}.align-items-end--md{align-items:flex-end}.align-items-center--md{align-items:center}.align-items-stretch--md{align-items:stretch}.align-self-left--md{margin-left:0;margin-right:auto}.align-self-right--md{margin-left:auto;margin-right:0}.align-self-center--md{margin-left:auto;margin-right:auto}.align-self-top--md{align-self:flex-start}.align-self-bottom--md{align-self:flex-end}.align-self-middle--md{align-self:center}.align-self-stretch--md{align-self:stretch}.align-self-last--md{order:999}}@media screen and (min-width:992px){.justify-content-start--lg{justify-content:flex-start}.justify-content-end--lg{justify-content:flex-end}.justify-content-center--lg{justify-content:center}.justify-content-space-around--lg{justify-content:space-around}.justify-content-space-between--lg{justify-content:space-between}.align-items-start--lg{align-items:flex-start}.align-items-end--lg{align-items:flex-end}.align-items-center--lg{align-items:center}.align-items-stretch--lg{align-items:stretch}.align-self-left--lg{margin-left:0;margin-right:auto}.align-self-right--lg{margin-left:auto;margin-right:0}.align-self-center--lg{margin-left:auto;margin-right:auto}.align-self-top--lg{align-self:flex-start}.align-self-bottom--lg{align-self:flex-end}.align-self-middle--lg{align-self:center}.align-self-stretch--lg{align-self:stretch}.align-self-last--lg{order:999}}@media screen and (min-width:1240px){.justify-content-start--xl{justify-content:flex-start}.justify-content-end--xl{justify-content:flex-end}.justify-content-center--xl{justify-content:center}.justify-content-space-around--xl{justify-content:space-around}.justify-content-space-between--xl{justify-content:space-between}.align-items-start--xl{align-items:flex-start}.align-items-end--xl{align-items:flex-end}.align-items-center--xl{align-items:center}.align-items-stretch--xl{align-items:stretch}.align-self-left--xl{margin-left:0;margin-right:auto}.align-self-right--xl{margin-left:auto;margin-right:0}.align-self-center--xl{margin-left:auto;margin-right:auto}.align-self-top--xl{align-self:flex-start}.align-self-bottom--xl{align-self:flex-end}.align-self-middle--xl{align-self:center}.align-self-stretch--xl{align-self:stretch}.align-self-last--xl{order:999}}@media screen and (min-width:1380px){.justify-content-start--xxl{justify-content:flex-start}.justify-content-end--xxl{justify-content:flex-end}.justify-content-center--xxl{justify-content:center}.justify-content-space-around--xxl{justify-content:space-around}.justify-content-space-between--xxl{justify-content:space-between}.align-items-start--xxl{align-items:flex-start}.align-items-end--xxl{align-items:flex-end}.align-items-center--xxl{align-items:center}.align-items-stretch--xxl{align-items:stretch}.align-self-left--xxl{margin-left:0;margin-right:auto}.align-self-right--xxl{margin-left:auto;margin-right:0}.align-self-center--xxl{margin-left:auto;margin-right:auto}.align-self-top--xxl{align-self:flex-start}.align-self-bottom--xxl{align-self:flex-end}.align-self-middle--xxl{align-self:center}.align-self-stretch--xxl{align-self:stretch}.align-self-last--xxl{order:999}}.aspect-ratio-21-9{aspect-ratio:21/9;border:0;max-width:100%}.aspect-ratio-16-9{aspect-ratio:16/9;border:0;max-width:100%}.aspect-ratio-4-3{aspect-ratio:4/3;border:0;max-width:100%}.aspect-ratio-1-1{aspect-ratio:1/1;border:0;max-width:100%}.aspect-ratio-3-2{aspect-ratio:3/2;border:0;max-width:100%}.d-block{display:block}.d-inline-block{display:inline-block}.d-inline{display:inline}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.flex-column{flex-direction:column}.fullwidth{width:100%!important}@media screen and (min-width:0) and (max-width:479.98px){.fullwidth-xs-only{width:100%!important}}.fullheight{height:100%!important}.center-block{margin-left:auto!important;margin-right:auto!important}.relative{position:relative!important}.absolute{position:absolute!important}.sr-only,.visually-hidden{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hide{display:none!important}.invisible{visibility:hidden}}@layer utilities{@media screen and (min-width:480px){.show-xs-only{display:none!important}}@media screen and (min-width:0) and (max-width:479.98px){.hide-xs-only{display:none!important}}@media screen and (max-width:479.98px){.show-sm{display:none!important}}@media screen and (min-width:480px){.hide-sm{display:none!important}}@media screen and (max-width:479.98px){.show-sm-only{display:none!important}}@media screen and (min-width:768px){.show-sm-only{display:none!important}}@media screen and (min-width:480px) and (max-width:767.98px){.hide-sm-only{display:none!important}}@media screen and (max-width:767.98px){.show-md{display:none!important}}@media screen and (min-width:768px){.hide-md{display:none!important}}@media screen and (max-width:767.98px){.show-md-only{display:none!important}}@media screen and (min-width:992px){.show-md-only{display:none!important}}@media screen and (min-width:768px) and (max-width:991.98px){.hide-md-only{display:none!important}}@media screen and (max-width:991.98px){.show-lg{display:none!important}}@media screen and (min-width:992px){.hide-lg{display:none!important}}@media screen and (max-width:991.98px){.show-lg-only{display:none!important}}@media screen and (min-width:1240px){.show-lg-only{display:none!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.hide-lg-only{display:none!important}}@media screen and (max-width:1239.98px){.show-xl{display:none!important}}@media screen and (min-width:1240px){.hide-xl{display:none!important}}@media screen and (max-width:1239.98px){.show-xl-only{display:none!important}}@media screen and (min-width:1380px){.show-xl-only{display:none!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.hide-xl-only{display:none!important}}@media screen and (max-width:1379.98px){.show-xxl{display:none!important}}@media screen and (min-width:1380px){.hide-xxl{display:none!important}}@media screen and (max-width:1379.98px){.show-xxl-only{display:none!important}}}@layer utilities{.order-1{order:1!important}@media screen and (min-width:0) and (max-width:479.98px){.order-1-xs-only{order:1!important}}.order-2{order:2!important}@media screen and (min-width:0) and (max-width:479.98px){.order-2-xs-only{order:2!important}}@media screen and (min-width:480px){.order-1-sm{order:1!important}}@media screen and (min-width:480px) and (max-width:767.98px){.order-1-sm-only{order:1!important}}@media screen and (min-width:480px){.order-2-sm{order:2!important}}@media screen and (min-width:480px) and (max-width:767.98px){.order-2-sm-only{order:2!important}}@media screen and (min-width:768px){.order-1-md{order:1!important}}@media screen and (min-width:768px) and (max-width:991.98px){.order-1-md-only{order:1!important}}@media screen and (min-width:768px){.order-2-md{order:2!important}}@media screen and (min-width:768px) and (max-width:991.98px){.order-2-md-only{order:2!important}}@media screen and (min-width:992px){.order-1-lg{order:1!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.order-1-lg-only{order:1!important}}@media screen and (min-width:992px){.order-2-lg{order:2!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.order-2-lg-only{order:2!important}}@media screen and (min-width:1240px){.order-1-xl{order:1!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.order-1-xl-only{order:1!important}}@media screen and (min-width:1240px){.order-2-xl{order:2!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.order-2-xl-only{order:2!important}}@media screen and (min-width:1380px){.order-1-xxl{order:1!important}.order-2-xxl{order:2!important}}}@layer utilities{.table-scrollable,[class*=horizontal-scroll]{scroll-snap-type:x mandatory}.table-scrollable>*,[class*=horizontal-scroll]>*{scroll-snap-align:start}@supports selector(::-webkit-scrollbar){.table-scrollable::-webkit-scrollbar,[class*=horizontal-scroll]::-webkit-scrollbar{appearance:none;background-color:transparent;border-radius:99px;height:.5rem}.table-scrollable::-webkit-scrollbar-track,[class*=horizontal-scroll]::-webkit-scrollbar-track{background-clip:content-box;background-color:var(--color-surface-moderate);border:.0625rem solid transparent;border-radius:99px}.table-scrollable::-webkit-scrollbar-thumb,[class*=horizontal-scroll]::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--color-fill-contrast);border:.0625rem solid transparent;border-radius:99px;opacity:1}.table-scrollable::-webkit-scrollbar-thumb:active,.table-scrollable::-webkit-scrollbar-thumb:hover,.table-scrollable:active::-webkit-scrollbar-thumb,.table-scrollable:hover::-webkit-scrollbar-thumb,[class*=horizontal-scroll]::-webkit-scrollbar-thumb:active,[class*=horizontal-scroll]::-webkit-scrollbar-thumb:hover,[class*=horizontal-scroll]:active::-webkit-scrollbar-thumb,[class*=horizontal-scroll]:hover::-webkit-scrollbar-thumb{background-color:var(--color-fill-secondary)!important;border-width:0}}@supports not selector(::-webkit-scrollbar){.table-scrollable,[class*=horizontal-scroll]{scrollbar-color:var(--color-fill-contrast) var(--color-surface-moderate);scrollbar-width:thin}}.horizontal-scroll{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}@media screen and (min-width:480px){.horizontal-scroll--sm{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--sm-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:768px){.horizontal-scroll--md{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--md-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:992px){.horizontal-scroll--lg{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--lg-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:1240px){.horizontal-scroll--xl{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--xl-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:1380px){.horizontal-scroll--xxl{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--xxl-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}}@layer utilities{.megamenu-header ul,.mm-header ul,.osk-footer-menu{margin-top:0;max-width:none}.megamenu-header ul li,.mm-header ul li,.osk-footer-menu li{margin-bottom:0;margin-top:0}body.has-modal .megamenu-header.is-sticky,body.has-modal .mm-header.is-sticky,body.has-modal [data-megamenu].is-sticky:not(.megamenu){padding-right:var(--ods-modal-scrollbar-width,0)}}
1
+ @layer utilities{.background-primary{background-color:var(--color-background-primary)!important}.background-secondary{background-color:var(--color-background-secondary)!important}.background-contrast{background-color:var(--color-background-contrast)!important}.background-accent{background-color:var(--color-background-accent)!important}.background-accent1-blog{background-color:var(--color-background-accent1-blog)!important}.background-accent2-blog{background-color:var(--color-background-accent2-blog)!important}.surface-primary{background-color:var(--color-surface-primary)!important}.surface-secondary{background-color:var(--color-surface-secondary)!important}.surface-tertiary{background-color:var(--color-surface-tertiary)!important}.surface-subtle{background-color:var(--color-surface-subtle)!important}.surface-moderate{background-color:var(--color-surface-moderate)!important}.surface-contrast{background-color:var(--color-surface-contrast)!important}.surface-accent{background-color:var(--color-surface-accent)!important}.fill-primary{background-color:var(--color-fill-primary)!important}.fill-secondary{background-color:var(--color-fill-secondary)!important}.fill-tertiary{background-color:var(--color-fill-tertiary)!important}.fill-subtle{background-color:var(--color-fill-subtle)!important}.fill-moderate{background-color:var(--color-fill-moderate)!important}.fill-disabled{background-color:var(--color-fill-disabled)!important}.fill-contrast{background-color:var(--color-fill-contrast)!important}.fill-accent1{background-color:var(--color-fill-accent1)!important}.fill-accent2{background-color:var(--color-fill-accent2)!important}.fill-accent3{background-color:var(--color-fill-accent3)!important}.fill-accent4{background-color:var(--color-fill-accent4)!important}.fill-accent5{background-color:var(--color-fill-accent5)!important}.fill-information{background-color:var(--color-fill-information)!important}.fill-positive{background-color:var(--color-fill-positive)!important}.fill-warning{background-color:var(--color-fill-warning)!important}.fill-negative{background-color:var(--color-fill-negative)!important}.border-subtle{border-color:var(--color-border-subtle)!important}.border-strong{border-color:var(--color-border-strong)!important}.border-contrast{border-color:var(--color-border-contrast)!important}.border-accent{border-color:var(--color-border-accent)!important}.border-information{border-color:var(--color-border-information)!important}.border-positive{border-color:var(--color-border-positive)!important}.border-warning{border-color:var(--color-border-warning)!important}.border-negative{border-color:var(--color-border-negative)!important}.text-default{color:var(--color-text-default)!important}.text-secondary{color:var(--color-text-secondary)!important}.text-disabled{color:var(--color-text-disabled)!important}.text-inverse{color:var(--color-text-inverse)!important}.text-accent{color:var(--color-text-accent)!important}.icon-default{color:var(--color-icon-default)!important}.icon-inverse{color:var(--color-icon-inverse)!important}.icon-brand{color:var(--color-icon-brand)!important}.icon-accent{color:var(--color-icon-accent)!important}.icon-disabled{color:var(--color-icon-disabled)!important}.icon-information{color:var(--color-icon-information)!important}.icon-positive{color:var(--color-icon-positive)!important}.icon-warning{color:var(--color-icon-warning)!important}.icon-negative{color:var(--color-icon-negative)!important}.surface-secondary::selection,.surface-tertiary::selection{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.background-none{background:none!important}.bold,strong{font-weight:700!important}.normal{font-weight:400!important}.thin{font-weight:300!important}.italic,em{font-style:italic!important}.underline{text-decoration:underline!important}.no-underline,.underline-hover{text-decoration:none!important}.underline-hover:hover{text-decoration:underline!important}.no-accent{color:inherit!important;text-decoration:underline}.small,small{font-size:.875rem;font-weight:400;letter-spacing:0;line-height:1.25rem}}@layer utilities{@media screen and (min-width:768px){.small,small{font-size:1rem;font-weight:400;letter-spacing:-.00625rem;line-height:1.5rem}}@media screen and (min-width:992px){.small,small{font-size:1rem;font-weight:400;letter-spacing:-.00625rem;line-height:1.5rem}}.large{font-size:1.125rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.625rem}@media screen and (min-width:768px){.large{font-size:1.25rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.875rem}}@media screen and (min-width:992px){.large{font-size:1.25rem;font-weight:400;letter-spacing:-.0125rem;line-height:1.875rem}}.text-nowrap{white-space:nowrap!important}.text-wrap{white-space:normal!important}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.align-left{text-align:left!important}.align-center{text-align:center!important}.align-right{text-align:right!important}@media screen and (min-width:480px){.align-sm-right{text-align:right!important}.align-sm-left{text-align:left!important}.align-sm-center{text-align:center!important}}@media screen and (min-width:768px){.align-md-right{text-align:right!important}.align-md-left{text-align:left!important}.align-md-center{text-align:center!important}}@media screen and (min-width:992px){.align-lg-right{text-align:right!important}.align-lg-left{text-align:left!important}.align-lg-center{text-align:center!important}}@media screen and (min-width:1240px){.align-xl-right{text-align:right!important}.align-xl-left{text-align:left!important}.align-xl-center{text-align:center!important}}@media screen and (min-width:1380px){.align-xxl-right{text-align:right!important}.align-xxl-left{text-align:left!important}.align-xxl-center{text-align:center!important}}.reset-text-decoration{text-decoration:none!important}.align-middle{vertical-align:middle!important}.align-top{vertical-align:top!important}.align-bottom{vertical-align:bottom!important}.align-baseline{vertical-align:baseline!important}@media screen and (min-width:480px){.align-middle--sm{vertical-align:middle!important}.align-top--sm{vertical-align:top!important}.align-bottom--sm{vertical-align:bottom!important}.align-baseline--sm{vertical-align:baseline!important}}@media screen and (min-width:768px){.align-middle--md{vertical-align:middle!important}.align-top--md{vertical-align:top!important}.align-bottom--md{vertical-align:bottom!important}.align-baseline--md{vertical-align:baseline!important}}@media screen and (min-width:992px){.align-middle--lg{vertical-align:middle!important}.align-top--lg{vertical-align:top!important}.align-bottom--lg{vertical-align:bottom!important}.align-baseline--lg{vertical-align:baseline!important}}@media screen and (min-width:1240px){.align-middle--xl{vertical-align:middle!important}.align-top--xl{vertical-align:top!important}.align-bottom--xl{vertical-align:bottom!important}.align-baseline--xl{vertical-align:baseline!important}}@media screen and (min-width:1380px){.align-middle--xxl{vertical-align:middle!important}.align-top--xxl{vertical-align:top!important}.align-bottom--xxl{vertical-align:bottom!important}.align-baseline--xxl{vertical-align:baseline!important}}.reset-font-weight{font-weight:400!important}.reset-font-size{font-size:16px!important;line-height:1.25!important}.text-fullwidth{max-width:none}.text-readable{max-width:35em}.text-narrow{max-width:22em}.text-relaxed{max-inline-size:clamp(40rem,75vw,70rem)}.border-radius--medium{border-radius:10px}.border{border:2px solid var(--color-border-contrast)}.border.is-invalid{border-color:var(--color-border-negative)!important}.border--gray{border-color:var(--color-border-subtle)}.border--gray.border-hover:hover,.border--gray.is-indicating:hover{border-color:var(--color-text-secondary)}.border--orange{border-color:var(--color-border-accent)}.mb{margin-bottom:1.25rem}.mb-xsmall{margin-bottom:5px!important}.mb-small{margin-bottom:10px!important}.mb-medium{margin-bottom:20px!important}.mb-large{margin-bottom:30px!important}.mb-xlarge{margin-bottom:60px!important}.mb-none{margin-bottom:0!important}}@layer utilities{@media screen and (min-width:480px){.mb-sm-xsmall{margin-bottom:5px!important}.mb-sm-small{margin-bottom:10px!important}.mb-sm-medium{margin-bottom:20px!important}.mb-sm-large{margin-bottom:30px!important}.mb-sm-xlarge{margin-bottom:60px!important}.mb-sm-none{margin-bottom:0!important}}@media screen and (min-width:768px){.mb-md-xsmall{margin-bottom:5px!important}.mb-md-small{margin-bottom:10px!important}.mb-md-medium{margin-bottom:20px!important}.mb-md-large{margin-bottom:30px!important}.mb-md-xlarge{margin-bottom:60px!important}.mb-md-none{margin-bottom:0!important}}@media screen and (min-width:992px){.mb-lg-xsmall{margin-bottom:5px!important}.mb-lg-small{margin-bottom:10px!important}.mb-lg-medium{margin-bottom:20px!important}.mb-lg-large{margin-bottom:30px!important}.mb-lg-xlarge{margin-bottom:60px!important}.mb-lg-none{margin-bottom:0!important}}@media screen and (min-width:1240px){.mb-xl-xsmall{margin-bottom:5px!important}.mb-xl-small{margin-bottom:10px!important}.mb-xl-medium{margin-bottom:20px!important}.mb-xl-large{margin-bottom:30px!important}.mb-xl-xlarge{margin-bottom:60px!important}.mb-xl-none{margin-bottom:0!important}}@media screen and (min-width:1380px){.mb-xxl-xsmall{margin-bottom:5px!important}.mb-xxl-small{margin-bottom:10px!important}.mb-xxl-medium{margin-bottom:20px!important}.mb-xxl-large{margin-bottom:30px!important}.mb-xxl-xlarge{margin-bottom:60px!important}.mb-xxl-none{margin-bottom:0!important}}.mt-none{margin-top:0!important}.pt-none{padding-top:0!important}.mr-none{margin-right:0!important}.pr-none{padding-right:0!important}.pb-none{padding-bottom:0!important}.ml-none{margin-left:0!important}.pl-none{padding-left:0!important}.no-mrg{margin:0!important}.no-pad{padding:0!important}.clearfix:after,.clearfix:before{content:"";display:table}.clear,.clearfix:after{clear:both}.justify-content-start{justify-content:flex-start}.justify-content-end{justify-content:flex-end}.justify-content-center{justify-content:center}.justify-content-space-around{justify-content:space-around}.justify-content-space-between{justify-content:space-between}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}.align-items-center{align-items:center}.align-items-stretch{align-items:stretch}.align-self-left{margin-left:0;margin-right:auto}.align-self-right{margin-left:auto;margin-right:0}.align-self-center{margin-left:auto;margin-right:auto}.align-self-top{align-self:flex-start}.align-self-bottom{align-self:flex-end}.align-self-middle{align-self:center}.align-self-stretch{align-self:stretch}.align-self-last{order:999}@media screen and (min-width:480px){.justify-content-start--sm{justify-content:flex-start}.justify-content-end--sm{justify-content:flex-end}.justify-content-center--sm{justify-content:center}.justify-content-space-around--sm{justify-content:space-around}.justify-content-space-between--sm{justify-content:space-between}.align-items-start--sm{align-items:flex-start}.align-items-end--sm{align-items:flex-end}.align-items-center--sm{align-items:center}.align-items-stretch--sm{align-items:stretch}.align-self-left--sm{margin-left:0;margin-right:auto}.align-self-right--sm{margin-left:auto;margin-right:0}.align-self-center--sm{margin-left:auto;margin-right:auto}.align-self-top--sm{align-self:flex-start}.align-self-bottom--sm{align-self:flex-end}.align-self-middle--sm{align-self:center}.align-self-stretch--sm{align-self:stretch}.align-self-last--sm{order:999}}@media screen and (min-width:768px){.justify-content-start--md{justify-content:flex-start}.justify-content-end--md{justify-content:flex-end}.justify-content-center--md{justify-content:center}.justify-content-space-around--md{justify-content:space-around}.justify-content-space-between--md{justify-content:space-between}.align-items-start--md{align-items:flex-start}.align-items-end--md{align-items:flex-end}.align-items-center--md{align-items:center}.align-items-stretch--md{align-items:stretch}.align-self-left--md{margin-left:0;margin-right:auto}.align-self-right--md{margin-left:auto;margin-right:0}.align-self-center--md{margin-left:auto;margin-right:auto}.align-self-top--md{align-self:flex-start}.align-self-bottom--md{align-self:flex-end}.align-self-middle--md{align-self:center}.align-self-stretch--md{align-self:stretch}.align-self-last--md{order:999}}@media screen and (min-width:992px){.justify-content-start--lg{justify-content:flex-start}.justify-content-end--lg{justify-content:flex-end}.justify-content-center--lg{justify-content:center}.justify-content-space-around--lg{justify-content:space-around}.justify-content-space-between--lg{justify-content:space-between}.align-items-start--lg{align-items:flex-start}.align-items-end--lg{align-items:flex-end}.align-items-center--lg{align-items:center}.align-items-stretch--lg{align-items:stretch}.align-self-left--lg{margin-left:0;margin-right:auto}.align-self-right--lg{margin-left:auto;margin-right:0}.align-self-center--lg{margin-left:auto;margin-right:auto}.align-self-top--lg{align-self:flex-start}.align-self-bottom--lg{align-self:flex-end}.align-self-middle--lg{align-self:center}.align-self-stretch--lg{align-self:stretch}.align-self-last--lg{order:999}}@media screen and (min-width:1240px){.justify-content-start--xl{justify-content:flex-start}.justify-content-end--xl{justify-content:flex-end}.justify-content-center--xl{justify-content:center}.justify-content-space-around--xl{justify-content:space-around}.justify-content-space-between--xl{justify-content:space-between}.align-items-start--xl{align-items:flex-start}.align-items-end--xl{align-items:flex-end}.align-items-center--xl{align-items:center}.align-items-stretch--xl{align-items:stretch}.align-self-left--xl{margin-left:0;margin-right:auto}.align-self-right--xl{margin-left:auto;margin-right:0}.align-self-center--xl{margin-left:auto;margin-right:auto}.align-self-top--xl{align-self:flex-start}.align-self-bottom--xl{align-self:flex-end}.align-self-middle--xl{align-self:center}.align-self-stretch--xl{align-self:stretch}.align-self-last--xl{order:999}}@media screen and (min-width:1380px){.justify-content-start--xxl{justify-content:flex-start}.justify-content-end--xxl{justify-content:flex-end}.justify-content-center--xxl{justify-content:center}.justify-content-space-around--xxl{justify-content:space-around}.justify-content-space-between--xxl{justify-content:space-between}.align-items-start--xxl{align-items:flex-start}.align-items-end--xxl{align-items:flex-end}.align-items-center--xxl{align-items:center}.align-items-stretch--xxl{align-items:stretch}.align-self-left--xxl{margin-left:0;margin-right:auto}.align-self-right--xxl{margin-left:auto;margin-right:0}.align-self-center--xxl{margin-left:auto;margin-right:auto}.align-self-top--xxl{align-self:flex-start}.align-self-bottom--xxl{align-self:flex-end}.align-self-middle--xxl{align-self:center}.align-self-stretch--xxl{align-self:stretch}.align-self-last--xxl{order:999}}.aspect-ratio-21-9{aspect-ratio:21/9;border:0;max-width:100%}.aspect-ratio-16-9{aspect-ratio:16/9;border:0;max-width:100%}.aspect-ratio-4-3{aspect-ratio:4/3;border:0;max-width:100%}.aspect-ratio-1-1{aspect-ratio:1/1;border:0;max-width:100%}.aspect-ratio-3-2{aspect-ratio:3/2;border:0;max-width:100%}.d-block{display:block}.d-inline-block{display:inline-block}.d-inline{display:inline}.d-flex{display:flex}.d-inline-flex{display:inline-flex}.flex-column{flex-direction:column}.fullwidth{width:100%!important}@media screen and (min-width:0) and (max-width:479.98px){.fullwidth-xs-only{width:100%!important}}.fullheight{height:100%!important}.center-block{margin-left:auto!important;margin-right:auto!important}.relative{position:relative!important}.absolute{position:absolute!important}.sr-only,.visually-hidden{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.hide{display:none!important}.invisible{visibility:hidden}}@layer utilities{@media screen and (min-width:480px){.show-xs-only{display:none!important}}@media screen and (min-width:0) and (max-width:479.98px){.hide-xs-only{display:none!important}}@media screen and (max-width:479.98px){.show-sm{display:none!important}}@media screen and (min-width:480px){.hide-sm{display:none!important}}@media screen and (max-width:479.98px){.show-sm-only{display:none!important}}@media screen and (min-width:768px){.show-sm-only{display:none!important}}@media screen and (min-width:480px) and (max-width:767.98px){.hide-sm-only{display:none!important}}@media screen and (max-width:767.98px){.show-md{display:none!important}}@media screen and (min-width:768px){.hide-md{display:none!important}}@media screen and (max-width:767.98px){.show-md-only{display:none!important}}@media screen and (min-width:992px){.show-md-only{display:none!important}}@media screen and (min-width:768px) and (max-width:991.98px){.hide-md-only{display:none!important}}@media screen and (max-width:991.98px){.show-lg{display:none!important}}@media screen and (min-width:992px){.hide-lg{display:none!important}}@media screen and (max-width:991.98px){.show-lg-only{display:none!important}}@media screen and (min-width:1240px){.show-lg-only{display:none!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.hide-lg-only{display:none!important}}@media screen and (max-width:1239.98px){.show-xl{display:none!important}}@media screen and (min-width:1240px){.hide-xl{display:none!important}}@media screen and (max-width:1239.98px){.show-xl-only{display:none!important}}@media screen and (min-width:1380px){.show-xl-only{display:none!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.hide-xl-only{display:none!important}}@media screen and (max-width:1379.98px){.show-xxl{display:none!important}}@media screen and (min-width:1380px){.hide-xxl{display:none!important}}@media screen and (max-width:1379.98px){.show-xxl-only{display:none!important}}}@layer utilities{.order-1{order:1!important}@media screen and (min-width:0) and (max-width:479.98px){.order-1-xs-only{order:1!important}}.order-2{order:2!important}@media screen and (min-width:0) and (max-width:479.98px){.order-2-xs-only{order:2!important}}@media screen and (min-width:480px){.order-1-sm{order:1!important}}@media screen and (min-width:480px) and (max-width:767.98px){.order-1-sm-only{order:1!important}}@media screen and (min-width:480px){.order-2-sm{order:2!important}}@media screen and (min-width:480px) and (max-width:767.98px){.order-2-sm-only{order:2!important}}@media screen and (min-width:768px){.order-1-md{order:1!important}}@media screen and (min-width:768px) and (max-width:991.98px){.order-1-md-only{order:1!important}}@media screen and (min-width:768px){.order-2-md{order:2!important}}@media screen and (min-width:768px) and (max-width:991.98px){.order-2-md-only{order:2!important}}@media screen and (min-width:992px){.order-1-lg{order:1!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.order-1-lg-only{order:1!important}}@media screen and (min-width:992px){.order-2-lg{order:2!important}}@media screen and (min-width:992px) and (max-width:1239.98px){.order-2-lg-only{order:2!important}}@media screen and (min-width:1240px){.order-1-xl{order:1!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.order-1-xl-only{order:1!important}}@media screen and (min-width:1240px){.order-2-xl{order:2!important}}@media screen and (min-width:1240px) and (max-width:1379.98px){.order-2-xl-only{order:2!important}}@media screen and (min-width:1380px){.order-1-xxl{order:1!important}.order-2-xxl{order:2!important}}}@layer utilities{.table-scrollable,[class*=horizontal-scroll]{scroll-snap-type:x mandatory}.table-scrollable>*,[class*=horizontal-scroll]>*{scroll-snap-align:start}@supports selector(::-webkit-scrollbar){.table-scrollable::-webkit-scrollbar,[class*=horizontal-scroll]::-webkit-scrollbar{appearance:none;background-color:transparent;border-radius:99px;height:.5rem}.table-scrollable::-webkit-scrollbar-track,[class*=horizontal-scroll]::-webkit-scrollbar-track{background-clip:content-box;background-color:var(--color-surface-moderate);border:.0625rem solid transparent;border-radius:99px}.table-scrollable::-webkit-scrollbar-thumb,[class*=horizontal-scroll]::-webkit-scrollbar-thumb{background-clip:content-box;background-color:var(--color-fill-contrast);border:.0625rem solid transparent;border-radius:99px;opacity:1}.table-scrollable::-webkit-scrollbar-thumb:active,.table-scrollable::-webkit-scrollbar-thumb:hover,.table-scrollable:active::-webkit-scrollbar-thumb,.table-scrollable:hover::-webkit-scrollbar-thumb,[class*=horizontal-scroll]::-webkit-scrollbar-thumb:active,[class*=horizontal-scroll]::-webkit-scrollbar-thumb:hover,[class*=horizontal-scroll]:active::-webkit-scrollbar-thumb,[class*=horizontal-scroll]:hover::-webkit-scrollbar-thumb{background-color:var(--color-fill-secondary)!important;border-width:0}}@supports not selector(::-webkit-scrollbar){.table-scrollable,[class*=horizontal-scroll]{scrollbar-color:var(--color-fill-contrast) var(--color-surface-moderate);scrollbar-width:thin}}.horizontal-scroll{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}@media screen and (min-width:480px){.horizontal-scroll--sm{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--sm-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:768px){.horizontal-scroll--md{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--md-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:992px){.horizontal-scroll--lg{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--lg-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:1240px){.horizontal-scroll--xl{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--xl-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}@media screen and (min-width:1380px){.horizontal-scroll--xxl{-webkit-overflow-scrolling:auto;flex-wrap:nowrap;margin-bottom:1.875rem;overflow-x:auto}.horizontal-scroll--xxl-disable{-webkit-overflow-scrolling:initial;flex-wrap:wrap;margin-bottom:0;overflow-x:initial}}}@layer utilities{.megamenu-header ul,.mm-header ul,.osk-footer-menu{margin-top:0;max-width:none}.megamenu-header ul li,.mm-header ul li,.osk-footer-menu li{margin-bottom:0;margin-top:0}body.has-modal .megamenu-header.is-sticky,body.has-modal .mm-header.is-sticky,body.has-modal [data-megamenu].is-sticky:not(.megamenu){padding-right:var(--ods-modal-scrollbar-width,0)}}
2
2
  /*# sourceMappingURL=utilities.css.map */
package/build/lib/utilities.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["utilities.scss"],"names":[],"mappings":"AAAA,iBACE,oBACE,0DACF,CACA,sBACE,4DACF,CACA,qBACE,2DACF,CACA,mBACE,yDACF,CACA,yBACE,+DACF,CACA,yBACE,+DACF,CACA,iBACE,uDACF,CACA,mBACE,yDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,kBACE,wDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,cACE,oDACF,CACA,gBACE,sDACF,CACA,eACE,qDACF,CACA,aACE,mDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,kBACE,wDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,eACE,qDACF,CACA,eACE,iDACF,CACA,eACE,iDACF,CACA,iBACE,mDACF,CACA,eACE,iDACF,CACA,oBACE,sDACF,CACA,iBACE,mDACF,CACA,gBACE,kDACF,CACA,iBACE,mDACF,CACA,cACE,yCACF,CACA,gBACE,2CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,aACE,wCACF,CACA,cACE,yCACF,CACA,cACE,yCACF,CACA,YACE,uCACF,CACA,aACE,wCACF,CACA,eACE,0CACF,CACA,kBACE,6CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,eACE,0CACF,CACA,2DAEE,iDAAkD,CAClD,+BACF,CACA,iBACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CAzCF,CAIA,iBAsCE,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,OACE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,aACE,4BACF,CACA,WACE,4BACF,CACA,eACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CACA,YACE,yBACF,CACA,cACE,2BACF,CACA,aACE,0BACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,iBACE,0BACF,CACA,gBACE,yBACF,CACA,kBACE,2BACF,CACF,CACA,uBACE,8BACF,CACA,cACE,+BACF,CACA,WACE,4BACF,CACA,cACE,+BACF,CACA,gBACE,iCACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,mBACE,+BACF,CACA,gBACE,4BACF,CACA,mBACE,+BACF,CACA,qBACE,iCACF,CACF,CACA,mBACE,yBACF,CACA,iBACE,wBAA0B,CAC1B,0BACF,CACA,gBACE,cACF,CACA,eACE,cACF,CACA,aACE,cACF,CAGA,uBACE,kBACF,CACA,QACE,6CACF,CACA,mBACE,mDACF,CACA,cACE,uCACF,CACA,mEACE,wCACF,CACA,gBACE,uCACF,CAGA,IACE,qBACF,CAIA,WACE,2BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,SACE,yBACF,CA7CF,CAqBA,iBAyBE,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,eACE,2BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,aACE,yBACF,CACF,CACA,SACE,sBACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,SACE,yBACF,CACA,SACE,0BACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,QACE,kBACF,CACA,QACE,mBACF,CACA,iCACE,UAAW,CACX,aACF,CAIA,uBACE,UACF,CACA,uBACE,0BACF,CACA,qBACE,wBACF,CACA,wBACE,sBACF,CACA,8BACE,4BACF,CACA,+BACE,6BACF,CACA,mBACE,sBACF,CACA,iBACE,oBACF,CACA,oBACE,kBACF,CACA,qBACE,mBACF,CACA,iBACE,aAAc,CACd,iBACF,CACA,kBACE,gBAAiB,CACjB,cACF,CACA,mBACE,gBAAiB,CACjB,iBACF,CACA,gBACE,qBACF,CACA,mBACE,mBACF,CACA,mBACE,iBACF,CACA,oBACE,kBACF,CACA,iBACE,SACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,4BACE,0BACF,CACA,0BACE,wBACF,CACA,6BACE,sBACF,CACA,mCACE,4BACF,CACA,oCACE,6BACF,CACA,wBACE,sBACF,CACA,sBACE,oBACF,CACA,yBACE,kBACF,CACA,0BACE,mBACF,CACA,sBACE,aAAc,CACd,iBACF,CACA,uBACE,gBAAiB,CACjB,cACF,CACA,wBACE,gBAAiB,CACjB,iBACF,CACA,qBACE,qBACF,CACA,wBACE,mBACF,CACA,wBACE,iBACF,CACA,yBACE,kBACF,CACA,sBACE,SACF,CACF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,SACE,aACF,CACA,gBACE,oBACF,CACA,UACE,cACF,CACA,QACE,YACF,CACA,eACE,mBACF,CACA,aACE,qBACF,CACA,WACE,oBACF,CACA,yDACE,mBACE,oBACF,CACF,CACA,YACE,qBACF,CACA,cACE,0BAA4B,CAC5B,2BACF,CACA,UACE,2BACF,CACA,UACE,2BACF,CAGA,0BASE,0BAA2B,CAC3B,0BAA8B,CAJ9B,QAAS,CAJT,UAAW,CAEX,WAAY,CAIZ,eAAgB,CAHhB,SAAU,CAEV,iBAAkB,CAJlB,SAQF,CACA,MACE,sBACF,CACA,WACE,iBACF,CAnBF,CACA,iBAmBE,oCACE,cACE,sBACF,CACF,CACA,yDACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,8DACE,cACE,sBACF,CACF,CACA,wCACE,SACE,sBACF,CACF,CACA,qCACE,SACE,sBACF,CACF,CACA,wCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,+DACE,cACE,sBACF,CACF,CACA,wCACE,UACE,sBACF,CACF,CACA,qCACE,UACE,sBACF,CACF,CACA,wCACE,eACE,sBACF,CACF,CACF,CACA,iBACE,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,aACE,iBACF,CAGA,aACE,iBACF,CAJF,CAMF,CACA,iBACE,6CAEE,4BACF,CACA,iDAEE,uBACF,CACA,wCACE,mFAGE,eAAgB,CAChB,4BAA6B,CAC7B,kBAAmB,CAHnB,YAIF,CACA,+FAIE,2BAA4B,CAD5B,8CAA+C,CAD/C,iCAAmC,CAGnC,kBACF,CACA,+FAME,2BAA4B,CAH5B,2CAA4C,CAE5C,iCAAmC,CADnC,kBAAmB,CAFnB,SAKF,CACA,gbAME,sDAAwD,CADxD,cAEF,CACF,CACA,4CACE,6CAEE,wEAAyE,CACzE,oBACF,CACF,CACA,mBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,2BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,wBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,gCAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACF,CACA,iBAKE,mDAIE,YAAa,CADb,cAEF,CACA,4DAIE,eAAgB,CADhB,YAEF,CAMA,sIAGE,gDACF,CACF","file":"utilities.css","sourcesContent":["@layer utilities {\n .background-primary {\n background-color: var(--color-background-primary) !important;\n }\n .background-secondary {\n background-color: var(--color-background-secondary) !important;\n }\n .background-contrast {\n background-color: var(--color-background-contrast) !important;\n }\n .background-accent {\n background-color: var(--color-background-accent) !important;\n }\n .background-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n }\n .background-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n }\n .surface-primary {\n background-color: var(--color-surface-primary) !important;\n }\n .surface-secondary {\n background-color: var(--color-surface-secondary) !important;\n }\n .surface-tertiary {\n background-color: var(--color-surface-tertiary) !important;\n }\n .surface-subtle {\n background-color: var(--color-surface-subtle) !important;\n }\n .surface-moderate {\n background-color: var(--color-surface-moderate) !important;\n }\n .surface-contrast {\n background-color: var(--color-surface-contrast) !important;\n }\n .surface-accent {\n background-color: var(--color-surface-accent) !important;\n }\n .fill-primary {\n background-color: var(--color-fill-primary) !important;\n }\n .fill-secondary {\n background-color: var(--color-fill-secondary) !important;\n }\n .fill-tertiary {\n background-color: var(--color-fill-tertiary) !important;\n }\n .fill-subtle {\n background-color: var(--color-fill-subtle) !important;\n }\n .fill-moderate {\n background-color: var(--color-fill-moderate) !important;\n }\n .fill-disabled {\n background-color: var(--color-fill-disabled) !important;\n }\n .fill-contrast {\n background-color: var(--color-fill-contrast) !important;\n }\n .fill-accent1 {\n background-color: var(--color-fill-accent1) !important;\n }\n .fill-accent2 {\n background-color: var(--color-fill-accent2) !important;\n }\n .fill-accent3 {\n background-color: var(--color-fill-accent3) !important;\n }\n .fill-accent4 {\n background-color: var(--color-fill-accent4) !important;\n }\n .fill-accent5 {\n background-color: var(--color-fill-accent5) !important;\n }\n .fill-information {\n background-color: var(--color-fill-information) !important;\n }\n .fill-positive {\n background-color: var(--color-fill-positive) !important;\n }\n .fill-warning {\n background-color: var(--color-fill-warning) !important;\n }\n .fill-negative {\n background-color: var(--color-fill-negative) !important;\n }\n .border-subtle {\n border-color: var(--color-border-subtle) !important;\n }\n .border-strong {\n border-color: var(--color-border-strong) !important;\n }\n .border-contrast {\n border-color: var(--color-border-contrast) !important;\n }\n .border-accent {\n border-color: var(--color-border-accent) !important;\n }\n .border-information {\n border-color: var(--color-border-information) !important;\n }\n .border-positive {\n border-color: var(--color-border-positive) !important;\n }\n .border-warning {\n border-color: var(--color-border-warning) !important;\n }\n .border-negative {\n border-color: var(--color-border-negative) !important;\n }\n .text-default {\n color: var(--color-text-default) !important;\n }\n .text-secondary {\n color: var(--color-text-secondary) !important;\n }\n .text-disabled {\n color: var(--color-text-disabled) !important;\n }\n .text-inverse {\n color: var(--color-text-inverse) !important;\n }\n .text-accent {\n color: var(--color-text-accent) !important;\n }\n .icon-default {\n color: var(--color-icon-default) !important;\n }\n .icon-inverse {\n color: var(--color-icon-inverse) !important;\n }\n .icon-brand {\n color: var(--color-icon-brand) !important;\n }\n .icon-accent {\n color: var(--color-icon-accent) !important;\n }\n .icon-disabled {\n color: var(--color-icon-disabled) !important;\n }\n .icon-information {\n color: var(--color-icon-information) !important;\n }\n .icon-positive {\n color: var(--color-icon-positive) !important;\n }\n .icon-warning {\n color: var(--color-icon-warning) !important;\n }\n .icon-negative {\n color: var(--color-icon-negative) !important;\n }\n .surface-secondary::selection,\n .surface-tertiary::selection {\n background-color: var(--color-background-contrast);\n color: var(--color-text-inverse);\n }\n .background-none {\n background: none !important;\n }\n}\n/**\n * Resets margin-bottom of the last child to zero\n */\n@layer utilities {\n strong,\n .bold {\n font-weight: 700 !important;\n }\n .normal {\n font-weight: 400 !important;\n }\n .thin {\n font-weight: 300 !important;\n }\n em,\n .italic {\n font-style: italic !important;\n }\n .underline {\n text-decoration: underline !important;\n }\n .no-underline {\n text-decoration: none !important;\n }\n .underline-hover {\n text-decoration: none !important;\n }\n .underline-hover:hover {\n text-decoration: underline !important;\n }\n .no-accent {\n color: inherit !important;\n text-decoration: underline;\n }\n small,\n .small {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n letter-spacing: 0rem;\n }\n @media screen and (min-width: 768px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n @media screen and (min-width: 992px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n .large {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n @media screen and (min-width: 768px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .text-nowrap {\n white-space: nowrap !important;\n }\n .text-wrap {\n white-space: normal !important;\n }\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .align-left {\n text-align: left !important;\n }\n .align-center {\n text-align: center !important;\n }\n .align-right {\n text-align: right !important;\n }\n @media screen and (min-width: 480px) {\n .align-sm-right {\n text-align: right !important;\n }\n .align-sm-left {\n text-align: left !important;\n }\n .align-sm-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-md-right {\n text-align: right !important;\n }\n .align-md-left {\n text-align: left !important;\n }\n .align-md-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-lg-right {\n text-align: right !important;\n }\n .align-lg-left {\n text-align: left !important;\n }\n .align-lg-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-xl-right {\n text-align: right !important;\n }\n .align-xl-left {\n text-align: left !important;\n }\n .align-xl-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-xxl-right {\n text-align: right !important;\n }\n .align-xxl-left {\n text-align: left !important;\n }\n .align-xxl-center {\n text-align: center !important;\n }\n }\n .reset-text-decoration {\n text-decoration: none !important;\n }\n .align-middle {\n vertical-align: middle !important;\n }\n .align-top {\n vertical-align: top !important;\n }\n .align-bottom {\n vertical-align: bottom !important;\n }\n .align-baseline {\n vertical-align: baseline !important;\n }\n @media screen and (min-width: 480px) {\n .align-middle--sm {\n vertical-align: middle !important;\n }\n .align-top--sm {\n vertical-align: top !important;\n }\n .align-bottom--sm {\n vertical-align: bottom !important;\n }\n .align-baseline--sm {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-middle--md {\n vertical-align: middle !important;\n }\n .align-top--md {\n vertical-align: top !important;\n }\n .align-bottom--md {\n vertical-align: bottom !important;\n }\n .align-baseline--md {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-middle--lg {\n vertical-align: middle !important;\n }\n .align-top--lg {\n vertical-align: top !important;\n }\n .align-bottom--lg {\n vertical-align: bottom !important;\n }\n .align-baseline--lg {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-middle--xl {\n vertical-align: middle !important;\n }\n .align-top--xl {\n vertical-align: top !important;\n }\n .align-bottom--xl {\n vertical-align: bottom !important;\n }\n .align-baseline--xl {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-middle--xxl {\n vertical-align: middle !important;\n }\n .align-top--xxl {\n vertical-align: top !important;\n }\n .align-bottom--xxl {\n vertical-align: bottom !important;\n }\n .align-baseline--xxl {\n vertical-align: baseline !important;\n }\n }\n .reset-font-weight {\n font-weight: normal !important;\n }\n .reset-font-size {\n font-size: 16px !important;\n line-height: 1.25 !important;\n }\n .text-fullwidth {\n max-width: none;\n }\n .text-readable {\n max-width: 35em;\n }\n .text-narrow {\n max-width: 22em;\n }\n}\n@layer utilities {\n .border-radius--medium {\n border-radius: 10px;\n }\n .border {\n border: 2px solid var(--color-border-contrast);\n }\n .border.is-invalid {\n border-color: var(--color-border-negative) !important;\n }\n .border--gray {\n border-color: var(--color-border-subtle);\n }\n .border--gray.border-hover:hover, .border--gray.is-indicating:hover {\n border-color: var(--color-text-secondary);\n }\n .border--orange {\n border-color: var(--color-border-accent);\n }\n}\n@layer utilities {\n .mb {\n margin-bottom: 1.25rem;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n .mb-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-small {\n margin-bottom: 10px !important;\n }\n .mb-medium {\n margin-bottom: 20px !important;\n }\n .mb-large {\n margin-bottom: 30px !important;\n }\n .mb-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n @media screen and (min-width: 480px) {\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n .mb-sm-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-sm-small {\n margin-bottom: 10px !important;\n }\n .mb-sm-medium {\n margin-bottom: 20px !important;\n }\n .mb-sm-large {\n margin-bottom: 30px !important;\n }\n .mb-sm-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n .mb-md-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-md-small {\n margin-bottom: 10px !important;\n }\n .mb-md-medium {\n margin-bottom: 20px !important;\n }\n .mb-md-large {\n margin-bottom: 30px !important;\n }\n .mb-md-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n .mb-lg-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-lg-small {\n margin-bottom: 10px !important;\n }\n .mb-lg-medium {\n margin-bottom: 20px !important;\n }\n .mb-lg-large {\n margin-bottom: 30px !important;\n }\n .mb-lg-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n .mb-xl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xl-small {\n margin-bottom: 10px !important;\n }\n .mb-xl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xl-large {\n margin-bottom: 30px !important;\n }\n .mb-xl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n .mb-xxl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xxl-small {\n margin-bottom: 10px !important;\n }\n .mb-xxl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xxl-large {\n margin-bottom: 30px !important;\n }\n .mb-xxl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n }\n .mt-none {\n margin-top: 0 !important;\n }\n .pt-none {\n padding-top: 0 !important;\n }\n .mr-none {\n margin-right: 0 !important;\n }\n .pr-none {\n padding-right: 0 !important;\n }\n .pb-none {\n padding-bottom: 0 !important;\n }\n .ml-none {\n margin-left: 0 !important;\n }\n .pl-none {\n padding-left: 0 !important;\n }\n .no-mrg {\n margin: 0 !important;\n }\n .no-pad {\n padding: 0 !important;\n }\n .clearfix::before, .clearfix::after {\n content: \"\";\n display: table;\n }\n .clearfix::after {\n clear: both;\n }\n .clear {\n clear: both;\n }\n .justify-content-start {\n justify-content: flex-start;\n }\n .justify-content-end {\n justify-content: flex-end;\n }\n .justify-content-center {\n justify-content: center;\n }\n .justify-content-space-around {\n justify-content: space-around;\n }\n .justify-content-space-between {\n justify-content: space-between;\n }\n .align-items-start {\n align-items: flex-start;\n }\n .align-items-end {\n align-items: flex-end;\n }\n .align-items-center {\n align-items: center;\n }\n .align-items-stretch {\n align-items: stretch;\n }\n .align-self-left {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top {\n align-self: flex-start;\n }\n .align-self-bottom {\n align-self: flex-end;\n }\n .align-self-middle {\n align-self: center;\n }\n .align-self-stretch {\n align-self: stretch;\n }\n .align-self-last {\n order: 999;\n }\n @media screen and (min-width: 480px) {\n .justify-content-start--sm {\n justify-content: flex-start;\n }\n .justify-content-end--sm {\n justify-content: flex-end;\n }\n .justify-content-center--sm {\n justify-content: center;\n }\n .justify-content-space-around--sm {\n justify-content: space-around;\n }\n .justify-content-space-between--sm {\n justify-content: space-between;\n }\n .align-items-start--sm {\n align-items: flex-start;\n }\n .align-items-end--sm {\n align-items: flex-end;\n }\n .align-items-center--sm {\n align-items: center;\n }\n .align-items-stretch--sm {\n align-items: stretch;\n }\n .align-self-left--sm {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--sm {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--sm {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--sm {\n align-self: flex-start;\n }\n .align-self-bottom--sm {\n align-self: flex-end;\n }\n .align-self-middle--sm {\n align-self: center;\n }\n .align-self-stretch--sm {\n align-self: stretch;\n }\n .align-self-last--sm {\n order: 999;\n }\n }\n @media screen and (min-width: 768px) {\n .justify-content-start--md {\n justify-content: flex-start;\n }\n .justify-content-end--md {\n justify-content: flex-end;\n }\n .justify-content-center--md {\n justify-content: center;\n }\n .justify-content-space-around--md {\n justify-content: space-around;\n }\n .justify-content-space-between--md {\n justify-content: space-between;\n }\n .align-items-start--md {\n align-items: flex-start;\n }\n .align-items-end--md {\n align-items: flex-end;\n }\n .align-items-center--md {\n align-items: center;\n }\n .align-items-stretch--md {\n align-items: stretch;\n }\n .align-self-left--md {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--md {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--md {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--md {\n align-self: flex-start;\n }\n .align-self-bottom--md {\n align-self: flex-end;\n }\n .align-self-middle--md {\n align-self: center;\n }\n .align-self-stretch--md {\n align-self: stretch;\n }\n .align-self-last--md {\n order: 999;\n }\n }\n @media screen and (min-width: 992px) {\n .justify-content-start--lg {\n justify-content: flex-start;\n }\n .justify-content-end--lg {\n justify-content: flex-end;\n }\n .justify-content-center--lg {\n justify-content: center;\n }\n .justify-content-space-around--lg {\n justify-content: space-around;\n }\n .justify-content-space-between--lg {\n justify-content: space-between;\n }\n .align-items-start--lg {\n align-items: flex-start;\n }\n .align-items-end--lg {\n align-items: flex-end;\n }\n .align-items-center--lg {\n align-items: center;\n }\n .align-items-stretch--lg {\n align-items: stretch;\n }\n .align-self-left--lg {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--lg {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--lg {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--lg {\n align-self: flex-start;\n }\n .align-self-bottom--lg {\n align-self: flex-end;\n }\n .align-self-middle--lg {\n align-self: center;\n }\n .align-self-stretch--lg {\n align-self: stretch;\n }\n .align-self-last--lg {\n order: 999;\n }\n }\n @media screen and (min-width: 1240px) {\n .justify-content-start--xl {\n justify-content: flex-start;\n }\n .justify-content-end--xl {\n justify-content: flex-end;\n }\n .justify-content-center--xl {\n justify-content: center;\n }\n .justify-content-space-around--xl {\n justify-content: space-around;\n }\n .justify-content-space-between--xl {\n justify-content: space-between;\n }\n .align-items-start--xl {\n align-items: flex-start;\n }\n .align-items-end--xl {\n align-items: flex-end;\n }\n .align-items-center--xl {\n align-items: center;\n }\n .align-items-stretch--xl {\n align-items: stretch;\n }\n .align-self-left--xl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xl {\n align-self: flex-start;\n }\n .align-self-bottom--xl {\n align-self: flex-end;\n }\n .align-self-middle--xl {\n align-self: center;\n }\n .align-self-stretch--xl {\n align-self: stretch;\n }\n .align-self-last--xl {\n order: 999;\n }\n }\n @media screen and (min-width: 1380px) {\n .justify-content-start--xxl {\n justify-content: flex-start;\n }\n .justify-content-end--xxl {\n justify-content: flex-end;\n }\n .justify-content-center--xxl {\n justify-content: center;\n }\n .justify-content-space-around--xxl {\n justify-content: space-around;\n }\n .justify-content-space-between--xxl {\n justify-content: space-between;\n }\n .align-items-start--xxl {\n align-items: flex-start;\n }\n .align-items-end--xxl {\n align-items: flex-end;\n }\n .align-items-center--xxl {\n align-items: center;\n }\n .align-items-stretch--xxl {\n align-items: stretch;\n }\n .align-self-left--xxl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xxl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xxl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xxl {\n align-self: flex-start;\n }\n .align-self-bottom--xxl {\n align-self: flex-end;\n }\n .align-self-middle--xxl {\n align-self: center;\n }\n .align-self-stretch--xxl {\n align-self: stretch;\n }\n .align-self-last--xxl {\n order: 999;\n }\n }\n .aspect-ratio-21-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 21/9;\n }\n .aspect-ratio-16-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 16/9;\n }\n .aspect-ratio-4-3 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 4/3;\n }\n .aspect-ratio-1-1 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 1/1;\n }\n .aspect-ratio-3-2 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 3/2;\n }\n .d-block {\n display: block;\n }\n .d-inline-block {\n display: inline-block;\n }\n .d-inline {\n display: inline;\n }\n .d-flex {\n display: flex;\n }\n .d-inline-flex {\n display: inline-flex;\n }\n .flex-column {\n flex-direction: column;\n }\n .fullwidth {\n width: 100% !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .fullwidth-xs-only {\n width: 100% !important;\n }\n }\n .fullheight {\n height: 100% !important;\n }\n .center-block {\n margin-left: auto !important;\n margin-right: auto !important;\n }\n .relative {\n position: relative !important;\n }\n .absolute {\n position: absolute !important;\n }\n}\n@layer utilities {\n .visually-hidden,\n .sr-only {\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n .hide {\n display: none !important;\n }\n .invisible {\n visibility: hidden;\n }\n @media screen and (min-width: 480px) {\n .show-xs-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .hide-xs-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) {\n .hide-sm {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .hide-sm-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .hide-md {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .hide-md-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .hide-lg {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .hide-lg-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .hide-xl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .hide-xl-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .hide-xxl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl-only {\n display: none !important;\n }\n }\n}\n@layer utilities {\n .order-1 {\n order: 1 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-1-xs-only {\n order: 1 !important;\n }\n }\n .order-2 {\n order: 2 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-2-xs-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-1-sm {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-1-sm-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-2-sm {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-2-sm-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-1-md {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-1-md-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-2-md {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-2-md-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-1-lg {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-1-lg-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-2-lg {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-2-lg-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-1-xl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-1-xl-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-2-xl {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-2-xl-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-1-xxl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-2-xxl {\n order: 2 !important;\n }\n }\n}\n@layer utilities {\n [class*=horizontal-scroll],\n .table-scrollable {\n scroll-snap-type: x mandatory;\n }\n [class*=horizontal-scroll] > *,\n .table-scrollable > * {\n scroll-snap-align: start;\n }\n @supports selector(::-webkit-scrollbar) {\n [class*=horizontal-scroll]::-webkit-scrollbar,\n .table-scrollable::-webkit-scrollbar {\n height: 0.5rem;\n appearance: none;\n background-color: transparent;\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-track,\n .table-scrollable::-webkit-scrollbar-track {\n border: 0.0625rem solid transparent;\n background-color: var(--color-surface-moderate);\n background-clip: content-box;\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n border: 0.0625rem solid transparent;\n background-clip: content-box;\n }\n [class*=horizontal-scroll]:hover::-webkit-scrollbar-thumb, [class*=horizontal-scroll]:active::-webkit-scrollbar-thumb, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:hover, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:active,\n .table-scrollable:hover::-webkit-scrollbar-thumb,\n .table-scrollable:active::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb:hover,\n .table-scrollable::-webkit-scrollbar-thumb:active {\n border-width: 0;\n background-color: var(--color-fill-secondary) !important;\n }\n }\n @supports not selector(::-webkit-scrollbar) {\n [class*=horizontal-scroll],\n .table-scrollable {\n scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n scrollbar-width: thin;\n }\n }\n .horizontal-scroll {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n @media screen and (min-width: 480px) {\n .horizontal-scroll--sm {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--sm-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 768px) {\n .horizontal-scroll--md {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--md-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 992px) {\n .horizontal-scroll--lg {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--lg-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1240px) {\n .horizontal-scroll--xl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1380px) {\n .horizontal-scroll--xxl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xxl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n}\n@layer utilities {\n /**\n * Resets for megamenu and footer\n * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.\n **/\n .osk-footer-menu,\n .mm-header ul,\n .megamenu-header ul {\n max-width: none;\n margin-top: 0;\n }\n .osk-footer-menu li,\n .mm-header ul li,\n .megamenu-header ul li {\n margin-top: 0;\n margin-bottom: 0;\n }\n /**\n * Fixes for header and megamenu when modal is open\n * This is required to prevent the header and megamenu from shifting when a modal is open due to scrollbar disappearance.\n * This is a temporary fix and will be removed once the header and megamenu components are migrated to ods2\n **/\n body.has-modal .mm-header.is-sticky,\n body.has-modal .megamenu-header.is-sticky,\n body.has-modal [data-megamenu].is-sticky:not(.megamenu) {\n padding-right: var(--ods-modal-scrollbar-width, 0px);\n }\n}"]}
1
+ {"version":3,"sources":["utilities.scss"],"names":[],"mappings":"AAAA,iBACE,oBACE,0DACF,CACA,sBACE,4DACF,CACA,qBACE,2DACF,CACA,mBACE,yDACF,CACA,yBACE,+DACF,CACA,yBACE,+DACF,CACA,iBACE,uDACF,CACA,mBACE,yDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,kBACE,wDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,cACE,oDACF,CACA,gBACE,sDACF,CACA,eACE,qDACF,CACA,aACE,mDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,kBACE,wDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,eACE,qDACF,CACA,eACE,iDACF,CACA,eACE,iDACF,CACA,iBACE,mDACF,CACA,eACE,iDACF,CACA,oBACE,sDACF,CACA,iBACE,mDACF,CACA,gBACE,kDACF,CACA,iBACE,mDACF,CACA,cACE,yCACF,CACA,gBACE,2CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,aACE,wCACF,CACA,cACE,yCACF,CACA,cACE,yCACF,CACA,YACE,uCACF,CACA,aACE,wCACF,CACA,eACE,0CACF,CACA,kBACE,6CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,eACE,0CACF,CACA,2DAEE,iDAAkD,CAClD,+BACF,CACA,iBACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CAzCF,CAIA,iBAsCE,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,OACE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,aACE,4BACF,CACA,WACE,4BACF,CACA,eACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CACA,YACE,yBACF,CACA,cACE,2BACF,CACA,aACE,0BACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,iBACE,0BACF,CACA,gBACE,yBACF,CACA,kBACE,2BACF,CACF,CACA,uBACE,8BACF,CACA,cACE,+BACF,CACA,WACE,4BACF,CACA,cACE,+BACF,CACA,gBACE,iCACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,mBACE,+BACF,CACA,gBACE,4BACF,CACA,mBACE,+BACF,CACA,qBACE,iCACF,CACF,CACA,mBACE,yBACF,CACA,iBACE,wBAA0B,CAC1B,0BACF,CACA,gBACE,cACF,CACA,eACE,cACF,CACA,aACE,cACF,CACA,cACE,uCACF,CAGA,uBACE,kBACF,CACA,QACE,6CACF,CACA,mBACE,mDACF,CACA,cACE,uCACF,CACA,mEACE,wCACF,CACA,gBACE,uCACF,CAGA,IACE,qBACF,CAIA,WACE,2BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,SACE,yBACF,CA7CF,CAqBA,iBAyBE,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,eACE,2BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,aACE,yBACF,CACF,CACA,SACE,sBACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,SACE,yBACF,CACA,SACE,0BACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,QACE,kBACF,CACA,QACE,mBACF,CACA,iCACE,UAAW,CACX,aACF,CAIA,uBACE,UACF,CACA,uBACE,0BACF,CACA,qBACE,wBACF,CACA,wBACE,sBACF,CACA,8BACE,4BACF,CACA,+BACE,6BACF,CACA,mBACE,sBACF,CACA,iBACE,oBACF,CACA,oBACE,kBACF,CACA,qBACE,mBACF,CACA,iBACE,aAAc,CACd,iBACF,CACA,kBACE,gBAAiB,CACjB,cACF,CACA,mBACE,gBAAiB,CACjB,iBACF,CACA,gBACE,qBACF,CACA,mBACE,mBACF,CACA,mBACE,iBACF,CACA,oBACE,kBACF,CACA,iBACE,SACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,4BACE,0BACF,CACA,0BACE,wBACF,CACA,6BACE,sBACF,CACA,mCACE,4BACF,CACA,oCACE,6BACF,CACA,wBACE,sBACF,CACA,sBACE,oBACF,CACA,yBACE,kBACF,CACA,0BACE,mBACF,CACA,sBACE,aAAc,CACd,iBACF,CACA,uBACE,gBAAiB,CACjB,cACF,CACA,wBACE,gBAAiB,CACjB,iBACF,CACA,qBACE,qBACF,CACA,wBACE,mBACF,CACA,wBACE,iBACF,CACA,yBACE,kBACF,CACA,sBACE,SACF,CACF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,SACE,aACF,CACA,gBACE,oBACF,CACA,UACE,cACF,CACA,QACE,YACF,CACA,eACE,mBACF,CACA,aACE,qBACF,CACA,WACE,oBACF,CACA,yDACE,mBACE,oBACF,CACF,CACA,YACE,qBACF,CACA,cACE,0BAA4B,CAC5B,2BACF,CACA,UACE,2BACF,CACA,UACE,2BACF,CAGA,0BASE,0BAA2B,CAC3B,0BAA8B,CAJ9B,QAAS,CAJT,UAAW,CAEX,WAAY,CAIZ,eAAgB,CAHhB,SAAU,CAEV,iBAAkB,CAJlB,SAQF,CACA,MACE,sBACF,CACA,WACE,iBACF,CAnBF,CACA,iBAmBE,oCACE,cACE,sBACF,CACF,CACA,yDACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,8DACE,cACE,sBACF,CACF,CACA,wCACE,SACE,sBACF,CACF,CACA,qCACE,SACE,sBACF,CACF,CACA,wCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,+DACE,cACE,sBACF,CACF,CACA,wCACE,UACE,sBACF,CACF,CACA,qCACE,UACE,sBACF,CACF,CACA,wCACE,eACE,sBACF,CACF,CACF,CACA,iBACE,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,aACE,iBACF,CAGA,aACE,iBACF,CAJF,CAMF,CACA,iBACE,6CAEE,4BACF,CACA,iDAEE,uBACF,CACA,wCACE,mFAGE,eAAgB,CAChB,4BAA6B,CAC7B,kBAAmB,CAHnB,YAIF,CACA,+FAIE,2BAA4B,CAD5B,8CAA+C,CAD/C,iCAAmC,CAGnC,kBACF,CACA,+FAME,2BAA4B,CAH5B,2CAA4C,CAE5C,iCAAmC,CADnC,kBAAmB,CAFnB,SAKF,CACA,gbAME,sDAAwD,CADxD,cAEF,CACF,CACA,4CACE,6CAEE,wEAAyE,CACzE,oBACF,CACF,CACA,mBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,2BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,wBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,gCAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACF,CACA,iBAKE,mDAIE,YAAa,CADb,cAEF,CACA,4DAIE,eAAgB,CADhB,YAEF,CAMA,sIAGE,gDACF,CACF","file":"utilities.css","sourcesContent":["@layer utilities {\n .background-primary {\n background-color: var(--color-background-primary) !important;\n }\n .background-secondary {\n background-color: var(--color-background-secondary) !important;\n }\n .background-contrast {\n background-color: var(--color-background-contrast) !important;\n }\n .background-accent {\n background-color: var(--color-background-accent) !important;\n }\n .background-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n }\n .background-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n }\n .surface-primary {\n background-color: var(--color-surface-primary) !important;\n }\n .surface-secondary {\n background-color: var(--color-surface-secondary) !important;\n }\n .surface-tertiary {\n background-color: var(--color-surface-tertiary) !important;\n }\n .surface-subtle {\n background-color: var(--color-surface-subtle) !important;\n }\n .surface-moderate {\n background-color: var(--color-surface-moderate) !important;\n }\n .surface-contrast {\n background-color: var(--color-surface-contrast) !important;\n }\n .surface-accent {\n background-color: var(--color-surface-accent) !important;\n }\n .fill-primary {\n background-color: var(--color-fill-primary) !important;\n }\n .fill-secondary {\n background-color: var(--color-fill-secondary) !important;\n }\n .fill-tertiary {\n background-color: var(--color-fill-tertiary) !important;\n }\n .fill-subtle {\n background-color: var(--color-fill-subtle) !important;\n }\n .fill-moderate {\n background-color: var(--color-fill-moderate) !important;\n }\n .fill-disabled {\n background-color: var(--color-fill-disabled) !important;\n }\n .fill-contrast {\n background-color: var(--color-fill-contrast) !important;\n }\n .fill-accent1 {\n background-color: var(--color-fill-accent1) !important;\n }\n .fill-accent2 {\n background-color: var(--color-fill-accent2) !important;\n }\n .fill-accent3 {\n background-color: var(--color-fill-accent3) !important;\n }\n .fill-accent4 {\n background-color: var(--color-fill-accent4) !important;\n }\n .fill-accent5 {\n background-color: var(--color-fill-accent5) !important;\n }\n .fill-information {\n background-color: var(--color-fill-information) !important;\n }\n .fill-positive {\n background-color: var(--color-fill-positive) !important;\n }\n .fill-warning {\n background-color: var(--color-fill-warning) !important;\n }\n .fill-negative {\n background-color: var(--color-fill-negative) !important;\n }\n .border-subtle {\n border-color: var(--color-border-subtle) !important;\n }\n .border-strong {\n border-color: var(--color-border-strong) !important;\n }\n .border-contrast {\n border-color: var(--color-border-contrast) !important;\n }\n .border-accent {\n border-color: var(--color-border-accent) !important;\n }\n .border-information {\n border-color: var(--color-border-information) !important;\n }\n .border-positive {\n border-color: var(--color-border-positive) !important;\n }\n .border-warning {\n border-color: var(--color-border-warning) !important;\n }\n .border-negative {\n border-color: var(--color-border-negative) !important;\n }\n .text-default {\n color: var(--color-text-default) !important;\n }\n .text-secondary {\n color: var(--color-text-secondary) !important;\n }\n .text-disabled {\n color: var(--color-text-disabled) !important;\n }\n .text-inverse {\n color: var(--color-text-inverse) !important;\n }\n .text-accent {\n color: var(--color-text-accent) !important;\n }\n .icon-default {\n color: var(--color-icon-default) !important;\n }\n .icon-inverse {\n color: var(--color-icon-inverse) !important;\n }\n .icon-brand {\n color: var(--color-icon-brand) !important;\n }\n .icon-accent {\n color: var(--color-icon-accent) !important;\n }\n .icon-disabled {\n color: var(--color-icon-disabled) !important;\n }\n .icon-information {\n color: var(--color-icon-information) !important;\n }\n .icon-positive {\n color: var(--color-icon-positive) !important;\n }\n .icon-warning {\n color: var(--color-icon-warning) !important;\n }\n .icon-negative {\n color: var(--color-icon-negative) !important;\n }\n .surface-secondary::selection,\n .surface-tertiary::selection {\n background-color: var(--color-background-contrast);\n color: var(--color-text-inverse);\n }\n .background-none {\n background: none !important;\n }\n}\n/**\n * Resets margin-bottom of the last child to zero\n */\n@layer utilities {\n strong,\n .bold {\n font-weight: 700 !important;\n }\n .normal {\n font-weight: 400 !important;\n }\n .thin {\n font-weight: 300 !important;\n }\n em,\n .italic {\n font-style: italic !important;\n }\n .underline {\n text-decoration: underline !important;\n }\n .no-underline {\n text-decoration: none !important;\n }\n .underline-hover {\n text-decoration: none !important;\n }\n .underline-hover:hover {\n text-decoration: underline !important;\n }\n .no-accent {\n color: inherit !important;\n text-decoration: underline;\n }\n small,\n .small {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n letter-spacing: 0rem;\n }\n @media screen and (min-width: 768px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n @media screen and (min-width: 992px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n .large {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n @media screen and (min-width: 768px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .text-nowrap {\n white-space: nowrap !important;\n }\n .text-wrap {\n white-space: normal !important;\n }\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .align-left {\n text-align: left !important;\n }\n .align-center {\n text-align: center !important;\n }\n .align-right {\n text-align: right !important;\n }\n @media screen and (min-width: 480px) {\n .align-sm-right {\n text-align: right !important;\n }\n .align-sm-left {\n text-align: left !important;\n }\n .align-sm-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-md-right {\n text-align: right !important;\n }\n .align-md-left {\n text-align: left !important;\n }\n .align-md-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-lg-right {\n text-align: right !important;\n }\n .align-lg-left {\n text-align: left !important;\n }\n .align-lg-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-xl-right {\n text-align: right !important;\n }\n .align-xl-left {\n text-align: left !important;\n }\n .align-xl-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-xxl-right {\n text-align: right !important;\n }\n .align-xxl-left {\n text-align: left !important;\n }\n .align-xxl-center {\n text-align: center !important;\n }\n }\n .reset-text-decoration {\n text-decoration: none !important;\n }\n .align-middle {\n vertical-align: middle !important;\n }\n .align-top {\n vertical-align: top !important;\n }\n .align-bottom {\n vertical-align: bottom !important;\n }\n .align-baseline {\n vertical-align: baseline !important;\n }\n @media screen and (min-width: 480px) {\n .align-middle--sm {\n vertical-align: middle !important;\n }\n .align-top--sm {\n vertical-align: top !important;\n }\n .align-bottom--sm {\n vertical-align: bottom !important;\n }\n .align-baseline--sm {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-middle--md {\n vertical-align: middle !important;\n }\n .align-top--md {\n vertical-align: top !important;\n }\n .align-bottom--md {\n vertical-align: bottom !important;\n }\n .align-baseline--md {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-middle--lg {\n vertical-align: middle !important;\n }\n .align-top--lg {\n vertical-align: top !important;\n }\n .align-bottom--lg {\n vertical-align: bottom !important;\n }\n .align-baseline--lg {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-middle--xl {\n vertical-align: middle !important;\n }\n .align-top--xl {\n vertical-align: top !important;\n }\n .align-bottom--xl {\n vertical-align: bottom !important;\n }\n .align-baseline--xl {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-middle--xxl {\n vertical-align: middle !important;\n }\n .align-top--xxl {\n vertical-align: top !important;\n }\n .align-bottom--xxl {\n vertical-align: bottom !important;\n }\n .align-baseline--xxl {\n vertical-align: baseline !important;\n }\n }\n .reset-font-weight {\n font-weight: normal !important;\n }\n .reset-font-size {\n font-size: 16px !important;\n line-height: 1.25 !important;\n }\n .text-fullwidth {\n max-width: none;\n }\n .text-readable {\n max-width: 35em;\n }\n .text-narrow {\n max-width: 22em;\n }\n .text-relaxed {\n max-inline-size: clamp(40rem, 75vw, 70rem);\n }\n}\n@layer utilities {\n .border-radius--medium {\n border-radius: 10px;\n }\n .border {\n border: 2px solid var(--color-border-contrast);\n }\n .border.is-invalid {\n border-color: var(--color-border-negative) !important;\n }\n .border--gray {\n border-color: var(--color-border-subtle);\n }\n .border--gray.border-hover:hover, .border--gray.is-indicating:hover {\n border-color: var(--color-text-secondary);\n }\n .border--orange {\n border-color: var(--color-border-accent);\n }\n}\n@layer utilities {\n .mb {\n margin-bottom: 1.25rem;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n .mb-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-small {\n margin-bottom: 10px !important;\n }\n .mb-medium {\n margin-bottom: 20px !important;\n }\n .mb-large {\n margin-bottom: 30px !important;\n }\n .mb-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n @media screen and (min-width: 480px) {\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n .mb-sm-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-sm-small {\n margin-bottom: 10px !important;\n }\n .mb-sm-medium {\n margin-bottom: 20px !important;\n }\n .mb-sm-large {\n margin-bottom: 30px !important;\n }\n .mb-sm-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n .mb-md-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-md-small {\n margin-bottom: 10px !important;\n }\n .mb-md-medium {\n margin-bottom: 20px !important;\n }\n .mb-md-large {\n margin-bottom: 30px !important;\n }\n .mb-md-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n .mb-lg-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-lg-small {\n margin-bottom: 10px !important;\n }\n .mb-lg-medium {\n margin-bottom: 20px !important;\n }\n .mb-lg-large {\n margin-bottom: 30px !important;\n }\n .mb-lg-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n .mb-xl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xl-small {\n margin-bottom: 10px !important;\n }\n .mb-xl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xl-large {\n margin-bottom: 30px !important;\n }\n .mb-xl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n .mb-xxl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xxl-small {\n margin-bottom: 10px !important;\n }\n .mb-xxl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xxl-large {\n margin-bottom: 30px !important;\n }\n .mb-xxl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n }\n .mt-none {\n margin-top: 0 !important;\n }\n .pt-none {\n padding-top: 0 !important;\n }\n .mr-none {\n margin-right: 0 !important;\n }\n .pr-none {\n padding-right: 0 !important;\n }\n .pb-none {\n padding-bottom: 0 !important;\n }\n .ml-none {\n margin-left: 0 !important;\n }\n .pl-none {\n padding-left: 0 !important;\n }\n .no-mrg {\n margin: 0 !important;\n }\n .no-pad {\n padding: 0 !important;\n }\n .clearfix::before, .clearfix::after {\n content: \"\";\n display: table;\n }\n .clearfix::after {\n clear: both;\n }\n .clear {\n clear: both;\n }\n .justify-content-start {\n justify-content: flex-start;\n }\n .justify-content-end {\n justify-content: flex-end;\n }\n .justify-content-center {\n justify-content: center;\n }\n .justify-content-space-around {\n justify-content: space-around;\n }\n .justify-content-space-between {\n justify-content: space-between;\n }\n .align-items-start {\n align-items: flex-start;\n }\n .align-items-end {\n align-items: flex-end;\n }\n .align-items-center {\n align-items: center;\n }\n .align-items-stretch {\n align-items: stretch;\n }\n .align-self-left {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top {\n align-self: flex-start;\n }\n .align-self-bottom {\n align-self: flex-end;\n }\n .align-self-middle {\n align-self: center;\n }\n .align-self-stretch {\n align-self: stretch;\n }\n .align-self-last {\n order: 999;\n }\n @media screen and (min-width: 480px) {\n .justify-content-start--sm {\n justify-content: flex-start;\n }\n .justify-content-end--sm {\n justify-content: flex-end;\n }\n .justify-content-center--sm {\n justify-content: center;\n }\n .justify-content-space-around--sm {\n justify-content: space-around;\n }\n .justify-content-space-between--sm {\n justify-content: space-between;\n }\n .align-items-start--sm {\n align-items: flex-start;\n }\n .align-items-end--sm {\n align-items: flex-end;\n }\n .align-items-center--sm {\n align-items: center;\n }\n .align-items-stretch--sm {\n align-items: stretch;\n }\n .align-self-left--sm {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--sm {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--sm {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--sm {\n align-self: flex-start;\n }\n .align-self-bottom--sm {\n align-self: flex-end;\n }\n .align-self-middle--sm {\n align-self: center;\n }\n .align-self-stretch--sm {\n align-self: stretch;\n }\n .align-self-last--sm {\n order: 999;\n }\n }\n @media screen and (min-width: 768px) {\n .justify-content-start--md {\n justify-content: flex-start;\n }\n .justify-content-end--md {\n justify-content: flex-end;\n }\n .justify-content-center--md {\n justify-content: center;\n }\n .justify-content-space-around--md {\n justify-content: space-around;\n }\n .justify-content-space-between--md {\n justify-content: space-between;\n }\n .align-items-start--md {\n align-items: flex-start;\n }\n .align-items-end--md {\n align-items: flex-end;\n }\n .align-items-center--md {\n align-items: center;\n }\n .align-items-stretch--md {\n align-items: stretch;\n }\n .align-self-left--md {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--md {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--md {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--md {\n align-self: flex-start;\n }\n .align-self-bottom--md {\n align-self: flex-end;\n }\n .align-self-middle--md {\n align-self: center;\n }\n .align-self-stretch--md {\n align-self: stretch;\n }\n .align-self-last--md {\n order: 999;\n }\n }\n @media screen and (min-width: 992px) {\n .justify-content-start--lg {\n justify-content: flex-start;\n }\n .justify-content-end--lg {\n justify-content: flex-end;\n }\n .justify-content-center--lg {\n justify-content: center;\n }\n .justify-content-space-around--lg {\n justify-content: space-around;\n }\n .justify-content-space-between--lg {\n justify-content: space-between;\n }\n .align-items-start--lg {\n align-items: flex-start;\n }\n .align-items-end--lg {\n align-items: flex-end;\n }\n .align-items-center--lg {\n align-items: center;\n }\n .align-items-stretch--lg {\n align-items: stretch;\n }\n .align-self-left--lg {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--lg {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--lg {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--lg {\n align-self: flex-start;\n }\n .align-self-bottom--lg {\n align-self: flex-end;\n }\n .align-self-middle--lg {\n align-self: center;\n }\n .align-self-stretch--lg {\n align-self: stretch;\n }\n .align-self-last--lg {\n order: 999;\n }\n }\n @media screen and (min-width: 1240px) {\n .justify-content-start--xl {\n justify-content: flex-start;\n }\n .justify-content-end--xl {\n justify-content: flex-end;\n }\n .justify-content-center--xl {\n justify-content: center;\n }\n .justify-content-space-around--xl {\n justify-content: space-around;\n }\n .justify-content-space-between--xl {\n justify-content: space-between;\n }\n .align-items-start--xl {\n align-items: flex-start;\n }\n .align-items-end--xl {\n align-items: flex-end;\n }\n .align-items-center--xl {\n align-items: center;\n }\n .align-items-stretch--xl {\n align-items: stretch;\n }\n .align-self-left--xl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xl {\n align-self: flex-start;\n }\n .align-self-bottom--xl {\n align-self: flex-end;\n }\n .align-self-middle--xl {\n align-self: center;\n }\n .align-self-stretch--xl {\n align-self: stretch;\n }\n .align-self-last--xl {\n order: 999;\n }\n }\n @media screen and (min-width: 1380px) {\n .justify-content-start--xxl {\n justify-content: flex-start;\n }\n .justify-content-end--xxl {\n justify-content: flex-end;\n }\n .justify-content-center--xxl {\n justify-content: center;\n }\n .justify-content-space-around--xxl {\n justify-content: space-around;\n }\n .justify-content-space-between--xxl {\n justify-content: space-between;\n }\n .align-items-start--xxl {\n align-items: flex-start;\n }\n .align-items-end--xxl {\n align-items: flex-end;\n }\n .align-items-center--xxl {\n align-items: center;\n }\n .align-items-stretch--xxl {\n align-items: stretch;\n }\n .align-self-left--xxl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xxl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xxl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xxl {\n align-self: flex-start;\n }\n .align-self-bottom--xxl {\n align-self: flex-end;\n }\n .align-self-middle--xxl {\n align-self: center;\n }\n .align-self-stretch--xxl {\n align-self: stretch;\n }\n .align-self-last--xxl {\n order: 999;\n }\n }\n .aspect-ratio-21-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 21/9;\n }\n .aspect-ratio-16-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 16/9;\n }\n .aspect-ratio-4-3 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 4/3;\n }\n .aspect-ratio-1-1 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 1/1;\n }\n .aspect-ratio-3-2 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 3/2;\n }\n .d-block {\n display: block;\n }\n .d-inline-block {\n display: inline-block;\n }\n .d-inline {\n display: inline;\n }\n .d-flex {\n display: flex;\n }\n .d-inline-flex {\n display: inline-flex;\n }\n .flex-column {\n flex-direction: column;\n }\n .fullwidth {\n width: 100% !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .fullwidth-xs-only {\n width: 100% !important;\n }\n }\n .fullheight {\n height: 100% !important;\n }\n .center-block {\n margin-left: auto !important;\n margin-right: auto !important;\n }\n .relative {\n position: relative !important;\n }\n .absolute {\n position: absolute !important;\n }\n}\n@layer utilities {\n .visually-hidden,\n .sr-only {\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n .hide {\n display: none !important;\n }\n .invisible {\n visibility: hidden;\n }\n @media screen and (min-width: 480px) {\n .show-xs-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .hide-xs-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) {\n .hide-sm {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .hide-sm-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .hide-md {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .hide-md-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .hide-lg {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .hide-lg-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .hide-xl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .hide-xl-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .hide-xxl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl-only {\n display: none !important;\n }\n }\n}\n@layer utilities {\n .order-1 {\n order: 1 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-1-xs-only {\n order: 1 !important;\n }\n }\n .order-2 {\n order: 2 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-2-xs-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-1-sm {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-1-sm-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-2-sm {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-2-sm-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-1-md {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-1-md-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-2-md {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-2-md-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-1-lg {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-1-lg-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-2-lg {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-2-lg-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-1-xl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-1-xl-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-2-xl {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-2-xl-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-1-xxl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-2-xxl {\n order: 2 !important;\n }\n }\n}\n@layer utilities {\n [class*=horizontal-scroll],\n .table-scrollable {\n scroll-snap-type: x mandatory;\n }\n [class*=horizontal-scroll] > *,\n .table-scrollable > * {\n scroll-snap-align: start;\n }\n @supports selector(::-webkit-scrollbar) {\n [class*=horizontal-scroll]::-webkit-scrollbar,\n .table-scrollable::-webkit-scrollbar {\n height: 0.5rem;\n appearance: none;\n background-color: transparent;\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-track,\n .table-scrollable::-webkit-scrollbar-track {\n border: 0.0625rem solid transparent;\n background-color: var(--color-surface-moderate);\n background-clip: content-box;\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n border: 0.0625rem solid transparent;\n background-clip: content-box;\n }\n [class*=horizontal-scroll]:hover::-webkit-scrollbar-thumb, [class*=horizontal-scroll]:active::-webkit-scrollbar-thumb, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:hover, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:active,\n .table-scrollable:hover::-webkit-scrollbar-thumb,\n .table-scrollable:active::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb:hover,\n .table-scrollable::-webkit-scrollbar-thumb:active {\n border-width: 0;\n background-color: var(--color-fill-secondary) !important;\n }\n }\n @supports not selector(::-webkit-scrollbar) {\n [class*=horizontal-scroll],\n .table-scrollable {\n scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n scrollbar-width: thin;\n }\n }\n .horizontal-scroll {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n @media screen and (min-width: 480px) {\n .horizontal-scroll--sm {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--sm-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 768px) {\n .horizontal-scroll--md {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--md-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 992px) {\n .horizontal-scroll--lg {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--lg-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1240px) {\n .horizontal-scroll--xl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1380px) {\n .horizontal-scroll--xxl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xxl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n}\n@layer utilities {\n /**\n * Resets for megamenu and footer\n * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.\n **/\n .osk-footer-menu,\n .mm-header ul,\n .megamenu-header ul {\n max-width: none;\n margin-top: 0;\n }\n .osk-footer-menu li,\n .mm-header ul li,\n .megamenu-header ul li {\n margin-top: 0;\n margin-bottom: 0;\n }\n /**\n * Fixes for header and megamenu when modal is open\n * This is required to prevent the header and megamenu from shifting when a modal is open due to scrollbar disappearance.\n * This is a temporary fix and will be removed once the header and megamenu components are migrated to ods2\n **/\n body.has-modal .mm-header.is-sticky,\n body.has-modal .megamenu-header.is-sticky,\n body.has-modal [data-megamenu].is-sticky:not(.megamenu) {\n padding-right: var(--ods-modal-scrollbar-width, 0px);\n }\n}"]}
package/build/search-index.json CHANGED
@@ -49,7 +49,7 @@
49
49
  },
50
50
  {
51
51
  "href": "/components/carousel",
52
- "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to enable a bleed layout that extends beyond the container edges while keeping the carousel internally managed (no global body overflow workaround needed). Key features of the bleed variant: - Carousel extends to the viewport edge while preserving container-aligned content insets - Extends beyond container edges without forcing page-level overflow clipping - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden in React using the swiperOptions prop (data-swiper-options outside React). The prop accepts a Swiper.js options object. Responsive slide spacing Use swiperOptions and set Swiper spaceBetween directly when slide spacing should follow Grid column gap. If you want Carousel spacing to visually match Grid gutters, use these values: - Grid small -> spaceBetween: 10 - Grid default -> spaceBetween: 20 - Grid large -> spaceBetween: 20 on mobile, 40 from md up - Grid xlarge -> spaceBetween: 20 on mobile, 60 from md up Examples: - {\"spaceBetween\":0} -> no space between slides - {\"spaceBetween\":10} -> Grid small - {\"spaceBetween\":20} -> Grid default - {\"spaceBetween\":20,\"breakpoints\":{\"768\":{\"spaceBetween\":40}}} -> Grid large - {\"spaceBetween\":10,\"breakpoints\":{\"768\":{\"spaceBetween\":40},\"1240\":{\"spaceBetween\":60}}} -> custom responsive spacing Spacing is applied through Swiper spaceBetween, so carousel overflow math and auto-disable logic stay in sync. If you set slidesPerView directly and want same value on large screens too, also override the default Carousel 1240 breakpoint. Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | --------------------------------------------------------------------------- | | items | ReactNode[] | - | Array of carousel items to display | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example: Re-initialize after dynamic DOM updates When your rendering flow updates carousel markup (for example Livewire tab/content updates), use the generic ODS module lifecycle helpers. For hidden tabs, Carousel now auto-synchronizes layout when the tab panel becomes visible."
52
+ "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to enable a bleed layout that extends beyond the container edges while keeping the carousel internally managed (no global body overflow workaround needed). Key features of the bleed variant: - Carousel extends to the viewport edge while preserving container-aligned content insets - Extends beyond container edges without forcing page-level overflow clipping - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden in React using the swiperOptions prop (data-swiper-options outside React). The prop accepts a Swiper.js options object. Render items from data Use renderItems when Carousel should own slide structure, but caller should pass raw data instead of ready JSX elements. Responsive slide spacing Use swiperOptions and set Swiper spaceBetween directly when slide spacing should follow Grid column gap. If you want Carousel spacing to visually match Grid gutters, use these values: - Grid small -> spaceBetween: 10 - Grid default -> spaceBetween: 20 - Grid large -> spaceBetween: 20 on mobile, 40 from md up - Grid xlarge -> spaceBetween: 20 on mobile, 60 from md up Examples: - {\"spaceBetween\":0} -> no space between slides - {\"spaceBetween\":10} -> Grid small - {\"spaceBetween\":20} -> Grid default - {\"spaceBetween\":20,\"breakpoints\":{\"768\":{\"spaceBetween\":40}}} -> Grid large - {\"spaceBetween\":10,\"breakpoints\":{\"768\":{\"spaceBetween\":40},\"1240\":{\"spaceBetween\":60}}} -> custom responsive spacing Spacing is applied through Swiper spaceBetween, so carousel overflow math and auto-disable logic stay in sync. If you set slidesPerView directly and want same value on large screens too, also override the default Carousel 1240 breakpoint. Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------------------------- | ------- | --------------------------------------------------------------------------- | | items | T[] | - | Array of carousel items or source data | | renderItems | (item: T, index: number) => ReactNode | - | Optional renderer for turning each items entry into slide content | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example: Re-initialize after dynamic DOM updates When your rendering flow updates carousel markup (for example Livewire tab/content updates), use the generic ODS module lifecycle helpers. For hidden tabs, Carousel now auto-synchronizes layout when the tab panel becomes visible."
53
53
  },
54
54
  {
55
55
  "href": "/components/carousel-hero",
@@ -85,7 +85,7 @@
85
85
  },
86
86
  {
87
87
  "href": "/components/feature-accordion",
88
- "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho <h3 className=\"bold\">S 3-ročnou zárukou a výmenou rozbitého displeja</h3> Chcem ho Responsive images with srcset Use data-image-srcset to provide multiple image resolutions for different screen densities. <h3 className=\"bold\">AI-powered camera with enhanced clarity</h3> <p>High-resolution images for retina displays</p> Learn More <h3 className=\"bold\">Professional photography setup</h3> <p>Optimized for high-DPI screens</p> Learn More Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via data-image-alt attribute - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, the JavaScript module automatically generates images from data-image-url, data-image-alt, and data-image-srcset attributes on accordion items. API React Props FeatureAccordion | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------------- | ------------------ | ------- | ------------------------------------------------------------------ | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | data-image-url | string | - | Image URL (or use imageUrl prop) | | data-image-alt | string | - | Image alt text (or use imageAlt prop) | | data-image-srcset | string | - | Image srcset for responsive images (or use imageSrcSet prop) | | data-image | string \\| object | - | Responsive image object with breakpoint keys (or use image prop) | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: data-image > data-image-srcset + data-image-url > data-image-url Vanilla HTML: In non-React environments, images are automatically generated from data-image-url, data-image-alt, and data-image-srcset attributes on the accordion item element. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | itemSelector | string | \"[data-feature-accordion-item]\" | Selector for accordion items | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | | imageSelector | string | \"[data-feature-accordion-image]\" | Selector for images | FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
88
+ "content": "FeatureAccordion Interactive accordion component with image support for showcasing featured products or services. Each item displays an image that changes based on which accordion panel is expanded. Only one item can be open at a time. Content Guidelines - A 4:3 asset at 640x480 is recommended for the default preview shape. - Portrait and other aspect ratios can be used when content benefits from them. - Source images work best when they are at least 640px wide. - At xl (1240px) and above, desktop preview area stays 640px wide while image keeps its own intrinsic aspect ratio. - Below xl, layout stacks and preview image fills available container width. - Large assets benefit from optional higher-density srcset variants. - Main content titles work best when kept to about 3 lines, roughly 84 characters. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Variable content lengths Use different heading and body lengths when accordion items need more or less text content. <h3 className=\"bold\"> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\" } </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.\" } </p> <h3 className=\"bold\"> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.\" } </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui.\" } </p> Portrait images Portrait images are supported. Use source images that are at least 640px wide for sharp desktop rendering. <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus.\" } </p> {\"Button\"} <h3 className=\"bold\"> {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"} </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} Centered preview alignment Use align-self- classes on feature-accordionpreview elements, such as align-self-middle, with alignment utilities when the preview image should align differently from the default top alignment on desktop. <h3 className=\"bold\"> {\"Lorem ipsum dolor sit amet, consectetur adipiscing elit.\"} </h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} <h3 className=\"bold\">{\"Lorem ipsum dolor sit amet.\"}</h3> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> <p> { \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.\" } </p> {\"Button\"} Color Schemes FeatureAccordion adapts to different background colors. Use background-primary class when placing on gray backgrounds. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Responsive images with srcset Use imageSrcSet to provide multiple image resolutions for different screen densities. Keep all variants visually consistent for same item. <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} <h3 className=\"bold\"> {Lorem ipsum dolor sit amet, eam quas tacimates iudicabit te, at viderer nostrud usu.} </h3> {\"Button\"} Accessibility FeatureAccordion follows WAI-ARIA accordion pattern: - Each accordion item has proper ARIA attributes for screen readers - Keyboard navigation is supported (Tab to navigate, Enter/Space to toggle) - Images must include meaningful alt text via imageAlt prop - Use semantic headings within accordion content to maintain proper document structure For vanilla HTML implementations, render preview images directly in HTML. JavaScript switches already rendered images; it no longer generates missing preview markup. API React Props FeatureAccordion | Prop | Type | Default | Description | | ------------------ | ----------------- | ------- | --------------------------------------------- | | className | string | - | Additional CSS classes | | previewClassName | string | - | Additional CSS classes for preview area | | children | React.ReactNode | - | Required. FeatureAccordionItem components | FeatureAccordionItem | Prop | Type | Default | Description | | ------------- | ------------------ | ------- | -------------------------------------------------------------------- | | id | string | - | Required. Unique identifier for the item | | title | string | - | Required. Accordion item title | | imageUrl | string | - | Simple image URL | | imageAlt | string | - | Image alt text | | imageSrcSet | string | - | Image srcset for responsive images | | image | string \\| object | - | Image source, typically responsive image object with breakpoint keys | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Item content | Image priority: When multiple image props are provided, the component uses this priority: image > imageSrcSet + imageUrl > imageUrl Image spec: Recommended preview asset is 4:3 at 640x480, but portrait and other aspect ratios are supported. Source image should be at least 640px wide. At xl (1240px) and above, desktop preview area is 640px wide. Below xl, preview image expands to available container width. Image height always follows its intrinsic aspect ratio. Use appropriately sized assets and optional srcset variants for sharper displays. Content limit: Main item title should stay within 3 lines, about 84 characters maximum. Vanilla HTML: In non-React environments, render preview images in final HTML with data-feature-accordion-image. Do not rely on JS to create them from item data attributes. JS module reference All elements with data-feature-accordion are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------- | -------- | ----------------------------------- | ----------------------------- | | bodiesSelector | string | \".accordion__body\" | Selector for accordion bodies | | buttonSelector | string | \"[data-feature-accordion-toggle]\" | Selector for toggle buttons | HTML / CSS Contract - Desktop layout switches at xl. - Desktop preview wrapper is fixed 640x480. - Accordion column fills remaining width. - Below xl, layout stacks and preview height becomes automatic. - Non-React HTML must include final preview image markup; JS only toggles visibility and active accordion state. FeatureAccordion Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
89
89
  },
90
90
  {
91
91
  "href": "/components/footer",
@@ -225,7 +225,7 @@
225
225
  },
226
226
  {
227
227
  "href": "/components/promo-banner",
228
- "content": "PromoBanner Promotional banner component designed to highlight special offers, services, or call-to-action messages with optional images and customizable styling. The component provides a flexible container that can display content alongside optional images in a responsive grid layout. Example <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť?} <span className=\"text-accent ml-small\">{\"Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} With Image PromoBanner supports background images to create more visually engaging promotional content. <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť? Prima Voľba} <span className=\"text-accent ml-small\">{\" Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} Image aligned to bottom <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Image aligned to top <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item top padding on mobile Use flushTopSmDown when you need to remove only top padding of the content item on mobile (sm and smaller). <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item bottom padding on mobile Use flushBottomSmDown when image is visually above the text on mobile and you want to remove the extra spacing under text. <p className=\"mb-none\">Microsoft Copilot</p> <h2 className=\"h1 mb-medium\">{Zjednodušte si prácu s AI asistentom}</h2> <p className=\"mb-none\"> {Ukážka použitia pre prípady, keď je na mobile obrázok navrchu a pod textom nechcete voľný priestor.} </p> Image with bleeding effect The bleedImage prop allows the image to extend beyond the container boundaries to the right edge of the viewport, creating a more dramatic visual effect. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Reverse Variant The reverse variant changes the order of content and image, placing the image on the left side and content on the right side. This creates visual interest and can be used to break up monotonous layouts. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Reverse Layout Example}</h2> <p className=\"mb-large\"> {The reverse variant places the image on the left and content on the right, creating a different visual flow that can help break up page layouts.} </p> {\"Learn More\"} Vertical Variant The vertical variant stacks the content and image vertically instead of horizontally. In this layout, both content and image span the full width (12 columns) and are arranged one above the other. <h2 className=\"h1 mb-medium\">{Vertical Layout Example}</h2> <p className=\"mb-large\"> {The vertical variant is perfect for narrow spaces or when you want a full-width content experience with stacked layout.} </p> {\"Learn More\"} Vertical with Full Width Image The imageFullWidth prop can be used with the vertical variant to make the image span the complete width of its container, creating a more immersive visual experience. <h2 className=\"h1 mb-medium\">{Full Width Image Example}</h2> <p className=\"mb-large\"> {When imageFullWidth is enabled, the image takes up the complete width of its container, creating a bold visual impact in the vertical layout.} </p> {\"Discover More\"} Usage PromoBanner is ideal for: - Highlighting special offers or promotions - Call-to-action sections on landing pages - Product or service announcements - Cross-selling and upselling opportunities - Feature announcements and product launches The component combines visual appeal with clear messaging to drive user engagement and conversions. Content Structure The PromoBanner component uses a children-based API, giving you complete control over the content structure. You can include any combination of: - Headings (h1, h2, h3, etc.) - Paragraphs - Buttons - Custom HTML elements - Other components Layout - Without image: Content spans 7/12 columns on desktop - With image: Content spans 6/12 columns, image spans 6/12 columns - With bleeding image: Image extends beyond the 6/12 column grid to the right edge of the viewport, while content remains in its 6/12 column space. The image appears after the content in the visual order. - Reverse variant: Image spans 6/12 columns on the left, content spans 6/12 columns on the right. The image appears before the content in both DOM order and visual order. - Vertical variant: Both content and image span full width (12/12 columns) and are stacked vertically - With imageFullWidth: When enabled, the image takes up the complete width of its container, particularly useful in vertical layouts for maximum visual impact - Mobile: Both content and image span full width (12/12 columns). Bleeding effect is disabled on small screens for better mobile experience. Image Alignment Use the alignImage prop to control vertical alignment of the image within its container: - \"bottom\": Aligns the image to the bottom of its container - \"top\": Aligns the image to the top of its container Bleeding Effect The bleedImage prop creates a dramatic visual effect by extending the image beyond the normal container boundaries. When enabled: - The image extends to the right edge of the viewport - The image is automatically positioned after the content (using CSS order: 2) - On mobile devices (small screens), the bleeding effect is disabled and normal layout is restored - The content maintains its standard grid positioning while the image breaks out of the grid - Note: The bleeding effect only works with the default horizontal layout, not with the reverse variant Full Width Image The imageFullWidth prop makes the image span the complete width of its container, creating a bold visual impact. This feature: - Applies the fullwidth class to the image component - Is particularly effective when used with the vertical variant - Ensures the image takes up the maximum available space within its grid column - Works well for hero-style images that need to make a strong visual statement API Reference Props | Prop | Type | Default | Description | | ------------------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------- | | children | React.ReactNode | - | Content to display in the banner | | image | string | - | URL of the background image to display | | alignImage | \"bottom\" \\| \"top\" | - | Aligns the image to the bottom or top of its container | | flushTopSmDown | boolean | false | Removes top padding from promo item on sm and smaller breakpoints | | flushBottomSmDown | boolean | false | Removes bottom padding from promo item on sm and smaller breakpoints | | bleedImage | boolean | false | Extends the image beyond container to viewport edge | | imageFullWidth | boolean | false | Makes the image span the complete width of its container | | colorScheme | \"light\" \\| \"dark\" | - | Color scheme for the banner | | variant | \"vertical\" \\| \"reverse\" | - | Sets the layout variant. Vertical stacks content and image, reverse places image on the left | | className | string | - | Additional CSS classes |"
228
+ "content": "PromoBanner Promotional banner component designed to highlight special offers, services, or call-to-action messages with optional images and customizable styling. The component provides a flexible container that can display content alongside optional images in a responsive grid layout. Example <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť?} <span className=\"text-accent ml-small\">{\"Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} With Image PromoBanner supports background images to create more visually engaging promotional content. <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť? Prima Voľba} <span className=\"text-accent ml-small\">{\" Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} Image aligned to bottom <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Image aligned to top <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item top padding on mobile Use flushTopSmDown when you need to remove only top padding of the content item on mobile (sm and smaller). <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item bottom padding on mobile Use flushBottomSmDown when image is visually above the text on mobile and you want to remove the extra spacing under text. <p className=\"mb-none\">Microsoft Copilot</p> <h2 className=\"h1 mb-medium\">{Zjednodušte si prácu s AI asistentom}</h2> <p className=\"mb-none\"> {Ukážka použitia pre prípady, keď je na mobile obrázok navrchu a pod textom nechcete voľný priestor.} </p> Image with bleeding effect The bleedImage prop allows the image to extend beyond the container boundaries to the right edge of the viewport, creating a more dramatic visual effect. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Reverse Variant The reverse variant changes the order of content and image, placing the image on the left side and content on the right side. This creates visual interest and can be used to break up monotonous layouts. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Reverse Layout Example}</h2> <p className=\"mb-large\"> {The reverse variant places the image on the left and content on the right, creating a different visual flow that can help break up page layouts.} </p> {\"Learn More\"} Vertical Variant The vertical variant stacks the content and image vertically instead of horizontally. In this layout, both content and image span the full width (12 columns) and are arranged one above the other. <h2 className=\"h1 mb-medium\">{Vertical Layout Example}</h2> <p className=\"mb-large\"> {The vertical variant is perfect for narrow spaces or when you want a full-width content experience with stacked layout.} </p> {\"Learn More\"} Vertical with Full Width Image The .promo-banner--vertical prop can be used with the vertical variant to make the image span the complete width of its container, creating a more immersive visual experience. Vertical variant keeps default top padding on content. When banner is placed outside section or in a section with different background collapse it explicitly with pt-none (in promo-banneritem). <h2 className=\"h1 mb-medium\">{Full Width Image Example}</h2> <p className=\"mb-large\"> {When imageFullWidth is enabled, the image takes up the complete width of its container, creating a bold visual impact in the vertical layout.} </p> {\"Discover More\"} Usage PromoBanner is ideal for: - Highlighting special offers or promotions - Call-to-action sections on landing pages - Product or service announcements - Cross-selling and upselling opportunities - Feature announcements and product launches The component combines visual appeal with clear messaging to drive user engagement and conversions. Content Structure The PromoBanner component uses a children-based API, giving you complete control over the content structure. You can include any combination of: - Headings (h1, h2, h3, etc.) - Paragraphs - Buttons - Custom HTML elements - Other components Layout - Without image: Content spans 7/12 columns on desktop - With image: Content spans 6/12 columns, image spans 6/12 columns - With bleeding image: Image extends beyond the 6/12 column grid to the right edge of the viewport, while content remains in its 6/12 column space. The image appears after the content in the visual order. - Reverse variant: Image spans 6/12 columns on the left, content spans 6/12 columns on the right. The image appears before the content in both DOM order and visual order. - Vertical variant: Both content and image span full width (12/12 columns) and are stacked vertically - With imageFullWidth: When enabled, the image takes up the complete width of its container, particularly useful in vertical layouts for maximum visual impact - Mobile: Both content and image span full width (12/12 columns). Bleeding effect is disabled on small screens for better mobile experience. Image Alignment Use the alignImage prop to control vertical alignment of the image within its container: - \"bottom\": Aligns the image to the bottom of its container - \"top\": Aligns the image to the top of its container Bleeding Effect The bleedImage prop creates a dramatic visual effect by extending the image beyond the normal container boundaries. When enabled: - The image extends to the right edge of the viewport - The image is automatically positioned after the content (using CSS order: 2) - On mobile devices (small screens), the bleeding effect is disabled and normal layout is restored - The content maintains its standard grid positioning while the image breaks out of the grid - Note**: The bleeding effect only works with the default horizontal layout, not with the reverse variant Full Width Image The imageFullWidth prop makes the image span the complete width of its container, creating a bold visual impact. This feature: - Applies the fullwidth class to the image component - Is particularly effective when used with the vertical variant - Ensures the image takes up the maximum available space within its grid column - Works well for hero-style images that need to make a strong visual statement API Reference Props | Prop | Type | Default | Description | | ------------------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------- | | children | React.ReactNode | - | Content to display in the banner | | image | string | - | URL of the background image to display | | alignImage | \"bottom\" \\| \"top\" | - | Aligns the image to the bottom or top of its container | | flushTopSmDown | boolean | false | Removes top padding from promo item on sm and smaller breakpoints | | flushBottomSmDown | boolean | false | Removes bottom padding from promo item on sm and smaller breakpoints | | bleedImage | boolean | false | Extends the image beyond container to viewport edge | | imageFullWidth | boolean | false | Makes the image span the complete width of its container | | colorScheme | \"light\" \\| \"dark\" | - | Color scheme for the banner | | variant | \"vertical\" \\| \"reverse\" | - | Sets the layout variant. Vertical stacks content and image, reverse places image on the left | | className | string | - | Additional CSS classes |"
229
229
  },
230
230
  {
231
231
  "href": "/components/promotion-card",