@orangesk/orange-design-system 2.0.0-beta.45 → 2.0.0-beta.47

package/build/lib/utilities.css

@@ -1,2 +1,2 @@
-@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}.color-black{color:#000!important}.color-orange{color:var(--color-text-accent)!important}.color-gray{color:#666!important}.color-white{color:#fff!important}.color-blue{color:var(--color-icon-information)!important}.color-danger{color:var(--color-icon-negative)!important}.bg-white{background-color:#fff!important;color:var(--color-text-default)}.bg-white .color-blue,.bg-white.color-blue{color:var(--color-icon-information)!important}.bg-black{background-color:#141414!important;color:var(--color-text-inverse)}.bg-black .color-gray,.bg-black.color-gray{color:#ddd!important}.bg-black .color-blue,.bg-black.color-blue{color:#4bb4e6!important}.bg-orange{background-color:var(--color-surface-secondary)!important;color:#000!important}.bg-orange-dark{background-color:var(--color-surface-tertiary)!important;color:var(--color-text-inverse)!important}.bg-gray{background-color:var(--color-surface-subtle)!important}.bg-gray-lighter{background-color:var(--color-background-secondary)!important}.bg-blue{background-color:var(--color-fill-accent1)!important}.bg-blue,.bg-green{color:#000!important}.bg-green{background-color:var(--color-fill-accent2)!important}.bg-pink{background-color:var(--color-fill-accent3)!important}.bg-pink,.bg-violet{color:#000!important}.bg-violet{background-color:var(--color-fill-accent4)!important}.bg-yellow{background-color:var(--color-fill-accent5)!important;color:#000!important}.bg-yellow-lighter{background-color:#fff6b6!important;color:#000!important}.bg-red{background-color:#ff4d4d!important;color:#000!important}.bg-accent{background-color:var(--color-background-accent)!important}.bg-accent,.bg-accent1-blog{color:var(--color-text-default)!important}.bg-accent1-blog{background-color:var(--color-background-accent1-blog)!important}.bg-accent2-blog{background-color:var(--color-background-accent2-blog)!important;color:var(--color-text-default)!important}.bg-orange-dark::selection,.bg-orange::selection,.surface-secondary::selection,.surface-tertiary::selection{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.color-gray::selection{color:var(--color-text-default)}.background-none,.bg-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;text-underline-offset:.1em!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:var(--color-surface-moderate);border-radius:99px;height:.375rem}.table-scrollable::-webkit-scrollbar-track,[class*=horizontal-scroll]::-webkit-scrollbar-track{background-color:var(--color-surface-moderate);border-radius:99px}.table-scrollable::-webkit-scrollbar-thumb,[class*=horizontal-scroll]::-webkit-scrollbar-thumb{background-color:var(--color-fill-contrast);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}}@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}}
+@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}.color-black{color:#000!important}.color-orange{color:var(--color-text-accent)!important}.color-gray{color:#666!important}.color-white{color:#fff!important}.color-blue{color:var(--color-icon-information)!important}.color-danger{color:var(--color-icon-negative)!important}.bg-white{background-color:#fff!important;color:var(--color-text-default)}.bg-white .color-blue,.bg-white.color-blue{color:var(--color-icon-information)!important}.bg-black{background-color:#141414!important;color:var(--color-text-inverse)}.bg-black .color-gray,.bg-black.color-gray{color:#ddd!important}.bg-black .color-blue,.bg-black.color-blue{color:#4bb4e6!important}.bg-orange{background-color:var(--color-surface-secondary)!important;color:#000!important}.bg-orange-dark{background-color:var(--color-surface-tertiary)!important;color:var(--color-text-inverse)!important}.bg-gray{background-color:var(--color-surface-subtle)!important}.bg-gray-lighter{background-color:var(--color-background-secondary)!important}.bg-blue{background-color:var(--color-fill-accent1)!important}.bg-blue,.bg-green{color:#000!important}.bg-green{background-color:var(--color-fill-accent2)!important}.bg-pink{background-color:var(--color-fill-accent3)!important}.bg-pink,.bg-violet{color:#000!important}.bg-violet{background-color:var(--color-fill-accent4)!important}.bg-yellow{background-color:var(--color-fill-accent5)!important;color:#000!important}.bg-yellow-lighter{background-color:#fff6b6!important;color:#000!important}.bg-red{background-color:#ff4d4d!important;color:#000!important}.bg-accent{background-color:var(--color-background-accent)!important}.bg-accent,.bg-accent1-blog{color:var(--color-text-default)!important}.bg-accent1-blog{background-color:var(--color-background-accent1-blog)!important}.bg-accent2-blog{background-color:var(--color-background-accent2-blog)!important;color:var(--color-text-default)!important}.bg-orange-dark::selection,.bg-orange::selection,.surface-secondary::selection,.surface-tertiary::selection{background-color:var(--color-background-contrast);color:var(--color-text-inverse)}.color-gray::selection{color:var(--color-text-default)}.background-none,.bg-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)}}
 /*# sourceMappingURL=utilities.css.map */

package/build/lib/utilities.css.map

@@ -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,aACE,oBACF,CACA,cACE,wCACF,CACA,YACE,oBACF,CACA,aACE,oBACF,CACA,YACE,6CACF,CACA,cACE,0CACF,CACA,UACE,+BAAoC,CACpC,+BACF,CACA,2CACE,6CACF,CACA,UACE,kCAAoC,CACpC,+BACF,CACA,2CACE,oBACF,CACA,2CACE,uBACF,CACA,WACE,yDAA2D,CAC3D,oBACF,CACA,gBACE,wDAA0D,CAC1D,yCACF,CACA,SACE,sDACF,CACA,iBACE,4DACF,CACA,SACE,oDAEF,CACA,mBAFE,oBAKF,CAHA,UACE,oDAEF,CACA,SACE,oDAEF,CACA,oBAFE,oBAKF,CAHA,WACE,oDAEF,CACA,WACE,oDAAsD,CACtD,oBACF,CACA,mBACE,kCAAoC,CACpC,oBACF,CACA,QACE,kCAAoC,CACpC,oBACF,CACA,WACE,yDAEF,CACA,4BAFE,yCAKF,CAHA,iBACE,+DAEF,CACA,iBACE,+DAAiE,CACjE,yCACF,CACA,4GAIE,iDAAkD,CAClD,+BACF,CACA,uBACE,+BACF,CAIA,0BACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCAAqC,CACrC,oCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CA1CF,CAIA,iBAuCE,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,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,+FAEE,8CAA+C,CAC/C,kBACF,CACA,+FAGE,2CAA4C,CAC5C,kBAAmB,CAFnB,SAGF,CACA,gbAKE,sDACF,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,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  .color-black {\n    color: #000000 !important;\n  }\n  .color-orange {\n    color: var(--color-text-accent) !important;\n  }\n  .color-gray {\n    color: #666666 !important;\n  }\n  .color-white {\n    color: #ffffff !important;\n  }\n  .color-blue {\n    color: var(--color-icon-information) !important;\n  }\n  .color-danger {\n    color: var(--color-icon-negative) !important;\n  }\n  .bg-white {\n    background-color: #ffffff !important;\n    color: var(--color-text-default);\n  }\n  .bg-white .color-blue, .bg-white.color-blue {\n    color: var(--color-icon-information) !important;\n  }\n  .bg-black {\n    background-color: #141414 !important;\n    color: var(--color-text-inverse);\n  }\n  .bg-black .color-gray, .bg-black.color-gray {\n    color: #dddddd !important;\n  }\n  .bg-black .color-blue, .bg-black.color-blue {\n    color: #4bb4e6 !important;\n  }\n  .bg-orange {\n    background-color: var(--color-surface-secondary) !important;\n    color: #000000 !important;\n  }\n  .bg-orange-dark {\n    background-color: var(--color-surface-tertiary) !important;\n    color: var(--color-text-inverse) !important;\n  }\n  .bg-gray {\n    background-color: var(--color-surface-subtle) !important;\n  }\n  .bg-gray-lighter {\n    background-color: var(--color-background-secondary) !important;\n  }\n  .bg-blue {\n    background-color: var(--color-fill-accent1) !important;\n    color: #000000 !important;\n  }\n  .bg-green {\n    background-color: var(--color-fill-accent2) !important;\n    color: #000000 !important;\n  }\n  .bg-pink {\n    background-color: var(--color-fill-accent3) !important;\n    color: #000000 !important;\n  }\n  .bg-violet {\n    background-color: var(--color-fill-accent4) !important;\n    color: #000000 !important;\n  }\n  .bg-yellow {\n    background-color: var(--color-fill-accent5) !important;\n    color: #000000 !important;\n  }\n  .bg-yellow-lighter {\n    background-color: #fff6b6 !important;\n    color: #000000 !important;\n  }\n  .bg-red {\n    background-color: #ff4d4d !important;\n    color: #000000 !important;\n  }\n  .bg-accent {\n    background-color: var(--color-background-accent) !important;\n    color: var(--color-text-default) !important;\n  }\n  .bg-accent1-blog {\n    background-color: var(--color-background-accent1-blog) !important;\n    color: var(--color-text-default) !important;\n  }\n  .bg-accent2-blog {\n    background-color: var(--color-background-accent2-blog) !important;\n    color: var(--color-text-default) !important;\n  }\n  .bg-orange::selection,\n  .bg-orange-dark::selection,\n  .surface-secondary::selection,\n  .surface-tertiary::selection {\n    background-color: var(--color-background-contrast);\n    color: var(--color-text-inverse);\n  }\n  .color-gray::selection {\n    color: var(--color-text-default);\n  }\n  .bg-none {\n    background: none !important;\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    text-underline-offset: 0.1em !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.375rem;\n      appearance: none;\n      background-color: var(--color-surface-moderate);\n      border-radius: 99px;\n    }\n    [class*=horizontal-scroll]::-webkit-scrollbar-track,\n    .table-scrollable::-webkit-scrollbar-track {\n      background-color: var(--color-surface-moderate);\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    }\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      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}"]}
+{"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,aACE,oBACF,CACA,cACE,wCACF,CACA,YACE,oBACF,CACA,aACE,oBACF,CACA,YACE,6CACF,CACA,cACE,0CACF,CACA,UACE,+BAAoC,CACpC,+BACF,CACA,2CACE,6CACF,CACA,UACE,kCAAoC,CACpC,+BACF,CACA,2CACE,oBACF,CACA,2CACE,uBACF,CACA,WACE,yDAA2D,CAC3D,oBACF,CACA,gBACE,wDAA0D,CAC1D,yCACF,CACA,SACE,sDACF,CACA,iBACE,4DACF,CACA,SACE,oDAEF,CACA,mBAFE,oBAKF,CAHA,UACE,oDAEF,CACA,SACE,oDAEF,CACA,oBAFE,oBAKF,CAHA,WACE,oDAEF,CACA,WACE,oDAAsD,CACtD,oBACF,CACA,mBACE,kCAAoC,CACpC,oBACF,CACA,QACE,kCAAoC,CACpC,oBACF,CACA,WACE,yDAEF,CACA,4BAFE,yCAKF,CAHA,iBACE,+DAEF,CACA,iBACE,+DAAiE,CACjE,yCACF,CACA,4GAIE,iDAAkD,CAClD,+BACF,CACA,uBACE,+BACF,CAIA,0BACE,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  .color-black {\n    color: #000000 !important;\n  }\n  .color-orange {\n    color: var(--color-text-accent) !important;\n  }\n  .color-gray {\n    color: #666666 !important;\n  }\n  .color-white {\n    color: #ffffff !important;\n  }\n  .color-blue {\n    color: var(--color-icon-information) !important;\n  }\n  .color-danger {\n    color: var(--color-icon-negative) !important;\n  }\n  .bg-white {\n    background-color: #ffffff !important;\n    color: var(--color-text-default);\n  }\n  .bg-white .color-blue, .bg-white.color-blue {\n    color: var(--color-icon-information) !important;\n  }\n  .bg-black {\n    background-color: #141414 !important;\n    color: var(--color-text-inverse);\n  }\n  .bg-black .color-gray, .bg-black.color-gray {\n    color: #dddddd !important;\n  }\n  .bg-black .color-blue, .bg-black.color-blue {\n    color: #4bb4e6 !important;\n  }\n  .bg-orange {\n    background-color: var(--color-surface-secondary) !important;\n    color: #000000 !important;\n  }\n  .bg-orange-dark {\n    background-color: var(--color-surface-tertiary) !important;\n    color: var(--color-text-inverse) !important;\n  }\n  .bg-gray {\n    background-color: var(--color-surface-subtle) !important;\n  }\n  .bg-gray-lighter {\n    background-color: var(--color-background-secondary) !important;\n  }\n  .bg-blue {\n    background-color: var(--color-fill-accent1) !important;\n    color: #000000 !important;\n  }\n  .bg-green {\n    background-color: var(--color-fill-accent2) !important;\n    color: #000000 !important;\n  }\n  .bg-pink {\n    background-color: var(--color-fill-accent3) !important;\n    color: #000000 !important;\n  }\n  .bg-violet {\n    background-color: var(--color-fill-accent4) !important;\n    color: #000000 !important;\n  }\n  .bg-yellow {\n    background-color: var(--color-fill-accent5) !important;\n    color: #000000 !important;\n  }\n  .bg-yellow-lighter {\n    background-color: #fff6b6 !important;\n    color: #000000 !important;\n  }\n  .bg-red {\n    background-color: #ff4d4d !important;\n    color: #000000 !important;\n  }\n  .bg-accent {\n    background-color: var(--color-background-accent) !important;\n    color: var(--color-text-default) !important;\n  }\n  .bg-accent1-blog {\n    background-color: var(--color-background-accent1-blog) !important;\n    color: var(--color-text-default) !important;\n  }\n  .bg-accent2-blog {\n    background-color: var(--color-background-accent2-blog) !important;\n    color: var(--color-text-default) !important;\n  }\n  .bg-orange::selection,\n  .bg-orange-dark::selection,\n  .surface-secondary::selection,\n  .surface-tertiary::selection {\n    background-color: var(--color-background-contrast);\n    color: var(--color-text-inverse);\n  }\n  .color-gray::selection {\n    color: var(--color-text-default);\n  }\n  .bg-none {\n    background: none !important;\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}"]}

package/build/search-index.json

@@ -33,7 +33,7 @@
   },
   {
     "href": "/components/breadcrumbs",
-    "content": "export const breadcrumbsItems = [ { text: \"Home\", url: \"/styleguide\", }, { text: \"Components\", url: \"/components\", }, { text: \"Breadcrumbs\", url: \"#main\", }, ]; Breadcrumbs Help users understand where they are within a website's structure and move between levels. ✅ <p> {Use the breadcrumbs component on every page, where you need to help users understand and move between the multiple levels of a website. That means virtually every page except the homepage and checkout.} </p> <p>Include the current page to indicate current location.</p> ❌ <p> {Don't use the breadcrumbs to show progress through a linear journey or transaction.} </p> Higlighting current page to screen readers If your application implements HTML5 landmarks (it should if possible), breadcrumbs should not be a part of the main region, current page hyperlink should point to the main region and be identified with aria-current=\"page\" attribute. Otherwise, current page should not be a hyperlink and the aria-current=\"page\" is applied to its wrapping <li />. Current page item as hyperlink Current page item without hyperlink Accessibility The breadcrumb component is built according to WAI-ARIA authoring practices 1.1. API React Props | Prop | Type | Default | Description | | ----------- | ---------------------------------- | ------- | --------------------------------------- | | items | { text: string, url?: string }[] | - | Required. Array of breadcrumb items | | label | string | - | Navigation label for accessibility | | className | string | - | Additional CSS classes | Notes - On small screens, breadcrumbs collapse and show only the parent page of the current location to provide a simple back button. - This component can be used as a separate package. The only asset required for proper use is a stylesheet, located in lib/breadcrumbs.css."
+    "content": "export const breadcrumbsItems = [ { text: \"Domov\", url: \"#\", }, { text: \"Produkty a služby\", url: \"#\", }, { text: \"Vyskladajte si benefity v Love podľa seba\", url: \"#\", }, { text: \"Benefity Love na jednom mieste\", }, ]; Breadcrumbs Help users understand where they are within a website's structure and move between levels. ✅ <p> {Use the breadcrumbs component on every page, where you need to help users understand and move between the multiple levels of a website. That means virtually every page except the homepage and checkout.} </p> <p>Include the current page to indicate current location.</p> ❌ <p> {Don't use the breadcrumbs to show progress through a linear journey or transaction.} </p> Higlighting current page to screen readers If your application implements HTML5 landmarks (it should if possible), breadcrumbs should not be a part of the main region, current page hyperlink should point to the main region and be identified with aria-current=\"page\" attribute. Otherwise, current page should not be a hyperlink and the aria-current=\"page\" is applied to its wrapping <li />. Current page item as hyperlink Current page item without hyperlink Accessibility The breadcrumb component is built according to WAI-ARIA authoring practices 1.1. API React Props | Prop | Type | Default | Description | | ----------- | ---------------------------------- | ------- | --------------------------------------- | | items | { text: string, url?: string }[] | - | Required. Array of breadcrumb items | | label | string | - | Navigation label for accessibility | | className | string | - | Additional CSS classes | Notes - On small screens, breadcrumbs collapse and show only the parent page of the current location to provide a simple back button. - This component can be used as a separate package. The only asset required for proper use is a stylesheet, located in lib/breadcrumbs.css."
   },
   {
     "href": "/components/button",
@@ -53,7 +53,7 @@
   },
   {
     "href": "/components/carousel-hero",
-    "content": "import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; import phones from \"@/assets/images/developers/phones.png\"; import twoPhones from \"@/assets/images/developers/two-phones.png\"; import handsWithPhones from \"@/assets/images/developers/hands-with-phones.svg\"; import router from \"@/assets/images/developers/router.png\"; export const SlideExample = ({ title = \"Samsung Galaxy Z Fold6 a Z Flip6 prichádzajú\", image = \"https://placehold.co/720x560\", ...props }) => ( <h1 className=\"h1 mb-medium mt-0\">{title}</h1> <p>Apple iPhone 16 Pro už v predaji v našom e-shope.</p> Objednať ); export const heroSlides = [ , , , , , ]; export const heroTabs = [ { label: \"Motorola Edge 50 Fusion\" }, { label: \"3 mesiace zadarmo\" }, { label: \"Nekonečné dáta\" }, { label: \"iPhone16 Pro\" }, { label: \"HONOR 200\" }, ]; export const simpleTabs = [ { label: \"Úvod\" }, { label: \"Produkty\" }, { label: \"Kontakt\" }, ]; export const simpleSlides = heroSlides.slice(0, 3); export const SlideExampleWithImage = ({ title, imageSrc, ...props }) => ( <h2 className=\"bold\">{title}</h2> <p>Objavte najnovšie technológie a inovácie.</p> Viac informácií ); export const heroSlidesWithImages = [ , , , ]; export const imageHeroTabs = [ { label: \"Najnovšie smartfóny\" }, { label: \"Dva telefóny v jednom\" }, { label: \"Revolúcia v rukách\" }, ]; Carousel Hero Hero carousel component with tab navigation and play/pause controls for featured content sections. {heroSlides} Without autoplay By omitting the interval prop or setting it to 0, autoplay is disabled and the play/pause button is hidden. {simpleSlides} Custom options Carousel default configuration can be overridden using swiperOptions prop. The prop accepts a Swiper.js options object. {simpleSlides} JS module reference All elements with data-carousel-hero are initialized on window.DOMContentLoaded event. Custom initialization example: With autoplay: Instance methods API React Props CarouselHero | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | ---------------------------------------------------------------------------------------- | | tabs | { label: string }[] | [] | Array of tab objects with label property for navigation | | interval | number | - | Autoplay interval in milliseconds. Omit or set to 0 to disable | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Carousel slide items (CarouselHeroItem components) | CarouselHeroItem | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------------------------ | | image | string | - | Required. Image URL for the slide background | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Slide content (text, buttons, etc.) | Notes Accessibility features - Each slide has proper ARIA labels and role descriptions - Tab navigation follows keyboard interaction patterns - Play/pause controls have clear labels and state indicators - Autoplay respects user interaction and pauses appropriately"
+    "content": "import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; import phones from \"@/assets/images/developers/phones.png\"; import twoPhones from \"@/assets/images/developers/two-phones.png\"; import handsWithPhones from \"@/assets/images/developers/hands-with-phones.svg\"; import router from \"@/assets/images/developers/router.png\"; export const SlideExample = ({ title = \"Samsung Galaxy Z Fold6 a Z Flip6 prichádzajú\", image = \"https://placehold.co/720x560\", ...props }) => ( <h1 className=\"h1 mb-medium mt-0\">{title}</h1> <p>Apple iPhone 16 Pro už v predaji v našom e-shope.</p> Objednať ); export const heroSlides = [ , , , , , ]; export const heroTabs = [ { label: \"Motorola Edge 50 Fusion\" }, { label: \"3 mesiace zadarmo\" }, { label: \"Nekonečné dáta\" }, { label: \"iPhone16 Pro\" }, { label: \"HONOR 200\" }, ]; export const simpleTabs = [ { label: \"Úvod\" }, { label: \"Produkty\" }, { label: \"Kontakt\" }, ]; export const simpleSlides = heroSlides.slice(0, 3); export const SlideExampleWithImage = ({ title, imageSrc, ...props }) => ( <h2 className=\"bold\">{title}</h2> <p>Objavte najnovšie technológie a inovácie.</p> Viac informácií ); export const heroSlidesWithImages = [ , , , ]; export const imageHeroTabs = [ { label: \"Najnovšie smartfóny\" }, { label: \"Dva telefóny v jednom\" }, { label: \"Revolúcia v rukách\" }, ]; Carousel Hero Hero carousel component with tab navigation and play/pause controls for featured content sections. {heroSlides} Without autoplay Autoplay is off by default and the play/pause button is hidden. {simpleSlides} With autoplay To enable autoplay, set enableAutoplay and provide either interval or swiperOptions.autoplay. {heroSlides} Custom options Carousel default configuration can be overridden using swiperOptions prop. The prop accepts a Swiper.js options object. {simpleSlides} JS module reference All elements with data-carousel-hero are initialized on window.DOMContentLoaded event. Custom initialization example: With autoplay: Instance methods API React Props CarouselHero | Prop | Type | Default | Description | | ---------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------ | | tabs | { label: string }[] | [] | Array of tab objects with label property for navigation | | enableAutoplay | boolean | false | Enables autoplay support and shows the play/pause button when valid autoplay config exists | | interval | number | - | Autoplay interval in milliseconds. Requires enableAutoplay; omit or set to 0 to disable | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Required. Carousel slide items (CarouselHeroItem components) | CarouselHeroItem | Prop | Type | Default | Description | | ----------- | ----------------- | ------- | ------------------------------------------------ | | image | string | - | Required. Image URL for the slide background | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Slide content (text, buttons, etc.) | Notes Accessibility features - Each slide has proper ARIA labels and role descriptions - Tab navigation follows keyboard interaction patterns - Play/pause controls have clear labels and state indicators - Autoplay respects user interaction and pauses appropriately"
   },
   {
     "href": "/components/carousel-promotions",
@@ -125,7 +125,7 @@
   },
   {
     "href": "/components/forms/field",
-    "content": "import ToggleCheckbox from \"@/docs/utils/ToggleCheckbox\"; Field Scaffolding for Controls and Captions Required minimum TextInput Radio Checkbox File Select Range DatePicker Group ipsum</span>, Ok , ], }} label=\"Field label\" /> Hint, Tooltip and Messages TextInput Error state Warning state Success state Radio Checkbox Checkbox Toggle File Select Range DatePicker Group Warning ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" messages={[{ type: \"error\", text: \"Error message\" }]} tooltip=\"Field tooltip with further explanation\" /> Warning ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" messages={[{ type: \"warning\", text: \"Warning message\" }]} tooltip=\"Field tooltip with further explanation\" /> Success ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" tooltip=\"Field tooltip with further explanation\" /> Stepper Fill parent Because Checkbox/Radio input styling, we are not able to fill the parent using .block-actioncontrol. We can do this using className .radiocheck--fill, thanks to which Checkbox fill whole space of parent element with set position. In this case position: relative of .card prevents element from further expanding. Disadvantage is that we can't have another interactive element inside of this card. <div className=\"card border border--gray\" id=\"checkbox-no-fill-border\"> <div className=\"cardsection\"> <div className=\"form-field form-field--radiocheck\"> <div className=\"form-fieldcontrol\"> <input type=\"checkbox\" className=\"checkbox block-actioncontrol\" id=\"checkbox-no-fill\" name=\"checkbox-no-fill\" ></input> <div className=\"checkbox-display\"></div> </div> <div className=\"form-fielddescription\"> <label htmlFor=\"checkbox-no-fill\" className=\"label form-fieldlabel\" id=\"checkbox-no-fill-label\" > Whole element is not clickable </label> </div> </div> </div> </div> <div className=\"card border border--gray border-hover\" id=\"checkbox-border\"> <div className=\"cardsection\"> <div className=\"form-field form-field--radiocheck\"> <div className=\"form-fieldcontrol\"> <div className=\"checkbox-display\"></div> </div> <div className=\"form-fielddescription\"> <label htmlFor=\"checkbox-fill\" className=\"label form-fieldlabel\" id=\"checkbox-fill-label\" > Whole element is clickable </label> </div> </div> </div> </div> API React Props | Name | Type | Default | Description | | ------------ | --------------------------------------- | ------------ | ------------------------------------------------------------- | | className | string | - | Additional CSS classes. | | control | FieldContextType[\"control\"] | required | Control element configuration with type, props, etc. | | hint | React.ReactNode | - | Hint text displayed below the label. | | label | React.ReactNode | - | Field label. | | labelAfter | React.ReactNode | - | Content displayed after the label (e.g., optional indicator). | | messages | Array<{ type: string; text: string }> | [] | Validation or info messages. | | tooltip | React.ReactNode | - | Tooltip content for additional information. |"
+    "content": "import ToggleCheckbox from \"@/docs/utils/ToggleCheckbox\"; Field Scaffolding for Controls and Captions Required minimum TextInput Radio Checkbox File Select Range DatePicker InputStepper Group ipsum</span>, Ok , ], }} label=\"Field label\" /> Hint, Tooltip and Messages TextInput Error state Warning state Success state Radio Checkbox Checkbox Toggle File Select Range DatePicker InputStepper Group Warning ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" messages={[{ type: \"error\", text: \"Error message\" }]} tooltip=\"Field tooltip with further explanation\" /> Warning ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" messages={[{ type: \"warning\", text: \"Warning message\" }]} tooltip=\"Field tooltip with further explanation\" /> Success ipsum</span>, Ok , ], }} label=\"Field label\" hint=\"Field instructions\" tooltip=\"Field tooltip with further explanation\" /> Fill parent Because Checkbox/Radio input styling, we are not able to fill the parent using .block-actioncontrol. We can do this using className .radiocheck--fill, thanks to which Checkbox fill whole space of parent element with set position. In this case position: relative of .card prevents element from further expanding. Disadvantage is that we can't have another interactive element inside of this card. <div className=\"card border border--gray\" id=\"checkbox-no-fill-border\"> <div className=\"cardsection\"> <div className=\"form-field form-field--radiocheck\"> <div className=\"form-fieldcontrol\"> <input type=\"checkbox\" className=\"checkbox block-actioncontrol\" id=\"checkbox-no-fill\" name=\"checkbox-no-fill\" ></input> <div className=\"checkbox-display\"></div> </div> <div className=\"form-fielddescription\"> <label htmlFor=\"checkbox-no-fill\" className=\"label form-fieldlabel\" id=\"checkbox-no-fill-label\" > Whole element is not clickable </label> </div> </div> </div> </div> <div className=\"card border border--gray border-hover\" id=\"checkbox-border\"> <div className=\"cardsection\"> <div className=\"form-field form-field--radiocheck\"> <div className=\"form-fieldcontrol\"> <div className=\"checkbox-display\"></div> </div> <div className=\"form-fielddescription\"> <label htmlFor=\"checkbox-fill\" className=\"label form-fieldlabel\" id=\"checkbox-fill-label\" > Whole element is clickable </label> </div> </div> </div> </div> API React Props | Name | Type | Default | Description | | ------------ | --------------------------------------- | ------------ | ------------------------------------------------------------- | | className | string | - | Additional CSS classes. | | control | FieldContextType[\"control\"] | required | Control element configuration with type, props, etc. | | hint | React.ReactNode | - | Hint text displayed below the label. | | label | React.ReactNode | - | Field label. | | labelAfter | React.ReactNode | - | Content displayed after the label (e.g., optional indicator). | | messages | Array<{ type: string; text: string }> | [] | Validation or info messages. | | tooltip | React.ReactNode | - | Tooltip content for additional information. |"
   },
   {
     "href": "/components/forms/fieldset",
@@ -137,7 +137,7 @@
   },
   {
     "href": "/components/forms/inputstepper",
-    "content": "InputStepper Field Layout If you want different layout use Bar component. <div className=\"form-field\"> <label htmlFor=\"id-2\" className=\"label form-fieldlabel\" id=\"id-2-label\" > {\"Field label\"} </label> &nbsp; Field tooltip with further explanation <p className=\"hint form-fieldhint\" id=\"id-2-hint\"> {\"Field instructions\"} </p> <p className=\"message\" id=\"id-2-message-0\"> {\"Info message\"} </p> </div> InputStepper config By default minimum value is 1, maximum value is 999 and defaultValue is 1. You can override these values by passing JSON string to data-inputstepper. InputStepper disabled Outside of disabled attributes on input and buttons, dont forget to add className input-stepper--disabled to <div/> wrapper, otherwise disabled attributes will be removed during component initialization. InputStepper with non editable input When nonEditableInput config is used, input is replaced only with text number and user cannot change it by typing. JS Module Reference All elements with [data-inputstepper] will be initialised automatically on DOMContentLoaded event. Config The module is configured either by passing a JSON string representing a config object through [data-inputstepper] attribute or during manual initialisation. Default config Manual initialisation Methods - init() - handles initialization - destroy() - destroys the instance - update() - destroys and initializes the instance again API React Props | Name | Type | Default | Description | | ------------------ | -------------------- | ------------ | ----------------------------------------------------------------------- | | config | InputStepperConfig | - | Configuration object with min, max, defaultValue, and nonEditableInput. | | id | string | required | Input ID attribute. | | inputClassName | string | - | Additional CSS classes for the input element. | | isDisabled | boolean | false | Disabled state. | | name | string | - | Input name attribute. | | nonEditableInput | boolean | false | Whether the input is non-editable (display only). | | className | string | - | Additional CSS classes for the wrapper. | JS module reference Default Config | Property | Type | Default | Description | | ------------------ | --------- | ------- | ---------------------------------- | | nonEditableInput | boolean | false | Whether the input is non-editable. | | min | number | 1 | Minimum value allowed. | | max | number | 999 | Maximum value allowed. | | defaultValue | number | 1 | Initial/default value. | Methods | Method | Description | | ----------------- | ------------------------------------------------------------------ | | destroy() | Removes event listeners and cleans up the input stepper instance. | | update() | Re-initializes the input stepper with current configuration. | | getInstance(el) | Static method to get the InputStepper instance from a DOM element. |"
+    "content": "InputStepper Field Layout If you want different layout use Bar component. <div className=\"form-field\"> <label htmlFor=\"id-2\" className=\"label form-fieldlabel\" id=\"id-2-label\" > {\"Field label\"} </label> &nbsp; Field tooltip with further explanation <p className=\"hint form-fieldhint\" id=\"id-2-hint\"> {\"Field instructions\"} </p> <p className=\"message\" id=\"id-2-message-0\"> {\"Info message\"} </p> </div> InputStepper config By default minimum value is 1, maximum value is 999 and defaultValue is 1. You can override these values by passing JSON string to data-inputstepper. InputStepper disabled Outside of disabled attributes on input and buttons, dont forget to add className input-stepper--disabled to <div/> wrapper, otherwise disabled attributes will be removed during component initialization. InputStepper invalid Field did no pass validation. Must be accompanied by a meaningfull Error message. InputStepper Field error state InputStepper with non editable input When nonEditableInput config is used, input is replaced only with text number and user cannot change it by typing. JS Module Reference All elements with [data-inputstepper] will be initialised automatically on DOMContentLoaded event. Config The module is configured either by passing a JSON string representing a config object through [data-inputstepper] attribute or during manual initialisation. Default config Manual initialisation Methods - init() - handles initialization - destroy() - destroys the instance - update() - destroys and initializes the instance again API React Props | Name | Type | Default | Description | | ------------------ | -------------------- | ------------ | ----------------------------------------------------------------------- | | config | InputStepperConfig | - | Configuration object with min, max, defaultValue, and nonEditableInput. | | id | string | required | Input ID attribute. | | inputClassName | string | - | Additional CSS classes for the input element. | | isDisabled | boolean | false | Disabled state. | | name | string | - | Input name attribute. | | nonEditableInput | boolean | false | Whether the input is non-editable (display only). | | className | string | - | Additional CSS classes for the wrapper. | JS module reference Default Config | Property | Type | Default | Description | | ------------------ | --------- | ------- | ---------------------------------- | | nonEditableInput | boolean | false | Whether the input is non-editable. | | min | number | 1 | Minimum value allowed. | | max | number | 999 | Maximum value allowed. | | defaultValue | number | 1 | Initial/default value. | Methods | Method | Description | | ----------------- | ------------------------------------------------------------------ | | destroy() | Removes event listeners and cleans up the input stepper instance. | | update() | Re-initializes the input stepper with current configuration. | | getInstance(el) | Static method to get the InputStepper instance from a DOM element. |"
   },
   {
     "href": "/components/forms/radio",
@@ -257,7 +257,7 @@
   },
   {
     "href": "/components/tabs",
-    "content": "import React from \"react\"; Tabs Navigate sections of content in a tabbed interface. ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Tabs - links Tabs can be also use as group of links. {[1, 2, 3, 4].map((item) => ( ))} Light tabs ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Full width container ... ... ... ... ... ... ... ... </> } > {[\"standard\", \"light\"].map((tab) => ( {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} ))} Equal width tabs ... ... ... ... ... ... ... ... </> } > {[\"standard\", \"light\"].map((tab) => ( {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} ))} Custom tab content Only use inline elements as children of the tab titles. The tabs are <button> elements which do not allow using block elements inside themselves. <span className=\"h3 mb-xsmall\">Large tab 1</span> description </React.Fragment> } > <p>{loremIpsum({ count: 5 })}</p> <span className=\"h3 mb-xsmall\">Large tab 2</span> description </React.Fragment> } > <p>{loremIpsum({ count: 5 })}</p> Accessibility Tabs are implemented according to WAI-ARIA authoring practices - Example 2 Tabs with manual activation Notes: - Optional keyboard interaction (Home, End, Shift + 10, Delete) is not implemented. - Tabpanel elements lack aria-labelledby attributes due to a bug in VoiceOver, which reads the label instead of the content of the tabpanel. API React Props | Name | Type | Default | Description | | ------------------ | ------------------------------------- | ------------ | -------------------------------------------------------- | | activeTabIndex | number | 0 | Active Tab index. | | classesTabNav | string | - | Additional classes for tabs header. | | hasEqualTabWidth | boolean | false | All tabs have equal width inside a full-width container. | | isFullWidth | boolean | false | Full-width container. | | isLink | boolean | false | Tabs behave as links rather than tabs. | | variant | \"standard\" \\| \"light\" | \"standard\" | Visual variant of the tabs. | | children | React.ReactElement[] | required | Tab panels as children. | JS module reference Default Config | Property | Type | Default | Description | | ------------- | -------- | ---------------- | --------------------- | | tabSelector | string | '[role=\"tab\"]' | Tab element selector. | Methods | Method | Description | | ----------------------- | ---------------------------------------------------------- | | destroy() | Removes event listeners and cleans up the tabs instance. | | update() | Re-initializes the tabs with current configuration. | | activateNthTab(index) | Activates the tab at the specified index. | | getInstance(el) | Static method to get the Tabs instance from a DOM element. |"
+    "content": "import React from \"react\"; Tabs Navigate sections of content in a tabbed interface. ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Tabs - links Tabs can be also use as group of links. {[1, 2, 3, 4].map((item) => ( ))} Full width container ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Equal width tabs ... ... ... ... } > {[1, 2, 3, 4].map((item) => ( <p>{loremIpsum({ count: 3 })}</p> ))} Custom tab content Only use inline elements as children of the tab titles. The tabs are <button> elements which do not allow using block elements inside themselves. <span className=\"h3 mb-xsmall\">Large tab 1</span> description </React.Fragment> } > <p>{loremIpsum({ count: 5 })}</p> <span className=\"h3 mb-xsmall\">Large tab 2</span> description </React.Fragment> } > <p>{loremIpsum({ count: 5 })}</p> Accessibility Tabs are implemented according to WAI-ARIA authoring practices - Example 2 Tabs with manual activation Notes: - Optional keyboard interaction (Home, End, Shift + 10, Delete) is not implemented. - Tabpanel elements lack aria-labelledby attributes due to a bug in VoiceOver, which reads the label instead of the content of the tabpanel. API React Props | Name | Type | Default | Description | | ------------------ | ------------------------------------- | ------------ | -------------------------------------------------------- | | activeTabIndex | number | 0 | Active Tab index. | | classesTabNav | string | - | Additional classes for tabs header. | | hasEqualTabWidth | boolean | false | All tabs have equal width inside a full-width container. | | isFullWidth | boolean | false | Full-width container. | | isLink | boolean | false | Tabs behave as links rather than tabs. | | children | React.ReactElement[] | required | Tab panels as children. | JS module reference Default Config | Property | Type | Default | Description | | ------------- | -------- | ---------------- | --------------------- | | tabSelector | string | '[role=\"tab\"]' | Tab element selector. | Methods | Method | Description | | ----------------------- | ---------------------------------------------------------- | | destroy() | Removes event listeners and cleans up the tabs instance. | | update() | Re-initializes the tabs with current configuration. | | activateNthTab(index) | Activates the tab at the specified index. | | getInstance(el) | Static method to get the Tabs instance from a DOM element. |"
   },
   {
     "href": "/components/tag",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.45",
+  "version": "2.0.0-beta.47",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -55,7 +55,7 @@
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.2.4",
+    "@next/mdx": "16.2.6",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.13",
@@ -63,31 +63,31 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.1",
-    "html-react-parser": "6.0.1",
-    "lorem-ipsum": "^2.0.8",
+    "dompurify": "^3.4.2",
+    "html-react-parser": "6.1.0",
+    "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.2.4",
+    "next": "16.2.6",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
     "query-string": "^9.3.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-element-to-jsx-string": "^17.0.1",
-    "react-is": "^19.2.5",
+    "react-is": "^19.2.6",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "12.1.3",
+    "swiper": "12.1.4",
     "tabbable": "^6.4.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@biomejs/biome": "latest",
@@ -99,12 +99,12 @@
     "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
-    "@rollup/rollup-darwin-arm64": "^4.60.2",
+    "@rollup/rollup-darwin-arm64": "^4.60.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.6.0",
+    "@types/node": "25.6.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
@@ -114,16 +114,16 @@
     "@vitest/coverage-v8": "^4.1.5",
     "@vitest/ui": "^4.1.5",
     "canvas": "^3.2.3",
-    "fs-extra": "^11.3.4",
+    "fs-extra": "^11.3.5",
     "glob": "13.0.6",
-    "html-validate": "10.13.1",
+    "html-validate": "10.16.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
-    "jsdom": "29.0.2",
-    "lint-staged": "16.4.0",
+    "jsdom": "29.1.1",
+    "lint-staged": "17.0.4",
     "playwright": "^1.59.1",
     "prettier": "^3.8.3",
-    "rollup": "^4.60.2",
+    "rollup": "^4.60.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-postcss": "^4.0.2",

package/src/components/Breadcrumbs/styles/mixins.scss

@@ -26,6 +26,7 @@
 @mixin container {
   @include container.base;
 
+  font-size: 0;
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -48,19 +49,27 @@
 
 @mixin item {
   display: inline;
+  font-size: base.$font-size !important;
+  line-height: inherit;
   color: var(--color-text-secondary);
   margin-bottom: 0;
 
-  &::before {
+  &:not(:last-child)::after {
     @include separator();
   }
 
-  &:first-child::before {
+  &::before {
     @include breakpoint.get("sm") {
       display: none;
     }
   }
 
+  &:nth-last-child(2)::after {
+    @include breakpoint.get("xs", "down") {
+      display: none;
+    }
+  }
+
   &:nth-last-child(2) {
     @include breakpoint.get("xs", "down") {
       display: inline-block;
@@ -71,6 +80,7 @@
 
   &:nth-last-child(2)::before {
     @include breakpoint.get("xs", "down") {
+      @include separator();
       transform: rotate(180deg);
       position: absolute;
       top: 50%;
@@ -90,7 +100,8 @@
 }
 
 @mixin item-dark {
-  &::before {
+  &::before,
+  &::after {
     @include separator-white();
   }
 }