.lodev {
padding: 2rem 1.5rem;
overflow: hidden;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev--dark-grey-900 {
background: rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev--dark-grey-800 {
background: rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev--dark-grey-700 {
background: rgb(var(--colour-neutral-6, 72, 72, 72))
}
.lodev--dark-grey-500 {
background: rgb(var(--colour-neutral-5, 146, 146, 146))
}
.lodev--dark-grey-300 {
background: rgb(var(--colour-neutral-4, 204, 204, 204))
}
.lodev--light-grey-200 {
background: rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev--light-grey-100 {
background: rgb(var(--colour-neutral-2, 245, 245, 245))
}
.lodev--white {
background: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev--brand-yellow {
background: #ffdb00
}
.lodev--feedback-confirmation {
background: rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev--feedback-error {
background: rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev--feedback-warning {
background: rgb(var(--colour-semantic-caution, 242, 106, 47))
}
.lodev--brand-blue {
background: rgb(var(--colour-static-ikea-brand-blue, 0, 88, 163))
}
.lodev--dark-grey-900,.lodev--dark-grey-800,.lodev--dark-grey-700,.lodev--brand-blue,.lodev--feedback-confirmation,.lodev--feedback-error {
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}
.lodev--white .demo-support-text {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .demo-product-name-link {
font-weight: 700
}
.lodev.light {
--product-image-radius-m: 0px;
--product-image-radius-s: 0px;
--product-image-transform: none
}
.lodev.dark {
--product-image-radius-m: 8px;
--product-image-radius-s: 4px;
--product-image-transform: 90%
}
@media(min-width: 37.5em) {
.lodev {
padding:3rem 2rem
}
}
@media(min-width: 56.25em) {
.lodev {
padding:3rem 4rem
}
}
.lodev {
/*! nouislider - 14.0.2 - 6/28/2019 */
}
.lodev p:not(:last-of-type) {
margin-bottom: .75rem
}
.lodev small {
font-size: .75rem;
display: inline-block
}
.lodev h1 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1.5rem;
line-height: 1.45;
letter-spacing: -0.0042em;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev h1 {
font-size:2.25rem;
line-height: 1.333;
letter-spacing: -0.0063em
}
}
.lodev h2 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1.125rem;
line-height: 1.444;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev h2 {
font-size:1.5rem;
line-height: 1.45;
letter-spacing: -0.0042em
}
}
.lodev h3 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1rem;
line-height: 1.5;
font-weight: 700
}
.lodev h4,.lodev h5,.lodev h6 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700
}
.lodev .h1 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1.5rem;
line-height: 1.45;
letter-spacing: -0.0042em;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev .h1 {
font-size:2.25rem;
line-height: 1.333;
letter-spacing: -0.0063em
}
}
.lodev .h2 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1.125rem;
line-height: 1.444;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev .h2 {
font-size:1.5rem;
line-height: 1.45;
letter-spacing: -0.0042em
}
}
.lodev .h3 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1rem;
line-height: 1.5;
font-weight: 700
}
.lodev .h4,.lodev .h5,.lodev .h6 {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700
}
.lodev .text--heading-xl {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 2rem;
line-height: 1.375;
letter-spacing: -0.0056em;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev .text--heading-xl {
font-size:3.125rem;
line-height: 1.32;
letter-spacing: -0.0087em
}
}
.lodev .text--heading-l {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1.5rem;
line-height: 1.45;
letter-spacing: -0.0042em;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev .text--heading-l {
font-size:2.25rem;
line-height: 1.333;
letter-spacing: -0.0063em
}
}
.lodev .text--heading-m {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1.125rem;
line-height: 1.444;
font-weight: 700
}
@media(min-width: 37.5em) {
.lodev .text--heading-m {
font-size:1.5rem;
line-height: 1.45;
letter-spacing: -0.0042em
}
}
.lodev .text--heading-s {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1rem;
line-height: 1.5;
font-weight: 700
}
.lodev .text--heading-xs {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700
}
.lodev .text--body-xl {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: 1.25rem;
line-height: 1.6
}
.lodev .text--body-l {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: 1rem;
line-height: 1.625
}
.lodev .text--body-m {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: .875rem;
line-height: 1.571
}
.lodev .text--body-s {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: .75rem;
line-height: 1.5
}
.lodev .list {
list-style-position: outside
}
.lodev .list--unordered .list--unordered {
list-style-type: circle
}
.lodev .list--ordered .list--ordered {
list-style-type: upper-alpha
}
.lodev .list--small {
font-size: .75rem;
padding-inline-start:1.375rem}
.lodev .list--small .list--unordered,.lodev .list--small .list--ordered {
padding-inline-start:.875rem}
.lodev .list--small li:not(:first-child) {
margin-top: .5rem
}
.lodev .list--small .list--unordered li,.lodev .list--small .list--ordered li {
margin-top: .25rem
}
.lodev .list--medium {
font-size: .875rem;
padding-inline-start:1.9375rem}
.lodev .list--medium .list--unordered,.lodev .list--medium .list--ordered {
padding-inline-start:1.1875rem}
.lodev .list--medium li:not(:first-child) {
margin-top: .75rem
}
.lodev .list--medium .list--unordered li,.lodev .list--medium .list--ordered li {
margin-top: .5rem
}
.lodev .list--large {
font-size: 1rem;
padding-inline-start:2rem}
.lodev .list--large .list--unordered,.lodev .list--large .list--ordered {
padding-inline-start:1.25rem}
.lodev .list--large li:not(:first-child) {
margin-top: .75rem
}
.lodev .list--large .list--unordered li,.lodev .list--large .list--ordered li {
margin-top: .5rem
}
.lodev .list--xlarge {
font-size: 1.25rem;
padding-inline-start:2.5625rem}
.lodev .list--xlarge .list--unordered,.lodev .list--xlarge .list--ordered {
padding-inline-start:1.5625rem}
.lodev .list--xlarge li:not(:first-child) {
margin-top: 1rem
}
.lodev .list--xlarge .list--unordered li,.lodev .list--xlarge .list--ordered li {
margin-top: .75rem
}
.lodev .leading-icon .svg-icon {
margin-inline-end:.5rem;vertical-align: top
}
.lodev .leading-icon .svg-icon--100 {
margin-inline-end:.25rem}
.lodev .trailing-icon .svg-icon {
margin-inline-start:.5rem;vertical-align: top
}
.lodev .trailing-icon .svg-icon--100 {
margin-inline-start:.25rem}
.lodev .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) {
.lodev .svg-icon {
transition-property: none
}
}
@keyframes icon-rotate {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(359deg)
}
}
.lodev .svg-icon--rotate {
animation: icon-rotate 1.5s linear infinite
}
.lodev .svg-icon--rotate-45 {
transform: rotate(45deg)
}
.lodev .svg-icon--rotate-minus-45 {
transform: rotate(-45deg)
}
.lodev .svg-icon--rotate-135 {
transform: rotate(135deg)
}
.lodev .svg-icon--rotate-minus-135 {
transform: rotate(-135deg)
}
.lodev .svg-icon--rotate-180 {
transform: rotate(180deg)
}
.lodev .svg-icon--rotate-minus-180 {
transform: rotate(-180deg)
}
.lodev .grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-column-gap: .75rem;
grid-row-gap: .75rem
}
@media(min-width: 37.5em) {
.lodev .grid {
grid-template-columns:repeat(6, minmax(0, 1fr));
grid-column-gap: 1rem;
grid-row-gap: 1rem
}
}
@media(min-width: 56.25em) {
.lodev .grid {
grid-template-columns:repeat(12, minmax(0, 1fr));
grid-column-gap: 1.25rem;
grid-row-gap: 1.25rem
}
}
.lodev [class*=btn--icon] .btn__inner {
padding: 0 1rem
}
.lodev [class*=btn--icon] .btn__inner .btn__label {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
white-space: nowrap
}
.lodev [class*=btn--icon].btn--small .btn__inner {
padding: 0 .5rem
}
.lodev [class*=btn--icon].btn--small .btn__inner::after {
content: "";
position: absolute;
top: -0.125rem;
left: -0.125rem;
right: -0.125rem;
bottom: -0.125rem
}
.lodev [class*=btn--icon].btn--xsmall .btn__inner {
padding: 0 .25rem;
min-height: 2rem
}
.lodev [class*=btn--icon].btn--xsmall .btn__inner::after {
content: "";
position: absolute;
top: -0.375rem;
left: -0.375rem;
right: -0.375rem;
bottom: -0.375rem
}
.lodev .btn {
position: relative;
font-size: .875rem;
background: none;
border: 0;
padding: 0;
line-height: 1.4285714286;
font-weight: bold;
text-align: center;
display: inline-flex;
border-radius: 64px;
cursor: pointer;
outline: 0;
vertical-align: top
}
.lodev .btn:hover,.lodev .btn:active,.lodev .btn:focus {
text-decoration: none
}
.lodev .btn .svg-icon {
flex-shrink: 0
}
.lodev .btn:disabled {
cursor: default
}
.lodev .btn__inner {
border-radius: 64px;
transition-property: opacity,transform;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 3.5rem;
padding: 0 2rem;
width: 100%;
box-sizing: border-box
}
.lodev .btn:active:not(:disabled) .btn__inner {
transform: scale(0.97)
}
.leading-icon .btn__inner {
padding-inline-start:1.5rem}
.trailing-icon .btn__inner {
flex-direction: row-reverse;
padding-inline-end:1.5rem}
.lodev .btn--icon-primary .btn__inner,.lodev .btn--primary .btn__inner {
background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17))
}
.lodev .btn--icon-primary:hover .btn__inner,.lodev .btn--primary:hover .btn__inner {
background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51))
}
.lodev .btn--icon-primary:active .btn__inner,.lodev .btn--primary:active .btn__inner {
background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0))
}
.lodev .btn--icon-emphasised .btn__inner,.lodev .btn--emphasised .btn__inner {
background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163))
}
.lodev .btn--icon-emphasised:hover .btn__inner,.lodev .btn--emphasised:hover .btn__inner {
background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147))
}
.lodev .btn--icon-emphasised:active .btn__inner,.lodev .btn--emphasised:active .btn__inner {
background: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114))
}
.lodev .btn--icon-secondary .btn__inner,.lodev .btn--secondary .btn__inner {
box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .btn--icon-secondary:hover .btn__inner,.lodev .btn--icon-secondary:active .btn__inner,.lodev .btn--secondary:hover .btn__inner,.lodev .btn--secondary:active .btn__inner {
box-shadow: inset 0 0 0 2px rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .btn--icon-secondary:active .btn__inner,.lodev .btn--secondary:active .btn__inner {
background: rgba(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204), 0.5)
}
.lodev .btn--icon-secondary-inverse .btn__inner,.lodev .btn--secondary-inverse .btn__inner {
box-shadow: inset 0 0 0 1px rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .btn--icon-secondary-inverse:hover .btn__inner,.lodev .btn--icon-secondary-inverse:active .btn__inner,.lodev .btn--secondary-inverse:hover .btn__inner,.lodev .btn--secondary-inverse:active .btn__inner {
box-shadow: inset 0 0 0 2px rgb(var(--colour-static-white, 255, 255, 255));
background: rgba(var(--colour-static-white, 255, 255, 255), 0.1)
}
.lodev .btn--icon-emphasised-inverse .btn__inner,.lodev .btn--icon-primary-inverse .btn__inner,.lodev .btn--primary-inverse .btn__inner,.lodev .btn--emphasised-inverse .btn__inner {
background: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .btn--icon-emphasised-inverse:hover .btn__inner,.lodev .btn--icon-primary-inverse:hover .btn__inner,.lodev .btn--primary-inverse:hover .btn__inner,.lodev .btn--emphasised-inverse:hover .btn__inner {
background: rgb(var(--colour-static-light-grey, 245, 245, 245))
}
.lodev .btn--icon-emphasised-inverse:active .btn__inner,.lodev .btn--icon-primary-inverse:active .btn__inner,.lodev .btn--primary-inverse:active .btn__inner,.lodev .btn--emphasised-inverse:active .btn__inner {
background: rgb(var(--colour-static-grey, 223, 223, 223))
}
.lodev .btn--danger .btn__inner {
background: rgb(var(--colour-interactive-destructive-bg-default, 224, 7, 81))
}
.lodev .btn--danger:hover .btn__inner {
background: rgb(var(--colour-interactive-destructive-bg-hover, 204, 0, 61))
}
.lodev .btn--danger:active .btn__inner {
background: rgb(var(--colour-interactive-destructive-bg-pressed, 184, 0, 41))
}
.lodev .btn--icon-tertiary:hover .btn__inner,.lodev .btn--tertiary:hover .btn__inner {
background: rgb(var(--colour-interactive-secondary-bg-hover, 223, 223, 223))
}
.lodev .btn--icon-tertiary:active .btn__inner,.lodev .btn--tertiary:active .btn__inner {
background: rgb(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204))
}
.lodev .btn--icon-tertiary-inverse:hover .btn__inner,.lodev .btn--tertiary-inverse:hover .btn__inner {
background: rgba(var(--colour-static-white, 255, 255, 255), 0.15)
}
.lodev .btn--icon-tertiary-inverse:active .btn__inner,.lodev .btn--tertiary-inverse:active .btn__inner {
background: rgba(var(--colour-static-white, 255, 255, 255), 0.3)
}
.lodev .btn--icon-image-overlay,.lodev .btn--image-overlay {
color: rgb(var(--colour-static-white, 255, 255, 255));
text-decoration: none
}
.lodev .btn--icon-image-overlay .btn__inner,.lodev .btn--image-overlay .btn__inner {
background: rgba(var(--colour-static-black, 17, 17, 17), 0.75)
}
.lodev .btn--icon-image-overlay:hover .btn__inner,.lodev .btn--image-overlay:hover .btn__inner {
background: rgba(var(--colour-static-black, 17, 17, 17), 0.85)
}
.lodev .btn--icon-image-overlay:active .btn__inner,.lodev .btn--image-overlay:active .btn__inner {
background: rgba(var(--colour-static-black, 17, 17, 17), 0.95)
}
.lodev .btn--icon-image-overlay:hover,.lodev .btn--icon-image-overlay:active,.lodev .btn--icon-image-overlay:focus,.lodev .btn--image-overlay:hover,.lodev .btn--image-overlay:active,.lodev .btn--image-overlay:focus {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .btn--icon-secondary,.lodev .btn--secondary,.lodev .btn--icon-tertiary,.lodev .btn--tertiary {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
text-decoration: none
}
.lodev .btn--icon-secondary:hover,.lodev .btn--icon-secondary:active,.lodev .btn--icon-secondary:focus,.lodev .btn--secondary:hover,.lodev .btn--secondary:active,.lodev .btn--secondary:focus,.lodev .btn--icon-tertiary:hover,.lodev .btn--icon-tertiary:active,.lodev .btn--icon-tertiary:focus,.lodev .btn--tertiary:hover,.lodev .btn--tertiary:active,.lodev .btn--tertiary:focus {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .btn--icon-emphasised-inverse,.lodev .btn--icon-primary-inverse,.lodev .btn--primary-inverse,.lodev .btn--emphasised-inverse {
color: rgb(var(--colour-static-black, 17, 17, 17));
text-decoration: none
}
.lodev .btn--icon-emphasised-inverse:hover,.lodev .btn--icon-emphasised-inverse:active,.lodev .btn--icon-emphasised-inverse:focus,.lodev .btn--icon-primary-inverse:hover,.lodev .btn--icon-primary-inverse:active,.lodev .btn--icon-primary-inverse:focus,.lodev .btn--primary-inverse:hover,.lodev .btn--primary-inverse:active,.lodev .btn--primary-inverse:focus,.lodev .btn--emphasised-inverse:hover,.lodev .btn--emphasised-inverse:active,.lodev .btn--emphasised-inverse:focus {
color: rgb(var(--colour-static-black, 17, 17, 17))
}
.lodev .btn--icon-primary,.lodev .btn--primary {
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
text-decoration: none
}
.lodev .btn--icon-primary:hover,.lodev .btn--icon-primary:active,.lodev .btn--icon-primary:focus,.lodev .btn--primary:hover,.lodev .btn--primary:active,.lodev .btn--primary:focus {
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}
.lodev .btn--icon-emphasised,.lodev .btn--icon-secondary-inverse,.lodev .btn--icon-image-overlay,.lodev .btn--icon-tertiary-inverse,.lodev .btn--danger,.lodev .btn--emphasised,.lodev .btn--secondary-inverse,.lodev .btn--image-overlay,.lodev .btn--tertiary-inverse {
color: rgb(var(--colour-static-white, 255, 255, 255));
text-decoration: none
}
.lodev .btn--icon-emphasised:hover,.lodev .btn--icon-emphasised:active,.lodev .btn--icon-emphasised:focus,.lodev .btn--icon-secondary-inverse:hover,.lodev .btn--icon-secondary-inverse:active,.lodev .btn--icon-secondary-inverse:focus,.lodev .btn--icon-image-overlay:hover,.lodev .btn--icon-image-overlay:active,.lodev .btn--icon-image-overlay:focus,.lodev .btn--icon-tertiary-inverse:hover,.lodev .btn--icon-tertiary-inverse:active,.lodev .btn--icon-tertiary-inverse:focus,.lodev .btn--danger:hover,.lodev .btn--danger:active,.lodev .btn--danger:focus,.lodev .btn--emphasised:hover,.lodev .btn--emphasised:active,.lodev .btn--emphasised:focus,.lodev .btn--secondary-inverse:hover,.lodev .btn--secondary-inverse:active,.lodev .btn--secondary-inverse:focus,.lodev .btn--image-overlay:hover,.lodev .btn--image-overlay:active,.lodev .btn--image-overlay:focus,.lodev .btn--tertiary-inverse:hover,.lodev .btn--tertiary-inverse:active,.lodev .btn--tertiary-inverse:focus {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .btn--icon-emphasised-inverse:disabled .btn__inner,.lodev .btn--icon-primary-inverse:disabled .btn__inner,.lodev .btn--icon-secondary-inverse:disabled .btn__inner,.lodev .btn--emphasised-inverse:disabled .btn__inner,.lodev .btn--primary-inverse:disabled .btn__inner,.lodev .btn--secondary-inverse:disabled .btn__inner {
background: rgba(var(--colour-static-white, 255, 255, 255), 0.15)
}
.lodev .btn--icon-secondary:disabled .btn__inner,.lodev .btn--secondary:disabled .btn__inner,.lodev .btn--secondary-inverse:disabled .btn__inner,.lodev .btn--icon-secondary-inverse:disabled .btn__inner {
box-shadow: none;
border-color: rgba(0,0,0,0)
}
.lodev .btn--icon-image-overlay:disabled,.lodev .btn--image-overlay:disabled,.lodev .btn--icon-emphasised:disabled,.lodev .btn--emphasised:disabled,.lodev .btn--icon-primary:disabled,.lodev .btn--primary:disabled,.lodev .btn--danger:disabled,.lodev .btn--secondary:disabled,.lodev .btn--icon-secondary:disabled {
color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146))
}
.lodev .btn--icon-image-overlay:disabled .btn__inner,.lodev .btn--image-overlay:disabled .btn__inner,.lodev .btn--icon-emphasised:disabled .btn__inner,.lodev .btn--emphasised:disabled .btn__inner,.lodev .btn--icon-primary:disabled .btn__inner,.lodev .btn--primary:disabled .btn__inner,.lodev .btn--danger:disabled .btn__inner,.lodev .btn--secondary:disabled .btn__inner,.lodev .btn--icon-secondary:disabled .btn__inner {
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .btn--tertiary:disabled .btn__inner,.lodev .btn--icon-tertiary:disabled .btn__inner,.lodev .btn--tertiary-inverse:disabled .btn__inner,.lodev .btn--icon-tertiary-inverse:disabled .btn__inner {
background: rgba(0,0,0,0)
}
.lodev .btn--tertiary:disabled,.lodev .btn--icon-tertiary:disabled {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .btn--tertiary-inverse:disabled,.lodev .btn--icon-tertiary-inverse:disabled,.lodev .btn--icon-secondary-inverse:disabled,.lodev .btn--secondary-inverse:disabled,.lodev .btn--icon-emphasised-inverse:disabled,.lodev .btn--emphasised-inverse:disabled,.lodev .btn--icon-primary-inverse:disabled,.lodev .btn--primary-inverse:disabled,.lodev .btn--icon-secondary-inverse:disabled {
color: rgba(var(--colour-static-white, 255, 255, 255), 0.15)
}
.lodev .btn .btn__loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -160%);
display: inline-block;
width: 0.5rem;
height: 0.5rem;
background: currentColor;
border-radius: 64px;
animation: btn-loader .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 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)
}
}
.lodev .btn--loading {
pointer-events: none
}
.lodev .btn--loading .btn__loader {
opacity: 1;
visibility: visible
}
.lodev .btn--loading .svg-icon,.lodev .btn--loading .btn__label {
transform: translateY(50%);
opacity: 0;
visibility: hidden
}
.lodev .btn--small {
font-size: .75rem;
line-height: 1.3333333333
}
.lodev .btn--small .btn__inner {
min-height: 2.5rem;
padding: 0 1.5rem
}
.lodev .btn--small.leading-icon .btn__inner {
padding-inline-start:1rem}
.lodev .btn--small.trailing-icon .btn__inner {
padding-inline-end:1rem}
.lodev .btn--expanding.leading-icon .btn__inner,.lodev .btn--expanding.trailing-icon .btn__inner,.lodev .btn--expanding .btn__inner {
transition-property: opacity,transform,padding;
padding: 0 1rem
}
.lodev .btn--expanding.btn--small .btn__inner {
padding: 0 .5rem
}
.lodev .btn--expanding.btn--small .btn__inner::after {
content: "";
position: absolute;
top: -0.125rem;
left: -0.125rem;
right: -0.125rem;
bottom: -0.125rem
}
.lodev .btn--expanding.btn--xsmall .btn__inner {
padding: 0 .25rem;
min-height: 2rem
}
.lodev .btn--expanding.btn--xsmall .btn__inner::after {
content: "";
position: absolute;
top: -0.625rem;
left: -0.625rem;
right: -0.625rem;
bottom: -0.625rem
}
.lodev .btn--expanding .btn__icon {
transition: margin-inline-end 250ms ease-in-out;
margin: 0
}
.lodev .btn--expanding .btn__inner .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
}
.lodev .btn--expanding:hover .btn__inner .btn__label,.lodev .btn--expanding:focus.focus-visible .btn__inner .btn__label {
max-width: 12.5rem
}
.lodev .btn--expanding:hover.leading-icon .btn__inner,.lodev .btn--expanding:focus.focus-visible.leading-icon .btn__inner {
padding-inline-end:2rem;padding-inline-start:1.5rem}
.lodev .btn--expanding:hover.trailing-icon .btn__inner,.lodev .btn--expanding:focus.focus-visible.trailing-icon .btn__inner {
flex-direction: row-reverse;
padding-inline-end:1.5rem;padding-inline-start:2rem}
.lodev .btn--expanding:hover.leading-icon .btn__icon,.lodev .btn--expanding:focus.focus-visible.leading-icon .btn__icon {
margin-inline-end:.5rem}
.lodev .btn--expanding:hover.trailing-icon .btn__icon,.lodev .btn--expanding:focus.focus-visible.trailing-icon .btn__icon {
margin-inline-start:.5rem}
.lodev .btn--expanding:hover.leading-icon.btn--small .btn__inner,.lodev .btn--expanding:focus.focus-visible.leading-icon.btn--small .btn__inner {
padding-inline-end:1.5rem;padding-inline-start:1rem}
.lodev .btn--expanding:hover.trailing-icon.btn--small .btn__inner,.lodev .btn--expanding:focus.focus-visible.trailing-icon.btn--small .btn__inner {
padding-inline-end:1rem;padding-inline-start:1.5rem}
@media(hover: none) {
.lodev .btn--expanding.leading-icon:hover .btn__inner,.lodev .btn--expanding.trailing-icon:hover .btn__inner {
padding:0 1rem
}
.lodev .btn--expanding.leading-icon:hover .btn__inner .btn__label,.lodev .btn--expanding.trailing-icon:hover .btn__inner .btn__label {
max-width: 0
}
.lodev .btn--expanding.leading-icon:hover .btn__icon,.lodev .btn--expanding.trailing-icon:hover .btn__icon {
margin: 0
}
.lodev .btn--expanding.leading-icon.btn--small:hover .btn__inner,.lodev .btn--expanding.trailing-icon.btn--small:hover .btn__inner {
padding: 0 .5rem
}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled) .btn__inner .btn__label,.lodev .btn--expanding.btn--touch-device-expanded .btn__inner .btn__label {
max-width: 12.5rem
}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled).leading-icon .btn__inner,.lodev .btn--expanding.btn--touch-device-expanded.leading-icon .btn__inner {
padding-inline-end:2rem;padding-inline-start:1.5rem}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled).trailing-icon .btn__inner,.lodev .btn--expanding.btn--touch-device-expanded.trailing-icon .btn__inner {
flex-direction: row-reverse;
padding-inline-end:1.5rem;padding-inline-start:2rem}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled).leading-icon .btn__icon,.lodev .btn--expanding.btn--touch-device-expanded.leading-icon .btn__icon {
margin-inline-end:.5rem}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled).trailing-icon .btn__icon,.lodev .btn--expanding.btn--touch-device-expanded.trailing-icon .btn__icon {
margin-inline-start:.5rem}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled).leading-icon.btn--small .btn__inner,.lodev .btn--expanding.btn--touch-device-expanded.leading-icon.btn--small .btn__inner {
padding-inline-end:1.5rem;padding-inline-start:1rem}
.lodev .btn--expanding.btn--touch-device-expanded:hover:not(:disabled).trailing-icon.btn--small .btn__inner,.lodev .btn--expanding.btn--touch-device-expanded.trailing-icon.btn--small .btn__inner {
padding-inline-end:1rem;padding-inline-start:1.5rem}
}
.lodev .btn--expanding:focus.focus-visible.btn--loading.trailing-icon .btn__inner,.lodev .btn--expanding:focus.focus-visible.btn--loading.leading-icon .btn__inner,.lodev .btn--expanding.btn--loading.trailing-icon .btn__inner,.lodev .btn--expanding.btn--loading.leading-icon .btn__inner,.lodev .btn--expanding:disabled.trailing-icon .btn__inner,.lodev .btn--expanding:disabled.leading-icon .btn__inner {
padding: 0 1rem
}
.lodev .btn--expanding:focus.focus-visible.btn--loading.trailing-icon .btn__inner .btn__label,.lodev .btn--expanding:focus.focus-visible.btn--loading.leading-icon .btn__inner .btn__label,.lodev .btn--expanding.btn--loading.trailing-icon .btn__inner .btn__label,.lodev .btn--expanding.btn--loading.leading-icon .btn__inner .btn__label,.lodev .btn--expanding:disabled.trailing-icon .btn__inner .btn__label,.lodev .btn--expanding:disabled.leading-icon .btn__inner .btn__label {
max-width: 0
}
.lodev .btn--expanding:focus.focus-visible.btn--loading.trailing-icon .btn__icon,.lodev .btn--expanding:focus.focus-visible.btn--loading.leading-icon .btn__icon,.lodev .btn--expanding.btn--loading.trailing-icon .btn__icon,.lodev .btn--expanding.btn--loading.leading-icon .btn__icon,.lodev .btn--expanding:disabled.trailing-icon .btn__icon,.lodev .btn--expanding:disabled.leading-icon .btn__icon {
margin: 0
}
.lodev .btn--expanding:focus.focus-visible.btn--loading.trailing-icon.btn--small .btn__inner,.lodev .btn--expanding:focus.focus-visible.btn--loading.leading-icon.btn--small .btn__inner,.lodev .btn--expanding.btn--loading.trailing-icon.btn--small .btn__inner,.lodev .btn--expanding.btn--loading.leading-icon.btn--small .btn__inner,.lodev .btn--expanding:disabled.trailing-icon.btn--small .btn__inner,.lodev .btn--expanding:disabled.leading-icon.btn--small .btn__inner {
padding: 0 .5rem
}
.lodev .btn--fluid,.lodev .btn--fluid .btn__inner {
width: 100%
}
.lodev .btn--plain.btn--small .btn__inner::after,.lodev .btn--plain .btn__inner::after {
content: "";
position: absolute;
top: -0.25rem;
left: -0.25rem;
right: -0.25rem;
bottom: -0.25rem
}
.lodev .btn--plain.btn--small .btn__inner,.lodev .btn--plain .btn__inner,.lodev .btn--plain.leading-icon .btn__inner,.lodev .btn--plain.trailing-icon .btn__inner {
padding: 0
}
.lodev .btn .svg-icon,.lodev .btn__label {
transition-property: opacity,margin-right,margin-left,transform;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1)
}
.lodev .dual-btn {
display: inline-flex
}
.lodev .dual-btn__first,.lodev .dual-btn__second {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
cursor: pointer;
min-height: 3.5rem;
min-width: 3.75rem;
padding: 0
}
.lodev .dual-btn__first:focus,.lodev .dual-btn__second:focus {
z-index: 1
}
.lodev .dual-btn__first:disabled,.lodev .dual-btn__second:disabled {
cursor: default
}
.lodev .dual-btn__first {
border-top-left-radius: 64px;
border-bottom-left-radius: 64px;
padding-inline-end:1rem;justify-content: flex-end
}
.lodev .dual-btn__second {
border-top-right-radius: 64px;
border-bottom-right-radius: 64px;
padding-inline-start:1rem;justify-content: flex-start
}
.lodev .dual-btn__divider {
position: relative;
height: auto;
width: 1px;
z-index: 2
}
.lodev .dual-btn__label {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
white-space: nowrap
}
.lodev .dual-btn--primary .dual-btn__first,.lodev .dual-btn--primary .dual-btn__second {
color: rgb(var(--colour-static-black, 17, 17, 17));
background-color: rgb(var(--colour-static-white, 255, 255, 255));
border-width: 0px
}
.lodev .dual-btn--primary .dual-btn__first:hover:not(:disabled),.lodev .dual-btn--primary .dual-btn__second:hover:not(:disabled) {
background-color: rgb(var(--colour-static-light-grey, 245, 245, 245))
}
.lodev .dual-btn--primary .dual-btn__first:active:not(:disabled),.lodev .dual-btn--primary .dual-btn__second:active:not(:disabled) {
background-color: rgb(var(--colour-static-grey, 223, 223, 223))
}
.lodev .dual-btn--primary .dual-btn__first:disabled,.lodev .dual-btn--primary .dual-btn__second:disabled {
color: rgb(var(--colour-static-grey, 223, 223, 223))
}
.lodev .dual-btn--primary .dual-btn__divider {
background-color: rgb(var(--colour-static-grey, 223, 223, 223))
}
.lodev .dual-btn--secondary .dual-btn__first,.lodev .dual-btn--secondary .dual-btn__second {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
background: none;
border: 1px solid rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .dual-btn--secondary .dual-btn__first:hover:not(:disabled),.lodev .dual-btn--secondary .dual-btn__first:active:not(:disabled),.lodev .dual-btn--secondary .dual-btn__second:hover:not(:disabled),.lodev .dual-btn--secondary .dual-btn__second:active:not(:disabled) {
box-shadow: inset 0 0 0 1px rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .dual-btn--secondary .dual-btn__first:active:not(:disabled),.lodev .dual-btn--secondary .dual-btn__second:active:not(:disabled) {
background-color: rgba(var(--colour-interactive-secondary-bg-pressed, 204, 204, 204), 0.5)
}
.lodev .dual-btn--secondary .dual-btn__first:disabled,.lodev .dual-btn--secondary .dual-btn__second:disabled {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .dual-btn--secondary .dual-btn__first {
border-inline-end-width:0}
.lodev .dual-btn--secondary .dual-btn__second {
border-inline-start-width:0}
.lodev .dual-btn--secondary .dual-btn__divider {
background-color: rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .dual-btn--secondary.dual-btn--vertical .dual-btn__first {
border-inline-end-width:1px;border-bottom-width: 0px
}
.lodev .dual-btn--secondary.dual-btn--vertical .dual-btn__second {
border-inline-start-width:1px;border-top-width: 0px
}
.lodev .dual-btn--vertical {
flex-direction: column
}
.lodev .dual-btn--vertical .dual-btn__first,.lodev .dual-btn--vertical .dual-btn__second {
justify-content: center;
min-height: 3.75rem;
min-width: 3.5rem;
padding: 0
}
.lodev .dual-btn--vertical .dual-btn__first {
align-items: flex-end;
border-top-left-radius: 64px;
border-top-right-radius: 64px;
border-bottom-left-radius: 0;
padding-bottom: 1rem
}
.lodev .dual-btn--vertical .dual-btn__second {
align-items: flex-start;
border-top-right-radius: 0;
border-bottom-right-radius: 64px;
border-bottom-left-radius: 64px;
padding-top: 1rem
}
.lodev .dual-btn--vertical .dual-btn__divider {
height: 1px;
width: 100%
}
.lodev .dual-btn--small .dual-btn__first,.lodev .dual-btn--small .dual-btn__second {
min-height: 2.5rem;
min-width: 2.75rem
}
.lodev .dual-btn--small .dual-btn__first {
padding-inline-end:.5rem}
.lodev .dual-btn--small .dual-btn__second {
padding-inline-start:.5rem}
.lodev .dual-btn--small.dual-btn--primary .dual-btn__first::after,.lodev .dual-btn--small.dual-btn--primary .dual-btn__second::after {
content: "";
position: absolute;
top: -0.125rem;
left: -0.0625rem;
right: -0.0625rem;
bottom: -0.125rem
}
.lodev .dual-btn--small.dual-btn--primary.dual-btn--vertical .dual-btn__first::after,.lodev .dual-btn--small.dual-btn--primary.dual-btn--vertical .dual-btn__second::after {
content: "";
position: absolute;
top: -0.0625rem;
left: -0.125rem;
right: -0.125rem;
bottom: -0.0625rem
}
.lodev .dual-btn--small.dual-btn--secondary .dual-btn__first::after,.lodev .dual-btn--small.dual-btn--secondary .dual-btn__second::after {
content: "";
position: absolute;
top: -0.1875rem;
left: -0.09375rem;
right: -0.09375rem;
bottom: -0.1875rem
}
.lodev .dual-btn--small.dual-btn--secondary.dual-btn--vertical .dual-btn__first::after,.lodev .dual-btn--small.dual-btn--secondary.dual-btn--vertical .dual-btn__second::after {
content: "";
position: absolute;
top: -0.09375rem;
left: -0.1875rem;
right: -0.1875rem;
bottom: -0.09375rem
}
.lodev .dual-btn--small.dual-btn--vertical .dual-btn__first,.lodev .dual-btn--small.dual-btn--vertical .dual-btn__second {
min-height: 2.75rem;
min-width: 2.5rem;
padding: 0
}
.lodev .dual-btn--small.dual-btn--vertical .dual-btn__first {
padding-bottom: .5rem
}
.lodev .dual-btn--small.dual-btn--vertical .dual-btn__second {
padding-top: .5rem
}
.lodev .dual-btn--inverse .dual-btn__first,.lodev .dual-btn--inverse .dual-btn__second {
border-color: rgb(var(--colour-static-white, 255, 255, 255));
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .dual-btn--inverse .dual-btn__first:hover:not(:disabled),.lodev .dual-btn--inverse .dual-btn__first:active:not(:disabled),.lodev .dual-btn--inverse .dual-btn__second:hover:not(:disabled),.lodev .dual-btn--inverse .dual-btn__second:active:not(:disabled) {
box-shadow: inset 0px 0px 0px 1px rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .dual-btn--inverse .dual-btn__first:active:not(:disabled),.lodev .dual-btn--inverse .dual-btn__second:active:not(:disabled) {
background-color: rgba(var(--colour-static-white, 255, 255, 255), 0.1)
}
.lodev .dual-btn--inverse .dual-btn__first:disabled,.lodev .dual-btn--inverse .dual-btn__second:disabled {
color: rgba(var(--colour-static-white, 255, 255, 255), 0.15)
}
.lodev .dual-btn--inverse .dual-btn__divider {
background-color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev [dir=rtl] .dual-btn__first {
border-top-left-radius: 0;
border-top-right-radius: 64px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 64px
}
.lodev [dir=rtl] .dual-btn__second {
border-top-left-radius: 64px;
border-top-right-radius: 0;
border-bottom-left-radius: 64px;
border-bottom-right-radius: 0
}
.lodev [dir=rtl] .dual-btn--vertical .dual-btn__first {
border-top-left-radius: 64px;
border-bottom-right-radius: 0
}
.lodev [dir=rtl] .dual-btn--vertical .dual-btn__second {
border-top-left-radius: 0;
border-bottom-right-radius: 64px
}
.lodev [dir=rtl] .dual-btn--flip-rtl .dual-btn__icon {
transform: scaleX(-1)
}
.lodev .link {
text-decoration: underline;
font-weight: 400;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .link:focus,.lodev .link:hover,.lodev .link:active {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link--disabled {
cursor: default;
pointer-events: none;
opacity: .4
}
.lodev .link--disabled:focus::before {
border: 0
}
.lodev .link--black {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link--black:hover,.lodev .link--black:focus,.lodev .link--black:active {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .link--black.link--disabled {
cursor: default;
pointer-events: none;
opacity: .4;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link--black.link--disabled:focus::before {
border: 0
}
.lodev .link--black.link--disabled:hover {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link--black.link--disabled:focus,.lodev .link--black.link--disabled:active {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link--grey {
color: rgb(var(--colour-text-and-icon-3, 118, 118, 118))
}
.lodev .link--grey:hover,.lodev .link--grey:focus,.lodev .link--grey:active {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link--grey.link--disabled {
cursor: default;
pointer-events: none;
opacity: .4;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .link--grey.link--disabled:focus::before {
border: 0
}
.lodev .link--grey.link--disabled:hover {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .link--grey.link--disabled:focus,.lodev .link--grey.link--disabled:active {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .link--white {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .link--white:hover,.lodev .link--white:focus,.lodev .link--white:active {
color: rgb(var(--colour-static-light-grey, 245, 245, 245))
}
.lodev .link--white.link--disabled {
cursor: default;
pointer-events: none;
opacity: .4;
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .link--white.link--disabled:focus::before {
border: 0
}
.lodev .link--white.link--disabled:hover {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .link--white.link--disabled:focus,.lodev .link--white.link--disabled:active {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .link--subtle {
text-decoration: none
}
.lodev .link--subtle:focus,.lodev .link--subtle:hover,.lodev .link--subtle:active {
text-decoration: underline
}
.lodev h1 .link,.lodev h2 .link,.lodev h3 .link,.lodev h4 .link,.lodev h5 .link,.lodev h6 .link,.lodev p .link {
margin-bottom: 0;
text-decoration: underline
}
.lodev h1 .link .svg-icon,.lodev h2 .link .svg-icon,.lodev h3 .link .svg-icon,.lodev h4 .link .svg-icon,.lodev h5 .link .svg-icon,.lodev h6 .link .svg-icon,.lodev p .link .svg-icon {
vertical-align: middle
}
.lodev h1 .link:hover,.lodev h1 .link:focus,.lodev h1 .link:active,.lodev h2 .link:hover,.lodev h2 .link:focus,.lodev h2 .link:active,.lodev h3 .link:hover,.lodev h3 .link:focus,.lodev h3 .link:active,.lodev h4 .link:hover,.lodev h4 .link:focus,.lodev h4 .link:active,.lodev h5 .link:hover,.lodev h5 .link:focus,.lodev h5 .link:active,.lodev h6 .link:hover,.lodev h6 .link:focus,.lodev h6 .link:active,.lodev p .link:hover,.lodev p .link:focus,.lodev p .link:active {
text-decoration: underline
}
.lodev h1 .link--subtle,.lodev h2 .link--subtle,.lodev h3 .link--subtle,.lodev h4 .link--subtle,.lodev h5 .link--subtle,.lodev h6 .link--subtle,.lodev p .link--subtle {
text-decoration: none
}
.lodev h1 .link--subtle:focus,.lodev h1 .link--subtle:hover,.lodev h1 .link--subtle:active,.lodev h2 .link--subtle:focus,.lodev h2 .link--subtle:hover,.lodev h2 .link--subtle:active,.lodev h3 .link--subtle:focus,.lodev h3 .link--subtle:hover,.lodev h3 .link--subtle:active,.lodev h4 .link--subtle:focus,.lodev h4 .link--subtle:hover,.lodev h4 .link--subtle:active,.lodev h5 .link--subtle:focus,.lodev h5 .link--subtle:hover,.lodev h5 .link--subtle:active,.lodev h6 .link--subtle:focus,.lodev h6 .link--subtle:hover,.lodev h6 .link--subtle:active,.lodev p .link--subtle:focus,.lodev p .link--subtle:hover,.lodev p .link--subtle:active {
text-decoration: underline
}
.lodev .form-field {
display: block;
margin-bottom: 1.25rem
}
.lodev .form-field__content {
margin-top: .25rem;
display: flex;
flex-wrap: nowrap;
justify-content: space-between
}
.lodev .form-field--with-character-limit .form-field__content>*:not(:first-child) {
padding-inline-start:.5rem}
.lodev .form-field>.checkbox,.lodev .form-field>.radiobutton,.lodev .form-field fieldset {
margin-bottom: .5rem
}
.lodev .form-field legend {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .helper-text {
display: inline-block;
font-size: .75rem;
line-height: 1.5;
color: rgb(var(--colour-text-and-icon-3, 118, 118, 118))
}
.lodev .helper-text.lodev .helper-text--character-count {
font-variant-numeric: tabular-nums
}
.lodev .helper-text.lodev .helper-text--error {
color: rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .helper-text.lodev .helper-text--error::before {
background-image: url("data:image/svg+xml;utf8,")
}
.lodev .helper-text.lodev .helper-text--success {
color: rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .helper-text.lodev .helper-text--success::before {
background-image: url("data:image/svg+xml;utf8,")
}
.lodev .helper-text.lodev .helper-text--error,.lodev .helper-text.lodev .helper-text--success {
margin-inline-start:1.25rem}
.lodev .helper-text.lodev .helper-text--error::before,.lodev .helper-text.lodev .helper-text--success::before {
position: relative;
margin-inline-start:-1.25rem;margin-inline-end:.25rem;content: "";
margin-bottom: -0.25rem;
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: .5rem;
background-color: currentColor;
background-position: center
}
.lodev .helper-text.lodev .helper-text--text-only {
margin-inline-start:0}
.lodev .helper-text.lodev .helper-text--text-only::before {
content: none;
background-image: none
}
.lodev .input-field__wrapper {
position: relative;
display: flex;
width: 100%;
align-items: center;
background: rgb(var(--colour-neutral-1, 255, 255, 255));
border-radius: 4px
}
.lodev .input-field__border {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
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
}
.lodev .input-field__prefix-label,.lodev .input-field__suffix-label {
z-index: 100;
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;
font-size: 1rem;
line-height: 1.5
}
.lodev .input-field__prefix-label {
order: 2
}
.lodev .input-field__suffix-label {
text-align: right;
order: 4
}
.lodev .input-field.input-field--prefixed.input-field--suffixed input {
padding: 0;
padding-inline-start:.25rem;padding-inline-end:.25rem}
.lodev .input-field input {
flex-grow: 1;
border: 0;
background: none;
padding: 0;
padding-inline-start:.5rem;padding-inline-end:.5rem;font-size: 1rem;
line-height: 1.5;
height: 3rem;
overflow: hidden;
order: 3;
outline: none;
border-radius: 4px;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .input-field input::-ms-clear {
display: none
}
.lodev .input-field input:-webkit-autofill {
font-size: 1rem;
line-height: 1.5;
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
}
.lodev .input-field input:focus~.input-field__border {
border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .input-field input[type=password]::-ms-reveal {
display: none
}
.lodev .input-field input[type=date] {
color: rgba(0,0,0,0)
}
.lodev .input-field input[type=date]:focus {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .input-field input[type=date]:disabled {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .input-field input[type=date]::-webkit-inner-spin-button,.lodev .input-field input[type=date]::-webkit-calendar-picker-indicator,.lodev .input-field input[type=date]::-webkit-clear-button {
display: none;
-webkit-appearance: none
}
.lodev .input-field--labelled input[type=date] {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .input-field input:focus~.input-field__prefix-label,.lodev .input-field input:focus~.input-field__suffix-label,.lodev .input-field--labelled .input-field__prefix-label,.lodev .input-field--labelled .input-field__suffix-label {
opacity: 1;
transition-delay: 33ms;
visibility: visible;
position: static;
clip: none;
width: auto;
height: auto
}
.lodev .input-field .btn {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .input-field .btn:disabled {
pointer-events: none;
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .input-field .btn:disabled .btn__inner {
border: 0;
background: none
}
.lodev .input-field--leading-icon input,.lodev .input-field--prefixed input {
padding-inline-start:.25rem}
.lodev .input-field--prefixed:not(.input-field--leading-icon) .input-field__prefix-label {
margin-inline-start:.5rem}
.lodev .input-field--prefixed.input-field--leading-icon .svg-icon {
margin-inline-end:.25rem}
.lodev .input-field--suffixed:not(.input-field--trailing-icon) .input-field__suffix-label {
margin-inline-end:.5rem}
.lodev .input-field--suffixed.input-field--trailing-icon .input-field__suffix-label {
margin-inline-end:0}
.lodev .input-field--trailing-icon .btn {
margin-inline-end:.5rem;margin-inline-start:.25rem}
.lodev .input-field--leading-icon .svg-icon {
order: 1;
margin-inline-start:.5rem}
.lodev .input-field--trailing-icon .btn {
order: 5
}
.lodev .input-field--error .form-field-status__validation {
color: rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .input-field--error .input-field__border {
border: 1px solid rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .input-field--error input:focus~.input-field__border {
border: 2px solid rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .input-field--success .form-field-status__helper {
color: rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .input-field--success .input-field__border {
border: 1px solid rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .input-field--success input:focus~.input-field__border {
border: 2px solid rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .input-field--disabled label,.lodev .input-field--disabled input,.lodev .input-field--disabled .svg-icon,.lodev .input-field--disabled .input-field__suffix-label,.lodev .input-field--disabled .input-field__prefix-label {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .input-field--disabled input:-webkit-autofill {
-webkit-text-fill-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .input-field--disabled .input-field__border {
border: 1px solid rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .input-field label {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev [dir=rtl] .input-field input[type=tel] {
direction: ltr;
text-align: right
}
.lodev .label-wrapper label {
font-size: .875rem;
line-height: 1.571
}
.lodev .label-wrapper--text-input label {
display: block;
margin: 0 0 0.125rem 0
}
.lodev .label-wrapper .required {
color: rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .label-wrapper label em {
margin: 0;
color: rgb(var(--colour-text-and-icon-4, 146, 146, 146));
font-weight: 400;
font-style: normal
}
.lodev .text-area {
font-size: 1rem;
line-height: 1.625
}
.lodev .text-area__wrapper {
position: relative;
display: flex;
width: 100%;
align-items: flex-end;
flex-wrap: wrap
}
.lodev .text-area label {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .text-area textarea {
display: block;
width: 100%;
padding: 0.3125rem;
line-height: 1.625;
max-width: 100%;
min-height: 6rem;
outline: none;
border: 0.1875rem solid rgba(0,0,0,0);
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))
}
.lodev .text-area textarea:disabled {
resize: none
}
.lodev .text-area textarea:disabled~.text-area__border {
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .text-area textarea:disabled {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .text-area textarea~.text-area__border {
border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146))
}
.lodev .text-area textarea:focus~.text-area__border {
border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .text-area__border {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
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
}
.lodev .text-area--success textarea~.text-area__border {
border: 1px solid rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .text-area--success textarea:focus~.text-area__border {
border: 2px solid rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .text-area--error textarea~.text-area__border {
border: 1px solid rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .text-area--error textarea:focus~.text-area__border {
border: 2px solid rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .text-area--disabled label {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev fieldset {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev fieldset legend {
margin-bottom: 1rem;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
font-weight: 700
}
.lodev .select {
font-size: 1rem;
line-height: 1.625
}
.lodev .select__wrapper {
position: relative;
display: flex;
width: 100%;
align-items: center
}
.lodev .select__border {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
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
}
.lodev .select select {
width: 100%;
height: 3rem;
border: 0;
background: none;
padding: .75rem;
padding-inline-end:3rem;padding-inline-start:.5rem;font-size: 1rem;
line-height: 1.5;
overflow: hidden;
background: rgb(var(--colour-neutral-1, 255, 255, 255));
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow: ellipsis;
order: 2;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
border-radius: 4px
}
.lodev .select select:disabled~.select__border {
box-shadow: none;
border-bottom-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .select select:disabled,.lodev .select select:disabled~label,.lodev .select select:disabled~.svg-icon {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .select select:focus~.select__border {
border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .select label,.lodev .select optgroup {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .select select::-ms-expand {
display: none
}
.lodev .select__chevron-down {
right: .5rem;
top: 50%;
transform: translateY(-50%)
}
[dir=rtl] .lodev .select__chevron-down {
left: .5rem;
right: auto
}
.lodev .select__chevron-down {
position: absolute;
bottom: .25rem
}
.lodev .select label,.lodev .select .svg-icon {
pointer-events: none
}
.lodev .select__icon {
flex-shrink: 0;
order: 1
}
.lodev .select--hint select {
color: rgb(var(--colour-text-and-icon-3, 118, 118, 118))
}
.lodev .select--error .select__border {
border: 1px solid rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .select--error select:focus~.select__border {
border: 2px solid rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .select--success .select__border {
border: 1px solid rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .select--success select:focus~.select__border {
border: 2px solid rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .select--leading-icon select {
padding-inline-start:2.25rem}
.lodev .select--leading-icon .select__icon {
margin-inline-start:.5rem;position: absolute
}
.lodev .select--disabled select~.select__border {
border: 1px solid rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .select--disabled label {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .radio {
position: relative;
display: flex;
align-items: flex-start
}
.lodev .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] .lodev .radio input[type=radio] {
right: -0.625rem;
left: initial
}
.lodev .radio__symbol {
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
}
.lodev .radio__symbol::after {
content: "";
display: block;
border-radius: 64px
}
.lodev .radio .radio__label {
position: relative;
display: block;
font-size: .875rem;
line-height: 1.571;
margin-top: 0.125rem
}
.lodev .radio label {
display: inline-block;
cursor: pointer;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
transition: color 200ms ease-in-out;
padding-inline-start:1rem}
.lodev .radio input[type=radio]:hover~.radio__symbol {
border-color: rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17))
}
.lodev .radio input[type=radio]:hover~.radio__symbol::after {
background: rgb(var(--colour-neutral-3, 223, 223, 223));
content: "";
width: 0.5rem;
height: 0.5rem;
display: block
}
.lodev .radio input[type=radio]:checked:hover:not(:disabled)~.radio__symbol {
border-color: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .radio input[type=radio]:checked:hover:not(:disabled)~.radio__symbol::after {
background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147))
}
.lodev .radio--subtle input[type=radio]:checked:hover:not(:disabled)~.radio__symbol {
border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17))
}
.lodev .radio--subtle input[type=radio]:checked:hover:not(:disabled)~.radio__symbol::after {
background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51))
}
.lodev .radio input[type=radio]:checked~.radio__symbol {
border-color: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .radio input[type=radio]:checked~.radio__symbol::after {
background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163));
content: "";
width: 1rem;
height: 1rem;
display: block
}
.lodev .radio--subtle input[type=radio]:checked~.radio__symbol {
border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17))
}
.lodev .radio--subtle input[type=radio]:checked~.radio__symbol::after {
background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17))
}
.lodev .radio input[type=radio]:disabled {
pointer-events: none
}
.lodev .radio input[type=radio]:disabled~.radio__symbol {
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .radio input[type=radio]:disabled:checked~.radio__symbol::after {
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .radio input[type=radio]:disabled:not(:checked)~.radio__symbol::after {
display: none
}
.lodev .radio input[type=radio]:disabled~.radio__label label {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223));
cursor: not-allowed;
pointer-events: none
}
.lodev .radio input[type=radio]:disabled~.radio__label a {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .radio input[type=radio]:active:not(:disabled)~.radio__symbol {
border-color: rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .radio input[type=radio]:active:not(:disabled)~.radio__symbol::after {
background: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114));
width: 1rem;
height: 1rem
}
.lodev .radio--subtle input[type=radio]:active:not(:disabled)~.radio__symbol {
border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17))
}
.lodev .radio--subtle input[type=radio]:active:not(:disabled)~.radio__symbol::after {
background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0))
}
.lodev .checkbox-group {
margin: 0;
padding: 0;
border: 0
}
.lodev .checkbox-group .checkbox:not(:last-child) {
margin-bottom: 1.5rem
}
.lodev .checkbox {
position: relative;
display: flex;
align-items: flex-start
}
.lodev .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] .lodev .checkbox input[type=checkbox] {
right: -0.625rem;
left: initial
}
.lodev .checkbox__symbol {
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
}
.lodev .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))
}
.lodev .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] .lodev .checkbox__symbol {
right: 0;
left: initial
}
.lodev .checkbox__label {
position: relative;
display: block;
font-size: .875rem;
line-height: 1.571;
margin-top: 0.125rem
}
.lodev .checkbox label {
display: inline-block;
cursor: pointer;
padding-inline-start:1rem;color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
transition: color 200ms ease-in-out
}
.lodev .checkbox input[type=checkbox]:checked~.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))
}
.lodev .checkbox input[type=checkbox]:checked~.checkbox__symbol::before {
opacity: 1
}
.lodev .checkbox input[type=checkbox]:indeterminate~.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))
}
.lodev .checkbox input[type=checkbox]:indeterminate~.checkbox__symbol::after {
opacity: 1
}
.lodev .checkbox input[type=checkbox]:hover~.checkbox__symbol {
border-color: rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17))
}
.lodev .checkbox input[type=checkbox]:hover~.checkbox__symbol::before {
color: rgb(var(--colour-neutral-3, 223, 223, 223));
opacity: 1
}
@media(hover: none) {
.lodev .checkbox input[type=checkbox]:hover~.checkbox__symbol::before {
color:rgb(var(--colour-neutral-3, 223, 223, 223))
}
}
.lodev .checkbox input[type=checkbox]:hover:checked~.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))
}
.lodev .checkbox input[type=checkbox]:hover:checked~.checkbox__symbol::before {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .checkbox input[type=checkbox]:hover:indeterminate~.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))
}
.lodev .checkbox input[type=checkbox]:hover:indeterminate~.checkbox__symbol::before {
opacity: 0
}
.lodev .checkbox--subtle input[type=checkbox]~.checkbox__symbol::before,.lodev .checkbox--subtle input[type=checkbox]~.checkbox__symbol::after {
color: rgb(var(--colour-neutral-1, 255, 255, 255))
}
.lodev .checkbox--subtle input[type=checkbox]:checked~.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))
}
.lodev .checkbox--subtle input[type=checkbox]:hover:checked~.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))
}
.lodev .checkbox--subtle input[type=checkbox]:hover:checked~.checkbox__symbol::after,.lodev .checkbox--subtle input[type=checkbox]:hover:checked~.checkbox__symbol::before {
color: rgb(var(--colour-neutral-1, 255, 255, 255))
}
.lodev .checkbox--subtle input[type=checkbox]:indeterminate~.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))
}
.lodev .checkbox--subtle input[type=checkbox]:hover:indeterminate~.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))
}
.lodev .checkbox input[type=checkbox]:disabled {
pointer-events: none
}
.lodev .checkbox input[type=checkbox]:disabled~.checkbox__symbol {
background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .checkbox input[type=checkbox]:disabled:hover {
cursor: default
}
.lodev .checkbox input[type=checkbox]:disabled:checked~.checkbox__symbol,.lodev .checkbox input[type=checkbox]:disabled:indeterminate~.checkbox__symbol {
background-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .checkbox input[type=checkbox]:disabled:checked~.checkbox__symbol::before,.lodev .checkbox input[type=checkbox]:disabled:checked~.checkbox__symbol::after,.lodev .checkbox input[type=checkbox]:disabled:indeterminate~.checkbox__symbol::before,.lodev .checkbox input[type=checkbox]:disabled:indeterminate~.checkbox__symbol::after {
border-color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146))
}
.lodev .checkbox input[type=checkbox]:disabled~.checkbox__label label {
cursor: default;
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223));
pointer-events: none
}
.lodev .checkbox input[type=checkbox]:disabled~.checkbox__label a {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .checkbox-group {
margin: 0;
padding: 0;
border: 0
}
.lodev .checkbox-group .checkbox:not(:last-child) {
margin-bottom: 1.5rem
}
.lodev .radio-button-group {
margin: 0;
padding: 0;
border: 0
}
.lodev .radio-button-group .radio:not(:last-child) {
margin-bottom: 1.5rem
}
.lodev [dir=rtl] .radio-button-group .radio {
margin-right: 0;
margin-left: 2rem
}
.lodev .disabled .form-field__message,.lodev .disabled .form-field__character-limit {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .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
}
.lodev .accordion-item-header:active,.lodev .accordion-item-header:focus,.lodev .accordion-item-header:hover {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .accordion-item-header:active .accordion-item-header__title,.lodev .accordion-item-header:focus .accordion-item-header__title,.lodev .accordion-item-header:hover .accordion-item-header__title {
text-decoration: underline
}
.lodev .accordion-item-header__icon {
flex-shrink: 0
}
.lodev .accordion-item-header--small {
min-height: 3rem;
padding: .5rem 0
}
.lodev .accordion-item-header--medium {
min-height: 4.5rem;
padding: .75rem 0
}
.lodev .accordion-item-header--large {
min-height: 5.5rem;
padding: 1.25rem 0
}
.lodev .accordion-item-header__title-wrapper {
text-align: start;
flex-grow: 1;
line-height: 0;
padding-inline-end:1rem}
.lodev .accordion-item-header__title-wrapper .accordion-item-header__title {
width: auto
}
.lodev .accordion-item-header__title {
font-size: .875rem;
line-height: 1.571;
font-weight: 700;
display: block
}
.accordion-item--subtle .lodev .accordion-item-header__title {
font-weight: 400
}
.lodev .accordion-item-header__subtitle {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: .875rem;
line-height: 1.571
}
.lodev .accordion-item-header:disabled {
cursor: default
}
.lodev .accordion-item-header:disabled .accordion-item-header__title {
text-decoration: none
}
.lodev .accordion-item-header:disabled .accordion-item-header__title,.lodev .accordion-item-header:disabled .accordion-item-header__subtitle {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .accordion-item-header:disabled .accordion-item-header__icon {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .accordion--padded .accordion-item-header {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.lodev .accordion {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
background: rgba(0,0,0,0)
}
.lodev .accordion__item {
transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
margin: 0;
outline: 0;
padding: 0
}
.lodev .accordion__item--active {
overflow: visible
}
.lodev .accordion .accordion-item-header {
border-top: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev .accordion__item--active>.accordion__content {
visibility: visible;
opacity: 1;
transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1)
}
.lodev .accordion__content {
transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1);
visibility: hidden;
opacity: 0;
overflow: hidden
}
.lodev .accordion__content--inner-small {
padding-top: .5rem;
padding-bottom: 1.5rem
}
.lodev .accordion__content--inner-medium {
padding-top: .5rem;
padding-bottom: 2rem
}
.lodev .accordion__content--inner-large {
padding-top: .5rem;
padding-bottom: 2.5rem
}
@media(prefers-reduced-motion) {
.lodev .accordion__item,.lodev .accordion__item--active>.accordion__content,.lodev .accordion__content {
transition-duration: 0ms
}
}
.lodev .accordion--padded .accordion__content {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.lodev [dir=rtl] .accordion .accordion-item-header__icon {
transform: scaleX(-1)
}
.lodev [dir=rtl] .accordion__item--active .accordion-item-header__icon {
transform: scaleX(-1) rotate(180deg)
}
.lodev .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
}
.lodev .accordion-item-header:active,.lodev .accordion-item-header:focus,.lodev .accordion-item-header:hover {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .accordion-item-header:active .accordion-item-header__title,.lodev .accordion-item-header:focus .accordion-item-header__title,.lodev .accordion-item-header:hover .accordion-item-header__title {
text-decoration: underline
}
.lodev .accordion-item-header__icon {
flex-shrink: 0
}
.lodev .accordion-item-header--small {
min-height: 3rem;
padding: .5rem 0
}
.lodev .accordion-item-header--medium {
min-height: 4.5rem;
padding: .75rem 0
}
.lodev .accordion-item-header--large {
min-height: 5.5rem;
padding: 1.25rem 0
}
.lodev .accordion-item-header__title-wrapper {
text-align: start;
flex-grow: 1;
line-height: 0;
padding-inline-end:1rem}
.lodev .accordion-item-header__title-wrapper .accordion-item-header__title {
width: auto
}
.lodev .accordion-item-header__title {
font-size: .875rem;
line-height: 1.571;
font-weight: 700;
display: block
}
.accordion-item--subtle .lodev .accordion-item-header__title {
font-weight: 400
}
.lodev .accordion-item-header__subtitle {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: .875rem;
line-height: 1.571
}
.lodev .accordion-item-header:disabled {
cursor: default
}
.lodev .accordion-item-header:disabled .accordion-item-header__title {
text-decoration: none
}
.lodev .accordion-item-header:disabled .accordion-item-header__title,.lodev .accordion-item-header:disabled .accordion-item-header__subtitle {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .accordion-item-header:disabled .accordion-item-header__icon {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .accordion--padded .accordion-item-header {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.lodev .expander {
display: flex;
flex-direction: column;
width: 100%
}
.lodev .expander__btn {
align-self: flex-start;
position: relative;
display: inline;
margin: 0;
border: 0;
background: none;
padding: 0;
font-size: .875rem;
line-height: 1.571;
text-decoration: underline;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .expander__btn--generic {
text-decoration: none
}
.lodev .expander__btn:hover {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .expander__content {
position: relative;
overflow: hidden
}
.lodev .expander__content+.btn {
align-self: center
}
.lodev .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%;
animation: shine 2s infinite
}
.lodev .skeleton::after {
content: "​"
}
[dir=rtl] .lodev .skeleton {
animation-direction: reverse
}
@keyframes shine {
to {
background-position: 0 100%
}
}
.lodev .slider {
position: relative;
margin-bottom: 1.25rem
}
.lodev .slider__controls {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
.lodev .slider__label {
font-size: 1rem;
line-height: 1.5
}
.lodev .slider__label-dbm {
padding-bottom: .5rem
}
.lodev .slider-disabled .lodev .slider__label {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .slider-drag .slider-tooltips .slider-tooltip {
transition: none
}
.lodev .slider .slider__input-fields {
margin-bottom: 0.0625rem;
align-self: flex-end
}
.lodev .slider__input-fields input {
padding-top: 0
}
.lodev .slider__input-fields .input-field__wrapper {
width: 4.5rem
}
.lodev .slider .form-field {
margin-bottom: 0
}
.lodev .slider .form-field__content {
margin-top: .5rem
}
.lodev .slider__input--m .input-field__wrapper {
width: 5.5rem
}
.lodev .slider__input--l .input-field__wrapper {
width: 6.5rem
}
.lodev .slider--dual-sliders .slider__controls {
flex-direction: column;
align-items: stretch
}
.lodev .slider--dual-sliders .slider__input-fields {
display: flex;
width: 100%;
justify-content: space-between
}
.lodev .slider--with-input .slider-target {
margin-top: 2.125rem
}
.lodev .slider-target,.lodev .slider-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(var(--colour-neutral-7, 17, 17, 17), 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.lodev .slider-target {
position: relative;
margin-top: 3.375rem
}
.lodev .slider-base::after {
content: " ";
height: 2.75rem;
width: 100%;
position: absolute;
cursor: pointer;
top: -1.375rem
}
.lodev .slider-base,.lodev .slider-connects,.lodev .slider-tooltips {
position: relative;
height: 100%;
width: 100%;
z-index: 1
}
.lodev .slider-base,.lodev .slider-tooltips {
cursor: pointer;
margin: 0px 0.75rem;
width: calc(100% - 1.5rem)
}
.lodev .slider-tooltips {
position: absolute;
pointer-events: none
}
.lodev .slider-tooltips .slider-tooltip {
transition: left 200ms cubic-bezier(0.4, 0, 0.4, 1);
transition-property: left,right
}
.lodev .slider-connects {
overflow: hidden;
z-index: 0
}
.lodev .slider-connect,.lodev .slider-origin {
will-change: transform;
position: absolute;
z-index: 1;
top: 0;
left: 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-webkit-transform-style: preserve-3d;
transform-origin: 0 0;
transform-style: flat
}
.lodev .slider-connect {
height: 100%;
width: 100%
}
.lodev .slider-origin {
height: 10%;
width: 10%
}
.lodev .slider-horizontal .slider-origin {
left: auto;
right: 0
}
html[dir=rtl] .slider-rtl .slider-origin {
left: 0;
right: auto
}
html[dir=rtl] .slider-rtl .slider-handle {
left: -0.75rem;
right: auto
}
.lodev .slider-horizontal .slider-origin {
height: 0
}
.lodev .slider-handle {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute
}
.lodev .slider-handle.slider-active {
box-shadow: 0 0 0 0.1875rem rgba(var(--colour-neutral-7, 17, 17, 17), 0.1)
}
.lodev .slider-touch-area {
position: relative;
height: 2.75rem;
width: 2.75rem;
left: -0.6875rem;
top: -0.6875rem
}
.lodev .slider-state-tap .slider-connect,.lodev .slider-state-tap .slider-origin {
transition: transform 200ms cubic-bezier(0.4, 0, 0.4, 1)
}
.lodev .slider-state-drag * {
cursor: inherit !important
}
.lodev .slider-horizontal {
height: 0.25rem;
border-radius: 8px
}
.lodev .slider-horizontal .slider-handle {
width: 1.5rem;
height: 1.5rem;
border-radius: 64px;
top: -0.625rem;
right: -0.75rem;
left: auto
}
.lodev .slider-target {
background: rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev .slider-connects {
border-radius: 8px;
--skapa-slider-connection-colour: rgb(var(--colour-neutral-7, 17, 17, 17));
position: absolute;
left: -0.75rem;
width: calc(100% + 1.5rem)
}
[disabled] .lodev .slider-connects {
--skapa-slider-connection-colour: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .slider--marks .slider-base {
background-position: left center;
background-image: linear-gradient(90deg, rgba(var(--colour-neutral-7, 17, 17, 17), 0.15), 0.125rem, transparent, 0, transparent);
background-size: max((100% - .125rem)/var(--skapa-slider-step-count, 10),.125rem) 100%
}
.lodev .slider--marks .slider-connects::after {
position: absolute;
z-index: 3;
content: "";
top: 0;
bottom: 0;
left: .75rem;
right: .75rem;
background-position: left center;
background-image: linear-gradient(90deg, rgba(var(--colour-neutral-1, 255, 255, 255), 0.35), 0.125rem, transparent, 0, transparent);
background-size: max((100% - .125rem)/var(--skapa-slider-step-count, 10),.125rem) 100%;
clip-path: inset(0% calc(100% - var(--skapa-slider-handle-value-0, 0%)) 0% 0%)
}
.lodev .slider--marks.slider--dual-sliders .slider-connects::after {
clip-path: inset(0% calc(100% - var(--skapa-slider-handle-value-1, 0%)) 0% var(--skapa-slider-handle-value-0, 0%))
}
.lodev .slider-connect {
background: var(--skapa-slider-connection-colour)
}
.lodev .slider-draggable {
cursor: ew-resize
}
.lodev .slider-handle {
background: rgb(var(--colour-neutral-7, 17, 17, 17));
cursor: grab
}
.lodev .slider-active {
cursor: grabbing
}
.lodev [disabled] .slider-connect {
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev [disabled].slider-target,.lodev [disabled].slider-handle,.lodev [disabled] .slider-handle {
cursor: not-allowed
}
.lodev .slider-pips,.lodev .slider-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box
}
.lodev .slider-pips {
position: absolute;
color: rgb(var(--colour-neutral-3, 223, 223, 223));
border-radius: 4px
}
.lodev .slider-value {
position: absolute;
white-space: nowrap;
text-align: center;
display: none
}
.lodev .slider-value-sub {
color: rgb(var(--colour-neutral-4, 204, 204, 204));
font-size: .875rem;
display: none
}
.lodev .slider-marker {
position: absolute
}
.lodev .slider-tooltip {
position: absolute;
display: block;
border-radius: 4px;
text-align: center;
white-space: nowrap;
background: rgb(var(--colour-neutral-7, 17, 17, 17));
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
padding: .25rem .5rem;
font-weight: 700;
font-size: .875rem;
line-height: 1.5
}
.lodev .slider-pips-horizontal {
height: 0.25rem;
top: 0;
left: 12px;
width: calc(100% - 24px)
}
.lodev .slider-pips-horizontal.slider-pips-light {
left: 0;
width: 100%
}
.lodev .slider-pips-horizontal.slider-pips-light .slider-marker-horizontal.slider-marker {
background: rgba(var(--colour-neutral-1, 255, 255, 255), 0.35)
}
.lodev .slider-value-horizontal {
-webkit-transform: translate(-50%, 50%);
transform: translate(-50%, 50%)
}
.lodev .slider-rtl .slider-value-horizontal {
-webkit-transform: translate(50%, 50%);
transform: translate(50%, 50%)
}
.lodev .slider-marker-horizontal.slider-marker {
margin-left: -0.125rem;
width: 0.125rem;
height: 0.25rem;
background: rgba(var(--colour-neutral-7, 17, 17, 17), 0.15)
}
.lodev .slider-marker-horizontal.slider-marker-sub {
height: 0.25rem
}
.lodev .slider-marker-horizontal.slider-marker-large {
height: 0.25rem
}
.lodev .slider-horizontal~.slider-tooltips {
bottom: 0
}
.lodev .slider-horizontal~.slider-tooltips .slider-tooltip {
transform: translate(-50%, 0);
left: 50%;
bottom: 1.25rem
}
.lodev .slider-horizontal .slider-active .slider-tooltip {
display: block
}
.lodev .slider-horizontal .slider-handle.focus-visible .slider-tooltip {
display: block
}
.lodev .slider-target[disabled] .slider-connect,.lodev .slider-target[disabled] .slider-handle {
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev [disabled].slider-handle {
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev [dir=rtl] .slider {
--skapa-slider-fill-direction: -90deg
}
.lodev [dir=rtl] .slider-connects::after {
transform: scaleX(-1)
}
.lodev [dir=rtl] .slider .slider-horizontal~.slider-tooltips .slider-tooltip {
left: auto;
right: 50%;
transform: translate(50%, 0)
}
.lodev .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,.1);
border-radius: 4px;
border-inline-start:0.25rem solid rgba(0,0,0,0);border-inline-end:0.5rem solid rgb(var(--colour-elevation-1, 255, 255, 255));padding: 1rem 0 1rem 0;
min-height: 1.5rem;
text-align: start;
font-size: .875rem;
box-sizing: border-box
}
.lodev .inline-message a {
text-decoration: underline
}
.lodev .inline-message__content {
width: 100%;
padding-inline-end:1.5rem}
.lodev .inline-message__body {
line-height: 1.571;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: .875rem;
margin: 0
}
.lodev .inline-message__actions {
display: flex;
justify-content: flex-end;
margin-top: .5rem
}
.lodev .inline-message__actions .btn:last-child {
margin-inline-start:.25rem}
.lodev .inline-message__close-button {
margin-top: -0.5rem
}
.lodev .inline-message__title {
line-height: 1.571;
font-size: .875rem;
font-weight: 700;
padding-bottom: .25rem;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
margin: 0
}
.lodev .inline-message__icon {
flex-shrink: 0;
margin-inline-start:.75rem;margin-inline-end:.75rem}
.lodev .inline-message--dismissable .inline-message__content {
padding-inline-end:.5rem}
.lodev .inline-message--icon-hidden {
padding-inline-start:.75rem}
.lodev .inline-message--subtle {
border: 0;
box-shadow: none;
padding: 0;
overflow: visible;
background: none
}
.lodev .inline-message--subtle .inline-message__close-button {
margin-top: -0.25rem
}
.lodev .inline-message--subtle .inline-message__icon {
margin-inline-start:0}
.lodev .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
}
.lodev .inline-message--collapsed {
display: none
}
.lodev .inline-message--informative {
border-inline-start-color:rgb(var(--colour-semantic-informative, 0, 88, 163))}
.lodev .inline-message--informative .inline-message__icon {
color: rgb(var(--colour-semantic-informative, 0, 88, 163))
}
.lodev .inline-message--positive {
border-inline-start-color:rgb(var(--colour-semantic-positive, 10, 138, 0))}
.lodev .inline-message--positive .inline-message__icon {
color: rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .inline-message--cautionary {
border-inline-start-color:rgb(var(--colour-semantic-caution, 242, 106, 47))}
.lodev .inline-message--cautionary .inline-message__icon {
color: rgb(var(--colour-semantic-caution, 242, 106, 47))
}
.lodev .inline-message--negative {
border-inline-start-color:rgb(var(--colour-semantic-negative, 224, 7, 81))}
.lodev .inline-message--negative .inline-message__icon {
color: rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .loading {
position: relative;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center
}
.lodev .loading--label-leading {
text-align: inherit;
align-items: flex-start
}
.lodev .loading__text,.lodev .loading__text--fade-out {
opacity: 0
}
.lodev .loading__text {
max-width: 100%;
font-size: 1rem;
line-height: 1.625;
margin-top: 2.5rem;
text-align: center;
transform: translateY(1.5rem)
}
.lodev .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)
}
.lodev .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
}
.lodev .loading__ball {
display: block;
transform-origin: bottom;
border-radius: 64px;
background: rgb(var(--colour-semantic-informative, 0, 88, 163));
height: 1rem;
width: 1rem;
transition: opacity 200ms cubic-bezier(0.4, 0, 0.4, 1);
animation: loading-bounce .7s infinite
}
.lodev .loading__ball--small {
height: 0.25rem;
width: 0.25rem
}
.lodev .loading__ball--medium {
height: 0.5rem;
width: 0.5rem
}
.lodev .loading__ball--small,.lodev .loading__ball--medium {
transform: translateY(-160%);
animation: loading-bounce-small .7s infinite
}
.lodev .loading__ball--large {
margin-bottom: 2rem
}
.lodev .loading__ball--primary {
background: rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .loading__ball--secondary {
background: rgb(var(--colour-neutral-1, 255, 255, 255))
}
.lodev .loading__ball--secondary+.loading__text {
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}
.lodev .loading__linear-wrapper {
position: relative;
display: flex;
width: 100%;
height: 0.3125rem
}
.lodev .loading__linear-wrapper+.loading__text {
margin-top: 1rem
}
.lodev .loading__sr-only-text,.lodev .loading__linear-label {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
white-space: nowrap
}
.lodev .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))
}
.lodev .loading__linear-progress::-webkit-progress-bar {
border-radius: 0.375rem;
background: rgb(var(--colour-neutral-2, 245, 245, 245))
}
.lodev .loading__linear-progress::-moz-progress-bar {
border-radius: 0.375rem;
background: rgb(var(--colour-semantic-informative, 0, 88, 163))
}
.lodev .loading__linear-progress::-webkit-progress-value {
border-radius: 0.375rem;
background: rgb(var(--colour-semantic-informative, 0, 88, 163))
}
@media(prefers-reduced-motion: reduce) {
.lodev .loading .loading__text {
transition: none
}
.lodev .loading .loading__ball {
transition: none
}
}
@keyframes 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 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)
}
}
.lodev .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
}
.lodev .payment-logo__img {
max-width: 100%;
min-height: 100%;
height: auto
}
.lodev .payment-logo--small {
width: 2.125rem;
height: 1.5rem;
border-radius: 2px
}
.lodev .payment-logo--medium {
width: 3.5rem;
height: 2.5rem;
border-radius: 4px
}
.lodev .product-identifier {
display: inline-block;
font-size: .75rem
}
.lodev .product-identifier__label {
display: block;
margin-bottom: .5rem;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
line-height: 1.5
}
.lodev .product-identifier__value {
display: inline-block;
background-color: rgb(var(--colour-neutral-7, 17, 17, 17));
padding: calc(.25rem - 1px) calc(.75rem - 1px);
border: 1px solid rgb(var(--colour-neutral-7, 17, 17, 17));
font-weight: 700;
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255));
line-height: 1.25
}
.lodev .product-identifier--subtle .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))
}
.lodev .quantity-stepper {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
padding: 0 .5rem;
background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
border: 0;
border-radius: 64px
}
.lodev .quantity-stepper--fluid {
min-width: 100%
}
.lodev .quantity-stepper--small {
padding: 0 .25rem
}
.lodev .quantity-stepper .btn:focus.focus-visible {
z-index: 200
}
.lodev .quantity-stepper__input {
padding: 0;
text-align: center;
font-weight: 700;
border: none;
box-sizing: content-box;
background-color: rgb(var(--colour-interactive-subtle-bg-default, 255, 255, 255));
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
padding: 1rem .25rem;
min-width: 2.5rem;
max-width: 5ch;
order: 2
}
.lodev .quantity-stepper__input.focus-visible~.quantity-stepper__border {
border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .quantity-stepper__input:disabled~.quantity-stepper__border {
border: 1px solid rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .quantity-stepper__input:disabled {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .quantity-stepper--fluid .quantity-stepper__input {
flex-grow: 1;
width: 100%;
max-width: 100%
}
.lodev .quantity-stepper--small .quantity-stepper__input {
padding: .5rem .25rem
}
.lodev .quantity-stepper__border {
position: absolute;
border: 1px solid rgb(var(--colour-neutral-5, 146, 146, 146));
border-radius: 64px;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none
}
.lodev .quantity-stepper__decrease {
order: 1
}
.lodev .quantity-stepper__decrease:disabled {
background: rgba(0,0,0,0)
}
.lodev .quantity-stepper__decrease--active {
background-color: rgb(var(--colour-interactive-subtle-bg-pressed, 223, 223, 223))
}
.lodev .quantity-stepper__increase {
order: 3
}
.lodev .quantity-stepper__increase:disabled {
background: rgba(0,0,0,0)
}
.lodev .quantity-stepper__increase--active {
background-color: rgb(var(--colour-interactive-subtle-bg-pressed, 223, 223, 223))
}
.lodev .quantity-stepper__sr-label {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
white-space: nowrap
}
.lodev .tabs .overflow-carousel {
max-width: 100%;
width: 100%
}
.lodev .tabs .overflow-carousel__content {
padding: 0
}
.lodev .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;
font-size: .875rem;
font-weight: 700;
line-height: 1.4285714286;
margin: 0;
padding: 1rem .25rem;
text-align: initial;
outline: none
}
.lodev .tabs__tab .svg-icon {
margin-inline-end:.5rem}
.lodev .tabs__tab:not(:disabled):hover {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .tabs__tab:disabled {
cursor: default
}
.lodev .tabs__tab--active {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
cursor: default
}
.lodev .tabs__tab--active::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
border-radius: 1.5px;
border-bottom: 0.1875rem solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163));
z-index: 100
}
.lodev .tabs__tab--active:not(:disabled):hover {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .tabs__tab+.tabs__tab {
margin-inline-start:1.5rem}
.lodev .tabs__tab:disabled {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .tabs__list {
position: relative;
display: flex;
width: 100%
}
.lodev .tabs__list::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
border-bottom: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
z-index: -1
}
.lodev .tabs__panel {
outline: none;
padding: 2.5rem 0;
position: relative
}
.lodev .tabs__panel-title {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700
}
.lodev .tag {
position: relative;
display: inline-flex;
align-items: center;
text-decoration: none;
font-size: .75rem;
line-height: 1.5;
background-color: rgb(var(--colour-interactive-secondary-bg-default, 245, 245, 245));
padding: .5rem 1rem;
border: 1px solid rgb(var(--colour-interactive-subtle-border-default, 146, 146, 146));
border-radius: 4px
}
.lodev .tag::after {
content: "";
position: absolute;
left: 0;
right: 0;
min-height: 2.5rem;
height: 100%;
display: block
}
.lodev .tag:hover,.lodev .tag:active,.lodev .tag:focus {
text-decoration: none
}
.lodev .tag:hover,.lodev .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))
}
.lodev .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))
}
.lodev .tag__label {
font-weight: bold
}
.lodev .tag--counter .tag__label {
padding-inline-end:.5rem}
.lodev .tag--counter:hover .tag__number,.lodev .tag--counter:focus .tag__number,.lodev .tag--counter:active .tag__number {
border-inline-start-color:rgb(var(--colour-interactive-subtle-border-hover, 17, 17, 17))}
.lodev .tag--counter .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:.5rem}
.lodev .js-focus-visible .toast .btn:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .toast {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: .5rem;
padding-inline-start:1.5rem;min-height: 4.125rem;
background: rgb(var(--colour-elevation-3, 17, 17, 17));
width: 100%;
transform: translateY(-100%);
transition: transform 200ms cubic-bezier(0.9, 0, 1, 1);
z-index: 400;
pointer-events: none;
box-sizing: border-box
}
.lodev .toast--show {
transform: translateY(0);
pointer-events: auto;
transition-timing-function: cubic-bezier(0, 0, 0.1, 1)
}
.lodev .toast--off-screen {
transition: none
}
.lodev .toast__body-wrapper {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
align-items: center
}
.lodev .toast__body,.lodev .toast__action,.lodev .toast__close-btn {
margin: .25rem 0
}
.lodev .toast__body {
display: inline-block;
flex-grow: 1;
flex-basis: 50%;
margin-inline-end:1rem;color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .toast__action {
line-height: 1
}
.lodev .toast__action-message {
--colour-semantic-informative: 72, 156, 227;
color: rgb(var(--colour-semantic-informative, 0, 88, 163));
border-radius: 4px
}
.lodev .toast__action-message:hover,.lodev .toast__action-message:active {
text-decoration: underline
}
.lodev .toast__action-message .btn__inner {
min-height: 0
}
.lodev .toast__action-message.btn--plain .btn__inner::after {
min-width: 2.75rem;
top: -0.875rem;
bottom: -0.875rem;
left: -0.5rem;
right: -0.5rem
}
.lodev .toast__close-btn {
padding-inline-start:.75rem}
.lodev .toast__text {
color: rgb(var(--colour-static-white, 255, 255, 255));
font-size: .875rem;
line-height: 1.571;
margin-top: 0
}
.lodev .toast__text:last-child {
margin-bottom: 0
}
@media(min-width: 37.5em) {
.lodev .toast {
border-radius:4px;
width: 22.5rem;
top: 2rem;
left: auto;
right: 0;
border: 1px solid rgb(var(--colour-neutral-6, 72, 72, 72));
transform: translate(100%, 0)
}
[dir=rtl] .lodev .toast {
right: auto;
left: 0;
transform: translate(-100%, 0)
}
.lodev .toast--show {
transform: translate(-2rem, 0)
}
[dir=rtl] .lodev .toast--show {
transform: translate(2rem, 0)
}
}
.lodev .status--labelled.status--leading .status__dot,.lodev .status--labelled.status--trailing .status__dot {
top: .82em;
transform: translateY(-50%) scale(0.99999)
}
.lodev .status__label {
vertical-align: middle;
position: relative;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .status__dot-wrapper {
white-space: nowrap
}
.lodev .status__dot {
width: .4em;
height: .4em;
min-width: 0.75rem;
min-height: 0.75rem;
border-radius: 64px;
flex-shrink: 0;
position: relative;
border-style: solid;
border-width: max(2px, .066em);
transform: scale(0.99999);
display: inline-block;
vertical-align: middle;
border-color: currentColor;
forced-color-adjust: none
}
.lodev .status--green .status__dot {
background-color: currentColor;
color: rgb(var(--colour-semantic-positive, 10, 138, 0))
}
.lodev .status--orange .status__dot {
color: rgb(var(--colour-semantic-caution, 242, 106, 47))
}
.lodev .status--orange .status__dot::after {
position: absolute;
top: 50%;
bottom: -1px;
left: -1px;
right: -1px;
content: "";
display: block;
border-radius: 0 0 50% 50%;
background-color: currentColor
}
.lodev .status--red .status__dot {
color: rgb(var(--colour-semantic-negative, 224, 7, 81))
}
.lodev .status--grey .status__dot {
color: rgb(var(--colour-text-and-icon-4, 146, 146, 146));
background-color: none
}
.lodev .status--grey .status__dot::after {
position: absolute;
content: "";
width: max(2px, .066em);
height: 130%;
left: 50%;
top: 50%;
right: 0;
bottom: 0;
display: block;
background-color: currentColor;
transform: translate(-50%, -50%) rotate(-45deg)
}
.lodev .status--small .status__dot {
min-width: 0.5rem;
min-height: 0.5rem;
width: 0.5rem;
height: 0.5rem;
transform: none;
background-color: currentColor
}
.lodev .status--small .status__dot::after {
content: none
}
.lodev .status--small .status--trailing .status__dot {
margin-inline-start:.5rem;order: 2
}
.lodev .status--small .status--inline .status__dot {
margin-inline-start:.5rem;vertical-align: unset
}
.lodev .status--small .status--leading .status__dot {
margin-inline-end:.5rem}
.lodev .status--trailing {
display: flex
}
.lodev .status--trailing .status__dot {
margin-inline-start:max(0.5rem, .4em);order: 2
}
.lodev .status--leading {
display: flex
}
.lodev .status--leading .status__dot {
margin-inline-end:max(0.5rem, .4em)}
.lodev .status--leading .status__label {
order: 2
}
.lodev .status--inline .status__dot {
margin-inline-start:max(0.5rem, .4em)}
.lodev [dir=rtl] .status--grey .status__dot::after {
right: auto
}
.lodev button.rating::after {
content: "";
position: absolute;
top: -0.75rem;
left: 0;
right: 0;
bottom: -0.75rem
}
.lodev button.rating:hover .rating__label {
text-decoration: underline
}
.lodev .rating {
-webkit-appearance: none;
background: 0;
padding: 0;
border: 0;
text-align: inherit;
display: inline-block;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1rem;
line-height: 1.5
}
[dir=rtl] .lodev .rating__star--half-filled {
transform: scaleX(-1)
}
.lodev .rating__star {
width: 1.5rem;
height: 1.5rem
}
.lodev .rating__star:first-of-type {
margin-inline-start:-0.25rem}
.lodev .rating__star--empty {
color: rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev .rating__label {
display: inline-block;
vertical-align: middle;
margin-inline-start:.5rem}
.lodev .rating--small {
font-size: .875rem;
line-height: 1.571
}
.lodev .rating--small .rating__star:first-of-type {
margin-inline-start:-0.375rem}
.lodev .rating--small .rating__star:not(:last-of-type) {
margin-inline-end:-0.359375rem}
.lodev .rating--small .rating__label {
margin-inline-start:.25rem}
.lodev .price {
font-weight: 700;
line-height: 1;
font-size: 1.5rem;
position: relative;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .price--subtle {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .price__currency,.lodev .price__decimal,.lodev .price__subscript {
font-size: .5em;
line-height: 1.3
}
.lodev .price__subscript,.lodev .price__currency,.lodev .price__decimal {
position: relative
}
.lodev .price__currency {
unicode-bidi: bidi-override
}
.lodev .price__subscript {
unicode-bidi: isolate
}
.lodev .price--currency-super-aligned .price__currency {
top: -0.727em
}
.lodev .price--decimal-super-aligned .price__decimal {
top: -0.727em
}
.lodev .price--large {
font-size: 2.25rem
}
.lodev .price--bti-price {
display: inline-block;
color: rgb(var(--colour-static-black, 17, 17, 17));
padding: .2em .3em;
background: rgb(var(--colour-commercial-message-bti-yellow, 255, 219, 0));
box-shadow: .08em .08em 0 rgb(var(--colour-commercial-message-bti-red, 204, 0, 8));
font-style: normal
}
.lodev .price--regular-font-weight {
font-weight: 400
}
.lodev .price--strikeout .price__currency,.lodev .price--strikeout .price__decimal,.lodev .price--strikeout .price__integer {
text-decoration: line-through
}
.lodev .price--fixed-size .price__subscript,.lodev .price--fixed-size .price__currency,.lodev .price--fixed-size .price__decimal,.lodev .price--strikeout .price__subscript,.lodev .price--strikeout .price__currency,.lodev .price--strikeout .price__decimal,.lodev .price--regular-font-weight .price__subscript,.lodev .price--regular-font-weight .price__currency,.lodev .price--regular-font-weight .price__decimal,.lodev .price--large.price--strikeout .price__subscript,.lodev .price--large.price--strikeout .price__currency,.lodev .price--large.price--strikeout .price__decimal {
font-size: 1em;
line-height: 1;
top: auto
}
.lodev .price--small {
font-size: 1rem
}
.lodev .price--small .price__subscript,.lodev .price--small .price__currency,.lodev .price--small .price__decimal {
font-size: 1em;
line-height: 1;
top: auto
}
.lodev .price__sr-text {
position: absolute;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
margin: -1px;
white-space: nowrap;
left: 0
}
.lodev .price-module {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
display: flex;
flex-direction: column;
line-height: 1
}
.lodev .price-module .price-module__information {
margin-bottom: .5rem
}
.lodev .price-module .price-module__energy-class,.lodev .price-module .price-module__current-price,.lodev .price-module .price-module__secondary-current-price {
margin-bottom: .25rem
}
.lodev .price-module--bti .price-module__energy-class,.lodev .price-module--bti .price-module__current-price,.lodev .price-module--bti .price-module__secondary-current-price {
margin-bottom: calc(0.5rem + .08em)
}
.lodev .price-module__name {
font-size: .875rem;
line-height: 1.571;
text-transform: uppercase;
font-weight: 700;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
order: 2
}
.lodev .price-module__description {
display: block;
text-transform: none;
font-weight: 400;
order: 2
}
.lodev .price-module__primary-currency-price {
line-height: 1;
order: 3;
display: flex;
align-items: center;
flex-wrap: wrap
}
.lodev .price-module__energy-class {
display: flex;
vertical-align: top;
line-height: 1
}
.lodev .price-module__energy-class svg {
display: block
}
.lodev .price-module__complete-price {
font-weight: 700;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
margin-bottom: .25rem
}
.lodev .price-module__comparison-price {
display: block;
width: 100%;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
margin-bottom: .25rem
}
.lodev .price-module__addon .price {
font-size: inherit
}
.lodev .price-module__current-price {
font-size: 1.75rem;
margin-inline-end:.5rem}
.lodev .price-module .commercial-message {
order: 1
}
.lodev .price-module__small-icon {
vertical-align: top;
fill: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
width: 1.125rem;
height: 1.125rem
}
.lodev .price-module__addons {
order: 4;
font-size: .75rem;
line-height: 1.5;
margin-top: .5rem
}
.lodev .price-module .commercial-message {
font-size: .75rem;
line-height: 1.5
}
.lodev .price-module__comparison-price .price {
font-size: .75rem
}
.lodev .price-module__star {
width: 1.5rem;
height: 1.5rem
}
.lodev .price-module__star--empty {
color: rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev .price-module__chevron {
flex-shrink: 0;
border-left: 1px solid rgb(var(--colour-neutral-5, 146, 146, 146));
display: flex;
align-items: center;
padding: 0 .25rem;
max-width: 2.0625rem
}
.lodev .price-module:not(.price-module--list).price-module--commercial-message-placeholder {
margin-top: 1.125rem
}
.lodev .price-module--xsmall .price-module__complete-price,.lodev .price-module--xsmall .price-module__name {
font-size: .75rem;
line-height: 1.5
}
.lodev .price-module--xsmall .price-module__energy-class svg {
width: 4.0625rem;
height: 2.25rem
}
.lodev .price-module--xsmall.price-module--tro .price-module__secondary-current-price,.lodev .price-module--xsmall .price-module__current-price {
font-size: 1.5rem;
line-height: 1.1
}
.lodev .price-module--xsmall .price-module__secondary-current-price {
font-size: 1rem
}
.lodev .price-module--small .price-module__complete-price,.lodev .price-module--small .price-module__name {
font-size: .875rem;
line-height: 1.571
}
.lodev .price-module--small .price-module__energy-class svg {
width: 4.75rem;
height: 2.625rem
}
.lodev .price-module--small.price-module--tro .price-module__secondary-current-price,.lodev .price-module--small .price-module__current-price {
font-size: 1.75rem
}
.lodev .price-module--small .price-module__secondary-current-price {
font-size: 1.125rem
}
.lodev .price-module--medium .price-module__complete-price,.lodev .price-module--medium .price-module__name {
font-size: 1rem;
line-height: 1.5
}
.lodev .price-module--medium .price-module__energy-class svg {
width: 5.4375rem;
height: 3rem
}
.lodev .price-module--medium.price-module--tro .price-module__secondary-current-price,.lodev .price-module--medium .price-module__current-price {
font-size: 2rem
}
.lodev .price-module--medium .price-module__secondary-current-price {
font-size: 1.25rem
}
.lodev .price-module--large .price-module__complete-price,.lodev .price-module--large .price-module__name {
font-size: 1.5rem;
line-height: 1.45
}
.lodev .price-module--large .price-module__energy-class svg {
width: 8.1875rem;
height: 4.5rem
}
.lodev .price-module--large.price-module--tro .price-module__secondary-current-price,.lodev .price-module--large .price-module__current-price {
font-size: 2.875rem
}
.lodev .price-module--large .price-module__secondary-current-price {
font-size: 1.75rem
}
.lodev .price-module--xlarge .price-module__complete-price,.lodev .price-module--xlarge .price-module__name {
font-size: 2rem;
line-height: 1.375
}
.lodev .price-module--xlarge .price-module__energy-class svg {
width: 10.875rem;
height: 6rem
}
.lodev .price-module--xlarge.price-module--tro .price-module__secondary-current-price,.lodev .price-module--xlarge .price-module__current-price {
font-size: 4rem
}
.lodev .price-module--xlarge .price-module__secondary-current-price {
font-size: 2.5rem
}
.lodev .price-module--large .price-module__energy-class,.lodev .price-module--large .price-module__current-price,.lodev .price-module--large .price-module__secondary-current-price,.lodev .price-module--xlarge .price-module__energy-class,.lodev .price-module--xlarge .price-module__current-price,.lodev .price-module--xlarge .price-module__secondary-current-price {
margin-bottom: .25rem
}
.lodev .price-module--large.price-module--bti .price-module__energy-class,.lodev .price-module--large.price-module--bti .price-module__current-price,.lodev .price-module--large.price-module--bti .price-module__secondary-current-price,.lodev .price-module--xlarge.price-module--bti .price-module__energy-class,.lodev .price-module--xlarge.price-module--bti .price-module__current-price,.lodev .price-module--xlarge.price-module--bti .price-module__secondary-current-price {
margin-bottom: calc(0.75rem + .08em)
}
.lodev .price-module--large .price-module__addons,.lodev .price-module--xlarge .price-module__addons {
margin-top: .75rem
}
.lodev .price-module--medium .price-module__current-price,.lodev .price-module--large .price-module__current-price,.lodev .price-module--xlarge .price-module__current-price {
margin-inline-end:.75rem}
.lodev .price-module--list {
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap
}
.lodev .price-module--list .price-module__name {
margin-bottom: .5rem
}
.lodev .price-module--list .price-module__information {
position: relative;
padding: 0;
margin-inline-end:1rem;flex: 0 0 60%;
max-width: 60%;
margin-bottom: .25rem
}
.lodev .price-module--list .price-module__comparison-price .price {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .price-module--list .price-module__primary-currency-price {
display: inline-block;
flex: 0 0 calc(40% - 1rem);
max-width: calc(40% - 1rem);
text-align: end;
line-height: 1
}
.lodev .price-module--list .price-module__comparison-price,.lodev .price-module--list .price-module__current-price {
margin-inline-end:0}
.lodev .price-module--list .price-module__secondary-current-price {
margin-top: .25rem;
display: block
}
.lodev .price-module--list .price-module__comparison-price {
order: 1;
line-height: 1;
margin-top: .25rem;
margin-bottom: .25rem
}
.lodev .price-module--list .price-module__addons {
margin-top: .25rem;
width: 100%
}
.lodev .price-module--list.price-module--with-commercial-message {
padding-top: 1.375em
}
.lodev .price-module--list.price-module--with-commercial-message .commercial-message {
position: absolute;
top: -1.375em;
white-space: nowrap
}
.lodev .price-module--list.price-module--xsmall .price-module__secondary-current-price,.lodev .price-module--list.price-module--xsmall .price-module__comparison-price .price,.lodev .price-module--list.price-module--xsmall .price-module__current-price {
font-size: .75rem
}
.lodev .price-module--list.price-module--xsmall .price-module__energy-class svg {
width: 2rem;
height: 1.125rem
}
.lodev .price-module--list.price-module--small .price-module__secondary-current-price,.lodev .price-module--list.price-module--small .price-module__comparison-price .price,.lodev .price-module--list.price-module--small .price-module__current-price {
font-size: .875rem
}
.lodev .price-module--list.price-module--small .price-module__energy-class svg {
width: 2.5rem;
height: 1.375rem
}
.lodev .price-module--list.price-module--medium .price-module__secondary-current-price,.lodev .price-module--list.price-module--medium .price-module__comparison-price .price,.lodev .price-module--list.price-module--medium .price-module__current-price {
font-size: 1rem
}
.lodev .price-module--list.price-module--medium .price-module__energy-class svg {
width: 2.6875rem;
height: 1.5rem
}
.lodev [dir=rtl] .price-module__star--half-filled {
transform: scaleX(-1)
}
.lodev .commercial-message {
display: inline-block;
font-weight: 700;
padding: .3333em .5em;
line-height: 1.1233;
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}
.lodev .commercial-message--nlp {
background-color: rgb(var(--colour-commercial-message-new-lower-price, 204, 0, 8))
}
.lodev .commercial-message--new {
background-color: rgb(var(--colour-commercial-message-new, 202, 80, 8))
}
.lodev .commercial-message--family {
background-color: rgb(var(--colour-commercial-message-ikea-family, 0, 124, 193))
}
.lodev .commercial-message--subtle {
padding: 0;
line-height: 1.5
}
.lodev .commercial-message--subtle--nlp {
color: rgb(var(--colour-commercial-message-new-lower-price, 204, 0, 8))
}
.lodev .commercial-message--subtle--new {
color: rgb(var(--colour-commercial-message-new, 202, 80, 8))
}
.lodev .commercial-message--subtle--family {
color: rgb(var(--colour-commercial-message-ikea-family, 0, 124, 193))
}
.lodev .link-list--compact .link-list__label {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700;
font-weight: 400
}
.lodev .link-list--compact .link-list__item-title {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1rem;
line-height: 1.5;
font-weight: 700;
padding-inline-end:2.5rem}
.lodev .link-list--compact .link-list__item-icon-wrapper {
margin-right: -0.75rem
}
.lodev .link-list--compact .link-list__item-icon {
width: 1.5rem;
height: 1.5rem
}
.lodev .link-list--compact .link-list__item {
padding: 1.5rem 0
}
.lodev .link-list--compact .link-list__item-title-icon {
display: block
}
.lodev .link-list--emphasised .link-list__item-icon-wrapper {
background-color: rgb(var(--colour-neutral-7, 17, 17, 17));
margin-inline-end:0}
.lodev .link-list--emphasised .link-list__item-icon {
color: rgb(var(--colour-text-and-icon-5, 255, 255, 255))
}
.lodev .link-list__list {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
background: rgba(0,0,0,0)
}
.lodev .link-list__label {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: 1rem;
line-height: 1.5;
font-weight: 700;
font-weight: 400;
display: block;
margin-bottom: 1.5rem
}
.lodev .link-list__item {
border-top: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
overflow: hidden;
padding: 2.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .link-list__item:hover {
text-decoration: underline
}
.lodev .link-list__item-title-wrapper {
display: flex;
align-items: center
}
.lodev .link-list__item-title-icon {
display: none;
flex-shrink: 0;
margin-inline-end:.75rem}
.lodev .link-list__item-title {
font-size: 1.5rem;
line-height: 1.45;
font-weight: 700;
padding-inline-end:2.5rem}
.lodev .link-list__item-icon-wrapper {
width: 2.5rem;
height: 2.5rem;
border-radius: 64px;
display: flex;
justify-content: center;
align-items: center;
margin-inline-end:-0.5rem;flex-shrink: 0
}
.lodev .link-list__item-icon {
width: 2rem;
height: 2rem
}
[dir=rtl] .lodev .link-list__item-icon {
transform: scaleX(-1)
}
@media(min-width: 56.25em) {
.lodev .link-list__item-title {
font-size:2.25rem;
line-height: 1.333;
letter-spacing: -0.0063em;
padding-inline-end:4rem}
.lodev .link-list__item-icon {
width: 3rem;
height: 3rem
}
.lodev .link-list__item {
padding: 3rem 0
}
.lodev .link-list__item-icon-wrapper {
width: 3.5rem;
height: 3.5rem;
margin-inline-end:-0.75rem}
.lodev .link-list--compact .link-list__item-icon-wrapper {
width: 2.5rem;
height: 2.5rem
}
}
.lodev .jumbo-btn {
transition-property: all;
transition-duration: 100ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
padding: 2.5rem 1.5rem;
border-radius: 4px;
position: relative;
display: inline-flex;
text-decoration: none;
justify-content: center;
align-items: center;
text-align: initial;
border: 0;
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
box-sizing: border-box;
color: rgb(var(--colour-static-white, 255, 255, 255));
width: 100%
}
.lodev .jumbo-btn:hover,.lodev .jumbo-btn:active,.lodev .jumbo-btn:focus {
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .jumbo-btn:active:not(.lodev .jumbo-btn--footer) {
transform: scale(0.98)
}
.lodev .jumbo-btn:disabled {
pointer-events: none;
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223));
color: rgb(var(--colour-interactive-disabled-2, 146, 146, 146))
}
.lodev .jumbo-btn:disabled .jumbo-btn__icon {
background: rgb(var(--colour-interactive-disabled-2, 146, 146, 146));
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .jumbo-btn--footer {
border-radius: 0
}
.lodev .jumbo-btn--primary {
background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17))
}
.lodev .jumbo-btn--primary:hover {
background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51));
text-decoration: none
}
.lodev .jumbo-btn--primary:active {
background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0));
text-decoration: none
}
.lodev .jumbo-btn--emphasised {
background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163))
}
.lodev .jumbo-btn--emphasised:hover {
background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147));
text-decoration: none
}
.lodev .jumbo-btn--emphasised:active {
background: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114));
text-decoration: none
}
.lodev .jumbo-btn--inverse {
background: rgb(var(--colour-static-white, 255, 255, 255));
color: rgb(var(--colour-static-black, 17, 17, 17))
}
.lodev .jumbo-btn--inverse:active,.lodev .jumbo-btn--inverse:hover,.lodev .jumbo-btn--inverse:focus {
color: rgb(var(--colour-static-black, 17, 17, 17))
}
.lodev .jumbo-btn--inverse:hover {
background: rgb(var(--colour-static-light-grey, 245, 245, 245));
text-decoration: none
}
.lodev .jumbo-btn--inverse:active {
background: rgb(var(--colour-static-grey, 223, 223, 223));
text-decoration: none
}
.lodev .jumbo-btn--inverse .jumbo-btn__icon {
background: rgb(var(--colour-static-black, 17, 17, 17));
color: rgb(var(--colour-static-white, 255, 255, 255))
}
.lodev .jumbo-btn--inverse:disabled {
background: rgba(var(--colour-static-white, 255, 255, 255), 0.15);
color: rgba(var(--colour-static-white, 255, 255, 255), 0.15)
}
.lodev .jumbo-btn--inverse:disabled .jumbo-btn__icon {
color: rgba(var(--colour-static-white, 255, 255, 255), 0.075);
background: rgba(var(--colour-static-white, 255, 255, 255), 0.075)
}
.lodev .jumbo-btn--loading {
pointer-events: none
}
.lodev .jumbo-btn--loading .jumbo-btn__label,.lodev .jumbo-btn--loading .jumbo-btn__icon {
opacity: 0;
overflow: hidden;
transform: translateY(50%)
}
.lodev .jumbo-btn--loading .jumbo-btn__loader {
opacity: 1;
visibility: visible
}
.jumbo-btn__loader {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -160%);
display: inline-block;
width: 0.375rem;
height: 0.375rem;
background: currentColor;
border-radius: 64px;
animation: jumbo-btn-loader 800ms infinite;
opacity: 0;
visibility: hidden;
text-indent: -9999px;
overflow: hidden;
transition-property: opacity,transform;
transition-duration: 300ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1)
}
@keyframes jumbo-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)
}
}
.lodev .jumbo-btn__label {
opacity: 1;
transform: translateY(0)
}
.lodev .jumbo-btn__icon {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 64px;
background: rgb(var(--colour-static-white, 255, 255, 255));
color: rgb(var(--colour-static-black, 17, 17, 17));
width: 2.5rem;
height: 2.5rem;
margin-inline-start:1rem;flex-shrink: 0
}
[dir=rtl] .lodev .jumbo-btn__icon {
transform: scaleX(-1)
}
.lodev .jumbo-btn__label,.lodev .jumbo-btn__icon {
transition-property: opacity,transform;
transition-duration: 250ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.4, 1)
}
.lodev .jumbo-btn__inner {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
width: 100%
}
.lodev .banner {
font-size: .75rem;
line-height: 1.5;
background-color: rgb(var(--colour-elevation-3, 17, 17, 17));
color: rgb(var(--colour-static-white, 255, 255, 255));
position: relative;
display: flex;
padding: .75rem 1.5rem;
width: 100%;
justify-content: center;
min-height: 3rem;
align-items: center
}
.lodev .banner--dismissable {
padding-inline-end:3rem;padding-inline-start:1.5rem}
.lodev .banner--emergency {
color: rgb(var(--colour-static-black, 17, 17, 17));
background-color: rgb(var(--colour-semantic-caution, 242, 106, 47))
}
.lodev .banner--emergency .banner__dismiss-button {
color: rgb(var(--colour-static-black, 17, 17, 17));
--colour-interactive-secondary-bg-hover: 245, 245, 245;
--colour-interactive-secondary-bg-pressed: 223, 223, 223
}
.lodev .banner__icon {
flex-shrink: 0;
align-self: flex-start;
margin-inline-end:.5rem}
.lodev .banner__body {
text-align: initial;
display: block
}
.lodev .banner--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
}
.lodev .banner__dismiss-button {
position: absolute;
right: 1rem;
top: .5rem
}
[dir=rtl] .lodev .banner__dismiss-button {
left: 1rem;
right: initial
}
.lodev .choice {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
background: rgba(0,0,0,0)
}
.lodev .choice__list-item {
display: flex;
min-height: 5.5rem;
margin-bottom: 1rem
}
.lodev .choice-item {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
min-height: 5.5rem;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
background: none
}
.lodev .choice-item__action {
display: flex;
flex: 1;
align-items: center;
padding: 1.25rem 1.5rem;
border: 0;
outline: 0;
background: none;
text-decoration: none;
min-height: 3.25rem;
-webkit-tap-highlight-color: rgba(0,0,0,0);
cursor: pointer
}
.lodev .choice-item__action:active+.choice-item__border {
border-color: rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .choice-item__action:disabled {
cursor: default
}
.lodev .choice-item__action:disabled .choice-item__caption,.lodev .choice-item__action:disabled .choice-item__title,.lodev .choice-item__action:disabled .choice-item__value,.lodev .choice-item__action:disabled .price {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .choice-item__action:disabled .choice-item__image .svg-icon path {
fill: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .choice-item__action:disabled+.choice-item__border {
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .choice-item__action:disabled .payment-logo,.lodev .choice-item__action:disabled .choice-item__image {
opacity: .4
}
@media(hover: hover) {
.lodev .choice-item__action:hover:not(:disabled) {
text-decoration:none
}
.lodev .choice-item__action:hover:not(:disabled)+.choice-item__border {
border-color: rgb(var(--colour-neutral-5, 146, 146, 146))
}
}
.lodev .choice-item__nested {
padding: 0 1.5rem 1.5rem
}
.lodev .choice-item__content {
flex: 1;
text-align: start
}
.lodev .choice-item__border {
position: absolute;
top: 0rem;
right: 0rem;
bottom: 0rem;
left: 0rem;
border: 1px solid rgb(var(--colour-neutral-3, 223, 223, 223));
border-radius: 4px;
pointer-events: none
}
.lodev .choice-item__title {
display: block;
font-size: .875rem;
font-weight: 700;
line-height: 1.571;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .choice-item__caption {
display: block;
font-size: .875rem;
line-height: 1.571;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .choice-item__image {
width: 3rem;
margin-inline-end:1.5rem;flex-shrink: 0
}
.lodev .choice-item .payment-logo {
margin-inline-end:1.5rem;flex-shrink: 0
}
.lodev .choice-item__value {
padding-inline-start:1rem;max-width: 50%;
font-size: .875rem;
font-weight: 700;
line-height: 1.571;
word-wrap: break-word;
align-self: flex-start;
line-height: 1;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .choice-item--trailing-image .choice-item__action {
flex-direction: row-reverse
}
.lodev .choice-item--trailing-image .choice-item__image,.lodev .choice-item--trailing-image .payment-logo {
margin-inline-end:0;margin-inline-start:1.5rem}
.lodev .choice-item--trailing-image .choice-item__value {
padding-inline-start:0;padding-inline-end:1rem}
.lodev .choice-item--selected>.choice-item__action+.choice-item__border,.lodev .choice-item--selected>.choice-item__action:hover+.choice-item__border,.lodev .choice-item--selected>.choice-item__action:active+.choice-item__border {
border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .choice-item--selected .choice-item__action:disabled+.choice-item__border {
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .choice-item--selected.choice-item--subtle .choice-item__action+.choice-item__border {
border-color: rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17))
}
.lodev .choice-item--selected.choice-item--subtle .choice-item__action:disabled+.choice-item__border {
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .choice-item--centered .choice-item__value {
align-self: center;
padding-top: 0
}
.lodev .choice-item .price {
display: block;
font-size: .875rem;
text-align: end
}
.lodev .choice-item .price:not(:first-child) {
margin-top: .5rem
}
.lodev .switch {
position: relative;
display: flex
}
.lodev .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] .lodev .switch__checkbox {
right: 0;
left: auto
}
.lodev .switch__label {
font-size: .875rem;
line-height: 1.571;
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
}
.lodev .switch__toggle {
position: relative;
display: flex;
flex-shrink: 0;
cursor: pointer;
height: 1.5rem;
width: 3rem
}
.lodev .switch__toggle::before {
content: "";
display: block;
width: 100%;
background: rgb(var(--colour-neutral-5, 146, 146, 146));
transition: background 200ms cubic-bezier(0, 0, 1, 1);
height: 1.5rem;
border-radius: 20px
}
.lodev .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))
}
.lodev .switch__button {
position: absolute;
left: 0;
display: flex;
justify-content: center;
align-items: center;
margin: 0.125rem;
background: rgb(var(--colour-static-white, 255, 255, 255));
border-radius: 20px;
border: 0 solid rgb(var(--colour-static-white, 255, 255, 255));
transition: transform 200ms cubic-bezier(0.4, 0, 0.4, 1);
width: 1.25rem;
height: 1.25rem
}
[dir=rtl] .lodev .switch__button {
right: 0;
left: auto
}
.lodev .switch__checkbox:checked+.switch__toggle::before {
background: rgb(var(--colour-interactive-emphasised-bg-default, 0, 88, 163))
}
.lodev .switch__checkbox:checked+.switch__toggle .switch__symbol::before {
opacity: 1
}
.lodev .switch__checkbox:checked+.switch__toggle .switch__button {
transform: translateX(120%)
}
[dir=rtl] .lodev .switch__checkbox:checked+.switch__toggle .switch__button {
transform: translateX(-120%)
}
.lodev .switch--subtle .switch__button {
background: rgb(var(--colour-neutral-1, 255, 255, 255))
}
.lodev .switch--subtle .switch__checkbox:checked+.switch__toggle::before {
background: rgb(var(--colour-interactive-primary-bg-default, 17, 17, 17))
}
.lodev .switch--subtle .switch__checkbox:checked+.switch__toggle .switch__symbol::before {
border-color: rgb(var(--colour-neutral-7, 17, 17, 17))
}
.lodev .switch .switch__checkbox:hover:checked+.switch__toggle::before {
background: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147))
}
.lodev .switch .switch__checkbox:hover:checked+.switch__toggle .switch__symbol::before {
border-color: rgb(var(--colour-interactive-emphasised-bg-hover, 0, 79, 147))
}
.lodev .switch--subtle .switch__checkbox:hover:checked+.switch__toggle::before {
background: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51))
}
.lodev .switch--subtle .switch__checkbox:hover:checked+.switch__toggle .switch__symbol::before {
border-color: rgb(var(--colour-interactive-primary-bg-hover, 51, 51, 51))
}
.lodev .switch .switch__checkbox:active:checked+.switch__toggle::before {
background: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114))
}
.lodev .switch .switch__checkbox:active:checked+.switch__toggle .switch__symbol::before {
border-color: rgb(var(--colour-interactive-emphasised-bg-pressed, 0, 62, 114))
}
.lodev .switch--subtle .switch__checkbox:active:checked+.switch__toggle::before {
background: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0))
}
.lodev .switch--subtle .switch__checkbox:active:checked+.switch__toggle .switch__symbol::before {
border-color: rgb(var(--colour-interactive-primary-bg-pressed, 0, 0, 0))
}
.lodev .switch .switch__checkbox:disabled {
cursor: default
}
.lodev .switch .switch__checkbox:disabled~.switch__label {
pointer-events: none;
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .switch .switch__checkbox:disabled~.switch__toggle .switch__button {
color: rgb(var(--colour-interactive-disabled-3, 255, 255, 255))
}
.lodev .switch .switch__checkbox:disabled:hover+.switch__toggle::before,.lodev .switch .switch__checkbox:disabled+.switch__toggle::before {
background: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .switch .switch__checkbox:disabled:hover+.switch__toggle .switch__symbol::before,.lodev .switch .switch__checkbox:disabled+.switch__toggle .switch__symbol::before {
border-color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .table th {
font-size: .75rem;
font-weight: normal;
background-color: rgb(var(--colour-neutral-1, 255, 255, 255));
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .table td,.lodev .table a {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .table a:hover {
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72))
}
.lodev .table a:active,.lodev .table a:focus {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .table th,.lodev .table td {
text-align: initial;
border-bottom: 1px rgb(var(--colour-neutral-3, 223, 223, 223)) solid;
padding-top: .75rem;
padding-bottom: .75rem;
padding-inline-start:0;padding-inline-end:1.5rem}
.lodev .table-header--sticky th {
position: sticky;
top: 0;
z-index: 100
}
.lodev .table--inset th,.lodev .table--inset td {
padding-inline-start:1.5rem}
.lodev .table-body--striped tr:nth-child(odd) {
background-color: rgb(var(--colour-neutral-2, 245, 245, 245))
}
.lodev .table tbody th,.lodev .table tbody td {
padding-top: 1.25rem;
padding-bottom: 1.25rem
}
.lodev .table:not(table) {
max-width: 100%;
overflow: auto
}
.lodev .table:not(table) table,.lodev table.table {
border-collapse: separate;
border-spacing: 0;
position: relative;
font-variant-numeric: tabular-nums
}
.lodev .table--full-width:not(table) table,.lodev table.table--full-width {
width: 100%
}
.lodev .search {
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: 1px solid rgba(0,0,0,0);
border-radius: 64px;
background-color: rgb(var(--colour-neutral-2, 245, 245, 245))
}
.lodev .search__input {
transition: padding 200ms cubic-bezier(0.4, 0, 0.4, 1);
flex-grow: 1;
margin: 0;
padding: 0;
padding-inline-start:3rem;height: 3.125rem;
width: calc(100% - 2.5rem);
font-size: 1rem;
line-height: 1.625;
background-color: rgba(0,0,0,0);
border: none;
outline: none;
-webkit-appearance: none;
appearance: none;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
background-color: rgb(var(--colour-neutral-2, 245, 245, 245))
}
.lodev .search__input::-ms-clear {
display: none
}
.lodev .search__input::-webkit-search-cancel-button {
-webkit-appearance: none
}
.lodev .search__input:-webkit-autofill {
font-size: 1rem;
line-height: 1.625;
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
}
.lodev .search__input-wrapper {
position: relative;
display: flex;
align-items: center;
flex-grow: 1;
height: 100%
}
.lodev .search__clear {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%)
}
[dir=rtl] .lodev .search__clear {
right: auto;
left: 0
}
.lodev .search__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1rem;
transition: transform 200ms cubic-bezier(0.4, 0, 0.4, 1),opacity 200ms cubic-bezier(0, 0, 1, 1);
transform-origin: 0 50%;
opacity: 1;
z-index: 1
}
[dir=rtl] .lodev .search__icon {
left: auto;
right: 1rem
}
.lodev .search__chevron-down {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
pointer-events: none
}
[dir=rtl] .lodev .search__chevron-down {
right: auto;
left: 0
}
.lodev .search__scope {
display: flex;
padding-inline-end:2rem;height: 2.5rem;
text-overflow: ellipsis;
-webkit-appearance: none;
appearance: none;
border: none;
background-color: rgba(0,0,0,0);
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17))
}
.lodev .search__scope::-ms-expand {
display: none
}
.lodev .search__scope-wrapper {
position: relative;
display: flex;
align-items: center;
height: 100%
}
.lodev .search__scope-wrapper:last-child {
margin-inline-end:1rem}
.lodev .search__action+.search__action {
margin-inline-start:1rem}
.lodev .search__action-wrapper {
display: flex;
flex-shrink: 0;
justify-content: flex-end;
align-items: center;
max-width: 50%
}
.lodev .search__action-wrapper:last-child {
margin-inline-end:1rem}
.lodev .search__divider {
margin-inline-start:.75rem;margin-inline-end:1rem;width: 1px;
height: 1.5rem;
background-color: rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev .search--active {
background-color: rgb(var(--colour-neutral-2, 245, 245, 245));
border-color: rgb(var(--colour-neutral-5, 146, 146, 146))
}
.lodev .search--filled .search__icon {
transform: translateY(-50%) scale(0);
opacity: 0
}
.lodev .search--filled .search__input {
padding-inline-start:1.5rem;padding-inline-end:2.5rem}
.lodev .search--filled .search__divider {
margin: .75rem 1rem;
opacity: 1
}
.lodev .collapsible {
overflow: hidden;
box-sizing: border-box;
transition: all 200ms cubic-bezier(0.4, 0, 0.4, 1)
}
@media(prefers-reduced-motion) {
.lodev .collapsible {
transition-duration: 0ms
}
}
.lodev .list-view {
padding: 0;
margin: 0
}
.lodev .list-view--small .list-view-item__action,.lodev .list-view--small .list-view-item__default {
min-height: 3rem;
padding-block-start:.5rem;padding-block-end:.5rem}
.lodev .list-view--medium .list-view-item__action,.lodev .list-view--medium .list-view-item__default {
min-height: 4.5rem;
padding-block-start:.75rem;padding-block-end:.75rem}
.lodev .list-view--large .list-view-item__action,.lodev .list-view--large .list-view-item__default {
min-height: 5.5rem;
padding-block-start:1.25rem;padding-block-end:1.25rem}
.lodev .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
}
.lodev .list-view-item__no-divider {
border-bottom: none
}
.lodev .list-view-item__action,.lodev .list-view-item__default {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(0,0,0,0);
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
}
.lodev .list-view-item__action:not(:disabled) {
cursor: pointer
}
.lodev .list-view-item__action:hover .lodev .list-view-item__title {
text-decoration: underline
}
.lodev .list-view-item__wrapper {
display: flex;
flex-grow: 1;
align-items: center
}
.lodev .list-view-item__label-container {
flex-grow: 1;
padding-inline-end:1rem}
.lodev .list-view-item__icon-center,.lodev .list-view-item__icon-top {
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
margin-inline-end:1rem;flex-shrink: 0
}
.lodev .list-view-item__icon-top {
align-self: flex-start
}
.lodev .list-view-item__payment-logo {
margin-inline-end:1rem;flex-shrink: 0
}
.lodev .list-view-item__image {
margin-inline-end:1rem;display: block;
width: 3rem;
inset-inline-start: 1rem;
flex-shrink: 0
}
.lodev .list-view-item__description {
display: block;
color: rgb(var(--colour-text-and-icon-2, 72, 72, 72));
font-size: .875rem;
line-height: 1.5714285714
}
.lodev .list-view-item__title {
display: block;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700;
font-weight: 400
}
.lodev .list-view-item__title--emphasised {
font-weight: 700
}
.lodev .list-view-item__quantity-label {
padding-inline-end:0;color: rgb(var(--colour-text-and-icon-3, 118, 118, 118));
font-size: .875rem;
line-height: 1.5714285714
}
.lodev .list-view-item__quantity-label:not(:last-child) {
padding-inline-end:1rem}
.lodev .list-view-item__addon {
margin-block-start:.25rem;display: block;
font-size: .875rem
}
.lodev .list-view-item:hover .list-view-item__label {
text-decoration: underline
}
.lodev .list-view-item__inset {
padding-inline-start:1.5rem;padding-inline-end:1.5rem}
.lodev .list-view-item__inset .lodev .list-view-item__image {
inset-inline-start: 1rem
}
.lodev .list-view-item--disabled {
pointer-events: none
}
.lodev .list-view-item--disabled .list-view-item__default,.lodev .list-view-item--disabled .list-view-item__action,.lodev .list-view-item--disabled .list-view-item__icon-center,.lodev .list-view-item--disabled .list-view-item__icon-top,.lodev .list-view-item--disabled .list-view-item__title,.lodev .list-view-item--disabled .list-view-item__description,.lodev .list-view-item--disabled .list-view-item__quantity-label {
color: rgb(var(--colour-interactive-disabled-1, 223, 223, 223))
}
.lodev .list-view-item--disabled .list-view-item__image {
opacity: .2
}
.lodev .list-view-item--disabled .list-view-item__payment-logo {
opacity: .4
}
.lodev [dir=rtl] .list-view-item__control-icon {
transform: scaleX(-1)
}
.lodev .list-box {
position: absolute;
display: none;
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)
}
.lodev .list-box .list-view-item:hover,.lodev .list-box .list-view-item__action:focus-within {
background-color: rgba(var(--colour-interactive-primary-bg-default, 17, 17, 17), 0.05)
}
.lodev .list-box--open {
display: flex
}
.lodev .list-box__body {
overflow: auto;
max-height: 18rem;
padding-block:.5rem}
.lodev .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
}
.lodev .list-box__group {
list-style-type: none;
padding: 1rem 1.5rem .5rem 1.5rem;
color: rgb(var(--colour-text-and-icon-1, 17, 17, 17));
font-size: .875rem;
line-height: 1.571;
font-weight: 700
}
.lodev .js-focus-visible :focus:not(.focus-visible) {
outline: none
}
.lodev .js-focus-visible a:focus.focus-visible,.lodev .js-focus-visible button:focus.focus-visible,.lodev .js-focus-visible [role=button]:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible a:focus.focus-visible p {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .link:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .collapsible:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .expander__btn:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .expander__content:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .chunky-header:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .checkbox input[type=checkbox]:focus.focus-visible~.checkbox__symbol {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .checkbox input[type=checkbox]:focus.focus-visible:hover~.checkbox__symbol {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .radio input[type=radio]:focus.focus-visible~.radio__symbol {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .radio input[type=radio]:focus.focus-visible:hover~.radio__symbol {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .btn:focus.focus-visible,.lodev .js-focus-visible .tabs__panel:focus.focus-visible,.lodev .js-focus-visible .scroll-indicator:focus.focus-visible .scroll-indicator__bar {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .scroll-indicator__button:focus.focus-visible {
box-shadow: none
}
.lodev .js-focus-visible [class*=inverse]:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible [class*=image-overlay]:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-white, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-black, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .pill:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .slider-handle:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .shoppable-image__category-link:focus.focus-visible,.lodev .js-focus-visible .shoppable-image__dot:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .tabs__tab:focus[data-focus-visible-added] {
box-shadow: none;
outline: none;
box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17));
border-radius: 4px
}
.lodev .js-focus-visible .tabs__tab:focus[data-focus-visible-added]::after {
bottom: 2px;
z-index: -1
}
.lodev .js-focus-visible .dual-btn--secondary .dual-btn__first:focus.focus-visible,.lodev .js-focus-visible .dual-btn--secondary .dual-btn__second:focus.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
}
.lodev .js-focus-visible .dual-btn__first:focus.focus-visible:hover,.lodev .js-focus-visible .dual-btn__second:focus.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))
}
.lodev .js-focus-visible .dual-btn--primary .dual-btn__first:focus.focus-visible,.lodev .js-focus-visible .dual-btn--primary .dual-btn__second:focus.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
}
.lodev .js-focus-visible .card:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .card:focus.focus-visible .card__title {
text-decoration: none
}
.lodev .js-focus-visible .card:focus.focus-visible p {
box-shadow: none;
outline: none
}
.lodev .js-focus-visible .choice-item__action:focus.focus-visible {
box-shadow: none;
outline: none
}
.lodev .js-focus-visible .choice-item__action:focus.focus-visible+.choice-item__border {
border: 2px solid rgb(var(--colour-neutral-3, 223, 223, 223))
}
.lodev .js-focus-visible .choice-item__action:focus.focus-visible+.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: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out;
border-radius: 4px
}
.lodev .js-focus-visible .choice-item--selected .choice-item__action:focus.focus-visible+.choice-item__border {
border: 2px solid rgb(var(--colour-interactive-emphasised-border-selected, 0, 88, 163))
}
.lodev .js-focus-visible .choice-item--selected.choice-item--subtle .choice-item__action:focus.focus-visible+.choice-item__border {
border: 2px solid rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17))
}
.lodev .js-focus-visible .simple-video__button:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .jumbo-btn:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .jumbo-btn.jumbo-btn--inverse:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-static-black, 17, 17, 17)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-static-white, 255, 255, 255)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .accordion-item-header:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .link-list__item:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .switch input[type=checkbox]:focus.focus-visible+.switch__toggle::before {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .switch input[type=checkbox]:focus.focus-visible:hover+.switch__toggle::before {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .tooltip__custom-trigger-wrapper:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .search .search__scope:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out;
border-radius: 4px
}
.lodev .js-focus-visible .search .search__scope:focus.focus-visible,.lodev .js-focus-visible .search .btn:focus.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
}
.lodev .js-focus-visible .search .search__input:focus.focus-visible {
outline: 0;
box-shadow: none
}
.lodev .js-focus-visible .toast .btn:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .action-list-item__action:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 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))
}
.lodev .js-focus-visible .overflow-carousel [class*=inverse]:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .modal-header .btn:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
.lodev .js-focus-visible .list-view-item__action:focus.focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgb(var(--colour-interactive-subtle-border-selected, 17, 17, 17))
}
.lodev .js-focus-visible .quantity-stepper__input:focus.focus-visible {
outline: none
}
.lodev .js-focus-visible button.avatar:focus.focus-visible {
box-shadow: 0 0 0 4px var(--skapa-focus-ring-internal, rgb(var(--colour-neutral-1, 255, 255, 255)));
outline: 2px solid var(--skapa-focus-ring-external, rgb(var(--colour-neutral-7, 17, 17, 17)));
outline-offset: 4px;
transition: outline 200ms ease-out,box-shadow 200ms ease-out
}
/*customize*/
.lodev input::-webkit-outer-spin-button,
.lodev input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.lodev input[type=number] {
-moz-appearance: textfield;
}