@charset "UTF-8";.ot-typography,
.ot-typography * {
  --skapa-letter-spacing-multiplier-for-font-weight: calc(var(--skapa-font-weight, 400) / 800 - .125);
  letter-spacing: calc(var(--skapa-characterset-multiplier, 1) * var(--skapa-letter-spacing-multiplier-for-font-weight, 0.375) * (var(--skapa-base-multiplier, 1) * 0.875rem - 1em) / (0.875 * var(--skapa-rem, 16)));
}

*[class^=ot-typography-], *[class*=" ot-typography-"] {
  font-size: calc(1rem * var(--skapa-base-multiplier, 1) * var(--skapa-font-size, 14) / 16);
  font-weight: clamp(400, var(--skapa-font-weight, 400), 700);
  line-height: var(--skapa-line-height, 1.5);
  --skapa-letter-spacing-multiplier-for-font-weight: calc(var(--skapa-font-weight, 400) / 800 - .125);
  letter-spacing: calc(var(--skapa-characterset-multiplier, 1) * var(--skapa-letter-spacing-multiplier-for-font-weight, 0.375) * (var(--skapa-base-multiplier, 1) * 0.875rem - 1em) / (0.875 * var(--skapa-rem, 16)));
}

.ot-typography-margin-compensation *[class*=ot-typography-] {
  margin-inline: calc(-1 * (1em - 14px) * 0.095);
}

.ot-typography-paragraph-spacing *[class*=ot-typography-] {
  margin-bottom: calc(1em * (var(--skapa-line-height, 1.5) - 1));
}

.ot-typography-base-14 {
  --skapa-base-multiplier: calc(14 / 14);
}
.ot-typography-base-16 {
  --skapa-base-multiplier: calc(16 / 14);
}
.ot-typography-base-20 {
  --skapa-base-multiplier: calc(20 / 14);
}
.ot-typography-base-28 {
  --skapa-base-multiplier: calc(28 / 14);
}
.ot-typography-base-56 {
  --skapa-base-multiplier: calc(56 / 14);
}

.ot-typography-body-s {
  --skapa-font-size: var(--skapa-body-s, 12);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.8;
}
.ot-typography-body-m {
  --skapa-font-size: var(--skapa-body-m, 14);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.5;
}
.ot-typography-body-l {
  --skapa-font-size: var(--skapa-body-l, 16);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.5;
}

.ot-typography-display-m {
  --skapa-font-size: var(--skapa-display-m, 40);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.2;
}
.ot-typography-display-xl {
  --skapa-font-size: var(--skapa-display-xl, 72);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.2;
}
.ot-typography-display-l {
  --skapa-font-size: var(--skapa-display-l, 56);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.2;
}

.ot-typography-heading-m {
  --skapa-font-size: var(--skapa-heading-m, 18);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}
.ot-typography-heading-xl {
  --skapa-font-size: var(--skapa-heading-xl, 32);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}
.ot-typography-heading-l {
  --skapa-font-size: var(--skapa-heading-l, 24);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}
.ot-typography-heading-s {
  --skapa-font-size: var(--skapa-heading-s, 16);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}
.ot-typography-heading-xs {
  --skapa-font-size: var(--skapa-heading-xs, 14);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}

.ot-typography-label-s {
  --skapa-font-size: var(--skapa-label-s, 12);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}
.ot-typography-label-xs {
  --skapa-font-size: var(--skapa-label-xs, 10);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
  text-transform: uppercase;
}
.ot-typography-label-m {
  --skapa-font-size: var(--skapa-label-m, 14);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}
.ot-typography-label-l {
  --skapa-font-size: var(--skapa-label-l, 16);
  --skapa-font-weight: 700;
  --skapa-line-height: 1.25;
}

.ot-typography-caption-m {
  --skapa-font-size: var(--skapa-caption-m, 14);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.25;
}
.ot-typography-caption-l {
  --skapa-font-size: var(--skapa-caption-l, 16);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.25;
}
.ot-typography-caption-s {
  --skapa-font-size: var(--skapa-caption-s, 12);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.5;
}

.ot-typography-statement-m {
  --skapa-font-size: var(--skapa-statement-m, 20);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.5;
}
.ot-typography-statement-l {
  --skapa-font-size: var(--skapa-statement-l, 28);
  --skapa-font-weight: 400;
  --skapa-line-height: 1.5;
}

.ot-typography-regular {
  --skapa-font-weight: 400;
}

.ot-typography-typescale-desktop {
  --skapa-heading-xs: 14;
  --skapa-heading-s: 16;
  --skapa-heading-m: 18;
  --skapa-heading-l: 24;
  --skapa-heading-xl: 32;
  --skapa-display-m: 40;
  --skapa-display-l: 56;
  --skapa-display-xl: 72;
  --skapa-statement-m: 20;
  --skapa-statement-l: 28;
  --skapa-body-l: 16;
  --skapa-body-m: 14;
  --skapa-body-s: 12;
  --skapa-caption-l: 16;
  --skapa-caption-m: 14;
  --skapa-caption-s: 12;
  --skapa-label-l: 16;
  --skapa-label-m: 14;
  --skapa-label-s: 12;
  --skapa-label-xs: 10;
}
.ot-typography-typescale-small-screen {
  --skapa-heading-xs: 14;
  --skapa-heading-s: 16;
  --skapa-heading-m: 18;
  --skapa-heading-l: 20;
  --skapa-heading-xl: 24;
  --skapa-display-m: 28;
  --skapa-display-l: 36;
  --skapa-display-xl: 48;
  --skapa-statement-m: 18;
  --skapa-statement-l: 20;
  --skapa-body-l: 16;
  --skapa-body-m: 14;
  --skapa-body-s: 12;
  --skapa-caption-l: 16;
  --skapa-caption-m: 14;
  --skapa-caption-s: 12;
  --skapa-label-l: 16;
  --skapa-label-m: 14;
  --skapa-label-s: 12;
  --skapa-label-xs: 10;
}
.ot-typography-typescale-large-screen {
  --skapa-heading-xs: 14;
  --skapa-heading-s: 16;
  --skapa-heading-m: 18;
  --skapa-heading-l: 28;
  --skapa-heading-xl: 40;
  --skapa-display-m: 64;
  --skapa-display-l: 96;
  --skapa-display-xl: 144;
  --skapa-statement-m: 28;
  --skapa-statement-l: 40;
  --skapa-body-l: 16;
  --skapa-body-m: 14;
  --skapa-body-s: 12;
  --skapa-caption-l: 16;
  --skapa-caption-m: 14;
  --skapa-caption-s: 12;
  --skapa-label-l: 16;
  --skapa-label-m: 14;
  --skapa-label-s: 12;
  --skapa-label-xs: 10;
}
.ot-typography-typescale-auto {
  --skapa-heading-xs: 14;
  --skapa-heading-s: 16;
  --skapa-heading-m: 18;
  --skapa-heading-l: 20;
  --skapa-heading-xl: 24;
  --skapa-display-m: 28;
  --skapa-display-l: 36;
  --skapa-display-xl: 48;
  --skapa-statement-m: 18;
  --skapa-statement-l: 20;
  --skapa-body-l: 16;
  --skapa-body-m: 14;
  --skapa-body-s: 12;
  --skapa-caption-l: 16;
  --skapa-caption-m: 14;
  --skapa-caption-s: 12;
  --skapa-label-l: 16;
  --skapa-label-m: 14;
  --skapa-label-s: 12;
  --skapa-label-xs: 10;
}
@media (min-width: 37.5em) {
  .ot-typography-typescale-auto {
    --skapa-heading-xs: 14;
    --skapa-heading-s: 16;
    --skapa-heading-m: 18;
    --skapa-heading-l: 24;
    --skapa-heading-xl: 32;
    --skapa-display-m: 40;
    --skapa-display-l: 56;
    --skapa-display-xl: 72;
    --skapa-statement-m: 20;
    --skapa-statement-l: 28;
    --skapa-body-l: 16;
    --skapa-body-m: 14;
    --skapa-body-s: 12;
    --skapa-caption-l: 16;
    --skapa-caption-m: 14;
    --skapa-caption-s: 12;
    --skapa-label-l: 16;
    --skapa-label-m: 14;
    --skapa-label-s: 12;
    --skapa-label-xs: 10;
  }
}
@media (min-width: 75em) {
  .ot-typography-typescale-auto {
    --skapa-heading-xs: 14;
    --skapa-heading-s: 16;
    --skapa-heading-m: 18;
    --skapa-heading-l: 28;
    --skapa-heading-xl: 40;
    --skapa-display-m: 64;
    --skapa-display-l: 96;
    --skapa-display-xl: 144;
    --skapa-statement-m: 28;
    --skapa-statement-l: 40;
    --skapa-body-l: 16;
    --skapa-body-m: 14;
    --skapa-body-s: 12;
    --skapa-caption-l: 16;
    --skapa-caption-m: 14;
    --skapa-caption-s: 12;
    --skapa-label-l: 16;
    --skapa-label-m: 14;
    --skapa-label-s: 12;
    --skapa-label-xs: 10;
  }
}

*:is(.ot-typography-character-set-arabic, .ot-typography-character-set-chinese_simplified, .ot-typography-character-set-chinese_traditional, .ot-typography-character-set-hebrew, .ot-typography-character-set-japanese, .ot-typography-character-set-korean) {
  --skapa-characterset-multiplier: 0;
}

.ot-text {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-text--lighter {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}

.ot-textcontext-wrapper {
  display: contents;
}[class*=ot-btn--icon] .ot-btn__inner {
  padding: 0 1rem;
}
[class*=ot-btn--icon] .ot-btn__inner .ot-btn__label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
[class*=ot-btn--icon].ot-btn--small .ot-btn__inner {
  padding: 0 0.5rem;
}
[class*=ot-btn--icon].ot-btn--xsmall .ot-btn__inner {
  padding: 0 0.25rem;
  min-height: 2rem;
}
[class*=ot-btn--icon].ot-btn--xsmall .ot-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem;
}

.ot-btn {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
  display: inline-flex;
  border-radius: 64px;
  cursor: pointer;
  outline: 0;
  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;
}
.ot-btn .ot-btn__inner {
  box-shadow: var(--box-shadow);
  background: var(--background);
}
.ot-btn:hover .ot-btn__inner {
  background: var(--background-hover);
  box-shadow: var(--box-shadow-hover);
}
.ot-btn:active .ot-btn__inner {
  background: var(--background-press);
  box-shadow: var(--box-shadow-press);
}
.ot-btn:hover, .ot-btn:active, .ot-btn:focus {
  text-decoration: none;
  color: var(--foreground);
}
.ot-btn .ot-svg-icon {
  flex-shrink: 0;
}
.ot-btn:disabled, .ot-btn[aria-disabled=true]:not(.ot-btn--loading) {
  cursor: default;
}
.ot-btn:disabled .ot-btn__inner, .ot-btn[aria-disabled=true]:not(.ot-btn--loading) .ot-btn__inner {
  background-color: var(--disabled-background);
  color: var(--disabled-foreground);
  box-shadow: none;
}
.ot-btn__inner {
  border-radius: 64px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 2rem;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-btn:active:not(:disabled):not([aria-disabled=true]) .ot-btn__inner {
  transform: scale(0.97);
}
.ot-leading-icon .ot-btn__inner {
  padding-inline-start: 1.5rem;
}

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

@media (forced-colors: active) {
  .ot-btn__inner {
    border: 1px solid transparent;
  }
  .ot-btn:disabled .ot-btn__inner, .ot-btn[aria-disabled=true]:not(.ot-btn--loading) .ot-btn__inner {
    color: GrayText;
    border-color: GrayText;
  }
}
.ot-btn--icon-primary, .ot-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));
}
.ot-btn--icon-emphasised, .ot-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));
}
.ot-btn--icon-secondary, .ot-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), 0.5);
}
.ot-btn--icon-emphasised-inverse, .ot-btn--emphasised-inverse, .ot-btn--icon-primary-inverse, .ot-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));
}
.ot-btn--icon-secondary-inverse, .ot-btn--secondary-inverse {
  --background: transparent;
  --background-hover: transparent;
  --background-press: rgba(var(--colour-neutral-1, 255, 255, 255), 0.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));
}
.ot-btn--icon-tertiary-inverse, .ot-btn--tertiary-inverse {
  --background: transparent;
  --background-hover: rgba(var(--colour-neutral-1, 255, 255, 255), 0.15);
  --background-press: rgba(var(--colour-neutral-1, 255, 255, 255), 0.3);
  --disabled-background: transparent;
  --disabled-foreground: rgba(var(--colour-interactive-disabled-1, 204, 204, 204), .15);
}
.ot-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));
}
.ot-btn--icon-tertiary, .ot-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));
}
.ot-btn--icon-image-overlay, .ot-btn--image-overlay {
  --background: rgba(var(--colour-static-black, 17, 17, 17), 0.75);
  --background-hover: rgba(var(--colour-static-black, 17, 17, 17), 0.85);
  --background-press: rgba(var(--colour-static-black, 17, 17, 17), 0.95);
}
.ot-btn.ot-btn--static-colour.ot-btn--primary, .ot-btn.ot-btn--static-colour.ot-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);
}
.ot-btn.ot-btn--static-colour.ot-btn--secondary, .ot-btn.ot-btn--static-colour.ot-btn--icon-secondary {
  --background: transparent;
  --background-hover: transparent;
  --background-press: rgba(var(--colour-interactive-static-secondary-bg-pressed, 204, 204, 204), 0.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);
}
.ot-btn.ot-btn--static-colour.ot-btn--tertiary, .ot-btn.ot-btn--static-colour.ot-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;
}
.ot-btn.ot-btn--static-colour.ot-btn--icon-secondary-inverse, .ot-btn.ot-btn--static-colour.ot-btn--secondary-inverse {
  --background: transparent;
  --background-hover: transparent;
  --background-press: rgba(var(--colour-static-white, 255, 255, 255), 0.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);
}
.ot-btn.ot-btn--static-colour.ot-btn--icon-emphasised-inverse, .ot-btn.ot-btn--static-colour.ot-btn--icon-primary-inverse, .ot-btn.ot-btn--static-colour.ot-btn--primary-inverse, .ot-btn.ot-btn--static-colour.ot-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);
}
.ot-btn.ot-btn--static-colour.ot-btn--icon-tertiary-inverse, .ot-btn.ot-btn--static-colour.ot-btn--tertiary-inverse {
  --background: transparent;
  --background-hover: rgba(var(--colour-static-white, 255, 255, 255), 0.15);
  --background-press: rgba(var(--colour-static-white, 255, 255, 255), 0.3);
  --foreground: rgb(var(--colour-static-white, 255, 255, 255));
  --disabled-foreground: rgba(var(--colour-static-white, 255, 255, 255), .15);
}
.ot-btn--icon-emphasised-inverse, .ot-btn--emphasised-inverse, .ot-btn--icon-primary-inverse, .ot-btn--primary-inverse, .ot-btn--icon-secondary, .ot-btn--secondary, .ot-btn--icon-tertiary, .ot-btn--tertiary {
  --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-btn--icon-secondary-inverse, .ot-btn--secondary-inverse, .ot-btn--icon-tertiary-inverse, .ot-btn--tertiary-inverse, .ot-btn--icon-primary, .ot-btn--primary {
  --foreground: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-btn--icon-image-overlay, .ot-btn--icon-emphasised, .ot-btn--danger, .ot-btn--emphasised, .ot-btn--image-overlay {
  --foreground: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-btn .ot-btn__loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -160%);
  display: inline-block;
  width: 0;
  height: 0;
  border: 0.25rem solid;
  border-radius: 64px;
  animation: ot-btn-loader 0.7s infinite;
  opacity: 0;
  visibility: hidden;
  text-indent: -9999px;
  overflow: hidden;
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
@keyframes ot-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);
  }
}
.ot-btn--loading {
  pointer-events: none;
}
.ot-btn--loading .ot-btn__loader {
  opacity: 1;
  visibility: visible;
}
.ot-btn--loading .ot-svg-icon,
.ot-btn--loading .ot-btn__label {
  transform: translateY(50%);
  opacity: 0;
  visibility: hidden;
}
.ot-btn--xsmall .ot-btn__inner {
  min-height: 2rem;
  padding: 0 1rem;
}
.ot-btn--xsmall .ot-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem;
}
.ot-btn--xsmall.ot-leading-icon .ot-btn__inner {
  padding-inline-start: 0.75rem;
}
.ot-btn--xsmall.ot-trailing-icon .ot-btn__inner {
  padding-inline-end: 0.75rem;
}
.ot-btn--xsmall.ot-leading-icon .ot-svg-icon {
  margin-inline-end: 0.25rem;
}
.ot-btn--xsmall.ot-trailing-icon .ot-svg-icon {
  margin-inline-start: 0.25rem;
}
.ot-btn--small .ot-btn__inner {
  min-height: 2.5rem;
  padding: 0 1.5rem;
}
.ot-btn--small .ot-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
}
.ot-btn--small.ot-leading-icon .ot-btn__inner {
  padding-inline-start: 1rem;
}
.ot-btn--small.ot-trailing-icon .ot-btn__inner {
  padding-inline-end: 1rem;
}
.ot-btn--expanding.ot-leading-icon .ot-btn__inner, .ot-btn--expanding.ot-trailing-icon .ot-btn__inner,
.ot-btn--expanding .ot-btn__inner {
  transition-property: opacity, transform, padding;
  padding: 0 1rem;
}
.ot-btn--expanding.ot-btn--small .ot-btn__inner {
  padding: 0 0.5rem;
}
.ot-btn--expanding.ot-btn--xsmall .ot-btn__icon {
  margin: 0;
}
.ot-btn--expanding.ot-btn--xsmall .ot-btn__inner {
  padding: 0 0.25rem;
  min-height: 2rem;
}
.ot-btn--expanding.ot-btn--xsmall .ot-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem;
}
.ot-btn--expanding .ot-btn__icon {
  transition: margin-inline-end 250ms ease-in-out;
  margin: 0;
}
.ot-btn--expanding .ot-btn__inner .ot-btn__label {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: max-width 250ms ease-in-out;
  transform-origin: left;
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: initial;
}
.ot-btn--expanding:hover .ot-btn__inner .ot-btn__label, .ot-btn--expanding:focus-visible .ot-btn__inner .ot-btn__label {
  max-width: 12.5rem;
}
.ot-btn--expanding:hover.ot-leading-icon .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-leading-icon .ot-btn__inner {
  padding-inline-end: 2rem;
  padding-inline-start: 1.5rem;
}
.ot-btn--expanding:hover.ot-trailing-icon .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-trailing-icon .ot-btn__inner {
  flex-direction: row-reverse;
  padding-inline-end: 1.5rem;
  padding-inline-start: 2rem;
}
.ot-btn--expanding:hover.ot-leading-icon .ot-btn__icon, .ot-btn--expanding:focus-visible.ot-leading-icon .ot-btn__icon {
  margin-inline-end: 0.5rem;
}
.ot-btn--expanding:hover.ot-trailing-icon .ot-btn__icon, .ot-btn--expanding:focus-visible.ot-trailing-icon .ot-btn__icon {
  margin-inline-start: 0.5rem;
}
.ot-btn--expanding:hover.ot-leading-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-leading-icon.ot-btn--small .ot-btn__inner {
  padding-inline-end: 1.5rem;
  padding-inline-start: 1rem;
}
.ot-btn--expanding:hover.ot-trailing-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-trailing-icon.ot-btn--small .ot-btn__inner {
  padding-inline-end: 1rem;
  padding-inline-start: 1.5rem;
}
.ot-btn--expanding:hover.ot-leading-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-leading-icon.ot-btn--xsmall .ot-btn__inner {
  padding-inline-end: 1rem;
  padding-inline-start: 0.75rem;
}
.ot-btn--expanding:hover.ot-trailing-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-trailing-icon.ot-btn--xsmall .ot-btn__inner {
  padding-inline-end: 0.75rem;
  padding-inline-start: 1rem;
}
.ot-btn--expanding:hover.ot-leading-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding:focus-visible.ot-leading-icon.ot-btn--xsmall .ot-btn__icon {
  margin-inline-end: 0.25rem;
}
.ot-btn--expanding:hover.ot-trailing-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding:focus-visible.ot-trailing-icon.ot-btn--xsmall .ot-btn__icon {
  margin-inline-start: 0.25rem;
}
@media (hover: none) {
  .ot-btn--expanding.ot-leading-icon:hover .ot-btn__inner, .ot-btn--expanding.ot-trailing-icon:hover .ot-btn__inner {
    padding: 0 1rem;
  }
  .ot-btn--expanding.ot-leading-icon:hover .ot-btn__inner .ot-btn__label, .ot-btn--expanding.ot-trailing-icon:hover .ot-btn__inner .ot-btn__label {
    max-width: 0;
  }
  .ot-btn--expanding.ot-leading-icon:hover .ot-btn__icon, .ot-btn--expanding.ot-trailing-icon:hover .ot-btn__icon {
    margin: 0;
  }
  .ot-btn--expanding.ot-leading-icon.ot-btn--small:hover .ot-btn__inner, .ot-btn--expanding.ot-trailing-icon.ot-btn--small:hover .ot-btn__inner {
    padding: 0 0.5rem;
  }
  .ot-btn--expanding.ot-leading-icon.ot-btn--xsmall:hover .ot-btn__inner, .ot-btn--expanding.ot-trailing-icon.ot-btn--xsmall:hover .ot-btn__inner {
    padding: 0 0.25rem;
  }
  .ot-btn--expanding.ot-leading-icon.ot-btn--xsmall:hover .ot-btn__icon, .ot-btn--expanding.ot-trailing-icon.ot-btn--xsmall:hover .ot-btn__icon {
    margin: 0;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled) .ot-btn__inner .ot-btn__label, .ot-btn--expanding.ot-btn--touch-device-expanded .ot-btn__inner .ot-btn__label {
    max-width: 12.5rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-leading-icon .ot-btn__inner, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-leading-icon .ot-btn__inner {
    padding-inline-end: 2rem;
    padding-inline-start: 1.5rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-trailing-icon .ot-btn__inner, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-trailing-icon .ot-btn__inner {
    flex-direction: row-reverse;
    padding-inline-end: 1.5rem;
    padding-inline-start: 2rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-leading-icon .ot-btn__icon, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-leading-icon .ot-btn__icon {
    margin-inline-end: 0.5rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-trailing-icon .ot-btn__icon, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-trailing-icon .ot-btn__icon {
    margin-inline-start: 0.5rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-leading-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-leading-icon.ot-btn--small .ot-btn__inner {
    padding-inline-end: 1.5rem;
    padding-inline-start: 1rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-trailing-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-trailing-icon.ot-btn--small .ot-btn__inner {
    padding-inline-end: 1rem;
    padding-inline-start: 1.5rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-leading-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-leading-icon.ot-btn--xsmall .ot-btn__inner {
    padding-inline-end: 1rem;
    padding-inline-start: 0.75rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-trailing-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-trailing-icon.ot-btn--xsmall .ot-btn__inner {
    padding-inline-end: 0.75rem;
    padding-inline-start: 1rem;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-leading-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-leading-icon.ot-btn--xsmall .ot-btn__icon {
    margin: 0;
  }
  .ot-btn--expanding.ot-btn--touch-device-expanded:hover:not(:disabled).ot-trailing-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding.ot-btn--touch-device-expanded.ot-trailing-icon.ot-btn--xsmall .ot-btn__icon {
    margin: 0;
  }
}
.ot-btn--expanding:focus-visible.ot-btn--loading.ot-trailing-icon .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-btn--loading.ot-leading-icon .ot-btn__inner, .ot-btn--expanding.ot-btn--loading.ot-trailing-icon .ot-btn__inner, .ot-btn--expanding.ot-btn--loading.ot-leading-icon .ot-btn__inner, .ot-btn--expanding:disabled.ot-trailing-icon .ot-btn__inner, .ot-btn--expanding:disabled.ot-leading-icon .ot-btn__inner {
  padding: 0 1rem;
}
.ot-btn--expanding:focus-visible.ot-btn--loading.ot-trailing-icon .ot-btn__inner .ot-btn__label, .ot-btn--expanding:focus-visible.ot-btn--loading.ot-leading-icon .ot-btn__inner .ot-btn__label, .ot-btn--expanding.ot-btn--loading.ot-trailing-icon .ot-btn__inner .ot-btn__label, .ot-btn--expanding.ot-btn--loading.ot-leading-icon .ot-btn__inner .ot-btn__label, .ot-btn--expanding:disabled.ot-trailing-icon .ot-btn__inner .ot-btn__label, .ot-btn--expanding:disabled.ot-leading-icon .ot-btn__inner .ot-btn__label {
  max-width: 0;
}
.ot-btn--expanding:focus-visible.ot-btn--loading.ot-trailing-icon .ot-btn__icon, .ot-btn--expanding:focus-visible.ot-btn--loading.ot-leading-icon .ot-btn__icon, .ot-btn--expanding.ot-btn--loading.ot-trailing-icon .ot-btn__icon, .ot-btn--expanding.ot-btn--loading.ot-leading-icon .ot-btn__icon, .ot-btn--expanding:disabled.ot-trailing-icon .ot-btn__icon, .ot-btn--expanding:disabled.ot-leading-icon .ot-btn__icon {
  margin: 0;
}
.ot-btn--expanding:focus-visible.ot-btn--loading.ot-trailing-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-btn--loading.ot-leading-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding.ot-btn--loading.ot-trailing-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding.ot-btn--loading.ot-leading-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding:disabled.ot-trailing-icon.ot-btn--small .ot-btn__inner, .ot-btn--expanding:disabled.ot-leading-icon.ot-btn--small .ot-btn__inner {
  padding: 0 0.5rem;
}
.ot-btn--expanding:focus-visible.ot-btn--loading.ot-trailing-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding:focus-visible.ot-btn--loading.ot-leading-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding.ot-btn--loading.ot-trailing-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding.ot-btn--loading.ot-leading-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding:disabled.ot-trailing-icon.ot-btn--xsmall .ot-btn__inner, .ot-btn--expanding:disabled.ot-leading-icon.ot-btn--xsmall .ot-btn__inner {
  padding: 0 0.25rem;
}
.ot-btn--expanding:focus-visible.ot-btn--loading.ot-trailing-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding:focus-visible.ot-btn--loading.ot-leading-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding.ot-btn--loading.ot-trailing-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding.ot-btn--loading.ot-leading-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding:disabled.ot-trailing-icon.ot-btn--xsmall .ot-btn__icon, .ot-btn--expanding:disabled.ot-leading-icon.ot-btn--xsmall .ot-btn__icon {
  margin: 0;
}
.ot-btn--fluid, .ot-btn--fluid .ot-btn__inner {
  width: 100%;
}
.ot-btn--plain.ot-btn--small .ot-btn__inner::after, .ot-btn--plain .ot-btn__inner::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  right: -0.25rem;
  bottom: -0.25rem;
}
.ot-btn--plain {
  --background: transparent;
  --background-hover: transparent;
  --background-press: transparent;
  --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-btn--plain.ot-btn--small .ot-btn__inner,
.ot-btn--plain .ot-btn__inner, .ot-btn--plain.ot-leading-icon .ot-btn__inner, .ot-btn--plain.ot-trailing-icon .ot-btn__inner {
  padding: 0;
}
.ot-btn .ot-svg-icon, .ot-btn__label {
  transition-property: opacity, margin-right, margin-left, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}.ot-inline-message {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: auto;
  background-color: rgb(var(--colour-elevation-1, 255, 255, 255));
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 0 solid rgb(var(--colour-elevation-1-border, 223, 223, 223));
  border-inline-start-width: 0.25rem;
  padding: 1rem 0;
  padding-inline-end: 0.5rem;
  min-height: 1.5rem;
  text-align: start;
  box-sizing: border-box;
}
.ot-inline-message a {
  text-decoration: underline;
}
.ot-inline-message__content {
  width: 100%;
  padding-inline-end: 1.5rem;
  min-width: 0;
  overflow-wrap: break-word;
}
.ot-inline-message .ot-inline-message__body {
  margin: 0;
}
.ot-inline-message__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.ot-inline-message__actions .ot-btn:last-child {
  margin-inline-start: 0.25rem;
}
.ot-inline-message__close-button {
  margin-top: -0.5rem;
}
.ot-inline-message .ot-inline-message__title {
  padding-bottom: 0.25rem;
  margin: 0;
}
.ot-inline-message__icon {
  flex-shrink: 0;
  margin-inline-start: 0.75rem;
  margin-inline-end: 0.75rem;
}
.ot-inline-message--dismissable .ot-inline-message__content {
  padding-inline-end: 0.5rem;
}
.ot-inline-message--icon-hidden {
  padding-inline-start: 0.75rem;
}
.ot-inline-message--subtle {
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  background: none;
}
.ot-inline-message--subtle .ot-inline-message__close-button {
  margin-top: -0.25rem;
}
.ot-inline-message--subtle .ot-inline-message__icon {
  margin-inline-start: 0;
}
.ot-inline-message--closed {
  transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
  padding-top: 0;
  padding-bottom: 0;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  min-height: 0;
}
.ot-inline-message--collapsed {
  display: none;
}
.ot-inline-message--informative {
  border-inline-start-color: rgb(var(--colour-semantic-informative, 0, 88, 163));
}
.ot-inline-message--informative .ot-inline-message__icon {
  color: rgb(var(--colour-semantic-informative, 0, 88, 163));
}
.ot-inline-message--positive {
  border-inline-start-color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-inline-message--positive .ot-inline-message__icon {
  color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-inline-message--cautionary {
  border-inline-start-color: rgb(var(--colour-semantic-caution, 242, 106, 47));
}
.ot-inline-message--cautionary .ot-inline-message__icon {
  color: rgb(var(--colour-semantic-caution, 242, 106, 47));
}
.ot-inline-message--negative {
  border-inline-start-color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-inline-message--negative .ot-inline-message__icon {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}

@media (prefers-contrast: more) {
  .ot-inline-message {
    border-block-start-width: 1px;
    border-block-end-width: 1px;
    border-inline-end-width: 1px;
  }
}:focus:not(:focus-visible) {
  outline: none;
}

a:where([class*=ot-]):focus-visible,
button:where([class*=ot-]):focus-visible,
[role=button]:where([class*=ot-]):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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

a:where([class*=ot-]):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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-checkbox input[type=checkbox]:focus-visible ~ .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-checkbox input[type=checkbox]:focus-visible:hover ~ .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-radio input[type=radio]:focus-visible ~ .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-radio input[type=radio]:focus-visible:hover ~ .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-btn:focus-visible,
.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-shoppable-image__category-link:focus-visible,
.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-tabs__tab:focus-visible {
  box-shadow: none;
  outline: none;
}
.ot-tabs__tab:focus-visible::before {
  bottom: 2px;
  z-index: unset;
}
.ot-tabs__tab:focus-visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
  border-radius: 4px;
}

.ot-dual-btn--secondary .ot-dual-btn__first:focus-visible,
.ot-dual-btn--secondary .ot-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: 200ms;
  transition-timing-function: ease-out;
}
.ot-dual-btn__first:focus-visible:hover, .ot-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));
}
.ot-dual-btn--primary .ot-dual-btn__first:focus-visible,
.ot-dual-btn--primary .ot-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: 200ms;
  transition-timing-function: ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-card:focus-visible .ot-card__title {
  text-decoration: none;
}
.ot-card:focus-visible p {
  box-shadow: none;
  outline: none;
}

.ot-content-card .ot-content-card__headers:focus-visible {
  box-shadow: none;
  outline: none;
}
.ot-content-card .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-choice-item__radio:focus-visible, .ot-choice-item__action:focus-visible {
  box-shadow: none;
  outline: none;
}
.ot-choice-item__radio:focus-visible ~ .ot-choice-item__border::before, .ot-choice-item__action:focus-visible ~ .ot-choice-item__border::before {
  content: "";
  position: absolute;
  top: -0.125rem;
  right: -0.125rem;
  bottom: -0.125rem;
  left: -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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
  border-radius: 4px;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-jumbo-btn.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-switch input[type=checkbox]:focus-visible + .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-switch input[type=checkbox]:focus-visible:hover + .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-tooltip__trigger-button:focus-visible,
.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-search .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
  border-radius: 4px;
}
.ot-search .ot-search__scope:focus-visible,
.ot-search .ot-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;
}
.ot-search .ot-search__input:focus-visible {
  outline: 0;
}
.ot-search .ot-search__input:-webkit-autofill:focus-visible {
  box-shadow: 0 0 0 3rem rgb(var(--colour-neutral-1, 255, 255, 255)) inset;
  transition: box-shadow 0ms cubic-bezier(0.4, 0, 0.4, 1);
  caret-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}

.ot-toast .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-action-list-item__action: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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
  outline: none;
  box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}

.ot-overflow-carousel .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-modal-header .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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));
}

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

button.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}/* Default icon size */
.ot-leading-icon .ot-svg-icon {
  margin-inline-end: 0.5rem;
  vertical-align: top;
}
.ot-leading-icon .ot-svg-icon--100 {
  margin-inline-end: 0.25rem;
}

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

.ot-svg-icon {
  display: inline-block;
  height: 1.5rem;
  width: 1.5rem;
  vertical-align: middle;
  fill: currentColor;
  transition-property: transform, fill;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
@media (prefers-reduced-motion) {
  .ot-svg-icon {
    transition-property: none;
  }
}

@keyframes ot-icon-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.ot-svg-icon--rotate {
  animation: ot-icon-rotate 1.5s linear infinite;
}

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

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

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

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

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

.ot-svg-icon--rotate-minus-180 {
  transform: rotate(-180deg);
}.ot-link {
  text-decoration: underline;
  font-weight: 400;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-link:focus, .ot-link:hover, .ot-link:active {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}

.ot-link--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
}
.ot-link--disabled:focus::before {
  border: 0;
}

.ot-link--black {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-link--black:hover, .ot-link--black:focus, .ot-link--black:active {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-link--black.ot-link--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-link--black.ot-link--disabled:hover {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-link--black.ot-link--disabled:focus, .ot-link--black.ot-link--disabled:active {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-link--black.ot-link--disabled:focus::before {
  border: 0;
}

.ot-link--grey {
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
}
.ot-link--grey:hover, .ot-link--grey:focus, .ot-link--grey:active {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-link--grey.ot-link--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-link--grey.ot-link--disabled:hover {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-link--grey.ot-link--disabled:focus, .ot-link--grey.ot-link--disabled:active {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-link--grey.ot-link--disabled:focus::before {
  border: 0;
}

.ot-link--white {
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-link--white:hover, .ot-link--white:focus, .ot-link--white:active {
  color: rgb(var(--colour-static-light-grey, 245, 245, 245));
}
.ot-link--white.ot-link--disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.4;
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-link--white.ot-link--disabled:hover {
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-link--white.ot-link--disabled:focus, .ot-link--white.ot-link--disabled:active {
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-link--white.ot-link--disabled:focus::before {
  border: 0;
}

.ot-link--subtle {
  text-decoration: none;
}
.ot-link--subtle:focus, .ot-link--subtle:hover, .ot-link--subtle:active {
  text-decoration: underline;
}

h1 .ot-link,
h2 .ot-link,
h3 .ot-link,
h4 .ot-link,
h5 .ot-link,
h6 .ot-link,
p .ot-link {
  margin-bottom: 0;
  text-decoration: underline;
}
h1 .ot-link .ot-svg-icon,
h2 .ot-link .ot-svg-icon,
h3 .ot-link .ot-svg-icon,
h4 .ot-link .ot-svg-icon,
h5 .ot-link .ot-svg-icon,
h6 .ot-link .ot-svg-icon,
p .ot-link .ot-svg-icon {
  vertical-align: middle;
}
h1 .ot-link:hover, h1 .ot-link:focus, h1 .ot-link:active,
h2 .ot-link:hover,
h2 .ot-link:focus,
h2 .ot-link:active,
h3 .ot-link:hover,
h3 .ot-link:focus,
h3 .ot-link:active,
h4 .ot-link:hover,
h4 .ot-link:focus,
h4 .ot-link:active,
h5 .ot-link:hover,
h5 .ot-link:focus,
h5 .ot-link:active,
h6 .ot-link:hover,
h6 .ot-link:focus,
h6 .ot-link:active,
p .ot-link:hover,
p .ot-link:focus,
p .ot-link:active {
  text-decoration: underline;
}
h1 .ot-link--subtle,
h2 .ot-link--subtle,
h3 .ot-link--subtle,
h4 .ot-link--subtle,
h5 .ot-link--subtle,
h6 .ot-link--subtle,
p .ot-link--subtle {
  text-decoration: none;
}
h1 .ot-link--subtle:focus, h1 .ot-link--subtle:hover, h1 .ot-link--subtle:active,
h2 .ot-link--subtle:focus,
h2 .ot-link--subtle:hover,
h2 .ot-link--subtle:active,
h3 .ot-link--subtle:focus,
h3 .ot-link--subtle:hover,
h3 .ot-link--subtle:active,
h4 .ot-link--subtle:focus,
h4 .ot-link--subtle:hover,
h4 .ot-link--subtle:active,
h5 .ot-link--subtle:focus,
h5 .ot-link--subtle:hover,
h5 .ot-link--subtle:active,
h6 .ot-link--subtle:focus,
h6 .ot-link--subtle:hover,
h6 .ot-link--subtle:active,
p .ot-link--subtle:focus,
p .ot-link--subtle:hover,
p .ot-link--subtle:active {
  text-decoration: underline;
}.ot-form-field {
  display: block;
  margin-bottom: 1.25rem;
}
.ot-form-field__content {
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.ot-form-field--with-character-limit .ot-form-field__content > *:not(:first-child) {
  padding-inline-start: 0.5rem;
}
.ot-form-field > .ot-checkbox,
.ot-form-field > .ot-radiobutton,
.ot-form-field fieldset {
  margin-bottom: 0.5rem;
}
.ot-form-field legend {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}

.ot-helper-text {
  display: inline-flex;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  align-items: center;
}
.ot-helper-text .ot-helper-text__icon.ot-svg-icon {
  height: 1.125rem;
  width: 1.125rem;
  margin-inline-end: 0.25rem;
  vertical-align: bottom;
  flex: 0 0 auto;
}
.ot-helper-text--character-count {
  font-variant-numeric: tabular-nums;
}
.ot-helper-text--error {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-helper-text--success {
  color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-helper-text--warning {
  color: rgb(var(--colour-semantic-caution-text, 202, 80, 8));
}
.ot-helper-text--text-only {
  margin-inline-start: 0;
}
.ot-helper-text--text-only .ot-helper-text__icon {
  display: none;
}

.ot-validation-border {
  --skapa-validation-border-colour: rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  --skapa-validation-border: 1px solid var(--skapa-validation-border-colour);
  --skapa-validation-border-default: var(--skapa-validation-border);
  --skapa-validation-border-focus-border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
  pointer-events: none;
  transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.4, 1), border 100ms cubic-bezier(0.4, 0, 0.4, 1);
  border-radius: 4px;
  box-sizing: border-box;
}
.ot-validation-border--warning {
  border-color: rgb(var(--colour-semantic-caution, 242, 106, 47));
}
.ot-validation-border--error {
  border-color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-validation-border--success {
  border-color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-validation-border--disabled {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  box-shadow: none;
}
.ot-validation-border--read-only {
  --skapa-validation-border-default: transparent;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
}

@media (forced-colors: active) {
  .ot-validation-border {
    border-color: GrayText;
  }
}
.ot-input-field__wrapper {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
  border-radius: 4px;
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}
.ot-input-field__wrapper > * {
  padding-inline-start: 0.125rem;
  padding-inline-end: 0.125rem;
}
.ot-input-field__prefix-label, .ot-input-field__suffix-label {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  opacity: 0;
  visibility: hidden;
  flex-shrink: 0;
  transition: opacity 100ms cubic-bezier(0.4, 0, 0.4, 1), visibility 100ms cubic-bezier(0.4, 0, 0.4, 1);
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-input-field__prefix-label {
  order: 2;
}
.ot-input-field__suffix-label {
  text-align: right;
  order: 4;
}
.ot-input-field__payment-logo {
  order: 5;
  margin-inline-end: 0.3125rem;
  margin-inline-start: 0.3125rem;
  flex-shrink: 0;
}
.ot-input-field input {
  flex-grow: 1;
  border: 0;
  background: none;
  padding-top: 0;
  padding-bottom: 0;
  height: 3rem;
  overflow: hidden;
  order: 3;
  outline: none;
  border-radius: 4px;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  min-width: 1ch; /** Prevents firefox suffix overflow glitch. The 1ch is was chosen as the minimum as it represents one of the most compact use cases: numbers: 0-9 */
}
.ot-input-field input::-ms-clear {
  display: none;
}
.ot-input-field input:-webkit-autofill {
  font-family: inherit;
  -webkit-text-fill-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  -webkit-box-shadow: 0 0 0 3rem rgb(var(--colour-neutral-1, 255, 255, 255)) inset;
}
.ot-input-field input:focus ~ .ot-validation-border {
  --skapa-validation-border-default: initial;
}
.ot-input-field input[type=hidden] ~ .ot-validation-border,
.ot-input-field input[type=hidden] ~ .ot-input-field__leading-icon,
.ot-input-field input[type=hidden] ~ .ot-input-field__trailing-icon {
  display: none;
}
.ot-input-field input[type=password]::-ms-reveal {
  display: none;
}
.ot-input-field input[type=date] {
  color: transparent;
}
.ot-input-field input[type=date]:focus {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-input-field input[type=date]:disabled {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-input-field input[type=date]::-webkit-calendar-picker-indicator {
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  background-image: none;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 10V8H6v3h12V8h-2v2h-2V8h-4v2H8zm10 3H6v5h12v-5zM6 6h2V4h2v2h4V4h2v2h4v14H4V6h2z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 10V8H6v3h12V8h-2v2h-2V8h-4v2H8zm10 3H6v5h12v-5zM6 6h2V4h2v2h4V4h2v2h4v14H4V6h2z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  cursor: pointer;
  border: none;
}
.ot-input-field--labelled input[type=date] {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-input-field input:focus ~ .ot-input-field__prefix-label,
.ot-input-field input:focus ~ .ot-input-field__suffix-label, .ot-input-field--labelled .ot-input-field__prefix-label, .ot-input-field--labelled .ot-input-field__suffix-label {
  opacity: 1;
  transition-delay: 33ms;
  visibility: visible;
  position: static;
  clip: none;
  width: auto;
  height: auto;
}
.ot-input-field .ot-btn {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-input-field .ot-btn:disabled {
  pointer-events: none;
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-input-field .ot-btn:disabled .ot-btn__inner {
  border: 0;
  background: none;
}
.ot-input-field__leading-icon {
  flex-shrink: 0;
  order: 1;
}
.ot-input-field__trailing-icon {
  flex-shrink: 0;
  order: 5;
}
.ot-input-field label {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-input-field--disabled label,
.ot-input-field--disabled input,
.ot-input-field--disabled .ot-svg-icon,
.ot-input-field--disabled .ot-input-field__suffix-label,
.ot-input-field--disabled .ot-input-field__prefix-label {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-input-field--disabled .ot-input-field__payment-logo {
  opacity: 0.2;
}
.ot-input-field--disabled input:-webkit-autofill {
  -webkit-text-fill-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-input-field--read-only .ot-input-field__wrapper {
  background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
}

@supports (-webkit-hyphens: none) and (not (-moz-appearance: none)) {
  .ot-input-field input[type=date]::-webkit-datetime-edit-month-field:focus, .ot-input-field input[type=date]::-webkit-datetime-edit-day-field:focus, .ot-input-field input[type=date]::-webkit-datetime-edit-year-field:focus {
    background-color: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
    -webkit-text-fill-color: rgb(var(--colour-static-white, 255, 255, 255));
  }
  .ot-input-field input[type=date]:focus {
    -webkit-text-fill-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  }
  .ot-input-field input[type=date]:focus::-webkit-datetime-edit-text:focus, .ot-input-field input[type=date]:focus::-webkit-datetime-edit-month-field:focus, .ot-input-field input[type=date]:focus::-webkit-datetime-edit-day-field:focus, .ot-input-field input[type=date]:focus::-webkit-datetime-edit-year-field:focus {
    -webkit-text-fill-color: rgb(var(--colour-static-white, 255, 255, 255));
  }
}
.ot-input-field input[type=date]:focus {
  -webkit-text-fill-color: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
}

[dir=rtl] .ot-input-field input[type=tel] {
  direction: ltr;
  text-align: right;
}
[dir=rtl] input[type=date] {
  text-align: right;
}
[dir=rtl] input[type=date]::-webkit-calendar-picker-indicator {
  position: absolute;
}

@media (forced-colors: active) {
  .ot-input-field--disabled label,
  .ot-input-field--disabled input,
  .ot-input-field--disabled .ot-svg-icon,
  .ot-input-field--disabled .ot-input-field__suffix-label,
  .ot-input-field--disabled .ot-input-field__prefix-label,
  .ot-input-field--read-only label,
  .ot-input-field--read-only input,
  .ot-input-field--read-only .ot-svg-icon,
  .ot-input-field--read-only .ot-input-field__suffix-label,
  .ot-input-field--read-only .ot-input-field__prefix-label {
    color: GrayText;
  }
}
.ot-label-wrapper--text-input > label {
  display: block;
  margin: 0 0 0.25rem 0;
}
.ot-label-wrapper .ot-required {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-label-wrapper .ot-label-asterisk {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-label-wrapper > label em {
  margin: 0;
  color: rgb(var(--colour-text-and-icon-4, 146, 146, 146));
  font-style: normal;
}

.ot-validation-border {
  --skapa-validation-border-colour: rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  --skapa-validation-border: 1px solid var(--skapa-validation-border-colour);
  --skapa-validation-border-default: var(--skapa-validation-border);
  --skapa-validation-border-focus-border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
  pointer-events: none;
  transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.4, 1), border 100ms cubic-bezier(0.4, 0, 0.4, 1);
  border-radius: 4px;
  box-sizing: border-box;
}
.ot-validation-border--warning {
  border-color: rgb(var(--colour-semantic-caution, 242, 106, 47));
}
.ot-validation-border--error {
  border-color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-validation-border--success {
  border-color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-validation-border--disabled {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  box-shadow: none;
}
.ot-validation-border--read-only {
  --skapa-validation-border-default: transparent;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
}

@media (forced-colors: active) {
  .ot-validation-border {
    border-color: GrayText;
  }
}
.ot-text-area__wrapper {
  position: relative;
  display: flex;
  width: 100%;
  align-items: flex-end;
  flex-wrap: wrap;
}
.ot-text-area label {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-text-area textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.3125rem;
  line-height: 1.625;
  max-width: 100%;
  min-height: 6rem;
  outline: none;
  border: 0.1875rem solid transparent;
  resize: vertical;
  border-radius: 4px;
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-text-area textarea:disabled {
  resize: none;
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-text-area textarea:focus ~ .ot-validation-border {
  --skapa-validation-border-default: initial;
}
.ot-text-area--disabled label {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-text-area--read-only textarea {
  background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
}

@media (forced-colors: active) {
  .ot-text-area textarea {
    padding: 0.5rem;
    border-width: 0;
  }
  .ot-text-area textarea:disabled {
    color: GrayText;
  }
  .ot-text-area--disabled label {
    color: GrayText;
  }
}
fieldset {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
fieldset legend {
  margin-bottom: 1rem;
  -webkit-padding-start: 0;
  -webkit-padding-end: 0;
  font-weight: 700;
}

.ot-validation-border {
  --skapa-validation-border-colour: rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  --skapa-validation-border: 1px solid var(--skapa-validation-border-colour);
  --skapa-validation-border-default: var(--skapa-validation-border);
  --skapa-validation-border-focus-border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
  pointer-events: none;
  transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.4, 1), border 100ms cubic-bezier(0.4, 0, 0.4, 1);
  border-radius: 4px;
  box-sizing: border-box;
}
.ot-validation-border--warning {
  border-color: rgb(var(--colour-semantic-caution, 242, 106, 47));
}
.ot-validation-border--error {
  border-color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-validation-border--success {
  border-color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-validation-border--disabled {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  box-shadow: none;
}
.ot-validation-border--read-only {
  --skapa-validation-border-default: transparent;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
}

@media (forced-colors: active) {
  .ot-validation-border {
    border-color: GrayText;
  }
}
.ot-select__wrapper {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
}
.ot-select select {
  width: 100%;
  min-height: 3rem;
  border: 0;
  background: none;
  padding: 0.75rem;
  padding-inline-end: 3rem;
  padding-inline-start: 0.5rem;
  overflow: hidden;
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  order: 2;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  border-radius: 4px;
  white-space: normal;
}
.ot-select select:disabled, .ot-select select:disabled ~ label, .ot-select select:disabled ~ .ot-svg-icon {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  opacity: 1;
}
.ot-select select:focus ~ .ot-validation-border {
  --skapa-validation-border-default: initial;
}
.ot-select label,
.ot-select optgroup {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-select select::-ms-expand {
  display: none;
}
.ot-select__chevron-down {
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
[dir=rtl] .ot-select__chevron-down {
  left: 0.5rem;
  right: auto;
}
.ot-select__chevron-down {
  position: absolute;
  bottom: 0.25rem;
}
.ot-select label,
.ot-select .ot-svg-icon {
  pointer-events: none;
}
.ot-select__icon {
  flex-shrink: 0;
  order: 1;
}
.ot-select--hint select {
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
}
.ot-select--leading-icon select {
  padding-inline-start: 2.25rem;
}
.ot-select--leading-icon .ot-select__icon {
  margin-inline-start: 0.5rem;
  position: absolute;
}
.ot-select--disabled label {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}

@media (forced-colors: active) {
  .ot-select--disabled label {
    color: GrayText;
  }
}
.ot-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.ot-radio > input[type=radio] {
  position: absolute;
  left: -0.625rem;
  top: -0.625rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-block;
  border: 0;
  opacity: 0;
  padding: 0;
  z-index: 1;
  cursor: pointer;
}
[dir=rtl] .ot-radio > input[type=radio] {
  right: -0.625rem;
  left: initial;
}
.ot-radio > .ot-radio__symbol {
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
  border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  border-radius: 64px;
  flex-shrink: 0;
}
.ot-radio > .ot-radio__symbol::after {
  content: "";
  display: block;
  border: 0 solid;
  border-radius: 64px;
  height: 0;
  width: 0;
}
.ot-radio > .ot-radio__label {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 0.1875rem;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-radio > .ot-radio__label > .ot-radio__caption {
  display: flex;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  padding-top: 0.25rem;
}
.ot-radio label {
  display: inline-block;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  padding-inline-start: 1rem;
}
.ot-radio input[type=radio]:hover ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17));
}
.ot-radio input[type=radio]:hover ~ .ot-radio__symbol::after {
  border-width: 0.25rem;
  border-color: rgb(var(--colour-neutral-3, 223, 223, 223));
}
.ot-radio input[type=radio]:checked:hover:not(:disabled) ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
}
.ot-radio input[type=radio]:checked:hover:not(:disabled) ~ .ot-radio__symbol::after {
  border-color: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
}
.ot-radio--subtle > input[type=radio]:checked:hover:not(:disabled) ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-radio--subtle > input[type=radio]:checked:hover:not(:disabled) ~ .ot-radio__symbol::after {
  border-color: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
}
.ot-radio input[type=radio]:checked ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
}
.ot-radio input[type=radio]:checked ~ .ot-radio__symbol::after {
  border-width: 0.5rem;
  border-color: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
}
.ot-radio--subtle > input[type=radio]:checked ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-radio--subtle > input[type=radio]:checked ~ .ot-radio__symbol::after {
  border-color: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
}
.ot-radio input[type=radio]:disabled {
  pointer-events: none;
}
.ot-radio input[type=radio]:disabled ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-radio input[type=radio]:disabled:checked ~ .ot-radio__symbol::after {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-radio input[type=radio]:disabled:not(:checked) ~ .ot-radio__symbol::after {
  display: none;
}
.ot-radio input[type=radio]:disabled ~ .ot-radio__label label {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  cursor: not-allowed;
  pointer-events: none;
}
.ot-radio input[type=radio]:disabled ~ .ot-radio__label a {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
@media (forced-colors: active) {
  .ot-radio input[type=radio]:disabled ~ .ot-radio__symbol, .ot-radio input[type=radio]:disabled:checked ~ .ot-radio__symbol::after {
    border-color: GrayText;
  }
  .ot-radio input[type=radio]:disabled ~ .ot-radio__label label,
  .ot-radio input[type=radio]:disabled ~ .ot-radio__label a {
    color: GrayText;
  }
}
.ot-radio input[type=radio]:active:not(:disabled) ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
}
.ot-radio input[type=radio]:active:not(:disabled) ~ .ot-radio__symbol::after {
  border-width: 0.5rem;
  border-color: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114));
}
.ot-radio--subtle > input[type=radio]:active:not(:disabled) ~ .ot-radio__symbol {
  border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-radio--subtle > input[type=radio]:active:not(:disabled) ~ .ot-radio__symbol::after {
  border-color: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
}

.ot-checkbox-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.ot-checkbox-group .ot-checkbox:not(:last-child) {
  margin-bottom: 1.5rem;
}
.ot-checkbox-group--asterisk {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}

.ot-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
}
.ot-checkbox input[type=checkbox] {
  position: absolute;
  left: -0.625rem;
  top: -0.625rem;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-block;
  border: 0;
  opacity: 0;
  padding: 0;
  z-index: 1;
  cursor: pointer;
}
[dir=rtl] .ot-checkbox input[type=checkbox] {
  right: -0.625rem;
  left: initial;
}
.ot-checkbox__symbol {
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  width: 1.5rem;
  height: 1.5rem;
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ot-checkbox__symbol::before {
  transform: rotate(45deg);
  content: "";
  box-sizing: content-box;
  display: block;
  border: 2px solid currentColor;
  border-left: 0;
  border-top: 0;
  height: 0.5625rem;
  width: 0.25rem;
  opacity: 0;
  margin-top: -0.25rem;
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-checkbox__symbol::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.625rem;
  border: 2px solid currentColor;
  border-left: 0;
  border-top: 0;
  border-right: 0;
  opacity: 0;
  color: rgb(var(--colour-static-white, 255, 255, 255));
  width: 0.875rem;
}
[dir=rtl] .ot-checkbox__symbol {
  right: 0;
  left: initial;
}
.ot-checkbox__label {
  position: relative;
  display: flex;
  flex-direction: column;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  margin-top: 0.1875rem;
}
.ot-checkbox .ot-label-asterisk {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-checkbox__caption {
  display: flex;
  padding-top: 0.25rem;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
}
.ot-checkbox label {
  display: inline-block;
  cursor: pointer;
  padding-inline-start: 1rem;
  transition: color 200ms ease-in-out;
}
.ot-checkbox input[type=checkbox]:checked ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
  border-color: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
}
.ot-checkbox input[type=checkbox]:checked ~ .ot-checkbox__symbol::before {
  opacity: 1;
}
.ot-checkbox input[type=checkbox]:indeterminate ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
  border-color: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
}
.ot-checkbox input[type=checkbox]:indeterminate ~ .ot-checkbox__symbol::after {
  opacity: 1;
}
.ot-checkbox input[type=checkbox]:hover ~ .ot-checkbox__symbol {
  border-color: rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17));
}
.ot-checkbox input[type=checkbox]:hover ~ .ot-checkbox__symbol::before {
  color: rgb(var(--colour-neutral-3, 223, 223, 223));
  opacity: 1;
}
@media (hover: none) {
  .ot-checkbox input[type=checkbox]:hover ~ .ot-checkbox__symbol::before {
    color: rgb(var(--colour-neutral-3, 223, 223, 223));
  }
}
.ot-checkbox input[type=checkbox]:hover:checked ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
  border-color: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
}
.ot-checkbox input[type=checkbox]:hover:checked ~ .ot-checkbox__symbol::before {
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-checkbox input[type=checkbox]:hover:indeterminate ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
  border-color: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
}
.ot-checkbox input[type=checkbox]:hover:indeterminate ~ .ot-checkbox__symbol::before {
  opacity: 0;
}
.ot-checkbox--subtle input[type=checkbox] ~ .ot-checkbox__symbol::before,
.ot-checkbox--subtle input[type=checkbox] ~ .ot-checkbox__symbol::after {
  color: rgb(var(--colour-neutral-1, 255, 255, 255));
}
.ot-checkbox--subtle input[type=checkbox]:checked ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
  border-color: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
}
.ot-checkbox--subtle input[type=checkbox]:hover:checked ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
  border-color: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
}
.ot-checkbox--subtle input[type=checkbox]:hover:checked ~ .ot-checkbox__symbol::after,
.ot-checkbox--subtle input[type=checkbox]:hover:checked ~ .ot-checkbox__symbol::before {
  color: rgb(var(--colour-neutral-1, 255, 255, 255));
}
.ot-checkbox--subtle input[type=checkbox]:indeterminate ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
  border-color: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
}
.ot-checkbox--subtle input[type=checkbox]:hover:indeterminate ~ .ot-checkbox__symbol {
  background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
  border-color: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
}
.ot-checkbox input[type=checkbox]:disabled {
  pointer-events: none;
}
.ot-checkbox input[type=checkbox]:disabled ~ .ot-checkbox__symbol {
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-checkbox input[type=checkbox]:disabled:hover {
  cursor: default;
}
.ot-checkbox input[type=checkbox]:disabled:checked ~ .ot-checkbox__symbol, .ot-checkbox input[type=checkbox]:disabled:indeterminate ~ .ot-checkbox__symbol {
  background-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-checkbox input[type=checkbox]:disabled:checked ~ .ot-checkbox__symbol::before, .ot-checkbox input[type=checkbox]:disabled:checked ~ .ot-checkbox__symbol::after, .ot-checkbox input[type=checkbox]:disabled:indeterminate ~ .ot-checkbox__symbol::before, .ot-checkbox input[type=checkbox]:disabled:indeterminate ~ .ot-checkbox__symbol::after {
  border-color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
}
.ot-checkbox input[type=checkbox]:disabled ~ .ot-checkbox__label label {
  cursor: default;
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  pointer-events: none;
}
.ot-checkbox input[type=checkbox]:disabled ~ .ot-checkbox__label a {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
@media (forced-colors: active) {
  .ot-checkbox input[type=checkbox]:disabled ~ .ot-checkbox__symbol {
    border-color: GrayText;
  }
  .ot-checkbox input[type=checkbox]:disabled:checked ~ .ot-checkbox__symbol::before, .ot-checkbox input[type=checkbox]:disabled:checked ~ .ot-checkbox__symbol::after, .ot-checkbox input[type=checkbox]:disabled:indeterminate ~ .ot-checkbox__symbol::before, .ot-checkbox input[type=checkbox]:disabled:indeterminate ~ .ot-checkbox__symbol::after {
    border-color: GrayText;
  }
  .ot-checkbox input[type=checkbox]:disabled ~ .ot-checkbox__label label,
  .ot-checkbox input[type=checkbox]:disabled ~ .ot-checkbox__label a {
    color: GrayText;
  }
}

.ot-checkbox-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.ot-checkbox-group .ot-checkbox:not(:last-child) {
  margin-bottom: 1.5rem;
}
.ot-checkbox-group--asterisk {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}

.ot-radio-button-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.ot-radio-button-group .ot-radio:not(:last-child) {
  margin-bottom: 1.5rem;
}
.ot-radio-button-group--asterisk {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}

[dir=rtl] .ot-radio-button-group .ot-radio {
  margin-right: 0;
  margin-left: 2rem;
}

.ot-disabled .ot-form-field__message,
.ot-disabled .ot-form-field__character-limit {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}

@media (forced-colors: active) {
  .ot-disabled .ot-form-field__message,
  .ot-disabled .ot-form-field__character-limit {
    color: GrayText;
  }
}.ot-aspect-ratio-box {
  width: 100%;
  position: relative;
  height: auto;
  display: block;
  padding-bottom: 75%;
  box-sizing: border-box;
}
.ot-aspect-ratio-box[class*="--standard"], .ot-aspect-ratio-box[class*="--4-3"] {
  padding-bottom: 75%;
}
.ot-aspect-ratio-box[class*="--square"], .ot-aspect-ratio-box[class*="--1-1"] {
  padding-bottom: 100%;
}
.ot-aspect-ratio-box[class*="--wide"], .ot-aspect-ratio-box[class*="--16-9"] {
  padding-bottom: 56.25%;
}
.ot-aspect-ratio-box[class*="--portrait"], .ot-aspect-ratio-box[class*="--3-4"] {
  padding-bottom: 133.3333333333%;
}
.ot-aspect-ratio-box[class*="--semiportrait"], .ot-aspect-ratio-box[class*="--6-7"] {
  padding-bottom: 116.6666666667%;
}
.ot-aspect-ratio-box[class*="--9-16"] {
  padding-bottom: 177.7777777778%;
}
.ot-aspect-ratio-box[class*="--4-5"] {
  padding-bottom: 125%;
}
.ot-aspect-ratio-box .ot-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  padding: 0;
}

@media (min-width: 37.5em) {
  .ot-aspect-ratio-box[class*=to-standard-from-md], .ot-aspect-ratio-box[class*=to-4-3-from-md] {
    padding-bottom: 75%;
  }
  .ot-aspect-ratio-box[class*=to-square-from-md], .ot-aspect-ratio-box[class*=to-1-1-from-md] {
    padding-bottom: 100%;
  }
  .ot-aspect-ratio-box[class*=to-wide-from-md], .ot-aspect-ratio-box[class*=to-16-9-from-md] {
    padding-bottom: 56.25%;
  }
  .ot-aspect-ratio-box[class*=to-portrait-from-md], .ot-aspect-ratio-box[class*=to-3-4-from-md] {
    padding-bottom: 133.3333333333%;
  }
  .ot-aspect-ratio-box[class*=to-semiportrait-from-md], .ot-aspect-ratio-box[class*=to-6-7-from-md] {
    padding-bottom: 116.6666666667%;
  }
  .ot-aspect-ratio-box[class*=to-9-16-from-md] {
    padding-bottom: 177.7777777778%;
  }
  .ot-aspect-ratio-box[class*=to-4-5-from-md] {
    padding-bottom: 125%;
  }
}
@media (min-width: 56.25em) {
  .ot-aspect-ratio-box[class*=to-standard-from-lg], .ot-aspect-ratio-box[class*=to-4-3-from-lg] {
    padding-bottom: 75%;
  }
  .ot-aspect-ratio-box[class*=to-square-from-lg], .ot-aspect-ratio-box[class*=to-1-1-from-lg] {
    padding-bottom: 100%;
  }
  .ot-aspect-ratio-box[class*=to-wide-from-lg], .ot-aspect-ratio-box[class*=to-16-9-from-lg] {
    padding-bottom: 56.25%;
  }
  .ot-aspect-ratio-box[class*=to-portrait-from-lg], .ot-aspect-ratio-box[class*=to-3-4-from-lg] {
    padding-bottom: 133.3333333333%;
  }
  .ot-aspect-ratio-box[class*=to-semiportrait-from-lg], .ot-aspect-ratio-box[class*=to-6-7-from-lg] {
    padding-bottom: 116.6666666667%;
  }
  .ot-aspect-ratio-box[class*=to-9-16-from-lg] {
    padding-bottom: 177.7777777778%;
  }
  .ot-aspect-ratio-box[class*=to-4-5-from-lg] {
    padding-bottom: 125%;
  }
}
@media (min-width: 75em) {
  .ot-aspect-ratio-box[class*=to-standard-from-xl], .ot-aspect-ratio-box[class*=to-4-3-from-xl] {
    padding-bottom: 75%;
  }
  .ot-aspect-ratio-box[class*=to-square-from-xl], .ot-aspect-ratio-box[class*=to-1-1-from-xl] {
    padding-bottom: 100%;
  }
  .ot-aspect-ratio-box[class*=to-wide-from-xl], .ot-aspect-ratio-box[class*=to-16-9-from-xl] {
    padding-bottom: 56.25%;
  }
  .ot-aspect-ratio-box[class*=to-portrait-from-xl], .ot-aspect-ratio-box[class*=to-3-4-from-xl] {
    padding-bottom: 133.3333333333%;
  }
  .ot-aspect-ratio-box[class*=to-semiportrait-from-xl], .ot-aspect-ratio-box[class*=to-6-7-from-xl] {
    padding-bottom: 116.6666666667%;
  }
  .ot-aspect-ratio-box[class*=to-9-16-from-xl] {
    padding-bottom: 177.7777777778%;
  }
  .ot-aspect-ratio-box[class*=to-4-5-from-xl] {
    padding-bottom: 125%;
  }
}.ot-helper-text {
  display: inline-flex;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  align-items: center;
}
.ot-helper-text .ot-helper-text__icon.ot-svg-icon {
  height: 1.125rem;
  width: 1.125rem;
  margin-inline-end: 0.25rem;
  vertical-align: bottom;
  flex: 0 0 auto;
}
.ot-helper-text--character-count {
  font-variant-numeric: tabular-nums;
}
.ot-helper-text--error {
  color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-helper-text--success {
  color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-helper-text--warning {
  color: rgb(var(--colour-semantic-caution-text, 202, 80, 8));
}
.ot-helper-text--text-only {
  margin-inline-start: 0;
}
.ot-helper-text--text-only .ot-helper-text__icon {
  display: none;
}.ot-payment-logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
  background: rgb(var(--colour-static-white, 255, 255, 255));
  overflow: hidden;
}
.ot-payment-logo__img {
  max-width: 100%;
  min-height: 100%;
  height: auto;
}
.ot-payment-logo--small {
  width: 2.125rem;
  height: 1.5rem;
  border-radius: 2px;
}
.ot-payment-logo--medium {
  width: 3.5rem;
  height: 2.5rem;
  border-radius: 4px;
}.ot-validation-border {
  --skapa-validation-border-colour: rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  --skapa-validation-border: 1px solid var(--skapa-validation-border-colour);
  --skapa-validation-border-default: var(--skapa-validation-border);
  --skapa-validation-border-focus-border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
  pointer-events: none;
  transition: box-shadow 100ms cubic-bezier(0.4, 0, 0.4, 1), border 100ms cubic-bezier(0.4, 0, 0.4, 1);
  border-radius: 4px;
  box-sizing: border-box;
}
.ot-validation-border--warning {
  border-color: rgb(var(--colour-semantic-caution, 242, 106, 47));
}
.ot-validation-border--error {
  border-color: rgb(var(--colour-semantic-negative, 224, 7, 81));
}
.ot-validation-border--success {
  border-color: rgb(var(--colour-semantic-positive, 10, 138, 0));
}
.ot-validation-border--disabled {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  box-shadow: none;
}
.ot-validation-border--read-only {
  --skapa-validation-border-default: transparent;
  border: var(--skapa-validation-border-default, var(--skapa-validation-border-focus-border));
}

@media (forced-colors: active) {
  .ot-validation-border {
    border-color: GrayText;
  }
}.ot-list-view {
  padding: 0;
  margin: 0;
}
.ot-list-view--small .ot-list-view-item__action, .ot-list-view--small .ot-list-view-item__default {
  min-height: 3rem;
  padding-block-start: 0.5rem;
  padding-block-end: 0.5rem;
}
.ot-list-view--medium .ot-list-view-item__action, .ot-list-view--medium .ot-list-view-item__default {
  min-height: 4.5rem;
  padding-block-start: 0.75rem;
  padding-block-end: 0.75rem;
}
.ot-list-view--large .ot-list-view-item__action, .ot-list-view--large .ot-list-view-item__default {
  min-height: 5.5rem;
  padding-block-start: 1.25rem;
  padding-block-end: 1.25rem;
}

button.ot-list-view-item__action:hover .ot-list-view-item__title,
a.ot-list-view-item__action:hover .ot-list-view-item__title {
  text-decoration: underline;
}

.ot-list-view-item {
  width: 100%;
  list-style-type: none;
  border-bottom: 1px rgb(var(--colour-neutral-3, 223, 223, 223)) solid;
  box-sizing: border-box;
  text-decoration: none;
}
.ot-list-view-item__no-divider:not(:first-child), .ot-list-view-item__no-divider:not(:last-child) {
  border-bottom: none;
}
.ot-list-view-item__top-divider {
  border-top: 1px rgb(var(--colour-neutral-3, 223, 223, 223)) solid;
}
.ot-list-view-item__top-divider:not(:first-child), .ot-list-view-item__top-divider:not(:last-child) {
  border-top: none;
}
.ot-list-view-item__action, .ot-list-view-item__default {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  outline: none;
  text-align: inherit;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  text-decoration: none;
  padding: 0;
  line-height: 1.571;
  user-select: text;
}
.ot-list-view-item__action:not(:disabled) {
  cursor: pointer;
}
.ot-list-view-item__wrapper {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
.ot-list-view-item__label-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-inline-end: 1rem;
  gap: 0.25rem;
}
.ot-list-view-item__icon-center, .ot-list-view-item__icon-top {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  margin-inline-end: 1rem;
  flex-shrink: 0;
}
.ot-list-view-item__icon-top, .ot-list-view-item__image-top, .ot-list-view-item__payment-logo-top, .ot-list-view-item__avatar-top {
  align-self: flex-start;
}
.ot-list-view-item__payment-logo {
  margin-inline-end: 1rem;
  flex-shrink: 0;
}
.ot-list-view-item__image {
  margin-inline-end: 1rem;
  display: block;
  width: 3rem;
  inset-inline-start: 1rem;
  flex-shrink: 0;
}
.ot-list-view-item__image--medium {
  width: 4.5rem;
}
.ot-list-view-item__image--large {
  width: 6rem;
}
.ot-list-view-item__description {
  display: block;
}
.ot-list-view-item__title {
  display: block;
}
.ot-list-view-item__quantity-label {
  padding-inline-end: 0;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
}
.ot-list-view-item__quantity-label:not(:last-child) {
  padding-inline-end: 1rem;
}
.ot-list-view-item__addon {
  margin-block-start: 0.25rem;
  display: block;
}
.ot-list-view-item:hover .ot-list-view-item__label {
  text-decoration: underline;
}
.ot-list-view-item__inset {
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
}
.ot-list-view-item__avatar {
  margin-inline-end: 1rem;
  flex-shrink: 0;
}
.ot-list-view-item--disabled {
  pointer-events: none;
}
.ot-list-view-item--disabled .ot-list-view-item__default,
.ot-list-view-item--disabled .ot-list-view-item__action,
.ot-list-view-item--disabled .ot-list-view-item__icon-center,
.ot-list-view-item--disabled .ot-list-view-item__icon-top,
.ot-list-view-item--disabled .ot-list-view-item__title,
.ot-list-view-item--disabled .ot-list-view-item__description,
.ot-list-view-item--disabled .ot-list-view-item__quantity-label {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-list-view-item--disabled .ot-avatar__image,
.ot-list-view-item--disabled .ot-list-view-item__image {
  opacity: 0.2;
}
.ot-list-view-item--disabled .ot-avatar {
  background-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
}
.ot-list-view-item--disabled .ot-list-view-item__payment-logo {
  opacity: 0.4;
}

[dir=rtl] .ot-list-view-item__control-icon {
  transform: scaleX(-1);
}.ot-image {
  position: relative;
  display: block;
  max-width: 100%;
  height: auto;
}
.ot-image__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgb(var(--colour-text-and-icon-4, 146, 146, 146));
}
.ot-image--fallback {
  padding-bottom: 100%;
  background: rgb(var(--colour-neutral-2, 245, 245, 245));
}
.ot-image--fallback img {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}@keyframes button-fade-out {
  0%, 90% {
    opacity: 1;
    box-shadow: none;
  }
  100% {
    opacity: 0;
    box-shadow: none;
    visibility: hidden;
  }
}
@keyframes button-container-fade-move-ltr {
  0% {
    opacity: 1;
    inset-block-end: 50%;
    inset-inline-end: 50%;
    inset-inline-start: auto;
    transform: translate(50%, 50%);
  }
  33% {
    opacity: 0;
    inset-block-end: 50%;
    inset-inline-end: 50%;
    inset-inline-start: auto;
    transform: translate(50%, 50%);
  }
  66% {
    opacity: 0;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    inset-inline-start: auto;
    transform: none;
  }
  100% {
    opacity: 1;
    inset-block-end: 1.25rem;
    inset-inline-end: 1.25rem;
    inset-inline-start: auto;
    transform: none;
  }
}
@keyframes button-container-fade-move-rtl {
  0% {
    opacity: 1;
    inset-block-end: 50%;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, 50%);
  }
  33% {
    opacity: 0;
    inset-block-end: 50%;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    transform: translate(-50%, 50%);
  }
  66% {
    opacity: 0;
    inset-block-end: 1.25rem;
    inset-inline-start: 1.25rem;
    inset-inline-end: auto;
    transform: none;
  }
  100% {
    opacity: 1;
    inset-block-end: 1.25rem;
    inset-inline-start: 1.25rem;
    inset-inline-end: auto;
    transform: none;
  }
}
@keyframes button-container-fade-move-rtl-top {
  0% {
    opacity: 1;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    inset-block-end: auto;
    transform: translate(-50%, -50%);
  }
  33% {
    opacity: 0;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    inset-block-end: auto;
    transform: translate(-50%, -50%);
  }
  66% {
    opacity: 0;
    inset-block-start: 1.25rem;
    inset-inline-start: 1.25rem;
    inset-inline-end: auto;
    inset-block-end: auto;
    transform: none;
  }
  100% {
    opacity: 1;
    inset-block-start: 1.25rem;
    inset-inline-start: 1.25rem;
    inset-block-end: auto;
    inset-inline-end: auto;
    transform: none;
  }
}
@keyframes button-container-fade-move-ltr-top {
  0% {
    opacity: 1;
    inset-block-start: 50%;
    inset-inline-end: 50%;
    inset-inline-start: auto;
    inset-block-end: auto;
    transform: translate(50%, -50%);
  }
  33% {
    opacity: 0;
    inset-block-start: 50%;
    inset-inline-end: 50%;
    inset-inline-start: auto;
    inset-block-end: auto;
    transform: translate(50%, -50%);
  }
  66% {
    opacity: 0;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    inset-inline-start: auto;
    inset-block-end: auto;
    transform: none;
  }
  100% {
    opacity: 1;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    inset-block-end: auto;
    inset-inline-start: auto;
    transform: none;
  }
}
.ot-simple-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}
.ot-simple-video:focus-visible {
  border: 2px rgb(var(--colour-neutral-1, 255, 255, 255)) solid;
  border-radius: 2px;
}
.ot-simple-video__description {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-simple-video__video-action {
  background: none;
  border: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  padding: 0;
}
.ot-simple-video__button .ot-btn__icon {
  transform-origin: center;
}

[dir=rtl] .ot-simple-video__button--transcript .ot-btn__icon.ot-svg-icon {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: no-preference) {
  .ot-simple-video__button .ot-btn__icon {
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.4, 1), transform 100ms cubic-bezier(0.4, 0, 0.4, 1);
  }
}
.ot-simple-video-controls {
  position: absolute;
  display: flex;
  gap: 0.75rem;
  opacity: 1;
}

.ot-simple-video-controls--primary.ot-simple-video-controls--all-top-trailing {
  opacity: 1;
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
  inset-inline-start: auto;
  inset-block-end: auto;
  transform: none;
}
.ot-simple-video-controls--primary.ot-simple-video-controls--all-top-trailing .ot-simple-video__button--play-pause .ot-btn__inner {
  min-height: 2.5rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}

.ot-simple-video-controls--bottom {
  inset-block-start: auto;
  inset-block-end: 1.25rem;
}

.ot-simple-video-controls--all-top-trailing,
.ot-simple-video-controls--top {
  inset-block-start: 1.25rem;
  inset-block-end: auto;
}

.ot-simple-video-controls--leading {
  inset-inline-start: 1.25rem;
  inset-inline-end: auto;
}

.ot-simple-video-controls--all-top-trailing,
.ot-simple-video-controls--trailing {
  inset-inline-end: 1.25rem;
  inset-inline-start: auto;
}

.ot-simple-video-controls--secondary.ot-simple-video-controls--trailing {
  flex-direction: row-reverse;
}

.ot-simple-video-controls--playing .ot-simple-video__button--play-pause .ot-btn__inner {
  min-height: 2.5rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}

.ot-simple-video-controls:not(.ot-simple-video-controls--emphasised) .ot-simple-video__button--play-pause .ot-btn__inner {
  min-height: 2.5rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .ot-simple-video-controls--primary.ot-simple-video-controls--playing .ot-simple-video__button--play-pause .ot-btn__inner {
    transition: min-height 200ms cubic-bezier(0.4, 0, 0.4, 1), padding-inline-start 200ms cubic-bezier(0.4, 0, 0.4, 1), padding-inline-end 200ms cubic-bezier(0.4, 0, 0.4, 1);
    transform-origin: center;
  }
}
@media (hover: none) {
  .ot-simple-video-controls--primary:not(.ot-simple-video-controls--playing):not(.ot-simple-video-controls--all-top-trailing) {
    opacity: 1;
    transform: translate(-50%, -50%);
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inset-inline-end: auto;
    inset-block-end: auto;
  }
  .ot-simple-video-controls:not(.ot-simple-video-controls--emphasised):not(.ot-simple-video-controls--playing):not(.ot-simple-video-controls--all-top-trailing) .ot-simple-video__button--play-pause .ot-btn__inner {
    min-height: 3.5rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }
  [dir=rtl] .ot-simple-video-controls--primary:not(.ot-simple-video-controls--playing):not(.ot-simple-video-controls--all-top-trailing) {
    transform: translate(50%, -50%);
  }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .ot-simple-video-controls--primary.ot-simple-video-controls--playing.ot-simple-video-controls--bottom.ot-simple-video-controls--leading {
    animation: button-container-fade-move-rtl 0.6s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  .ot-simple-video-controls--primary.ot-simple-video-controls--playing.ot-simple-video-controls--bottom.ot-simple-video-controls--trailing {
    animation: button-container-fade-move-ltr 0.6s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  .ot-simple-video-controls--primary.ot-simple-video-controls--playing.ot-simple-video-controls--top.ot-simple-video-controls--leading {
    animation: button-container-fade-move-rtl-top 0.6s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  [dir=rtl] .ot-simple-video-controls--primary.ot-simple-video-controls--playing.ot-simple-video-controls--bottom.ot-simple-video-controls--leading {
    animation: button-container-fade-move-ltr 0.6s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  [dir=rtl] .ot-simple-video-controls--primary.ot-simple-video-controls--playing.ot-simple-video-controls--bottom.ot-simple-video-controls--trailing {
    animation: button-container-fade-move-rtl 0.6s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  [dir=rtl] .ot-simple-video-controls--primary.ot-simple-video-controls--playing.ot-simple-video-controls--top.ot-simple-video-controls--leading {
    animation: button-container-fade-move-ltr-top 0.6s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
}
@media (hover: hover) {
  .ot-simple-video-controls .ot-simple-video__button {
    opacity: 1;
    visibility: visible;
  }
  .ot-simple-video-controls.ot-simple-video-controls--emphasised:not(.ot-simple-video-controls--all-top-trailing) .ot-simple-video__button--play-pause .ot-btn__inner {
    min-height: 3.5rem;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ot-simple-video-controls--emphasised.ot-simple-video-controls--primary:not(.ot-simple-video-controls--all-top-trailing) {
    transform: translate(-50%, -50%);
    inset-inline-start: 50%;
    inset-block-start: 50%;
    inset-inline-end: auto;
    inset-block-end: auto;
  }
  .ot-simple-video-controls.ot-simple-video-controls--playing:not(.ot-simple-video-controls--all-top-trailing) .ot-simple-video__button--fullscreen,
  .ot-simple-video-controls.ot-simple-video-controls--playing:not(.ot-simple-video-controls--all-top-trailing) .ot-simple-video__button--play-pause {
    animation: button-fade-out 3s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  .ot-simple-video__video-action:focus-visible ~ .ot-simple-video-controls .ot-simple-video__button--play-pause,
  .ot-simple-video__video-action:focus-visible ~ .ot-simple-video-controls .ot-simple-video__button--fullscreen,
  .ot-simple-video__video-action:hover ~ .ot-simple-video-controls .ot-simple-video__button--play-pause,
  .ot-simple-video__video-action:hover ~ .ot-simple-video-controls .ot-simple-video__button--fullscreen {
    animation: none;
  }
  .ot-simple-video-controls--secondary.ot-simple-video-controls--playing:not(.ot-simple-video-controls--all-top-trailing):focus-within .ot-simple-video__button--fullscreen {
    animation: none;
  }
  [dir=rtl] .ot-simple-video-controls--emphasised.ot-simple-video-controls--primary:not(.ot-simple-video-controls--all-top-trailing) {
    transform: translate(50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ot-simple-video-controls.ot-simple-video-controls--emphasised:not(.ot-simple-video-controls--all-top-trailing) .ot-simple-video__button--play-pause .ot-btn__inner {
    min-height: 2.5rem;
    padding-inline-start: 0.5rem;
    padding-inline-end: 0.5rem;
  }
}.ot-avatar--btn {
  padding: 0;
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-avatar--btn:hover:not(:disabled) {
  background: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
}
.ot-avatar--btn:hover:not(:disabled).ot-avatar--static {
  background: rgb(var(--colour-interactive-static-secondary-bg-hover, 223, 223, 223));
}
.ot-avatar--btn:active:not(:disabled) {
  background: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
}
.ot-avatar--btn:active:not(:disabled).ot-avatar--static {
  background: rgb(var(--colour-interactive-static-secondary-bg-pressed, 204, 204, 204));
}
.ot-avatar--btn:active:not(:disabled) {
  transform: scale(0.97);
}
.ot-avatar--btn.ot-avatar--primary:hover:not(:disabled) {
  background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
}
.ot-avatar--btn.ot-avatar--primary:hover:not(:disabled).ot-avatar--static {
  background: rgb(var(--colour-interactive-static-primary-bg-hover, 51, 51, 51));
}
.ot-avatar--btn.ot-avatar--primary:active:not(:disabled) {
  background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
}
.ot-avatar--btn.ot-avatar--primary:active:not(:disabled).ot-avatar--static {
  background: rgb(var(--colour-interactive-static-primary-bg-pressed, 0, 0, 0));
}
.ot-avatar--btn.ot-avatar--static:disabled, .ot-avatar--btn:disabled {
  background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
  cursor: default;
}
.ot-avatar--btn.ot-avatar--static:disabled .ot-avatar__image, .ot-avatar--btn:disabled .ot-avatar__image {
  opacity: 0.5;
}
.ot-avatar--btn.ot-avatar--image:hover, .ot-avatar--btn.ot-avatar--image:active {
  background: none;
}
.ot-avatar--btn::after {
  content: "";
  position: absolute;
  display: block;
}
.ot-avatar--btn.ot-avatar--xsmall::after {
  top: -0.625rem;
  bottom: -0.625rem;
  right: -0.625rem;
  left: -0.625rem;
}
.ot-avatar--btn.ot-avatar--small::after {
  top: -0.375rem;
  bottom: -0.375rem;
  right: -0.375rem;
  left: -0.375rem;
}
.ot-avatar--btn.ot-avatar--medium::after {
  top: -0.125rem;
  bottom: -0.125rem;
  right: -0.125rem;
  left: -0.125rem;
}

.ot-avatar {
  box-sizing: border-box;
  display: flex;
  border-radius: 64px;
  background: border-box rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
  border: 1px solid transparent;
  align-items: center;
  justify-content: center;
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
  white-space: nowrap;
}
.ot-avatar .ot-avatar__image {
  border-radius: 64px;
}
.ot-avatar--primary.ot-avatar--static {
  background: rgb(var(--colour-interactive-static-primary-bg-default, 17, 17, 17));
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-avatar--secondary {
  background: rgb(var(--colour-interactive-secondary-bg-default, 245, 245, 245));
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-avatar--secondary.ot-avatar--static {
  background: rgb(var(--colour-interactive-static-secondary-bg-default, 245, 245, 245));
  color: rgb(var(--colour-static-black, 17, 17, 17));
}
.ot-avatar.ot-avatar--image {
  border-width: 0;
  background: none;
}
.ot-avatar.ot-avatar--image.ot-avatar--static {
  background: none;
}
.ot-avatar--large {
  width: 3.5rem;
  height: 3.5rem;
}
.ot-avatar--medium {
  width: 2.5rem;
  height: 2.5rem;
}
.ot-avatar--small {
  width: 2rem;
  height: 2rem;
}
.ot-avatar--xsmall {
  width: 1.5rem;
  height: 1.5rem;
}
.ot-avatar__sr-text {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}.ot-switch {
  position: relative;
  display: flex;
}
.ot-switch__checkbox {
  height: 3rem;
  width: 3rem;
  position: absolute;
  left: 0;
  top: -0.75rem;
  display: inline-block;
  border: 0;
  opacity: 0;
  padding: 0;
  z-index: 1;
  cursor: pointer;
}
[dir=rtl] .ot-switch__checkbox {
  right: 0;
  left: auto;
}
.ot-switch__label {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  cursor: pointer;
  position: relative;
  display: inline;
  padding-inline-start: 1rem;
  transition: color 200ms ease-in-out;
  margin-top: 0.1875rem;
}
.ot-switch__toggle {
  position: relative;
  display: flex;
  flex-shrink: 0;
  cursor: pointer;
  height: 1.5rem;
  width: 3rem;
}
.ot-switch__toggle::before {
  box-sizing: border-box;
  content: "";
  display: block;
  width: 100%;
  background: border-box rgb(var(--colour-neutral-5, 146, 146, 146));
  border: 1px solid transparent;
  transition: background 200ms cubic-bezier(0, 0, 1, 1);
  height: 1.5rem;
  border-radius: 20px;
}
.ot-switch__symbol::before {
  transform: rotate(45deg);
  content: "";
  box-sizing: content-box;
  display: block;
  opacity: 0;
  transition: all 100ms cubic-bezier(0, 0, 1, 1);
  border: 2px solid rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
  border-left: 0;
  border-top: 0;
  height: 0.5625rem;
  width: 0.25rem;
  margin-top: -0.25rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-switch__button {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.125rem;
  background: border-box rgb(var(--colour-static-white, 255, 255, 255));
  border-radius: 20px;
  border: 2px solid transparent;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.4, 1);
  width: 1.25rem;
  height: 1.25rem;
}
[dir=rtl] .ot-switch__button {
  right: 0;
  left: auto;
}
.ot-switch__checkbox:checked + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
}
.ot-switch__checkbox:checked + .ot-switch__toggle .ot-switch__symbol::before {
  opacity: 1;
}
.ot-switch__checkbox:checked + .ot-switch__toggle .ot-switch__button {
  transform: translateX(120%);
}
[dir=rtl] .ot-switch__checkbox:checked + .ot-switch__toggle .ot-switch__button {
  transform: translateX(-120%);
}
.ot-switch--subtle .ot-switch__button {
  background: rgb(var(--colour-neutral-1, 255, 255, 255));
}
.ot-switch--subtle .ot-switch__checkbox:checked + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
}
.ot-switch--subtle .ot-switch__checkbox:checked + .ot-switch__toggle .ot-switch__symbol::before {
  border-color: rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-switch .ot-switch__checkbox:hover:checked + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
}
.ot-switch .ot-switch__checkbox:hover:checked + .ot-switch__toggle .ot-switch__symbol::before {
  border-color: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
}
.ot-switch--subtle .ot-switch__checkbox:hover:checked + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
}
.ot-switch--subtle .ot-switch__checkbox:hover:checked + .ot-switch__toggle .ot-switch__symbol::before {
  border-color: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
}
.ot-switch .ot-switch__checkbox:active:checked + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114));
}
.ot-switch .ot-switch__checkbox:active:checked + .ot-switch__toggle .ot-switch__symbol::before {
  border-color: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114));
}
.ot-switch--subtle .ot-switch__checkbox:active:checked + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
}
.ot-switch--subtle .ot-switch__checkbox:active:checked + .ot-switch__toggle .ot-switch__symbol::before {
  border-color: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
}
.ot-switch .ot-switch__checkbox:disabled {
  cursor: default;
}
.ot-switch .ot-switch__checkbox:disabled ~ .ot-switch__label {
  pointer-events: none;
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-switch .ot-switch__checkbox:disabled:hover + .ot-switch__toggle::before,
.ot-switch .ot-switch__checkbox:disabled + .ot-switch__toggle::before {
  background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-switch .ot-switch__checkbox:disabled:hover + .ot-switch__toggle .ot-switch__symbol::before,
.ot-switch .ot-switch__checkbox:disabled + .ot-switch__toggle .ot-switch__symbol::before {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
@media (forced-colors: active) {
  .ot-switch .ot-switch__checkbox:disabled ~ .ot-switch__label {
    color: GrayText;
  }
  .ot-switch .ot-switch__checkbox:disabled + .ot-switch__toggle::before,
  .ot-switch .ot-switch__checkbox:disabled + .ot-switch__toggle > .ot-switch__button,
  .ot-switch .ot-switch__checkbox:disabled + .ot-switch__toggle .ot-switch__symbol::before,
  .ot-switch .ot-switch__checkbox:disabled:hover + .ot-switch__toggle .ot-switch__symbol::before {
    border-color: GrayText;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ot-switch__toggle::before, .ot-switch__symbol::before {
    transition-duration: 0s;
  }
  .ot-switch__button {
    transition-duration: 0s;
  }
}@keyframes modal-delayed-fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ot-modalSlideToLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ot-modalSlideToRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes ot-modalSlideFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ot-modalSlideFromRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes ot-modalSlideDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes ot-modalSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes ot-modalEnter {
  from {
    clip-path: inset(50%);
  }
  to {
    clip-path: inset(0%);
  }
}
@keyframes ot-modalClose {
  from {
    clip-path: inset(0%);
  }
  to {
    clip-path: inset(50%);
  }
}
@keyframes ot-modalContentEnter {
  from {
    transform: scale(0.8);
    opacity: 0;
    transform-origin: center center;
  }
  to {
    transform: scale(1);
    opacity: 1;
    transform-origin: center center;
  }
}
@keyframes ot-modalContentClose {
  from {
    transform: scale(1);
    opacity: 1;
    transform-origin: center center;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
    transform-origin: center center;
  }
}
@keyframes ot-modalBackdropEnter {
  0% {
    visibility: hidden;
  }
  1% {
    visibility: visible;
  }
}
@keyframes ot-modalBackdropClose {
  0%, 99% {
    visibility: visible;
  }
  100% {
    visibility: hidden;
  }
}
.ot-prevent-scroll-y {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

.ot-modal-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 400;
  pointer-events: none;
  transition: visibility cubic-bezier(0, 0, 1, 1) 200ms;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-modal-wrapper__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity cubic-bezier(0, 0, 1, 1) 200ms;
  pointer-events: none;
  visibility: hidden;
}
.ot-modal-wrapper__backdrop--dark {
  background: rgba(var(--colour-static-black, 17, 17, 17), 0.4);
}
.ot-modal-wrapper--open {
  pointer-events: all;
}
.ot-modal-wrapper--open > .ot-modal-wrapper__backdrop {
  opacity: 1;
  animation: ot-modalBackdropEnter 200ms;
  visibility: visible;
  pointer-events: all;
}
.ot-modal-wrapper--close > .ot-modal-wrapper__backdrop {
  animation: ot-modalBackdropClose 200ms;
}
.ot-modal-wrapper .ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}

.ot-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;
}
.ot-modal-footer .ot-btn {
  flex-grow: 1;
  width: 100%;
  flex-basis: auto;
}
.ot-modal-footer .ot-btn:not(:last-child) {
  margin-inline-end: 0;
  margin-block-end: 0.75rem;
}
.ot-modal-footer--dual-action {
  flex-direction: column;
}
.ot-modal-footer--borderless {
  border-top: none;
}

@media (orientation: landscape), (min-width: 37.5em) {
  .ot-modal-footer .ot-btn:not(:last-child) {
    margin-block-end: 1rem;
  }
  .ot-modal-footer--dual-action:not(.ot-modal-footer--stacked) {
    flex-direction: row;
  }
  .ot-modal-footer--dual-action:not(.ot-modal-footer--stacked) .ot-btn:not(:last-child) {
    margin-inline-end: 1rem;
    margin-block-end: 0;
  }
}
@media (min-width: 37.5em) {
  .ot-modal-footer--actions-leading .ot-btn, .ot-modal-footer--actions-trailing .ot-btn {
    width: auto;
    flex-grow: 0;
  }
  .ot-modal-footer--actions-leading {
    justify-content: flex-start;
  }
  .ot-modal-footer--actions-trailing {
    justify-content: flex-end;
  }
}
.ot-modal-header {
  box-sizing: border-box;
  top: 0;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 0 0.5rem;
  align-items: center;
  background-color: rgb(var(--colour-elevation-2, 255, 255, 255));
  z-index: 100;
  flex: 0 0 3.5rem;
}
.ot-modal-header--floating-header {
  position: absolute;
  width: 100%;
  background-color: transparent;
}
.ot-modal-header--floating-header .ot-modal-header__close,
.ot-modal-header--floating-header .ot-modal-header__back-button {
  margin: 1rem 0 0 0;
}
.ot-modal-header__title-wrapper {
  width: 100%;
  text-align: center;
  margin: 1rem 0.5rem;
}
.ot-modal-header__title-wrapper--padded {
  margin-inline-start: 3rem;
}
.ot-modal-header__close, .ot-modal-header__back-button {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
[dir=rtl] .ot-modal-header__close, [dir=rtl] .ot-modal-header__back-button {
  transform: scaleX(-1);
}

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

.ot-sheets--enter {
  animation: ot-modalSlideUp cubic-bezier(0, 0, 0.1, 1) 200ms;
}

.ot-sheets--preserve-alignment {
  animation: ot-modalSlideToLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
}
.ot-sheets--preserve-alignment.ot-sheets--mirrored {
  animation: ot-modalSlideFromLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
}

.ot-sheets--close {
  animation: ot-modalSlideDown cubic-bezier(0.9, 0, 1, 1) 100ms;
  pointer-events: none;
  transition: visibility cubic-bezier(0, 0, 1, 1) 100ms;
  visibility: hidden;
  animation-fill-mode: forwards;
}
.ot-sheets--close.ot-sheets--preserve-alignment {
  animation: ot-modalSlideToRight cubic-bezier(0.9, 0, 1, 1) 100ms;
  animation-fill-mode: forwards;
}
.ot-sheets--close.ot-sheets--preserve-alignment.ot-sheets--mirrored {
  animation: ot-modalSlideFromRight cubic-bezier(0.9, 0, 1, 1) 100ms;
  animation-fill-mode: forwards;
}

[dir=rtl] .ot-sheets--preserve-alignment {
  animation: ot-modalSlideFromLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
}
[dir=rtl] .ot-sheets--preserve-alignment.ot-sheets--mirrored {
  animation: ot-modalSlideToLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
}
[dir=rtl] .ot-sheets--close {
  animation: ot-modalSlideDown cubic-bezier(0.9, 0, 1, 1) 100ms;
  pointer-events: none;
  animation-fill-mode: forwards;
}
[dir=rtl] .ot-sheets--close.ot-sheets--preserve-alignment {
  animation: ot-modalSlideFromRight cubic-bezier(0.9, 0, 1, 1) 100ms;
  animation-fill-mode: forwards;
}
[dir=rtl] .ot-sheets--close.ot-sheets--preserve-alignment.ot-sheets--mirrored {
  animation: ot-modalSlideToRight cubic-bezier(0.9, 0, 1, 1) 100ms;
  animation-fill-mode: forwards;
}

.ot-modal-header {
  position: sticky;
}
@media (min-height: 25.625em) {
  .ot-modal-header {
    position: unset;
  }
}
.ot-modal-header--floating-header {
  position: fixed;
}
@media (min-height: 25.625em) {
  .ot-modal-header--floating-header {
    position: absolute;
  }
}

.ot-sheets {
  position: absolute;
  top: 0;
  right: var(--modal-keyboard-focus-spacing, 0);
  bottom: 0;
  width: calc(100% - var(--modal-keyboard-focus-width, 0%));
  background: rgb(var(--colour-elevation-2, 255, 255, 255));
  z-index: 100;
  overflow: auto;
  max-height: 100%;
  text-align: initial;
  display: flex;
  flex-direction: column;
}
.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
  --modal-keyboard-focus-spacing: 0.375rem;
  --modal-keyboard-focus-width: 0.75rem;
}
.ot-sheets__content {
  height: 100%;
}
.ot-sheets__content-wrapper {
  position: relative;
}
.ot-sheets__content-wrapper:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-sheets__video {
  z-index: 100;
  background: rgba(var(--colour-static-black, 17, 17, 17), 0.8);
}
.ot-sheets__video iframe {
  max-width: 100%;
}
.ot-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%));
}
.ot-sheets--preserve-alignment.ot-sheets--mirrored {
  right: auto;
  left: var(--modal-keyboard-focus-spacing, 0);
  border-radius: 0px 8px 8px 0px;
}
.ot-sheets .ot-modal-footer {
  padding: 1.5rem 1rem;
}

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

@media (prefers-contrast: more) {
  .ot-sheets {
    border: 1px solid rgb(var(--colour-elevation-1-border, 223, 223, 223));
    border-block-end-width: 0;
  }
}
@media (min-height: 25.625em) {
  .ot-sheets {
    top: auto;
    overflow: hidden;
    max-height: calc(100% - 3rem);
    border-radius: 8px 8px 0px 0px;
  }
  .ot-sheets__content-wrapper {
    overflow: auto;
    height: 100%;
  }
  .ot-sheets--mobile-full-size {
    top: 3rem;
  }
  .ot-sheets--preserve-alignment {
    top: 0;
    max-height: 100%;
  }
}
.ot-theatre--enter {
  animation: ot-modalEnter cubic-bezier(0, 0, 0.1, 1) 200ms;
}
.ot-theatre--enter .ot-theatre__animation-group {
  animation: ot-modalContentEnter cubic-bezier(0, 0, 0.1, 1) 200ms;
}

.ot-theatre--close {
  animation: ot-modalClose cubic-bezier(0.9, 0, 1, 1) 200ms;
  animation-fill-mode: forwards;
  pointer-events: none;
  transition: visibility cubic-bezier(0, 0, 1, 1) 100ms;
  visibility: hidden;
}
.ot-theatre--close .ot-theatre__animation-group {
  animation: ot-modalContentClose cubic-bezier(0.9, 0, 1, 1) 200ms;
  animation-fill-mode: forwards;
}

.ot-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;
}
.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
  --modal-keyboard-focus-spacing: 0.375rem;
  --modal-keyboard-focus-width: 0.75rem;
}
.ot-theatre__animation-group {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ot-theatre__content-wrapper {
  overflow: auto;
}
.ot-theatre__content-wrapper:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-theatre__video {
  z-index: 100;
  background: rgba(var(--colour-static-black, 17, 17, 17), 0.8);
}
.ot-theatre__video iframe {
  max-width: 100%;
}

@media (prefers-contrast: more) {
  .ot-theatre {
    border: 1px solid rgb(var(--colour-elevation-1-border, 223, 223, 223));
    border-block-end-width: 0;
  }
}
.ot-prompt--enter {
  animation: ot-modalContentEnter cubic-bezier(0.8, 0, 0, 1) 200ms;
}

.ot-prompt--close {
  animation: ot-modalContentClose cubic-bezier(0.9, 0, 1, 1) 100ms;
  animation-fill-mode: forwards;
  pointer-events: none;
  transition: visibility cubic-bezier(0, 0, 1, 1) 100ms;
  visibility: hidden;
}

.ot-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;
}
.ot-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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-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;
}
.ot-prompt__heading {
  margin-bottom: 1rem;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-prompt__content {
  padding: 0 2rem;
  overflow: auto;
  height: 100%;
}
.ot-prompt__content:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-prompt .ot-modal-header {
  padding: 0.5rem 0.5rem 0 0.5rem;
  flex: 0 0 3rem;
}
.ot-prompt .ot-modal-header--no-close-button {
  flex: 0 0 2rem;
}
.ot-prompt .ot-modal-header__close {
  margin: 0;
}
.ot-prompt .ot-prompt__content {
  padding-bottom: 0;
}

@media (prefers-contrast: more) {
  .ot-prompt {
    border: 1px solid rgb(var(--colour-elevation-1-border, 223, 223, 223));
  }
}
@media (min-width: 37.5em) {
  .ot-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%));
  }
  .ot-sheets--mirrored {
    right: auto;
    left: var(--modal-keyboard-focus-spacing, 0);
    border-radius: 0px 8px 8px 0px;
  }
  .ot-sheets--mirrored .ot-modal-footer:not(.ot-modal-footer--stacked) {
    flex-direction: row-reverse;
  }
  .ot-sheets--mirrored .ot-modal-footer:not(.ot-modal-footer--stacked) .ot-btn:not(:last-child) {
    margin: 0;
    margin-inline-start: 1rem;
  }
  .ot-sheets--small {
    max-width: 30rem;
  }
  .ot-sheets--small .ot-modal-body {
    --skapa-modal-body-padding-inline: 1.5rem;
  }
  .ot-sheets--medium {
    max-width: 45rem;
  }
  .ot-sheets--medium .ot-modal-footer:not(.ot-modal-footer--dual-action):not(.ot-modal-footer--actions-fluid) .ot-btn {
    width: auto;
    flex: initial;
  }
  .ot-sheets--large {
    max-width: 67.5rem;
  }
  .ot-sheets--medium .ot-modal-footer--dual-action .ot-btn:not(:last-child), .ot-sheets--large .ot-modal-footer--dual-action .ot-btn:not(:last-child) {
    margin-inline-end: 1rem;
  }
  .ot-sheets--large .ot-modal-footer:not(.ot-modal-footer--actions-fluid) .ot-btn {
    width: auto;
    flex: initial;
  }
  .ot-sheets .ot-modal-footer {
    padding: 1.5rem;
  }
  [dir=rtl] .ot-sheets {
    right: auto;
    left: var(--modal-keyboard-focus-spacing, 0);
    border-radius: 0px 8px 8px 0px;
  }
  [dir=rtl] .ot-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) {
  .ot-sheets {
    border-block-end-width: 1px;
    border-inline-end-width: 0;
  }
}
@media (min-width: 37.5em) {
  .ot-sheets.ot-sheets--enter {
    animation: ot-modalSlideToLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
  }
  .ot-sheets.ot-sheets--close {
    animation: ot-modalSlideToRight cubic-bezier(0.9, 0, 1, 1) 100ms;
    animation-fill-mode: forwards;
  }
  .ot-sheets--mirrored.ot-sheets--enter {
    animation: ot-modalSlideFromLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
  }
  .ot-sheets--mirrored.ot-sheets--close {
    animation: ot-modalSlideFromRight cubic-bezier(0.9, 0, 1, 1) 100ms;
    animation-fill-mode: forwards;
  }
  [dir=rtl] .ot-sheets.ot-sheets--enter {
    animation: ot-modalSlideFromLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
  }
  [dir=rtl] .ot-sheets.ot-sheets--close {
    animation: ot-modalSlideFromRight cubic-bezier(0.9, 0, 1, 1) 100ms;
    animation-fill-mode: forwards;
  }
  [dir=rtl] .ot-sheets--mirrored.ot-sheets--enter {
    animation: ot-modalSlideToLeft cubic-bezier(0, 0, 0.1, 1) 200ms;
  }
  [dir=rtl] .ot-sheets--mirrored.ot-sheets--close {
    animation: ot-modalSlideToRight cubic-bezier(0.9, 0, 1, 1) 100ms;
    animation-fill-mode: forwards;
  }
  .ot-modal-body {
    --skapa-modal-body-padding-block: 2rem;
    --skapa-modal-body-padding-inline: 2rem;
  }
  .ot-modal-header {
    padding: 0 1rem;
    flex: 0 0 4.5rem;
  }
  .ot-modal-header__close, .ot-modal-header__back-button {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .ot-modal-header--floating-header .ot-modal-header__close,
  .ot-modal-header--floating-header .ot-modal-header__back-button {
    margin: 1.5rem 0 0.5rem 0;
  }
  .ot-prompt__content {
    padding-bottom: 1rem;
    --skapa-font-size: var(--skapa-body-l, 16);
  }
  .ot-prompt__heading {
    --skapa-font-size: var(--skapa-heading-l, 24);
  }
}
@media (min-width: 56.25em) {
  .ot-sheets--small .ot-modal-body {
    --skapa-modal-body-padding-inline: 2rem;
  }
  .ot-theatre {
    border-radius: 8px;
    left: 3rem;
    width: calc(100% - 6rem);
    height: calc(100% - 6rem);
  }
}
@media (min-width: 56.25em) and (prefers-contrast: more) {
  .ot-theatre {
    border-block-end-width: 1px;
  }
}
@media (min-width: 75em) {
  .ot-sheets .ot-modal-body {
    --skapa-modal-body-padding-inline: 2.5rem;
  }
}
@media (prefers-reduced-motion) {
  .ot-modal-wrapper {
    transition: none;
  }
  .ot-modal-wrapper__backdrop {
    animation-duration: 0s;
    transition-duration: 0s;
    transition: none;
  }
  .ot-modal-wrapper .ot-sheets.ot-sheets--enter,
  .ot-modal-wrapper .ot-sheets.ot-sheets--close,
  .ot-modal-wrapper .ot-sheets.ot-sheets--preserve-alignment,
  .ot-modal-wrapper .ot-sheets.ot-sheets--mirrored {
    animation-duration: 0s;
    transition-duration: 0s;
  }
  .ot-modal-wrapper .ot-theatre.ot-theatre--enter,
  .ot-modal-wrapper .ot-theatre.ot-theatre--close {
    animation-duration: 0s;
    transition-duration: 0s;
  }
  .ot-modal-wrapper .ot-theatre.ot-theatre--enter .ot-theatre__animation-group,
  .ot-modal-wrapper .ot-theatre.ot-theatre--close .ot-theatre__animation-group {
    animation-duration: 0s;
    transition-duration: 0s;
  }
  .ot-modal-wrapper .ot-prompt--close {
    transition: none;
  }
  .ot-modal-wrapper .ot-prompt,
  .ot-modal-wrapper .ot-prompt--enter,
  .ot-modal-wrapper .ot-prompt--close {
    animation-duration: 0s;
    transition-duration: 0s;
  }
  .ot-modal-wrapper .ot-prompt .ot-prompt__content-wrapper,
  .ot-modal-wrapper .ot-prompt--enter .ot-prompt__content-wrapper,
  .ot-modal-wrapper .ot-prompt--close .ot-prompt__content-wrapper {
    animation-duration: 0s;
    transition-duration: 0s;
  }
}.ot-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background-color: rgb(var(--colour-interactive-secondary-bg-default, 245, 245, 245));
  padding: 0.1875rem 0.9375rem;
  border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  border-radius: 4px;
  min-height: 2rem;
}
.ot-tag--icon {
  padding-inline-start: calc(0.9375rem - 0.125rem);
}
.ot-tag::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  min-height: 2.75rem;
  height: 100%;
  display: block;
}
.ot-tag:hover, .ot-tag:active, .ot-tag:focus {
  text-decoration: none;
}
.ot-tag:hover, .ot-tag:focus {
  border-color: rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17));
  background-color: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
}
.ot-tag:active {
  border-color: rgb(var(--colour-interactive-subtle-border-pressed, 17, 17, 17));
  background-color: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
}
.ot-tag--subtle {
  background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
}
.ot-tag--subtle:focus {
  background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
}
.ot-tag--subtle:hover {
  background-color: rgb(var(--colour-interactive-subtle-bg-hover, 245, 245, 245));
}
.ot-tag--subtle:active {
  background-color: rgb(var(--colour-interactive-subtle-bg-pressed, 223, 223, 223));
}
.ot-tag__icon {
  margin-inline-end: 0.5rem;
  flex-shrink: 0;
}
.ot-tag--counter .ot-tag__label {
  padding-inline-end: 0.5rem;
}
.ot-tag--counter:hover .ot-tag__number, .ot-tag--counter:focus .ot-tag__number, .ot-tag--counter:active .ot-tag__number {
  border-inline-start-color: rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17));
}
.ot-tag--counter .ot-tag__number {
  border-inline-start-color: rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
  border-inline-start-style: solid;
  border-inline-start-width: 1px;
  padding-inline-start: 0.5rem;
}.ot-loading {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.ot-loading--label-leading {
  text-align: inherit;
  align-items: flex-start;
}
.ot-loading__text, .ot-loading__text--fade-out {
  opacity: 0;
}
.ot-loading__text {
  max-width: 100%;
  margin-top: 2.5rem;
  text-align: center;
  transform: translateY(1.5rem);
}
.ot-loading__text--fade-out {
  transition: transform 100ms cubic-bezier(0.4, 0, 0.4, 1), opacity 100ms cubic-bezier(0.4, 0, 0.4, 1);
  transform: translateY(-1.5rem);
}
.ot-loading__text--fade-in {
  transition: transform 100ms cubic-bezier(0.4, 0, 0.4, 1), opacity 100ms cubic-bezier(0.4, 0, 0.4, 1);
  transform: translateY(0);
  opacity: 1;
}
.ot-loading__ball {
  display: block;
  width: 0;
  height: 0;
  transform-origin: bottom;
  border-radius: 64px;
  border: 0.5rem solid rgb(var(--colour-semantic-informative, 0, 88, 163));
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.4, 1);
  animation: ot-loading-bounce 0.7s infinite;
}
.ot-loading__ball--small {
  border-width: 0.125rem;
}
.ot-loading__ball--medium {
  border-width: 0.25rem;
}
.ot-loading__ball--small, .ot-loading__ball--medium {
  transform: translateY(-160%);
  animation: ot-loading-bounce-small 0.7s infinite;
}
.ot-loading__ball--large {
  margin-bottom: 2rem;
}
.ot-loading__ball--primary {
  border-color: rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-loading__ball--secondary {
  border-color: rgb(var(--colour-neutral-1, 255, 255, 255));
}
.ot-loading__ball--secondary + .ot-loading__text {
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-loading__linear-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 0.3125rem;
}
.ot-loading__linear-wrapper + .ot-loading__text {
  margin-top: 1rem;
}
.ot-loading__sr-only-text, .ot-loading__linear-label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-loading__linear-progress {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.375rem;
  background: rgb(var(--colour-neutral-2, 245, 245, 245));
}
.ot-loading__linear-progress::-webkit-progress-bar {
  border-radius: 0.375rem;
  background: rgb(var(--colour-neutral-2, 245, 245, 245));
}
.ot-loading__linear-progress::-moz-progress-bar {
  border-radius: 0.375rem;
  background: rgb(var(--colour-semantic-informative, 0, 88, 163));
}
.ot-loading__linear-progress::-webkit-progress-value {
  border-radius: 0.375rem;
  background: rgb(var(--colour-semantic-informative, 0, 88, 163));
}
@media (forced-colors: active) {
  .ot-loading__linear-progress {
    appearance: revert;
    height: revert;
    border: revert;
    border-radius: revert;
    background: revert;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ot-loading .ot-loading__text {
    transition: none;
  }
  .ot-loading .ot-loading__ball {
    transition: none;
  }
}
@keyframes ot-loading-bounce-small {
  0%, 100% {
    transform: translate(0, -160%);
    animation-timing-function: cubic-bezier(0.42, 0, 1, 1);
  }
  40% {
    transform: translate(0, 20%);
    animation-timing-function: cubic-bezier(0, 0, 0, 1);
  }
}
@keyframes ot-loading-bounce {
  0% {
    transform: translateY(0);
    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(0);
  }
}.ot-scroll-indicator {
  box-sizing: border-box;
  height: 1.875rem;
  position: relative;
  width: 100%;
  outline: none;
  border: 0;
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.ot-scroll-indicator--dragging .ot-scroll-indicator__bar-wrapper, .ot-scroll-indicator--dragging .ot-scroll-indicator__bar, .ot-scroll-indicator:hover .ot-scroll-indicator__bar-wrapper, .ot-scroll-indicator:hover .ot-scroll-indicator__bar {
  height: 0.25rem;
}
.ot-scroll-indicator--dragging .ot-scroll-indicator__bar, .ot-scroll-indicator--dragging .ot-scroll-indicator__bar:hover {
  height: 0.5rem;
  top: -0.125rem;
}
.ot-scroll-indicator__bar-wrapper {
  width: 100%;
  background: rgb(var(--colour-neutral-3, 223, 223, 223));
  transform: translateX(0);
  height: 0.125rem;
  display: block;
  border-radius: 4px;
  scrollbar-width: none;
}
.ot-scroll-indicator__bar-wrapper::-webkit-scrollbar {
  display: none;
}
.ot-scroll-indicator__bar {
  will-change: transform;
  background: rgb(var(--colour-neutral-7, 17, 17, 17));
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 0.125rem;
  transform-origin: 0 0;
  display: block;
  border-radius: 4px;
  cursor: grab;
}
.ot-scroll-indicator__bar::after {
  content: " ";
  position: absolute;
  top: -0.625rem;
  bottom: -0.625rem;
  left: 0;
  right: 0;
  display: block;
}
.ot-scroll-indicator__bar-dragging {
  cursor: grabbing;
}

.ot-carousel {
  position: relative;
  --focus-margin-start: 0rem;
  --focus-margin-end: 0rem;
}
.ot-carousel:has(.ot-carousel-slide *:focus-visible) {
  --focus-margin-start: .5rem;
  --focus-margin-end: .5rem;
}
.ot-carousel .ot-skip-content__button {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-carousel .ot-skip-content__button:active, .ot-carousel .ot-skip-content__button:focus, .ot-carousel .ot-skip-content__button:focus-visible {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 199;
  background: rgb(var(--colour-static-light-grey, 245, 245, 245));
  color: rgb(var(--colour-static-black, 17, 17, 17));
  border-radius: 64px;
  padding: 1rem 2rem;
  font-weight: bold;
  text-decoration: none;
}
.ot-carousel .ot-skip-content__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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-carousel__wrapper {
  position: relative;
}
.ot-carousel__content {
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;
  margin-inline-start: calc(-1 * var(--overflow-start, var(--focus-margin-start)));
  margin-inline-end: calc(-1 * var(--overflow-end, var(--focus-margin-end)));
  padding-inline-start: var(--overflow-start, var(--focus-margin-start));
  padding-inline-end: var(--overflow-end, var(--focus-margin-end));
  overscroll-behavior-inline: contain;
  --padding-difference: calc(var(--carousel-vertical-padding, 0.5rem) - 0.5rem);
  --clamped-difference: max(min(0rem, var(--padding-difference)), -0.5rem);
  --calculated-additional-padding: calc(-1 * var(--clamped-difference));
  padding-block: calc(var(--carousel-vertical-padding, 0.5rem) + var(--calculated-additional-padding));
  margin-block: var(--clamped-difference);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--carousel-item-gap, 1.25rem);
}
.ot-carousel__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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}
.ot-carousel__content--single-slide {
  overflow: visible;
}
.ot-carousel--has-scrollbar .ot-carousel__content {
  margin-block-end: 0;
}
.ot-carousel--dragging {
  cursor: grabbing;
}
.ot-carousel .ot-btn.ot-carousel__button {
  position: absolute;
}
.ot-carousel__button {
  top: 50%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms, visibility 200ms;
  cursor: pointer;
  z-index: 99;
  left: -1rem;
  transform: translateY(-50%);
}
.ot-carousel:hover .ot-carousel__button {
  opacity: 1;
  visibility: visible;
  display: block;
  transition: opacity 200ms, visibility 200ms;
}
.ot-carousel:hover .ot-carousel__button--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 200ms;
}
.ot-carousel__button--right {
  left: auto;
  right: -1rem;
}
.ot-carousel-slide {
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  flex-shrink: 0;
}
.ot-carousel__live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ot-carousel__scroll-indicator {
  display: none;
}
.ot-carousel__slide-show {
  --focus-margin-start: 0rem !important;
}
.ot-carousel__slide-show .ot-carousel__button {
  left: 2rem;
}
.ot-carousel__slide-show .ot-carousel__button--right {
  right: 2rem;
  left: auto;
}
.ot-carousel__slide-show .ot-carousel__content--snap-slide {
  scroll-snap-type: x mandatory;
}
.ot-carousel__slide-show .ot-carousel__content--drag-slide {
  scroll-snap-type: none;
}
.ot-carousel__slide-show .ot-carousel-slide {
  position: relative;
  margin-inline-end: 0;
  margin-inline-start: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100%;
  display: block;
  text-align: center;
}
.ot-carousel__slide-show .ot-carousel-slide .ot-video-player {
  display: flex;
  justify-content: center;
}
.ot-carousel__slide-show .ot-carousel-slide > :first-child {
  max-height: 75vh;
  max-width: 100%;
  display: inline-block;
}
.ot-carousel__slide-show .ot-carousel-slide > :first-child img,
.ot-carousel__slide-show .ot-carousel-slide > :first-child video {
  max-height: 75vh;
  max-width: 100%;
  width: auto;
}
.ot-carousel--intersection-observer-disabled:hover .ot-carousel__button {
  display: none;
}
.ot-carousel:not(.ot-carousel--intersection-observer-disabled) .ot-carousel__content {
  scrollbar-width: none;
}
.ot-carousel:not(.ot-carousel--intersection-observer-disabled) .ot-carousel__content::-webkit-scrollbar {
  display: none;
}

@media not all and (min-resolution: 0.001dpcm) {
  .ot-carousel__content {
    scroll-snap-type: x mandatory;
  }
}
@media (hover: none) and (pointer: coarse) {
  .ot-carousel__button {
    opacity: 1;
    visibility: visible;
    display: block;
  }
  .ot-carousel__button--hidden {
    opacity: 0;
    visibility: hidden;
    display: none;
  }
}
.ot-carousel__counter--wrapper {
  display: flex;
  align-items: stretch;
}

.ot-carousel__counter {
  display: flex;
  flex: 0 1 auto;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  line-height: 1.571;
  font-weight: 700;
  margin-inline-start: 0.5rem;
  white-space: nowrap;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}

@media (min-width: 37.5em) {
  .ot-carousel__button {
    left: -1.25rem;
    right: auto;
  }
  .ot-carousel__button--right {
    left: auto;
    right: -1.25rem;
  }
  .ot-carousel__counter {
    display: none;
  }
}
@media (min-width: 56.25em) {
  .ot-carousel__content {
    top: 0;
  }
  .ot-carousel__wrapper {
    bottom: auto;
    width: 100%;
  }
  .ot-carousel__button, .ot-carousel__scroll-indicator {
    display: block;
  }
  .ot-carousel__slide-show .ot-carousel-slide,
  .ot-carousel__slide-show .ot-scroll-indicator {
    padding-inline-start: 6.25rem;
    padding-inline-end: 6.25rem;
  }
}
@media (orientation: landscape) and (max-width: 56.25em) {
  .ot-carousel__slide-show .ot-carousel-slide > :first-child {
    max-height: 60vh;
  }
  .ot-carousel__slide-show .ot-carousel-slide > :first-child img,
  .ot-carousel__slide-show .ot-carousel-slide > :first-child video {
    max-height: 60vh;
    width: auto;
  }
}
[dir=rtl] .ot-carousel__skip-button:active, [dir=rtl] .ot-carousel__skip-button:focus-visible {
  left: auto;
  right: 1.5rem;
}
[dir=rtl] .ot-carousel__button {
  left: auto;
  right: -1.25rem;
  transform: translateY(-50%) scaleX(-1);
}
[dir=rtl] .ot-carousel__button--right {
  right: auto;
  left: -1.25rem;
}
[dir=rtl] .ot-carousel__slide-show .ot-carousel__button {
  right: 2rem;
  left: auto;
}
[dir=rtl] .ot-carousel__slide-show .ot-carousel__button--right {
  left: 2rem;
  right: auto;
}

.ot-overflow-carousel {
  position: relative;
}
.ot-overflow-carousel__content {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  padding: 0.5rem 0;
  overscroll-behavior-inline: contain;
}
.ot-overflow-carousel__content > * {
  flex-shrink: 0;
}
.ot-overflow-carousel .ot-btn.ot-overflow-carousel__button {
  position: absolute;
}
.ot-overflow-carousel__button {
  top: 50%;
  transition: opacity 200ms, visibility 0 200ms;
  cursor: pointer;
  z-index: 1;
  left: 0.75rem;
  transform: translateY(-50%);
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
}
.ot-overflow-carousel__button--hidden {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms, visibility 0 200ms;
}
.ot-overflow-carousel__button--right {
  left: auto;
  right: 0.75rem;
}
.ot-overflow-carousel--intersection-observer-disabled {
  display: block;
}
.ot-overflow-carousel--intersection-observer-disabled:hover .ot-overflow-carousel__button {
  display: none;
}
.ot-overflow-carousel--intersection-observer-disabled .ot-overflow-carousel__content::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  display: block;
}
.ot-overflow-carousel--intersection-observer-disabled .ot-overflow-carousel__content::-webkit-scrollbar-track {
  background: rgb(var(--colour-neutral-3, 223, 223, 223));
  border-radius: 4px;
}
.ot-overflow-carousel--intersection-observer-disabled .ot-overflow-carousel__content::-webkit-scrollbar-thumb {
  background: rgb(var(--colour-neutral-7, 17, 17, 17));
  border-radius: 4px;
}
.ot-overflow-carousel:not(.ot-overflow-carousel--intersection-observer-disabled) .ot-overflow-carousel__content {
  scrollbar-width: none;
}
.ot-overflow-carousel:not(.ot-overflow-carousel--intersection-observer-disabled) .ot-overflow-carousel__content::-webkit-scrollbar {
  display: none;
}
.ot-overflow-carousel__browser-direction {
  direction: rtl;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.ot-overflow-carousel__browser-item {
  width: 2px;
  height: 1px;
}

[dir=rtl] .ot-overflow-carousel__button {
  left: auto;
  right: 0.75rem;
  transform: translateY(-50%) scaleX(-1);
}
[dir=rtl] .ot-overflow-carousel__button--right {
  right: auto;
  left: 0.75rem;
}.ot-skip-content__button {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-skip-content__button:active, .ot-skip-content__button:focus, .ot-skip-content__button:focus-visible {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 199;
  background: rgb(var(--colour-static-light-grey, 245, 245, 245));
  color: rgb(var(--colour-static-black, 17, 17, 17));
  border-radius: 64px;
  padding: 1rem 2rem;
  font-weight: bold;
  text-decoration: none;
}
.ot-skip-content__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: var(--skapa-focus-outline-offset, 4px);
  transition: outline 200ms ease-out, box-shadow 200ms ease-out;
}.ot-choice {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  --choice-item-min-height: 4.5rem;
  --choice-list-item-margin-block-end: 0.75rem;
  --choice-item-padding-top: 0.75rem;
  --choice-item-padding-bottom: 0.75rem;
  --choice-item-border-colour: rgb(var(--colour-neutral-3, 223, 223, 223));
}
.ot-choice--small {
  --choice-list-item-margin-block-end: 0.5rem;
  --choice-item-padding-top: 0.5rem;
  --choice-item-padding-bottom: 0.5rem;
  --choice-item-min-height: 3.75rem;
}
.ot-choice--large {
  --choice-list-item-margin-block-end: 1rem;
  --choice-item-padding-top: 1.25rem;
  --choice-item-padding-bottom: 1.25rem;
  --choice-item-min-height: 5.5rem;
}
.ot-choice .ot-choice__list-item {
  margin-bottom: var(--choice-list-item-margin-block-end);
}

.ot-choice-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: none;
}
.ot-choice-item__action {
  display: flex;
  align-items: center;
  border: 0;
  outline: 0;
  background: none;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: text;
  appearance: none;
  min-height: var(--choice-item-min-height, 4.5rem);
  padding-top: var(--choice-item-padding-top, 0.75rem);
  padding-bottom: var(--choice-item-padding-bottom, 0.75rem);
}
.ot-choice-item__action--top .ot-choice-item__image,
.ot-choice-item__action--top .ot-choice-item__payment-logo {
  align-self: flex-start;
}
.ot-choice-item__action:active + .ot-choice-item__border {
  --choice-item-border-colour: rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-choice-item__action:disabled {
  cursor: default;
}
.ot-choice-item__action:disabled .ot-choice-item__caption,
.ot-choice-item__action:disabled .ot-choice-item__title,
.ot-choice-item__action:disabled .ot-choice-item__value,
.ot-choice-item__action:disabled .ot-choice-item__icon,
.ot-choice-item__action:disabled .ot-price,
.ot-choice-item__action:disabled .ot-choice-item__custom-content * {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-choice-item__action:disabled .ot-choice-item__image .ot-svg-icon path {
  fill: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-choice-item__action:disabled + .ot-choice-item__border {
  --choice-item-border-colour: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)) !important;
}
.ot-choice-item__action:disabled .ot-choice-item__addon,
.ot-choice-item__action:disabled .ot-payment-logo,
.ot-choice-item__action:disabled .ot-choice-item__image,
.ot-choice-item__action:disabled .ot-price-module__energy-class svg {
  opacity: 0.2;
}
@media (hover: hover) {
  .ot-choice-item__action:hover:not(:disabled) {
    text-decoration: none;
  }
  .ot-choice-item__action:hover:not(:disabled) + .ot-choice-item__border {
    --choice-item-border-colour: rgb(var(--colour-neutral-5, 146, 146, 146));
  }
}
.ot-choice-item__content {
  display: flex;
  flex: 1;
  text-align: start;
}
.ot-choice-item__custom-content {
  flex: 1;
  text-align: start;
}
.ot-choice-item__border {
  position: absolute;
  top: 0rem;
  right: 0rem;
  bottom: 0rem;
  left: 0rem;
  border: 1px solid var(--choice-item-border-colour, rgb(var(--colour-neutral-3, 223, 223, 223)));
  border-radius: 4px;
  pointer-events: none;
}
.ot-choice-item__text {
  flex-grow: 1;
}
.ot-choice-item__title, .ot-choice-item__caption {
  display: block;
}
.ot-choice-item__caption {
  margin-block-start: 0.25rem;
}
.ot-choice-item__addon {
  display: block;
  margin-block-start: 0.5rem;
}
.ot-choice-item__image {
  margin-inline-end: 1rem;
  flex-shrink: 0;
  width: 3rem;
}
.ot-choice-item__image--medium {
  width: 4.5rem;
}
.ot-choice-item__image--large {
  width: 6rem;
}
.ot-choice-item__icon {
  margin-inline-end: 1rem;
  flex-shrink: 0;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-choice-item__icon--top {
  align-self: flex-start;
}
.ot-choice-item .ot-payment-logo {
  margin-inline-end: 1rem;
  flex-shrink: 0;
}
.ot-choice-item__values {
  display: flex;
}
.ot-choice-item__value {
  align-self: flex-start;
  padding-inline-start: 1rem;
  word-wrap: break-word;
}
.ot-choice-item__value--center {
  align-self: center;
}
.ot-choice-item--trailing-icon .ot-choice-item__icon {
  order: 1;
  margin-inline-start: 1rem;
  margin-inline-end: 0;
}
.ot-choice-item--trailing-image .ot-choice-item__image {
  order: 1;
  margin-inline-end: 0;
  margin-inline-start: 1rem;
}
.ot-choice-item--selected > .ot-choice-item__action + .ot-choice-item__border,
.ot-choice-item--selected > .ot-choice-item__action:hover + .ot-choice-item__border,
.ot-choice-item--selected > .ot-choice-item__action:active + .ot-choice-item__border {
  border-width: 2px;
  --choice-item-border-colour: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
}
.ot-choice-item--selected.ot-choice-item--subtle .ot-choice-item__action + .ot-choice-item__border {
  --choice-item-border-colour: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-choice-item--selected .ot-choice-item__action:disabled + .ot-choice-item__border {
  --choice-item-border-colour: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)) !important;
}
.ot-choice-item .ot-price {
  display: block;
  font-size: 0.875rem;
  margin-top: 0.125rem;
}
.ot-choice-item .ot-price:not(:first-child) {
  margin-top: 0.5rem;
}

@media (forced-colors: active) {
  .ot-choice-item__action:disabled + .ot-choice-item__border {
    border-color: GrayText;
  }
}
.ot-choice--radio.ot-choice {
  display: flex;
  flex-direction: column;
  gap: var(--choice-list-item-margin-block-end);
}
.ot-choice--radio.ot-choice--subtle .ot-choice-item .ot-choice-item__radio:checked ~ .ot-choice-item__border {
  --choice-item-border-colour: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-choice--radio.ot-choice legend.ot-choice__legend {
  margin-bottom: 0.5rem;
}
.ot-choice--radio.ot-choice .ot-choice__legend--sr-only {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}

.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:checked ~ .ot-choice-item__border {
  border-width: 2px;
  --choice-item-border-colour: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
}
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__border {
  cursor: default;
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__addon,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__image,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-price-module__energy-class svg,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-payment-logo {
  opacity: 0.2;
}
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__caption,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__title,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__value,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__icon,
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__action .ot-choice-item__custom-content * {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-choice-item--radio.ot-choice-item .ot-choice-item__radio:disabled ~ .ot-choice-item__border {
  --choice-item-border-colour: rgb(var(--colour-interactive-disabled-1, 204, 204, 204)) !important;
}
.ot-skeleton {
  line-height: inherit;
  cursor: progress;
  background-color: rgb(var(--colour-neutral-3, 223, 223, 223));
  background-image: linear-gradient(90deg, rgba(var(--colour-neutral-1, 255, 255, 255), 0) 40%, rgba(var(--colour-neutral-2, 245, 245, 245), 0.5) 50%, rgba(var(--colour-neutral-1, 255, 255, 255), 0) 60%);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 250% 100%;
  background-origin: border-box;
  border: 1px solid transparent;
  box-sizing: border-box;
  animation: ot-shine 2s 20;
  display: block;
}
.ot-skeleton--inline-block {
  display: inline-block;
}
.ot-skeleton::after {
  content: "​";
}
[dir=rtl] .ot-skeleton {
  animation-direction: reverse;
}

@keyframes ot-shine {
  to {
    background-position: 0 100%;
  }
}.ot-list {
  list-style-position: outside;
}
.ot-list--unordered .ot-list--unordered {
  list-style-type: circle;
}
.ot-list--ordered .ot-list--ordered {
  list-style-type: upper-alpha;
}
.ot-list--small {
  padding-inline-start: 1.375rem;
}
.ot-list--small .ot-list--unordered,
.ot-list--small .ot-list--ordered {
  padding-inline-start: 0.875rem;
}
.ot-list--small li:not(:first-child) {
  margin-top: 0.5rem;
}
.ot-list--small .ot-list--unordered li,
.ot-list--small .ot-list--ordered li {
  margin-top: 0.25rem;
}
.ot-list--medium {
  padding-inline-start: 1.9375rem;
}
.ot-list--medium .ot-list--unordered,
.ot-list--medium .ot-list--ordered {
  padding-inline-start: 1.1875rem;
}
.ot-list--medium li:not(:first-child) {
  margin-top: 0.75rem;
}
.ot-list--medium .ot-list--unordered li,
.ot-list--medium .ot-list--ordered li {
  margin-top: 0.5rem;
}
.ot-list--large {
  padding-inline-start: 2rem;
}
.ot-list--large .ot-list--unordered,
.ot-list--large .ot-list--ordered {
  padding-inline-start: 1.25rem;
}
.ot-list--large li:not(:first-child) {
  margin-top: 0.75rem;
}
.ot-list--large .ot-list--unordered li,
.ot-list--large .ot-list--ordered li {
  margin-top: 0.5rem;
}
.ot-list--xlarge {
  padding-inline-start: 2.5625rem;
}
.ot-list--xlarge .ot-list--unordered,
.ot-list--xlarge .ot-list--ordered {
  padding-inline-start: 1.5625rem;
}
.ot-list--xlarge li:not(:first-child) {
  margin-top: 1rem;
}
.ot-list--xlarge .ot-list--unordered li,
.ot-list--xlarge .ot-list--ordered li {
  margin-top: 0.75rem;
}.ot-list-box {
  position: absolute;
  display: block;
  opacity: 0;
  flex-direction: column;
  width: 100%;
  max-width: 24rem;
  background: rgb(var(--colour-elevation-2, 255, 255, 255));
  box-shadow: 0px 0px 0px 1px rgba(var(--colour-neutral-4, 204, 204, 204), 0.24), 0px 4px 8px 0px rgba(var(--colour-static-black, 17, 17, 17), 0.14);
  overflow: hidden;
  border-radius: 8px;
  outline: 1px solid rgba(var(--colour-neutral-7, 17, 17, 17), 0.07);
  transition-property: opacity;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.9, 0, 1, 1);
  z-index: 100;
}
.ot-list-box .ot-list-view-item:hover {
  background-color: rgba(var(--colour-interactive-primary-bg-default, 17, 17, 17), 0.05);
}
.ot-list-box--open {
  opacity: 1;
  transition: none;
}
.ot-list-box--closed {
  display: none;
}
.ot-list-box--top {
  bottom: 100%;
}
.ot-list-box--right {
  right: 0;
}
.ot-list-box__trigger {
  position: relative;
  display: inline-block;
}
.ot-list-box__trigger .ot-list-box {
  margin-block: 0.5rem;
  width: max-content;
}
.ot-list-box__body {
  box-sizing: border-box;
  overflow: auto;
  max-height: 18rem;
  padding-block: 0.5rem;
}
.ot-list-box__footer {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  grid-auto-columns: minmax(max-content, 1fr);
  padding: 1rem 1.5rem;
  border-top: 1px rgb(var(--colour-neutral-3, 223, 223, 223)) solid;
}
.ot-list-box__group {
  list-style-type: none;
  padding: 1rem 1.5rem 0.5rem 1.5rem;
}

.ot-menu-item {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1.5rem;
  padding-inline-end: 3.5rem;
  cursor: pointer;
  transition: background-color 200ms ease-in-out;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  min-height: 3rem;
}
.ot-menu-item:hover {
  background-color: rgb(var(--colour-neutral-3, 223, 223, 223));
}
.ot-menu-item--active, .ot-menu-item:focus-visible {
  box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17));
}
.ot-menu-item--hidden {
  display: none;
}
.ot-menu-item__leading-content {
  flex-shrink: 0;
  margin-inline-end: 1rem;
}
.ot-menu-item__title {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  flex-grow: 1;
}
.ot-menu-item__trailing-content {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  flex-shrink: 0;
  margin-inline-start: 1rem;
}
.ot-menu-item__selected-icon {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}
.ot-menu-item--disabled {
  pointer-events: none;
}
.ot-menu-item--disabled .ot-menu-item__leading-content,
.ot-menu-item--disabled .ot-menu-item__title,
.ot-menu-item--disabled .ot-menu-item__trailing-content {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}

[dir=rtl] .ot-menu-item__selected-icon {
  left: 1rem;
  right: auto;
}.ot-tabs {
  --skapa-tab-panel-block-padding: 1.5rem;
}
.ot-tabs--subtle {
  --skapa-tab-selected-colour: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-tabs .ot-overflow-carousel {
  max-width: 100%;
  width: 100%;
}
.ot-tabs .ot-overflow-carousel__content {
  padding: 0;
}
.ot-tabs__tab {
  position: relative;
  background: none;
  border: 0;
  color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
  min-height: 3.25rem;
  padding: 0 0.25rem;
  text-align: initial;
  outline: none;
}
.ot-tabs__tab .ot-svg-icon {
  margin-inline-end: 0.5rem;
}
.ot-tabs__tab:not(:disabled):hover {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-tabs__tab:disabled {
  cursor: default;
}
.ot-tabs__tab--active {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  cursor: default;
}
.ot-tabs__tab--active:not(:disabled):hover {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-tabs__tab + .ot-tabs__tab {
  margin-inline-start: 1.5rem;
}
.ot-tabs__tab:disabled {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-tabs__list {
  position: relative;
  display: flex;
  width: 100%;
  --tab-inline-block: 1px;
  overflow: hidden;
}
.ot-tabs__list:has([role=tab]:focus-visible) {
  --tab-inline-block: 2px;
}
.ot-tabs__list::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  border-bottom: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
}
.ot-tabs__list .ot-tab-highlight {
  width: 0;
  display: block;
  align-self: flex-end;
  height: 0.1875rem;
  pointer-events: none;
  order: -1;
}
.ot-tabs__list .ot-tab-highlight::after {
  content: "";
  position: absolute;
  bottom: 0px;
  inset-block-end: var(--tab-inline-block, 0);
  inset-inline-start: var(--tab-selection-offset, 0);
  width: var(--tab-selection-width, 0);
  border-radius: calc(0.1875rem / 2);
  border-bottom: 0.1875rem solid var(--skapa-tab-selected-colour, rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163)));
  display: block;
  transition: left var(--tab-selection-transition, 0s) cubic-bezier(0.4, 0, 0.4, 1), width var(--tab-selection-transition, 0s) cubic-bezier(0.4, 0, 0.4, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ot-tabs__list .ot-tab-highlight::after {
    transition: none;
  }
}
[dir=rtl] .ot-tabs__list .ot-tab-highlight::after {
  inset-inline-start: unset;
  inset-inline-end: var(--tab-selection-offset, 0);
}
.ot-tabs__panel {
  outline: none;
  padding: var(--skapa-tab-panel-block-padding) 0;
  position: relative;
}.ot-product-identifier {
  display: inline-block;
}
.ot-product-identifier__label {
  display: block;
  margin-bottom: 0.5rem;
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-product-identifier__value {
  display: inline-block;
  background-color: rgb(var(--colour-neutral-7, 17, 17, 17));
  padding: calc(0.25rem - 1px) calc(0.75rem - 1px);
  border: 1px solid rgb(var(--colour-neutral-7, 17, 17, 17));
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-product-identifier--subtle .ot-product-identifier__value {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
  border-color: rgb(var(--colour-neutral-2, 245, 245, 245));
}

@media print {
  .ot-product-identifier__value {
    color: rgb(var(--colour-static-black, 17, 17, 17));
    background-color: transparent;
    border-color: rgb(var(--colour-static-black, 17, 17, 17));
  }
  @supports (print-color-adjust: exact) or (-webkit-print-color-adjust: exact) {
    .ot-product-identifier__value {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      background-color: rgb(var(--colour-static-black, 17, 17, 17));
      color: rgb(var(--colour-static-white, 255, 255, 255));
    }
  }
}.ot-segmented-control {
  display: flex;
  --highlight-width: auto;
  --highlight-x-pos: 0;
  --highlight-transition-property: none;
}
.ot-segmented-control--subtle .ot-segmented-control__inner::before {
  background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
  box-shadow: inset 0 0 0 1px rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
}
.ot-segmented-control--subtle .ot-segmented-control__inner--disabled::before {
  box-shadow: inset 0 0 0 1px rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
}
.ot-segmented-control--subtle .ot-segmented-control__button--active .ot-segmented-control__button-label,
.ot-segmented-control--subtle .ot-segmented-control__button--active .ot-segmented-control__button-icon {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-segmented-control--fill-solid .ot-segmented-control__inner {
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  border-color: rgb(var(--colour-neutral-1, 255, 255, 255));
}
.ot-segmented-control__inner {
  position: relative;
  display: flex;
  background: transparent;
  border: 1px solid rgb(var(--colour-neutral-4, 204, 204, 204));
  border-radius: 64px;
  padding: 0.1875rem;
  gap: 0.5625rem;
  word-break: break-word;
}
.ot-segmented-control__inner--fluid {
  width: 100%;
}
.ot-segmented-control__inner--transition::before {
  content: "";
  background-color: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
  border-radius: 64px;
  width: var(--highlight-width);
  transform: translateX(var(--highlight-x-pos));
  position: absolute;
  top: 0.1875rem;
  bottom: 0.1875rem;
  left: 0;
  transition: var(--highlight-transition-property) 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-segmented-control__inner--disabled::before {
  background-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
}
.ot-segmented-control__inner--disabled .ot-segmented-control__button-divider::before {
  background-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-segmented-control__button {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: transparent;
  border: none;
  width: 100%;
  padding-inline-start: 1.5rem;
  padding-inline-end: 1.5rem;
  padding-block-start: 0.25rem;
  padding-block-end: 0.25rem;
  border-radius: 64px;
  min-height: 3rem;
}
.ot-segmented-control__button-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.3125rem;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: rgb(var(--colour-neutral-4, 204, 204, 204));
  margin-block-start: 0.75rem;
  margin-block-end: 0.75rem;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-segmented-control__button::after {
  content: "";
  position: absolute;
  top: -0.125rem;
  left: 0;
  right: 0;
  bottom: -0.125rem;
}
.ot-segmented-control__button-label {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  transition: color 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-segmented-control__button-icon {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  transition: color 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-segmented-control__button.ot-segmented-control__button--icon-only.ot-segmented-control__button--icon-only {
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
}
.ot-segmented-control__button--icon-only .ot-segmented-control__button-label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-segmented-control__button:hover {
  background-color: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
}
.ot-segmented-control__button:active {
  background-color: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
}
.ot-segmented-control__button:disabled {
  cursor: default;
}
.ot-segmented-control__button:disabled:hover {
  background-color: transparent;
}
.ot-segmented-control__button:disabled .ot-segmented-control__button-label,
.ot-segmented-control__button:disabled .ot-segmented-control__button-icon {
  color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
}
.ot-segmented-control__button--active .ot-segmented-control__button-label,
.ot-segmented-control__button--active .ot-segmented-control__button-icon {
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-segmented-control__button--active:hover, .ot-segmented-control__button--active:active {
  background-color: transparent;
}
.ot-segmented-control--disabled .ot-segmented-control__inner--transition::before {
  background-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-segmented-control--xsmall .ot-segmented-control__inner {
  padding: 0.125rem;
  gap: 0.4375rem;
}
.ot-segmented-control--xsmall .ot-segmented-control__button {
  min-height: 1.625rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
  padding-block-start: 0.0625rem;
  padding-block-end: 0.0625rem;
}
.ot-segmented-control--xsmall .ot-segmented-control__button-divider::before {
  margin-block-start: 0.25rem;
  margin-block-end: 0.25rem;
  left: -0.25rem;
}
.ot-segmented-control--xsmall .ot-segmented-control__button::after {
  top: -0.625rem;
  bottom: -0.625rem;
}
.ot-segmented-control--xsmall .ot-segmented-control__inner--transition::before {
  top: 0.125rem;
  bottom: 0.125rem;
}
.ot-segmented-control--small .ot-segmented-control__button {
  min-height: 2rem;
  padding-inline-start: 1rem;
  padding-inline-end: 1rem;
}
.ot-segmented-control--small .ot-segmented-control__button-divider::before {
  margin-block-start: 0.5rem;
  margin-block-end: 0.5rem;
}
.ot-segmented-control--small .ot-segmented-control__button::after {
  top: -0.375rem;
  bottom: -0.375rem;
}
@media (prefers-reduced-motion: reduce) {
  .ot-segmented-control__inner--transition::before, .ot-segmented-control__button-divider::before, .ot-segmented-control__button-label, .ot-segmented-control__label-icon {
    transition: none;
  }
}.ot-table th {
  font-weight: inherit;
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
}
.ot-table td,
.ot-table a {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-table a:hover {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-table a:active,
.ot-table a:focus {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-table th,
.ot-table td {
  text-align: initial;
  border-bottom: 1px rgb(var(--colour-neutral-3, 223, 223, 223)) solid;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-inline-start: 0;
  padding-inline-end: 1.5rem;
}
.ot-table-header--sticky th {
  position: sticky;
  top: 0;
  z-index: 100;
}
.ot-table--inset th,
.ot-table--inset td {
  padding-inline-start: 1.5rem;
}
.ot-table-body--striped tr:nth-child(odd) {
  background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
}
.ot-table tbody th,
.ot-table tbody td {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.ot-table:not(table) {
  max-width: 100%;
  overflow: auto;
}

.ot-table:not(table) table,
table.ot-table {
  border-collapse: separate;
  border-spacing: 0;
  position: relative;
  font-variant-numeric: tabular-nums;
}

.ot-table--full-width:not(table) table,
table.ot-table--full-width {
  width: 100%;
}.ot-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  border-width: 0.0625rem;
  border-style: solid;
  border-radius: 2.125rem;
  min-height: 2rem;
  min-width: 2rem;
  padding-inline-end: 0.6875rem;
  padding-inline-start: 0.6875rem;
  background-color: var(--badge-background, rgb(var(--colour-neutral-3, 223, 223, 223)));
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-badge--small {
  min-height: 1.25rem;
  min-width: 1.25rem;
  padding-inline-end: 0.3125rem;
  padding-inline-start: 0.3125rem;
}
.ot-badge--light-foreground {
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-badge--dark-foreground {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-badge--static-light-foreground {
  color: rgb(var(--colour-static-white, 255, 255, 255));
}
.ot-badge--static-dark-foreground {
  color: rgb(var(--colour-static-black, 17, 17, 17));
}
.ot-badge--white {
  border-color: rgb(var(--colour-neutral-4, 204, 204, 204));
}
.ot-badge--icon {
  padding-inline-start: 0.5625rem;
}
.ot-badge--icon-only {
  padding: 0.1875rem;
}
.ot-badge--icon-only .ot-badge__label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-badge__icon {
  flex-shrink: 0;
  color: currentColor;
}
.ot-badge__label {
  text-align: center;
  padding-block: 0.375rem;
}
.ot-badge__icon + .ot-badge__label {
  margin-inline-start: 0.25rem;
  text-align: left;
}
.ot-badge--small .ot-badge__label {
  padding-top: 0;
  padding-bottom: 0;
}.ot-accordion-item-header {
  display: flex;
  background: none;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  text-decoration: none;
  user-select: text;
}
.ot-accordion-item-header:active, .ot-accordion-item-header:focus-visible, .ot-accordion-item-header:hover {
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
}
.ot-accordion-item-header:active .ot-accordion-item-header__title, .ot-accordion-item-header:focus-visible .ot-accordion-item-header__title, .ot-accordion-item-header:hover .ot-accordion-item-header__title {
  text-decoration: underline;
}
.ot-accordion-item-header__icon {
  flex-shrink: 0;
}
.ot-accordion-item-header--small {
  min-height: 3rem;
  padding: 0.5rem 0;
}
.ot-accordion-item-header--medium {
  min-height: 4.5rem;
  padding: 0.75rem 0;
}
.ot-accordion-item-header--large {
  min-height: 5.5rem;
  padding: 1.25rem 0;
}
.ot-accordion-item-header__title-wrapper {
  text-align: start;
  flex-grow: 1;
  line-height: 0;
  padding-inline-end: 1rem;
}
.ot-accordion-item-header__title-wrapper .ot-accordion-item-header__title {
  width: auto;
}
.ot-accordion-item-header__title {
  font-size: 0.875rem;
  line-height: 1.571;
  font-weight: 700;
  display: block;
}
.ot-accordion-item-header__subtitle {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  font-size: 0.875rem;
  line-height: 1.571;
}
.ot-accordion-item-header:disabled {
  cursor: default;
}
.ot-accordion-item-header:disabled .ot-accordion-item-header__title {
  text-decoration: none;
}
.ot-accordion-item-header:disabled .ot-accordion-item-header__title,
.ot-accordion-item-header:disabled .ot-accordion-item-header__subtitle {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-accordion-item-header:disabled .ot-accordion-item-header__icon {
  color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}

.ot-accordion--padded .ot-accordion-item-header {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.ot-accordion {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
.ot-accordion__item {
  transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
  margin: 0;
  outline: 0;
  padding: 0;
}
.ot-accordion__item--subtle .ot-accordion-item-header__title {
  font-weight: 400;
}
.ot-accordion__item--active {
  overflow: visible;
}
.ot-accordion .ot-accordion-item-header {
  border-top: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
}
.ot-accordion__item--active > .ot-accordion__content {
  visibility: visible;
  opacity: 1;
  transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-accordion__content {
  transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
}
.ot-accordion__content--inner-small {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}
.ot-accordion__content--inner-medium {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}
.ot-accordion__content--inner-large {
  padding-top: 0.5rem;
  padding-bottom: 2.5rem;
}
@media (prefers-reduced-motion) {
  .ot-accordion__item, .ot-accordion__item--active > .ot-accordion__content, .ot-accordion__content {
    transition-duration: 0ms;
  }
}
.ot-accordion .ot-collapsible {
  display: grid;
  box-sizing: border-box;
  grid-template-rows: 0fr;
  transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-accordion .ot-collapsible--expanded {
  grid-template-rows: 1fr;
}
.ot-accordion .ot-collapsible--closed .ot-collapsible__content {
  display: none;
}
.ot-accordion .ot-collapsible__content {
  overflow: hidden;
}
@media (prefers-reduced-motion) {
  .ot-accordion .ot-collapsible {
    transition-duration: 0ms;
  }
}

.ot-accordion--padded .ot-accordion__content {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

[dir=rtl] .ot-accordion .ot-accordion-item-header__icon {
  transform: scaleX(-1);
}
[dir=rtl] .ot-accordion__item--active .ot-accordion-item-header__icon {
  transform: scaleX(-1) rotate(180deg);
}.ot-collapsible {
  display: grid;
  box-sizing: border-box;
  grid-template-rows: 0fr;
  transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-collapsible--expanded {
  grid-template-rows: 1fr;
}
.ot-collapsible--closed .ot-collapsible__content {
  display: none;
}
.ot-collapsible__content {
  overflow: hidden;
}

@media (prefers-reduced-motion) {
  .ot-collapsible {
    transition-duration: 0ms;
  }
}.ot-tooltip {
  position: relative;
  display: inline-block;
}
.ot-tooltip__trigger-button {
  --background: rgb(var(--colour-interactive-secondary-bg-default, 245, 245, 245));
  --background-hover: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
  --background-press: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
  --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  --disabled-foreground: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
  --disabled-background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  position: relative;
  border: 0;
  padding: 0 2rem;
  text-align: center;
  display: inline-flex;
  cursor: pointer;
  outline: 0;
  vertical-align: top;
  text-decoration: none;
  border-radius: 64px;
  justify-content: center;
  align-items: center;
  color: var(--foreground);
  background: var(--background);
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-tooltip__trigger-button:hover {
  background: var(--background-hover);
}
.ot-tooltip__trigger-button:active {
  background: var(--background-press);
}
.ot-tooltip__trigger-button:disabled {
  cursor: default;
  background: var(--disabled-background);
  color: var(--disabled-foreground);
}
.ot-tooltip__trigger-button:hover, .ot-tooltip__trigger-button:active, .ot-tooltip__trigger-button:focus {
  text-decoration: none;
}
.ot-tooltip__trigger-button {
  height: 2rem;
  width: 2rem;
  padding: 0;
}
.ot-tooltip__trigger-button::after {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  right: -0.375rem;
  bottom: -0.375rem;
}
.ot-tooltip__trigger-button__label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-tooltip__trigger-button--active {
  background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17));
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-tooltip__trigger-button--active:hover {
  background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-tooltip__trigger-button--active:active {
  background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-tooltip__trigger-button--active:focus {
  color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
}
.ot-tooltip__trigger-button:disabled {
  background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
  cursor: default;
}
.ot-tooltip__trigger-button-label {
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  white-space: nowrap;
}
.ot-tooltip__custom-trigger-wrapper {
  display: inline-block;
  outline: 0;
}
.ot-tooltip__body {
  --skapa-tooltip-boundary-left: 0vw;
  --skapa-tooltip-boundary-right: 100vw;
  --skapa-tooltip-offset: 0.75rem;
  --skapa-tooltip-screen-edge: 1.25rem;
  --skapa-tooltip-max-width: min(60vw, calc(var(--skapa-tooltip-boundary-right, 100vw) - var(--skapa-tooltip-boundary-left, 0) - 2 * calc(var(--skapa-tooltip-screen-edge, 1.25rem) + var(--skapa-tooltip-padding-horizontal))));
  --skapa-tooltip-transformY: -100%;
  --skapa-tooltip-padding-horizontal: 0.75rem;
  --skapa-trigger-left: 50vw;
  --skapa-trigger-right: 50vw;
  --skapa-trigger-center: calc( calc(var(--skapa-trigger-left) + var(--skapa-trigger-right)) * .5);
  --skapa-tooltip-overflow-x-left: calc(50% + var(--skapa-tooltip-boundary-left) + var(--skapa-tooltip-screen-edge) - var(--skapa-trigger-center));
  --skapa-tooltip-overflow-x-right: calc(var(--skapa-trigger-center) + 50% - var(--skapa-tooltip-boundary-right) + var(--skapa-tooltip-screen-edge));
  --skapa-tooltip-transformX: min(max(-50%, calc(-50% + var(--skapa-tooltip-overflow-x-left))), calc(-50% - var(--skapa-tooltip-overflow-x-right)));
  width: max-content;
  max-width: var(--skapa-tooltip-max-width);
  visibility: hidden;
  z-index: 300;
  transition: transform 100ms cubic-bezier(0.4, 0, 0.4, 1), opacity 100ms cubic-bezier(0, 0, 1, 1), padding 100ms cubic-bezier(0.4, 0, 0.4, 1);
  position: absolute;
  top: 0;
  left: 50%;
  opacity: 0;
  display: inline-block;
  box-sizing: content-box;
  transform: translateX(var(--skapa-tooltip-transformX)) translateY(var(--skapa-tooltip-transformY));
  padding: 0;
}
.ot-tooltip__body--hidden {
  display: none;
}
.ot-tooltip__body .ot-tooltip__message-background {
  display: inline-block;
  background: rgb(var(--colour-elevation-3, 17, 17, 17));
  color: rgb(var(--colour-static-white, 255, 255, 255));
  border: 1px solid rgb(var(--colour-elevation-2-border, 72, 72, 72));
  border-radius: 4px;
  padding: 0.5rem var(--skapa-tooltip-padding-horizontal);
  white-space: pre-line;
}
.ot-tooltip__body--entering {
  padding: 0.25rem;
  visibility: visible;
  opacity: 1;
  top: 0.5rem;
}
.ot-tooltip__body--leaving {
  visibility: visible;
  opacity: 0;
}
.ot-tooltip__body--no-transition {
  transition: none;
}
.ot-tooltip--top .ot-tooltip__body--entering, .ot-tooltip--top .ot-tooltip__body--leaving {
  padding-bottom: calc(var(--skapa-tooltip-offset) + 0.5rem);
}
.ot-tooltip--trailing .ot-tooltip__body {
  top: 50%;
  left: calc(100% - 0.5rem);
  /** The padding has to be added twice because of the box-sizing: content-box rule */
  max-width: min(var(--skapa-tooltip-max-width), var(--skapa-tooltip-boundary-right, 100vw) - var(--skapa-trigger-right, 50vw) - var(--skapa-tooltip-offset, 0.75rem) - 2 * var(--skapa-tooltip-padding-horizontal) - var(--skapa-tooltip-screen-edge, 1.25rem));
  --skapa-tooltip-transformX: 0%;
  --skapa-tooltip-transformY: -50%;
}
.ot-tooltip--trailing .ot-tooltip__body--entering, .ot-tooltip--trailing .ot-tooltip__body--leaving {
  padding-inline-start: calc(var(--skapa-tooltip-offset) + 0.5rem);
}
.ot-tooltip--bottom .ot-tooltip__body {
  top: calc(100% - 0.5rem);
  left: 50%;
  --skapa-tooltip-transformY: 0%;
}
.ot-tooltip--bottom .ot-tooltip__body--entering, .ot-tooltip--bottom .ot-tooltip__body--leaving {
  padding-top: calc(var(--skapa-tooltip-offset) + 0.5rem);
}
.ot-tooltip--leading .ot-tooltip__body {
  top: 50%;
  left: 0.5rem;
  /** The padding has to be added twice because of the box-sizing: content-box rule */
  max-width: min(var(--skapa-tooltip-max-width), var(--skapa-trigger-left, 50vw) - var(--skapa-tooltip-offset, 0.75rem) - 2 * var(--skapa-tooltip-padding-horizontal) - var(--skapa-tooltip-screen-edge, 1.25rem) - var(--skapa-tooltip-boundary-left, 0));
  --skapa-tooltip-transformX: -100%;
  --skapa-tooltip-transformY: -50%;
}
.ot-tooltip--leading .ot-tooltip__body--entering, .ot-tooltip--leading .ot-tooltip__body--leaving {
  padding-inline-end: calc(var(--skapa-tooltip-offset) + 0.5rem);
}
@media (min-width: 56.25em) {
  .ot-tooltip__body {
    --skapa-tooltip-max-width: min(30vw, calc(var(--skapa-tooltip-boundary-right, 0) - var(--skapa-tooltip-boundary-left, 0) - 2 * calc(var(--skapa-tooltip-screen-edge, 1.25rem) + var(--skapa-tooltip-padding-horizontal))));
  }
}

[dir=rtl] .ot-tooltip--trailing .ot-tooltip__body {
  top: 50%;
  left: 0.5rem;
  /** The padding has to be added twice because of the box-sizing: content-box rule */
  max-width: min(var(--skapa-tooltip-max-width), var(--skapa-trigger-left, 50vw) - var(--skapa-tooltip-offset, 0.75rem) - 2 * var(--skapa-tooltip-padding-horizontal) - var(--skapa-tooltip-screen-edge, 1.25rem) - var(--skapa-tooltip-boundary-left));
  --skapa-tooltip-transformX: -100%;
  --skapa-tooltip-transformY: -50%;
}
[dir=rtl] .ot-tooltip--leading .ot-tooltip__body {
  top: 50%;
  left: calc(100% - 0.5rem);
  /** The padding has to be added twice because of the box-sizing: content-box rule */
  max-width: min(var(--skapa-tooltip-max-width), var(--skapa-tooltip-boundary-right) - var(--skapa-trigger-right, 50vw) - var(--skapa-tooltip-offset, 0.75rem) - 2 * var(--skapa-tooltip-padding-horizontal) - var(--skapa-tooltip-screen-edge, 1.25rem));
  --skapa-tooltip-transformX: 0%;
  --skapa-tooltip-transformY: -50%;
}.ot-icon-pill {
  --background: rgb(var(--colour-interactive-secondary-bg-default, 245, 245, 245));
  --background-hover: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
  --background-press: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
  --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  --disabled-foreground: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
  --disabled-background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  min-height: 3.5rem;
  position: relative;
  border: 0;
  padding: 0 2rem;
  text-align: center;
  display: inline-flex;
  cursor: pointer;
  outline: 0;
  vertical-align: top;
  text-decoration: none;
  border-radius: 64px;
  justify-content: center;
  align-items: center;
  color: var(--foreground);
  background: var(--background);
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-icon-pill:hover {
  background: var(--background-hover);
}
.ot-icon-pill:active {
  background: var(--background-press);
}
.ot-icon-pill:disabled {
  cursor: default;
  background: var(--disabled-background);
  color: var(--disabled-foreground);
}
.ot-icon-pill:hover, .ot-icon-pill:active, .ot-icon-pill:focus {
  text-decoration: none;
}
.ot-icon-pill .ot-svg-icon {
  flex-shrink: 0;
}
.ot-icon-pill.ot-leading-icon {
  padding-inline-start: 1.5rem;
}
.ot-icon-pill.ot-trailing-icon {
  flex-direction: row-reverse;
  padding-inline-end: 1.5rem;
}
.ot-icon-pill--small {
  font-size: 0.75rem;
  line-height: 1.3333333333;
  min-height: 2.5rem;
  padding: 0 1.5rem;
}
.ot-icon-pill--small::after {
  content: "";
  position: absolute;
  top: -0.1875rem;
  left: -0.1875rem;
  right: -0.1875rem;
  bottom: -0.1875rem;
}
.ot-icon-pill--small.ot-leading-icon {
  padding-inline-start: 1rem;
}
.ot-icon-pill--small.ot-trailing-icon {
  padding-inline-end: 1rem;
}
.ot-icon-pill--xsmall {
  font-size: 0.75rem;
  line-height: 1.3333333333;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0 0.75rem;
}
.ot-icon-pill--xsmall::after {
  content: "";
  position: absolute;
  top: -0.4375rem;
  left: -0.4375rem;
  right: -0.4375rem;
  bottom: -0.4375rem;
}
.ot-icon-pill--xsmall.ot-leading-icon {
  padding-inline-start: 0.25rem;
}
.ot-icon-pill--xsmall.ot-trailing-icon {
  padding-inline-end: 0.25rem;
}
.ot-icon-pill {
  border: 2px solid transparent;
  padding: 0 0.875rem;
}
.ot-icon-pill:disabled {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-icon-pill--active {
  border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-icon-pill--xsmall {
  padding: 0 0.0625rem;
}
.ot-icon-pill--small {
  padding: 0 0.375rem;
}

.ot-pill {
  --background: rgb(var(--colour-interactive-secondary-bg-default, 245, 245, 245));
  --background-hover: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223));
  --background-press: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204));
  --foreground: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  --disabled-foreground: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
  --disabled-background: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
  min-height: 3.5rem;
  position: relative;
  border: 0;
  padding: 0 2rem;
  text-align: center;
  display: inline-flex;
  cursor: pointer;
  outline: 0;
  vertical-align: top;
  text-decoration: none;
  border-radius: 64px;
  justify-content: center;
  align-items: center;
  color: var(--foreground);
  background: var(--background);
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-pill:hover {
  background: var(--background-hover);
}
.ot-pill:active {
  background: var(--background-press);
}
.ot-pill:disabled {
  cursor: default;
  background: var(--disabled-background);
  color: var(--disabled-foreground);
}
.ot-pill:hover, .ot-pill:active, .ot-pill:focus {
  text-decoration: none;
}
.ot-pill .ot-pill--svg-icon {
  flex-shrink: 0;
}
.ot-pill.ot-pill--leading-icon {
  padding-inline-start: 1.5rem;
}
.ot-pill.ot-pill--trailing-icon {
  flex-direction: row-reverse;
  padding-inline-end: 1.5rem;
}
.ot-pill--small {
  font-size: 0.75rem;
  line-height: 1.3333333333;
  min-height: 2.5rem;
  padding: 0 1.5rem;
}
.ot-pill--small::after {
  content: "";
  position: absolute;
  top: -0.1875rem;
  left: -0.1875rem;
  right: -0.1875rem;
  bottom: -0.1875rem;
}
.ot-pill--small.ot-pill--leading-icon {
  padding-inline-start: 1rem;
}
.ot-pill--small.ot-pill--trailing-icon {
  padding-inline-end: 1rem;
}
.ot-pill--xsmall {
  font-size: 0.75rem;
  line-height: 1.3333333333;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0 0.75rem;
}
.ot-pill--xsmall::after {
  content: "";
  position: absolute;
  top: -0.4375rem;
  left: -0.4375rem;
  right: -0.4375rem;
  bottom: -0.4375rem;
}
.ot-pill--xsmall.ot-pill--leading-icon {
  padding-inline-start: 0.25rem;
}
.ot-pill--xsmall.ot-pill--trailing-icon {
  padding-inline-end: 0.25rem;
}
.ot-pill__trailing-icon {
  margin-inline-start: 0.5rem;
}
.ot-pill__leading-icon {
  margin-inline-end: 0.5rem;
}
.ot-pill.ot-pill--trailing-icon {
  flex-direction: row;
}
.ot-pill {
  border: 2px solid transparent;
}
.ot-pill--active {
  border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
}
.ot-pill:disabled {
  border-color: rgb(var(--colour-interactive-disabled-1, 204, 204, 204));
}
.ot-pill:disabled .ot-pill__thumbnail {
  opacity: 0.5;
}
.ot-pill--thumbnail {
  --thumbnail-padding: 0.75rem;
  padding-inline-start: var(--thumbnail-padding);
}
.ot-pill--thumbnail.ot-pill--small, .ot-pill--thumbnail.ot-pill--xsmall {
  --thumbnail-padding: 0.5rem;
}
.ot-pill--thumbnail.ot-pill--small .ot-pill__thumbnail, .ot-pill--thumbnail.ot-pill--xsmall .ot-pill__thumbnail {
  width: 1.5rem;
  height: 1.5rem;
}
.ot-pill--thumbnail.ot-pill--xsmall {
  --thumbnail-padding: 0.25rem;
}
.ot-pill__thumbnail {
  width: 2rem;
  height: 2rem;
  border-radius: 64px;
  margin-inline-end: 0.5rem;
}.ot-search {
  --skapa-search-filled: 0;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.4, 1), border 200ms cubic-bezier(0.4, 0, 0.4, 1);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 64px;
  background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
  padding-inline-end: 0.75rem;
}
.ot-search:focus-within {
  background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
  box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
}
.ot-search:focus-within .ot-search__input:-webkit-autofill {
  border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
  border-right: 0;
}
.ot-search--filled {
  --skapa-search-filled: 1;
  --skapa-search-button-width: calc(3rem + 0.0625rem);
  --skapa-search-actions-timing-function: step-start;
}
.ot-search__input {
  transition: padding 200ms cubic-bezier(0.4, 0, 0.4, 1);
  flex-grow: 1;
  margin: 0;
  padding: 0;
  padding-inline-start: calc(3rem - var(--skapa-search-filled) * 1.5rem);
  height: 3rem;
  width: calc(100% - 2.5rem);
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  background-color: transparent;
  text-overflow: ellipsis;
  box-shadow: 0 0 0 3rem transparent inset;
  border-radius: 0;
}
.ot-search__input::placeholder {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
}
.ot-search__input::-ms-clear {
  display: none;
}
.ot-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.ot-search__input:-webkit-autofill {
  background-color: transparent;
  font-family: inherit;
  -webkit-text-fill-color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  -webkit-box-shadow: 0 0 0 3rem rgb(var(--colour-neutral-2, 245, 245, 245)) inset;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.4, 1);
  border-radius: 64px 0 0 64px;
  border: 0;
}
.ot-search__input:focus ~ .ot-search__clear {
  --skapa-search-action-override: 0;
}
.ot-search--small .ot-search__input {
  height: 2.5rem;
}
.ot-search--large .ot-search__input {
  height: 3.5rem;
}
.ot-search--focus-with-clear.ot-search--filled .ot-search__input:focus ~ .ot-search__clear {
  --skapa-search-action-override: 1;
}
.ot-search__icon {
  color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
  pointer-events: none;
  position: absolute;
  margin-inline-start: 1rem;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.4, 1), opacity 200ms cubic-bezier(0, 0, 1, 1);
  transform: scale(calc(1 - var(--skapa-search-filled)));
  opacity: calc(1 - var(--skapa-search-filled));
  z-index: 1;
}
.ot-search__chevron-down {
  pointer-events: none;
  flex-shrink: 0;
}
.ot-search__scope {
  display: flex;
  flex: 0 0;
  padding-inline-start: 0.5rem;
  padding-inline-end: 1.5rem;
  margin-inline-end: -1.5rem;
  height: 2.5rem;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background-color: transparent;
  color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
  max-width: calc(50% - 0.5rem - var(--skapa-search-button-width, 0rem));
  transition: max-width 200ms cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-search__scope::-ms-expand {
  display: none;
}
.ot-search__divider {
  transition-property: opacity, width, margin;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
  height: 1.5rem;
  background-color: rgb(var(--colour-neutral-3, 223, 223, 223));
  margin-inline: 0.5rem;
  width: 1px;
}
.ot-search__divider--hidden {
  opacity: 0;
  width: 0;
  margin: 0;
}
.ot-search__action {
  --skapa-search-action-state: var(--skapa-search-action-override, var(--skapa-search-filled));
  transform: scale(calc(var(--skapa-search-action-state) * 1));
  opacity: calc(var(--skapa-search-action-state) * 1);
  max-width: calc(var(--skapa-search-action-state) * 2rem);
  transition-duration: 200ms;
  transition-property: max-width, transform, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
}
.ot-search__actions {
  --skapa-search-action-override: calc(1 - var(--skapa-search-filled));
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow: visible;
  justify-content: flex-end;
  max-width: calc(var(--skapa-search-action-override) * 8rem);
  transition: max-width 200ms cubic-bezier(0.4, 0, 0.4, 1);
  transition-property: max-width, margin;
  transition-timing-function: var(--skapa-search-actions-timing-function, step-end), cubic-bezier(0.4, 0, 0.4, 1);
  margin-inline-start: calc(1 * (3rem + 0.0625rem) * var(--skapa-search-filled));
  margin-inline-end: calc(-1 * (3rem + 0.0625rem) * var(--skapa-search-filled));
}
.ot-search__actions > .ot-search__action {
  max-width: 2rem;
}
.ot-search__actions > .ot-search__action:not(:first-child) {
  margin-inline-start: 1rem;
}

@media (forced-colors: active) {
  .ot-search {
    border: solid 1px;
  }
}