@charset "UTF-8"; @layer reset, defaults, components; @layer reset { /*** The new CSS reset - version 1.9 (last updated 19.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset Forked : https://github.com/marknotton/css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style-type: revert; } /* noscript is handled internally, as it depends on settings. */ html { height: 100%; } body { min-height: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; max-inline-size: 100%; max-block-size: 100%; display: block; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } script, style { display: none !important; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } :where(svg, symbol) { overflow: visible; vertical-align: bottom; } :where(video) { width: 100%; background-color: black; } /* Remove list styles (bullets/numbers) */ :where(ol, ul) { list-style-type: revert; } :where(ol, ul) li { margin-inline-start: 1em; } :where(ol, ul) li :where(ol, ul, li + li) { margin-block-start: 1em; } :where(small, sup, sub) { font-size: x-small; } :where(sup, sub) { vertical-align: revert; } :where(b, strong) { font-weight: bold; } :where(embed) { width: 100%; } :where(iframe) { border: unset; width: 100%; } :where(i, em) { font-style: italic; } :where(s, del) { -webkit-text-decoration: revert; text-decoration: revert; } /* Scroll padding allowance below focused elements to ensure they are clearly in view */ :focus { scroll-padding-block-end: var(--spacer, 2rem); } /* Scroll padding allowance above anchor links */ :target { scroll-padding-block-start: var(--gutter, 2rem); } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } :where(hr) { overflow: revert; margin-inline: revert; border-style: solid; border-width: 1px 0 0 0; } /* When available, balance headings to break evening on each line */ :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } :where(a:-moz-any-link, u) { text-underline-offset: 0.2em; } :where(a:any-link, u) { text-underline-offset: 0.2em; } :where(label) { position: relative; } :is(label input[type=radio], label input[type=checkbox]) { position: absolute; opacity: 0; pointer-events: none; } :where(details > summary) { list-style: none; cursor: pointer; } :where(details > summary)::-webkit-details-marker { display: none; } audio { width: 100%; height: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } :where(p, pre, blockquote, ol, ul, li, legend, figcaption, article, nav, aside, section, header, footer, address):empty { display: none; } } @layer defaults { .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } @property --brand-primary { syntax: ""; inherits: false; initial-value: #ff2871; } @property --brand-secondary { syntax: ""; inherits: false; initial-value: #ff715c; } :root { color-scheme: only light; } body { background-color: var(--theme-page-background); scrollbar-gutter: stable; } body.component\:modal, .js-has-pseudo [csstools-has-2q-33-2s-3d-1m-2w-2p-37-14-31-33-2s-2p-30-19-3b-36-2p-34-34-2t-36-15]:not(does-not-exist):not(does-not-exist) { overflow: hidden; } body.component\:modal, body:has(modal-wrapper) { overflow: hidden; } :where(*) { scroll-margin-top: var(--gutter2); } html { min-height: 100%; height: 100%; font-size: 62.5%; block-size: 100%; inline-size: 100%; } body { width: 100%; min-height: 100%; line-height: 1; min-block-size: 100%; min-inline-size: 100%; font-size: 1.6em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } ol, ul { list-style-position: revert; } ol li, ul li { margin-inline-start: initial; } figure.image { position: relative; border: var(--figure-border, 1px solid var(--figure-border-colour, #E8E8E8)); padding: var(--figure-padding, 0.5em); border-radius: var(--figure-border-radius); background-color: var(--figure-background-colour, white); } figure.image img { position: relative; width: 100%; height: auto; display: block; border-radius: var(--figure-inner-border-radius, calc(var(--figure-border-radius) / 100 * 66)); } figure.image figcaption { text-align: left; margin-top: 0.8em; } figure.image a { display: block; border-radius: inherit; } @media (hover: hover) { figure.image a:after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: var(--figure-border, 1px solid var(--figure-link-colour, #0500CD)); transition: border-color var(--transition, var(--transition-duration, 0.2s) var(--transition-ease, eae-in-out) var(--transition-delay, 0)); } @supports not (inset: 0px) { figure.image a:after { top: -1px; left: -1px; right: -1px; bottom: -1px; } } figure.image a:hover:after { --figure-link-colour: var(--figure-link-colour-hover, #54198B); } } figure.image { --figure-padding: var(--gutter0); --figure-border-radius: var(--border-radius); --figure-inner-border-radius: calc(var(--border-radius) / 2); --figure-border-colour: #F7F7F7; --figure-link-colour: #dddddd; --figure-link-colour-hover: var(--primary, #ff2871); } body[data-theme]:not([data-theme=""]) figure.image { --figure-border-colour: none; } picture.image { display: block; position: relative; background-position: var(--position, center 33%); background-size: cover; background-repeat: no-repeat; overflow: hidden; } picture.image img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--image-position, center 33.33%); object-position: var(--image-position, center 33.33%); width: var(--image-size, var(--image-width-size, 100%)); height: var(--image-size, var(--image-height-size, 100%)); max-width: var(--image-size, var(--image-width-size, 100%)); max-height: var(--image-size, var(--image-height-size, 100%)); inset: 0px; } @supports not (inset: 0px) { picture.image img { top: 0; left: 0; right: 0; bottom: 0; } } .featured-image { display: block; position: relative; background-position: var(--position, center 33%); background-size: cover; background-repeat: no-repeat; overflow: hidden; } .featured-image img { display: block; position: absolute; -o-object-fit: cover; object-fit: cover; -o-object-position: var(--image-position, center 33.33%); object-position: var(--image-position, center 33.33%); width: var(--image-size, var(--image-width-size, 100%)); height: var(--image-size, var(--image-height-size, 100%)); max-width: var(--image-size, var(--image-width-size, 100%)); max-height: var(--image-size, var(--image-height-size, 100%)); inset: 0px; } @supports not (inset: 0px) { .featured-image img { top: 0; left: 0; right: 0; bottom: 0; } } .featured-image { width: 100%; aspect-ratio: 16/9; border-radius: var(--border-radius); overflow: hidden; } video-container { --aspect-ratio: 16/9; aspect-ratio: var(--aspect-ratio); } @supports not (aspect-ratio: 16/9) { video-container { aspect-ratio: initial; } video-container::before { content: ""; float: left; height: 0; padding-top: calc(9 / 16 * 100%); } } video-container { display: block; position: relative; width: 100%; background-color: black; } video-container iframe, video-container canvas, video-container video { position: absolute; display: block; top: 0; left: 0; height: 100% !important; width: 100% !important; } video-container { border-radius: var(--border-radius); overflow: hidden; } video-container iframe ~ button.poster { opacity: 0; pointer-events: none; } video-container button.poster { position: absolute; inset: 0; width: 100%; display: flex; place-items: center; place-content: center; transition: opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1); width: 100%; margin-block-start: 0; } video-container button.poster picture.image { position: absolute; inset: 0; } video-container button.poster .button { border-radius: 50%; aspect-ratio: 1; height: 80px; width: 80px; } video-container button.poster .button .symbol { width: 90%; height: 90%; transform: translateX(0.2rem); } button-container, .social-links { position: relative; display: flex; flex-wrap: wrap; gap: var(--gutter0); } .blowout { grid-column: 1/-1; padding-left: max(var(--gutter1), var(--negative-single-gutter-width)); padding-right: max(var(--gutter1), var(--negative-single-gutter-width)); } @supports not (width: max(1px, 5px)) { .blowout { padding-left: var(--negative-single-gutter-width); padding-right: var(--negative-single-gutter-width); } } progress { pointer-events: none; opacity: 0; position: relative; transition: opacity var(--transition); -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 0.5em; background: white; } progress[value] { opacity: 1; } progress::-webkit-progress-bar { background-color: #eee; border-radius: 4ch; border: 1px solid #dddddd; } progress::-webkit-progress-value { background-color: #ff2871; border-radius: 4ch; } progress::after { content: attr(value) "/" attr(max); transform: translateY(-50%); font-size: 0.8em; } dl { display: flex; flex-direction: column; } dl dt { font-weight: 700; } dl dd + dt { margin-block-start: 1em; } :where(.rich-text, .rich-text > div) :where(* + *) { margin-block-start: 1em; } :where(.rich-text, .rich-text > div) strong { font-weight: bold; } :where(.rich-text, .rich-text > div) em { font-style: italic; } :where(.rich-text, .rich-text > div) ul { list-style-position: outside; padding-inline-start: 2ch; } :where(.rich-text, .rich-text > div) ul:where(ul, ol) { margin-block-start: 1em; } :where(.rich-text, .rich-text > div) ul li span { margin-block-start: initial; } :where(.rich-text, .rich-text > div) ul li + li { margin-block-start: 0.4em; } :where(.rich-text, .rich-text > div) ul li::marker { color: var(--list-style-colour, var(--primary, #ff2871)); } :where(.rich-text, .rich-text > div) p { text-wrap: pretty; } :where(.rich-text, .rich-text > div) a:not(.button) { --link-colour:var(--primary, #ff2871); --link-hover-colour: #0F72C0; text-decoration: underline; text-underline-offset: 0.2em; } :where(.rich-text, .rich-text > div) ol { list-style-position: outside; padding-inline-start: 2ch; list-style-type: revert; } :where(.rich-text, .rich-text > div) ol:where(ul, ol) { margin-block-start: 1em; } :where(.rich-text, .rich-text > div) ol li span { margin-block-start: initial; } :where(.rich-text, .rich-text > div) ol li + li { margin-block-start: 0.4em; } :where(.rich-text, .rich-text > div) ol li::marker { color: var(--list-style-colour, var(--primary, #ff2871)); font-size: 0.9em; } :where(.rich-text, .rich-text > div) ol > li ol { list-style-type: lower-alpha; } :where(.rich-text, .rich-text > div) ol > li ol > li ol { list-style-type: lower-roman; } .js-has-pseudo :where(.rich-text, .rich-text > div) .table:not([csstools-has-1m-2w-2p-37-14-38-2w-2t-2p-2s-15]:not(does-not-exist)) { outline: 1px solid #dddddd; border-radius: calc(var(--border-radius) / 2); margin-block: 2em; } :where(.rich-text, .rich-text > div) .table:not(:has(thead)) { outline: 1px solid #dddddd; border-radius: calc(var(--border-radius) / 2); margin-block: 2em; } .js-has-pseudo :where(.rich-text, .rich-text > div) .table:not([csstools-has-1m-2w-2p-37-14-38-2w-2t-2p-2s-15]:not(does-not-exist)), .js-has-pseudo :where(.rich-text, .rich-text > div) .table:not([csstools-has-1m-2w-2p-37-14-38-2w-2t-2p-2s-15]:not(does-not-exist)) th, .js-has-pseudo :where(.rich-text, .rich-text > div) .table:not([csstools-has-1m-2w-2p-37-14-38-2w-2t-2p-2s-15]:not(does-not-exist)) td { border: 1px solid #dddddd; border-collapse: collapse; } :where(.rich-text, .rich-text > div) .table:not(:has(thead)), :where(.rich-text, .rich-text > div) .table:not(:has(thead)) th, :where(.rich-text, .rich-text > div) .table:not(:has(thead)) td { border: 1px solid #dddddd; border-collapse: collapse; } :where(.rich-text, .rich-text > div) .input[disabled] { --input-font-colour: #c2c2c2; } :where(.rich-text, .rich-text > div).is-autogrow [contenteditable=true] { white-space: nowrap; width: -moz-fit-content; width: fit-content; max-width: 100%; min-width: 1ch; overflow: hidden; color: var(--input-font-colour); } :where(.rich-text, .rich-text > div).is-autogrow [contenteditable=true]:focus { outline: none; } :where(.rich-text, .rich-text > div).is-autogrow [contenteditable=true] br { display: none; } :where(.rich-text, .rich-text > div).is-autogrow [contenteditable=true] * { display: inline; white-space: nowrap; } button { color: var(--font-colour, #666666); cursor: pointer; } pre { --code-background-colour: #EDF1F3; } .animate\:shake { animation: shake-animation 0.5s ease 0s 1 normal forwards; } @keyframes shake-animation { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } login-otp { width: 100%; display: flex; flex-direction: column; gap: var(--gap); } login-otp .verify-code { display: flex; flex-direction: column; gap: var(--gap); } login-otp .verify-code p { font-size: 0.8em; } details > summary { outline: none; } [hidden], template { display: none !important; } .sr-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } :where(.button) { --font-colour: white; --background-colour: #ff2871; --background-gradient: #ff715c; --border-colour: transparent; --hover-font-colour: var(--background-colour, #ff2871); --hover-background-colour: white; --hover-border-colour: var(--background-colour, #ff2871); color: var(--font-colour); background-color: var(--background-colour); border-color: var(--border-colour); cursor: pointer; display: grid; grid-auto-flow: column; padding: var(--button-padding-block, 0.4em) var(--button-padding-inline, 1.1em); grid-gap: 0.5em; font-size: var(--font-size, inherit); position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-style: solid; border-width: 1px; word-break: break-all; font-weight: 600; text-decoration: none; white-space: nowrap; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; place-content: center; place-items: center; border-radius: 4ch; will-change: background-position, color, border, background-colour, transform; transition: var(--transition), transform cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; } :where(.button)[hidden] { display: none; } :where(.button).small { --button-padding-block: 0.3em; --button-padding-inline: 0.9em; --font-size: 0.8em; } :where(.button).large { --font-size: 1.3em; } :where(.button):not(.inverted):not([disabled]):not(.white):not(.filled) { background-image: linear-gradient(90deg, var(--background-gradient), var(--background-gradient-end, rgba(255, 113, 92, 0)) 33%); background-size: 200% 100%; background-position: -1px 0; background-repeat: repeat-y; } :where(.button):active { transform: scale(0.95); } :where(.button):active svg.arrow-left, :where(.button):active svg.arrow-right { animation-play-state: paused !important; } :where(.button):not([data-counter])::after { --button-flash-size: 1.4em; content: ""; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; border: 1px solid transparent; opacity: 1; transition: opacity 0.4s cubic-bezier(0, 0, 0.58, 1); } :where(.button):not([data-counter]).pulse::after { border-width: 3px; } @media (hover: hover) { :where(.button):not([data-counter]):hover::after { transition: all 0.5s cubic-bezier(0, 0, 0.58, 1); border-color: var(--background-colour, #ff2871); width: calc(100% + var(--button-flash-size)); height: calc(100% + var(--button-flash-size)); top: calc(-1 * var(--button-flash-size) / 2); left: calc(-1 * var(--button-flash-size) / 2); opacity: 0; } } :where(.button):not([data-counter]).pulse::after { transition: all 0.5s cubic-bezier(0, 0, 0.58, 1); border-color: var(--background-colour, #ff2871); width: calc(100% + var(--button-flash-size)); height: calc(100% + var(--button-flash-size)); top: calc(-1 * var(--button-flash-size) / 2); left: calc(-1 * var(--button-flash-size) / 2); opacity: 0; } :where(.button) svg { min-width: var(--icon-width, var(--icon-size, 1em)); min-height: var(--icon-height, var(--icon-size, 1em)); width: var(--icon-width, var(--icon-size, 1em)); height: var(--icon-height, var(--icon-size, 1em)); transition: fill var(--transition), stroke var(--transition); pointer-events: none; order: 2; } :where(.button) svg[data-tooltip] { pointer-events: all; } :where(.button) svg.arrow-right, :where(.button) svg.arrow-left { --icon-width: 0.5em; --icon-height: 0.8em; } :where(.button) svg.arrow-left { grid-column: 1; --arrow-wiggle-x: -0.2em; } :where(.button) svg.arrow-right { grid-column: 2; --arrow-wiggle-x: 0.2em; } @keyframes arrow-wiggle { 0% { transform: translateX(0); } 100% { transform: translateX(var(--arrow-wiggle-x)); } } :where(.button):not(.icon-native) svg:not([data-volume=symbols]) { --symbol-colour: currentColor; --icon-colour: currentColor; } :where(.button).icon-left svg { grid-column: 1; } :where(.button).icon-right svg { grid-column: 2; } :where(.button).blue { --background-colour: #0F72C0; --background-gradient: #04A5E5; --background-gradient-end: rgba(4, 165, 229, 0); } :where(.button).blue.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).green { --background-colour: #176D7D; --background-gradient: #0C9B9A; --background-gradient-end: rgba(12, 155, 154, 0); } :where(.button).green.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).green2 { --background-colour: #21B755; --background-gradient: #21B755; --background-gradient-end: rgba(33, 183, 85, 0); } :where(.button).green2.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).yellow { --background-colour: #FE9900; --background-gradient: #FDC705; --background-gradient-end: rgba(253, 199, 5, 0); } :where(.button).yellow.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).grey { --background-colour: #787878; --background-gradient: #5f5f5f; --background-gradient-end: rgba(95, 95, 95, 0); } :where(.button).grey.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).red { --background-colour: #C90023; --background-gradient: #cb3d00; --background-gradient-end: rgba(203, 61, 0, 0); } :where(.button).red.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).black { --background-colour: #333333; --background-gradient: #454646; --background-gradient-end: rgba(69, 70, 70, 0); } :where(.button).black.loading.inverted loading-bar svg circle.ring { --loading-bar-stroke-colour: var(--background-gradient); } :where(.button).themed { --font-colour: var(--font-colour, #666666); --background-colour: var(--theme-primary); --border-colour: var(--theme-primary); --hover-font-colour: #FFFFFF; --hover-background-colour: var(--theme-primary); --hover-border-colour: var(--theme-primary); } :where(.button).inverted { background-color: transparent; background-image: initial; --font-colour: var(--background-colour, #ff2871); --border-colour: var(--background-colour, #ff2871); --hover-font-colour: #FFFFFF; --hover-background-colour: var(--background-colour, #ff2871); } :where(.button).white { --font-colour: var(--font-colour, #666666); --background-colour: #FFFFFF; --border-colour: #dddddd; --hover-font-colour: #FFFFFF; --hover-background-colour: #ff2871; --hover-border-colour: #ff2871; } :where(.button).white.blue { --hover-border-colour: #0F72C0; --hover-background-colour: #0F72C0; } :where(.button).white.green { --hover-border-colour: #176D7D; --hover-background-colour: #176D7D; } :where(.button).white.green2 { --hover-border-colour: #21B755; --hover-background-colour: #21B755; } :where(.button).white.yellow { --hover-border-colour: #FE9900; --hover-background-colour: #FE9900; } :where(.button).white.grey { --hover-border-colour: #787878; --hover-background-colour: #787878; } :where(.button).white.red { --hover-border-colour: #C90023; --hover-background-colour: #C90023; } :where(.button).white.black { --hover-border-colour: #333333; --hover-background-colour: #333333; } :where(.button).solid-background:not(:hover) { background-color: white; } :where(.button).loading { pointer-events: none; } :where(.button).loading loading-bar { order: 2; --loading-bar-size: 1em; --icon-size: 0.8em; } :where(.button).loading:not(.inverted):not(.white) loading-bar svg circle.background { --loading-bar-background-stroke-colour: #dddddd; } :where(.button).loading:not(.inverted):not(.white) loading-bar svg circle.ring { --loading-bar-stroke-colour: #ff2871; } :where(.button).loading > svg.symbol { display: none; } :where(.button).loading > svg.arrow-left ~ loading-bar { order: 0; } :where(.button).loading:not(.white)::before { --preloader-border-colour: rgba(255, 255, 255, 0.4); --preloader-colour: white; } :where(.button):focus { outline: none; border-color: #ff2871 !important; } :where(.button):focus::after { transition: all 0.5s cubic-bezier(0, 0, 0.58, 1); border-color: var(--background-colour, #ff2871); width: calc(100% + var(--button-flash-size)); height: calc(100% + var(--button-flash-size)); top: calc(-1 * var(--button-flash-size) / 2); left: calc(-1 * var(--button-flash-size) / 2); opacity: 0; } :where(.button).white.facebook { --symbol-colour: #4267B2; } :where(.button).white.twitter { --symbol-colour: #1da1f2; } :where(.button):not(.white).google { --symbol-colour: currentColor; } :where(.button).white.youtube { --symbol-colour: #ff0000; } :where(.button).white.linkedin { --symbol-colour: #007bb5; } :where(.button).white.instagram { --symbol-colour: #c32aa3; } :where(.button).white.pinterest { --symbol-colour: #bd081c; } :where(.button).white.dailymotion { --symbol-colour: #0066DC; } :where(.button).white.snapchat { --symbol-colour: #fffc00; } :where(.button).white.flickr { --symbol-colour: #f40083; } :where(.button).white.vimeo { --symbol-colour: #1ab7ea; } :where(.button).white.tumbler { --symbol-colour: #35465d; } :where(.button).white.reddit { --symbol-colour: #ff4500; } :where(.button).white.whatsapp { --symbol-colour: #25d366; } :where(.button).white.skype { --symbol-colour: #00aff0; } :where(.button).white.discord { --symbol-colour: #7289da; } :where(.button).white.yello { --symbol-colour: #FFCB08; } form:invalid:not(.always-valid) [type=submit], :where(.button).disabled, :where(.button)[disabled] { pointer-events: none; cursor: not-allowed; opacity: 0.2; } .dark :where(.button) { --hover-border-colour: transparent; } .dark :where(.button).white { --hover-border-colour: transparent; } .dark :where(.button).white:not(.inverted) { --border-colour: transparent; --background-colour: #FFFFFF; --font-colour: #333333; } .dark :where(.button).white.inverted { --border-colour: #FFFFFF; --hover-font-colour: #ff2871; --hover-border-colour: transparent; --hover-background-colour: #FFFFFF; } .dark :where(.button).white[disabled] { --background-colour: #787878; } .dark :where(.button)::after { --background-colour: rgba(255, 255, 255, 0.7); } @media (hover: hover) { :where(.button):hover { color: var(--hover-font-colour); background-color: var(--hover-background-colour); border-color: var(--hover-border-colour); background-position: 100% 0 !important; } :where(.button):hover.facebook { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #4267B2; --hover-border-colour: #4267B2; } :where(.button):hover.twitter { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #1da1f2; --hover-border-colour: #1da1f2; } :where(.button):hover.google { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #E34033; --hover-border-colour: #E34033; } :where(.button):hover.youtube { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #ff0000; --hover-border-colour: #ff0000; } :where(.button):hover.linkedin { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #007bb5; --hover-border-colour: #007bb5; } :where(.button):hover.instagram { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #c32aa3; --hover-border-colour: #c32aa3; } :where(.button):hover.pinterest { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #bd081c; --hover-border-colour: #bd081c; } :where(.button):hover.dailymotion { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #0066DC; --hover-border-colour: #0066DC; } :where(.button):hover.snapchat { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #fffc00; --hover-border-colour: #fffc00; } :where(.button):hover.flickr { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #f40083; --hover-border-colour: #f40083; } :where(.button):hover.vimeo { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #1ab7ea; --hover-border-colour: #1ab7ea; } :where(.button):hover.tumbler { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #35465d; --hover-border-colour: #35465d; } :where(.button):hover.reddit { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #ff4500; --hover-border-colour: #ff4500; } :where(.button):hover.whatsapp { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #25d366; --hover-border-colour: #25d366; } :where(.button):hover.skype { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #00aff0; --hover-border-colour: #00aff0; } :where(.button):hover.discord { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #7289da; --hover-border-colour: #7289da; } :where(.button):hover.yello { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #FFCB08; --hover-border-colour: #FFCB08; } } :where(.button):focus { color: var(--hover-font-colour); background-color: var(--hover-background-colour); border-color: var(--hover-border-colour); background-position: 100% 0 !important; } :where(.button):focus.facebook { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #4267B2; --hover-border-colour: #4267B2; } :where(.button):focus.twitter { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #1da1f2; --hover-border-colour: #1da1f2; } :where(.button):focus.google { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #E34033; --hover-border-colour: #E34033; } :where(.button):focus.youtube { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #ff0000; --hover-border-colour: #ff0000; } :where(.button):focus.linkedin { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #007bb5; --hover-border-colour: #007bb5; } :where(.button):focus.instagram { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #c32aa3; --hover-border-colour: #c32aa3; } :where(.button):focus.pinterest { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #bd081c; --hover-border-colour: #bd081c; } :where(.button):focus.dailymotion { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #0066DC; --hover-border-colour: #0066DC; } :where(.button):focus.snapchat { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #fffc00; --hover-border-colour: #fffc00; } :where(.button):focus.flickr { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #f40083; --hover-border-colour: #f40083; } :where(.button):focus.vimeo { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #1ab7ea; --hover-border-colour: #1ab7ea; } :where(.button):focus.tumbler { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #35465d; --hover-border-colour: #35465d; } :where(.button):focus.reddit { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #ff4500; --hover-border-colour: #ff4500; } :where(.button):focus.whatsapp { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #25d366; --hover-border-colour: #25d366; } :where(.button):focus.skype { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #00aff0; --hover-border-colour: #00aff0; } :where(.button):focus.discord { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #7289da; --hover-border-colour: #7289da; } :where(.button):focus.yello { --symbol-colour: currentColor; --hover-font-colour: #FFFFFF; --hover-background-colour: #FFCB08; --hover-border-colour: #FFCB08; } .buttons-container { position: relative; display: flex; flex-wrap: wrap; gap: var(--gutter0); } .input { -webkit-appearance: none; border-radius: var(--input-border-radius, calc(var(--border-radius) / 2)); background-color: var(--input-background-colour, white); border: var(--input-border-colour, #dddddd) solid var(--input-border-size, 1px); padding: var(--input-padding-block, var(--input-padding, 0.6em)) var(--input-padding-inline, var(--input-padding, 1.3em)); color: var(--input-font-colour, var(--font-colour)); transition: border-color var(--transition), border-radius var(--transition); text-align: left; } .input::-moz-placeholder { color: var(--input-placeholder-colour, #c2c2c2); -moz-transition: color var(--transition); transition: color var(--transition); } .input::placeholder { color: var(--input-placeholder-colour, #c2c2c2); transition: color var(--transition); } .input:focus::-moz-placeholder { color: transparent; } .input:focus::placeholder { color: transparent; } .input::-webkit-calendar-picker-indicator { opacity: 0; position: relative; background-image: none; border-radius: calc(calc(var(--border-radius) / 2) / 2); right: calc(var(--icon-width, var(--icon-size, 1em)) - var(--input-padding-inline) / 2 + 0.25em); width: calc(var(--icon-width, var(--icon-size, 1em)) * 1.3); height: calc(var(--icon-height, var(--icon-size, 1em)) * 1.3); transform: translateX(calc(100% + var(--icon-width, var(--icon-size, 1em)))); cursor: pointer; outline: var(--input-border, var(--input-border-colour, #dddddd) solid var(--input-border-size, 1px)); -webkit-transition: opacity var(--transition); transition: opacity var(--transition); } .input::-webkit-calendar-picker-indicator:focus { opacity: 1; outline-color: var(--input-theme); } .input[readonly] { pointer-events: none; color: #c2c2c2; background-color: #EDF1F3; font-style: italic; } input-field { --input-padding-block: 0.6em; --input-padding-inline: 1.3em; --input-background-colour: white; --input-theme: #ff2871; --inputs-field-row: 1; --inputs-label-row: initial; --inputs-errors-row: initial; --inputs-prepend-row: initial; --inputs-append-row: initial; display: grid; grid-gap: calc(var(--gap) * 0.5); align-content: start; position: relative; } input-field:not([class*=grid]) > * { grid-column: 1/-1; } input-field[class*=grid] { grid-gap: calc(var(--gap) * 0.5); } input-field label { font-size: 0.8em; font-weight: 700; grid-row: var(--inputs-label-row); grid-column: 1/-1; } input-field label button[is=tool-tip] { margin-left: 0.5ch; } input-field.has-fallback-required label button[is=tool-tip] { margin-left: 0.5ch; } input-field.has-fallback-required label button[is=tool-tip] tool-tip-symbol { background-color: initial; } input-field.has-fallback-required label button[is=tool-tip] tool-tip-symbol svg { fill: #FE9900; width: 0.8em; height: 0.8em; } input-field .input, input-field input-symbol, input-field .input-autogrow, input-field font-picker { grid-row: var(--inputs-field-row); border-radius: var(--input-border-radius, calc(var(--border-radius) / 2)); } input-field .input:not(textarea):not(font-picker), input-field input-symbol:not(textarea):not(font-picker), input-field .input-autogrow:not(textarea):not(font-picker), input-field font-picker:not(textarea):not(font-picker) { border-radius: var(--input-border-radius, 4ch); } input-field.has-prepend { --inputs-field-row: 2; --inputs-prepend-row: 1; } input-field.has-label { --inputs-field-row: 2; --inputs-label-row: 1; } input-field.has-label.has-prepend { --inputs-field-row: 3; --inputs-prepend-row: 2; } input-field .prepend { grid-row: var(--inputs-prepend-row); } input-field .append { grid-row: var(--inputs-append-row); } input-field .errors { grid-row: var(--inputs-errors-row); } input-field .input-autogrow { display: grid; width: 100%; } input-field .input-autogrow::after { content: attr(data-replicated-value) " "; visibility: hidden; padding: inherit; font: inherit; pointer-events: none; padding: var(--input-padding-block, 0.6em) var(--input-padding-inline, 1.3em); } input-field .input-autogrow .input { grid-row: 1; width: inherit; } input-field .input-autogrow .input:-moz-placeholder { overflow: hidden; } input-field .input-autogrow .input:placeholder-shown { overflow: hidden; } input-field .input-autogrow .input, input-field .input-autogrow::after { grid-area: 1/1/2/2 !important; } input-field input-symbol { justify-self: flex-end; align-self: center; display: grid; place-items: center; place-content: center; font-weight: 700; margin: var(--input-padding-block) var(--input-padding-inline); width: var(--icon-width, var(--icon-size, 1em)); height: var(--icon-height, var(--icon-size, 1em)); color: #666666; transition: fill var(--transition), stroke var(--transition), color var(--transition); } input-field input-symbol:not([onclick], [role=button]) { pointer-events: none; } input-field input-symbol > * { grid-row: 1; grid-column: 1; } input-field input-symbol svg { width: inherit; height: inherit; } input-field input-symbol.interactive { position: relative; cursor: pointer; pointer-events: all; } input-field input-symbol.interactive::before { content: ""; position: absolute; display: block; width: 2.2em; height: 2.2em; border-radius: 50%; background: linear-gradient(var(--gradient-angle, 270deg), #ff2871 var(--gradient-offset, 33%), #ff715c); opacity: 0; transition: opacity var(--transition); z-index: 0; } @media (hover: hover) { input-field input-symbol.interactive:hover { color: #FFFFFF !important; } input-field input-symbol.interactive:hover::before { opacity: 1; } } input-field input-symbol.interactive svg { z-index: 1; } input-field .input { background-color: var(--input-background-colour); width: 100%; text-align: left; } input-field .input:focus { --input-border-colour: var(--input-theme); } input-field .input:focus ~ input-symbol { color: var(--input-theme); } .dark input-field.is-autogrow span.input { --input-font-colour: white; } input-field.is-autogrow span.input { font-size: inherit; } input-field.has-symbol .input { padding-right: calc(var(--input-padding-inline) * 1.5 + var(--icon-width, var(--icon-size, 1em))); } input-field.has-errors { --input-border-colour: #C90023; } input-field ul.errors { list-style: none; } input-field ul.errors li { font-size: 0.8em; color: #C90023; } input-field ul.errors li a { text-decoration: underline; color: inherit; } @media (hover: hover) { input-field ul.errors li a:hover { color: #0F72C0; } } input-field ul.errors li::marker { display: none; } input-field[type=file] { border: 1px dashed var(--input-theme); padding: var(--gutter1); place-items: center; place-content: center; border-radius: calc(var(--border-radius) / 2); position: relative; display: flex; } input-field[type=file] [type=file] { display: none; } input-field[type=file]:before { content: ""; width: calc(100% - var(--gutter0)); height: calc(100% - var(--gutter0)); top: calc(var(--gutter0) / 2); left: calc(var(--gutter0) / 2); position: absolute; border-radius: inherit; opacity: 0; background: var(--theme-background-bar); transition: opacity var(--transition); } input-field[type=file] .prepend { position: relative; transition: color var(--transition); font-size: 0.8em; } input-field[type=file] label { position: relative; } input-field[type=file] label.browse { opacity: 1; pointer-events: all; cursor: pointer; margin-left: 0.5em; } input-field[type=file].highlight { color: white; } input-field[type=file].highlight::before { opacity: 1; } input-field[type=file].highlight[pending-files]::after { color: white; } input-field[type=file].highlight label.browse { color: var(--hover-font-colour); background-color: var(--hover-background-colour); border-color: var(--hover-border-colour); background-position: 100% 0 !important; } input-field[type=file].uploading progress { opacity: 1; } input-field[type=file].uploading label, input-field[type=file].uploading .prepend, input-field[type=file].uploading .append { opacity: 0; pointer-events: none; } input-field[type=file] progress { pointer-events: none; opacity: 0; transition: opacity var(--transition); -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; height: 0.5em; background: white; } input-field[type=file] progress[value] { opacity: 1; } input-field[type=file] progress::-webkit-progress-bar { background-color: #eee; border-radius: 4ch; border: 1px solid #dddddd; } input-field[type=file] progress::-webkit-progress-value { background-color: #ff2871; border-radius: 4ch; } input-field[type=file] progress::after { content: attr(value); position: absolute; left: calc(100% + var(--gutter0)); top: 50%; transform: translateY(-50%); font-size: 0.8em; } input-field[type=password] [type=text] ~ input-symbol:nth-of-type(1) { opacity: 1; } input-field[type=password] [type=text] ~ input-symbol:nth-of-type(2) { opacity: 0; } input-field[type=password] [type=password] ~ input-symbol:nth-of-type(1) { opacity: 0; } input-field[type=password] [type=password] ~ input-symbol:nth-of-type(2) { opacity: 1; } @media (hover: hover) { input-field[type=password] input-symbol.interactive:hover { color: var(--primary, #ff2871) !important; } } input-field[type=password] input-symbol.interactive:before { content: initial; } input-field[type=password].has\:password-strength.strength\:weak password-strength { --strength-theme: #C90023; } input-field[type=password].has\:password-strength.strength\:weak password-strength::after { content: "weak password"; } input-field[type=password].has\:password-strength.strength\:ok password-strength { --strength-theme: #FE9900; } input-field[type=password].has\:password-strength.strength\:ok password-strength::after { content: "ok password"; } input-field[type=password].has\:password-strength.strength\:strong password-strength { --strength-theme: #21B755; } input-field[type=password].has\:password-strength.strength\:strong password-strength::after { content: "strong password"; } input-field[type=password].has\:password-strength password-strength { pointer-events: none; grid-row: 2; grid-column: 1/-1; border-radius: var(--input-border-radius, 4ch); position: relative; display: flex; overflow: hidden; transition: opacity var(--transition); } input-field[type=password].has\:password-strength password-strength::before { transition: background-color var(--transition); content: ""; height: 3px; width: 100%; position: relative; background-color: var(--strength-theme); align-self: flex-end; } input-field[type=password].has\:password-strength password-strength::after { position: absolute; top: 50%; text-transform: capitalize; font-size: 0.7em; right: 4.8em; color: rgba(0, 0, 0, 0.5); transform: translateY(-50%); } input-field[type=password].is\:empty password-strength { opacity: 0; } input-field[type=datalist] select { width: 100%; } input-field[type=datalist] select option.placeholder { display: none; } @media (hover: hover) { input-field[type=datalist] select:hover { cursor: pointer; } input-field[type=datalist] select:hover ~ input-symbol { color: var(--input-theme); } } input-field[type=datalist] datalist { border: var(--input-border); border-radius: var(--input-border-radius); -webkit-appearance: none; } input-field[type=datalist] .input::-webkit-calendar-picker-indicator { display: none; } input-field[type=select] select { width: 100%; } input-field[type=select] select option.placeholder { display: none; } @media (hover: hover) { input-field[type=select] select:hover { cursor: pointer; } input-field[type=select] select:hover ~ input-symbol { color: var(--input-theme); } } input-field[type=date] .input { min-height: 3em; } input-field[type=date] .input::-webkit-date-and-time-value { text-align: left; } input-field[type=textarea].is-autogrow input-autogrow { max-height: var(--textarea-max-height, 20ch); } input-field[type=textarea].is-autogrow input-autogrow::after { white-space: pre-wrap; } input-field[type=textarea].is-autogrow input-autogrow textarea { resize: none; max-height: inherit; overflow: auto; } input-field[type=range] { --range-track-height: 8px; --range-track-colour: #dddddd; --range-thumb-border-width: 4px; --range-thumb-border-colour: white; --range-thumb-size: calc(2em - (var(--range-thumb-border-width) * 2)); --range-thumb-colour: var(--input-theme); } input-field[type=range] [type=range] { -webkit-appearance: none; background: transparent; margin: calc(var(--range-thumb-size) / 2) 0; } input-field[type=range] [type=range]::-moz-focus-outer { border: 0; } input-field[type=range] [type=range]:focus { outline: 0; } input-field[type=range] [type=range]::-webkit-slider-runnable-track { height: var(--range-track-height); background: var(--range-track-colour); border-radius: 2ch; cursor: pointer; } input-field[type=range] [type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: var(--range-thumb-colour); border: calc(var(--range-thumb-border-width) - 1px) solid var(--range-thumb-border-colour); outline: 1px solid var(--input-border-colour); border-radius: 50%; box-sizing: border-box; cursor: grab; height: var(--range-thumb-size); width: var(--range-thumb-size); margin-top: calc(-1 * var(--range-thumb-size) / 2 + var(--range-thumb-border-width)); -webkit-transition: background-color var(--transition), transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: background-color var(--transition), transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } input-field[type=range] [type=range]::-webkit-slider-thumb:hover { --range-thumb-colour: #ff715c; transform: scale(1.2); } input-field[type=range] [type=range]::-moz-range-track { background-color: var(--range-track-colour); border-radius: 2ch; cursor: pointer; height: var(--range-track-height); } input-field[type=range] [type=range]::-moz-range-thumb { background-color: var(--range-thumb-colour); border: var(--range-thumb-border-width) solid var(--range-thumb-border-colour); border-radius: 50%; cursor: grab; height: calc(var(--range-thumb-size) - var(--range-thumb-border-width)); width: calc(var(--range-thumb-size) - var(--range-thumb-border-width)); -moz-transition: background-color var(--transition); transition: background-color var(--transition); } input-field[type=range] [type=range]::-moz-range-thumb:hover { --range-thumb-colour: #ff715c; } input-field[type=lightswitch] { --lightswitch-on-background-colour: #21B755; --lightswitch-off-background-colour: #FFFFFF; --lightswitch-off-symbol-colour: var(--lightswitch-border-colour); --lightswitch-on-symbol-colour: var(--lightswitch-border-colour); --lightswitch-height: 2em; --lightswitch-width: 3.5em; --lightswitch-border-radius: 8ch; --lightswitch-border-colour: #dddddd; --lightswitch-border-width: 1px; --lightswitch-padding: 3px; --lightswitch-label-color: inherit; --lightswitch-toggle-on-colour: #FFFFFF; --lightswitch-toggle-border-radius: var(--lightswitch-border-radius); --lightswitch-toggle-off-colour: #dddddd; --lightswitch-toggle-width: calc(var(--lightswitch-height) - (var(--lightswitch-border-width) + var(--lightswitch-padding)) * 2); --lightswitch-toggle-height: var(--lightswitch-toggle-width); --lightswitch-toggle-x: calc(var(--lightswitch-width) - var(--lightswitch-toggle-height) - (var(--lightswitch-border-width) + var(--lightswitch-padding)) * 2); } input-field[type=lightswitch].inline { align-items: initial; display: flex; align-items: flex-start; } input-field[type=lightswitch].inline label { font-weight: inherit; } input-field[type=lightswitch] light-switch off-label, input-field[type=lightswitch] light-switch on-label, input-field[type=lightswitch].inline label { cursor: pointer; transition: color var(--transition); color: var(--lightswitch-label-color); -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (hover: hover) { input-field[type=lightswitch] light-switch off-label:hover, input-field[type=lightswitch] light-switch on-label:hover, input-field[type=lightswitch].inline label:hover { --lightswitch-label-color: #ff2871; } } input-field[type=lightswitch] light-switch { display: grid; align-items: center; gap: 1ch; grid-auto-flow: column; justify-content: flex-start; } input-field[type=lightswitch] light-switch .capsule { display: grid; font-size: 0.8em; grid-auto-flow: column; justify-content: space-between; grid-auto-columns: var(--lightswitch-toggle-width); align-items: center; background-color: var(--lightswitch-off-background-colour); border-radius: var(--lightswitch-border-radius); padding: var(--lightswitch-padding); width: var(--lightswitch-width); height: var(--lightswitch-height); border: var(--lightswitch-border-colour) solid var(--lightswitch-border-width); transition: background-color var(--transition), border-color var(--transition); cursor: pointer; } @media (hover: hover) { input-field[type=lightswitch] light-switch .capsule:hover { --lightswitch-toggle-colour: #FE9900; } } input-field[type=lightswitch] light-switch .capsule input-symbol { margin: 0; grid-row: 1; width: 100%; height: 100%; } input-field[type=lightswitch] light-switch .capsule input-symbol.off { grid-column: 1; color: var(--lightswitch-off-symbol-colour); } input-field[type=lightswitch] light-switch .capsule input-symbol.on { grid-column: 2; color: var(--lightswitch-on-symbol-colour); } input-field[type=lightswitch] light-switch .toggle { display: block; grid-row: 1; grid-column: 1; background-color: var(--lightswitch-toggle-colour, var(--lightswitch-toggle-off-colour)); width: var(--lightswitch-toggle-width); height: var(--lightswitch-toggle-height); aspect-ratio: 1/1; border-radius: var(--lightswitch-toggle-border-radius); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color var(--transition); } input-field[type=lightswitch] input { display: none; } @media (hover: hover) { input-field[type=lightswitch] input ~ light-switch:hover ~ label { -webkit-user-select: none; -moz-user-select: none; user-select: none; } } input-field[type=lightswitch] input[value="1"] ~ light-switch .toggle { transform: translateX(var(--lightswitch-toggle-x)); } input-field[type=lightswitch] input:not([disabled])[value="1"] ~ light-switch .capsule { --lightswitch-off-background-colour: var(--lightswitch-on-background-colour); --lightswitch-border-colour: transparent; --lightswitch-off-symbol-colour: white; --lightswitch-toggle-off-colour: var(--lightswitch-toggle-on-colour); } input-field[type=lightswitch] input:indeterminate ~ light-switch input-symbol { opacity: 0; } input-field[type=lightswitch] input:indeterminate ~ light-switch .toggle { transform: translateX(calc(var(--lightswitch-toggle-x) / 2)); border: var(--lightswitch-border-colour) solid var(--lightswitch-border-width); background-color: var(--lightswitch-off-background-colour); } @media (hover: hover) { input-field[type=lightswitch] input:not([value="1"]) ~ light-switch:hover .capsule { --lightswitch-border-colour: #c2c2c2; --lightswitch-toggle-off-colour: #c2c2c2; --lightswitch-on-symbol-colour: #c2c2c2; } } input-field[type=lightswitch] input[disabled] ~ light-switch { cursor: not-allowed; } input-field[type=lightswitch] input[disabled] ~ light-switch .capsule { opacity: 0.4; cursor: inherit; pointer-events: none; } input-field[type=lightswitch] input[disabled] ~ light-switch .toggle { border: var(--lightswitch-border-colour) solid var(--lightswitch-border-width); background-color: var(--lightswitch-off-background-colour); } input-field[type=lightswitch] input[disabled] ~ light-switch off-label, input-field[type=lightswitch] input[disabled] ~ light-switch on-label { pointer-events: none; --lightswitch-border-colour: #c2c2c2; --lightswitch-label-color: var(--lightswitch-border-colour); } input-field[type=lightswitch] input[disabled][value="1"] ~ light-switch .capsule { --lightswitch-border-colour: rgba(255, 255, 255, 0.5); --symbol-colour: rgba(255, 255, 255, 0.5); --lightswitch-off-background-colour: var(--lightswitch-on-background-colour); } input-field[type=clipboard] input[type=text][readonly] { cursor: pointer; border-style: dashed; color: inherit; font-style: normal; pointer-events: all; } @media (hover: hover) { input-field[type=clipboard] input[type=text][readonly]:hover { --input-border-colour: var(--input-theme); } input-field[type=clipboard] input[type=text][readonly]:hover ~ input-symbol { color: var(--input-theme); } } input-field[type=clipboard]::after { content: "Copied to clipboard"; position: relative; grid-row: 2; grid-column: 1; border-radius: 0.4em; background-color: var(--input-theme); color: white; font-size: 0.7em; font-weight: 600; padding: 0.2em 0.6em; height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; align-self: center; justify-self: flex-end; right: calc(var(--input-padding-inline) * 2 + var(--icon-width, var(--icon-size, 1em)) + var(--gutter0)); pointer-events: none; opacity: 0; transform: translateX(0.6em); transition: opacity var(--transition), transform var(--transition); } input-field[type=clipboard] input-symbol { pointer-events: none; } input-field[type=clipboard].copied::after { opacity: 1; transform: translateX(0); } .dark input-field[type=clipboard] input { background-color: transparent; } .dark input-field[type=clipboard] input-symbol { color: white; } input-field[type=checkbox] { --checkbox-box-height-size: 2em; --checkbox-box-width-size: 2em; --checkbox-box-border-gap: 4px; --checkbox-box-background-colour: white; --checkbox-box-border-colour: var(--input-border-colour, #dddddd); --checkbox-box-border-width: var(--input-border-size, 1px); --checkbox-box-border-radius: calc(var(--input-border-radius) / 2); --checkbox-inner-box-height-size: var(--checkbox-box-height-size); --checkbox-inner-box-width-size: var(--checkbox-box-width-size); --checkbox-inner-box-background-colour: var(--input-theme); --checkbox-inner-box-border-radius: var(--checkbox-box-border-radius); } input-field[type=checkbox] input { display: none; } input-field[type=checkbox] input.small + label { font-size: 0.8em; } input-field[type=checkbox] input.large + label { font-size: 1.1em; } input-field[type=checkbox] label { display: grid; align-items: center; justify-content: flex-start; font-size: 0.8em; font-weight: 400; grid-auto-flow: column; grid-gap: 1ch; cursor: pointer; transition: color var(--transition); } input-field[type=checkbox] label::before, input-field[type=checkbox] label::after { content: ""; position: relative; display: block; cursor: pointer; grid-column: 1; grid-row: 1; margin-left: 0; } input-field[type=checkbox] label::before { border-color: var(--checkbox-box-border-colour); border-width: var(--checkbox-box-border-width); border-style: solid; border-radius: var(--checkbox-box-border-radius); width: var(--checkbox-box-width-size); height: var(--checkbox-box-height-size); background-color: var(--checkbox-box-background-colour); transition: border-color var(--transition), background-color var(--transition); } input-field[type=checkbox] label::after { width: calc(var(--checkbox-inner-box-width-size) - var(--checkbox-box-border-gap) * 2); height: calc(var(--checkbox-inner-box-height-size) - var(--checkbox-box-border-gap) * 2); border-radius: var(--checkbox-inner-box-border-radius); background-color: var(--checkbox-inner-box-background-colour); justify-self: center; } input-field[type=checkbox] label a { text-decoration: underline; text-underline-offset: 0.2em; } @media (hover: hover) { input-field[type=checkbox] label:hover { color: var(--input-theme); } .js-has-pseudo [csstools-has-2x-32-34-39-38-19-2u-2x-2t-30-2s-2j-38-3d-34-2t-1p-2r-2w-2t-2r-2z-2q-33-3c-2l-w-30-2p-2q-2t-30-1m-2w-33-3a-2t-36-1m-2w-2p-37-14-2p-15]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { color: inherit; } input-field[type=checkbox] label:hover:has(a) { color: inherit; } input-field[type=checkbox] label:hover::before { border-color: var(--input-theme); } } input-field[type=checkbox] label::after, input-field[type=checkbox].has-symbol input-symbol { opacity: 0; transform: scale(0.5); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity var(--transition); } input-field[type=checkbox]:not(.loading):not(.loaded) input:checked + label::after, input-field[type=checkbox]:not(.loading):not(.loaded).has-symbol input:checked + label input-symbol { opacity: 1; transform: scale(1); } input-field[type=checkbox] input[disabled] + label { opacity: 0.5; cursor: not-allowed; } input-field[type=checkbox] loading-bar { grid-column: 1; grid-row: 1; justify-self: center; z-index: 1; margin: 0; } input-field[type=checkbox].has-symbol label input-symbol { grid-column: 1; grid-row: 1; padding: initial; margin: initial; z-index: 1; color: white; justify-self: center; } input-field[type=checkbox].has-symbol input:checked + label input-symbol { transition-delay: 0.1s; } input-field[type=checkbox][mode=chunky] { --checkbox-box-border-radius: 50%; --checkbox-box-height-size: 3em; --checkbox-box-width-size: 3em; --checkbox-box-background-colour: #dddddd; --checkbox-inner-box-background-colour: #21B755; padding: var(--gutter0); position: relative; display: grid; grid-gap: initial; transition: border-color var(--transition); } input-field[type=checkbox][mode=chunky] label { position: relative; } input-field[type=checkbox][mode=chunky] label span { color: #333333; font-size: 1.1em; } input-field[type=checkbox][mode=chunky] label span address { color: var(--font-colour, #666666); } input-field[type=checkbox][mode=chunky].has-symbol:not(.loaded):not(.loading) input-symbol { opacity: 1; transform: scale(1); } input-field[type=checkbox][mode=chunky] input:checked + label { --checkbox-box-background-colour: white; } input-field[type=checkbox][mode=chunky]::before { content: ""; transition: opacity var(--transition), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: scale(0.9); opacity: 0; position: absolute; inset: 0; background: var(--block-background, white); box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.1); border-radius: calc(var(--border-radius) / 2); } @media (hover: hover) { input-field[type=checkbox][mode=chunky]:hover + input-field, input-field[type=checkbox][mode=chunky]:hover { border-top-color: transparent !important; } input-field[type=checkbox][mode=chunky]:hover::before { transform: scale(1.01); opacity: 1; } } input-field[type=checkbox][mode=chunky].is-checked + input-field, input-field[type=checkbox][mode=chunky].is-checked { border-top-color: transparent !important; } input-field[type=checkbox][mode=chunky].is-checked::before { transform: scale(1.01); opacity: 1; } input-field[type=checkbox]:focus { outline: none; } input-field[type=checkbox]:focus label::before { --checkbox-box-border-colour: #; } input-field[type=checkboxes].is-chunky { grid-gap: calc(var(--gutter0) - 0.2em); } input-field[type=checkboxes].is-chunky.has-label > input-field:first-of-type { margin-top: var(--gutter0); } input-field[type=checkboxes].has-divider-lines > input-field:not(:first-of-type) { border-top: 1px dashed #dddddd; padding-bottom: calc(var(--gutter0) - 0.2em); } input-field[type=radio] { --checkbox-box-height-size: 2em; --checkbox-box-width-size: 2em; --checkbox-box-border-gap: 4px; --checkbox-box-background-colour: white; --checkbox-box-border-colour: var(--input-border-colour, #dddddd); --checkbox-box-border-width: var(--input-border-size, 1px); --checkbox-box-border-radius: calc(var(--input-border-radius) / 2); --checkbox-inner-box-height-size: var(--checkbox-box-height-size); --checkbox-inner-box-width-size: var(--checkbox-box-width-size); --checkbox-inner-box-background-colour: var(--input-theme); --checkbox-inner-box-border-radius: var(--checkbox-box-border-radius); } input-field[type=radio] input { display: none; } input-field[type=radio] input.small + label { font-size: 0.8em; } input-field[type=radio] input.large + label { font-size: 1.1em; } input-field[type=radio] label { display: grid; align-items: center; justify-content: flex-start; font-size: 0.8em; font-weight: 400; grid-auto-flow: column; grid-gap: 1ch; cursor: pointer; transition: color var(--transition); } input-field[type=radio] label::before, input-field[type=radio] label::after { content: ""; position: relative; display: block; cursor: pointer; grid-column: 1; grid-row: 1; margin-left: 0; } input-field[type=radio] label::before { border-color: var(--checkbox-box-border-colour); border-width: var(--checkbox-box-border-width); border-style: solid; border-radius: var(--checkbox-box-border-radius); width: var(--checkbox-box-width-size); height: var(--checkbox-box-height-size); background-color: var(--checkbox-box-background-colour); transition: border-color var(--transition), background-color var(--transition); } input-field[type=radio] label::after { width: calc(var(--checkbox-inner-box-width-size) - var(--checkbox-box-border-gap) * 2); height: calc(var(--checkbox-inner-box-height-size) - var(--checkbox-box-border-gap) * 2); border-radius: var(--checkbox-inner-box-border-radius); background-color: var(--checkbox-inner-box-background-colour); justify-self: center; } input-field[type=radio] label a { text-decoration: underline; text-underline-offset: 0.2em; } @media (hover: hover) { input-field[type=radio] label:hover { color: var(--input-theme); } .js-has-pseudo [csstools-has-2x-32-34-39-38-19-2u-2x-2t-30-2s-2j-38-3d-34-2t-1p-36-2p-2s-2x-33-2l-w-30-2p-2q-2t-30-1m-2w-33-3a-2t-36-1m-2w-2p-37-14-2p-15]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { color: inherit; } input-field[type=radio] label:hover:has(a) { color: inherit; } input-field[type=radio] label:hover::before { border-color: var(--input-theme); } } input-field[type=radio] label::after, input-field[type=radio].has-symbol input-symbol { opacity: 0; transform: scale(0.5); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity var(--transition); } input-field[type=radio]:not(.loading):not(.loaded) input:checked + label::after, input-field[type=radio]:not(.loading):not(.loaded).has-symbol input:checked + label input-symbol { opacity: 1; transform: scale(1); } input-field[type=radio] input[disabled] + label { opacity: 0.5; cursor: not-allowed; } input-field[type=radio] loading-bar { grid-column: 1; grid-row: 1; justify-self: center; z-index: 1; margin: 0; } input-field[type=radio].has-symbol label input-symbol { grid-column: 1; grid-row: 1; padding: initial; margin: initial; z-index: 1; color: white; justify-self: center; } input-field[type=radio].has-symbol input:checked + label input-symbol { transition-delay: 0.1s; } input-field[type=radio][mode=chunky] { --checkbox-box-border-radius: 50%; --checkbox-box-height-size: 3em; --checkbox-box-width-size: 3em; --checkbox-box-background-colour: #dddddd; --checkbox-inner-box-background-colour: #21B755; padding: var(--gutter0); position: relative; display: grid; grid-gap: initial; transition: border-color var(--transition); } input-field[type=radio][mode=chunky] label { position: relative; } input-field[type=radio][mode=chunky] label span { color: #333333; font-size: 1.1em; } input-field[type=radio][mode=chunky] label span address { color: var(--font-colour, #666666); } input-field[type=radio][mode=chunky].has-symbol:not(.loaded):not(.loading) input-symbol { opacity: 1; transform: scale(1); } input-field[type=radio][mode=chunky] input:checked + label { --checkbox-box-background-colour: white; } input-field[type=radio][mode=chunky]::before { content: ""; transition: opacity var(--transition), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform: scale(0.9); opacity: 0; position: absolute; inset: 0; background: var(--block-background, white); box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.1); border-radius: calc(var(--border-radius) / 2); } @media (hover: hover) { input-field[type=radio][mode=chunky]:hover + input-field, input-field[type=radio][mode=chunky]:hover { border-top-color: transparent !important; } input-field[type=radio][mode=chunky]:hover::before { transform: scale(1.01); opacity: 1; } } input-field[type=radio][mode=chunky].is-checked + input-field, input-field[type=radio][mode=chunky].is-checked { border-top-color: transparent !important; } input-field[type=radio][mode=chunky].is-checked::before { transform: scale(1.01); opacity: 1; } input-field[type=radio]:focus { outline: none; } input-field[type=radio]:focus label::before { --checkbox-box-border-colour: #; } input-field[type=radio] { --checkbox-box-border-radius: 100%; } input-field[type=radios].is-chunky { grid-gap: calc(var(--gutter0) - 0.2em); } input-field[type=radios].is-chunky.has-label > input-field:first-of-type { margin-top: var(--gutter0); } input-field[type=radios].has-divider-lines > input-field:not(:first-of-type) { border-top: 1px dashed #dddddd; padding-bottom: calc(var(--gutter0) - 0.2em); } input-field[type=color] .clr-field { display: flex; } input-field[type=color] .clr-field input { --input-border-radius: 50px; -webkit-appearance: none; border-radius: var(--input-border-radius, calc(var(--border-radius) / 2)); background-color: var(--input-background-colour, white); border: var(--input-border-colour, #dddddd) solid var(--input-border-size, 1px); padding: var(--input-padding-block, var(--input-padding, 0.6em)) var(--input-padding-inline, var(--input-padding, 1.3em)); color: var(--input-font-colour, var(--font-colour)); transition: border-color var(--transition), border-radius var(--transition); text-align: left; } input-field[type=color] .clr-field input::-moz-placeholder { color: var(--input-placeholder-colour, #c2c2c2); -moz-transition: color var(--transition); transition: color var(--transition); } input-field[type=color] .clr-field input::placeholder { color: var(--input-placeholder-colour, #c2c2c2); transition: color var(--transition); } input-field[type=color] .clr-field input:focus::-moz-placeholder { color: transparent; } input-field[type=color] .clr-field input:focus::placeholder { color: transparent; } input-field[type=color] .clr-field input::-webkit-calendar-picker-indicator { opacity: 0; position: relative; background-image: none; border-radius: calc(calc(var(--border-radius) / 2) / 2); right: calc(var(--icon-width, var(--icon-size, 1em)) - var(--input-padding-inline) / 2 + 0.25em); width: calc(var(--icon-width, var(--icon-size, 1em)) * 1.3); height: calc(var(--icon-height, var(--icon-size, 1em)) * 1.3); transform: translateX(calc(100% + var(--icon-width, var(--icon-size, 1em)))); cursor: pointer; outline: var(--input-border, var(--input-border-colour, #dddddd) solid var(--input-border-size, 1px)); -webkit-transition: opacity var(--transition); transition: opacity var(--transition); } input-field[type=color] .clr-field input::-webkit-calendar-picker-indicator:focus { opacity: 1; outline-color: var(--input-theme); } input-field[type=color] .clr-field input[readonly] { pointer-events: none; color: #c2c2c2; background-color: #EDF1F3; font-style: italic; } input-field[type=color] .clr-field input { width: 100%; border-top-right-radius: 0px; border-bottom-right-radius: 0px; order: -1; } input-field[type=color] .clr-field button { pointer-events: all; border-top-right-radius: 50px; border-bottom-right-radius: 50px; width: 50px; border: 1px solid #dddddd; border-left: none; position: relative; top: initial; left: initial; transform: initial; } input-field[type=color] .clr-field button::after { box-shadow: initial; } input-field[type=font-picker] font-picker { padding: 2em; color: white; display: flex; flex-direction: column; overflow: auto; max-height: 300px; border-radius: var(--input-border-radius, calc(var(--border-radius) / 2)); background-color: var(--input-background-colour, white); border: var(--input-border-colour, #dddddd) solid var(--input-border-size, 1px); padding: 0; color: var(--input-font-colour, var(--font-colour)); transition: border-color var(--transition), border-radius var(--transition); } input-field[type=font-picker] font-item { display: flex; align-items: center; font-size: 1.3em; padding: var(--input-padding-block, var(--input-padding, 0.6em)) var(--input-padding-inline, var(--input-padding, 1.3em)); cursor: pointer; transition: color var(--transition), background-color var(--transition); } input-field[type=font-picker] font-item.selected { background-color: #ff2871; color: white; } input-field[type=font-picker] font-item:not(.selected):hover { color: white; background-color: #ff715c; } input-field[type=font-picker] .legal-info { font-size: 1.2rem; } input-field[type=font-picker] .legal-info summary { justify-content: flex-start !important; } input-field[type=font-picker] .legal-info summary svg { width: 0.8em; margin-left: 1ch; } input-field:where(.format\:underline) { --input-padding: 0.2em; } input-field:where(.format\:underline)[type=select] select { display: none; } input-field:where(.format\:underline)::after { content: ""; border-radius: 4ch; background-color: var(--input-underline-colour, var(--theme-primary)); position: absolute; bottom: -0.4em; height: var(--input-underline-height, 0.25em); width: 100%; } input-field:where(.format\:underline) :is(.dropdown-trigger, label, .is-autogrow.postcode span.input) { font-size: var(--input-font-size, 1.5625em); } input-field:where(.format\:underline) { --input-padding-block: var(--input-padding); --input-padding-inline: 0; } input-field:where(.format\:underline) .input { --input-border-radius: 0; --input-background-colour: transparent; } input-field:where(.format\:underline) .input:empty::before { content: attr(placeholder); transition: color var(--transition); } input-field:where(.format\:underline) .input:focus-within:before { color: transparent; } input-field:where(.format\:underline) .input-autogrow, input-field:where(.format\:underline) .dropdown-trigger { grid-row: 1; grid-column: 2; width: 100%; white-space: nowrap; } input-field:where(.format\:underline) .dropdown-trigger, input-field:where(.format\:underline) label { padding: var(--input-padding-block) var(--input-padding-inline); } @media (hover: hover) { input-field:where(.format\:underline) .dropdown-trigger:hover { cursor: pointer; } input-field:where(.format\:underline) .dropdown-trigger:hover > .dropdown { --dropdown-y: calc(-1 * (var(--input-padding-block) * 2)); } } input-field:where(.format\:underline) select[name=person] ~ .dropdown-trigger dropdown-menu, input-field:where(.format\:underline) select[name=age] ~ .dropdown-trigger dropdown-menu { grid-template-columns: repeat(2, 1fr); } input-field:where(.format\:underline) select[name=person] ~ .dropdown-trigger dropdown-menu .link, input-field:where(.format\:underline) select[name=age] ~ .dropdown-trigger dropdown-menu .link { white-space: nowrap; } input-field:where(.format\:underline) select[name=age] ~ .dropdown-trigger dropdown-menu { min-width: auto; } input-field:where(.format\:underline) label { font-weight: 400; grid-column: 1; white-space: nowrap; } input-field:where(.format\:underline) label::after { content: ":"; } countdown-timer::before { content: "in "; } countdown-timer::after { content: " seconds"; } countdown-timer[duration="1"]::after { content: " second"; } countdown-timer[prefix]::before { content: attr(data-prefix) " "; } countdown-timer[suffix]::after { content: " " attr(data-suffix); } countdown-timer { margin-left: calc(var(--gap) * -0.5 + 0.5ch); } .balance { text-wrap: balance; } .pretty { text-wrap: pretty; } main { width: 100%; } main:empty { display: none; } hr { all: initial; margin-top: var(--gutter0); margin-bottom: var(--gutter0); grid-column: 1/-1; height: 1px; width: 100%; background-color: #dddddd; } svg[data-volume=symbols-icon] { width: var(--icon-width, var(--icon-size, 1em)); height: var(--icon-height, var(--icon-size, 1em)); transition: fill var(--transition), stroke var(--transition); } .user-initials { --aspect-ratio: 1/1; aspect-ratio: var(--aspect-ratio); } @supports not (aspect-ratio: 1/1) { .user-initials { aspect-ratio: initial; } .user-initials::before { content: ""; float: left; height: 0; padding-top: calc(1 / 1 * 100%); } } .user-initials { width: var(--avatar-size, inherit); border-radius: 50%; overflow: hidden; display: flex; place-content: center; place-items: center; font-size: 1em; font-weight: bold; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: rgba(255, 255, 255, 0.7); transition: background-color var(--transition), color var(--transition); background-color: #c2c2c2; } [data-counter]:not([data-counter="0"])::after { content: attr(data-counter); display: flex; place-items: center; place-content: center; border-radius: 2ch; font-weight: bold; min-width: 20px; min-height: 20px; padding: 0 0.5em; background-color: #FE9900; font-size: 0.8em; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; color: white; } body#invalid-token main > section.block { max-width: var(--breakpoints-small-medium); margin-inline: auto; } @media (max-width: 500px) { body#invalid-token main > section.block .button { width: 100%; } } svg.check.styled { background-color: var(--check-style-colour, var(--list-style-colour, #21B755)); border-radius: 50%; margin-right: 1ch; color: white; } svg.check.styled use { transform: scale(0.6); transform-origin: center; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } :root { --primary: #ff2871; --secondary: #ff715c; } :root body { --theme-dark: #B62156; --theme-background-bar: linear-gradient(var(--gradient-angle, 270deg), #ff2871 var(--gradient-offset, 33%), #ff715c); --theme-box-shadow: #ededed; --theme-page-background: #F7F7F7; --theme-alpha-gradient: rgba(32, 33, 36, var(--gradient-background-opacity, 0.8)) linear-gradient(var(--gradient-angle, 270deg), rgba(255, 40, 113, 0.6) var(--gradient-offset, 33%), rgba(255, 113, 92, 0.6)); --theme: var(--theme-primary, var(--primary)); --hr-colour: #dddddd; } :root body.theme\:purple { --theme-primary: #9F2076; --theme-secondary: #C02BB7; --theme-dark: #A02077; --theme-box-shadow: #E7F1EE; --theme-background-bar: linear-gradient(var(--gradient-angle, 270deg), var(--theme-primary, #9F2076) var(--gradient-offset, 33%), var(--theme-secondary, #C02BB7)); --theme-page-background: #fffbff; --theme-alpha-gradient: rgba(32, 33, 36, var(--gradient-background-opacity, 0.8)) linear-gradient(var(--gradient-angle, 270deg), rgba(159, 32, 118, 0.6) var(--gradient-offset, 33%), rgba(192, 43, 183, 0.6)); } :root body.theme\:green { --theme-primary: #176D7D; --theme-secondary: #0C9B9A; --theme-dark: #055b69; --theme-box-shadow: #E7F1EE; --theme-background-bar: linear-gradient(var(--gradient-angle, 270deg), var(--theme-secondary, #0C9B9A) var(--gradient-offset, 33%), var(--theme-primary, #176D7D)); --theme-page-background: #F7F7F7; --theme-alpha-gradient: rgba(32, 33, 36, var(--gradient-background-opacity, 0.8)) linear-gradient(var(--gradient-angle, 270deg), rgba(23, 109, 125, 0.6) var(--gradient-offset, 33%), rgba(12, 155, 154, 0.6)); } :root body.theme\:grey { --theme-primary: #787878; --theme-secondary: #5f5f5f; --theme-dark: #59595A; --theme-box-shadow: #E9E9E9; --theme-background-bar: linear-gradient(var(--gradient-angle, 270deg), var(--theme-primary, #787878) var(--gradient-offset, 33%), var(--theme-secondary, #5f5f5f)); --theme-page-background: #F7F7F7; --theme-alpha-gradient: rgba(32, 33, 36, var(--gradient-background-opacity, 0.8)) linear-gradient(var(--gradient-angle, 270deg), rgba(120, 120, 120, 0.6) var(--gradient-offset, 33%), rgba(95, 95, 95, 0.6)); } :root body.theme\:blue { --theme-primary: #0F72C0; --theme-secondary: #04A5E5; --theme-dark: #095691; --theme-box-shadow: #E0EEF9; --theme-background-bar: linear-gradient(var(--gradient-angle, 270deg), var(--theme-secondary, #04A5E5) var(--gradient-offset, 33%), var(--theme-primary, #0F72C0)); --theme-page-background: #F7F7F7; --theme-alpha-gradient: rgba(32, 33, 36, var(--gradient-background-opacity, 0.8)) linear-gradient(var(--gradient-angle, 270deg), rgba(15, 114, 192, 0.6) var(--gradient-offset, 33%), rgba(4, 165, 229, 0.6)); } :root body.theme\:white { --theme-page-background: white; --heading-colour: #333333; } :root body .air-datepicker { --adp-font-family: 'Open Sans', sans-serif; --adp-accent-color: #ff2871; --adp-day-name-color: #ff715c; --adp-cell-background-color-selected: #ff2871; --adp-cell-background-color-selected-hover: #ff715c; } :root { --breakpoint-min: 320px; --breakpoint-small: 480px; --breakpoint-small-medium: 660px; --breakpoint-medium: 960px; --breakpoint-large: 1080px; --breakpoint-max: 1280px; --breakpoint-full: 1344px; --font-colour: #666666; --heading-colour: var(--font-colour); --sub-heading-colour: var(--font-colour); --text-decoration: underline solid var(--primary); --transition-duration: 0.2s; --transition-ease: cubic-bezier(0.42, 0, 0.58, 1); --transition-delay: 0s; --transition: var(--transition-duration) var(--transition-ease) var(--transition-delay); } @media (prefers-reduced-motion: reduce) { :root { --transition-duration: 0; } } :root { --gap: 16px; --gutter: 3vw; --spacer: 6vh; --border-radius: 16px; --sidebar-width: clamp(280px, 30vw, 400px); } @supports not (width: clamp(1px, 5vw, 10px)) { :root { --sidebar-width: 400px; } @media (max-width: 1080px) { :root { --sidebar-width: 300px; } } } :root { --spacer-to-gutter: calc(var(--spacer1-) + var(--gutter1)); --gutter-to-spacer: calc(var(--gutter1-) + var(--spacer1)); --spacer0-to-gutter0: calc(var(--spacer0-) + var(--gutter0)); --gutter0-to-spacer0: calc(var(--gutter0-) + var(--spacer0)); --negative-single-gutter-width: calc(((100% - var(--breakpoint-max)) / 2)); --gutter0: clamp(8px, var(--gutter) * 0.5, 12px); --gutter1: clamp(16px, var(--gutter), 32px); --gutter2: clamp(16px, var(--gutter) * 2, 48px); --gutter3: clamp(16px, var(--gutter) * 3, 64px); --gutter4: clamp(16px, var(--gutter) * 4, 80px); --gutter5: clamp(16px, var(--gutter) * 5, 96px); --gutter6: clamp(16px, var(--gutter) * 6, 112px); --gutter0-: calc(-1 * clamp(8px, var(--gutter) * 0.5, 12px)); --gutter1-: calc(-1 * clamp(16px, var(--gutter), 32px)); --gutter2-: calc(-1 * clamp(16px, var(--gutter) * 2, 48px)); --gutter3-: calc(-1 * clamp(16px, var(--gutter) * 3, 64px)); --gutter4-: calc(-1 * clamp(16px, var(--gutter) * 4, 80px)); --gutter5-: calc(-1 * clamp(16px, var(--gutter) * 5, 96px)); --gutter6-: calc(-1 * clamp(16px, var(--gutter) * 6, 112px)); } @supports not (width: clamp(1px, 5vw, 10px)) { :root { --gutter0: calc(var(--gutter) * 0.5 + 32px); --gutter0-: calc(-1 * calc(var(--gutter) * 0.5 + 32px)); --gutter1: calc(var(--gutter) * 1 + 64px); --gutter1-: calc(-1 * calc(var(--gutter) * 1 + 64px)); --gutter2: calc(var(--gutter) * 2 + 64px); --gutter2-: calc(-1 * calc(var(--gutter) * 2 + 64px)); --gutter3: calc(var(--gutter) * 3 + 64px); --gutter3-: calc(-1 * calc(var(--gutter) * 3 + 64px)); --gutter4: calc(var(--gutter) * 4 + 64px); --gutter4-: calc(-1 * calc(var(--gutter) * 4 + 64px)); --gutter5: calc(var(--gutter) * 5 + 64px); --gutter5-: calc(-1 * calc(var(--gutter) * 5 + 64px)); --gutter6: calc(var(--gutter) * 6 + 64px); --gutter6-: calc(-1 * calc(var(--gutter) * 6 + 64px)); } } :root { --spacer0: clamp(32px, var(--spacer) * 0.5, 48px); --spacer1: clamp(64px, var(--spacer), 128px); --spacer2: clamp(64px, var(--spacer) * 2, 192px); --spacer3: clamp(64px, var(--spacer) * 3, 256px); --spacer4: clamp(64px, var(--spacer) * 4, 320px); --spacer5: clamp(64px, var(--spacer) * 5, 384px); --spacer6: clamp(64px, var(--spacer) * 6, 448px); --spacer0-: calc(-1 * clamp(32px, var(--spacer) * 0.5, 48px)); --spacer1-: calc(-1 * clamp(64px, var(--spacer), 128px)); --spacer2-: calc(-1 * clamp(64px, var(--spacer) * 2, 192px)); --spacer3-: calc(-1 * clamp(64px, var(--spacer) * 3, 256px)); --spacer4-: calc(-1 * clamp(64px, var(--spacer) * 4, 320px)); --spacer5-: calc(-1 * clamp(64px, var(--spacer) * 5, 384px)); --spacer6-: calc(-1 * clamp(64px, var(--spacer) * 6, 448px)); } @supports not (width: clamp(1px, 5vw, 10px)) { :root { --spacer0: calc(var(--spacer) * 0.5 + 32px); --spacer0-: calc(-1 * calc(var(--spacer) * 0.5 + 32px)); --spacer1: calc(var(--spacer) * 1 + 64px); --spacer1-: calc(-1 * calc(var(--spacer) * 1 + 64px)); --spacer2: calc(var(--spacer) * 2 + 64px); --spacer2-: calc(-1 * calc(var(--spacer) * 2 + 64px)); --spacer3: calc(var(--spacer) * 3 + 64px); --spacer3-: calc(-1 * calc(var(--spacer) * 3 + 64px)); --spacer4: calc(var(--spacer) * 4 + 64px); --spacer4-: calc(-1 * calc(var(--spacer) * 4 + 64px)); --spacer5: calc(var(--spacer) * 5 + 64px); --spacer5-: calc(-1 * calc(var(--spacer) * 5 + 64px)); --spacer6: calc(var(--spacer) * 6 + 64px); --spacer6-: calc(-1 * calc(var(--spacer) * 6 + 64px)); } } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } body { color: var(--font-colour, #666666); font: normal 400 1.6rem/1.6 "Open Sans", sans-serif; } @supports (width: clamp(1px, 5vw, 10px)) { body { font-size: clamp(1.5rem, 1.5vw, 1.7rem); } } @supports not (width: clamp(1px, 5vw, 10px)) { @media (max-width: 950px) { body { font-size: 1.5rem; } } @media (min-width: 1601px) { body { font-size: 1.7rem; } } } .font-regular, .font\:regular { font-family: "Open Sans", sans-serif; font-weight: 400; font-style: normal; } .font-italic, .font\:italic { font-family: "Open Sans", sans-serif; font-weight: 400; font-style: italic; } .font-semibold, .font\:semibold { font-family: "Open Sans", sans-serif; font-weight: 600; font-style: normal; } .font-semibold-italic, .font\:semibold-italic { font-family: "Open Sans", sans-serif; font-weight: 600; font-style: italic; } .font-bold, .font\:bold { font-family: "Open Sans", sans-serif; font-weight: 700; font-style: normal; } .font-bold-italic, .font\:bold-italic { font-family: "Open Sans", sans-serif; font-weight: 700; font-style: italic; } .font-small, .font\:small { font-size: 0.8em; } .font-medium, .font\:medium { font-size: 1.1em; } .font-large, .font\:large { font-size: 1.7em; } .colour\:blue { color: #0F72C0; } .colour\:green { color: #0C9B9A; } em, i { font-family: "Open Sans", sans-serif; font-weight: 400; font-style: italic; } strong, b { font-family: "Open Sans", sans-serif; font-weight: 700; font-style: normal; } h1, .heading-h1 { font-size: 3.125em; line-height: 1.2; } h2, .heading-h2 { font-size: 2em; line-height: 1.3; } h3, .heading-h3 { font-size: 1.5625em; line-height: 1.4; } h4, .heading-h4 { font-size: 1.0625em; line-height: 1.6; } h5, .heading-h5 { font-size: 1.0625em; line-height: 1.6; } h6, .heading-h6 { font-size: 1.0625em; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--heading-colour); } h1 em, h1 i, h2 em, h2 i, h3 em, h3 i, h4 em, h4 i, h5 em, h5 i, h6 em, h6 i { font-family: "Open Sans", sans-serif; font-weight: 700; font-style: italic; } h1.sub-heading, h2.sub-heading, h3.sub-heading, h4.sub-heading, h5.sub-heading, h6.sub-heading { color: var(--sub-heading-colour); font-weight: 400; } h1 { font-weight: 700; } a:not(.button) { transition: var(--transition); color: var(--link-colour, var(--font-colour, #666666)); } @media (hover: hover) { a:not(.button):hover { color: var(--link-hover-colour, var(--primary, #ff2871)); } } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } .block { --grid-gap: var(--gutter0); display: grid; grid-gap: var(--grid-gap); border-radius: var(--border-radius); padding: var(--gutter1); position: relative; background: var(--block-background, white); } .block.with-shadow { box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.1); } .block.notice { background-color: #FEEFD4; } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } navigation-bar.dark { --link-hover-colour:#FDC705; } .dark-mode, .dark, .is\:dark { color: white; --font-colour: white; --accent-colour: white; --text-decoration: underline solid white; --link-colour: white; --heading-colour: white; --sub-heading-colour: white; --menu-icon-colour: white; --input-underline-colour: white; --search-total-ring-colour: white; --dashboard-card-border-colour: rgba(255, 255, 255, 0.5); --input-font-colour: #666666; } .dark-mode .button, .dark .button, .is\:dark .button { --hover-border-colour: transparent !important; } .dark-mode account-info a figure, .dark account-info a figure, .is\:dark account-info a figure { background-color: white; color: rgba(0, 0, 0, 0.3); } body.is\:mobile-navigation .top-level.is\:dark > nav button.search svg { color: white; } body.is\:mobile-navigation .top-level.is\:dark account-info .account-link { background: transparent; border: 1px solid white; color: white; } .dark-mode code, .dark code, .is\:dark code { color: #666666; } .dark-mode[class*=tab-nav] mark, .dark[class*=tab-nav] mark, .is\:dark[class*=tab-nav] mark { --theme-background-bar: white; } navigation-bar .dark-mode, navigation-bar .dark, navigation-bar .is\:dark { --link-hover-colour:#FDC705; } .dark-mode .button:not(.inverted).white, .dark .button:not(.inverted).white, .is\:dark .button:not(.inverted).white { --font-colour: var(--primary, #ff2871); border-color: transparent; } .dark-mode .block, .dark .block, .is\:dark .block { --link-hover-colour: #FDC705; } .dark-mode .logo, .dark .logo, .is\:dark .logo { --logo-colour: white; --icon-colour: white; } .dark-mode account-info svg.icon, .dark account-info svg.icon, .is\:dark account-info svg.icon { --icon-colour: white; } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } .table, .field\:description table { text-align: left; width: 100%; border-radius: var(--border-radius); overflow: hidden; } .table thead, .field\:description table thead { font-family: "Open Sans", sans-serif; font-weight: 600; font-style: normal; background-color: var(--theme); color: #FFFFFF; } .table thead th, .field\:description table thead th { padding: var(--gutter0) var(--gutter1); } .table tbody tr:nth-child(odd), .field\:description table tbody tr:nth-child(odd) { background-color: #FFFFFF; } .table tbody tr:nth-child(even), .field\:description table tbody tr:nth-child(even) { background-color: #F7F7F7; } .table tbody th, .table tbody td, .field\:description table tbody th, .field\:description table tbody td { padding: var(--gutter0) var(--gutter1); vertical-align: top; } .table tbody th, .field\:description table tbody th { font-family: "Open Sans", sans-serif; font-weight: 700; font-style: normal; white-space: nowrap; width: 1%; } } @layer components { .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } user-feedback-badge:not(:defined) { display: none; } user-feedback-badge:empty { display: none; } user-feedback-badge { padding: 0.2em 0.3em 0.2em 0.6em; pointer-events: none; display: flex; --background-colour: #21B755; --background-gradient: #0C9B9A; } user-feedback-badge.super { --background-colour: #d9a441; --background-gradient: #f4d243; } user-feedback-badge.neutral { --background-colour: #888888; --background-gradient: #c2c2c2; } user-feedback-badge svg { width: 1.4em; height: 1.4em; background: rgba(255, 255, 255, 0.2); border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.1); } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } .dropdown-trigger:not(:defined) .dropdown { display: none !important; } .dropdown-trigger { will-change: initial; position: relative; align-self: flex-start; display: flex; cursor: pointer; } .dropdown-trigger.has\:hit-area > * { z-index: 1; } .dropdown-trigger.has\:hit-area::before { content: ""; position: absolute; inset: calc(var(--gap) * -0.5); } .dropdown-trigger:active { transform: initial; } .dropdown-trigger .dropdown { --dropdown-y: 10px; position: absolute; opacity: 0; pointer-events: none; } .dropdown-trigger dropdown-menu { left: 0; top: calc(100% + var(--dropdown-padding-block)); } .dropdown-trigger dropdown-menu::before { content: ""; position: absolute; bottom: calc(-1 * var(--dropdown-padding-block)); left: calc(-1 * var(--dropdown-padding-inline)); width: calc(100% + var(--dropdown-padding-inline) * 2); height: calc(100% + var(--dropdown-padding-block) * 2); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); cursor: default; } .dropdown-trigger.direction-centre dropdown-menu { --dropdown-x: -50%; left: 50%; } .dropdown-trigger.direction-centre dropdown-menu:before { height: calc(100% + var(--dropdown-padding-block) * 4); } .dropdown-trigger.direction-rtl dropdown-menu { right: 0; left: initial; } .dropdown-trigger.position-top-left dropdown-menu { top: var(--dropdown-top, initial); right: var(--dropdown-right, 0); bottom: var(--dropdown-bottom, calc(100% + var(--dropdown-padding-block))); left: var(--dropdown-left, initial); } .dropdown-trigger.position-top-center::before { content: initial !important; } .dropdown-trigger.position-top-center dropdown-menu { top: var(--dropdown-top, initial); right: var(--dropdown-right, initial); bottom: var(--dropdown-bottom, calc(100% + var(--dropdown-padding-block))); left: var(--dropdown-left, calc(50% + var(--dropdown-padding-inline))); --dropdown-x: -50%; } .dropdown-trigger.position-top-right dropdown-menu { top: var(--dropdown-top, initial); right: var(--dropdown-right, initial); bottom: var(--dropdown-bottom, calc(100% + var(--dropdown-padding-block))); left: var(--dropdown-left, 0); } .dropdown-trigger.position-left-up::before { content: initial !important; } .dropdown-trigger.position-left-up dropdown-menu { top: var(--dropdown-top, initial); right: var(--dropdown-right, calc(100% + var(--dropdown-padding-inline))); bottom: var(--dropdown-bottom, 0); left: var(--dropdown-left, initial); } .dropdown-trigger.position-right-up::before { content: initial !important; } .dropdown-trigger.position-right-up dropdown-menu { top: var(--dropdown-top, initial); right: var(--dropdown-right, initial); bottom: var(--dropdown-bottom, 0); left: var(--dropdown-left, calc(100% + var(--dropdown-padding-inline))); } .dropdown-trigger.position-left-down::before { content: initial !important; } .dropdown-trigger.position-left-down dropdown-menu { top: var(--dropdown-top, 0); right: var(--dropdown-right, calc(100% + var(--dropdown-padding-inline))); bottom: var(--dropdown-bottom, initial); left: var(--dropdown-left, initial); } .dropdown-trigger.position-right-down::before { content: initial !important; } .dropdown-trigger.position-right-down dropdown-menu { top: var(--dropdown-top, 0); right: var(--dropdown-right, initial); bottom: var(--dropdown-bottom, initial); left: var(--dropdown-left, calc(100% + var(--dropdown-padding-inline))); } .dropdown-trigger.position-left dropdown-menu { top: var(--dropdown-top, calc(100% + var(--dropdown-padding-block))); right: var(--dropdown-right, 0); bottom: var(--dropdown-bottom, initial); left: var(--dropdown-left, initial); --dropdown-x: 0; } .dropdown-trigger.position-center::before { content: initial !important; } .dropdown-trigger.position-center dropdown-menu { top: var(--dropdown-top, calc(100% + var(--dropdown-padding-block))); right: var(--dropdown-right, initial); bottom: var(--dropdown-bottom, initial); left: var(--dropdown-left, calc(50% + var(--dropdown-padding-inline))); --dropdown-x: -50%; } .dropdown-trigger.position-right dropdown-menu { top: var(--dropdown-top, calc(100% + var(--dropdown-padding-block))); right: var(--dropdown-right, initial); bottom: var(--dropdown-bottom, initial); left: var(--dropdown-left, 0); --dropdown-x: 0; } @media (hover: hover) { .dropdown-trigger:hover > .dropdown:not(.inactive) { --dropdown-y: 0px !important; opacity: 1; pointer-events: all; } } .dropdown-trigger .dropdown.open:not(.inactive), .dropdown-trigger.open > .dropdown:not(.inactive) { --dropdown-y: 0px !important; opacity: 1; pointer-events: all; } .dropdown-trigger .dropdown.open::before { content: ""; width: 100%; height: calc(var(--gap) * 2); bottom: 100%; left: 0; position: absolute; } .dropdown-trigger:not(:hover):not(.open) .dropdown { display: none; } .dropdown { --dropdown-padding-block: calc(var(--gutter0) / 2); --dropdown-padding-inline: var(--gutter0); --dropdown-min-width: 200px; --dropdown-y: 0px; --dropdown-x: 0px; --dropdown-max-width: var(--breakpoint-max); display: grid; grid-gap: 0.2em; grid-gap: max(1px, 0.2em); color: white; background: var(--theme-alpha-gradient); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter0); min-width: var(--dropdown-min-width); max-width: var(--dropdown-max-width); backdrop-filter: blur(4px) saturate(150%); z-index: 55; box-shadow: 0px 2.6px 3.8px -37px rgba(0, 0, 0, 0.022), 0px 10.8px 5.3px -37px rgba(0, 0, 0, 0.031), 0px 23.9px 6.7px -37px rgba(0, 0, 0, 0.039), 0px 37.5px 9.1px -37px rgba(0, 0, 0, 0.048), 0px 44px 19px -37px rgba(0, 0, 0, 0.07); transition: opacity var(--transition), transform var(--transition); font-weight: 600; transform: translate(var(--dropdown-x), var(--dropdown-y)); } @supports not (backdrop-filter: none) { .dropdown { background: initial; background-color: var(--theme-dark, rgba(0, 0, 0, 0.7)); } } .dropdown .link { border-radius: calc(calc(var(--border-radius) / 2) / 2); font-size: 1.6rem; font-size: clamp(1.6rem, 4vw, 0.6em); line-height: 1.3; padding: var(--dropdown-padding-block) var(--dropdown-padding-inline); position: relative; display: grid; justify-content: flex-start; grid-gap: var(--dropdown-padding-block); color: white; cursor: pointer; white-space: initial; text-align: left; text-decoration: none; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; align-items: center; justify-content: space-between; transition: background-color var(--transition), border-color var(--transition); } .dropdown .link.current { background-color: rgba(255, 255, 255, 0.1); } .dropdown .link svg { width: 0.8em; height: 0.8em; min-width: 0.8em; min-height: 0.8em; position: relative; grid-column: 2; pointer-events: none; } @media (hover: hover) { .dropdown .link:hover { background-color: rgba(255, 255, 255, 0.2); color: white; } .dropdown .link:hover.has\:sub-menu + sub-menu:not(.inactive) { --dropdown-y: 0px !important; opacity: 1; pointer-events: all; } } .dropdown .link.has\:sub-menu.open + sub-menu:not(.inactive) { --dropdown-y: 0px !important; opacity: 1; pointer-events: all; } @media (hover: hover) { .dropdown .link + sub-menu:hover:not(.inactive) { --dropdown-y: 0px !important; opacity: 1; pointer-events: all; } } .dropdown .link[data-counter]::after { grid-column: 2; } .dropdown label.link input { display: none; } .dropdown label.link input:checked ~ svg { background: rgba(255, 255, 255, 0.5); padding: 0.2em; border-radius: 50%; width: 1.2em; height: 1.2em; min-width: 1.2em; min-height: 1.2em; margin-right: -0.2em; } .dropdown hr { margin: var(--dropdown-padding-block) var(--dropdown-padding-inline); background-color: rgba(255, 255, 255, 0.2); cursor: default; width: calc(100% - var(--dropdown-padding-inline) * 2); } .dropdown .heading { font-family: "Open Sans", sans-serif; font-weight: 600; font-style: normal; font-size: 1.3rem; position: relative; box-sizing: initial; text-align: left; width: calc(100% - var(--button-gutters) * 2); border-top: 1px solid rgba(255, 255, 255, 0.2); margin: var(--dropdown-padding-block) var(--dropdown-padding-inline); padding-top: 1em; text-transform: uppercase; cursor: default; } .dropdown .heading.no-border { border-top: 0; padding-top: 0; } dropdown-menu { --dropdown-direction: 1; } dropdown-menu.direction-rtl { --dropdown-direction: -1; } @media (hover: hover) { dropdown-menu:hover { z-index: 56; } } dropdown-menu:not(:defined) { display: none; } dropdown-menu:empty { visibility: hidden; } dropdown-menu.inactive { pointer-events: none; } sub-menu { top: var(--dropdown-padding-block); right: initial; position: absolute; pointer-events: none; opacity: 0; transition: var(--transition); } sub-menu.dropdown { --dropdown-x: calc(var(--dropdown-direction) * (100% - (var(--dropdown-padding-inline) * 1.5))); } sub-menu::before { content: ""; height: 40px; width: 33%; max-width: 200px; position: absolute; right: 100%; top: calc(var(--dropdown-padding-block) * 4); clip-path: polygon(100% 0, 0 0, calc((var(--dropdown-direction) * 100% + 100%) / 2) 100%); cursor: default; } sub-menu::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; backdrop-filter: blur(1px); } .dropdown.direction-rtl sub-menu::before { right: initial; left: 100%; } @media (max-width: 660px) { dropdown-menu { max-height: calc(100vh - var(--gutter2)); overflow-x: hidden; overflow-y: auto; } dropdown-menu .link.has\:sub-menu svg.arrow-right { transform: rotate(90deg); } dropdown-menu > sub-menu { margin-bottom: calc(var(--dropdown-padding-block) * 2); } sub-menu.dropdown { --dropdown-x: 0px; --dropdown-y: 0px; opacity: 1; pointer-events: all; position: relative; width: 100%; grid-row: initial; box-shadow: none; min-width: initial; backdrop-filter: none; background: rgba(255, 255, 255, 0.1); padding-top: calc(var(--dropdown-padding-inline) / 2); padding-left: calc(var(--dropdown-padding-inline) / 2); padding-right: calc(var(--dropdown-padding-inline) / 2); background: rgba(var(--theme-dark), 0.1); box-shadow: inset 0 -0.2em 16px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); } sub-menu.dropdown.open { grid-row: initial !important; position: relative !important; opacity: 1 !important; --dropdown-x: initial !important; pointer-events: all !important; } sub-menu.dropdown + hr { display: none; } sub-menu.dropdown + .heading { border-top: 0; padding-top: 0; } sub-menu.dropdown .heading { margin-left: calc(var(--dropdown-padding-inline) / 2); margin-right: calc(var(--dropdown-padding-inline) / 2); } sub-menu.dropdown .link { padding-left: inherit; padding-right: inherit; } sub-menu.dropdown > sub-menu { padding-bottom: calc(var(--dropdown-padding-inline) / 2); } } input-field[type=select].is\:select-dropdown > input-symbol { z-index: 1; } input-field[type=select].is\:select-dropdown .dropdown-trigger .dropdown { --dropdown-y: -10px; width: 100%; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32]:not(.does-not-exist):not(does-not-exist) { display: grid; grid-gap: var(--gutter1); align-items: start; } :root:has(.dropdown-menus) main { display: grid; grid-gap: var(--gutter1); align-items: start; } @media (min-width: 901px) { .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32]:not(.does-not-exist):not(does-not-exist) { grid-template-columns: repeat(2, 1fr); } :root:has(.dropdown-menus) main { grid-template-columns: repeat(2, 1fr); } } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a]:not(.does-not-exist):not(does-not-exist):not(does-not-exist) { padding: var(--gutter0); display: grid; grid-gap: var(--gutter0); align-items: start; } :root:has(.dropdown-menus) main > div { padding: var(--gutter0); display: grid; grid-gap: var(--gutter0); align-items: start; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a-w-2w-1g]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { background-color: rgba(255, 255, 255, 0.8); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter0); } :root:has(.dropdown-menus) main > div h4 { background-color: rgba(255, 255, 255, 0.8); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter0); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a-w-1q-w-2s-2x-3a]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { border: 1px solid rgba(255, 255, 255, 0.8); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter0); display: grid; grid-gap: var(--gutter0); } :root:has(.dropdown-menus) main > div > div { border: 1px solid rgba(255, 255, 255, 0.8); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter0); display: grid; grid-gap: var(--gutter0); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a-w-1q-w-2s-2x-3a-1a-36-2x-2v-2w-38-19-38-33-19-30-2t-2u-38]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { justify-items: end; } :root:has(.dropdown-menus) main > div > div.right-to-left { justify-items: end; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a-w-1q-w-2s-2x-3a-1a-30-2t-2u-38-19-38-33-19-36-2x-2v-2w-38]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { justify-items: start; } :root:has(.dropdown-menus) main > div > div.left-to-right { justify-items: start; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a-w-1q-w-2s-2x-3a-1a-2r-2t-32-38-2t-36-2t-2s]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { justify-items: center; } :root:has(.dropdown-menus) main > div > div.centered { justify-items: center; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-31-2p-2x-32-w-1q-w-2s-2x-3a-w-2w-1h]:not(.does-not-exist):not(does-not-exist):not(does-not-exist):not(does-not-exist) { border-radius: calc(var(--border-radius) / 2); padding: 6px var(--gutter0); text-align: center; width: 100%; font-size: 0.8em; } :root:has(.dropdown-menus) main > div h5 { border-radius: calc(var(--border-radius) / 2); padding: 6px var(--gutter0); text-align: center; width: 100%; font-size: 0.8em; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-2x-32-34-39-38-19-2u-2x-2t-30-2s-2j-38-3d-34-2t-1p-37-2t-30-2t-2r-38-2l]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) { background-color: rgba(255, 255, 255, 0.8); padding: 0.5em 2em; border-radius: calc(var(--border-radius) / 2); font-size: 1rem; } :root:has(.dropdown-menus) input-field[type=select] { background-color: rgba(255, 255, 255, 0.8); padding: 0.5em 2em; border-radius: calc(var(--border-radius) / 2); font-size: 1rem; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2r-39-37-38-33-31-19-31-2t-32-39-37]:not(.does-not-exist):not(.does-not-exist) { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 5px, transparent 5px, transparent 25px); background-color: rgba(0, 128, 0, 0.3); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter1); } :root:has(.dropdown-menus) .custom-menus { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 5px, transparent 5px, transparent 25px); background-color: rgba(0, 128, 0, 0.3); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter1); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2r-39-37-38-33-31-19-31-2t-32-39-37-w-2w-1h]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) { color: white; background-color: rgba(128, 148, 125, 0.9); } :root:has(.dropdown-menus) .custom-menus h5 { color: white; background-color: rgba(128, 148, 125, 0.9); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2r-31-37-19-31-2t-32-39-37]:not(.does-not-exist):not(.does-not-exist) { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 5px, transparent 5px, transparent 25px); background-color: rgba(255, 165, 0, 0.3); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter1); } :root:has(.dropdown-menus) .cms-menus { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) 5px, transparent 5px, transparent 25px); background-color: rgba(255, 165, 0, 0.3); border-radius: calc(var(--border-radius) / 2); padding: var(--gutter1); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2r-31-37-19-31-2t-32-39-37-w-2w-1h]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) { color: white; background-color: rgba(174, 156, 130, 0.9); } :root:has(.dropdown-menus) .cms-menus h5 { color: white; background-color: rgba(174, 156, 130, 0.9); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30]:not(.does-not-exist):not(.does-not-exist) { justify-items: center; background-color: rgba(255, 255, 255, 0.9); grid-template-columns: repeat(5, 1fr); } :root:has(.dropdown-menus) .minimal { justify-items: center; background-color: rgba(255, 255, 255, 0.9); grid-template-columns: repeat(5, 1fr); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-2w-1h]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist) { grid-column: 1/-1; } :root:has(.dropdown-menus) .minimal h5 { grid-column: 1/-1; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist) { border: 1px solid #dddddd; border-radius: calc(var(--border-radius) / 2); --dropdown-padding-block: calc(var(--gutter0) / 2); --dropdown-padding-inline: var(--gutter0); padding: var(--dropdown-padding-block) var(--dropdown-padding-inline); } :root:has(.dropdown-menus) .minimal .dropdown-trigger { border: 1px solid #dddddd; border-radius: calc(var(--border-radius) / 2); --dropdown-padding-block: calc(var(--gutter0) / 2); --dropdown-padding-inline: var(--gutter0); padding: var(--dropdown-padding-block) var(--dropdown-padding-inline); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-2j-2r-30-2p-37-37-16-1p-34-33-37-2x-38-2x-33-32-19-2l]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { position: absolute; font-size: 0.8em; white-space: nowrap; } :root:has(.dropdown-menus) .minimal .dropdown-trigger[class*=position-]::after { position: absolute; font-size: 0.8em; white-space: nowrap; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-38-33-34-19-30-2t-2u-38]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { left: 120%; content: "top-left"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-top-left::after { left: 120%; content: "top-left"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-38-33-34-19-2r-2t-32-38-2t-36]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { left: -20%; top: 110%; content: "top-center"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-top-center::after { left: -20%; top: 110%; content: "top-center"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-38-33-34-19-36-2x-2v-2w-38]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { right: 120%; content: "top-right"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-top-right::after { right: 120%; content: "top-right"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-30-2t-2u-38-19-39-34]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { left: 120%; content: "left-up"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-left-up::after { left: 120%; content: "left-up"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-36-2x-2v-2w-38-19-39-34]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { right: 120%; content: "right-up"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-right-up::after { right: 120%; content: "right-up"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-30-2t-2u-38-19-2s-33-3b-32]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { left: 120%; content: "left-down"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-left-down::after { left: 120%; content: "left-down"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-36-2x-2v-2w-38-19-2s-33-3b-32]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { right: 120%; content: "right-down"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-right-down::after { right: 120%; content: "right-down"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-30-2t-2u-38]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { left: 120%; content: "left"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-left::after { left: 120%; content: "left"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-2r-2t-32-38-2t-36]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { left: -10%; bottom: 110%; content: "center"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-center::after { left: -10%; bottom: 110%; content: "center"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-31-2x-32-2x-31-2p-30-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-1a-34-33-37-2x-38-2x-33-32-19-36-2x-2v-2w-38]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::after { right: 120%; content: "right"; } :root:has(.dropdown-menus) .minimal .dropdown-trigger.position-right::after { right: 120%; content: "right"; } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2s-36-33-34-2s-33-3b-32-w-1a-30-2x-32-2z-1a-2w-2p-37-2k-1m-37-39-2q-19-31-2t-32-39-1m-32-38-2w-19-30-2p-37-38-19-2r-2w-2x-30-2s-14-1e-15]:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist)::before { background: rgba(255, 0, 0, 0.6); } :root:has(.dropdown-menus) .dropdown .link.has\:sub-menu:nth-last-child(2)::before { background: rgba(255, 0, 0, 0.6); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36-w-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39]:not(.does-not-exist):not(.does-not-exist):not(does-not-exist)::before { background: rgba(0, 0, 255, 0.6); } :root:has(.dropdown-menus) .dropdown-trigger dropdown-menu::before { background: rgba(0, 0, 255, 0.6); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-1a-2s-36-33-34-2s-33-3b-32-19-38-36-2x-2v-2v-2t-36]:not(.does-not-exist):not(.does-not-exist)::before { background: rgba(128, 0, 128, 0.6); } :root:has(.dropdown-menus) .dropdown-trigger::before { background: rgba(128, 0, 128, 0.6); } .js-has-pseudo [csstools-has-1m-36-33-33-38-1m-2w-2p-37-14-1a-2s-36-33-34-2s-33-3b-32-19-31-2t-32-39-37-15-w-37-39-2q-19-31-2t-32-39]:not(.does-not-exist):not(does-not-exist)::before { background: rgba(0, 0, 255, 0.6); } :root:has(.dropdown-menus) sub-menu::before { background: rgba(0, 0, 255, 0.6); } .fui-type-html p + p { margin-block-start: 1.6rem; } .fui-alert { --fui-alert-font-size: 1.6rem; --fui-alert-padding: 2rem; } .fui-alert p { line-height: 1.2; } .fui-form-container { container-type: inline-size; } @container ( width < 500px) { .fui-page-row[data-fui-field-count="2"] { flex-direction: column; } } .fui-form-container { --fui-label-font-size:1.6rem; --fui-input-font-size:1.6rem; --fui-check-font-size:1.4rem; --fui-check-label-line-height: 1.2; --fui-label-color: #666666; --fui-check-label-width: 1.8rem; --fui-check-label-height: 1.8rem; --fui-check-label-padding-left: 3rem; } .fui-form-container .fui-input-container { --fui-input-border-radius: calc(var(--border-radius) / 2); } main > .fui-i { max-width: 650px; --fui-field-gutter: var(--gutter0); --fui-row-gutter: var(--gutter1); } #steps { grid-row: 3; } #steps .node-container { position: relative; display: flex; flex-direction: column; padding: var(--gutter1) 0; min-height: 300px; margin-top: var(--spacer1); } #steps .node-container svg { height: 250px; width: 250px; } #steps .node-container div > *:not(:first-child), #steps .node-container svg { margin: var(--gutter2) auto 0; } #steps .node-container ol li { margin: 0 0 0 20px; } #steps .node-container ol li p { margin: 0; } #steps .node-container:before { content: attr(data-count); position: absolute; top: -60px; left: calc(50% - 45px); background-image: linear-gradient(45deg, #ff715c, var(--primary, #ff2871) 60%); height: 50px; width: 50px; font-size: 1.5625em; font-weight: 800; border-radius: 50%; color: #FFFFFF; display: flex; justify-content: center; align-items: center; } #steps .node-container:after { content: ""; position: absolute; width: 100%; min-height: initial; min-width: initial; max-width: initial; max-height: initial; aspect-ratio: 1; transform: translateX(-50%); width: 100%; background-image: linear-gradient(to bottom, #f5f5f5, rgba(255, 255, 255, 0) 66%); border-radius: 50%; top: -25px; left: 50%; z-index: -1; } @media (max-width: 960px) { #steps .node-container:before { left: calc(50% - 25px); } } #steps .button { margin: 2em auto 0; } .has\:curve { justify-items: center; position: relative; padding-top: var(--gutter1); padding-bottom: var(--spacer1); margin-top: var(--spacer1); grid-gap: var(--gutter1); } @media (max-width: 660px) { .has\:curve { grid-gap: var(--gutter1); } } .has\:curve::before { content: ""; clip-path: ellipse(55% 50% at 50% 100%); position: absolute; background: var(--curve-background-colour, linear-gradient(var(--gradient-angle, 270deg), #ff2871 var(--gradient-offset, 33%), #ff715c)); top: -100px; height: 100px; width: 100%; left: 0; } .has\:curve.background-bar\:grey { --curve-background-colour: #F7F7F7; } @media (max-width: 768px) { #steps .node-container { max-width: 400px; margin-left: auto; margin-right: auto; } } @media (min-width: 769px) { video-container { order: 1; } #steps .node-container { padding: var(--gutter1) 0 var(--gutter1) var(--gutter4); max-width: 45%; margin: -10em auto 0; } #steps .node-container div > *:not(:first-child), #steps .node-container svg { margin: 0; } #steps .node-container:first-of-type { margin-top: 0; } #steps .node-container:nth-of-type(odd) { margin-left: 0; } #steps .node-container:nth-of-type(even) { margin-right: 0; } #steps .node-container:before { top: 25px; left: 0; } #steps .node-container:after { left: 33%; } #steps .node-container svg { margin: var(--gap) auto 0; } } @media (min-width: 1281px) { #steps .node-container { flex-direction: row; margin: -5em auto 0; } #steps .node-container:before { top: 5px; left: 0px; } #steps .node-container:after { min-height: 500px; min-width: 500px; top: -50px; } #steps .node-container svg { margin: 0 0 0 calc(var(--gap) * 2); } } } /*# sourceMappingURL=sourcemaps/global.css.map */