@charset "utf-8";

:focus:not(:focus-visible) { outline: none; }

a:focus-visible, button:focus-visible, [role="button"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

a:focus-visible p { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.link:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.collapsible:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.expander__btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.expander__content:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.chunky-header:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.checkbox input[type="checkbox"]:focus-visible ~ .checkbox__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.checkbox input[type="checkbox"]:focus-visible:hover ~ .checkbox__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.radio input[type="radio"]:focus-visible ~ .radio__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.radio input[type="radio"]:focus-visible:hover ~ .radio__symbol { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.btn:focus-visible, .tabs__panel:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.btn[class*="inverse"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.btn[class*="image-overlay"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-white, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-black, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.pill:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.icon-pill:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.slider-handle:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.shoppable-image__category-link:focus-visible, .shoppable-image__dot:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.tabs__tab:focus-visible { box-shadow: none; outline: none; }

.tabs__tab:focus-visible::before { bottom: 2px; z-index: unset; }

.tabs__tab:focus-visible::after { content: ""; position: absolute; inset: 0px; display: block; box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); border-radius: 4px; }

.dual-btn--secondary .dual-btn__first:focus-visible, .dual-btn--secondary .dual-btn__second:focus-visible { box-shadow: 0 0 0 4px rgb(var(--colour-neutral-1, 255, 255, 255)),0 0 0 6px rgb(var(--colour-neutral-7, 17, 17, 17)); outline: none; transition-property: box-shadow; transition-duration: 0.2s; transition-timing-function: ease-out; }

.dual-btn__first:focus-visible:hover, .dual-btn__second:focus-visible:hover { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17)),0 0 0 4px rgb(var(--colour-neutral-1, 255, 255, 255)),0 0 0 6px rgb(var(--colour-neutral-7, 17, 17, 17)); }

.dual-btn--primary .dual-btn__first:focus-visible, .dual-btn--primary .dual-btn__second:focus-visible { box-shadow: 0 0 0 4px rgb(var(--colour-static-black, 17, 17, 17)),0 0 0 6px rgb(var(--colour-static-white, 255, 255, 255)); outline: none; transition-property: box-shadow; transition-duration: 0.2s; transition-timing-function: ease-out; }

.card:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.card:focus-visible .card__title { text-decoration: none; }

.card:focus-visible p { box-shadow: none; outline: none; }

.content-card .content-card__headers:focus-visible { box-shadow: none; outline: none; }

.content-card .content-card__headers:focus-visible::before { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.choice-item__radio:focus-visible, .choice-item__action:focus-visible { box-shadow: none; outline: none; }

.choice-item__radio:focus-visible ~ .choice-item__border::before, .choice-item__action:focus-visible ~ .choice-item__border::before { content: ""; position: absolute; inset: -0.125rem; box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; border-radius: 4px; }

.simple-video__button:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.jumbo-btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.jumbo-btn.jumbo-btn--inverse:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.accordion-item-header:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.link-list__item:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.switch input[type="checkbox"]:focus-visible + .switch__toggle::before { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.switch input[type="checkbox"]:focus-visible:hover + .switch__toggle::before { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.tooltip__trigger-button:focus-visible, .tooltip__custom-trigger-wrapper:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.search .search__scope:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; border-radius: 4px; }

.search .search__scope:focus-visible, .search .btn:focus-visible { box-shadow: 0 0 0 1px rgb(var(--colour-neutral-1, 255, 255, 255)); outline: 2px solid rgb(var(--colour-neutral-7, 17, 17, 17)); outline-offset: 1px; }

.search .search__input:focus-visible { outline: 0px; }

.search .search__input:-webkit-autofill:focus-visible { box-shadow: 0 0 0 3rem rgb(var(--colour-neutral-1, 255, 255, 255)) inset; transition: box-shadow cubic-bezier(0.4, 0, 0.4, 1); caret-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.toast .btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-7, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-1, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.action-list-item__action:focus-visible { outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; outline: none; box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); }

.overflow-carousel .btn[class*="inverse"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.modal-header .btn:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.list-view-item__action:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); }

.quantity-stepper__input:focus-visible { outline: none; }

button.avatar:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.rotera-modal-error { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; align-items: center; }

.rotera-modal-error svg { width: 5rem; height: 5rem; }

.rotera-modal-error .rotera-text { margin: 5rem 0px; }

.rotera-loading { flex-direction: column; flex-grow: 1; }

@keyframes modal-delayed-fade-in { 
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@media (min-width: 56.25em) {
  .rotera-sheets--small .rotera-modal-body { --skapa-modal-body-padding-inline: 2rem; }
  .rotera-theatre { border-radius: 8px; left: 3rem; width: calc(100% - 6rem); height: calc(100% - 6rem); }
}

@media (prefers-reduced-motion) {
  .rotera-modal-wrapper { transition: none; }
  .rotera-modal-wrapper__backdrop { animation-duration: 0s; transition: none; }
  .rotera-modal-wrapper .rotera-sheets.rotera-sheets--enter, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--close, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--preserve-alignment, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--mirrored, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--enter, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--close, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--enter .rotera-theatre__animation-group, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--close .rotera-theatre__animation-group { animation-duration: 0s; transition-duration: 0s; }
  .rotera-modal-wrapper .rotera-prompt--close { transition: none; }
  .rotera-modal-wrapper .rotera-prompt, .rotera-modal-wrapper .rotera-prompt--enter, .rotera-modal-wrapper .rotera-prompt--close, .rotera-modal-wrapper .rotera-prompt .rotera-prompt__content-wrapper, .rotera-modal-wrapper .rotera-prompt--enter .rotera-prompt__content-wrapper, .rotera-modal-wrapper .rotera-prompt--close .rotera-prompt__content-wrapper { animation-duration: 0s; transition-duration: 0s; }
}

@media (min-width: 37.5em) {
  .rotera-sheets.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideToLeft; }
  .rotera-sheets.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideToRight; }
  .rotera-sheets--mirrored.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideFromLeft; }
  .rotera-sheets--mirrored.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideFromRight; }
  [dir="rtl"] .rotera-sheets.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideFromLeft; }
  [dir="rtl"] .rotera-sheets.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideFromRight; }
  [dir="rtl"] .rotera-sheets--mirrored.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideToLeft; }
  [dir="rtl"] .rotera-sheets--mirrored.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideToRight; }
  .rotera-modal-body { --skapa-modal-body-padding-block: 2rem; --skapa-modal-body-padding-inline: 2rem; }
  .rotera-modal-header { padding: 0px 1rem; flex: 0 0 4.5rem; }
  .rotera-modal-header__close, .rotera-modal-header__back-button { margin-top: 1rem; margin-bottom: 1rem; }
  .rotera-modal-header--floating-header .rotera-modal-header__close, .rotera-modal-header--floating-header .rotera-modal-header__back-button { margin: 1.5rem 0px 0.5rem; }
}

@media (prefers-reduced-motion) {
  .rotera-modal-wrapper { transition: none; }
  .rotera-modal-wrapper__backdrop { animation-duration: 0s; transition: none; }
  .rotera-modal-wrapper .rotera-sheets.rotera-sheets--enter, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--close, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--preserve-alignment, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--mirrored { animation-duration: 0s; transition-duration: 0s; }
}

.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideUp; }

.rotera-sheets--preserve-alignment { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideToLeft; }

.rotera-sheets--preserve-alignment.rotera-sheets--mirrored { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideFromLeft; }

.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideDown; pointer-events: none; transition: visibility 0.1s cubic-bezier(0, 0, 1, 1); visibility: hidden; }

.rotera-sheets--close.rotera-sheets--preserve-alignment { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideToRight; }

.rotera-sheets--close.rotera-sheets--preserve-alignment.rotera-sheets--mirrored { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideFromRight; }

[dir="rtl"] .rotera-sheets--preserve-alignment { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideFromLeft; }

[dir="rtl"] .rotera-sheets--preserve-alignment.rotera-sheets--mirrored { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideToLeft; }

[dir="rtl"] .rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideDown; pointer-events: none; }

[dir="rtl"] .rotera-sheets--close.rotera-sheets--preserve-alignment { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideFromRight; }

[dir="rtl"] .rotera-sheets--close.rotera-sheets--preserve-alignment.rotera-sheets--mirrored { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideToRight; }

.rotera-sheets { position: absolute; top: auto; right: var(--modal-keyboard-focus-spacing, 0); bottom: 0px; width: calc(100% - var(--modal-keyboard-focus-width, 0%)); background: rgb(var(--colour-elevation-2, 255, 255, 255)); z-index: 100; overflow: hidden; border-radius: 8px 8px 0px 0px; max-height: calc(100% - 3rem); text-align: initial; display: flex; flex-direction: column; }

.rotera-sheets:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; --modal-keyboard-focus-spacing: .375rem; --modal-keyboard-focus-width: .75rem; }

.rotera-sheets__content { height: 100%; }

.rotera-sheets__content-wrapper { overflow: auto; height: 100%; position: relative; }

.rotera-sheets__content-wrapper:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17)); }

.rotera-sheets__video { z-index: 100; background: rgba(var(--colour-static-black, 17, 17, 17),.8); }

.rotera-sheets__video iframe { max-width: 100%; }

.rotera-sheets--preserve-alignment { width: 85%; top: var(--modal-keyboard-focus-spacing, 0); border-radius: 8px 0px 0px 8px; max-height: calc(100% - var(--modal-keyboard-focus-width, 0%)); }

.rotera-sheets--preserve-alignment.rotera-sheets--mirrored { right: auto; left: var(--modal-keyboard-focus-spacing, 0); border-radius: 0px 8px 8px 0px; }

.rotera-sheets--mobile-full-size { top: 3rem; }

.rotera-sheets .rotera-modal-footer { padding: 1.5rem 1rem; }

[dir="rtl"] .rotera-sheets--preserve-alignment { left: var(--modal-keyboard-focus-spacing, 0); right: auto; border-radius: 0px 8px 8px 0px; }

[dir="rtl"] .rotera-sheets--preserve-alignment.rotera-sheets--mirrored { right: var(--modal-keyboard-focus-spacing, 0); left: auto; border-radius: 8px 0px 0px 8px; }

@media (prefers-contrast: more) {
  .rotera-sheets { border: 1px solid rgb(var(--colour-elevation-1-border, 223, 223, 223)); border-block-end-width: 0px; }
}

@media (min-width: 37.5em) {
  .rotera-sheets { top: var(--modal-keyboard-focus-spacing, 0); border-radius: 8px 0px 0px 8px; width: calc(100% - 3rem); max-height: calc(100% - var(--modal-keyboard-focus-width, 0%)); }
  .rotera-sheets--mirrored { right: auto; left: var(--modal-keyboard-focus-spacing, 0); border-radius: 0px 8px 8px 0px; }
  .rotera-sheets--mirrored .rotera-modal-footer:not(.rotera-modal-footer--stacked) { flex-direction: row-reverse; }
  .rotera-sheets--mirrored .rotera-modal-footer:not(.rotera-modal-footer--stacked) .rotera-btn:not(:last-child) { margin: 0px; margin-inline-start: 1rem; }
  .rotera-sheets--small { max-width: 30rem; }
  .rotera-sheets--small .rotera-modal-body { --skapa-modal-body-padding-inline: 1.5rem; }
  .rotera-sheets--medium { max-width: 45rem; }
  .rotera-sheets--medium .rotera-modal-footer:not(.rotera-modal-footer--dual-action) .rotera-btn { width: auto; flex: initial; }
  .rotera-sheets--large { max-width: 67.5rem; }
  .rotera-sheets--medium .rotera-modal-footer--dual-action .rotera-btn:not(:last-child), .rotera-sheets--large .rotera-modal-footer--dual-action .rotera-btn:not(:last-child) { margin-inline-end: 1rem; }
  .rotera-sheets--large .rotera-modal-footer .rotera-btn { width: auto; flex: initial; }
  .rotera-sheets .rotera-modal-footer { padding: 1.5rem; }
  [dir="rtl"] .rotera-sheets { right: auto; left: var(--modal-keyboard-focus-spacing, 0); border-radius: 0px 8px 8px 0px; }
  [dir="rtl"] .rotera-sheets--mirrored { right: var(--modal-keyboard-focus-spacing, 0); left: auto; border-radius: 8px 0px 0px 8px; }
}

@media (min-width: 37.5em) and (prefers-contrast: more) {
  .rotera-sheets { border-block-end-width: 1px; border-inline-end-width: 0px; }
}

@media (min-width: 37.5em) {
  .rotera-sheets.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideToLeft; }
  .rotera-sheets.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideToRight; }
  .rotera-sheets--mirrored.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideFromLeft; }
  .rotera-sheets--mirrored.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideFromRight; }
  [dir="rtl"] .rotera-sheets.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideFromLeft; }
  [dir="rtl"] .rotera-sheets.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideFromRight; }
  [dir="rtl"] .rotera-sheets--mirrored.rotera-sheets--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalSlideToLeft; }
  [dir="rtl"] .rotera-sheets--mirrored.rotera-sheets--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalSlideToRight; }
  .rotera-modal-body { --skapa-modal-body-padding-block: 2rem; --skapa-modal-body-padding-inline: 2rem; }
  .rotera-modal-header { padding: 0px 1rem; flex: 0 0 4.5rem; }
  .rotera-modal-header__close, .rotera-modal-header__back-button { margin-top: 1rem; margin-bottom: 1rem; }
  .rotera-modal-header--floating-header .rotera-modal-header__close, .rotera-modal-header--floating-header .rotera-modal-header__back-button { margin: 1.5rem 0px 0.5rem; }
  .rotera-prompt__heading { font-size: 1.5rem; line-height: 1.45; letter-spacing: -0.0042em; }
  .rotera-prompt__content { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 1rem; line-height: 1.625; padding-bottom: 1rem; }
}

@media (min-width: 56.25em) {
  .rotera-sheets--small .rotera-modal-body { --skapa-modal-body-padding-inline: 2rem; }
}

@media (min-width: 75em) {
  .rotera-sheets .rotera-modal-body { --skapa-modal-body-padding-inline: 2.5rem; }
}

@media (prefers-reduced-motion) {
  .rotera-modal-wrapper { transition: none; }
  .rotera-modal-wrapper__backdrop { animation-duration: 0s; transition: none; }
  .rotera-modal-wrapper .rotera-sheets.rotera-sheets--enter, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--close, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--preserve-alignment, .rotera-modal-wrapper .rotera-sheets.rotera-sheets--mirrored { animation-duration: 0s; transition-duration: 0s; }
  .rotera-modal-wrapper .rotera-prompt--close { transition: none; }
  .rotera-modal-wrapper .rotera-prompt, .rotera-modal-wrapper .rotera-prompt--enter, .rotera-modal-wrapper .rotera-prompt--close, .rotera-modal-wrapper .rotera-prompt .rotera-prompt__content-wrapper, .rotera-modal-wrapper .rotera-prompt--enter .rotera-prompt__content-wrapper, .rotera-modal-wrapper .rotera-prompt--close .rotera-prompt__content-wrapper { animation-duration: 0s; transition-duration: 0s; }
}

@keyframes rotera-modalSlideToLeft { 
  0% { transform: translate(100%); }
  100% { transform: translate(0px); }
}

@keyframes rotera-modalSlideToRight { 
  0% { transform: translate(0px); }
  100% { transform: translate(100%); }
}

@keyframes rotera-modalSlideFromLeft { 
  0% { transform: translate(-100%); }
  100% { transform: translate(0px); }
}

@keyframes rotera-modalSlideFromRight { 
  0% { transform: translate(0px); }
  100% { transform: translate(-100%); }
}

@keyframes rotera-modalSlideDown { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(100%); }
}

@keyframes rotera-modalSlideUp { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0px); }
}

@keyframes rotera-modalEnter { 
  0% { clip-path: inset(50%); }
  100% { clip-path: inset(0%); }
}

@keyframes rotera-modalClose { 
  0% { clip-path: inset(0%); }
  100% { clip-path: inset(50%); }
}

@keyframes rotera-modalContentEnter { 
  0% { transform: scale(0.8); opacity: 0; transform-origin: center center; }
  100% { transform: scale(1); opacity: 1; transform-origin: center center; }
}

@keyframes rotera-modalContentClose { 
  0% { transform: scale(1); opacity: 1; transform-origin: center center; }
  100% { transform: scale(0.8); opacity: 0; transform-origin: center center; }
}

@keyframes rotera-modalBackdropEnter { 
  0% { visibility: hidden; }
  1% { visibility: visible; }
}

@keyframes rotera-modalBackdropClose { 
  0%, 99% { visibility: visible; }
  100% { visibility: hidden; }
}

.rotera-prevent-scroll-y { overflow: hidden; position: fixed; width: 100%; }

.rotera-modal-wrapper { position: fixed; inset: 0px; display: flex; justify-content: center; align-items: center; z-index: 400; pointer-events: none; transition: visibility 0.2s cubic-bezier(0, 0, 1, 1); color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); }

.rotera-modal-wrapper__backdrop { position: absolute; inset: 0px; opacity: 0; transition: opacity 0.2s cubic-bezier(0, 0, 1, 1); pointer-events: none; visibility: hidden; }

.rotera-modal-wrapper__backdrop--dark { background: rgba(var(--colour-static-black, 17, 17, 17),.4); }

.rotera-modal-wrapper--open { pointer-events: all; }

.rotera-modal-wrapper--open > .rotera-modal-wrapper__backdrop { opacity: 1; animation: 0.2s ease 0s 1 normal none running rotera-modalBackdropEnter; visibility: visible; pointer-events: all; }

.rotera-modal-wrapper--close > .rotera-modal-wrapper__backdrop { animation: 0.2s ease 0s 1 normal none running rotera-modalBackdropClose; }

.rotera-modal-wrapper .rotera-btn[data-autofocus]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.rotera-modal-footer { padding: 1.5rem; border-top: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223)); flex-grow: 1; flex-shrink: 0; display: flex; }

.rotera-modal-footer .rotera-btn { flex-grow: 1; width: 100%; flex-basis: auto; }

.rotera-modal-footer .rotera-btn:not(:last-child) { margin-inline-end: 0px; margin-block-end: 0.75rem; }

.rotera-modal-footer--dual-action { flex-direction: column; }

.rotera-modal-footer--borderless { border-top: none; }

@media (orientation: landscape), (min-width: 37.5em) {
  .rotera-modal-footer .rotera-btn:not(:last-child) { margin-block-end: 1rem; }
  .rotera-modal-footer--dual-action:not(.rotera-modal-footer--stacked) { flex-direction: row; }
  .rotera-modal-footer--dual-action:not(.rotera-modal-footer--stacked) .rotera-btn:not(:last-child) { margin-inline-end: 1rem; margin-block-end: 0px; }
}

.rotera-modal-header { box-sizing: border-box; top: 0px; display: flex; justify-content: space-between; flex-direction: row-reverse; padding: 0px 0.5rem; align-items: center; background-color: rgb(var(--colour-elevation-2, 255, 255, 255)); z-index: 100; flex: 0 0 3.5rem; }

.rotera-modal-header--floating-header { position: absolute; width: 100%; background-color: transparent; }

.rotera-modal-header--floating-header .rotera-modal-header__close, .rotera-modal-header--floating-header .rotera-modal-header__back-button { margin: 1rem 0px 0px; }

.rotera-modal-header__title-wrapper { width: 100%; text-align: center; margin: 1rem 0.5rem; }

.rotera-modal-header__title-wrapper--padded { margin-inline-start: 3rem; }

.rotera-modal-header__close, .rotera-modal-header__back-button { margin-top: 0.5rem; margin-bottom: 0.5rem; }

[dir="rtl"] .rotera-modal-header__close, [dir="rtl"] .rotera-modal-header__back-button { transform: scaleX(-1); }

.rotera-modal-body { padding: var(--skapa-modal-body-padding-block, 1.5rem) var(--skapa-modal-body-padding-inline, 1.5rem); }

.rotera-theatre--enter { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalEnter; }

.rotera-theatre--enter .rotera-theatre__animation-group { animation: 0.2s cubic-bezier(0, 0, 0.1, 1) 0s 1 normal none running rotera-modalContentEnter; }

.rotera-theatre--close { animation: 0.2s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalClose; pointer-events: none; transition: visibility 0.1s cubic-bezier(0, 0, 1, 1); visibility: hidden; }

.rotera-theatre--close .rotera-theatre__animation-group { animation: 0.2s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalContentClose; }

.rotera-theatre { position: absolute; left: var(--modal-keyboard-focus-spacing, 0); width: calc(100% - var(--modal-keyboard-focus-width, 0%)); top: 3rem; height: calc(100% - 3rem); border-radius: 8px 8px 0px 0px; background: rgb(var(--colour-elevation-2, 255, 255, 255)); z-index: 100; overflow: hidden; display: flex; flex-shrink: 0; flex-direction: column; text-align: initial; }

.rotera-theatre:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; --modal-keyboard-focus-spacing: .375rem; --modal-keyboard-focus-width: .75rem; }

.rotera-theatre__animation-group { display: flex; flex-direction: column; height: 100%; }

.rotera-theatre__content-wrapper { overflow: auto; }

.rotera-theatre__video { z-index: 100; background: rgba(var(--colour-static-black, 17, 17, 17),.8); }

.rotera-theatre__video iframe { max-width: 100%; }

@media (prefers-contrast: more) {
  .rotera-theatre { border: 1px solid rgb(var(--colour-elevation-1-border, 223, 223, 223)); border-block-end-width: 0px; }
}

.rotera-prompt--enter { animation: 0.2s cubic-bezier(0.8, 0, 0, 1) 0s 1 normal none running rotera-modalContentEnter; }

.rotera-prompt--close { animation: 0.1s cubic-bezier(0.9, 0, 1, 1) 0s 1 normal forwards running rotera-modalContentClose; pointer-events: none; transition: visibility 0.1s cubic-bezier(0, 0, 1, 1); visibility: hidden; }

.rotera-prompt { position: relative; left: auto; right: auto; display: flex; margin: 1.5rem; z-index: 100; overflow: hidden; flex-direction: column; justify-content: center; border-radius: 8px; text-align: initial; }

.rotera-prompt:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.rotera-prompt__content-wrapper { background: rgb(var(--colour-elevation-2, 255, 255, 255)); max-height: 75vh; max-width: 31.5rem; height: auto; overflow: hidden; display: flex; flex-direction: column; }

.rotera-prompt__heading { margin-bottom: 1rem; color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.rotera-prompt__content { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 0.875rem; line-height: 1.571; padding: 0px 2rem; overflow: auto; height: 100%; }

.rotera-prompt__content:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17)); }

.rotera-prompt .rotera-modal-header { padding: 0.5rem 0.5rem 0px; }

.rotera-prompt .rotera-modal-header__close { margin: 0px; }

.rotera-prompt .rotera-prompt__content { padding-bottom: 0px; }

@media (prefers-contrast: more) {
  .rotera-prompt { border: 1px solid rgb(var(--colour-elevation-1-border, 223, 223, 223)); }
}

@media (min-width: 37.5em) {
  .rotera-modal-header { padding: 0px 1rem; flex: 0 0 4.5rem; }
  .rotera-modal-header__close, .rotera-modal-header__back-button { margin-top: 1rem; margin-bottom: 1rem; }
  .rotera-modal-header--floating-header .rotera-modal-header__close, .rotera-modal-header--floating-header .rotera-modal-header__back-button { margin: 1.5rem 0px 0.5rem; }
  .rotera-modal-body { --skapa-modal-body-padding-block: 2rem; --skapa-modal-body-padding-inline: 2rem; }
  .rotera-prompt__heading { font-size: 1.5rem; line-height: 1.45; letter-spacing: -0.0042em; }
  .rotera-prompt__content { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 1rem; line-height: 1.625; padding-bottom: 1rem; }
}

@media (min-width: 56.25em) {
  .rotera-theatre { border-radius: 8px; left: 3rem; width: calc(100% - 6rem); height: calc(100% - 6rem); }
}

@media (min-width: 56.25em) and (prefers-contrast: more) {
  .rotera-theatre { border-block-end-width: 1px; }
}

@media (prefers-reduced-motion) {
  .rotera-modal-wrapper { transition: none; }
  .rotera-modal-wrapper__backdrop { animation-duration: 0s; transition: none; }
  .rotera-modal-wrapper .rotera-theatre.rotera-theatre--enter, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--close, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--enter .rotera-theatre__animation-group, .rotera-modal-wrapper .rotera-theatre.rotera-theatre--close .rotera-theatre__animation-group { animation-duration: 0s; transition-duration: 0s; }
  .rotera-modal-wrapper .rotera-prompt--close { transition: none; }
  .rotera-modal-wrapper .rotera-prompt, .rotera-modal-wrapper .rotera-prompt--enter, .rotera-modal-wrapper .rotera-prompt--close, .rotera-modal-wrapper .rotera-prompt .rotera-prompt__content-wrapper, .rotera-modal-wrapper .rotera-prompt--enter .rotera-prompt__content-wrapper, .rotera-modal-wrapper .rotera-prompt--close .rotera-prompt__content-wrapper { animation-duration: 0s; transition-duration: 0s; }
}

[class*="rotera-btn--icon"] .rotera-btn__inner { padding: 0px 1rem; }

[class*="rotera-btn--icon"] .rotera-btn__inner .rotera-btn__label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); margin: -1px; white-space: nowrap; }

[class*="rotera-btn--icon"].rotera-btn--small .rotera-btn__inner { padding: 0px 0.5rem; }

[class*="rotera-btn--icon"].rotera-btn--xsmall .rotera-btn__inner { padding: 0px 0.25rem; min-height: 2rem; }

[class*="rotera-btn--icon"].rotera-btn--xsmall .rotera-btn__inner::after { content: ""; position: absolute; inset: -0.375rem; }

.rotera-btn { position: relative; background: none; border: 0px; padding: 0px; text-align: center; display: inline-flex; border-radius: 64px; cursor: pointer; outline: 0px; vertical-align: top; --background: tokens.$colour-interactive-primary-bg-default; --background-hover: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51)); --background-press: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0)); --foreground: rgb(var(--colour-text-and-icon-5, 255, 255, 255)); --disabled-foreground: rgb(var(--colour-interactive-disabled-2, 146, 146, 146)); --disabled-background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)); color: var(--foreground); text-decoration: none; }

.rotera-btn .rotera-btn__inner { box-shadow: var(--box-shadow); background: var(--background); }

.rotera-btn:hover .rotera-btn__inner { background: var(--background-hover); box-shadow: var(--box-shadow-hover); }

.rotera-btn:active .rotera-btn__inner { background: var(--background-press); box-shadow: var(--box-shadow-press); }

.rotera-btn:hover, .rotera-btn:active, .rotera-btn:focus { text-decoration: none; color: var(--foreground); }

.rotera-btn .rotera-svg-icon { flex-shrink: 0; }

.rotera-btn:disabled { cursor: default; }

.rotera-btn:disabled .rotera-btn__inner { background-color: var(--disabled-background); color: var(--disabled-foreground); box-shadow: none; }

.rotera-btn__inner { border-radius: 64px; display: inline-flex; justify-content: center; align-items: center; min-height: 3.5rem; padding: 0px 2rem; width: 100%; box-sizing: border-box; transition-property: opacity, transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

.rotera-btn:active:not(:disabled) .rotera-btn__inner { transform: scale(0.97); }

.rotera-leading-icon .rotera-btn__inner { padding-inline-start: 1.5rem; }

.rotera-trailing-icon .rotera-btn__inner { flex-direction: row-reverse; padding-inline-end: 1.5rem; }

@media (forced-colors: active) {
  .rotera-btn__inner { border: 1px solid transparent; }
  .rotera-btn:disabled .rotera-btn__inner { color: graytext; border-color: graytext; }
}

.rotera-btn--icon-primary, .rotera-btn--primary { --background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17)); --background-hover: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51)); --background-press: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0)); }

.rotera-btn--icon-emphasised, .rotera-btn--emphasised { --background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163)); --background-hover: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147)); --background-press: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147)); }

.rotera-btn--icon-secondary, .rotera-btn--secondary { --background: none; --background-hover: none; --box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17)); --background-press: rgba(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204), .5); }

.rotera-btn--icon-emphasised-inverse, .rotera-btn--emphasised-inverse, .rotera-btn--icon-primary-inverse, .rotera-btn--primary-inverse { --background: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255)); --background-hover: rgb(var(--colour-interactive-subtle-bg-hover, 245, 245, 245)); --background-press: rgb(var(--colour-interactive-subtle-bg-pressed, 223, 223, 223)); }

.rotera-btn--icon-secondary-inverse, .rotera-btn--secondary-inverse { --background: transparent; --background-hover: transparent; --background-press: rgba(var(--colour-neutral-1, 255, 255, 255), .1); --box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-1, 255, 255, 255)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-neutral-1, 255, 255, 255)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-neutral-1, 255, 255, 255)); }

.rotera-btn--icon-tertiary-inverse, .rotera-btn--tertiary-inverse { --background: transparent; --background-hover: rgba(var(--colour-neutral-1, 255, 255, 255), .15); --background-press: rgba(var(--colour-neutral-1, 255, 255, 255), .3); --disabled-background: transparent; --disabled-foreground: rgba(var(--colour-interactive-disabled-1, 204, 204, 204), .15); }

.rotera-btn--danger { --background: rgb(var(--colour-interactive-destructive-bg-default, 224, 7, 81)); --background-hover: rgb(var(--colour-interactive-destructive-bg-hover, 204, 0, 61)); --background-press: rgb(var(--colour-interactive-destructive-bg-pressed, 184, 0, 41)); }

.rotera-btn--icon-tertiary, .rotera-btn--tertiary { --background: transparent; --background-hover: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223)); --background-press: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204)); --disabled-background: transparent; --disabled-foreground: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)); }

.rotera-btn--icon-image-overlay, .rotera-btn--image-overlay { --background: rgba(var(--colour-static-black, 17, 17, 17), .75); --background-hover: rgba(var(--colour-static-black, 17, 17, 17), .85); --background-press: rgba(var(--colour-static-black, 17, 17, 17), .95); }

.rotera-btn.rotera-btn--static-colour.rotera-btn--primary, .rotera-btn.rotera-btn--static-colour.rotera-btn--icon-primary { --background: rgb(var(--colour-interactive-static-primary-bg-default, 17, 17, 17)); --background-hover: rgb(var(--colour-interactive-static-primary-bg-hover, 51, 51, 51)); --background-press: rgb(var(--colour-interactive-static-primary-bg-pressed, 0, 0, 0)); --foreground: rgb(var(--colour-static-white, 255, 255, 255)); --disabled-foreground: rgba(var(--colour-static-black, 17, 17, 17), .15); --disabled-background: rgba(var(--colour-static-black, 17, 17, 17), .15); }

.rotera-btn.rotera-btn--static-colour.rotera-btn--secondary, .rotera-btn.rotera-btn--static-colour.rotera-btn--icon-secondary { --background: transparent; --background-hover: transparent; --background-press: rgba(var(--colour-interactive-static-secondary-bg-pressed, 204, 204, 204), .5); --box-shadow: inset 0 0 0 1px rgb(var(--colour-static-black, 17, 17, 17)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-static-black, 17, 17, 17)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-static-black, 17, 17, 17)); --foreground: rgb(var(--colour-static-black, 17, 17, 17)); --disabled-foreground: rgba(var(--colour-static-black, 17, 17, 17), .15); --disabled-background: rgba(var(--colour-static-black, 17, 17, 17), .15); }

.rotera-btn.rotera-btn--static-colour.rotera-btn--tertiary, .rotera-btn.rotera-btn--static-colour.rotera-btn--icon-tertiary { --background: transparent; --background-hover: rgb(var(--colour-interactive-static-secondary-bg-hover, 223, 223, 223)); --background-press: rgb(var(--colour-interactive-static-secondary-bg-pressed, 204, 204, 204)); --foreground: rgb(var(--colour-static-black, 17, 17, 17)); --disabled-foreground: rgba(var(--colour-static-black, 17, 17, 17), .15); --disabled-background: transparent; }

.rotera-btn.rotera-btn--static-colour.rotera-btn--icon-secondary-inverse, .rotera-btn.rotera-btn--static-colour.rotera-btn--secondary-inverse { --background: transparent; --background-hover: transparent; --background-press: rgba(var(--colour-static-white, 255, 255, 255), .1); --box-shadow: inset 0 0 0 1px rgb(var(--colour-static-white, 255, 255, 255)); --box-shadow-hover: inset 0 0 0 2px rgb(var(--colour-static-white, 255, 255, 255)); --box-shadow-press: inset 0 0 0 2px rgb(var(--colour-static-white, 255, 255, 255)); --foreground: rgb(var(--colour-static-white, 255, 255, 255)); --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15); --disabled-background: rgba(var(--colour-static-white, 255, 255, 255), .15); }

.rotera-btn.rotera-btn--static-colour.rotera-btn--icon-emphasised-inverse, .rotera-btn.rotera-btn--static-colour.rotera-btn--icon-primary-inverse, .rotera-btn.rotera-btn--static-colour.rotera-btn--primary-inverse, .rotera-btn.rotera-btn--static-colour.rotera-btn--emphasised-inverse { --background: rgb(var(--colour-static-white, 255, 255, 255)); --background-hover: rgb(var(--colour-static-light-grey, 245, 245, 245)); --background-press: rgb(var(--colour-static-grey, 223, 223, 223)); --foreground: rgb(var(--colour-static-black, 17, 17, 17)); --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15); --disabled-background: rgba(var(--colour-static-white, 255, 255, 255), .15); }

.rotera-btn.rotera-btn--static-colour.rotera-btn--icon-tertiary-inverse, .rotera-btn.rotera-btn--static-colour.rotera-btn--tertiary-inverse { --background: transparent; --background-hover: rgba(var(--colour-static-white, 255, 255, 255), .15); --background-press: rgba(var(--colour-static-white, 255, 255, 255), .3); --foreground: rgb(var(--colour-static-white, 255, 255, 255)); --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15); }

.rotera-btn--icon-emphasised-inverse, .rotera-btn--emphasised-inverse, .rotera-btn--icon-primary-inverse, .rotera-btn--primary-inverse, .rotera-btn--icon-secondary, .rotera-btn--secondary, .rotera-btn--icon-tertiary, .rotera-btn--tertiary { --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.rotera-btn--icon-secondary-inverse, .rotera-btn--secondary-inverse, .rotera-btn--icon-tertiary-inverse, .rotera-btn--tertiary-inverse, .rotera-btn--icon-primary, .rotera-btn--primary { --foreground: rgb(var(--colour-text-and-icon-5, 255, 255, 255)); }

.rotera-btn--icon-image-overlay, .rotera-btn--icon-emphasised, .rotera-btn--danger, .rotera-btn--emphasised, .rotera-btn--image-overlay { --foreground: rgb(var(--colour-static-white, 255, 255, 255)); }

.rotera-btn .rotera-btn__loader { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -160%); display: inline-block; width: 0px; height: 0px; border: 0.25rem solid; border-radius: 64px; animation: 0.7s ease 0s infinite normal none running rotera-btn-loader; opacity: 0; visibility: hidden; text-indent: -9999px; overflow: hidden; transition-property: opacity, transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

@keyframes rotera-btn-loader { 
  0%, 100% { transform: translate(-50%, -160%); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  40% { transform: translate(-50%, 20%); animation-timing-function: cubic-bezier(0, 0, 0, 1); }
}

.rotera-btn--loading { pointer-events: none; }

.rotera-btn--loading .rotera-btn__loader { opacity: 1; visibility: visible; }

.rotera-btn--loading .rotera-svg-icon, .rotera-btn--loading .rotera-btn__label { transform: translateY(50%); opacity: 0; visibility: hidden; }

.rotera-btn--xsmall .rotera-btn__inner { min-height: 2rem; padding: 0px 1rem; }

.rotera-btn--xsmall .rotera-btn__inner::after { content: ""; position: absolute; inset: -0.375rem; }

.rotera-btn--xsmall.rotera-leading-icon .rotera-btn__inner { padding-inline-start: 0.75rem; }

.rotera-btn--xsmall.rotera-trailing-icon .rotera-btn__inner { padding-inline-end: 0.75rem; }

.rotera-btn--xsmall.rotera-leading-icon .rotera-svg-icon { margin-inline-end: 0.25rem; }

.rotera-btn--xsmall.rotera-trailing-icon .rotera-svg-icon { margin-inline-start: 0.25rem; }

.rotera-btn--small .rotera-btn__inner { min-height: 2.5rem; padding: 0px 1.5rem; }

.rotera-btn--small .rotera-btn__inner::after { content: ""; position: absolute; inset: -0.125rem; }

.rotera-btn--small.rotera-leading-icon .rotera-btn__inner { padding-inline-start: 1rem; }

.rotera-btn--small.rotera-trailing-icon .rotera-btn__inner { padding-inline-end: 1rem; }

.rotera-btn--expanding.rotera-leading-icon .rotera-btn__inner, .rotera-btn--expanding.rotera-trailing-icon .rotera-btn__inner, .rotera-btn--expanding .rotera-btn__inner { transition-property: opacity, transform, padding; padding: 0px 1rem; }

.rotera-btn--expanding.rotera-btn--small .rotera-btn__inner { padding: 0px 0.5rem; }

.rotera-btn--expanding.rotera-btn--xsmall .rotera-btn__icon { margin: 0px; }

.rotera-btn--expanding.rotera-btn--xsmall .rotera-btn__inner { padding: 0px 0.25rem; min-height: 2rem; }

.rotera-btn--expanding.rotera-btn--xsmall .rotera-btn__inner::after { content: ""; position: absolute; inset: -0.375rem; }

.rotera-btn--expanding .rotera-btn__icon { transition: margin-inline-end 0.25s ease-in-out; margin: 0px; }

.rotera-btn--expanding .rotera-btn__inner .rotera-btn__label { max-width: 0px; white-space: nowrap; overflow: hidden; transition: max-width 0.25s ease-in-out; transform-origin: left center; position: static; width: auto; height: auto; margin: 0px; clip: initial; }

.rotera-btn--expanding:hover .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding:focus-visible .rotera-btn__inner .rotera-btn__label { max-width: 12.5rem; }

.rotera-btn--expanding:hover.rotera-leading-icon .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-leading-icon .rotera-btn__inner { padding-inline: 1.5rem 2rem; }

.rotera-btn--expanding:hover.rotera-trailing-icon .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-trailing-icon .rotera-btn__inner { flex-direction: row-reverse; padding-inline: 2rem 1.5rem; }

.rotera-btn--expanding:hover.rotera-leading-icon .rotera-btn__icon, .rotera-btn--expanding:focus-visible.rotera-leading-icon .rotera-btn__icon { margin-inline-end: 0.5rem; }

.rotera-btn--expanding:hover.rotera-trailing-icon .rotera-btn__icon, .rotera-btn--expanding:focus-visible.rotera-trailing-icon .rotera-btn__icon { margin-inline-start: 0.5rem; }

.rotera-btn--expanding:hover.rotera-leading-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-leading-icon.rotera-btn--small .rotera-btn__inner { padding-inline: 1rem 1.5rem; }

.rotera-btn--expanding:hover.rotera-trailing-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-trailing-icon.rotera-btn--small .rotera-btn__inner { padding-inline: 1.5rem 1rem; }

.rotera-btn--expanding:hover.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner { padding-inline: 0.75rem 1rem; }

.rotera-btn--expanding:hover.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner { padding-inline: 1rem 0.75rem; }

.rotera-btn--expanding:hover.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding:focus-visible.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon { margin-inline-end: 0.25rem; }

.rotera-btn--expanding:hover.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding:focus-visible.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon { margin-inline-start: 0.25rem; }

@media (hover: none) {
  .rotera-btn--expanding.rotera-leading-icon:hover .rotera-btn__inner, .rotera-btn--expanding.rotera-trailing-icon:hover .rotera-btn__inner { padding: 0px 1rem; }
  .rotera-btn--expanding.rotera-leading-icon:hover .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding.rotera-trailing-icon:hover .rotera-btn__inner .rotera-btn__label { max-width: 0px; }
  .rotera-btn--expanding.rotera-leading-icon:hover .rotera-btn__icon, .rotera-btn--expanding.rotera-trailing-icon:hover .rotera-btn__icon { margin: 0px; }
  .rotera-btn--expanding.rotera-leading-icon.rotera-btn--small:hover .rotera-btn__inner, .rotera-btn--expanding.rotera-trailing-icon.rotera-btn--small:hover .rotera-btn__inner { padding: 0px 0.5rem; }
  .rotera-btn--expanding.rotera-leading-icon.rotera-btn--xsmall:hover .rotera-btn__inner, .rotera-btn--expanding.rotera-trailing-icon.rotera-btn--xsmall:hover .rotera-btn__inner { padding: 0px 0.25rem; }
  .rotera-btn--expanding.rotera-leading-icon.rotera-btn--xsmall:hover .rotera-btn__icon, .rotera-btn--expanding.rotera-trailing-icon.rotera-btn--xsmall:hover .rotera-btn__icon { margin: 0px; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled) .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding.rotera-btn--touch-device-expanded .rotera-btn__inner .rotera-btn__label { max-width: 12.5rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-leading-icon .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-leading-icon .rotera-btn__inner { padding-inline: 1.5rem 2rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-trailing-icon .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-trailing-icon .rotera-btn__inner { flex-direction: row-reverse; padding-inline: 2rem 1.5rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-leading-icon .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-leading-icon .rotera-btn__icon { margin-inline-end: 0.5rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-trailing-icon .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-trailing-icon .rotera-btn__icon { margin-inline-start: 0.5rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-leading-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-leading-icon.rotera-btn--small .rotera-btn__inner { padding-inline: 1rem 1.5rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-trailing-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-trailing-icon.rotera-btn--small .rotera-btn__inner { padding-inline: 1.5rem 1rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner { padding-inline: 0.75rem 1rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner { padding-inline: 1rem 0.75rem; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon { margin: 0px; }
  .rotera-btn--expanding.rotera-btn--touch-device-expanded:hover:not(:disabled).rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--touch-device-expanded.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon { margin: 0px; }
}

.rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-trailing-icon .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-leading-icon .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--loading.rotera-trailing-icon .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--loading.rotera-leading-icon .rotera-btn__inner, .rotera-btn--expanding:disabled.rotera-trailing-icon .rotera-btn__inner, .rotera-btn--expanding:disabled.rotera-leading-icon .rotera-btn__inner { padding: 0px 1rem; }

.rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-trailing-icon .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-leading-icon .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding.rotera-btn--loading.rotera-trailing-icon .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding.rotera-btn--loading.rotera-leading-icon .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding:disabled.rotera-trailing-icon .rotera-btn__inner .rotera-btn__label, .rotera-btn--expanding:disabled.rotera-leading-icon .rotera-btn__inner .rotera-btn__label { max-width: 0px; }

.rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-trailing-icon .rotera-btn__icon, .rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-leading-icon .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--loading.rotera-trailing-icon .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--loading.rotera-leading-icon .rotera-btn__icon, .rotera-btn--expanding:disabled.rotera-trailing-icon .rotera-btn__icon, .rotera-btn--expanding:disabled.rotera-leading-icon .rotera-btn__icon { margin: 0px; }

.rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-trailing-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-leading-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--loading.rotera-trailing-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--loading.rotera-leading-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding:disabled.rotera-trailing-icon.rotera-btn--small .rotera-btn__inner, .rotera-btn--expanding:disabled.rotera-leading-icon.rotera-btn--small .rotera-btn__inner { padding: 0px 0.5rem; }

.rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--loading.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding.rotera-btn--loading.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding:disabled.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__inner, .rotera-btn--expanding:disabled.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__inner { padding: 0px 0.25rem; }

.rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding:focus-visible.rotera-btn--loading.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--loading.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding.rotera-btn--loading.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding:disabled.rotera-trailing-icon.rotera-btn--xsmall .rotera-btn__icon, .rotera-btn--expanding:disabled.rotera-leading-icon.rotera-btn--xsmall .rotera-btn__icon { margin: 0px; }

.rotera-btn--fluid, .rotera-btn--fluid .rotera-btn__inner { width: 100%; }

.rotera-btn--plain.rotera-btn--small .rotera-btn__inner::after, .rotera-btn--plain .rotera-btn__inner::after { content: ""; position: absolute; inset: -0.25rem; }

.rotera-btn--plain { --background: transparent; --background-hover: transparent; --background-press: transparent; --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); }

.rotera-btn--plain.rotera-btn--small .rotera-btn__inner, .rotera-btn--plain .rotera-btn__inner, .rotera-btn--plain.rotera-leading-icon .rotera-btn__inner, .rotera-btn--plain.rotera-trailing-icon .rotera-btn__inner { padding: 0px; }

.rotera-btn .rotera-svg-icon, .rotera-btn__label { transition-property: opacity, margin-right, margin-left, transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

.rotera-btn:focus-visible, .rotera-tabs__panel:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.rotera-btn[class*="inverse"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.rotera-btn[class*="image-overlay"]:focus-visible { box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-white, 255, 255, 255))); outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-black, 17, 17, 17))); outline-offset: 4px; transition: outline 0.2s ease-out, box-shadow 0.2s ease-out; }

.rotera-leading-icon .rotera-svg-icon { margin-inline-end: 0.5rem; vertical-align: top; }

.rotera-leading-icon .rotera-svg-icon--100 { margin-inline-end: 0.25rem; }

.rotera-trailing-icon .rotera-svg-icon { margin-inline-start: 0.5rem; vertical-align: top; }

.rotera-trailing-icon .rotera-svg-icon--100 { margin-inline-start: 0.25rem; }

.rotera-svg-icon { display: inline-block; height: 1.5rem; width: 1.5rem; vertical-align: middle; fill: currentcolor; transition-property: transform, fill; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1); }

@media (prefers-reduced-motion) {
  .rotera-svg-icon { transition-property: none; }
}

@keyframes rotera-icon-rotate { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

.rotera-svg-icon--rotate { animation: 1.5s linear 0s infinite normal none running rotera-icon-rotate; }

.rotera-svg-icon--rotate-45 { transform: rotate(45deg); }

.rotera-svg-icon--rotate-minus-45 { transform: rotate(-45deg); }

.rotera-svg-icon--rotate-135 { transform: rotate(135deg); }

.rotera-svg-icon--rotate-minus-135 { transform: rotate(-135deg); }

.rotera-svg-icon--rotate-180 { transform: rotate(180deg); }

.rotera-svg-icon--rotate-minus-180 { transform: rotate(-180deg); }

.rotera-text--heading-xl { color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); font-size: 2rem; line-height: 1.375; letter-spacing: -0.0056em; font-weight: 700; }

@media (min-width: 37.5em) {
  .rotera-text--heading-xl { font-size: 3.25rem; line-height: 1.32; letter-spacing: -0.0091em; }
}

.rotera-text--heading-l { color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); font-size: 1.5rem; line-height: 1.45; letter-spacing: -0.0042em; font-weight: 700; }

@media (min-width: 37.5em) {
  .rotera-text--heading-l { font-size: 2.25rem; line-height: 1.333; letter-spacing: -0.0063em; }
}

.rotera-text--heading-m { color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); font-size: 1.125rem; line-height: 1.444; font-weight: 700; }

@media (min-width: 37.5em) {
  .rotera-text--heading-m { font-size: 1.5rem; line-height: 1.45; letter-spacing: -0.0042em; }
}

.rotera-text--heading-s { color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); font-size: 1rem; line-height: 1.5; font-weight: 700; }

.rotera-text--heading-xs { color: rgb(var(--colour-text-and-icon-1, 17, 17, 17)); font-size: 0.875rem; line-height: 1.571; font-weight: 700; }

.rotera-text--body-xl { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 1.25rem; line-height: 1.6; }

.rotera-text--body-l { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 1rem; line-height: 1.625; }

.rotera-text--body-m { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 0.875rem; line-height: 1.571; }

.rotera-text--body-s { color: rgb(var(--colour-text-and-icon-2, 72, 72, 72)); font-size: 0.75rem; line-height: 1.5; }

.rotera-modal .rotera-modal-header { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 10; display: flex; flex-direction: row; justify-content: flex-end; pointer-events: none; background-color: transparent; padding: 0px; margin: 0px; }

.rotera-modal .rotera-modal-header .rotera-modal-close-button { margin: 0.5rem; pointer-events: all; }

.rotera-modal .rotera-theatre__content-wrapper, .rotera-modal .rotera-modal, .rotera-modal .rotera-modal-container { display: flex; flex-direction: column; height: 100%; width: 100%; }

.rotera-loading { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; }

.rotera-loading--label-leading { text-align: inherit; align-items: flex-start; }

.rotera-loading__text, .rotera-loading__text--fade-out { opacity: 0; }

.rotera-loading__text { max-width: 100%; margin-top: 2.5rem; text-align: center; transform: translateY(1.5rem); }

.rotera-loading__text--fade-out { transition: transform 0.1s cubic-bezier(0.4, 0, 0.4, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.4, 1); transform: translateY(-1.5rem); }

.rotera-loading__text--fade-in { transition: transform 0.1s cubic-bezier(0.4, 0, 0.4, 1), opacity 0.1s cubic-bezier(0.4, 0, 0.4, 1); transform: translateY(0px); opacity: 1; }

.rotera-loading__ball { display: block; width: 0px; height: 0px; transform-origin: center bottom; border-radius: 64px; border: .5rem solid rgb(var(--colour-semantic-informative, 0, 88, 163)); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.4, 1); animation: 0.7s ease 0s infinite normal none running rotera-loading-bounce; }

.rotera-loading__ball--small { border-width: 0.125rem; }

.rotera-loading__ball--medium { border-width: 0.25rem; }

.rotera-loading__ball--small, .rotera-loading__ball--medium { transform: translateY(-160%); animation: 0.7s ease 0s infinite normal none running rotera-loading-bounce-small; }

.rotera-loading__ball--large { margin-bottom: 2rem; }

.rotera-loading__ball--primary { border-color: rgb(var(--colour-neutral-7, 17, 17, 17)); }

.rotera-loading__ball--secondary { border-color: rgb(var(--colour-neutral-1, 255, 255, 255)); }

.rotera-loading__ball--secondary + .rotera-loading__text { color: rgb(var(--colour-text-and-icon-5, 255, 255, 255)); }

.rotera-loading__linear-wrapper { position: relative; display: flex; width: 100%; height: 0.3125rem; }

.rotera-loading__linear-wrapper + .rotera-loading__text { margin-top: 1rem; }

.rotera-loading__sr-only-text, .rotera-loading__linear-label { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); margin: -1px; white-space: nowrap; }

.rotera-loading__linear-progress { appearance: none; width: 100%; height: 100%; border: 0px; border-radius: 0.375rem; background: rgb(var(--colour-neutral-2, 245, 245, 245)); }

.rotera-loading__linear-progress::-webkit-progress-bar { border-radius: 0.375rem; background: rgb(var(--colour-neutral-2, 245, 245, 245)); }

.rotera-loading__linear-progress::-webkit-progress-value { border-radius: 0.375rem; background: rgb(var(--colour-semantic-informative, 0, 88, 163)); }

@media (forced-colors: active) {
  .rotera-loading__linear-progress { appearance: revert; height: revert; border: revert; border-radius: revert; background: revert; }
}

@media (prefers-reduced-motion: reduce) {
  .rotera-loading .rotera-loading__text, .rotera-loading .rotera-loading__ball { transition: none; }
}

@keyframes rotera-loading-bounce-small { 
  0%, 100% { transform: translateY(-160%); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  40% { transform: translateY(20%); animation-timing-function: cubic-bezier(0, 0, 0, 1); }
}

@keyframes rotera-loading-bounce { 
  0% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.42, 0, 1, 1); }
  40% { transform: translateY(2rem) scaleY(1); animation-timing-function: ease-in; }
  50% { transform: translateY(2rem) scaleY(0.75); animation-timing-function: ease-out; }
  60% { transform: translateY(2rem) scaleY(1); animation-timing-function: cubic-bezier(0, 0, 0, 1); }
  100% { transform: translateY(0px); }
}

.rotera-view-inject { display: flex; }

.rotera-view-inject .rotera-model-viewer-buttons button:nth-child(2) { display: none; }

.rotera-web-xr-mode .rotera-model-viewer-svg, .rotera-web-xr-mode .rotera-model-viewer-circle-svg, .rotera-web-xr-mode .rotera-model-viewer-dimension, .rotera-web-xr-mode .rotera-model-viewer-svg-dimensions, .rotera-web-xr-mode .rotera-model-viewer-buttons, .rotera-default-ar-button { display: none; }

model-viewer { --progress-bar-color: none; }

:not(:defined) > * { display: none; }

.rotera-dot { display: none; }

.rotera-circle { display: none; background-color: rgb(0, 255, 255); }

.rotera-model-viewer-svg { width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: -1; }

.rotera-model-viewer-svg .rotera-model-viewer-svg-circle { stroke: rgb(var(--colour-static-black, 17, 17, 17)); stroke-width: 4; }

.rotera-model-viewer-svg .rotera-model-viewer-svg-circles { stroke: rgb(var(--colour-neutral-3, 223, 223, 223)); stroke-width: 1; }

.rotera-model-viewer-circle-svg { width: 100%; height: 100%; pointer-events: none; position: absolute; z-index: -1; }

.rotera-model-viewer-circle-svg #rotera-model-viewer-circle-path { stroke: rgb(var(--colour-neutral-2, 245, 245, 245)); fill: none; stroke-width: 4; }

.rotera-dimension, .rotera-dimension-dot { display: none; }

[dir="rtl"] .rotera-model-viewer-dimension { width: 100%; }

.rotera-model-viewer-dimension { pointer-events: none; width: 120%; height: 100%; }

.rotera-model-viewer-dimension .rotera-dimension-texts { display: none; position: absolute; color: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163)); border-color: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163)); border-style: solid; border-width: 1px; border-radius: 16px; padding: 0.25rem; background-color: rgb(var(--colour-static-white, 255, 255, 255)); transform: translate3d(-50%, -50%, 0px); font-family: "Noto IKEA", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif; font-size: 0.875rem; line-height: 1.571; direction: ltr; pointer-events: all; outline-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17)); outline-offset: 0.25rem; transition: outline 0.2s ease-out; }

.rotera-model-viewer-dimension .rotera-dimension-texts .rotera-dimension-imperial { display: none; }

.rotera-model-viewer-dimension .rotera-dimension-texts:hover .rotera-dimension-imperial { display: inline; }

.rotera-model-viewer-svg-dimensions { width: 100%; height: 100%; pointer-events: none; }

.rotera-model-viewer-svg-dimensions .rotera-dimension-lines { display: none; stroke: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163)); stroke-width: 1; }

.rotera-model-viewer-svg-dimensions .rotera-model-viewer-svg-dimension-arrow { fill: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163)); }