/* SignicatBranding - BEM block: signicat-branding */ .signicat-branding { width: 560px; justify-content: right; margin: 0 auto; padding-top: 15px; padding-right: 15px; line-height: 28px; display: flex; } /* Width modifiers */ .signicat-branding--w-560 { width: 560px; } .signicat-branding--w-500 { width: 500px; } .signicat-branding--w-940 { width: 940px; } .signicat-branding--w-1000 { width: 1000px; } .signicat-branding--w-fit-content { width: fit-content; } .signicat-branding--w-full { width: calc(100% - 80px); } /* Margin modifiers */ .signicat-branding--m-0 { margin: 0; } /* Margin-mobile modifiers (applied via media query) */ /* Padding-top modifiers */ .signicat-branding--pt-4 { padding-top: 4px; } /* Desktop visibility */ .signicat-branding--hide-desktop { display: none; } @media (max-width: 980px) { .signicat-branding { width: 100%; height: auto !important; min-width: auto; margin: 20px 0 0 0; padding: 0 0 0 0; padding-right: 5px; box-sizing: border-box; } /* Mobile visibility */ .signicat-branding--hide-mobile { display: none; } /* Mobile margin override */ .signicat-branding--mm-0 { margin: 0; } .signicat-branding--mm-10 { margin: 10px; } .signicat-branding--mm-20-0 { margin: 20px 0 0 0; } } .signicat-branding__tagline { font-size: 12px; color: var(--signicat-logo-tagline-color, #959595); margin-right: 5px; font-family: 'Inter', sans-serif; } .signicat-branding__tagline--on-sign-doc { color: var( --signicat-logo-on-sign-doc-tagline-color, var(--signicat-logo-tagline-color, #959595) ); } .signicat-branding__logo svg { height: 28px; } /* SignicatBrandingMobile - BEM block: signicat-branding-mobile */ .signicat-branding-mobile { display: none; } @media (max-width: 980px) { .signicat-branding-mobile { display: block; } } /* TopBar - BEM block: top-bar */ /* Base header styles shared across variants */ .top-bar__header { display: flex; align-items: center; } /* Amex variant */ .top-bar__header--amex { justify-content: space-between; padding: 0 20px; height: 60px; background-color: #fff; border-bottom: 1px solid rgba(236, 237, 238, 1); } /* Nordax variant */ .top-bar__header--nordax { justify-content: flex-start; padding: 0 20px; height: 65px; background-color: #09264e; } /* Enpal variant */ .top-bar__header--enpal { justify-content: space-between; padding: 0 64px; height: 64px; width: calc(100vw - 144px); position: absolute; top: 30px; } @media (max-width: 980px) { .top-bar__header--enpal { position: fixed; top: 0; background-color: #fff; padding: 30px 32px 16px 32px; height: 32px; width: calc(100vw - 64px); z-index: 1000; } } /* Elavon variant */ .top-bar__header--elavon { justify-content: space-between; padding: 0 64px; height: 60px; width: calc(100vw - 128px); position: absolute; top: 30px; } @media (max-width: 980px) { .top-bar__header--elavon { position: fixed; top: 0; background-color: #fff; padding: 30px 32px 16px 32px; height: 30px; width: calc(100vw - 64px); z-index: 1000; } } /* Onventis variant */ .top-bar__header--onventis { justify-content: space-between; padding: 0 64px; height: 60px; width: calc(100vw - 128px); position: absolute; top: 30px; } @media (max-width: 980px) { .top-bar__header--onventis { position: fixed; top: 0; background-color: #fff; padding: 30px 32px 16px 32px; height: 30px; width: calc(100vw - 64px); z-index: 1000; } } /* Enpal variant */ .top-bar__header--raisin { justify-content: space-between; padding: 0 50px; height: 32px; width: calc(100vw - 100px); position: absolute; top: 50px; } @media (max-width: 980px) { .top-bar__header--raisin { position: fixed; top: 0; background-color: #fff; padding: 24px 32px 16px 32px; height: 32px; width: calc(100vw - 64px); z-index: 1000; } } .button { outline: none; padding: var(--button-padding, 10px 15px); background-color: var(--button-bg-color, #2c60ff); border-radius: var(--button-border-radius, 8px); min-width: var(--button-min-width, auto); max-width: auto; width: var(--button-width, auto); height: var(--button-height, auto); border: var(--button-border, 1px solid #2c60ff); box-shadow: var(--button-box-shadow, none); margin: var(--button-margin, 0); color: var(--button-color, #ffffff) !important; display: flex; gap: 8px; cursor: pointer; align-items: center; justify-content: center; font-family: inherit; font-size: var(--button-font-size, 14px); font-weight: var(--button-font-weight, 500); text-decoration: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; position: relative; } .button .colorized--fill { fill: var(--button-color, #2c60ff); } .button .colorized--stroke { stroke: var(--button-color, #0d319d); } .button:hover { color: var(--button-color-hover, #ffffff) !important; background-color: var(--button-bg-color-hover, #0d319d); border: var(--button-border-hover, 1px solid #0d319d); cursor: pointer; } .button:hover .colorized--fill { fill: var(--button-color-hover, #ffffff); } .button:hover .colorized--stroke { stroke: var(--button-bg-color-hover, #0d319d); } .button:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .button:disabled, .button[disabled] { background-color: var(--button-bg-color-disabled, #9dafe5); border: var(--button-border-disabled, 1px solid #9dafe5); color: var(--button-color-disabled, #dee6ff) !important; cursor: pointer; } .button:disabled .colorized--fill, .button[disabled] .colorized--fill { fill: var(--button-color-disabled, #dee6ff); } .button:disabled .colorized--stroke, .button[disabled] .colorized--stroke { stroke: var(--button-bg-color-disabled, #9dafe5); } @media (max-width: 980px) { .button { font-size: var(--button-font-size, 16px); width: 100%; height: var(--button-height-mobile, auto); padding: var(--button-padding, 10px 15px); margin: 0; } } .button__animatable { transition: all 0.5s ease-out; } .button__icon { display: flex; align-items: center; justify-content: center; } .button__has-button-text::after { content: var(--btn-button-text); visibility: hidden; display: inline-block; white-space: nowrap; } .button__pointer-events-none { pointer-events: none; } .button .loading-spinner__wrap { --spinner-rounded: var(--button-spinner-rounded, 0); --spinner-wrap-padding: 0; position: absolute; inset: 0; } .button .loading-spinner__border, .button .loading-spinner__rounded { --spinner-width: 16px; --spinner-border-inset: 2px; --spinner-border-inset-double: 4px; --spinner-primary-color: var(--button-spinner-primary); --spinner-bg-color: var(--button-spinner-bg-color); --spinner-thickness: var(--button-spinner-thickness); } .button--secondary .loading-spinner__wrap { --spinner-rounded: var(--button-secondary-spinner-rounded, 0); --spinner-wrap-padding: 0; position: absolute; inset: 0; } .button--secondary .loading-spinner__border, .button--secondary .loading-spinner__rounded { --spinner-width: 16px; --spinner-border-inset: 2px; --spinner-border-inset-double: 4px; --spinner-primary-color: var(--button-secondary-spinner-primary); --spinner-bg-color: var(--button-secondary-spinner-bg-color); --spinner-thickness: var(--button-secondary-spinner-thickness); } .button--link .loading-spinner__wrap { --spinner-rounded: var(--button-link-spinner-rounded, 0); --spinner-wrap-padding: 0; position: absolute; inset: 0; } .button--link .loading-spinner__border, .button--link .loading-spinner__rounded { --spinner-width: 16px; --spinner-border-inset: 2px; --spinner-border-inset-double: 4px; --spinner-primary-color: var(--button-link-spinner-primary); --spinner-bg-color: var(--button-link-spinner-bg-color); --spinner-thickness: var(--button-link-spinner-thickness); } /* Secondary button variant */ .button--secondary { background-color: var(--button-secondary-bg-color, transparent); padding: var(--button-secondary-padding, 12px 24px); border-radius: var(--button-secondary-border-radius, 32px); width: var(--button-secondary-width, auto); height: var(--button-secondary-height, 48px); border: var(--button-secondary-border, 1px solid #dcdbe2); box-shadow: var(--button-secondary-box-shadow, none); margin: var(--button-secondary-margin, 0); color: var(--button-secondary-color, #34353a) !important; font-size: var(--button-secondary-font-size, 13px); font-weight: var(--button-secondary-font-weight, 600); } .button--secondary:hover { color: var(--button-secondary-color-hover, #34353a) !important; background-color: var(--button-secondary-bg-color-hover, rgba(0, 0, 0, 0.05)); border: var(--button-secondary-border-hover, 1px solid #dcdbe2); } .button--secondary:disabled, .button--secondary[disabled] { background-color: var(--button-secondary-bg-color-disabled, #f6f6f6); border: var(--button-secondary-border-disabled, 1px solid #f6f6f6); color: var(--button-secondary-color-disabled, #91969b) !important; } @media (max-width: 980px) { .button--secondary { width: 100%; height: var(--button-secondary-height-mobile, 48px); } } /* Link button variant */ .button--link { background-color: var(--button-link-bg-color, transparent); padding: var(--button-link-padding, 14px 40px); border-radius: var(--button-link-border-radius, 0px); width: var(--button-link-width, auto); height: var(--button-link-height, 48px); border: var(--button-link-border, 0); box-shadow: var(--button-link-box-shadow, none); margin: var(--button-link-margin, 0); color: var(--button-link-color, #34353a) !important; font-size: var(--button-link-font-size, 14px); font-weight: var(--button-link-font-weight, 600); text-decoration: var(--button-link-text-decoration, underline); } .button--link:hover { color: var(--button-link-color-hover, #34353a) !important; background-color: var(--button-link-bg-color-hover, transparent); border: var(--button-link-border-hover, 0); } .button--link:disabled, .button--link[disabled] { background-color: var(--button-link-bg-color-disabled, transparent); border: var(--button-link-border-disabled, 0); color: var(--button-link-color-disabled, rgba(0, 0, 0, 0.5)) !important; text-decoration: var(--button-link-text-decoration-disabled, none); cursor: default; } @media (max-width: 980px) { .button--link { width: 100%; height: var(--button-link-height-mobile, 48px); } } /* Disabled theme button variant */ .button--disabled-theme { background-color: var(--button-disabled-bg-color); padding: var(--button-disabled-padding, 12px 24px); border-radius: var(--button-disabled-border-radius, 32px); width: var(--button-disabled-width, auto); height: var(--button-disabled-height, 48px); border: var(--button-disabled-border, 1px solid #dcdbe2); box-shadow: var(--button-disabled-box-shadow, none); margin: var(--button-disabled-margin, 0); color: var(--button-disabled-color, #34353a) !important; font-size: var(--button-disabled-font-size, 13px); font-weight: var(--button-disabled-font-weight, 600); } .button--disabled-theme:hover { color: var(--button-disabled-color-hover) !important; background-color: var(--button-disabled-bg-color-hover); border: var(--button-disabled-border-hover); cursor: default; } @media (max-width: 980px) { .button--disabled-theme { width: 100%; height: var(--button-disabled-height-mobile, 48px); } } .button.button--warning, .button.button--warning:hover, .button.button--warning.button--secondary:hover { color: var(--button-warning-color, #d83535) !important; } .button.button--warning:disabled, .button.button--warning.button--secondary:disabled { color: var(--button-color-disabled, #34353a) !important; } .button.button--warning.button--secondary:disabled { color: var(--button-secondary-color-disabled, #34353a) !important; } /* Video ID CTA button variant */ .button--videoid-cta { background-color: var(--videoid-cta-btn-bg-color, transparent); padding: var(--videoid-cta-btn-padding, 10px 34px); border-radius: var(--videoid-cta-btn-border-radius, 32px); width: var(--videoid-cta-btn-width, 150px); border: var(--videoid-cta-btn-border, none); box-shadow: var(--videoid-cta-btn-box-shadow, none); margin: var(--videoid-cta-btn-margin, 32px 0 0 0); color: var(--videoid-cta-btn-color) !important; font-size: var(--videoid-cta-btn-font-size, 18px); font-weight: var(--videoid-cta-btn-font-weight, 700); text-decoration: var(--videoid-cta-btn-text-decoration, underline); } .button--videoid-cta:hover { color: var(--videoid-cta-btn-color-hover) !important; background-color: var(--videoid-cta-btn-bg-color-hover, transparent); border: var(--videoid-cta-btn-border-hover, none); } .button--videoid-cta:disabled, .button--videoid-cta[disabled] { background-color: var(--videoid-cta-btn-bg-color-disabled, transparent); border: var(--videoid-cta-btn-border-disabled, none); color: var(--videoid-cta-btn-color-disabled) !important; } /* PDF zoom button style */ .button--pdf-zoom { border-radius: var(--pdf-zoom-border-radius, 50%); width: 44px; height: 44px; padding: 0; background-color: var(--pdf-zoom-bg-color, #ffffff); color: var(--pdf-zoom-color, #34353a) !important; border: var(--pdf-zoom-border, 1px solid #cecbd6); } .button--pdf-zoom:hover { background-color: var(--pdf-zoom-bg-color-hover, #f1f3f7); color: var(--pdf-zoom-color-hover, #34353a) !important; border: var(--pdf-zoom-border-hover, 1px solid #cecbd6); } .button--pdf-zoom .colorized--fill { fill: var(--pdf-zoom-color, #34353a); } .button--pdf-zoom:hover .colorized--fill { fill: var(--pdf-zoom-color-hover, #34353a); } .button--pdf-zoom .colorized--stroke { stroke: var(--pdf-zoom-color, #34353a); } .button--pdf-zoom:hover .colorized--stroke { stroke: var(--pdf-zoom-color-hover, #34353a); } .button--pdf-zoom svg path { fill: var(--pdf-zoom-color, #34353a); } .button--pdf-zoom:hover svg path { fill: var(--pdf-zoom-color-hover, #34353a); } @media (max-width: 980px) { .button--pdf-zoom { width: 44px; height: 44px; padding: 0; } } .button--hint-tooltip, .button--hint-tooltip.generic__tooltip-arrow[data-direction='bottom'] { left: calc(100% - 40px); } /* Width modifier classes */ .button--w160 { --button-width: 160px; --button-secondary-width: 160px; --button-disabled-width: 160px; } .button--w164 { --button-width: 164px; --button-secondary-width: 164px; --button-disabled-width: 164px; } .button--w190 { --button-width: 190px; --button-secondary-width: 190px; --button-disabled-width: 190px; } .button--w224 { --button-width: 224px; --button-secondary-width: 224px; --button-disabled-width: 224px; } .button--min-w224 { --button-min-width: 224px; --button-secondary-min-width: 224px; --button-disabled-min-width: 224px; } .button--fit-content-center { --button-width: fit-content; --button-margin: 0 auto; --button-secondary-width: fit-content; --button-secondary-margin: 0 auto; --button-link-width: fit-content; --button-link-margin: 0 auto; --button-disabled-width: fit-content; --button-disabled-margin: 0 auto; } .button--proceed { --button-min-width: 250px; --button-padding: 10px 20px; --button-margin: 0 0 3px 0; max-width: 100%; &.button--secondary { --button-secondary-padding: 10px 20px; --button-secondary-margin: 0 0 3px 0; } &.button--link { --button-link-padding: 10px 20px; --button-link-margin: 0 0 3px 0; --button-link-font-weight: 700; } } .button--only-icon-on-mobile { @media (max-width: 980px) { min-width: 44px; max-width: 44px; padding: 0; border-radius: var(--download-btn-border-radius-mobile, 50%); width: 44px; height: 44px; } } .select-input__container { display: inline-block; width: 100%; height: var(--select-input-height, 50px); } .select-input__container .select-input { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .select-input__container .select-input__value-container { padding: 10px 14px; } .select-input__container .select-input__single-value { color: inherit; margin: 0; } .select-input__container .select-input__single-value--is-disabled { color: #999; } .select-input__container .select-input__input-container { color: inherit; margin: 0; } .select-input__container .select-input__input { caret-color: transparent; } .select-input__container .select-input__control { border-width: var(--select-input-border-width, 1px); background-color: #fff; color: inherit; border-radius: var(--select-input-border-radius, 8px); min-width: 160px; border-color: var(--select-input-border-color, hsl(0, 0%, 80%)) !important; height: var(--select-input-height, 50px); } .select-input__container .select-input__control:not(.select-input__control--is-focused) { box-shadow: none; } .select-input__container .select-input__control .select-input__indicator { color: hsl(0, 0%, 80%); } .select-input__container .select-input__control .select-input__indicator:hover { color: var(--select-input-indicator-color-hover, hsl(0, 0%, 80%)); } .select-input__container .select-input__control .select-input__indicator-separator { background-color: hsl(0, 0%, 80%) !important; } .select-input__container .select-input__control:hover { cursor: pointer; border-color: var(--select-input-border-color-focus, #000) !important; box-shadow: 0px 0px 0px 1px var(--select-input-border-color-focus, #000); } .select-input__container .select-input__control--is-focused { border-color: var(--select-input-border-color-focus, #000); outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition); } .select-input__container .select-input__control--is-focused .select-input__indicator { color: var(--select-input-indicator-color-focus, hsl(0, 0%, 80%)); } .select-input__container .select-input__control--is-focused .select-input__indicator-separator { background-color: var(--select-input-border-color-focus, hsl(0, 0%, 80%)) !important; } .select-input__container .select-input__control--menu-is-open { background-color: #fff; border-radius: var(--select-input-border-radius, 8px) var(--select-input-border-radius, 8px) 0px 0px; border-color: var(--select-input-border-color-focus, #000) !important; } .select-input__container .select-input__control--menu-is-open:hover { background-color: #fff; border-color: var(--select-input-border-color-focus, #000); } .select-input__container .select-input__menu { border-radius: 0px 0px var(--select-input-border-radius, 8px) var(--select-input-border-radius, 8px); border-color: var(--select-input-border-color-focus, #000); background-color: #fff; } .select-input__container .select-input__menu-list { padding-top: 0px; padding-bottom: 0px; border-radius: 0px 0px var(--select-input-border-radius, 8px) var(--select-input-border-radius, 8px); } .select-input__container .select-input__option { padding: 10px 16px; color: inherit; cursor: pointer; } .select-input__container .select-input__option span { margin-bottom: 0; } .select-input__container .select-input__option--is-focused, .select-input__container .select-input__option:focus-visible, .select-input__container .select-input__option:active { background-color: var(--select-input-bg-color-focus, transparent); } .select-input__container .select-input__option--is-selected { background-color: var(--select-input-bg-color-selected, #000) !important; } .select-input__show-checkmark .select-input__option--is-selected { background-image: var(--select-input-checkmark-url); background-position: calc(100% - 20px) center; background-repeat: no-repeat; } .select-input__container .select-input__option--is-selected span { color: var(--select-input-color-selected, #fff) !important; font-weight: 700; } .select-input__container .select-input__indicator-separator { width: var(--select-input-border-width, 100%); } .country-select__container { display: inline-block; width: 100%; } .country-select__country-flag { display: inline-block; width: 32px; height: 19px; margin-right: 10px; border: 1px solid #bebebe; } .country-select__country-flag img { width: 32px; height: 19px; object-fit: cover; } .country-select__country-item-inner { display: flex; width: 100%; align-items: center; } .icon__container { width: var(--icon-size, 18px); height: var(--icon-size, 18px); display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: cover; } .icon__container svg { width: 100%; height: 100%; } .icon__colorized svg .colorized--stroke { stroke: var(--icon-color, var(--icon-main-color)); } .icon__colorized svg .colorized--fill { fill: var(--icon-color, var(--icon-main-color)); } .icon__colorized svg:hover .colorized--stroke { stroke: var(--icon-color-hover, var(--icon-color, var(--icon-main-color))); } .icon__colorized svg:hover .colorized--fill { fill: var(--icon-color-hover, var(--icon-color, var(--icon-main-color))); } .doc-checkbox { display: flex; flex-direction: column; margin: var(--doc-checkbox-margin, 0); position: relative; } .doc-checkbox .doc-checkbox__go-to { position: absolute; top: 0; right: 0; } .doc-checkbox__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--doc-checkbox-header-margin-bottom, 8px); h3 { margin: 0; padding: 0; font-size: var(--doc-checkbox-title-font-size, 16px); width: calc(100% - var(--doc-checkbox-icon-size, 26px) - var(--doc-checkbox-icon-margin, 8px)); &::after { color: var(--input-required-asterisk-color); } &[data-required]::after { content: ' *'; } } } .doc-checkbox__condition { width: var(--doc-checkbox-width, 384px); display: flex; flex-direction: column; } @media (max-width: 980px) { .doc-checkbox__condition { width: 100%; } } .doc-checkbox__content { display: flex; justify-content: space-between; } .doc-checkbox__content .label-checkbox { font-size: var(--doc-checkbox-content-font-size, 14px); color: var(--container-color, black); } @media (max-width: 980px) { .doc-checkbox__content { margin: var(--doc-checkbox-margin-mobile, 0); } } .doc-checkbox__go-to { cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; display: block; color: var(--doc-checkbox-icon-color, var(--icon-color, var(--icon-main-color))); background: none; border: none; padding: 0; } .doc-checkbox__go-to:hover { color: var( --doc-checkbox-icon-hover, var(--doc-checkbox-icon-color, var(--icon-color, var(--icon-main-color))) ); } .doc-checkbox__go-to .icon__container { width: var(--doc-checkbox-icon-size, 26px); height: var(--doc-checkbox-icon-size, 26px); } .doc-checkbox__go-to .icon__colorized svg .colorized--stroke { stroke: var(--doc-checkbox-icon-color, var(--icon-color, var(--icon-main-color))); } .doc-checkbox__go-to .icon__colorized svg .colorized--fill { fill: var(--doc-checkbox-icon-color, var(--icon-color, var(--icon-main-color))); } .doc-checkbox__go-to .icon__colorized svg:hover .colorized--stroke { stroke: var( --doc-checkbox-icon-hover, var(--doc-checkbox-icon-color, var(--icon-color, var(--icon-main-color))) ); } .doc-checkbox__go-to .icon__colorized svg:hover .colorized--fill { fill: var( --doc-checkbox-icon-hover, var(--doc-checkbox-icon-color, var(--icon-color, var(--icon-main-color))) ); } .doc-checkbox__go-to:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .doc-checkbox__main-label { max-width: 90%; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer; } .header__container { color: var(--header-color, rgb(52, 53, 58)); font-size: var(--header-font-size, 1.625rem); line-height: var(--header-line-height, 2.25rem); margin: var(--header-margin, 15px 0); text-align: var(--header-text-align, center); width: var(--header-width, 100%); font-family: var(--font-family-headline, inherit); font-weight: 700; &.no-margin { --header-margin: 0; } &.m-30-0 { --header-margin: 30px 0; } &.m-30-0-50 { --header-margin: 30px 0 50px; } &.m-0-0-40 { --header-margin: 0 0 40px; } &.m-0-0-30 { --header-margin: 0 0 30px; } &.m-40-0-0 { --header-margin: 40px 0 0; } &.m-0-0-15 { --header-margin: 0 0 15px; } &.m-15-0-35 { --header-margin: 15px 0 35px; } &.m-10-0-0 { --header-margin: 10px 0 0; } &.m-20-0-0 { --header-margin: 20px 0 0; } &.text-left { --header-text-align: left; } } .header__flex-space-between { display: flex; justify-content: space-between; align-items: flex-start; } .header__flex-space-between span { display: flex; align-items: start; flex-direction: column; } .header__container span > span { font-size: calc(var(--header-font-size, 1.625rem) / 2); line-height: initial; } @media (max-width: 980px) { .header__container { font-size: var(--header-font-size-mobile, 1.25rem); line-height: var(--header-line-height-mobile, 1.9375rem); overflow-wrap: break-word; } .header__container span > span { font-size: calc(var(--header-font-size-mobile, 1.25rem) / 2); } } .otp-input__container { display: flex; justify-content: center; width: 384px; column-gap: 10px; margin: 40px auto; max-width: 100%; &.no-margin { margin: 0 auto; } &.error { .otp-input__box { border: 1px solid #d83535; box-shadow: 0 0 0 3px #ffb0b0; } } } @media (max-width: 980px) { .otp-input__container { width: calc(100vw - 60px); } } .otp-input__boxes { display: flex; gap: var(--otp-column-gap, 10px); } .otp-input__box { display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; box-sizing: border-box; min-width: 45px; width: 45px; max-width: 45px; min-height: var(--otp-input-height, 60px); height: var(--otp-input-height, 60px); max-height: var(--otp-input-height, 60px); border: var(--otp-input-border, 2px solid #ccc); border-radius: var(--otp-border-radius, 2px); text-align: center; font-size: var(--otp-font-size, 22px); font-weight: 300; line-height: 1; background-color: var(--otp-bg-color, #ffffff); color: var(--otp-font-color, black); } .otp-input__box-active { outline: 2px solid var(--otp-focus-color, orange); background-color: var(--otp-focus-bg-color, #fcfcfc); } /* === Modifier classes === */ /* Full width (OtpPage) */ .otp-input__container--full-width { width: 100%; } /* Narrow width for pin input (EnterPin) */ .otp-input__container--narrow { width: 190px; } @media (max-width: 980px) { .otp-input__container--narrow { width: 190px; } } /* Fit-content width - adapts to number of boxes (LtqcSignPage) */ .otp-input__container--fit-width { width: fit-content; } @media (max-width: 980px) { .otp-input__container--fit-width { width: fit-content; } } /* No vertical margins */ .otp-input__container--compact { margin-top: 0; margin-bottom: 0; } /* Reduced top margin */ .otp-input__container--mt-20 { margin-top: 20px; } /* Box height 68px */ .otp-input__container--h-68 .otp-input__box { min-height: 68px; height: 68px; max-height: 68px; } /* Box height 50px */ .otp-input__container--h-50 .otp-input__box { min-height: 50px; height: 50px; max-height: 50px; } .otp-input__hidden-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; background: transparent; color: transparent; caret-color: transparent; -webkit-text-fill-color: transparent; user-select: text; -webkit-user-select: text; -webkit-tap-highlight-color: transparent; left: -9999px; } .otp-input__button-absolute-wrap { display: flex; justify-content: flex-end; margin-bottom: 10px; padding-top: 30px; box-sizing: border-box; border-top: 1px solid #ebebeb; background-color: #fff; } @media (max-width: 980px) { .otp-input__button-absolute-wrap { justify-content: center; position: fixed; padding: 30px 20px 20px; top: calc(100dvh - 120px); bottom: 0; left: 0; width: 100%; border-top: 1px solid #ebebeb; } } .otp-input__button-absolute-wrap--no-border-top { border-top: none; } .otp-input__code-input-wrapper { width: 100%; } .otp-input__code-input-wrapper p { width: 100%; text-align: center; margin-top: 10px; color: #ec0000; } .otp-input__code-input-wrapper span { display: block; margin-top: 10px; width: 100%; text-align: center; color: #000; font-size: 12px; font-style: normal; font-weight: 300; } .otp-input__code-input-wrapper > div > input { border-radius: 2px; border: 2px solid #ced4dc; color: #000; text-align: center; font-family: inherit; font-size: 22px; font-style: normal; font-weight: 300; line-height: 170%; } .otp-input__code-input-wrapper--loading > div > input { background: #ced4dc; color: #9b9b9b; } .otp-input__code-input-wrapper--error > div > input { color: #ec0000; } /* Wrap */ .loading-spinner__wrap { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--spinner-wrap-padding, 0); height: var(--spinner-wrap-height, auto); position: var(--spinner-wrap-position, relative); } /* * Auto-detection mode (.loading-spinner--auto): * Both spinner types are rendered in the DOM. CSS toggles visibility based * on --spinner-rounded (0 or 1) using calc() as a multiplier. * This avoids the flash caused by useEffect/useLayoutEffect state changes. * * --spinner-rounded: 1 => show rounded, hide border * --spinner-rounded not set (defaults to 0) => show border, hide rounded */ .loading-spinner--auto > .loading-spinner__border { max-height: calc((1 - var(--spinner-rounded, 0)) * 9999px); overflow: hidden; opacity: calc(1 - var(--spinner-rounded, 0)); } .loading-spinner--auto > .loading-spinner__rounded { max-height: calc(var(--spinner-rounded, 0) * 9999px); overflow: hidden; opacity: var(--spinner-rounded, 0); } /* * In-button mode: both spinner types rendered, toggled via opacity only. * No overflow:hidden so spinners aren't clipped in small button containers. * Children are absolutely positioned and centered within the wrap. */ .loading-spinner--in-button > .loading-spinner__border, .loading-spinner--in-button > .loading-spinner__rounded { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loading-spinner--in-button > .loading-spinner__border { opacity: calc(1 - var(--spinner-rounded, 0)); } .loading-spinner--in-button > .loading-spinner__rounded { opacity: var(--spinner-rounded, 0); } /* Rounded spinner (SVG-based) */ .loading-spinner__rounded { width: var(--spinner-width, 68px); height: var(--spinner-width, 68px); display: inline-block; } .loading-spinner__rounded svg { width: 100%; height: 100%; } .loading-spinner__rounded .track { fill: none; stroke: var(--spinner-bg-color, #399953); stroke-width: var(--spinner-thickness, 8); } .loading-spinner__rounded .arc { fill: none; stroke: var(--spinner-primary-color, var(--spinner-primary, #399953)); stroke-width: var(--spinner-thickness, 8); stroke-linecap: round; stroke-dasharray: 25 100; transform-origin: 50% 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .loading-spinner__rounded .arc { animation: none; } } /* Border spinner (CSS gradient-based) */ @keyframes rotate { 100% { transform: rotate(1turn); } } .loading-spinner__border { position: relative; z-index: 0; width: var(--spinner-width, 68px); height: var(--spinner-width, 68px); display: block; box-sizing: border-box; border-radius: 50px; overflow: hidden; } .loading-spinner__border::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: var(--spinner-bg-color, #399953); background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient( var(--spinner-primary-color, var(--spinner-primary, #399953)), var(--spinner-primary-color, var(--spinner-primary, #399953)) ), linear-gradient(var(--spinner-bg-color, #ffffff), var(--spinner-bg-color, #ffffff)), linear-gradient(var(--spinner-bg-color, #ffffff), var(--spinner-bg-color, #ffffff)); animation: rotate 0.6s cubic-bezier(0.67, 0.34, 0.3, 0.71) infinite; } .loading-spinner__border::after { content: ''; position: absolute; z-index: -1; left: var(--spinner-border-inset, 6px); top: var(--spinner-border-inset, 6px); width: calc(100% - var(--spinner-border-inset-double, 12px)); height: calc(100% - var(--spinner-border-inset-double, 12px)); background: var(--spinner-iframe-bg, var(--spinner-bg-color, #ffffff)); border-radius: 50px; } /* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ :root { --react-pdf-annotation-layer: 1; --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); --input-focus-border-color: Highlight; --input-focus-outline: 1px solid Canvas; --input-unfocused-border-color: transparent; --input-disabled-border-color: transparent; --input-hover-border-color: black; --link-outline: none; } @media screen and (forced-colors: active) { :root { --input-focus-border-color: CanvasText; --input-unfocused-border-color: ActiveText; --input-disabled-border-color: GrayText; --input-hover-border-color: Highlight; --link-outline: 1.5px solid LinkText; } .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required { outline: 1.5px solid selectedItem; } .annotationLayer .linkAnnotation:hover { backdrop-filter: invert(100%); } } .annotationLayer { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; z-index: 3; } .annotationLayer[data-main-rotation='90'] .norotate { transform: rotate(270deg) translateX(-100%); } .annotationLayer[data-main-rotation='180'] .norotate { transform: rotate(180deg) translate(-100%, -100%); } .annotationLayer[data-main-rotation='270'] .norotate { transform: rotate(90deg) translateY(-100%); } .annotationLayer canvas { position: absolute; width: 100%; height: 100%; } .annotationLayer section { position: absolute; text-align: initial; pointer-events: auto; box-sizing: border-box; margin: 0; transform-origin: 0 0; } .annotationLayer .linkAnnotation { outline: var(--link-outline); } .textLayer.selecting ~ .annotationLayer section { pointer-events: none; } .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a { position: absolute; font-size: 1em; top: 0; left: 0; width: 100%; height: 100%; } .annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover { opacity: 0.2; background: rgba(255, 255, 0, 1); box-shadow: 0 2px 10px rgba(255, 255, 0, 1); } .annotationLayer .textAnnotation img { position: absolute; cursor: pointer; width: 100%; height: 100%; top: 0; left: 0; } .annotationLayer .textWidgetAnnotation :is(input, textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { background-image: var(--annotation-unfocused-field-background); border: 2px solid var(--input-unfocused-border-color); box-sizing: border-box; font: calc(9px * var(--total-scale-factor)) sans-serif; height: 100%; margin: 0; vertical-align: top; width: 100%; } .annotationLayer .textWidgetAnnotation :is(input, textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required { outline: 1.5px solid red; } .annotationLayer .choiceWidgetAnnotation select option { padding: 0; } .annotationLayer .buttonWidgetAnnotation.radioButton input { border-radius: 50%; } .annotationLayer .textWidgetAnnotation textarea { resize: none; } .annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled], .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] { background: none; border: 2px solid var(--input-disabled-border-color); cursor: not-allowed; } .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover { border: 2px solid var(--input-hover-border-color); } .annotationLayer .textWidgetAnnotation :is(input, textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover { border-radius: 2px; } .annotationLayer .textWidgetAnnotation :is(input, textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus { background: none; border: 2px solid var(--input-focus-border-color); border-radius: 2px; outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus { background-image: none; background-color: transparent; } .annotationLayer .buttonWidgetAnnotation.checkBox :focus { border: 2px solid var(--input-focus-border-color); border-radius: 2px; outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.radioButton :focus { border: 2px solid var(--input-focus-border-color); outline: var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after, .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { background-color: CanvasText; content: ''; display: block; position: absolute; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { height: 80%; left: 45%; width: 1px; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before { transform: rotate(45deg); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { transform: rotate(-45deg); } .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { border-radius: 50%; height: 50%; left: 30%; top: 20%; width: 50%; } .annotationLayer .textWidgetAnnotation input.comb { font-family: monospace; padding-left: 2px; padding-right: 0; } .annotationLayer .textWidgetAnnotation input.comb:focus { /* * Letter spacing is placed on the right side of each character. Hence, the * letter spacing of the last character may be placed outside the visible * area, causing horizontal scrolling. We avoid this by extending the width * when the element has focus and revert this when it loses focus. */ width: 103%; } .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input { appearance: none; } .annotationLayer .popupTriggerArea { height: 100%; width: 100%; } .annotationLayer .fileAttachmentAnnotation .popupTriggerArea { position: absolute; } .annotationLayer .popupWrapper { position: absolute; font-size: calc(9px * var(--total-scale-factor)); width: 100%; min-width: calc(180px * var(--total-scale-factor)); pointer-events: none; } .annotationLayer .popup { position: absolute; max-width: calc(180px * var(--total-scale-factor)); background-color: rgba(255, 255, 153, 1); box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgba(136, 136, 136, 1); border-radius: calc(2px * var(--total-scale-factor)); padding: calc(6px * var(--total-scale-factor)); margin-left: calc(5px * var(--total-scale-factor)); cursor: pointer; font: message-box; white-space: normal; word-wrap: break-word; pointer-events: auto; } .annotationLayer .popup > * { font-size: calc(9px * var(--total-scale-factor)); } .annotationLayer .popup h1 { display: inline-block; } .annotationLayer .popupDate { display: inline-block; margin-left: calc(5px * var(--total-scale-factor)); } .annotationLayer .popupContent { border-top: 1px solid rgba(51, 51, 51, 1); margin-top: calc(2px * var(--total-scale-factor)); padding-top: calc(2px * var(--total-scale-factor)); } .annotationLayer .richText > * { white-space: pre-wrap; font-size: calc(9px * var(--total-scale-factor)); } .annotationLayer .highlightAnnotation, .annotationLayer .underlineAnnotation, .annotationLayer .squigglyAnnotation, .annotationLayer .strikeoutAnnotation, .annotationLayer .freeTextAnnotation, .annotationLayer .lineAnnotation svg line, .annotationLayer .squareAnnotation svg rect, .annotationLayer .circleAnnotation svg ellipse, .annotationLayer .polylineAnnotation svg polyline, .annotationLayer .polygonAnnotation svg polygon, .annotationLayer .caretAnnotation, .annotationLayer .inkAnnotation svg polyline, .annotationLayer .stampAnnotation, .annotationLayer .fileAttachmentAnnotation { cursor: pointer; } .annotationLayer section svg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .annotationLayer .annotationTextContent { position: absolute; width: 100%; height: 100%; opacity: 0; color: transparent; user-select: none; pointer-events: none; } .annotationLayer .annotationTextContent span { width: 100%; display: inline-block; } /* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ :root { --react-pdf-text-layer: 1; --highlight-bg-color: rgba(180, 0, 170, 1); --highlight-selected-bg-color: rgba(0, 100, 0, 1); } @media screen and (forced-colors: active) { :root { --highlight-bg-color: Highlight; --highlight-selected-bg-color: ButtonText; } } [data-main-rotation='90'] { transform: rotate(90deg) translateY(-100%); } [data-main-rotation='180'] { transform: rotate(180deg) translate(-100%, -100%); } [data-main-rotation='270'] { transform: rotate(270deg) translateX(-100%); } .textLayer { position: absolute; text-align: initial; inset: 0; overflow: hidden; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; } .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; margin: 0; transform-origin: 0 0; } /* Only necessary in Google Chrome, see issue 14205, and most unfortunately * the problem doesn't show up in "text" reference tests. */ .textLayer span.markedContent { top: 0; height: 0; } .textLayer .highlight { margin: -1px; padding: 1px; background-color: var(--highlight-bg-color); border-radius: 4px; } .textLayer .highlight.appended { position: initial; } .textLayer .highlight.begin { border-radius: 4px 0 0 4px; } .textLayer .highlight.end { border-radius: 0 4px 4px 0; } .textLayer .highlight.middle { border-radius: 0; } .textLayer .highlight.selected { background-color: var(--highlight-selected-bg-color); } /* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */ .textLayer br::selection { background: transparent; } .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: -1; cursor: default; user-select: none; } .textLayer.selecting .endOfContent { top: 0; } .hiddenCanvasElement { position: absolute; top: 0; left: 0; width: 0; height: 0; display: none; } .pdf-core__viewer-container { width: var(--vc-width, 600px); height: var(--vc-height, 800px); overflow-x: auto; overflow-y: hidden; background: var(--pdf-background-color, #fff); } .pdf-core__loading-container { width: var(--lc-width, auto); height: var(--lc-height, auto); display: flex; flex-direction: column; align-items: center; justify-content: center; } .pdf-core__loading-text { color: var(--container-color, black); font-size: 16px; margin-top: 10px; margin-bottom: 8px; } .pdf-core__loading-subtext { color: var(--container-color, black); font-size: 12px; } .pdf-core__error-fallback-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pdf-core__error-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--pdf-background-color, #fff5f5); color: var(--pdf-color, #e53e3e); padding: 20px 0; } .pdf-core__error-icon { font-size: 48px; margin-bottom: 16px; } .pdf-core__error-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; width: 100%; padding: 0 16px; text-align: center; max-width: 450px; } .pdf-core__error-message { font-size: 24px; line-height: 36px; text-align: center; max-width: 400px; font-weight: 600; } .pdf-core__page-container { display: flex; justify-content: var(--pc-justify, center); align-items: start; padding: 12px 16px; min-height: var(--pc-min-height); min-width: 100%; overflow: visible; pointer-events: var(--pc-pointer-events, none); position: relative; z-index: 1; } .pdf-core__page-container:hover { z-index: 2; } .pdf-core__placeholder-page { width: var(--pp-width); height: var(--pp-height); background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%); border: 1px solid #dee2e6; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; } .pdf-core__placeholder-page::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .pdf-core__placeholder-text { font-size: 14px; font-weight: 500; z-index: 1; } .pdf-core__placeholder-subtext { font-size: 12px; margin-top: 4px; z-index: 1; } .pdf-core__pdf-page-wrapper { position: relative; flex-shrink: 0; pointer-events: auto; } .pdf-core__pdf-page-wrapper .react-pdf__Page { border: 1px solid #e0e0e0; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); pointer-events: auto; } .pdf-core__pdf-page-wrapper .react-pdf__Page__canvas { display: block; max-width: var(--ppw-max-width, 100%); height: auto; pointer-events: auto; } /* DownloadDocumentButton - BEM block: download-doc-button */ .download-doc-button { display: flex; padding: var(--button-padding, 12px 16px); padding-top: 0px; padding-bottom: 0px; width: fit-content; align-items: center; justify-content: center; gap: 16px; outline: none; cursor: pointer; border-radius: var(--download-btn-border-radius, 100px); font-size: var(--button-font-size, 14px); font-family: inherit; margin: 0 20px 0 0; background-color: var(--download-btn-bg-color, #2a0062); color: var(--download-btn-color, #fff); border: var(--download-btn-border, 1px solid #2a0062); height: var(--download-btn-height, var(--button-height, auto)); text-decoration: none; } .download-doc-button:hover { background-color: var(--download-btn-bg-color-hover, #fff); color: var(--download-btn-color-hover, #2a0062); border: var(--download-btn-border-hover, 1px solid #2a0062); cursor: pointer; } .download-doc-button:disabled { background-color: var(--download-btn-bg-color-disabled, #ccc); color: var(--download-btn-color-disabled, #fff); border: var(--download-btn-border-disabled, 1px solid #ccc); cursor: not-allowed; } .download-doc-button:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .download-doc-button--margin-0 { margin: 0; } .download-doc-button div { margin: -12px; } @media (max-width: 980px) { .download-doc-button:not(.download-doc-button--always-display-text) { min-width: 44px; padding: 0; border-radius: var(--download-btn-border-radius-mobile, 50%); width: 44px; height: 44px; } .download-doc-button:not(.download-doc-button--always-display-text) span:nth-of-type(1) { display: none; } } .pdf-viewer__container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: var(--pdf-container-border, none); border-radius: 10px; background-color: var(--pdf-background-color, #f0f0f0); position: relative; } /* Firefox scrollbar (standard properties, only applied via @-moz-document to avoid disabling ::-webkit-scrollbar pseudo-elements in Chromium 121+) */ @-moz-document url-prefix() { .pdf-viewer__container * { scrollbar-width: auto; scrollbar-color: var(--pdf-scroll-handle-color, #888) var(--pdf-scroll-track-color, transparent); } } /* Webkit Browsers (Chrome, Safari, Edge) */ .pdf-viewer__container *::-webkit-scrollbar { width: 6px; height: 6px; } .pdf-viewer__container *::-webkit-scrollbar-track { background: var(--pdf-scroll-track-color, transparent); border-radius: 4px; } .pdf-viewer__container *::-webkit-scrollbar-thumb { background: var(--pdf-scroll-handle-color, #888); border-radius: 4px; min-height: 20px; transition: background-color 0.2s ease; } .pdf-viewer__container *::-webkit-scrollbar-thumb:hover { background: var(--pdf-scroll-handle-color, #888); cursor: pointer; } .pdf-viewer__container *::-webkit-scrollbar-corner { background: transparent; } .pdf-addons__page-number-indicator { height: 30px; margin: 12px 0; padding: var(--pdf-toolbox-padding, 0 8px); display: flex; justify-content: center; align-items: center; position: absolute; top: 12px; right: 42px; background-color: var(--pdf-toolbox-bg-color, rgba(0, 0, 0, 0.7)) !important; color: var(--pdf-toolbox-color, #fff) !important; border-radius: var(--pdf-toolbox-border-radius, 4px) !important; font-size: 14px; line-height: 20px; } .pdf-addons__page-number-indicator span { margin: 0 2px; } .pdf-addons__navigation { z-index: 99999; position: absolute; left: 0; bottom: 30px; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 16px; } .pdf-addons__navigation-inner { display: flex; gap: 18px; background-color: var(--nav-bg-color, rgba(99, 99, 99, 0.8)); color: var(--nav-color, white); border-radius: var(--nav-border-radius, 8px); box-sizing: border-box; padding: var(--nav-padding, 10px 30px); height: fit-content; width: fit-content; } .pdf-addons__zoom-button { all: unset; cursor: pointer; } .pdf-addons__scroll-document-button-container { position: absolute; z-index: 1; bottom: var(--sdb-bottom, 10px); left: 50%; transform: translate(-50%, -50%); width: fit-content; visibility: var(--sdb-visibility, hidden); } @media (max-width: 980px) { .pdf-addons__scroll-document-button-container { bottom: var(--sdb-bottom-mobile, -15px); } } .pdf-addons__external-zoom-control-wrap { width: 96px; display: flex; justify-content: center; align-items: center; gap: 8px; } /* PdfViewerOld - BEM block: pdf-old */ .pdf-old__container { display: inline-block; position: relative; overflow: hidden; box-sizing: border-box; padding: 10px; border: var(--pdf-container-border, none); border-radius: var(--pdf-container-border-radius, 4px); background-color: var(--pdf-background-color, none); } .pdf-old__container--focused { outline: var(--focus-outline, none); box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition, none); } @media (max-width: 980px) { .pdf-old__container { padding: 0; border-radius: 0; border: 0; background-color: #ffffff; margin: 0; } } .pdf-old__navigation { z-index: 99999; position: absolute; left: 0; bottom: 30px; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 16px; } .pdf-old__navigation-inner { display: flex; gap: 18px; box-sizing: border-box; height: fit-content; width: fit-content; color: white; } .pdf-old__navigation-pages { margin: 0 10px; display: flex; justify-content: center; gap: 10px; box-sizing: border-box; padding-right: 10px; } .pdf-old__inner-wrap { display: inline-block; position: relative; width: 100%; overflow-x: hidden; overflow-y: hidden; height: var(--iw-height, 700px); } .pdf-old__inner-wrap > div { width: 100% !important; height: var(--iw-height, 700px) !important; overflow-y: scroll; scrollbar-gutter: stable; } .pdf-old__inner-wrap > div::-webkit-scrollbar { width: var(--pdf-scroll-size, 10px); height: var(--pdf-scroll-size, 10px); } .pdf-old__inner-wrap > div::-webkit-scrollbar-track { background-color: var(--pdf-scroll-track-color, #ebebeb); border-radius: var(--pdf-scroll-radius, 10px); } .pdf-old__inner-wrap > div::-webkit-scrollbar-thumb { background: var(--pdf-scroll-handle-color, #6d6d6d); border-radius: var(--pdf-scroll-radius, 10px); } @media (max-width: 980px) { .pdf-old__inner-wrap { height: var(--iw-height-mobile, 700px); } .pdf-old__inner-wrap > div { height: var(--iw-height-mobile, 700px) !important; } } .pdf-old__page-navigation-inner { display: flex; gap: 18px; box-sizing: border-box; height: fit-content; width: calc(100% - 32px); } .pdf-old__page-navigation-inner .range { width: 100%; margin: 0 16px; } .pdf-old__range-container { z-index: 99999; margin: 12px 0; height: calc(100% - 24px); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; } .pdf-old__range-thumb { display: flex; justify-content: center; align-items: center; width: 44px; height: 44px; background-color: transparent; cursor: pointer; position: relative; } .pdf-old__range-thumb > div { width: 12px; height: 12px; border-radius: 50%; background-color: var(--pdf-scroll-handle-color, #6d6d6d); } .pdf-old__range-thumb > div:hover { background-color: var(--pdf-scroll-handle-hover-color, #000000); } .pdf-old__range-thumb:focus-visible { outline: none; } .pdf-old__range-thumb:focus-visible > div { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .pdf-old__range-track { width: 4px; height: 100%; margin: auto 16px; border-radius: 4px; background-color: var(--pdf-scroll-track-color, #ebebeb); } .pdf-old__page-number-indicator { height: 30px; margin: 12px 0; padding: 0 8px; display: flex; justify-content: center; align-items: center; position: absolute; top: 12px; right: 42px; background-color: #000000b2; color: #ffffff; border-radius: 4px; font-size: 14px; line-height: 20px; } .pdf-old__page-number-indicator span { margin: 0 2px; } .pdf-old__page-container { display: flex; justify-content: center; } .pdf-old__page-container--not-centered { width: auto !important; } .pdf-old__page-container > div { margin-bottom: 20px; } @media (max-width: 980px) { .pdf-old__page-container > div { margin-bottom: 0; } } .progress-bar__container { box-sizing: border-box; width: 100%; margin: var(--progress-margin, 0); padding: var(--progress-padding, 0); } .progress-bar__counter { width: 100%; text-align: center; margin: var(--progress-counter-margin, 0); padding: var(--progress-counter-padding, 0); font-size: var(--progress-counter-font-size, 18px); color: var(--progress-counter-color, #000); } .progress-bar__bar-container { border: var(--progress-border, 1px solid gray); height: var(--progress-height, 32px); width: 100%; border-radius: var(--progress-border-radius, 4px); background: var(--progress-background, blue); overflow: hidden; box-sizing: border-box; } @keyframes gradient { 0% { background-position: 100% 50%; } 100% { background-position: 50% 50%; } } .progress-bar__bar { background: var(--progress-bar-fill, blue); height: 100%; background-size: 300% 300%; transition: all 0.3s ease-out; width: var(--pb-bar-width, 0%); animation: gradient 1s ease-out infinite; } .progress-bar__info-message { width: 100%; text-align: var(--progress-info-text-align, center); font-size: var(--progress-info-font-size, 12px); margin: var(--progress-info-margin, 6px 0 0 0); } .symbol__container { width: var(--symbol-size, 48px); height: var(--symbol-size, 48px); display: flex; background-repeat: no-repeat; background-position: center center; background-size: cover; } .symbol__container svg { width: 100%; height: 100%; color: var(--symbol-color, var(--symbol-primary, rgba(65, 255, 209, 1))); } .symbol__container:last-child:not(span) { margin-left: auto; } .symbol__container svg .document--primary--stroke { stroke: var(--symbol-primary, rgba(65, 255, 209, 1)); } .symbol__container svg .document--primary--fill { fill: var(--symbol-primary, rgba(65, 255, 209, 1)); } .symbol__container svg .document--secondary--stroke { stroke: var(--symbol-secondary, #ffffff); } .symbol__container svg .document--secondary--fill { fill: var(--symbol-secondary, #ffffff); } .symbol__container svg .document--tenary--stroke { stroke: var(--symbol-tenary, #edeeef); } .symbol__container svg .document--tenary--fill { fill: var(--symbol-tenary, #edeeef); } .text-input__container { display: flex; flex-direction: column; width: 100%; position: relative; } .text-input__input { background-color: var(--text-input-bg-color, white); padding: var(--text-input-padding, 14px); border-radius: var(--text-input-border-radius, 8px); border: var(--text-input-border, 1px solid silver); box-shadow: var(--text-input-box-shadow, none); margin: var(--text-input-margin, 0); color: var(--text-input-color, gray); outline: none; font-size: var(--text-input-font-size, 14px); font-weight: var(--text-input-font-weight, 400); } .text-input__input:focus { color: var(--text-input-color-focus, black); background-color: var(--text-input-bg-color-focus, white); border: var(--text-input-border-focus, 1px solid silver); outline: var(--text-input-outline, 2px solid orange); } .text-input__input:disabled, .text-input__input[disabled] { color: var(--text-input-color-disabled, silver); background-color: var(--text-input-bg-color-disabled, gray); border: var(--text-input-border-disabled, 1px solid silver); } .text-input__error-msg { width: 100%; color: var(--text-input-error-color, red); padding-top: 8px; } .text-input__eye-icon { position: absolute; top: 11px; right: 15px; } .wrap-kontomatik { background-color: var(--kontomatik-bg-color, #fff); color: var(--kontomatik-text-color, #000); padding: var(--kontomatik-padding, 38px 25px); border-radius: var(--kontomatik-border-radius, 8px); min-width: auto; width: var(--kontomatik-width, 100%); box-sizing: border-box; margin: var(--kontomatik-margin, 0 auto); border: var(--kontomatik-border, none); box-shadow: var(--kontomatik-box-shadow, none); touch-action: auto; } .wrap-kontomatik.touch-scroll-disabled { touch-action: none; } @media (max-width: 980px) { .wrap-kontomatik { width: 100%; min-width: auto; margin: 0; padding: var(--kontomatik-padding-mobile, 15px); } } @media (max-width: 480px) { .wrap-kontomatik { width: 100%; min-width: auto; margin: 0; padding: var(--kontomatik-padding-mobile, 10px); } } .wrap-kontomatik input { background-color: var(--kontomatik-bg-color, #fff); color: var(--kontomatik-text-color, #000); border-color: var(--kontomatik-border-color, #e5e5e5); border-radius: var(--kontomatik-border-radius, 25px); } .wrap-kontomatik input:focus, .wrap-kontomatik input:active { border-color: var(--kontomatik-primary-color, #2e3f5b); } .wrap-kontomatik input:disabled, .wrap-kontomatik input[disabled] { color: var(--kontomatik-disabled-color, #ced4da); } .wrap-kontomatik button { border-radius: var(--kontomatik-button-border-radius, var(--kontomatik-border-radius, 25px)); } .wrap-kontomatik button.primary { color: var(--kontomatik-primary-reverse-color, #fff); background-color: var(--kontomatik-primary-color, #2e3f5b); } .wrap-kontomatik button.primary:hover { color: var(--kontomatik-main-hover-reverse-color, #fff); background-color: var(--kontomatik-main-hover-color, #7ccdee); } .wrap-kontomatik button.secondary { color: var(--kontomatik-secondary-color, 586374); background-color: var(--kontomatik-primary-color, #2e3f5b); } .wrap-kontomatik button.secondary:hover { color: var(--kontomatik-main-hover-color, #7ccdee); } .wrap-kontomatik a { color: var(--kontomatik-primary-color, #2e3f5b); } .wrap-kontomatik a:hover { color: var(--kontomatik-main-hover-color, #7ccdee); } .wrap-kontomatik h1, .wrap-kontomatik h2, .wrap-kontomatik h3, .wrap-kontomatik h4, .wrap-kontomatik h5, .wrap-kontomatik h6, .wrap-kontomatik label { color: var(--kontomatik-header-color, #2e3f5b); } .wrap-kontomatik ol, .wrap-kontomatik ul { color: var(--kontomatik-text-color, #000); border-color: var(--kontomatik-border-color, #e5e5e5); } .wrap-kontomatik li { color: var(--kontomatik-text-color, #000); } .wrap-kontomatik div, .wrap-kontomatik p { color: var(--kontomatik-text-color, #000); } .wrap-kontomatik .error { color: var(--kontomatik-error-color, #bb0000); } .wrap-xs2a { width: 100%; border: none; padding: 0; display: var(--xs2a-display, visible); } /* .wrap-xs2a .xs2a-dialog { } */ @media (min-width: 900px) { .wrap-xs2a .xs2a-dialog { width: 500px !important; margin: 24% auto 0px !important; } } .wrap-xs2a .xs2a-abort-line { display: flex; flex-direction: column; align-items: flex-end; -webkit-box-pack: justify; justify-content: space-between; margin-bottom: 10px; box-sizing: border-box; } .wrap-xs2a > div { width: 100%; } .wrap-xs2a > div button, .wrap-xs2a > div input, .wrap-xs2a > div select, .wrap-xs2a > div a { transition: all 0.2s ease-in-out; } .wrap-xs2a > div button:focus-visible, .wrap-xs2a > div input:focus-visible, .wrap-xs2a > div select:focus-visible, .wrap-xs2a > div a:focus-visible { outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition); } .wrap-xs2a > div h3 { font-family: var(--xs2a-font-family-headline); font-size: 1.8em !important; margin: 15px 0 !important; text-align: center !important; width: 100% !important; color: black !important; } .xs2a-dialog-body { color: black !important; } .wrap-xs2a > div .xs2a-paragraph p { line-height: 20px !important; margin: 10px 0 10px 0 !important; text-align: center !important; color: rgb(80, 80, 80) !important; } .wrap-xs2a > div .xs2a-description { color: rgb(80, 80, 80) !important; margin: 8px 0 30px 0 !important; } .wrap-xs2a > div .xs2a-form-line { padding: 0px !important; } .wrap-xs2a > div .xs2a-form-line label { color: rgb(80, 80, 80) !important; margin: 30px 0 8px !important; font-weight: 400 !important; font-size: 16px !important; } .wrap-xs2a > div .xs2a-form-line label a { color: var(--xs2a-link-color, gray); text-decoration-color: var(--xs2a-link-underline-color, var(--xs2a-link-color)); text-underline-offset: var(--xs2a-link-underline-offset, 4px); } .wrap-xs2a > div .xs2a-form-line label a:hover { color: var(--xs2a-link-color-hover, gray); } .wrap-xs2a > div .xs2a-form-line select { background-color: var(--xs2a-input-bg-color, white); padding: var(--xs2a-input-padding, 14px); border-radius: var(--xs2a-input-border-radius, 8px); border: var(--xs2a-input-border, 1px solid silver); box-shadow: var(--xs2a-input-box-shadow, none); margin: var(--xs2a-input-margin, 0); color: var(--xs2a-input-color, gray); outline: none !important; font-size: var(--xs2a-input-font-size, 14px); font-weight: var(--xs2a-input-font-weight, 400); appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.6em; } .wrap-xs2a > div .xs2a-form-line select:focus-visible { color: var(--xs2a-input-color-focus, black); background-color: var(--xs2a-input-bg-color-focus, white); border: var(--xs2a-input-border-focus, 1px solid silver); outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition); } .wrap-xs2a > div .xs2a-form-line select:disabled, .wrap-xs2a > div .xs2a-form-line select[disabled] { color: var(--xs2a-input-color-disabled, silver); background-color: var(--xs2a-input-bg-color-disabled, gray); border: var(--xs2a-input-border-disabled, 1px solid silver); } .wrap-xs2a > div .xs2a-form-line input[type='text'], .wrap-xs2a > div .xs2a-form-line input[type='search'], .wrap-xs2a > div .xs2a-form-line input[type='password'] { background-color: var(--xs2a-input-bg-color, white); padding: var(--xs2a-input-padding, 14px); border-radius: var(--xs2a-input-border-radius, 8px); border: var(--xs2a-input-border, 1px solid silver); box-shadow: var(--xs2a-input-box-shadow, none); margin: var(--xs2a-input-margin, 0); color: var(--xs2a-input-color, gray); outline: none !important; font-size: var(--xs2a-input-font-size, 14px); font-weight: var(--xs2a-input-font-weight, 400); } .wrap-xs2a > div .xs2a-form-line input[type='text']:focus-visible, .wrap-xs2a > div .xs2a-form-line input[type='search']:focus-visible, .wrap-xs2a > div .xs2a-form-line input[type='password']:focus-visible { color: var(--xs2a-input-color-focus, black) !important; background-color: var(--xs2a-input-bg-color-focus, white) !important; border: var(--xs2a-input-border-focus, 1px solid silver) !important; outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition); } .wrap-xs2a > div .xs2a-form-line input[type='text']:disabled, .wrap-xs2a > div .xs2a-form-line input[type='text'][disabled], .wrap-xs2a > div .xs2a-form-line input[type='search']:disabled, .wrap-xs2a > div .xs2a-form-line input[type='search'][disabled], .wrap-xs2a > div .xs2a-form-line input[type='password']:disabled, .wrap-xs2a > div .xs2a-form-line input[type='password'][disabled] { color: var(--xs2a-input-color-disabled, silver) !important; background-color: var(--xs2a-input-bg-color-disabled, gray) !important; border: var(--xs2a-input-border-disabled, 1px solid silver) !important; } .wrap-xs2a > div .xs2a-submit, .wrap-xs2a > div .xs2a-back, .wrap-xs2a > div .xs2a-restart, .wrap-xs2a > div .xs2a-abort { outline: none; padding: var(--xs2a-button-padding, 10px 15px); background-color: var(--xs2a-button-bg-color, #2c60ff); border-radius: var(--xs2a-button-border-radius, 8px); min-width: auto; width: var(--xs2a-button-width, auto); height: var(--xs2a-button-height, auto); border: var(--xs2a-button-border, 1px solid #2c60ff); box-shadow: var(--xs2a-button-box-shadow, none); margin: var(--xs2a-button-margin, 0); color: var(--xs2a-button-color, #ffffff); display: flex; cursor: pointer; align-items: center; font-size: var(--xs2a-button-font-size, 14px); font-weight: var(--xs2a-button-font-weight, 500); } .wrap-xs2a > div .xs2a-submit:hover, .wrap-xs2a > div .xs2a-back:hover, .wrap-xs2a > div .xs2a-restart:hover, .wrap-xs2a > div .xs2a-abort:hover { color: var(--xs2a-button-color-hover, #ffffff); background-color: var(--xs2a-button-bg-color-hover, #0d319d); border: var(--xs2a-button-border-hover, 1px solid #0d319d); } .wrap-xs2a > div .xs2a-submit:disabled, .wrap-xs2a > div .xs2a-submit[disabled], .wrap-xs2a > div .xs2a-back:disabled, .wrap-xs2a > div .xs2a-back[disabled], .wrap-xs2a > div .xs2a-restart:disabled, .wrap-xs2a > div .xs2a-restart[disabled], .wrap-xs2a > div .xs2a-abort:disabled, .wrap-xs2a > div .xs2a-abort[disabled] { background-color: var(--xs2a-button-bg-color-disabled, #9dafe5); border: var(--xs2a-button-border-disabled, 1px solid #9dafe5); color: var(--xs2a-button-color-disabled, #dee6ff); } @media (max-width: 600px) { .wrap-xs2a > div .xs2a-submit, .wrap-xs2a > div .xs2a-back, .wrap-xs2a > div .xs2a-restart, .wrap-xs2a > div .xs2a-abort { width: 100%; height: var(--xs2a-button-height-mobile, auto); padding: var(--xs2a-button-padding, 10px 15px); } } .wrap-xs2a > div .xs2a-submit:focus-visible, .wrap-xs2a > div .xs2a-back:focus-visible, .wrap-xs2a > div .xs2a-restart:focus-visible, .wrap-xs2a > div .xs2a-abort:focus-visible { outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition); } .wrap-xs2a > div .xs2a-back { order: 0 !important; color: var(--xs2a-back-btn-color, #000000); background-color: transparent; border: none !important; border-bottom: var(--xs2a-back-btn-border-color, #000000) 2px solid !important; } .wrap-xs2a > div .xs2a-back:hover { color: var(--xs2a-back-btn-color-hover, #ffffff); background-color: transparent !important; border: none !important; border-bottom: var(--xs2a-back-btn-border-color, #efefef) 2px solid !important; } .wrap-xs2a > div .xs2a-back:disabled, .wrap-xs2a > div .xs2a-back[disabled] { background-color: transparent; border: var(--xs2a-back-btn-disabled, 2px solid transparent); color: var(--xs2a-button-color-disabled, #dee6ff); } @media (min-width: 900px) { .wrap-xs2a > div .xs2a-back { order: 0 !important; } } @media (max-width: 600px) { .wrap-xs2a > div .xs2a-back { margin-top: 10px !important; order: 2 !important; } } .wrap-xs2a > div .xs2a-completion-results { border: var(--xs2a-input-border, 1px solid silver); } .wrap-xs2a > div .xs2a-completion-results .xs2a-result-line1 { color: var(--xs2a-input-color-focus, #2c60ff); } .wrap-xs2a > div .xs2a-completion-results .xs2a-result-line2 { color: var(--xs2a-input-color, gray); } .wrap-xs2a > div .xs2a-checkbox { position: relative; } .wrap-xs2a > div .xs2a-checkbox:focus-visible { outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; transition: var(--focus-transition); } .wrap-xs2a > div .xs2a-checkbox label { line-height: 18px !important; position: relative; width: 100%; padding-left: 32px !important; margin-bottom: 0px !important; margin-top: 20px !important; color: rgb(80, 80, 80) !important; } .wrap-xs2a > div .xs2a-checkbox label a { color: var(--xs2a-link-color, gray); text-decoration-color: var(--xs2a-link-underline-color, var(--xs2a-link-color)); text-underline-offset: var(--xs2a-link-underline-offset, 4px); } .wrap-xs2a > div .xs2a-checkbox input { -webkit-appearance: initial; -moz-appearance: initial; appearance: initial; padding: 0; width: 24px; height: 24px; margin-bottom: 0; display: block; cursor: pointer; position: absolute; top: 13px; left: 0; visibility: hidden; } .wrap-xs2a > div .xs2a-checkbox input:before { width: 20px; height: 20px; content: ''; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: var(--xs2a-checkbox-color, #2c60ff) 2px solid !important; padding: 8px; display: inline-block; position: absolute; vertical-align: middle; cursor: pointer; margin-right: 10px; top: 0px; left: 0; box-sizing: border-box; visibility: visible; } .wrap-xs2a > div .xs2a-checkbox input:checked:before { background-color: var(--xs2a-checkbox-color-active, #2c60ff); border: var(--xs2a-checkbox-color-active, #2c60ff) 2px solid !important; } .wrap-xs2a > div .xs2a-checkbox input:checked:after { content: ''; display: block; position: absolute; top: 2px; left: 7px; width: 6px; height: 9.5px; border: solid var(--xs2a-bg-color, #2c60ff); border-width: 0 2px 2px 0; transform: rotate(45deg); visibility: visible; } .wrap-xs2a > div label[for='XS2A-privacy_policy'] { font-size: 80% !important; } .wrap-xs2a > div .xs2a-submit-line { margin-top: 40px !important; } .wrap-xs2a > div .xs2a-image { margin-left: 0 !important; } .wrap-xs2a > div .xs2a-image img { border: var(--xs2a-input-border, 1px solid silver); } .wrap-xs2a > div .xs2a-logo img { border: none !important; } .wrap-xs2a > div .xs2a-error .xs2a-icon-paragraph { box-sizing: border-box; padding: 10px !important; line-height: 16px !important; color: #ff2f2f !important; } .wrap-xs2a > div .xs2a-error { margin: 30px 5px !important; box-sizing: border-box !important; display: inline-block !important; background-color: white !important; border: 1px solid #ff2f2f !important; color: #ff2f2f !important; } .webcam__container { display: inline-block; position: relative; width: 100%; height: auto; overflow: hidden; box-sizing: border-box; font-family: var(--font-family, inherit); font-size: 16px; margin: 32px 0; } .webcam__webcam-capture { width: 100%; aspect-ratio: 1/1; margin: 0 auto; } .webcam__webcam-capture canvas { display: none; } .webcam__video-container { width: 100%; position: relative; } .webcam__video-container .frame { width: 80%; aspect-ratio: 3/2; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border: 3px solid #23f623; } .webcam__video-container video, .webcam__video-container img { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .webcam__video-container img { top: 0px; left: 0px; position: absolute; } .webcam__error-message { color: red; } .webcam__device-select { position: absolute; top: 10px; right: 10px; } .webcam__device-select .select-input__indicator, .webcam__device-select .select-input__control { opacity: 0; cursor: pointer; } .webcam__device-select .select-input__menu { top: 30px; right: 0; min-width: 300px; } .webcam__device-select > div:first-child { position: absolute; top: 0; right: 12px; cursor: pointer; } .webcam__hidden-source-wrap { position: relative; width: 1px; height: 1px; overflow: hidden; } .webcam__hidden-source-scale { width: 4096px; } .webcam__hidden-source-scale video, .webcam__hidden-source-scale canvas { width: 100%; } .webcam__loading-wrapper { position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); } /* Fullscreen overlay */ .popup__fullscreen-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(8px); } @media (max-width: 980px) { .popup__fullscreen-wrap { height: 100vh !important; position: fixed !important; } } /* Main popup container */ .popup__container { width: var(--popup-width, 800px); height: var(--popup-height, auto); margin: var(--popup-margin, 30px auto); color: var(--popup-color, var(--container-color, #000)); background-color: var(--popup-bg-color, #ffffff); border: var(--popup-border, none); border-radius: var(--popup-border-radius, 8px); box-sizing: border-box; position: relative; display: flex; flex-direction: column; font-size: inherit; font-style: normal; font-weight: 400; box-shadow: var(--popup-box-shadow, none); } @media (max-width: 980px) { .popup__container { width: var(--popup-mobile-width, 100%); margin: var(--popup-mobile-margin, 0); height: var(--popup-mobile-height, 100%); padding: 0; } } /* Close button */ .popup__close { position: absolute; top: 10px; right: 10px; left: auto; bottom: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; background-color: transparent; border: none; } .popup__close:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* Header */ .popup__popup-header { color: #000; background-color: #ffffff; padding: 12px 30px; border-radius: 8px 8px 0 0; border-bottom: 1px solid #e4e4e4; font-size: 14px; display: flex; align-items: center; justify-content: space-between; } /* Title */ .popup__popup-title { display: flex; align-items: center; font-size: 2em; font-style: normal; font-weight: 400; } /* Body */ .popup__popup-body { padding: 30px; } .popup__popup-body--no-title { padding: 45px 30px 30px; } .popup__popup-body h1, .popup__popup-body h2, .popup__popup-body h3, .popup__popup-body h4, .popup__popup-body h5, .popup__popup-body h6 { font-weight: 700; } .popup__popup-body h1 { font-size: 1.5rem; line-height: 1.125; } .popup__popup-body h2 { font-size: 1.25rem; line-height: 1.25; } .popup__popup-body h3 { font-size: 1rem; line-height: 1.5; } .popup__popup-body > * + * { margin-top: 1em; } .popup__popup-body > * + :is(h1, h2, h3) { margin-top: 2em; } .popup__popup-body > :is(h1, h2, h3) + * { margin-top: 0.75em; } .popup__popup-body ul, .popup__popup-body ol { margin-left: 20px; list-style-position: inside; } .popup__popup-body ol { list-style: numeric; } .popup__popup-body ul { list-style: disc; } /* Footer */ .popup__popup-footer { padding: 15px 30px; display: flex; align-items: center; justify-content: flex-end; border-top: 1px solid #e4e4e4; gap: 12px; position: relative; } /* Top Container (grid) */ .popup__top-container { display: grid; grid-template-columns: auto 96px; grid-template-rows: auto; gap: 35px; align-items: center; padding: 0px 0px 20px 0px; } @media (max-width: 980px) { .popup__top-container { padding: 0px 0px 16px 0px; } } .feedback-popup { --popup-width: 500px; padding: 32px; } .feedback-popup h1 { font-size: 24px; text-align: center; margin-top: 0; } .feedback-popup header { justify-content: center; border-bottom: 0; padding: 0; } .feedback-popup footer { border-top: 0; padding: 10px 0 0; } .feedback-popup section { padding: 0; } .feedback-popup-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; } .feedback-popup__button { --button-width: 50%; --button-secondary-width: 50%; --button-font-size: 14px; --button-padding: 10px 0; } .feedback-popup__textarea { width: -webkit-fill-available; font-family: inherit; font-size: 16px; resize: none; background-color: var(--text-input-bg-color, white); border: var(--text-input-border, 1px solid silver); box-shadow: var(--text-input-border, none); color: var(--text-input-color, gray); padding: 8px 12px; } .feedback-popup__char-count { text-align: right; font-size: 12px; color: var(--text-color-secondary, #666); margin-top: 4px; } .feedback-popup__char-count--limit { color: var(--error-color, #d32f2f); } .tink-cancel-popup__textarea { width: 100%; font-family: inherit; font-size: 16px; resize: none; background-color: var(--text-input-bg-color, white); border: var(--text-input-border, 1px solid silver); box-shadow: var(--text-input-border, none); color: var(--text-input-color, gray); } /* SignDocumentCore - BEM block: sign-doc-core */ .sign-doc-core__loading-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; z-index: 1; } @media (max-width: 980px) { .sign-doc-core__loading-container { height: 100vh !important; height: 100svh !important; position: absolute !important; border-bottom: none !important; border: none !important; box-shadow: none !important; } } .sign-doc-core__container { font-family: var(--font-family, sans-serif); background-color: var(--container-bg-color, #ffffff); position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100svh; max-height: 100vh; max-height: 100svh; display: grid; grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr) auto; z-index: 1; box-sizing: border-box; } .sign-doc-core__container *, .sign-doc-core__container *::before, .sign-doc-core__container *::after { box-sizing: border-box; } .sign-doc-core__popup { --popup-mobile-height: fit-content; } .sign-doc-core__popup-btn { --button-margin: 20px 0 0; } .sign-doc-core__container .pdf-viewer-container { background-color: var(--pdf-background-color, #f0f0f0); border-radius: 0px; } .sign-doc-core__container .pdf-viewer-container > div { background-color: var(--pdf-background-color, #f0f0f0); } @media (max-width: 980px) { .sign-doc-core__container { height: 100vh !important; height: 100svh !important; position: absolute !important; border-bottom: none !important; border: none !important; box-shadow: none !important; } } .sign-doc-core__footer { display: flex; flex-direction: column; padding: 15px 40px 20px 40px; } @media (max-width: 980px) { .sign-doc-core__footer { padding: 15px 32px 20px 32px; } } .sign-doc-core__footer-bottom { display: flex; justify-content: space-between; align-items: center; } .sign-doc-core__button-wrapper { display: flex; justify-content: flex-end; align-items: center; } @media (max-width: 980px) { .sign-doc-core__button-wrapper { width: 100%; justify-content: normal; } } /* Buttons - BEM block: sign-doc-buttons */ .sign-doc-buttons__wrapper { display: flex; justify-content: flex-end; align-items: center; gap: 20px; } @media (max-width: 980px) { .sign-doc-buttons__wrapper { width: 100%; justify-content: normal; flex-wrap: wrap; } } .sign-doc-buttons__proceed { min-width: 224px; } @media (max-width: 980px) { .sign-doc-buttons__proceed { padding: 14px 40px; width: 100%; } } .sign-doc-buttons__button { min-width: 224px; } @media (max-width: 980px) { .sign-doc-buttons__button { width: 100%; min-width: auto; } } .flex-1 { @media (max-width: 980px) { flex: 1; } } .w-100 { @media (max-width: 980px) { flex-basis: 100%; } } /* PageHeader - BEM block: sign-doc-page-header */ .sign-doc-page-header__container { display: grid; grid-template-columns: auto 96px; grid-template-rows: auto; gap: 35px; align-items: center; padding: 20px 40px 20px 40px; } .sign-doc-page-header__container--wide-controls { grid-template-columns: auto 148px; } @media (max-width: 980px) { .sign-doc-page-header__container { padding: 16px 32px 16px 32px; } } .sign-doc-page-header__multi-doc-container { display: flex; align-items: center; justify-content: flex-start; padding: 20px 40px 0 40px; } @media (max-width: 980px) { .sign-doc-page-header__multi-doc-container { padding: 8px 32px 0 32px; } } /* SignProgress - BEM block: sign-progress */ .sign-progress__container { width: 100%; display: flex; gap: 50px; justify-content: space-between; align-items: center; margin-bottom: 20px; position: relative; } @media (max-width: 980px) { .sign-progress__container { flex-direction: column; gap: 0px; margin-bottom: 8px; } .sign-progress__container > div:last-child { position: absolute; right: 0; top: 30px; } } .sign-progress__grid { width: 100%; display: grid; grid-template-columns: 120px 1fr; grid-template-rows: 20px 36px; gap: 8px 20px; grid-template-areas: 'index progress' 'title title'; } .sign-progress__grid--with-subtitle { grid-template-rows: 20px 36px 14px; grid-template-areas: 'index progress' 'title title' 'subtitle subtitle'; } @media (max-width: 980px) { .sign-progress__grid { grid-template-columns: 120px calc(100% - 120px); grid-template-rows: 20px 54px; gap: 8px 20px; } .sign-progress__grid--with-subtitle { grid-template-rows: 20px 54px 14px; } } .sign-progress__index { grid-area: index; color: var(--header-color, #4a4a4a); font-size: 13px; align-self: center; justify-self: start; } .sign-progress__bar { grid-area: progress; width: 100%; height: 4px; align-self: center; justify-self: center; background-color: #cecbd6; border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; } .sign-progress__filled-bar { height: 100%; width: var(--sign-progress-fill, 0%); background-color: var(--link-color, #2a0760); transition: width 0.5s ease-in-out; border-radius: 2px; } .sign-progress__bars-container { grid-area: progress; width: 100%; height: 4px; display: flex; gap: 10px; align-self: center; justify-self: center; } .sign-progress__single-bar { flex-grow: 1; height: 100%; background-color: #cecbd6; border-radius: 2px; } .sign-progress__single-bar--active { background-color: var(--link-color, #2a0760); } .sign-progress__title { color: var(--header-color, #4a4a4a); font-size: var(--header-font-size, 14px); line-height: var(--header-line-height, 20px); margin: 0; width: 100%; font-weight: 400; align-self: center; justify-self: start; grid-area: title; height: 36px; display: flex; justify-content: flex-start; gap: 8px; } @media (max-width: 980px) { .sign-progress__title { gap: 0; height: 64px; flex-direction: column; font-size: var(--header-font-size-mobile, 14px); line-height: var(--header-line-height-mobile, 20px); width: 65%; } } .sign-progress__subtitle { color: var(--header-color, #4a4a4a); font-size: calc(var(--header-font-size, 14px) / 2); line-height: calc(var(--header-line-height, 14px) / 2); margin: 0; width: 100%; font-weight: 400; align-self: center; justify-self: start; grid-area: subtitle; display: flex; justify-content: flex-start; } @media (max-width: 980px) { .sign-progress__subtitle { flex-direction: column; font-size: calc(var(--header-font-size-mobile, 14px) / 2); line-height: calc(var(--header-line-height-mobile, 14px) / 2); } } .sign-progress__title-header { font-weight: 600; height: 32px; width: fit-content; flex: 0 0 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 980px) { .sign-progress__title-header { width: 100%; } } .sign-progress__title-doc-name { height: 32px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sign-progress__title-doc-name--hidden { opacity: 0; } @media (max-width: 980px) { .sign-progress__title-doc-name { width: 100%; } } .sign-progress__zoom-controls { align-self: flex-start; } /* SignDocumentBlurOverlay - BEM block: blur-overlay */ /* Note: The main blur overlay styling is in generic.css (.generic__blur-overlay) */ .blur-overlay__rect { rx: var(--icon-rx, 60); } .media-permissions__container { max-width: 560px; width: 100%; display: flex; flex-direction: column; align-items: stretch; margin: 0 auto; padding: 38px 25px; box-sizing: border-box; color: var(--container-color, #000); } @media (max-width: 980px) { .media-permissions__container { width: 100%; max-width: 100%; } } .media-permissions__loading-wrapper { height: 460px; width: 100%; display: flex; justify-content: center; align-items: center; } .media-permissions__loading-spinner { --spinner-width: 80px; } .media-permissions__step-list { padding: 0 0 0 20px; margin: 10px 0 0 0; } .media-permissions__step-list > li { margin-bottom: 10px; } .media-permissions__step-list > li:last-child { margin-bottom: 0; } .media-permissions__list-wrapper { font-size: 18px; } .media-permissions__container .button { --button-min-width: 224px; } .videoid-cancel-popup__textarea { width: 100%; font-family: inherit; font-size: 16px; resize: none; background-color: var(--text-input-bg-color, white); border: var(--text-input-border, 1px solid silver); box-shadow: var(--text-input-border, none); color: var(--text-input-color, gray); } .countdown-timer { text-align: center; margin: 20px 0; } .countdown-timer__time-display { font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #2c3e50; } .countdown-timer__progress-bar { width: 80%; height: 10px; background-color: #f0f0f0; border-radius: 5px; overflow: hidden; margin: 0 auto 10px; } .countdown-timer__progress { height: 10px; background-color: #6ec171; border-radius: 5px; width: var(--countdown-timer-progress, 0%); transition: width 1s linear; } .countdown-timer__message { font-size: 14px; color: #7f8c8d; } /* LanguageSelect - BEM block: language-select */ .language-select { display: inline-block; width: 100%; } .language-select__flag { display: inline-block; width: 32px; height: 14px; padding-left: 8px; } .language-select__item-inner { display: flex; width: 100%; align-items: center; } .language-select__container { position: fixed; top: 45px; right: 45px; } @media (max-width: 980px) { .language-select__container { position: relative; top: unset; right: unset; } } .language-select__flag-emoji { width: 20px; height: 14px; margin-top: 1px; display: flex; align-items: center; justify-content: center; font-size: 20px; font-family: 'Twemoji Country Flags', Inter, Arial, sans-serif; cursor: pointer; } /* GoToMobile shared styles */ .go-to-mobile__code-input-wrapper { width: 100%; } .go-to-mobile__code-input-wrapper p { width: 100%; text-align: center; margin-top: 10px; color: #ec0000; } .go-to-mobile__code-input-wrapper span { display: block; margin-top: 10px; width: 100%; text-align: center; color: #000; font-size: 12px; font-style: normal; font-weight: 300; } .go-to-mobile__code-input-wrapper > div > input { height: 50px; border-radius: 2px; border: 2px solid #ced4dc; color: #000; text-align: center; font-family: inherit; font-size: 22px; font-style: normal; font-weight: 300; line-height: 170%; } .go-to-mobile__code-input-wrapper--loading > div > input { background: #ced4dc; color: #9b9b9b; } .go-to-mobile__code-input-wrapper--error > div > input { color: #ec0000; } .go-to-mobile__loading-spinner { --spinner-width: 40px; --spinner-wrap-padding: 100px 0 40px 0; } .go-to-mobile__enter-pin-btn { margin-bottom: 20px; } /* SwitchToMobile shared styles */ .switch-to-mobile__intro-actions { --ccbc-border: none; --ccbc-padding: 0; --ccbc-margin: 0 0 20px 0; --ccbc-gap: 30px; } .switch-to-mobile__show-pin-spinner { --spinner-width: 40px; --spinner-wrap-padding: 50px 0 20px 0; } .switch-to-mobile__divider--full { --d-width: 100%; } .switch-to-mobile__divider--full-no-margin { --d-width: 100%; --d-margin: 0; } .switch-to-mobile__divider--full-top-margin { --d-width: 100%; --d-margin: 20px 0 0; } .switch-to-mobile__sms-btn { --button-secondary-padding: 10px 20px; --button-min-width: 250px; max-width: 100%; } .switch-to-mobile__show-pin-footer { --ccbfh-border: none; --ccbfh-mobile-gap: 10px; } .switch-to-mobile__code-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; } .switch-to-mobile__accordion-wrapper { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 20px; } .switch-to-mobile__accordion-wrapper--wcag { border: 1px solid rgba(183, 189, 198, 1); border-radius: var(--container-border-radius, 8px); margin-top: 30px; } .switch-to-mobile__accordion-title { box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .switch-to-mobile__accordion-title h3 { margin: 0; color: #34353a; font-size: 16px; font-weight: 700; line-height: 170%; font-family: var(--font-family-bold, inherit); } .switch-to-mobile__accordion-title svg { transition: transform 0.3s ease-in-out; } .switch-to-mobile__accordion-title--open svg { transform: rotate(180deg); } .switch-to-mobile__accordion-title:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .switch-to-mobile__accordion { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; height: 0; margin-top: 0; transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out; overflow-y: hidden; } .switch-to-mobile__accordion p { width: 100%; margin-bottom: 10px; font-weight: 300; line-height: 170%; } .switch-to-mobile__accordion--open { height: auto; margin-top: 20px; } .switch-to-mobile__centered-sms-text { display: flex; flex-direction: column; align-items: center; gap: 10px; } .switch-to-mobile__centered-sms-text p { color: #34353a; text-align: center; font-family: var(--font-family-bold, inherit); font-size: 14px; font-style: normal; font-weight: 300; margin: 0; } /* Intro step */ .switch-to-mobile-intro__btn { --button-padding: 10px 20px; } .switch-to-mobile-intro__btn--stay { --button-secondary-padding: 10px 20px; --button-secondary-bg-color: transparent; --button-secondary-bg-color-hover: transparent; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-border-hover: 1px solid #dcdbe2; --button-secondary-color: #34353a; --button-secondary-color-hover: #34353a; } /* HowToContinue step */ .how-to-continue__btn { --button-padding: 10px 20px; --button-margin: 0 0 3px 0; --button-secondary-padding: 10px 20px; --button-secondary-margin: 0 0 3px 0; } .how-to-continue__btn--continue { --button-width: 250px; } .how-to-continue__btn--switch { --button-secondary-width: 300px; } /* WaitingForMobile warning line */ .switch-to-mobile__warning-line { color: #e04d39; width: 100%; text-align: center; font-size: 18px; font-style: normal; font-weight: 700; margin: 0; font-family: var(--font-family, inherit); } /* DividerWithText - BEM block: divider-with-text */ .divider-with-text { display: flex; align-items: center; text-align: center; width: calc(100% - 40px); box-sizing: border-box; margin: 20px; } /* Width modifiers */ .divider-with-text--w-full { width: 100%; } /* Margin modifiers */ .divider-with-text--m-30-0 { margin: 30px 0; } .divider-with-text__line { flex: 1; height: 1px; background-color: #d9d9d9; } .divider-with-text__text { padding: 0 10px; color: #7f8c8d; font-size: 16px; white-space: nowrap; } .youtube-embed { overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0; } .youtube-embed__iframe { left: 0; top: 0; height: 100%; width: 100%; position: absolute; } /* ResumeFromEmail shared styles */ .resume-from-email__phone-number { --ip-font-family: Roboto; } .resume-from-email__centered-sms-text { display: flex; flex-direction: column; align-items: center; gap: 10px; } .resume-from-email__centered-sms-text p { color: #34353a; text-align: center; font-family: var(--font-family-bold); font-size: 14px; font-style: normal; font-weight: 300; margin: 0; } .resume-from-email__otp-continue-btn { margin-bottom: 20px; } .error-illustration { width: fit-content; margin: 0 auto 30px auto; } .error-illustration__icon-wrapper { border-radius: var(--icon-rx, 100px); background: var(--icon-background-color, #f7f9fc); width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; } .enpal-embedded-video { width: 100%; aspect-ratio: 420 / 314; margin: 30px 0 30px 0; } /* DisplayDocumentCore - BEM block: display-doc-core */ .display-doc-core__loading-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; z-index: 1; } @media (max-width: 980px) { .display-doc-core__loading-container { height: 100vh !important; height: 100svh !important; position: absolute !important; border-bottom: none !important; border: none !important; box-shadow: none !important; } } .display-doc-core__container { background-color: var(--container-bg-color, #ffffff); position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100svh; max-height: 100svh; display: grid; grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr) auto; z-index: 1; box-sizing: border-box; } .display-doc-core__container *, .display-doc-core__container *::before, .display-doc-core__container *::after { box-sizing: border-box; } .display-doc-core__container .pdf-viewer-container { background-color: var(--pdf-background-color, #f0f0f0); border-radius: 0px; } .display-doc-core__container .pdf-viewer-container > div { background-color: var(--pdf-background-color, #f0f0f0); } @media (max-width: 980px) { .display-doc-core__container { height: 100vh !important; height: 100svh !important; position: absolute !important; border-bottom: none !important; border: none !important; box-shadow: none !important; } } .display-doc-core__footer { display: flex; flex-direction: column; padding: 15px 40px 20px 40px; } @media (max-width: 980px) { .display-doc-core__footer { padding: 15px 32px 20px 32px; } } .display-doc-core__footer-bottom { display: flex; justify-content: space-between; align-items: center; } /* PdfViewerOCG - BEM block: pdf-ocg */ .pdf-ocg__container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: var(--pdf-container-border, none); border-radius: 10px; background-color: var(--pdf-background-color, #f0f0f0); position: relative; } /* Firefox scrollbar */ @-moz-document url-prefix() { .pdf-ocg__container * { scrollbar-width: auto; scrollbar-color: var(--pdf-scroll-handle-color, #888) var(--pdf-scroll-track-color, transparent); } } .pdf-ocg__container *::-webkit-scrollbar { width: 6px; height: 6px; } .pdf-ocg__container *::-webkit-scrollbar-track { background: var(--pdf-scroll-track-color, transparent); border-radius: 4px; } .pdf-ocg__container *::-webkit-scrollbar-thumb { background: var(--pdf-scroll-handle-color, #888); border-radius: 4px; min-height: 20px; transition: background-color 0.2s ease; } .pdf-ocg__container *::-webkit-scrollbar-thumb:hover { background: var(--pdf-scroll-handle-color, #888); cursor: pointer; } .pdf-ocg__container *::-webkit-scrollbar-corner { background: transparent; } /* PdfViewerOCG Addons - BEM block: pdf-ocg-addons */ .pdf-ocg-addons__page-number-indicator { height: 30px; margin: 12px 0; padding: var(--pdf-toolbox-padding, 0 8px); display: flex; justify-content: center; align-items: center; position: absolute; top: 12px; right: 42px; background-color: var(--pdf-toolbox-bg-color, rgba(0, 0, 0, 0.7)); color: var(--pdf-toolbox-color, #fff); border-radius: var(--pdf-toolbox-border-radius, 4px); font-size: 14px; line-height: 20px; } .pdf-ocg-addons__page-number-indicator span { margin: 0 2px; } .pdf-ocg-addons__navigation { z-index: 99999; position: absolute; left: 0; bottom: 30px; width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 16px; } .pdf-ocg-addons__navigation-inner { display: flex; gap: 18px; background-color: var(--nav-bg-color, rgba(99, 99, 99, 0.8)); color: var(--nav-color, white); border-radius: var(--nav-border-radius, 8px); box-sizing: border-box; padding: var(--nav-padding, 10px 30px); height: fit-content; width: fit-content; } .pdf-ocg-addons__zoom-button { all: unset; cursor: pointer; } .pdf-ocg-addons__scroll-document-button-container { position: absolute; z-index: 1; left: 50%; transform: translate(-50%, -50%); width: fit-content; } .pdf-ocg-addons__scroll-document-button-container--hidden { visibility: hidden; } @media (max-width: 980px) { .pdf-ocg-addons__scroll-document-button-container { bottom: -15px; } } .pdf-ocg-addons__external-zoom-control-wrap { width: 148px; display: flex; justify-content: center; align-items: center; gap: 8px; } /* PdfViewerOCG Core - BEM block: pdf-ocg-core */ .pdf-ocg-core__viewer-container { overflow-x: auto; overflow-y: hidden; background: var(--pdf-background-color, #fff); } .pdf-ocg-core__viewer-inner-container { position: fixed; left: 0; right: 0; bottom: 147px; top: 84px; overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 70px; padding-left: 2px; padding-right: 2px; display: block; } .pdf-ocg-core__pdf-viewer-inner { display: flex; flex-direction: column; align-items: center; } .pdf-ocg-core__loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .pdf-ocg-core__loading-text { color: var(--container-color, black); font-size: 16px; margin-top: 10px; margin-bottom: 8px; } .pdf-ocg-core__error-fallback-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pdf-ocg-core__error-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--pdf-background-color, #fff5f5); color: var(--pdf-color, #e53e3e); padding: 20px 0; } .pdf-ocg-core__error-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; } /* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .messageBar{ --closing-button-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.85822%208.84922L4.85322%2011.8542C4.75891%2011.9453%204.63261%2011.9957%204.50151%2011.9946C4.37042%2011.9934%204.24501%2011.9408%204.15231%2011.8481C4.0596%2011.7554%204.00702%2011.63%204.00588%2011.4989C4.00474%2011.3678%204.05514%2011.2415%204.14622%2011.1472L7.15122%208.14222V7.85922L4.14622%204.85322C4.05514%204.75891%204.00474%204.63261%204.00588%204.50151C4.00702%204.37042%204.0596%204.24501%204.15231%204.15231C4.24501%204.0596%204.37042%204.00702%204.50151%204.00588C4.63261%204.00474%204.75891%204.05514%204.85322%204.14622L7.85822%207.15122H8.14122L11.1462%204.14622C11.2405%204.05514%2011.3668%204.00474%2011.4979%204.00588C11.629%204.00702%2011.7544%204.0596%2011.8471%204.15231C11.9398%204.24501%2011.9924%204.37042%2011.9936%204.50151C11.9947%204.63261%2011.9443%204.75891%2011.8532%204.85322L8.84822%207.85922V8.14222L11.8532%2011.1472C11.9443%2011.2415%2011.9947%2011.3678%2011.9936%2011.4989C11.9924%2011.63%2011.9398%2011.7554%2011.8471%2011.8481C11.7544%2011.9408%2011.629%2011.9934%2011.4979%2011.9946C11.3668%2011.9957%2011.2405%2011.9453%2011.1462%2011.8542L8.14122%208.84922L8.14222%208.85022L7.85822%208.84922Z'%20fill='black'/%3e%3c/svg%3e"); --message-bar-close-button-color:var(--text-primary-color); --message-bar-close-button-color-hover:var(--text-primary-color); --message-bar-close-button-border-radius:4px; --message-bar-close-button-border:none; --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--0, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--1, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--2, rgb(21 20 26 / 0.07)); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .messageBar{ --message-bar-close-button-hover-bg-color:light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); --message-bar-close-button-active-bg-color:light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); --message-bar-close-button-focus-bg-color:light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); } } @supports not (color: light-dark(tan, tan)){ .messageBar *{ --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--0, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--1, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--2, rgb(21 20 26 / 0.07)); } } @media screen and (forced-colors: active){ .messageBar{ --message-bar-close-button-color:ButtonText; --message-bar-close-button-border:1px solid ButtonText; --message-bar-close-button-hover-bg-color:ButtonText; --message-bar-close-button-active-bg-color:ButtonText; --message-bar-close-button-focus-bg-color:ButtonText; --message-bar-close-button-color-hover:HighlightText; } } .messageBar{ display:flex; position:relative; padding:8px 8px 8px 16px; flex-direction:column; justify-content:center; align-items:center; gap:8px; -webkit-user-select:none; -moz-user-select:none; user-select:none; border-radius:4px; border:1px solid var(--message-bar-border-color); background:var(--message-bar-bg-color); color:var(--message-bar-fg-color); } .messageBar > div{ display:flex; align-items:flex-start; gap:8px; align-self:stretch; } :is(.messageBar > div)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--message-bar-icon); mask-image:var(--message-bar-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--message-bar-icon-color); flex-shrink:0; } .messageBar button{ cursor:pointer; } :is(.messageBar button):focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } .messageBar .closeButton{ width:32px; height:32px; background:none; border-radius:var(--message-bar-close-button-border-radius); border:var(--message-bar-close-button-border); display:flex; align-items:center; justify-content:center; } :is(.messageBar .closeButton)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--closing-button-icon); mask-image:var(--closing-button-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--message-bar-close-button-color); } :is(.messageBar .closeButton):is(:hover,:active,:focus)::before{ background-color:var(--message-bar-close-button-color-hover); } :is(.messageBar .closeButton):hover{ background-color:var(--message-bar-close-button-hover-bg-color); } :is(.messageBar .closeButton):active{ background-color:var(--message-bar-close-button-active-bg-color); } :is(.messageBar .closeButton):focus{ background-color:var(--message-bar-close-button-focus-bg-color); } :is(.messageBar .closeButton) > span{ display:inline-block; width:0; height:0; overflow:hidden; } #editorUndoBar{ --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--3, #15141a); --message-bar-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.625%200.5C6.64009%200.5%205.66482%200.693993%204.75487%201.0709C3.84493%201.44781%203.01814%202.00026%202.3217%202.6967C1.62526%203.39314%201.07281%204.21993%200.695904%205.12987C0.318993%206.03982%200.125%207.01509%200.125%208C0.125%208.98491%200.318993%209.96018%200.695904%2010.8701C1.07281%2011.7801%201.62526%2012.6069%202.3217%2013.3033C3.01814%2013.9997%203.84493%2014.5522%204.75487%2014.9291C5.66482%2015.306%206.64009%2015.5%207.625%2015.5C9.61412%2015.5%2011.5218%2014.7098%2012.9283%2013.3033C14.3348%2011.8968%2015.125%209.98912%2015.125%208C15.125%206.01088%2014.3348%204.10322%2012.9283%202.6967C11.5218%201.29018%209.61412%200.5%207.625%200.5ZM8.25%2011.375C8.25%2011.5408%208.18415%2011.6997%208.06694%2011.8169C7.94973%2011.9342%207.79076%2012%207.625%2012C7.45924%2012%207.30027%2011.9342%207.18306%2011.8169C7.06585%2011.6997%207%2011.5408%207%2011.375V6.938C7%206.77224%207.06585%206.61327%207.18306%206.49606C7.30027%206.37885%207.45924%206.313%207.625%206.313C7.79076%206.313%207.94973%206.37885%208.06694%206.49606C8.18415%206.61327%208.25%206.77224%208.25%206.938V11.375ZM8.25%205L8%205.25H7.25L7%205V4.25L7.25%204H8L8.25%204.25V5Z'%20fill='black'%20/%3e%3c/svg%3e"); --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #73a7f3; --message-bar-icon-color:var(--csstools-light-dark-toggle--4, #0060df); --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #003070; --message-bar-bg-color:var(--csstools-light-dark-toggle--5, #deeafc); --message-bar-fg-color:var(--text-primary-color); --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--6, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --undo-button-bg-color:var(--csstools-light-dark-toggle--7, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--8, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); --undo-button-bg-color-active:var(--csstools-light-dark-toggle--9, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #0df; --undo-button-border:1px solid var(--csstools-light-dark-toggle--10, #0060df); --undo-button-fg-color:var(--message-bar-fg-color); --undo-button-fg-color-hover:var(--undo-button-fg-color); --undo-button-fg-color-active:var(--undo-button-fg-color); } @supports (color: light-dark(red, red)){ #editorUndoBar{ --text-primary-color:light-dark(#15141a, #fbfbfe); --message-bar-icon-color:light-dark(#0060df, #73a7f3); --message-bar-bg-color:light-dark(#deeafc, #003070); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ #editorUndoBar{ --message-bar-border-color:light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); --undo-button-bg-color:light-dark( rgb(21 20 26 / 0.07), rgb(255 255 255 / 0.08) ); --undo-button-bg-color-hover:light-dark( rgb(21 20 26 / 0.14), rgb(255 255 255 / 0.14) ); --undo-button-bg-color-active:light-dark( rgb(21 20 26 / 0.21), rgb(255 255 255 / 0.21) ); } } @supports (color: light-dark(red, red)){ #editorUndoBar{ --undo-button-border:1px solid light-dark(#0060df, #0df); } } @supports not (color: light-dark(tan, tan)){ #editorUndoBar *{ --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--3, #15141a); --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #73a7f3; --message-bar-icon-color:var(--csstools-light-dark-toggle--4, #0060df); --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #003070; --message-bar-bg-color:var(--csstools-light-dark-toggle--5, #deeafc); --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--6, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --undo-button-bg-color:var(--csstools-light-dark-toggle--7, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--8, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); --undo-button-bg-color-active:var(--csstools-light-dark-toggle--9, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #0df; --undo-button-border:1px solid var(--csstools-light-dark-toggle--10, #0060df); } } @media screen and (forced-colors: active){ #editorUndoBar{ --text-primary-color:CanvasText; --message-bar-icon-color:CanvasText; --message-bar-bg-color:Canvas; --message-bar-border-color:CanvasText; --undo-button-bg-color:ButtonText; --undo-button-bg-color-hover:SelectedItem; --undo-button-bg-color-active:SelectedItem; --undo-button-fg-color:ButtonFace; --undo-button-fg-color-hover:SelectedItemText; --undo-button-fg-color-active:SelectedItemText; --undo-button-border:none; } } #editorUndoBar{ position:fixed; top:50px; left:50%; transform:translateX(-50%); z-index:10; padding-block:8px; padding-inline:16px 8px; font:menu; font-size:15px; cursor:default; } #editorUndoBar button{ cursor:pointer; } #editorUndoBar #editorUndoBarUndoButton{ border-radius:4px; font-weight:590; line-height:19.5px; color:var(--undo-button-fg-color); border:var(--undo-button-border); padding:4px 16px; margin-inline-start:8px; height:32px; background-color:var(--undo-button-bg-color); } :is(#editorUndoBar #editorUndoBarUndoButton):hover{ background-color:var(--undo-button-bg-color-hover); color:var(--undo-button-fg-color-hover); } :is(#editorUndoBar #editorUndoBarUndoButton):active{ background-color:var(--undo-button-bg-color-active); color:var(--undo-button-fg-color-active); } #editorUndoBar > div{ align-items:center; } .dialog{ --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) #1c1b22; --dialog-bg-color:var(--csstools-light-dark-toggle--11, white); --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) #1c1b22; --dialog-border-color:var(--csstools-light-dark-toggle--12, white); --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #15141a; --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--14, #15141a); --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #cfcfd8; --text-secondary-color:var(--csstools-light-dark-toggle--15, #5b5b66); --hover-filter:brightness(0.9); --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #0df; --link-fg-color:var(--csstools-light-dark-toggle--16, #0060df); --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color:var(--csstools-light-dark-toggle--17, #0250bb); --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #52525e; --separator-color:var(--csstools-light-dark-toggle--18, #f0f0f4); --textarea-border-color:#8f8f9d; --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #42414d; --textarea-bg-color:var(--csstools-light-dark-toggle--19, white); --textarea-fg-color:var(--text-secondary-color); --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #2b2a33; --radio-bg-color:var(--csstools-light-dark-toggle--20, #f0f0f4); --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #15141a; --radio-checked-bg-color:var(--csstools-light-dark-toggle--21, #fbfbfe); --radio-border-color:#8f8f9d; --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) #0df; --radio-checked-border-color:var(--csstools-light-dark-toggle--22, #0060df); --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-secondary-bg-color:var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); --button-secondary-fg-color:var(--text-primary-color); --button-secondary-border-color:var(--button-secondary-bg-color); --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); --button-secondary-active-fg-color:var(--button-secondary-fg-color); --button-secondary-active-border-color:var(--button-secondary-bg-color); --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); --button-secondary-hover-fg-color:var(--button-secondary-fg-color); --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); --button-secondary-disabled-bg-color:var(--button-secondary-bg-color); --button-secondary-disabled-border-color:var( --button-secondary-border-color ); --button-secondary-disabled-fg-color:var(--button-secondary-fg-color); --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) #0df; --button-primary-bg-color:var(--csstools-light-dark-toggle--26, #0060df); --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #15141a; --button-primary-fg-color:var(--csstools-light-dark-toggle--27, #fbfbfe); --button-primary-border-color:var(--button-primary-bg-color); --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #aaf2ff; --button-primary-active-bg-color:var(--csstools-light-dark-toggle--28, #054096); --button-primary-active-fg-color:var(--button-primary-fg-color); --button-primary-active-border-color:var(--button-primary-active-bg-color); --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #80ebff; --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--29, #0250bb); --button-primary-hover-fg-color:var(--button-primary-fg-color); --button-primary-hover-border-color:var(--button-primary-hover-bg-color); --button-primary-disabled-bg-color:var(--button-primary-bg-color); --button-primary-disabled-border-color:var(--button-primary-border-color); --button-primary-disabled-fg-color:var(--button-primary-fg-color); --button-disabled-opacity:0.4; --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) #42414d; --input-text-bg-color:var(--csstools-light-dark-toggle--30, white); --input-text-fg-color:var(--text-primary-color); } @supports (color: light-dark(red, red)){ .dialog{ --dialog-bg-color:light-dark(white, #1c1b22); --dialog-border-color:light-dark(white, #1c1b22); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .dialog{ --dialog-shadow:0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); } } @supports (color: light-dark(red, red)){ .dialog{ --text-primary-color:light-dark(#15141a, #fbfbfe); --text-secondary-color:light-dark(#5b5b66, #cfcfd8); --link-fg-color:light-dark(#0060df, #0df); --link-hover-fg-color:light-dark(#0250bb, #80ebff); --separator-color:light-dark(#f0f0f4, #52525e); --textarea-bg-color:light-dark(white, #42414d); --radio-bg-color:light-dark(#f0f0f4, #2b2a33); --radio-checked-bg-color:light-dark(#fbfbfe, #15141a); --radio-checked-border-color:light-dark(#0060df, #0df); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .dialog{ --button-secondary-bg-color:light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); --button-secondary-active-bg-color:light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); --button-secondary-hover-bg-color:light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); } } @supports (color: light-dark(red, red)){ .dialog{ --button-primary-bg-color:light-dark(#0060df, #0df); --button-primary-fg-color:light-dark(#fbfbfe, #15141a); --button-primary-active-bg-color:light-dark(#054096, #aaf2ff); --button-primary-hover-bg-color:light-dark(#0250bb, #80ebff); --input-text-bg-color:light-dark(white, #42414d); } } @supports not (color: light-dark(tan, tan)){ .dialog *{ --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) #1c1b22; --dialog-bg-color:var(--csstools-light-dark-toggle--11, white); --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) #1c1b22; --dialog-border-color:var(--csstools-light-dark-toggle--12, white); --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #15141a; --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--14, #15141a); --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #cfcfd8; --text-secondary-color:var(--csstools-light-dark-toggle--15, #5b5b66); --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #0df; --link-fg-color:var(--csstools-light-dark-toggle--16, #0060df); --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color:var(--csstools-light-dark-toggle--17, #0250bb); --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #52525e; --separator-color:var(--csstools-light-dark-toggle--18, #f0f0f4); --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #42414d; --textarea-bg-color:var(--csstools-light-dark-toggle--19, white); --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #2b2a33; --radio-bg-color:var(--csstools-light-dark-toggle--20, #f0f0f4); --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #15141a; --radio-checked-bg-color:var(--csstools-light-dark-toggle--21, #fbfbfe); --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) #0df; --radio-checked-border-color:var(--csstools-light-dark-toggle--22, #0060df); --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-secondary-bg-color:var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) #0df; --button-primary-bg-color:var(--csstools-light-dark-toggle--26, #0060df); --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #15141a; --button-primary-fg-color:var(--csstools-light-dark-toggle--27, #fbfbfe); --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #aaf2ff; --button-primary-active-bg-color:var(--csstools-light-dark-toggle--28, #054096); --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #80ebff; --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--29, #0250bb); --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) #42414d; --input-text-bg-color:var(--csstools-light-dark-toggle--30, white); } } @media (prefers-color-scheme: dark){ .dialog{ --hover-filter:brightness(1.4); --button-disabled-opacity:0.6; } } @media screen and (forced-colors: active){ .dialog{ --dialog-bg-color:Canvas; --dialog-border-color:CanvasText; --dialog-shadow:none; --text-primary-color:CanvasText; --text-secondary-color:CanvasText; --hover-filter:none; --link-fg-color:LinkText; --link-hover-fg-color:LinkText; --separator-color:CanvasText; --textarea-border-color:ButtonBorder; --textarea-bg-color:Field; --textarea-fg-color:ButtonText; --radio-bg-color:ButtonFace; --radio-checked-bg-color:ButtonFace; --radio-border-color:ButtonText; --radio-checked-border-color:ButtonText; --button-secondary-bg-color:ButtonFace; --button-secondary-fg-color:ButtonText; --button-secondary-border-color:ButtonText; --button-secondary-active-bg-color:HighlightText; --button-secondary-active-fg-color:SelectedItem; --button-secondary-active-border-color:ButtonText; --button-secondary-hover-bg-color:HighlightText; --button-secondary-hover-fg-color:SelectedItem; --button-secondary-hover-border-color:SelectedItem; --button-secondary-disabled-fg-color:GrayText; --button-secondary-disabled-border-color:GrayText; --button-primary-bg-color:ButtonText; --button-primary-fg-color:ButtonFace; --button-primary-border-color:ButtonText; --button-primary-active-bg-color:SelectedItem; --button-primary-active-fg-color:HighlightText; --button-primary-active-border-color:ButtonText; --button-primary-hover-bg-color:SelectedItem; --button-primary-hover-fg-color:HighlightText; --button-primary-hover-border-color:SelectedItem; --button-primary-disabled-bg-color:GrayText; --button-primary-disabled-fg-color:ButtonFace; --button-primary-disabled-border-color:GrayText; --button-disabled-opacity:1; --input-text-bg-color:Field; --input-text-fg-color:FieldText; } } .dialog{ font:message-box; font-size:13px; font-weight:400; line-height:150%; border-radius:4px; padding:12px 16px; border:1px solid var(--dialog-border-color); background:var(--dialog-bg-color); color:var(--text-primary-color); box-shadow:var(--dialog-shadow); } :is(.dialog .mainContainer) *:focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } :is(.dialog .mainContainer) .title{ display:flex; width:auto; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; } :is(:is(.dialog .mainContainer) .title) > span{ font-size:13px; font-style:normal; font-weight:590; line-height:150%; } :is(.dialog .mainContainer) .dialogSeparator{ width:100%; height:0; margin-block:4px; border-top:1px solid var(--separator-color); border-bottom:none; } :is(.dialog .mainContainer) .dialogButtonsGroup{ display:flex; gap:12px; align-self:flex-end; } :is(.dialog .mainContainer) .radio{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; } :is(:is(.dialog .mainContainer) .radio) > .radioButton{ display:flex; gap:8px; align-self:stretch; align-items:center; } :is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; box-sizing:border-box; width:16px; height:16px; border-radius:50%; background-color:var(--radio-bg-color); border:1px solid var(--radio-border-color); } :is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover{ filter:var(--hover-filter); } :is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked{ background-color:var(--radio-checked-bg-color); border:4px solid var(--radio-checked-border-color); } :is(:is(.dialog .mainContainer) .radio) > .radioLabel{ display:flex; padding-inline-start:24px; align-items:flex-start; gap:10px; align-self:stretch; } :is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span{ flex:1 0 0; font-size:11px; color:var(--text-secondary-color); } :is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton)){ border-radius:4px; border:1px solid; font:menu; font-weight:590; font-size:13px; padding:4px 16px; width:auto; height:32px; } :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ cursor:pointer; filter:var(--hover-filter); } :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) > span{ color:inherit; font:inherit; } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ color:var(--button-secondary-fg-color); background-color:var(--button-secondary-bg-color); border-color:var(--button-secondary-border-color); } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ color:var(--button-secondary-hover-fg-color); background-color:var(--button-secondary-hover-bg-color); border-color:var(--button-secondary-hover-border-color); } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active{ color:var(--button-secondary-active-fg-color); background-color:var(--button-secondary-active-bg-color); border-color:var(--button-secondary-active-border-color); } .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ background-color:var(--button-secondary-disabled-bg-color); border-color:var(--button-secondary-disabled-border-color); color:var(--button-secondary-disabled-fg-color); opacity:var(--button-disabled-opacity); } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ color:var(--button-primary-fg-color); background-color:var(--button-primary-bg-color); border-color:var(--button-primary-border-color); opacity:1; } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ color:var(--button-primary-hover-fg-color); background-color:var(--button-primary-hover-bg-color); border-color:var(--button-primary-hover-border-color); } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active{ color:var(--button-primary-active-fg-color); background-color:var(--button-primary-active-bg-color); border-color:var(--button-primary-active-border-color); } .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ background-color:var(--button-primary-disabled-bg-color); border-color:var(--button-primary-disabled-border-color); color:var(--button-primary-disabled-fg-color); opacity:var(--button-disabled-opacity); } :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ pointer-events:none; } :is(.dialog .mainContainer) a{ color:var(--link-fg-color); } :is(:is(.dialog .mainContainer) a):hover{ color:var(--link-hover-fg-color); } :is(.dialog .mainContainer) textarea{ font:inherit; padding:8px; resize:none; margin:0; box-sizing:border-box; border-radius:4px; border:1px solid var(--textarea-border-color); background:var(--textarea-bg-color); color:var(--textarea-fg-color); } :is(:is(.dialog .mainContainer) textarea):focus{ outline-offset:0; border-color:transparent; } :is(:is(.dialog .mainContainer) textarea):disabled{ pointer-events:none; opacity:0.4; } :is(.dialog .mainContainer) input[type="text"]{ background-color:var(--input-text-bg-color); color:var(--input-text-fg-color); } :is(.dialog .mainContainer) .messageBar{ --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) #5a3100; --message-bar-bg-color:var(--csstools-light-dark-toggle--31, #ffebcd); --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) #fbfbfe; --message-bar-fg-color:var(--csstools-light-dark-toggle--32, #15141a); --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); --message-bar-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M14.8748%2012.037L9.37782%202.037C8.99682%201.346%208.31082%201%207.62482%201C6.93882%201%206.25282%201.346%205.87282%202.037L0.375823%2012.037C-0.358177%2013.37%200.606823%2015%202.12782%2015H13.1228C14.6428%2015%2015.6078%2013.37%2014.8748%2012.037ZM8.24982%2011.75L7.99982%2012H7.24982L6.99982%2011.75V11L7.24982%2010.75H7.99982L8.24982%2011V11.75ZM8.24982%209.062C8.24982%209.22776%208.18398%209.38673%208.06677%209.50394C7.94955%209.62115%207.79058%209.687%207.62482%209.687C7.45906%209.687%207.30009%209.62115%207.18288%209.50394C7.06567%209.38673%206.99982%209.22776%206.99982%209.062V5.625C6.99982%205.45924%207.06567%205.30027%207.18288%205.18306C7.30009%205.06585%207.45906%205%207.62482%205C7.79058%205%207.94955%205.06585%208.06677%205.18306C8.18398%205.30027%208.24982%205.45924%208.24982%205.625V9.062Z'%20fill='black'/%3e%3c/svg%3e"); --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #e49c49; --message-bar-icon-color:var(--csstools-light-dark-toggle--34, #cd411e); } @supports (color: light-dark(red, red)){ :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:light-dark(#ffebcd, #5a3100); --message-bar-fg-color:light-dark(#15141a, #fbfbfe); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ :is(.dialog .mainContainer) .messageBar{ --message-bar-border-color:light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); } } @supports (color: light-dark(red, red)){ :is(.dialog .mainContainer) .messageBar{ --message-bar-icon-color:light-dark(#cd411e, #e49c49); } } @supports not (color: light-dark(tan, tan)){ :is(:is(.dialog .mainContainer) .messageBar) *{ --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) #5a3100; --message-bar-bg-color:var(--csstools-light-dark-toggle--31, #ffebcd); --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) #fbfbfe; --message-bar-fg-color:var(--csstools-light-dark-toggle--32, #15141a); --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #e49c49; --message-bar-icon-color:var(--csstools-light-dark-toggle--34, #cd411e); } } @media screen and (forced-colors: active){ :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:HighlightText; --message-bar-fg-color:CanvasText; --message-bar-border-color:CanvasText; --message-bar-icon-color:CanvasText; } } :is(.dialog .mainContainer) .messageBar{ align-self:stretch; } :is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before,:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ margin-block:4px; } :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1 0 0; } :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title{ font-size:13px; font-weight:590; } :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{ font-size:13px; } :is(.dialog .mainContainer) .toggler{ display:flex; align-items:center; gap:8px; align-self:stretch; } :is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } .textLayer{ position:absolute; text-align:initial; inset:0; overflow:clip; opacity:1; line-height:1; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; caret-color:CanvasText; z-index:0; } .textLayer.highlighting{ touch-action:none; } .textLayer :is(span,br){ color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; } .textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){ z-index:1; } .textLayer span.markedContent{ top:0; height:0; } .textLayer span[role="img"]{ -webkit-user-select:none; -moz-user-select:none; user-select:none; cursor:default; } .textLayer .highlight{ --highlight-bg-color:rgb(180 0 170 / 0.25); --highlight-selected-bg-color:rgb(0 100 0 / 0.25); --highlight-backdrop-filter:none; --highlight-selected-backdrop-filter:none; } @media screen and (forced-colors: active){ .textLayer .highlight{ --highlight-bg-color:transparent; --highlight-selected-bg-color:transparent; --highlight-backdrop-filter:var(--hcm-highlight-filter); --highlight-selected-backdrop-filter:var( --hcm-highlight-selected-filter ); } } .textLayer .highlight{ margin:-1px; padding:1px; background-color:var(--highlight-bg-color); -webkit-backdrop-filter:var(--highlight-backdrop-filter); backdrop-filter:var(--highlight-backdrop-filter); border-radius:4px; } .appended:is(.textLayer .highlight){ position:initial; } .begin:is(.textLayer .highlight){ border-radius:4px 0 0 4px; } .end:is(.textLayer .highlight){ border-radius:0 4px 4px 0; } .middle:is(.textLayer .highlight){ border-radius:0; } .selected:is(.textLayer .highlight){ background-color:var(--highlight-selected-bg-color); -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter); backdrop-filter:var(--highlight-selected-backdrop-filter); } .textLayer ::-moz-selection{ background:rgba(0 0 255 / 0.25); background:color-mix(in srgb, AccentColor, transparent 75%); } .textLayer ::selection{ background:rgba(0 0 255 / 0.25); background:color-mix(in srgb, AccentColor, transparent 75%); } .textLayer br::-moz-selection{ background:transparent; } .textLayer br::selection{ background:transparent; } .textLayer .endOfContent{ display:block; position:absolute; inset:100% 0 0; z-index:0; cursor:default; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .textLayer.selecting .endOfContent{ top:0; } .annotationLayer{ --csstools-color-scheme--light:initial; color-scheme:only light; --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); --input-focus-border-color:Highlight; --input-focus-outline:1px solid Canvas; --input-unfocused-border-color:transparent; --input-disabled-border-color:transparent; --input-hover-border-color:black; --link-outline:none; } @media screen and (forced-colors: active){ .annotationLayer{ --input-focus-border-color:CanvasText; --input-unfocused-border-color:ActiveText; --input-disabled-border-color:GrayText; --input-hover-border-color:Highlight; --link-outline:1.5px solid LinkText; } .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ outline:1.5px solid selectedItem; } .annotationLayer .linkAnnotation{ outline:var(--link-outline); } :is(.annotationLayer .linkAnnotation):hover{ -webkit-backdrop-filter:var(--hcm-highlight-filter); backdrop-filter:var(--hcm-highlight-filter); } :is(.annotationLayer .linkAnnotation) > a:hover{ opacity:0 !important; background:none !important; box-shadow:none; } .annotationLayer .popupAnnotation .popup{ outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; background-color:ButtonFace !important; color:ButtonText !important; } .annotationLayer .highlightArea:hover::after{ position:absolute; top:0; left:0; width:100%; height:100%; -webkit-backdrop-filter:var(--hcm-highlight-filter); backdrop-filter:var(--hcm-highlight-filter); content:""; pointer-events:none; } .annotationLayer .popupAnnotation.focused .popup{ outline:calc(3px * var(--total-scale-factor)) solid Highlight !important; } } .annotationLayer{ position:absolute; top:0; left:0; pointer-events:none; transform-origin:0 0; } .annotationLayer[data-main-rotation="90"] .norotate{ transform:rotate(270deg) translateX(-100%); } .annotationLayer[data-main-rotation="180"] .norotate{ transform:rotate(180deg) translate(-100%, -100%); } .annotationLayer[data-main-rotation="270"] .norotate{ transform:rotate(90deg) translateY(-100%); } .annotationLayer.disabled section,.annotationLayer.disabled .popup{ pointer-events:none; } .annotationLayer .annotationContent{ position:absolute; width:100%; height:100%; pointer-events:none; } .freetext:is(.annotationLayer .annotationContent){ background:transparent; border:none; inset:0; overflow:visible; white-space:nowrap; font:10px sans-serif; line-height:1.35; } .annotationLayer section{ position:absolute; text-align:initial; pointer-events:auto; box-sizing:border-box; transform-origin:0 0; -webkit-user-select:none; -moz-user-select:none; user-select:none; } :is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{ display:none; } :is(.annotationLayer section) .overlaidText{ position:absolute; top:0; left:0; width:0; height:0; display:inline-block; overflow:hidden; } .textLayer.selecting ~ .annotationLayer section{ pointer-events:none; } .annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton) > a{ position:absolute; font-size:1em; top:0; left:0; width:100%; height:100%; } .annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover{ opacity:0.2; background-color:rgb(255 255 0); } .annotationLayer .linkAnnotation.hasBorder:hover{ background-color:rgb(255 255 0 / 0.2); } .annotationLayer .hasBorder{ background-size:100% 100%; } .annotationLayer .textAnnotation img{ position:absolute; cursor:pointer; width:100%; height:100%; top:0; left:0; } .annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ background-image:var(--annotation-unfocused-field-background); border:2px solid var(--input-unfocused-border-color); box-sizing:border-box; font:calc(9px * var(--total-scale-factor)) sans-serif; height:100%; margin:0; vertical-align:top; width:100%; } .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ outline:1.5px solid red; } .annotationLayer .choiceWidgetAnnotation select option{ padding:0; } .annotationLayer .buttonWidgetAnnotation.radioButton input{ border-radius:50%; } .annotationLayer .textWidgetAnnotation textarea{ resize:none; } .annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea),.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{ background:none; border:2px solid var(--input-disabled-border-color); cursor:not-allowed; } .annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{ border:2px solid var(--input-hover-border-color); } .annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{ border-radius:2px; } .annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{ background:none; border:2px solid var(--input-focus-border-color); border-radius:2px; outline:var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{ background-image:none; background-color:transparent; } .annotationLayer .buttonWidgetAnnotation.checkBox :focus{ border:2px solid var(--input-focus-border-color); border-radius:2px; outline:var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.radioButton :focus{ border:2px solid var(--input-focus-border-color); outline:var(--input-focus-outline); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ background-color:CanvasText; content:""; display:block; position:absolute; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ height:80%; left:45%; width:1px; } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{ transform:rotate(45deg); } .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ transform:rotate(-45deg); } .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ border-radius:50%; height:50%; left:25%; top:25%; width:50%; } .annotationLayer .textWidgetAnnotation input.comb{ font-family:monospace; padding-left:2px; padding-right:0; } .annotationLayer .textWidgetAnnotation input.comb:focus{ width:103%; } .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } .annotationLayer .fileAttachmentAnnotation .popupTriggerArea{ height:100%; width:100%; } .annotationLayer .popupAnnotation{ position:absolute; font-size:calc(9px * var(--total-scale-factor)); pointer-events:none; width:-moz-max-content; width:max-content; max-width:45%; height:auto; } .annotationLayer .popup{ background-color:rgb(255 255 153); color:black; box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136); border-radius:calc(2px * var(--total-scale-factor)); outline:1.5px solid rgb(255 255 74); padding:calc(6px * var(--total-scale-factor)); cursor:pointer; font:message-box; white-space:normal; word-wrap:break-word; pointer-events:auto; -webkit-user-select:text; -moz-user-select:text; user-select:text; } .annotationLayer .popupAnnotation.focused .popup{ outline-width:3px; } .annotationLayer .popup *{ font-size:calc(9px * var(--total-scale-factor)); } .annotationLayer .popup > .header{ display:inline-block; } .annotationLayer .popup > .header > .title{ display:inline; font-weight:bold; } .annotationLayer .popup > .header .popupDate{ display:inline-block; margin-left:calc(5px * var(--total-scale-factor)); width:-moz-fit-content; width:fit-content; } .annotationLayer .popupContent{ border-top:1px solid rgb(51 51 51); margin-top:calc(2px * var(--total-scale-factor)); padding-top:calc(2px * var(--total-scale-factor)); } .annotationLayer .richText > *{ white-space:pre-wrap; font-size:calc(9px * var(--total-scale-factor)); } .annotationLayer .popupTriggerArea{ cursor:pointer; } :is(.annotationLayer .popupTriggerArea):hover{ -webkit-backdrop-filter:var(--hcm-highlight-filter); backdrop-filter:var(--hcm-highlight-filter); } .annotationLayer section svg{ position:absolute; width:100%; height:100%; top:0; left:0; } .annotationLayer .annotationTextContent{ position:absolute; width:100%; height:100%; opacity:0; color:transparent; -webkit-user-select:none; -moz-user-select:none; user-select:none; pointer-events:none; } :is(.annotationLayer .annotationTextContent) span{ width:100%; display:inline-block; } .annotationLayer svg.quadrilateralsContainer{ contain:strict; width:0; height:0; position:absolute; top:0; left:0; z-index:-1; } :root{ --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); --xfa-focus-outline:auto; } @media screen and (forced-colors: active){ :root{ --xfa-focus-outline:2px solid CanvasText; } .xfaLayer *:required{ outline:1.5px solid selectedItem; } } .xfaLayer{ --csstools-color-scheme--light:initial; color-scheme:only light; background-color:transparent; } .xfaLayer .highlight{ margin:-1px; padding:1px; background-color:rgb(239 203 237); border-radius:4px; } .xfaLayer .highlight.appended{ position:initial; } .xfaLayer .highlight.begin{ border-radius:4px 0 0 4px; } .xfaLayer .highlight.end{ border-radius:0 4px 4px 0; } .xfaLayer .highlight.middle{ border-radius:0; } .xfaLayer .highlight.selected{ background-color:rgb(203 223 203); } .xfaPage{ overflow:hidden; position:relative; } .xfaContentarea{ position:absolute; } .xfaPrintOnly{ display:none; } .xfaLayer{ position:absolute; text-align:initial; top:0; left:0; transform-origin:0 0; line-height:1.2; } .xfaLayer *{ color:inherit; font:inherit; font-style:inherit; font-weight:inherit; font-kerning:inherit; letter-spacing:-0.01px; text-align:inherit; text-decoration:inherit; box-sizing:border-box; background-color:transparent; padding:0; margin:0; pointer-events:auto; line-height:inherit; } .xfaLayer *:required{ outline:1.5px solid red; } .xfaLayer div, .xfaLayer svg, .xfaLayer svg *{ pointer-events:none; } .xfaLayer a{ color:blue; } .xfaRich li{ margin-left:3em; } .xfaFont{ color:black; font-weight:normal; font-kerning:none; font-size:10px; font-style:normal; letter-spacing:0; text-decoration:none; vertical-align:0; } .xfaCaption{ overflow:hidden; flex:0 0 auto; } .xfaCaptionForCheckButton{ overflow:hidden; flex:1 1 auto; } .xfaLabel{ height:100%; width:100%; } .xfaLeft{ display:flex; flex-direction:row; align-items:center; } .xfaRight{ display:flex; flex-direction:row-reverse; align-items:center; } :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){ max-height:100%; } .xfaTop{ display:flex; flex-direction:column; align-items:flex-start; } .xfaBottom{ display:flex; flex-direction:column-reverse; align-items:flex-start; } :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){ width:100%; } .xfaBorder{ background-color:transparent; position:absolute; pointer-events:none; } .xfaWrapped{ width:100%; height:100%; } :is(.xfaTextfield, .xfaSelect):focus{ background-image:none; background-color:transparent; outline:var(--xfa-focus-outline); outline-offset:-1px; } :is(.xfaCheckbox, .xfaRadio):focus{ outline:var(--xfa-focus-outline); } .xfaTextfield, .xfaSelect{ height:100%; width:100%; flex:1 1 auto; border:none; resize:none; background-image:var(--xfa-unfocused-field-background); } .xfaSelect{ padding-inline:2px; } :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){ flex:0 1 auto; } .xfaButton{ cursor:pointer; width:100%; height:100%; border:none; text-align:center; } .xfaLink{ width:100%; height:100%; position:absolute; top:0; left:0; } .xfaCheckbox, .xfaRadio{ width:100%; height:100%; flex:0 0 auto; border:none; } .xfaRich{ white-space:pre-wrap; width:100%; height:100%; } .xfaImage{ -o-object-position:left top; object-position:left top; -o-object-fit:contain; object-fit:contain; width:100%; height:100%; } .xfaLrTb, .xfaRlTb, .xfaTb{ display:flex; flex-direction:column; align-items:stretch; } .xfaLr{ display:flex; flex-direction:row; align-items:stretch; } .xfaRl{ display:flex; flex-direction:row-reverse; align-items:stretch; } .xfaTb > div{ justify-content:left; } .xfaPosition{ position:relative; } .xfaArea{ position:relative; } .xfaValignMiddle{ display:flex; align-items:center; } .xfaTable{ display:flex; flex-direction:column; align-items:stretch; } .xfaTable .xfaRow{ display:flex; flex-direction:row; align-items:stretch; } .xfaTable .xfaRlRow{ display:flex; flex-direction:row-reverse; align-items:stretch; flex:1; } .xfaTable .xfaRlRow > div{ flex:1; } :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){ background:initial; } @media print{ .xfaTextfield, .xfaSelect{ background:transparent; } .xfaSelect{ -webkit-appearance:none; -moz-appearance:none; appearance:none; text-indent:1px; text-overflow:""; } } .canvasWrapper svg{ transform:none; } .moving:is(.canvasWrapper svg){ z-index:100000; } [data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(0, 1, -1, 0, 1, 0); } [data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(-1, 0, 0, -1, 1, 1); } [data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(0, -1, 1, 0, 0, 1); } .draw:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:normal; } .draw[data-draw-rotation="90"]:is(.canvasWrapper svg){ transform:rotate(90deg); } .draw[data-draw-rotation="180"]:is(.canvasWrapper svg){ transform:rotate(180deg); } .draw[data-draw-rotation="270"]:is(.canvasWrapper svg){ transform:rotate(270deg); } .highlight:is(.canvasWrapper svg){ --blend-mode:multiply; } @media screen and (forced-colors: active){ .highlight:is(.canvasWrapper svg){ --blend-mode:difference; } } .highlight:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:var(--blend-mode); } .highlight:is(.canvasWrapper svg):not(.free){ fill-rule:evenodd; } .highlightOutline:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:normal; fill-rule:evenodd; fill:none; } .highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected){ stroke:var(--hover-outline-color); stroke-width:var(--outline-width); } .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( var(--outline-width) + 2 * var(--outline-around-width) ); } .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline{ stroke:var(--outline-color); stroke-width:var(--outline-width); } .highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected){ stroke:var(--hover-outline-color); stroke-width:calc(2 * var(--outline-width)); } .highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( 2 * (var(--outline-width) + var(--outline-around-width)) ); } .highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline{ stroke:var(--outline-color); stroke-width:calc(2 * var(--outline-width)); } .toggle-button{ --button-background-color:color-mix(in srgb, currentColor 7%, transparent); --button-background-color-hover:color-mix( in srgb, currentColor 14%, transparent ); --button-background-color-active:color-mix( in srgb, currentColor 21%, transparent ); --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #0df; --color-accent-primary:var(--csstools-light-dark-toggle--35, #0060df); --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #80ebff; --color-accent-primary-hover:var(--csstools-light-dark-toggle--36, #0250bb); --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #aaf2ff; --color-accent-primary-active:var(--csstools-light-dark-toggle--37, #054096); --border-radius-circle:9999px; --border-width:1px; --size-item-small:16px; --size-item-large:32px; --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #1c1b22; --color-canvas:var(--csstools-light-dark-toggle--38, white); --background-color-canvas:var(--color-canvas); --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #f9f9fa; --border-color-interactive:var(--csstools-light-dark-toggle--39, #8f8f9d); --border-color-interactive-hover:var(--border-color-interactive); --border-color-interactive-active:var(--border-color-interactive); } @supports (color: light-dark(red, red)){ .toggle-button{ --color-accent-primary:light-dark(#0060df, #0df); --color-accent-primary-hover:light-dark(#0250bb, #80ebff); --color-accent-primary-active:light-dark(#054096, #aaf2ff); --color-canvas:light-dark(white, #1c1b22); --border-color-interactive:light-dark(#8f8f9d, #f9f9fa); } } @supports not (color: light-dark(tan, tan)){ .toggle-button *{ --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #0df; --color-accent-primary:var(--csstools-light-dark-toggle--35, #0060df); --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #80ebff; --color-accent-primary-hover:var(--csstools-light-dark-toggle--36, #0250bb); --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #aaf2ff; --color-accent-primary-active:var(--csstools-light-dark-toggle--37, #054096); --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #1c1b22; --color-canvas:var(--csstools-light-dark-toggle--38, white); --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #f9f9fa; --border-color-interactive:var(--csstools-light-dark-toggle--39, #8f8f9d); } } @media (forced-colors: active){ .toggle-button{ --color-accent-primary:ButtonText; --color-accent-primary-hover:SelectedItem; --color-accent-primary-active:SelectedItem; --button-background-color:ButtonFace; --border-color-interactive:ButtonText; --border-color-interactive-hover:SelectedItem; --border-color-interactive-active:ButtonText; --color-canvas:ButtonText; --background-color-canvas:Canvas; } } .toggle-button{ --toggle-background-color:var(--button-background-color); --toggle-background-color-hover:var(--button-background-color-hover); --toggle-background-color-active:var(--button-background-color-active); --toggle-background-color-pressed:var(--color-accent-primary); --toggle-background-color-pressed-hover:var(--color-accent-primary-hover); --toggle-background-color-pressed-active:var(--color-accent-primary-active); --toggle-border-color:var(--border-color-interactive); --toggle-border-color-hover:var(--toggle-border-color); --toggle-border-color-active:var(--toggle-border-color); --toggle-border-radius:var(--border-radius-circle); --toggle-border-width:var(--border-width); --toggle-height:var(--size-item-small); --toggle-width:var(--size-item-large); --toggle-dot-background-color:var(--toggle-border-color); --toggle-dot-background-color-hover:var(--toggle-dot-background-color); --toggle-dot-background-color-active:var(--toggle-dot-background-color); --toggle-dot-background-color-on-pressed:var(--background-color-canvas); --toggle-dot-margin:1px; --toggle-dot-height:calc( var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) ); --toggle-dot-width:var(--toggle-dot-height); --toggle-dot-transform-x:calc( var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width) ); --input-width:var(--toggle-width); -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0; border:var(--toggle-border-width) solid var(--toggle-border-color); height:var(--toggle-height); width:var(--toggle-width); border-radius:var(--toggle-border-radius); background-color:var(--toggle-background-color); box-sizing:border-box; } .toggle-button:focus-visible{ outline:var(--focus-outline); outline-offset:var(--focus-outline-offset); } .toggle-button:enabled:hover{ background-color:var(--toggle-background-color-hover); border-color:var(--toggle-border-color); } .toggle-button:enabled:hover:active{ background-color:var(--toggle-background-color-active); border-color:var(--toggle-border-color); } .toggle-button::before{ display:block; content:""; background-color:var(--toggle-dot-background-color); height:var(--toggle-dot-height); width:var(--toggle-dot-width); margin:var(--toggle-dot-margin); border-radius:var(--toggle-border-radius); translate:0; } .toggle-button[aria-pressed="true"]{ background-color:var(--toggle-background-color-pressed); border-color:transparent; } .toggle-button[aria-pressed="true"]:enabled:hover{ background-color:var(--toggle-background-color-pressed-hover); border-color:transparent; } .toggle-button[aria-pressed="true"]:enabled:hover:active{ background-color:var(--toggle-background-color-pressed-active); border-color:transparent; } .toggle-button[aria-pressed="true"]::before{ translate:var(--toggle-dot-transform-x); background-color:var(--toggle-dot-background-color-on-pressed); } .toggle-button[aria-pressed="true"]:enabled:hover::before,.toggle-button[aria-pressed="true"]:enabled:hover:active::before{ background-color:var(--toggle-dot-background-color-on-pressed); } .toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl)::before,[dir="rtl"] .toggle-button[aria-pressed="true"]::before{ translate:calc(-1 * var(--toggle-dot-transform-x)); } @media (prefers-reduced-motion: no-preference){ .toggle-button::before{ transition:translate 100ms; } } @media (prefers-contrast){ .toggle-button:enabled:hover{ border-color:var(--toggle-border-color-hover); } .toggle-button:enabled:hover:active{ border-color:var(--toggle-border-color-active); } .toggle-button[aria-pressed="true"]:enabled{ border-color:var(--toggle-border-color); position:relative; } .toggle-button[aria-pressed="true"]:enabled:hover{ border-color:var(--toggle-border-color-hover); } .toggle-button[aria-pressed="true"]:enabled:hover:active{ background-color:var(--toggle-dot-background-color-active); border-color:var(--toggle-dot-background-color-hover); } .toggle-button:enabled:hover::before, .toggle-button:enabled:hover:active::before{ background-color:var(--toggle-dot-background-color-hover); } } @media (forced-colors){ .toggle-button{ --toggle-dot-background-color:var(--color-accent-primary); --toggle-dot-background-color-hover:var(--color-accent-primary-hover); --toggle-dot-background-color-active:var(--color-accent-primary-active); --toggle-dot-background-color-on-pressed:var(--button-background-color); --toggle-border-color-hover:var(--border-color-interactive-hover); --toggle-border-color-active:var(--border-color-interactive-active); } .toggle-button[aria-pressed="true"]:enabled::after{ border:1px solid var(--button-background-color); content:""; position:absolute; height:var(--toggle-height); width:var(--toggle-width); display:block; border-radius:var(--toggle-border-radius); inset:-2px; } .toggle-button[aria-pressed="true"]:enabled:hover:active::after{ border-color:var(--toggle-border-color-active); } } :root{ --clear-signature-button-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%203H13.6C14%203%2014.3%203.3%2014.3%203.6C14.3%203.9%2014%204.2%2013.7%204.2H13.3V14C13.3%2015.1%2012.4%2016%2011.3%2016H4.80005C3.70005%2016%202.80005%2015.1%202.80005%2014V4.2H2.40005C2.00005%204.2%201.80005%204%201.80005%203.6C1.80005%203.2%202.00005%203%202.40005%203H5.00005V2C5.00005%200.9%205.90005%200%207.00005%200H9.00005C10.1%200%2011%200.9%2011%202V3ZM6.90005%201.2L6.30005%201.8V3H9.80005V1.8L9.20005%201.2H6.90005ZM11.4%2014.7L12%2014.1V4.2H4.00005V14.1L4.60005%2014.7H11.4ZM7.00005%2012.4C7.00005%2012.7%206.70005%2013%206.40005%2013C6.10005%2013%205.80005%2012.7%205.80005%2012.4V7.6C5.70005%207.3%206.00005%207%206.40005%207C6.80005%207%207.00005%207.3%207.00005%207.6V12.4ZM10.2001%2012.4C10.2001%2012.7%209.90006%2013%209.60006%2013C9.30006%2013%209.00006%2012.7%209.00006%2012.4V7.6C9.00006%207.3%209.30006%207%209.60006%207C9.90006%207%2010.2001%207.3%2010.2001%207.6V12.4Z'%20fill='black'%20/%3e%3c/svg%3e"); --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #2b2a33; --signature-bg:var(--csstools-light-dark-toggle--40, #f9f9fb); --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) var(--signature-bg); --signature-hover-bg:var(--csstools-light-dark-toggle--41, #f0f0f4); --button-signature-bg:transparent; --button-signature-color:var(--main-color); --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #5b5b66; --button-signature-active-bg:var(--csstools-light-dark-toggle--42, #cfcfd8); --button-signature-active-border:none; --button-signature-active-color:var(--button-signature-color); --button-signature-border:none; --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #52525e; --button-signature-hover-bg:var(--csstools-light-dark-toggle--43, #e0e0e6); --button-signature-hover-color:var(--button-signature-color); } @supports (color: light-dark(red, red)){ :root{ --signature-bg:light-dark(#f9f9fb, #2b2a33); --signature-hover-bg:light-dark(#f0f0f4, var(--signature-bg)); --button-signature-active-bg:light-dark(#cfcfd8, #5b5b66); --button-signature-hover-bg:light-dark(#e0e0e6, #52525e); } } @supports not (color: light-dark(tan, tan)){ :root *{ --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #2b2a33; --signature-bg:var(--csstools-light-dark-toggle--40, #f9f9fb); --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) var(--signature-bg); --signature-hover-bg:var(--csstools-light-dark-toggle--41, #f0f0f4); --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #5b5b66; --button-signature-active-bg:var(--csstools-light-dark-toggle--42, #cfcfd8); --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #52525e; --button-signature-hover-bg:var(--csstools-light-dark-toggle--43, #e0e0e6); } } @media screen and (forced-colors: active){ :root{ --signature-bg:HighlightText; --signature-hover-bg:var(--signature-bg); --button-signature-bg:HighlightText; --button-signature-color:ButtonText; --button-signature-active-bg:ButtonText; --button-signature-active-color:HighlightText; --button-signature-border:1px solid ButtonText; --button-signature-hover-bg:Highlight; --button-signature-hover-color:HighlightText; } } .signatureDialog{ --primary-color:var(--text-primary-color); --border-color:#8f8f9d; --open-link-fg:var(--link-fg-color); --open-link-hover-fg:var(--link-hover-fg-color); } @media screen and (forced-colors: active){ .signatureDialog{ --primary-color:ButtonText; --border-color:ButtonText; --open-link-fg:ButtonText; --open-link-hover-fg:ButtonText; } } .signatureDialog{ width:570px; max-width:100%; min-width:300px; padding:16px 0; } .signatureDialog .mainContainer{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } :is(.signatureDialog .mainContainer) span:not([role="sectionhead"]){ font-size:13px; font-style:normal; font-weight:400; line-height:normal; } :is(.signatureDialog .mainContainer) .title{ margin-inline-start:16px; } .signatureDialog .inputWithClearButton{ --button-dimension:24px; --clear-button-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M7.85822%208.84922L4.85322%2011.8542C4.75891%2011.9453%204.63261%2011.9957%204.50151%2011.9946C4.37042%2011.9934%204.24501%2011.9408%204.15231%2011.8481C4.0596%2011.7554%204.00702%2011.63%204.00588%2011.4989C4.00474%2011.3678%204.05514%2011.2415%204.14622%2011.1472L7.15122%208.14222V7.85922L4.14622%204.85322C4.05514%204.75891%204.00474%204.63261%204.00588%204.50151C4.00702%204.37042%204.0596%204.24501%204.15231%204.15231C4.24501%204.0596%204.37042%204.00702%204.50151%204.00588C4.63261%204.00474%204.75891%204.05514%204.85322%204.14622L7.85822%207.15122H8.14122L11.1462%204.14622C11.2405%204.05514%2011.3668%204.00474%2011.4979%204.00588C11.629%204.00702%2011.7544%204.0596%2011.8471%204.15231C11.9398%204.24501%2011.9924%204.37042%2011.9936%204.50151C11.9947%204.63261%2011.9443%204.75891%2011.8532%204.85322L8.84822%207.85922V8.14222L11.8532%2011.1472C11.9443%2011.2415%2011.9947%2011.3678%2011.9936%2011.4989C11.9924%2011.63%2011.9398%2011.7554%2011.8471%2011.8481C11.7544%2011.9408%2011.629%2011.9934%2011.4979%2011.9946C11.3668%2011.9957%2011.2405%2011.9453%2011.1462%2011.8542L8.14122%208.84922L8.14222%208.85022L7.85822%208.84922Z'%20fill='black'/%3e%3c/svg%3e"); width:100%; position:relative; display:flex; align-items:center; justify-content:center; } :is(.signatureDialog .inputWithClearButton) > input{ width:100%; height:32px; padding-inline:8px calc(4px + var(--button-dimension)); box-sizing:border-box; border-radius:4px; border:1px solid var(--border-color); } :is(.signatureDialog .inputWithClearButton) .clearInputButton{ position:absolute; inset-block-start:4px; inset-inline-end:4px; display:inline-block; width:var(--button-dimension); height:var(--button-dimension); background-color:var(--input-text-fg-color); -webkit-mask-size:cover; mask-size:cover; -webkit-mask-image:var(--clear-button-icon); mask-image:var(--clear-button-icon); padding:0; border:0; } #addSignatureDialog{ --secondary-color:var(--text-secondary-color); --bg-hover:#e0e0e6; --tab-top-line-active-color:#0060df; --tab-top-line-active-hover-color:var(--tab-text-hover-color); --tab-top-line-hover-color:#8f8f9d; --tab-top-line-inactive-color:#cfcfd8; --tab-bottom-line-active-color:var(--tab-top-line-inactive-color); --tab-bottom-line-hover-color:var(--tab-top-line-inactive-color); --tab-bottom-line-inactive-color:var(--tab-top-line-inactive-color); --tab-bg:var(--dialog-bg-color); --tab-bg-active-color:var(--tab-bg); --tab-bg-active-hover-color:var(--bg-hover); --tab-bg-hover:var(--bg-hover); --tab-panel-border:none; --tab-panel-border-radius:4px; --tab-text-color:var(--primary-color); --tab-text-active-color:var(--tab-top-line-active-color); --tab-text-active-hover-color:var(--tab-text-hover-color); --tab-text-hover-color:var(--tab-text-color); --signature-placeholder-color:var(--secondary-color); --signature-draw-placeholder-color:var(--primary-color); --signature-color:var(--primary-color); --clear-signature-button-border-width:0; --clear-signature-button-border-style:solid; --clear-signature-button-border-color:transparent; --clear-signature-button-border-disabled-color:transparent; --clear-signature-button-color:var(--primary-color); --clear-signature-button-hover-color:var(--clear-signature-button-color); --clear-signature-button-active-color:var(--clear-signature-button-color); --clear-signature-button-disabled-color:var(--clear-signature-button-color); --clear-signature-button-focus-color:var(--clear-signature-button-color); --clear-signature-button-bg:var(--dialog-bg-color); --clear-signature-button-bg-hover:var(--bg-hover); --clear-signature-button-bg-active:#cfcfd8; --clear-signature-button-bg-focus:#f0f0f4; --clear-signature-button-bg-disabled:color-mix( in srgb, #f0f0f4, transparent 40% ); --save-warning-color:var(--secondary-color); --thickness-bg:var(--dialog-bg-color); --thickness-label-color:var(--primary-color); --thickness-slider-color:var(--primary-color); --thickness-border:none; --draw-cursor:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.0189877%2013.6645L0.612989%2010.4635C0.687989%2010.0545%200.884989%209.6805%201.18099%209.3825L9.98199%200.5805C10.756%20-0.1925%2012.015%20-0.1945%2012.792%200.5805L14.42%202.2085C15.194%202.9835%2015.194%204.2435%2014.42%205.0185L5.61599%2013.8215C5.31999%2014.1165%204.94599%2014.3125%204.53799%2014.3875L1.33599%2014.9815C1.26599%2014.9935%201.19799%2015.0005%201.12999%2015.0005C0.832989%2015.0005%200.544988%2014.8835%200.330988%2014.6695C0.0679874%2014.4055%20-0.0490122%2014.0305%200.0189877%2013.6645Z'%20fill='white'/%3e%3cpath%20d='M0.0189877%2013.6645L0.612989%2010.4635C0.687989%2010.0545%200.884989%209.6805%201.18099%209.3825L9.98199%200.5805C10.756%20-0.1925%2012.015%20-0.1945%2012.792%200.5805L14.42%202.2085C15.194%202.9835%2015.194%204.2435%2014.42%205.0185L5.61599%2013.8215C5.31999%2014.1165%204.94599%2014.3125%204.53799%2014.3875L1.33599%2014.9815C1.26599%2014.9935%201.19799%2015.0005%201.12999%2015.0005C0.832989%2015.0005%200.544988%2014.8835%200.330988%2014.6695C0.0679874%2014.4055%20-0.0490122%2014.0305%200.0189877%2013.6645ZM12.472%205.1965L13.632%204.0365L13.631%203.1885L11.811%201.3675L10.963%201.3685L9.80299%202.5285L12.472%205.1965ZM4.31099%2013.1585C4.47099%2013.1285%204.61799%2013.0515%204.73399%2012.9345L11.587%206.0815L8.91899%203.4135L2.06599%2010.2655C1.94899%2010.3835%201.87199%2010.5305%201.84099%2010.6915L1.36699%2013.2485L1.75199%2013.6335L4.31099%2013.1585Z'%20fill='black'/%3e%3c/svg%3e") 0 16, pointer; } @media (prefers-color-scheme: dark){ #addSignatureDialog{ --dialog-bg-color:#42414d; --bg-hover:#52525e; --primary-color:#fbfbfe; --secondary-color:#cfcfd8; --tab-top-line-active-color:#0df; --tab-top-line-inactive-color:#8f8f9d; --clear-signature-button-bg-active:#5b5b66; --clear-signature-button-bg-focus:#2b2a33; --clear-signature-button-bg-disabled:color-mix( in srgb, #2b2a33, transparent 40% ); } } @media screen and (forced-colors: active){ #addSignatureDialog{ --secondary-color:ButtonText; --bg:HighlightText; --bg-hover:var(--bg); --tab-top-line-active-color:ButtonText; --tab-top-line-active-hover-color:HighlightText; --tab-top-line-hover-color:SelectedItem; --tab-top-line-inactive-color:ButtonText; --tab-bottom-line-active-color:var(--tab-top-line-active-color); --tab-bottom-line-hover-color:var(--tab-top-line-hover-color); --tab-bg:var(--bg); --tab-bg-active-color:SelectedItem; --tab-bg-active-hover-color:SelectedItem; --tab-panel-border:1px solid ButtonText; --tab-panel-border-radius:8px; --tab-text-color:ButtonText; --tab-text-active-color:HighlightText; --tab-text-active-hover-color:HighlightText; --tab-text-hover-color:SelectedItem; --signature-color:ButtonText; --clear-signature-button-border-width:1px; --clear-signature-button-border-style:solid; --clear-signature-button-border-color:ButtonText; --clear-signature-button-border-disabled-color:GrayText; --clear-signature-button-color:ButtonText; --clear-signature-button-hover-color:HighlightText; --clear-signature-button-active-color:SelectedItem; --clear-signature-button-focus-color:CanvasText; --clear-signature-button-disabled-color:GrayText; --clear-signature-button-bg:var(--bg); --clear-signature-button-bg-hover:SelectedItem; --clear-signature-button-bg-active:var(--bg); --clear-signature-button-bg-focus:var(--bg); --clear-signature-button-bg-disabled:var(--bg); --thickness-bg:Canvas; --thickness-label-color:CanvasText; --thickness-slider-color:ButtonText; --thickness-border:1px solid var(--border-color); } } #addSignatureDialog #addSignatureDialogLabel{ overflow:hidden; position:absolute; inset:0; width:0; height:0; } #addSignatureDialog.waiting::after{ content:""; cursor:wait; position:absolute; inset:0; width:100%; height:100%; } :is(#addSignatureDialog .mainContainer) [role="tablist"]{ width:100%; display:flex; align-items:flex-start; gap:0; } :is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]{ flex:1 0 0; align-self:stretch; background-color:var(--tab-bg); padding-inline:0; cursor:default; border-inline:0; border-block-width:1px; border-block-style:solid; border-block-start-color:var(--tab-top-line-inactive-color); border-block-end-color:var(--tab-bottom-line-inactive-color); border-radius:0; font:menu; font-size:13px; font-style:normal; line-height:normal; font-weight:400; color:var(--tab-text-color); } :is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ border-block-start-width:2px; border-block-start-color:var(--tab-top-line-hover-color); border-block-end-color:var(--tab-bottom-line-hover-color); background-color:var(--tab-bg-hover); color:var(--tab-text-hover-color); } :is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible{ outline:2px solid var(--tab-top-line-active-color); outline-offset:-2px; } [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]){ border-block-start-width:2px; border-block-start-color:var(--tab-top-line-active-color); border-block-end-color:var(--tab-bottom-line-active-color); background-color:var(--tab-bg-active-color); font-weight:590; color:var(--tab-text-active-color); } [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ border-block-start-color:var(--tab-top-line-active-hover-color); background-color:var(--tab-bg-active-hover-color); color:var(--tab-text-active-hover-color); } :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer{ width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-end; align-self:stretch; gap:12px; padding-inline:16px; box-sizing:border-box; } :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]{ position:relative; width:100%; height:220px; background-color:var(--signature-bg); border:var(--tab-panel-border); border-radius:var(--tab-panel-border-radius); } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ position:absolute; inset:0; width:100%; height:100%; background-color:transparent; } #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; text-align:center; color:var(--signature-color); background-color:transparent; border-radius:var(--tab-panel-border-radius); font-family:"Brush script", "Apple Chancery", "Segoe script", "Freestyle Script", "Palace Script MT", "Brush Script MT", TK, cursive, serif; font-size:44px; font-style:italic; font-weight:400; } :is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::-moz-placeholder{ color:var(--signature-placeholder-color); text-align:center; font:menu; font-style:normal; font-weight:274; font-size:44px; line-height:normal; } :is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder{ color:var(--signature-placeholder-color); text-align:center; font:menu; font-style:normal; font-weight:274; font-size:44px; line-height:normal; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span{ position:absolute; top:0; left:0; width:100%; height:100%; display:grid; align-items:center; justify-content:center; background-color:transparent; color:var(--signature-placeholder-color); -webkit-user-select:none; -moz-user-select:none; user-select:none; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ stroke:var(--signature-color); fill:none; stroke-opacity:1; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg):hover{ cursor:var(--draw-cursor); } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness{ position:absolute; width:100%; inset-block-end:0; display:grid; align-items:center; justify-content:center; pointer-events:none; } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span{ color:var(--signature-draw-placeholder-color); } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div{ width:auto; height:auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 8px 7px; margin:0; background-color:var(--thickness-bg); border-radius:4px 4px 0 0; border-inline:var(--thickness-border); border-top:var(--thickness-border); pointer-events:auto; position:relative; top:1px; } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label{ color:var(--thickness-label-color); } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ width:100px; height:14px; background-color:transparent; } :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-runnable-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-progress{ background-color:var(--thickness-slider-color); } :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-thumb,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-thumb{ background-color:var(--thickness-bg); } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ border-radius:4.5px; border:0; color:var(--signature-color); } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ stroke:none; stroke-width:0; fill:var(--signature-color); fill-opacity:1; } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; } :is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span{ color:var(--signature-placeholder-color); } :is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a{ color:var(--open-link-fg); text-decoration:underline; cursor:pointer; } :is(:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a):hover{ color:var(--open-link-hover-fg); } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker{ visibility:hidden; position:relative; width:0; height:0; } [data-selected="type"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureTypeContainer,[data-selected="draw"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureDrawContainer,[data-selected="image"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureImageContainer{ display:block; } :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; align-self:stretch; } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer{ display:flex; align-items:flex-end; gap:16px; align-self:stretch; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 0 0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer):has(input:disabled) > label{ opacity:0.4; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label{ width:auto; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton{ display:flex; height:32px; padding:4px 8px; align-items:center; background-color:var(--clear-signature-button-bg); border-width:var(--clear-signature-button-border-width); border-style:var(--clear-signature-button-border-style); border-color:var(--clear-signature-button-border-color); border-radius:4px; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span{ display:flex; height:24px; align-items:center; gap:4px; flex-shrink:0; color:var(--clear-signature-button-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span)::after{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--clear-signature-button-color); flex-shrink:0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover{ background-color:var(--clear-signature-button-bg-hover); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span{ color:var(--clear-signature-button-hover-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span)::after{ background-color:var(--clear-signature-button-hover-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active{ background-color:var(--clear-signature-button-bg-active); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span{ color:var(--clear-signature-button-active-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span)::after{ background-color:var(--clear-signature-button-active-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible{ background-color:var(--clear-signature-button-bg-focus); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span{ color:var(--clear-signature-button-focus-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span)::after{ background-color:var(--clear-signature-button-focus-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled{ background-color:var(--clear-signature-button-bg-disabled); border-color:var(--clear-signature-button-border-disabled-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span{ color:var(--clear-signature-button-disabled-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span)::after{ background-color:var( --clear-signature-button-disabled-color ); } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer{ display:grid; grid-template-columns:max-content auto; gap:4px; width:100%; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input{ margin:0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label{ opacity:0.4; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning{ display:none; } .fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning{ display:block; opacity:1; color:var(--save-warning-color); font-size:11px; } #editSignatureDescriptionDialog .mainContainer{ padding-inline:16px; box-sizing:border-box; } :is(#editSignatureDescriptionDialog .mainContainer) .title{ margin-inline-start:0; } :is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView{ width:auto; display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; } :is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 1 auto; } :is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg{ width:210px; height:180px; padding:8px; background-color:var(--signature-bg); } :is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; } .contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path){ fill:var(--button-signature-color); stroke-width:0.5px; } #editorSignatureParamsToolbar{ padding:8px; } #editorSignatureParamsToolbar #addSignatureDoorHanger{ gap:8px; padding:2px; } :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer{ height:32px; display:flex; justify-content:space-between; align-items:center; align-self:stretch; gap:8px; } :is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button{ border:var(--button-signature-border); border-radius:4px; background-color:var(--button-signature-bg); color:var(--button-signature-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):hover{ background-color:var(--button-signature-hover-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active{ border:var(--button-signature-active-border); background-color:var(--button-signature-active-bg); color:var(--button-signature-active-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active::before{ background-color:var(--button-signature-active-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible{ outline:var(--focus-ring-outline); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible::before{ background-color:var(--button-signature-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton)::before{ -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); } :is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton{ width:calc(0.8 * var(--editor-toolbar-min-width)); height:100%; min-height:var(--menuitem-height); aspect-ratio:unset; display:flex; align-items:center; justify-content:flex-start; outline:none; border-radius:4px; box-sizing:border-box; font:message-box; position:relative; flex:1 1 auto; padding:0; gap:8px; text-align:start; white-space:normal; cursor:default; overflow:hidden; } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg{ display:inline-block; height:100%; aspect-ratio:1; background-color:var(--signature-bg); flex:none; padding:4px; box-sizing:border-box; border:none; border-radius:4px; } :is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; } .contours:is(:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path){ fill:var(--button-signature-color); stroke-width:0.5px; } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is(:hover,:active) > svg{ border-radius:4px 0 0 4px; background-color:var(--signature-hover-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):hover > span{ color:var(--button-signature-hover-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):active{ background-color:var(--button-signature-active-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is([disabled="disabled"],[disabled]){ opacity:0.5; pointer-events:none; } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > span{ height:auto; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; font:menu; font-size:13px; font-style:normal; font-weight:400; line-height:normal; overflow:hidden; } .editDescription.altText{ --alt-text-add-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='17'%20viewBox='0%200%2016%2017'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M14.9815%2014.3461L14.3875%2011.1451C14.3125%2010.7361%2014.1155%2010.3621%2013.8195%2010.0641L5.0185%201.26214C4.2445%200.489141%202.9855%200.487141%202.2085%201.26214L0.5805%202.89014C-0.1935%203.66514%20-0.1935%204.92514%200.5805%205.70014L9.3845%2014.5031C9.6805%2014.7981%2010.0545%2014.9941%2010.4625%2015.0691L13.6645%2015.6631C13.7345%2015.6751%2013.8025%2015.6821%2013.8705%2015.6821C14.1675%2015.6821%2014.4555%2015.5651%2014.6695%2015.3511C14.9325%2015.0871%2015.0495%2014.7121%2014.9815%2014.3461ZM2.5285%205.87814L1.3685%204.71814L1.3695%203.87014L3.1895%202.04914L4.0375%202.05014L5.1975%203.21014L2.5285%205.87814ZM10.6895%2013.8401C10.5295%2013.8101%2010.3825%2013.7331%2010.2665%2013.6161L3.4135%206.76314L6.0815%204.09514L12.9345%2010.9471C13.0515%2011.0651%2013.1285%2011.2121%2013.1595%2011.3731L13.6335%2013.9301L13.2485%2014.3151L10.6895%2013.8401Z'%20fill='black'/%3e%3c/svg%3e") !important; } .editDescription.altText::before{ width:16px !important; height:16px !important; } .commentPopup, #commentManagerDialog{ width:360px; max-width:100%; min-width:200px; position:absolute; padding:8px 16px 16px; margin-left:0; margin-top:0; box-sizing:border-box; border-radius:8px; } #commentManagerDialog{ --comment-close-button-icon:url("data:image/svg+xml,%3csvg%20width='25'%20height='24'%20viewBox='0%200%2025%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.6241%2011.7759L18.3331%207.06694C18.4423%206.94811%2018.5015%206.79167%2018.4981%206.63028C18.4948%206.46889%2018.4292%206.31502%2018.3152%206.20081C18.2011%206.0866%2018.0473%206.02088%2017.8859%206.01736C17.7245%206.01384%2017.568%206.0728%2017.4491%206.18194L12.7601%2010.8709H12.2721L7.58306%206.18294C7.52495%206.12489%207.45598%206.07886%207.38008%206.04747C7.30418%206.01609%207.22284%205.99995%207.14071%206C7.05857%206.00005%206.97725%206.01627%206.90139%206.04774C6.82553%206.07922%206.75661%206.12533%206.69856%206.18344C6.64052%206.24155%206.59449%206.31052%206.5631%206.38642C6.53171%206.46232%206.51558%206.54366%206.51563%206.62579C6.51572%206.79167%206.5817%206.95071%206.69906%207.06794L11.3861%2011.7539V12.2449L6.69906%2016.9319C6.5898%2017.0508%206.53066%2017.2072%206.53399%2017.3686C6.53732%2017.53%206.60288%2017.6839%206.71696%2017.7981C6.83104%2017.9123%206.98483%2017.978%207.14622%2017.9815C7.3076%2017.985%207.46411%2017.9261%207.58306%2017.8169L12.2701%2013.1299H12.7611L17.4481%2017.8169C17.5656%2017.934%2017.7247%2017.9997%2017.8906%2017.9997C18.0564%2017.9997%2018.2155%2017.934%2018.3331%2017.8169C18.4504%2017.6996%2018.5163%2017.5404%2018.5163%2017.3744C18.5163%2017.2085%2018.4504%2017.0493%2018.3331%2016.9319L13.6241%2012.2229V11.7759Z'%20fill='black'/%3e%3c/svg%3e"); } #commentManagerDialog .mainContainer{ width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-start; gap:4px; } :is(#commentManagerDialog .mainContainer) #commentManagerToolbar{ width:100%; height:32px; display:flex; justify-content:flex-start; align-items:flex-start; gap:8px; align-self:stretch; cursor:move; } :is(#commentManagerDialog .mainContainer) #commentManagerTextInput{ width:100%; min-height:132px; margin-bottom:12px; } .annotationLayer.disabled :is(.annotationCommentButton){ display:none; } :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --csstools-color-scheme--light:initial; color-scheme:light dark; --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #1c1b22; --comment-button-bg:var(--csstools-light-dark-toggle--44, white); --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; --comment-button-fg:var(--csstools-light-dark-toggle--45, #5b5b66); --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #a6ecf4; --comment-button-active-bg:var(--csstools-light-dark-toggle--46, #0041a4); --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #15141a; --comment-button-active-fg:var(--csstools-light-dark-toggle--47, white); --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #61dce9; --comment-button-hover-bg:var(--csstools-light-dark-toggle--48, #0053cb); --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #15141a; --comment-button-hover-fg:var(--csstools-light-dark-toggle--49, white); --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #00cadb; --comment-button-selected-bg:var(--csstools-light-dark-toggle--50, #0062fa); --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #bfbfc9; --comment-button-border-color:var(--csstools-light-dark-toggle--51, #8f8f9d); --comment-button-active-border-color:var(--comment-button-active-bg); --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #3a3944; --comment-button-focus-border-color:var(--csstools-light-dark-toggle--52, #cfcfd8); --comment-button-hover-border-color:var(--comment-button-hover-bg); --comment-button-selected-border-color:var(--comment-button-selected-bg); --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #15141a; --comment-button-selected-fg:var(--csstools-light-dark-toggle--53, white); --comment-button-dim:24px; --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --comment-button-box-shadow:0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--54, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--55, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) #00cadb; --comment-button-focus-outline-color:var(--csstools-light-dark-toggle--56, #0062fa); } @supports (color: light-dark(red, red)){ :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --comment-button-bg:light-dark(white, #1c1b22); --comment-button-fg:light-dark(#5b5b66, #fbfbfe); --comment-button-active-bg:light-dark(#0041a4, #a6ecf4); --comment-button-active-fg:light-dark(white, #15141a); --comment-button-hover-bg:light-dark(#0053cb, #61dce9); --comment-button-hover-fg:light-dark(white, #15141a); --comment-button-selected-bg:light-dark(#0062fa, #00cadb); --comment-button-border-color:light-dark(#8f8f9d, #bfbfc9); --comment-button-focus-border-color:light-dark(#cfcfd8, #3a3944); --comment-button-selected-fg:light-dark(white, #15141a); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --comment-button-box-shadow:0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); } } @supports (color: light-dark(red, red)){ :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --comment-button-focus-outline-color:light-dark(#0062fa, #00cadb); } } @supports not (color: light-dark(tan, tan)){ :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton) *{ --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #1c1b22; --comment-button-bg:var(--csstools-light-dark-toggle--44, white); --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; --comment-button-fg:var(--csstools-light-dark-toggle--45, #5b5b66); --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #a6ecf4; --comment-button-active-bg:var(--csstools-light-dark-toggle--46, #0041a4); --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #15141a; --comment-button-active-fg:var(--csstools-light-dark-toggle--47, white); --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #61dce9; --comment-button-hover-bg:var(--csstools-light-dark-toggle--48, #0053cb); --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #15141a; --comment-button-hover-fg:var(--csstools-light-dark-toggle--49, white); --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #00cadb; --comment-button-selected-bg:var(--csstools-light-dark-toggle--50, #0062fa); --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #bfbfc9; --comment-button-border-color:var(--csstools-light-dark-toggle--51, #8f8f9d); --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #3a3944; --comment-button-focus-border-color:var(--csstools-light-dark-toggle--52, #cfcfd8); --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #15141a; --comment-button-selected-fg:var(--csstools-light-dark-toggle--53, white); --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --comment-button-box-shadow:0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--54, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--55, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) #00cadb; --comment-button-focus-outline-color:var(--csstools-light-dark-toggle--56, #0062fa); } } @media (prefers-color-scheme: dark){ :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --csstools-color-scheme--light:; } } @media screen and (forced-colors: active){ :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --comment-button-bg:ButtonFace; --comment-button-fg:ButtonText; --comment-button-hover-bg:SelectedItemText; --comment-button-hover-fg:SelectedItem; --comment-button-active-bg:SelectedItemText; --comment-button-active-fg:SelectedItem; --comment-button-border-color:ButtonBorder; --comment-button-active-border-color:ButtonBorder; --comment-button-hover-border-color:SelectedItem; --comment-button-box-shadow:none; --comment-button-focus-outline-color:CanvasText; --comment-button-selected-bg:ButtonBorder; --comment-button-selected-fg:ButtonFace; } } :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ position:absolute; width:var(--comment-button-dim); height:var(--comment-button-dim); background-color:var(--comment-button-bg); border-radius:6px 6px 6px 0; border:1px solid var(--comment-button-border-color); box-shadow:var(--comment-button-box-shadow); cursor:auto; z-index:1; padding:4px; margin:0; box-sizing:border-box; pointer-events:auto; } [dir="rtl"] :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton){ border-radius:6px 6px 0; } :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before{ content:""; display:inline-block; width:100%; height:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:cover; mask-size:cover; -webkit-mask-image:var(--comment-edit-button-icon); mask-image:var(--comment-edit-button-icon); background-color:var(--comment-button-fg); margin:0; padding:0; transform:scaleX(var(--dir-factor)); } :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):focus-visible{ outline:2px solid var(--comment-button-focus-outline-color); outline-offset:1px; border-color:var(--comment-button-focus-border-color); } :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover{ background-color:var(--comment-button-hover-bg) !important; border-color:var(--comment-button-hover-border-color); } :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover::before{ background-color:var(--comment-button-hover-fg); } :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active{ background-color:var(--comment-button-active-bg) !important; border-color:var(--comment-button-active-border-color); } :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active::before{ background-color:var(--comment-button-active-fg); } .selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton){ background-color:var(--comment-button-selected-bg) !important; border-color:var(--comment-button-selected-border-color); } .selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before{ background-color:var(--comment-button-selected-fg); } #editorCommentsSidebar, .commentPopup{ --comment-close-button-icon:url("data:image/svg+xml,%3csvg%20width='25'%20height='24'%20viewBox='0%200%2025%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.6241%2011.7759L18.3331%207.06694C18.4423%206.94811%2018.5015%206.79167%2018.4981%206.63028C18.4948%206.46889%2018.4292%206.31502%2018.3152%206.20081C18.2011%206.0866%2018.0473%206.02088%2017.8859%206.01736C17.7245%206.01384%2017.568%206.0728%2017.4491%206.18194L12.7601%2010.8709H12.2721L7.58306%206.18294C7.52495%206.12489%207.45598%206.07886%207.38008%206.04747C7.30418%206.01609%207.22284%205.99995%207.14071%206C7.05857%206.00005%206.97725%206.01627%206.90139%206.04774C6.82553%206.07922%206.75661%206.12533%206.69856%206.18344C6.64052%206.24155%206.59449%206.31052%206.5631%206.38642C6.53171%206.46232%206.51558%206.54366%206.51563%206.62579C6.51572%206.79167%206.5817%206.95071%206.69906%207.06794L11.3861%2011.7539V12.2449L6.69906%2016.9319C6.5898%2017.0508%206.53066%2017.2072%206.53399%2017.3686C6.53732%2017.53%206.60288%2017.6839%206.71696%2017.7981C6.83104%2017.9123%206.98483%2017.978%207.14622%2017.9815C7.3076%2017.985%207.46411%2017.9261%207.58306%2017.8169L12.2701%2013.1299H12.7611L17.4481%2017.8169C17.5656%2017.934%2017.7247%2017.9997%2017.8906%2017.9997C18.0564%2017.9997%2018.2155%2017.934%2018.3331%2017.8169C18.4504%2017.6996%2018.5163%2017.5404%2018.5163%2017.3744C18.5163%2017.2085%2018.4504%2017.0493%2018.3331%2016.9319L13.6241%2012.2229V11.7759Z'%20fill='black'/%3e%3c/svg%3e"); --comment-popup-edit-button-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.0189877%2013.6645L0.612989%2010.4635C0.687989%2010.0545%200.884989%209.6805%201.18099%209.3825L9.98199%200.5805C10.756%20-0.1925%2012.015%20-0.1945%2012.792%200.5805L14.42%202.2085C15.194%202.9835%2015.194%204.2435%2014.42%205.0185L5.61599%2013.8215C5.31999%2014.1165%204.94599%2014.3125%204.53799%2014.3875L1.33599%2014.9815C1.26599%2014.9935%201.19799%2015.0005%201.12999%2015.0005C0.832989%2015.0005%200.544988%2014.8835%200.330988%2014.6695C0.0679874%2014.4055%20-0.0490122%2014.0305%200.0189877%2013.6645ZM12.472%205.1965L13.632%204.0365L13.631%203.1885L11.811%201.3675L10.963%201.3685L9.80299%202.5285L12.472%205.1965ZM4.31099%2013.1585C4.47099%2013.1285%204.61799%2013.0515%204.73399%2012.9345L11.587%206.0815L8.91899%203.4135L2.06599%2010.2655C1.94899%2010.3835%201.87199%2010.5305%201.84099%2010.6915L1.36699%2013.2485L1.75199%2013.6335L4.31099%2013.1585Z'%20fill='black'/%3e%3c/svg%3e%3c!--path%20d='M0.0189877%2014.1645L0.612989%2010.9635C0.687989%2010.5545%200.884989%2010.1805%201.18099%209.8825L9.98199%201.0805C10.756%200.3075%2012.015%200.3055%2012.792%201.0805L14.42%202.7085C15.194%203.4835%2015.194%204.7435%2014.42%205.5185L5.61599%2014.3215C5.31999%2014.6165%204.94599%2014.8125%204.53799%2014.8875L1.33599%2015.4815C1.26599%2015.4935%201.19799%2015.5005%201.12999%2015.5005C0.832989%2015.5005%200.544988%2015.3835%200.330988%2015.1695C0.0679874%2014.9055%20-0.0490122%2014.5305%200.0189877%2014.1645ZM12.472%205.6965L13.632%204.5365L13.631%203.6885L11.811%201.8675L10.963%201.8685L9.80299%203.0285L12.472%205.6965ZM4.31099%2013.6585C4.47099%2013.6285%204.61799%2013.5515%204.73399%2013.4345L11.587%206.5815L8.91899%203.9135L2.06599%2010.7655C1.94899%2010.8835%201.87199%2011.0305%201.84099%2011.1915L1.36699%2013.7485L1.75199%2014.1335L4.31099%2013.6585Z'%20fill='black'/--%3e"); --comment-popup-delete-button-icon:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%203H13.6C14%203%2014.3%203.3%2014.3%203.6C14.3%203.9%2014%204.2%2013.7%204.2H13.3V14C13.3%2015.1%2012.4%2016%2011.3%2016H4.80005C3.70005%2016%202.80005%2015.1%202.80005%2014V4.2H2.40005C2.00005%204.2%201.80005%204%201.80005%203.6C1.80005%203.2%202.00005%203%202.40005%203H5.00005V2C5.00005%200.9%205.90005%200%207.00005%200H9.00005C10.1%200%2011%200.9%2011%202V3ZM6.90005%201.2L6.30005%201.8V3H9.80005V1.8L9.20005%201.2H6.90005ZM11.4%2014.7L12%2014.1V4.2H4.00005V14.1L4.60005%2014.7H11.4ZM7.00005%2012.4C7.00005%2012.7%206.70005%2013%206.40005%2013C6.10005%2013%205.80005%2012.7%205.80005%2012.4V7.6C5.70005%207.3%206.00005%207%206.40005%207C6.80005%207%207.00005%207.3%207.00005%207.6V12.4ZM10.2001%2012.4C10.2001%2012.7%209.90006%2013%209.60006%2013C9.30006%2013%209.00006%2012.7%209.00006%2012.4V7.6C9.00006%207.3%209.30006%207%209.60006%207C9.90006%207%2010.2001%207.3%2010.2001%207.6V12.4Z'%20fill='black'%20/%3e%3c/svg%3e"); --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); --comment-date-fg-color:var(--csstools-light-dark-toggle--57, rgb(21 20 26 / 0.69)); --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #1c1b22; --comment-bg-color:var(--csstools-light-dark-toggle--58, #f9f9fb); --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #2c2b33; --comment-hover-bg-color:var(--csstools-light-dark-toggle--59, #e0e0e6); --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #3a3944; --comment-active-bg-color:var(--csstools-light-dark-toggle--60, #d1d1d9); --comment-hover-brightness:0.89; --comment-hover-filter:brightness(var(--comment-hover-brightness)); --comment-active-brightness:0.825; --comment-active-filter:brightness(var(--comment-active-brightness)); --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #52525e; --comment-border-color:var(--csstools-light-dark-toggle--61, #f0f0f4); --csstools-light-dark-toggle--62:var(--csstools-color-scheme--light) #00cadb; --comment-focus-outline-color:var(--csstools-light-dark-toggle--62, #0062fa); --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #fbfbfe; --comment-fg-color:var(--csstools-light-dark-toggle--63, #15141a); --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) #00317e; --comment-count-bg-color:var(--csstools-light-dark-toggle--64, #e2f7ff); --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) #a6ecf4; --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--65, #0041a4); --comment-indicator-active-filter:brightness( calc(1 / var(--comment-active-brightness)) ); --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #fbfbfe; --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--66, #5b5b66); --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #61dce9; --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--67, #0053cb); --comment-indicator-hover-filter:brightness( calc(1 / var(--comment-hover-brightness)) ); --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #00cadb; --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--68, #0062fa); --button-comment-bg:transparent; --button-comment-color:var(--main-color); --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #5b5b66; --button-comment-active-bg:var(--csstools-light-dark-toggle--69, #cfcfd8); --button-comment-active-border:none; --button-comment-active-color:var(--button-comment-color); --button-comment-border:none; --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #52525e; --button-comment-hover-bg:var(--csstools-light-dark-toggle--70, #e0e0e6); --button-comment-hover-color:var(--button-comment-color); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ #editorCommentsSidebar, .commentPopup{ --comment-date-fg-color:light-dark( rgb(21 20 26 / 0.69), rgb(251 251 254 / 0.69) ); } } @supports (color: light-dark(red, red)){ #editorCommentsSidebar, .commentPopup{ --comment-bg-color:light-dark(#f9f9fb, #1c1b22); --comment-hover-bg-color:light-dark(#e0e0e6, #2c2b33); --comment-active-bg-color:light-dark(#d1d1d9, #3a3944); --comment-border-color:light-dark(#f0f0f4, #52525e); --comment-focus-outline-color:light-dark(#0062fa, #00cadb); --comment-fg-color:light-dark(#15141a, #fbfbfe); --comment-count-bg-color:light-dark(#e2f7ff, #00317e); --comment-indicator-active-fg-color:light-dark(#0041a4, #a6ecf4); --comment-indicator-focus-fg-color:light-dark(#5b5b66, #fbfbfe); --comment-indicator-hover-fg-color:light-dark(#0053cb, #61dce9); --comment-indicator-selected-fg-color:light-dark(#0062fa, #00cadb); --button-comment-active-bg:light-dark(#cfcfd8, #5b5b66); --button-comment-hover-bg:light-dark(#e0e0e6, #52525e); } } @supports not (color: light-dark(tan, tan)){ :is(#editorCommentsSidebar,.commentPopup) *{ --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); --comment-date-fg-color:var(--csstools-light-dark-toggle--57, rgb(21 20 26 / 0.69)); --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #1c1b22; --comment-bg-color:var(--csstools-light-dark-toggle--58, #f9f9fb); --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #2c2b33; --comment-hover-bg-color:var(--csstools-light-dark-toggle--59, #e0e0e6); --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #3a3944; --comment-active-bg-color:var(--csstools-light-dark-toggle--60, #d1d1d9); --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #52525e; --comment-border-color:var(--csstools-light-dark-toggle--61, #f0f0f4); --csstools-light-dark-toggle--62:var(--csstools-color-scheme--light) #00cadb; --comment-focus-outline-color:var(--csstools-light-dark-toggle--62, #0062fa); --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #fbfbfe; --comment-fg-color:var(--csstools-light-dark-toggle--63, #15141a); --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) #00317e; --comment-count-bg-color:var(--csstools-light-dark-toggle--64, #e2f7ff); --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) #a6ecf4; --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--65, #0041a4); --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #fbfbfe; --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--66, #5b5b66); --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #61dce9; --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--67, #0053cb); --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #00cadb; --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--68, #0062fa); --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #5b5b66; --button-comment-active-bg:var(--csstools-light-dark-toggle--69, #cfcfd8); --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #52525e; --button-comment-hover-bg:var(--csstools-light-dark-toggle--70, #e0e0e6); } } @media screen and (forced-colors: active){ #editorCommentsSidebar, .commentPopup{ --comment-date-fg-color:CanvasText; --comment-bg-color:Canvas; --comment-hover-bg-color:Canvas; --comment-hover-filter:none; --comment-active-bg-color:Canvas; --comment-active-filter:none; --comment-border-color:CanvasText; --comment-fg-color:CanvasText; --comment-count-bg-color:Canvas; --comment-indicator-active-fg-color:SelectedItem; --comment-indicator-focus-fg-color:CanvasText; --comment-indicator-hover-fg-color:CanvasText; --comment-indicator-selected-fg-color:SelectedItem; --button-comment-bg:ButtonFace; --button-comment-color:ButtonText; --button-comment-active-bg:ButtonText; --button-comment-active-color:HighlightText; --button-comment-border:1px solid ButtonText; --button-comment-hover-bg:Highlight; --button-comment-hover-color:HighlightText; } } #editorCommentsSidebar{ display:flex; height:auto; padding-bottom:16px; flex-direction:column; align-items:flex-start; } #editorCommentsSidebar #editorCommentsSidebarHeader{ width:100%; box-sizing:border-box; padding:16px; display:flex; align-items:center; justify-content:space-between; } :is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount{ display:flex; align-items:baseline; gap:6px; -webkit-user-select:none; -moz-user-select:none; user-select:none; } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarTitle{ font:menu; font-style:normal; font-weight:590; line-height:normal; font-size:17px; color:var(--comment-fg-color); } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarCount{ padding:0 4px; border-radius:4px; background-color:var(--comment-count-bg-color); color:var(--comment-fg-color); text-align:center; font:menu; font-size:13px; font-style:normal; font-weight:400; line-height:normal; } :is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton{ width:32px; height:32px; padding:8px; border-radius:4px; border:none; background:none; cursor:pointer; } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton)::before{ content:""; display:inline-block; width:100%; height:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-image:var(--comment-close-button-icon); mask-image:var(--comment-close-button-icon); background-color:var(--comment-fg-color); } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover{ background-color:var(--comment-hover-bg-color); } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active{ background-color:var(--comment-active-bg-color); } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):focus-visible{ outline:var(--focus-ring-outline); } :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton) > span{ display:inline-block; width:0; height:0; overflow:hidden; } #editorCommentsSidebar #editorCommentsSidebarListContainer{ overflow:auto; width:100%; } :is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList{ display:flex; width:auto; padding:4px 16px; gap:10px; align-items:flex-start; flex-direction:column; list-style-type:none; } :is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment{ display:flex; width:auto; padding:8px 16px 16px; flex-direction:column; align-items:flex-start; align-self:stretch; gap:4px; border-radius:8px; border:0.5px solid var(--comment-border-color); background-color:var(--comment-bg-color); } @media screen and (forced-colors: active){ :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{ background-color:var(--comment-hover-bg-color); } } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{ filter:var(--comment-hover-filter); } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time::after{ display:inline-block; background-color:var(--comment-indicator-hover-fg-color); filter:var(--comment-indicator-hover-filter); } @media screen and (forced-colors: active){ :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{ background-color:var(--comment-active-bg-color); } } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{ filter:var(--comment-active-filter); } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time::after{ display:inline-block; background-color:var(--comment-indicator-active-fg-color); filter:var(--comment-indicator-active-filter); } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus,:focus-visible) time::after{ display:inline-block; background-color:var(--comment-indicator-focus-fg-color); } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible{ outline:2px solid var(--comment-focus-outline-color); outline-offset:2px; } .selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText{ max-height:-moz-fit-content; max-height:fit-content; -webkit-line-clamp:unset; } .selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) time::after{ display:inline-block; background-color:var(--comment-indicator-selected-fg-color); } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{ font:menu; font-style:normal; font-weight:400; line-height:normal; font-size:15px; width:100%; height:-moz-fit-content; height:fit-content; max-height:80px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:break-word; } :is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText) .richText{ --total-scale-factor:1.5; } .noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{ max-height:-moz-fit-content; max-height:fit-content; -webkit-line-clamp:unset; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a{ font:menu; font-style:normal; font-weight:400; line-height:normal; font-size:15px; width:100%; height:auto; overflow-wrap:break-word; margin-block-start:15px; } :is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):focus-visible{ outline:var(--focus-ring-outline); } :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time{ width:100%; display:inline-flex; align-items:center; justify-content:space-between; font:menu; font-style:normal; font-weight:400; line-height:normal; font-size:13px; } :is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time)::after{ content:""; display:none; width:16px; height:16px; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-image:var(--comment-edit-button-icon); mask-image:var(--comment-edit-button-icon); transform:scaleX(var(--dir-factor)); } .commentPopup{ --csstools-color-scheme--light:initial; color-scheme:light dark; --csstools-light-dark-toggle--71:var(--csstools-color-scheme--light) #3a3944; --divider-color:var(--csstools-light-dark-toggle--71, #cfcfd8); --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--72, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--73, rgb(0 0 0 / 0.1)); } @supports (color: light-dark(red, red)){ .commentPopup{ --divider-color:light-dark(#cfcfd8, #3a3944); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .commentPopup{ --comment-shadow:0 0.5px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 4px 16px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); } } @supports not (color: light-dark(tan, tan)){ .commentPopup *{ --csstools-light-dark-toggle--71:var(--csstools-color-scheme--light) #3a3944; --divider-color:var(--csstools-light-dark-toggle--71, #cfcfd8); --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--72, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--73, rgb(0 0 0 / 0.1)); } } @media (prefers-color-scheme: dark){ .commentPopup{ --csstools-color-scheme--light:; } } @media screen and (forced-colors: active){ .commentPopup{ --divider-color:CanvasText; --comment-shadow:none; } } .commentPopup{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; z-index:100001; pointer-events:auto; margin-top:2px; border:0.5px solid var(--comment-border-color); background:var(--comment-bg-color); box-shadow:var(--comment-shadow); } .commentPopup:focus-visible{ outline:none; } .commentPopup.dragging{ cursor:move !important; } .commentPopup.dragging *{ cursor:move !important; } .commentPopup.dragging button{ pointer-events:none !important; } .commentPopup:not(.selected) .commentPopupButtons{ visibility:hidden !important; } .commentPopup hr{ width:100%; height:1px; border:none; border-top:1px solid var(--divider-color); margin:0; padding:0; } .commentPopup .commentPopupTop{ display:flex; width:100%; height:auto; padding-bottom:4px; justify-content:space-between; align-items:center; align-self:stretch; cursor:move; -webkit-user-select:none; -moz-user-select:none; user-select:none; } :is(.commentPopup .commentPopupTop) .commentPopupTime{ font:menu; font-style:normal; font-weight:400; line-height:normal; font-size:13px; color:var(--comment-date-fg-color); } :is(.commentPopup .commentPopupTop) .commentPopupButtons{ display:flex; align-items:center; gap:2px; cursor:default; } :is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button{ width:32px; height:32px; padding:8px; border:var(--button-comment-border); border-radius:4px; background-color:var(--button-comment-bg); color:var(--button-comment-color); } :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover{ background-color:var(--button-comment-hover-bg); } :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover::before{ background-color:var(--button-comment-hover-color); } :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active{ border:var(--button-comment-active-border); background-color:var(--button-comment-active-bg); color:var(--button-comment-active-color); } :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active::before{ background-color:var(--button-comment-active-color); } :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):focus-visible{ background-color:var(--button-comment-hover-bg); outline:2px solid var(--comment-focus-outline-color); outline-offset:0; } :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ content:""; display:inline-block; width:100%; height:100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; } .commentPopupEdit:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ -webkit-mask-image:var(--comment-popup-edit-button-icon); mask-image:var(--comment-popup-edit-button-icon); } .commentPopupDelete:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ -webkit-mask-image:var(--comment-popup-delete-button-icon); mask-image:var(--comment-popup-delete-button-icon); } .commentPopup .commentPopupText{ width:100%; height:auto; font:menu; font-style:normal; font-weight:400; line-height:normal; font-size:15px; color:var(--comment-fg-color); } .commentPopupText, .sidebarCommentText .richText{ margin-block:0; } :is(.commentPopupText,.sidebarCommentText .richText) p:first-of-type{ margin-block:0; } :is(.commentPopupText,.sidebarCommentText .richText) > *{ white-space:pre-wrap; font-size:max(15px, calc(10px * var(--total-scale-factor))); overflow-wrap:break-word; } :is(.commentPopupText,.sidebarCommentText .richText) span{ color:var(--comment-fg-color) !important; } :root{ --editor-toolbar-vert-offset:6px; --outline-width:2px; --outline-color:#0060df; --outline-around-width:1px; --outline-around-color:#f0f0f4; --hover-outline-around-color:var(--outline-around-color); --focus-outline:solid var(--outline-width) var(--outline-color); --unfocus-outline:solid var(--outline-width) transparent; --focus-outline-around:solid var(--outline-around-width) var(--outline-around-color); --hover-outline-color:#8f8f9d; --hover-outline:solid var(--outline-width) var(--hover-outline-color); --hover-outline-around:solid var(--outline-around-width) var(--hover-outline-around-color); --freetext-line-height:1.35; --freetext-padding:2px; --resizer-bg-color:var(--outline-color); --resizer-size:6px; --resizer-shift:calc( 0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width) ); --editorFreeText-editing-cursor:text; --editorInk-editing-cursor:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.0189877%2013.6645L0.612989%2010.4635C0.687989%2010.0545%200.884989%209.6805%201.18099%209.3825L9.98199%200.5805C10.756%20-0.1925%2012.015%20-0.1945%2012.792%200.5805L14.42%202.2085C15.194%202.9835%2015.194%204.2435%2014.42%205.0185L5.61599%2013.8215C5.31999%2014.1165%204.94599%2014.3125%204.53799%2014.3875L1.33599%2014.9815C1.26599%2014.9935%201.19799%2015.0005%201.12999%2015.0005C0.832989%2015.0005%200.544988%2014.8835%200.330988%2014.6695C0.0679874%2014.4055%20-0.0490122%2014.0305%200.0189877%2013.6645Z'%20fill='white'/%3e%3cpath%20d='M0.0189877%2013.6645L0.612989%2010.4635C0.687989%2010.0545%200.884989%209.6805%201.18099%209.3825L9.98199%200.5805C10.756%20-0.1925%2012.015%20-0.1945%2012.792%200.5805L14.42%202.2085C15.194%202.9835%2015.194%204.2435%2014.42%205.0185L5.61599%2013.8215C5.31999%2014.1165%204.94599%2014.3125%204.53799%2014.3875L1.33599%2014.9815C1.26599%2014.9935%201.19799%2015.0005%201.12999%2015.0005C0.832989%2015.0005%200.544988%2014.8835%200.330988%2014.6695C0.0679874%2014.4055%20-0.0490122%2014.0305%200.0189877%2013.6645ZM12.472%205.1965L13.632%204.0365L13.631%203.1885L11.811%201.3675L10.963%201.3685L9.80299%202.5285L12.472%205.1965ZM4.31099%2013.1585C4.47099%2013.1285%204.61799%2013.0515%204.73399%2012.9345L11.587%206.0815L8.91899%203.4135L2.06599%2010.2655C1.94899%2010.3835%201.87199%2010.5305%201.84099%2010.6915L1.36699%2013.2485L1.75199%2013.6335L4.31099%2013.1585Z'%20fill='black'/%3e%3c/svg%3e") 0 16, pointer; --editorHighlight-editing-cursor:url(/assets/cursor-editorTextHighlight-kG3uUOwL.svg) 24 24, text; --editorFreeHighlight-editing-cursor:url("data:image/svg+xml,%3csvg%20width='18'%20height='19'%20viewBox='0%200%2018%2019'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.2%203.09C12.28%203.01%2012.43%203%2012.43%203C12.48%203%2012.58%203.02%2012.66%203.1L14.45%204.89C14.58%205.02%2014.58%205.22%2014.45%205.35L11.7713%208.02872L9.51628%205.77372L12.2%203.09ZM13.2658%205.12L11.7713%206.6145L10.9305%205.77372L12.425%204.27921L13.2658%205.12Z'%20fill='%23FBFBFE'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M5.98%209.32L8.23%2011.57L10.7106%209.08938L8.45562%206.83438L5.98%209.31V9.32ZM8.23%2010.1558L9.29641%209.08938L8.45562%208.24859L7.38921%209.315L8.23%2010.1558Z'%20fill='%23FBFBFE'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M10.1526%2013.1816L16.2125%207.1217C16.7576%206.58919%2017.05%205.8707%2017.05%205.12C17.05%204.36931%2016.7576%203.65084%2016.2126%203.11834L14.4317%201.33747C13.8992%200.79242%2013.1807%200.5%2012.43%200.5C11.6643%200.5%2010.9529%200.812929%2010.4329%201.33289L3.68289%208.08289C3.04127%208.72452%203.00459%209.75075%203.57288%2010.4363L1.29187%2012.7239C1.09186%2012.9245%200.990263%2013.1957%201.0007%2013.4685L1%2014.5C0.447715%2014.5%200%2014.9477%200%2015.5V17.5C0%2018.0523%200.447715%2018.5%201%2018.5H16C16.5523%2018.5%2017%2018.0523%2017%2017.5V15.5C17%2014.9477%2016.5523%2014.5%2016%2014.5H10.2325C9.83594%2014.5%209.39953%2013.9347%2010.1526%2013.1816ZM4.39%209.85L4.9807%2010.4407L2.39762%2013.0312H6.63877L7.10501%2012.565L7.57125%2013.0312H8.88875L15.51%206.41C15.86%206.07%2016.05%205.61%2016.05%205.12C16.05%204.63%2015.86%204.17%2015.51%203.83L13.72%202.04C13.38%201.69%2012.92%201.5%2012.43%201.5C11.94%201.5%2011.48%201.7%2011.14%202.04L4.39%208.79C4.1%209.08%204.1%209.56%204.39%209.85ZM16%2017.5V15.5H1V17.5H16Z'%20fill='%23FBFBFE'/%3e%3cpath%20d='M15.1616%206.05136L15.1616%206.05132L15.1564%206.05645L8.40645%2012.8064C8.35915%2012.8537%208.29589%2012.88%208.23%2012.88C8.16411%2012.88%208.10085%2012.8537%208.05355%2012.8064L7.45857%2012.2115L7.10501%2011.8579L6.75146%2012.2115L6.03289%2012.93H3.20465L5.33477%2010.7937L5.6873%2010.4402L5.33426%2010.0871L4.74355%209.49645C4.64882%209.40171%204.64882%209.23829%204.74355%209.14355L11.4936%202.39355C11.7436%202.14354%2012.0779%202%2012.43%202C12.7883%202%2013.1179%202.13776%2013.3614%202.38839L13.3613%202.38843L13.3664%202.39355L15.1564%204.18355L15.1564%204.18359L15.1616%204.18864C15.4122%204.43211%2015.55%204.76166%2015.55%205.12C15.55%205.47834%2015.4122%205.80789%2015.1616%206.05136ZM7.87645%2011.9236L8.23%2012.2771L8.58355%2011.9236L11.0642%209.44293L11.4177%209.08938L11.0642%208.73582L8.80918%206.48082L8.45562%206.12727L8.10207%206.48082L5.62645%208.95645L5.48%209.10289V9.31V9.32V9.52711L5.62645%209.67355L7.87645%2011.9236ZM11.4177%208.38227L11.7713%208.73582L12.1248%208.38227L14.8036%205.70355C15.1288%205.37829%2015.1288%204.86171%2014.8036%204.53645L13.0136%202.74645C12.8186%202.55146%2012.5792%202.5%2012.43%202.5H12.4134L12.3967%202.50111L12.43%203C12.3967%202.50111%2012.3966%202.50112%2012.3965%202.50112L12.3963%202.50114L12.3957%202.50117L12.3947%202.50125L12.3924%202.50142L12.387%202.50184L12.3732%202.50311C12.3628%202.50416%2012.3498%202.50567%2012.3346%202.50784C12.3049%202.51208%2012.2642%202.51925%2012.2178%202.53146C12.1396%202.55202%2011.9797%202.60317%2011.8464%202.73645L9.16273%205.42016L8.80918%205.77372L9.16273%206.12727L11.4177%208.38227ZM1.5%2016H15.5V17H1.5V16Z'%20stroke='%2315141A'/%3e%3c/svg%3e") 1 18, pointer; --new-alt-text-warning-image:url("data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8.78182%202.63903C8.58882%202.28803%208.25782%202.25003%208.12482%202.25003C7.99019%202.24847%207.85771%202.28393%207.74185%202.35253C7.62599%202.42113%207.5312%202.52023%207.46782%202.63903L1.97082%2012.639C1.90673%2012.7528%201.87406%2012.8816%201.87617%2013.0122C1.87828%2013.1427%201.91509%2013.2704%201.98282%2013.382C2.04798%2013.4951%202.14207%2013.5888%202.25543%2013.6535C2.36879%2013.7182%202.49732%2013.7515%202.62782%2013.75H13.6218C13.7523%2013.7515%2013.8809%2013.7182%2013.9942%2013.6535C14.1076%2013.5888%2014.2017%2013.4951%2014.2668%2013.382C14.3346%2013.2704%2014.3714%2013.1427%2014.3735%2013.0122C14.3756%2012.8816%2014.3429%2012.7528%2014.2788%2012.639L8.78182%202.63903ZM6.37282%202.03703C6.75182%201.34603%207.43882%201.00003%208.12482%201.00003C8.48341%200.997985%208.83583%201.09326%209.14454%201.2757C9.45325%201.45814%209.70668%201.72092%209.87782%202.03603L15.3748%2012.036C16.1078%2013.369%2015.1438%2015%2013.6228%2015H2.62782C1.10682%2015%200.141823%2013.37%200.875823%2012.037L6.37282%202.03703ZM8.74982%209.06203C8.74982%209.22779%208.68397%209.38676%208.56676%209.50397C8.44955%209.62118%208.29058%209.68703%208.12482%209.68703C7.95906%209.68703%207.80009%209.62118%207.68288%209.50397C7.56566%209.38676%207.49982%209.22779%207.49982%209.06203V5.62503C7.49982%205.45927%207.56566%205.3003%207.68288%205.18309C7.80009%205.06588%207.95906%205.00003%208.12482%205.00003C8.29058%205.00003%208.44955%205.06588%208.56676%205.18309C8.68397%205.3003%208.74982%205.45927%208.74982%205.62503V9.06203ZM7.74982%2012L7.49982%2011.75V11L7.74982%2010.75H8.49982L8.74982%2011V11.75L8.49982%2012H7.74982Z'%20fill='black'/%3e%3c/svg%3e"); } .textLayer.highlighting{ cursor:var(--editorFreeHighlight-editing-cursor); } .textLayer.highlighting:not(.free) span{ cursor:var(--editorHighlight-editing-cursor); } [role="img"]:is(.textLayer.highlighting:not(.free) span){ cursor:var(--editorFreeHighlight-editing-cursor); } .textLayer.highlighting.free span{ cursor:var(--editorFreeHighlight-editing-cursor); } .page:has(.annotationEditorLayer.nonEditing) .annotationLayer .editorAnnotation{ position:absolute; pointer-events:none; } :is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{ display:none !important; } @media (min-resolution: 1.1dppx){ :root{ --editorFreeText-editing-cursor:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202.75H12.5V2.25V1V0.5H12H10.358C9.91165%200.5%209.47731%200.625661%209.09989%200.860442L9.09886%200.861087L8%201.54837L6.89997%200.860979L6.89911%200.860443C6.5218%200.625734%206.08748%200.5%205.642%200.5H4H3.5V1V2.25V2.75H4H5.642C5.66478%202.75%205.6885%202.75641%205.71008%202.76968C5.71023%202.76977%205.71038%202.76986%205.71053%202.76995L6.817%203.461C6.81704%203.46103%206.81709%203.46105%206.81713%203.46108C6.81713%203.46108%206.81713%203.46108%206.81714%203.46109C6.8552%203.48494%206.876%203.52285%206.876%203.567V8V12.433C6.876%2012.4771%206.85523%2012.515%206.81722%2012.5389C6.81715%2012.5389%206.81707%2012.539%206.817%2012.539L5.70953%2013.23C5.70941%2013.2301%205.70929%2013.2302%205.70917%2013.2303C5.68723%2013.2438%205.6644%2013.25%205.641%2013.25H4H3.5V13.75V15V15.5H4H5.642C6.08835%2015.5%206.52269%2015.3743%206.90011%2015.1396L6.90086%2015.1391L8%2014.4526L9.10003%2015.14L9.10089%2015.1406C9.47831%2015.3753%209.91265%2015.501%2010.359%2015.501H12H12.5V15.001V13.751V13.251H12H10.358C10.3352%2013.251%2010.3115%2013.2446%2010.2899%2013.2313C10.2897%2013.2312%2010.2896%2013.2311%2010.2895%2013.231L9.183%2012.54C9.18298%2012.54%209.18295%2012.54%209.18293%2012.54C9.18291%2012.5399%209.18288%2012.5399%209.18286%2012.5399C9.14615%2012.5169%209.125%2012.4797%209.125%2012.434V8V3.567C9.125%203.52266%209.14603%203.48441%209.18364%203.4606C9.18377%203.46052%209.1839%203.46043%209.18404%203.46035L10.2895%202.76995C10.2896%202.76985%2010.2898%202.76975%2010.2899%202.76966C10.3119%202.75619%2010.3346%202.75%2010.358%202.75H12Z'%20fill='black'%20stroke='white'/%3e%3c/svg%3e") 0 16, text; } } @media screen and (forced-colors: active){ :root{ --outline-color:CanvasText; --outline-around-color:ButtonFace; --resizer-bg-color:ButtonText; --hover-outline-color:Highlight; --hover-outline-around-color:SelectedItemText; } } [data-editor-rotation="90"]{ transform:rotate(90deg); } [data-editor-rotation="180"]{ transform:rotate(180deg); } [data-editor-rotation="270"]{ transform:rotate(270deg); } .annotationEditorLayer{ background:transparent; position:absolute; inset:0; font-size:calc(100px * var(--total-scale-factor)); transform-origin:0 0; cursor:auto; } .annotationEditorLayer .selectedEditor{ z-index:100000 !important; } .annotationEditorLayer.drawing *{ pointer-events:none !important; } .annotationEditorLayer.getElements{ pointer-events:auto !important; } .annotationEditorLayer.getElements > div{ pointer-events:auto !important; } .annotationEditorLayer.waiting{ content:""; cursor:wait; position:absolute; inset:0; width:100%; height:100%; } .annotationEditorLayer.disabled{ pointer-events:none; } .annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor,.commentPopup){ pointer-events:auto; } .annotationEditorLayer.freetextEditing{ cursor:var(--editorFreeText-editing-cursor); } .annotationEditorLayer.inkEditing{ cursor:var(--editorInk-editing-cursor); } .annotationEditorLayer .draw{ box-sizing:border-box; } .annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor){ position:absolute; background:transparent; z-index:1; transform-origin:0 0; cursor:auto; max-width:100%; max-height:100%; border:var(--unfocus-outline); } .draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ cursor:move; } .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ border:var(--focus-outline); outline:var(--focus-outline-around); } .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor))::before{ content:""; position:absolute; inset:0; border:var(--focus-outline-around); pointer-events:none; } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor){ border:var(--hover-outline); outline:var(--hover-outline-around); } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor)::before{ content:""; position:absolute; inset:0; border:var(--focus-outline-around); } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ --editor-toolbar-delete-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M11%203H13.6C14%203%2014.3%203.3%2014.3%203.6C14.3%203.9%2014%204.2%2013.7%204.2H13.3V14C13.3%2015.1%2012.4%2016%2011.3%2016H4.80005C3.70005%2016%202.80005%2015.1%202.80005%2014V4.2H2.40005C2.00005%204.2%201.80005%204%201.80005%203.6C1.80005%203.2%202.00005%203%202.40005%203H5.00005V2C5.00005%200.9%205.90005%200%207.00005%200H9.00005C10.1%200%2011%200.9%2011%202V3ZM6.90005%201.2L6.30005%201.8V3H9.80005V1.8L9.20005%201.2H6.90005ZM11.4%2014.7L12%2014.1V4.2H4.00005V14.1L4.60005%2014.7H11.4ZM7.00005%2012.4C7.00005%2012.7%206.70005%2013%206.40005%2013C6.10005%2013%205.80005%2012.7%205.80005%2012.4V7.6C5.70005%207.3%206.00005%207%206.40005%207C6.80005%207%207.00005%207.3%207.00005%207.6V12.4ZM10.2001%2012.4C10.2001%2012.7%209.90006%2013%209.60006%2013C9.30006%2013%209.00006%2012.7%209.00006%2012.4V7.6C9.00006%207.3%209.30006%207%209.60006%207C9.90006%207%2010.2001%207.3%2010.2001%207.6V12.4Z'%20fill='black'%20/%3e%3c/svg%3e"); --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #2b2a33; --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--74, #f0f0f4); --editor-toolbar-highlight-image:url("data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M7.10918%2011.66C7.24918%2011.8%207.43918%2011.88%207.63918%2011.88C7.83918%2011.88%208.02918%2011.8%208.16918%2011.66L14.9192%204.91C15.2692%204.57%2015.4592%204.11%2015.4592%203.62C15.4592%203.13%2015.2692%202.67%2014.9192%202.33L13.1292%200.54C12.7892%200.19%2012.3292%200%2011.8392%200C11.3492%200%2010.8892%200.2%2010.5492%200.54L3.79918%207.29C3.50918%207.58%203.50918%208.06%203.79918%208.35L4.38988%208.9407L1.40918%2011.93H5.64918L6.51419%2011.065L7.10918%2011.66ZM7.63918%2010.07L5.38918%207.82V7.81L7.8648%205.33438L10.1198%207.58938L7.63918%2010.07ZM11.1805%206.52872L13.8592%203.85C13.9892%203.72%2013.9892%203.52%2013.8592%203.39L12.0692%201.6C11.9892%201.52%2011.8892%201.5%2011.8392%201.5C11.8392%201.5%2011.6892%201.51%2011.6092%201.59L8.92546%204.27372L11.1805%206.52872Z'%20fill='%23000'/%3e%3cpath%20d='M0.40918%2014H15.4092V16H0.40918V14Z'%20fill='%23000'/%3e%3c/g%3e%3c/svg%3e"); --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #fbfbfe; --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--75, #2e2e56); --editor-toolbar-border-color:#8f8f9d; --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #52525e; --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--76, #e0e0e6); --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); --editor-toolbar-hover-outline:none; --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #0df; --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--77, #0060df); --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2); --editor-toolbar-height:28px; --editor-toolbar-padding:2px; --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) #54ffbd; --alt-text-done-color:var(--csstools-light-dark-toggle--78, #2ac3a2); --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) #80ebff; --alt-text-warning-color:var(--csstools-light-dark-toggle--79, #0090ed); --alt-text-hover-done-color:var(--alt-text-done-color); --alt-text-hover-warning-color:var(--alt-text-warning-color); } @supports (color: light-dark(red, red)){ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ --editor-toolbar-bg-color:light-dark(#f0f0f4, #2b2a33); --editor-toolbar-fg-color:light-dark(#2e2e56, #fbfbfe); --editor-toolbar-hover-bg-color:light-dark(#e0e0e6, #52525e); --editor-toolbar-focus-outline-color:light-dark(#0060df, #0df); --alt-text-done-color:light-dark(#2ac3a2, #54ffbd); --alt-text-warning-color:light-dark(#0090ed, #80ebff); } } @supports not (color: light-dark(tan, tan)){ :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) *{ --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #2b2a33; --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--74, #f0f0f4); --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #fbfbfe; --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--75, #2e2e56); --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #52525e; --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--76, #e0e0e6); --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #0df; --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--77, #0060df); --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) #54ffbd; --alt-text-done-color:var(--csstools-light-dark-toggle--78, #2ac3a2); --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) #80ebff; --alt-text-warning-color:var(--csstools-light-dark-toggle--79, #0090ed); } } @media screen and (forced-colors: active){ :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ --editor-toolbar-bg-color:ButtonFace; --editor-toolbar-fg-color:ButtonText; --editor-toolbar-border-color:ButtonText; --editor-toolbar-hover-border-color:AccentColor; --editor-toolbar-hover-bg-color:ButtonFace; --editor-toolbar-hover-fg-color:AccentColor; --editor-toolbar-hover-outline:2px solid var(--editor-toolbar-hover-border-color); --editor-toolbar-focus-outline-color:ButtonBorder; --editor-toolbar-shadow:none; --alt-text-done-color:var(--editor-toolbar-fg-color); --alt-text-warning-color:var(--editor-toolbar-fg-color); --alt-text-hover-done-color:var(--editor-toolbar-hover-fg-color); --alt-text-hover-warning-color:var(--editor-toolbar-hover-fg-color); } } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ display:flex; width:-moz-fit-content; width:fit-content; height:var(--editor-toolbar-height); flex-direction:column; justify-content:center; align-items:center; cursor:default; pointer-events:auto; box-sizing:content-box; padding:var(--editor-toolbar-padding); position:absolute; inset-inline-end:0; inset-block-start:calc(100% + var(--editor-toolbar-vert-offset)); border-radius:6px; background-color:var(--editor-toolbar-bg-color); border:1px solid var(--editor-toolbar-border-color); box-shadow:var(--editor-toolbar-shadow); } .hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ display:none; } :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar):has(:focus-visible){ border-color:transparent; } [dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ transform-origin:100% 0; } [dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ transform-origin:0 0; } :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons{ display:flex; justify-content:center; align-items:center; gap:0; height:100%; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) button{ padding:0; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .divider{ width:0; height:calc( 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) ); border-left:1px solid var(--editor-toolbar-border-color); border-right:none; display:inline-block; margin-inline:2px; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic{ width:var(--editor-toolbar-height); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ content:""; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:100%; height:100%; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic):hover::before{ background-color:var(--editor-toolbar-hover-fg-color); } .highlightButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ -webkit-mask-image:var(--editor-toolbar-highlight-image); mask-image:var(--editor-toolbar-highlight-image); } .commentButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ -webkit-mask-image:var(--comment-edit-button-icon); mask-image:var(--comment-edit-button-icon); } .deleteButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ -webkit-mask-image:var(--editor-toolbar-delete-image); mask-image:var(--editor-toolbar-delete-image); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > *{ height:var(--editor-toolbar-height); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider){ border:none; background-color:transparent; cursor:pointer; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover{ border-radius:2px; background-color:var(--editor-toolbar-hover-bg-color); color:var(--editor-toolbar-hover-fg-color); outline:var(--editor-toolbar-hover-outline); outline-offset:1px; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover:active{ outline:none; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible{ border-radius:2px; outline:2px solid var(--editor-toolbar-focus-outline-color); } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText{ --alt-text-add-image:url("data:image/svg+xml,%3csvg%20width='12'%20height='13'%20viewBox='0%200%2012%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M5.375%207.625V11.875C5.375%2012.0408%205.44085%2012.1997%205.55806%2012.3169C5.67527%2012.4342%205.83424%2012.5%206%2012.5C6.16576%2012.5%206.32473%2012.4342%206.44194%2012.3169C6.55915%2012.1997%206.625%2012.0408%206.625%2011.875V7.625L7.125%207.125H11.375C11.5408%207.125%2011.6997%207.05915%2011.8169%206.94194C11.9342%206.82473%2012%206.66576%2012%206.5C12%206.33424%2011.9342%206.17527%2011.8169%206.05806C11.6997%205.94085%2011.5408%205.875%2011.375%205.875H7.125L6.625%205.375V1.125C6.625%200.95924%206.55915%200.800269%206.44194%200.683058C6.32473%200.565848%206.16576%200.5%206%200.5C5.83424%200.5%205.67527%200.565848%205.55806%200.683058C5.44085%200.800269%205.375%200.95924%205.375%201.125V5.375L4.875%205.875H0.625C0.45924%205.875%200.300269%205.94085%200.183058%206.05806C0.065848%206.17527%200%206.33424%200%206.5C0%206.66576%200.065848%206.82473%200.183058%206.94194C0.300269%207.05915%200.45924%207.125%200.625%207.125H4.762L5.375%207.625Z'%20fill='black'/%3e%3c/svg%3e"); --alt-text-done-image:url("data:image/svg+xml,%3csvg%20width='12'%20height='13'%20viewBox='0%200%2012%2013'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M6%200.5C5.21207%200.5%204.43185%200.655195%203.7039%200.956723C2.97595%201.25825%202.31451%201.70021%201.75736%202.25736C1.20021%202.81451%200.758251%203.47595%200.456723%204.2039C0.155195%204.93185%200%205.71207%200%206.5C0%207.28793%200.155195%208.06815%200.456723%208.7961C0.758251%209.52405%201.20021%2010.1855%201.75736%2010.7426C2.31451%2011.2998%202.97595%2011.7417%203.7039%2012.0433C4.43185%2012.3448%205.21207%2012.5%206%2012.5C7.5913%2012.5%209.11742%2011.8679%2010.2426%2010.7426C11.3679%209.61742%2012%208.0913%2012%206.5C12%204.9087%2011.3679%203.38258%2010.2426%202.25736C9.11742%201.13214%207.5913%200.5%206%200.5ZM5.06%208.9L2.9464%206.7856C2.85273%206.69171%202.80018%206.56446%202.80033%206.43183C2.80048%206.29921%202.85331%206.17207%202.9472%206.0784C3.04109%205.98473%203.16834%205.93218%203.30097%205.93233C3.43359%205.93248%203.56073%205.98531%203.6544%206.0792L5.3112%207.7368L8.3464%204.7008C8.44109%204.6109%208.56715%204.56153%208.69771%204.56322C8.82827%204.56492%208.95301%204.61754%209.04534%204.70986C9.13766%204.80219%209.19028%204.92693%209.19198%205.05749C9.19367%205.18805%209.1443%205.31411%209.0544%205.4088L5.5624%208.9H5.06Z'%20fill='%23FBFBFE'/%3e%3c/svg%3e"); display:flex; align-items:center; justify-content:center; width:-moz-max-content; width:max-content; padding-inline:8px; pointer-events:all; font:menu; font-weight:590; font-size:12px; color:var(--editor-toolbar-fg-color); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):disabled{ pointer-events:none; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ content:""; -webkit-mask-image:var(--alt-text-add-image); mask-image:var(--alt-text-add-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; width:12px; height:13px; background-color:var(--editor-toolbar-fg-color); margin-inline-end:4px; } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ background-color:var(--editor-toolbar-hover-fg-color); } .done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ -webkit-mask-image:var(--alt-text-done-image); mask-image:var(--alt-text-done-image); } .new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-warning-image); mask-image:var(--new-alt-text-warning-image); background-color:var(--alt-text-warning-color); -webkit-mask-size:cover; mask-size:cover; } .new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ background-color:var(--alt-text-hover-warning-color); } .new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ -webkit-mask-image:var(--alt-text-done-image); mask-image:var(--alt-text-done-image); background-color:var(--alt-text-done-color); } .new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ background-color:var(--alt-text-hover-done-color); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip{ display:none; word-wrap:anywhere; } .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #1c1b22; --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--80, #f0f0f4); --csstools-light-dark-toggle--81:var(--csstools-color-scheme--light) #fbfbfe; --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--81, #15141a); --alt-text-tooltip-border:#8f8f9d; --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #15141a; --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--82, rgb(58 57 68 / 0.2)); } @supports (color: light-dark(red, red)){ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --alt-text-tooltip-bg:light-dark(#f0f0f4, #1c1b22); --alt-text-tooltip-fg:light-dark(#15141a, #fbfbfe); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --alt-text-tooltip-shadow:0 2px 6px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); } } @supports not (color: light-dark(tan, tan)){ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) *{ --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #1c1b22; --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--80, #f0f0f4); --csstools-light-dark-toggle--81:var(--csstools-color-scheme--light) #fbfbfe; --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--81, #15141a); --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #15141a; --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--82, rgb(58 57 68 / 0.2)); } } @media screen and (forced-colors: active){ .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ --alt-text-tooltip-bg:Canvas; --alt-text-tooltip-fg:CanvasText; --alt-text-tooltip-border:CanvasText; --alt-text-tooltip-shadow:none; } } .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; position:absolute; top:calc(100% + 2px); inset-inline-start:0; padding-block:2px 3px; padding-inline:3px; max-width:300px; width:-moz-max-content; width:max-content; height:auto; font-size:12px; border:0.5px solid var(--alt-text-tooltip-border); background:var(--alt-text-tooltip-bg); box-shadow:var(--alt-text-tooltip-shadow); color:var(--alt-text-tooltip-fg); pointer-events:none; } :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment{ width:var(--editor-toolbar-height); } :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment)::before{ content:""; -webkit-mask-image:var(--comment-edit-button-icon); mask-image:var(--comment-edit-button-icon); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:100%; height:100%; } .annotationEditorLayer .freeTextEditor{ padding:calc(var(--freetext-padding) * var(--total-scale-factor)); width:auto; height:auto; touch-action:none; } .annotationEditorLayer .freeTextEditor .internal{ background:transparent; border:none; inset:0; overflow:visible; white-space:nowrap; font:10px sans-serif; line-height:var(--freetext-line-height); text-align:start; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .annotationEditorLayer .freeTextEditor .overlay{ position:absolute; display:none; background:transparent; inset:0; width:100%; height:100%; } .annotationEditorLayer freeTextEditor .overlay.enabled{ display:block; } .annotationEditorLayer .freeTextEditor .internal:empty::before{ content:attr(default-content); color:gray; } .annotationEditorLayer .freeTextEditor .internal:focus{ outline:none; -webkit-user-select:auto; -moz-user-select:auto; user-select:auto; } .annotationEditorLayer .inkEditor{ width:100%; height:100%; } .annotationEditorLayer .inkEditor.editing{ cursor:inherit; } .annotationEditorLayer .inkEditor .inkEditorCanvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; } .annotationEditorLayer .stampEditor{ width:auto; height:auto; } :is(.annotationEditorLayer .stampEditor) canvas{ position:absolute; width:100%; height:100%; margin:0; top:0; left:0; } :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #52525e; --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--83, #f0f0f4); --csstools-light-dark-toggle--84:var(--csstools-color-scheme--light) #fbfbfe; --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--84, #cfcfd8); --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) #15141a; --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--85, #5b5b66); } @supports (color: light-dark(red, red)){ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ --no-alt-text-badge-border-color:light-dark(#f0f0f4, #52525e); --no-alt-text-badge-bg-color:light-dark(#cfcfd8, #fbfbfe); --no-alt-text-badge-fg-color:light-dark(#5b5b66, #15141a); } } @supports not (color: light-dark(tan, tan)){ :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) *{ --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #52525e; --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--83, #f0f0f4); --csstools-light-dark-toggle--84:var(--csstools-color-scheme--light) #fbfbfe; --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--84, #cfcfd8); --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) #15141a; --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--85, #5b5b66); } } @media screen and (forced-colors: active){ :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ --no-alt-text-badge-border-color:ButtonText; --no-alt-text-badge-bg-color:ButtonFace; --no-alt-text-badge-fg-color:ButtonText; } } :is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ position:absolute; inset-inline-end:5px; inset-block-end:5px; display:inline-flex; width:32px; height:32px; padding:3px; justify-content:center; align-items:center; pointer-events:none; z-index:1; border-radius:2px; border:1px solid var(--no-alt-text-badge-border-color); background:var(--no-alt-text-badge-bg-color); } :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-warning-image); mask-image:var(--new-alt-text-warning-image); -webkit-mask-size:cover; mask-size:cover; background-color:var(--no-alt-text-badge-fg-color); } :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers{ position:absolute; inset:0; z-index:1; } .hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers){ display:none; } :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer{ width:var(--resizer-size); height:var(--resizer-size); background:content-box var(--resizer-bg-color); border:var(--focus-outline-around); border-radius:2px; position:absolute; } .topLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:var(--resizer-shift); left:var(--resizer-shift); } .topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:var(--resizer-shift); left:calc(50% + var(--resizer-shift)); } .topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:var(--resizer-shift); right:var(--resizer-shift); } .middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:calc(50% + var(--resizer-shift)); right:var(--resizer-shift); } .bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ bottom:var(--resizer-shift); right:var(--resizer-shift); } .bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ bottom:var(--resizer-shift); left:calc(50% + var(--resizer-shift)); } .bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ bottom:var(--resizer-shift); left:var(--resizer-shift); } .middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ top:calc(50% + var(--resizer-shift)); left:var(--resizer-shift); } .topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:nwse-resize; } .topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:ns-resize; } .topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:nesw-resize; } .middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer){ cursor:ew-resize; } .topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:nesw-resize; } .topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:ew-resize; } .topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:nwse-resize; } .middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer),.middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer){ cursor:ns-resize; } :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar{ rotate:270deg; } [dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){ inset-inline-end:calc(0px - var(--editor-toolbar-vert-offset)); inset-block-start:0; } [dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar){ inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset)); inset-block-start:0; } :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],[data-main-rotation="90"] [data-editor-rotation="90"],[data-main-rotation="180"] [data-editor-rotation="0"],[data-main-rotation="270"] [data-editor-rotation="270"])) .editToolbar{ rotate:180deg; inset-inline-end:100%; inset-block-start:calc(0px - var(--editor-toolbar-vert-offset)); } :is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar{ rotate:90deg; } [dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){ inset-inline-end:calc(100% + var(--editor-toolbar-vert-offset)); inset-block-start:100%; } [dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar){ inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset)); inset-block-start:0; } .dialog.altText::backdrop{ -webkit-mask:url(#alttext-manager-mask); mask:url(#alttext-manager-mask); } .dialog.altText.positioned{ margin:0; } .dialog.altText #altTextContainer{ width:300px; height:-moz-fit-content; height:fit-content; display:inline-flex; flex-direction:column; align-items:flex-start; gap:16px; } :is(.dialog.altText #altTextContainer) #overallDescription{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; align-self:stretch; } :is(:is(.dialog.altText #altTextContainer) #overallDescription) span{ align-self:stretch; } :is(:is(.dialog.altText #altTextContainer) #overallDescription) .title{ font-size:13px; font-style:normal; font-weight:590; } :is(.dialog.altText #altTextContainer) #addDescription{ display:flex; flex-direction:column; align-items:stretch; gap:8px; } :is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea{ flex:1; padding-inline:24px 10px; } :is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea{ width:100%; min-height:75px; } :is(.dialog.altText #altTextContainer) #buttons{ display:flex; justify-content:flex-end; align-items:flex-start; gap:8px; align-self:stretch; } .dialog.newAltText{ --new-alt-text-ai-disclaimer-icon:url("data:image/svg+xml,%3csvg%20width='17'%20height='16'%20viewBox='0%200%2017%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M3.49073%201.3015L3.30873%202.1505C3.29349%202.22246%203.25769%202.28844%203.20568%202.34045C3.15368%202.39246%203.08769%202.42826%203.01573%202.4435L2.16673%202.6255C1.76473%202.7125%201.76473%203.2865%202.16673%203.3725L3.01573%203.5555C3.08769%203.57074%203.15368%203.60654%203.20568%203.65855C3.25769%203.71056%203.29349%203.77654%203.30873%203.8485L3.49073%204.6975C3.57773%205.0995%204.15173%205.0995%204.23773%204.6975L4.42073%203.8485C4.43598%203.77654%204.47177%203.71056%204.52378%203.65855C4.57579%203.60654%204.64178%203.57074%204.71373%203.5555L5.56173%203.3725C5.96373%203.2855%205.96373%202.7115%205.56173%202.6255L4.71273%202.4435C4.64083%202.42814%204.57491%202.3923%204.52292%202.34031C4.47093%202.28832%204.43509%202.2224%204.41973%202.1505L4.23773%201.3015C4.15073%200.8995%203.57673%200.8995%203.49073%201.3015ZM10.8647%2013.9995C10.4853%2014.0056%2010.1158%2013.8782%209.82067%2013.6397C9.52553%2013.4013%209.32347%2013.0667%209.24973%2012.6945L8.89273%2011.0275C8.83676%2010.7687%208.70738%2010.5316%208.52009%2010.3445C8.3328%2010.1574%208.09554%2010.0282%207.83673%209.9725L6.16973%209.6155C5.38873%209.4465%204.86473%208.7975%204.86473%207.9995C4.86473%207.2015%205.38873%206.5525%206.16973%206.3845L7.83673%206.0275C8.09551%205.97135%208.33267%205.84193%208.51992%205.65468C8.70716%205.46744%208.83658%205.23028%208.89273%204.9715L9.25073%203.3045C9.41773%202.5235%2010.0667%201.9995%2010.8647%201.9995C11.6627%201.9995%2012.3117%202.5235%2012.4797%203.3045L12.8367%204.9715C12.9507%205.4995%2013.3647%205.9135%2013.8927%206.0265L15.5597%206.3835C16.3407%206.5525%2016.8647%207.2015%2016.8647%207.9995C16.8647%208.7975%2016.3407%209.4465%2015.5597%209.6145L13.8927%209.9715C13.6337%2010.0275%2013.3963%2010.157%2013.209%2010.3445C13.0217%2010.5319%2012.8925%2010.7694%2012.8367%2011.0285L12.4787%2012.6945C12.4054%2013.0667%2012.2036%2013.4014%2011.9086%2013.6399C11.6135%2013.8784%2011.2441%2014.0057%2010.8647%2013.9995ZM10.8647%203.2495C10.7667%203.2495%2010.5337%203.2795%2010.4727%203.5655L10.1147%205.2335C10.0081%205.72777%209.76116%206.18082%209.40361%206.53837C9.04606%206.89593%208.59301%207.14283%208.09873%207.2495L6.43173%207.6065C6.14573%207.6685%206.11473%207.9015%206.11473%207.9995C6.11473%208.0975%206.14573%208.3305%206.43173%208.3925L8.09873%208.7495C8.59301%208.85617%209.04606%209.10307%209.40361%209.46062C9.76116%209.81817%2010.0081%2010.2712%2010.1147%2010.7655L10.4727%2012.4335C10.5337%2012.7195%2010.7667%2012.7495%2010.8647%2012.7495C10.9627%2012.7495%2011.1957%2012.7195%2011.2567%2012.4335L11.6147%2010.7665C11.7212%2010.272%2011.9681%209.81878%2012.3256%209.46103C12.6832%209.10329%2013.1363%208.85624%2013.6307%208.7495L15.2977%208.3925C15.5837%208.3305%2015.6147%208.0975%2015.6147%207.9995C15.6147%207.9015%2015.5837%207.6685%2015.2977%207.6065L13.6307%207.2495C13.1365%207.14283%2012.6834%206.89593%2012.3259%206.53837C11.9683%206.18082%2011.7214%205.72777%2011.6147%205.2335L11.2567%203.5655C11.1957%203.2795%2010.9627%203.2495%2010.8647%203.2495ZM3.30873%2012.1505L3.49073%2011.3015C3.57673%2010.8995%204.15073%2010.8995%204.23773%2011.3015L4.41973%2012.1505C4.43509%2012.2224%204.47093%2012.2883%204.52292%2012.3403C4.57491%2012.3923%204.64083%2012.4281%204.71273%2012.4435L5.56173%2012.6255C5.96373%2012.7115%205.96373%2013.2855%205.56173%2013.3725L4.71273%2013.5545C4.64083%2013.5699%204.57491%2013.6057%204.52292%2013.6577C4.47093%2013.7097%204.43509%2013.7756%204.41973%2013.8475L4.23773%2014.6965C4.15173%2015.0985%203.57773%2015.0985%203.49073%2014.6965L3.30873%2013.8475C3.29337%2013.7756%203.25754%2013.7097%203.20555%2013.6577C3.15356%2013.6057%203.08764%2013.5699%203.01573%2013.5545L2.16673%2013.3725C1.76473%2013.2865%201.76473%2012.7125%202.16673%2012.6255L3.01573%2012.4435C3.08769%2012.4283%203.15368%2012.3925%203.20568%2012.3405C3.25769%2012.2884%203.29349%2012.2225%203.30873%2012.1505Z'%20fill='black'/%3e%3c/svg%3e"); --new-alt-text-spinner-icon:url("data:image/svg+xml,%3c!--%20This%20Source%20Code%20Form%20is%20subject%20to%20the%20terms%20of%20the%20Mozilla%20Public%20-%20License,%20v.%202.0.%20If%20a%20copy%20of%20the%20MPL%20was%20not%20distributed%20with%20this%20-%20file,%20You%20can%20obtain%20one%20at%20http://mozilla.org/MPL/2.0/.%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%20width='16'%20height='16'%3e%3cstyle%3e%20@media%20not%20(prefers-reduced-motion)%20{%20@keyframes%20loadingRotate%20{%20from%20{%20rotate:%200;%20}%20to%20{%20rotate:%20360deg%20}%20}%20%23circle-arrows%20{%20animation:%20loadingRotate%201.8s%20linear%20infinite;%20transform-origin:%2050%25%2050%25;%20}%20%23hourglass%20{%20display:%20none;%20}%20}%20@media%20(prefers-reduced-motion)%20{%20%23circle-arrows%20{%20display:%20none;%20}%20}%20%3c/style%3e%3cpath%20id='circle-arrows'%20d='M9%205.528c0%20.42.508.63.804.333l2.528-2.528a.47.47%200%200%200%200-.666L9.805.14A.471.471%200%200%200%209%20.472v1.866A5.756%205.756%200%200%200%202.25%208c0%20.942.232%201.83.635%202.615l1.143-1.143A4.208%204.208%200%200%201%203.75%208%204.254%204.254%200%200%201%208%203.75c.345%200%20.68.042%201%20.122v1.656zM7%2010.472v1.656c.32.08.655.122%201%20.122A4.254%204.254%200%200%200%2012.25%208c0-.52-.107-1.013-.279-1.474l1.143-1.143c.404.786.636%201.674.636%202.617A5.756%205.756%200%200%201%207%2013.662v1.866a.47.47%200%200%201-.804.333l-2.528-2.528a.47.47%200%200%201%200-.666l2.528-2.528a.47.47%200%200%201%20.804.333z'/%3e%3cg%20id='hourglass'%3e%3cpath%20d='M13,1%20C13.5522847,1%2014,1.44771525%2014,2%20C14,2.55228475%2013.5522847,3%2013,3%20L12.9854217,2.99990801%20C12.9950817,3.16495885%2013,3.33173274%2013,3.5%20C13,5.24679885%2010.9877318,6.01090495%2010.9877318,8.0017538%20C10.9877318,9.99260264%2013,10.7536922%2013,12.5%20C13,12.6686079%2012.9950617,12.8357163%2012.985363,13.0010943%20L13,13%20C13.5522847,13%2014,13.4477153%2014,14%20C14,14.5522847%2013.5522847,15%2013,15%20L3,15%20C2.44771525,15%202,14.5522847%202,14%20C2,13.4477153%202.44771525,13%203,13%20L3.01463704,13.0010943%20C3.00493827,12.8357163%203,12.6686079%203,12.5%20C3,10.7536922%204.9877318,9.99260264%205,8.0017538%20C5.0122682,6.01090495%203,5.24679885%203,3.5%20C3,3.33173274%203.00491834,3.16495885%203.01457832,2.99990801%20L3,3%20C2.44771525,3%202,2.55228475%202,2%20C2,1.44771525%202.44771525,1%203,1%20L13,1%20Z%20M10.987,3%20L5.012,3%20L5.00308914,3.24815712%20C5.00103707,3.33163368%205,3.4155948%205,3.5%20C5,5.36125069%206.99153646,6.01774089%206.99153646,8.0017538%20C6.99153646,9.98576671%205,10.6393737%205,12.5%20L5.00307746,12.7513676%20L5.01222201,12.9998392%20L5.60191711,12.9988344%20L6.0425138,12.2959826%20C7.02362731,10.7653275%207.67612271,10%208,10%20C8.37014547,10%209.16950644,10.9996115%2010.3980829,12.9988344%20L10.987778,12.9998392%20C10.9958674,12.8352104%2011,12.66849%2011,12.5%20C11,10.6393737%208.98689779,10.0147381%208.98689779,8.0017538%20C8.98689779,5.98876953%2011,5.36125069%2011,3.5%20L10.9969109,3.24815712%20L10.987,3%20Z'/%3e%3cpath%20d='M6,4%20L10,4%20C8.95166016,6%208.28499349,7%208,7%20C7.71500651,7%207.04833984,6%206,4%20Z'/%3e%3c/g%3e%3c/svg%3e"); --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) #2b2a33; --preview-image-bg-color:var(--csstools-light-dark-toggle--86, #f0f0f4); --preview-image-border:none; } @supports (color: light-dark(red, red)){ .dialog.newAltText{ --preview-image-bg-color:light-dark(#f0f0f4, #2b2a33); } } @supports not (color: light-dark(tan, tan)){ .dialog.newAltText *{ --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) #2b2a33; --preview-image-bg-color:var(--csstools-light-dark-toggle--86, #f0f0f4); } } @media screen and (forced-colors: active){ .dialog.newAltText{ --preview-image-bg-color:ButtonFace; --preview-image-border:1px solid ButtonText; } } .dialog.newAltText{ width:80%; max-width:570px; min-width:300px; padding:0; } .dialog.newAltText.noAi #newAltTextDisclaimer,.dialog.newAltText.noAi #newAltTextCreateAutomatically{ display:none !important; } .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{ display:none !important; } .dialog.newAltText.aiInstalling #newAltTextDownloadModel{ display:flex !important; } .dialog.newAltText.error #newAltTextNotNow{ display:none !important; } .dialog.newAltText.error #newAltTextCancel{ display:inline-block !important; } .dialog.newAltText:not(.error) #newAltTextError{ display:none !important; } .dialog.newAltText #newAltTextContainer{ display:flex; width:auto; padding:16px; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; flex:0 1 auto; line-height:normal; } :is(.dialog.newAltText #newAltTextContainer) #mainContent{ display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; flex:1 1 auto; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex:1 0 0; align-self:stretch; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; align-self:stretch; flex:1 1 auto; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer{ width:100%; height:70px; position:relative; } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea{ width:100%; height:100%; padding:8px; } :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder{ color:var(--text-secondary-color); } :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder{ color:var(--text-secondary-color); } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ display:none; position:absolute; width:16px; height:16px; inset-inline-start:8px; inset-block-start:8px; -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); pointer-events:none; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder{ color:transparent; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder{ color:transparent; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ display:inline-block; -webkit-mask-image:var(--new-alt-text-spinner-icon); mask-image:var(--new-alt-text-spinner-icon); } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription{ font-size:11px; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer{ display:flex; flex-direction:row; align-items:flex-start; gap:4px; font-size:11px; } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before{ content:""; display:inline-block; width:17px; height:16px; -webkit-mask-image:var(--new-alt-text-ai-disclaimer-icon); mask-image:var(--new-alt-text-ai-disclaimer-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); flex:1 0 auto; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel{ display:flex; align-items:center; gap:4px; align-self:stretch; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-spinner-icon); mask-image:var(--new-alt-text-spinner-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview{ width:180px; aspect-ratio:1; display:flex; justify-content:center; align-items:center; flex:0 0 auto; background-color:var(--preview-image-bg-color); border:var(--preview-image-border); } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas{ max-width:100%; max-height:100%; } .colorPicker{ --csstools-light-dark-toggle--87:var(--csstools-color-scheme--light) #80ebff; --hover-outline-color:var(--csstools-light-dark-toggle--87, #0250bb); --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) #aaf2ff; --selected-outline-color:var(--csstools-light-dark-toggle--88, #0060df); --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #52525e; --swatch-border-color:var(--csstools-light-dark-toggle--89, #cfcfd8); } @supports (color: light-dark(red, red)){ .colorPicker{ --hover-outline-color:light-dark(#0250bb, #80ebff); --selected-outline-color:light-dark(#0060df, #aaf2ff); --swatch-border-color:light-dark(#cfcfd8, #52525e); } } @supports not (color: light-dark(tan, tan)){ .colorPicker *{ --csstools-light-dark-toggle--87:var(--csstools-color-scheme--light) #80ebff; --hover-outline-color:var(--csstools-light-dark-toggle--87, #0250bb); --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) #aaf2ff; --selected-outline-color:var(--csstools-light-dark-toggle--88, #0060df); --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #52525e; --swatch-border-color:var(--csstools-light-dark-toggle--89, #cfcfd8); } } @media screen and (forced-colors: active){ .colorPicker{ --hover-outline-color:Highlight; --selected-outline-color:var(--hover-outline-color); --swatch-border-color:ButtonText; } } .colorPicker .swatch{ width:16px; height:16px; border:1px solid var(--swatch-border-color); border-radius:100%; outline-offset:2px; box-sizing:border-box; forced-color-adjust:none; } .colorPicker button:is(:hover,.selected) > .swatch{ border:none; } .basicColorPicker{ width:28px; } .basicColorPicker::-moz-color-swatch{ border-radius:100%; } .basicColorPicker::-webkit-color-swatch{ border-radius:100%; } .annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{ rotate:0deg; } .annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{ rotate:270deg; } .annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{ rotate:180deg; } .annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{ rotate:90deg; } .annotationEditorLayer .highlightEditor{ position:absolute; background:transparent; z-index:1; cursor:auto; max-width:100%; max-height:100%; border:none; outline:none; pointer-events:none; transform-origin:0 0; } :is(.annotationEditorLayer .highlightEditor):not(.free){ transform:none; } :is(.annotationEditorLayer .highlightEditor) .internal{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:auto; } .disabled:is(.annotationEditorLayer .highlightEditor) .internal{ pointer-events:none; } .selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal{ cursor:pointer; } :is(.annotationEditorLayer .highlightEditor) .editToolbar{ --editor-toolbar-colorpicker-arrow-image:url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.23336%2010.4664L11.8474%206.85339C11.894%206.8071%2011.931%206.75203%2011.9563%206.69136C11.9816%206.63069%2011.9946%206.56562%2011.9946%206.49989C11.9946%206.43417%2011.9816%206.3691%2011.9563%206.30843C11.931%206.24776%2011.894%206.19269%2011.8474%206.14639C11.7536%206.05266%2011.6264%206%2011.4939%206C11.3613%206%2011.2341%206.05266%2011.1404%206.14639L7.99236%209.29339L4.84736%206.14739C4.75305%206.05631%204.62675%206.00592%204.49566%206.00706C4.36456%206.0082%204.23915%206.06078%204.14645%206.15348C4.05374%206.24619%204.00116%206.37159%204.00002%206.50269C3.99888%206.63379%204.04928%206.76009%204.14036%206.85439L7.75236%2010.4674L8.23336%2010.4664Z'%20fill='black'/%3e%3c/svg%3e"); transform-origin:center !important; } :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker{ position:relative; width:auto; display:flex; justify-content:center; align-items:center; gap:4px; padding:4px; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after{ content:""; -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image); mask-image:var(--editor-toolbar-colorpicker-arrow-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:12px; height:12px; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after{ background-color:var(--editor-toolbar-hover-fg-color); } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)){ background-color:var(--editor-toolbar-hover-bg-color); } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after{ scale:-1; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown{ position:absolute; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:11px; padding-block:8px; border-radius:6px; background-color:var(--editor-toolbar-bg-color); border:1px solid var(--editor-toolbar-border-color); box-shadow:var(--editor-toolbar-shadow); inset-block-start:calc(100% + 4px); width:calc(100% + 2 * var(--editor-toolbar-padding)); } :is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button{ width:100%; height:auto; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center; background:none; } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible){ outline:none; } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ outline-offset:2px; } [aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ outline:2px solid var(--selected-outline-color); } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } .editorParamsToolbar:has(#highlightParamsToolbarContainer){ padding:unset; } #highlightParamsToolbarContainer{ gap:16px; padding-inline:10px; padding-block-end:12px; } #highlightParamsToolbarContainer .colorPicker{ display:flex; flex-direction:column; gap:8px; } :is(#highlightParamsToolbarContainer .colorPicker) .dropdown{ display:flex; justify-content:space-between; align-items:center; flex-direction:row; height:auto; } :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button{ width:auto; height:auto; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center; background:none; flex:0 0 auto; padding:0; } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch{ width:24px; height:24px; } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible){ outline:none; } [aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch{ outline:2px solid var(--selected-outline-color); } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } #highlightParamsToolbarContainer #editorHighlightThickness{ display:flex; flex-direction:column; align-items:center; gap:4px; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel{ height:auto; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #80808e; --example-color:var(--csstools-light-dark-toggle--90, #bfbfc9); } @supports (color: light-dark(red, red)){ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ --example-color:light-dark(#bfbfc9, #80808e); } } @supports not (color: light-dark(tan, tan)){ :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) *{ --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #80808e; --example-color:var(--csstools-light-dark-toggle--90, #bfbfc9); } } @media screen and (forced-colors: active){ :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ --example-color:CanvasText; } } :is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]){ opacity:0.4; } :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::before,:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ content:""; width:8px; aspect-ratio:1; display:block; border-radius:100%; background-color:var(--example-color); } :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ width:24px; } :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider{ width:unset; height:14px; } #highlightParamsToolbarContainer #editorHighlightVisibility{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #8f8f9d; --divider-color:var(--csstools-light-dark-toggle--91, #d7d7db); } @supports (color: light-dark(red, red)){ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ --divider-color:light-dark(#d7d7db, #8f8f9d); } } @supports not (color: light-dark(tan, tan)){ :is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) *{ --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #8f8f9d; --divider-color:var(--csstools-light-dark-toggle--91, #d7d7db); } } @media screen and (forced-colors: active){ :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ --divider-color:CanvasText; } } :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ margin-block:4px; width:100%; height:1px; background-color:var(--divider-color); } :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; } #altTextSettingsDialog{ padding:16px; } #altTextSettingsDialog #altTextSettingsContainer{ display:flex; width:573px; flex-direction:column; gap:16px; } :is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer{ gap:16px; } :is(#altTextSettingsDialog #altTextSettingsContainer) .description{ color:var(--text-secondary-color); } :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings{ display:flex; flex-direction:column; gap:12px; } :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) button{ width:-moz-fit-content; width:fit-content; } .download:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) #deleteModelButton{ display:none; } :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not(.download) #downloadModelButton{ display:none; } :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText,:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor{ display:flex; flex-direction:column; gap:8px; } :is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription,:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings,:is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription{ padding-inline-start:40px; } :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings{ display:flex; flex-direction:column; gap:16px; } .sidebar{ --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #23222b; --sidebar-bg-color:var(--csstools-light-dark-toggle--92, #fff); --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --sidebar-border-color:var(--csstools-light-dark-toggle--93, rgb(21 20 26 / 0.1)); --csstools-light-dark-toggle--94:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--95:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--94, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--95, rgb(0 0 0 / 0.1)); --sidebar-border-radius:8px; --sidebar-padding:5px; --sidebar-min-width:180px; --sidebar-max-width:632px; --sidebar-width:239px; --resizer-width:4px; --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #00cadb; --resizer-hover-bg-color:var(--csstools-light-dark-toggle--96, #0062fa); } @supports (color: light-dark(red, red)){ .sidebar{ --sidebar-bg-color:light-dark(#fff, #23222b); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .sidebar{ --sidebar-border-color:light-dark( rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1) ); --sidebar-box-shadow:0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); } } @supports (color: light-dark(red, red)){ .sidebar{ --resizer-hover-bg-color:light-dark(#0062fa, #00cadb); } } @supports not (color: light-dark(tan, tan)){ .sidebar *{ --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #23222b; --sidebar-bg-color:var(--csstools-light-dark-toggle--92, #fff); --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --sidebar-border-color:var(--csstools-light-dark-toggle--93, rgb(21 20 26 / 0.1)); --csstools-light-dark-toggle--94:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--95:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--94, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--95, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #00cadb; --resizer-hover-bg-color:var(--csstools-light-dark-toggle--96, #0062fa); } } @media screen and (forced-colors: active){ .sidebar{ --sidebar-bg-color:Canvas; --sidebar-border-color:CanvasText; --sidebar-box-shadow:none; --resizer-hover-bg-color:CanvasText; } } .sidebar{ border-radius:var(--sidebar-border-radius); box-shadow:var(--sidebar-box-shadow); border:1px solid var(--sidebar-border-color); background-color:var(--sidebar-bg-color); inset-block-start:calc(100% + var(--doorhanger-height) - 2px); padding-block:var(--sidebar-padding); width:var(--sidebar-width); min-width:var(--sidebar-min-width); max-width:var(--sidebar-max-width); } .sidebar .sidebarResizer{ width:var(--resizer-width); background-color:transparent; forced-color-adjust:none; cursor:ew-resize; position:absolute; inset-block:calc(var(--sidebar-padding) + var(--sidebar-border-radius)); inset-inline-start:calc(0px - var(--resizer-width) / 2); transition:background-color 0.5s ease-in-out; box-sizing:border-box; border:1px solid transparent; border-block-width:0; background-clip:content-box; } :is(.sidebar .sidebarResizer):hover{ background-color:var(--resizer-hover-bg-color); } .sidebar.resizing{ cursor:ew-resize; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .sidebar.resizing :not(.sidebarResizer){ pointer-events:none; } :root{ --csstools-color-scheme--light:initial; color-scheme:light dark; --viewer-container-height:0; --pdfViewer-padding-bottom:0; --page-margin:1px auto -8px; --page-border:9px solid transparent; --spreadHorizontalWrapped-margin-LR:-3.5px; --loading-icon-delay:400ms; --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #0df; --focus-ring-color:var(--csstools-light-dark-toggle--97, #0060df); --focus-ring-outline:2px solid var(--focus-ring-color); } @supports (color: light-dark(red, red)){ :root{ --focus-ring-color:light-dark(#0060df, #0df); } } @supports not (color: light-dark(tan, tan)){ :root *{ --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #0df; --focus-ring-color:var(--csstools-light-dark-toggle--97, #0060df); } } @media (prefers-color-scheme: dark){ :root{ --csstools-color-scheme--light:; } } @media screen and (forced-colors: active){ :root{ --pdfViewer-padding-bottom:9px; --page-margin:8px auto -1px; --page-border:1px solid CanvasText; --spreadHorizontalWrapped-margin-LR:3.5px; --focus-ring-color:CanvasText; } } [data-main-rotation="90"]{ transform:rotate(90deg) translateY(-100%); } [data-main-rotation="180"]{ transform:rotate(180deg) translate(-100%, -100%); } [data-main-rotation="270"]{ transform:rotate(270deg) translateX(-100%); } #hiddenCopyElement, .hiddenCanvasElement{ position:absolute; top:0; left:0; width:0; height:0; display:none; } .pdfViewer{ --scale-factor:1; --page-bg-color:unset; padding-bottom:var(--pdfViewer-padding-bottom); --hcm-highlight-filter:none; --hcm-highlight-selected-filter:none; } @media screen and (forced-colors: active){ .pdfViewer{ --hcm-highlight-filter:invert(100%); } } .pdfViewer.copyAll{ cursor:wait; } .pdfViewer .canvasWrapper{ overflow:hidden; width:100%; height:100%; } :is(.pdfViewer .canvasWrapper) canvas{ position:absolute; top:0; left:0; margin:0; display:block; width:100%; height:100%; contain:content; } :is(:is(.pdfViewer .canvasWrapper) canvas) .structTree{ contain:strict; } .detailView:is(:is(.pdfViewer .canvasWrapper) canvas){ image-rendering:pixelated; } .pdfViewer .page{ --user-unit:1; --total-scale-factor:calc(var(--scale-factor) * var(--user-unit)); --scale-round-x:1px; --scale-round-y:1px; direction:ltr; width:816px; height:1056px; margin:var(--page-margin); position:relative; overflow:visible; border:var(--page-border); background-clip:content-box; background-color:var(--page-bg-color, rgb(255 255 255)); } .pdfViewer .dummyPage{ position:relative; width:0; height:var(--viewer-container-height); } .pdfViewer.noUserSelect{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } .pdfViewer.removePageBorders .page{ margin:0 auto 10px; border:none; } .pdfViewer.singlePageView{ display:inline-block; } .pdfViewer.singlePageView .page{ margin:0; border:none; } .pdfViewer:is(.scrollHorizontal, .scrollWrapped), .spread{ margin-inline:3.5px; text-align:center; } .pdfViewer.scrollHorizontal, .spread{ white-space:nowrap; } .pdfViewer.removePageBorders, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread{ margin-inline:0; } .spread :is(.page, .dummyPage), .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread){ display:inline-block; vertical-align:middle; } .spread .page, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page{ margin-inline:var(--spreadHorizontalWrapped-margin-LR); } .pdfViewer.removePageBorders .spread .page, .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page{ margin-inline:5px; } .pdfViewer .page.loadingIcon::after{ position:absolute; top:0; left:0; content:""; width:100%; height:100%; background:url("data:image/gif;base64,R0lGODlhGAAYAPQAAP///wAAAM7Ozvr6+uDg4LCwsOjo6I6OjsjIyJycnNjY2KioqMDAwPLy8nZ2doaGhri4uGhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJBwAAACwAAAAAGAAYAAAFriAgjiQAQWVaDgr5POSgkoTDjFE0NoQ8iw8HQZQTDQjDn4jhSABhAAOhoTqSDg7qSUQwxEaEwwFhXHhHgzOA1xshxAnfTzotGRaHglJqkJcaVEqCgyoCBQkJBQKDDXQGDYaIioyOgYSXA36XIgYMBWRzXZoKBQUMmil0lgalLSIClgBpO0g+s26nUWddXyoEDIsACq5SsTMMDIECwUdJPw0Mzsu0qHYkw72bBmozIQAh+QQJBwAAACwAAAAAGAAYAAAFsCAgjiTAMGVaDgR5HKQwqKNxIKPjjFCk0KNXC6ATKSI7oAhxWIhezwhENTCQEoeGCdWIPEgzESGxEIgGBWstEW4QCGGAIJEoxGmGt5ZkgCRQQHkGd2CESoeIIwoMBQUMP4cNeQQGDYuNj4iSb5WJnmeGng0CDGaBlIQEJziHk3sABidDAHBgagButSKvAAoyuHuUYHgCkAZqebw0AgLBQyyzNKO3byNuoSS8x8OfwIchACH5BAkHAAAALAAAAAAYABgAAAW4ICCOJIAgZVoOBJkkpDKoo5EI43GMjNPSokXCINKJCI4HcCRIQEQvqIOhGhBHhUTDhGo4diOZyFAoKEQDxra2mAEgjghOpCgz3LTBIxJ5kgwMBShACREHZ1V4Kg1rS44pBAgMDAg/Sw0GBAQGDZGTlY+YmpyPpSQDiqYiDQoCliqZBqkGAgKIS5kEjQ21VwCyp76dBHiNvz+MR74AqSOdVwbQuo+abppo10ssjdkAnc0rf8vgl8YqIQAh+QQJBwAAACwAAAAAGAAYAAAFrCAgjiQgCGVaDgZZFCQxqKNRKGOSjMjR0qLXTyciHA7AkaLACMIAiwOC1iAxCrMToHHYjWQiA4NBEA0Q1RpWxHg4cMXxNDk4OBxNUkPAQAEXDgllKgMzQA1pSYopBgonCj9JEA8REQ8QjY+RQJOVl4ugoYssBJuMpYYjDQSliwasiQOwNakALKqsqbWvIohFm7V6rQAGP6+JQLlFg7KDQLKJrLjBKbvAor3IKiEAIfkECQcAAAAsAAAAABgAGAAABbUgII4koChlmhokw5DEoI4NQ4xFMQoJO4uuhignMiQWvxGBIQC+AJBEUyUcIRiyE6CR0CllW4HABxBURTUw4nC4FcWo5CDBRpQaCoF7VjgsyCUDYDMNZ0mHdwYEBAaGMwwHDg4HDA2KjI4qkJKUiJ6faJkiA4qAKQkRB3E0i6YpAw8RERAjA4tnBoMApCMQDhFTuySKoSKMJAq6rD4GzASiJYtgi6PUcs9Kew0xh7rNJMqIhYchACH5BAkHAAAALAAAAAAYABgAAAW0ICCOJEAQZZo2JIKQxqCOjWCMDDMqxT2LAgELkBMZCoXfyCBQiFwiRsGpku0EshNgUNAtrYPT0GQVNRBWwSKBMp98P24iISgNDAS4ipGA6JUpA2WAhDR4eWM/CAkHBwkIDYcGiTOLjY+FmZkNlCN3eUoLDmwlDW+AAwcODl5bYl8wCVYMDw5UWzBtnAANEQ8kBIM0oAAGPgcREIQnVloAChEOqARjzgAQEbczg8YkWJq8nSUhACH5BAkHAAAALAAAAAAYABgAAAWtICCOJGAYZZoOpKKQqDoORDMKwkgwtiwSBBYAJ2owGL5RgxBziQQMgkwoMkhNqAEDARPSaiMDFdDIiRSFQowMXE8Z6RdpYHWnEAWGPVkajPmARVZMPUkCBQkJBQINgwaFPoeJi4GVlQ2Qc3VJBQcLV0ptfAMJBwdcIl+FYjALQgimoGNWIhAQZA4HXSpLMQ8PIgkOSHxAQhERPw7ASTSFyCMMDqBTJL8tf3y2fCEAIfkECQcAAAAsAAAAABgAGAAABa8gII4k0DRlmg6kYZCoOg5EDBDEaAi2jLO3nEkgkMEIL4BLpBAkVy3hCTAQKGAznM0AFNFGBAbj2cA9jQixcGZAGgECBu/9HnTp+FGjjezJFAwFBQwKe2Z+KoCChHmNjVMqA21nKQwJEJRlbnUFCQlFXlpeCWcGBUACCwlrdw8RKGImBwktdyMQEQciB7oACwcIeA4RVwAODiIGvHQKERAjxyMIB5QlVSTLYLZ0sW8hACH5BAkHAAAALAAAAAAYABgAAAW0ICCOJNA0ZZoOpGGQrDoOBCoSxNgQsQzgMZyIlvOJdi+AS2SoyXrK4umWPM5wNiV0UDUIBNkdoepTfMkA7thIECiyRtUAGq8fm2O4jIBgMBA1eAZ6Knx+gHaJR4QwdCMKBxEJRggFDGgQEREPjjAMBQUKIwIRDhBDC2QNDDEKoEkDoiMHDigICGkJBS2dDA6TAAnAEAkCdQ8ORQcHTAkLcQQODLPMIgIJaCWxJMIkPIoAt3EhACH5BAkHAAAALAAAAAAYABgAAAWtICCOJNA0ZZoOpGGQrDoOBCoSxNgQsQzgMZyIlvOJdi+AS2SoyXrK4umWHM5wNiV0UN3xdLiqr+mENcWpM9TIbrsBkEck8oC0DQqBQGGIz+t3eXtob0ZTPgNrIwQJDgtGAgwCWSIMDg4HiiUIDAxFAAoODwxDBWINCEGdSTQkCQcoegADBaQ6MggHjwAFBZUFCm0HB0kJCUy9bAYHCCPGIwqmRq0jySMGmj6yRiEAIfkECQcAAAAsAAAAABgAGAAABbIgII4k0DRlmg6kYZCsOg4EKhLE2BCxDOAxnIiW84l2L4BLZKipBopW8XRLDkeCiAMyMvQAA+uON4JEIo+vqukkKQ6RhLHplVGN+LyKcXA4Dgx5DWwGDXx+gIKENnqNdzIDaiMECwcFRgQCCowiCAcHCZIlCgICVgSfCEMMnA0CXaU2YSQFoQAKUQMMqjoyAglcAAyBAAIMRUYLCUkFlybDeAYJryLNk6xGNCTQXY0juHghACH5BAkHAAAALAAAAAAYABgAAAWzICCOJNA0ZVoOAmkY5KCSSgSNBDE2hDyLjohClBMNij8RJHIQvZwEVOpIekRQJyJs5AMoHA+GMbE1lnm9EcPhOHRnhpwUl3AsknHDm5RN+v8qCAkHBwkIfw1xBAYNgoSGiIqMgJQifZUjBhAJYj95ewIJCQV7KYpzBAkLLQADCHOtOpY5PgNlAAykAEUsQ1wzCgWdCIdeArczBQVbDJ0NAqyeBb64nQAGArBTt8R8mLuyPyEAOwAAAAAAAAAAAA==") center no-repeat; display:none; transition-property:display; transition-delay:var(--loading-icon-delay); z-index:5; contain:strict; } .pdfViewer .page.loading::after{ display:block; } .pdfViewer .page:not(.loading)::after{ transition-property:none; display:none; } .pdfPresentationMode .pdfViewer{ padding-bottom:0; } .pdfPresentationMode .spread{ margin:0; } .pdfPresentationMode .pdfViewer .page{ margin:0 auto; border:2px solid transparent; } .error-fallback { background-color: #f0f0f0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 50px 20px 0; gap: 50px; box-sizing: border-box; } @media (max-width: 980px) { .error-fallback { padding: 30px 15px 0; gap: 30px; background-color: #fff; justify-content: center; } } .error-fallback__card-wrapper { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; width: 100%; max-width: 500px; } .error-fallback__card { background-color: #fff; border: 1px solid #b7bdc6; border-radius: 8px; width: 100%; } @media (max-width: 980px) { .error-fallback__card { background-color: transparent; border: none; } } .error-fallback__card-content { padding: 40px; display: flex; flex-direction: column; align-items: center; gap: 30px; overflow: hidden; border-radius: inherit; box-sizing: border-box; } @media (max-width: 980px) { .error-fallback__card-content { padding: 20px 15px; gap: 20px; } } .error-fallback__icon-wrapper { background-color: #f7f9fc; padding: 20px; border-radius: 100px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } @media (max-width: 980px) { .error-fallback__icon-wrapper { padding: 15px; } } .error-fallback__icon-container { width: 80px; height: 80px; position: relative; overflow: hidden; } @media (max-width: 980px) { .error-fallback__icon-container { width: 60px; height: 60px; } } .error-fallback__icon-container svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; } .error-fallback__content-section { display: flex; flex-direction: column; gap: 16px; align-items: center; width: 100%; } .error-fallback__heading-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .error-fallback__heading { font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 600; line-height: 36px; color: #25292c; text-align: center; width: 100%; margin: 0; } @media (max-width: 980px) { .error-fallback__heading { font-size: 20px; line-height: 28px; } } /* Theme CSS imports - auto-generated */ /* Regenerate with: npx tsx scripts/generate-theme-css.ts */ :root { /* ========== GLOBALS ========== */ --name: default; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: #ffffff; --link-color: rgba(0, 113, 243, 1); --link-color-hover: rgba(66, 152, 251, 1); --checkbox-color: rgba(52, 53, 58, 1); --checkbox-color-active: rgba(0, 113, 243, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(0, 113, 243, 1); --input-required-text-color: rgba(0, 113, 243, 1); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: rgba(52, 53, 58, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(0, 113, 243, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(0, 113, 243, 1); --icon-background-color: rgba(247, 249, 252, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(0, 113, 243, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(0, 113, 243, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(0, 113, 243, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(0, 113, 243, 1); --button-padding: 10px 34px; --button-border-radius: 100px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(0, 113, 243, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(66, 152, 251, 1); --button-border-hover: 1px solid rgba(66, 152, 251, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(52, 53, 58, 1); --button-font-size: 14px; --button-font-weight: 500; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(0, 113, 243, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 100px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(66, 152, 251, 1); --button-secondary-border-hover: 1px solid rgba(66, 152, 251, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(52, 53, 58, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: rgba(0, 113, 243, 1); --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 100px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(52, 53, 58, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(52, 53, 58, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(52, 53, 58, 1); --header-font-size: 1.5rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 2px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(206, 212, 220, 1); --select-input-bg-color-selected: rgba(206, 212, 220, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(0, 113, 243, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(0, 113, 243, 1); --xs2a-link-color-hover: rgba(66, 152, 251, 1); --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(0, 113, 243, 1); --xs2a-back-btn-border-color: rgba(0, 113, 243, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(0, 113, 243, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 2px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(0, 113, 243, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(66, 152, 251, 1); --xs2a-button-border-hover: 1px solid rgba(66, 152, 251, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(52, 53, 58, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgba(0, 113, 243, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(66, 152, 251, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(0, 113, 243, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(0, 113, 243, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(0, 113, 243, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(0, 113, 243, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(0, 113, 243, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(0, 113, 243, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(66, 152, 251, 1); --videoid-cta-btn-border-hover: 1px solid rgba(66, 152, 251, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(52, 53, 58, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(0, 113, 243, 1); } [data-theme='amexTheme'] { /* ========== GLOBALS ========== */ --name: Amex; --font-family: 'Open Sans', sans-serif; --font-family-headline: 'Open Sans', sans-serif; --font-family-bold: 'Open Sans', sans-serif; --bg-color: rgba(236, 237, 238, 1); --link-color: rgba(0, 111, 207, 1); --link-color-hover: rgba(16, 104, 165, 1); --checkbox-color: rgba(0, 111, 207, 1); --checkbox-color-active: rgba(0, 111, 207); --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(205, 82%, 35%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 60px 80px 60px; --container-border-radius: 0px; --container-border: none; --container-box-shadow: none; --container-margin: 0 auto; --container-color: #505050; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(0, 111, 207, 1); --doc-checkbox-icon-hover: rgba(0, 111, 207, 0.6); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(0, 111, 207, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(0, 111, 207, 1); --icon-background-color: rgba(247, 248, 249, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 1px solid rgba(200, 201, 199, 1); --otp-border-radius: 8px; --otp-font-size: 28px; --otp-focus-color: rgba(0, 111, 207, 1); --otp-bg-color: rgba(247, 248, 249, 1); --otp-focus-bg-color: rgba(247, 248, 249, 1); --otp-font-color: #000000; --otp-loading-color: rgba(0, 111, 207, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 1px solid rgba(235, 235, 235, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #f1f3f7; --pdf-scroll-handle-color: #000000; --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #000000; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #000000; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #000000; --pdf-range-thumb-color: #000000; --pdf-range-thumb-hover-color: #000000cc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #000000; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #000000; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: rgba(0, 111, 207, 1); --button-padding: 10px 24px; --button-border-radius: 4px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 1px solid rgba(0, 111, 207, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(16, 104, 165, 1); --button-border-hover: 1px solid rgba(16, 104, 165, 0.6); --button-bg-color-disabled: rgba(0, 111, 207, 1); --button-border-disabled: 1px solid rgba(0, 111, 207, 1); --button-color-disabled: rgba(255, 255, 255, 1); --button-font-size: 13px; --button-font-weight: 600; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(0, 111, 207, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 24px; --button-secondary-border-radius: 4px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(16, 104, 165, 1); --button-secondary-border-hover: 1px solid rgba(16, 104, 165, 0.6); --button-secondary-bg-color-disabled: rgba(0, 111, 207, 1); --button-secondary-border-disabled: 1px solid rgba(0, 111, 207, 1); --button-secondary-color-disabled: rgba(255, 255, 255, 1); --button-secondary-font-size: 13px; --button-secondary-font-weight: 600; --button-secondary-spinner-primary: rgba(0, 111, 207, 1); --button-secondary-spinner-bg-color: rgba(0, 111, 207, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-bg-color: rgba(0, 111, 207, 1); --button-disabled-padding: 10px 24px; --button-disabled-border-radius: 4px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-border: 1px solid rgba(0, 111, 207, 1); --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-color: rgba(255, 255, 255, 1); --button-disabled-color-hover: rgba(255, 255, 255, 1); --button-disabled-bg-color-hover: rgba(0, 111, 207, 1); --button-disabled-border-hover: 1px solid rgba(0, 111, 207, 1); --button-disabled-font-size: 13px; --button-disabled-font-weight: 600; /* ========== HEADER ========== */ --header-color: #505050; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 24px; --header-line-height-mobile: 36px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 8px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(0, 111, 207, 0.65); --select-input-color-selected: rgba(242, 248, 255, 1); --select-input-bg-color-selected: rgba(0, 111, 207, 0.65); --select-input-bg-color-focus: rgba(0, 111, 207, 0.25); --select-input-current-bg: rgba(0, 111, 207, 0.15); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(0, 111, 207, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(247, 248, 249, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: rgba(247, 248, 249, 1); --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 1px solid rgba(200, 201, 199, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: black; --text-input-color-focus: black; --text-input-bg-color-focus: rgba(247, 248, 249, 1); --text-input-border-focus: 1px solid rgba(200, 201, 199, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: gray; --text-input-color-disabled: white; --text-input-font-size: 14px; --text-input-font-weight: 400; --text-input-outline: 1px solid rgba(0, 111, 207, 1); --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Open Sans', sans-serif; --xs2a-font-family-headline: 'Open Sans', sans-serif; --xs2a-bg-color: #ffffff; --xs2a-link-color: rgba(0, 111, 207, 1); --xs2a-link-color-hover: rgba(0, 111, 207, 1); --xs2a-checkbox-color: rgba(0, 111, 207, 1); --xs2a-checkbox-color-active: rgba(0, 111, 207, 1); --xs2a-back-btn-border-color: rgba(247, 248, 249, 1); --xs2a-back-btn-color: black; --xs2a-back-btn-color-hover: black; --xs2a-back-btn-disabled: silver; --xs2a-input-bg-color: rgba(247, 248, 249, 1); --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 1px solid rgba(200, 201, 199, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: black; --xs2a-input-color-focus: black; --xs2a-input-bg-color-focus: rgba(247, 248, 249, 1); --xs2a-input-border-focus: 1px solid rgba(200, 201, 199, 1); --xs2a-input-bg-color-disabled: silver; --xs2a-input-border-disabled: gray; --xs2a-input-color-disabled: white; --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 400; --xs2a-input-outline: 1px solid rgba(0, 111, 207, 1); --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(0, 111, 207, 1); --xs2a-button-padding: 12px 24px; --xs2a-button-border-radius: 4px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid rgba(0, 111, 207, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(16, 104, 165, 1); --xs2a-button-border-hover: 1px solid rgba(16, 104, 165, 0.6); --xs2a-button-bg-color-disabled: rgba(0, 111, 207, 1); --xs2a-button-border-disabled: 1px solid rgba(0, 111, 207, 1); --xs2a-button-color-disabled: rgba(255, 255, 255, 1); --xs2a-button-font-size: 13px; --xs2a-button-font-weight: 600; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(28, 105, 212, 1); --kontomatik-header-color: #505050; --kontomatik-primary-color: rgba(0, 101, 131, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(16, 104, 165); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-width: 100%; --kontomatik-padding: 60px 80px 60px; --kontomatik-border-radius: 0px; --kontomatik-border: none; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 18px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 1px solid rgba(220, 220, 220, 1); --progress-border-radius: 18px; --progress-background: white; --progress-bar-fill: linear-gradient(90deg, rgba(0, 111, 207, 0) 0%, rgba(0, 111, 207, 1) 100%); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(0, 111, 207, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(200, 201, 199, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(0, 111, 207, 1); --spinner-bg-color: rgba(235, 235, 235, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(0, 111, 207, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #505050; --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(0, 111, 207, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(0, 111, 207, 1); --videoid-cta-btn-padding: 10px 34px 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(0, 111, 207, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(16, 104, 165, 1); --videoid-cta-btn-border-hover: 1px solid rgba(16, 104, 165, 0.6); --videoid-cta-btn-bg-color-disabled: rgba(0, 111, 207, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(0, 111, 207, 1); --videoid-cta-btn-color-disabled: rgba(255, 255, 255, 1); --videoid-cta-btn-font-size: 18px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: #006ecf; /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(152, 152, 155, 1); } [data-theme='bmwTheme'] { /* ========== GLOBALS ========== */ --name: BMW; --font-family: 'MINI Sans Serif', sans-serif; --font-family-headline: 'MINI Sans Serif', sans-serif; --font-family-bold: 'MINI Sans Serif', sans-serif; --bg-color: rgba(230, 230, 230, 1); --link-color: rgba(28, 105, 212, 1); --link-color-hover: rgba(6, 83, 182, 1); --checkbox-color: rgba(0, 0, 0, 1); --checkbox-color-active: rgba(0, 0, 0, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 16px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(214, 94%, 37%, 50%); --focus-transition: box-shadow 0.3s ease; --wcag: 1; --separator-border-top: none; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 40px 60px 60px; --container-border-radius: 0px; --container-border: 1px solid rgba(230, 230, 230, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(38, 38, 38, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(28, 105, 212, 1); --doc-checkbox-icon-hover: rgba(28, 105, 212, 0.6); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(28, 105, 212, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(255, 255, 255, 1); --icon-background-color: rgba(247, 249, 252, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 1px solid rgba(220, 220, 220, 1); --otp-border-radius: 0px; --otp-font-size: 28px; --otp-focus-color: rgba(28, 105, 212, 1); --otp-bg-color: rgba(250, 250, 250, 1); --otp-focus-bg-color: #ffffff; --otp-font-color: rgba(38, 38, 38, 1); --otp-loading-color: rgba(28, 105, 212, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 1px solid rgba(183, 189, 198, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: rgba(183, 189, 198, 1); --pdf-scroll-handle-color: rgba(42, 99, 128, 1); --pdf-scroll-radius: 10px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #000000; --pdf-zoom-border: 2px solid rgba(206, 203, 214, 1); --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #000000; --pdf-zoom-border-hover: 2px solid rgba(206, 203, 214, 1); --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #000000; --pdf-range-thumb-color: #000000; --pdf-range-thumb-hover-color: #000000cc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #000000; --download-btn-border: 2px solid rgba(206, 203, 214, 1); --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #000000; --download-btn-border-hover: 2px solid rgba(206, 203, 214, 1); --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 2px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(28, 105, 212, 1); --button-padding: 14px 40px; --button-border-radius: 0px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(28, 105, 212, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(6, 83, 182, 1); --button-border-hover: 1px solid rgba(6, 83, 182, 1); --button-bg-color-disabled: rgba(28, 105, 212, 0.5); --button-border-disabled: 1px solid rgba(28, 105, 212, 0.5); --button-color-disabled: rgba(28, 105, 212, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 600; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(28, 105, 212, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 14px 40px; --button-secondary-border-radius: 0px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(6, 83, 182, 1); --button-secondary-border-hover: 1px solid rgba(6, 83, 182, 1); --button-secondary-bg-color-disabled: rgba(28, 105, 212, 0.5); --button-secondary-border-disabled: 1px solid rgba(28, 105, 212, 0.5); --button-secondary-color-disabled: rgba(28, 105, 212, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 600; --button-secondary-spinner-primary: rgba(28, 105, 212, 1); --button-secondary-spinner-bg-color: rgba(28, 105, 212, 0.5); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 14px 40px; --button-link-border-radius: 0px; --button-link-width: auto; --button-link-height: 48px; --button-link-height-mobile: 48px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(28, 105, 212, 1); --button-link-color-hover: rgba(6, 83, 182, 1); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(28, 105, 212, 0.5); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 600; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(28, 105, 212, 1); --button-link-spinner-bg-color: rgba(255, 255, 255, 1); --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-bg-color: rgba(28, 105, 212, 0.5); --button-disabled-padding: 14px 40px; --button-disabled-border-radius: 0px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-border: 1px solid rgba(28, 105, 212, 0.5); --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-color: rgba(28, 105, 212, 1); --button-disabled-color-hover: rgba(28, 105, 212, 1); --button-disabled-bg-color-hover: rgba(28, 105, 212, 0.5); --button-disabled-border-hover: 1px solid rgba(28, 105, 212, 0.5); --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 600; /* ========== HEADER ========== */ --header-color: rgba(38, 38, 38, 1); --header-font-size: 26px; --header-line-height: 36px; --header-font-size-mobile: 26px; --header-line-height-mobile: 36px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: rgba(28, 105, 212, 1); --select-input-color-selected: rgba(42, 98, 129, 1); --select-input-bg-color-selected: rgba(209, 221, 226, 1); --select-input-bg-color-focus: rgba(209, 221, 226, 1); --select-input-current-bg: rgba(0, 101, 131, 1); --select-input-current-color: rgba(255, 255, 255, 1); --select-input-icon-hover-color: #7298ab; --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(28, 105, 212, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(242, 242, 242, 1); --symbol-current: rgba(255, 255, 255, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 0px; --text-input-border: 1px solid rgba(220, 220, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: gray; --text-input-color-focus: rgba(38, 38, 38, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 1px solid rgba(220, 220, 220, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: gray; --text-input-color-disabled: white; --text-input-font-size: 16px; --text-input-font-size-mobile: 16px; --text-input-font-weight: 400; --text-input-outline: 2px solid rgba(28, 105, 212, 1); --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'MINI Sans Serif', sans-serif; --xs2a-font-family-headline: 'MINI Sans Serif', sans-serif; --xs2a-bg-color: rgba(230, 230, 230, 1); --xs2a-link-color: rgba(28, 105, 212, 1); --xs2a-link-color-hover: rgba(6, 83, 182, 1); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(0, 0, 0, 1); --xs2a-back-btn-border-color: rgba(220, 220, 220, 1); --xs2a-back-btn-color: gray; --xs2a-back-btn-color-hover: rgba(38, 38, 38, 1); --xs2a-back-btn-disabled: silver; --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 0px; --xs2a-input-border: 1px solid rgba(220, 220, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: gray; --xs2a-input-color-focus: rgba(38, 38, 38, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 1px solid rgba(220, 220, 220, 1); --xs2a-input-bg-color-disabled: silver; --xs2a-input-border-disabled: gray; --xs2a-input-color-disabled: white; --xs2a-input-font-size: 16px; --xs2a-input-font-size-mobile: 16px; --xs2a-input-font-weight: 400; --xs2a-input-outline: 2px solid rgba(28, 105, 212, 1); --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(28, 105, 212, 1); --xs2a-button-padding: 14px 40px; --xs2a-button-border-radius: 0px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(28, 105, 212, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(6, 83, 182, 1); --xs2a-button-border-hover: 1px solid rgba(6, 83, 182, 1); --xs2a-button-bg-color-disabled: rgba(28, 105, 212, 0.5); --xs2a-button-border-disabled: 1px solid rgba(28, 105, 212, 0.5); --xs2a-button-color-disabled: rgba(28, 105, 212, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 600; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: #000; --kontomatik-border-color: rgba(230, 230, 230, 1); --kontomatik-header-color: rgba(38, 38, 38, 1); --kontomatik-primary-color: rgba(28, 105, 212, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(6, 83, 182, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 0px; --kontomatik-width: 100%; --kontomatik-padding: 40px 60px 60px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 24px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 1px solid rgba(220, 220, 220, 1); --progress-border-radius: 4px; --progress-background: white; --progress-bar-fill: rgba(28, 105, 212, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(38, 38, 38, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(67, 21, 128, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(28, 105, 212, 1); --spinner-bg-color: #fbfbfb; --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(28, 105, 212, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(6, 83, 182, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(6, 83, 182, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: transparent; --videoid-cta-btn-padding: 10px 40px; --videoid-cta-btn-border-radius: 0px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid #dcdbe2; --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: #34353a; --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(6, 83, 182, 1); --videoid-cta-btn-border-hover: 1px solid rgba(6, 83, 182, 1); --videoid-cta-btn-bg-color-disabled: rgba(28, 105, 212, 0.5); --videoid-cta-btn-border-disabled: 1px solid rgba(28, 105, 212, 0.5); --videoid-cta-btn-color-disabled: rgba(28, 105, 212, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 600; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: #1c69d4; /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(155, 155, 155, 1); } [data-theme='bondoraTheme'] { /* ========== GLOBALS ========== */ --name: Bondora; --font-family: 'Open Sans', sans-serif; --font-family-headline: 'Open Sans', sans-serif; --font-family-bold: 'Open Sans', sans-serif; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(132, 191, 231, 1); --link-color-hover: rgba(98, 173, 224, 1); --checkbox-color: rgba(52, 53, 58, 1); --checkbox-color-active: rgba(154, 223, 62, 1); --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(204, 67%, 63%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 2px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(52, 53, 58, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(154, 223, 62, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(154, 223, 62, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(154, 223, 62, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(154, 223, 62, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(135, 209, 35, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 40px; /* ========== BUTTON ========== */ --button-bg-color: rgba(154, 223, 62, 1); --button-padding: 10px 34px; --button-border-radius: 32px; --button-width: auto; --button-height: 40px; --button-height-mobile: 40px; --button-border: 1px solid rgba(154, 223, 62, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(135, 209, 35, 1); --button-border-hover: 1px solid rgba(135, 209, 35, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(52, 53, 58, 1); --button-font-size: 16px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(154, 223, 62, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 32px; --button-secondary-width: auto; --button-secondary-height: 40px; --button-secondary-height-mobile: 40px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(135, 209, 35, 1); --button-secondary-border-hover: 1px solid rgba(135, 209, 35, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(52, 53, 58, 1); --button-secondary-font-size: 16px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(154, 223, 62, 1); --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 32px; --button-disabled-width: auto; --button-disabled-height: 40px; --button-disabled-height-mobile: 40px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(52, 53, 58, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(52, 53, 58, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(132, 191, 231, 1); --header-font-size: 1.625rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 2px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(206, 212, 220, 1); --select-input-bg-color-selected: rgba(206, 212, 220, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(154, 223, 62, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: rgba(217, 17, 17, 1); --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(154, 223, 62, 1); --xs2a-link-color-hover: rgba(135, 209, 35, 1); --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(154, 223, 62, 1); --xs2a-back-btn-border-color: rgba(154, 223, 62, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(154, 223, 62, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 32px; --xs2a-button-width: auto; --xs2a-button-height: 40px; --xs2a-button-height-mobile: 40px; --xs2a-button-border: 1px solid rgba(154, 223, 62, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(135, 209, 35, 1); --xs2a-button-border-hover: 1px solid rgba(135, 209, 35, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(52, 53, 58, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgba(154, 223, 62, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(135, 209, 35, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(154, 223, 62, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(154, 223, 62, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(154, 223, 62, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(154, 223, 62, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(154, 223, 62, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(154, 223, 62, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(135, 209, 35, 1); --videoid-cta-btn-border-hover: 1px solid rgba(135, 209, 35, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(52, 53, 58, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(154, 223, 62, 1); } [data-theme='cmcTheme'] { /* ========== GLOBALS ========== */ --name: cmc; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: #ffffff; --link-color: rgba(50, 95, 255, 1); --link-color-hover: rgba(91, 127, 255, 1); --checkbox-color: rgba(50, 95, 255, 1); --checkbox-color-active: rgba(50, 95, 255, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(50, 95, 255, 1); --input-required-text-color: rgba(50, 95, 255, 1); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(227, 100%, 68%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: rgba(52, 53, 58, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(50, 95, 255, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(50, 95, 255, 1); --icon-background-color: rgba(247, 249, 252, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(50, 95, 255, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(50, 95, 255, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(50, 95, 255, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 2px solid rgba(50, 95, 255, 1); --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 2px solid rgba(50, 95, 255, 1); --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 2px solid rgba(50, 95, 255, 1); --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 2px solid rgba(50, 95, 255, 1); --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 2px solid #f6f6f6; --download-btn-height: 40px; /* ========== BUTTON ========== */ --button-bg-color: rgba(50, 95, 255, 1); --button-padding: 10px 24px; --button-border-radius: 100px; --button-width: auto; --button-height: 40px; --button-height-mobile: 40px; --button-border: 1px solid rgba(50, 95, 255, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(91, 127, 255, 1); --button-border-hover: 1px solid rgba(91, 127, 255, 1); --button-bg-color-disabled: rgba(172, 176, 181, 1); --button-border-disabled: 1px solid rgba(172, 176, 181, 1); --button-color-disabled: rgba(246, 246, 246, 1); --button-font-size: 14px; --button-font-weight: 500; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(50, 95, 255, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 24px; --button-secondary-border-radius: 100px; --button-secondary-width: auto; --button-secondary-height: 40px; --button-secondary-height-mobile: 40px; --button-secondary-border: 2px solid rgba(50, 95, 255, 1); --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: rgba(42, 0, 98, 1); --button-secondary-color-hover: rgba(42, 0, 98, 1); --button-secondary-bg-color-hover: rgba(241, 243, 247, 1); --button-secondary-border-hover: 2px solid rgba(50, 95, 255, 1); --button-secondary-bg-color-disabled: rgba(246, 246, 246, 1); --button-secondary-border-disabled: 2px solid rgba(246, 246, 246, 1); --button-secondary-color-disabled: rgba(127, 133, 139, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: rgba(50, 95, 255, 1); --button-secondary-spinner-bg-color: rgba(246, 246, 246, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 24px; --button-disabled-border-radius: 100px; --button-disabled-width: auto; --button-disabled-height: 40px; --button-disabled-height-mobile: 40px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(172, 176, 181, 1); --button-disabled-border: 1px solid rgba(172, 176, 181, 1); --button-disabled-color: rgba(246, 246, 246, 1); --button-disabled-bg-color-hover: rgba(172, 176, 181, 1); --button-disabled-border-hover: 1px solid rgba(172, 176, 181, 1); --button-disabled-color-hover: rgba(246, 246, 246, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(52, 53, 58, 1); --header-font-size: 1.5rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(183, 189, 198, 1); --select-input-bg-color-selected: rgba(206, 212, 220, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgba(48, 52, 56, 1); --select-input-indicator-color-hover: rgba(48, 52, 56, 1); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); --select-input-size: 32px; /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-primary: rgba(50, 95, 255, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); --symbol-current: rgba(50, 95, 255, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 1px solid rgba(183, 189, 198, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(43, 37, 58, 1); --text-input-color-focus: rgba(43, 37, 58, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 1px solid rgba(43, 37, 58, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-weight: 400; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(50, 95, 255, 1); --xs2a-link-color-hover: rgba(66, 152, 251, 1); --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(50, 95, 255, 1); --xs2a-back-btn-border-color: rgba(50, 95, 255, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 1px solid rgba(183, 189, 198, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(43, 37, 58, 1); --xs2a-input-color-focus: rgba(43, 37, 58, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 1px solid rgba(43, 37, 58, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 400; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(50, 95, 255, 1); --xs2a-button-padding: 10px 24px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 100px; --xs2a-button-width: auto; --xs2a-button-height: 40px; --xs2a-button-height-mobile: 40px; --xs2a-button-border: 1px solid rgba(50, 95, 255, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(91, 127, 255, 1); --xs2a-button-border-hover: 1px solid rgba(91, 127, 255, 1); --xs2a-button-bg-color-disabled: rgba(172, 176, 181, 1); --xs2a-button-border-disabled: 1px solid rgba(172, 176, 181, 1); --xs2a-button-color-disabled: rgba(246, 246, 246, 1); --xs2a-button-font-size: 14px; --xs2a-button-font-weight: 500; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgba(50, 95, 255, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(66, 152, 251, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-button-border-radius: 100px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(50, 95, 255, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(50, 95, 255, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(50, 95, 255, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(50, 95, 255, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(50, 95, 255, 1); --videoid-cta-btn-padding: 10px 24px; --videoid-cta-btn-border-radius: 100px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(50, 95, 255, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(91, 127, 255, 1); --videoid-cta-btn-border-hover: 1px solid rgba(91, 127, 255, 1); --videoid-cta-btn-bg-color-disabled: rgba(172, 176, 181, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(172, 176, 181, 1); --videoid-cta-btn-color-disabled: rgba(246, 246, 246, 1); --videoid-cta-btn-font-size: 14px; --videoid-cta-btn-font-weight: 500; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(50, 95, 255, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(155, 155, 155, 1); } [data-theme='docuSignTheme'] { /* ========== GLOBALS ========== */ --name: DocuSign; --font-family: Inter, sans-serif; --font-family-headline: Inter, sans-serif; --font-family-bold: Inter, sans-serif; --bg-color: #ffffff; --link-color: rgba(76, 0, 255, 1); --link-color-hover: rgba(64, 0, 204, 1); --checkbox-color: rgba(76, 0, 255, 1); --checkbox-color-active: rgba(76, 0, 255, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: #9e8fc3; --input-required-text-color: #9e8fc3; --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px rgba(64, 0, 204, 0.7); --focus-transition: box-shadow 0.3s ease; /* ========== CONTENT WRAP ========== */ --content-wrap-background-image: none; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 40px; --container-border-radius: 8px; --container-border: 1px solid #b7bdc6; --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(52, 53, 58, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(76, 0, 255, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(76, 0, 255, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 6px; --otp-font-size: 22px; --otp-focus-color: rgba(76, 0, 255, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(76, 0, 255, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(76, 0, 255, 1); --pdf-scroll-radius: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-border-radius: 8px; /* ========== BUTTON ========== */ --button-bg-color: rgba(76, 0, 255, 1); --button-padding: 10px 34px; --button-border-radius: 8px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(76, 0, 255, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(64, 0, 204, 1); --button-border-hover: 1px solid rgba(64, 0, 204, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(52, 53, 58, 1); --button-font-size: 16px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(76, 0, 255, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: #ffffff; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 8px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 2px solid #cecbd6; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #4c00ff; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(64, 0, 204, 1); --button-secondary-border-hover: 1px solid rgba(64, 0, 204, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(52, 53, 58, 1); --button-secondary-font-size: 16px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(76, 0, 255, 1); --button-secondary-spinner-bg-color: #ffffff; --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 8px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(52, 53, 58, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(52, 53, 58, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #34353a; --header-font-size: 1.625rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 2px; --select-input-border-color-focus: rgba(206, 212, 220, 1); --select-input-bg-color-selected: rgba(206, 212, 220, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(76, 0, 255, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(76, 0, 255, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter, -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: Inter, -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(76, 0, 255, 1); --xs2a-link-color-hover: rgba(64, 0, 204, 1); --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(76, 0, 255, 1); --xs2a-back-btn-border-color: rgba(76, 0, 255, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(76, 0, 255, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 8px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(76, 0, 255, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(64, 0, 204, 1); --xs2a-button-border-hover: 1px solid rgba(64, 0, 204, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(52, 53, 58, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgb(0, 105, 236); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(0, 105, 236); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 4px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 4px; --progress-background: white; --progress-bar-fill: rgba(76, 0, 255, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(76, 0, 255, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(76, 0, 255, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(76, 0, 255, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(76, 0, 255, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 8px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(76, 0, 255, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(64, 0, 204, 1); --videoid-cta-btn-border-hover: 1px solid rgba(64, 0, 204, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(52, 53, 58, 1); --videoid-cta-btn-font-size: 18px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(76, 0, 255, 1); } [data-theme='elavonTheme'] { /* ========== GLOBALS ========== */ --name: Elavon; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(7, 37, 67, 1); --link-color-hover: rgba(7, 37, 67, 0.8); --checkbox-color: rgba(7, 37, 67, 1); --checkbox-color-active: rgba(74, 133, 31, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(216, 53, 53, 1); --input-required-text-color: rgba(216, 53, 53, 1); --input-required-text-font-size: 16px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(118, 36%, 60%, 50%); --focus-transition: box-shadow 0.3s ease; --default-branding-hidden: 1; --wcag: 1; --separator-border-top: none; /* ========== CONTENT WRAP ========== */ --content-wrap-padding-top: 90px; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 4px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(7, 37, 67, 1); --container-padding-mobile: 80px 20px 20px 20px; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(7, 37, 67, 1); --doc-checkbox-icon-hover: rgba(7, 37, 67, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(74, 133, 31, 1); --icon-error-color: #d83535; --icon-custom-color: rgba(74, 133, 31, 1); --icon-color-hover: rgba(74, 133, 31, 1); --icon-background-color: rgba(245, 245, 245, 1); --icon-size: 32px; --icon-thickness: 0.2px; --icon-rx: 14px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: hsla(118, 36%, 60%, 50%); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(7, 37, 67, 1); --otp-loading-color: rgba(74, 133, 31, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 0; --pdf-container-border-radius: 0; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #072543; --pdf-scroll-radius: 0px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 1px solid #cecbd6; --download-btn-border-radius: 4px; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(74, 133, 31, 1); --button-padding: 12px 32px; --button-border-radius: 4px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(74, 133, 31, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(74, 133, 31, 1); --button-border-hover: 1px solid rgba(74, 133, 31, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(7, 37, 67, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 500; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(74, 133, 31, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 12px 32px; --button-secondary-border-radius: 4px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid rgba(206, 203, 214, 1); --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: rgba(42, 0, 98, 1); --button-secondary-color-hover: rgba(42, 0, 98, 1); --button-secondary-bg-color-hover: transparent; --button-secondary-border-hover: 1px solid rgba(206, 203, 214, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(42, 0, 98, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: rgba(42, 0, 98, 1); --button-secondary-spinner-bg-color: #ffffff; --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 14px 40px; --button-link-border-radius: 0px; --button-link-width: auto; --button-link-height: 48px; --button-link-height-mobile: 48px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(12, 32, 116, 1); --button-link-color-hover: rgba(12, 32, 116, 0.8); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(28, 105, 212, 0.5); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 500; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(12, 32, 116, 1); --button-link-spinner-bg-color: #ffffff; --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 12px 32px; --button-disabled-border-radius: 4px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(7, 37, 67, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(7, 37, 67, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(12, 32, 116, 1); --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 24px; --header-line-height-mobile: 36px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; --header-font-weight: 600; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 8px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: rgba(102, 109, 120, 1); --select-input-color-selected: #09264e; --select-input-bg-color-selected: #76be74; --select-input-bg-color-focus: #d1e0d1; --select-input-current-bg: #09264e; --select-input-current-color: #ffffff; --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(74, 133, 31, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(242, 242, 242, 1); --symbol-current: rgba(74, 133, 31, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(7, 37, 67, 1); --text-input-color-focus: rgba(7, 37, 67, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(7, 37, 67, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 16px; --text-input-font-size-mobile: 16px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(74, 133, 31, 1); --xs2a-link-color-hover: rgba(118, 190, 116, 0.8); --xs2a-checkbox-color: rgba(7, 37, 67, 1); --xs2a-checkbox-color-active: rgba(74, 133, 31, 1); --xs2a-back-btn-border-color: rgba(74, 133, 31, 1); --xs2a-back-btn-color: rgba(255, 255, 255, 1); --xs2a-back-btn-color-hover: rgba(255, 255, 255, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(7, 37, 67, 1); --xs2a-input-color-focus: rgba(7, 37, 67, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(7, 37, 67, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 16px; --xs2a-input-font-size-mobile: 16px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(74, 133, 31, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 4px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(74, 133, 31, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(74, 133, 31, 1); --xs2a-button-border-hover: 1px solid rgba(74, 133, 31, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(7, 37, 67, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 500; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(7, 37, 67, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(7, 37, 67, 1); --kontomatik-primary-color: rgb(236, 0, 0); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(197, 15, 15); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(74, 133, 31, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(7, 37, 67, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(74, 133, 31, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(74, 133, 31, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(7, 37, 67, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(74, 133, 31, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(74, 133, 31, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 4px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(74, 133, 31, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(74, 133, 31, 1); --videoid-cta-btn-border-hover: 1px solid rgba(74, 133, 31, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(7, 37, 67, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 500; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(255, 255, 255, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(152, 152, 155, 1); } [data-theme='enpalTheme'] { /* ========== GLOBALS ========== */ --name: Enpal; --font-family: 'Poppins', sans-serif; --font-family-headline: 'Poppins', sans-serif; --font-family-bold: 'Poppins', sans-serif; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(7, 37, 67, 1); --link-color-hover: rgba(7, 37, 67, 0.8); --checkbox-color: rgba(7, 37, 67, 1); --checkbox-color-active: rgba(118, 190, 116, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(216, 53, 53, 1); --input-required-text-color: rgba(216, 53, 53, 1); --input-required-text-font-size: 16px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(118, 36%, 60%, 50%); --focus-transition: box-shadow 0.3s ease; --default-branding-hidden: 1; --wcag: 1; --separator-border-top: none; /* ========== CONTENT WRAP ========== */ --content-wrap-padding-top: 90px; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 14px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(7, 37, 67, 1); --container-padding-mobile: 80px 20px 20px 20px; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(7, 37, 67, 1); --doc-checkbox-icon-hover: rgba(7, 37, 67, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(118, 190, 116, 1); --icon-error-color: #d83535; --icon-custom-color: rgba(118, 190, 116, 1); --icon-color-hover: rgba(255, 210, 51, 1); --icon-background-color: rgba(248, 248, 248, 1); --icon-size: 32px; --icon-thickness: 0.2px; --icon-rx: 14px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: hsla(118, 36%, 60%, 50%); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(7, 37, 67, 1); --otp-loading-color: rgba(118, 190, 116, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 0; --pdf-container-border-radius: 0; --pdf-background-color: rgba(248, 248, 248, 1); --pdf-color: rgba(7, 37, 67, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #072543; --pdf-scroll-radius: 0px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 1px solid #cecbd6; --download-btn-border-radius: 14px; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: rgba(255, 210, 51, 1); --button-padding: 10px 24px; --button-border-radius: 14px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 1px solid rgba(255, 210, 51, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(7, 37, 67, 1); --button-color-hover: rgba(7, 37, 67, 1); --button-bg-color-hover: rgba(255, 219, 90, 1); --button-border-hover: 1px solid rgba(255, 219, 90, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(7, 37, 67, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 500; --button-spinner-primary: rgba(7, 37, 67, 1); --button-spinner-bg-color: rgba(255, 210, 51, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 24px; --button-secondary-border-radius: 14px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid rgba(7, 37, 67, 1); --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: rgba(7, 37, 67, 1); --button-secondary-color-hover: rgba(7, 37, 67, 1); --button-secondary-bg-color-hover: rgba(255, 210, 51, 1); --button-secondary-border-hover: 1px solid rgba(255, 210, 51, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(7, 37, 67, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: rgba(255, 176, 0, 1); --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 14px 40px; --button-link-border-radius: 0px; --button-link-width: auto; --button-link-height: 50px; --button-link-height-mobile: 50px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(9, 38, 78, 1); --button-link-color-hover: rgba(9, 38, 78, 0.8); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(28, 105, 212, 0.5); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 500; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(255, 176, 0, 1); --button-link-spinner-bg-color: #ffffff; --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 24px; --button-disabled-border-radius: 14px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(7, 37, 67, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(7, 37, 67, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(7, 37, 67, 1); --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 8px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: rgba(102, 109, 120, 1); --select-input-color-selected: #09264e; --select-input-bg-color-selected: #76be74; --select-input-bg-color-focus: #d1e0d1; --select-input-current-bg: #09264e; --select-input-current-color: #ffffff; --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(118, 190, 116, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(242, 242, 242, 1); --symbol-current: rgba(118, 190, 116, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(7, 37, 67, 1); --text-input-color-focus: rgba(7, 37, 67, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(7, 37, 67, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 16px; --text-input-font-size-mobile: 16px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(118, 190, 116, 1); --xs2a-link-color-hover: rgba(118, 190, 116, 0.8); --xs2a-checkbox-color: rgba(7, 37, 67, 1); --xs2a-checkbox-color-active: rgba(255, 210, 51, 1); --xs2a-back-btn-border-color: rgba(255, 210, 51, 1); --xs2a-back-btn-color: rgba(7, 37, 67, 1); --xs2a-back-btn-color-hover: rgba(7, 37, 67, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(7, 37, 67, 1); --xs2a-input-color-focus: rgba(7, 37, 67, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(7, 37, 67, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 16px; --xs2a-input-font-size-mobile: 16px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(255, 210, 51, 1); --xs2a-button-padding: 10px 24px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 14px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid rgba(255, 210, 51, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(7, 37, 67, 1); --xs2a-button-color-hover: rgba(7, 37, 67, 1); --xs2a-button-bg-color-hover: rgba(255, 219, 90, 1); --xs2a-button-border-hover: 1px solid rgba(255, 219, 90, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(7, 37, 67, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 500; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(7, 37, 67, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(7, 37, 67, 1); --kontomatik-primary-color: rgb(236, 0, 0); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(197, 15, 15); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(255, 210, 51, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(7, 37, 67, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(118, 190, 116, 1); --spinner-bg-color: #f3f3f3; --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(255, 210, 51, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(7, 37, 67, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(255, 210, 51, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(255, 210, 51, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 14px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(255, 210, 51, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(7, 37, 67, 1); --videoid-cta-btn-color-hover: rgba(7, 37, 67, 1); --videoid-cta-btn-bg-color-hover: rgba(255, 219, 90, 1); --videoid-cta-btn-border-hover: 1px solid rgba(255, 219, 90, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(7, 37, 67, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 500; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(7, 37, 67, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(152, 152, 155, 1); /* ========== BACK BUTTON ========== */ --back-button-color: rgba(52, 53, 58, 1); } [data-theme='googleTheme'] { /* ========== GLOBALS ========== */ --name: Google; --font-family: 'segoeui', sans-serif; --font-family-headline: 'segoeui', sans-serif; --font-family-bold: 'segoeuib', sans-serif; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(41, 98, 255, 1); --link-color-hover: rgba(41, 98, 255, 0.8); --checkbox-color: rgba(0, 0, 0, 1); --checkbox-color-active: rgba(41, 98, 255, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: #2962ff; --input-required-text-color: #2962ff; --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(224, 100%, 58%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: #2b253a; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(41, 98, 255, 1); --doc-checkbox-icon-hover: rgba(41, 98, 255, 0.8); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(41, 98, 255, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(41, 98, 255, 0.8); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(183, 189, 198, 1); --otp-border-radius: 4px; --otp-font-size: 22px; --otp-focus-color: rgba(41, 98, 255, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: #25292c; --otp-loading-color: rgba(41, 98, 255, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(235, 235, 235, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(41, 98, 255, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #2b393a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #2b393a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #2b393a; --pdf-range-thumb-color: #2b393a; --pdf-range-thumb-hover-color: #2b393acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #2b393a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #2b393a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(41, 98, 255, 1); --button-padding: 10px 34px; --button-border-radius: 100px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(41, 98, 255, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(41, 98, 255, 0.8); --button-border-hover: 1px solid rgba(41, 98, 255, 0.8); --button-bg-color-disabled: rgba(235, 235, 235, 1); --button-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-color-disabled: rgba(0, 0, 0, 1); --button-font-size: 14px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(41, 98, 255, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 100px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(41, 98, 255, 0.8); --button-secondary-border-hover: 1px solid rgba(41, 98, 255, 0.8); --button-secondary-bg-color-disabled: rgba(235, 235, 235, 1); --button-secondary-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-secondary-color-disabled: rgba(0, 0, 0, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(41, 98, 255, 1); --button-secondary-spinner-bg-color: rgba(235, 235, 235, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 100px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(235, 235, 235, 1); --button-disabled-border: 1px solid rgba(235, 235, 235, 1); --button-disabled-color: rgba(0, 0, 0, 1); --button-disabled-bg-color-hover: rgba(235, 235, 235, 1); --button-disabled-border-hover: 1px solid rgba(235, 235, 235, 1); --button-disabled-color-hover: rgba(0, 0, 0, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #34353a; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(235, 235, 235, 1); --select-input-bg-color-selected: rgba(235, 235, 235, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(41, 98, 255, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 2px solid rgba(183, 189, 198, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: #2b253a; --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(235, 235, 235, 1); --text-input-color-disabled: rgba(235, 235, 235, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: rgba(217, 17, 17, 1); --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'segoeui', sans-serif; --xs2a-font-family-headline: 'segoeui', sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(41, 98, 255, 1); --xs2a-link-color-hover: rgba(41, 98, 255, 0.8); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(41, 98, 255, 1); --xs2a-back-btn-border-color: rgba(41, 98, 255, 1); --xs2a-back-btn-color: #2b253a; --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(235, 235, 235, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 2px solid rgba(183, 189, 198, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: #2b253a; --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-border-disabled: rgba(235, 235, 235, 1); --xs2a-input-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(41, 98, 255, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 100px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(41, 98, 255, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(41, 98, 255, 0.8); --xs2a-button-border-hover: 1px solid rgba(41, 98, 255, 0.8); --xs2a-button-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-button-border-disabled: 1px solid rgba(235, 235, 235, 1); --xs2a-button-color-disabled: rgba(0, 0, 0, 1); --xs2a-button-font-size: 14px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(230, 221, 249, 1); --kontomatik-header-color: rgba(0, 0, 0, 1); --kontomatik-primary-color: rgba(41, 98, 255, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(41, 98, 255, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 8px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(183, 189, 198, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(41, 98, 255, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(0, 0, 0, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(235, 235, 235, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(41, 98, 255, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(98, 100, 167, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #34353a; --error-subtitle-color: #2b253a; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(41, 98, 255, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(41, 98, 255, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 100px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(41, 98, 255, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(41, 98, 255, 0.8); --videoid-cta-btn-border-hover: 1px solid rgba(41, 98, 255, 0.8); --videoid-cta-btn-bg-color-disabled: rgba(235, 235, 235, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(235, 235, 235, 1); --videoid-cta-btn-color-disabled: rgba(0, 0, 0, 1); --videoid-cta-btn-font-size: 14px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(41, 98, 255, 1); } [data-theme='ikanoTheme'] { /* ========== GLOBALS ========== */ --name: Ikano; --font-family: 'IkanoSans', sans-serif; --font-family-headline: 'IkanoSans', sans-serif; --font-family-bold: 'IkanoSansBold', sans-serif; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(236, 0, 0, 1); --link-color-hover: rgba(197, 15, 15, 1); --link-underline-color: rgba(236, 0, 0, 1); --link-underline-offset: 4px; --checkbox-color: rgba(52, 53, 58, 1); --checkbox-color-active: rgba(236, 0, 0, 1); --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 14px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: 2px solid #275ec5; --focus-box-shadow: 0; --focus-transition: box-shadow 0.3s ease; --wcag: 1; --separator-border-top: 1px solid rgba(183, 189, 198, 1); /* ========== CONTENT WRAP ========== */ --content-wrap-background-image: /src/assets/ikano_background.jpg; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 2px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: #000000; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(236, 0, 0, 1); --icon-error-color: #d83535; --icon-custom-color: #2ba107; --icon-color-hover: rgba(236, 0, 0, 1); --icon-background-color: #f7f9fc; --icon-size: 32px; --icon-thickness: 0.2px; --icon-rx: 60px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(236, 0, 0, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(236, 0, 0, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-container-border-radius: 0; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #ec0000; --pdf-scroll-radius: 0px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 2px solid #cecbd6; --pdf-zoom-border-radius: 2px; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 2px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 2px solid #cecbd6; --download-btn-border-radius: 2px; --download-btn-border-radius-mobile: 2px; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 2px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: rgba(236, 0, 0, 1); --button-padding: 10px 34px; --button-border-radius: 2px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 1px solid rgba(236, 0, 0, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(197, 15, 15, 1); --button-border-hover: 1px solid rgba(197, 15, 15, 1); --button-bg-color-disabled: rgba(172, 176, 181, 1); --button-border-disabled: 1px solid rgba(172, 176, 181, 1); --button-color-disabled: rgba(246, 246, 246, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 300; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(236, 0, 0, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 2px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(197, 15, 15, 1); --button-secondary-border-hover: 1px solid rgba(197, 15, 15, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(52, 53, 58, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 300; --button-secondary-spinner-primary: rgba(236, 0, 0, 1); --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 10px 34px; --button-link-border-radius: 2px; --button-link-width: auto; --button-link-height: 50px; --button-link-height-mobile: 50px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(236, 0, 0, 1); --button-link-color-hover: rgba(236, 0, 0, 0.8); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(52, 53, 58, 1); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 500; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(236, 0, 0, 1); --button-link-spinner-bg-color: rgba(206, 212, 220, 1); --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 2px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 300; --button-disabled-bg-color: rgba(172, 176, 181, 1); --button-disabled-border: 1px solid rgba(172, 176, 181, 1); --button-disabled-color: rgba(246, 246, 246, 1); --button-disabled-bg-color-hover: rgba(172, 176, 181, 1); --button-disabled-border-hover: 1px solid rgba(172, 176, 181, 1); --button-disabled-color-hover: rgba(246, 246, 246, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(52, 53, 58, 1); --header-font-size: 1.625rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 2px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: #ec0000; --select-input-color-selected: #ffffff; --select-input-bg-color-selected: #ec0000; --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: #ec0000; --select-input-current-color: #ffffff; --select-input-icon-hover-color: #ec0000; --select-input-indicator-color-focus: #ec0000; --select-input-indicator-color-hover: #ec0000; --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(236, 0, 0, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); --symbol-current: #ffffff; /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-size-mobile: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(52, 53, 58, 1); --xs2a-link-color-hover: rgba(197, 15, 15, 1); --xs2a-link-underline-color: rgba(236, 0, 0, 1); --xs2a-link-underline-offset: 4px; --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(236, 0, 0, 1); --xs2a-back-btn-border-color: rgba(236, 0, 0, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-size-mobile: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(236, 0, 0, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 2px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid rgba(236, 0, 0, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(197, 15, 15, 1); --xs2a-button-border-hover: 1px solid rgba(197, 15, 15, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(52, 53, 58, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 300; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgb(236, 0, 0); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(197, 15, 15); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(236, 0, 0, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(236, 0, 0, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(236, 0, 0, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(236, 0, 0, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(236, 0, 0, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(236, 0, 0, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(197, 15, 15, 1); --videoid-cta-btn-border-hover: 1px solid rgba(197, 15, 15, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(52, 53, 58, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 300; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(52, 53, 58, 1); --videoid-phone-btn-link-underline-color: rgba(236, 0, 0, 1); --videoid-phone-btn-link-underline-offset: 4px; /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: #25292c; } [data-theme='ikanoFleksTheme'] { /* ========== GLOBALS ========== */ --name: Ikano Fleks; --font-family: 'IkanoSans', sans-serif; --font-family-headline: 'IkanoSans', sans-serif; --font-family-bold: 'IkanoSansBold', sans-serif; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(236, 0, 0, 1); --link-color-hover: rgba(197, 15, 15, 1); --link-underline-color: rgba(236, 0, 0, 1); --link-underline-offset: 4px; --checkbox-color: rgba(52, 53, 58, 1); --checkbox-color-active: rgba(236, 0, 0, 1); --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 14px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: 2px solid #275ec5; --focus-box-shadow: 0; --focus-transition: box-shadow 0.3s ease; --wcag: 1; --separator-border-top: 1px solid rgba(183, 189, 198, 1); /* ========== CONTENT WRAP ========== */ --content-wrap-background-image: /src/assets/ikano_background.jpg; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 2px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: #000000; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(236, 0, 0, 1); --icon-error-color: #d83535; --icon-custom-color: #2ba107; --icon-color-hover: rgba(236, 0, 0, 1); --icon-background-color: #f7f9fc; --icon-size: 32px; --icon-thickness: 0.2px; --icon-rx: 60px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(236, 0, 0, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(236, 0, 0, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-container-border-radius: 0; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #ec0000; --pdf-scroll-radius: 0px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 2px solid #cecbd6; --pdf-zoom-border-radius: 2px; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 2px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 2px solid #cecbd6; --download-btn-border-radius: 2px; --download-btn-border-radius-mobile: 2px; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 2px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: rgba(236, 0, 0, 1); --button-padding: 10px 34px; --button-border-radius: 2px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 1px solid rgba(236, 0, 0, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(197, 15, 15, 1); --button-border-hover: 1px solid rgba(197, 15, 15, 1); --button-bg-color-disabled: rgba(172, 176, 181, 1); --button-border-disabled: 1px solid rgba(172, 176, 181, 1); --button-color-disabled: rgba(246, 246, 246, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 300; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(236, 0, 0, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 2px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(197, 15, 15, 1); --button-secondary-border-hover: 1px solid rgba(197, 15, 15, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(52, 53, 58, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 300; --button-secondary-spinner-primary: rgba(236, 0, 0, 1); --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 10px 34px; --button-link-border-radius: 2px; --button-link-width: auto; --button-link-height: 50px; --button-link-height-mobile: 50px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(236, 0, 0, 1); --button-link-color-hover: rgba(236, 0, 0, 0.8); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(52, 53, 58, 1); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 500; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(236, 0, 0, 1); --button-link-spinner-bg-color: rgba(206, 212, 220, 1); --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 2px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 300; --button-disabled-bg-color: rgba(172, 176, 181, 1); --button-disabled-border: 1px solid rgba(172, 176, 181, 1); --button-disabled-color: rgba(246, 246, 246, 1); --button-disabled-bg-color-hover: rgba(172, 176, 181, 1); --button-disabled-border-hover: 1px solid rgba(172, 176, 181, 1); --button-disabled-color-hover: rgba(246, 246, 246, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(52, 53, 58, 1); --header-font-size: 1.625rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 2px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: #ec0000; --select-input-color-selected: #ffffff; --select-input-bg-color-selected: #ec0000; --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: #ec0000; --select-input-current-color: #ffffff; --select-input-icon-hover-color: #ec0000; --select-input-indicator-color-focus: #ec0000; --select-input-indicator-color-hover: #ec0000; --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(236, 0, 0, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); --symbol-current: #ffffff; /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-size-mobile: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(52, 53, 58, 1); --xs2a-link-color-hover: rgba(197, 15, 15, 1); --xs2a-link-underline-color: rgba(236, 0, 0, 1); --xs2a-link-underline-offset: 4px; --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(236, 0, 0, 1); --xs2a-back-btn-border-color: rgba(236, 0, 0, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-size-mobile: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(236, 0, 0, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 2px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid rgba(236, 0, 0, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(197, 15, 15, 1); --xs2a-button-border-hover: 1px solid rgba(197, 15, 15, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(52, 53, 58, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 300; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgb(236, 0, 0); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(197, 15, 15); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(236, 0, 0, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(236, 0, 0, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(236, 0, 0, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(236, 0, 0, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(236, 0, 0, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(236, 0, 0, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(197, 15, 15, 1); --videoid-cta-btn-border-hover: 1px solid rgba(197, 15, 15, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(52, 53, 58, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 300; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(52, 53, 58, 1); --videoid-phone-btn-link-underline-color: rgba(236, 0, 0, 1); --videoid-phone-btn-link-underline-offset: 4px; /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: #25292c; } [data-theme='mastercardTheme'] { /* ========== GLOBALS ========== */ --name: Mastercard; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(207, 69, 0, 1); --link-color-hover: rgba(207, 69, 0, 0.8); --checkbox-color: rgba(0, 0, 0, 1); --checkbox-color-active: rgba(207, 69, 0, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: #cf4500; --input-required-text-color: #cf4500; --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(20, 100%, 41%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: #2b253a; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(207, 69, 0, 1); --doc-checkbox-icon-hover: rgba(207, 69, 0, 0.8); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: #cf4500; --icon-error-color: #d83535; --icon-color-hover: rgba(207, 69, 0, 0.8); --icon-background-color: rgba(248, 249, 252, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(183, 189, 198, 1); --otp-border-radius: 4px; --otp-font-size: 22px; --otp-focus-color: rgba(207, 69, 0, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: #25292c; --otp-loading-color: rgba(207, 69, 0, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(235, 235, 235, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(207, 69, 0, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #2b393a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #2b393a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #2b393a; --pdf-range-thumb-color: #2b393a; --pdf-range-thumb-hover-color: #2b393acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #2b393a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #2b393a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(207, 69, 0, 1); --button-padding: 10px 34px; --button-border-radius: 20px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(207, 69, 0, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(207, 69, 0, 0.8); --button-border-hover: 1px solid rgba(207, 69, 0, 0.8); --button-bg-color-disabled: rgba(235, 235, 235, 1); --button-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-color-disabled: rgba(0, 0, 0, 1); --button-font-size: 14px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(207, 69, 0, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 20px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(207, 69, 0, 0.8); --button-secondary-border-hover: 1px solid rgba(207, 69, 0, 0.8); --button-secondary-bg-color-disabled: rgba(235, 235, 235, 1); --button-secondary-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-secondary-color-disabled: rgba(0, 0, 0, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(207, 69, 0, 1); --button-secondary-spinner-bg-color: rgba(235, 235, 235, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 20px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(235, 235, 235, 1); --button-disabled-border: 1px solid rgba(235, 235, 235, 1); --button-disabled-color: rgba(0, 0, 0, 1); --button-disabled-bg-color-hover: rgba(235, 235, 235, 1); --button-disabled-border-hover: 1px solid rgba(235, 235, 235, 1); --button-disabled-color-hover: rgba(0, 0, 0, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #34353a; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(235, 235, 235, 1); --select-input-bg-color-selected: rgba(235, 235, 235, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(207, 69, 0, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 2px solid rgba(183, 189, 198, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: #2b253a; --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(235, 235, 235, 1); --text-input-color-disabled: rgba(235, 235, 235, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: rgba(217, 17, 17, 1); --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(207, 69, 0, 1); --xs2a-link-color-hover: rgba(207, 69, 0, 0.8); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(207, 69, 0, 1); --xs2a-back-btn-border-color: rgba(207, 69, 0, 1); --xs2a-back-btn-color: #2b253a; --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(235, 235, 235, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 2px solid rgba(183, 189, 198, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: #2b253a; --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-border-disabled: rgba(235, 235, 235, 1); --xs2a-input-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(207, 69, 0, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 20px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(207, 69, 0, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(207, 69, 0, 0.8); --xs2a-button-border-hover: 1px solid rgba(207, 69, 0, 0.8); --xs2a-button-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-button-border-disabled: 1px solid rgba(235, 235, 235, 1); --xs2a-button-color-disabled: rgba(0, 0, 0, 1); --xs2a-button-font-size: 14px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(230, 221, 249, 1); --kontomatik-header-color: rgba(0, 0, 0, 1); --kontomatik-primary-color: rgba(207, 69, 0, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(207, 69, 0, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 8px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(183, 189, 198, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(207, 69, 0, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(0, 0, 0, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(235, 235, 235, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(207, 69, 0, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(207, 69, 0, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #34353a; --error-subtitle-color: #2b253a; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(207, 69, 0, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(207, 69, 0, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 100px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(207, 69, 0, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(207, 69, 0, 0.8); --videoid-cta-btn-border-hover: 1px solid rgba(207, 69, 0, 0.8); --videoid-cta-btn-bg-color-disabled: rgba(235, 235, 235, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(235, 235, 235, 1); --videoid-cta-btn-color-disabled: rgba(0, 0, 0, 1); --videoid-cta-btn-font-size: 14px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(207, 69, 0, 1); } [data-theme='miniTheme'] { /* ========== GLOBALS ========== */ --name: Mini; --font-family: 'MINI Sans Serif', sans-serif; --font-family-headline: 'MINI Sans Serif', sans-serif; --font-family-bold: 'MINI Sans Serif', sans-serif; --bg-color: rgba(240, 240, 240, 1); --link-color: rgba(0, 101, 131, 1); --link-color-hover: rgba(0, 125, 163, 1); --checkbox-color: rgba(0, 0, 0, 1); --checkbox-color-active: rgba(0, 0, 0, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 16px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(194, 100%, 32%, 50%); --focus-transition: box-shadow 0.3s ease; --wcag: 1; --separator-border-top: none; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 40px 60px 60px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 230, 230, 1); --container-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; --container-margin: 0 auto; --container-color: rgba(0, 0, 0, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(0, 0, 0, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(0, 101, 131, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(255, 255, 255, 1); --icon-background-color: rgba(247, 249, 252, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 1px solid rgba(220, 220, 220, 1); --otp-border-radius: 0px; --otp-font-size: 28px; --otp-focus-color: rgba(0, 101, 131, 1); --otp-bg-color: rgba(250, 250, 250, 1); --otp-focus-bg-color: #ffffff; --otp-font-color: rgba(38, 38, 38, 1); --otp-loading-color: rgba(0, 101, 131, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 1px solid rgba(183, 189, 198, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: rgba(183, 189, 198, 1); --pdf-scroll-handle-color: rgba(42, 99, 128, 1); --pdf-scroll-radius: 10px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #000000; --pdf-zoom-border: 2px solid rgba(206, 203, 214, 1); --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #808080; --pdf-zoom-border-hover: 2px solid rgba(206, 203, 214, 1); --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #808080; --pdf-range-thumb-color: #808080; --pdf-range-thumb-hover-color: #808080cc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #000000; --download-btn-border: 2px solid rgba(206, 203, 214, 1); --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #808080; --download-btn-border-hover: 2px solid rgba(206, 203, 214, 1); --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 2px solid #f6f6f6; --download-btn-height: 40px; /* ========== BUTTON ========== */ --button-bg-color: rgba(0, 101, 131, 1); --button-padding: 14px 40px; --button-border-radius: 56px; --button-width: auto; --button-height: 40px; --button-height-mobile: 40px; --button-border: 1px solid rgba(28, 105, 212, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(1, 125, 163, 1); --button-border-hover: 1px solid rgba(1, 125, 163, 1); --button-bg-color-disabled: rgba(215, 215, 215, 1); --button-border-disabled: 1px solid rgba(215, 215, 215, 0.5); --button-color-disabled: rgba(0, 0, 0, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 400; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(0, 101, 131, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 14px 40px; --button-secondary-border-radius: 56px; --button-secondary-width: auto; --button-secondary-height: 40px; --button-secondary-height-mobile: 40px; --button-secondary-border: 2px solid rgba(206, 203, 214, 1); --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(1, 125, 163, 1); --button-secondary-border-hover: 2px solid rgba(1, 125, 163, 1); --button-secondary-bg-color-disabled: rgba(215, 215, 215, 1); --button-secondary-border-disabled: 2px solid rgba(215, 215, 215, 0.5); --button-secondary-color-disabled: rgba(0, 0, 0, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 400; --button-secondary-spinner-primary: rgba(0, 101, 131, 1); --button-secondary-spinner-bg-color: rgba(215, 215, 215, 1); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 14px 40px; --button-link-border-radius: 56px; --button-link-width: auto; --button-link-height: 40px; --button-link-height-mobile: 40px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(0, 101, 131, 1); --button-link-color-hover: rgba(1, 125, 163, 1); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: transparent; --button-link-color-disabled: rgba(215, 215, 215, 1); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 400; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(0, 101, 131, 1); --button-link-spinner-bg-color: rgba(255, 255, 255, 1); --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-bg-color: rgba(215, 215, 215, 1); --button-disabled-padding: 14px 40px; --button-disabled-border-radius: 56px; --button-disabled-width: auto; --button-disabled-height: 40px; --button-disabled-height-mobile: 40px; --button-disabled-border: 1px solid rgba(215, 215, 215, 0.5); --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-color: rgba(0, 0, 0, 1); --button-disabled-color-hover: rgba(0, 0, 0, 1); --button-disabled-bg-color-hover: rgba(215, 215, 215, 1); --button-disabled-border-hover: 1px solid rgba(215, 215, 215, 0.5); --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 400; /* ========== HEADER ========== */ --header-color: rgba(0, 0, 0, 1); --header-font-size: 26px; --header-line-height: 36px; --header-font-size-mobile: 26px; --header-line-height-mobile: 36px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: rgba(0, 101, 131, 1); --select-input-color-selected: rgba(42, 98, 129, 1); --select-input-bg-color-selected: rgba(209, 221, 226, 1); --select-input-bg-color-focus: rgba(209, 221, 226, 1); --select-input-current-bg: rgba(0, 101, 131, 1); --select-input-current-color: rgba(255, 255, 255, 1); --select-input-icon-hover-color: #7298ab; --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(0, 101, 131, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(242, 242, 242, 1); --symbol-current: rgba(255, 255, 255, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 0px; --text-input-border: 1px solid rgba(220, 220, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: gray; --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 1px solid rgba(0, 101, 131, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: gray; --text-input-color-disabled: white; --text-input-font-size: 16px; --text-input-font-size-mobile: 16px; --text-input-font-weight: 400; --text-input-outline: 2px solid rgba(0, 101, 131, 1); --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'MINI Sans Serif', sans-serif; --xs2a-font-family-headline: 'MINI Sans Serif', sans-serif; --xs2a-bg-color: rgba(240, 240, 240, 1); --xs2a-link-color: rgba(0, 101, 131, 1); --xs2a-link-color-hover: rgba(0, 125, 163, 1); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(0, 0, 0, 1); --xs2a-back-btn-border-color: rgba(220, 220, 220, 1); --xs2a-back-btn-color: gray; --xs2a-back-btn-color-hover: rgba(38, 38, 38, 1); --xs2a-back-btn-disabled: silver; --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 0px; --xs2a-input-border: 1px solid rgba(220, 220, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: gray; --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 1px solid rgba(0, 101, 131, 1); --xs2a-input-bg-color-disabled: silver; --xs2a-input-border-disabled: gray; --xs2a-input-color-disabled: white; --xs2a-input-font-size: 16px; --xs2a-input-font-size-mobile: 16px; --xs2a-input-font-weight: 400; --xs2a-input-outline: 2px solid rgba(0, 101, 131, 1); --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(0, 101, 131, 1); --xs2a-button-padding: 14px 40px; --xs2a-button-border-radius: 56px; --xs2a-button-width: auto; --xs2a-button-height: 40px; --xs2a-button-height-mobile: 40px; --xs2a-button-border: 1px solid rgba(28, 105, 212, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(1, 125, 163, 1); --xs2a-button-border-hover: 1px solid rgba(1, 125, 163, 1); --xs2a-button-bg-color-disabled: rgba(215, 215, 215, 0.5); --xs2a-button-border-disabled: 1px solid rgba(215, 215, 215, 0.5); --xs2a-button-color-disabled: rgba(0, 0, 0, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 400; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #ffffff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(28, 105, 212, 1); --kontomatik-header-color: rgba(0, 0, 0, 1); --kontomatik-primary-color: rgb(0, 101, 131); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(1, 125, 163); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-width: 100%; --kontomatik-padding: 40px 60px 60px; --kontomatik-border-radius: 8px; --kontomatik-button-border-radius: 56px; --kontomatik-border: 1px solid rgba(230, 230, 230, 1); --kontomatik-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 24px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 1px solid rgba(220, 220, 220, 1); --progress-border-radius: 4px; --progress-background: white; --progress-bar-fill: rgba(0, 101, 131, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(38, 38, 38, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(67, 21, 128, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(1, 125, 163, 1); --spinner-bg-color: rgba(240, 240, 240, 1); --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(1, 125, 163, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(0, 0, 0, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(1, 125, 163, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: transparent; --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 56px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 2px solid rgba(206, 203, 214, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: #34353a; --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(1, 125, 163, 1); --videoid-cta-btn-border-hover: 2px solid rgba(1, 125, 163, 1); --videoid-cta-btn-bg-color-disabled: rgba(215, 215, 215, 1); --videoid-cta-btn-border-disabled: 2px solid rgba(215, 215, 215, 0.5); --videoid-cta-btn-color-disabled: rgba(0, 0, 0, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 400; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: #2a6380; /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(155, 155, 155, 1); } [data-theme='myPosTheme'] { /* ========== GLOBALS ========== */ --name: myPos; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: #ffffff; --link-color: rgba(0, 113, 243, 1); --link-color-hover: rgba(66, 152, 251, 1); --checkbox-color: rgba(52, 53, 58, 1); --checkbox-color-active: rgba(0, 113, 243, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(0, 113, 243, 1); --input-required-text-color: rgba(0, 113, 243, 1); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(212, 96%, 62%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: rgba(52, 53, 58, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(52, 53, 58, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(0, 113, 243, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(0, 113, 243, 1); --icon-background-color: rgba(247, 249, 252, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(0, 113, 243, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(0, 113, 243, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(206, 212, 220, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(0, 113, 243, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #34353a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(0, 113, 243, 1); --button-padding: 10px 34px; --button-border-radius: 100px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(0, 113, 243, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(66, 152, 251, 1); --button-border-hover: 1px solid rgba(66, 152, 251, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(52, 53, 58, 1); --button-font-size: 14px; --button-font-weight: 500; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(0, 113, 243, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 100px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(66, 152, 251, 1); --button-secondary-border-hover: 1px solid rgba(66, 152, 251, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(52, 53, 58, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: rgba(0, 113, 243, 1); --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 100px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(52, 53, 58, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(52, 53, 58, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(52, 53, 58, 1); --header-font-size: 1.5rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 2px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(206, 212, 220, 1); --select-input-bg-color-selected: rgba(206, 212, 220, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(0, 113, 243, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(0, 113, 243, 1); --xs2a-link-color-hover: rgba(66, 152, 251, 1); --xs2a-checkbox-color: rgba(52, 53, 58, 1); --xs2a-checkbox-color-active: rgba(0, 113, 243, 1); --xs2a-back-btn-border-color: rgba(0, 113, 243, 1); --xs2a-back-btn-color: rgba(52, 53, 58, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(0, 113, 243, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 2px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(0, 113, 243, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(66, 152, 251, 1); --xs2a-button-border-hover: 1px solid rgba(66, 152, 251, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(52, 53, 58, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(52, 53, 58, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(52, 53, 58, 1); --kontomatik-primary-color: rgba(0, 113, 243, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(66, 152, 251, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(0, 113, 243, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(52, 53, 58, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(0, 113, 243, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(0, 113, 243, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(52, 53, 58, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(0, 113, 243, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(0, 113, 243, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(0, 113, 243, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(66, 152, 251, 1); --videoid-cta-btn-border-hover: 1px solid rgba(66, 152, 251, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(52, 53, 58, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(0, 113, 243, 1); } [data-theme='nordaxTheme'] { /* ========== GLOBALS ========== */ --name: Nordax; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: #8ecac7; --link-color: rgba(9, 38, 78, 1); --link-color-hover: rgba(9, 38, 78, 0.8); --checkbox-color: #4f555f; --checkbox-color-active: rgba(9, 38, 78, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: #09264e; --input-required-text-color: #09264e; --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(215, 41%, 17%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #f1fffe; --container-width: 560px; --container-padding: 40px; --container-border-radius: 8px; --container-border: none; --container-box-shadow: none; --container-margin: 0 auto; --container-color: #2b253a; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(9, 38, 78, 1); --doc-checkbox-icon-hover: rgba(9, 38, 78, 0.8); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: #09264e; --icon-error-color: #d83535; --icon-color-hover: rgba(9, 38, 78, 0.8); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(183, 189, 198, 1); --otp-border-radius: 4px; --otp-font-size: 22px; --otp-focus-color: rgba(9, 38, 78, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: #25292c; --otp-loading-color: rgba(9, 38, 78, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid #ebebeb; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #09264e; --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-toolbox-box-shadow: none; --pdf-zoom-bg-color: #f1fffe; --pdf-zoom-color: #09264e; --pdf-zoom-border: 2px solid #09264e; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: rgb(29, 55, 90); --pdf-zoom-border-hover: 2px solid rgb(29, 55, 90); --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #2b253a; --pdf-range-thumb-color: #2b253a; --pdf-range-thumb-hover-color: #2b253acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #f1fffe; --download-btn-color: #09264e; --download-btn-border: 1px solid #09264e; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: rgb(29, 55, 90); --download-btn-border-hover: 1px solid rgb(29, 55, 90); --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: rgba(9, 38, 78, 1); --button-padding: 10px 24px; --button-border-radius: 100px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 2px solid rgba(9, 38, 78, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(9, 38, 78, 0.8); --button-border-hover: 1px solid rgba(9, 38, 78, 0.8); --button-bg-color-disabled: rgba(235, 235, 235, 1); --button-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-color-disabled: rgba(0, 0, 0, 1); --button-font-size: 16px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(9, 38, 78, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 24px; --button-secondary-border-radius: 100px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(9, 38, 78, 0.8); --button-secondary-border-hover: 2px solid rgba(9, 38, 78, 0.8); --button-secondary-bg-color-disabled: rgba(235, 235, 235, 1); --button-secondary-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-secondary-color-disabled: rgba(0, 0, 0, 1); --button-secondary-font-size: 16px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(9, 38, 78, 1); --button-secondary-spinner-bg-color: rgba(235, 235, 235, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 24px; --button-disabled-border-radius: 100px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(235, 235, 235, 1); --button-disabled-border: 2px solid rgba(235, 235, 235, 1); --button-disabled-color: rgba(0, 0, 0, 1); --button-disabled-bg-color-hover: rgba(235, 235, 235, 1); --button-disabled-border-hover: 1px solid rgba(235, 235, 235, 1); --button-disabled-color-hover: rgba(0, 0, 0, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #34353a; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color-focus: #666d78; --select-input-bg-color-selected: rgba(235, 235, 235, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: #09264e; --select-input-current-color: #ffffff; --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: #69e3db; --symbol-secondary: transparent; --symbol-tenary: transparent; /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 2px solid rgba(183, 189, 198, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: #2b253a; --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(235, 235, 235, 1); --text-input-color-disabled: rgba(235, 235, 235, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: rgba(217, 17, 17, 1); --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(9, 38, 78, 1); --xs2a-link-color-hover: rgba(9, 38, 78, 0.8); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(9, 38, 78, 1); --xs2a-back-btn-border-color: rgba(9, 38, 78, 1); --xs2a-back-btn-color: #2b253a; --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(235, 235, 235, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 2px solid rgba(183, 189, 198, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: #2b253a; --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-border-disabled: rgba(235, 235, 235, 1); --xs2a-input-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(9, 38, 78, 1); --xs2a-button-padding: 10px 24px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 100px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid rgba(9, 38, 78, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(9, 38, 78, 0.8); --xs2a-button-border-hover: 1px solid rgba(9, 38, 78, 0.8); --xs2a-button-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-button-border-disabled: 1px solid rgba(235, 235, 235, 1); --xs2a-button-color-disabled: rgba(0, 0, 0, 1); --xs2a-button-font-size: 14px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(230, 221, 249, 1); --kontomatik-header-color: rgba(0, 0, 0, 1); --kontomatik-primary-color: rgba(9, 38, 78, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(9, 38, 78, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 8px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(183, 189, 198, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(9, 38, 78, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(0, 0, 0, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(235, 235, 235, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(9, 38, 78, 1); --spinner-bg-color: #f1fffe; --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(9, 38, 78, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #34353a; --error-subtitle-color: #2b253a; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(9, 38, 78, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(9, 38, 78, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 100px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(9, 38, 78, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(9, 38, 78, 0.8); --videoid-cta-btn-border-hover: 1px solid rgba(9, 38, 78, 0.8); --videoid-cta-btn-bg-color-disabled: rgba(235, 235, 235, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(235, 235, 235, 1); --videoid-cta-btn-color-disabled: rgba(0, 0, 0, 1); --videoid-cta-btn-font-size: 14px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(9, 38, 78, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(0, 0, 0, 1); --signicat-logo-tagline-color: rgba(86, 91, 96, 1); } [data-theme='onventisTheme'] { /* ========== GLOBALS ========== */ --name: Onventis; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(239, 125, 0, 1); --link-color-hover: rgba(239, 125, 0, 0.8); --checkbox-color: rgba(239, 125, 0, 1); --checkbox-color-active: rgba(239, 125, 0, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(216, 53, 53, 1); --input-required-text-color: rgba(216, 53, 53, 1); --input-required-text-font-size: 16px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px rgba(239, 125, 0, 0.2); --focus-transition: box-shadow 0.3s ease; --default-branding-hidden: 1; --wcag: 1; --separator-border-top: none; /* ========== CONTENT WRAP ========== */ --content-wrap-padding-top: 50px; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: #34353a; --container-padding-mobile: 80px 20px 20px 20px; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: #4f555f; --doc-checkbox-icon-hover: #4f555f; --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(239, 125, 0, 1); --icon-error-color: #d83535; --icon-custom-color: rgba(239, 125, 0, 1); --icon-color-hover: rgba(239, 125, 0, 1); --icon-background-color: #f7f9fc; --icon-size: 32px; --icon-thickness: 0.2px; --icon-rx: 60px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(239, 125, 0, 0.2); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(239, 125, 0, 1); --otp-loading-color: rgba(239, 125, 0, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 0; --pdf-container-border-radius: 0; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #072543; --pdf-scroll-radius: 0px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #34353a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: rgba(0, 0, 0, 1); --download-btn-border: 1px solid rgba(206, 203, 214, 1); --download-btn-border-radius: 4px; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: rgba(0, 0, 0, 1); --download-btn-border-hover: 1px solid rgba(206, 203, 214, 1); --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid rgba(206, 203, 214, 1); --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: rgba(239, 125, 0, 1); --button-padding: 10px 24px; --button-border-radius: 4px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 1px solid rgba(239, 125, 0, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(0, 0, 0, 1); --button-color-hover: rgba(0, 0, 0, 0.8); --button-bg-color-hover: rgba(239, 125, 0, 0.8); --button-border-hover: 1px solid rgba(239, 125, 0, 1); --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: rgba(255, 255, 255, 1); --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 500; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(239, 125, 0, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; --button-warning-color: #d83535; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 24px; --button-secondary-border-radius: 4px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid rgba(206, 203, 214, 1); --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: rgba(0, 0, 0, 1); --button-secondary-color-hover: rgba(0, 0, 0, 1); --button-secondary-bg-color-hover: #f1f3f7; --button-secondary-border-hover: 1px solid rgba(206, 203, 214, 1); --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(255, 255, 255, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: rgba(239, 125, 0, 1); --button-secondary-spinner-bg-color: #ffffff; --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 14px 40px; --button-link-border-radius: 0px; --button-link-width: auto; --button-link-height: 50px; --button-link-height-mobile: 50px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(0, 0, 0, 1); --button-link-color-hover: rgba(0, 0, 0, 0.8); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(0, 0, 0, 0.5); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 500; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(239, 125, 0, 1); --button-link-spinner-bg-color: #ffffff; --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 24px; --button-disabled-border-radius: 4px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(239, 125, 0, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(239, 125, 0, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #25292c; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 24px; --header-line-height-mobile: 36px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; --header-font-weight: 600; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 3px; --select-input-border-width: 1px; --select-input-border-color: #666d78; --select-input-border-color-focus: #666d78; --select-input-color-selected: rgba(255, 255, 255, 1); --select-input-bg-color-selected: rgba(239, 125, 0, 1); --select-input-bg-color-focus: rgba(239, 125, 0, 0.1); --select-input-current-bg: rgba(239, 125, 0, 1); --select-input-current-color: #ffffff; --select-input-indicator-color-focus: #666d78; --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: rgba(239, 125, 0, 1); --symbol-secondary: rgba(239, 125, 0, 1); --symbol-tenary: rgba(242, 242, 242, 1); --symbol-current: rgba(255, 255, 255, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(239, 125, 0, 1); --text-input-color-focus: rgba(239, 125, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(239, 125, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 16px; --text-input-font-size-mobile: 16px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(239, 125, 0, 1); --xs2a-link-color-hover: rgba(239, 125, 0, 0.8); --xs2a-checkbox-color: rgba(239, 125, 0, 1); --xs2a-checkbox-color-active: rgba(239, 125, 0, 1); --xs2a-back-btn-border-color: rgba(239, 125, 0, 1); --xs2a-back-btn-color: rgba(255, 255, 255, 1); --xs2a-back-btn-color-hover: rgba(255, 255, 255, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(239, 125, 0, 1); --xs2a-input-color-focus: rgba(239, 125, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(239, 125, 0, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 16px; --xs2a-input-font-size-mobile: 16px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(239, 125, 0, 1); --xs2a-button-padding: 10px 24px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 4px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid rgba(239, 125, 0, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(239, 125, 0, 1); --xs2a-button-border-hover: 1px solid rgba(239, 125, 0, 1); --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(239, 125, 0, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 500; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(239, 125, 0, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(239, 125, 0, 1); --kontomatik-primary-color: rgb(236, 0, 0); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(197, 15, 15); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(239, 125, 0, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(239, 125, 0, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(239, 125, 0, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(239, 125, 0, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(239, 125, 0, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(239, 125, 0, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(239, 125, 0, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 4px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(239, 125, 0, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(239, 125, 0, 1); --videoid-cta-btn-border-hover: 1px solid rgba(239, 125, 0, 1); --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(239, 125, 0, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 500; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(239, 125, 0, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(152, 152, 155, 1); } [data-theme='pinkTheme'] { /* ========== GLOBALS ========== */ --name: Pink; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(253, 80, 135, 1); --link-color-hover: rgba(253, 80, 135, 0.8); --checkbox-color: rgba(0, 0, 0, 1); --checkbox-color-active: rgba(253, 80, 135, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: #fd5087; --input-required-text-color: #fd5087; --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(341, 98%, 65%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: #2b253a; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(253, 80, 135, 1); --doc-checkbox-icon-hover: rgba(253, 80, 135, 0.8); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: #fd5087; --icon-error-color: #d83535; --icon-color-hover: rgba(253, 80, 135, 0.8); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(183, 189, 198, 1); --otp-border-radius: 4px; --otp-font-size: 22px; --otp-focus-color: rgba(253, 80, 135, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: #25292c; --otp-loading-color: rgba(253, 80, 135, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid #ebebeb; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #fd5087; --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-toolbox-box-shadow: none; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #2b253a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #2b253a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #2b253a; --pdf-range-thumb-color: #2b253a; --pdf-range-thumb-hover-color: #2b253acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #2b253a; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #2b253a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(253, 80, 135, 1); --button-padding: 10px 34px; --button-border-radius: 6px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(253, 80, 135, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(253, 80, 135, 0.8); --button-border-hover: 1px solid rgba(253, 80, 135, 0.8); --button-bg-color-disabled: rgba(235, 235, 235, 1); --button-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-color-disabled: rgba(0, 0, 0, 1); --button-font-size: 14px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(253, 80, 135, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 6px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(253, 80, 135, 0.8); --button-secondary-border-hover: 1px solid rgba(253, 80, 135, 0.8); --button-secondary-bg-color-disabled: rgba(235, 235, 235, 1); --button-secondary-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-secondary-color-disabled: rgba(0, 0, 0, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(253, 80, 135, 1); --button-secondary-spinner-bg-color: rgba(235, 235, 235, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 6px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(235, 235, 235, 1); --button-disabled-border: 1px solid rgba(235, 235, 235, 1); --button-disabled-color: rgba(0, 0, 0, 1); --button-disabled-bg-color-hover: rgba(235, 235, 235, 1); --button-disabled-border-hover: 1px solid rgba(235, 235, 235, 1); --button-disabled-color-hover: rgba(0, 0, 0, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #34353a; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(235, 235, 235, 1); --select-input-bg-color-selected: rgba(235, 235, 235, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(253, 80, 135, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 2px solid rgba(183, 189, 198, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: #2b253a; --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(235, 235, 235, 1); --text-input-color-disabled: rgba(235, 235, 235, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: rgba(217, 17, 17, 1); --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(253, 80, 135, 1); --xs2a-link-color-hover: rgba(253, 80, 135, 0.8); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(253, 80, 135, 1); --xs2a-back-btn-border-color: rgba(253, 80, 135, 1); --xs2a-back-btn-color: #2b253a; --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(235, 235, 235, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 2px solid rgba(183, 189, 198, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: #2b253a; --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-border-disabled: rgba(235, 235, 235, 1); --xs2a-input-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(253, 80, 135, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 6px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(253, 80, 135, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(253, 80, 135, 0.8); --xs2a-button-border-hover: 1px solid rgba(253, 80, 135, 0.8); --xs2a-button-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-button-border-disabled: 1px solid rgba(235, 235, 235, 1); --xs2a-button-color-disabled: rgba(0, 0, 0, 1); --xs2a-button-font-size: 14px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(230, 221, 249, 1); --kontomatik-header-color: rgba(0, 0, 0, 1); --kontomatik-primary-color: rgba(253, 80, 135, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(253, 80, 135, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 8px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(183, 189, 198, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(253, 80, 135, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(0, 0, 0, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(235, 235, 235, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(253, 80, 135, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(183, 50, 115, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #34353a; --error-subtitle-color: #2b253a; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(253, 80, 135, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(253, 80, 135, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 100px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(253, 80, 135, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(253, 80, 135, 0.8); --videoid-cta-btn-border-hover: 1px solid rgba(253, 80, 135, 0.8); --videoid-cta-btn-bg-color-disabled: rgba(235, 235, 235, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(235, 235, 235, 1); --videoid-cta-btn-color-disabled: rgba(0, 0, 0, 1); --videoid-cta-btn-font-size: 14px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(253, 80, 135, 1); } [data-theme='santanderTheme'] { /* ========== GLOBALS ========== */ --name: Santander; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(236, 0, 0, 1); --link-color-hover: rgba(236, 0, 0, 0.8); --checkbox-color: rgba(0, 0, 0, 1); --checkbox-color-active: rgba(236, 0, 0, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(236, 0, 0, 1); --input-required-text-color: rgba(236, 0, 0, 1); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(0, 100%, 46%, 50%); --focus-transition: box-shadow 0.3s ease; --wcag: 1; --separator-border-top: none; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-padding-mobile: 20px; --container-border-radius: 8px; --container-border: 1px solid rgba(230, 221, 249, 1); --container-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.07); --container-margin: 0 auto; --container-color: #2b253a; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(48, 52, 56, 1); --doc-checkbox-icon-hover: rgba(0, 0, 0, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(19, 126, 132, 1); --icon-error-color: rgba(216, 53, 53, 1); --icon-custom-color: rgba(19, 126, 132, 1); --icon-color-hover: rgba(236, 0, 0, 0.8); --icon-background-color: rgba(248, 248, 248, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(183, 189, 198, 1); --otp-border-radius: 4px; --otp-font-size: 22px; --otp-focus-color: rgba(236, 0, 0, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: #25292c; --otp-loading-color: rgba(236, 0, 0, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid #ebebeb; --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(236, 0, 0, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #2b253a; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #2b253a; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #2b253a; --pdf-range-thumb-color: #2b253a; --pdf-range-thumb-hover-color: #2b253acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #2b253a; --download-btn-border: 1px solid rgba(206, 203, 214, 1); --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #2b253a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-border-radius: 4px; --download-btn-height: 40px; /* ========== BUTTON ========== */ --button-bg-color: rgba(19, 126, 132, 1); --button-padding: 12px 24px; --button-border-radius: 4px; --button-width: auto; --button-height: 40px; --button-height-mobile: 40px; --button-border: 1px solid rgba(19, 126, 132, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(19, 126, 132, 0.8); --button-border-hover: 1px solid rgba(19, 126, 132, 0.8); --button-bg-color-disabled: rgba(235, 235, 235, 1); --button-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-color-disabled: rgba(0, 0, 0, 1); --button-font-size: 14px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(19, 126, 132, 1); --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 12px 24px; --button-secondary-border-radius: 4px; --button-secondary-width: auto; --button-secondary-height: 40px; --button-secondary-height-mobile: 40px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(19, 126, 132, 0.8); --button-secondary-border-hover: 1px solid rgba(19, 126, 132, 0.8); --button-secondary-bg-color-disabled: rgba(235, 235, 235, 1); --button-secondary-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-secondary-color-disabled: rgba(0, 0, 0, 1); --button-secondary-font-size: 14px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(19, 126, 132, 1); --button-secondary-spinner-bg-color: rgba(235, 235, 235, 1); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 12px 24px; --button-disabled-border-radius: 4px; --button-disabled-width: auto; --button-disabled-height: 40px; --button-disabled-height-mobile: 40px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 14px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(235, 235, 235, 1); --button-disabled-border: 1px solid rgba(235, 235, 235, 1); --button-disabled-color: rgba(0, 0, 0, 1); --button-disabled-bg-color-hover: rgba(235, 235, 235, 1); --button-disabled-border-hover: 1px solid rgba(235, 235, 235, 1); --button-disabled-color-hover: rgba(0, 0, 0, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: #34353a; --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 4px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(235, 235, 235, 1); --select-input-bg-color-selected: rgba(235, 235, 235, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); --select-input-size: 32px; /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-primary: rgba(236, 0, 0, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); --symbol-current: rgba(236, 0, 0, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 4px; --text-input-border: 2px solid rgba(183, 189, 198, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: #2b253a; --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(235, 235, 235, 1); --text-input-color-disabled: rgba(235, 235, 235, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #941616; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: Inter; --xs2a-font-family-headline: Inter; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(236, 0, 0, 1); --xs2a-link-color-hover: rgba(236, 0, 0, 0.8); --xs2a-checkbox-color: rgba(0, 0, 0, 1); --xs2a-checkbox-color-active: rgba(236, 0, 0, 1); --xs2a-back-btn-border-color: rgba(19, 126, 132, 1); --xs2a-back-btn-color: #2b253a; --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(235, 235, 235, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 4px; --xs2a-input-border: 2px solid rgba(183, 189, 198, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: #2b253a; --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-border-disabled: rgba(235, 235, 235, 1); --xs2a-input-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(19, 126, 132, 1); --xs2a-button-padding: 12px 24px; --xs2a-button-padding-mobile: 12px 40px; --xs2a-button-border-radius: 4px; --xs2a-button-width: auto; --xs2a-button-height: 40px; --xs2a-button-height-mobile: 40px; --xs2a-button-border: 1px solid rgba(19, 126, 132, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(19, 126, 132, 0.8); --xs2a-button-border-hover: 1px solid rgba(19, 126, 132, 0.8); --xs2a-button-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-button-border-disabled: 1px solid rgba(235, 235, 235, 1); --xs2a-button-color-disabled: rgba(0, 0, 0, 1); --xs2a-button-font-size: 14px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(0, 0, 0, 1); --kontomatik-border-color: rgba(230, 221, 249, 1); --kontomatik-header-color: rgba(0, 0, 0, 1); --kontomatik-primary-color: rgba(236, 0, 0, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(236, 0, 0, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 8px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(183, 189, 198, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(236, 0, 0, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(0, 0, 0, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(235, 235, 235, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(236, 0, 0, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(236, 0, 0, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #34353a; --error-subtitle-color: #2b253a; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(236, 0, 0, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(19, 126, 132, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 4px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(19, 126, 132, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(19, 126, 132, 0.8); --videoid-cta-btn-border-hover: 1px solid rgba(19, 126, 132, 0.8); --videoid-cta-btn-bg-color-disabled: rgba(235, 235, 235, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(235, 235, 235, 1); --videoid-cta-btn-color-disabled: rgba(0, 0, 0, 1); --videoid-cta-btn-font-size: 14px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(236, 0, 0, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: #ffffff; --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(155, 155, 155, 1); } [data-theme='signicatTheme'] { /* ========== GLOBALS ========== */ --name: Signicat; --font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-family-bold: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --bg-color: rgba(235, 235, 235, 1); --link-color: rgba(67, 21, 128, 1); --link-color-hover: rgba(112, 39, 208, 1); --checkbox-color: rgba(67, 21, 128, 1); --checkbox-color-active: rgba(67, 21, 128, 1); --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(266, 68%, 48%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 60px 80px 60px; --container-border-radius: 8px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; --container-margin: 0 auto; --container-color: #505050; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(67, 21, 128, 1); --doc-checkbox-icon-hover: rgba(67, 21, 128, 0.6); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(67, 21, 128, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(67, 21, 128, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 1px solid rgba(220, 220, 220, 1); --otp-border-radius: 8px; --otp-font-size: 28px; --otp-focus-color: rgba(65, 255, 209, 1); --otp-bg-color: rgba(250, 250, 250, 1); --otp-focus-bg-color: #ffffff; --otp-font-color: #505050; --otp-loading-color: rgba(42, 0, 98, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 1px solid rgba(235, 235, 235, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #2a0062; --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #2a0062; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #2a0062; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #2a0062; --pdf-range-thumb-color: #2a0062; --pdf-range-thumb-hover-color: #2a0062cc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #2a0062; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #2a0062; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 48px; /* ========== BUTTON ========== */ --button-bg-color: rgba(65, 255, 209, 1); --button-padding: 12px 24px; --button-border-radius: 32px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(65, 255, 209, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(42, 0, 98, 1); --button-color-hover: rgba(42, 0, 98, 1); --button-bg-color-hover: rgba(65, 255, 209, 0.6); --button-border-hover: 1px solid rgba(65, 255, 209, 0.6); --button-bg-color-disabled: rgba(196, 253, 239, 1); --button-border-disabled: 1px solid rgba(196, 253, 239, 1); --button-color-disabled: rgba(78, 179, 153, 1); --button-font-size: 13px; --button-font-weight: 600; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(65, 255, 209, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 12px 24px; --button-secondary-border-radius: 32px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(42, 0, 98, 1); --button-secondary-bg-color-hover: rgba(65, 255, 209, 0.6); --button-secondary-border-hover: 1px solid rgba(65, 255, 209, 0.6); --button-secondary-bg-color-disabled: rgba(196, 253, 239, 1); --button-secondary-border-disabled: 1px solid rgba(196, 253, 239, 1); --button-secondary-color-disabled: rgba(78, 179, 153, 1); --button-secondary-font-size: 13px; --button-secondary-font-weight: 600; --button-secondary-spinner-primary: rgba(65, 255, 209, 1); --button-secondary-spinner-bg-color: rgba(196, 253, 239, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-bg-color: rgba(196, 253, 239, 1); --button-disabled-padding: 12px 24px; --button-disabled-border-radius: 32px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-border: 1px solid rgba(196, 253, 239, 1); --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-color: rgba(78, 179, 153, 1); --button-disabled-color-hover: rgba(78, 179, 153, 1); --button-disabled-bg-color-hover: rgba(196, 253, 239, 1); --button-disabled-border-hover: 1px solid rgba(196, 253, 239, 1); --button-disabled-font-size: 13px; --button-disabled-font-weight: 600; /* ========== HEADER ========== */ --header-color: #505050; --header-font-size: 1.625rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 8px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(65, 255, 209, 1); --select-input-bg-color-selected: rgba(65, 255, 209, 1); --select-input-bg-color-focus: rgba(65, 255, 209, 0.5); --select-input-current-bg: rgba(65, 255, 209, 0.25); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(226, 64, 40, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(67, 21, 128, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(235, 235, 235, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 8px; --text-input-border: 1px solid rgba(220, 220, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: gray; --text-input-color-focus: black; --text-input-bg-color-focus: white; --text-input-border-focus: 1px solid rgba(220, 220, 220, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: gray; --text-input-color-disabled: white; --text-input-font-size: 14px; --text-input-font-weight: 400; --text-input-outline: 2px solid rgba(65, 255, 209, 1); --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: #ffffff; --xs2a-link-color: rgba(67, 21, 128, 1); --xs2a-link-color-hover: rgba(112, 39, 208, 1); --xs2a-checkbox-color: rgba(67, 21, 128, 1); --xs2a-checkbox-color-active: rgba(67, 21, 128, 1); --xs2a-back-btn-border-color: rgba(65, 255, 209, 1); --xs2a-back-btn-color: #505050; --xs2a-back-btn-color-hover: #505050; --xs2a-back-btn-disabled: silver; --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 8px; --xs2a-input-border: 1px solid rgba(220, 220, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: gray; --xs2a-input-color-focus: black; --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 1px solid rgba(220, 220, 220, 1); --xs2a-input-bg-color-disabled: silver; --xs2a-input-border-disabled: gray; --xs2a-input-color-disabled: white; --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 400; --xs2a-input-outline: 2px solid rgba(65, 255, 209, 1); --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: rgba(65, 255, 209, 1); --xs2a-button-padding: 12px 24px; --xs2a-button-border-radius: 32px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(65, 255, 209, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(42, 0, 98, 1); --xs2a-button-color-hover: rgba(42, 0, 98, 1); --xs2a-button-bg-color-hover: rgba(65, 255, 209, 0.6); --xs2a-button-border-hover: 1px solid rgba(65, 255, 209, 0.6); --xs2a-button-bg-color-disabled: rgba(196, 253, 239, 1); --xs2a-button-border-disabled: 1px solid rgba(196, 253, 239, 1); --xs2a-button-color-disabled: rgba(78, 179, 153, 1); --xs2a-button-font-size: 13px; --xs2a-button-font-weight: 600; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: #505050; --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: #505050; --kontomatik-primary-color: rgba(65, 255, 209, 1); --kontomatik-primary-reverse-color: rgba(42, 0, 98, 1); --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(42, 0, 98, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 8px; --kontomatik-width: 100%; --kontomatik-padding: 60px 80px 60px; --kontomatik-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 18px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 1px solid rgba(220, 220, 220, 1); --progress-border-radius: 18px; --progress-background: white; --progress-bar-fill: linear-gradient(90deg, rgba(65, 255, 209, 0) 0%, rgba(65, 255, 209, 1) 100%); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(67, 21, 128, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(67, 21, 128, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(67, 21, 128, 1); --spinner-bg-color: #fbfbfb; --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid #2a0760; --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: #2a0062; --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #2a0062; --error-svg-fill4: #41ffd1; /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: transparent; --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 32px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: none; --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(67, 21, 128, 1); --videoid-cta-btn-color-hover: rgba(42, 0, 98, 1); --videoid-cta-btn-bg-color-hover: transparent; --videoid-cta-btn-border-hover: none; --videoid-cta-btn-bg-color-disabled: transparent; --videoid-cta-btn-border-disabled: none; --videoid-cta-btn-color-disabled: rgba(67, 21, 128, 1); --videoid-cta-btn-font-size: 18px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: underline; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: #2a0062; } [data-theme='teamsTheme'] { /* ========== GLOBALS ========== */ --name: Teams; --font-family: 'segoeui', sans-serif; --font-family-headline: 'segoeui', sans-serif; --font-family-bold: 'segoeuib', sans-serif; --bg-color: rgba(248, 247, 246, 1); --link-color: rgba(111, 108, 201, 1); --link-color-hover: rgba(97, 94, 197, 1); --checkbox-color: rgba(97, 97, 97, 1); --checkbox-color-active: rgba(97, 94, 197, 1); --checkbox-border-radius: 4px; --input-required-asterisk-color: rgb(255, 68, 68); --input-required-text-color: rgb(255, 68, 68); --input-required-text-font-size: 14px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px hsla(242, 47%, 57%, 50%); --focus-transition: box-shadow 0.3s ease; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 560px; --container-padding: 50px; --container-border-radius: 2px; --container-border: 1px solid rgba(228, 228, 228, 1); --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(97, 97, 97, 1); /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(98, 100, 167, 1); --doc-checkbox-icon-hover: rgba(97, 94, 197, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: rgba(97, 94, 197, 1); --icon-error-color: #d83535; --icon-color-hover: rgba(97, 94, 197, 1); --icon-size: 32px; --icon-thickness: 0.2px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(235, 235, 235, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: rgba(97, 94, 197, 1); --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(0, 0, 0, 1); --otp-loading-color: rgba(97, 94, 197, 1); /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 2px solid rgba(235, 235, 235, 1); --pdf-background-color: rgba(240, 240, 240, 1); --pdf-color: rgba(37, 41, 44, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: rgba(97, 94, 197, 1); --pdf-scroll-radius: 0px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(0, 0, 0, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #616161; --pdf-zoom-border: 1px solid #cecbd6; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #616161; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #616161; --pdf-range-thumb-color: #616161; --pdf-range-thumb-hover-color: #616161cc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #616161; --download-btn-border: 1px solid #cecbd6; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #616161; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; /* ========== BUTTON ========== */ --button-bg-color: rgba(98, 100, 167, 1); --button-padding: 10px 34px; --button-border-radius: 4px; --button-width: auto; --button-height: 48px; --button-height-mobile: 48px; --button-border: 1px solid rgba(98, 100, 167, 1); --button-box-shadow: none; --button-margin: 0; --button-color: rgba(255, 255, 255, 1); --button-color-hover: rgba(255, 255, 255, 1); --button-bg-color-hover: rgba(97, 94, 197, 1); --button-border-hover: 1px solid rgba(97, 94, 197, 1); --button-bg-color-disabled: rgba(235, 235, 235, 1); --button-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-color-disabled: rgba(97, 97, 97, 1); --button-font-size: 16px; --button-font-weight: 700; --button-spinner-primary: rgba(255, 255, 255, 1); --button-spinner-bg-color: rgba(98, 100, 167, 1); --button-spinner-thickness: 2; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 34px; --button-secondary-border-radius: 4px; --button-secondary-width: auto; --button-secondary-height: 48px; --button-secondary-height-mobile: 48px; --button-secondary-border: 1px solid #dcdbe2; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: #34353a; --button-secondary-color-hover: rgba(255, 255, 255, 1); --button-secondary-bg-color-hover: rgba(97, 94, 197, 1); --button-secondary-border-hover: 1px solid rgba(97, 94, 197, 1); --button-secondary-bg-color-disabled: rgba(235, 235, 235, 1); --button-secondary-border-disabled: 1px solid rgba(235, 235, 235, 1); --button-secondary-color-disabled: rgba(97, 97, 97, 1); --button-secondary-font-size: 16px; --button-secondary-font-weight: 700; --button-secondary-spinner-primary: rgba(98, 100, 167, 1); --button-secondary-spinner-bg-color: rgba(235, 235, 235, 1); --button-secondary-spinner-thickness: 2; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 34px; --button-disabled-border-radius: 4px; --button-disabled-width: auto; --button-disabled-height: 48px; --button-disabled-height-mobile: 48px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-weight: 700; --button-disabled-bg-color: rgba(235, 235, 235, 1); --button-disabled-border: 1px solid rgba(235, 235, 235, 1); --button-disabled-color: rgba(97, 97, 97, 1); --button-disabled-bg-color-hover: rgba(235, 235, 235, 1); --button-disabled-border-hover: 1px solid rgba(235, 235, 235, 1); --button-disabled-color-hover: rgba(97, 97, 97, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(97, 94, 197, 1); --header-font-size: 1.625rem; --header-line-height: 2.25rem; --header-font-size-mobile: 1.25rem; --header-line-height-mobile: 1.9375rem; --header-margin: 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 2px; --select-input-border-width: 1px; --select-input-border-color-focus: rgba(235, 235, 235, 1); --select-input-bg-color-selected: rgba(235, 235, 235, 1); --select-input-bg-color-focus: rgba(206, 212, 220, 0.75); --select-input-current-bg: rgba(206, 212, 220, 0.5); --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-primary: rgba(97, 94, 197, 1); --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: rgba(248, 247, 246, 1); /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(235, 235, 235, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(0, 0, 0, 1); --text-input-color-focus: rgba(0, 0, 0, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(0, 0, 0, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(235, 235, 235, 1); --text-input-color-disabled: rgba(235, 235, 235, 1); --text-input-font-size: 14px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: rgba(217, 17, 17, 1); --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'segoeui', sans-serif; --xs2a-font-family-headline: 'segoeui', sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: rgba(111, 108, 201, 1); --xs2a-link-color-hover: rgba(97, 94, 197, 1); --xs2a-checkbox-color: rgba(97, 97, 97, 1); --xs2a-checkbox-color-active: rgba(97, 94, 197, 1); --xs2a-back-btn-border-color: rgba(97, 94, 197, 1); --xs2a-back-btn-color: rgba(97, 97, 97, 1); --xs2a-back-btn-color-hover: rgba(0, 0, 0, 1); --xs2a-back-btn-disabled: rgba(235, 235, 235, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(235, 235, 235, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(0, 0, 0, 1); --xs2a-input-color-focus: rgba(0, 0, 0, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(0, 0, 0, 1); --xs2a-input-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-border-disabled: rgba(235, 235, 235, 1); --xs2a-input-color-disabled: rgba(235, 235, 235, 1); --xs2a-input-font-size: 14px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: rgba(217, 17, 17, 1); --xs2a-button-bg-color: rgba(98, 100, 167, 1); --xs2a-button-padding: 10px 34px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 4px; --xs2a-button-width: auto; --xs2a-button-height: 48px; --xs2a-button-height-mobile: 48px; --xs2a-button-border: 1px solid rgba(98, 100, 167, 1); --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(255, 255, 255, 1); --xs2a-button-color-hover: rgba(255, 255, 255, 1); --xs2a-button-bg-color-hover: rgba(97, 94, 197, 1); --xs2a-button-border-hover: 1px solid rgba(97, 94, 197, 1); --xs2a-button-bg-color-disabled: rgba(235, 235, 235, 1); --xs2a-button-border-disabled: 1px solid rgba(235, 235, 235, 1); --xs2a-button-color-disabled: rgba(97, 97, 97, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-weight: 700; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(97, 97, 97, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(97, 97, 97, 1); --kontomatik-primary-color: rgba(97, 94, 197, 1); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgba(97, 94, 197, 1); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: rgba(217, 17, 17, 1); --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(235, 235, 235, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: rgba(97, 94, 197, 1); --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(97, 97, 97, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(235, 235, 235, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: rgba(97, 94, 197, 1); --spinner-bg-color: rgba(255, 255, 255, 1); --spinner-thickness: 6; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid rgba(98, 100, 167, 1); --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(97, 97, 97, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: rgba(97, 94, 197, 1); /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: rgba(98, 100, 167, 1); --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 2px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid rgba(98, 100, 167, 1); --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(255, 255, 255, 1); --videoid-cta-btn-color-hover: rgba(255, 255, 255, 1); --videoid-cta-btn-bg-color-hover: rgba(97, 94, 197, 1); --videoid-cta-btn-border-hover: 1px solid rgba(97, 94, 197, 1); --videoid-cta-btn-bg-color-disabled: rgba(235, 235, 235, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(235, 235, 235, 1); --videoid-cta-btn-color-disabled: rgba(97, 97, 97, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-weight: 700; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(98, 100, 167, 1); } [data-theme='raisinTheme'] { /* ========== GLOBALS ========== */ --name: Raisin; --font-family: Inter; --font-family-headline: Inter; --font-family-bold: Inter; --bg-color: #f7f5f3; --link-color: rgba(7, 37, 67, 1); --link-color-hover: rgba(7, 37, 67, 0.8); --checkbox-color: #02193d; --checkbox-color-active: #62afff; --checkbox-check-color: #02193d; --checkbox-border-radius: 4px; --input-required-asterisk-color: rgba(216, 53, 53, 1); --input-required-text-color: rgba(216, 53, 53, 1); --input-required-text-font-size: 16px; --content-font-size: 16px; --content-font-size-mobile: 16px; --focus-outline: none; --focus-box-shadow: 0 0 0 3px #007bff79; --focus-transition: box-shadow 0.3s ease; --default-branding-hidden: 1; --wcag: 1; --separator-border-top: 1px solid #b7bdc6; /* ========== CONTENT WRAP ========== */ --content-wrap-padding-top: 90px; /* ========== CONTAINER ========== */ --container-bg-color: #ffffff; --container-width: 500px; --container-padding: 40px; --container-border-radius: 32px; --container-border: 1px solid #edebe9; --container-box-shadow: none; --container-margin: 0 auto; --container-color: rgba(7, 37, 67, 1); --container-padding-mobile: 80px 20px 20px 20px; /* ========== DOCUMENT CHECKBOX ========== */ --doc-checkbox-icon-color: rgba(7, 37, 67, 1); --doc-checkbox-icon-hover: rgba(7, 37, 67, 1); --doc-checkbox-width: 100%; --doc-checkbox-title-font-size: 16px; --doc-checkbox-content-font-size: 16px; --doc-checkbox-margin: 24px 0; /* ========== ICON ========== */ --icon-doc-verify-dots-color: rgba(255, 255, 255, 1); --icon-main-color: #007aff; --icon-error-color: #d83535; --icon-custom-color: #007aff; --icon-color-hover: #62afff; --icon-background-color: rgba(248, 248, 248, 1); --icon-size: 32px; --icon-thickness: 0.2px; --icon-rx: 14px; /* ========== OTP INPUT ========== */ --otp-width: 100%; --otp-column-gap: 10px; --otp-margin-top: 10px; --otp-margin-bottom: 30px; --otp-input-height: 60px; --otp-input-border: 2px solid rgba(206, 212, 220, 1); --otp-border-radius: 2px; --otp-font-size: 22px; --otp-focus-color: #007bff7c; --otp-bg-color: rgba(255, 255, 255, 1); --otp-focus-bg-color: rgba(255, 255, 255, 1); --otp-font-color: rgba(7, 37, 67, 1); --otp-loading-color: #007aff; /* ========== PDF VIEWER ========== */ --pdf-page-background: #ffffff; --pdf-container-border: 0; --pdf-container-border-radius: 0; --pdf-background-color: rgba(248, 248, 248, 1); --pdf-color: rgba(7, 37, 67, 1); --pdf-scroll-track-color: #ced4dc; --pdf-scroll-handle-color: #62afff; --pdf-scroll-radius: 0px; --pdf-scroll-size: 4px; --pdf-toolbox-color: #ffffff; --pdf-toolbox-bg-color: rgba(2, 25, 61, 0.7); --pdf-toolbox-border-radius: 4px; --pdf-toolbox-padding: 0 8px; --pdf-zoom-bg-color: #ffffff; --pdf-zoom-color: #02193d; --pdf-zoom-border: 1px solid #62afff; --pdf-zoom-bg-color-hover: #f1f3f7; --pdf-zoom-color-hover: #34353a; --pdf-zoom-border-radius: 12px; --pdf-zoom-border-hover: 1px solid #cecbd6; --pdf-range-track-color: #cecbd6; --pdf-range-active-track-color: #34353a; --pdf-range-thumb-color: #34353a; --pdf-range-thumb-hover-color: #34353acc; --pdf-range-thumb-focus-border-color: transparent; /* ========== DOWNLOAD DOCUMENT BUTTON ========== */ --download-btn-bg-color: #ffffff; --download-btn-color: #02193d; --download-btn-border: 1px solid #62afff; --download-btn-border-radius: 12px; --download-btn-border-radius-mobile: 12px; --download-btn-bg-color-hover: #f1f3f7; --download-btn-color-hover: #34353a; --download-btn-border-hover: 1px solid #cecbd6; --download-btn-bg-color-disabled: #f6f6f6; --download-btn-color-disabled: #91969b; --download-btn-border-disabled: 1px solid #f6f6f6; --download-btn-height: 50px; /* ========== BUTTON ========== */ --button-bg-color: #62afff; --button-padding: 10px 24px; --button-border-radius: 14px; --button-width: auto; --button-height: 50px; --button-height-mobile: 50px; --button-border: 1px solid #62afff; --button-box-shadow: none; --button-margin: 0; --button-color: #02193d; --button-color-hover: #02193d; --button-bg-color-hover: #007aff; --button-border-hover: 1px solid #007aff; --button-bg-color-disabled: rgba(206, 212, 220, 1); --button-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-color-disabled: #02193d; --button-font-size: 16px; --button-font-size-mobile: 16px; --button-font-weight: 500; --button-spinner-primary: #02193d; --button-spinner-bg-color: #62afff; --button-spinner-rounded: 1; --button-spinner-thickness: 8px; /* ========== BUTTON SECONDARY ========== */ --button-secondary-bg-color: transparent; --button-secondary-padding: 10px 24px; --button-secondary-border-radius: 14px; --button-secondary-width: auto; --button-secondary-height: 50px; --button-secondary-height-mobile: 50px; --button-secondary-border: 1px solid #62afff; --button-secondary-box-shadow: none; --button-secondary-margin: 0; --button-secondary-color: rgba(7, 37, 67, 1); --button-secondary-color-hover: rgba(7, 37, 67, 1); --button-secondary-bg-color-hover: #62afff; --button-secondary-border-hover: 1px solid #62afff; --button-secondary-bg-color-disabled: rgba(206, 212, 220, 1); --button-secondary-border-disabled: 1px solid rgba(206, 212, 220, 1); --button-secondary-color-disabled: rgba(7, 37, 67, 1); --button-secondary-font-size: 16px; --button-secondary-font-size-mobile: 16px; --button-secondary-font-weight: 500; --button-secondary-spinner-primary: #02193d; --button-secondary-spinner-bg-color: rgba(206, 212, 220, 1); --button-secondary-spinner-rounded: 1; --button-secondary-spinner-thickness: 8px; /* ========== BUTTON LINK ========== */ --button-link-bg-color: transparent; --button-link-padding: 14px 40px; --button-link-border-radius: 0px; --button-link-width: auto; --button-link-height: 50px; --button-link-height-mobile: 50px; --button-link-border: 0; --button-link-box-shadow: none; --button-link-margin: 0; --button-link-color: rgba(9, 38, 78, 1); --button-link-color-hover: rgba(9, 38, 78, 0.8); --button-link-bg-color-hover: transparent; --button-link-border-hover: 0; --button-link-bg-color-disabled: transparent; --button-link-border-disabled: 0; --button-link-color-disabled: rgba(28, 105, 212, 0.5); --button-link-font-size: 16px; --button-link-font-size-mobile: 16px; --button-link-font-weight: 500; --button-link-text-decoration: underline; --button-link-spinner-primary: rgba(255, 176, 0, 1); --button-link-spinner-bg-color: #ffffff; --button-link-spinner-rounded: 1; --button-link-spinner-thickness: 8px; /* ========== BUTTON DISABLED ========== */ --button-disabled-padding: 10px 24px; --button-disabled-border-radius: 14px; --button-disabled-width: auto; --button-disabled-height: 50px; --button-disabled-height-mobile: 50px; --button-disabled-box-shadow: none; --button-disabled-margin: 0; --button-disabled-font-size: 16px; --button-disabled-font-size-mobile: 16px; --button-disabled-font-weight: 500; --button-disabled-bg-color: rgba(206, 212, 220, 1); --button-disabled-border: 1px solid rgba(206, 212, 220, 1); --button-disabled-color: rgba(7, 37, 67, 1); --button-disabled-bg-color-hover: rgba(206, 212, 220, 1); --button-disabled-border-hover: 1px solid rgba(206, 212, 220, 1); --button-disabled-color-hover: rgba(7, 37, 67, 1); --button-disabled-cursor: not-allowed; /* ========== HEADER ========== */ --header-color: rgba(7, 37, 67, 1); --header-font-size: 24px; --header-line-height: 36px; --header-font-size-mobile: 20px; --header-line-height-mobile: 32px; --header-margin: 0 0 15px 0; --header-text-align: center; --header-width: 100%; /* ========== SELECT INPUT ========== */ --select-input-height: 50px; --select-input-border-radius: 12px; --select-input-border-width: 1px; --select-input-border-color: rgba(102, 109, 120, 1); --select-input-border-color-focus: rgba(102, 109, 120, 1); --select-input-color-selected: #09264e; --select-input-bg-color-selected: #007aff; --select-input-bg-color-focus: #d1e0d1; --select-input-current-bg: #62afff; --select-input-current-color: #09264e; --select-input-indicator-color-focus: rgb(102, 102, 102); --select-input-indicator-color-hover: rgb(153, 153, 153); --select-input-danger: rgba(217, 17, 17, 1); --select-input-danger-light: rgba(226, 64, 40, 0.5); /* ========== SYMBOL ========== */ --symbol-folder: custom; --symbol-size: 32px; --symbol-show-checked: 1; --symbol-primary: #007aff; --symbol-secondary: rgba(255, 255, 255, 1); --symbol-tenary: transparent; --symbol-current: #ffffff; /* ========== DOCUMENT TYPE ========== */ --document-picker-padding: 20px 16px; /* ========== VIDEO ONBOARDING ========== */ --onboarding-item-bg-color: #dfefff; --onboarding-item-padding: 16px 24px 16px 16px; --onboarding-item-single-line-height: auto; /* ========== TEXT INPUT ========== */ --text-input-bg-color: white; --text-input-padding: 14px; --text-input-border-radius: 2px; --text-input-border: 2px solid rgba(206, 212, 220, 1); --text-input-box-shadow: none; --text-input-margin: 0; --text-input-color: rgba(7, 37, 67, 1); --text-input-color-focus: rgba(7, 37, 67, 1); --text-input-bg-color-focus: white; --text-input-border-focus: 2px solid rgba(7, 37, 67, 1); --text-input-bg-color-disabled: rgba(248, 247, 246, 1); --text-input-border-disabled: rgba(206, 212, 220, 1); --text-input-color-disabled: rgba(206, 212, 220, 1); --text-input-font-size: 16px; --text-input-font-size-mobile: 16px; --text-input-font-weight: 300; --text-input-outline: none; --text-input-error-color: #d91111; --text-input-warning-color: #954003; /* ========== BRAND BAR ========== */ --brand-bar-bg-color: white; --brand-bar-padding: 30px; --brand-bar-margin: 0 0 30px 0; --brand-bar-border: none; --brand-bar-box-shadow: none; --brand-bar-justify-content: normal; /* ========== WRAP XS2A ========== */ --xs2a-font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-font-family-headline: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco', BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --xs2a-bg-color: rgba(248, 247, 246, 1); --xs2a-link-color: #007aff; --xs2a-link-color-hover: #007bffc3; --xs2a-checkbox-color: rgba(7, 37, 67, 1); --xs2a-checkbox-color-active: #007aff; --xs2a-back-btn-border-color: #007aff; --xs2a-back-btn-color: rgba(7, 37, 67, 1); --xs2a-back-btn-color-hover: rgba(7, 37, 67, 1); --xs2a-back-btn-disabled: rgba(206, 212, 220, 1); --xs2a-input-bg-color: white; --xs2a-input-padding: 14px; --xs2a-input-border-radius: 2px; --xs2a-input-border: 2px solid rgba(206, 212, 220, 1); --xs2a-input-box-shadow: none; --xs2a-input-margin: 0; --xs2a-input-color: rgba(7, 37, 67, 1); --xs2a-input-color-focus: rgba(7, 37, 67, 1); --xs2a-input-bg-color-focus: white; --xs2a-input-border-focus: 2px solid rgba(7, 37, 67, 1); --xs2a-input-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-border-disabled: rgba(206, 212, 220, 1); --xs2a-input-color-disabled: rgba(206, 212, 220, 1); --xs2a-input-font-size: 16px; --xs2a-input-font-size-mobile: 16px; --xs2a-input-font-weight: 300; --xs2a-input-outline: none; --xs2a-input-error-color: #d91111; --xs2a-button-bg-color: #62afff; --xs2a-button-padding: 10px 24px; --xs2a-button-padding-mobile: 14px 40px; --xs2a-button-border-radius: 14px; --xs2a-button-width: auto; --xs2a-button-height: 50px; --xs2a-button-height-mobile: 50px; --xs2a-button-border: 1px solid #62afff; --xs2a-button-box-shadow: none; --xs2a-button-margin: 0; --xs2a-button-color: rgba(7, 37, 67, 1); --xs2a-button-color-hover: rgba(7, 37, 67, 1); --xs2a-button-bg-color-hover: #007aff; --xs2a-button-border-hover: 1px solid #007aff; --xs2a-button-bg-color-disabled: rgba(206, 212, 220, 1); --xs2a-button-border-disabled: 1px solid rgba(206, 212, 220, 1); --xs2a-button-color-disabled: rgba(7, 37, 67, 1); --xs2a-button-font-size: 16px; --xs2a-button-font-size-mobile: 16px; --xs2a-button-font-weight: 500; /* ========== WRAP KONTOMATIK ========== */ --kontomatik-bg-color: #fff; --kontomatik-text-color: rgba(7, 37, 67, 1); --kontomatik-border-color: rgba(228, 228, 228, 1); --kontomatik-header-color: rgba(7, 37, 67, 1); --kontomatik-primary-color: rgb(236, 0, 0); --kontomatik-primary-reverse-color: #fff; --kontomatik-secondary-color: #586374; --kontomatik-main-hover-color: rgb(197, 15, 15); --kontomatik-main-hover-reverse-color: #fff; --kontomatik-list-hover-color: #f5f5f5; --kontomatik-disabled-color: #ced4da; --kontomatik-error-color: #bb0000; --kontomatik-border-radius: 2px; --kontomatik-width: 100%; --kontomatik-padding: 50px; --kontomatik-box-shadow: none; --kontomatik-margin: 0 auto; /* ========== PROGRESS BAR ========== */ --progress-time: 180; --progress-second-chance: 1; --progress-show-counter: 1; --progress-height: 17px; --progress-margin: 40px 0 10px 0; --progress-padding: 0 20px; --progress-border: 2px solid rgba(206, 212, 220, 1); --progress-border-radius: 0px; --progress-background: white; --progress-bar-fill: #007aff; --progress-counter-margin: 20px 0; --progress-counter-padding: 0; --progress-counter-font-size: 24px; --progress-counter-color: rgba(7, 37, 67, 1); --progress-info-text-align: center; --progress-info-font-size: 12px; --progress-info-margin: 6px 0 0 0; /* ========== STEPPER ========== */ --stepper-border-color: rgba(206, 212, 220, 1); --stepper-font-size-title: 12px; --stepper-font-size-desc: 10px; /* ========== LOADING SPINNER ========== */ --spinner-primary: #007aff; --spinner-bg-color: #f3f3f3; --spinner-rounded: 1; --spinner-thickness: 8px; /* ========== TAB SWITCHER ========== */ --tab-border-bottom: 2px solid #dbdbdb; --tab-button-color: #9b9b9b; --tab-button-border-bottom: 4px solid #007aff; --tab-button-color-active: #000; /* ========== ERROR PAGE ========== */ --error-title-color: rgba(7, 37, 67, 1); --error-subtitle-color: #98959f; --error-svg-fill1: none; --error-svg-fill2: #ffffff; --error-svg-fill3: #000; --error-svg-fill4: #62afff; /* ========== POPUP ========== */ --popup-click-outside-enabled: 1; /* ========== VIDEO ID CALL TO ACTION BUTTON ========== */ --videoid-cta-btn-bg-color: #ffffff; --videoid-cta-btn-padding: 10px 34px; --videoid-cta-btn-border-radius: 14px; --videoid-cta-btn-width: 150px; --videoid-cta-btn-border: 1px solid #62afff; --videoid-cta-btn-box-shadow: none; --videoid-cta-btn-margin: 32px 0 0 0; --videoid-cta-btn-color: rgba(7, 37, 67, 1); --videoid-cta-btn-color-hover: rgba(7, 37, 67, 1); --videoid-cta-btn-bg-color-hover: #62afff; --videoid-cta-btn-border-hover: 1px solid #62afff; --videoid-cta-btn-bg-color-disabled: rgba(206, 212, 220, 1); --videoid-cta-btn-border-disabled: 1px solid rgba(206, 212, 220, 1); --videoid-cta-btn-color-disabled: rgba(7, 37, 67, 1); --videoid-cta-btn-font-size: 16px; --videoid-cta-btn-font-size-mobile: 16px; --videoid-cta-btn-font-weight: 500; --videoid-cta-btn-text-decoration: none; /* ========== VIDEO ID PHONE CHANGE BUTTON ========== */ --videoid-phone-btn-color: rgba(7, 37, 67, 1); /* ========== SIGNICAT LOGO ========== */ --signicat-logo-color: rgba(255, 255, 255, 1); --signicat-logo-bg-color: rgba(42, 0, 98, 1); --signicat-logo-tagline-color: rgba(155, 155, 155, 1); /* ========== BACK BUTTON ========== */ --back-button-color: rgba(52, 53, 58, 1); } /* Background images for themes that use images instead of solid background color */ [data-theme-image='ikanoTheme'] .layout__content-router-wrap-with-bg { background-image: url('/assets/ikano_background-CP4OdjmR.jpg'); } [data-theme-image='ikanoFleksTheme'] .layout__content-router-wrap-with-bg { background-image: url('/assets/fleks_background-BavNFfz3.jpg'); } /* Docusign feature styles */ .docusign__micropayment-graph { margin: 30px auto; display: flex; height: 120px; width: 250px; justify-content: center; align-items: center; border-radius: 100px; background: #f7f9fc; } .docusign__signicat-logo-wrap { padding: 16px; } .docusign__paragraph { font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.16px; } /* DTP feature styles */ .dtp__dtp-info-container { display: flex; align-items: center; justify-content: center; } .dtp__divider { width: 100%; box-sizing: border-box; height: 1px; background-color: #ced4dc; margin: var(--dtp-divider-margin, 30px 0); } .dtp__content-bottom-border { --separator-border-top: 1px solid #ced4dc; } .dtp__dtp-general-conditions-spacer-mobile { width: 100%; height: 100px; } /* EID global styles (replaces EIDStyle createGlobalStyle) */ /* CSS custom properties are set by the EIDStyle React component */ body #overlay { padding: 0; margin: 0; } body #overlay .eid-notification { overflow: auto; position: fixed; top: 0px; bottom: 0; left: 0px; right: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; z-index: 1; backdrop-filter: blur(8px); box-shadow: none; max-height: unset; max-width: unset; width: 100%; height: 100%; } body #overlay .eid-notification-centered-content { background-color: rgb(var(--eid-light-background-rgb)); box-sizing: border-box; width: 90%; height: fit-content; max-width: 560px; padding: 72px 24px; } @media (max-width: 980px) { body #overlay .eid-notification-centered-content { max-height: 90%; padding: 24px; height: fill-available; height: -webkit-fill-available; } body #overlay .eid-notification-centered-content.keyboard-open { position: fixed; top: 0; left: 50%; transform: translate(-50%); } } body #overlay .eid-ui-canvas *, body #overlay .eid-overlay * { font-family: var(--font-family) !important; } body #overlay #video { height: 540px; } @media (max-width: 980px) { body #overlay #video { height: fill-available; height: -webkit-fill-available; } } body #overlay .eid-title, body #overlay .eid-h1, body #overlay .eid-h2, body #overlay .eid-h3, body #overlay .eid-h4 { font-family: var(--font-family-headline) !important; } body #overlay .btn--big { margin-top: 20px; } body #overlay .eid-telephone-code ~ a, body #overlay .eid-characters-input ~ a { display: none !important; } body #overlay .eid-a { text-align: center; color: var(--button-color, #58fdd2) !important; } body #overlay .eid-a:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .eid-phone-update .eid-a { text-align: center; color: var(--videoid-phone-btn-color, rgba(42, 0, 98, 1)) !important; text-decoration-color: var(--videoid-phone-btn-link-underline-color); text-underline-offset: var(--videoid-phone-btn-link-underline-offset, 4px); } body #overlay .eid-phone-update .eid-a:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .eid-button { color: var(--button-color, #ffffff) !important; } body #overlay .eid-button:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .eid-button-close { margin-left: 16px; } body #overlay .eid-button-container { display: flex; justify-content: space-between; gap: 16px; } body #overlay .eid-button-container > .eid-button-close { margin-left: 0; } body #overlay .eid-textbox:focus { outline: none !important; } body #overlay .eid-textbox-character:focus { outline: 2px solid var(--otp-focus-color, orange) !important; } body #overlay .eid-va-center { margin-top: 10px; } body #overlay .eid-button-primary, body #overlay .eid-call-to-action, body #overlay .eid-call-to-action-3 { background-color: var(--button-bg-color, #58fdd2) !important; border: var(--button-border, #58fdd2) !important; color: var(--button-color, #ffffff) !important; border-radius: var(--button-border-radius, 66px) !important; padding: var(--button-padding, 12px 36px) !important; } body #overlay .eid-button-primary:hover, body #overlay .eid-call-to-action:hover, body #overlay .eid-call-to-action-3:hover { background-color: var(--button-bg-color-hover, #280b60) !important; border: var(--button-border-hover, #280b60) !important; color: var(--button-color-hover, #58fdd2) !important; } body #overlay .eid-button-primary:disabled, body #overlay .eid-call-to-action:disabled, body #overlay .eid-call-to-action-3:disabled, body #overlay .eid-button-primary[disabled], body #overlay .eid-call-to-action[disabled], body #overlay .eid-call-to-action-3[disabled] { background-color: var(--button-bg-color-disabled, #9dafe5) !important; border: var(--button-border-disabled, 1px solid #9dafe5) !important; color: var(--button-color-disabled, #dee6ff) !important; } body #overlay .eid-button-primary:focus-visible, body #overlay .eid-call-to-action:focus-visible, body #overlay .eid-call-to-action-3:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .eid-button-primary .eid-button, body #overlay .eid-call-to-action .eid-button, body #overlay .eid-call-to-action-3 .eid-button { font-size: 14px !important; } body #overlay .eid-button-primary .eid-choices .choices__inner, body #overlay .eid-call-to-action .eid-choices .choices__inner, body #overlay .eid-call-to-action-3 .eid-choices .choices__inner { border-radius: 5px !important; } body #overlay .eid-call-to-action-3 { padding: 12px 36px; } body #overlay .eid-hologram-media { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 20px 0 !important; width: auto !important; } body #overlay .eid-hologram-media .eid-title { font-size: 1.2em !important; margin: 0 0 20px !important; } body #overlay .eid-hologram-media .eid-h7 { font-size: 1em !important; margin: 0 0 20px !important; } body #overlay .eid-hologram-media .eid-image { height: 5em !important; width: 5em !important; margin-bottom: 20px !important; } body #overlay .eid-hologram-media .eid-description { font-size: 0.9em !important; margin: 0 0 30px !important; } body #overlay .eid-hologram-media .eid-call-to-action-3 { display: block !important; text-decoration: none !important; padding: var(--button-padding, 12px 36px) !important; font-weight: var(--button-font-weight, 600) !important; font-size: var(--button-font-size, 13px) !important; border-radius: var(--button-border-radius, 0px) !important; } body #overlay .eid-hologram-media .eid-call-to-action-3:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .iti__flag { height: 20px !important; } body #overlay .iti__flag-box { margin-right: 16px !important; } body #overlay .iti__countrylist__input { width: calc(100% - 6px) !important; margin: 3px; top: 3px; border-radius: 0 !important; font-size: 1em; font-weight: 400; height: 2.75em; line-height: 1.25em; background-color: var(--text-input-bg-color, white); border: var(--text-input-border, 1px solid silver); box-shadow: var(--text-input-box-shadow, none); color: var(--text-input-color, gray); } body #overlay .iti__countrylist__input:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .iti__country { margin: 3px; } body #overlay .iti__country:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } body #overlay .iti__country-name { font-size: 1em; font-weight: 400; height: 2.75em; line-height: 1.25em; } /* HideVideoIdModal replacement */ body.hide-video-id-modal .eid-notification.eid-notification-modal.eid-animated.eid-animated-center-reveal { display: none !important; } /* VideoId component styles (replaces styled.div VideoId) */ /* CSS custom properties are set by the VideoId React component via style prop */ .themed-eidv-wrapper { padding: 0; margin: 0; } .themed-eidv-wrapper .eid-notification { overflow: auto; } @media (max-width: 980px) { .themed-eidv-wrapper .eid-notification-centered-content { max-height: 90%; padding: 24px; height: fill-available; height: -webkit-fill-available; } .themed-eidv-wrapper .eid-notification-centered-content.keyboard-open { position: fixed; top: 0; left: 50%; transform: translate(-50%); } } @media (min-width: 980px) { .themed-eidv-wrapper .eid-notification.eid-notification-text { bottom: 35px !important; width: 88% !important; } } .themed-eidv-wrapper .eid-ui-canvas *, .themed-eidv-wrapper .eid-overlay * { font-family: var(--font-family) !important; } .themed-eidv-wrapper #video { height: 540px; } @media (max-width: 980px) { .themed-eidv-wrapper #video { height: fill-available; height: -webkit-fill-available; } } .themed-eidv-wrapper .eid-title, .themed-eidv-wrapper .eid-h1, .themed-eidv-wrapper .eid-h2, .themed-eidv-wrapper .eid-h3, .themed-eidv-wrapper .eid-h4 { font-family: var(--font-family-headline) !important; } .themed-eidv-wrapper .btn--big { margin-top: 20px; } .themed-eidv-wrapper .eid-telephone-code ~ a, .themed-eidv-wrapper .eid-characters-input ~ a { display: none !important; } .themed-eidv-wrapper .eid-a { text-align: center; color: var(--link-color, #58fdd2) !important; } .themed-eidv-wrapper .eid-a:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .themed-eidv-wrapper .eid-phone-update .eid-a { text-align: center; color: var(--videoid-phone-btn-color, rgba(42, 0, 98, 1)) !important; text-decoration-color: var(--videoid-phone-btn-link-underline-color); text-underline-offset: var(--videoid-phone-btn-link-underline-offset, 4px); } .themed-eidv-wrapper .eid-phone-update .eid-a:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .themed-eidv-wrapper .iti__flag { height: 20px !important; } .themed-eidv-wrapper .iti__flag-box { margin-right: 16px !important; } .themed-eidv-wrapper .iti__countrylist__input { width: calc(100% - 6px) !important; margin: 3px; top: 3px; border-radius: 0 !important; font-size: 1em; font-weight: 400; height: 2.75em; line-height: 1.25em; background-color: var(--text-input-bg-color, white); border: var(--text-input-border, 1px solid silver); box-shadow: var(--text-input-border, none); color: var(--text-input-color, gray); } .themed-eidv-wrapper .iti__countrylist__input:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .themed-eidv-wrapper .iti__country { margin: 3px; } .themed-eidv-wrapper .iti__country:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .themed-eidv-wrapper .iti__country-name { font-size: 1em; font-weight: 400; height: 2.75em; line-height: 1.25em; } .themed-eidv-wrapper .eid-button { color: var(--button-color, #ffffff) !important; } .themed-eidv-wrapper .eid-button:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .themed-eidv-wrapper .eid-button, .themed-eidv-wrapper .eid-a { max-width: 320px; } .themed-eidv-wrapper .eid-textbox:focus { outline: none !important; } .themed-eidv-wrapper .eid-textbox-character:focus { outline: 2px solid var(--otp-focus-color, orange) !important; } .themed-eidv-wrapper .eid-button-close { margin-left: 16px; } .themed-eidv-wrapper .eid-button-container { display: flex; justify-content: space-between; gap: 16px; } .themed-eidv-wrapper .eid-button-container > .eid-button-close { margin-left: 0; } .themed-eidv-wrapper .eid-button-primary, .themed-eidv-wrapper .eid-call-to-action, .themed-eidv-wrapper .eid-call-to-action-3 { background-color: var(--button-bg-color) !important; border: var(--button-border) !important; color: var(--button-color) !important; border-radius: var(--button-border-radius) !important; padding: var(--button-padding) !important; } .themed-eidv-wrapper .eid-button-primary:hover, .themed-eidv-wrapper .eid-call-to-action:hover, .themed-eidv-wrapper .eid-call-to-action-3:hover { background-color: var(--button-bg-color-hover) !important; border: var(--button-border-hover) !important; color: var(--button-color-hover) !important; } .themed-eidv-wrapper .eid-button-primary:disabled, .themed-eidv-wrapper .eid-call-to-action:disabled, .themed-eidv-wrapper .eid-call-to-action-3:disabled, .themed-eidv-wrapper .eid-button-primary[disabled], .themed-eidv-wrapper .eid-call-to-action[disabled], .themed-eidv-wrapper .eid-call-to-action-3[disabled] { background-color: var(--button-bg-color-disabled) !important; border: var(--button-border-disabled) !important; color: var(--button-color-disabled) !important; } .themed-eidv-wrapper .eid-button-primary:focus-visible, .themed-eidv-wrapper .eid-call-to-action:focus-visible, .themed-eidv-wrapper .eid-call-to-action-3:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .themed-eidv-wrapper .eid-button-primary .eid-button, .themed-eidv-wrapper .eid-call-to-action .eid-button, .themed-eidv-wrapper .eid-call-to-action-3 .eid-button { font-size: 14px !important; } .themed-eidv-wrapper .eid-button-primary .eid-choices .choices__inner, .themed-eidv-wrapper .eid-call-to-action .eid-choices .choices__inner, .themed-eidv-wrapper .eid-call-to-action-3 .eid-choices .choices__inner { border-radius: 5px !important; } .themed-eidv-wrapper .eid-notification-warning-error .eid-call-to-action + .eid-call-to-action-2 { display: none; } @media (min-width: 980px) { .themed-eidv-wrapper .eid-notification-warning-error .eid-call-to-action + .eid-call-to-action-2 { display: inline !important; } } .themed-eidv-wrapper p + .eid-call-to-action-2, .themed-eidv-wrapper .eid-call-to-action-2 { text-align: center !important; width: 150px !important; text-decoration: var(--videoid-cta-btn-text-decoration) !important; color: var(--videoid-cta-btn-color) !important; border: var(--videoid-cta-btn-border) !important; background-color: var(--videoid-cta-btn-bg-color) !important; margin: var(--videoid-cta-btn-margin) !important; padding: var(--videoid-cta-btn-padding) !important; border-radius: var(--videoid-cta-btn-border-radius) !important; font-size: var(--videoid-cta-btn-font-size) !important; font-weight: var(--videoid-cta-btn-font-weight) !important; box-shadow: var(--videoid-cta-btn-box-shadow) !important; } .themed-eidv-wrapper p + .eid-call-to-action-2:hover, .themed-eidv-wrapper .eid-call-to-action-2:hover { color: var(--videoid-cta-btn-color-hover, rgb(255, 255, 255)) !important; background-color: var(--videoid-cta-btn-bg-color-hover, rgba(65, 255, 209, 1)) !important; border: var(--videoid-cta-btn-border-hover, 1px solid rgba(65, 255, 209, 1)) !important; } .themed-eidv-wrapper p + .eid-call-to-action-2:disabled, .themed-eidv-wrapper .eid-call-to-action-2:disabled { color: var(--videoid-cta-btn-color-disabled, rgba(78, 179, 153, 1)) !important; background-color: var(--videoid-cta-btn-bg-color-disabled, rgba(196, 253, 239, 1)) !important; border: var(--videoid-cta-btn-border-disabled, 1px solid rgba(196, 253, 239, 1)) !important; } .themed-eidv-wrapper p + .eid-call-to-action-2:focus-visible, .themed-eidv-wrapper .eid-call-to-action-2:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } @media (max-width: 420px) { .themed-eidv-wrapper p + .eid-call-to-action-2, .themed-eidv-wrapper .eid-call-to-action-2 { margin: 18px auto 0 auto !important; } } .themed-eidv-wrapper .eid-call-to-action-3 { padding: 12px 36px; } .themed-eidv-wrapper .eid-hologram-media { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 20px 0 !important; width: auto !important; } .themed-eidv-wrapper .eid-hologram-media .eid-title { font-size: 1.2em !important; margin: 0 0 20px !important; } .themed-eidv-wrapper .eid-hologram-media .eid-h7 { font-size: 1em !important; margin: 0 0 20px !important; } .themed-eidv-wrapper .eid-hologram-media .eid-image { height: 5em !important; width: 5em !important; margin-bottom: 20px !important; } .themed-eidv-wrapper .eid-hologram-media .eid-description { font-size: 0.9em !important; margin: 0 0 30px !important; } .themed-eidv-wrapper .eid-hologram-media .eid-call-to-action-3 { display: block !important; text-decoration: none !important; padding: var(--button-padding) !important; font-weight: var(--button-font-weight) !important; font-size: var(--button-font-size) !important; border-radius: var(--button-border-radius) !important; } /* eID Method Selection feature styles */ .eid-method-selection__centered-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; } .eid-method-selection__full-name-box { box-sizing: border-box; padding: 16px 24px; border-radius: 2px; border: 1px solid #b7bdc6; background: #f5f5f5; min-width: 320px; color: #000; text-align: center; font-style: normal; font-weight: 700; line-height: 24px; letter-spacing: -0.16px; } @media (max-width: 480px) { .eid-method-selection__full-name-box { width: 100%; } } .eid-method-selection__method-container { width: 100%; display: flex; flex-direction: column; gap: 15px; } .eid-method-selection__method-item { box-sizing: border-box; height: 72px; padding: 0 16px; display: grid; grid-template-columns: 56px 1fr 24px; grid-template-rows: 50% 50%; border: 1px solid #cdd1e2; background: #fff; transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out; } .eid-method-selection__method-item:hover { border-color: var(--button-link-color var(--button-color, #0c2074)); background: #f0f4ff; cursor: pointer; } .eid-method-selection__method-item .eid-method-selection__name { height: 24px; color: var(--button-link-color var(--button-color, #0c2074)); font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 700; line-height: 24px; letter-spacing: -0.16px; align-self: end; justify-self: start; grid-column: 2; grid-row: 1; } .eid-method-selection__method-item .eid-method-selection__country { height: 24px; color: #6e6e6e; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; letter-spacing: -0.16px; align-self: start; justify-self: start; grid-column: 2; grid-row: 2; } .eid-method-selection__method-item .eid-method-selection__logo { grid-column: 1; grid-row: 1 / 3; align-self: center; justify-self: start; } .eid-method-selection__method-item .eid-method-selection__arrow { grid-column: 3; grid-row: 1 / 3; align-self: center; justify-self: center; } .eid-method-selection__mask--alpha { mask-type: alpha; } .eid-method-selection__logo--offset { margin-left: 8px; } .eid-method-selection__cancel-button { background-color: transparent; border: none; outline: none; color: var(--eid-cancel-color); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 24px; letter-spacing: -0.16px; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; transition: filter 0.2s ease-in-out; } .eid-method-selection__cancel-button:hover { cursor: pointer; filter: brightness(1.5); } /* Elavon feature styles */ .elavon__step { display: flex; align-items: start; background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 10px; gap: 10px; } .elavon__warning { display: flex; align-items: start; background-color: #ffb35a; padding: 15px; border-radius: 5px; margin-bottom: 10px; gap: 10px; } .elavon__circle { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; color: white; font-size: 12px; font-weight: bold; } .elavon__step-icon { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin: -2px 0 0 0; &.warning { width: 20px; height: 20px; margin: 0; } } .elavon__info-text { width: calc(100% - 34px); font-size: 14px; line-height: 20px; } .elavon__info-text-centered { width: 100%; text-align: center; } .elavon__paragraph-with-icon { display: flex; align-items: center; justify-content: space-between; } .elavon__name-wrapper { background: #f8f8f8; color: #072543; font-size: 16px; font-weight: 700; line-height: 24px; border-radius: 2px; border: 1px solid #b7bdc6; display: flex; padding: 24px; justify-content: center; align-items: flex-start; gap: 16px; flex: 1 0 0; text-align: center; } .elavon__expected-name-wrapper { background: #f8f8f8; color: #072543; font-size: 16px; font-weight: 700; line-height: 24px; border-radius: 2px; border: 1px solid #b7bdc6; display: flex; padding: 13px 16px; justify-content: center; align-items: flex-start; gap: 16px; flex: 1 0 0; text-align: center; } .elavon__actual-name-wrapper { background: #ffffff; color: #467723; font-size: 16px; font-weight: 700; line-height: 24px; margin-top: 8px; border-radius: 2px; border: 1px solid #467723; display: flex; padding: 13px 16px; justify-content: center; align-items: flex-start; gap: 16px; flex: 1 0 0; text-align: center; &.error { color: #d83535; border-color: #d83535; } } /* Enpal feature styles */ .enpal__step { display: flex; align-items: start; background-color: #f8f9fa; padding: 15px; border-radius: 5px; margin-bottom: 10px; gap: 10px; } .enpal__circle { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; color: white; font-size: 12px; font-weight: bold; } .enpal__step-icon { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; margin-top: -2px; } .enpal__info-text { width: calc(100% - 34px); } .enpal__info-text-centered { width: 100%; text-align: center; } .enpal__name-wrapper { background: #f8f8f8; color: #072543; font-size: 20px; font-weight: 600; line-height: 36px; border-radius: 8px; display: flex; padding: 16px 24px 16px 16px; justify-content: center; align-items: flex-start; gap: 16px; flex: 1 0 0; text-align: center; } .enpal__password-requirements { display: flex; flex-direction: column; align-items: start; background-color: #f8f9fa; padding: 15px 24px; border-radius: 5px; margin-bottom: 10px; gap: 8px; } .enpal__password-requirement-met { display: flex; justify-content: start; list-style-type: none; &.true { color: #037257; } &.false { color: #b62424; } } .enpal__password-requirement-met > div:first-child { height: 20px; width: 20px; display: block; margin-right: 5px; } .enpal__paragraph-centered-with-background { text-align: center; background-color: rgba(248, 248, 248, 1); border-radius: 8px; padding: 16px; margin: var(--enpal-pcwb-margin); } .enpal__enpal-sign-document-branding-wrapper { position: absolute; bottom: 25px; left: 24px; } @media (max-width: 980px) { .enpal__enpal-sign-document-branding-wrapper { display: none; } } @font-face { font-family: 'MiniSansSerif'; src: url(/fonts/MINISansSerif-Regular.woff2) format('woff2'), url(/fonts/MINISansSerif-Regular.woff) format('woff'), url(/fonts/MINISansSerif-Regular.eot) format('eot'), url(/fonts/MINISansSerif-Bold.woff) format('woff'), url(/fonts/MINISansSerif-Bold.woff2) format('woff2'), url(/fonts/MINISansSerif-Bold.eot) format('eot'); } @font-face { font-family: 'IkanoSans'; font-weight: normal; font-style: normal; src: url(/fonts/IkanoSans-Regular.woff) format('woff'), url(/fonts/IkanoSans-Bold.woff) format('woff'); } @font-face { font-family: 'IkanoSansBold'; font-weight: normal; font-style: normal; src: url(/fonts/IkanoSans-Bold.woff) format('woff'); } @font-face { font-family: 'segoeui'; src: url(/fonts/segoeui.ttf) format('truetype'), url(/fonts/segoeuib.ttf) format('truetype'); } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Nunito Sans'; src: url('/fonts/NunitoSans-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Nunito Sans'; src: url('/fonts/NunitoSans-Italic-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Shadows Into Light'; src: url('/fonts/ShadowsIntoLight-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-VariableFont.otf') format('opentype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Italic-VariableFont.otf') format('opentype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-VariableFont.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Global checkbox & input styles (replaces InputStyle createGlobalStyle from input.styles.ts) */ input[type='checkbox'] { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .label-checkbox:has(input:checked)::before { background-color: var(--checkbox-color-active, black); border: 2px solid var(--checkbox-color-active, gray) !important; } .label-checkbox:has(input:checked)::after { content: ''; display: block; position: absolute; background-color: var(--checkbox-check-color, white); -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3692%200.466489C11.6638%200.780755%2011.6479%201.27437%2011.3337%201.569L4.93388%207.569C4.63386%207.85029%204.16698%207.8503%203.86694%207.56903L0.666715%204.56903C0.352433%204.27441%200.336492%203.7808%200.63111%203.46652C0.925729%203.15224%201.41934%203.1363%201.73362%203.43092L4.40037%205.93081L10.2667%200.430944C10.581%200.136309%2011.0746%200.152223%2011.3692%200.466489Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3692%200.466489C11.6638%200.780755%2011.6479%201.27437%2011.3337%201.569L4.93388%207.569C4.63386%207.85029%204.16698%207.8503%203.86694%207.56903L0.666715%204.56903C0.352433%204.27441%200.336492%203.7808%200.63111%203.46652C0.925729%203.15224%201.41934%203.1363%201.73362%203.43092L4.40037%205.93081L10.2667%200.430944C10.581%200.136309%2011.0746%200.152223%2011.3692%200.466489Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; top: 7.5px; left: 4.5px; width: 11px; height: 8px; } .label-checkbox::before { width: 20px; height: 20px; content: ''; -webkit-appearance: none; appearance: none; background-color: transparent; border: 2px solid var(--checkbox-color, gray) !important; border-radius: var(--checkbox-border-radius, 0); padding: 8px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 10px; top: 1px; box-sizing: border-box; } .label-text, .label-checkbox { position: relative; display: flex; line-height: 21px; } .label-text:focus-visible, .label-checkbox:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* ========== PHONE INPUT ========== */ .phone-input-wrapper { scroll-margin-top: 32px; } .PhoneInput { display: flex; align-items: center; max-width: 300px; border-radius: var(--text-input-border-radius, 2px); } .PhoneInputInput { flex: 1; min-width: 0; background-color: var(--text-input-bg-color, white); padding: var(--text-input-padding, 14px); border-radius: 0 var(--text-input-border-radius, 2px) var(--text-input-border-radius, 2px) 0; border: var(--text-input-border, 2px solid rgba(206, 212, 220, 1)); border-left: none; box-shadow: var(--text-input-box-shadow, none); color: var(--text-input-color, rgba(0, 0, 0, 1)); outline: none; font: inherit; height: var(--select-input-height, 42px); box-sizing: border-box; transition: none; } .PhoneInput:hover .PhoneInputInput:not(:disabled) { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)); border-left: none; transition: none; } .PhoneInput:focus-within .PhoneInputInput { color: var(--text-input-color-focus, rgba(0, 0, 0, 1)); background-color: var(--text-input-bg-color-focus, white); border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)); border-left: none; } .PhoneInputInput:focus { outline: var(--focus-outline, none); box-shadow: var(--focus-box-shadow, 0 0 0 3px hsla(220, 100%, 50%, 50%)); transition: var(--focus-transition, box-shadow 0.3s ease); position: relative; z-index: 1; border-radius: var(--text-input-border-radius, 2px); } .PhoneInputInput:disabled { color: var(--text-input-color-disabled, rgba(206, 212, 220, 1)); background-color: var(--text-input-bg-color-disabled, rgba(248, 247, 246, 1)); border: 2px solid var(--text-input-border-disabled, rgba(206, 212, 220, 1)); border-left: none; cursor: not-allowed; } .PhoneInputCountry { display: flex; align-items: center; padding: 0 10px; background-color: var(--text-input-bg-color, white); border-radius: var(--text-input-border-radius, 2px); border: var(--text-input-border, 2px solid rgba(206, 212, 220, 1)); height: var(--select-input-height, 42px); box-sizing: border-box; cursor: pointer; position: relative; } .PhoneInputCountry:focus-within { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)); outline: var(--focus-outline, none); box-shadow: var(--focus-box-shadow, 0 0 0 3px hsla(220, 100%, 50%, 50%)); transition: var(--focus-transition, box-shadow 0.3s ease); } .PhoneInputCountrySelect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; } .PhoneInputCountryIcon { width: 24px; height: 18px; } .PhoneInputCountryIcon--border { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .PhoneInputCountryIconImg { width: 100%; height: 100%; object-fit: cover; } .PhoneInputCountrySelectArrow { display: block; width: 6px; height: 6px; margin-left: 8px; border-style: solid; border-color: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg); opacity: 0.5; } /* ========== PHONE COUNTRY SELECT ========== */ .PhoneInput .select-input__container { width: auto; height: var(--select-input-height, 42px); flex-shrink: 0; } .PhoneInput .phone-country-select__control, .PhoneInput .select-input__container .phone-country-select__control { border: var(--text-input-border, 2px solid rgba(206, 212, 220, 1)) !important; border-right: none !important; border-radius: var(--text-input-border-radius, 2px) 0 0 var(--text-input-border-radius, 2px) !important; min-height: var(--select-input-height, 42px) !important; height: var(--select-input-height, 42px) !important; min-width: unset !important; transition: none !important; } .PhoneInput .phone-country-select__control:hover:not(.phone-country-select__control--is-disabled), .PhoneInput:hover .phone-country-select__control:not(.phone-country-select__control--is-disabled) { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)) !important; border-right: none !important; transition: none; } .PhoneInput .phone-country-select__control--is-focused, .PhoneInput:focus-within .phone-country-select__control { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)) !important; border-right: none !important; } .PhoneInput .select-input__container .phone-country-select__control.phone-country-select__control--is-focused { outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; border-radius: var(--text-input-border-radius, 2px) !important; position: relative; z-index: 1; } .PhoneInput .phone-country-select__control--is-disabled, .PhoneInput .select-input__container .phone-country-select__control--is-disabled { border: 2px solid var(--text-input-border-disabled, rgba(206, 212, 220, 1)) !important; border-right: none !important; background-color: var(--text-input-bg-color-disabled, rgba(248, 247, 246, 1)) !important; cursor: not-allowed !important; } .PhoneInput .phone-country-select__control--is-disabled:hover { border: 2px solid var(--text-input-border-disabled, rgba(206, 212, 220, 1)) !important; border-right: none !important; } .PhoneInput .phone-country-select__value-container { padding: 0 0 0 8px; flex-wrap: nowrap; } .PhoneInput .phone-country-select__single-value { position: static; transform: none; max-width: unset; } .PhoneInput .phone-country-select__indicators { padding-right: 2px; } .PhoneInput .phone-country-select__indicator-separator { display: none; } .PhoneInput .phone-country-select__dropdown-indicator { padding: 4px 6px 4px 2px; } .PhoneInput .phone-country-select__menu { min-width: 280px; width: max-content; max-width: 320px; } .PhoneInput .phone-country-select__option { padding: 10px 12px; } .phone-country-select__item { display: flex; align-items: center; gap: 8px; } .phone-country-select__flag { width: 24px; height: 18px; object-fit: cover; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .phone-country-select__code { margin-left: auto; color: rgba(0, 0, 0, 0.5); font-size: 13px; flex-shrink: 0; } /* 1. Divider */ .generic__divider { width: var(--d-width, calc(100% - 40px)); box-sizing: border-box; height: 1px; background-color: #dbdbdb; margin: var(--d-margin, 20px); } /* 2. CheckboxForm */ .generic__checkbox-form { display: flex; width: 100%; margin: 0 0 15px 0; .label-checkbox { cursor: pointer; color: var(--container-color, black); } } .generic__checkbox-form input[type='checkbox'] { margin-right: 10px; } .generic__checkbox-form:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .generic__checkbox-form label:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } @media (max-width: 980px) { .generic__checkbox-form { margin: var(--cbf-margin-mobile, 0 0 20px 0); } } /* 3. DocumentPicker */ .generic__document-picker { display: flex; align-items: center; justify-content: flex-start; width: 100%; background-color: #ffffff; line-height: var(--symbol-size, 48px); border: 1px solid var(--select-input-border-color, #f7f9fc); border-radius: var(--select-input-border-radius, 0); padding: var(--document-picker-padding, 20px); box-sizing: border-box; margin-bottom: 10px; cursor: pointer; transition: all 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; svg { transition: all 0.2s ease-in-out; } } .generic__document-picker:not(.generic__current):active, .generic__document-picker:not(.generic__current):focus { background-color: #f7f9fc; } .generic__document-picker:not(.generic__current):hover { background-color: #f7f9fc; } .generic__document-picker:not(.generic__current):hover svg { color: var(--select-input-icon-hover-color); } .generic__document-picker.generic__current { border-color: var(--select-input-border-color-focus, #f7f9fc); background-color: var(--select-input-current-bg, transparent); } .generic__document-picker.generic__current span { color: var(--select-input-current-color, inherit); } .generic__document-picker.generic__current .symbol__container svg { color: var(--symbol-current, var(--symbol-primary)); } .generic__document-picker.generic__current .symbol__container svg .document--primary--fill { fill: var(--symbol-current, var(--symbol-primary)); } .generic__document-picker.generic__current .symbol__container svg .document--primary--stroke { stroke: var(--symbol-current, var(--symbol-primary)); } .generic__document-picker span { margin-left: 15px; font-size: 16px; font-weight: 400; } .generic__document-picker:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* 4. DocumentTypeName */ .generic__document-type-name { display: flex; flex-direction: column; line-height: normal; } .generic__document-type-name span { margin-left: 15px; font-size: 16px; font-weight: 400; } .generic__document-type-name span.generic__ro-id-card { font-size: 12px; line-height: 16px; } /* 5. DocumentChecked */ .generic__document-checked { margin-left: auto; line-height: normal; width: 32px; height: 32px; } /* 6. SelectHolder */ .generic__select-holder { width: 100%; margin: 20px 0 30px; } .generic__select-holder__label { font-weight: 700; line-height: 24px; margin-bottom: 8px; } /* 7. InputContainer */ .generic__input-container { width: 100%; display: flex; flex-direction: column; } .generic__input-container span { padding-bottom: 0%; font-size: 14px; } .generic__input-container input { transition: all 0.3ms ease-in-out; } .generic__input-container:last-child { margin-bottom: 30px; } /* 9. CountryWrap */ .generic__country-wrap { width: 100%; display: flex; flex-direction: column; padding: 25px 0 30px; } .generic__country-wrap span { color: var(--container-color, #000); margin-bottom: 8px; } .generic__country-wrap .select-input__placeholder { cursor: pointer; } .generic__country-wrap .select-input__single-value { padding: 0; margin: 0; cursor: pointer; } .generic__country-wrap .select-input__single-value > div { align-items: center; } .generic__country-wrap .select-input__single-value > div span { margin-bottom: 0; } .generic__country-wrap .select-input__dropdown-indicator { padding: 8px 13px; cursor: pointer; } .generic__country-wrap .select-input__clear-indicator { padding: 4px 13px; cursor: pointer; } .generic__country-wrap .select-input__input-container { cursor: pointer; margin: 0; } .generic__country-wrap .select-input__input { caret-color: transparent; } /* 10. DocumentTypeWrap */ .generic__document-type-wrap { width: 100%; margin: 0 0 30px; } @media (max-width: 980px) { .generic__document-type-wrap { border-top: var(--container-border, #280b60) !important; padding-bottom: 128px; } } /* 11. DocumentTypeWarning */ .generic__document-type-warning { display: flex; gap: 8px; padding: 4px 12px; border-radius: 4px; background-color: #fff5e1; color: #ba5004; } /* 12. DocumentTypeLabel */ .generic__document-type-label { color: var(--container-color, #000); margin: 0 0 30px 0px; font-size: 18px; font-weight: 700; text-align: center; } @media (max-width: 980px) { .generic__document-type-label { padding-top: 30px; } } /* 13. BanksListLabel */ .generic__banks-list-label { color: var(--container-color, #000); margin: 30px 0 30px 0px; font-size: 18px; font-weight: 600; text-align: center; } /* 14. BankBadgeListEmpty */ .generic__bank-badge-list-empty { display: flex; gap: 12px; justify-content: space-between; border-radius: 4px; background-color: rgba(255, 240, 240, 1); color: rgba(182, 36, 36, 1); padding: 4px 12px; font-size: 14px; line-height: 20px; } /* 15. BankBadgeList */ .generic__bank-badge-list { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; } /* 16. BankBadge */ .generic__bank-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 33%; max-width: calc(100% / 3 - 6px); box-sizing: border-box; text-align: center; cursor: pointer; height: 110px; overflow: hidden; } .generic__bank-badge:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } @media (max-width: 980px) { .generic__bank-badge { width: 50%; max-width: calc(50% - 4px); } } /* 17. BankBadgeIcon */ .generic__bank-badge-icon { display: flex; padding: 16px; border: 1px solid rgba(233, 231, 238, 1); border-radius: 8px; width: 100%; justify-content: center; align-items: center; height: 66px; box-sizing: border-box; } .generic__bank-badge-icon-selected { border: 2px solid rgba(109, 108, 111, 1); } .generic__bank-badge-icon > img { max-height: 50px; } /* 18. BankBadgeName */ .generic__bank-badge-name { display: flex; justify-content: start; align-items: start; font-size: 14px; line-height: 20px; color: rgba(108, 113, 118, 1); } /* 19. BackButton */ .generic__back-button { display: flex; justify-content: center; align-items: center; position: var(--bb-position, fixed); top: var(--bb-top, 50px); left: var(--bb-left, 50px); border: 0; background: transparent; cursor: pointer; font-size: 16px; line-height: 24px; color: var(--back-button-color, rgba(52, 53, 58, 1)); font-family: inherit; } .generic__back-button--absolute { --bb-position: absolute; --bb-top: 0; --bb-left: -100px; --bb-mobile-top: 80px; --bb-mobile-left: 20px; &.no-left-margin { --bb-mobile-left: 0; } } .generic__back-button--top-100 { --bb-top: 100px; } @media (max-width: 980px) { .generic__back-button { position: absolute; top: var(--bb-mobile-top, 25px); left: var(--bb-mobile-left, 0px); } } @media (max-width: 480px) { .generic__back-button { top: var(--bb-mobile-top, 32px); left: var(--bb-mobile-left, 0px); } } /* 20. TextInputWrap */ .generic__text-input-wrap { position: relative; width: 100%; margin: 0 0 30px; } @media (max-width: 980px) { .generic__text-input-wrap { margin: 30px 0; } } /* 21. Label */ .generic__label { color: var(--container-color, #000); margin: 30px 0 8px; font-weight: var(--lbl-font-weight, 400); } .generic__label:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* 22. ButtonImgWrap */ .generic__button-img-wrap { margin-right: 5px; margin-bottom: -2px; } .generic__button-img-wrap-hidden { display: none; } /* 23. ButtonText */ .generic__button-text { text-wrap: nowrap; } /* 24. ButtonTextWrap */ .generic__button-text-wrap { text-wrap: wrap; } /* 25. PdfWrap */ .generic__pdf-wrap { width: 100%; margin-top: 36px; } /* 26. OnboardingList */ .generic__onboarding-list { display: flex; flex-direction: column; gap: 30px; width: 100%; box-sizing: border-box; margin-top: 30px; margin-bottom: 30px; } /* 27. OnboardingItem */ .generic__onboarding-item { display: flex; align-items: center; padding: var(--onboarding-item-padding, 16px 24px); border-radius: 8px; background-color: var(--onboarding-item-bg-color, #f7f9fc); } .generic__onboarding-item span { font-size: var(--content-font-size, 14px); font-weight: 500; } /* 28. OnboardingIcon */ .generic__onboarding-icon { display: inline-block; width: var(--symbol-size, 48px); height: var(--symbol-size, 48px); } /* 29. OnboardingSingleLine */ .generic__onboarding-single-line { display: flex; margin-left: 10px; width: 100%; height: var(--onboarding-item-single-line-height, 55px); align-items: center; } /* 30. OnboardingDoubleLine */ .generic__onboarding-double-line { margin-left: 10px; margin-top: 12px; } /* 31. OnboardingItemHeading */ .generic__onboarding-item-heading { font-weight: 800 !important; width: 100%; display: inline-block; } /* 32. Subheading */ .generic__subheading { width: 100%; text-align: center; font-size: 1em; line-height: 1.4em; } /* 35. MicropaymentInfoGraph */ .generic__micropayment-info-graph { width: 100%; margin: 30px 0 30px 0; } /* 36. MicropaymentInfoContent */ .generic__micropayment-info-content { width: 100%; line-height: 1.6em; margin: 0 0 30px 0; font-size: var(--content-font-size, 14px); } /* 37. MicropaymentInfoContentWithBorder */ .generic__micropayment-info-content-with-border { width: 100%; line-height: 1.6em; margin: 0 0 30px 0; border-top: var(--micb-border-top, 1px solid #ebebeb); padding-top: 30px; box-sizing: border-box; font-weight: 700; font-size: var(--content-font-size, 14px); } /* 38. MicropaymentWarn */ .generic__micropayment-warn { display: flex; justify-content: center; width: calc(100% - 20px); padding: 0 10px; border-radius: 4px; background-color: rgba(237, 238, 239, 1); min-height: 44px; line-height: 44px; } /* 39. MicropaymentWarnInner */ .generic__micropayment-warn-inner { line-height: 44px; min-height: 44px; display: flex; color: #4c4c4c; font-size: 12px; font-style: normal; font-weight: 600; } .generic__micropayment-warn-inner > :first-child { padding: 9px 0; margin-right: 4px; } /* 40. WipImage */ .generic__wip-image { width: 100%; } .generic__wip-image img { width: 100%; } /* 41. Subtitle */ .generic__subtitle { width: 100%; text-align: center; font-style: italic; margin: -10px 0 0 0; padding: 0; } /* 42. FileUpload */ .generic__file-upload { z-index: 0; width: 100%; border: 1px dashed #9b9b9b; border-radius: 5px; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; } .generic__file-upload-has-file { border: none; } .generic__file-upload:hover { background-color: #f7f7f9; } .generic__file-upload input { opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9; } .generic__file-upload:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* 43. UploadTitle */ .generic__upload-title { width: 100%; text-align: center; margin: 10px 0 15px 0; & .generic__upload-title__link { color: var(--link-color, #2a0760); text-decoration: underline; } & span { color: rgba(108, 113, 118, 1); } } /* 44. UploadDefault */ .generic__upload-default { display: flex; flex-direction: column; align-items: center; margin: 10px; } /* 45. FileSize */ .generic__file-size { width: 100%; text-align: right; font-size: 12px; font-style: normal; line-height: 141.99%; margin-bottom: 30px; } .generic__file-size span { font-weight: 700; font-family: var(--font-family-bold); } /* 46. UnderlinedBold */ .generic__underlined-bold { text-decoration: underline; font-weight: 700; font-family: var(--font-family-bold); } /* 47. UnderlinedButton */ .generic__underlined-button { background-color: transparent; border: none; cursor: pointer; text-decoration: underline; font-family: inherit; color: var(--ubtn-color, #2a0760); text-align: center; font-size: 16px; font-style: normal; font-weight: 400; } .generic__underlined-button:hover { cursor: pointer; } /* 48. UploadIcon */ .generic__upload-icon { width: 50px; height: 50px; margin-top: 15px; background-color: var(--icon-background-color, #f7f9fc); border-radius: 50%; display: flex; justify-content: center; align-items: center; } /* 49. FileInfo */ .generic__file-info { width: 100%; background: transparent; border: 1px solid rgba(206, 203, 214, 1); display: flex; justify-content: space-between; padding: 12px 16px; box-sizing: border-box; } .generic__file-info__title { display: flex; align-items: center; gap: 8px; } .generic__file-info__name { font-size: 14px; overflow-wrap: anywhere; } /* 50. FileName */ .generic__file-name { font-size: 14px; overflow-wrap: anywhere; } /* 51. FileDeselect */ .generic__file-deselect { display: flex; align-items: center; width: 19px; height: 19px; z-index: 10; cursor: pointer; } /* 52. UploadParagraph */ .generic__upload-paragraph { font-size: 14px; font-style: normal; font-weight: 300; line-height: 170%; max-width: 400px; margin: 0px auto; } .generic__upload-paragraph-with-border { width: 100%; line-height: 1.6em; margin: 0 0 30px 0; border-top: var(--micb-border-top, 1px solid #ebebeb); padding-top: 30px; box-sizing: border-box; font-weight: 700; font-size: var(--content-font-size, 14px); } /* 53. UploadAddressParagraph */ .generic__upload-address-paragraph { font-size: 16px; font-style: normal; font-weight: 700; line-height: 170%; max-width: 400px; margin: 0px auto; font-family: var(--font-family-bold); } /* 54. UploadTypeList */ .generic__upload-type-list { font-style: normal; font-weight: 300; line-height: 141.99%; max-width: 400px; margin: 0px auto; margin-top: 10px; margin-bottom: 10px; } /* 55. FileWarning */ .generic__file-warning { width: 100%; padding: 10px 20px; background-color: #edeeef; display: flex; gap: 20px; align-items: center; color: #34353a; font-size: 14px; box-sizing: border-box; margin-bottom: 30px; } /* 56. FileError */ .generic__file-error { width: 100%; padding: 10px 20px; background-color: #ffdcdc; border: 1px solid #ff8c8c; display: flex; gap: 20px; align-items: center; color: #34353a; font-size: 14px; box-sizing: border-box; margin-bottom: 30px; } /* 57. IntroKontomatikContent */ .generic__intro-kontomatik-content > :last-child { margin-bottom: 30px; } /* 58. IntroDocIcon */ .generic__intro-doc-icon { margin: 30px 0; width: 100%; display: flex; justify-content: center; } /* 59. IntroInfo */ .generic__intro-info { width: 100%; padding: 10px 20px; background-color: #edeeef; display: flex; gap: 20px; align-items: center; color: #34353a; font-size: 12px; box-sizing: border-box; margin: 30px 0; line-height: 18px; } .generic__intro-info ul { margin-top: 4px; margin-bottom: 0; padding-left: 24px; } /* 62. IntroParagraph */ .generic__intro-paragraph { margin: 0; font-size: var(--ip-font-size, inherit); text-align: var(--ip-text-align, left); font-family: var(--ip-font-family, inherit); &.centered { --ip-text-align: center; } &.font-14 { --ip-font-size: 14px; } &.font-20 { --ip-font-size: 20px; } } .generic__intro-paragraph a { color: var(--link-color); font-weight: 900; text-decoration-color: var(--link-underline-color, var(--link-color)); text-underline-offset: var(--link-underline-offset, 4px); } .generic__intro-paragraph a:hover { color: var(--link-color-hover); } /* 63. Link */ .generic__link { color: var(--link-color); text-decoration-color: var(--link-underline-color, var(--link-color)); text-underline-offset: var(--link-underline-offset, 4px); font-weight: 400; } .generic__link:hover { color: var(--link-color-hover); } .generic__link:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* 64. IntroAddressParagraph */ .generic__intro-address-paragraph { font-size: 16px; font-style: normal; font-weight: 700; line-height: 170%; max-width: 400px; margin: 0px; font-family: var(--font-family-bold); } /* 65. ParagraphCentered */ .generic__paragraph-centered { text-align: center; white-space: pre-line; &.m-0 { margin: 0; } &.m-0-0-15 { margin: 0 0 15px; } &.m-0-0-30 { margin: 0 0 30px; } } /* 66. Paragraph */ .generic__paragraph { text-align: left; line-height: 24px; white-space: pre-line; &.m-0-0-15 { margin: 0 0 15px; } &.m-0-0-24 { margin: 0 0 24px; } &.m-10-0 { margin: 10px 0; } } .generic__paragraph-with-border { display: flex; justify-content: center; align-items: center; background-color: rgba(247, 249, 252, 1); border: 1px solid rgba(183, 189, 198, 1); width: 100%; padding: 24px; box-sizing: border-box; font-weight: bold; margin: 16px 0; &.switch-to-mobile__code { font-size: 24px; letter-spacing: 10%; border-radius: 2px; line-height: 36px; } } /* 67. ErrorMessage */ .generic__error-message { color: var(--text-input-error-color, #941616); } .generic__warning-message { color: var(--text-input-warning-color, #954003); } /* 68. HorizontalBorder */ .generic__horizontal-border { width: calc(100% - 10px); height: 0px; border-top: 1px solid #ced4dc; margin: var(--hb-margin, 0 5px 20px 5px); box-sizing: border-box; &.m-30-0 { --hb-margin: 30px 0; } } /* 69. TabSwitcher */ .generic__tab-switcher { width: calc(100% + 60px); display: flex; justify-content: center; margin: 30px -30px 0 -30px; border-bottom: var(--ts-border-bottom, 2px solid #dbdbdb); } .generic__tab-switcher button { width: 160px; height: 36px; background: transparent; border: none; font-size: 14px; font-weight: 400; color: var(--ts-button-color, #9b9b9b); cursor: pointer; border-radius: 16px 16px 0 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .generic__tab-switcher button.generic__active { border-radius: 0; border-bottom: var(--ts-button-border-bottom, 4px solid #2a0760); font-weight: 700; color: var(--ts-button-color-active, #000); cursor: default; } .generic__tab-switcher button:not(.generic__active):hover { background-color: #edeeef; color: var(--ts-button-color-active, #000); } /* 70. PopupTutorial */ .generic__popup-tutorial { padding-top: 30px; max-height: calc(100vh - 300px); overflow-y: auto; } .generic__popup-tutorial img:last-child { margin-bottom: 80px; } .generic__popup-tutorial div { color: var(--pt-color, #34353a); } .generic__popup-tutorial img { max-width: 480px; margin: 10px 0 0 0; object-fit: contain; } @media (max-width: 980px) { .generic__popup-tutorial img { max-width: 100%; width: 100%; } } /* 71. LoadingOverlapWrapper */ .generic__loading-overlap-wrapper { position: relative; width: 100%; } /* 72. LoadingOverlap */ .generic__loading-overlap { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; background-color: var(--lo-bg-color, rgba(255, 255, 255, 0.5)); z-index: 1000; top: 0; left: 0; } /* 74. RequiredFooter */ .generic__required-footer { width: 100%; color: var(--input-required-text-color); font-size: var(--input-required-text-font-size, 14px); line-height: var(--rf-height, 20px); margin-top: var(--rf-margin-top, -20px); margin-bottom: 20px; font-weight: 500; } /* 75. TestProceed */ .generic__test-proceed { width: 0; height: 0; opacity: 0; position: absolute; top: 0; left: 0; } /* 76. BoldText */ .generic__bold-text { font-weight: 700; font-family: inherit; } /* 77. ZoomControlWrap */ .generic__zoom-control-wrap { width: 96px; display: flex; justify-content: center; align-items: center; gap: 8px; } /* 78. ScrollDocumentPopupTitle */ .generic__scroll-document-popup-title { color: #25292c; font-family: Inter; font-size: 16px; font-weight: 700; line-height: 24px; letter-spacing: -0.16px; } /* 79. ScrollDocumentPopup */ .generic__scroll-document-popup { --popup-width: 420px; --popup-mobile-width: 324px; } /* 80. ScrollDocumentPopupBody */ .generic__scroll-document-popup-body { color: #25292c; font-family: Inter; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -0.16px; } .generic__scroll-document-popup-body:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* 81. Spacer */ .generic__spacer { width: 100%; height: var(--sp-height, 200px); &.h-4 { --sp-height: 4px; } &.h-8 { --sp-height: 8px; } &.h-15 { --sp-height: 15px; } &.h-20 { --sp-height: 20px; } &.h-30 { --sp-height: 30px; } } /* 82. BlurOverlay */ .generic__blur-overlay { display: flex; justify-content: center; align-items: center; width: 100vw; width: 100dvw !important; height: 100vh; height: 100dvh !important; position: fixed; z-index: 2; top: 0; left: 0; background: rgba(0, 0, 0, 0.15); -webkit-backdrop-filter: blur(11px); backdrop-filter: blur(11px); } /* 83. SignDocumentHint */ .generic__sign-document-hint { display: flex; padding: 0px 16px; height: 48px; width: fit-content; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; background: #25292c; color: #fff; position: absolute; bottom: 52px; right: 40px; } .generic__sign-document-hint div { white-space: nowrap; } .generic__sign-document-hint svg { min-width: 20px; min-height: 20px; } @media (max-width: 980px) { .generic__sign-document-hint { display: none; } } /* 84. SignDocumentHintMobile */ .generic__sign-document-hint-mobile { display: flex; padding: 12px 16px; width: calc(100vw - 60px); max-width: 400px; justify-content: center; align-items: center; gap: 8px; border-radius: 8px; background: #25292c; color: #fff; position: fixed; bottom: 250px; left: 50%; transform: translateX(-50%); z-index: 4; } .generic__sign-document-hint-mobile svg { min-width: 20px; min-height: 20px; } @media (min-width: 981px) { .generic__sign-document-hint-mobile { display: none; } } /* 85. SignDocumentHintMobileButtonWrapper */ .generic__sign-document-hint-mobile-button-wrapper { min-width: 224px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } @media (max-width: 980px) { .generic__sign-document-hint-mobile-button-wrapper { width: 100%; } .generic__sign-document-hint-mobile-button-wrapper .button:disabled, .generic__sign-document-hint-mobile-button-wrapper .button[disabled] { pointer-events: none; } } /* 86. TooltipArrow */ .generic__tooltip-arrow { position: absolute; width: 0; height: 0; } .generic__tooltip-arrow[data-direction='left'] { border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 17.32px solid #25292c; left: -10px; /* Default vertical centering */ top: calc(50% - 10px); } .generic__tooltip-arrow[data-direction='right'] { border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 17.32px solid #25292c; right: -10px; /* Default vertical centering */ top: calc(50% - 10px); } .generic__tooltip-arrow[data-direction='top'] { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 17.32px solid #25292c; top: -10px; /* Default horizontal centering */ left: calc(50% - 10px); } .generic__tooltip-arrow[data-direction='bottom'] { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 17.32px solid #25292c; bottom: -10px; /* Default horizontal centering */ left: calc(50% - 10px); } /* 87. IconContainer */ .generic__icon-container { width: 100%; margin: var(--ic-margin, 30px 0); } .generic__icon-container svg { width: 100%; } .generic__icon-container svg .icon-bg-rect { rx: var(--icon-rx, 60px); } .generic__icon-container--error-margin { --ic-margin: 0 0 10px 0; } /* 88. OnboardingItemContentThemed */ .generic__onboarding-item--content-themed { --oi-font-size: var(--content-font-size); --oi-bg-color: var(--onboarding-item-bg-color); } /* 90. RequiredFooterNoTopMargin */ .generic__required-footer--no-top-margin { --rf-margin-top: 0; } .generic__go-to-mobile__icon-wrap { width: 130px; height: 130px; margin-top: 70px; svg { width: 100%; height: 100%; } } .generic__go-to-mobile__warning-line { color: #e04d39; width: 100%; text-align: center; font-family: inherit; font-size: 18px; font-style: normal; font-weight: 700; margin: 0px; font-family: var(--font-family); } .generic__go-to-mobile__subtitle { color: var(--header-color); text-align: center; font-size: 16px; font-weight: 400; font-family: var(--font-family); } .generic__easy-sign__signature-wrapper { width: 100%; min-height: 120px; position: relative; background: #f8f8f8; border-radius: 8px; } .generic__easy-sign__signature { box-sizing: border-box; pointer-events: none; min-height: 120px; width: 100%; color: #3b3b3b; display: flex; justify-content: center; align-items: center; font-size: 40px; font-family: 'Shadows Into Light', cursive; text-align: center; } .generic__onfido__mount { width: 100%; min-height: 95vh; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column-reverse; margin-top: -60px; #onfido-sdk { flex: 1; } } .generic__error-ios-browser-not-supported__wrapper { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; } .generic__error-ios-browser-not-supported__icon { display: flex; justify-content: center; align-items: center; border-radius: 50%; width: 140px; height: 140px; } .generic__bank-id-retry__button-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 40px; gap: 20px; width: 100%; } .generic__bank-id-retry__button { background-color: #2078c1; padding: 12px 36px; border-radius: 4px; width: 100%; border: none; box-shadow: none; margin: 0; color: rgba(255, 255, 255, 1); font-size: 13px; font-weight: 600; &:hover { color: rgba(255, 255, 255, 1); background-color: rgba(16, 104, 165, 1); border: none; } &:disabled { background-color: rgba(0, 111, 207, 1); border: 1px solid rgba(0, 111, 207, 1); color: rgba(255, 255, 255, 1); cursor: not-allowed; } &.cancel { background-color: transparent; color: #7b7578; text-decoration: underline; &:hover { color: #9b9598; background-color: transparent; } } } .bank-id-logo-wrapper { display: flex; align-items: center; justify-content: center; width: 100px; svg { width: 100%; } } .generic__icon-wrapper { border-radius: var(--icon-rx, 100px); background: var(--icon-background-color, #f7f9fc); width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; } html { height: fill-available; height: -webkit-fill-available; color-scheme: light dark; } body { padding: 0; margin: 0; } button, a, label { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } button { justify-content: center; } @font-face { font-family: 'MiniSansSerif'; src: url(/fonts/MINISansSerif-Regular.woff2) format('woff2'), url(/fonts/MINISansSerif-Regular.woff) format('woff'), url(/fonts/MINISansSerif-Regular.eot) format('eot'), url(/fonts/MINISansSerif-Bold.woff) format('woff'), url(/fonts/MINISansSerif-Bold.woff2) format('woff2'), url(/fonts/MINISansSerif-Bold.eot) format('eot'); } @font-face { font-family: 'IkanoSans'; font-weight: normal; font-style: normal; src: url(/fonts/IkanoSans-Regular.woff) format('woff'), url(/fonts/IkanoSans-Bold.woff) format('woff'); } @font-face { font-family: 'IkanoSansBold'; font-weight: normal; font-style: normal; src: url(/fonts/IkanoSans-Bold.woff) format('woff'); } @font-face { font-family: 'segoeui'; src: url(/fonts/segoeui.ttf) format('truetype'), url(/fonts/segoeuib.ttf) format('truetype'); } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Nunito Sans'; src: url('/fonts/NunitoSans-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Nunito Sans'; src: url('/fonts/NunitoSans-Italic-VariableFont.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Shadows Into Light'; src: url('/fonts/ShadowsIntoLight-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-VariableFont.otf') format('opentype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/fonts/Poppins-Italic-VariableFont.otf') format('opentype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/fonts/Roboto-VariableFont.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* Global checkbox & input styles (replaces InputStyle createGlobalStyle from input.styles.ts) */ input[type='checkbox'] { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .label-checkbox:has(input:checked)::before { background-color: var(--checkbox-color-active, black); border: 2px solid var(--checkbox-color-active, gray) !important; } .label-checkbox:has(input:checked)::after { content: ''; display: block; position: absolute; background-color: var(--checkbox-check-color, white); -webkit-mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3692%200.466489C11.6638%200.780755%2011.6479%201.27437%2011.3337%201.569L4.93388%207.569C4.63386%207.85029%204.16698%207.8503%203.86694%207.56903L0.666715%204.56903C0.352433%204.27441%200.336492%203.7808%200.63111%203.46652C0.925729%203.15224%201.41934%203.1363%201.73362%203.43092L4.40037%205.93081L10.2667%200.430944C10.581%200.136309%2011.0746%200.152223%2011.3692%200.466489Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E'); mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M11.3692%200.466489C11.6638%200.780755%2011.6479%201.27437%2011.3337%201.569L4.93388%207.569C4.63386%207.85029%204.16698%207.8503%203.86694%207.56903L0.666715%204.56903C0.352433%204.27441%200.336492%203.7808%200.63111%203.46652C0.925729%203.15224%201.41934%203.1363%201.73362%203.43092L4.40037%205.93081L10.2667%200.430944C10.581%200.136309%2011.0746%200.152223%2011.3692%200.466489Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; top: 7.5px; left: 4.5px; width: 11px; height: 8px; } .label-checkbox::before { width: 20px; height: 20px; content: ''; -webkit-appearance: none; appearance: none; background-color: transparent; border: 2px solid var(--checkbox-color, gray) !important; border-radius: var(--checkbox-border-radius, 0); padding: 8px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 10px; top: 1px; box-sizing: border-box; } .label-text, .label-checkbox { position: relative; display: flex; line-height: 21px; } .label-text:focus-visible, .label-checkbox:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } /* ========== PHONE INPUT ========== */ .phone-input-wrapper { scroll-margin-top: 32px; } .PhoneInput { display: flex; align-items: center; max-width: 300px; border-radius: var(--text-input-border-radius, 2px); } .PhoneInputInput { flex: 1; min-width: 0; background-color: var(--text-input-bg-color, white); padding: var(--text-input-padding, 14px); border-radius: 0 var(--text-input-border-radius, 2px) var(--text-input-border-radius, 2px) 0; border: var(--text-input-border, 2px solid rgba(206, 212, 220, 1)); border-left: none; box-shadow: var(--text-input-box-shadow, none); color: var(--text-input-color, rgba(0, 0, 0, 1)); outline: none; font: inherit; height: var(--select-input-height, 42px); box-sizing: border-box; transition: none; } .PhoneInput:hover .PhoneInputInput:not(:disabled) { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)); border-left: none; transition: none; } .PhoneInput:focus-within .PhoneInputInput { color: var(--text-input-color-focus, rgba(0, 0, 0, 1)); background-color: var(--text-input-bg-color-focus, white); border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)); border-left: none; } .PhoneInputInput:focus { outline: var(--focus-outline, none); box-shadow: var(--focus-box-shadow, 0 0 0 3px hsla(220, 100%, 50%, 50%)); transition: var(--focus-transition, box-shadow 0.3s ease); position: relative; z-index: 1; border-radius: var(--text-input-border-radius, 2px); } .PhoneInputInput:disabled { color: var(--text-input-color-disabled, rgba(206, 212, 220, 1)); background-color: var(--text-input-bg-color-disabled, rgba(248, 247, 246, 1)); border: 2px solid var(--text-input-border-disabled, rgba(206, 212, 220, 1)); border-left: none; cursor: not-allowed; } .PhoneInputCountry { display: flex; align-items: center; padding: 0 10px; background-color: var(--text-input-bg-color, white); border-radius: var(--text-input-border-radius, 2px); border: var(--text-input-border, 2px solid rgba(206, 212, 220, 1)); height: var(--select-input-height, 42px); box-sizing: border-box; cursor: pointer; position: relative; } .PhoneInputCountry:focus-within { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)); outline: var(--focus-outline, none); box-shadow: var(--focus-box-shadow, 0 0 0 3px hsla(220, 100%, 50%, 50%)); transition: var(--focus-transition, box-shadow 0.3s ease); } .PhoneInputCountrySelect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 1; } .PhoneInputCountryIcon { width: 24px; height: 18px; } .PhoneInputCountryIcon--border { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .PhoneInputCountryIconImg { width: 100%; height: 100%; object-fit: cover; } .PhoneInputCountrySelectArrow { display: block; width: 6px; height: 6px; margin-left: 8px; border-style: solid; border-color: inherit; border-width: 0 1px 1px 0; transform: rotate(45deg); opacity: 0.5; } /* ========== PHONE COUNTRY SELECT ========== */ .PhoneInput .select-input__container { width: auto; height: var(--select-input-height, 42px); flex-shrink: 0; } .PhoneInput .phone-country-select__control, .PhoneInput .select-input__container .phone-country-select__control { border: var(--text-input-border, 2px solid rgba(206, 212, 220, 1)) !important; border-right: none !important; border-radius: var(--text-input-border-radius, 2px) 0 0 var(--text-input-border-radius, 2px) !important; min-height: var(--select-input-height, 42px) !important; height: var(--select-input-height, 42px) !important; min-width: unset !important; transition: none !important; } .PhoneInput .phone-country-select__control:hover:not(.phone-country-select__control--is-disabled), .PhoneInput:hover .phone-country-select__control:not(.phone-country-select__control--is-disabled) { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)) !important; border-right: none !important; transition: none; } .PhoneInput .phone-country-select__control--is-focused, .PhoneInput:focus-within .phone-country-select__control { border: var(--text-input-border-focus, 2px solid rgba(0, 0, 0, 1)) !important; border-right: none !important; } .PhoneInput .select-input__container .phone-country-select__control.phone-country-select__control--is-focused { outline: var(--focus-outline) !important; box-shadow: var(--focus-box-shadow) !important; border-radius: var(--text-input-border-radius, 2px) !important; position: relative; z-index: 1; } .PhoneInput .phone-country-select__control--is-disabled, .PhoneInput .select-input__container .phone-country-select__control--is-disabled { border: 2px solid var(--text-input-border-disabled, rgba(206, 212, 220, 1)) !important; border-right: none !important; background-color: var(--text-input-bg-color-disabled, rgba(248, 247, 246, 1)) !important; cursor: not-allowed !important; } .PhoneInput .phone-country-select__control--is-disabled:hover { border: 2px solid var(--text-input-border-disabled, rgba(206, 212, 220, 1)) !important; border-right: none !important; } .PhoneInput .phone-country-select__value-container { padding: 0 0 0 8px; flex-wrap: nowrap; } .PhoneInput .phone-country-select__single-value { position: static; transform: none; max-width: unset; } .PhoneInput .phone-country-select__indicators { padding-right: 2px; } .PhoneInput .phone-country-select__indicator-separator { display: none; } .PhoneInput .phone-country-select__dropdown-indicator { padding: 4px 6px 4px 2px; } .PhoneInput .phone-country-select__menu { min-width: 280px; width: max-content; max-width: 320px; } .PhoneInput .phone-country-select__option { padding: 10px 12px; } .phone-country-select__item { display: flex; align-items: center; gap: 8px; } .phone-country-select__flag { width: 24px; height: 18px; object-fit: cover; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); } .phone-country-select__code { margin-left: auto; color: rgba(0, 0, 0, 0.5); font-size: 13px; flex-shrink: 0; } body { background-color: var(--bg-color, #ffffff); font-family: var(--font-family, 'Inter', sans-serif); font-size: var(--content-font-size, 16px); } body.iframe-content { background-color: #ffffff; } body.pdf-bg-override { background-color: var(--pdf-bg-color-override) !important; } @media (max-width: 980px) { body { background-color: #ffffff; font-size: var(--content-font-size-mobile, 16px); } } .mask-type-luminance { mask-type: luminance; } /* GoCardless Transaction Data Selection feature styles */ .gocardless-tds__method-container { width: 100%; display: flex; flex-direction: column; gap: 15px; } .gocardless-tds__method-item { outline: none; box-sizing: border-box; padding: 16px; display: grid; grid-template-columns: 32px 1fr 32px; grid-template-rows: auto; gap: 16px; border: 1px solid #666d78; background: #fff; transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out; border-radius: var(--gc-border-radius, 8px); } .gocardless-tds__method-item:hover { background: #f0f0f0; cursor: pointer; } .gocardless-tds__method-item:focus-visible { outline: var(--focus-outline); box-shadow: var(--focus-box-shadow); transition: var(--focus-transition); } .gocardless-tds__method-item div { display: flex; text-align: left; color: #000; font-family: var(--font-family, Inter); font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: -0.16px; justify-self: start; } .gocardless-tds__method-item > * { align-self: center; } /* Ikano feature styles */ .ikano__proceed-btn { --button-min-width: 224px; } .ikano__micropayment-info-graph { width: 100%; margin: 0 0 30px 0; } .ikano__micropayment-namensabgleich { width: 100%; margin: 30px 0 30px 0; } .ikano__tink-info { display: flex; flex-direction: column; margin: 15px 0 36px 0; } .ikano__tink-info img { width: 69px; } .ikano__center-liner { display: flex; width: 100%; justify-content: center; } .ikano__ikano-info-container { width: 100%; } @media (max-width: 900px) { .ikano__ikano-info-container { padding-top: 60px; } } .ikano__ikano-info-container svg { width: 100%; } .ikano__horizontal-icon-container { width: 100%; margin: 30px 0; display: flex; justify-content: center; align-items: center; gap: 32px; } @media (max-width: 980px) { .ikano__horizontal-icon-container { margin: 0 0 30px 0; &.init-icon { margin: 60px 0 30px 0; } } } .ikano__general-conditions-spacer-mobile { width: 100%; height: 100px; } .ikano__logo-divider { width: 100%; box-sizing: border-box; height: 1px; background-color: #ebebeb; margin: 30px 0px; } .amex__micropayment__title { color: #00175a; text-align: center; font-family: Inter; font-size: 30px; font-style: normal; font-weight: 300; line-height: 36px; /* 120% */ margin: 0 0 30px 0; } .amex__micropayment__info { margin: 0; color: #53565a; text-align: center; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: var(--Fonts-Line-height-Paragraph-4, 20px); /* 125% */ } .amex__micropayment__separator { width: 100%; border: 1px solid #e1eef9; margin: 30px 0; } /* ContentContainer */ .page-container { background-color: var(--container-bg-color, #ffffff); padding: var(--container-padding, 38px 25px); border-radius: var(--container-border-radius, 8px); min-width: auto; min-height: auto; width: var(--container-width, 100%); box-sizing: border-box; margin: var(--container-margin, 0 auto); border: var(--container-border, none); box-shadow: var(--container-box-shadow, none); color: var(--container-color, black); touch-action: auto; position: relative; } /* Width modifiers (desktop only) */ @media (min-width: 981px) { .page-container.w-500 { width: 500px; } .page-container.w-1000 { width: 1000px; } .page-container.w-100percent { width: 100%; } } /* Padding modifiers (desktop only) */ @media (min-width: 981px) { .page-container.p-0 { padding: 0; } .page-container.p-20-0 { padding: 20px 0; } .page-container.p-40 { padding: 40px; } .page-container.p-50 { padding: 50px; } } @media (max-width: 980px) { .page-container { box-sizing: border-box; width: 100%; max-width: 100%; /* min-width: auto; */ margin: var(--container-margin-mobile, 0); padding: var(--container-padding-mobile, 20px); height: auto; } .page-container.mobile-m-0 { margin: 0; } .page-container.mobile-m-10 { margin: 10px; } .page-container.mobile-m-0-0-30-0 { margin: 0 0 30px 0; } .page-container.mobile-m-auto-0 { margin: auto 0 auto; } .page-container.mobile-p-14-40 { padding-inline: 40px; padding-bottom: 14px; } .page-container.mobile-p-0 { padding: 0; } .page-container.mobile-p-140-20-20 { padding: 140px 20px 20px; } } @media (max-width: 480px) { .page-container { width: 100%; min-width: auto; min-height: auto; margin: var(--container-margin-mobile, 0px); padding: var(--container-padding-mobile, 20px); height: auto; } .page-container.mobile-m-0 { margin: 0; } .page-container.mobile-m-10 { margin: 10px; } .page-container.mobile-m-0-0-30-0 { margin: 0 0 30px 0; } .page-container.mobile-m-auto-0 { margin: auto 0 auto; } .page-container.mobile-p-14-40 { padding-inline: 40px; padding-bottom: 14px; } .page-container.mobile-p-0 { padding: 0; } .page-container.mobile-p-140-20-20 { padding: 140px 20px 20px; } } /* Touch action modifier */ .page-container.touch-scroll-disabled { touch-action: none; } .page-container.vertically-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; } .page-container.horizontally-centered { display: flex; flex-direction: column; align-items: center; } /* Full-page loading spinners: restore vertical padding that was previously passed as padding="100px 0" prop on LoadingSpinner within page containers. Only targets direct-child spinners (transition/loading screens), not inline spinners nested inside buttons or other components. */ .page-container > .loading-spinner__wrap { --spinner-wrap-padding: 100px 0; } /* Utility: zero out padding even when inside a .page-container (inline spinners) */ .loading-spinner__wrap.loading-spinner--no-padding { --spinner-wrap-padding: 0; } /* ContentRouterWrapWithBg (used inline in ContentRouter) */ .layout__content-router-wrap-with-bg { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } /* ContentWrap */ .layout__content-wrap { width: 1000px; margin: 0 auto; padding-top: var(--content-wrap-padding-top, 60px); } .layout__content-wrap-full-width { width: 100%; padding-top: 20px; } .layout__content-wrap-iframe { padding-top: 0; } .layout__content-wrap button { transition: all 0.2s ease-in-out; } .layout__content-wrap a { font-weight: 700; } @media (max-width: 980px) { .layout__content-wrap { width: 100%; min-width: auto; margin: 0; padding: 0; } .layout__content-wrap > div { height: calc(100vh - 120px); position: relative; border-bottom: none; border: none; box-shadow: none; } } /* ContentContainerBottomLeft */ .layout__content-container-bottom-left { font-size: 12px; width: 100%; } /* ContentContainerBottom */ .layout__content-container-bottom { display: flex; justify-content: flex-end; margin-bottom: 10px; padding-top: 30px; box-sizing: border-box; border-top: var(--ccb-border-top, 1px solid #ebebeb); } @media (max-width: 980px) { .layout__content-container-bottom { position: absolute; padding: 30px 20px 20px; bottom: 1px; left: 0; width: 100%; border-top: 1px solid #ebebeb; } } /* ContentContainerBottomUpload */ .layout__content-container-bottom-upload { display: flex; justify-content: flex-end; margin-bottom: 10px; box-sizing: border-box; } @media (max-width: 980px) { .layout__content-container-bottom-upload { position: absolute; padding: 30px 20px 20px; bottom: 1px; left: 0; width: 100%; } } /* MobileSpacerForContentContainerBottomFixed */ .layout__mobile-spacer-for-content-container-bottom-fixed { display: none; } @media (max-width: 980px) { .layout__mobile-spacer-for-content-container-bottom-fixed { display: block; width: 100%; height: 100px; margin: var(--mspc-margin, 10px 0); } } /* ContentContainerWithScroll */ .layout__content-container-with-scroll { /* Desktop: no special styles */ } .layout__content-container-with-scroll-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (max-width: 980px) { .layout__content-container-with-scroll { height: var(--ccws-mobile-height, calc(100vh - 120px)) !important; position: relative; border-bottom: none; border: none; box-shadow: none; overflow-y: scroll; } .layout__content-container-with-scroll::-webkit-scrollbar { width: 2px; height: 2px; } .layout__content-container-with-scroll::-webkit-scrollbar-track { background-color: white; } .layout__content-container-with-scroll::-webkit-scrollbar-thumb { background: white; } } /* ContentContainerBottomFixed */ .layout__content-container-bottom-fixed { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; padding-top: 30px; box-sizing: border-box; z-index: 1; bottom: 0; gap: var(--ccbf-mobile-gap, 0px); &.layout__content-container-bottom-fixed--border-top-none { border-top: none; } &.layout__content-container-bottom-fixed--gap-16 { --ccbf-mobile-gap: 16px; } &.layout__content-container-bottom-fixed--no-border { --ccbf-border: none; --ccbf-mobile-gap: 16px; } & > * { flex-basis: 100%; @media (max-width: 980px) { flex-basis: auto; } } } @media (max-width: 980px) { .layout__content-container-bottom-fixed { background-color: #fff; position: fixed; flex-direction: column; padding: 20px; margin-bottom: 0%; bottom: var(--ccbf-mobile-bottom, 0px); left: 0; width: 100%; gap: var(--ccbf-mobile-gap, 0px); border-top: var(--separator-border-top, 1px solid #ebebeb); } } /* ContentContainerBottomFixedCentered */ .layout__content-container-bottom-fixed-centered { display: flex; flex-direction: column; justify-content: center; margin-bottom: 10px; border-top: var(--separator-border-top, 1px solid #ebebeb); padding-top: 30px; box-sizing: border-box; z-index: 1; bottom: 0; align-items: center; } @media (max-width: 980px) { .layout__content-container-bottom-fixed-centered { background-color: #fff; position: fixed; padding: 20px; margin-bottom: 0%; bottom: var(--ccbfc-mobile-bottom, 0px); left: 0; width: 100%; gap: var(--ccbfc-mobile-gap, 0px); border-top: var(--separator-border-top, 1px solid #ebebeb); } } /* ContentContainerBottomCentered */ .layout__content-container-bottom-centered { display: flex; flex-direction: column; justify-content: center; margin: var(--ccbc-margin, 0 0 10px 0); border-top: var(--ccbc-border, 1px solid #ebebeb); padding: var(--ccbc-padding, 26px 0 0 0); box-sizing: border-box; gap: var(--ccbc-gap, 0px); align-items: center; } @media (max-width: 980px) { .layout__content-container-bottom-centered { position: absolute; padding: 26px 20px 20px; bottom: 0px; left: 0; width: 100%; border-top: none; } } /* ContentContainerBottomCenteredIkano */ .layout__content-container-bottom-centered-ikano { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-bottom: 10px; padding-top: 26px; box-sizing: border-box; } @media (max-width: 980px) { .layout__content-container-bottom-centered-ikano { position: absolute; padding: 26px 20px 20px; bottom: 0px; left: 0; width: 100%; border-top: none; } } /* VerticallyCenteredContainer */ .layout__vertically-centered-container { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* CenteredContent */ .layout__centered-content { width: 100%; display: flex; justify-content: center; margin: var(--cc-margin, 0); &.m-20-0-0-0 { --cc-margin: 20px 0 0 0; } &.m-30-0 { --cc-margin: 30px 0; } } /* ContentToRight */ .layout__content-to-right { width: 100%; display: flex; justify-content: flex-end; align-items: center; } /* PageWrap */ .layout__page-wrap { margin: 0 auto; width: var(--pw-width, 560px); } .layout__page-wrap--narrow { --pw-width: 400px; } /* Margined */ .layout__margined { margin: var(--m-margin, 0); display: flex; width: 100%; justify-content: space-between; &.m-0-0-6 { --m-margin: 0 0 6px; } &.m-0-0-15 { --m-margin: 0 0 15px; } &.m-0-0-24 { --m-margin: 0 0 24px; } &.m-0-0-30 { --m-margin: 0 0 30px; } &.m-0-0-40 { --m-margin: 0 0 40px; } &.m-0-0-50 { --m-margin: 0 0 50px; } &.m-0-0-60 { --m-margin: 0 0 60px; } &.m-0-0-80 { --m-margin: 0 0 80px; } } /* MarginedWithHeight */ .layout__margined-with-height { display: flex; width: 100%; justify-content: space-between; margin: 0 0 15px 0; height: 0; } /* MarginOnly */ .layout__margin-only { margin: var(--mo-margin, 0); display: var(--mo-display, inline-block); &.d-block { --mo-display: block; } &.m-20-0 { --mo-margin: 20px 0; } &.m-20-0-10-0 { --mo-margin: 20px 0 10px 0; } &.m-20-0-30-0 { --mo-margin: 20px 0 30px 0; } &.m-20-0-0-0 { --mo-margin: 20px 0 0 0; } &.m-10-0-20-0 { --mo-margin: 10px 0 20px 0; } &.m-0-0-20-0 { --mo-margin: 0 0 20px 0; } &.m-0-0-40-0 { --mo-margin: 0 0 40px 0; } &.m-10 { --mo-margin: 10px; } } .layout__margin-only > *:first-child { margin-top: 0; } .layout__margin-only > *:last-child { margin-bottom: 0; } /* MobileFloatingConfirmButtonWrapper */ .layout__mobile-floating-confirm-button-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; height: 96px; background-color: var(--mfcbw-bg-color, #fff); font-size: 16px; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid #ebebeb; } .layout__mobile-floating-confirm-button-wrapper button { margin: 0 20px; } /* CenteredContentColumn */ .layout__centered-content-column { width: 100%; display: flex; justify-content: center; flex-direction: column; margin: var(--ccc-margin, 0); } .layout__centered-content-column > p, .layout__centered-content-column > h1, .layout__centered-content-column > h2, .layout__centered-content-column > h3, .layout__centered-content-column > h4, .layout__centered-content-column > h5, .layout__centered-content-column > h6 { text-align: center; } /* TickAllStyle */ .layout__tick-all-style { box-sizing: border-box; padding: var(--tas-padding, 20px 0); margin: var(--tas-margin, 0); min-width: var(--tas-min-width, auto); width: var(--tas-width, 100%); height: var(--tas-height, auto); font-size: var(--tas-font-size, 14px); font-weight: var(--tas-font-weight, 500); text-decoration: var(--tas-text-decoration, none); } .layout__tick-all-style span { display: flex; align-items: center; cursor: pointer; } @media (max-width: 980px) { .layout__tick-all-style { font-size: var(--tas-font-size-mobile, 16px); width: var(--tas-width-mobile, 100%); height: var(--tas-height-mobile, auto); padding: var(--tas-padding-mobile, 14px 10px); margin: var(--tas-margin-mobile, 0); } } .flex-row-center { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; &.gap-8 { gap: 8px; } &.gap-12 { gap: 12px; } &.gap-16 { gap: 16px; } &.gap-20 { gap: 20px; } &.gap-24 { gap: 24px; } &.gap-32 { gap: 32px; } } @media (max-width: 980px) { .mobile-vertical-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } } html { height: fill-available; height: -webkit-fill-available; color-scheme: light dark; } body { padding: 0; margin: 0; } button, a, label { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } button { justify-content: center; } /* xs2a Form feature styles */ .xs2a__container { background-color: var(--container-bg-color, #ffffff); padding: var(--container-padding, 38px 25px); border-radius: var(--container-border-radius, 8px); min-width: var(--container-min-width, auto); width: var(--container-width, 100%); box-sizing: border-box; margin: var(--container-margin, 0 auto); border: var(--container-border, none); box-shadow: var(--container-box-shadow, none); color: var(--container-color, black); &.width-500 { width: 500px; padding: 40px; } &.width-560 { width: 560px; } } @media (max-width: 900px) { .xs2a__container, .xs2a__container.width-500, .xs2a__container.width-560 { width: calc(100% - 40px); height: auto !important; min-width: auto; margin: 10px 20px; padding: 15px; box-shadow: none !important; } } /* Full-page loading spinners in xs2a containers (e.g. before Tink SDK init): restore vertical padding that matches the page-container spinner rule. */ .xs2a__container > .loading-spinner__wrap { --spinner-wrap-padding: 100px 0; } @media (max-width: 600px) { .xs2a__container, .xs2a__container.width-500, .xs2a__container.width-560 { width: 100%; height: auto !important; min-width: auto; margin: 0px; padding: var(--container-padding-mobile, 20px); box-shadow: none !important; } }