.page-not-found { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; margin-top: 4.5rem; width: 65%; max-width: 440px; } .page-not-found h1 { text-align: center; font-weight: 500; } .page-not-found p { margin-top: 2rem; text-align: center; } .page-not-found img { display: block; max-width: 100%; height: auto; } .notice { background: #d36200; color: #fff; font-weight: 700; padding: 2rem; border-radius: 4px; } .webform { margin-top: 2rem; } .webform .form-wrapper, .webform .message { background-color: var(--kite-color-dark-blue-10); padding: 1rem; color: var(--kite-color-white); } .webform .form-wrapper div, .webform .message div { text-align: center; } .webform .form-wrapper div.holder, .webform .message div.holder { display: flex; flex-direction: column; align-items: flex-start; margin: 0 auto; max-width: 37.5rem; } .webform .form-wrapper div.holder.g-recaptcha, .webform .message div.holder.g-recaptcha { margin-bottom: 1rem; } .webform .form-wrapper h2, .webform .message h2 { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .webform .form-wrapper h2, .webform .message h2 { font-size: 1.5rem; line-height: 1.25; } } @media only screen and (min-width: 52.5rem) { .webform .form-wrapper, .webform .message { padding: 4rem; } } .webform .form-wrapper input, .webform .form-wrapper textarea, .webform .message input, .webform .message textarea { font-weight: 400; font-size: 1rem; line-height: 1.625; font-weight: 400; padding: 0.25rem; width: 100%; } .webform .form-wrapper input:read-only, .webform .form-wrapper textarea:read-only, .webform .message input:read-only, .webform .message textarea:read-only { display: none; } .webform .form-wrapper fieldset, .webform .message fieldset { max-width: 37.5rem; margin: 4rem auto 2rem auto; } .webform .form-wrapper .contact, .webform .message .contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .webform .form-wrapper .contact div, .webform .message .contact div { flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 2rem); min-width: 250px; align-items: flex-start; } .webform .form-wrapper .visually-hidden, .webform .message .visually-hidden { display: block; max-width: 1px; max-height: 1px; overflow: hidden; } .webform .form-wrapper legend, .webform .message legend { text-align: center; margin: 0 auto; } .webform .form-wrapper legend:not(.visually-hidden), .webform .message legend:not(.visually-hidden) { margin-bottom: 2rem; } .webform .form-wrapper textarea, .webform .message textarea { margin: 1rem auto 4rem auto; } .webform .form-wrapper .button-holder, .webform .message .button-holder { text-align: left; max-width: 37.5rem; margin: 0 auto; } .webform .message { display: flex; flex-direction: column; align-items: center; } .webform .message .kite-icon { margin-bottom: 2rem; } .webform .message .kite-icon.success { color: var(--kite-color-positive); } .webform .message .kite-icon.fail { color: var(--kite-color-red-20) -dark; } .webform .loader { height: 12rem; position: relative; background-color: var(--kite-color-dark-blue-10); } .opt-box.hidden { overflow: hidden; max-height: 0; } @charset "UTF-8"; /** * Do not edit directly, this file was auto-generated. */ /** * Do not edit directly, this file was auto-generated. */ /** * Do not edit directly, this file was auto-generated. */ /** * Do not edit directly, this file was auto-generated. */ /** * Do not edit directly, this file was auto-generated. */ /** * Do not edit directly, this file was auto-generated. */ .kite-theme, .kite-theme--white { --kite-border-style-solid: solid; --kite-border-style-dashed: dashed; --kite-border-width-none: 0; --kite-color-dark-blue-10: #003561; --kite-color-dark-blue-20: #002747; --kite-color-dark-blue-30: #001221; --kite-color-blue-10: #31a2ff; --kite-color-blue-20: #0073d1; --kite-color-blue-30: #0062b2; --kite-color-light-blue-10: #b7cee5; --kite-color-light-blue-20: #5db8fc; --kite-color-light-blue-00: #e8f8ff; --kite-color-green-10: #00bf1f; --kite-color-green-20: #008516; --kite-color-green-00: #e8ffe8; --kite-color-yellow-10: #ffd400; --kite-color-yellow-20: #faa41a; --kite-color-yellow-00: #fff3e0; --kite-color-red-10: #ff4d4a; --kite-color-red-20: #d6312b; --kite-color-red-00: #ffefef; --kite-color-gray-10: #f8f8f8; --kite-color-gray-20: #d8dde6; --kite-color-gray-25: #9ba9bd; --kite-color-gray-30: #63738a; --kite-color-white: #ffffff; --kite-color-black: #000000; --kite-color-life-unlimited-accent-electric-blue: #0271eb; --kite-color-life-unlimited-accent-green: #03c252; --kite-color-life-unlimited-accent-orange: #ff8331; --kite-color-life-unlimited-accent-purple: #887dff; --kite-color-life-unlimited-accent-yellow: #ffcb3e; --kite-color-life-unlimited-primary-midnight-blue: #002139; --kite-color-life-unlimited-primary-white: #ffffff; --kite-color-life-unlimited-support-light-gray: #d5d5d5; --kite-color-negative-focus: #b00300; /** Focus state of negative color */ --kite-color-negative-hover: #b00300; /** Hover state of negative color */ --kite-color-negative-press: #b00300; /** Pressed state of negative color */ --kite-cubic-bezier-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --kite-cubic-bezier-ease-out: cubic-bezier(0, 0, 0.58, 1); --kite-cubic-bezier-ease-in: cubic-bezier(0.42, 0, 1, 1); --kite-duration-200: 200ms; --kite-duration-400: 400ms; --kite-duration-750: 750ms; --kite-font-family-spectrum-sans: "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --kite-font-family-monospace: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; --kite-font-family-rutledge: Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /** @deprecated: Spectrum Sans is the default font */ --kite-font-size-base: 16; --kite-font-size-px: 16px; --kite-font-size-rem: 1rem; --kite-font-style-normal: normal; --kite-font-style-italic: italic; --kite-font-weight-light: 300; --kite-font-weight-book: 350; --kite-font-weight-regular: 400; --kite-font-weight-medium: 500; --kite-font-weight-semi-bold: 600; /** @deprecated: Replace with 'font-weight-bold' token */ --kite-font-weight-bold: 700; --kite-font-weight-extra-bold: 800; --kite-font-weight-normal: 400; /** @deprecated: Rutledge font is deprecated. Use the 'font-weight-regular' token with Spectrum Sans font. */ --kite-letter-spacing-normal: normal; --kite-letter-spacing-sm: -0.0625rem; --kite-tracking-sm: -0.0625rem; /** @deprecated: Replace with 'letter-spacing-sm' token */ --kite-tracking-normal: normal; /** @deprecated: Replace with 'letter-spacing-normal' token */ --kite-tracking-md: normal; /** @deprecated: Replace with 'letter-spacing-normal' token */ --kite-size-1: 0.0625rem; --kite-size-2: 0.125rem; --kite-size-4: 0.25rem; --kite-size-8: 0.5rem; --kite-size-12: 0.75rem; --kite-size-14: 0.875rem; --kite-size-16: 1rem; --kite-size-20: 1.25rem; --kite-size-24: 1.5rem; --kite-size-32: 2rem; --kite-size-40: 2.5rem; --kite-size-48: 3rem; --kite-size-percent-50: 50%; --kite-size-radius-pill: 624.9375rem; --kite-size-touch-target: 2.75rem; /** Tap target size for elements that rely on height or line-height */ --kite-focus-ring-inset: -0.125rem; /** Default inset for an 'inner' focus ring in some focused UI elements */ --kite-motion-duration-fast: 300ms; /** @deprecated: Replace with "motion-fast" token */ --kite-motion-duration-faster: 225ms; /** @deprecated: Replace with "motion-faster" token */ --kite-motion-duration-fastest: 195ms; /** @deprecated: Replace with "motion-fastest" token */ --kite-motion-curve-default: cubic-bezier(0.4, 0, 0.2, 1); /** @deprecated: Replace with "motion-standard" token */ --kite-motion-curve-deceleration: cubic-bezier(0, 0, 0.2, 1); /** @deprecated: Replace with "motion-entry" token */ --kite-motion-curve-acceleration: cubic-bezier(0.4, 0, 1, 1); /** @deprecated: Replace with "motion-exit" token */ --kite-motion-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1); /** @deprecated: Replace with "motion-exit" token, or custom curve: cubic-bezier(0.4, 0, 0.6, 1) */ --kite-layout-sm: 4rem; --kite-layout-md: 6rem; --kite-layout-lg: 8rem; --kite-layout-xl: 10rem; --kite-layout-2xl: 12rem; --kite-spacing-section-sm: 4rem; /** @deprecated: Replace with 'layout-sm' token */ --kite-spacing-section-md: 5rem; /** @deprecated: Replace with 'layout-md' token */ --kite-spacing-section-lg: 6.25rem; /** @deprecated: Replace with 'layout-md' token */ --kite-spacing-section-xl: 7.5rem; /** @deprecated: Replace with 'layout-lg' token */ --kite-my-component-margin-top: 0; --kite-my-component-margin-right: 0; --kite-my-component-margin-bottom: 0; --kite-my-component-margin-left: 0; --kite-my-component-disabled-cursor: not-allowed; --kite-my-component-cursor: pointer; --kite-my-component-my-deprecated-token-name: "deprecatedValue"; /** @deprecated: Replace with 'new-token-name' token */ --kite-breakpoint-xs-min: 0; --kite-breakpoint-xs-max: 479px; --kite-breakpoint-sm-min: 480px; --kite-breakpoint-sm-max: 599px; --kite-breakpoint-md-min: 600px; --kite-breakpoint-md-max: 839px; --kite-breakpoint-lg-min: 840px; --kite-breakpoint-lg-max: 959px; --kite-breakpoint-xl-min: 960px; --kite-breakpoint-xl-max: 1279px; --kite-breakpoint-2xl-min: 1280px; --kite-zindex-deepdive: -99999; --kite-zindex-default: 1; --kite-zindex-sticky: 1000; /** Stickied elements, like headers */ --kite-zindex-dropdown: 1100; --kite-zindex-dialog-backdrop: 1200; --kite-zindex-dialog: 1300; --kite-zindex-notification: 1600; --kite-zindex-moonshot: 99999; --kite-cursor-action: pointer; --kite-cursor-disabled: not-allowed; /** Cursor used for disabled UI elements */ --kite-elevation-0: none; --kite-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.1); --kite-elevation-2: 0 2px 8px 0 rgba(0, 0, 0, 0.1); --kite-elevation-3: 0 3px 12px 0 rgba(0, 0, 0, 0.1); --kite-elevation-4: 0 24px 24px 0 rgba(0, 0, 0, 0.1); --kite-form-control-text-line-height: 1.25; --kite-form-control-text-overflow: clip; --kite-form-control-border-radius: 0; --kite-form-control-margin-top: 0; --kite-form-control-margin-right: 0; --kite-form-control-margin-bottom: 0; --kite-form-control-margin-left: 0; --kite-form-control-max-width: 18rem; --kite-form-control-addon-padding-top: 0; --kite-form-control-addon-padding-bottom: 0; --kite-form-control-helper-text-size: 0.75rem; --kite-form-control-helper-text-line-height: 1.333; --kite-form-control-picker-transition-target-property: opacity; --kite-form-control-picker-min-width: 18rem; --kite-form-control-picker-backdrop-opacity: 0.8; --kite-form-control-picker-list-item-padding-top: 0.625rem; --kite-form-control-picker-list-item-padding-bottom: 0.625rem; --kite-form-control-picker-list-item-padding-left: 0; --kite-form-control-input-max-width: 18rem; /** @deprecated: Replace with "form-control-max-width" token */ --kite-grid-xs-columns: 4; --kite-grid-sm-columns: 4; --kite-grid-md-columns: 4; --kite-grid-lg-columns: 12; --kite-grid-xl-columns: 12; --kite-grid-2xl-columns: 12; --kite-grid-xxl-columns: 12; /** @deprecated: Replace with "grid-2xl-columns" token */ --kite-typography-sm-display-size: 3rem; --kite-typography-sm-display-line-height: 1.25; --kite-typography-sm-title-1-size: 2.625rem; --kite-typography-sm-title-1-line-height: 1.238; --kite-typography-sm-title-2-size: 2rem; --kite-typography-sm-title-2-line-height: 1.25; --kite-typography-sm-title-3-size: 1.75rem; --kite-typography-sm-title-3-line-height: 1.286; --kite-typography-sm-title-4-size: 1.5rem; --kite-typography-sm-title-4-line-height: 1.333; --kite-typography-sm-title-5-size: 1.25rem; --kite-typography-sm-title-5-line-height: 1.4; --kite-typography-sm-title-6-size: 1.125rem; --kite-typography-sm-title-6-line-height: 1.333; --kite-typography-sm-body-display-size: 1.25rem; --kite-typography-sm-body-display-line-height: 1.6; --kite-typography-sm-body-size: 1rem; --kite-typography-sm-body-line-height: 1.5; --kite-typography-sm-eyebrow-size: 0.875rem; --kite-typography-sm-eyebrow-line-height: 1.429; --kite-typography-sm-eyebrow-text-transform: uppercase; --kite-typography-sm-caption-1-size: 0.875rem; --kite-typography-sm-caption-1-line-height: 1.429; --kite-typography-sm-caption-2-size: 0.75rem; --kite-typography-sm-caption-2-line-height: 1.333; --kite-typography-lg-display-size: 4rem; --kite-typography-lg-display-line-height: 1.125; --kite-typography-lg-title-1-size: 3rem; --kite-typography-lg-title-1-line-height: 1.167; --kite-typography-lg-title-2-size: 2.625rem; --kite-typography-lg-title-2-line-height: 1.238; --kite-typography-lg-title-3-size: 2.25rem; --kite-typography-lg-title-3-line-height: 1.111; --kite-typography-lg-title-4-size: 1.75rem; --kite-typography-lg-title-4-line-height: 1.286; --kite-typography-lg-title-5-size: 1.5rem; --kite-typography-lg-title-5-line-height: 1.333; --kite-typography-lg-title-6-size: 1.25rem; --kite-typography-lg-title-6-line-height: 1.4; --kite-typography-lg-body-display-size: 1.25rem; --kite-typography-lg-body-display-line-height: 1.6; --kite-typography-lg-body-size: 1rem; --kite-typography-lg-body-line-height: 1.5; --kite-typography-lg-eyebrow-size: 1rem; --kite-typography-lg-eyebrow-line-height: 1.5; --kite-typography-lg-eyebrow-text-transform: uppercase; --kite-typography-lg-caption-1-size: 0.875rem; --kite-typography-lg-caption-1-line-height: 1.429; --kite-typography-lg-caption-2-size: 0.75rem; --kite-typography-lg-caption-2-line-height: 1.333; --kite-typography-sm-caption-size: 0.875rem; /** @deprecated: Replace with 'typography-sm-caption-1-size' token */ --kite-typography-sm-caption-line-height: 1.429; /** @deprecated: Replace with 'typography-sm-caption-1-line-height' token */ --kite-typography-lg-caption-size: 0.875rem; /** @deprecated: Replace with 'typography-lg-caption-1-size' token */ --kite-typography-lg-caption-line-height: 1.429; /** @deprecated: Replace with 'typography-lg-caption-1-line-height' token */ --kite-typography-rutledge-sm-display-size: 3rem; --kite-typography-rutledge-sm-display-line-height: 1.25; --kite-typography-rutledge-sm-title-1-size: 2.5rem; --kite-typography-rutledge-sm-title-1-line-height: 1.3; --kite-typography-rutledge-sm-title-2-size: 2.25rem; --kite-typography-rutledge-sm-title-2-line-height: 1.222; --kite-typography-rutledge-sm-title-3-size: 2rem; --kite-typography-rutledge-sm-title-3-line-height: 1.25; --kite-typography-rutledge-sm-title-4-size: 1.75rem; --kite-typography-rutledge-sm-title-4-line-height: 1.286; --kite-typography-rutledge-sm-title-5-size: 1.5rem; --kite-typography-rutledge-sm-title-5-line-height: 1.25; --kite-typography-rutledge-sm-title-6-size: 1.25rem; --kite-typography-rutledge-sm-title-6-line-height: 1.3; --kite-typography-rutledge-sm-body-display-size: 1.25rem; --kite-typography-rutledge-sm-body-display-line-height: 1.3; --kite-typography-rutledge-sm-body-size: 1rem; --kite-typography-rutledge-sm-body-line-height: 1.5; --kite-typography-rutledge-sm-eyebrow-size: 0.875rem; --kite-typography-rutledge-sm-eyebrow-style: uppercase; --kite-typography-rutledge-sm-eyebrow-line-height: 1.571; --kite-typography-rutledge-sm-caption-size: 0.875rem; --kite-typography-rutledge-sm-caption-line-height: 1.571; --kite-typography-rutledge-lg-display-size: 4rem; --kite-typography-rutledge-lg-display-line-height: 1.125; --kite-typography-rutledge-lg-title-1-size: 3rem; --kite-typography-rutledge-lg-title-1-line-height: 1.25; --kite-typography-rutledge-lg-title-2-size: 2.5rem; --kite-typography-rutledge-lg-title-2-line-height: 1.25; --kite-typography-rutledge-lg-title-3-size: 2.25rem; --kite-typography-rutledge-lg-title-3-line-height: 1.222; --kite-typography-rutledge-lg-title-4-size: 2rem; --kite-typography-rutledge-lg-title-4-line-height: 1.25; --kite-typography-rutledge-lg-title-5-size: 1.5rem; --kite-typography-rutledge-lg-title-5-line-height: 1.25; --kite-typography-rutledge-lg-title-6-size: 1.25rem; --kite-typography-rutledge-lg-title-6-line-height: 1.3; --kite-typography-rutledge-lg-body-display-size: 1.25rem; --kite-typography-rutledge-lg-body-display-line-height: 1.3; --kite-typography-rutledge-lg-body-size: 1rem; --kite-typography-rutledge-lg-body-line-height: 1.5; --kite-typography-rutledge-lg-eyebrow-size: 1rem; --kite-typography-rutledge-lg-eyebrow-style: uppercase; --kite-typography-rutledge-lg-eyebrow-line-height: 1.5; --kite-typography-rutledge-lg-caption-size: 0.875rem; --kite-typography-rutledge-lg-caption-line-height: 1.429; --kite-typography-rutledge-xxs-title-1-size: 1.3125rem; --kite-typography-rutledge-xxs-title-1-line-height: 1.333; --kite-typography-rutledge-xxs-title-2-size: 1.125rem; --kite-typography-rutledge-xxs-title-2-line-height: 1.5; --kite-typography-rutledge-xxs-title-3-size: 1rem; --kite-typography-rutledge-xxs-title-3-line-height: 1.5; --kite-typography-rutledge-xxs-title-4-size: 0.875rem; --kite-typography-rutledge-xxs-title-4-line-height: 1.5; --kite-typography-rutledge-xxs-title-5-size: 0.875rem; --kite-typography-rutledge-xxs-title-5-line-height: 1.5; --kite-typography-rutledge-xxs-body-size: 0.875rem; --kite-typography-rutledge-xxs-body-line-height: 1.5; --kite-typography-rutledge-xxs-eyebrow-size: 0.8125rem; --kite-typography-rutledge-xxs-eyebrow-style: uppercase; --kite-typography-rutledge-xxs-eyebrow-line-height: 1.538; --kite-typography-rutledge-xxs-caption-size: 0.75rem; --kite-typography-rutledge-xxs-caption-line-height: 1.5; --kite-typography-rutledge-xs-title-1-size: 1.4375rem; --kite-typography-rutledge-xs-title-1-line-height: 1.304; --kite-typography-rutledge-xs-title-2-size: 1.1875rem; --kite-typography-rutledge-xs-title-2-line-height: 1.421; --kite-typography-rutledge-xs-title-3-size: 1.0625rem; --kite-typography-rutledge-xs-title-3-line-height: 1.471; --kite-typography-rutledge-xs-title-4-size: 0.9375rem; --kite-typography-rutledge-xs-title-4-line-height: 1.533; --kite-typography-rutledge-xs-title-5-size: 0.9375rem; --kite-typography-rutledge-xs-title-5-line-height: 1.533; --kite-typography-rutledge-xs-body-size: 0.9375rem; --kite-typography-rutledge-xs-body-line-height: 1.533; --kite-typography-rutledge-xs-eyebrow-size: 0.8125rem; --kite-typography-rutledge-xs-eyebrow-style: uppercase; --kite-typography-rutledge-xs-eyebrow-line-height: 1.538; --kite-typography-rutledge-xs-caption-size: 0.75rem; --kite-typography-rutledge-xs-caption-line-height: 1.5; --kite-typography-rutledge-md-title-1-size: 2.25rem; --kite-typography-rutledge-md-title-1-line-height: 1.25; --kite-typography-rutledge-md-title-2-size: 1.75rem; --kite-typography-rutledge-md-title-2-line-height: 1.286; --kite-typography-rutledge-md-title-3-size: 1.5rem; --kite-typography-rutledge-md-title-3-line-height: 1.292; --kite-typography-rutledge-md-title-4-size: 1.25rem; --kite-typography-rutledge-md-title-4-line-height: 1.05; --kite-typography-rutledge-md-title-5-size: 1rem; --kite-typography-rutledge-md-title-5-line-height: 1.5; --kite-typography-rutledge-md-body-size: 1rem; --kite-typography-rutledge-md-body-line-height: 1.5; --kite-typography-rutledge-md-eyebrow-size: 0.875rem; --kite-typography-rutledge-md-eyebrow-style: uppercase; --kite-typography-rutledge-md-eyebrow-line-height: 1.5; --kite-typography-rutledge-md-caption-size: 0.75rem; --kite-typography-rutledge-md-caption-line-height: 1.75; --kite-typography-rutledge-xl-title-1-size: 3.5rem; --kite-typography-rutledge-xl-title-1-line-height: 1.393; --kite-typography-rutledge-xl-title-2-size: 2.625rem; --kite-typography-rutledge-xl-title-2-line-height: 1.429; --kite-typography-rutledge-xl-title-3-size: 2.25rem; --kite-typography-rutledge-xl-title-3-line-height: 1.056; --kite-typography-rutledge-xl-title-4-size: 1.75rem; --kite-typography-rutledge-xl-title-4-line-height: 0.964; --kite-typography-rutledge-xl-title-5-size: 1.5rem; --kite-typography-rutledge-xl-title-5-line-height: 1; --kite-typography-rutledge-xl-body-size: 1.5rem; --kite-typography-rutledge-xl-body-line-height: 1.333; --kite-typography-rutledge-xl-eyebrow-size: 1.375rem; --kite-typography-rutledge-xl-eyebrow-style: uppercase; --kite-typography-rutledge-xl-eyebrow-line-height: 1.091; --kite-typography-rutledge-xl-caption-size: 1.25rem; --kite-typography-rutledge-xl-caption-line-height: 1.2; --kite-accordion-background-color: rgba(0, 0, 0, 0); --kite-accordion-border-radius: 0; --kite-accordion-margin-top: 0; --kite-accordion-margin-right: 0; --kite-accordion-margin-bottom: 0; --kite-accordion-margin-left: 0; --kite-accordion-hover-background-color: rgba(0, 18, 33, 0.02); --kite-accordion-trigger-width: 100%; --kite-accordion-expanded-padding-top: 0; --kite-accordion-hover-background-opacity: 0.02; /** @deprecated: Replace with "accordion-hover-background-color" token */ --kite-accordion-hover-background-opacity-dark: 0.05; /** @deprecated: Replace with "accordion-hover-background" token */ --kite-alert-margin-top: 0; --kite-alert-margin-right: 0; --kite-alert-margin-bottom: 0; --kite-alert-margin-left: 0; --kite-alert-text-align: left; --kite-alert-border-left-style: solid; --kite-alert-dismiss-icon-margin-right: 0; --kite-alert-passive-margin-top: 0; --kite-alert-passive-min-width: 17.5rem; --kite-alert-passive-breakpoint-lg-margin-bottom: 0; --kite-alert-passive-breakpoint-lg-margin-left: 0; --kite-alert-passive-breakpoint-lg-max-width: 31.25rem; --kite-alert-passive-breakpoint-lg-offset-x: 0; --kite-alert-passive-breakpoint-lg-offset-y: 0; --kite-alert-passive-offset-x: 0; --kite-alert-passive-offset-y: 0; --kite-alert-passive-timeout: 0; --kite-alert-page-border-style: solid; /** @deprecated: Replace with "alert-border-style" token */ --kite-alert-page-border-left-style: solid; /** @deprecated: Replace with "alert-border-left-style" token */ --kite-badge-border-color: rgba(0, 0, 0, 0); --kite-badge-margin-top: 0; --kite-badge-margin-bottom: 0; --kite-blockquote-background-color: rgba(0, 0, 0, 0); --kite-blockquote-border-color: rgba(0, 0, 0, 0); --kite-blockquote-border-radius: 0; --kite-blockquote-border-width: 0; --kite-blockquote-cite-punctuation: "— "; --kite-blockquote-cite-text-size: 80%; --kite-button-text-align: left; --kite-button-text-line-height: 1.5; --kite-button-border-color: rgba(0, 0, 0, 0); --kite-button-margin-top: 0; --kite-button-margin-right: 0; --kite-button-margin-bottom: 0; --kite-button-margin-left: 0; --kite-button-padding-top: 0.625rem; --kite-button-padding-bottom: 0.625rem; --kite-button-width: 100%; --kite-button-secondary-background-color: rgba(0, 0, 0, 0); --kite-button-borderless-background-color: rgba(0, 0, 0, 0); --kite-button-shrinkwrap-width: auto; --kite-button-shrinkwrap-min-width-sm: 5.625rem; --kite-button-shrinkwrap-min-width-md: 8.125rem; --kite-button-shrinkwrap-min-width-lg: 13.125rem; --kite-button-shrinkwrap-min-width-xl: 18rem; --kite-button-primary-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-border-color' token */ --kite-button-primary-active-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-press-border-color' token */ --kite-button-primary-disabled-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-disabled-border-color' token */ --kite-button-primary-focus-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-focus-border-color' token */ --kite-button-primary-hover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-hover-border-color' token */ --kite-button-secondary-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-background-color' token */ --kite-button-secondary-active-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-press-border-color' token */ --kite-button-secondary-disabled-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-disabled-background-color' token */ --kite-button-secondary-focus-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-focus-border-color' token */ --kite-button-secondary-hover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-hover-border-color' token */ --kite-button-borderless-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-background-color' token */ --kite-button-borderless-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-border-color' token */ --kite-button-borderless-active-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-press-background-color' token */ --kite-button-borderless-active-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-press-border-color' token */ --kite-button-borderless-disabled-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-disabled-background-color' token */ --kite-button-borderless-disabled-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-disabled-border-color' token */ --kite-button-borderless-focus-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-focus-background-color' token */ --kite-button-borderless-focus-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-focus-border-color' token */ --kite-button-borderless-hover-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-hover-background-color' token */ --kite-button-borderless-hover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-hover-border-color' token */ --kite-calendar-margin-top: 0; --kite-calendar-margin-right: 0; --kite-calendar-margin-bottom: 0; --kite-calendar-margin-left: 0; --kite-calendar-day-text-align: center; --kite-calendar-day-due-text-size: 0.625rem; --kite-calendar-day-due-text-line-height: 1.3; --kite-calendar-day-due-text-transform: uppercase; --kite-calendar-day-due-offset: 0.3125rem; --kite-calendar-feedback-padding-bottom: 0; --kite-calendar-month-year-margin-right: 0; --kite-calendar-month-year-margin-left: 0; --kite-calendar-standalone-padding-top: 0; --kite-calendar-standalone-padding-right: 0; --kite-calendar-standalone-padding-left: 0; --kite-calendar-standalone-min-width: 18rem; --kite-calendar-standalone-min-height: 18.625rem; --kite-calendar-day-disabled-text-decoration-line: line-through; /** @deprecated: Replace with 'calendar-day-unavailable-text-decoration-line' token */ --kite-card-margin-top: 0; --kite-card-margin-right: 0; --kite-card-margin-bottom: 0; --kite-card-margin-left: 0; --kite-checkbox-background-color: rgba(0, 0, 0, 0); --kite-checkbox-margin-top: 0; --kite-checkbox-margin-right: 0; --kite-checkbox-margin-left: 0; --kite-checkbox-hover-background: rgba(0, 0, 0, 0); --kite-checkbox-label-margin-bottom: 0; --kite-checkbox-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "checkbox-background-color" token */ --kite-chip-margin-top: 0; --kite-chip-margin-left: 0; --kite-chip-focus-ring-offset: 0.375rem; --kite-chip-selected-padding-right: 1.1875rem; --kite-chip-selected-padding-left: 1.1875rem; --kite-chip-icon-width: 1.125rem; --kite-chip-icon-height: 1.125rem; --kite-chip-multiline-height: auto; --kite-combobox-margin-top: 0; --kite-combobox-margin-right: 0; --kite-combobox-margin-bottom: 0; --kite-combobox-margin-left: 0; --kite-combobox-picker-offset-x: 0; --kite-data-table-text-align: left; --kite-data-table-text-line-height: 1.571; --kite-data-table-border-radius: 0; --kite-data-table-margin-top: 0; --kite-data-table-margin-right: 0; --kite-data-table-margin-bottom: 0; --kite-data-table-margin-left: 0; --kite-data-table-scroll-shadow: inset -14px 0 10px -14px rgba(0, 0, 0, 0.2); --kite-data-table-scroll-shadow-width: 5px; --kite-data-table-menu-cell-padding-right: 0; --kite-data-table-menu-cell-padding-left: 0; --kite-data-table-menu-column-padding-top: 0; --kite-data-table-menu-column-padding-right: 0; --kite-data-table-menu-column-padding-bottom: 0; --kite-data-table-menu-column-padding-left: 0; --kite-data-table-menu-column-width: 2.75rem; --kite-data-table-title-row-border-bottom-style: solid; /** @deprecated: Replace with "data-table-header-border-bottom-style" token */ --kite-date-input-margin-top: 0; --kite-date-input-margin-right: 0; --kite-date-input-margin-bottom: 0; --kite-date-input-margin-left: 0; --kite-date-input-picker-padding-top: 0; --kite-date-input-label-height: 1.5rem; --kite-dialog-text-align: left; --kite-dialog-text-line-height: 1.625; --kite-dialog-border-radius: 0; --kite-dialog-margin-top: 0; --kite-dialog-margin-right: 0; --kite-dialog-margin-bottom: 0; --kite-dialog-margin-left: 0; --kite-dialog-max-width: 42.5rem; /** 6 of 12 columns */ --kite-dialog-breakpoint-md-width: 75%; /** 3 of 4 columns */ --kite-dialog-breakpoint-md-max-height: 72%; --kite-dialog-breakpoint-lg-width: 66.66%; /** 8 of 12 columns */ --kite-dialog-breakpoint-lg-max-height: 72%; --kite-dialog-breakpoint-xl-width: 66.66%; /** 8 of 12 columns */ --kite-dialog-breakpoint-xl-max-height: 84%; --kite-dialog-breakpoint-2xl-width: 50%; /** 6 of 12 columns */ --kite-dialog-breakpoint-2xl-max-height: 84%; --kite-dialog-position-x: center; --kite-dialog-position-y: center; --kite-dialog-transition-duration: 0; --kite-dialog-overlay-opacity: 0.8; --kite-dialog-content-padding-top: 0; --kite-dialog-button-min-width: 15.25rem; --kite-dialog-full-size-width: 100%; /** @deprecated: Replace with "dialog-width" token */ --kite-dialog-full-size-height: 100%; /** @deprecated: Replace with "dialog-height" token */ --kite-dialog-default-size-md-max-height: 72%; /** @deprecated: Replace with "dialog-breakpoint-md-max-height" token */ --kite-dialog-default-size-lg-max-height: 72%; /** @deprecated: Replace with "dialog-breakpoint-lg-max-height" token */ --kite-dialog-default-size-xl-max-height: 84%; /** @deprecated: Replace with "dialog-breakpoint-xl-max-height" token */ --kite-dialog-default-size-xxl-max-height: 84%; /** @deprecated: Replace with "dialog-breakpoint-2xl-max-height" token */ --kite-dropdown-text-overflow: ellipsis; --kite-dropdown-margin-top: 0; --kite-dropdown-margin-right: 0; --kite-dropdown-margin-left: 0; --kite-dropdown-list-min-width: 10.5rem; --kite-dropdown-list-activated-opacity: 1; --kite-dropdown-list-opacity: 0; --kite-dropdown-list-transition-target-property: opacity; --kite-dropdown-list-item-padding-left: 0; --kite-dropdown-inline-background-color: rgba(0, 0, 0, 0); --kite-dropdown-inline-border-color: rgba(0, 0, 0, 0); --kite-dropdown-inline-margin-top: 0; --kite-dropdown-inline-margin-right: 0; --kite-dropdown-inline-margin-bottom: 0; --kite-dropdown-inline-margin-left: 0; --kite-dropdown-inline-padding-top: 0; --kite-dropdown-inline-padding-right: 0; --kite-dropdown-inline-padding-bottom: 0; --kite-dropdown-inline-padding-left: 0; --kite-dropdown-inline-disabled-background-color: rgba(0, 0, 0, 0); --kite-dropdown-list-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with "dropdown-list-elevation" token */ --kite-dropdown-list-hidden-opacity: 0; /** @deprecated: Replace with "dropdown-list-opacity" token */ --kite-dropdown-list-visible-opacity: 1; /** @deprecated: Replace with "dropdown-list-activated-opacity" token */ --kite-dropdown-inline-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dropdown-inline-background-color" token */ --kite-dropdown-inline-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dropdown-inline-border-color" token */ --kite-dynamic-hint-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dynamic-hint-border-color" token */ --kite-dynamic-hint-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with "dynamic-hint-elevation" token */ --kite-dynamic-hint-arrow-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dynamic-hint-arrow-border-color" token */ --kite-interactive-list-background-color: rgba(0, 0, 0, 0); /** @deprecated: Replace with "list-background-color" token */ --kite-interactive-list-border-radius: 0; /** @deprecated: Replace with "list-border-radius" token */ --kite-interactive-list-margin-top: 0; /** @deprecated: Replace with "list-margin-top" token */ --kite-interactive-list-margin-right: 0; /** @deprecated: Replace with "list-margin-right" token */ --kite-interactive-list-margin-bottom: 0; /** @deprecated: Replace with "list-margin-bottom" token */ --kite-interactive-list-margin-left: 0; /** @deprecated: Replace with "list-margin-left" token */ --kite-interactive-list-padding-top: 0; /** @deprecated: Replace with "list-padding-top" token */ --kite-interactive-list-padding-right: 0; /** @deprecated: Replace with "list-padding-right" token */ --kite-interactive-list-padding-bottom: 0; /** @deprecated: Replace with "list-padding-bottom" token */ --kite-interactive-list-padding-left: 0; /** @deprecated: Replace with "list-padding-left" token */ --kite-interactive-list-item-background-color: rgba(0, 0, 0, 0); /** @deprecated: Replace with "list-item-background-color" token */ --kite-interactive-list-item-margin-top: 0; /** @deprecated: Replace with "list-item-margin-top" token */ --kite-interactive-list-item-margin-right: 0; /** @deprecated: Replace with "list-item-margin-right" token */ --kite-interactive-list-item-margin-bottom: 0; /** @deprecated: Replace with "list-item-margin-bottom" token */ --kite-interactive-list-item-margin-left: 0; /** @deprecated: Replace with "list-item-margin-left" token */ --kite-interactive-list-item-title-text-line-height: 1.2; /** @deprecated: Replace with "list-item-title-text-line-height" token */ --kite-interactive-list-item-hover-background-color: rgba(0, 18, 33, 0.02); /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-interactive-list-item-breakpoint-md-title-text-line-height: 1.2; /** @deprecated: Replace with "list-item-breakpoint-md-title-line-height" token */ --kite-interactive-list-image-max-width: 5rem; /** @deprecated: Replace with "list-image-max-width" token */ --kite-interactive-list-image-max-height: 5rem; /** @deprecated: Replace with "list-image-max-height" token */ --kite-interactive-list-start-max-width: 5rem; /** @deprecated: Replace with "list-start-max-width" token */ --kite-interactive-list-item-hover-background-color-dark: 255, 255, 255; /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-interactive-list-item-hover-background-opacity-dark: 0.05; /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-interactive-list-md-padding-top: 0; /** @deprecated: Replace with "list-item-padding-top-sm" token */ --kite-interactive-list-md-padding-bottom: 0; /** @deprecated: Replace with "list-item-padding-bottom-sm" token */ --kite-interactive-list-xl-padding-top: 0; /** @deprecated: Replace with "list-item-padding-top-md" token */ --kite-interactive-list-xl-padding-bottom: 0; /** @deprecated: Replace with "list-item-padding-bottom-md" token */ --kite-interactive-list-xxl-padding-top: 0; /** @deprecated: Replace with "list-item-padding-top-lg" token */ --kite-interactive-list-xxl-padding-bottom: 0; /** @deprecated: Replace with "list-item-padding-bottom-lg" token */ --kite-interactive-list-item-hover-background-opacity: 0.02; /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-link-background-color: rgba(0, 0, 0, 0); --kite-link-text-decoration-line: underline; --kite-link-border-radius: 0; --kite-link-border-width: 0; --kite-link-margin-top: 0; --kite-link-margin-right: 0; --kite-link-margin-bottom: 0; --kite-link-margin-left: 0; --kite-link-padding-top: 0; --kite-link-padding-right: 0; --kite-link-padding-bottom: 0; --kite-link-padding-left: 0; --kite-link-standalone-text-decoration-line: none; --kite-link-standalone-hover-text-decoration: underline; --kite-link-standalone-press-text-decoration: underline; --kite-list-background-color: rgba(0, 0, 0, 0); --kite-list-border-radius: 0; --kite-list-margin-top: 0; --kite-list-margin-right: 0; --kite-list-margin-bottom: 0; --kite-list-margin-left: 0; --kite-list-padding-top: 0; --kite-list-padding-right: 0; --kite-list-padding-bottom: 0; --kite-list-padding-left: 0; --kite-list-item-background-color: rgba(0, 0, 0, 0); --kite-list-item-margin-top: 0; --kite-list-item-margin-right: 0; --kite-list-item-margin-bottom: 0; --kite-list-item-margin-left: 0; --kite-list-item-image-md-max-width: 3.75rem; --kite-list-item-image-md-max-height: 3.75rem; --kite-list-item-image-lg-max-width: 5rem; --kite-list-item-image-lg-max-height: 5rem; --kite-list-item-payment-logo-border-radius: 0; --kite-list-item-payment-logo-margin-top: 0; --kite-list-item-hover-background-color: rgba(0, 18, 33, 0.02); --kite-list-item-expandable-content-padding-top: 0; --kite-list-item-breakpoint-md-title-text-line-height: 1.2; --kite-list-item-payment-logo-margin: 0; /** @deprecated: Replace with 'list-item-payment-logo-margin-top' token */ --kite-list-start-max-width: 5rem; /** @deprecated: Replace with 'list-item-slot-start-max-width' token */ --kite-menu-list-min-width: 10.5rem; --kite-menu-list-activated-opacity: 1; --kite-menu-list-opacity: 0; --kite-menu-list-transition-target-property: opacity; --kite-menu-list-item-padding-top: 0.625rem; --kite-menu-list-item-padding-bottom: 0.625rem; --kite-menu-trigger-background-color: rgba(0, 0, 0, 0); --kite-menu-trigger-disabled-background-color: rgba(0, 0, 0, 0); --kite-menu-contextual-label-trigger-padding-top: 0.625rem; --kite-menu-contextual-label-trigger-padding-bottom: 0.625rem; --kite-menu-list-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with "menu-list-elevation" token */ --kite-menu-list-hidden-opacity: 0; /** @deprecated: Replace with "menu-list-opacity" token */ --kite-menu-list-visible-opacity: 1; /** @deprecated: Replace with "menu-list-activated-opacity" token */ --kite-menu-list-transition-curve: cubic-bezier(0.25, 0.8, 0.5, 1); /** @deprecated: Replace with 'menu-list-transition-timing-function' token */ --kite-meter-circular-width: 5.5rem; --kite-meter-circular-width-px: 88px; --kite-meter-circular-track-height-px: 8px; --kite-meter-circular-sm-width-px: 24px; --kite-meter-circular-sm-track-height: 0.125rem; --kite-meter-circular-sm-track-height-px: 2px; --kite-meter-circular-sm-tick-width: 0.125rem; --kite-meter-circular-sm-icon-margin: 0.375rem; --kite-meter-circular-lg-width: 9.25rem; --kite-meter-circular-lg-width-px: 148px; --kite-meter-linear-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-label-text-size' token */ --kite-meter-linear-value-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-value-label-text-size' token */ --kite-meter-linear-small-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-sm-label-text-size' token */ --kite-meter-linear-small-value-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-sm-value-label-text-size' token */ --kite-meter-linear-large-label-text-size: 1rem; /** @deprecated: Replace with 'meter-lg-label-text-size' token */ --kite-meter-linear-large-value-label-text-size: 1rem; /** @deprecated: Replace with 'meter-lg-value-label-text-size' token */ --kite-meter-circular-small-height: 5.5rem; /** @deprecated: Replace with 'meter-circular-sm-height' token */ --kite-meter-circular-small-width: 5.5rem; /** @deprecated: Replace with 'meter-circular-sm-width' token */ --kite-meter-circular-small-status-icon-margin: 0.375rem; /** @deprecated: Replace with 'meter-circular-sm-icon-margin' token */ --kite-meter-circular-small-track-height: 0.125rem; /** @deprecated: Replace with 'meter-circular-sm-track-height' token */ --kite-meter-circular-small-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-circular-sm-label-text-size' token */ --kite-meter-circular-large-height: 9.25rem; /** @deprecated: Replace with 'meter-circular-lg-height' token */ --kite-meter-circular-large-width: 9.25rem; /** @deprecated: Replace with 'meter-circular-lg-width' token */ --kite-meter-circular-large-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-circular-lg-label-text-size' token */ --kite-pagination-controls-margin-top: 0; --kite-pagination-controls-breakpoint-lg-margin-bottom: 0; --kite-pagination-controls-button-background-color: rgba(0, 0, 0, 0); --kite-pagination-controls-button-border-radius: 0; --kite-pagination-controls-button-width: 4rem; --kite-pagination-controls-button-height: 3.25rem; --kite-pagination-page-select-current-label-padding-top: 0.625rem; --kite-pagination-page-select-current-label-padding-right: 0.625rem; --kite-pagination-page-select-current-label-padding-bottom: 0.625rem; --kite-pagination-page-select-current-label-padding-left: 0.625rem; --kite-pagination-dropdown-margin-top: 0; --kite-pagination-dropdown-margin-bottom: 0; --kite-pagination-controls-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'pagination-controls-background-color' token */ --kite-pagination-controls-button-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'pagination-controls-button-background-color' token */ --kite-pagination-controls-button-previous-border-radius: 0; /** @deprecated: Replace with 'pagination-controls-button-border-radius' token */ --kite-payment-logo-border-color: rgba(0, 0, 0, 0); --kite-payment-logo-margin-top: 0; --kite-payment-logo-margin-right: 0; --kite-payment-logo-margin-bottom: 0; --kite-payment-logo-margin-left: 0; --kite-payment-logo-padding-top: 0; --kite-payment-logo-padding-right: 0; --kite-payment-logo-padding-bottom: 0; --kite-payment-logo-padding-left: 0; --kite-popover-text-align: left; --kite-popover-max-width: 100%; --kite-popover-max-height: 37.5rem; --kite-popover-trigger-margin-top: 0; --kite-popover-trigger-margin-right: 0; --kite-popover-trigger-margin-bottom: 0; --kite-popover-trigger-focus-ring-offset: 0.0625rem; --kite-popover-dismiss-icon-margin-top: 0; --kite-popover-dismiss-icon-margin-right: 0; --kite-popover-dismiss-icon-margin-left: 0; --kite-popover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'popover-border-color' token */ --kite-popover-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with 'popover-elevation' token */ --kite-popover-arrow-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'popover-arrow-border-color' token */ --kite-progress-indicator-background-color: rgba(0, 0, 0, 0); --kite-progress-indicator-border-color: rgba(0, 0, 0, 0); --kite-progress-indicator-border-radius: 0; --kite-progress-indicator-margin-top: 0; --kite-progress-indicator-margin-right: 0; --kite-progress-indicator-margin-bottom: 0; --kite-progress-indicator-margin-left: 0; --kite-progress-indicator-padding-top: 0; --kite-progress-indicator-padding-right: 0; --kite-progress-indicator-padding-bottom: 0; --kite-progress-indicator-padding-left: 0; --kite-progress-indicator-transition-delay: 500ms; --kite-progress-indicator-label-text-align: left; --kite-progress-indicator-track-size-px: 4px; --kite-progress-indicator-backdrop-opacity: 0.95; --kite-progress-indicator-circular-width: 2.5rem; --kite-progress-indicator-circular-width-px: 40px; --kite-progress-indicator-circular-track-color: rgba(0, 0, 0, 0); --kite-progress-indicator-circular-label-text-line-height: 1.4; --kite-progress-indicator-circular-label-text-align: center; --kite-progress-indicator-circular-icon-width: 2.75rem; --kite-progress-indicator-circular-sm-track-size-px: 2px; --kite-progress-indicator-circular-sm-width-px: 24px; --kite-progress-indicator-circular-sm-icon-width: 1.625rem; --kite-progress-indicator-circular-lg-track-size-px: 4px; --kite-progress-indicator-circular-lg-width: 5rem; --kite-progress-indicator-circular-lg-width-px: 80px; --kite-progress-indicator-circular-lg-icon-width: 5rem; --kite-progress-indicator-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'progress-indicator-border-color' token */ --kite-progress-indicator-lg-height: 5rem; /** @deprecated: Replace with 'progress-indicator-circular-lg-height' token */ --kite-progress-indicator-lg-width: 5rem; /** @deprecated: Replace with 'progress-indicator-circular-lg-width' token */ --kite-progress-indicator-md-height: 2.5rem; /** @deprecated: Replace with 'progress-indicator-circular-height' token */ --kite-progress-indicator-md-width: 2.5rem; /** @deprecated: Replace with 'progress-indicator-circular-width' token */ --kite-radio-background-color: rgba(0, 0, 0, 0); --kite-radio-margin-top: 0; --kite-radio-margin-right: 0; --kite-radio-margin-left: 0; --kite-radio-padding-top: 0; --kite-radio-padding-right: 0; --kite-radio-padding-bottom: 0; --kite-radio-padding-left: 0; --kite-radio-label-margin-bottom: 0; --kite-radio-input-margin-left: 0; --kite-search-input-margin-top: 0; --kite-search-input-margin-right: 0; --kite-search-input-margin-bottom: 0; --kite-search-input-margin-left: 0; --kite-select-text-overflow: ellipsis; --kite-select-margin-top: 0; --kite-select-margin-right: 0; --kite-select-margin-left: 0; --kite-skip-link-text-line-height: 1; --kite-skip-link-margin-top: 0; --kite-skip-link-margin-right: 0; --kite-skip-link-margin-bottom: 0; --kite-skip-link-margin-left: 0; --kite-skip-link-position: absolute; /** @deprecated */ --kite-switch-background-color: rgba(0, 0, 0, 0); --kite-switch-border-radius: 0; --kite-switch-border-width: 0; --kite-switch-margin-top: 0; --kite-switch-margin-right: 0; --kite-switch-margin-left: 0; --kite-switch-padding-top: 0; --kite-switch-padding-right: 0; --kite-switch-padding-bottom: 0; --kite-switch-padding-left: 0; --kite-switch-disabled-track-opacity: 1; --kite-switch-track-opacity: 1; --kite-switch-on-track-opacity: 1; --kite-switch-on-disabled-track-opacity: 1; --kite-tabs-background-color: rgba(0, 0, 0, 0); --kite-tabs-border-radius: 0; --kite-tabs-border-width: 0; --kite-tabs-margin-top: 0; --kite-tabs-margin-right: 0; --kite-tabs-margin-bottom: 0; --kite-tabs-margin-left: 0; --kite-tabs-padding-top: 0; --kite-tabs-padding-right: 0; --kite-tabs-padding-bottom: 0; --kite-tabs-padding-left: 0; --kite-tabs-tab-background: rgba(0, 0, 0, 0); --kite-tabs-tab-text-align: center; --kite-tabs-tab-border-bottom-color: rgba(0, 0, 0, 0); --kite-tabs-tab-min-width: 5.625rem; --kite-tabs-panel-padding-right: 0; --kite-tabs-panel-padding-bottom: 0; --kite-tabs-panel-padding-left: 0; --kite-tabs-item-border-bottom-color: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'tabs-tab-border-bottom-color' token */ --kite-tabs-item-border-bottom-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'tabs-tab-border-bottom-color' token */ --kite-tabs-item-min-width: 5.625rem; /** @deprecated: Replace with 'tabs-tab-min-width' token */ --kite-tag-text-line-height: 1.714; --kite-tag-margin-top: 0; --kite-tag-margin-right: 0; --kite-tag-margin-bottom: 0; --kite-tag-margin-left: 0; --kite-tag-padding-top: 0; --kite-tag-padding-bottom: 0; --kite-tag-solid-border-color: rgba(0, 0, 0, 0); --kite-text-area-margin-top: 0; --kite-text-area-margin-right: 0; --kite-text-area-margin-left: 0; --kite-text-area-min-height: 7.375rem; --kite-text-input-margin-top: 0; --kite-text-input-margin-right: 0; --kite-text-input-margin-left: 0; --kite-time-input-margin-top: 0; --kite-time-input-margin-right: 0; --kite-time-input-margin-bottom: 0; --kite-time-input-margin-left: 0; --kite-time-input-icon-margin-right: 0; --kite-time-input-placeholder-margin-left: 0; --kite-toast-border-color: rgba(0, 0, 0, 0); --kite-toast-border-width: 0; --kite-toast-margin-right: 0; --kite-toast-margin-left: 0; --kite-toast-max-width: 20rem; --kite-toast-icon-height: 1.125rem; --kite-toast-icon-width: 1.125rem; --kite-toast-line-height: 1.25; /** @deprecated: Replace with 'toast-text-line-height' token */ --kite-toast-transition-curve: cubic-bezier(0.25, 0.8, 0.5, 1); /** @deprecated: Replace with 'toast-transition-timing-function' token */ --kite-tooltip-border-color: rgba(0, 0, 0, 0); --kite-tooltip-border-width: 0; --kite-tooltip-margin-top: 0; --kite-tooltip-margin-right: 0; --kite-tooltip-margin-bottom: 0; --kite-tooltip-margin-left: 0; --kite-tooltip-max-width: 90%; --kite-tooltip-max-height: 4.25rem; --kite-tooltip-offset: 0; --kite-tooltip-breakpoint-sm-max-width: 20.3125rem; --kite-tooltip-arrow-directional-offset: 0; /** @deprecated: Replace with 'tooltip-offset' token */ --kite-border-width-thin: var(--kite-size-1, 0.0625rem); --kite-border-width-thick: var(--kite-size-2, 0.125rem); --kite-color-background: var(--kite-color-white, #ffffff); /** Default background color for the app */ --kite-color-background-secondary: var(--kite-color-gray-10, #f8f8f8); /** Secondary background color for the app */ --kite-color-text: var(--kite-color-black, #000000); /** Default body text color */ --kite-color-text-secondary: var(--kite-color-gray-30, #63738a); /** Secondary text color for microcopy, etc. */ --kite-color-primary: var(--kite-color-blue-20, #0073d1); /** Primary brand color */ --kite-color-primary-focus: var(--kite-color-blue-30, #0062b2); /** Focus state of primary color */ --kite-color-primary-hover: var(--kite-color-blue-30, #0062b2); /** Hover state of primary color */ --kite-color-primary-press: var(--kite-color-blue-30, #0062b2); /** Pressed state of primary color */ --kite-color-on-primary: var(--kite-color-white, #ffffff); /** Text color found on primary color */ --kite-color-caution: var(--kite-color-yellow-20, #faa41a); /** Color for elements that have to do with caution or warning */ --kite-color-caution-muted: var(--kite-color-yellow-00, #fff3e0); --kite-color-on-caution: var(--kite-color-black, #000000); /** Text color found on caution color */ --kite-color-negative: var(--kite-color-red-20, #d6312b); /** Color for elements providing negative, destructive, critical or dangerous information and actions */ --kite-color-negative-muted: var(--kite-color-red-00, #ffefef); --kite-color-on-negative: var(--kite-color-white, #ffffff); /** Text color found on negative color */ --kite-color-neutral: var(--kite-color-light-blue-20, #5db8fc); /** Color for elements providing neutral information (not error, success, or caution) */ --kite-color-neutral-muted: var(--kite-color-light-blue-00, #e8f8ff); --kite-color-on-neutral: var(--kite-color-black, #000000); /** Text color found on neutral color */ --kite-color-positive: var(--kite-color-green-20, #008516); /** Color for elements that have to do with positive or successful states and actions */ --kite-color-positive-muted: var(--kite-color-green-00, #e8ffe8); --kite-color-on-positive: var(--kite-color-white, #ffffff); /** Text color found on positive color */ --kite-color-disabled: var(--kite-color-gray-25, #9ba9bd); /** Default color for elements in disabled states */ --kite-color-on-disabled: var(--kite-color-gray-20, #d8dde6); /** Text color found on disabled color */ --kite-color-error: var(--kite-color-red-20, #d6312b); /** @deprecated: Replace with 'color-negative' token */ --kite-color-info: var(--kite-color-light-blue-20, #5db8fc); /** @deprecated: Replace with 'color-neutral' token */ --kite-color-success: var(--kite-color-green-20, #008516); /** @deprecated: Replace with 'color-positive' token */ --kite-color-focus: var(--kite-color-blue-30, #0062b2); /** Default color to use for focus states and focus ring outlines */ --kite-font-family-sans-serif: var(--kite-font-family-spectrum-sans, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --kite-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-letter-spacing-lg: var(--kite-size-2, 0.125rem); --kite-tracking-lg: var(--kite-size-2, 0.125rem); /** @deprecated: Replace with 'letter-spacing-lg' token */ --kite-size-radius-sm: var(--kite-size-2, 0.125rem); --kite-size-radius-md: var(--kite-size-4, 0.25rem); --kite-size-radius-lg: var(--kite-size-8, 0.5rem); --kite-size-radius-circle: var(--kite-size-percent-50, 50%); --kite-border-color: var(--kite-color-gray-20, #d8dde6); /** Default border color for UI elements */ --kite-border-radius-pill: var(--kite-size-radius-pill, 624.9375rem); /** Pill (Hotdog) radius for global use, Chip background shape */ --kite-border-style: var(--kite-border-style-solid, solid); /** Default border style for UI elements */ --kite-container-background-color: var(--kite-color-white, #ffffff); /** `container-*` tokens can be shared across "containers", such as card components, sidebars, drawers ect. These tokens function to set any "container" apart from the app background by applying a default background color, border and even hover state. */ --kite-container-hover-background-color: var(--kite-color-gray-10, #f8f8f8); --kite-focus-ring-offset: var(--kite-size-2, 0.125rem); /** Default offset/gap for an outline (aka, focus ring) around the outside of some focused UI elements */ --kite-focus-ring-style: var(--kite-border-style-solid, solid); /** Default style for the focus ring on focused UI elements */ --kite-focus-ring-width: var(--kite-size-2, 0.125rem); /** Default width for the focus ring on focused UI elements */ --kite-font-weight: var(--kite-font-weight-regular, 400); /** Default font-weight for body copy */ --kite-font-size: var(--kite-font-size-px, 16px); /** Default font-size for body copy */ --kite-font-style: var(--kite-font-style-normal, normal); /** Default font-style for body copy */ --kite-motion-fast: var(--kite-duration-750, 750ms); --kite-motion-faster: var(--kite-duration-400, 400ms); --kite-motion-fastest: var(--kite-duration-200, 200ms); --kite-motion-standard: var(--kite-cubic-bezier-ease, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-motion-entry: var(--kite-cubic-bezier-ease-out, cubic-bezier(0, 0, 0.58, 1)); --kite-motion-exit: var(--kite-cubic-bezier-ease-in, cubic-bezier(0.42, 0, 1, 1)); --kite-layout-2xs: var(--kite-size-40, 2.5rem); --kite-layout-xs: var(--kite-size-48, 3rem); --kite-spacing-2xs: var(--kite-size-4, 0.25rem); --kite-spacing-xs: var(--kite-size-8, 0.5rem); --kite-spacing-sm: var(--kite-size-12, 0.75rem); --kite-spacing-md: var(--kite-size-16, 1rem); --kite-spacing-lg: var(--kite-size-20, 1.25rem); --kite-spacing-xl: var(--kite-size-24, 1.5rem); --kite-spacing-2xl: var(--kite-size-32, 2rem); --kite-spacing-element-xxs: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'spacing-2xs' token */ --kite-spacing-element-xs: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with 'spacing-xs' token */ --kite-spacing-element-sm: var(--kite-size-12, 0.75rem); /** @deprecated: Replace with 'spacing-sm' token */ --kite-spacing-element-md: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'spacing-md' token */ --kite-spacing-element-lg: var(--kite-size-20, 1.25rem); /** @deprecated: Replace with 'spacing-lg' token */ --kite-spacing-element-xl: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'spacing-xl' token */ --kite-spacing-element-xxl: var(--kite-size-32, 2rem); /** @deprecated: Replace with 'spacing-2xl' token */ --kite-spacing-element-xxxl: var(--kite-size-40, 2.5rem); /** @deprecated: Replace with 'layout-2xs' token */ --kite-spacing-section-xs: var(--kite-size-48, 3rem); /** @deprecated: Replace with 'layout-xs' token */ --kite-my-component-background-color: var(--kite-color-white, #ffffff); --kite-my-component-min-width: var(--kite-size-touch-target, 2.75rem); --kite-my-component-min-height: var(--kite-size-touch-target, 2.75rem); --kite-my-component-width: var(--kite-size-touch-target, 2.75rem); --kite-my-component-height: var(--kite-size-touch-target, 2.75rem); --kite-my-component-list-background-color: var(--kite-color-white, #ffffff); --kite-form-control-background-color: var(--kite-color-white, #ffffff); --kite-form-control-border-color: var(--kite-color-gray-30, #63738a); --kite-form-control-height: var(--kite-size-touch-target, 2.75rem); --kite-form-control-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-form-control-cursor: var(--kite-cursor-action, pointer); --kite-form-control-addon-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-form-control-addon-icon-width: var(--kite-size-24, 1.5rem); --kite-form-control-placeholder-text-color: var(--kite-color-gray-30, #63738a); --kite-form-control-placeholder-text-style: var(--kite-font-style-normal, normal); --kite-form-control-picker-cursor: var(--kite-cursor-action, pointer); --kite-form-control-picker-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-form-control-picker-zindex: var(--kite-zindex-dialog, 1300); --kite-form-control-picker-backdrop-zindex: var(--kite-zindex-dialog-backdrop, 1200); --kite-form-control-picker-backdrop-background-color: var(--kite-color-dark-blue-20, #002747); --kite-form-control-picker-list-item-max-width: var(--kite-form-control-max-width, 18rem); --kite-form-control-picker-list-item-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-form-control-picker-list-item-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-form-control-picker-list-item-selected-text-weight: var(--kite-font-weight-bold, 700); --kite-form-control-picker-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-form-control-picker-list-item-icon-width: var(--kite-size-20, 1.25rem); --kite-form-control-picker-list-item-check-icon-width: var(--kite-size-16, 1rem); --kite-form-control-input-background-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-background-color" token */ --kite-form-control-input-border-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-border-color" token */ --kite-form-control-input-border-style: var(--kite-border-style-solid, solid); /** @deprecated: Replace with "form-control-border-style" token */ --kite-form-control-input-cursor: var(--kite-cursor-action, pointer); /** @deprecated: Replace with "form-control-cursor" token */ --kite-form-control-input-placeholder-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-placeholder-text-color" token */ --kite-form-control-input-disabled-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with "form-control-disabled-background-color" token */ --kite-form-control-input-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with "form-control-disabled-cursor" token */ --kite-form-control-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-form-control-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-label-text-color" token */ --kite-form-control-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "form-control-error-feedback-text-color" token */ --kite-form-control-input-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "form-control-background-color" token */ --kite-form-control-input-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-border-color" token */ --kite-form-control-input-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-text-color" token */ --kite-form-control-input-placeholder-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-placeholder-text-color" token */ --kite-form-control-input-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "form-control-disabled-background-color" token */ --kite-form-control-input-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-disabled-border-color" token */ --kite-form-control-input-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-disabled-text-color" token */ --kite-form-control-input-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "form-control-error-border-color" token */ --kite-form-control-input-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-focus-ring-color" token */ --kite-grid-xxl-gutters: var(--kite-size-16, 1rem); /** @deprecated: Replace with "grid-2xl-gutters" token */ --kite-grid-xxl-margins: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "grid-2xl-gutters" token */ --kite-typography-display-size: var(--kite-typography-sm-display-size, 3rem); --kite-typography-display-line-height: var(--kite-typography-sm-display-line-height, 1.25); --kite-typography-title-1-size: var(--kite-typography-sm-title-1-size, 2.625rem); --kite-typography-title-1-line-height: var(--kite-typography-sm-title-1-line-height, 1.238); --kite-typography-title-2-size: var(--kite-typography-sm-title-2-size, 2rem); --kite-typography-title-2-line-height: var(--kite-typography-sm-title-2-line-height, 1.25); --kite-typography-title-3-size: var(--kite-typography-sm-title-3-size, 1.75rem); --kite-typography-title-3-line-height: var(--kite-typography-sm-title-3-line-height, 1.286); --kite-typography-title-4-size: var(--kite-typography-sm-title-4-size, 1.5rem); --kite-typography-title-4-line-height: var(--kite-typography-sm-title-4-line-height, 1.333); --kite-typography-title-5-size: var(--kite-typography-sm-title-5-size, 1.25rem); --kite-typography-title-5-line-height: var(--kite-typography-sm-title-5-line-height, 1.4); --kite-typography-title-6-size: var(--kite-typography-sm-title-6-size, 1.125rem); --kite-typography-title-6-line-height: var(--kite-typography-sm-title-6-line-height, 1.333); --kite-typography-body-display-size: var(--kite-typography-sm-body-display-size, 1.25rem); --kite-typography-body-display-line-height: var(--kite-typography-sm-body-display-line-height, 1.6); --kite-typography-body-size: var(--kite-typography-sm-body-size, 1rem); --kite-typography-body-line-height: var(--kite-typography-sm-body-line-height, 1.5); --kite-typography-eyebrow-size: var(--kite-typography-sm-eyebrow-size, 0.875rem); --kite-typography-eyebrow-line-height: var(--kite-typography-sm-eyebrow-line-height, 1.429); --kite-typography-eyebrow-text-transform: var(--kite-typography-sm-eyebrow-text-transform, uppercase); --kite-typography-caption-1-size: var(--kite-typography-sm-caption-1-size, 0.875rem); --kite-typography-caption-1-line-height: var(--kite-typography-sm-caption-1-line-height, 1.429); --kite-typography-caption-2-size: var(--kite-typography-sm-caption-2-size, 0.75rem); --kite-typography-caption-2-line-height: var(--kite-typography-sm-caption-2-line-height, 1.333); --kite-typography-sm-display-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-sm-display-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-1-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-sm-title-1-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-sm-title-2-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-sm-title-3-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-4-weight: var(--kite-font-weight-medium, 500); --kite-typography-sm-title-4-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-sm-title-5-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-6-weight: var(--kite-font-weight-medium, 500); --kite-typography-sm-title-6-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-body-display-style: var(--kite-font-style-normal, normal); --kite-typography-sm-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-body-style: var(--kite-font-style-normal, normal); --kite-typography-sm-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-sm-eyebrow-style: var(--kite-font-style-normal, normal); --kite-typography-sm-caption-1-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-caption-1-style: var(--kite-font-style-normal, normal); --kite-typography-sm-caption-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-caption-2-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-caption-2-style: var(--kite-font-style-normal, normal); --kite-typography-sm-caption-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-display-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-lg-display-style: var(--kite-font-style-normal, normal); --kite-typography-lg-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-1-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-lg-title-1-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-lg-title-2-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-lg-title-3-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-4-weight: var(--kite-font-weight-medium, 500); --kite-typography-lg-title-4-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-lg-title-5-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-6-weight: var(--kite-font-weight-medium, 500); --kite-typography-lg-title-6-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-body-display-style: var(--kite-font-style-normal, normal); --kite-typography-lg-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-body-style: var(--kite-font-style-normal, normal); --kite-typography-lg-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-lg-eyebrow-style: var(--kite-font-style-normal, normal); --kite-typography-lg-caption-1-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-caption-1-style: var(--kite-font-style-normal, normal); --kite-typography-lg-caption-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-caption-2-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-caption-2-style: var(--kite-font-style-normal, normal); --kite-typography-lg-caption-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-caption-weight: var(--kite-font-weight-regular, 400); /** @deprecated: Replace with 'typography-sm-caption-1-weight' token */ --kite-typography-sm-caption-style: var(--kite-font-style-normal, normal); /** @deprecated: Replace with 'typography-sm-caption-1-style' token */ --kite-typography-sm-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); /** @deprecated: Replace with 'typography-sm-caption-1-letter-spacing' token */ --kite-typography-lg-caption-weight: var(--kite-font-weight-regular, 400); /** @deprecated: Replace with 'typography-lg-caption-1-weight' token */ --kite-typography-lg-caption-style: var(--kite-font-style-normal, normal); /** @deprecated: Replace with 'typography-lg-caption-1-style' token */ --kite-typography-lg-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); /** @deprecated: Replace with 'typography-lg-caption-1-letter-spacing' token */ --kite-typography-rutledge-sm-display-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-display-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-1-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-1-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-title-5-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-title-6-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-sm-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-sm-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-sm-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-display-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-display-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-1-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-1-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-title-5-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-title-6-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-lg-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-lg-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-lg-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-lg-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-1-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-2-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-3-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xxs-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xxs-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xxs-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xxs-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-1-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-2-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-3-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xs-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xs-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xs-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xs-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-title-1-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-1-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-md-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-md-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-md-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-title-5-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-md-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-md-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-title-1-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-title-2-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-xl-title-3-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xl-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-xl-title-4-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xl-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xl-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xl-caption-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-accordion-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-accordion-cursor: var(--kite-cursor-action, pointer); --kite-accordion-icon-height: var(--kite-size-16, 1rem); --kite-accordion-icon-width: var(--kite-size-16, 1rem); --kite-accordion-title-text-weight: var(--kite-font-weight-medium, 500); --kite-accordion-border-bottom-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "accordion-border-color" token */ --kite-accordion-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-icon-color" token */ --kite-accordion-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-label-text-color" token */ --kite-accordion-title-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-title-text-color" token */ --kite-accordion-hover-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-hover-background-color" token */ --kite-accordion-disabled-label-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-disabled-label-text-color" token */ --kite-accordion-disabled-title-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-disabled-title-text-color" token */ --kite-accordion-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-disabled-icon-color" token */ --kite-accordion-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-focus-ring-color" token */ --kite-accordion-alert-label-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "accordion-negative-label-text-color" token */ --kite-accordion-success-label-text-color: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "accordion-positive-label-text-color" token */ --kite-accordion-success-label-text-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "accordion-positive-label-text-color" token */ --kite-accordion-icon-fill: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-icon-color" token */ --kite-alert-background-color: var(--kite-color-white, #ffffff); --kite-alert-border-color: var(--kite-color-gray-20, #d8dde6); --kite-alert-focus-ring-color: var(--kite-color-blue-20, #0073d1); --kite-alert-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-alert-border-left-width: var(--kite-size-8, 0.5rem); --kite-alert-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); --kite-alert-dismiss-icon-cursor: var(--kite-cursor-action, pointer); --kite-alert-dismiss-icon-height: var(--kite-size-24, 1.5rem); --kite-alert-dismiss-icon-width: var(--kite-size-24, 1.5rem); --kite-alert-status-icon-height: var(--kite-size-24, 1.5rem); --kite-alert-status-icon-width: var(--kite-size-24, 1.5rem); --kite-alert-link-icon-height: var(--kite-size-12, 0.75rem); --kite-alert-link-icon-width: var(--kite-size-12, 0.75rem); --kite-alert-global-focus-ring-color: var(--kite-color-black, #000000); --kite-alert-passive-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); --kite-alert-passive-zindex: var(--kite-zindex-notification, 1600); --kite-alert-passive-title-text-weight: var(--kite-font-weight-bold, 700); --kite-alert-passive-negative-border-color: var(--kite-color-red-20, #d6312b); --kite-alert-passive-negative-status-icon-color: var(--kite-color-red-20, #d6312b); --kite-alert-passive-caution-border-color: var(--kite-color-yellow-20, #faa41a); --kite-alert-passive-neutral-border-color: var(--kite-color-blue-10, #31a2ff); --kite-alert-passive-neutral-status-icon-color: var(--kite-color-blue-10, #31a2ff); --kite-alert-passive-positive-border-color: var(--kite-color-green-20, #008516); --kite-alert-passive-positive-status-icon-color: var(--kite-color-green-20, #008516); --kite-alert-dismiss-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-dismiss-icon-color" token */ --kite-alert-indicator-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "alert-status-icon-height" token */ --kite-alert-indicator-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "alert-status-icon-width" token */ --kite-alert-page-background-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-background-color" token */ --kite-alert-page-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-background-color" token */ --kite-alert-page-border-left-width: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with "alert-border-left-width" token */ --kite-alert-page-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); /** @deprecated: Replace with "alert-elevation" token */ --kite-alert-page-text-size: var(--kite-typography-lg-body-size, 1rem); /** @deprecated: Replace with "alert-text-size" token */ --kite-alert-global-caution-indicator-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-caution-status-icon-color" token */ --kite-alert-global-caution-indicator-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-caution-status-icon-color" token */ --kite-alert-global-caution-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-caution-link-icon-color" token */ --kite-alert-global-error-dismiss-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-dismiss-icon-color" token */ --kite-alert-global-error-dismiss-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-dismiss-icon-color" token */ --kite-alert-global-error-indicator-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-status-icon-color" token */ --kite-alert-global-error-indicator-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-status-icon-color" token */ --kite-alert-global-error-link-text-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-text-color" token */ --kite-alert-global-error-link-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-text-color" token */ --kite-alert-global-error-link-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-icon-color" token */ --kite-alert-global-error-link-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-icon-color" token */ --kite-alert-global-error-text-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-text-color" token */ --kite-alert-global-error-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-text-color" token */ --kite-alert-global-info-indicator-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-status-icon-color" token */ --kite-alert-global-info-indicator-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-status-icon-color" token */ --kite-alert-global-info-link-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-link-icon-color" token */ --kite-alert-global-info-link-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-link-icon-color" token */ --kite-alert-dismiss-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-dismiss-icon-color" token */ --kite-alert-negative-status-icon-fill: var(--kite-color-red-20, #d6312b); /** @deprecated: Replace with "alert-negative-status-icon-color" token */ --kite-alert-positive-status-icon-fill: var(--kite-color-green-20, #008516); /** @deprecated: Replace with "alert-positive-status-icon-color" token */ --kite-badge-background-color: var(--kite-color-red-20, #d6312b); --kite-badge-height: var(--kite-size-20, 1.25rem); --kite-badge-min-width: var(--kite-size-20, 1.25rem); --kite-badge-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-badge-disabled-background-color: var(--kite-color-gray-20, #d8dde6); --kite-badge-text-color: var(--kite-color-white, #ffffff); --kite-badge-text-size: var(--kite-size-12, 0.75rem); --kite-badge-text-weight: var(--kite-font-weight-bold, 700); --kite-badge-sm-height: var(--kite-size-8, 0.5rem); --kite-badge-sm-width: var(--kite-size-8, 0.5rem); --kite-badge-icon-dot-height: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with "badge-sm-height" token */ --kite-badge-icon-dot-width: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with "badge-sm-width" token */ --kite-badge-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "badge-text-color" token */ --kite-badge-disabled-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "badge-disabled-background-color" token */ --kite-blockquote-border-left-width: var(--kite-size-4, 0.25rem); --kite-blockquote-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-blockquote-cite-text-color: var(--kite-color-gray-30, #63738a); --kite-button-text-weight: var(--kite-font-weight-medium, 500); --kite-button-height: var(--kite-size-touch-target, 2.75rem); --kite-button-focus-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-hover-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-press-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-button-disabled-background-color: var(--kite-color-gray-20, #d8dde6); --kite-button-disabled-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-cursor: var(--kite-cursor-action, pointer); --kite-button-icon-height: var(--kite-size-20, 1.25rem); --kite-button-icon-width: var(--kite-size-20, 1.25rem); --kite-button-destructive-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-destructive-focus-background-color: var(--kite-color-negative-focus, #b00300); --kite-button-destructive-focus-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-destructive-hover-background-color: var(--kite-color-negative-hover, #b00300); --kite-button-destructive-hover-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-destructive-press-background-color: var(--kite-color-negative-press, #b00300); --kite-button-destructive-press-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-disabled-background-color: var(--kite-button-secondary-background-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-background-color: var(--kite-button-secondary-background-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-disabled-background-color: var(--kite-button-secondary-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-focus-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-hover-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-press-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-disabled-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-focus-text-color: var(--kite-color-negative-focus, #b00300); --kite-button-borderless-destructive-hover-text-color: var(--kite-color-negative-hover, #b00300); --kite-button-borderless-destructive-press-text-color: var(--kite-color-negative-press, #b00300); --kite-button-primary-background-color-dark: var(--kite-color-blue-20, #0073d1); /** @deprecated: Replace with 'button-primary-background-color' token */ --kite-button-primary-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-icon-color' token */ --kite-button-primary-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-text-color' token */ --kite-button-primary-active-background-color-dark: var(--kite-color-blue-30, #0062b2); /** @deprecated: Replace with 'button-primary-press-background-color' token */ --kite-button-primary-active-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-press-text-color' token */ --kite-button-primary-active-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-press-icon-color' token */ --kite-button-primary-disabled-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'button-primary-disabled-background-color' token */ --kite-button-primary-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-primary-disabled-text-color' token */ --kite-button-primary-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-primary-disabled-icon-color' token */ --kite-button-primary-focus-background-color-dark: var(--kite-color-blue-30, #0062b2); /** @deprecated: Replace with 'button-primary-focus-background-color' token */ --kite-button-primary-focus-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-focus-text-color' token */ --kite-button-primary-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-focus-icon-color' token */ --kite-button-primary-hover-background-color-dark: var(--kite-color-blue-30, #0062b2); /** @deprecated: Replace with 'button-primary-hover-background-color' token */ --kite-button-primary-hover-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-hover-text-color' token */ --kite-button-primary-hover-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-hover-icon-color' token */ --kite-button-disabled-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'button-disabled-background-color' token */ --kite-button-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-focus-ring-color' token */ --kite-button-secondary-border-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-border-color' token */ --kite-button-secondary-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-icon-color' token */ --kite-button-secondary-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-text-color' token */ --kite-button-secondary-active-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-press-background-color' token */ --kite-button-secondary-active-text-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'button-secondary-press-text-color' token */ --kite-button-secondary-active-icon-fill-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'button-secondary-press-icon-color' token */ --kite-button-secondary-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-secondary-disabled-border-color' token */ --kite-button-secondary-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-secondary-disabled-icon-color' token */ --kite-button-secondary-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-secondary-disabled-text-color' token */ --kite-button-secondary-focus-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-focus-background-color' token */ --kite-button-secondary-focus-text-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'button-secondary-focus-text-color' token */ --kite-button-secondary-focus-icon-fill-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'button-secondary-focus-icon-color' token */ --kite-button-secondary-hover-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-hover-background-color' token */ --kite-button-secondary-hover-text-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'button-secondary-hover-text-color' token */ --kite-button-secondary-hover-icon-fill-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'button-secondary-hover-icon-color' token */ --kite-button-borderless-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-icon-color' token */ --kite-button-borderless-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-text-color' token */ --kite-button-borderless-active-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-press-icon-color' token */ --kite-button-borderless-active-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-press-text-color' token */ --kite-button-borderless-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-borderless-disabled-icon-color' token */ --kite-button-borderless-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-borderless-disabled-text-color' token */ --kite-button-borderless-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-focus-icon-color' token */ --kite-button-borderless-focus-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-focus-text-color' token */ --kite-button-borderless-hover-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-hover-icon-color' token */ --kite-button-borderless-hover-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-hover-text-color' token */ --kite-button-active-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-press-icon-color' token */ --kite-button-focus-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-focus-icon-color' token */ --kite-button-hover-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-hover-icon-color' token */ --kite-button-borderless-active-icon-fill: var(--kite-color-blue-30, #0062b2); /** @deprecated: Replace with 'button-borderless-press-icon-color' token */ --kite-button-borderless-hover-icon-fill: var(--kite-color-blue-30, #0062b2); /** @deprecated: Replace with 'button-borderless-hover-icon-color' token */ --kite-calendar-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-calendar-action-cursor: var(--kite-cursor-action, pointer); --kite-calendar-controls-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-calendar-day-width: var(--kite-size-40, 2.5rem); --kite-calendar-day-height: var(--kite-size-40, 2.5rem); --kite-calendar-day-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-calendar-day-today-indicator-width: var(--kite-size-4, 0.25rem); --kite-calendar-day-today-indicator-height: var(--kite-size-4, 0.25rem); --kite-calendar-day-due-background-color: var(--kite-color-dark-blue-30, #001221); --kite-calendar-day-due-padding-top: var(--kite-size-1, 0.0625rem); --kite-calendar-day-due-padding-bottom: var(--kite-size-1, 0.0625rem); --kite-calendar-day-due-text-color: var(--kite-color-white, #ffffff); --kite-calendar-day-out-range-text-decoration-line: var(--kite-calendar-day-disabled-text-decoration-line, line-through); --kite-calendar-day-unavailable-text-decoration-line: var(--kite-calendar-day-disabled-text-decoration-line, line-through); --kite-calendar-month-year-text-weight: var(--kite-font-weight-bold, 700); --kite-calendar-day-disabled-text-decoration-thickness: var(--kite-size-2, 0.125rem); /** @deprecated: Replace with 'calendar-day-unavailable-text-decoration-thickness' token */ --kite-card-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-card-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "card-background-color" token */ --kite-card-border-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "card-border-color" token */ --kite-checkbox-width: var(--kite-size-20, 1.25rem); --kite-checkbox-selected-icon-height: var(--kite-size-16, 1rem); --kite-checkbox-selected-icon-width: var(--kite-size-16, 1rem); --kite-checkbox-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-checkbox-error-feedback-icon-height: var(--kite-size-20, 1.25rem); --kite-checkbox-error-feedback-icon-width: var(--kite-size-20, 1.25rem); --kite-checkbox-border-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-border-color" token */ --kite-checkbox-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-label-text-color" token */ --kite-checkbox-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-disabled-border-color" token */ --kite-checkbox-disabled-label-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-label-text-color" token */ --kite-checkbox-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-focus-ring-color" token */ --kite-checkbox-selected-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-selected-background-color" token */ --kite-checkbox-selected-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-selected-disabled-border-color" token */ --kite-checkbox-selected-disabled-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-selected-disabled-background-color" token */ --kite-checkbox-indeterminate-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-indeterminate-icon-color" token */ --kite-checkbox-indeterminate-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-indeterminate-disabled-border-color" token */ --kite-checkbox-indeterminate-disabled-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-indeterminate-disabled-background-color" token */ --kite-chip-text-color: var(--kite-color-dark-blue-30, #001221); --kite-chip-text-weight: var(--kite-font-weight-medium, 500); --kite-chip-border-color: var(--kite-color-gray-30, #63738a); --kite-chip-height: var(--kite-size-32, 2rem); --kite-chip-focus-background-color: var(--kite-color-gray-20, #d8dde6); --kite-chip-selected-background-color: var(--kite-color-gray-30, #63738a); --kite-chip-selected-text-color: var(--kite-color-white, #ffffff); --kite-chip-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-chip-cursor: var(--kite-cursor-action, pointer); --kite-chip-background-color-dark: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "chip-background-color" token */ --kite-chip-text-color-dark: var(--kite-color-light-blue-10, #b7cee5); /** @deprecated: Replace with "chip-text-color" token */ --kite-chip-hover-background-color-dark: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with "chip-hover-background-color" token */ --kite-chip-selected-disabled-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "chip-selected-disabled-background-color" token */ --kite-chip-disabled-background-color-dark: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "chip-disabled-background-color" token */ --kite-chip-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "chip-disabled-text-color" token */ --kite-combobox-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-combobox-border-radius: var(--kite-form-control-border-radius, 0); --kite-combobox-height: var(--kite-size-touch-target, 2.75rem); --kite-combobox-max-width: var(--kite-form-control-max-width, 18rem); --kite-combobox-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-combobox-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-combobox-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-combobox-overflow-label-text-weight: var(--kite-font-weight-medium, 500); --kite-combobox-picker-results-text-color: var(--kite-color-gray-30, #63738a); --kite-data-table-text-size: var(--kite-size-14, 0.875rem); --kite-data-table-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-data-table-breakpoint-md-text-size: var(--kite-typography-lg-body-size, 1rem); --kite-data-table-breakpoint-md-text-line-height: var(--kite-typography-lg-body-line-height, 1.5); --kite-data-table-icon-size: var(--kite-size-16, 1rem); --kite-data-table-header-text-align: var(--kite-data-table-text-align, left); --kite-data-table-header-text-weight: var(--kite-font-weight-bold, 700); --kite-data-table-cell-text-align: var(--kite-data-table-text-align, left); --kite-data-table-row-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-data-table-sticky-shadow-color: rgba(0, 0, 0, 0.2); --kite-data-table-striped-row-background-color: var(--kite-color-gray-10, #f8f8f8); --kite-data-table-striped-inverse-row-background-color: var(--kite-color-white, #ffffff); --kite-data-table-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-text-color" token */ --kite-data-table-title-row-border-bottom-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "data-table-title-row-border-bottom-color" token */ --kite-data-table-title-row-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-title-row-text-color" token */ --kite-data-table-cell-border-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "data-table-cell-border-color" token */ --kite-data-table-cell-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-cell-focus-ring-color" token */ --kite-data-table-row-border-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "data-table-row-border-color" token */ --kite-data-table-row-striped-background-color-dark: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "data-table-striped-row-background-color" token */ --kite-data-table-row-hover-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "data-table-row-hover-background-color" token */ --kite-data-table-row-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-row-focus-ring-color" token */ --kite-data-table-title-row-icon-size: var(--kite-size-16, 1rem); /** @deprecated: Replace with "data-table-icon-size" token */ --kite-data-table-title-row-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with "data-table-header-text-weight" token */ --kite-data-table-row-striped-background-color: var(--kite-color-gray-10, #f8f8f8); /** @deprecated: Replace with "data-table-striped-row-background-color" token */ --kite-data-table-lg-text-size: var(--kite-typography-lg-body-size, 1rem); /** @deprecated: Replace with "data-table-breakpoint-md-text-size" token */ --kite-data-table-sm-text-size: var(--kite-size-14, 0.875rem); /** @deprecated: Replace with "data-table-text-size" token */ --kite-data-table-hover-row-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with "data-table-row-hover-background-color" token */ --kite-date-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-date-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-date-input-height: var(--kite-size-touch-target, 2.75rem); --kite-date-input-action-cursor: var(--kite-cursor-action, pointer); --kite-date-input-addon-padding-top: var(--kite-form-control-addon-padding-top, 0); --kite-date-input-addon-padding-bottom: var(--kite-form-control-addon-padding-bottom, 0); --kite-date-input-feedback-margin-top: var(--kite-form-control-margin-top, 0); --kite-date-input-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-date-input-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-date-input-picker-min-width: var(--kite-form-control-picker-min-width, 18rem); --kite-dialog-border-width: var(--kite-border-width-none, 0); --kite-dialog-width: var(--kite-dialog-full-size-width, 100%); /** 4 of 4 columns */ --kite-dialog-height: var(--kite-dialog-full-size-height, 100%); --kite-dialog-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-dialog-icon-height: var(--kite-size-24, 1.5rem); --kite-dialog-icon-width: var(--kite-size-24, 1.5rem); --kite-dialog-elevation: var(--kite-elevation-3, 0 3px 12px 0 rgba(0, 0, 0, 0.1)); --kite-dialog-zindex: var(--kite-zindex-dialog, 1300); --kite-dialog-breakpoint-md-title-text-size: var(--kite-typography-lg-title-5-size, 1.5rem); --kite-dialog-breakpoint-md-title-text-line-height: var(--kite-typography-lg-title-5-line-height, 1.333); --kite-dialog-overlay-background-color: var(--kite-color-dark-blue-20, #002747); --kite-dialog-overlay-zindex: var(--kite-zindex-dialog-backdrop, 1200); --kite-dialog-dismiss-icon-cursor: var(--kite-cursor-action, pointer); --kite-dialog-dismiss-icon-height: var(--kite-size-20, 1.25rem); --kite-dialog-dismiss-icon-width: var(--kite-size-20, 1.25rem); --kite-dialog-scrolled-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); --kite-dialog-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "dialog-background-color" token */ --kite-dialog-overlay-background-color-dark: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "dialog-overlay-background-color" token */ --kite-dialog-dismiss-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dialog-dismiss-icon-color" token */ --kite-dialog-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dialog-text-color" token */ --kite-dialog-box-shadow: var(--kite-elevation-3, 0 3px 12px 0 rgba(0, 0, 0, 0.1)); /** @deprecated: Replace with "dialog-elevation" token */ --kite-dialog-dismiss-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "dialog-dismiss-icon-color" token */ --kite-dialog-z-index: var(--kite-zindex-dialog, 1300); /** @deprecated: Replace with "dialog-zindex" token */ --kite-dropdown-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-dropdown-border-radius: var(--kite-form-control-border-radius, 0); --kite-dropdown-max-width: var(--kite-form-control-max-width, 18rem); --kite-dropdown-height: var(--kite-size-touch-target, 2.75rem); --kite-dropdown-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-dropdown-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-dropdown-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-dropdown-icon-height: var(--kite-size-16, 1rem); --kite-dropdown-icon-width: var(--kite-size-16, 1rem); --kite-dropdown-icon-margin-right: var(--kite-size-8, 0.5rem); --kite-dropdown-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'dropdown-background-color' token */ --kite-dropdown-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-border-color' token */ --kite-dropdown-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-icon-color' token */ --kite-dropdown-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-label-text-color' token */ --kite-dropdown-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-text-color' token */ --kite-dropdown-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-focus-ring-color' token */ --kite-dropdown-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'dropdown-disabled-background-color' token */ --kite-dropdown-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-disabled-border-color' token */ --kite-dropdown-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-disabled-icon-color' token */ --kite-dropdown-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-disabled-text-color' token */ --kite-dropdown-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'dropdown-error-border-color' token */ --kite-dropdown-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'dropdown-error-text-color' token */ --kite-dropdown-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-dropdown-list-cursor: var(--kite-cursor-action, pointer); --kite-dropdown-list-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-dropdown-list-transition-timing-function: var(--kite-menu-list-transition-curve, cubic-bezier(0.25, 0.8, 0.5, 1)); --kite-dropdown-list-zindex: var(--kite-zindex-dropdown, 1100); --kite-dropdown-list-item-padding-top: var(--kite-menu-list-item-padding-top, 0.625rem); --kite-dropdown-list-item-padding-bottom: var(--kite-menu-list-item-padding-bottom, 0.625rem); --kite-dropdown-list-item-icon-height: var(--kite-size-16, 1rem); --kite-dropdown-list-item-icon-width: var(--kite-size-16, 1rem); --kite-dropdown-list-item-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-dropdown-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-dropdown-list-item-selected-text-weight: var(--kite-font-weight-bold, 700); --kite-dropdown-inline-border-radius: var(--kite-form-control-border-radius, 0); --kite-dropdown-inline-border-width: var(--kite-border-width-none, 0); --kite-dropdown-inline-label-text-weight: var(--kite-font-weight-bold, 700); --kite-dropdown-list-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "dropdown-list-background-color" token */ --kite-dropdown-list-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "dropdown-list-border-color" token */ --kite-dropdown-list-item-destructive-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "dropdown-list-item-destructive-text-color" token */ --kite-dropdown-list-item-destructive-icon-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "dropdown-list-item-destructive-icon-color" token */ --kite-dropdown-list-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-list-item-text-color" token */ --kite-dropdown-list-item-icon-fill-dark: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "dropdown-list-item-icon-color" token */ --kite-dropdown-list-item-disabled-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-list-item-disabled-text-color" token */ --kite-dropdown-list-item-hover-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "dropdown-list-item-hover-background-color" token */ --kite-dropdown-list-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-list-item-focus-ring-color" token */ --kite-dropdown-list-z-index: var(--kite-zindex-dropdown, 1100); /** @deprecated: Replace with "dropdown-list-zindex" token */ --kite-dropdown-list-item-icon-fill: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "dropdown-list-item-icon-color" token */ --kite-dropdown-inline-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-inline-focus-ring-color" token */ --kite-dropdown-inline-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-inline-text-color" token */ --kite-dynamic-hint-max-width: var(--kite-form-control-max-width, 18rem); --kite-dynamic-hint-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-dynamic-hint-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-dynamic-hint-zindex: var(--kite-zindex-dropdown, 1100); --kite-dynamic-hint-arrow-height: var(--kite-size-8, 0.5rem); --kite-dynamic-hint-arrow-width: var(--kite-size-16, 1rem); --kite-dynamic-hint-title-text-weight: var(--kite-font-weight-bold, 700); --kite-dynamic-hint-criteria-icon-height: var(--kite-size-16, 1rem); --kite-dynamic-hint-criteria-icon-width: var(--kite-size-16, 1rem); --kite-dynamic-hint-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "dynamic-hint-background-color" token */ --kite-dynamic-hint-arrow-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "dynamic-hint-arrow-background-color" token */ --kite-dynamic-hint-criteria-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dynamic-hint-criteria-text-color" token */ --kite-dynamic-hint-criteria-success-icon-fill-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "dynamic-hint-criteria-positive-icon-color" token */ --kite-dynamic-hint-criteria-error-icon-fill-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "dynamic-hint-criteria-negative-icon-color" token */ --kite-interactive-list-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with "list-disabled-cursor" token */ --kite-interactive-list-item-border-radius: var(--kite-interactive-list-border-radius, 0); /** @deprecated: Replace with "list-item-border-radius" token */ --kite-interactive-list-item-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); /** @deprecated: Replace with "list-item-focus-ring-offset" token */ --kite-interactive-list-item-cursor: var(--kite-cursor-action, pointer); /** @deprecated: Replace with "list-item-cursor" token */ --kite-interactive-list-item-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "list-item-icon-height" token */ --kite-interactive-list-item-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "list-item-icon-width" token */ --kite-interactive-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with "list-item-disabled-cursor" token */ --kite-interactive-list-item-multiline-title-text-weight: var(--kite-font-weight-medium, 500); /** @deprecated: Replace with "list-item-multiline-title-text-weight" token */ --kite-interactive-list-item-breakpoint-md-title-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); /** @deprecated: Replace with "list-item-breakpoint-md-title-text-size" token */ --kite-interactive-list-image-border-radius: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with "list-image-border-radius" token */ --kite-interactive-list-item-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-label-text-color" token */ --kite-interactive-list-item-danger-label-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "list-item-negative-label-text-color" token */ --kite-interactive-list-item-info-label-text-color-dark: var(--kite-color-blue-10, #31a2ff); /** @deprecated: Replace with "list-item-neutral-label-text-color" token */ --kite-interactive-list-item-success-label-text-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "list-item-positive-label-text-color" token */ --kite-interactive-list-item-border-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "list-item-border-color" token */ --kite-interactive-list-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-text-color" token */ --kite-interactive-list-item-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-icon-color" token */ --kite-interactive-list-item-action-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-action-icon-color" token */ --kite-interactive-list-item-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "list-item-disabled-text-color" token */ --kite-interactive-list-item-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "list-item-disabled-icon-color" token */ --kite-interactive-list-item-disabled-action-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "list-item-disabled-action-icon-color" token */ --kite-interactive-list-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-focus-ring-color" token */ --kite-link-text-decoration: var(--kite-link-text-decoration-line, underline); --kite-link-text-decoration-offset: var(--kite-size-2, 0.125rem); --kite-link-text-decoration-thickness: var(--kite-size-2, 0.125rem); --kite-link-hover-text-color: var(--kite-color-dark-blue-10, #003561); --kite-link-press-text-color: var(--kite-color-dark-blue-20, #002747); --kite-link-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-link-cursor: var(--kite-cursor-action, pointer); --kite-link-icon-height: var(--kite-size-14, 0.875rem); --kite-link-icon-width: var(--kite-size-14, 0.875rem); --kite-link-standalone-text-decoration: var(--kite-link-standalone-text-decoration-line, none); --kite-link-standalone-text-weight: var(--kite-font-weight-medium, 500); --kite-link-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-text-color" token */ --kite-link-active-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "link-press-text-color" token */ --kite-link-visited-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-visited-text-color" token */ --kite-link-focus-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-focus-text-color" token */ --kite-link-hover-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-hover-text-color" token */ --kite-link-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-focus-ring-color" token */ --kite-link-standalone-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-standalone-icon-color" token */ --kite-link-standalone-active-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "link-standalone-press-icon-color" token */ --kite-link-standalone-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-standalone-focus-icon-color" token */ --kite-link-standalone-hover-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-standalone-hover-icon-color" token */ --kite-link-standalone-visited-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-standalone-visited-icon-color" token */ --kite-link-standalone-active-icon-fill: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "link-standalone-press-icon-color" token */ --kite-link-standalone-hover-icon-fill: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "link-standalone-hover-icon-color" token */ --kite-link-standalone-visited-icon-fill: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "link-standalone-visited-icon-color" token */ --kite-list-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-list-item-border-radius: var(--kite-list-border-radius, 0); --kite-list-item-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-list-item-cursor: var(--kite-cursor-action, pointer); --kite-list-item-slot-start-max-width: var(--kite-list-start-max-width, 5rem); --kite-list-item-icon-height: var(--kite-size-24, 1.5rem); --kite-list-item-icon-width: var(--kite-size-24, 1.5rem); --kite-list-item-image-sm-max-width: var(--kite-size-48, 3rem); --kite-list-item-image-sm-max-height: var(--kite-size-48, 3rem); --kite-list-item-action-icon-height: var(--kite-size-16, 1rem); --kite-list-item-action-icon-width: var(--kite-size-16, 1rem); --kite-list-item-label-icon-width: var(--kite-size-16, 1rem); --kite-list-item-label-icon-height: var(--kite-size-16, 1rem); --kite-list-item-title-body-text-weight: var(--kite-font-weight-medium, 500); --kite-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-list-item-multiline-title-text-weight: var(--kite-font-weight-medium, 500); --kite-list-item-muted-label-text-color: var(--kite-color-gray-30, #63738a); --kite-list-item-breakpoint-md-title-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-list-item-breakpoint-md-title-body-text-size: var(--kite-typography-lg-body-size, 1rem); --kite-list-item-breakpoint-md-title-body-text-weight: var(--kite-font-weight-medium, 500); --kite-list-item-breakpoint-md-title-body-text-line-height: var(--kite-typography-lg-body-line-height, 1.5); --kite-list-image-border-radius: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'list-item-image-border-radius' token */ --kite-list-image-max-width: var(--kite-list-item-image-lg-max-width, 5rem); /** @deprecated: Replace with 'list-item-image-max-width' token */ --kite-list-image-max-height: var(--kite-list-item-image-lg-max-height, 5rem); /** @deprecated: Replace with 'list-item-image-max-width' token */ --kite-menu-list-max-width: var(--kite-form-control-max-width, 18rem); --kite-menu-list-cursor: var(--kite-cursor-action, pointer); --kite-menu-list-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-menu-list-transition-timing-function: var(--kite-menu-list-transition-curve, cubic-bezier(0.25, 0.8, 0.5, 1)); --kite-menu-list-zindex: var(--kite-zindex-dropdown, 1100); --kite-menu-list-item-icon-color: var(--kite-color-dark-blue-30, #001221); --kite-menu-list-item-icon-height: var(--kite-size-20, 1.25rem); --kite-menu-list-item-icon-width: var(--kite-size-20, 1.25rem); --kite-menu-list-item-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-menu-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-menu-trigger-width: var(--kite-size-touch-target, 2.75rem); --kite-menu-trigger-height: var(--kite-size-touch-target, 2.75rem); --kite-menu-trigger-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-menu-trigger-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-menu-trigger-cursor: var(--kite-cursor-action, pointer); --kite-menu-trigger-icon-height: var(--kite-size-20, 1.25rem); --kite-menu-trigger-icon-width: var(--kite-size-20, 1.25rem); --kite-menu-contextual-label-trigger-label-text-weight: var(--kite-font-weight-medium, 500); --kite-menu-sm-trigger-padding-top: var(--kite-size-2, 0.125rem); --kite-menu-sm-trigger-padding-right: var(--kite-size-2, 0.125rem); --kite-menu-sm-trigger-padding-bottom: var(--kite-size-2, 0.125rem); --kite-menu-sm-trigger-padding-left: var(--kite-size-2, 0.125rem); --kite-menu-list-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with "menu-list-background-color" token */ --kite-menu-list-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-list-border-color" token */ --kite-menu-list-item-negative-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "menu-list-item-negative-text-color" token */ --kite-menu-list-item-negative-icon-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "menu-list-item-negative-icon-color" token */ --kite-menu-list-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-list-item-text-color" token */ --kite-menu-list-item-icon-fill-dark: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "menu-list-item-icon-color" token */ --kite-menu-list-item-disabled-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-list-item-disabled-text-color" token */ --kite-menu-list-item-hover-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-list-item-hover-background-color" token */ --kite-menu-list-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-list-item-focus-ring-color" token */ --kite-menu-trigger-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-trigger-icon-color" token */ --kite-menu-trigger-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-focus-ring-color" token */ --kite-menu-trigger-hover-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-trigger-hover-background-color" token */ --kite-menu-trigger-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-trigger-disabled-icon-color" token */ --kite-menu-list-z-index: var(--kite-zindex-dropdown, 1100); /** @deprecated: Replace with "menu-list-zindex" token */ --kite-menu-list-item-icon-fill: var(--kite-color-dark-blue-30, #001221); /** @deprecated: Replace with "menu-list-item-icon-color" token */ --kite-meter-icon-width: var(--kite-size-16, 1rem); --kite-meter-icon-height: var(--kite-size-16, 1rem); --kite-meter-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-status-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-track-color: var(--kite-color-gray-20, #d8dde6); --kite-meter-track-height: var(--kite-size-8, 0.5rem); --kite-meter-tick-color: var(--kite-color-black, #000000); --kite-meter-tick-width: var(--kite-size-4, 0.25rem); --kite-meter-value-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-sm-icon-width: var(--kite-size-12, 0.75rem); --kite-meter-sm-icon-height: var(--kite-size-12, 0.75rem); --kite-meter-sm-status-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-sm-track-height: var(--kite-size-4, 0.25rem); --kite-meter-lg-icon-width: var(--kite-size-16, 1rem); --kite-meter-lg-icon-height: var(--kite-size-16, 1rem); --kite-meter-lg-label-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-meter-lg-label-text-line-height: var(--kite-typography-lg-title-6-line-height, 1.4); --kite-meter-lg-status-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-lg-track-height: var(--kite-size-16, 1rem); --kite-meter-circular-height: var(--kite-meter-circular-width, 5.5rem); --kite-meter-circular-height-px: var(--kite-meter-circular-width-px, 88px); --kite-meter-circular-icon-width: var(--kite-size-12, 0.75rem); --kite-meter-circular-icon-height: var(--kite-size-12, 0.75rem); --kite-meter-circular-sm-width: var(--kite-size-24, 1.5rem); --kite-meter-circular-sm-height-px: var(--kite-meter-circular-sm-width-px, 24px); --kite-meter-circular-sm-tick-height: var(--kite-meter-circular-sm-track-height, 0.125rem); --kite-meter-circular-lg-height: var(--kite-meter-circular-lg-width, 9.25rem); --kite-meter-circular-lg-height-px: var(--kite-meter-circular-lg-width-px, 148px); --kite-meter-circular-lg-track-height-px: var(--kite-meter-circular-track-height-px, 8px); --kite-meter-circular-lg-value-label-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-meter-circular-lg-value-label-text-line-height: var(--kite-typography-lg-title-6-line-height, 1.4); --kite-meter-accessibility-tick-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'meter-tick-color' token */ --kite-meter-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'meter-label-text-color' token */ --kite-meter-progress-fill-background-color-dark: var(--kite-color-light-blue-20, #5db8fc); /** @deprecated: Replace with 'meter-fill-color' token */ --kite-meter-track-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'meter-track-color' token */ --kite-meter-positive-progress-fill-background-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-positive-status-icon-fill-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'meter-positive-icon-color' token */ --kite-meter-caution-progress-fill-background-color-dark: var(--kite-color-yellow-10, #ffd400); /** @deprecated: Replace with 'meter-caution-fill-color' token */ --kite-meter-caution-status-icon-fill-dark: var(--kite-color-yellow-10, #ffd400); /** @deprecated: Replace with 'meter-caution-icon-color' token */ --kite-meter-alert-progress-fill-background-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'meter-negative-fill-color' token */ --kite-meter-alert-status-icon-fill-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'meter-negative-icon-color' token */ --kite-meter-success-progress-fill-background-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-accessibility-tick-background-color: var(--kite-color-black, #000000); /** @deprecated: Replace with 'meter-tick-color' token */ --kite-meter-progress-fill-background-color: var(--kite-color-light-blue-20, #5db8fc); /** @deprecated: Replace with 'meter-fill-color' token */ --kite-meter-track-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with 'meter-track-color' token */ --kite-meter-value-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'meter-value-label-text-color' token */ --kite-meter-status-icon-height: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'meter-progress-icon-height' token */ --kite-meter-status-icon-width: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'meter-progress-icon-width' token */ --kite-meter-linear-track-height: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with 'meter-track-height' token */ --kite-meter-linear-small-track-height: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'meter-sm-track-height' token */ --kite-meter-linear-large-track-height: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'meter-lg-track-height' token */ --kite-meter-circular-small-accessibility-tick-width: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'meter-circular-sm-tick-width' token */ --kite-meter-circular-small-accessibility-tick-height: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'meter-circular-sm-tick-height' token */ --kite-meter-circular-large-status-icon-height: var(--kite-size-12, 0.75rem); /** @deprecated: Replace with 'meter-circular-lg-icon-height' token */ --kite-meter-circular-large-status-icon-width: var(--kite-size-12, 0.75rem); /** @deprecated: Replace with 'meter-circular-lg-icon-width' token */ --kite-meter-circular-large-track-height: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with 'meter-circular-lg-track-height' token */ --kite-meter-circular-large-value-label-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); /** @deprecated: Replace with 'meter-circular-lg-value-label-text-size' token */ --kite-pagination-controls-button-cursor: var(--kite-cursor-action, pointer); --kite-pagination-controls-button-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-pagination-controls-button-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-pagination-controls-button-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-pagination-controls-button-icon-width: var(--kite-size-12, 0.75rem); --kite-pagination-controls-button-icon-height: var(--kite-size-12, 0.75rem); --kite-pagination-page-select-current-label-margin-top: var(--kite-pagination-dropdown-margin-top, 0); --kite-pagination-page-select-current-label-margin-bottom: var(--kite-pagination-dropdown-margin-bottom, 0); --kite-pagination-dropdown-height: var(--kite-size-touch-target, 2.75rem); --kite-pagination-dropdown-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-pagination-dropdown-icon-width: var(--kite-size-12, 0.75rem); --kite-pagination-dropdown-icon-height: var(--kite-size-12, 0.75rem); --kite-pagination-dropdown-placeholder-text-weight: var(--kite-font-weight-bold, 700); --kite-pagination-count-text-color: var(--kite-color-gray-30, #63738a); --kite-pagination-controls-border-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'pagination-controls-border-color' token */ --kite-pagination-controls-button-icon-fill: var(--kite-color-blue-20, #0073d1); /** @deprecated: Replace with 'pagination-controls-button-icon-color' token */ --kite-pagination-controls-button-icon-fill-dark: var(--kite-color-blue-20, #0073d1); /** @deprecated: Replace with 'pagination-controls-button-icon-color' token */ --kite-pagination-controls-button-previous-border-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'pagination-controls-button-border-color' token */ --kite-pagination-controls-button-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'pagination-controls-button-disabled-icon-color' token */ --kite-pagination-controls-button-hover-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'pagination-controls-button-hover-background-color' token */ --kite-pagination-controls-button-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'pagination-controls-button-focus-ring-color' token */ --kite-pagination-per-page-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'pagination-page-size-label-text-color' token */ --kite-pagination-item-count-label-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'pagination-count-text-color' token */ --kite-pagination-item-count-label-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'pagination-count-text-color' token */ --kite-payment-logo-border-width: var(--kite-border-width-none, 0); --kite-payment-logo-width: var(--kite-size-24, 1.5rem); --kite-payment-logo-height: var(--kite-size-24, 1.5rem); --kite-payment-logo-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-payment-logo-elevation: var(--kite-elevation-0, none); --kite-popover-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-popover-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-popover-zindex: var(--kite-zindex-dropdown, 1100); --kite-popover-breakpoint-md-title-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-popover-breakpoint-md-max-width: var(--kite-form-control-max-width, 18rem); --kite-popover-arrow-height: var(--kite-size-8, 0.5rem); --kite-popover-arrow-width: var(--kite-size-16, 1rem); --kite-popover-trigger-cursor: var(--kite-cursor-action, pointer); --kite-popover-trigger-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-popover-trigger-icon-height: var(--kite-size-16, 1rem); --kite-popover-trigger-icon-width: var(--kite-size-16, 1rem); --kite-popover-dismiss-icon-cursor: var(--kite-cursor-action, pointer); --kite-popover-dismiss-icon-height: var(--kite-size-16, 1rem); --kite-popover-dismiss-icon-width: var(--kite-size-16, 1rem); --kite-popover-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'popover-background-color' token */ --kite-popover-z-index: var(--kite-zindex-dropdown, 1100); /** @deprecated: Replace with 'popover-zindex' token */ --kite-popover-trigger-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-icon-color' token */ --kite-popover-trigger-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-label-text-color' token */ --kite-popover-trigger-active-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-expanded-icon-color' token */ --kite-popover-trigger-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-focus-icon-color' token */ --kite-popover-trigger-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-focus-ring-color' token */ --kite-popover-trigger-hover-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-hover-icon-color' token */ --kite-popover-arrow-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'popover-arrow-background-color' token */ --kite-popover-dismiss-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with 'popover-dismiss-icon-color' token */ --kite-popover-dismiss-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-dismiss-icon-color' token */ --kite-progress-indicator-border-width: var(--kite-border-width-none, 0); --kite-progress-indicator-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-progress-indicator-zindex: var(--kite-zindex-dialog, 1300); --kite-progress-indicator-label-text-weight: var(--kite-font-weight-bold, 700); --kite-progress-indicator-track-color: var(--kite-color-gray-20, #d8dde6); --kite-progress-indicator-track-size: var(--kite-size-4, 0.25rem); --kite-progress-indicator-value-label-weight: var(--kite-font-weight-bold, 700); --kite-progress-indicator-secondary-label-color: var(--kite-color-gray-30, #63738a); --kite-progress-indicator-icon-width: var(--kite-size-20, 1.25rem); --kite-progress-indicator-button-fill-color: var(--kite-color-white, #ffffff); --kite-progress-indicator-circular-height: var(--kite-progress-indicator-circular-width, 2.5rem); --kite-progress-indicator-circular-height-px: var(--kite-progress-indicator-circular-width-px, 40px); --kite-progress-indicator-circular-label-text-weight: var(--kite-font-weight-bold, 700); --kite-progress-indicator-circular-icon-height: var(--kite-progress-indicator-circular-icon-width, 2.75rem); --kite-progress-indicator-circular-sm-track-size: var(--kite-size-2, 0.125rem); --kite-progress-indicator-circular-sm-width: var(--kite-size-24, 1.5rem); --kite-progress-indicator-circular-sm-height-px: var(--kite-progress-indicator-circular-sm-width-px, 24px); --kite-progress-indicator-circular-sm-icon-height: var(--kite-progress-indicator-circular-sm-icon-width, 1.625rem); --kite-progress-indicator-circular-lg-track-size: var(--kite-size-4, 0.25rem); --kite-progress-indicator-circular-lg-height: var(--kite-progress-indicator-circular-lg-width, 5rem); --kite-progress-indicator-circular-lg-height-px: var(--kite-progress-indicator-circular-lg-width-px, 80px); --kite-progress-indicator-circular-lg-icon-height: var(--kite-progress-indicator-circular-lg-icon-width, 5rem); --kite-progress-indicator-lg-border-width: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'progress-indicator-circular-lg-track-size' token */ --kite-progress-indicator-lg-status-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'progress-indicator-value-label-color' token */ --kite-progress-indicator-lg-status-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with 'progress-indicator-circular-value-label-weight' token */ --kite-progress-indicator-lg-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'progress-indicator-label-text-color' token */ --kite-progress-indicator-lg-label-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with 'progress-indicator-circular-label-text-weight' token */ --kite-progress-indicator-lg-sub-label-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'progress-indicator-secondary-label-color' token */ --kite-progress-indicator-lg-sub-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'progress-indicator-secondary-label-color' token */ --kite-progress-indicator-md-border-width: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'progress-indicator-track-size' token */ --kite-progress-indicator-sm-border-width: var(--kite-size-2, 0.125rem); /** @deprecated: Replace with 'progress-indicator-circular-sm-track-size' token */ --kite-progress-indicator-sm-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'progress-indicator-circular-sm-height' token */ --kite-progress-indicator-sm-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'progress-indicator-circular-sm-width' token */ --kite-radio-border-offset: var(--kite-size-2, 0.125rem); --kite-radio-height: var(--kite-size-20, 1.25rem); --kite-radio-focus-ring-width: var(--kite-size-4, 0.25rem); --kite-radio-focus-ring-offset: var(--kite-size-4, 0.25rem); --kite-radio-selected-indicator-height: var(--kite-size-12, 0.75rem); --kite-radio-input-margin-top: var(--kite-size-2, 0.125rem); --kite-radio-input-margin-bottom: var(--kite-size-2, 0.125rem); --kite-radio-border-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'radio-border-color' token */ --kite-radio-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'radio-label-text-color' token */ --kite-radio-selected-border-color-dark: var(--kite-color-blue-20, #0073d1); /** @deprecated: Replace with 'radio-selected-border-color' token */ --kite-radio-selected-indicator-background-color-dark: var(--kite-color-blue-20, #0073d1); /** @deprecated: Replace with 'radio-selected-indicator-background-color' token */ --kite-radio-selected-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-selected-disabled-border-color' token */ --kite-radio-selected-disabled-center-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-selected-disabled-indicator-background-color' token */ --kite-radio-selected-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'radio-selected-focus-ring-color' token */ --kite-radio-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-disabled-border-color' token */ --kite-radio-disabled-label-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-disabled-label-text-color' token */ --kite-search-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-search-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-search-input-max-width: var(--kite-form-control-max-width, 18rem); --kite-search-input-height: var(--kite-size-touch-target, 2.75rem); --kite-search-input-action-cursor: var(--kite-cursor-action, pointer); --kite-search-input-addon-padding-top: var(--kite-form-control-addon-padding-top, 0); --kite-search-input-addon-padding-bottom: var(--kite-form-control-addon-padding-bottom, 0); --kite-select-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-select-border-radius: var(--kite-form-control-border-radius, 0); --kite-select-max-width: var(--kite-form-control-max-width, 18rem); --kite-select-height: var(--kite-size-touch-target, 2.75rem); --kite-select-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-select-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-select-icon-height: var(--kite-size-24, 1.5rem); --kite-select-icon-width: var(--kite-size-24, 1.5rem); --kite-select-icon-color: var(--kite-color-dark-blue-30, #001221); --kite-select-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'select-background-color' token */ --kite-select-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-border-color' token */ --kite-select-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-icon-color' token */ --kite-select-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-label-text-color' token */ --kite-select-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-text-color' token */ --kite-select-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-focus-ring-color' token */ --kite-select-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'select-disabled-background-color' token */ --kite-select-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-disabled-border-color' token */ --kite-select-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-disabled-icon-color' token */ --kite-select-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-disabled-text-color' token */ --kite-select-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'select-error-border-color' token */ --kite-select-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'select-error-text-color' token */ --kite-select-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-skip-link-background-color: var(--kite-color-dark-blue-30, #001221); --kite-skip-link-text-color: var(--kite-color-white, #ffffff); --kite-skip-link-text-weight: var(--kite-font-weight-medium, 500); --kite-skip-link-border-color: var(--kite-color-blue-20, #0073d1); --kite-skip-link-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-skip-link-zindex: var(--kite-zindex-dropdown, 1100); --kite-skip-link-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'skip-link-background-color' token */ --kite-skip-link-border-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'skip-link-border-color' token */ --kite-skip-link-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'skip-link-text-color' token */ --kite-switch-focus-ring-radius: var(--kite-size-16, 1rem); --kite-switch-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-switch-cursor: var(--kite-cursor-action, pointer); --kite-switch-thumb-background-color: var(--kite-color-white, #ffffff); --kite-switch-thumb-height: var(--kite-size-20, 1.25rem); --kite-switch-thumb-transform-x: var(--kite-size-24, 1.5rem); --kite-switch-track-background-color: var(--kite-color-gray-30, #63738a); --kite-switch-track-border-radius: var(--kite-size-32, 2rem); --kite-switch-track-padding-top: var(--kite-size-2, 0.125rem); --kite-switch-track-padding-right: var(--kite-size-2, 0.125rem); --kite-switch-track-padding-bottom: var(--kite-size-2, 0.125rem); --kite-switch-track-padding-left: var(--kite-size-2, 0.125rem); --kite-switch-track-height: var(--kite-size-24, 1.5rem); --kite-switch-track-width: var(--kite-size-48, 3rem); --kite-switch-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-label-text-color' token */ --kite-switch-on-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-on-focus-ring-color' token */ --kite-switch-indicator-background-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-thumb-background-color' token */ --kite-switch-indicator-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-thumb-background-color' token */ --kite-switch-indicator-height: var(--kite-size-20, 1.25rem); /** @deprecated: Replace with 'switch-thumb-height' token */ --kite-switch-indicator-width: var(--kite-size-20, 1.25rem); /** @deprecated: Replace with 'switch-thumb-width' token */ --kite-switch-disabled-indicator-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with 'switch-disabled-thumb-background-color' token */ --kite-switch-disabled-indicator-background-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'switch-disabled-thumb-background-color' token */ --kite-switch-off-track-background-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'switch-track-background-color' token */ --kite-switch-off-track-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'switch-track-background-color' token */ --kite-switch-off-focus-ring-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'switch-focus-ring-color' token */ --kite-switch-off-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-focus-ring-color' token */ --kite-tabs-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-tabs-tab-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-tabs-tab-hover-border-bottom-color: var(--kite-color-gray-30, #63738a); --kite-tabs-tab-selected-text-weight: var(--kite-font-weight-bold, 700); --kite-tabs-tab-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-tabs-tab-cursor: var(--kite-cursor-action, pointer); --kite-tabs-panel-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-tabs-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-text-color' token */ --kite-tabs-item-cursor: var(--kite-cursor-action, pointer); /** @deprecated: Replace with 'tabs-tab-cursor' token */ --kite-tabs-item-active-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-selected-text-color' token */ --kite-tabs-item-active-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with 'tabs-tab-selected-text-weight' token */ --kite-tabs-item-hover-border-bottom: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'tabs-tab-hover-border-bottom' token */ --kite-tabs-item-hover-border-bottom-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-hover-border-bottom' token */ --kite-tabs-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with 'tabs-tab-disabled-cursor' token */ --kite-tabs-item-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'tabs-tab-disabled-text-color' token */ --kite-tabs-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-focus-ring-color' token */ --kite-tag-background-color: var(--kite-color-gray-10, #f8f8f8); --kite-tag-text-size: var(--kite-size-14, 0.875rem); --kite-tag-text-weight: var(--kite-font-weight-medium, 500); --kite-tag-border-color: var(--kite-color-gray-25, #9ba9bd); --kite-tag-icon-size: var(--kite-size-16, 1rem); --kite-tag-caution-text-color: var(--kite-color-black, #000000); --kite-tag-negative-text-color: var(--kite-color-black, #000000); --kite-tag-neutral-text-color: var(--kite-color-black, #000000); --kite-tag-positive-text-color: var(--kite-color-black, #000000); --kite-tag-solid-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-tag-solid-text-color: var(--kite-color-black, #000000); --kite-tag-solid-caution-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-tag-solid-negative-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-tag-solid-neutral-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-tag-solid-positive-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-text-area-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-text-area-text-overflow: var(--kite-form-control-text-overflow, clip); --kite-text-area-border-radius: var(--kite-form-control-border-radius, 0); --kite-text-area-max-width: var(--kite-form-control-max-width, 18rem); --kite-text-area-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-text-area-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-text-area-character-count-text-color: var(--kite-color-gray-30, #63738a); --kite-text-area-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'text-area-background-color' token */ --kite-text-area-hint-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-placeholder-text-color' token */ --kite-text-area-hint-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-placeholder-text-color' token */ --kite-text-area-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-area-label-text-color' token */ --kite-text-area-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-area-text-color' token */ --kite-text-area-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'text-area-disabled-background-color' token */ --kite-text-area-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-disabled-border-color' token */ --kite-text-area-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-disabled-text-color' token */ --kite-text-area-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-area-error-border-color' token */ --kite-text-area-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-area-error-feedback-text-color' token */ --kite-text-area-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-text-area-focus-ring-color-dark: var(--kite-color-blue-10, #31a2ff); /** @deprecated: Replace with 'text-area-focus-ring-color' token */ --kite-text-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-text-input-text-overflow: var(--kite-form-control-text-overflow, clip); --kite-text-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-text-input-height: var(--kite-size-touch-target, 2.75rem); --kite-text-input-max-width: var(--kite-form-control-max-width, 18rem); --kite-text-input-addon-padding-top: var(--kite-form-control-addon-padding-top, 0); --kite-text-input-addon-padding-bottom: var(--kite-form-control-addon-padding-bottom, 0); --kite-text-input-character-count-text-color: var(--kite-color-gray-30, #63738a); --kite-text-input-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-text-input-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-text-input-secure-text-overflow: var(--kite-form-control-text-overflow, clip); --kite-text-input-secure-icon-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-text-input-secure-confirm-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-confirm-icon-width' token */ --kite-text-input-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'text-input-background-color' token */ --kite-text-input-hint-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-placeholder-text-color' token */ --kite-text-input-hint-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-placeholder-text-color' token */ --kite-text-input-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-input-label-text-color' token */ --kite-text-input-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-input-text-color' token */ --kite-text-input-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002747); /** @deprecated: Replace with 'text-input-disabled-background-color' token */ --kite-text-input-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-disabled-border-color' token */ --kite-text-input-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-disabled-text-color' token */ --kite-text-input-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-input-error-border-color' token */ --kite-text-input-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-input-error-feedback-text-color' token */ --kite-text-input-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-text-input-focus-ring-color-dark: var(--kite-color-blue-10, #31a2ff); /** @deprecated: Replace with 'text-input-focus-ring-color' token */ --kite-text-input-secure-show-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-icon-height' token */ --kite-text-input-secure-show-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-icon-width' token */ --kite-text-input-secure-show-icon-focus-ring-color-dark: var(--kite-color-blue-10, #31a2ff); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-color' token */ --kite-text-input-secure-hide-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-visible-icon-height' token */ --kite-text-input-secure-hide-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-visible-icon-width' token */ --kite-time-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-time-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-time-input-max-width: var(--kite-form-control-max-width, 18rem); --kite-time-input-height: var(--kite-size-touch-target, 2.75rem); --kite-time-input-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-time-input-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-time-input-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-time-input-icon-color: var(--kite-color-blue-20, #0073d1); --kite-toast-background-color: var(--kite-color-dark-blue-30, #001221); --kite-toast-text-color: var(--kite-color-white, #ffffff); --kite-toast-min-height: var(--kite-size-touch-target, 2.75rem); --kite-toast-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-toast-elevation: var(--kite-elevation-3, 0 3px 12px 0 rgba(0, 0, 0, 0.1)); --kite-toast-transition-timing-function: var(--kite-toast-transition-curve, cubic-bezier(0.25, 0.8, 0.5, 1)); --kite-toast-zindex: var(--kite-zindex-notification, 1600); --kite-toast-icon-color: var(--kite-color-green-10, #00bf1f); --kite-toast-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'toast-background-color' token */ --kite-toast-height: var(--kite-size-touch-target, 2.75rem); /** @deprecated: Replace with 'toast-min-height' token */ --kite-toast-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'toast-text-color' token */ --kite-toast-z-index: var(--kite-zindex-notification, 1600); /** @deprecated: Replace with 'toast-zindex' token */ --kite-tooltip-background-color: var(--kite-color-dark-blue-30, #001221); --kite-tooltip-text-color: var(--kite-color-white, #ffffff); --kite-tooltip-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-tooltip-zindex: var(--kite-zindex-dropdown, 1100); --kite-tooltip-arrow-height: var(--kite-size-8, 0.5rem); --kite-tooltip-arrow-width: var(--kite-size-12, 0.75rem); --kite-tooltip-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'tooltip-background-color' token */ --kite-tooltip-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tooltip-text-color' token */ --kite-tooltip-arrow-background-color-dark: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with 'tooltip-arrow-background-color' token */ --kite-border-radius-circle: var(--kite-size-radius-circle, 50%); --kite-border-radius-sm: var(--kite-size-radius-sm, 0.125rem); --kite-border-radius-md: var(--kite-size-radius-md, 0.25rem); /** Border radius for buttons, cards, toasts ... */ --kite-border-radius-lg: var(--kite-size-radius-lg, 0.5rem); --kite-color-caution-focus: var(--kite-color-caution, #faa41a); /** Focus state of caution color */ --kite-color-caution-hover: var(--kite-color-caution, #faa41a); /** Hover state of caution color */ --kite-color-caution-press: var(--kite-color-caution, #faa41a); /** Pressed state of caution color */ --kite-color-neutral-focus: var(--kite-color-neutral, #5db8fc); /** Focus state of neutral color */ --kite-color-neutral-hover: var(--kite-color-neutral, #5db8fc); /** Hover state of neutral color */ --kite-color-neutral-press: var(--kite-color-neutral, #5db8fc); /** Pressed state of neutral color */ --kite-color-positive-focus: var(--kite-color-positive, #008516); /** Focus state of positive color */ --kite-color-positive-hover: var(--kite-color-positive, #008516); /** Hover state of positive color */ --kite-color-positive-press: var(--kite-color-positive, #008516); /** Pressed state of positive color */ --kite-color-disabled-focus: var(--kite-color-disabled, #9ba9bd); /** Focus state of disabled color */ --kite-color-disabled-hover: var(--kite-color-disabled, #9ba9bd); /** Hover state of disabled color */ --kite-color-disabled-press: var(--kite-color-disabled, #9ba9bd); /** Pressed state of disabled color */ --kite-font-family-default: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** Default font-family for body copy */ --kite-font-family-heading: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** Default font-family for headings */ --kite-font-family-text: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** @deprecated: Replace with "kite-font-family" token */ --kite-border-width: var(--kite-border-width-thin, 0.0625rem); /** Default border width for UI elements */ --kite-container-border-color: var(--kite-border-color, #d8dde6); --kite-container-border-style: var(--kite-border-style, solid); --kite-container-padding-top: var(--kite-spacing-md, 1rem); --kite-container-padding-right: var(--kite-spacing-md, 1rem); --kite-container-padding-bottom: var(--kite-spacing-md, 1rem); --kite-container-padding-left: var(--kite-spacing-md, 1rem); --kite-focus-ring-color: var(--kite-color-focus, #0062b2); /** Default color for the outline (aka, focus ring) around focused UI elements */ --kite-focus-color: var(--kite-color-focus, #0062b2); /** @deprecated: Replace with 'color-focus' token */ --kite-font-family: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** Default font-family for body copy */ --kite-my-component-text-color: var(--kite-color-text, #000000); --kite-my-component-border-color: var(--kite-border-color, #d8dde6); --kite-my-component-border-style: var(--kite-border-style, solid); --kite-my-component-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-my-component-padding-right: var(--kite-spacing-md, 1rem); --kite-my-component-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-my-component-padding-left: var(--kite-spacing-md, 1rem); --kite-my-component-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-my-component-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-my-component-transition-duration: var(--kite-motion-faster, 400ms); --kite-my-component-transition-timing-function: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-my-component-list-text-color: var(--kite-color-text, #000000); --kite-my-component-list-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-my-component-list-padding-right: var(--kite-spacing-md, 1rem); --kite-my-component-list-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-my-component-list-padding-left: var(--kite-spacing-md, 1rem); --kite-my-component-error-background-color: var(--kite-color-error, #d6312b); --kite-my-component-variant-name-background-color: var(--kite-color-primary, #0073d1); --kite-my-component-variant-name-text-color: var(--kite-color-success, #008516); --kite-my-component-variant-name-margin-left: var(--kite-spacing-lg, 1.25rem); --kite-my-component-variant-name-padding-bottom: var(--kite-spacing-lg, 1.25rem); --kite-form-control-text-color: var(--kite-color-text, #000000); --kite-form-control-text-size: var(--kite-typography-body-size, 1rem); --kite-form-control-border-style: var(--kite-border-style, solid); --kite-form-control-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-form-control-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-form-control-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-form-control-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-form-control-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-form-control-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-focus-border-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-hover-border-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-disabled-background-color: var(--kite-form-control-background-color, #ffffff); --kite-form-control-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-disabled-helper-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-addon-icon-color: var(--kite-color-primary, #0073d1); --kite-form-control-addon-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-form-control-addon-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-form-control-helper-text-color: var(--kite-color-text-secondary, #63738a); --kite-form-control-label-text-color: var(--kite-color-text, #000000); --kite-form-control-label-text-size: var(--kite-typography-body-size, 1rem); --kite-form-control-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-form-control-label-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-feedback-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-error-border-color: var(--kite-color-negative, #d6312b); --kite-form-control-error-border-width: var(--kite-border-width-thick, 0.125rem); --kite-form-control-error-feedback-text-color: var(--kite-color-negative, #d6312b); --kite-form-control-picker-background-color: var(--kite-container-background-color, #ffffff); --kite-form-control-picker-border-style: var(--kite-border-style, solid); --kite-form-control-picker-transition-duration: var(--kite-motion-fast, 750ms); --kite-form-control-picker-transition-timing-function: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); --kite-form-control-picker-offset: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-picker-list-item-text-color: var(--kite-color-text, #000000); --kite-form-control-picker-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-form-control-picker-list-item-padding-right: var(--kite-spacing-md, 1rem); --kite-form-control-picker-list-item-line-height: var(--kite-typography-body-line-height, 1.5); --kite-form-control-picker-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-form-control-picker-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-picker-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-picker-list-item-icon-margin-right: var(--kite-spacing-md, 1rem); --kite-form-control-picker-list-item-negative-text-color: var(--kite-color-negative, #d6312b); --kite-form-control-picker-list-item-check-icon-color: var(--kite-color-primary, #0073d1); --kite-form-control-picker-list-item-check-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-picker-list-item-check-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-label-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "form-control-disabled-label-text-color" token */ --kite-form-control-input-border-width: var(--kite-border-width-thin, 0.0625rem); /** @deprecated: Replace with "form-control-border-width" token */ --kite-form-control-input-padding-top: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "form-control-padding-top" token */ --kite-form-control-input-padding-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "form-control-padding-right" token */ --kite-form-control-input-padding-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "form-control-padding-bottom" token */ --kite-form-control-input-padding-left: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "form-control-padding-left" token */ --kite-form-control-input-disabled-border-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "form-control-disabled-border-color" token */ --kite-form-control-input-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "form-control-disabled-text-color" token */ --kite-form-control-input-error-border-color: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "form-control-error-border-color" token */ --kite-form-control-input-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with "form-control-focus-ring-style" token */ --kite-form-control-input-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with "form-control-focus-ring-width" token */ --kite-form-control-error-text-color: var(--kite-color-error, #d6312b); /** @deprecated: Inherit from default body text color, and use the error state */ --kite-form-control-error-text-margin-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with "form-control-feedback-margin-top" token */ --kite-form-spacing-inline: var(--kite-spacing-md, 1rem); /** Horizontal spacing to use between inline form fields and groups */ --kite-form-spacing-stack-md: var(--kite-spacing-md, 1rem); --kite-form-spacing-stack-xl: var(--kite-spacing-xl, 1.5rem); --kite-form-spacing-stack-2xl: var(--kite-spacing-2xl, 2rem); --kite-grid-xs-gutters: var(--kite-spacing-md, 1rem); --kite-grid-xs-margins: var(--kite-spacing-md, 1rem); --kite-grid-sm-gutters: var(--kite-spacing-md, 1rem); --kite-grid-sm-margins: var(--kite-spacing-md, 1rem); --kite-grid-md-gutters: var(--kite-spacing-md, 1rem); --kite-grid-md-margins: var(--kite-spacing-md, 1rem); --kite-grid-lg-gutters: var(--kite-spacing-md, 1rem); --kite-grid-lg-margins: var(--kite-spacing-xl, 1.5rem); --kite-grid-xl-gutters: var(--kite-spacing-md, 1rem); --kite-grid-xl-margins: var(--kite-spacing-xl, 1.5rem); --kite-grid-2xl-gutters: var(--kite-spacing-md, 1rem); --kite-grid-2xl-margins: var(--kite-spacing-xl, 1.5rem); --kite-typography-display-weight: var(--kite-typography-sm-display-weight, 800); --kite-typography-display-style: var(--kite-typography-sm-display-style, normal); --kite-typography-title-1-weight: var(--kite-typography-sm-title-1-weight, 800); --kite-typography-title-1-style: var(--kite-typography-sm-title-1-style, normal); --kite-typography-title-1-letter-spacing: var(--kite-typography-sm-title-1-letter-spacing, normal); --kite-typography-title-2-weight: var(--kite-typography-sm-title-2-weight, 700); --kite-typography-title-2-style: var(--kite-typography-sm-title-2-style, normal); --kite-typography-title-2-letter-spacing: var(--kite-typography-sm-title-2-letter-spacing, normal); --kite-typography-title-3-weight: var(--kite-typography-sm-title-3-weight, 700); --kite-typography-title-3-style: var(--kite-typography-sm-title-3-style, normal); --kite-typography-title-3-letter-spacing: var(--kite-typography-sm-title-3-letter-spacing, normal); --kite-typography-title-4-weight: var(--kite-typography-sm-title-4-weight, 500); --kite-typography-title-4-style: var(--kite-typography-sm-title-4-style, normal); --kite-typography-title-4-letter-spacing: var(--kite-typography-sm-title-4-letter-spacing, normal); --kite-typography-title-5-weight: var(--kite-typography-sm-title-5-weight, 500); --kite-typography-title-5-style: var(--kite-typography-sm-title-5-style, normal); --kite-typography-title-5-letter-spacing: var(--kite-typography-sm-title-5-letter-spacing, normal); --kite-typography-title-6-weight: var(--kite-typography-sm-title-6-weight, 500); --kite-typography-title-6-style: var(--kite-typography-sm-title-6-style, normal); --kite-typography-title-6-letter-spacing: var(--kite-typography-sm-title-6-letter-spacing, normal); --kite-typography-body-display-weight: var(--kite-typography-sm-body-display-weight, 400); --kite-typography-body-display-style: var(--kite-typography-sm-body-display-style, normal); --kite-typography-body-display-letter-spacing: var(--kite-typography-sm-body-display-letter-spacing, normal); --kite-typography-body-weight: var(--kite-typography-sm-body-weight, 400); --kite-typography-body-style: var(--kite-typography-sm-body-style, normal); --kite-typography-body-letter-spacing: var(--kite-typography-sm-body-letter-spacing, normal); --kite-typography-eyebrow-weight: var(--kite-typography-sm-eyebrow-weight, 700); --kite-typography-eyebrow-style: var(--kite-typography-sm-eyebrow-style, normal); --kite-typography-caption-1-weight: var(--kite-typography-sm-caption-1-weight, 400); --kite-typography-caption-1-style: var(--kite-typography-sm-caption-1-style, normal); --kite-typography-caption-1-letter-spacing: var(--kite-typography-sm-caption-1-letter-spacing, normal); --kite-typography-caption-2-weight: var(--kite-typography-sm-caption-2-weight, 400); --kite-typography-caption-2-style: var(--kite-typography-sm-caption-2-style, normal); --kite-typography-caption-2-letter-spacing: var(--kite-typography-sm-caption-2-letter-spacing, normal); --kite-typography-sm-display-letter-spacing: var(--kite-letter-spacing, normal); --kite-typography-sm-display-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-sm-title-1-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-sm-title-2-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-title-3-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-sm-title-6-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-sm-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-sm-body-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-sm-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-sm-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-caption-1-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-sm-caption-2-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-lg-display-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-lg-title-1-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-lg-title-2-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-lg-title-3-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-title-5-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-title-6-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-lg-body-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-lg-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-lg-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-caption-1-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-lg-caption-2-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-caption-size: var(--kite-typography-caption-1-size, 0.875rem); /** @deprecated: Replace with 'typography-caption-1-size' token */ --kite-typography-caption-line-height: var(--kite-typography-caption-1-line-height, 1.429); /** @deprecated: Replace with 'typography-caption-1-line-height' token */ --kite-typography-sm-caption-margin-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with 'typography-sm-caption-1-margin-bottom' token */ --kite-typography-lg-caption-margin-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with 'typography-lg-caption-1-margin-bottom' token */ --kite-typography-rutledge-sm-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-sm-title-1-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-4-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-5-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-6-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-sm-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-sm-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-sm-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-sm-eyebrow-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-lg-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-lg-title-1-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-4-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-5-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-6-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-lg-body-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-lg-eyebrow-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-caption-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-xxs-title-1-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xxs-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xxs-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xxs-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xxs-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-rutledge-xxs-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xxs-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-xxs-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xxs-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xs-title-1-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xs-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xs-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xs-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xs-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-rutledge-xs-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xs-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-xs-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xs-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-md-title-1-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-md-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-md-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-md-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-md-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-rutledge-md-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-md-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-md-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-md-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xl-title-1-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-typography-rutledge-xl-title-2-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xl-title-3-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xl-title-4-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-xl-title-5-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xl-body-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-typography-rutledge-xl-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-xl-eyebrow-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-xl-caption-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-accordion-text-color: var(--kite-color-text, #000000); --kite-accordion-border-color: var(--kite-border-color, #d8dde6); --kite-accordion-border-style: var(--kite-border-style, solid); --kite-accordion-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-accordion-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-accordion-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-accordion-disabled-title-text-color: var(--kite-color-disabled, #9ba9bd); --kite-accordion-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-accordion-icon-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-accordion-icon-transition-duration: var(--kite-motion-fast, 750ms); --kite-accordion-padding-top-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-right-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-bottom-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-left-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-top-md: var(--kite-spacing-md, 1rem); --kite-accordion-padding-right-md: var(--kite-spacing-xl, 1.5rem); --kite-accordion-padding-bottom-md: var(--kite-spacing-md, 1rem); --kite-accordion-padding-left-md: var(--kite-spacing-xl, 1.5rem); --kite-accordion-padding-top-lg: var(--kite-spacing-md, 1rem); --kite-accordion-padding-right-lg: var(--kite-spacing-2xl, 2rem); --kite-accordion-padding-bottom-lg: var(--kite-spacing-md, 1rem); --kite-accordion-padding-left-lg: var(--kite-spacing-2xl, 2rem); --kite-accordion-label-text-color: var(--kite-color-text, #000000); --kite-accordion-label-text-size: var(--kite-typography-body-size, 1rem); --kite-accordion-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-accordion-label-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-accordion-title-text-color: var(--kite-color-text, #000000); --kite-accordion-title-text-size: var(--kite-typography-body-size, 1rem); --kite-accordion-title-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-accordion-title-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-accordion-expanded-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-accordion-expanded-padding-bottom: var(--kite-spacing-2xl, 2rem); --kite-accordion-expanded-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-accordion-expanded-title-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-accordion-expanded-transition-duration: var(--kite-motion-fast, 750ms); --kite-accordion-negative-label-text-color: var(--kite-color-negative, #d6312b); --kite-accordion-positive-label-text-color: var(--kite-color-positive, #008516); --kite-accordion-sm-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-top-sm" token */ --kite-accordion-sm-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-right-sm" token */ --kite-accordion-sm-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-bottom-sm" token */ --kite-accordion-sm-padding-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-left-sm" token */ --kite-accordion-md-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-top-md" token */ --kite-accordion-md-padding-right: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "accordion-padding-right-md" token */ --kite-accordion-md-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-bottom-md" token */ --kite-accordion-md-padding-left: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "accordion-padding-left-md" token */ --kite-accordion-lg-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-top-lg" token */ --kite-accordion-lg-padding-right: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "accordion-padding-right-lg" token */ --kite-accordion-lg-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-bottom-lg" token */ --kite-accordion-lg-padding-left: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "accordion-padding-left-lg" token */ --kite-accordion-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "accordion-border-color" token */ --kite-accordion-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with "accordion-border-style" token */ --kite-accordion-alert-label-text-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "accordion-negative-label-text-color" token */ --kite-accordion-disabled-icon-fill: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "accordion-disabled-icon-color" token */ --kite-accordion-icon-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'accordion-icon-transition-timing-function' token */ --kite-accordion-expanded-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'accordion-expanded-transition-timing-function' token */ --kite-alert-border-style: var(--kite-border-style, solid); --kite-alert-padding-top: var(--kite-spacing-md, 1rem); --kite-alert-padding-right: var(--kite-spacing-md, 1rem); --kite-alert-padding-bottom: var(--kite-spacing-md, 1rem); --kite-alert-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-alert-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-alert-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-alert-text-color: var(--kite-color-text, #000000); --kite-alert-text-size: var(--kite-typography-body-size, 1rem); --kite-alert-dismiss-icon-margin-left: var(--kite-spacing-md, 1rem); --kite-alert-status-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-alert-link-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-alert-link-text-color: var(--kite-color-primary, #0073d1); --kite-alert-link-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-alert-link-icon-color: var(--kite-color-primary, #0073d1); --kite-alert-caution-border-left-color: var(--kite-color-caution, #faa41a); --kite-alert-caution-status-icon-color: var(--kite-color-caution, #faa41a); --kite-alert-negative-border-left-color: var(--kite-color-negative, #d6312b); --kite-alert-negative-status-icon-color: var(--kite-color-negative, #d6312b); --kite-alert-neutral-border-left-color: var(--kite-color-neutral, #5db8fc); --kite-alert-neutral-status-icon-color: var(--kite-color-neutral, #5db8fc); --kite-alert-positive-border-left-color: var(--kite-color-positive, #008516); --kite-alert-positive-status-icon-color: var(--kite-color-positive, #008516); --kite-alert-global-status-icon-margin-right: var(--kite-spacing-sm, 0.75rem); --kite-alert-global-padding-top: var(--kite-spacing-md, 1rem); --kite-alert-global-padding-right: var(--kite-spacing-md, 1rem); --kite-alert-global-padding-bottom: var(--kite-spacing-md, 1rem); --kite-alert-global-padding-left: var(--kite-spacing-md, 1rem); --kite-alert-global-caution-background-color: var(--kite-color-caution, #faa41a); --kite-alert-global-caution-status-icon-color: var(--kite-color-on-caution, #000000); --kite-alert-global-caution-link-text-color: var(--kite-color-on-caution, #000000); --kite-alert-global-caution-link-icon-color: var(--kite-color-on-caution, #000000); --kite-alert-global-caution-text-color: var(--kite-color-on-caution, #000000); --kite-alert-global-negative-background-color: var(--kite-color-negative, #d6312b); --kite-alert-global-negative-dismiss-icon-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-status-icon-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-link-text-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-link-icon-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-text-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-neutral-text-color: var(--kite-color-on-neutral, #000000); --kite-alert-global-neutral-background-color: var(--kite-color-neutral, #5db8fc); --kite-alert-global-neutral-status-icon-color: var(--kite-color-on-neutral, #000000); --kite-alert-global-neutral-link-text-color: var(--kite-color-on-neutral, #000000); --kite-alert-global-neutral-link-icon-color: var(--kite-color-on-neutral, #000000); --kite-alert-passive-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-padding-top: var(--kite-spacing-md, 1rem); --kite-alert-passive-padding-right: var(--kite-spacing-md, 1rem); --kite-alert-passive-padding-bottom: var(--kite-spacing-md, 1rem); --kite-alert-passive-padding-left: var(--kite-spacing-md, 1rem); --kite-alert-passive-breakpoint-lg-margin-top: var(--kite-spacing-xl, 1.5rem); --kite-alert-passive-breakpoint-lg-margin-right: var(--kite-spacing-xl, 1.5rem); --kite-alert-passive-transition-duration: var(--kite-motion-fast, 750ms); --kite-alert-passive-entry-transition-timing-function: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); --kite-alert-passive-exit-transition-timing-function: var(--kite-motion-exit, cubic-bezier(0.42, 0, 1, 1)); --kite-alert-passive-title-text-size: var(--kite-typography-body-size, 1rem); --kite-alert-passive-title-line-height: var(--kite-typography-body-line-height, 1.5); --kite-alert-passive-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-alert-passive-status-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-negative-background-color: var(--kite-color-negative-muted, #ffefef); --kite-alert-passive-caution-background-color: var(--kite-color-caution-muted, #fff3e0); --kite-alert-passive-dismiss-icon-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-neutral-background-color: var(--kite-color-neutral-muted, #e8f8ff); --kite-alert-passive-positive-background-color: var(--kite-color-positive-muted, #e8ffe8); --kite-alert-stacked-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-alert-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-text-color" token */ --kite-alert-page-border-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "alert-border-color" token */ --kite-alert-page-border-color-dark: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "alert-border-color" token */ --kite-alert-page-border-width: var(--kite-border-width-thin, 0.0625rem); /** @deprecated: Replace with "alert-border-width" token */ --kite-alert-page-indicator-icon-margin-right: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with "alert-status-icon-margin-right" token */ --kite-alert-page-link-text-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "alert-link-text-color" token */ --kite-alert-page-link-text-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "alert-link-text-color" token */ --kite-alert-page-link-text-margin-top: var(--kite-spacing-element-xxs, 0.25rem); /** @deprecated: Replace with "alert-link-text-margin-top" token */ --kite-alert-page-link-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "alert-link-icon-color" token */ --kite-alert-page-link-icon-fill-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "alert-link-icon-color" token */ --kite-alert-page-margin-bottom: var(--kite-spacing-element-xxs, 0.25rem); /** Replace with "alert-link-margin-top" token */ --kite-alert-page-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "alert-padding-top" token */ --kite-alert-page-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "alert-padding-right" token */ --kite-alert-page-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "alert-padding-bottom" token */ --kite-alert-page-padding-left: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with "alert-padding-left" token */ --kite-alert-page-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-text-color" token */ --kite-alert-page-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-text-color" token */ --kite-alert-page-caution-border-left-color: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-border-left-color" token */ --kite-alert-page-caution-border-left-color-dark: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-border-left-color" token */ --kite-alert-page-caution-indicator-icon-fill: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-status-icon-color" token */ --kite-alert-page-caution-indicator-icon-fill-dark: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-status-icon-color" token */ --kite-alert-page-error-border-left-color: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-border-left-color" token */ --kite-alert-page-error-border-left-color-dark: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-border-left-color" token */ --kite-alert-page-error-indicator-icon-fill: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-status-icon-color" token */ --kite-alert-page-error-indicator-icon-fill-dark: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-status-icon-color" token */ --kite-alert-page-info-border-left-color: var(--kite-color-info, #5db8fc); /** @deprecated: Replace with "alert-neutral-border-left-color" token */ --kite-alert-page-info-border-left-color-dark: var(--kite-color-info, #5db8fc); /** @deprecated: Replace with "alert-neutral-border-left-color" token */ --kite-alert-page-info-indicator-icon-fill: var(--kite-color-info, #5db8fc); /** @deprecated: Replace with "alert-neutral-status-icon-color" token */ --kite-alert-page-info-indicator-icon-fill-dark: var(--kite-color-info, #5db8fc); /** @deprecated: Replace with "alert-neutral-status-icon-color" token */ --kite-alert-page-success-border-left-color: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-border-left-color" token */ --kite-alert-page-success-border-left-color-dark: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-border-left-color" token */ --kite-alert-page-success-indicator-icon-fill: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-status-icon-color" token */ --kite-alert-page-success-indicator-icon-fill-dark: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-status-icon-color" token */ --kite-alert-global-indicator-icon-margin-right: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "alert-global-status-icon-margin-right" token */ --kite-alert-global-caution-background-color-dark: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-global-caution-background-color" token */ --kite-alert-global-caution-link-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-caution-link-text-color" token */ --kite-alert-global-caution-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-caution-text-color" token */ --kite-alert-global-error-background-color: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-global-negative-background-color" token */ --kite-alert-global-error-background-color-dark: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-global-negative-background-color" token */ --kite-alert-global-info-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-text-color" token */ --kite-alert-global-info-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-text-color" token */ --kite-alert-global-info-background-color: var(--kite-color-info, #5db8fc); /** @deprecated: Replace with "alert-global-neutral-background-color" token */ --kite-alert-global-info-background-color-dark: var(--kite-color-info, #5db8fc); /** @deprecated: Replace with "alert-global-neutral-background-color" token */ --kite-alert-global-info-link-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-link-text-color" token */ --kite-alert-global-info-link-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-link-text-color" token */ --kite-alert-link-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "alert-link-icon-color" token */ --kite-alert-caution-status-icon-fill: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-status-icon-color" token */ --kite-alert-neutral-status-icon-fill: var(--kite-color-neutral, #5db8fc); /** @deprecated: Replace with "alert-neutral-status-icon-color" token */ --kite-alert-global-caution-status-icon-fill: var(--kite-color-on-caution, #000000); /** @deprecated: Replace with "alert-global-caution-status-icon-color" token */ --kite-alert-global-caution-link-icon-fill: var(--kite-color-on-caution, #000000); /** @deprecated: Replace with "alert-global-caution-link-icon-color" token */ --kite-alert-global-negative-dismiss-icon-fill: var(--kite-color-on-negative, #ffffff); /** @deprecated: Replace with "alert-global-negative-dismiss-icon-color" token */ --kite-alert-global-negative-status-icon-fill: var(--kite-color-on-negative, #ffffff); /** @deprecated: Replace with "alert-global-negative-status-icon-color" token */ --kite-alert-global-negative-link-icon-fill: var(--kite-color-on-negative, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-icon-color" token */ --kite-alert-global-neutral-status-icon-fill: var(--kite-color-on-neutral, #000000); /** @deprecated: Replace with "alert-global-neutral-status-icon-color" token */ --kite-alert-global-neutral-link-icon-fill: var(--kite-color-on-neutral, #000000); /** @deprecated: Replace with "alert-global-neutral-link-icon-color" token */ --kite-badge-border-radius: var(--kite-badge-min-width, 1.25rem); --kite-badge-border-style: var(--kite-border-style, solid); --kite-badge-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-badge-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-badge-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-badge-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-badge-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-badge-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-badge-min-height: var(--kite-badge-min-width, 1.25rem); --kite-badge-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-badge-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-badge-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-badge-tab-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "badge-margin-right" token */ --kite-badge-background-color-dark: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "badge-background-color" token */ --kite-blockquote-text-color: var(--kite-color-text, #000000); --kite-blockquote-border-left-color: var(--kite-color-primary, #0073d1); --kite-blockquote-border-left-style: var(--kite-border-style, solid); --kite-blockquote-margin-bottom: var(--kite-spacing-md, 1rem); --kite-blockquote-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-blockquote-padding-right: var(--kite-spacing-md, 1rem); --kite-blockquote-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-blockquote-padding-left: var(--kite-spacing-md, 1rem); --kite-blockquote-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-blockquote-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-button-group-margin-top: var(--kite-spacing-xl, 1.5rem); --kite-button-group-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-button-group-button-margin-right: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with 'button-group-item-margin-right' token */ --kite-button-group-button-margin-bottom: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'button-group-item-margin-bottom' token */ --kite-button-background-color: var(--kite-color-primary, #0073d1); --kite-button-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-text-size: var(--kite-typography-body-size, 1rem); --kite-button-border-style: var(--kite-border-style, solid); --kite-button-padding-right: var(--kite-spacing-md, 1rem); --kite-button-padding-left: var(--kite-spacing-md, 1rem); --kite-button-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-button-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-button-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-button-focus-background-color: var(--kite-color-primary-focus, #0062b2); --kite-button-focus-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-hover-background-color: var(--kite-color-primary-hover, #0062b2); --kite-button-hover-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-press-background-color: var(--kite-color-primary-press, #0062b2); --kite-button-press-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-button-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-button-destructive-background-color: var(--kite-color-negative, #d6312b); --kite-button-destructive-text-color: var(--kite-color-on-negative, #ffffff); --kite-button-destructive-disabled-background-color: var(--kite-button-disabled-background-color, #d8dde6); --kite-button-destructive-disabled-border-color: var(--kite-button-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-press-border-color: var(--kite-button-press-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-disabled-background-color: var(--kite-button-disabled-background-color, #d8dde6); --kite-button-primary-disabled-border-color: var(--kite-button-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-focus-border-color: var(--kite-button-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-hover-border-color: var(--kite-button-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-border-color: var(--kite-button-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-focus-background-color: var(--kite-button-destructive-focus-background-color, #b00300); --kite-button-primary-destructive-focus-border-color: var(--kite-button-destructive-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-hover-background-color: var(--kite-button-destructive-hover-background-color, #b00300); --kite-button-primary-destructive-hover-border-color: var(--kite-button-destructive-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-press-background-color: var(--kite-button-destructive-press-background-color, #b00300); --kite-button-primary-destructive-press-border-color: var(--kite-button-destructive-press-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-text-color: var(--kite-color-primary, #0073d1); --kite-button-secondary-border-color: var(--kite-color-primary, #0073d1); --kite-button-secondary-focus-background-color: var(--kite-color-focus, #0062b2); --kite-button-secondary-focus-border-color: var(--kite-button-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-hover-background-color: var(--kite-color-focus, #0062b2); --kite-button-secondary-hover-border-color: var(--kite-button-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-press-background-color: var(--kite-color-focus, #0062b2); --kite-button-secondary-press-border-color: var(--kite-button-press-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-button-secondary-destructive-border-color: var(--kite-color-negative, #d6312b); --kite-button-secondary-destructive-text-color: var(--kite-color-negative, #d6312b); --kite-button-secondary-destructive-focus-background-color: var(--kite-button-destructive-focus-background-color, #b00300); --kite-button-secondary-destructive-focus-border-color: var(--kite-button-destructive-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-hover-background-color: var(--kite-button-destructive-hover-background-color, #b00300); --kite-button-secondary-destructive-hover-border-color: var(--kite-button-destructive-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-press-background-color: var(--kite-button-destructive-press-background-color, #b00300); --kite-button-secondary-destructive-press-border-color: var(--kite-button-destructive-press-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-button-borderless-text-color: var(--kite-color-primary, #0073d1); --kite-button-borderless-focus-border-color: var(--kite-button-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-focus-text-color: var(--kite-color-primary-focus, #0062b2); --kite-button-borderless-hover-border-color: var(--kite-button-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-hover-text-color: var(--kite-color-primary-hover, #0062b2); --kite-button-borderless-press-border-color: var(--kite-button-press-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-press-text-color: var(--kite-color-primary-press, #0062b2); --kite-button-borderless-disabled-border-color: var(--kite-button-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-border-color: var(--kite-button-borderless-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-text-color: var(--kite-color-negative, #d6312b); --kite-button-borderless-destructive-focus-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-focus-icon-color: var(--kite-button-borderless-destructive-focus-text-color, #b00300); --kite-button-borderless-destructive-hover-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-hover-icon-color: var(--kite-button-borderless-destructive-hover-text-color, #b00300); --kite-button-borderless-destructive-press-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-press-icon-color: var(--kite-button-borderless-destructive-press-text-color, #b00300); --kite-button-borderless-destructive-disabled-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-icon-only-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-button-icon-only-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-button-icon-fill: var(--kite-color-on-primary, #ffffff); /** @deprecated: Replace with 'button-icon-color' token */ --kite-button-disabled-icon-fill: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'button-disabled-icon-color' token */ --kite-button-secondary-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'button-secondary-icon-color' token */ --kite-button-borderless-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'button-borderless-icon-color' token */ --kite-button-borderless-focus-icon-fill: var(--kite-color-focus, #0062b2); /** @deprecated: Replace with 'button-borderless-focus-icon-color' token */ --kite-calendar-background-color: var(--kite-container-background-color, #ffffff); --kite-calendar-text-color: var(--kite-color-text, #000000); --kite-calendar-border-color: var(--kite-border-color, #d8dde6); --kite-calendar-border-style: var(--kite-border-style, solid); --kite-calendar-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-calendar-padding-right: var(--kite-spacing-md, 1rem); --kite-calendar-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-calendar-padding-left: var(--kite-spacing-md, 1rem); --kite-calendar-controls-focus-text-color: var(--kite-color-primary, #0073d1); --kite-calendar-controls-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-calendar-controls-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-calendar-controls-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-calendar-controls-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-calendar-day-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-calendar-day-focus-color: var(--kite-color-primary, #0073d1); --kite-calendar-day-invalid-focus-ring-color: var(--kite-color-negative, #d6312b); --kite-calendar-day-invalid-hover-background-color: var(--kite-color-negative-muted, #ffefef); --kite-calendar-day-invalid-selected-background-color: var(--kite-color-negative, #d6312b); --kite-calendar-day-invalid-selected-text-color: var(--kite-color-on-negative, #ffffff); --kite-calendar-day-invalid-text-decoration-line: var(--kite-calendar-day-unavailable-text-decoration-line, line-through); --kite-calendar-day-selected-background-color: var(--kite-color-primary, #0073d1); --kite-calendar-day-selected-text-color: var(--kite-color-on-primary, #ffffff); --kite-calendar-day-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-calendar-day-today-text-color: var(--kite-color-primary, #0073d1); --kite-calendar-day-today-indicator-background-color: var(--kite-color-primary, #0073d1); --kite-calendar-day-today-indicator-offset: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-day-due-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-day-due-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-day-out-range-text-decoration-thickness: var(--kite-calendar-day-disabled-text-decoration-thickness, 0.125rem); --kite-calendar-day-unavailable-text-decoration-thickness: var(--kite-calendar-day-disabled-text-decoration-thickness, 0.125rem); --kite-calendar-error-feedback-icon-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-feedback-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-calendar-feedback-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-calendar-feedback-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-calendar-feedback-gap: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-month-year-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-calendar-month-year-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-calendar-standalone-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-card-background-color: var(--kite-container-background-color, #ffffff); --kite-card-text-color: var(--kite-color-text, #000000); --kite-card-padding-top-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-right-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-bottom-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-left-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-top-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-right-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-bottom-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-left-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-top-lg: var(--kite-spacing-2xl, 2rem); --kite-card-padding-right-lg: var(--kite-spacing-2xl, 2rem); --kite-card-padding-bottom-lg: var(--kite-spacing-2xl, 2rem); --kite-card-padding-left-lg: var(--kite-spacing-2xl, 2rem); --kite-card-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-card-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-card-sm-min-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-top-sm" token */ --kite-card-sm-min-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-right-sm" token */ --kite-card-sm-min-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-bottom-sm" token */ --kite-card-sm-min-padding-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-left-sm" token */ --kite-card-sm-margin-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated */ --kite-card-md-min-padding-top: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-top-md" token */ --kite-card-md-min-padding-right: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-right-md" token */ --kite-card-md-min-padding-bottom: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-bottom-md" token */ --kite-card-md-min-padding-left: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-left-md" token */ --kite-card-md-margin-bottom: var(--kite-spacing-md, 1rem); /** @deprecated */ --kite-card-lg-min-padding-top: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-top-lg" token */ --kite-card-lg-min-padding-right: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-right-lg" token */ --kite-card-lg-min-padding-bottom: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-bottom-lg" token */ --kite-card-lg-min-padding-left: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-left-lg" token */ --kite-card-lg-margin-bottom: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated */ --kite-checkbox-text-color: var(--kite-color-text, #000000); --kite-checkbox-border-color: var(--kite-form-control-border-color, #63738a); --kite-checkbox-border-width: var(--kite-border-width-thick, 0.125rem); --kite-checkbox-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-checkbox-padding-right: var(--kite-spacing-md, 1rem); --kite-checkbox-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-checkbox-padding-left: var(--kite-spacing-md, 1rem); --kite-checkbox-height: var(--kite-checkbox-width, 1.25rem); --kite-checkbox-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-checkbox-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-checkbox-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-checkbox-selected-background-color: var(--kite-color-primary, #0073d1); --kite-checkbox-selected-icon-color: var(--kite-color-on-primary, #ffffff); --kite-checkbox-selected-disabled-background-color: var(--kite-color-disabled, #9ba9bd); --kite-checkbox-disabled-icon-color: var(--kite-color-on-disabled, #d8dde6); --kite-checkbox-cursor: var(--kite-form-control-cursor, pointer); --kite-checkbox-input-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-checkbox-error-feedback-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-checkbox-error-selected-icon-color: var(--kite-color-on-negative, #ffffff); --kite-checkbox-group-list-padding-left: var(--kite-spacing-2xl, 2rem); --kite-checkbox-indeterminate-icon-height: var(--kite-checkbox-selected-icon-height, 1rem); --kite-checkbox-indeterminate-icon-width: var(--kite-checkbox-selected-icon-width, 1rem); --kite-checkbox-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "checkbox-disabled-icon-color" token */ --kite-checkbox-selected-background-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "checkbox-selected-background-color" token */ --kite-checkbox-selected-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "checkbox-selected-disabled-icon-color" token */ --kite-checkbox-indeterminate-background-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "checkbox-indeterminate-background-color" token */ --kite-checkbox-indeterminate-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "checkbox-indeterminate-disabled-icon-color" token */ --kite-checkbox-group-margin-top: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-checkbox-group-margin-bottom: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-chip-background-color: var(--kite-container-background-color, #ffffff); --kite-chip-text-size: var(--kite-typography-body-size, 1rem); --kite-chip-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-chip-border-radius: var(--kite-border-radius-pill, 624.9375rem); --kite-chip-border-style: var(--kite-border-style, solid); --kite-chip-margin-right: var(--kite-spacing-md, 1rem); --kite-chip-margin-bottom: var(--kite-spacing-md, 1rem); --kite-chip-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-chip-padding-right: var(--kite-spacing-2xl, 2rem); --kite-chip-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-chip-padding-left: var(--kite-spacing-2xl, 2rem); --kite-chip-min-height: var(--kite-chip-height, 2rem); --kite-chip-focus-ring-color: var(--kite-chip-border-color, #63738a); --kite-chip-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-chip-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-chip-hover-background-color: var(--kite-chip-focus-background-color, #d8dde6); --kite-chip-selected-disabled-background-color: var(--kite-color-disabled, #9ba9bd); --kite-chip-selected-disabled-text-color: var(--kite-color-on-disabled, #d8dde6); --kite-chip-disabled-background-color: var(--kite-container-background-color, #ffffff); --kite-chip-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-chip-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-chip-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-chip-legend-margin-bottom: var(--kite-spacing-md, 1rem); --kite-chip-border-color-dark: var(--kite-chip-text-color-dark, #b7cee5); /** @deprecated: Replace with "chip-border-color" token */ --kite-chip-focus-ring-color-dark: var(--kite-chip-text-color-dark, #b7cee5); /** @deprecated: Replace with "chip-focus-ring-color" token */ --kite-chip-selected-background-color-dark: var(--kite-chip-text-color-dark, #b7cee5); /** @deprecated: Replace with "chip-selected-background-color" token */ --kite-chip-selected-text-color-dark: var(--kite-chip-text-color, #001221); /** @deprecated: Replace with "chip-selected-text-color" token */ --kite-chip-selected-disabled-text-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "chip-selected-disabled-text-color" token */ --kite-combobox-background-color: var(--kite-form-control-background-color, #ffffff); --kite-combobox-border-color: var(--kite-form-control-border-color, #63738a); --kite-combobox-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-combobox-cursor: var(--kite-form-control-cursor, pointer); --kite-combobox-icon-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-combobox-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-combobox-picker-list-item-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-combobox-picker-results-padding-top: var(--kite-spacing-xl, 1.5rem); --kite-combobox-picker-results-padding-bottom: var(--kite-spacing-xl, 1.5rem); --kite-combobox-placeholder-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-combobox-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-combobox-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-data-table-background-color: var(--kite-color-background, #ffffff); --kite-data-table-text-color: var(--kite-color-text, #000000); --kite-data-table-border-color: var(--kite-border-color, #d8dde6); --kite-data-table-border-style: var(--kite-border-style, solid); --kite-data-table-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-data-table-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-data-table-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-data-table-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-data-table-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-data-table-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-data-table-breakpoint-md-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-data-table-breakpoint-md-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-data-table-icon-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-data-table-compact-cell-padding-top: var(--kite-spacing-xs, 0.5rem); --kite-data-table-compact-cell-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-data-table-compact-cell-padding-bottom: var(--kite-spacing-xs, 0.5rem); --kite-data-table-compact-cell-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-data-table-comfortable-cell-padding-top: var(--kite-spacing-md, 1rem); --kite-data-table-comfortable-cell-padding-right: var(--kite-spacing-md, 1rem); --kite-data-table-comfortable-cell-padding-bottom: var(--kite-spacing-md, 1rem); --kite-data-table-comfortable-cell-padding-left: var(--kite-spacing-md, 1rem); --kite-data-table-menu-cell-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-data-table-menu-cell-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-data-table-title-row-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with "data-table-icon-padding-left" token */ --kite-data-table-title-row-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "data-table-header-border-bottom-color" token */ --kite-data-table-title-row-border-bottom-width: var(--kite-border-width-thin, 0.0625rem); /** @deprecated: Replace with "data-table-header-border-bottom-width" token */ --kite-data-table-title-row-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "data-table-header-text-color" token */ --kite-data-table-cell-compact-padding-top: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-top" token */ --kite-data-table-cell-compact-padding-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-right" token */ --kite-data-table-cell-compact-padding-bottom: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-bottom" token */ --kite-data-table-cell-compact-padding-left: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-left" token */ --kite-data-table-cell-default-padding-top: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-top" token */ --kite-data-table-cell-default-padding-right: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-right" token */ --kite-data-table-cell-default-padding-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-bottom" token */ --kite-data-table-cell-default-padding-left: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-left" token */ --kite-data-table-cell-comfortable-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-top" token */ --kite-data-table-cell-comfortable-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-right" token */ --kite-data-table-cell-comfortable-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-bottom" token */ --kite-data-table-cell-comfortable-padding-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-left" token */ --kite-date-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-date-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-date-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-date-input-addon-focus-ring-offset: var(--kite-form-control-addon-focus-ring-offset, -0.125rem); --kite-date-input-addon-icon-width: var(--kite-form-control-addon-icon-width, 1.5rem); --kite-date-input-picker-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-date-input-picker-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-date-input-picker-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-date-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-date-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-dialog-background-color: var(--kite-container-background-color, #ffffff); --kite-dialog-text-color: var(--kite-color-text, #000000); --kite-dialog-text-size: var(--kite-typography-body-size, 1rem); --kite-dialog-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dialog-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dialog-icon-color: var(--kite-color-text, #000000); --kite-dialog-breakpoint-md-title-text-weight: var(--kite-typography-lg-title-5-weight, 500); --kite-dialog-breakpoint-md-padding-top: var(--kite-layout-xs, 3rem); --kite-dialog-breakpoint-md-padding-right: var(--kite-layout-xs, 3rem); --kite-dialog-breakpoint-md-padding-bottom: var(--kite-layout-xs, 3rem); --kite-dialog-breakpoint-md-padding-left: var(--kite-layout-xs, 3rem); --kite-dialog-transition-timing-function: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-dialog-title-text-size: var(--kite-typography-title-5-size, 1.25rem); --kite-dialog-title-text-line-height: var(--kite-typography-title-5-line-height, 1.4); --kite-dialog-title-icon-height: var(--kite-dialog-icon-height, 1.5rem); --kite-dialog-title-icon-width: var(--kite-dialog-icon-width, 1.5rem); --kite-dialog-title-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-dialog-title-margin-bottom: var(--kite-spacing-md, 1rem); --kite-dialog-content-padding-right: var(--kite-layout-xs, 3rem); --kite-dialog-content-padding-bottom: var(--kite-layout-xs, 3rem); --kite-dialog-content-padding-left: var(--kite-layout-xs, 3rem); --kite-dialog-content-group-margin-top: var(--kite-spacing-lg, 1.25rem); --kite-dialog-alert-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-dialog-alert-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-dialog-scrolled-border-top-color: var(--kite-border-color, #d8dde6); --kite-dialog-scrolled-border-top-style: var(--kite-border-style, solid); --kite-dialog-title-text-margin-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "dialog-title-margin-bottom" token */ --kite-dialog-full-size-padding-top: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-padding-top" token */ --kite-dialog-full-size-padding-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "dialog-padding-right" token */ --kite-dialog-full-size-padding-bottom: var(--kite-spacing-lg, 1.25rem); /** @deprecated: Replace with "dialog-padding-bottom" token */ --kite-dialog-full-size-padding-left: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "dialog-padding-left" token */ --kite-dialog-default-size-padding-top: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-top" token */ --kite-dialog-default-size-padding-right: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-right" token */ --kite-dialog-default-size-padding-bottom: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-bottom" token */ --kite-dialog-default-size-padding-left: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-left" token */ --kite-dropdown-background-color: var(--kite-form-control-background-color, #ffffff); --kite-dropdown-border-color: var(--kite-form-control-border-color, #63738a); --kite-dropdown-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-dropdown-cursor: var(--kite-form-control-cursor, pointer); --kite-dropdown-placeholder-margin-right: var(--kite-spacing-md, 1rem); --kite-dropdown-error-text-margin-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'dropdown-feedback-margin-top' token */ --kite-dropdown-list-background-color: var(--kite-container-background-color, #ffffff); --kite-dropdown-list-border-color: var(--kite-border-color, #d8dde6); --kite-dropdown-list-border-style: var(--kite-border-style, solid); --kite-dropdown-list-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-list-max-width: var(--kite-dropdown-max-width, 18rem); --kite-dropdown-list-transition-duration: var(--kite-motion-fast, 750ms); --kite-dropdown-list-item-text-color: var(--kite-color-text, #000000); --kite-dropdown-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-dropdown-list-item-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-dropdown-list-item-border-style: var(--kite-border-style, solid); --kite-dropdown-list-item-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-dropdown-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dropdown-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dropdown-list-item-icon-color: var(--kite-color-primary, #0073d1); --kite-dropdown-list-item-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-list-item-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-dropdown-list-item-negative-text-color: var(--kite-color-negative, #d6312b); --kite-dropdown-inline-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-dropdown-inline-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dropdown-inline-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dropdown-inline-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-dropdown-inline-placeholder-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-inline-placeholder-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-inline-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-dropdown-list-item-border-bottom-color-dark: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "dropdown-list-item-border-color" token */ --kite-dropdown-list-offset-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "dropdown-placeholder-margin-right" token */ --kite-dropdown-list-item-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "dropdown-list-item-border-color" token */ --kite-dropdown-list-item-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with "dropdown-list-item-border-style" token */ --kite-dropdown-inline-disabled-text-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "dropdown-disabled-inline-text-color" token */ --kite-dropdown-inline-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "dropdown-disabled-inline-icon-color" token */ --kite-dynamic-hint-text-color: var(--kite-color-text, #000000); --kite-dynamic-hint-text-size: var(--kite-typography-body-size, 1rem); --kite-dynamic-hint-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dynamic-hint-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dynamic-hint-arrow-offset: var(--kite-spacing-2xl, 2rem); /** distance to closest corner */ --kite-dynamic-hint-title-margin-bottom: var(--kite-spacing-md, 1rem); --kite-dynamic-hint-criteria-margin-bottom: var(--kite-spacing-md, 1rem); --kite-dynamic-hint-criteria-icon-margin-right: var(--kite-spacing-sm, 0.75rem); --kite-dynamic-hint-criteria-positive-icon-color: var(--kite-color-positive, #008516); --kite-dynamic-hint-criteria-negative-icon-color: var(--kite-color-negative, #d6312b); --kite-dynamic-hint-entry-transition-duration: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); /** @deprecated */ --kite-dynamic-hint-exit-transition-duration: var(--kite-motion-exit, cubic-bezier(0.42, 0, 1, 1)); /** @deprecated */ --kite-dynamic-hint-criteria-success-icon-fill: var(--kite-color-success, #008516); /** @deprecated: Replace with "dynamic-hint-criteria-positive-icon-color" token */ --kite-dynamic-hint-criteria-error-icon-fill: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "dynamic-hint-criteria-negative-icon-color" token */ --kite-interactive-list-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "list-text-color" token */ --kite-interactive-list-border-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "list-border-color" token */ --kite-interactive-list-border-style: var(--kite-border-style, solid); /** @deprecated: Replace with "list-border-style" token */ --kite-interactive-list-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with "list-focus-ring-style" token */ --kite-interactive-list-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with "list-focus-ring-width" token */ --kite-interactive-list-item-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "list-item-text-color" token */ --kite-interactive-list-item-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with "list-item-text-size" token */ --kite-interactive-list-item-padding-top: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-top" token */ --kite-interactive-list-item-padding-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "list-item-padding-right" token */ --kite-interactive-list-item-padding-bottom: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-bottom" token */ --kite-interactive-list-item-padding-left: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "list-item-padding-left" token */ --kite-interactive-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with "list-item-focus-ring-style" token */ --kite-interactive-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with "list-item-focus-ring-width" token */ --kite-interactive-list-item-padding-right-sm: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-right-sm" token */ --kite-interactive-list-item-padding-left-sm: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-left-sm" token */ --kite-interactive-list-item-padding-right-md: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-right-md" token */ --kite-interactive-list-item-padding-left-md: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-left-md" token */ --kite-interactive-list-item-padding-right-lg: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-right-lg" token */ --kite-interactive-list-item-padding-left-lg: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-left-lg" token */ --kite-interactive-list-item-action-icon-height: var(--kite-interactive-list-item-icon-height, 1.5rem); /** @deprecated: Replace with "list-item-action-icon-height" token */ --kite-interactive-list-item-action-icon-width: var(--kite-interactive-list-item-icon-width, 1.5rem); /** @deprecated: Replace with "list-item-action-icon-width" token */ --kite-interactive-list-item-label-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with "list-item-label-text-size" token */ --kite-interactive-list-item-label-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "list-item-label-margin-right" token */ --kite-interactive-list-item-title-text-size: var(--kite-typography-title-6-size, 1.125rem); /** @deprecated: Replace with "list-item-title-text-size" token */ --kite-interactive-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "list-item-disabled-text-color" token */ --kite-interactive-list-item-negative-label-text-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "list-item-negative-label-text-color" token */ --kite-interactive-list-item-positive-label-text-color: var(--kite-color-positive, #008516); /** @deprecated: Replace with "list-item-positive-label-text-color" token */ --kite-interactive-list-item-neutral-label-text-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "list-item-neutral-label-text-color" token */ --kite-interactive-list-item-multiline-title-text-size: var(--kite-typography-body-display-size, 1.25rem); /** @deprecated: Replace with "list-item-multiline-title-text-size" token */ --kite-interactive-list-item-multiline-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with "list-item-multiline-title-margin-bottom" token */ --kite-interactive-list-item-multiline-subtitle-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with "list-item-multiline-subtitle-text-size" token */ --kite-interactive-list-start-margin-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "list-start-margin-right" token */ --kite-interactive-list-end-margin-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "list-end-margin-left" token */ --kite-interactive-list-item-danger-label-text-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "list-item-negative-label-text-color" token */ --kite-interactive-list-item-info-label-text-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "list-item-neutral-label-text-color" token */ --kite-interactive-list-item-success-label-text-color: var(--kite-color-success, #008516); /** @deprecated: Replace with "list-item-positive-label-text-color" token */ --kite-interactive-list-md-padding-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-right-sm" token */ --kite-interactive-list-md-padding-left: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-left-sm" token */ --kite-interactive-list-xl-padding-right: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-right-md" token */ --kite-interactive-list-xl-padding-left: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-left-md" token */ --kite-interactive-list-xxl-padding-right: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-right-lg" token */ --kite-interactive-list-xxl-padding-left: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-left-lg" token */ --kite-interactive-list-item-icon-margin: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-icon-margin-right" token */ --kite-link-text-color: var(--kite-color-primary, #0073d1); --kite-link-text-size: var(--kite-typography-body-size, 1rem); --kite-link-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-link-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-link-hover-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-focus-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-press-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-icon-margin: var(--kite-spacing-2xs, 0.25rem); --kite-link-visited-text-color: var(--kite-link-hover-text-color, #003561); --kite-link-visited-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-standalone-text-decoration-offset: var(--kite-link-text-decoration-offset, 0.125rem); --kite-link-standalone-text-decoration-thickness: var(--kite-link-text-decoration-thickness, 0.125rem); --kite-link-standalone-hover-icon-color: var(--kite-link-hover-text-color, #003561); --kite-link-standalone-focus-text-decoration: var(--kite-link-standalone-text-decoration, none); --kite-link-standalone-press-icon-color: var(--kite-link-press-text-color, #002747); --kite-link-standalone-visited-text-decoration: var(--kite-link-standalone-text-decoration, none); --kite-link-standalone-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "link-standalone-icon-color" token */ --kite-link-standalone-focus-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with "link-standalone-focus-icon-color" token */ --kite-link-standalone-icon-height: var(--kite-link-icon-height, 0.875rem); /** @deprecated: Replace with 'link-icon-height' token */ --kite-link-standalone-icon-width: var(--kite-link-icon-width, 0.875rem); /** @deprecated: Replace with 'link-icon-width' token */ --kite-list-text-color: var(--kite-color-text, #000000); --kite-list-border-color: var(--kite-border-color, #d8dde6); --kite-list-border-style: var(--kite-border-style, solid); --kite-list-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-list-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-list-item-caution-label-icon-color: var(--kite-color-caution, #faa41a); --kite-list-item-padding-top: var(--kite-spacing-md, 1rem); --kite-list-item-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-list-item-padding-bottom: var(--kite-spacing-md, 1rem); --kite-list-item-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-list-item-text-color: var(--kite-color-text, #000000); --kite-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-list-item-padding-right-sm: var(--kite-spacing-md, 1rem); --kite-list-item-padding-left-sm: var(--kite-spacing-md, 1rem); --kite-list-item-padding-right-md: var(--kite-spacing-xl, 1.5rem); --kite-list-item-padding-left-md: var(--kite-spacing-xl, 1.5rem); --kite-list-item-padding-right-lg: var(--kite-spacing-2xl, 2rem); --kite-list-item-padding-left-lg: var(--kite-spacing-2xl, 2rem); --kite-list-item-image-border-radius: var(--kite-list-image-border-radius, 0.25rem); --kite-list-item-image-max-width: var(--kite-list-image-max-width, 5rem); --kite-list-item-image-max-height: var(--kite-list-image-max-height, 5rem); --kite-list-item-label-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-label-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-list-item-title-text-size: var(--kite-typography-title-6-size, 1.125rem); --kite-list-item-title-text-line-height: var(--kite-typography-title-6-line-height, 1.333); --kite-list-item-title-body-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-title-body-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-list-item-payment-logo-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-payment-logo-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-list-item-payment-logo-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-payment-logo-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-list-item-payment-logo-width: var(--kite-payment-logo-width, 1.5rem); --kite-list-item-payment-logo-height: var(--kite-payment-logo-height, 1.5rem); --kite-list-item-payment-logo-shadow: var(--kite-payment-logo-elevation, none); --kite-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-list-item-expanded-transition-timing-function: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-list-item-expanded-transition-duration: var(--kite-motion-faster, 400ms); --kite-list-item-negative-label-text-color: var(--kite-color-negative, #d6312b); --kite-list-item-neutral-label-text-color: var(--kite-color-primary, #0073d1); --kite-list-item-positive-label-text-color: var(--kite-color-positive, #008516); --kite-list-item-multiline-title-text-size: var(--kite-typography-body-display-size, 1.25rem); --kite-list-item-multiline-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-multiline-subtitle-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-multiline-subtitle-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-list-item-muted-label-icon-color: var(--kite-list-item-muted-label-text-color, #63738a); --kite-list-start-margin-right: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with 'list-item-slot-start-margin-right' token */ --kite-list-end-margin-left: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with 'list-item-slot-end-margin-left' token */ --kite-menu-list-background-color: var(--kite-container-background-color, #ffffff); --kite-menu-list-border-color: var(--kite-border-color, #d8dde6); --kite-menu-list-border-style: var(--kite-border-style, solid); --kite-menu-list-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-menu-list-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-menu-list-transition-duration: var(--kite-motion-fast, 750ms); --kite-menu-list-item-text-color: var(--kite-color-text, #000000); --kite-menu-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-menu-list-item-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-menu-list-item-border-style: var(--kite-border-style, solid); --kite-menu-list-item-padding-right: var(--kite-spacing-md, 1rem); --kite-menu-list-item-padding-left: var(--kite-spacing-md, 1rem); --kite-menu-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-menu-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-menu-list-item-icon-margin-right: var(--kite-spacing-md, 1rem); --kite-menu-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-menu-list-item-negative-text-color: var(--kite-color-negative, #d6312b); --kite-menu-trigger-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-menu-trigger-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-menu-trigger-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-menu-trigger-activated-background-color: var(--kite-color-primary, #0073d1); --kite-menu-trigger-activated-icon-color: var(--kite-color-on-primary, #ffffff); --kite-menu-trigger-icon-color: var(--kite-color-text, #000000); --kite-menu-contextual-label-trigger-label-text-size: var(--kite-typography-body-size, 1rem); --kite-menu-contextual-label-trigger-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-menu-contextual-label-trigger-label-text-color: var(--kite-color-text, #000000); --kite-menu-contextual-label-trigger-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-menu-contextual-label-trigger-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-menu-list-item-border-bottom-color-dark: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "menu-list-item-border-color" token */ --kite-menu-list-offset-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "menu-list-margin-right" token */ --kite-menu-list-item-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "menu-list-item-border-color" token */ --kite-menu-list-item-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with "menu-list-item-border-style" token */ --kite-meter-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-meter-label-text-color: var(--kite-color-text, #000000); --kite-meter-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-label-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-meter-status-label-text-color: var(--kite-color-text, #000000); --kite-meter-status-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-status-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-track-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-meter-fill-color: var(--kite-color-neutral, #5db8fc); --kite-meter-tick-height: var(--kite-meter-track-height, 0.5rem); --kite-meter-value-label-text-color: var(--kite-color-text, #000000); --kite-meter-value-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-value-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-positive-fill-color: var(--kite-color-positive, #008516); --kite-meter-negative-fill-color: var(--kite-color-negative, #d6312b); --kite-meter-caution-fill-color: var(--kite-color-caution, #faa41a); --kite-meter-sm-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-sm-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-sm-status-label-text-color: var(--kite-color-text, #000000); --kite-meter-sm-status-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-sm-status-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-sm-value-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-sm-value-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-lg-status-label-text-color: var(--kite-color-text, #000000); --kite-meter-lg-status-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-lg-status-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-lg-value-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-lg-value-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-circular-label-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-meter-circular-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-circular-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-circular-track-color: var(--kite-meter-track-color, #d8dde6); --kite-meter-circular-track-height: var(--kite-meter-track-height, 0.5rem); --kite-meter-circular-tick-color: var(--kite-meter-tick-color, #000000); --kite-meter-circular-tick-width: var(--kite-meter-tick-width, 0.25rem); --kite-meter-circular-value-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-circular-value-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-circular-sm-height: var(--kite-meter-circular-sm-width, 1.5rem); --kite-meter-circular-sm-track-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-meter-circular-sm-icon-width: var(--kite-meter-sm-icon-width, 0.75rem); --kite-meter-circular-sm-icon-height: var(--kite-meter-sm-icon-height, 0.75rem); --kite-meter-circular-lg-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-circular-lg-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-circular-lg-value-label-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-meter-circular-lg-icon-width: var(--kite-meter-lg-icon-width, 1rem); --kite-meter-circular-lg-icon-height: var(--kite-meter-lg-icon-height, 1rem); --kite-meter-circular-lg-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-meter-positive-progress-fill-background-color: var(--kite-color-positive, #008516); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-caution-progress-fill-background-color: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with 'meter-caution-fill-color' token */ --kite-meter-alert-progress-fill-background-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with 'meter-negative-fill-color' token */ --kite-meter-success-progress-fill-background-color: var(--kite-color-positive, #008516); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-positive-status-icon-fill: var(--kite-color-positive, #008516); /** @deprecated: Replace with 'meter-positive-icon-color' token */ --kite-meter-caution-status-icon-fill: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with 'meter-caution-icon-color' token */ --kite-meter-alert-status-icon-fill: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with 'meter-negative-icon-color' token */ --kite-meter-linear-track-margin-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'meter-track-margin-bottom' token */ --kite-meter-linear-label-text-margin-bottom: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'meter-label-text-margin-bottom' token */ --kite-meter-circular-small-track-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'meter-circular-sm-track-margin-right' token */ --kite-meter-circular-large-status-icon-margin: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'meter-circular-lg-icon-margin' token */ --kite-meter-circular-large-value-label-text-margin-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'meter-circular-lg-value-label-margin-bottom' token */ --kite-pagination-controls-background-color: var(--kite-container-background-color, #ffffff); --kite-pagination-controls-border-color: var(--kite-border-color, #d8dde6); --kite-pagination-controls-border-style: var(--kite-border-style, solid); --kite-pagination-controls-margin-right: var(--kite-spacing-md, 1rem); --kite-pagination-controls-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-pagination-controls-margin-left: var(--kite-spacing-md, 1rem); --kite-pagination-controls-text-size: var(--kite-typography-body-size, 1rem); --kite-pagination-controls-button-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-pagination-controls-button-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-pagination-controls-button-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-pagination-controls-button-icon-color: var(--kite-color-primary, #0073d1); --kite-pagination-page-select-text-color: var(--kite-color-text, #000000); --kite-pagination-page-select-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-page-select-padding-right: var(--kite-spacing-md, 1rem); --kite-pagination-page-select-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-page-select-padding-left: var(--kite-spacing-md, 1rem); --kite-pagination-page-select-current-label-text-weight: var(--kite-pagination-dropdown-placeholder-text-weight, 700); --kite-pagination-dropdown-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-pagination-dropdown-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-pagination-dropdown-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-pagination-count-margin-right: var(--kite-spacing-md, 1rem); --kite-pagination-page-size-label-text-color: var(--kite-color-text, #000000); --kite-pagination-page-size-label-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-controls-padding-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'pagination-page-select-padding-top' token */ --kite-pagination-controls-padding-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'pagination-page-select-padding-right' token */ --kite-pagination-controls-padding-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'pagination-page-select-padding-bottom' token */ --kite-pagination-controls-padding-left: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'pagination-page-select-padding-left' token */ --kite-pagination-controls-button-disabled-icon-fill: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'pagination-controls-button-disabled-icon-color' token */ --kite-pagination-per-page-label-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with 'pagination-page-size-label-text-color' token */ --kite-pagination-per-page-label-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'pagination-page-size-label-margin-right' token */ --kite-pagination-item-count-label-margin-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'pagination-count-margin-right' token */ --kite-payment-logo-background-color: var(--kite-container-background-color, #ffffff); --kite-payment-logo-text-color: var(--kite-color-text, #000000); --kite-payment-logo-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-payment-logo-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-popover-text-color: var(--kite-color-text, #000000); --kite-popover-text-size: var(--kite-typography-body-size, 1rem); --kite-popover-margin: var(--kite-spacing-xs, 0.5rem); --kite-popover-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-popover-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-popover-offset: var(--kite-spacing-2xs, 0.25rem); --kite-popover-arrow-border-width: var(--kite-border-width-thick, 0.125rem); --kite-popover-arrow-offset: var(--kite-spacing-md, 1rem); --kite-popover-trigger-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-popover-trigger-icon-color: var(--kite-color-primary, #0073d1); --kite-popover-trigger-label-text-color: var(--kite-color-text, #000000); --kite-popover-trigger-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-popover-trigger-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-popover-trigger-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-popover-trigger-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-popover-title-text-size: var(--kite-typography-title-6-size, 1.125rem); --kite-popover-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-popover-link-margin-top: var(--kite-spacing-sm, 0.75rem); --kite-popover-dismiss-icon-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-popover-trigger-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'popover-trigger-icon-color' token */ --kite-popover-trigger-active-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'popover-trigger-expanded-icon-color' token */ --kite-popover-trigger-focus-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'popover-trigger-focus-icon-color' token */ --kite-popover-trigger-hover-icon-fill: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'popover-trigger-hover-icon-color' token */ --kite-progress-indicator-text-color: var(--kite-color-text, #000000); --kite-progress-indicator-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-progress-indicator-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-progress-indicator-label-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-progress-indicator-label-text-color: var(--kite-color-text, #000000); --kite-progress-indicator-label-text-size: var(--kite-typography-body-size, 1rem); --kite-progress-indicator-label-text-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-progress-indicator-fill-color: var(--kite-color-primary, #0073d1); --kite-progress-indicator-backdrop-background-color: var(--kite-color-background, #ffffff); --kite-progress-indicator-value-label-size: var(--kite-typography-body-size, 1rem); --kite-progress-indicator-secondary-label-size: var(--kite-typography-body-size, 1rem); --kite-progress-indicator-secondary-label-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-progress-indicator-icon-height: var(--kite-progress-indicator-icon-width, 1.25rem); --kite-progress-indicator-positive-fill-color: var(--kite-color-positive, #008516); --kite-progress-indicator-negative-fill-color: var(--kite-color-negative, #d6312b); --kite-progress-indicator-button-margin-top: var(--kite-spacing-md, 1rem); --kite-progress-indicator-circular-label-text-size: var(--kite-typography-body-display-size, 1.25rem); --kite-progress-indicator-circular-label-text-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-progress-indicator-circular-label-text-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-progress-indicator-circular-sm-height: var(--kite-progress-indicator-circular-sm-width, 1.5rem); --kite-progress-indicator-lg-status-text-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'progress-indicator-value-label-color' token */ --kite-progress-indicator-lg-status-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with 'progress-indicator-value-label-size' token */ --kite-progress-indicator-lg-label-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with 'progress-indicator-label-text-color' token */ --kite-progress-indicator-lg-label-text-size: var(--kite-typography-body-display-size, 1.25rem); /** @deprecated: Replace with 'progress-indicator-circular-label-text-size' token */ --kite-progress-indicator-lg-sub-label-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with 'progress-indicator-secondary-label-size' token */ --kite-radio-text-color: var(--kite-color-text, #000000); --kite-radio-border-color: var(--kite-form-control-border-color, #63738a); --kite-radio-border-width: var(--kite-border-width-thick, 0.125rem); --kite-radio-width: var(--kite-radio-height, 1.25rem); --kite-radio-selected-border-color: var(--kite-color-primary, #0073d1); --kite-radio-selected-focus-ring-width: var(--kite-radio-focus-ring-width, 0.25rem); --kite-radio-selected-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-radio-selected-indicator-width: var(--kite-radio-selected-indicator-height, 0.75rem); --kite-radio-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-radio-cursor: var(--kite-form-control-cursor, pointer); --kite-radio-input-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-radio-group-legend-text-size: var(--kite-typography-body-size, 1rem); --kite-radio-group-legend-margin-bottom: var(--kite-spacing-md, 1rem); --kite-radio-selected-disabled-center-background-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'radio-selected-disabled-indicator-background-color' token */ --kite-search-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-search-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-search-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-search-input-addon-focus-ring-offset: var(--kite-form-control-addon-focus-ring-offset, -0.125rem); --kite-search-input-addon-icon-width: var(--kite-form-control-addon-icon-width, 1.5rem); --kite-search-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-search-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-select-background-color: var(--kite-form-control-background-color, #ffffff); --kite-select-border-color: var(--kite-form-control-border-color, #63738a); --kite-select-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-select-cursor: var(--kite-form-control-cursor, pointer); --kite-select-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-select-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-select-error-text-margin-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'select-feedback-margin-top' token */ --kite-skip-link-text-size: var(--kite-typography-body-size, 1rem); --kite-skip-link-border-style: var(--kite-border-style, solid); --kite-skip-link-border-width: var(--kite-border-width-thick, 0.125rem); --kite-skip-link-padding-top: var(--kite-spacing-md, 1rem); --kite-skip-link-padding-right: var(--kite-spacing-md, 1rem); --kite-skip-link-padding-bottom: var(--kite-spacing-md, 1rem); --kite-skip-link-padding-left: var(--kite-spacing-md, 1rem); --kite-skip-link-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-skip-link-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-skip-link-stacked-margin-top: var(--kite-spacing-md, 1rem); --kite-skip-link-spacing-stack: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'skip-link-stacked-margin-top' token */ --kite-switch-text-color: var(--kite-color-text, #000000); --kite-switch-focus-ring-color: var(--kite-switch-track-background-color, #63738a); --kite-switch-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-switch-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-switch-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-switch-disabled-thumb-background-color: var(--kite-color-on-disabled, #d8dde6); --kite-switch-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-switch-disabled-track-background-color: var(--kite-color-disabled, #9ba9bd); --kite-switch-transition-duration: var(--kite-motion-fast, 750ms); --kite-switch-thumb-width: var(--kite-switch-thumb-height, 1.25rem); --kite-switch-label-text-color: var(--kite-color-text, #000000); --kite-switch-label-text-size: var(--kite-typography-body-size, 1rem); --kite-switch-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-switch-label-margin-right: var(--kite-spacing-xl, 1.5rem); --kite-switch-on-track-background-color: var(--kite-color-primary, #0073d1); --kite-switch-on-thumb-background-color: var(--kite-color-on-primary, #ffffff); --kite-switch-on-track-background-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'switch-on-track-background-color' token */ --kite-switch-disabled-label-text-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'switch-disabled-label-text-color' token */ --kite-switch-disabled-track-background-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'switch-disabled-track-background-color' token */ --kite-switch-group-margin-top: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-switch-group-margin-bottom: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-switch-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'switch-transition-timing-function' token */ --kite-tabs-text-color: var(--kite-color-text, #000000); --kite-tabs-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tabs-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tabs-transition-duration: var(--kite-motion-fast, 750ms); --kite-tabs-tab-text-color: var(--kite-color-text, #000000); --kite-tabs-tab-text-size: var(--kite-typography-body-size, 1rem); --kite-tabs-tab-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-tabs-tab-border-bottom-style: var(--kite-border-style, solid); --kite-tabs-tab-border-bottom-width: var(--kite-border-width-thick, 0.125rem); --kite-tabs-tab-padding-top: var(--kite-spacing-md, 1rem); --kite-tabs-tab-padding-right: var(--kite-spacing-lg, 1.25rem); --kite-tabs-tab-padding-bottom: var(--kite-spacing-md, 1rem); --kite-tabs-tab-padding-left: var(--kite-spacing-lg, 1.25rem); --kite-tabs-tab-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tabs-tab-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tabs-tab-selected-text-color: var(--kite-color-primary, #0073d1); --kite-tabs-tab-selected-border-bottom-color: var(--kite-color-primary, #0073d1); --kite-tabs-tab-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-tabs-panel-padding-top: var(--kite-spacing-md, 1rem); --kite-tabs-panel-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tabs-panel-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tabs-item-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with 'tabs-tab-border-bottom-style' token */ --kite-tabs-item-border-bottom-width: var(--kite-border-width-thick, 0.125rem); /** @deprecated: Replace with 'tabs-tab-border-bottom-width' token */ --kite-tabs-item-min-padding-top: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'tabs-tab-padding-top' token */ --kite-tabs-item-min-padding-right: var(--kite-spacing-lg, 1.25rem); /** @deprecated: Replace with 'tabs-tab-padding-right' token */ --kite-tabs-item-min-padding-bottom: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'tabs-tab-padding-bottom' token */ --kite-tabs-item-min-padding-left: var(--kite-spacing-lg, 1.25rem); /** @deprecated: Replace with 'tabs-tab-padding-left' token */ --kite-tabs-item-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with 'tabs-tab-text-color' token */ --kite-tabs-item-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with 'tabs-tab-text-size' token */ --kite-tabs-item-active-text-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'tabs-tab-selected-text-color' token */ --kite-tabs-item-active-border-bottom-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'tabs-tab-selected-border-bottom-color' token */ --kite-tabs-item-active-border-bottom-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'tabs-tab-selected-border-bottom-color' token */ --kite-tabs-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'tabs-tab-disabled-text-color' token */ --kite-tabs-item-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with 'tabs-tab-focus-ring-style' token */ --kite-tabs-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with 'tabs-tab-focus-ring-width' token */ --kite-tabs-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'tabs-transition-timing-function' token */ --kite-tag-group-margin: var(--kite-spacing-xs, 0.5rem); --kite-tag-text-color: var(--kite-color-text, #000000); --kite-tag-border-style: var(--kite-border-style, solid); --kite-tag-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-tag-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-tag-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tag-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tag-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-tag-caution-background-color: var(--kite-color-caution-muted, #fff3e0); --kite-tag-caution-border-color: var(--kite-color-caution, #faa41a); --kite-tag-caution-icon-color: var(--kite-tag-caution-text-color, #000000); --kite-tag-negative-background-color: var(--kite-color-negative-muted, #ffefef); --kite-tag-negative-border-color: var(--kite-color-negative, #d6312b); --kite-tag-neutral-background-color: var(--kite-color-neutral-muted, #e8f8ff); --kite-tag-neutral-border-color: var(--kite-color-neutral, #5db8fc); --kite-tag-neutral-icon-color: var(--kite-tag-neutral-text-color, #000000); --kite-tag-positive-background-color: var(--kite-color-positive-muted, #e8ffe8); --kite-tag-positive-border-color: var(--kite-color-positive, #008516); --kite-tag-positive-icon-color: var(--kite-tag-positive-text-color, #000000); --kite-tag-solid-icon-color: var(--kite-tag-solid-text-color, #000000); --kite-tag-solid-caution-background-color: var(--kite-color-caution, #faa41a); --kite-tag-solid-caution-text-color: var(--kite-color-on-caution, #000000); --kite-tag-solid-negative-background-color: var(--kite-color-negative, #d6312b); --kite-tag-solid-negative-text-color: var(--kite-color-on-negative, #ffffff); --kite-tag-solid-neutral-background-color: var(--kite-color-neutral, #5db8fc); --kite-tag-solid-neutral-text-color: var(--kite-color-on-neutral, #000000); --kite-tag-solid-positive-background-color: var(--kite-color-positive, #008516); --kite-tag-solid-positive-text-color: var(--kite-color-on-positive, #ffffff); --kite-text-area-background-color: var(--kite-form-control-background-color, #ffffff); --kite-text-area-border-color: var(--kite-form-control-border-color, #63738a); --kite-text-area-disabled-character-count-text-color: var(--kite-color-disabled, #9ba9bd); --kite-text-area-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-text-area-cursor: var(--kite-form-control-cursor, pointer); --kite-text-area-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-text-area-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-text-area-character-count-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-text-area-character-count-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-text-area-character-count-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-text-area-error-character-count-text-color: var(--kite-color-negative, #d6312b); --kite-text-area-border-color-dark: var(--kite-form-control-border-color, #63738a); /** @deprecated: Replace with 'text-area-border-color' token */ --kite-text-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-text-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-text-input-disabled-character-count-text-color: var(--kite-color-disabled, #9ba9bd); --kite-text-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-text-input-cursor: var(--kite-form-control-cursor, pointer); --kite-text-input-addon-focus-ring-offset: var(--kite-form-control-addon-focus-ring-offset, -0.125rem); --kite-text-input-addon-icon-width: var(--kite-form-control-addon-icon-width, 1.5rem); --kite-text-input-character-count-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-text-input-character-count-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-text-input-character-count-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-text-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-text-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-text-input-error-character-count-text-color: var(--kite-color-negative, #d6312b); --kite-text-input-secure-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-text-input-secure-confirm-icon-color: var(--kite-color-positive, #008516); --kite-text-input-border-color-dark: var(--kite-form-control-border-color, #63738a); /** @deprecated: Replace with 'text-input-border-color' token */ --kite-text-input-secure-confirm-icon-color-dark: var(--kite-color-success, #008516); /** @deprecated: Replace with 'text-input-secure-confirm-icon-color' token */ --kite-text-input-secure-show-icon-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'text-input-secure-icon-color' token */ --kite-text-input-secure-show-icon-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'text-input-secure-icon-color' token */ --kite-text-input-secure-show-icon-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-style' token */ --kite-text-input-secure-show-icon-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-width' token */ --kite-text-input-secure-hide-icon-color: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'text-input-secure-visible-icon-color' token */ --kite-text-input-secure-hide-icon-color-dark: var(--kite-color-primary, #0073d1); /** @deprecated: Replace with 'text-input-secure-visible-icon-color' token */ --kite-time-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-time-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-time-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-time-input-cursor: var(--kite-form-control-cursor, pointer); --kite-time-input-icon-size: var(--kite-spacing-xl, 1.5rem); --kite-time-input-placeholder-margin-right: var(--kite-spacing-md, 1rem); --kite-time-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-time-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-toast-text-size: var(--kite-typography-body-size, 1rem); --kite-toast-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-toast-border-style: var(--kite-border-style, solid); --kite-toast-margin-top: var(--kite-spacing-2xl, 2rem); --kite-toast-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-toast-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-toast-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-toast-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-toast-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-toast-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-toast-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-toast-offset: var(--kite-spacing-2xl, 2rem); --kite-toast-transition-duration: var(--kite-motion-fast, 750ms); --kite-toast-icon-margin-right: var(--kite-spacing-sm, 0.75rem); --kite-tooltip-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-tooltip-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-tooltip-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-tooltip-padding-right: var(--kite-spacing-md, 1rem); --kite-tooltip-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-tooltip-padding-left: var(--kite-spacing-md, 1rem); --kite-tooltip-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tooltip-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tooltip-arrow-background-color: var(--kite-tooltip-background-color, #001221); --kite-tooltip-entry-transition-duration: var(--kite-motion-fast, 750ms); --kite-tooltip-exit-transition-duration: var(--kite-motion-fast, 750ms); --kite-tooltip-entrance-transition-duration: var(--kite-motion-fast, 750ms); /** @deprecated: Replace with 'tooltip-entry-transition-duration' token */ --kite-tooltip-entrance-transition-curve: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); /** @deprecated: Replace with 'tooltip-entry-transition-timing-function' token */ --kite-tooltip-entry-transition-curve: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); /** @deprecated: Replace with 'tooltip-entry-transition-timing-function' token */ --kite-tooltip-exit-transition-curve: var(--kite-motion-exit, cubic-bezier(0.42, 0, 1, 1)); /** @deprecated: Replace with 'tooltip-exit-transition-timing-function' token */ --kite-border-radius: var(--kite-border-radius-sm, 0.125rem); /** Default border radius used for most UI elements */ --kite-container-border-width: var(--kite-border-width, 0.0625rem); --kite-my-component-border-width: var(--kite-border-width, 0.0625rem); --kite-my-component-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-my-component-icon-color: var(--kite-my-component-text-color, #000000); --kite-form-control-border-width: var(--kite-border-width, 0.0625rem); --kite-form-control-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-form-control-focus-border-color: var(--kite-focus-ring-color, #0062b2); --kite-form-control-label-text-weight: var(--kite-typography-body-weight, 400); --kite-form-control-picker-border-color: var(--kite-container-border-color, #d8dde6); --kite-form-control-picker-border-width: var(--kite-border-width, 0.0625rem); --kite-form-control-picker-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-form-control-picker-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-form-control-picker-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-form-control-picker-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-form-control-picker-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-form-control-picker-list-item-border-style: var(--kite-form-control-picker-border-style, solid); --kite-form-control-picker-list-item-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-form-control-picker-list-item-negative-icon-color: var(--kite-form-control-picker-list-item-negative-text-color, #d6312b); --kite-form-control-input-focus-ring-color: var(--kite-focus-ring-color, #0062b2); /** @deprecated: Replace with "form-control-focus-ring-color" token */ --kite-form-spacing-stack: var(--kite-form-spacing-stack-xl, 1.5rem); /** Vertical spacing to use between form fields and groups */ --kite-typography-display-letter-spacing: var(--kite-typography-sm-display-letter-spacing, normal); --kite-typography-display-margin-bottom: var(--kite-typography-sm-display-margin-bottom, 1rem); --kite-typography-title-1-margin-bottom: var(--kite-typography-sm-title-1-margin-bottom, 0.75rem); --kite-typography-title-2-margin-bottom: var(--kite-typography-sm-title-2-margin-bottom, 0.5rem); --kite-typography-title-3-margin-bottom: var(--kite-typography-sm-title-3-margin-bottom, 0.5rem); --kite-typography-title-4-margin-bottom: var(--kite-typography-sm-title-4-margin-bottom, 0.5rem); --kite-typography-title-5-margin-bottom: var(--kite-typography-sm-title-5-margin-bottom, 0.25rem); --kite-typography-title-6-margin-bottom: var(--kite-typography-sm-title-6-margin-bottom, 0.25rem); --kite-typography-body-display-margin-bottom: var(--kite-typography-sm-body-display-margin-bottom, 1.5rem); --kite-typography-body-margin-bottom: var(--kite-typography-sm-body-margin-bottom, 1rem); --kite-typography-eyebrow-letter-spacing: var(--kite-typography-sm-eyebrow-letter-spacing, 0.125rem); --kite-typography-eyebrow-margin-bottom: var(--kite-typography-sm-eyebrow-margin-bottom, 0.5rem); --kite-typography-caption-1-margin-bottom: var(--kite-typography-sm-caption-1-margin-bottom, 0.75rem); --kite-typography-caption-2-margin-bottom: var(--kite-typography-sm-caption-2-margin-bottom, 0.75rem); --kite-typography-caption-weight: var(--kite-typography-caption-1-weight, 400); /** @deprecated: Replace with 'typography-caption-1-weight' token */ --kite-typography-caption-style: var(--kite-typography-caption-1-style, normal); /** @deprecated: Replace with 'typography-caption-1-style' token */ --kite-typography-caption-letter-spacing: var(--kite-typography-caption-1-letter-spacing, normal); /** @deprecated: Replace with 'typography-caption-1-letter-spacing' token */ --kite-accordion-border-width: var(--kite-border-width, 0.0625rem); --kite-accordion-padding-top: var(--kite-accordion-padding-top-sm, 1rem); --kite-accordion-padding-right: var(--kite-accordion-padding-right-sm, 1rem); --kite-accordion-padding-bottom: var(--kite-accordion-padding-bottom-sm, 1rem); --kite-accordion-padding-left: var(--kite-accordion-padding-left-sm, 1rem); --kite-accordion-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-accordion-icon-color: var(--kite-accordion-title-text-color, #000000); --kite-accordion-icon-transition-timing-function: var(--kite-accordion-icon-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-accordion-label-text-weight: var(--kite-typography-body-weight, 400); --kite-accordion-expanded-transition-timing-function: var(--kite-accordion-expanded-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-accordion-border-bottom-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "accordion-border-width" token */ --kite-alert-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-alert-border-width: var(--kite-border-width, 0.0625rem); --kite-alert-text-weight: var(--kite-typography-body-weight, 400); --kite-alert-dismiss-icon-color: var(--kite-alert-text-color, #000000); --kite-alert-passive-link-text-color: var(--kite-alert-text-color, #000000); --kite-alert-passive-title-letter-spacing: var(--kite-typography-body-letter-spacing, normal); --kite-alert-passive-caution-status-icon-color: var(--kite-alert-text-color, #000000); --kite-alert-page-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with "alert-border-radius" token */ --kite-badge-border-width: var(--kite-border-width, 0.0625rem); --kite-badge-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-blockquote-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-button-group-item-margin-right: var(--kite-button-group-button-margin-right, 1.5rem); --kite-button-group-item-margin-bottom: var(--kite-button-group-button-margin-bottom, 1rem); --kite-button-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-button-border-width: var(--kite-border-width, 0.0625rem); --kite-button-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-button-focus-ring-radius: var(--kite-border-radius-lg, 0.5rem); --kite-button-focus-icon-color: var(--kite-button-focus-text-color, #ffffff); --kite-button-hover-icon-color: var(--kite-button-hover-text-color, #ffffff); --kite-button-press-icon-color: var(--kite-button-press-text-color, #ffffff); --kite-button-disabled-icon-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-icon-color: var(--kite-button-text-color, #ffffff); --kite-button-destructive-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-button-destructive-icon-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-focus-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-hover-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-press-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-primary-background-color: var(--kite-button-background-color, #0073d1); --kite-button-primary-border-style: var(--kite-button-border-style, solid); --kite-button-primary-text-color: var(--kite-button-text-color, #ffffff); --kite-button-primary-press-background-color: var(--kite-button-press-background-color, #0062b2); --kite-button-primary-press-text-color: var(--kite-button-press-text-color, #ffffff); --kite-button-primary-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-primary-focus-background-color: var(--kite-button-focus-background-color, #0062b2); --kite-button-primary-focus-text-color: var(--kite-button-focus-text-color, #ffffff); --kite-button-primary-hover-background-color: var(--kite-button-hover-background-color, #0062b2); --kite-button-primary-hover-text-color: var(--kite-button-hover-text-color, #ffffff); --kite-button-primary-destructive-background-color: var(--kite-button-destructive-background-color, #d6312b); --kite-button-primary-destructive-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-primary-destructive-disabled-background-color: var(--kite-button-destructive-disabled-background-color, #d8dde6); --kite-button-primary-destructive-disabled-border-color: var(--kite-button-destructive-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-icon-color: var(--kite-button-secondary-text-color, #0073d1); --kite-button-secondary-border-style: var(--kite-button-border-style, solid); --kite-button-secondary-focus-text-color: var(--kite-button-focus-text-color, #ffffff); --kite-button-secondary-hover-text-color: var(--kite-button-hover-text-color, #ffffff); --kite-button-secondary-press-text-color: var(--kite-button-press-text-color, #ffffff); --kite-button-secondary-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-secondary-destructive-icon-color: var(--kite-button-secondary-destructive-text-color, #d6312b); --kite-button-secondary-destructive-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-borderless-border-style: var(--kite-button-border-style, solid); --kite-button-borderless-icon-color: var(--kite-button-borderless-text-color, #0073d1); --kite-button-borderless-focus-icon-color: var(--kite-button-borderless-focus-text-color, #0062b2); --kite-button-borderless-hover-icon-color: var(--kite-button-borderless-hover-text-color, #0062b2); --kite-button-borderless-press-icon-color: var(--kite-button-borderless-press-text-color, #0062b2); --kite-button-borderless-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-borderless-destructive-icon-color: var(--kite-button-borderless-destructive-text-color, #d6312b); --kite-button-borderless-destructive-focus-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-hover-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-press-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-disabled-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-calendar-border-width: var(--kite-border-width, 0.0625rem); --kite-calendar-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-calendar-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-calendar-controls-text-color: var(--kite-form-control-text-color, #000000); --kite-calendar-day-text-color: var(--kite-form-control-text-color, #000000); --kite-calendar-day-invalid-text-decoration-thickness: var(--kite-calendar-day-unavailable-text-decoration-thickness, 0.125rem); --kite-calendar-day-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-calendar-day-due-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-calendar-day-out-month-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-calendar-day-out-month-hover-text-color: var(--kite-form-control-text-color, #000000); --kite-calendar-day-out-range-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-calendar-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-calendar-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-calendar-error-feedback-icon-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-calendar-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-calendar-standalone-background-color: var(--kite-card-background-color, #ffffff); --kite-card-border-color: var(--kite-container-border-color, #d8dde6); --kite-card-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-card-border-style: var(--kite-container-border-style, solid); --kite-card-padding-top: var(--kite-card-padding-top-sm, 1rem); --kite-card-padding-right: var(--kite-card-padding-right-sm, 1rem); --kite-card-padding-bottom: var(--kite-card-padding-bottom-sm, 1rem); --kite-card-padding-left: var(--kite-card-padding-left-sm, 1rem); --kite-card-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-checkbox-border-style: var(--kite-form-control-border-style, solid); --kite-checkbox-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-checkbox-focus-ring-radius: var(--kite-border-radius-md, 0.25rem); --kite-checkbox-selected-disabled-icon-color: var(--kite-checkbox-disabled-icon-color, #d8dde6); --kite-checkbox-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-checkbox-disabled-label-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-checkbox-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-checkbox-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-checkbox-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-checkbox-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-checkbox-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-checkbox-group-checkbox-margin-bottom: var(--kite-form-spacing-stack-md, 1rem); --kite-checkbox-indeterminate-background-color: var(--kite-checkbox-selected-background-color, #0073d1); --kite-checkbox-indeterminate-icon-color: var(--kite-checkbox-selected-icon-color, #ffffff); --kite-checkbox-indeterminate-disabled-background-color: var(--kite-checkbox-selected-disabled-background-color, #9ba9bd); --kite-chip-border-width: var(--kite-border-width, 0.0625rem); --kite-chip-selected-padding-top: var(--kite-chip-padding-top, 0.25rem); --kite-chip-selected-padding-bottom: var(--kite-chip-padding-bottom, 0.25rem); --kite-combobox-text-color: var(--kite-form-control-text-color, #000000); --kite-combobox-border-style: var(--kite-form-control-border-style, solid); --kite-combobox-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-combobox-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-combobox-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-combobox-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-combobox-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-combobox-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-combobox-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-combobox-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-combobox-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-combobox-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-combobox-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-combobox-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-combobox-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-combobox-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-combobox-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-combobox-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-combobox-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-combobox-picker-offset-y: var(--kite-form-control-picker-offset, 0.25rem); --kite-combobox-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-combobox-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-combobox-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-data-table-border-width: var(--kite-border-width, 0.0625rem); --kite-data-table-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-data-table-header-text-color: var(--kite-data-table-text-color, #000000); --kite-data-table-header-border-bottom-color: var(--kite-data-table-border-color, #d8dde6); --kite-data-table-header-border-bottom-style: var(--kite-data-table-border-style, solid); --kite-data-table-cell-border-color: var(--kite-data-table-border-color, #d8dde6); --kite-data-table-cell-border-style: var(--kite-data-table-border-style, solid); --kite-data-table-cell-padding-top: var(--kite-data-table-padding-top, 0.75rem); --kite-data-table-cell-padding-right: var(--kite-data-table-padding-right, 0.75rem); --kite-data-table-cell-padding-bottom: var(--kite-data-table-padding-bottom, 0.75rem); --kite-data-table-cell-padding-left: var(--kite-data-table-padding-left, 0.75rem); --kite-data-table-cell-focus-ring-style: var(--kite-data-table-focus-ring-style, solid); --kite-data-table-cell-focus-ring-width: var(--kite-data-table-focus-ring-width, 0.125rem); --kite-data-table-row-background-color: var(--kite-data-table-background-color, #ffffff); --kite-data-table-row-border-color: var(--kite-data-table-border-color, #d8dde6); --kite-data-table-row-border-style: var(--kite-data-table-border-style, solid); --kite-data-table-row-focus-ring-style: var(--kite-data-table-focus-ring-style, solid); --kite-data-table-row-focus-ring-width: var(--kite-data-table-focus-ring-width, 0.125rem); --kite-date-input-text-color: var(--kite-form-control-text-color, #000000); --kite-date-input-border-style: var(--kite-form-control-border-style, solid); --kite-date-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-date-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-date-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-date-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-date-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-date-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-date-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-date-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-date-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-date-input-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-date-input-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-date-input-addon-icon-color: var(--kite-form-control-addon-icon-color, #0073d1); --kite-date-input-addon-padding-right: var(--kite-form-control-addon-padding-right, 0.5rem); --kite-date-input-addon-padding-left: var(--kite-form-control-addon-padding-left, 0.5rem); --kite-date-input-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-date-input-picker-offset: var(--kite-form-control-picker-offset, 0.25rem); --kite-date-input-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-date-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-date-input-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-date-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-date-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-dialog-border-color: var(--kite-container-border-color, #d8dde6); --kite-dialog-border-style: var(--kite-container-border-style, solid); --kite-dialog-padding-top: var(--kite-dialog-full-size-padding-top, 3rem); --kite-dialog-padding-right: var(--kite-dialog-full-size-padding-right, 1rem); --kite-dialog-padding-bottom: var(--kite-dialog-full-size-padding-bottom, 1.25rem); --kite-dialog-padding-left: var(--kite-dialog-full-size-padding-left, 1rem); --kite-dialog-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-dialog-breakpoint-md-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-dialog-title-text-weight: var(--kite-typography-title-5-weight, 500); --kite-dialog-dismiss-icon-color: var(--kite-dialog-icon-color, #000000); --kite-dialog-scrolled-border-top-width: var(--kite-border-width, 0.0625rem); --kite-dialog-default-size-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with "dialog-breakpoint-md-border-radius" token */ --kite-dropdown-text-color: var(--kite-form-control-text-color, #000000); --kite-dropdown-text-size: var(--kite-form-control-text-size, 1rem); --kite-dropdown-border-style: var(--kite-form-control-border-style, solid); --kite-dropdown-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-dropdown-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-dropdown-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-dropdown-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-dropdown-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-dropdown-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-dropdown-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-dropdown-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-dropdown-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-dropdown-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-dropdown-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-dropdown-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-dropdown-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-dropdown-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-dropdown-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-dropdown-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-dropdown-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-dropdown-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-dropdown-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-dropdown-list-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-dropdown-list-border-width: var(--kite-border-width, 0.0625rem); --kite-dropdown-list-item-border-color: var(--kite-menu-list-border-color, #d8dde6); --kite-dropdown-list-item-border-width: var(--kite-border-width, 0.0625rem); --kite-dropdown-list-item-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-dropdown-list-item-negative-icon-color: var(--kite-menu-list-item-negative-text-color, #d6312b); --kite-dropdown-inline-text-color: var(--kite-form-control-text-color, #000000); --kite-dropdown-inline-border-style: var(--kite-form-control-border-style, solid); --kite-dropdown-inline-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-dropdown-inline-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-dropdown-list-item-border-bottom-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "dropdown-list-item-border-width" token */ --kite-dynamic-hint-background-color: var(--kite-card-background-color, #ffffff); --kite-dynamic-hint-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-dynamic-hint-criteria-text-size: var(--kite-dynamic-hint-text-size, 1rem); --kite-dynamic-hint-criteria-text-color: var(--kite-dynamic-hint-text-color, #000000); --kite-interactive-list-border-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "list-border-width" token */ --kite-interactive-list-focus-ring-color: var(--kite-focus-ring-color, #0062b2); /** @deprecated: Replace with "list-focus-ring-color" token */ --kite-interactive-list-item-border-color: var(--kite-interactive-list-border-color, #d8dde6); /** @deprecated: Replace with "list-item-border-color" token */ --kite-interactive-list-item-border-style: var(--kite-interactive-list-border-style, solid); /** @deprecated: Replace with "list-item-border-style" token */ --kite-interactive-list-item-focus-ring-color: var(--kite-focus-ring-color, #0062b2); /** @deprecated: Replace with "list-item-focus-ring-color" token */ --kite-interactive-list-item-padding-top-sm: var(--kite-interactive-list-item-padding-top, 1rem); /** @deprecated: Replace with "list-item-padding-top-sm" token */ --kite-interactive-list-item-padding-bottom-sm: var(--kite-interactive-list-item-padding-bottom, 1rem); /** @deprecated: Replace with "list-item-padding-bottom-sm" token */ --kite-interactive-list-item-padding-top-md: var(--kite-interactive-list-item-padding-top, 1rem); /** @deprecated: Replace with "list-item-padding-top-md" token */ --kite-interactive-list-item-padding-bottom-md: var(--kite-interactive-list-item-padding-bottom, 1rem); /** @deprecated: Replace with "list-item-padding-bottom-md" token */ --kite-interactive-list-item-padding-top-lg: var(--kite-interactive-list-item-padding-top, 1rem); /** @deprecated: Replace with "list-item-padding-top-lg" token */ --kite-interactive-list-item-padding-bottom-lg: var(--kite-interactive-list-item-padding-bottom, 1rem); /** @deprecated: Replace with "list-item-padding-bottom-lg" token */ --kite-interactive-list-item-icon-color: var(--kite-interactive-list-item-text-color, #000000); /** @deprecated: Replace with "list-item-icon-color" token */ --kite-interactive-list-item-label-text-color: var(--kite-interactive-list-item-text-color, #000000); /** @deprecated: Replace with "list-item-label-text-color" token */ --kite-interactive-list-item-title-text-weight: var(--kite-typography-title-6-weight, 500); /** @deprecated: Replace with "list-item-title-text-weight" token */ --kite-interactive-list-item-disabled-icon-color: var(--kite-interactive-list-item-disabled-text-color, #9ba9bd); /** @deprecated: Replace with "list-item-disabled-icon-color" token */ --kite-interactive-list-item-breakpoint-md-title-text-weight: var(--kite-typography-title-6-weight, 500); /** @deprecated: Replace with "list-item-breakpoint-md-title-text-weight" token */ --kite-link-text-weight: var(--kite-typography-body-weight, 400); --kite-link-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-link-focus-text-color: var(--kite-link-text-color, #0073d1); --kite-link-icon-color: var(--kite-link-text-color, #0073d1); --kite-link-standalone-visited-icon-color: var(--kite-link-visited-text-color, #003561); --kite-link-standalone-icon-margin-left: var(--kite-link-icon-margin, 0.25rem); /** @deprecated: Replace with 'link-icon-margin' token */ --kite-list-border-width: var(--kite-border-width, 0.0625rem); --kite-list-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-list-item-border-color: var(--kite-list-border-color, #d8dde6); --kite-list-item-border-style: var(--kite-list-border-style, solid); --kite-list-item-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-list-item-padding-top-sm: var(--kite-list-item-padding-top, 1rem); --kite-list-item-padding-bottom-sm: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-padding-top-md: var(--kite-list-item-padding-top, 1rem); --kite-list-item-padding-bottom-md: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-padding-top-lg: var(--kite-list-item-padding-top, 1rem); --kite-list-item-padding-bottom-lg: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-slot-start-margin-right: var(--kite-list-start-margin-right, 0.5rem); --kite-list-item-slot-end-margin-left: var(--kite-list-end-margin-left, 0.5rem); --kite-list-item-icon-color: var(--kite-list-item-text-color, #000000); --kite-list-item-label-text-color: var(--kite-list-item-text-color, #000000); --kite-list-item-title-text-weight: var(--kite-typography-title-6-weight, 500); --kite-list-item-disabled-icon-color: var(--kite-list-item-disabled-text-color, #9ba9bd); --kite-list-item-negative-label-icon-color: var(--kite-list-item-negative-label-text-color, #d6312b); --kite-list-item-neutral-label-icon-color: var(--kite-list-item-neutral-label-text-color, #0073d1); --kite-list-item-positive-label-icon-color: var(--kite-list-item-positive-label-text-color, #008516); --kite-list-item-expandable-content-padding-right: var(--kite-list-item-padding-right, 0.5rem); --kite-list-item-expandable-content-padding-bottom: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-expandable-content-padding-left: var(--kite-list-item-padding-left, 0.5rem); --kite-list-item-breakpoint-md-title-text-weight: var(--kite-typography-title-6-weight, 500); --kite-menu-list-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-menu-list-border-width: var(--kite-border-width, 0.0625rem); --kite-menu-list-item-border-color: var(--kite-menu-list-border-color, #d8dde6); --kite-menu-list-item-border-width: var(--kite-border-width, 0.0625rem); --kite-menu-list-item-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-menu-list-item-negative-icon-color: var(--kite-menu-list-item-negative-text-color, #d6312b); --kite-menu-trigger-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-menu-trigger-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-menu-contextual-label-trigger-padding-right: var(--kite-menu-trigger-padding-right, 0.75rem); --kite-menu-contextual-label-trigger-padding-left: var(--kite-menu-trigger-padding-left, 0.75rem); --kite-menu-contextual-label-trigger-activated-label-text-color: var(--kite-menu-trigger-activated-icon-color, #ffffff); --kite-menu-list-item-border-bottom-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "menu-list-item-border-width" token */ --kite-meter-icon-color: var(--kite-meter-fill-color, #5db8fc); --kite-meter-track-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-meter-positive-icon-color: var(--kite-meter-positive-fill-color, #008516); --kite-meter-negative-icon-color: var(--kite-meter-negative-fill-color, #d6312b); --kite-meter-caution-icon-color: var(--kite-meter-caution-fill-color, #faa41a); --kite-meter-sm-track-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-meter-lg-track-border-radius: var(--kite-border-radius-lg, 0.5rem); --kite-meter-circular-track-margin-bottom: var(--kite-meter-track-margin-bottom, 0.25rem); --kite-meter-circular-fill-color: var(--kite-meter-fill-color, #5db8fc); --kite-meter-circular-tick-height: var(--kite-meter-circular-track-height, 0.5rem); --kite-meter-circular-sm-label-text-size: var(--kite-meter-sm-label-text-size, 0.875rem); --kite-meter-circular-sm-label-text-line-height: var(--kite-meter-sm-label-text-line-height, 1.429); --kite-meter-circular-sm-value-label-text-size: var(--kite-meter-sm-label-text-size, 0.875rem); --kite-meter-circular-sm-value-label-text-line-height: var(--kite-meter-sm-label-text-line-height, 1.429); --kite-meter-circular-lg-track-height: var(--kite-meter-circular-track-height, 0.5rem); --kite-meter-circular-lg-tick-width: var(--kite-meter-circular-tick-width, 0.25rem); --kite-meter-linear-track-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with 'meter-track-border-radius' token */ --kite-meter-linear-small-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with 'meter-sm-track-border-radius' token */ --kite-meter-linear-large-border-radius: var(--kite-border-radius-lg, 0.5rem); /** @deprecated: Replace with 'meter-lg-track-border-radius' token */ --kite-pagination-controls-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-pagination-controls-border-width: var(--kite-border-width, 0.0625rem); --kite-pagination-controls-button-border-color: var(--kite-pagination-controls-border-color, #d8dde6); --kite-pagination-controls-button-border-style: var(--kite-pagination-controls-border-style, solid); --kite-pagination-controls-button-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-pagination-page-select-current-label-margin-right: var(--kite-pagination-dropdown-margin-right, 0.25rem); --kite-pagination-page-select-current-label-margin-left: var(--kite-pagination-dropdown-margin-left, 0.25rem); --kite-pagination-dropdown-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-pagination-controls-button-previous-border-color: var(--kite-pagination-controls-border-color, #d8dde6); /** @deprecated: Replace with 'pagination-controls-button-border-color' token */ --kite-pagination-controls-button-previous-border-style: var(--kite-pagination-controls-border-style, solid); /** @deprecated: Replace with 'pagination-controls-button-border-style' token */ --kite-payment-logo-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-popover-background-color: var(--kite-card-background-color, #ffffff); --kite-popover-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-popover-trigger-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-popover-trigger-focus-ring-radius: var(--kite-border-radius-circle, 50%); --kite-popover-trigger-hover-icon-color: var(--kite-popover-trigger-icon-color, #0073d1); --kite-popover-dismiss-icon-color: var(--kite-popover-text-color, #000000); --kite-progress-indicator-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-progress-indicator-value-label-color: var(--kite-progress-indicator-fill-color, #0073d1); --kite-progress-indicator-secondary-label-weight: var(--kite-typography-body-weight, 400); --kite-progress-indicator-positive-icon-color: var(--kite-progress-indicator-positive-fill-color, #008516); --kite-progress-indicator-negative-icon-color: var(--kite-progress-indicator-negative-fill-color, #d6312b); --kite-progress-indicator-circular-border-radius: var(--kite-border-radius-circle, 50%); --kite-progress-indicator-lg-sub-label-text-weight: var(--kite-typography-body-weight, 400); /** @deprecated: Replace with 'progress-indicator-secondary-label-weight' token */ --kite-radio-border-radius: var(--kite-border-radius-circle, 50%); --kite-radio-border-style: var(--kite-form-control-border-style, solid); --kite-radio-margin-bottom: var(--kite-form-spacing-stack-md, 1rem); --kite-radio-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-radio-selected-border-width: var(--kite-radio-border-width, 0.125rem); --kite-radio-selected-disabled-indicator-background-color: var(--kite-radio-selected-disabled-border-color, #9ba9bd); --kite-radio-selected-indicator-background-color: var(--kite-radio-selected-border-color, #0073d1); --kite-radio-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-radio-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-radio-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-radio-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-radio-group-margin-top: var(--kite-form-spacing-stack-2xl, 2rem); --kite-radio-group-margin-bottom: var(--kite-form-spacing-stack-2xl, 2rem); --kite-search-input-text-color: var(--kite-form-control-text-color, #000000); --kite-search-input-border-style: var(--kite-form-control-border-style, solid); --kite-search-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-search-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-search-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-search-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-search-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-search-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-search-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-search-input-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-search-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-search-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-search-input-addon-icon-color: var(--kite-form-control-addon-icon-color, #0073d1); --kite-search-input-addon-padding-right: var(--kite-form-control-addon-padding-right, 0.5rem); --kite-search-input-addon-padding-left: var(--kite-form-control-addon-padding-left, 0.5rem); --kite-search-input-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-search-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-search-input-placeholder-margin-right: var(--kite-form-control-padding-left, 0.5rem); --kite-search-input-placeholder-margin-left: var(--kite-form-control-padding-right, 0.5rem); --kite-search-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-search-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-select-text-color: var(--kite-form-control-text-color, #000000); --kite-select-text-size: var(--kite-form-control-text-size, 1rem); --kite-select-border-style: var(--kite-form-control-border-style, solid); --kite-select-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-select-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-select-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-select-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-select-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-select-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-select-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-select-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-select-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-select-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-select-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-select-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-select-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-select-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-select-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-select-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-select-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-select-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-select-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-select-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-select-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-skip-link-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-skip-link-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-switch-transition-timing-function: var(--kite-switch-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-switch-thumb-border-radius: var(--kite-border-radius-circle, 50%); --kite-switch-on-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-switch-indicator-border-radius: var(--kite-border-radius-circle, 50%); /** @deprecated: Replace with 'switch-thumb-border-radius' token */ --kite-tabs-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-tabs-transition-timing-function: var(--kite-tabs-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-tabs-tab-text-weight: var(--kite-typography-body-weight, 400); --kite-tabs-tab-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-tabs-panel-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-tabs-item-text-weight: var(--kite-typography-body-weight, 400); /** @deprecated: Replace with 'tabs-tab-text-weight' token */ --kite-tabs-item-focus-ring-color: var(--kite-focus-ring-color, #0062b2); /** @deprecated: Replace with 'tabs-tab-focus-ring-color' token */ --kite-tag-border-width: var(--kite-border-width, 0.0625rem); --kite-tag-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-tag-icon-color: var(--kite-tag-text-color, #000000); --kite-tag-negative-icon-color: var(--kite-tag-negative-border-color, #d6312b); --kite-tag-solid-caution-icon-color: var(--kite-tag-solid-caution-text-color, #000000); --kite-tag-solid-negative-icon-color: var(--kite-tag-solid-negative-text-color, #ffffff); --kite-tag-solid-neutral-icon-color: var(--kite-tag-solid-neutral-text-color, #000000); --kite-tag-solid-positive-icon-color: var(--kite-tag-solid-positive-text-color, #ffffff); --kite-text-area-text-color: var(--kite-form-control-text-color, #000000); --kite-text-area-text-size: var(--kite-form-control-text-size, 1rem); --kite-text-area-border-style: var(--kite-form-control-border-style, solid); --kite-text-area-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-text-area-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-text-area-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-text-area-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-text-area-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-text-area-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-text-area-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-text-area-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-text-area-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-text-area-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-text-area-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-text-area-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-text-area-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-text-area-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-text-area-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-text-area-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-text-area-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-text-area-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-text-area-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-text-area-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-text-area-error-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); /** @deprecated: Replace with 'text-area-error-feedback-text-color' token */ --kite-text-area-error-text-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); /** @deprecated: Replace with 'text-area-feedback-margin-top' token */ --kite-text-input-text-color: var(--kite-form-control-text-color, #000000); --kite-text-input-text-size: var(--kite-form-control-text-size, 1rem); --kite-text-input-border-style: var(--kite-form-control-border-style, solid); --kite-text-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-text-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-text-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-text-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-text-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-text-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-text-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-text-input-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-text-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-text-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-text-input-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-text-input-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-text-input-addon-icon-color: var(--kite-form-control-addon-icon-color, #0073d1); --kite-text-input-addon-padding-right: var(--kite-form-control-addon-padding-right, 0.5rem); --kite-text-input-addon-padding-left: var(--kite-form-control-addon-padding-left, 0.5rem); --kite-text-input-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-text-input-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-text-input-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-text-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-text-input-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-text-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-text-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-text-input-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-text-input-secure-icon-width: var(--kite-text-input-addon-icon-width, 1.5rem); --kite-text-input-secure-icon-height: var(--kite-text-input-addon-icon-width, 1.5rem); --kite-text-input-secure-confirm-icon-width: var(--kite-text-input-addon-icon-width, 1.5rem); --kite-text-input-error-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); /** @deprecated: Replace with 'text-input-error-feedback-text-color' token */ --kite-text-input-error-text-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); /** @deprecated: Replace with 'text-input-feedback-margin-top' token */ --kite-text-input-secure-show-icon-focus-ring-color: var(--kite-focus-ring-color, #0062b2); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-color' token */ --kite-time-input-text-color: var(--kite-form-control-text-color, #000000); --kite-time-input-border-style: var(--kite-form-control-border-style, solid); --kite-time-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-time-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-time-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-time-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-time-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-time-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-time-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-time-input-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-time-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-time-input-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-time-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-time-input-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-time-input-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-time-input-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-time-input-label-color: var(--kite-form-control-label-text-color, #000000); --kite-time-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-time-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-time-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-time-input-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-toast-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-toast-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-tooltip-focus-ring-color: var(--kite-focus-ring-color, #0062b2); --kite-tooltip-entry-transition-timing-function: var(--kite-tooltip-entry-transition-curve, cubic-bezier(0, 0, 0.58, 1)); --kite-tooltip-exit-transition-timing-function: var(--kite-tooltip-exit-transition-curve, cubic-bezier(0.42, 0, 1, 1)); --kite-container-border-radius: var(--kite-border-radius, 0.125rem); --kite-my-component-border-radius: var(--kite-border-radius, 0.125rem); --kite-form-control-picker-list-item-border-color: var(--kite-form-control-picker-border-color, #d8dde6); --kite-form-control-picker-list-item-border-width: var(--kite-form-control-picker-border-width, 0.0625rem); --kite-typography-caption-margin-bottom: var(--kite-typography-caption-1-margin-bottom, 0.75rem); /** @deprecated: Replace with 'typography-caption-1-margin-bottom' token */ --kite-alert-passive-border-radius: var(--kite-alert-border-radius, 0.25rem); --kite-button-destructive-focus-icon-color: var(--kite-button-destructive-focus-text-color, #ffffff); --kite-button-destructive-hover-icon-color: var(--kite-button-destructive-hover-text-color, #ffffff); --kite-button-destructive-press-icon-color: var(--kite-button-destructive-press-text-color, #ffffff); --kite-button-destructive-disabled-icon-color: var(--kite-button-destructive-disabled-text-color, #9ba9bd); --kite-button-primary-border-width: var(--kite-button-border-width, 0.0625rem); --kite-button-primary-icon-color: var(--kite-button-primary-text-color, #ffffff); --kite-button-primary-press-icon-color: var(--kite-button-primary-press-text-color, #ffffff); --kite-button-primary-disabled-icon-color: var(--kite-button-primary-disabled-text-color, #9ba9bd); --kite-button-primary-focus-icon-color: var(--kite-button-primary-focus-text-color, #ffffff); --kite-button-primary-hover-icon-color: var(--kite-button-primary-hover-text-color, #ffffff); --kite-button-primary-destructive-icon-color: var(--kite-button-primary-destructive-text-color, #ffffff); --kite-button-primary-destructive-focus-text-color: var(--kite-button-destructive-focus-text-color, #ffffff); --kite-button-primary-destructive-hover-text-color: var(--kite-button-destructive-hover-text-color, #ffffff); --kite-button-primary-destructive-press-text-color: var(--kite-button-destructive-press-text-color, #ffffff); --kite-button-primary-destructive-disabled-text-color: var(--kite-button-destructive-disabled-text-color, #9ba9bd); --kite-button-secondary-border-width: var(--kite-button-border-width, 0.0625rem); --kite-button-secondary-focus-icon-color: var(--kite-button-secondary-focus-text-color, #ffffff); --kite-button-secondary-hover-icon-color: var(--kite-button-secondary-hover-text-color, #ffffff); --kite-button-secondary-press-icon-color: var(--kite-button-secondary-press-text-color, #ffffff); --kite-button-secondary-disabled-icon-color: var(--kite-button-secondary-disabled-text-color, #9ba9bd); --kite-button-secondary-destructive-focus-text-color: var(--kite-button-destructive-focus-text-color, #ffffff); --kite-button-secondary-destructive-hover-text-color: var(--kite-button-destructive-hover-text-color, #ffffff); --kite-button-secondary-destructive-press-text-color: var(--kite-button-destructive-press-text-color, #ffffff); --kite-button-secondary-destructive-disabled-icon-color: var(--kite-button-secondary-disabled-text-color, #9ba9bd); --kite-button-borderless-border-width: var(--kite-button-border-width, 0.0625rem); --kite-button-borderless-disabled-icon-color: var(--kite-button-borderless-disabled-text-color, #9ba9bd); --kite-button-borderless-destructive-disabled-icon-color: var(--kite-button-borderless-destructive-disabled-text-color, #9ba9bd); --kite-button-primary-icon-fill: var(--kite-button-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-icon-color' token */ --kite-button-primary-active-icon-fill: var(--kite-button-press-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-press-icon-color' token */ --kite-button-primary-disabled-icon-fill: var(--kite-button-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with 'button-primary-disabled-icon-color' token */ --kite-button-primary-focus-icon-fill: var(--kite-button-focus-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-focus-icon-color' token */ --kite-button-primary-hover-icon-fill: var(--kite-button-hover-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-hover-icon-color' token */ --kite-button-secondary-active-icon-fill: var(--kite-button-press-icon-color, #ffffff); /** @deprecated: Replace with 'button-secondary-press-icon-color' token */ --kite-button-secondary-disabled-icon-fill: var(--kite-button-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with 'button-secondary-disabled-icon-color' token */ --kite-button-secondary-focus-icon-fill: var(--kite-button-focus-icon-color, #ffffff); /** @deprecated: Replace with 'button-secondary-focus-icon-color' token */ --kite-button-secondary-hover-icon-fill: var(--kite-button-hover-icon-color, #ffffff); /** @deprecated: Replace with 'button-secondary-hover-icon-color' token */ --kite-button-borderless-disabled-icon-fill: var(--kite-button-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with 'button-borderless-disabled-icon-color' token */ --kite-calendar-border-radius: var(--kite-border-radius, 0.125rem); --kite-calendar-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-calendar-standalone-border-color: var(--kite-card-border-color, #d8dde6); --kite-calendar-standalone-border-style: var(--kite-card-border-style, solid); --kite-calendar-standalone-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-card-border-width: var(--kite-container-border-width, 0.0625rem); --kite-checkbox-border-radius: var(--kite-border-radius, 0.125rem); --kite-checkbox-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-checkbox-selected-disabled-border-color: var(--kite-checkbox-disabled-border-color, #9ba9bd); --kite-checkbox-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-checkbox-error-feedback-icon-color: var(--kite-checkbox-error-feedback-text-color, #d6312b); --kite-checkbox-error-selected-background-color: var(--kite-checkbox-error-border-color, #d6312b); --kite-checkbox-indeterminate-disabled-icon-color: var(--kite-checkbox-selected-disabled-icon-color, #d8dde6); --kite-combobox-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-combobox-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-data-table-header-border-bottom-width: var(--kite-data-table-border-width, 0.0625rem); --kite-data-table-cell-border-width: var(--kite-data-table-border-width, 0.0625rem); --kite-data-table-cell-focus-ring-color: var(--kite-data-table-focus-ring-color, #0062b2); --kite-data-table-row-border-width: var(--kite-data-table-border-width, 0.0625rem); --kite-data-table-row-focus-ring-color: var(--kite-data-table-focus-ring-color, #0062b2); --kite-data-table-sticky-column-background-color: var(--kite-data-table-row-background-color, #ffffff); --kite-date-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-date-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-dropdown-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-dropdown-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-dropdown-focus-ring-style: var(--kite-select-focus-ring-style, solid); --kite-dropdown-focus-ring-width: var(--kite-select-focus-ring-width, 0.125rem); --kite-dropdown-icon-color: var(--kite-dropdown-text-color, #000000); --kite-dropdown-inline-disabled-icon-color: var(--kite-dropdown-inline-disabled-text-color, #9ba9bd); --kite-dropdown-inline-placeholder-text-color: var(--kite-dropdown-inline-text-color, #000000); --kite-dynamic-hint-border-color: var(--kite-card-border-color, #d8dde6); --kite-dynamic-hint-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-dynamic-hint-border-style: var(--kite-card-border-style, solid); --kite-dynamic-hint-padding-top: var(--kite-card-padding-top, 1rem); --kite-dynamic-hint-padding-right: var(--kite-card-padding-right, 1rem); --kite-dynamic-hint-padding-bottom: var(--kite-card-padding-bottom, 1rem); --kite-dynamic-hint-padding-left: var(--kite-card-padding-left, 1rem); --kite-dynamic-hint-arrow-background-color: var(--kite-dynamic-hint-background-color, #ffffff); --kite-interactive-list-item-border-width: var(--kite-interactive-list-border-width, 0.0625rem); /** @deprecated: Replace with "list-item-border-width" token */ --kite-interactive-list-item-action-icon-color: var(--kite-interactive-list-item-icon-color, #000000); /** @deprecated: Replace with "list-item-action-icon-color" token */ --kite-interactive-list-item-disabled-action-icon-color: var(--kite-interactive-list-item-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with "list-item-disabled-action-icon-color" token */ --kite-link-standalone-focus-icon-color: var(--kite-link-focus-text-color, #0073d1); --kite-link-standalone-icon-color: var(--kite-link-icon-color, #0073d1); /** @deprecated: Replace with 'link-icon-color' token */ --kite-list-item-border-width: var(--kite-list-border-width, 0.0625rem); --kite-list-item-caution-label-text-color: var(--kite-list-item-label-text-color, #000000); --kite-list-item-action-icon-color: var(--kite-list-item-icon-color, #000000); --kite-list-item-label-icon-color: var(--kite-list-item-label-text-color, #000000); --kite-list-item-disabled-action-icon-color: var(--kite-list-item-disabled-icon-color, #9ba9bd); --kite-meter-circular-icon-color: var(--kite-meter-circular-fill-color, #5db8fc); --kite-meter-circular-lg-tick-height: var(--kite-meter-circular-lg-track-height, 0.5rem); --kite-pagination-controls-button-border-width: var(--kite-pagination-controls-border-width, 0.0625rem); --kite-pagination-controls-button-previous-border-width: var(--kite-pagination-controls-border-width, 0.0625rem); /** @deprecated: Replace with 'pagination-controls-button-border-width' token */ --kite-popover-border-color: var(--kite-card-border-color, #d8dde6); --kite-popover-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-popover-border-style: var(--kite-card-border-style, solid); --kite-popover-padding-top: var(--kite-card-padding-top, 1rem); --kite-popover-padding-right: var(--kite-card-padding-right, 1rem); --kite-popover-padding-bottom: var(--kite-card-padding-bottom, 1rem); --kite-popover-padding-left: var(--kite-card-padding-left, 1rem); --kite-popover-arrow-background-color: var(--kite-popover-background-color, #ffffff); --kite-popover-trigger-focus-icon-color: var(--kite-popover-trigger-hover-icon-color, #0073d1); --kite-popover-trigger-expanded-icon-color: var(--kite-popover-trigger-hover-icon-color, #0073d1); --kite-radio-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-radio-focus-ring-radius: var(--kite-radio-border-radius, 50%); --kite-radio-selected-border-style: var(--kite-radio-border-style, solid); --kite-radio-selected-focus-ring-style: var(--kite-radio-focus-ring-style, solid); --kite-radio-selected-indicator-border-radius: var(--kite-radio-border-radius, 50%); --kite-radio-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-search-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-search-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-select-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-select-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-select-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-switch-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-tag-border-radius: var(--kite-border-radius, 0.125rem); --kite-text-area-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-text-area-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-text-area-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-text-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-text-input-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-text-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-text-input-secure-icon-color: var(--kite-text-input-addon-icon-color, #0073d1); --kite-text-input-secure-icon-focus-ring-style: var(--kite-text-input-focus-ring-style, solid); --kite-text-input-secure-icon-focus-ring-width: var(--kite-text-input-focus-ring-width, 0.125rem); --kite-text-input-secure-confirm-icon-margin-right: var(--kite-text-input-addon-padding-right, 0.5rem); --kite-text-input-secure-visible-icon-height: var(--kite-text-input-secure-icon-height, 1.5rem); /** @deprecated: Replace with 'text-input-secure-unmasked-icon-height' token */ --kite-text-input-secure-visible-icon-width: var(--kite-text-input-secure-icon-width, 1.5rem); /** @deprecated: Replace with 'text-input-secure-unmasked-icon-width' token */ --kite-time-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-time-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0062b2); --kite-time-input-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-tooltip-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-tooltip-border-style: var(--kite-card-border-style, solid); --kite-button-primary-destructive-focus-icon-color: var(--kite-button-primary-destructive-focus-text-color, #ffffff); --kite-button-primary-destructive-hover-icon-color: var(--kite-button-primary-destructive-hover-text-color, #ffffff); --kite-button-primary-destructive-press-icon-color: var(--kite-button-primary-destructive-press-text-color, #ffffff); --kite-button-primary-destructive-disabled-icon-color: var(--kite-button-primary-destructive-disabled-text-color, #9ba9bd); --kite-button-secondary-destructive-focus-icon-color: var(--kite-button-secondary-destructive-focus-text-color, #ffffff); --kite-button-secondary-destructive-hover-icon-color: var(--kite-button-secondary-destructive-hover-text-color, #ffffff); --kite-button-secondary-destructive-press-icon-color: var(--kite-button-secondary-destructive-press-text-color, #ffffff); --kite-calendar-standalone-border-width: var(--kite-card-border-width, 0.0625rem); --kite-checkbox-indeterminate-disabled-border-color: var(--kite-checkbox-selected-disabled-border-color, #9ba9bd); --kite-dropdown-focus-ring-color: var(--kite-select-focus-ring-color, #0062b2); --kite-dynamic-hint-border-width: var(--kite-card-border-width, 0.0625rem); --kite-dynamic-hint-arrow-border-color: var(--kite-dynamic-hint-border-color, #d8dde6); --kite-dynamic-hint-arrow-border-style: var(--kite-dynamic-hint-border-style, solid); --kite-popover-border-width: var(--kite-card-border-width, 0.0625rem); --kite-popover-arrow-border-color: var(--kite-popover-border-color, #d8dde6); --kite-popover-arrow-border-style: var(--kite-popover-border-style, solid); --kite-radio-selected-focus-ring-color: var(--kite-radio-focus-ring-color, #0062b2); --kite-text-input-secure-icon-focus-ring-color: var(--kite-text-input-focus-ring-color, #0062b2); --kite-text-input-secure-unmasked-icon-height: var(--kite-text-input-secure-visible-icon-height, 1.5rem); --kite-text-input-secure-unmasked-icon-width: var(--kite-text-input-secure-visible-icon-width, 1.5rem); --kite-text-input-secure-visible-icon-color: var(--kite-text-input-secure-icon-color, #0073d1); /** @deprecated: Replace with 'text-input-secure-unmasked-icon-color' token */ --kite-dynamic-hint-arrow-border-width: var(--kite-dynamic-hint-border-width, 0.0625rem); --kite-text-input-secure-unmasked-icon-color: var(--kite-text-input-secure-visible-icon-color, #0073d1); } .kite-theme--life-unltd-white { --kite-border-style-solid: solid; --kite-border-style-dashed: dashed; --kite-border-width-none: 0; --kite-color-dark-blue-10: #002e52; --kite-color-dark-blue-20: #002139; --kite-color-dark-blue-30: #000f1a; --kite-color-blue-10: #4da4ff; --kite-color-blue-20: #0271eb; --kite-color-blue-30: #0257b2; --kite-color-light-blue-10: #b8d4f2; --kite-color-light-blue-20: #73b7ff; --kite-color-light-blue-00: #e5f2ff; --kite-color-green-10: #00bf1f; --kite-color-green-20: #008516; --kite-color-green-00: #e8ffe8; --kite-color-yellow-10: #ffd400; --kite-color-yellow-20: #faa41a; --kite-color-yellow-00: #fff3e0; --kite-color-red-10: #ff4d4a; --kite-color-red-20: #d6312b; --kite-color-red-00: #ffefef; --kite-color-gray-10: #f8f8f8; --kite-color-gray-20: #d8dde6; --kite-color-gray-25: #9ba9bd; --kite-color-gray-30: #63738a; --kite-color-white: #ffffff; --kite-color-black: #000000; --kite-color-life-unlimited-accent-electric-blue: #0271eb; --kite-color-life-unlimited-accent-green: #03c252; --kite-color-life-unlimited-accent-orange: #ff8331; --kite-color-life-unlimited-accent-purple: #887dff; --kite-color-life-unlimited-accent-yellow: #ffcb3e; --kite-color-life-unlimited-primary-midnight-blue: #002139; --kite-color-life-unlimited-primary-white: #ffffff; --kite-color-life-unlimited-support-light-gray: #d5d5d5; --kite-color-negative-focus: #b00300; /** Focus state of negative color */ --kite-color-negative-hover: #b00300; /** Hover state of negative color */ --kite-color-negative-press: #b00300; /** Pressed state of negative color */ --kite-cubic-bezier-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --kite-cubic-bezier-ease-out: cubic-bezier(0, 0, 0.58, 1); --kite-cubic-bezier-ease-in: cubic-bezier(0.42, 0, 1, 1); --kite-duration-200: 200ms; --kite-duration-400: 400ms; --kite-duration-750: 750ms; --kite-font-family-spectrum-sans: "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --kite-font-family-monospace: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; --kite-font-family-rutledge: Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /** @deprecated: Spectrum Sans is the default font */ --kite-font-size-base: 16; --kite-font-size-px: 16px; --kite-font-size-rem: 1rem; --kite-font-style-normal: normal; --kite-font-style-italic: italic; --kite-font-weight-light: 300; --kite-font-weight-book: 350; --kite-font-weight-regular: 400; --kite-font-weight-medium: 500; --kite-font-weight-semi-bold: 600; /** @deprecated: Replace with 'font-weight-bold' token */ --kite-font-weight-bold: 700; --kite-font-weight-extra-bold: 800; --kite-font-weight-normal: 400; /** @deprecated: Rutledge font is deprecated. Use the 'font-weight-regular' token with Spectrum Sans font. */ --kite-letter-spacing-normal: normal; --kite-letter-spacing-sm: -0.0625rem; --kite-tracking-sm: -0.0625rem; /** @deprecated: Replace with 'letter-spacing-sm' token */ --kite-tracking-normal: normal; /** @deprecated: Replace with 'letter-spacing-normal' token */ --kite-tracking-md: normal; /** @deprecated: Replace with 'letter-spacing-normal' token */ --kite-size-1: 0.0625rem; --kite-size-2: 0.125rem; --kite-size-4: 0.25rem; --kite-size-8: 0.5rem; --kite-size-12: 0.75rem; --kite-size-14: 0.875rem; --kite-size-16: 1rem; --kite-size-20: 1.25rem; --kite-size-24: 1.5rem; --kite-size-32: 2rem; --kite-size-40: 2.5rem; --kite-size-48: 3rem; --kite-size-percent-50: 50%; --kite-size-radius-pill: 624.9375rem; --kite-size-touch-target: 2.75rem; /** Tap target size for elements that rely on height or line-height */ --kite-focus-ring-inset: -0.125rem; /** Default inset for an 'inner' focus ring in some focused UI elements */ --kite-motion-duration-fast: 300ms; /** @deprecated: Replace with "motion-fast" token */ --kite-motion-duration-faster: 225ms; /** @deprecated: Replace with "motion-faster" token */ --kite-motion-duration-fastest: 195ms; /** @deprecated: Replace with "motion-fastest" token */ --kite-motion-curve-default: cubic-bezier(0.4, 0, 0.2, 1); /** @deprecated: Replace with "motion-standard" token */ --kite-motion-curve-deceleration: cubic-bezier(0, 0, 0.2, 1); /** @deprecated: Replace with "motion-entry" token */ --kite-motion-curve-acceleration: cubic-bezier(0.4, 0, 1, 1); /** @deprecated: Replace with "motion-exit" token */ --kite-motion-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1); /** @deprecated: Replace with "motion-exit" token, or custom curve: cubic-bezier(0.4, 0, 0.6, 1) */ --kite-layout-sm: 4rem; --kite-layout-md: 6rem; --kite-layout-lg: 8rem; --kite-layout-xl: 10rem; --kite-layout-2xl: 12rem; --kite-spacing-section-sm: 4rem; /** @deprecated: Replace with 'layout-sm' token */ --kite-spacing-section-md: 5rem; /** @deprecated: Replace with 'layout-md' token */ --kite-spacing-section-lg: 6.25rem; /** @deprecated: Replace with 'layout-md' token */ --kite-spacing-section-xl: 7.5rem; /** @deprecated: Replace with 'layout-lg' token */ --kite-my-component-margin-top: 0; --kite-my-component-margin-right: 0; --kite-my-component-margin-bottom: 0; --kite-my-component-margin-left: 0; --kite-my-component-disabled-cursor: not-allowed; --kite-my-component-cursor: pointer; --kite-my-component-my-deprecated-token-name: "deprecatedValue"; /** @deprecated: Replace with 'new-token-name' token */ --kite-breakpoint-xs-min: 0; --kite-breakpoint-xs-max: 479px; --kite-breakpoint-sm-min: 480px; --kite-breakpoint-sm-max: 599px; --kite-breakpoint-md-min: 600px; --kite-breakpoint-md-max: 839px; --kite-breakpoint-lg-min: 840px; --kite-breakpoint-lg-max: 959px; --kite-breakpoint-xl-min: 960px; --kite-breakpoint-xl-max: 1279px; --kite-breakpoint-2xl-min: 1280px; --kite-zindex-deepdive: -99999; --kite-zindex-default: 1; --kite-zindex-sticky: 1000; /** Stickied elements, like headers */ --kite-zindex-dropdown: 1100; --kite-zindex-dialog-backdrop: 1200; --kite-zindex-dialog: 1300; --kite-zindex-notification: 1600; --kite-zindex-moonshot: 99999; --kite-cursor-action: pointer; --kite-cursor-disabled: not-allowed; /** Cursor used for disabled UI elements */ --kite-elevation-0: none; --kite-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.1); --kite-elevation-2: 0 2px 8px 0 rgba(0, 0, 0, 0.1); --kite-elevation-3: 0 3px 12px 0 rgba(0, 0, 0, 0.1); --kite-elevation-4: 0 24px 24px 0 rgba(0, 0, 0, 0.1); --kite-form-control-text-line-height: 1.25; --kite-form-control-text-overflow: clip; --kite-form-control-border-radius: 0; --kite-form-control-margin-top: 0; --kite-form-control-margin-right: 0; --kite-form-control-margin-bottom: 0; --kite-form-control-margin-left: 0; --kite-form-control-max-width: 18rem; --kite-form-control-addon-padding-top: 0; --kite-form-control-addon-padding-bottom: 0; --kite-form-control-helper-text-size: 0.75rem; --kite-form-control-helper-text-line-height: 1.333; --kite-form-control-picker-transition-target-property: opacity; --kite-form-control-picker-min-width: 18rem; --kite-form-control-picker-backdrop-opacity: 0.8; --kite-form-control-picker-list-item-padding-top: 0.625rem; --kite-form-control-picker-list-item-padding-bottom: 0.625rem; --kite-form-control-picker-list-item-padding-left: 0; --kite-form-control-input-max-width: 18rem; /** @deprecated: Replace with "form-control-max-width" token */ --kite-grid-xs-columns: 4; --kite-grid-sm-columns: 4; --kite-grid-md-columns: 4; --kite-grid-lg-columns: 12; --kite-grid-xl-columns: 12; --kite-grid-2xl-columns: 12; --kite-grid-xxl-columns: 12; /** @deprecated: Replace with "grid-2xl-columns" token */ --kite-typography-sm-display-size: 3rem; --kite-typography-sm-display-line-height: 1.25; --kite-typography-sm-title-1-size: 2.625rem; --kite-typography-sm-title-1-line-height: 1.238; --kite-typography-sm-title-2-size: 2rem; --kite-typography-sm-title-2-line-height: 1.25; --kite-typography-sm-title-3-size: 1.75rem; --kite-typography-sm-title-3-line-height: 1.286; --kite-typography-sm-title-4-size: 1.5rem; --kite-typography-sm-title-4-line-height: 1.333; --kite-typography-sm-title-5-size: 1.25rem; --kite-typography-sm-title-5-line-height: 1.4; --kite-typography-sm-title-6-size: 1.125rem; --kite-typography-sm-title-6-line-height: 1.333; --kite-typography-sm-body-display-size: 1.25rem; --kite-typography-sm-body-display-line-height: 1.6; --kite-typography-sm-body-size: 1rem; --kite-typography-sm-body-line-height: 1.5; --kite-typography-sm-eyebrow-size: 0.875rem; --kite-typography-sm-eyebrow-line-height: 1.429; --kite-typography-sm-eyebrow-text-transform: uppercase; --kite-typography-sm-caption-1-size: 0.875rem; --kite-typography-sm-caption-1-line-height: 1.429; --kite-typography-sm-caption-2-size: 0.75rem; --kite-typography-sm-caption-2-line-height: 1.333; --kite-typography-lg-display-size: 4rem; --kite-typography-lg-display-line-height: 1.125; --kite-typography-lg-title-1-size: 3rem; --kite-typography-lg-title-1-line-height: 1.167; --kite-typography-lg-title-2-size: 2.625rem; --kite-typography-lg-title-2-line-height: 1.238; --kite-typography-lg-title-3-size: 2.25rem; --kite-typography-lg-title-3-line-height: 1.111; --kite-typography-lg-title-4-size: 1.75rem; --kite-typography-lg-title-4-line-height: 1.286; --kite-typography-lg-title-5-size: 1.5rem; --kite-typography-lg-title-5-line-height: 1.333; --kite-typography-lg-title-6-size: 1.25rem; --kite-typography-lg-title-6-line-height: 1.4; --kite-typography-lg-body-display-size: 1.25rem; --kite-typography-lg-body-display-line-height: 1.6; --kite-typography-lg-body-size: 1rem; --kite-typography-lg-body-line-height: 1.5; --kite-typography-lg-eyebrow-size: 1rem; --kite-typography-lg-eyebrow-line-height: 1.5; --kite-typography-lg-eyebrow-text-transform: uppercase; --kite-typography-lg-caption-1-size: 0.875rem; --kite-typography-lg-caption-1-line-height: 1.429; --kite-typography-lg-caption-2-size: 0.75rem; --kite-typography-lg-caption-2-line-height: 1.333; --kite-typography-sm-caption-size: 0.875rem; /** @deprecated: Replace with 'typography-sm-caption-1-size' token */ --kite-typography-sm-caption-line-height: 1.429; /** @deprecated: Replace with 'typography-sm-caption-1-line-height' token */ --kite-typography-lg-caption-size: 0.875rem; /** @deprecated: Replace with 'typography-lg-caption-1-size' token */ --kite-typography-lg-caption-line-height: 1.429; /** @deprecated: Replace with 'typography-lg-caption-1-line-height' token */ --kite-typography-rutledge-sm-display-size: 3rem; --kite-typography-rutledge-sm-display-line-height: 1.25; --kite-typography-rutledge-sm-title-1-size: 2.5rem; --kite-typography-rutledge-sm-title-1-line-height: 1.3; --kite-typography-rutledge-sm-title-2-size: 2.25rem; --kite-typography-rutledge-sm-title-2-line-height: 1.222; --kite-typography-rutledge-sm-title-3-size: 2rem; --kite-typography-rutledge-sm-title-3-line-height: 1.25; --kite-typography-rutledge-sm-title-4-size: 1.75rem; --kite-typography-rutledge-sm-title-4-line-height: 1.286; --kite-typography-rutledge-sm-title-5-size: 1.5rem; --kite-typography-rutledge-sm-title-5-line-height: 1.25; --kite-typography-rutledge-sm-title-6-size: 1.25rem; --kite-typography-rutledge-sm-title-6-line-height: 1.3; --kite-typography-rutledge-sm-body-display-size: 1.25rem; --kite-typography-rutledge-sm-body-display-line-height: 1.3; --kite-typography-rutledge-sm-body-size: 1rem; --kite-typography-rutledge-sm-body-line-height: 1.5; --kite-typography-rutledge-sm-eyebrow-size: 0.875rem; --kite-typography-rutledge-sm-eyebrow-style: uppercase; --kite-typography-rutledge-sm-eyebrow-line-height: 1.571; --kite-typography-rutledge-sm-caption-size: 0.875rem; --kite-typography-rutledge-sm-caption-line-height: 1.571; --kite-typography-rutledge-lg-display-size: 4rem; --kite-typography-rutledge-lg-display-line-height: 1.125; --kite-typography-rutledge-lg-title-1-size: 3rem; --kite-typography-rutledge-lg-title-1-line-height: 1.25; --kite-typography-rutledge-lg-title-2-size: 2.5rem; --kite-typography-rutledge-lg-title-2-line-height: 1.25; --kite-typography-rutledge-lg-title-3-size: 2.25rem; --kite-typography-rutledge-lg-title-3-line-height: 1.222; --kite-typography-rutledge-lg-title-4-size: 2rem; --kite-typography-rutledge-lg-title-4-line-height: 1.25; --kite-typography-rutledge-lg-title-5-size: 1.5rem; --kite-typography-rutledge-lg-title-5-line-height: 1.25; --kite-typography-rutledge-lg-title-6-size: 1.25rem; --kite-typography-rutledge-lg-title-6-line-height: 1.3; --kite-typography-rutledge-lg-body-display-size: 1.25rem; --kite-typography-rutledge-lg-body-display-line-height: 1.3; --kite-typography-rutledge-lg-body-size: 1rem; --kite-typography-rutledge-lg-body-line-height: 1.5; --kite-typography-rutledge-lg-eyebrow-size: 1rem; --kite-typography-rutledge-lg-eyebrow-style: uppercase; --kite-typography-rutledge-lg-eyebrow-line-height: 1.5; --kite-typography-rutledge-lg-caption-size: 0.875rem; --kite-typography-rutledge-lg-caption-line-height: 1.429; --kite-typography-rutledge-xxs-title-1-size: 1.3125rem; --kite-typography-rutledge-xxs-title-1-line-height: 1.333; --kite-typography-rutledge-xxs-title-2-size: 1.125rem; --kite-typography-rutledge-xxs-title-2-line-height: 1.5; --kite-typography-rutledge-xxs-title-3-size: 1rem; --kite-typography-rutledge-xxs-title-3-line-height: 1.5; --kite-typography-rutledge-xxs-title-4-size: 0.875rem; --kite-typography-rutledge-xxs-title-4-line-height: 1.5; --kite-typography-rutledge-xxs-title-5-size: 0.875rem; --kite-typography-rutledge-xxs-title-5-line-height: 1.5; --kite-typography-rutledge-xxs-body-size: 0.875rem; --kite-typography-rutledge-xxs-body-line-height: 1.5; --kite-typography-rutledge-xxs-eyebrow-size: 0.8125rem; --kite-typography-rutledge-xxs-eyebrow-style: uppercase; --kite-typography-rutledge-xxs-eyebrow-line-height: 1.538; --kite-typography-rutledge-xxs-caption-size: 0.75rem; --kite-typography-rutledge-xxs-caption-line-height: 1.5; --kite-typography-rutledge-xs-title-1-size: 1.4375rem; --kite-typography-rutledge-xs-title-1-line-height: 1.304; --kite-typography-rutledge-xs-title-2-size: 1.1875rem; --kite-typography-rutledge-xs-title-2-line-height: 1.421; --kite-typography-rutledge-xs-title-3-size: 1.0625rem; --kite-typography-rutledge-xs-title-3-line-height: 1.471; --kite-typography-rutledge-xs-title-4-size: 0.9375rem; --kite-typography-rutledge-xs-title-4-line-height: 1.533; --kite-typography-rutledge-xs-title-5-size: 0.9375rem; --kite-typography-rutledge-xs-title-5-line-height: 1.533; --kite-typography-rutledge-xs-body-size: 0.9375rem; --kite-typography-rutledge-xs-body-line-height: 1.533; --kite-typography-rutledge-xs-eyebrow-size: 0.8125rem; --kite-typography-rutledge-xs-eyebrow-style: uppercase; --kite-typography-rutledge-xs-eyebrow-line-height: 1.538; --kite-typography-rutledge-xs-caption-size: 0.75rem; --kite-typography-rutledge-xs-caption-line-height: 1.5; --kite-typography-rutledge-md-title-1-size: 2.25rem; --kite-typography-rutledge-md-title-1-line-height: 1.25; --kite-typography-rutledge-md-title-2-size: 1.75rem; --kite-typography-rutledge-md-title-2-line-height: 1.286; --kite-typography-rutledge-md-title-3-size: 1.5rem; --kite-typography-rutledge-md-title-3-line-height: 1.292; --kite-typography-rutledge-md-title-4-size: 1.25rem; --kite-typography-rutledge-md-title-4-line-height: 1.05; --kite-typography-rutledge-md-title-5-size: 1rem; --kite-typography-rutledge-md-title-5-line-height: 1.5; --kite-typography-rutledge-md-body-size: 1rem; --kite-typography-rutledge-md-body-line-height: 1.5; --kite-typography-rutledge-md-eyebrow-size: 0.875rem; --kite-typography-rutledge-md-eyebrow-style: uppercase; --kite-typography-rutledge-md-eyebrow-line-height: 1.5; --kite-typography-rutledge-md-caption-size: 0.75rem; --kite-typography-rutledge-md-caption-line-height: 1.75; --kite-typography-rutledge-xl-title-1-size: 3.5rem; --kite-typography-rutledge-xl-title-1-line-height: 1.393; --kite-typography-rutledge-xl-title-2-size: 2.625rem; --kite-typography-rutledge-xl-title-2-line-height: 1.429; --kite-typography-rutledge-xl-title-3-size: 2.25rem; --kite-typography-rutledge-xl-title-3-line-height: 1.056; --kite-typography-rutledge-xl-title-4-size: 1.75rem; --kite-typography-rutledge-xl-title-4-line-height: 0.964; --kite-typography-rutledge-xl-title-5-size: 1.5rem; --kite-typography-rutledge-xl-title-5-line-height: 1; --kite-typography-rutledge-xl-body-size: 1.5rem; --kite-typography-rutledge-xl-body-line-height: 1.333; --kite-typography-rutledge-xl-eyebrow-size: 1.375rem; --kite-typography-rutledge-xl-eyebrow-style: uppercase; --kite-typography-rutledge-xl-eyebrow-line-height: 1.091; --kite-typography-rutledge-xl-caption-size: 1.25rem; --kite-typography-rutledge-xl-caption-line-height: 1.2; --kite-accordion-background-color: rgba(0, 0, 0, 0); --kite-accordion-border-radius: 0; --kite-accordion-margin-top: 0; --kite-accordion-margin-right: 0; --kite-accordion-margin-bottom: 0; --kite-accordion-margin-left: 0; --kite-accordion-trigger-width: 100%; --kite-accordion-expanded-padding-top: 0; --kite-accordion-hover-background-opacity: 0.02; /** @deprecated: Replace with "accordion-hover-background-color" token */ --kite-accordion-hover-background-opacity-dark: 0.05; /** @deprecated: Replace with "accordion-hover-background" token */ --kite-alert-margin-top: 0; --kite-alert-margin-right: 0; --kite-alert-margin-bottom: 0; --kite-alert-margin-left: 0; --kite-alert-text-align: left; --kite-alert-border-left-style: solid; --kite-alert-dismiss-icon-margin-right: 0; --kite-alert-passive-margin-top: 0; --kite-alert-passive-min-width: 17.5rem; --kite-alert-passive-breakpoint-lg-margin-bottom: 0; --kite-alert-passive-breakpoint-lg-margin-left: 0; --kite-alert-passive-breakpoint-lg-max-width: 31.25rem; --kite-alert-passive-breakpoint-lg-offset-x: 0; --kite-alert-passive-breakpoint-lg-offset-y: 0; --kite-alert-passive-offset-x: 0; --kite-alert-passive-offset-y: 0; --kite-alert-passive-timeout: 0; --kite-alert-page-border-style: solid; /** @deprecated: Replace with "alert-border-style" token */ --kite-alert-page-border-left-style: solid; /** @deprecated: Replace with "alert-border-left-style" token */ --kite-badge-border-color: rgba(0, 0, 0, 0); --kite-badge-margin-top: 0; --kite-badge-margin-bottom: 0; --kite-blockquote-background-color: rgba(0, 0, 0, 0); --kite-blockquote-border-color: rgba(0, 0, 0, 0); --kite-blockquote-border-radius: 0; --kite-blockquote-border-width: 0; --kite-blockquote-cite-punctuation: "— "; --kite-blockquote-cite-text-size: 80%; --kite-button-text-align: left; --kite-button-text-line-height: 1.5; --kite-button-border-color: rgba(0, 0, 0, 0); --kite-button-margin-top: 0; --kite-button-margin-right: 0; --kite-button-margin-bottom: 0; --kite-button-margin-left: 0; --kite-button-padding-top: 0.625rem; --kite-button-padding-bottom: 0.625rem; --kite-button-width: 100%; --kite-button-secondary-background-color: rgba(0, 0, 0, 0); --kite-button-borderless-background-color: rgba(0, 0, 0, 0); --kite-button-shrinkwrap-width: auto; --kite-button-shrinkwrap-min-width-sm: 5.625rem; --kite-button-shrinkwrap-min-width-md: 8.125rem; --kite-button-shrinkwrap-min-width-lg: 13.125rem; --kite-button-shrinkwrap-min-width-xl: 18rem; --kite-button-primary-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-border-color' token */ --kite-button-primary-active-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-press-border-color' token */ --kite-button-primary-disabled-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-disabled-border-color' token */ --kite-button-primary-focus-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-focus-border-color' token */ --kite-button-primary-hover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-primary-hover-border-color' token */ --kite-button-secondary-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-background-color' token */ --kite-button-secondary-active-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-press-border-color' token */ --kite-button-secondary-disabled-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-disabled-background-color' token */ --kite-button-secondary-focus-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-focus-border-color' token */ --kite-button-secondary-hover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-secondary-hover-border-color' token */ --kite-button-borderless-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-background-color' token */ --kite-button-borderless-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-border-color' token */ --kite-button-borderless-active-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-press-background-color' token */ --kite-button-borderless-active-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-press-border-color' token */ --kite-button-borderless-disabled-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-disabled-background-color' token */ --kite-button-borderless-disabled-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-disabled-border-color' token */ --kite-button-borderless-focus-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-focus-background-color' token */ --kite-button-borderless-focus-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-focus-border-color' token */ --kite-button-borderless-hover-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-hover-background-color' token */ --kite-button-borderless-hover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'button-borderless-hover-border-color' token */ --kite-calendar-margin-top: 0; --kite-calendar-margin-right: 0; --kite-calendar-margin-bottom: 0; --kite-calendar-margin-left: 0; --kite-calendar-day-text-align: center; --kite-calendar-day-due-text-size: 0.625rem; --kite-calendar-day-due-text-line-height: 1.3; --kite-calendar-day-due-text-transform: uppercase; --kite-calendar-day-due-offset: 0.3125rem; --kite-calendar-feedback-padding-bottom: 0; --kite-calendar-month-year-margin-right: 0; --kite-calendar-month-year-margin-left: 0; --kite-calendar-standalone-padding-top: 0; --kite-calendar-standalone-padding-right: 0; --kite-calendar-standalone-padding-left: 0; --kite-calendar-standalone-min-width: 18rem; --kite-calendar-standalone-min-height: 18.625rem; --kite-calendar-day-disabled-text-decoration-line: line-through; /** @deprecated: Replace with 'calendar-day-unavailable-text-decoration-line' token */ --kite-card-margin-top: 0; --kite-card-margin-right: 0; --kite-card-margin-bottom: 0; --kite-card-margin-left: 0; --kite-checkbox-background-color: rgba(0, 0, 0, 0); --kite-checkbox-margin-top: 0; --kite-checkbox-margin-right: 0; --kite-checkbox-margin-left: 0; --kite-checkbox-hover-background: rgba(0, 0, 0, 0); --kite-checkbox-label-margin-bottom: 0; --kite-checkbox-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "checkbox-background-color" token */ --kite-chip-margin-top: 0; --kite-chip-margin-left: 0; --kite-chip-focus-ring-offset: 0.375rem; --kite-chip-selected-padding-right: 1.1875rem; --kite-chip-selected-padding-left: 1.1875rem; --kite-chip-icon-width: 1.125rem; --kite-chip-icon-height: 1.125rem; --kite-chip-multiline-height: auto; --kite-combobox-margin-top: 0; --kite-combobox-margin-right: 0; --kite-combobox-margin-bottom: 0; --kite-combobox-margin-left: 0; --kite-combobox-picker-offset-x: 0; --kite-data-table-text-align: left; --kite-data-table-text-line-height: 1.571; --kite-data-table-border-radius: 0; --kite-data-table-margin-top: 0; --kite-data-table-margin-right: 0; --kite-data-table-margin-bottom: 0; --kite-data-table-margin-left: 0; --kite-data-table-scroll-shadow: inset -14px 0 10px -14px rgba(0, 0, 0, 0.2); --kite-data-table-scroll-shadow-width: 5px; --kite-data-table-menu-cell-padding-right: 0; --kite-data-table-menu-cell-padding-left: 0; --kite-data-table-menu-column-padding-top: 0; --kite-data-table-menu-column-padding-right: 0; --kite-data-table-menu-column-padding-bottom: 0; --kite-data-table-menu-column-padding-left: 0; --kite-data-table-menu-column-width: 2.75rem; --kite-data-table-title-row-border-bottom-style: solid; /** @deprecated: Replace with "data-table-header-border-bottom-style" token */ --kite-date-input-margin-top: 0; --kite-date-input-margin-right: 0; --kite-date-input-margin-bottom: 0; --kite-date-input-margin-left: 0; --kite-date-input-picker-padding-top: 0; --kite-date-input-label-height: 1.5rem; --kite-dialog-text-align: left; --kite-dialog-text-line-height: 1.625; --kite-dialog-border-radius: 0; --kite-dialog-margin-top: 0; --kite-dialog-margin-right: 0; --kite-dialog-margin-bottom: 0; --kite-dialog-margin-left: 0; --kite-dialog-max-width: 42.5rem; /** 6 of 12 columns */ --kite-dialog-breakpoint-md-width: 75%; /** 3 of 4 columns */ --kite-dialog-breakpoint-md-max-height: 72%; --kite-dialog-breakpoint-lg-width: 66.66%; /** 8 of 12 columns */ --kite-dialog-breakpoint-lg-max-height: 72%; --kite-dialog-breakpoint-xl-width: 66.66%; /** 8 of 12 columns */ --kite-dialog-breakpoint-xl-max-height: 84%; --kite-dialog-breakpoint-2xl-width: 50%; /** 6 of 12 columns */ --kite-dialog-breakpoint-2xl-max-height: 84%; --kite-dialog-position-x: center; --kite-dialog-position-y: center; --kite-dialog-transition-duration: 0; --kite-dialog-overlay-opacity: 0.8; --kite-dialog-content-padding-top: 0; --kite-dialog-button-min-width: 15.25rem; --kite-dialog-full-size-width: 100%; /** @deprecated: Replace with "dialog-width" token */ --kite-dialog-full-size-height: 100%; /** @deprecated: Replace with "dialog-height" token */ --kite-dialog-default-size-md-max-height: 72%; /** @deprecated: Replace with "dialog-breakpoint-md-max-height" token */ --kite-dialog-default-size-lg-max-height: 72%; /** @deprecated: Replace with "dialog-breakpoint-lg-max-height" token */ --kite-dialog-default-size-xl-max-height: 84%; /** @deprecated: Replace with "dialog-breakpoint-xl-max-height" token */ --kite-dialog-default-size-xxl-max-height: 84%; /** @deprecated: Replace with "dialog-breakpoint-2xl-max-height" token */ --kite-dropdown-text-overflow: ellipsis; --kite-dropdown-margin-top: 0; --kite-dropdown-margin-right: 0; --kite-dropdown-margin-left: 0; --kite-dropdown-list-min-width: 10.5rem; --kite-dropdown-list-activated-opacity: 1; --kite-dropdown-list-opacity: 0; --kite-dropdown-list-transition-target-property: opacity; --kite-dropdown-list-item-padding-left: 0; --kite-dropdown-inline-background-color: rgba(0, 0, 0, 0); --kite-dropdown-inline-border-color: rgba(0, 0, 0, 0); --kite-dropdown-inline-margin-top: 0; --kite-dropdown-inline-margin-right: 0; --kite-dropdown-inline-margin-bottom: 0; --kite-dropdown-inline-margin-left: 0; --kite-dropdown-inline-padding-top: 0; --kite-dropdown-inline-padding-right: 0; --kite-dropdown-inline-padding-bottom: 0; --kite-dropdown-inline-padding-left: 0; --kite-dropdown-inline-disabled-background-color: rgba(0, 0, 0, 0); --kite-dropdown-list-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with "dropdown-list-elevation" token */ --kite-dropdown-list-hidden-opacity: 0; /** @deprecated: Replace with "dropdown-list-opacity" token */ --kite-dropdown-list-visible-opacity: 1; /** @deprecated: Replace with "dropdown-list-activated-opacity" token */ --kite-dropdown-inline-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dropdown-inline-background-color" token */ --kite-dropdown-inline-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dropdown-inline-border-color" token */ --kite-dynamic-hint-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dynamic-hint-border-color" token */ --kite-dynamic-hint-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with "dynamic-hint-elevation" token */ --kite-dynamic-hint-arrow-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with "dynamic-hint-arrow-border-color" token */ --kite-interactive-list-background-color: rgba(0, 0, 0, 0); /** @deprecated: Replace with "list-background-color" token */ --kite-interactive-list-border-radius: 0; /** @deprecated: Replace with "list-border-radius" token */ --kite-interactive-list-margin-top: 0; /** @deprecated: Replace with "list-margin-top" token */ --kite-interactive-list-margin-right: 0; /** @deprecated: Replace with "list-margin-right" token */ --kite-interactive-list-margin-bottom: 0; /** @deprecated: Replace with "list-margin-bottom" token */ --kite-interactive-list-margin-left: 0; /** @deprecated: Replace with "list-margin-left" token */ --kite-interactive-list-padding-top: 0; /** @deprecated: Replace with "list-padding-top" token */ --kite-interactive-list-padding-right: 0; /** @deprecated: Replace with "list-padding-right" token */ --kite-interactive-list-padding-bottom: 0; /** @deprecated: Replace with "list-padding-bottom" token */ --kite-interactive-list-padding-left: 0; /** @deprecated: Replace with "list-padding-left" token */ --kite-interactive-list-item-background-color: rgba(0, 0, 0, 0); /** @deprecated: Replace with "list-item-background-color" token */ --kite-interactive-list-item-margin-top: 0; /** @deprecated: Replace with "list-item-margin-top" token */ --kite-interactive-list-item-margin-right: 0; /** @deprecated: Replace with "list-item-margin-right" token */ --kite-interactive-list-item-margin-bottom: 0; /** @deprecated: Replace with "list-item-margin-bottom" token */ --kite-interactive-list-item-margin-left: 0; /** @deprecated: Replace with "list-item-margin-left" token */ --kite-interactive-list-item-title-text-line-height: 1.2; /** @deprecated: Replace with "list-item-title-text-line-height" token */ --kite-interactive-list-item-breakpoint-md-title-text-line-height: 1.2; /** @deprecated: Replace with "list-item-breakpoint-md-title-line-height" token */ --kite-interactive-list-image-max-width: 5rem; /** @deprecated: Replace with "list-image-max-width" token */ --kite-interactive-list-image-max-height: 5rem; /** @deprecated: Replace with "list-image-max-height" token */ --kite-interactive-list-start-max-width: 5rem; /** @deprecated: Replace with "list-start-max-width" token */ --kite-interactive-list-item-hover-background-color-dark: 255, 255, 255; /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-interactive-list-item-hover-background-opacity-dark: 0.05; /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-interactive-list-md-padding-top: 0; /** @deprecated: Replace with "list-item-padding-top-sm" token */ --kite-interactive-list-md-padding-bottom: 0; /** @deprecated: Replace with "list-item-padding-bottom-sm" token */ --kite-interactive-list-xl-padding-top: 0; /** @deprecated: Replace with "list-item-padding-top-md" token */ --kite-interactive-list-xl-padding-bottom: 0; /** @deprecated: Replace with "list-item-padding-bottom-md" token */ --kite-interactive-list-xxl-padding-top: 0; /** @deprecated: Replace with "list-item-padding-top-lg" token */ --kite-interactive-list-xxl-padding-bottom: 0; /** @deprecated: Replace with "list-item-padding-bottom-lg" token */ --kite-interactive-list-item-hover-background-opacity: 0.02; /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-link-background-color: rgba(0, 0, 0, 0); --kite-link-text-decoration-line: underline; --kite-link-border-radius: 0; --kite-link-border-width: 0; --kite-link-margin-top: 0; --kite-link-margin-right: 0; --kite-link-margin-bottom: 0; --kite-link-margin-left: 0; --kite-link-padding-top: 0; --kite-link-padding-right: 0; --kite-link-padding-bottom: 0; --kite-link-padding-left: 0; --kite-link-standalone-text-decoration-line: none; --kite-link-standalone-hover-text-decoration: underline; --kite-link-standalone-press-text-decoration: underline; --kite-list-background-color: rgba(0, 0, 0, 0); --kite-list-border-radius: 0; --kite-list-margin-top: 0; --kite-list-margin-right: 0; --kite-list-margin-bottom: 0; --kite-list-margin-left: 0; --kite-list-padding-top: 0; --kite-list-padding-right: 0; --kite-list-padding-bottom: 0; --kite-list-padding-left: 0; --kite-list-item-background-color: rgba(0, 0, 0, 0); --kite-list-item-margin-top: 0; --kite-list-item-margin-right: 0; --kite-list-item-margin-bottom: 0; --kite-list-item-margin-left: 0; --kite-list-item-image-md-max-width: 3.75rem; --kite-list-item-image-md-max-height: 3.75rem; --kite-list-item-image-lg-max-width: 5rem; --kite-list-item-image-lg-max-height: 5rem; --kite-list-item-payment-logo-border-radius: 0; --kite-list-item-payment-logo-margin-top: 0; --kite-list-item-expandable-content-padding-top: 0; --kite-list-item-breakpoint-md-title-text-line-height: 1.2; --kite-list-item-payment-logo-margin: 0; /** @deprecated: Replace with 'list-item-payment-logo-margin-top' token */ --kite-list-start-max-width: 5rem; /** @deprecated: Replace with 'list-item-slot-start-max-width' token */ --kite-menu-list-min-width: 10.5rem; --kite-menu-list-activated-opacity: 1; --kite-menu-list-opacity: 0; --kite-menu-list-transition-target-property: opacity; --kite-menu-list-item-padding-top: 0.625rem; --kite-menu-list-item-padding-bottom: 0.625rem; --kite-menu-trigger-background-color: rgba(0, 0, 0, 0); --kite-menu-trigger-disabled-background-color: rgba(0, 0, 0, 0); --kite-menu-contextual-label-trigger-padding-top: 0.625rem; --kite-menu-contextual-label-trigger-padding-bottom: 0.625rem; --kite-menu-list-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with "menu-list-elevation" token */ --kite-menu-list-hidden-opacity: 0; /** @deprecated: Replace with "menu-list-opacity" token */ --kite-menu-list-visible-opacity: 1; /** @deprecated: Replace with "menu-list-activated-opacity" token */ --kite-menu-list-transition-curve: cubic-bezier(0.25, 0.8, 0.5, 1); /** @deprecated: Replace with 'menu-list-transition-timing-function' token */ --kite-meter-circular-width: 5.5rem; --kite-meter-circular-width-px: 88px; --kite-meter-circular-track-height-px: 8px; --kite-meter-circular-sm-width-px: 24px; --kite-meter-circular-sm-track-height: 0.125rem; --kite-meter-circular-sm-track-height-px: 2px; --kite-meter-circular-sm-tick-width: 0.125rem; --kite-meter-circular-sm-icon-margin: 0.375rem; --kite-meter-circular-lg-width: 9.25rem; --kite-meter-circular-lg-width-px: 148px; --kite-meter-linear-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-label-text-size' token */ --kite-meter-linear-value-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-value-label-text-size' token */ --kite-meter-linear-small-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-sm-label-text-size' token */ --kite-meter-linear-small-value-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-sm-value-label-text-size' token */ --kite-meter-linear-large-label-text-size: 1rem; /** @deprecated: Replace with 'meter-lg-label-text-size' token */ --kite-meter-linear-large-value-label-text-size: 1rem; /** @deprecated: Replace with 'meter-lg-value-label-text-size' token */ --kite-meter-circular-small-height: 5.5rem; /** @deprecated: Replace with 'meter-circular-sm-height' token */ --kite-meter-circular-small-width: 5.5rem; /** @deprecated: Replace with 'meter-circular-sm-width' token */ --kite-meter-circular-small-status-icon-margin: 0.375rem; /** @deprecated: Replace with 'meter-circular-sm-icon-margin' token */ --kite-meter-circular-small-track-height: 0.125rem; /** @deprecated: Replace with 'meter-circular-sm-track-height' token */ --kite-meter-circular-small-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-circular-sm-label-text-size' token */ --kite-meter-circular-large-height: 9.25rem; /** @deprecated: Replace with 'meter-circular-lg-height' token */ --kite-meter-circular-large-width: 9.25rem; /** @deprecated: Replace with 'meter-circular-lg-width' token */ --kite-meter-circular-large-label-text-size: 0.875rem; /** @deprecated: Replace with 'meter-circular-lg-label-text-size' token */ --kite-pagination-controls-margin-top: 0; --kite-pagination-controls-breakpoint-lg-margin-bottom: 0; --kite-pagination-controls-button-background-color: rgba(0, 0, 0, 0); --kite-pagination-controls-button-border-radius: 0; --kite-pagination-controls-button-width: 4rem; --kite-pagination-controls-button-height: 3.25rem; --kite-pagination-page-select-current-label-padding-top: 0.625rem; --kite-pagination-page-select-current-label-padding-right: 0.625rem; --kite-pagination-page-select-current-label-padding-bottom: 0.625rem; --kite-pagination-page-select-current-label-padding-left: 0.625rem; --kite-pagination-dropdown-margin-top: 0; --kite-pagination-dropdown-margin-bottom: 0; --kite-pagination-controls-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'pagination-controls-background-color' token */ --kite-pagination-controls-button-background-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'pagination-controls-button-background-color' token */ --kite-pagination-controls-button-previous-border-radius: 0; /** @deprecated: Replace with 'pagination-controls-button-border-radius' token */ --kite-payment-logo-border-color: rgba(0, 0, 0, 0); --kite-payment-logo-margin-top: 0; --kite-payment-logo-margin-right: 0; --kite-payment-logo-margin-bottom: 0; --kite-payment-logo-margin-left: 0; --kite-payment-logo-padding-top: 0; --kite-payment-logo-padding-right: 0; --kite-payment-logo-padding-bottom: 0; --kite-payment-logo-padding-left: 0; --kite-popover-text-align: left; --kite-popover-max-width: 100%; --kite-popover-max-height: 37.5rem; --kite-popover-trigger-margin-top: 0; --kite-popover-trigger-margin-right: 0; --kite-popover-trigger-margin-bottom: 0; --kite-popover-trigger-focus-ring-offset: 0.0625rem; --kite-popover-dismiss-icon-margin-top: 0; --kite-popover-dismiss-icon-margin-right: 0; --kite-popover-dismiss-icon-margin-left: 0; --kite-popover-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'popover-border-color' token */ --kite-popover-elevation-dark: 0 2px 8px 0 rgba(0, 0, 0, 0.5); /** @deprecated: Replace with 'popover-elevation' token */ --kite-popover-arrow-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'popover-arrow-border-color' token */ --kite-progress-indicator-background-color: rgba(0, 0, 0, 0); --kite-progress-indicator-border-color: rgba(0, 0, 0, 0); --kite-progress-indicator-border-radius: 0; --kite-progress-indicator-margin-top: 0; --kite-progress-indicator-margin-right: 0; --kite-progress-indicator-margin-bottom: 0; --kite-progress-indicator-margin-left: 0; --kite-progress-indicator-padding-top: 0; --kite-progress-indicator-padding-right: 0; --kite-progress-indicator-padding-bottom: 0; --kite-progress-indicator-padding-left: 0; --kite-progress-indicator-transition-delay: 500ms; --kite-progress-indicator-label-text-align: left; --kite-progress-indicator-track-size-px: 4px; --kite-progress-indicator-backdrop-opacity: 0.95; --kite-progress-indicator-circular-width: 2.5rem; --kite-progress-indicator-circular-width-px: 40px; --kite-progress-indicator-circular-track-color: rgba(0, 0, 0, 0); --kite-progress-indicator-circular-label-text-line-height: 1.4; --kite-progress-indicator-circular-label-text-align: center; --kite-progress-indicator-circular-icon-width: 2.75rem; --kite-progress-indicator-circular-sm-track-size-px: 2px; --kite-progress-indicator-circular-sm-width-px: 24px; --kite-progress-indicator-circular-sm-icon-width: 1.625rem; --kite-progress-indicator-circular-lg-track-size-px: 4px; --kite-progress-indicator-circular-lg-width: 5rem; --kite-progress-indicator-circular-lg-width-px: 80px; --kite-progress-indicator-circular-lg-icon-width: 5rem; --kite-progress-indicator-border-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'progress-indicator-border-color' token */ --kite-progress-indicator-lg-height: 5rem; /** @deprecated: Replace with 'progress-indicator-circular-lg-height' token */ --kite-progress-indicator-lg-width: 5rem; /** @deprecated: Replace with 'progress-indicator-circular-lg-width' token */ --kite-progress-indicator-md-height: 2.5rem; /** @deprecated: Replace with 'progress-indicator-circular-height' token */ --kite-progress-indicator-md-width: 2.5rem; /** @deprecated: Replace with 'progress-indicator-circular-width' token */ --kite-radio-background-color: rgba(0, 0, 0, 0); --kite-radio-margin-top: 0; --kite-radio-margin-right: 0; --kite-radio-margin-left: 0; --kite-radio-padding-top: 0; --kite-radio-padding-right: 0; --kite-radio-padding-bottom: 0; --kite-radio-padding-left: 0; --kite-radio-label-margin-bottom: 0; --kite-radio-input-margin-left: 0; --kite-search-input-margin-top: 0; --kite-search-input-margin-right: 0; --kite-search-input-margin-bottom: 0; --kite-search-input-margin-left: 0; --kite-select-text-overflow: ellipsis; --kite-select-margin-top: 0; --kite-select-margin-right: 0; --kite-select-margin-left: 0; --kite-skip-link-text-line-height: 1; --kite-skip-link-margin-top: 0; --kite-skip-link-margin-right: 0; --kite-skip-link-margin-bottom: 0; --kite-skip-link-margin-left: 0; --kite-skip-link-position: absolute; /** @deprecated */ --kite-switch-background-color: rgba(0, 0, 0, 0); --kite-switch-border-radius: 0; --kite-switch-border-width: 0; --kite-switch-margin-top: 0; --kite-switch-margin-right: 0; --kite-switch-margin-left: 0; --kite-switch-padding-top: 0; --kite-switch-padding-right: 0; --kite-switch-padding-bottom: 0; --kite-switch-padding-left: 0; --kite-switch-disabled-track-opacity: 1; --kite-switch-track-opacity: 1; --kite-switch-on-track-opacity: 1; --kite-switch-on-disabled-track-opacity: 1; --kite-tabs-background-color: rgba(0, 0, 0, 0); --kite-tabs-border-radius: 0; --kite-tabs-border-width: 0; --kite-tabs-margin-top: 0; --kite-tabs-margin-right: 0; --kite-tabs-margin-bottom: 0; --kite-tabs-margin-left: 0; --kite-tabs-padding-top: 0; --kite-tabs-padding-right: 0; --kite-tabs-padding-bottom: 0; --kite-tabs-padding-left: 0; --kite-tabs-tab-background: rgba(0, 0, 0, 0); --kite-tabs-tab-text-align: center; --kite-tabs-tab-border-bottom-color: rgba(0, 0, 0, 0); --kite-tabs-tab-min-width: 5.625rem; --kite-tabs-panel-padding-right: 0; --kite-tabs-panel-padding-bottom: 0; --kite-tabs-panel-padding-left: 0; --kite-tabs-item-border-bottom-color: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'tabs-tab-border-bottom-color' token */ --kite-tabs-item-border-bottom-color-dark: rgba(0, 0, 0, 0); /** @deprecated: Replace with 'tabs-tab-border-bottom-color' token */ --kite-tabs-item-min-width: 5.625rem; /** @deprecated: Replace with 'tabs-tab-min-width' token */ --kite-tag-text-line-height: 1.714; --kite-tag-margin-top: 0; --kite-tag-margin-right: 0; --kite-tag-margin-bottom: 0; --kite-tag-margin-left: 0; --kite-tag-padding-top: 0; --kite-tag-padding-bottom: 0; --kite-tag-solid-border-color: rgba(0, 0, 0, 0); --kite-text-area-margin-top: 0; --kite-text-area-margin-right: 0; --kite-text-area-margin-left: 0; --kite-text-area-min-height: 7.375rem; --kite-text-input-margin-top: 0; --kite-text-input-margin-right: 0; --kite-text-input-margin-left: 0; --kite-time-input-margin-top: 0; --kite-time-input-margin-right: 0; --kite-time-input-margin-bottom: 0; --kite-time-input-margin-left: 0; --kite-time-input-icon-margin-right: 0; --kite-time-input-placeholder-margin-left: 0; --kite-toast-border-color: rgba(0, 0, 0, 0); --kite-toast-border-width: 0; --kite-toast-margin-right: 0; --kite-toast-margin-left: 0; --kite-toast-max-width: 20rem; --kite-toast-icon-height: 1.125rem; --kite-toast-icon-width: 1.125rem; --kite-toast-line-height: 1.25; /** @deprecated: Replace with 'toast-text-line-height' token */ --kite-toast-transition-curve: cubic-bezier(0.25, 0.8, 0.5, 1); /** @deprecated: Replace with 'toast-transition-timing-function' token */ --kite-tooltip-border-color: rgba(0, 0, 0, 0); --kite-tooltip-border-width: 0; --kite-tooltip-margin-top: 0; --kite-tooltip-margin-right: 0; --kite-tooltip-margin-bottom: 0; --kite-tooltip-margin-left: 0; --kite-tooltip-max-width: 90%; --kite-tooltip-max-height: 4.25rem; --kite-tooltip-offset: 0; --kite-tooltip-breakpoint-sm-max-width: 20.3125rem; --kite-tooltip-arrow-directional-offset: 0; /** @deprecated: Replace with 'tooltip-offset' token */ --kite-border-width-thin: var(--kite-size-1, 0.0625rem); --kite-border-width-thick: var(--kite-size-2, 0.125rem); --kite-color-background: var(--kite-color-white, #ffffff); /** Default background color for the app */ --kite-color-background-secondary: var(--kite-color-gray-10, #f8f8f8); /** Secondary background color for the app */ --kite-color-text: var(--kite-color-black, #000000); /** Default body text color */ --kite-color-text-secondary: var(--kite-color-gray-30, #63738a); /** Secondary text color for microcopy, etc. */ --kite-color-primary: var(--kite-color-blue-20, #0271eb); /** Primary brand color */ --kite-color-primary-focus: var(--kite-color-blue-30, #0257b2); /** Focus state of primary color */ --kite-color-primary-hover: var(--kite-color-blue-30, #0257b2); /** Hover state of primary color */ --kite-color-primary-press: var(--kite-color-blue-30, #0257b2); /** Pressed state of primary color */ --kite-color-on-primary: var(--kite-color-white, #ffffff); /** Text color found on primary color */ --kite-color-caution: var(--kite-color-yellow-20, #faa41a); /** Color for elements that have to do with caution or warning */ --kite-color-caution-muted: var(--kite-color-yellow-00, #fff3e0); --kite-color-on-caution: var(--kite-color-black, #000000); /** Text color found on caution color */ --kite-color-negative: var(--kite-color-red-20, #d6312b); /** Color for elements providing negative, destructive, critical or dangerous information and actions */ --kite-color-negative-muted: var(--kite-color-red-00, #ffefef); --kite-color-on-negative: var(--kite-color-white, #ffffff); /** Text color found on negative color */ --kite-color-neutral: var(--kite-color-light-blue-20, #73b7ff); /** Color for elements providing neutral information (not error, success, or caution) */ --kite-color-neutral-muted: var(--kite-color-light-blue-00, #e5f2ff); --kite-color-on-neutral: var(--kite-color-black, #000000); /** Text color found on neutral color */ --kite-color-positive: var(--kite-color-green-20, #008516); /** Color for elements that have to do with positive or successful states and actions */ --kite-color-positive-muted: var(--kite-color-green-00, #e8ffe8); --kite-color-on-positive: var(--kite-color-white, #ffffff); /** Text color found on positive color */ --kite-color-disabled: var(--kite-color-gray-25, #9ba9bd); /** Default color for elements in disabled states */ --kite-color-on-disabled: var(--kite-color-gray-20, #d8dde6); /** Text color found on disabled color */ --kite-color-error: var(--kite-color-red-20, #d6312b); /** @deprecated: Replace with 'color-negative' token */ --kite-color-info: var(--kite-color-light-blue-20, #73b7ff); /** @deprecated: Replace with 'color-neutral' token */ --kite-color-success: var(--kite-color-green-20, #008516); /** @deprecated: Replace with 'color-positive' token */ --kite-color-focus: var(--kite-color-blue-30, #0257b2); /** Default color to use for focus states and focus ring outlines */ --kite-font-family-sans-serif: var(--kite-font-family-spectrum-sans, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --kite-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-letter-spacing-lg: var(--kite-size-2, 0.125rem); --kite-tracking-lg: var(--kite-size-2, 0.125rem); /** @deprecated: Replace with 'letter-spacing-lg' token */ --kite-size-radius-sm: var(--kite-size-2, 0.125rem); --kite-size-radius-md: var(--kite-size-4, 0.25rem); --kite-size-radius-lg: var(--kite-size-8, 0.5rem); --kite-size-radius-circle: var(--kite-size-percent-50, 50%); --kite-border-color: var(--kite-color-gray-20, #d8dde6); /** Default border color for UI elements */ --kite-border-radius-pill: var(--kite-size-radius-pill, 624.9375rem); /** Pill (Hotdog) radius for global use, Chip background shape */ --kite-border-style: var(--kite-border-style-solid, solid); /** Default border style for UI elements */ --kite-container-background-color: var(--kite-color-white, #ffffff); /** `container-*` tokens can be shared across "containers", such as card components, sidebars, drawers ect. These tokens function to set any "container" apart from the app background by applying a default background color, border and even hover state. */ --kite-container-hover-background-color: var(--kite-color-gray-10, #f8f8f8); --kite-focus-ring-offset: var(--kite-size-2, 0.125rem); /** Default offset/gap for an outline (aka, focus ring) around the outside of some focused UI elements */ --kite-focus-ring-style: var(--kite-border-style-solid, solid); /** Default style for the focus ring on focused UI elements */ --kite-focus-ring-width: var(--kite-size-2, 0.125rem); /** Default width for the focus ring on focused UI elements */ --kite-font-weight: var(--kite-font-weight-regular, 400); /** Default font-weight for body copy */ --kite-font-size: var(--kite-font-size-px, 16px); /** Default font-size for body copy */ --kite-font-style: var(--kite-font-style-normal, normal); /** Default font-style for body copy */ --kite-motion-fast: var(--kite-duration-750, 750ms); --kite-motion-faster: var(--kite-duration-400, 400ms); --kite-motion-fastest: var(--kite-duration-200, 200ms); --kite-motion-standard: var(--kite-cubic-bezier-ease, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-motion-entry: var(--kite-cubic-bezier-ease-out, cubic-bezier(0, 0, 0.58, 1)); --kite-motion-exit: var(--kite-cubic-bezier-ease-in, cubic-bezier(0.42, 0, 1, 1)); --kite-layout-2xs: var(--kite-size-40, 2.5rem); --kite-layout-xs: var(--kite-size-48, 3rem); --kite-spacing-2xs: var(--kite-size-4, 0.25rem); --kite-spacing-xs: var(--kite-size-8, 0.5rem); --kite-spacing-sm: var(--kite-size-12, 0.75rem); --kite-spacing-md: var(--kite-size-16, 1rem); --kite-spacing-lg: var(--kite-size-20, 1.25rem); --kite-spacing-xl: var(--kite-size-24, 1.5rem); --kite-spacing-2xl: var(--kite-size-32, 2rem); --kite-spacing-element-xxs: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'spacing-2xs' token */ --kite-spacing-element-xs: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with 'spacing-xs' token */ --kite-spacing-element-sm: var(--kite-size-12, 0.75rem); /** @deprecated: Replace with 'spacing-sm' token */ --kite-spacing-element-md: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'spacing-md' token */ --kite-spacing-element-lg: var(--kite-size-20, 1.25rem); /** @deprecated: Replace with 'spacing-lg' token */ --kite-spacing-element-xl: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'spacing-xl' token */ --kite-spacing-element-xxl: var(--kite-size-32, 2rem); /** @deprecated: Replace with 'spacing-2xl' token */ --kite-spacing-element-xxxl: var(--kite-size-40, 2.5rem); /** @deprecated: Replace with 'layout-2xs' token */ --kite-spacing-section-xs: var(--kite-size-48, 3rem); /** @deprecated: Replace with 'layout-xs' token */ --kite-my-component-background-color: var(--kite-color-white, #ffffff); --kite-my-component-min-width: var(--kite-size-touch-target, 2.75rem); --kite-my-component-min-height: var(--kite-size-touch-target, 2.75rem); --kite-my-component-width: var(--kite-size-touch-target, 2.75rem); --kite-my-component-height: var(--kite-size-touch-target, 2.75rem); --kite-my-component-list-background-color: var(--kite-color-white, #ffffff); --kite-form-control-background-color: var(--kite-color-white, #ffffff); --kite-form-control-border-color: var(--kite-color-gray-30, #63738a); --kite-form-control-height: var(--kite-size-touch-target, 2.75rem); --kite-form-control-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-form-control-cursor: var(--kite-cursor-action, pointer); --kite-form-control-addon-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-form-control-addon-icon-width: var(--kite-size-24, 1.5rem); --kite-form-control-placeholder-text-color: var(--kite-color-gray-30, #63738a); --kite-form-control-placeholder-text-style: var(--kite-font-style-normal, normal); --kite-form-control-picker-cursor: var(--kite-cursor-action, pointer); --kite-form-control-picker-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-form-control-picker-zindex: var(--kite-zindex-dialog, 1300); --kite-form-control-picker-backdrop-zindex: var(--kite-zindex-dialog-backdrop, 1200); --kite-form-control-picker-backdrop-background-color: var(--kite-color-dark-blue-20, #002139); --kite-form-control-picker-list-item-max-width: var(--kite-form-control-max-width, 18rem); --kite-form-control-picker-list-item-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-form-control-picker-list-item-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-form-control-picker-list-item-selected-text-weight: var(--kite-font-weight-bold, 700); --kite-form-control-picker-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-form-control-picker-list-item-icon-width: var(--kite-size-20, 1.25rem); --kite-form-control-picker-list-item-check-icon-width: var(--kite-size-16, 1rem); --kite-form-control-input-background-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-background-color" token */ --kite-form-control-input-border-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-border-color" token */ --kite-form-control-input-border-style: var(--kite-border-style-solid, solid); /** @deprecated: Replace with "form-control-border-style" token */ --kite-form-control-input-cursor: var(--kite-cursor-action, pointer); /** @deprecated: Replace with "form-control-cursor" token */ --kite-form-control-input-placeholder-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-placeholder-text-color" token */ --kite-form-control-input-disabled-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with "form-control-disabled-background-color" token */ --kite-form-control-input-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with "form-control-disabled-cursor" token */ --kite-form-control-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-form-control-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-label-text-color" token */ --kite-form-control-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "form-control-error-feedback-text-color" token */ --kite-form-control-input-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "form-control-background-color" token */ --kite-form-control-input-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-border-color" token */ --kite-form-control-input-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-text-color" token */ --kite-form-control-input-placeholder-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-placeholder-text-color" token */ --kite-form-control-input-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "form-control-disabled-background-color" token */ --kite-form-control-input-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-disabled-border-color" token */ --kite-form-control-input-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "form-control-disabled-text-color" token */ --kite-form-control-input-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "form-control-error-border-color" token */ --kite-form-control-input-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "form-control-focus-ring-color" token */ --kite-grid-xxl-gutters: var(--kite-size-16, 1rem); /** @deprecated: Replace with "grid-2xl-gutters" token */ --kite-grid-xxl-margins: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "grid-2xl-gutters" token */ --kite-typography-display-size: var(--kite-typography-sm-display-size, 3rem); --kite-typography-display-line-height: var(--kite-typography-sm-display-line-height, 1.25); --kite-typography-title-1-size: var(--kite-typography-sm-title-1-size, 2.625rem); --kite-typography-title-1-line-height: var(--kite-typography-sm-title-1-line-height, 1.238); --kite-typography-title-2-size: var(--kite-typography-sm-title-2-size, 2rem); --kite-typography-title-2-line-height: var(--kite-typography-sm-title-2-line-height, 1.25); --kite-typography-title-3-size: var(--kite-typography-sm-title-3-size, 1.75rem); --kite-typography-title-3-line-height: var(--kite-typography-sm-title-3-line-height, 1.286); --kite-typography-title-4-size: var(--kite-typography-sm-title-4-size, 1.5rem); --kite-typography-title-4-line-height: var(--kite-typography-sm-title-4-line-height, 1.333); --kite-typography-title-5-size: var(--kite-typography-sm-title-5-size, 1.25rem); --kite-typography-title-5-line-height: var(--kite-typography-sm-title-5-line-height, 1.4); --kite-typography-title-6-size: var(--kite-typography-sm-title-6-size, 1.125rem); --kite-typography-title-6-line-height: var(--kite-typography-sm-title-6-line-height, 1.333); --kite-typography-body-display-size: var(--kite-typography-sm-body-display-size, 1.25rem); --kite-typography-body-display-line-height: var(--kite-typography-sm-body-display-line-height, 1.6); --kite-typography-body-size: var(--kite-typography-sm-body-size, 1rem); --kite-typography-body-line-height: var(--kite-typography-sm-body-line-height, 1.5); --kite-typography-eyebrow-size: var(--kite-typography-sm-eyebrow-size, 0.875rem); --kite-typography-eyebrow-line-height: var(--kite-typography-sm-eyebrow-line-height, 1.429); --kite-typography-eyebrow-text-transform: var(--kite-typography-sm-eyebrow-text-transform, uppercase); --kite-typography-caption-1-size: var(--kite-typography-sm-caption-1-size, 0.875rem); --kite-typography-caption-1-line-height: var(--kite-typography-sm-caption-1-line-height, 1.429); --kite-typography-caption-2-size: var(--kite-typography-sm-caption-2-size, 0.75rem); --kite-typography-caption-2-line-height: var(--kite-typography-sm-caption-2-line-height, 1.333); --kite-typography-sm-display-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-sm-display-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-1-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-sm-title-1-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-sm-title-2-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-sm-title-3-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-4-weight: var(--kite-font-weight-medium, 500); --kite-typography-sm-title-4-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-sm-title-5-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-title-6-weight: var(--kite-font-weight-medium, 500); --kite-typography-sm-title-6-style: var(--kite-font-style-normal, normal); --kite-typography-sm-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-body-display-style: var(--kite-font-style-normal, normal); --kite-typography-sm-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-body-style: var(--kite-font-style-normal, normal); --kite-typography-sm-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-sm-eyebrow-style: var(--kite-font-style-normal, normal); --kite-typography-sm-caption-1-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-caption-1-style: var(--kite-font-style-normal, normal); --kite-typography-sm-caption-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-caption-2-weight: var(--kite-font-weight-regular, 400); --kite-typography-sm-caption-2-style: var(--kite-font-style-normal, normal); --kite-typography-sm-caption-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-display-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-lg-display-style: var(--kite-font-style-normal, normal); --kite-typography-lg-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-1-weight: var(--kite-font-weight-extra-bold, 800); --kite-typography-lg-title-1-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-lg-title-2-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-lg-title-3-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-4-weight: var(--kite-font-weight-medium, 500); --kite-typography-lg-title-4-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-lg-title-5-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-title-6-weight: var(--kite-font-weight-medium, 500); --kite-typography-lg-title-6-style: var(--kite-font-style-normal, normal); --kite-typography-lg-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-body-display-style: var(--kite-font-style-normal, normal); --kite-typography-lg-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-body-style: var(--kite-font-style-normal, normal); --kite-typography-lg-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-lg-eyebrow-style: var(--kite-font-style-normal, normal); --kite-typography-lg-caption-1-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-caption-1-style: var(--kite-font-style-normal, normal); --kite-typography-lg-caption-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-lg-caption-2-weight: var(--kite-font-weight-regular, 400); --kite-typography-lg-caption-2-style: var(--kite-font-style-normal, normal); --kite-typography-lg-caption-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-sm-caption-weight: var(--kite-font-weight-regular, 400); /** @deprecated: Replace with 'typography-sm-caption-1-weight' token */ --kite-typography-sm-caption-style: var(--kite-font-style-normal, normal); /** @deprecated: Replace with 'typography-sm-caption-1-style' token */ --kite-typography-sm-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); /** @deprecated: Replace with 'typography-sm-caption-1-letter-spacing' token */ --kite-typography-lg-caption-weight: var(--kite-font-weight-regular, 400); /** @deprecated: Replace with 'typography-lg-caption-1-weight' token */ --kite-typography-lg-caption-style: var(--kite-font-style-normal, normal); /** @deprecated: Replace with 'typography-lg-caption-1-style' token */ --kite-typography-lg-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); /** @deprecated: Replace with 'typography-lg-caption-1-letter-spacing' token */ --kite-typography-rutledge-sm-display-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-display-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-1-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-1-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-sm-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-title-5-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-title-6-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-sm-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-sm-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-sm-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-sm-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-sm-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-display-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-display-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-1-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-1-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-lg-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-title-5-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-title-6-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-lg-title-6-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-body-display-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-lg-body-display-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-lg-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-lg-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-lg-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-lg-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-1-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-2-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-3-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xxs-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xxs-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xxs-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xxs-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xxs-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xxs-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-1-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-2-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-2-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-3-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-3-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xs-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xs-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xs-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xs-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xs-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xs-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-title-1-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-1-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-md-title-2-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-md-title-3-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-md-title-4-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-title-5-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-md-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-md-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-md-caption-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-md-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-title-1-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-title-1-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-title-2-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-title-2-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-xl-title-3-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xl-title-3-letter-spacing: var(--kite-letter-spacing-sm, -0.0625rem); --kite-typography-rutledge-xl-title-4-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xl-title-4-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-title-5-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-title-5-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-body-weight: var(--kite-font-weight-regular, 400); --kite-typography-rutledge-xl-body-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-typography-rutledge-xl-eyebrow-weight: var(--kite-font-weight-bold, 700); --kite-typography-rutledge-xl-caption-weight: var(--kite-font-weight-medium, 500); --kite-typography-rutledge-xl-caption-letter-spacing: var(--kite-letter-spacing-normal, normal); --kite-accordion-hover-background-color: rgba(0, 15, 26, 0.02); --kite-accordion-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-accordion-cursor: var(--kite-cursor-action, pointer); --kite-accordion-icon-height: var(--kite-size-16, 1rem); --kite-accordion-icon-width: var(--kite-size-16, 1rem); --kite-accordion-title-text-weight: var(--kite-font-weight-medium, 500); --kite-accordion-border-bottom-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "accordion-border-color" token */ --kite-accordion-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-icon-color" token */ --kite-accordion-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-label-text-color" token */ --kite-accordion-title-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-title-text-color" token */ --kite-accordion-hover-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-hover-background-color" token */ --kite-accordion-disabled-label-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-disabled-label-text-color" token */ --kite-accordion-disabled-title-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-disabled-title-text-color" token */ --kite-accordion-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-disabled-icon-color" token */ --kite-accordion-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "accordion-focus-ring-color" token */ --kite-accordion-alert-label-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "accordion-negative-label-text-color" token */ --kite-accordion-success-label-text-color: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "accordion-positive-label-text-color" token */ --kite-accordion-success-label-text-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "accordion-positive-label-text-color" token */ --kite-accordion-icon-fill: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "accordion-icon-color" token */ --kite-alert-background-color: var(--kite-color-white, #ffffff); --kite-alert-border-color: var(--kite-color-gray-20, #d8dde6); --kite-alert-focus-ring-color: var(--kite-color-blue-20, #0271eb); --kite-alert-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-alert-border-left-width: var(--kite-size-8, 0.5rem); --kite-alert-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); --kite-alert-dismiss-icon-cursor: var(--kite-cursor-action, pointer); --kite-alert-dismiss-icon-height: var(--kite-size-24, 1.5rem); --kite-alert-dismiss-icon-width: var(--kite-size-24, 1.5rem); --kite-alert-status-icon-height: var(--kite-size-24, 1.5rem); --kite-alert-status-icon-width: var(--kite-size-24, 1.5rem); --kite-alert-link-icon-height: var(--kite-size-12, 0.75rem); --kite-alert-link-icon-width: var(--kite-size-12, 0.75rem); --kite-alert-global-focus-ring-color: var(--kite-color-black, #000000); --kite-alert-passive-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); --kite-alert-passive-zindex: var(--kite-zindex-notification, 1600); --kite-alert-passive-title-text-weight: var(--kite-font-weight-bold, 700); --kite-alert-passive-negative-border-color: var(--kite-color-red-20, #d6312b); --kite-alert-passive-negative-status-icon-color: var(--kite-color-red-20, #d6312b); --kite-alert-passive-caution-border-color: var(--kite-color-yellow-20, #faa41a); --kite-alert-passive-neutral-border-color: var(--kite-color-blue-10, #4da4ff); --kite-alert-passive-neutral-status-icon-color: var(--kite-color-blue-10, #4da4ff); --kite-alert-passive-positive-border-color: var(--kite-color-green-20, #008516); --kite-alert-passive-positive-status-icon-color: var(--kite-color-green-20, #008516); --kite-alert-dismiss-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-dismiss-icon-color" token */ --kite-alert-indicator-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "alert-status-icon-height" token */ --kite-alert-indicator-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "alert-status-icon-width" token */ --kite-alert-page-background-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-background-color" token */ --kite-alert-page-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-background-color" token */ --kite-alert-page-border-left-width: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with "alert-border-left-width" token */ --kite-alert-page-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); /** @deprecated: Replace with "alert-elevation" token */ --kite-alert-page-text-size: var(--kite-typography-lg-body-size, 1rem); /** @deprecated: Replace with "alert-text-size" token */ --kite-alert-global-caution-indicator-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-caution-status-icon-color" token */ --kite-alert-global-caution-indicator-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-caution-status-icon-color" token */ --kite-alert-global-caution-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-caution-link-icon-color" token */ --kite-alert-global-error-dismiss-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-dismiss-icon-color" token */ --kite-alert-global-error-dismiss-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-dismiss-icon-color" token */ --kite-alert-global-error-indicator-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-status-icon-color" token */ --kite-alert-global-error-indicator-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-status-icon-color" token */ --kite-alert-global-error-link-text-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-text-color" token */ --kite-alert-global-error-link-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-text-color" token */ --kite-alert-global-error-link-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-icon-color" token */ --kite-alert-global-error-link-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-icon-color" token */ --kite-alert-global-error-text-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-text-color" token */ --kite-alert-global-error-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "alert-global-negative-text-color" token */ --kite-alert-global-info-indicator-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-status-icon-color" token */ --kite-alert-global-info-indicator-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-status-icon-color" token */ --kite-alert-global-info-link-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-link-icon-color" token */ --kite-alert-global-info-link-icon-fill-dark: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-global-neutral-link-icon-color" token */ --kite-alert-dismiss-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "alert-dismiss-icon-color" token */ --kite-alert-negative-status-icon-fill: var(--kite-color-red-20, #d6312b); /** @deprecated: Replace with "alert-negative-status-icon-color" token */ --kite-alert-positive-status-icon-fill: var(--kite-color-green-20, #008516); /** @deprecated: Replace with "alert-positive-status-icon-color" token */ --kite-badge-background-color: var(--kite-color-red-20, #d6312b); --kite-badge-height: var(--kite-size-20, 1.25rem); --kite-badge-min-width: var(--kite-size-20, 1.25rem); --kite-badge-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-badge-disabled-background-color: var(--kite-color-gray-20, #d8dde6); --kite-badge-text-color: var(--kite-color-white, #ffffff); --kite-badge-text-size: var(--kite-size-12, 0.75rem); --kite-badge-text-weight: var(--kite-font-weight-bold, 700); --kite-badge-sm-height: var(--kite-size-8, 0.5rem); --kite-badge-sm-width: var(--kite-size-8, 0.5rem); --kite-badge-icon-dot-height: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with "badge-sm-height" token */ --kite-badge-icon-dot-width: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with "badge-sm-width" token */ --kite-badge-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "badge-text-color" token */ --kite-badge-disabled-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "badge-disabled-background-color" token */ --kite-blockquote-border-left-width: var(--kite-size-4, 0.25rem); --kite-blockquote-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-blockquote-cite-text-color: var(--kite-color-gray-30, #63738a); --kite-button-text-weight: var(--kite-font-weight-medium, 500); --kite-button-height: var(--kite-size-touch-target, 2.75rem); --kite-button-focus-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-hover-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-press-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-button-disabled-background-color: var(--kite-color-gray-20, #d8dde6); --kite-button-disabled-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-cursor: var(--kite-cursor-action, pointer); --kite-button-icon-height: var(--kite-size-20, 1.25rem); --kite-button-icon-width: var(--kite-size-20, 1.25rem); --kite-button-destructive-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-destructive-focus-background-color: var(--kite-color-negative-focus, #b00300); --kite-button-destructive-focus-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-destructive-hover-background-color: var(--kite-color-negative-hover, #b00300); --kite-button-destructive-hover-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-destructive-press-background-color: var(--kite-color-negative-press, #b00300); --kite-button-destructive-press-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-disabled-background-color: var(--kite-button-secondary-background-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-background-color: var(--kite-button-secondary-background-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-disabled-background-color: var(--kite-button-secondary-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-border-color: var(--kite-button-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-focus-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-hover-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-press-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-disabled-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-background-color: var(--kite-button-borderless-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-focus-text-color: var(--kite-color-negative-focus, #b00300); --kite-button-borderless-destructive-hover-text-color: var(--kite-color-negative-hover, #b00300); --kite-button-borderless-destructive-press-text-color: var(--kite-color-negative-press, #b00300); --kite-button-primary-background-color-dark: var(--kite-color-blue-20, #0271eb); /** @deprecated: Replace with 'button-primary-background-color' token */ --kite-button-primary-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-icon-color' token */ --kite-button-primary-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-text-color' token */ --kite-button-primary-active-background-color-dark: var(--kite-color-blue-30, #0257b2); /** @deprecated: Replace with 'button-primary-press-background-color' token */ --kite-button-primary-active-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-press-text-color' token */ --kite-button-primary-active-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-press-icon-color' token */ --kite-button-primary-disabled-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'button-primary-disabled-background-color' token */ --kite-button-primary-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-primary-disabled-text-color' token */ --kite-button-primary-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-primary-disabled-icon-color' token */ --kite-button-primary-focus-background-color-dark: var(--kite-color-blue-30, #0257b2); /** @deprecated: Replace with 'button-primary-focus-background-color' token */ --kite-button-primary-focus-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-focus-text-color' token */ --kite-button-primary-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-focus-icon-color' token */ --kite-button-primary-hover-background-color-dark: var(--kite-color-blue-30, #0257b2); /** @deprecated: Replace with 'button-primary-hover-background-color' token */ --kite-button-primary-hover-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-hover-text-color' token */ --kite-button-primary-hover-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-primary-hover-icon-color' token */ --kite-button-disabled-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'button-disabled-background-color' token */ --kite-button-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-focus-ring-color' token */ --kite-button-secondary-border-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-border-color' token */ --kite-button-secondary-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-icon-color' token */ --kite-button-secondary-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-text-color' token */ --kite-button-secondary-active-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-press-background-color' token */ --kite-button-secondary-active-text-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'button-secondary-press-text-color' token */ --kite-button-secondary-active-icon-fill-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'button-secondary-press-icon-color' token */ --kite-button-secondary-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-secondary-disabled-border-color' token */ --kite-button-secondary-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-secondary-disabled-icon-color' token */ --kite-button-secondary-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-secondary-disabled-text-color' token */ --kite-button-secondary-focus-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-focus-background-color' token */ --kite-button-secondary-focus-text-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'button-secondary-focus-text-color' token */ --kite-button-secondary-focus-icon-fill-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'button-secondary-focus-icon-color' token */ --kite-button-secondary-hover-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-secondary-hover-background-color' token */ --kite-button-secondary-hover-text-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'button-secondary-hover-text-color' token */ --kite-button-secondary-hover-icon-fill-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'button-secondary-hover-icon-color' token */ --kite-button-borderless-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-icon-color' token */ --kite-button-borderless-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-text-color' token */ --kite-button-borderless-active-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-press-icon-color' token */ --kite-button-borderless-active-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-press-text-color' token */ --kite-button-borderless-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-borderless-disabled-icon-color' token */ --kite-button-borderless-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'button-borderless-disabled-text-color' token */ --kite-button-borderless-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-focus-icon-color' token */ --kite-button-borderless-focus-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-borderless-focus-text-color' token */ --kite-button-borderless-hover-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-hover-icon-color' token */ --kite-button-borderless-hover-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'button-borderless-hover-text-color' token */ --kite-button-active-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-press-icon-color' token */ --kite-button-focus-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-focus-icon-color' token */ --kite-button-hover-icon-fill: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'button-hover-icon-color' token */ --kite-button-borderless-active-icon-fill: var(--kite-color-blue-30, #0257b2); /** @deprecated: Replace with 'button-borderless-press-icon-color' token */ --kite-button-borderless-hover-icon-fill: var(--kite-color-blue-30, #0257b2); /** @deprecated: Replace with 'button-borderless-hover-icon-color' token */ --kite-calendar-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-calendar-action-cursor: var(--kite-cursor-action, pointer); --kite-calendar-controls-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-calendar-day-width: var(--kite-size-40, 2.5rem); --kite-calendar-day-height: var(--kite-size-40, 2.5rem); --kite-calendar-day-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-calendar-day-today-indicator-width: var(--kite-size-4, 0.25rem); --kite-calendar-day-today-indicator-height: var(--kite-size-4, 0.25rem); --kite-calendar-day-due-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-calendar-day-due-padding-top: var(--kite-size-1, 0.0625rem); --kite-calendar-day-due-padding-bottom: var(--kite-size-1, 0.0625rem); --kite-calendar-day-due-text-color: var(--kite-color-white, #ffffff); --kite-calendar-day-out-range-text-decoration-line: var(--kite-calendar-day-disabled-text-decoration-line, line-through); --kite-calendar-day-unavailable-text-decoration-line: var(--kite-calendar-day-disabled-text-decoration-line, line-through); --kite-calendar-month-year-text-weight: var(--kite-font-weight-bold, 700); --kite-calendar-day-disabled-text-decoration-thickness: var(--kite-size-2, 0.125rem); /** @deprecated: Replace with 'calendar-day-unavailable-text-decoration-thickness' token */ --kite-card-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-card-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "card-background-color" token */ --kite-card-border-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "card-border-color" token */ --kite-checkbox-width: var(--kite-size-20, 1.25rem); --kite-checkbox-selected-icon-height: var(--kite-size-16, 1rem); --kite-checkbox-selected-icon-width: var(--kite-size-16, 1rem); --kite-checkbox-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-checkbox-error-feedback-icon-height: var(--kite-size-20, 1.25rem); --kite-checkbox-error-feedback-icon-width: var(--kite-size-20, 1.25rem); --kite-checkbox-border-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-border-color" token */ --kite-checkbox-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-label-text-color" token */ --kite-checkbox-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-disabled-border-color" token */ --kite-checkbox-disabled-label-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-label-text-color" token */ --kite-checkbox-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-focus-ring-color" token */ --kite-checkbox-selected-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-selected-background-color" token */ --kite-checkbox-selected-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-selected-disabled-border-color" token */ --kite-checkbox-selected-disabled-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-selected-disabled-background-color" token */ --kite-checkbox-indeterminate-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "checkbox-indeterminate-icon-color" token */ --kite-checkbox-indeterminate-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-indeterminate-disabled-border-color" token */ --kite-checkbox-indeterminate-disabled-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "checkbox-indeterminate-disabled-background-color" token */ --kite-chip-text-color: var(--kite-color-dark-blue-30, #000f1a); --kite-chip-text-weight: var(--kite-font-weight-medium, 500); --kite-chip-border-color: var(--kite-color-gray-30, #63738a); --kite-chip-height: var(--kite-size-32, 2rem); --kite-chip-focus-background-color: var(--kite-color-gray-20, #d8dde6); --kite-chip-selected-background-color: var(--kite-color-gray-30, #63738a); --kite-chip-selected-text-color: var(--kite-color-white, #ffffff); --kite-chip-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-chip-cursor: var(--kite-cursor-action, pointer); --kite-chip-background-color-dark: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "chip-background-color" token */ --kite-chip-text-color-dark: var(--kite-color-light-blue-10, #b8d4f2); /** @deprecated: Replace with "chip-text-color" token */ --kite-chip-hover-background-color-dark: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with "chip-hover-background-color" token */ --kite-chip-selected-disabled-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "chip-selected-disabled-background-color" token */ --kite-chip-disabled-background-color-dark: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "chip-disabled-background-color" token */ --kite-chip-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "chip-disabled-text-color" token */ --kite-combobox-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-combobox-border-radius: var(--kite-form-control-border-radius, 0); --kite-combobox-height: var(--kite-size-touch-target, 2.75rem); --kite-combobox-max-width: var(--kite-form-control-max-width, 18rem); --kite-combobox-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-combobox-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-combobox-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-combobox-overflow-label-text-weight: var(--kite-font-weight-medium, 500); --kite-combobox-picker-results-text-color: var(--kite-color-gray-30, #63738a); --kite-data-table-text-size: var(--kite-size-14, 0.875rem); --kite-data-table-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-data-table-breakpoint-md-text-size: var(--kite-typography-lg-body-size, 1rem); --kite-data-table-breakpoint-md-text-line-height: var(--kite-typography-lg-body-line-height, 1.5); --kite-data-table-icon-size: var(--kite-size-16, 1rem); --kite-data-table-header-text-align: var(--kite-data-table-text-align, left); --kite-data-table-header-text-weight: var(--kite-font-weight-bold, 700); --kite-data-table-cell-text-align: var(--kite-data-table-text-align, left); --kite-data-table-row-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-data-table-sticky-shadow-color: rgba(0, 0, 0, 0.2); --kite-data-table-striped-row-background-color: var(--kite-color-gray-10, #f8f8f8); --kite-data-table-striped-inverse-row-background-color: var(--kite-color-white, #ffffff); --kite-data-table-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-text-color" token */ --kite-data-table-title-row-border-bottom-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "data-table-title-row-border-bottom-color" token */ --kite-data-table-title-row-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-title-row-text-color" token */ --kite-data-table-cell-border-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "data-table-cell-border-color" token */ --kite-data-table-cell-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-cell-focus-ring-color" token */ --kite-data-table-row-border-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "data-table-row-border-color" token */ --kite-data-table-row-striped-background-color-dark: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "data-table-striped-row-background-color" token */ --kite-data-table-row-hover-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "data-table-row-hover-background-color" token */ --kite-data-table-row-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "data-table-row-focus-ring-color" token */ --kite-data-table-title-row-icon-size: var(--kite-size-16, 1rem); /** @deprecated: Replace with "data-table-icon-size" token */ --kite-data-table-title-row-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with "data-table-header-text-weight" token */ --kite-data-table-row-striped-background-color: var(--kite-color-gray-10, #f8f8f8); /** @deprecated: Replace with "data-table-striped-row-background-color" token */ --kite-data-table-lg-text-size: var(--kite-typography-lg-body-size, 1rem); /** @deprecated: Replace with "data-table-breakpoint-md-text-size" token */ --kite-data-table-sm-text-size: var(--kite-size-14, 0.875rem); /** @deprecated: Replace with "data-table-text-size" token */ --kite-data-table-hover-row-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with "data-table-row-hover-background-color" token */ --kite-date-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-date-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-date-input-height: var(--kite-size-touch-target, 2.75rem); --kite-date-input-action-cursor: var(--kite-cursor-action, pointer); --kite-date-input-addon-padding-top: var(--kite-form-control-addon-padding-top, 0); --kite-date-input-addon-padding-bottom: var(--kite-form-control-addon-padding-bottom, 0); --kite-date-input-feedback-margin-top: var(--kite-form-control-margin-top, 0); --kite-date-input-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-date-input-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-date-input-picker-min-width: var(--kite-form-control-picker-min-width, 18rem); --kite-dialog-border-width: var(--kite-border-width-none, 0); --kite-dialog-width: var(--kite-dialog-full-size-width, 100%); /** 4 of 4 columns */ --kite-dialog-height: var(--kite-dialog-full-size-height, 100%); --kite-dialog-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-dialog-icon-height: var(--kite-size-24, 1.5rem); --kite-dialog-icon-width: var(--kite-size-24, 1.5rem); --kite-dialog-elevation: var(--kite-elevation-3, 0 3px 12px 0 rgba(0, 0, 0, 0.1)); --kite-dialog-zindex: var(--kite-zindex-dialog, 1300); --kite-dialog-breakpoint-md-title-text-size: var(--kite-typography-lg-title-5-size, 1.5rem); --kite-dialog-breakpoint-md-title-text-line-height: var(--kite-typography-lg-title-5-line-height, 1.333); --kite-dialog-overlay-background-color: var(--kite-color-dark-blue-20, #002139); --kite-dialog-overlay-zindex: var(--kite-zindex-dialog-backdrop, 1200); --kite-dialog-dismiss-icon-cursor: var(--kite-cursor-action, pointer); --kite-dialog-dismiss-icon-height: var(--kite-size-20, 1.25rem); --kite-dialog-dismiss-icon-width: var(--kite-size-20, 1.25rem); --kite-dialog-scrolled-elevation: var(--kite-elevation-1, 0 1px 4px 0 rgba(0, 0, 0, 0.1)); --kite-dialog-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "dialog-background-color" token */ --kite-dialog-overlay-background-color-dark: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "dialog-overlay-background-color" token */ --kite-dialog-dismiss-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dialog-dismiss-icon-color" token */ --kite-dialog-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dialog-text-color" token */ --kite-dialog-box-shadow: var(--kite-elevation-3, 0 3px 12px 0 rgba(0, 0, 0, 0.1)); /** @deprecated: Replace with "dialog-elevation" token */ --kite-dialog-dismiss-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with "dialog-dismiss-icon-color" token */ --kite-dialog-z-index: var(--kite-zindex-dialog, 1300); /** @deprecated: Replace with "dialog-zindex" token */ --kite-dropdown-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-dropdown-border-radius: var(--kite-form-control-border-radius, 0); --kite-dropdown-max-width: var(--kite-form-control-max-width, 18rem); --kite-dropdown-height: var(--kite-size-touch-target, 2.75rem); --kite-dropdown-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-dropdown-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-dropdown-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-dropdown-icon-height: var(--kite-size-16, 1rem); --kite-dropdown-icon-width: var(--kite-size-16, 1rem); --kite-dropdown-icon-margin-right: var(--kite-size-8, 0.5rem); --kite-dropdown-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'dropdown-background-color' token */ --kite-dropdown-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-border-color' token */ --kite-dropdown-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-icon-color' token */ --kite-dropdown-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-label-text-color' token */ --kite-dropdown-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-text-color' token */ --kite-dropdown-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'dropdown-focus-ring-color' token */ --kite-dropdown-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'dropdown-disabled-background-color' token */ --kite-dropdown-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-disabled-border-color' token */ --kite-dropdown-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-disabled-icon-color' token */ --kite-dropdown-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'dropdown-disabled-text-color' token */ --kite-dropdown-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'dropdown-error-border-color' token */ --kite-dropdown-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'dropdown-error-text-color' token */ --kite-dropdown-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-dropdown-list-cursor: var(--kite-cursor-action, pointer); --kite-dropdown-list-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-dropdown-list-transition-timing-function: var(--kite-menu-list-transition-curve, cubic-bezier(0.25, 0.8, 0.5, 1)); --kite-dropdown-list-zindex: var(--kite-zindex-dropdown, 1100); --kite-dropdown-list-item-padding-top: var(--kite-menu-list-item-padding-top, 0.625rem); --kite-dropdown-list-item-padding-bottom: var(--kite-menu-list-item-padding-bottom, 0.625rem); --kite-dropdown-list-item-icon-height: var(--kite-size-16, 1rem); --kite-dropdown-list-item-icon-width: var(--kite-size-16, 1rem); --kite-dropdown-list-item-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-dropdown-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-dropdown-list-item-selected-text-weight: var(--kite-font-weight-bold, 700); --kite-dropdown-inline-border-radius: var(--kite-form-control-border-radius, 0); --kite-dropdown-inline-border-width: var(--kite-border-width-none, 0); --kite-dropdown-inline-label-text-weight: var(--kite-font-weight-bold, 700); --kite-dropdown-list-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "dropdown-list-background-color" token */ --kite-dropdown-list-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "dropdown-list-border-color" token */ --kite-dropdown-list-item-destructive-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "dropdown-list-item-destructive-text-color" token */ --kite-dropdown-list-item-destructive-icon-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "dropdown-list-item-destructive-icon-color" token */ --kite-dropdown-list-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-list-item-text-color" token */ --kite-dropdown-list-item-icon-fill-dark: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "dropdown-list-item-icon-color" token */ --kite-dropdown-list-item-disabled-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-list-item-disabled-text-color" token */ --kite-dropdown-list-item-hover-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "dropdown-list-item-hover-background-color" token */ --kite-dropdown-list-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-list-item-focus-ring-color" token */ --kite-dropdown-list-z-index: var(--kite-zindex-dropdown, 1100); /** @deprecated: Replace with "dropdown-list-zindex" token */ --kite-dropdown-list-item-icon-fill: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "dropdown-list-item-icon-color" token */ --kite-dropdown-inline-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-inline-focus-ring-color" token */ --kite-dropdown-inline-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dropdown-inline-text-color" token */ --kite-dynamic-hint-max-width: var(--kite-form-control-max-width, 18rem); --kite-dynamic-hint-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-dynamic-hint-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-dynamic-hint-zindex: var(--kite-zindex-dropdown, 1100); --kite-dynamic-hint-arrow-height: var(--kite-size-8, 0.5rem); --kite-dynamic-hint-arrow-width: var(--kite-size-16, 1rem); --kite-dynamic-hint-title-text-weight: var(--kite-font-weight-bold, 700); --kite-dynamic-hint-criteria-icon-height: var(--kite-size-16, 1rem); --kite-dynamic-hint-criteria-icon-width: var(--kite-size-16, 1rem); --kite-dynamic-hint-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "dynamic-hint-background-color" token */ --kite-dynamic-hint-arrow-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "dynamic-hint-arrow-background-color" token */ --kite-dynamic-hint-criteria-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "dynamic-hint-criteria-text-color" token */ --kite-dynamic-hint-criteria-success-icon-fill-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "dynamic-hint-criteria-positive-icon-color" token */ --kite-dynamic-hint-criteria-error-icon-fill-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "dynamic-hint-criteria-negative-icon-color" token */ --kite-interactive-list-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with "list-disabled-cursor" token */ --kite-interactive-list-item-border-radius: var(--kite-interactive-list-border-radius, 0); /** @deprecated: Replace with "list-item-border-radius" token */ --kite-interactive-list-item-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); /** @deprecated: Replace with "list-item-focus-ring-offset" token */ --kite-interactive-list-item-cursor: var(--kite-cursor-action, pointer); /** @deprecated: Replace with "list-item-cursor" token */ --kite-interactive-list-item-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "list-item-icon-height" token */ --kite-interactive-list-item-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with "list-item-icon-width" token */ --kite-interactive-list-item-hover-background-color: rgba(0, 15, 26, 0.02); /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-interactive-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with "list-item-disabled-cursor" token */ --kite-interactive-list-item-multiline-title-text-weight: var(--kite-font-weight-medium, 500); /** @deprecated: Replace with "list-item-multiline-title-text-weight" token */ --kite-interactive-list-item-breakpoint-md-title-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); /** @deprecated: Replace with "list-item-breakpoint-md-title-text-size" token */ --kite-interactive-list-image-border-radius: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with "list-image-border-radius" token */ --kite-interactive-list-item-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-label-text-color" token */ --kite-interactive-list-item-danger-label-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "list-item-negative-label-text-color" token */ --kite-interactive-list-item-info-label-text-color-dark: var(--kite-color-blue-10, #4da4ff); /** @deprecated: Replace with "list-item-neutral-label-text-color" token */ --kite-interactive-list-item-success-label-text-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with "list-item-positive-label-text-color" token */ --kite-interactive-list-item-border-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "list-item-border-color" token */ --kite-interactive-list-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-text-color" token */ --kite-interactive-list-item-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-icon-color" token */ --kite-interactive-list-item-action-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-action-icon-color" token */ --kite-interactive-list-item-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "list-item-disabled-text-color" token */ --kite-interactive-list-item-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "list-item-disabled-icon-color" token */ --kite-interactive-list-item-disabled-action-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "list-item-disabled-action-icon-color" token */ --kite-interactive-list-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "list-item-focus-ring-color" token */ --kite-link-text-decoration: var(--kite-link-text-decoration-line, underline); --kite-link-text-decoration-offset: var(--kite-size-2, 0.125rem); --kite-link-text-decoration-thickness: var(--kite-size-2, 0.125rem); --kite-link-hover-text-color: var(--kite-color-dark-blue-10, #002e52); --kite-link-press-text-color: var(--kite-color-dark-blue-20, #002139); --kite-link-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-link-cursor: var(--kite-cursor-action, pointer); --kite-link-icon-height: var(--kite-size-14, 0.875rem); --kite-link-icon-width: var(--kite-size-14, 0.875rem); --kite-link-standalone-text-decoration: var(--kite-link-standalone-text-decoration-line, none); --kite-link-standalone-text-weight: var(--kite-font-weight-medium, 500); --kite-link-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-text-color" token */ --kite-link-active-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "link-press-text-color" token */ --kite-link-visited-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-visited-text-color" token */ --kite-link-focus-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-focus-text-color" token */ --kite-link-hover-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-hover-text-color" token */ --kite-link-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-focus-ring-color" token */ --kite-link-standalone-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-standalone-icon-color" token */ --kite-link-standalone-active-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "link-standalone-press-icon-color" token */ --kite-link-standalone-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "link-standalone-focus-icon-color" token */ --kite-link-standalone-hover-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-standalone-hover-icon-color" token */ --kite-link-standalone-visited-icon-fill-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with "link-standalone-visited-icon-color" token */ --kite-link-standalone-active-icon-fill: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "link-standalone-press-icon-color" token */ --kite-link-standalone-hover-icon-fill: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "link-standalone-hover-icon-color" token */ --kite-link-standalone-visited-icon-fill: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "link-standalone-visited-icon-color" token */ --kite-list-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-list-item-border-radius: var(--kite-list-border-radius, 0); --kite-list-item-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-list-item-cursor: var(--kite-cursor-action, pointer); --kite-list-item-slot-start-max-width: var(--kite-list-start-max-width, 5rem); --kite-list-item-icon-height: var(--kite-size-24, 1.5rem); --kite-list-item-icon-width: var(--kite-size-24, 1.5rem); --kite-list-item-image-sm-max-width: var(--kite-size-48, 3rem); --kite-list-item-image-sm-max-height: var(--kite-size-48, 3rem); --kite-list-item-action-icon-height: var(--kite-size-16, 1rem); --kite-list-item-action-icon-width: var(--kite-size-16, 1rem); --kite-list-item-label-icon-width: var(--kite-size-16, 1rem); --kite-list-item-label-icon-height: var(--kite-size-16, 1rem); --kite-list-item-title-body-text-weight: var(--kite-font-weight-medium, 500); --kite-list-item-hover-background-color: rgba(0, 15, 26, 0.02); --kite-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-list-item-multiline-title-text-weight: var(--kite-font-weight-medium, 500); --kite-list-item-muted-label-text-color: var(--kite-color-gray-30, #63738a); --kite-list-item-breakpoint-md-title-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-list-item-breakpoint-md-title-body-text-size: var(--kite-typography-lg-body-size, 1rem); --kite-list-item-breakpoint-md-title-body-text-weight: var(--kite-font-weight-medium, 500); --kite-list-item-breakpoint-md-title-body-text-line-height: var(--kite-typography-lg-body-line-height, 1.5); --kite-list-image-border-radius: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'list-item-image-border-radius' token */ --kite-list-image-max-width: var(--kite-list-item-image-lg-max-width, 5rem); /** @deprecated: Replace with 'list-item-image-max-width' token */ --kite-list-image-max-height: var(--kite-list-item-image-lg-max-height, 5rem); /** @deprecated: Replace with 'list-item-image-max-width' token */ --kite-menu-list-max-width: var(--kite-form-control-max-width, 18rem); --kite-menu-list-cursor: var(--kite-cursor-action, pointer); --kite-menu-list-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-menu-list-transition-timing-function: var(--kite-menu-list-transition-curve, cubic-bezier(0.25, 0.8, 0.5, 1)); --kite-menu-list-zindex: var(--kite-zindex-dropdown, 1100); --kite-menu-list-item-icon-color: var(--kite-color-dark-blue-30, #000f1a); --kite-menu-list-item-icon-height: var(--kite-size-20, 1.25rem); --kite-menu-list-item-icon-width: var(--kite-size-20, 1.25rem); --kite-menu-list-item-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-menu-list-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-menu-trigger-width: var(--kite-size-touch-target, 2.75rem); --kite-menu-trigger-height: var(--kite-size-touch-target, 2.75rem); --kite-menu-trigger-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-menu-trigger-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-menu-trigger-cursor: var(--kite-cursor-action, pointer); --kite-menu-trigger-icon-height: var(--kite-size-20, 1.25rem); --kite-menu-trigger-icon-width: var(--kite-size-20, 1.25rem); --kite-menu-contextual-label-trigger-label-text-weight: var(--kite-font-weight-medium, 500); --kite-menu-sm-trigger-padding-top: var(--kite-size-2, 0.125rem); --kite-menu-sm-trigger-padding-right: var(--kite-size-2, 0.125rem); --kite-menu-sm-trigger-padding-bottom: var(--kite-size-2, 0.125rem); --kite-menu-sm-trigger-padding-left: var(--kite-size-2, 0.125rem); --kite-menu-list-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with "menu-list-background-color" token */ --kite-menu-list-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-list-border-color" token */ --kite-menu-list-item-negative-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "menu-list-item-negative-text-color" token */ --kite-menu-list-item-negative-icon-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with "menu-list-item-negative-icon-color" token */ --kite-menu-list-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-list-item-text-color" token */ --kite-menu-list-item-icon-fill-dark: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "menu-list-item-icon-color" token */ --kite-menu-list-item-disabled-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-list-item-disabled-text-color" token */ --kite-menu-list-item-hover-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-list-item-hover-background-color" token */ --kite-menu-list-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-list-item-focus-ring-color" token */ --kite-menu-trigger-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-trigger-icon-color" token */ --kite-menu-trigger-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with "menu-focus-ring-color" token */ --kite-menu-trigger-hover-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-trigger-hover-background-color" token */ --kite-menu-trigger-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with "menu-trigger-disabled-icon-color" token */ --kite-menu-list-z-index: var(--kite-zindex-dropdown, 1100); /** @deprecated: Replace with "menu-list-zindex" token */ --kite-menu-list-item-icon-fill: var(--kite-color-dark-blue-30, #000f1a); /** @deprecated: Replace with "menu-list-item-icon-color" token */ --kite-meter-icon-width: var(--kite-size-16, 1rem); --kite-meter-icon-height: var(--kite-size-16, 1rem); --kite-meter-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-status-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-track-color: var(--kite-color-gray-20, #d8dde6); --kite-meter-track-height: var(--kite-size-8, 0.5rem); --kite-meter-tick-color: var(--kite-color-black, #000000); --kite-meter-tick-width: var(--kite-size-4, 0.25rem); --kite-meter-value-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-sm-icon-width: var(--kite-size-12, 0.75rem); --kite-meter-sm-icon-height: var(--kite-size-12, 0.75rem); --kite-meter-sm-status-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-sm-track-height: var(--kite-size-4, 0.25rem); --kite-meter-lg-icon-width: var(--kite-size-16, 1rem); --kite-meter-lg-icon-height: var(--kite-size-16, 1rem); --kite-meter-lg-label-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-meter-lg-label-text-line-height: var(--kite-typography-lg-title-6-line-height, 1.4); --kite-meter-lg-status-label-text-weight: var(--kite-font-weight-medium, 500); --kite-meter-lg-track-height: var(--kite-size-16, 1rem); --kite-meter-circular-height: var(--kite-meter-circular-width, 5.5rem); --kite-meter-circular-height-px: var(--kite-meter-circular-width-px, 88px); --kite-meter-circular-icon-width: var(--kite-size-12, 0.75rem); --kite-meter-circular-icon-height: var(--kite-size-12, 0.75rem); --kite-meter-circular-sm-width: var(--kite-size-24, 1.5rem); --kite-meter-circular-sm-height-px: var(--kite-meter-circular-sm-width-px, 24px); --kite-meter-circular-sm-tick-height: var(--kite-meter-circular-sm-track-height, 0.125rem); --kite-meter-circular-lg-height: var(--kite-meter-circular-lg-width, 9.25rem); --kite-meter-circular-lg-height-px: var(--kite-meter-circular-lg-width-px, 148px); --kite-meter-circular-lg-track-height-px: var(--kite-meter-circular-track-height-px, 8px); --kite-meter-circular-lg-value-label-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-meter-circular-lg-value-label-text-line-height: var(--kite-typography-lg-title-6-line-height, 1.4); --kite-meter-accessibility-tick-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'meter-tick-color' token */ --kite-meter-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'meter-label-text-color' token */ --kite-meter-progress-fill-background-color-dark: var(--kite-color-light-blue-20, #73b7ff); /** @deprecated: Replace with 'meter-fill-color' token */ --kite-meter-track-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'meter-track-color' token */ --kite-meter-positive-progress-fill-background-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-positive-status-icon-fill-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'meter-positive-icon-color' token */ --kite-meter-caution-progress-fill-background-color-dark: var(--kite-color-yellow-10, #ffd400); /** @deprecated: Replace with 'meter-caution-fill-color' token */ --kite-meter-caution-status-icon-fill-dark: var(--kite-color-yellow-10, #ffd400); /** @deprecated: Replace with 'meter-caution-icon-color' token */ --kite-meter-alert-progress-fill-background-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'meter-negative-fill-color' token */ --kite-meter-alert-status-icon-fill-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'meter-negative-icon-color' token */ --kite-meter-success-progress-fill-background-color-dark: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-accessibility-tick-background-color: var(--kite-color-black, #000000); /** @deprecated: Replace with 'meter-tick-color' token */ --kite-meter-progress-fill-background-color: var(--kite-color-light-blue-20, #73b7ff); /** @deprecated: Replace with 'meter-fill-color' token */ --kite-meter-track-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with 'meter-track-color' token */ --kite-meter-value-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'meter-value-label-text-color' token */ --kite-meter-status-icon-height: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'meter-progress-icon-height' token */ --kite-meter-status-icon-width: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'meter-progress-icon-width' token */ --kite-meter-linear-track-height: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with 'meter-track-height' token */ --kite-meter-linear-small-track-height: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'meter-sm-track-height' token */ --kite-meter-linear-large-track-height: var(--kite-size-16, 1rem); /** @deprecated: Replace with 'meter-lg-track-height' token */ --kite-meter-circular-small-accessibility-tick-width: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'meter-circular-sm-tick-width' token */ --kite-meter-circular-small-accessibility-tick-height: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'meter-circular-sm-tick-height' token */ --kite-meter-circular-large-status-icon-height: var(--kite-size-12, 0.75rem); /** @deprecated: Replace with 'meter-circular-lg-icon-height' token */ --kite-meter-circular-large-status-icon-width: var(--kite-size-12, 0.75rem); /** @deprecated: Replace with 'meter-circular-lg-icon-width' token */ --kite-meter-circular-large-track-height: var(--kite-size-8, 0.5rem); /** @deprecated: Replace with 'meter-circular-lg-track-height' token */ --kite-meter-circular-large-value-label-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); /** @deprecated: Replace with 'meter-circular-lg-value-label-text-size' token */ --kite-pagination-controls-button-cursor: var(--kite-cursor-action, pointer); --kite-pagination-controls-button-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-pagination-controls-button-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-pagination-controls-button-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-pagination-controls-button-icon-width: var(--kite-size-12, 0.75rem); --kite-pagination-controls-button-icon-height: var(--kite-size-12, 0.75rem); --kite-pagination-page-select-current-label-margin-top: var(--kite-pagination-dropdown-margin-top, 0); --kite-pagination-page-select-current-label-margin-bottom: var(--kite-pagination-dropdown-margin-bottom, 0); --kite-pagination-dropdown-height: var(--kite-size-touch-target, 2.75rem); --kite-pagination-dropdown-hover-background-color: var(--kite-color-gray-20, #d8dde6); --kite-pagination-dropdown-icon-width: var(--kite-size-12, 0.75rem); --kite-pagination-dropdown-icon-height: var(--kite-size-12, 0.75rem); --kite-pagination-dropdown-placeholder-text-weight: var(--kite-font-weight-bold, 700); --kite-pagination-count-text-color: var(--kite-color-gray-30, #63738a); --kite-pagination-controls-border-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'pagination-controls-border-color' token */ --kite-pagination-controls-button-icon-fill: var(--kite-color-blue-20, #0271eb); /** @deprecated: Replace with 'pagination-controls-button-icon-color' token */ --kite-pagination-controls-button-icon-fill-dark: var(--kite-color-blue-20, #0271eb); /** @deprecated: Replace with 'pagination-controls-button-icon-color' token */ --kite-pagination-controls-button-previous-border-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'pagination-controls-button-border-color' token */ --kite-pagination-controls-button-disabled-icon-fill-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'pagination-controls-button-disabled-icon-color' token */ --kite-pagination-controls-button-hover-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'pagination-controls-button-hover-background-color' token */ --kite-pagination-controls-button-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'pagination-controls-button-focus-ring-color' token */ --kite-pagination-per-page-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'pagination-page-size-label-text-color' token */ --kite-pagination-item-count-label-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'pagination-count-text-color' token */ --kite-pagination-item-count-label-text-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'pagination-count-text-color' token */ --kite-payment-logo-border-width: var(--kite-border-width-none, 0); --kite-payment-logo-width: var(--kite-size-24, 1.5rem); --kite-payment-logo-height: var(--kite-size-24, 1.5rem); --kite-payment-logo-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-payment-logo-elevation: var(--kite-elevation-0, none); --kite-popover-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-popover-elevation: var(--kite-elevation-2, 0 2px 8px 0 rgba(0, 0, 0, 0.1)); --kite-popover-zindex: var(--kite-zindex-dropdown, 1100); --kite-popover-breakpoint-md-title-text-size: var(--kite-typography-lg-title-6-size, 1.25rem); --kite-popover-breakpoint-md-max-width: var(--kite-form-control-max-width, 18rem); --kite-popover-arrow-height: var(--kite-size-8, 0.5rem); --kite-popover-arrow-width: var(--kite-size-16, 1rem); --kite-popover-trigger-cursor: var(--kite-cursor-action, pointer); --kite-popover-trigger-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-popover-trigger-icon-height: var(--kite-size-16, 1rem); --kite-popover-trigger-icon-width: var(--kite-size-16, 1rem); --kite-popover-dismiss-icon-cursor: var(--kite-cursor-action, pointer); --kite-popover-dismiss-icon-height: var(--kite-size-16, 1rem); --kite-popover-dismiss-icon-width: var(--kite-size-16, 1rem); --kite-popover-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'popover-background-color' token */ --kite-popover-z-index: var(--kite-zindex-dropdown, 1100); /** @deprecated: Replace with 'popover-zindex' token */ --kite-popover-trigger-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-icon-color' token */ --kite-popover-trigger-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-label-text-color' token */ --kite-popover-trigger-active-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-expanded-icon-color' token */ --kite-popover-trigger-focus-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-focus-icon-color' token */ --kite-popover-trigger-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-focus-ring-color' token */ --kite-popover-trigger-hover-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-trigger-hover-icon-color' token */ --kite-popover-arrow-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'popover-arrow-background-color' token */ --kite-popover-dismiss-icon-fill: var(--kite-color-black, #000000); /** @deprecated: Replace with 'popover-dismiss-icon-color' token */ --kite-popover-dismiss-icon-fill-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'popover-dismiss-icon-color' token */ --kite-progress-indicator-border-width: var(--kite-border-width-none, 0); --kite-progress-indicator-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-progress-indicator-zindex: var(--kite-zindex-dialog, 1300); --kite-progress-indicator-label-text-weight: var(--kite-font-weight-bold, 700); --kite-progress-indicator-track-color: var(--kite-color-gray-20, #d8dde6); --kite-progress-indicator-track-size: var(--kite-size-4, 0.25rem); --kite-progress-indicator-value-label-weight: var(--kite-font-weight-bold, 700); --kite-progress-indicator-secondary-label-color: var(--kite-color-gray-30, #63738a); --kite-progress-indicator-icon-width: var(--kite-size-20, 1.25rem); --kite-progress-indicator-button-fill-color: var(--kite-color-white, #ffffff); --kite-progress-indicator-circular-height: var(--kite-progress-indicator-circular-width, 2.5rem); --kite-progress-indicator-circular-height-px: var(--kite-progress-indicator-circular-width-px, 40px); --kite-progress-indicator-circular-label-text-weight: var(--kite-font-weight-bold, 700); --kite-progress-indicator-circular-icon-height: var(--kite-progress-indicator-circular-icon-width, 2.75rem); --kite-progress-indicator-circular-sm-track-size: var(--kite-size-2, 0.125rem); --kite-progress-indicator-circular-sm-width: var(--kite-size-24, 1.5rem); --kite-progress-indicator-circular-sm-height-px: var(--kite-progress-indicator-circular-sm-width-px, 24px); --kite-progress-indicator-circular-sm-icon-height: var(--kite-progress-indicator-circular-sm-icon-width, 1.625rem); --kite-progress-indicator-circular-lg-track-size: var(--kite-size-4, 0.25rem); --kite-progress-indicator-circular-lg-height: var(--kite-progress-indicator-circular-lg-width, 5rem); --kite-progress-indicator-circular-lg-height-px: var(--kite-progress-indicator-circular-lg-width-px, 80px); --kite-progress-indicator-circular-lg-icon-height: var(--kite-progress-indicator-circular-lg-icon-width, 5rem); --kite-progress-indicator-lg-border-width: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'progress-indicator-circular-lg-track-size' token */ --kite-progress-indicator-lg-status-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'progress-indicator-value-label-color' token */ --kite-progress-indicator-lg-status-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with 'progress-indicator-circular-value-label-weight' token */ --kite-progress-indicator-lg-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'progress-indicator-label-text-color' token */ --kite-progress-indicator-lg-label-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with 'progress-indicator-circular-label-text-weight' token */ --kite-progress-indicator-lg-sub-label-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'progress-indicator-secondary-label-color' token */ --kite-progress-indicator-lg-sub-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'progress-indicator-secondary-label-color' token */ --kite-progress-indicator-md-border-width: var(--kite-size-4, 0.25rem); /** @deprecated: Replace with 'progress-indicator-track-size' token */ --kite-progress-indicator-sm-border-width: var(--kite-size-2, 0.125rem); /** @deprecated: Replace with 'progress-indicator-circular-sm-track-size' token */ --kite-progress-indicator-sm-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'progress-indicator-circular-sm-height' token */ --kite-progress-indicator-sm-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'progress-indicator-circular-sm-width' token */ --kite-radio-border-offset: var(--kite-size-2, 0.125rem); --kite-radio-height: var(--kite-size-20, 1.25rem); --kite-radio-focus-ring-width: var(--kite-size-4, 0.25rem); --kite-radio-focus-ring-offset: var(--kite-size-4, 0.25rem); --kite-radio-selected-indicator-height: var(--kite-size-12, 0.75rem); --kite-radio-input-margin-top: var(--kite-size-2, 0.125rem); --kite-radio-input-margin-bottom: var(--kite-size-2, 0.125rem); --kite-radio-border-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'radio-border-color' token */ --kite-radio-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'radio-label-text-color' token */ --kite-radio-selected-border-color-dark: var(--kite-color-blue-20, #0271eb); /** @deprecated: Replace with 'radio-selected-border-color' token */ --kite-radio-selected-indicator-background-color-dark: var(--kite-color-blue-20, #0271eb); /** @deprecated: Replace with 'radio-selected-indicator-background-color' token */ --kite-radio-selected-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-selected-disabled-border-color' token */ --kite-radio-selected-disabled-center-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-selected-disabled-indicator-background-color' token */ --kite-radio-selected-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'radio-selected-focus-ring-color' token */ --kite-radio-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-disabled-border-color' token */ --kite-radio-disabled-label-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'radio-disabled-label-text-color' token */ --kite-search-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-search-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-search-input-max-width: var(--kite-form-control-max-width, 18rem); --kite-search-input-height: var(--kite-size-touch-target, 2.75rem); --kite-search-input-action-cursor: var(--kite-cursor-action, pointer); --kite-search-input-addon-padding-top: var(--kite-form-control-addon-padding-top, 0); --kite-search-input-addon-padding-bottom: var(--kite-form-control-addon-padding-bottom, 0); --kite-select-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-select-border-radius: var(--kite-form-control-border-radius, 0); --kite-select-max-width: var(--kite-form-control-max-width, 18rem); --kite-select-height: var(--kite-size-touch-target, 2.75rem); --kite-select-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-select-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-select-icon-height: var(--kite-size-24, 1.5rem); --kite-select-icon-width: var(--kite-size-24, 1.5rem); --kite-select-icon-color: var(--kite-color-dark-blue-30, #000f1a); --kite-select-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'select-background-color' token */ --kite-select-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-border-color' token */ --kite-select-icon-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-icon-color' token */ --kite-select-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-label-text-color' token */ --kite-select-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-text-color' token */ --kite-select-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'select-focus-ring-color' token */ --kite-select-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'select-disabled-background-color' token */ --kite-select-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-disabled-border-color' token */ --kite-select-disabled-icon-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-disabled-icon-color' token */ --kite-select-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'select-disabled-text-color' token */ --kite-select-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'select-error-border-color' token */ --kite-select-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'select-error-text-color' token */ --kite-select-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-skip-link-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-skip-link-text-color: var(--kite-color-white, #ffffff); --kite-skip-link-text-weight: var(--kite-font-weight-medium, 500); --kite-skip-link-border-color: var(--kite-color-blue-20, #0271eb); --kite-skip-link-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-skip-link-zindex: var(--kite-zindex-dropdown, 1100); --kite-skip-link-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'skip-link-background-color' token */ --kite-skip-link-border-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'skip-link-border-color' token */ --kite-skip-link-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'skip-link-text-color' token */ --kite-switch-focus-ring-radius: var(--kite-size-16, 1rem); --kite-switch-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-switch-cursor: var(--kite-cursor-action, pointer); --kite-switch-thumb-background-color: var(--kite-color-white, #ffffff); --kite-switch-thumb-height: var(--kite-size-20, 1.25rem); --kite-switch-thumb-transform-x: var(--kite-size-24, 1.5rem); --kite-switch-track-background-color: var(--kite-color-gray-30, #63738a); --kite-switch-track-border-radius: var(--kite-size-32, 2rem); --kite-switch-track-padding-top: var(--kite-size-2, 0.125rem); --kite-switch-track-padding-right: var(--kite-size-2, 0.125rem); --kite-switch-track-padding-bottom: var(--kite-size-2, 0.125rem); --kite-switch-track-padding-left: var(--kite-size-2, 0.125rem); --kite-switch-track-height: var(--kite-size-24, 1.5rem); --kite-switch-track-width: var(--kite-size-48, 3rem); --kite-switch-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-label-text-color' token */ --kite-switch-on-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-on-focus-ring-color' token */ --kite-switch-indicator-background-color: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-thumb-background-color' token */ --kite-switch-indicator-background-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-thumb-background-color' token */ --kite-switch-indicator-height: var(--kite-size-20, 1.25rem); /** @deprecated: Replace with 'switch-thumb-height' token */ --kite-switch-indicator-width: var(--kite-size-20, 1.25rem); /** @deprecated: Replace with 'switch-thumb-width' token */ --kite-switch-disabled-indicator-background-color: var(--kite-color-gray-20, #d8dde6); /** @deprecated: Replace with 'switch-disabled-thumb-background-color' token */ --kite-switch-disabled-indicator-background-color-dark: var(--kite-color-gray-25, #9ba9bd); /** @deprecated: Replace with 'switch-disabled-thumb-background-color' token */ --kite-switch-off-track-background-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'switch-track-background-color' token */ --kite-switch-off-track-background-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'switch-track-background-color' token */ --kite-switch-off-focus-ring-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'switch-focus-ring-color' token */ --kite-switch-off-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'switch-focus-ring-color' token */ --kite-tabs-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-tabs-tab-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-tabs-tab-hover-border-bottom-color: var(--kite-color-gray-30, #63738a); --kite-tabs-tab-selected-text-weight: var(--kite-font-weight-bold, 700); --kite-tabs-tab-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-tabs-tab-cursor: var(--kite-cursor-action, pointer); --kite-tabs-panel-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-tabs-item-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-text-color' token */ --kite-tabs-item-cursor: var(--kite-cursor-action, pointer); /** @deprecated: Replace with 'tabs-tab-cursor' token */ --kite-tabs-item-active-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-selected-text-color' token */ --kite-tabs-item-active-text-weight: var(--kite-font-weight-bold, 700); /** @deprecated: Replace with 'tabs-tab-selected-text-weight' token */ --kite-tabs-item-hover-border-bottom: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'tabs-tab-hover-border-bottom' token */ --kite-tabs-item-hover-border-bottom-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-hover-border-bottom' token */ --kite-tabs-item-disabled-cursor: var(--kite-cursor-disabled, not-allowed); /** @deprecated: Replace with 'tabs-tab-disabled-cursor' token */ --kite-tabs-item-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'tabs-tab-disabled-text-color' token */ --kite-tabs-item-focus-ring-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tabs-tab-focus-ring-color' token */ --kite-tag-background-color: var(--kite-color-gray-10, #f8f8f8); --kite-tag-text-size: var(--kite-size-14, 0.875rem); --kite-tag-text-weight: var(--kite-font-weight-medium, 500); --kite-tag-border-color: var(--kite-color-gray-25, #9ba9bd); --kite-tag-icon-size: var(--kite-size-16, 1rem); --kite-tag-caution-text-color: var(--kite-color-black, #000000); --kite-tag-negative-text-color: var(--kite-color-black, #000000); --kite-tag-neutral-text-color: var(--kite-color-black, #000000); --kite-tag-positive-text-color: var(--kite-color-black, #000000); --kite-tag-solid-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-tag-solid-text-color: var(--kite-color-black, #000000); --kite-tag-solid-caution-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-tag-solid-negative-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-tag-solid-neutral-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-tag-solid-positive-border-color: var(--kite-tag-solid-border-color, rgba(0, 0, 0, 0)); --kite-text-area-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-text-area-text-overflow: var(--kite-form-control-text-overflow, clip); --kite-text-area-border-radius: var(--kite-form-control-border-radius, 0); --kite-text-area-max-width: var(--kite-form-control-max-width, 18rem); --kite-text-area-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-text-area-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-text-area-character-count-text-color: var(--kite-color-gray-30, #63738a); --kite-text-area-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'text-area-background-color' token */ --kite-text-area-hint-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-placeholder-text-color' token */ --kite-text-area-hint-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-placeholder-text-color' token */ --kite-text-area-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-area-label-text-color' token */ --kite-text-area-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-area-text-color' token */ --kite-text-area-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'text-area-disabled-background-color' token */ --kite-text-area-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-disabled-border-color' token */ --kite-text-area-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-area-disabled-text-color' token */ --kite-text-area-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-area-error-border-color' token */ --kite-text-area-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-area-error-feedback-text-color' token */ --kite-text-area-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-text-area-focus-ring-color-dark: var(--kite-color-blue-10, #4da4ff); /** @deprecated: Replace with 'text-area-focus-ring-color' token */ --kite-text-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-text-input-text-overflow: var(--kite-form-control-text-overflow, clip); --kite-text-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-text-input-height: var(--kite-size-touch-target, 2.75rem); --kite-text-input-max-width: var(--kite-form-control-max-width, 18rem); --kite-text-input-addon-padding-top: var(--kite-form-control-addon-padding-top, 0); --kite-text-input-addon-padding-bottom: var(--kite-form-control-addon-padding-bottom, 0); --kite-text-input-character-count-text-color: var(--kite-color-gray-30, #63738a); --kite-text-input-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-text-input-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-text-input-secure-text-overflow: var(--kite-form-control-text-overflow, clip); --kite-text-input-secure-icon-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-text-input-secure-confirm-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-confirm-icon-width' token */ --kite-text-input-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'text-input-background-color' token */ --kite-text-input-hint-text-color: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-placeholder-text-color' token */ --kite-text-input-hint-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-placeholder-text-color' token */ --kite-text-input-label-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-input-label-text-color' token */ --kite-text-input-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'text-input-text-color' token */ --kite-text-input-disabled-background-color-dark: var(--kite-color-dark-blue-20, #002139); /** @deprecated: Replace with 'text-input-disabled-background-color' token */ --kite-text-input-disabled-border-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-disabled-border-color' token */ --kite-text-input-disabled-text-color-dark: var(--kite-color-gray-30, #63738a); /** @deprecated: Replace with 'text-input-disabled-text-color' token */ --kite-text-input-error-border-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-input-error-border-color' token */ --kite-text-input-error-text-color-dark: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'text-input-error-feedback-text-color' token */ --kite-text-input-error-text-size: var(--kite-typography-sm-body-size, 1rem); /** @deprecated: Inherit from default body text size. */ --kite-text-input-focus-ring-color-dark: var(--kite-color-blue-10, #4da4ff); /** @deprecated: Replace with 'text-input-focus-ring-color' token */ --kite-text-input-secure-show-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-icon-height' token */ --kite-text-input-secure-show-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-icon-width' token */ --kite-text-input-secure-show-icon-focus-ring-color-dark: var(--kite-color-blue-10, #4da4ff); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-color' token */ --kite-text-input-secure-hide-icon-height: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-visible-icon-height' token */ --kite-text-input-secure-hide-icon-width: var(--kite-size-24, 1.5rem); /** @deprecated: Replace with 'text-input-secure-visible-icon-width' token */ --kite-time-input-text-line-height: var(--kite-form-control-text-line-height, 1.25); --kite-time-input-border-radius: var(--kite-form-control-border-radius, 0); --kite-time-input-max-width: var(--kite-form-control-max-width, 18rem); --kite-time-input-height: var(--kite-size-touch-target, 2.75rem); --kite-time-input-focus-ring-offset: var(--kite-focus-ring-inset, -0.125rem); --kite-time-input-helper-text-size: var(--kite-form-control-helper-text-size, 0.75rem); --kite-time-input-helper-text-line-height: var(--kite-form-control-helper-text-line-height, 1.333); --kite-time-input-icon-color: var(--kite-color-blue-20, #0271eb); --kite-toast-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-toast-text-color: var(--kite-color-white, #ffffff); --kite-toast-min-height: var(--kite-size-touch-target, 2.75rem); --kite-toast-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-toast-elevation: var(--kite-elevation-3, 0 3px 12px 0 rgba(0, 0, 0, 0.1)); --kite-toast-transition-timing-function: var(--kite-toast-transition-curve, cubic-bezier(0.25, 0.8, 0.5, 1)); --kite-toast-zindex: var(--kite-zindex-notification, 1600); --kite-toast-icon-color: var(--kite-color-green-10, #00bf1f); --kite-toast-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'toast-background-color' token */ --kite-toast-height: var(--kite-size-touch-target, 2.75rem); /** @deprecated: Replace with 'toast-min-height' token */ --kite-toast-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'toast-text-color' token */ --kite-toast-z-index: var(--kite-zindex-notification, 1600); /** @deprecated: Replace with 'toast-zindex' token */ --kite-tooltip-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-tooltip-text-color: var(--kite-color-white, #ffffff); --kite-tooltip-disabled-cursor: var(--kite-cursor-disabled, not-allowed); --kite-tooltip-zindex: var(--kite-zindex-dropdown, 1100); --kite-tooltip-arrow-height: var(--kite-size-8, 0.5rem); --kite-tooltip-arrow-width: var(--kite-size-12, 0.75rem); --kite-tooltip-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'tooltip-background-color' token */ --kite-tooltip-text-color-dark: var(--kite-color-white, #ffffff); /** @deprecated: Replace with 'tooltip-text-color' token */ --kite-tooltip-arrow-background-color-dark: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with 'tooltip-arrow-background-color' token */ --kite-border-radius-circle: var(--kite-size-radius-circle, 50%); --kite-border-radius-sm: var(--kite-size-radius-sm, 0.125rem); --kite-border-radius-md: var(--kite-size-radius-md, 0.25rem); /** Border radius for buttons, cards, toasts ... */ --kite-border-radius-lg: var(--kite-size-radius-lg, 0.5rem); --kite-color-caution-focus: var(--kite-color-caution, #faa41a); /** Focus state of caution color */ --kite-color-caution-hover: var(--kite-color-caution, #faa41a); /** Hover state of caution color */ --kite-color-caution-press: var(--kite-color-caution, #faa41a); /** Pressed state of caution color */ --kite-color-neutral-focus: var(--kite-color-neutral, #73b7ff); /** Focus state of neutral color */ --kite-color-neutral-hover: var(--kite-color-neutral, #73b7ff); /** Hover state of neutral color */ --kite-color-neutral-press: var(--kite-color-neutral, #73b7ff); /** Pressed state of neutral color */ --kite-color-positive-focus: var(--kite-color-positive, #008516); /** Focus state of positive color */ --kite-color-positive-hover: var(--kite-color-positive, #008516); /** Hover state of positive color */ --kite-color-positive-press: var(--kite-color-positive, #008516); /** Pressed state of positive color */ --kite-color-disabled-focus: var(--kite-color-disabled, #9ba9bd); /** Focus state of disabled color */ --kite-color-disabled-hover: var(--kite-color-disabled, #9ba9bd); /** Hover state of disabled color */ --kite-color-disabled-press: var(--kite-color-disabled, #9ba9bd); /** Pressed state of disabled color */ --kite-font-family-default: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** Default font-family for body copy */ --kite-font-family-heading: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** Default font-family for headings */ --kite-font-family-text: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** @deprecated: Replace with "kite-font-family" token */ --kite-border-width: var(--kite-border-width-thin, 0.0625rem); /** Default border width for UI elements */ --kite-container-border-color: var(--kite-border-color, #d8dde6); --kite-container-border-style: var(--kite-border-style, solid); --kite-container-padding-top: var(--kite-spacing-md, 1rem); --kite-container-padding-right: var(--kite-spacing-md, 1rem); --kite-container-padding-bottom: var(--kite-spacing-md, 1rem); --kite-container-padding-left: var(--kite-spacing-md, 1rem); --kite-focus-ring-color: var(--kite-color-focus, #0257b2); /** Default color for the outline (aka, focus ring) around focused UI elements */ --kite-focus-color: var(--kite-color-focus, #0257b2); /** @deprecated: Replace with 'color-focus' token */ --kite-font-family: var(--kite-font-family-sans-serif, "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); /** Default font-family for body copy */ --kite-my-component-text-color: var(--kite-color-text, #000000); --kite-my-component-border-color: var(--kite-border-color, #d8dde6); --kite-my-component-border-style: var(--kite-border-style, solid); --kite-my-component-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-my-component-padding-right: var(--kite-spacing-md, 1rem); --kite-my-component-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-my-component-padding-left: var(--kite-spacing-md, 1rem); --kite-my-component-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-my-component-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-my-component-transition-duration: var(--kite-motion-faster, 400ms); --kite-my-component-transition-timing-function: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-my-component-list-text-color: var(--kite-color-text, #000000); --kite-my-component-list-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-my-component-list-padding-right: var(--kite-spacing-md, 1rem); --kite-my-component-list-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-my-component-list-padding-left: var(--kite-spacing-md, 1rem); --kite-my-component-error-background-color: var(--kite-color-error, #d6312b); --kite-my-component-variant-name-background-color: var(--kite-color-primary, #0271eb); --kite-my-component-variant-name-text-color: var(--kite-color-success, #008516); --kite-my-component-variant-name-margin-left: var(--kite-spacing-lg, 1.25rem); --kite-my-component-variant-name-padding-bottom: var(--kite-spacing-lg, 1.25rem); --kite-form-control-text-color: var(--kite-color-text, #000000); --kite-form-control-text-size: var(--kite-typography-body-size, 1rem); --kite-form-control-border-style: var(--kite-border-style, solid); --kite-form-control-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-form-control-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-form-control-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-form-control-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-form-control-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-form-control-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-focus-border-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-hover-border-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-disabled-background-color: var(--kite-form-control-background-color, #ffffff); --kite-form-control-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-disabled-helper-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-addon-icon-color: var(--kite-color-primary, #0271eb); --kite-form-control-addon-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-form-control-addon-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-form-control-helper-text-color: var(--kite-color-text-secondary, #63738a); --kite-form-control-label-text-color: var(--kite-color-text, #000000); --kite-form-control-label-text-size: var(--kite-typography-body-size, 1rem); --kite-form-control-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-form-control-label-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-feedback-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-error-border-color: var(--kite-color-negative, #d6312b); --kite-form-control-error-border-width: var(--kite-border-width-thick, 0.125rem); --kite-form-control-error-feedback-text-color: var(--kite-color-negative, #d6312b); --kite-form-control-picker-background-color: var(--kite-container-background-color, #ffffff); --kite-form-control-picker-border-style: var(--kite-border-style, solid); --kite-form-control-picker-transition-duration: var(--kite-motion-fast, 750ms); --kite-form-control-picker-transition-timing-function: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); --kite-form-control-picker-offset: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-picker-list-item-text-color: var(--kite-color-text, #000000); --kite-form-control-picker-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-form-control-picker-list-item-padding-right: var(--kite-spacing-md, 1rem); --kite-form-control-picker-list-item-line-height: var(--kite-typography-body-line-height, 1.5); --kite-form-control-picker-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-form-control-picker-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-form-control-picker-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-form-control-picker-list-item-icon-margin-right: var(--kite-spacing-md, 1rem); --kite-form-control-picker-list-item-negative-text-color: var(--kite-color-negative, #d6312b); --kite-form-control-picker-list-item-check-icon-color: var(--kite-color-primary, #0271eb); --kite-form-control-picker-list-item-check-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-picker-list-item-check-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-form-control-label-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "form-control-disabled-label-text-color" token */ --kite-form-control-input-border-width: var(--kite-border-width-thin, 0.0625rem); /** @deprecated: Replace with "form-control-border-width" token */ --kite-form-control-input-padding-top: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "form-control-padding-top" token */ --kite-form-control-input-padding-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "form-control-padding-right" token */ --kite-form-control-input-padding-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "form-control-padding-bottom" token */ --kite-form-control-input-padding-left: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "form-control-padding-left" token */ --kite-form-control-input-disabled-border-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "form-control-disabled-border-color" token */ --kite-form-control-input-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "form-control-disabled-text-color" token */ --kite-form-control-input-error-border-color: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "form-control-error-border-color" token */ --kite-form-control-input-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with "form-control-focus-ring-style" token */ --kite-form-control-input-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with "form-control-focus-ring-width" token */ --kite-form-control-error-text-color: var(--kite-color-error, #d6312b); /** @deprecated: Inherit from default body text color, and use the error state */ --kite-form-control-error-text-margin-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with "form-control-feedback-margin-top" token */ --kite-form-spacing-inline: var(--kite-spacing-md, 1rem); /** Horizontal spacing to use between inline form fields and groups */ --kite-form-spacing-stack-md: var(--kite-spacing-md, 1rem); --kite-form-spacing-stack-xl: var(--kite-spacing-xl, 1.5rem); --kite-form-spacing-stack-2xl: var(--kite-spacing-2xl, 2rem); --kite-grid-xs-gutters: var(--kite-spacing-md, 1rem); --kite-grid-xs-margins: var(--kite-spacing-md, 1rem); --kite-grid-sm-gutters: var(--kite-spacing-md, 1rem); --kite-grid-sm-margins: var(--kite-spacing-md, 1rem); --kite-grid-md-gutters: var(--kite-spacing-md, 1rem); --kite-grid-md-margins: var(--kite-spacing-md, 1rem); --kite-grid-lg-gutters: var(--kite-spacing-md, 1rem); --kite-grid-lg-margins: var(--kite-spacing-xl, 1.5rem); --kite-grid-xl-gutters: var(--kite-spacing-md, 1rem); --kite-grid-xl-margins: var(--kite-spacing-xl, 1.5rem); --kite-grid-2xl-gutters: var(--kite-spacing-md, 1rem); --kite-grid-2xl-margins: var(--kite-spacing-xl, 1.5rem); --kite-typography-display-weight: var(--kite-typography-sm-display-weight, 800); --kite-typography-display-style: var(--kite-typography-sm-display-style, normal); --kite-typography-title-1-weight: var(--kite-typography-sm-title-1-weight, 800); --kite-typography-title-1-style: var(--kite-typography-sm-title-1-style, normal); --kite-typography-title-1-letter-spacing: var(--kite-typography-sm-title-1-letter-spacing, normal); --kite-typography-title-2-weight: var(--kite-typography-sm-title-2-weight, 700); --kite-typography-title-2-style: var(--kite-typography-sm-title-2-style, normal); --kite-typography-title-2-letter-spacing: var(--kite-typography-sm-title-2-letter-spacing, normal); --kite-typography-title-3-weight: var(--kite-typography-sm-title-3-weight, 700); --kite-typography-title-3-style: var(--kite-typography-sm-title-3-style, normal); --kite-typography-title-3-letter-spacing: var(--kite-typography-sm-title-3-letter-spacing, normal); --kite-typography-title-4-weight: var(--kite-typography-sm-title-4-weight, 500); --kite-typography-title-4-style: var(--kite-typography-sm-title-4-style, normal); --kite-typography-title-4-letter-spacing: var(--kite-typography-sm-title-4-letter-spacing, normal); --kite-typography-title-5-weight: var(--kite-typography-sm-title-5-weight, 500); --kite-typography-title-5-style: var(--kite-typography-sm-title-5-style, normal); --kite-typography-title-5-letter-spacing: var(--kite-typography-sm-title-5-letter-spacing, normal); --kite-typography-title-6-weight: var(--kite-typography-sm-title-6-weight, 500); --kite-typography-title-6-style: var(--kite-typography-sm-title-6-style, normal); --kite-typography-title-6-letter-spacing: var(--kite-typography-sm-title-6-letter-spacing, normal); --kite-typography-body-display-weight: var(--kite-typography-sm-body-display-weight, 400); --kite-typography-body-display-style: var(--kite-typography-sm-body-display-style, normal); --kite-typography-body-display-letter-spacing: var(--kite-typography-sm-body-display-letter-spacing, normal); --kite-typography-body-weight: var(--kite-typography-sm-body-weight, 400); --kite-typography-body-style: var(--kite-typography-sm-body-style, normal); --kite-typography-body-letter-spacing: var(--kite-typography-sm-body-letter-spacing, normal); --kite-typography-eyebrow-weight: var(--kite-typography-sm-eyebrow-weight, 700); --kite-typography-eyebrow-style: var(--kite-typography-sm-eyebrow-style, normal); --kite-typography-caption-1-weight: var(--kite-typography-sm-caption-1-weight, 400); --kite-typography-caption-1-style: var(--kite-typography-sm-caption-1-style, normal); --kite-typography-caption-1-letter-spacing: var(--kite-typography-sm-caption-1-letter-spacing, normal); --kite-typography-caption-2-weight: var(--kite-typography-sm-caption-2-weight, 400); --kite-typography-caption-2-style: var(--kite-typography-sm-caption-2-style, normal); --kite-typography-caption-2-letter-spacing: var(--kite-typography-sm-caption-2-letter-spacing, normal); --kite-typography-sm-display-letter-spacing: var(--kite-letter-spacing, normal); --kite-typography-sm-display-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-sm-title-1-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-sm-title-2-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-title-3-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-sm-title-6-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-sm-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-sm-body-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-sm-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-sm-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-sm-caption-1-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-sm-caption-2-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-lg-display-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-lg-title-1-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-lg-title-2-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-lg-title-3-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-title-5-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-title-6-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-lg-body-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-lg-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-lg-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-lg-caption-1-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-lg-caption-2-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-caption-size: var(--kite-typography-caption-1-size, 0.875rem); /** @deprecated: Replace with 'typography-caption-1-size' token */ --kite-typography-caption-line-height: var(--kite-typography-caption-1-line-height, 1.429); /** @deprecated: Replace with 'typography-caption-1-line-height' token */ --kite-typography-sm-caption-margin-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with 'typography-sm-caption-1-margin-bottom' token */ --kite-typography-lg-caption-margin-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with 'typography-lg-caption-1-margin-bottom' token */ --kite-typography-rutledge-sm-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-sm-title-1-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-4-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-5-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-title-6-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-sm-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-sm-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-sm-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-sm-eyebrow-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-sm-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-lg-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-lg-title-1-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-4-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-5-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-title-6-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-body-display-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-lg-body-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-lg-eyebrow-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-lg-caption-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-xxs-title-1-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xxs-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xxs-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xxs-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xxs-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-rutledge-xxs-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xxs-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-xxs-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xxs-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xs-title-1-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xs-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xs-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-xs-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xs-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-rutledge-xs-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-xs-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-xs-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xs-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-md-title-1-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-md-title-2-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-md-title-3-margin-bottom: var(--kite-spacing-md, 1rem); --kite-typography-rutledge-md-title-4-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-md-title-5-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-typography-rutledge-md-body-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-typography-rutledge-md-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-md-eyebrow-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-md-caption-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xl-title-1-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-typography-rutledge-xl-title-2-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xl-title-3-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-typography-rutledge-xl-title-4-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-xl-title-5-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-typography-rutledge-xl-body-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-typography-rutledge-xl-eyebrow-letter-spacing: var(--kite-letter-spacing-lg, 0.125rem); --kite-typography-rutledge-xl-eyebrow-margin-bottom: var(--kite-spacing-sm, 0.75rem); --kite-typography-rutledge-xl-caption-margin-bottom: var(--kite-spacing-xl, 1.5rem); --kite-accordion-text-color: var(--kite-color-text, #000000); --kite-accordion-border-color: var(--kite-border-color, #d8dde6); --kite-accordion-border-style: var(--kite-border-style, solid); --kite-accordion-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-accordion-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-accordion-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-accordion-disabled-title-text-color: var(--kite-color-disabled, #9ba9bd); --kite-accordion-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-accordion-icon-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-accordion-icon-transition-duration: var(--kite-motion-fast, 750ms); --kite-accordion-padding-top-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-right-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-bottom-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-left-sm: var(--kite-spacing-md, 1rem); --kite-accordion-padding-top-md: var(--kite-spacing-md, 1rem); --kite-accordion-padding-right-md: var(--kite-spacing-xl, 1.5rem); --kite-accordion-padding-bottom-md: var(--kite-spacing-md, 1rem); --kite-accordion-padding-left-md: var(--kite-spacing-xl, 1.5rem); --kite-accordion-padding-top-lg: var(--kite-spacing-md, 1rem); --kite-accordion-padding-right-lg: var(--kite-spacing-2xl, 2rem); --kite-accordion-padding-bottom-lg: var(--kite-spacing-md, 1rem); --kite-accordion-padding-left-lg: var(--kite-spacing-2xl, 2rem); --kite-accordion-label-text-color: var(--kite-color-text, #000000); --kite-accordion-label-text-size: var(--kite-typography-body-size, 1rem); --kite-accordion-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-accordion-label-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-accordion-title-text-color: var(--kite-color-text, #000000); --kite-accordion-title-text-size: var(--kite-typography-body-size, 1rem); --kite-accordion-title-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-accordion-title-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-accordion-expanded-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-accordion-expanded-padding-bottom: var(--kite-spacing-2xl, 2rem); --kite-accordion-expanded-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-accordion-expanded-title-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-accordion-expanded-transition-duration: var(--kite-motion-fast, 750ms); --kite-accordion-negative-label-text-color: var(--kite-color-negative, #d6312b); --kite-accordion-positive-label-text-color: var(--kite-color-positive, #008516); --kite-accordion-sm-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-top-sm" token */ --kite-accordion-sm-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-right-sm" token */ --kite-accordion-sm-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-bottom-sm" token */ --kite-accordion-sm-padding-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-left-sm" token */ --kite-accordion-md-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-top-md" token */ --kite-accordion-md-padding-right: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "accordion-padding-right-md" token */ --kite-accordion-md-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-bottom-md" token */ --kite-accordion-md-padding-left: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "accordion-padding-left-md" token */ --kite-accordion-lg-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-top-lg" token */ --kite-accordion-lg-padding-right: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "accordion-padding-right-lg" token */ --kite-accordion-lg-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "accordion-padding-bottom-lg" token */ --kite-accordion-lg-padding-left: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "accordion-padding-left-lg" token */ --kite-accordion-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "accordion-border-color" token */ --kite-accordion-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with "accordion-border-style" token */ --kite-accordion-alert-label-text-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "accordion-negative-label-text-color" token */ --kite-accordion-disabled-icon-fill: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "accordion-disabled-icon-color" token */ --kite-accordion-icon-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'accordion-icon-transition-timing-function' token */ --kite-accordion-expanded-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'accordion-expanded-transition-timing-function' token */ --kite-alert-border-style: var(--kite-border-style, solid); --kite-alert-padding-top: var(--kite-spacing-md, 1rem); --kite-alert-padding-right: var(--kite-spacing-md, 1rem); --kite-alert-padding-bottom: var(--kite-spacing-md, 1rem); --kite-alert-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-alert-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-alert-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-alert-text-color: var(--kite-color-text, #000000); --kite-alert-text-size: var(--kite-typography-body-size, 1rem); --kite-alert-dismiss-icon-margin-left: var(--kite-spacing-md, 1rem); --kite-alert-status-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-alert-link-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-alert-link-text-color: var(--kite-color-primary, #0271eb); --kite-alert-link-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-alert-link-icon-color: var(--kite-color-primary, #0271eb); --kite-alert-caution-border-left-color: var(--kite-color-caution, #faa41a); --kite-alert-caution-status-icon-color: var(--kite-color-caution, #faa41a); --kite-alert-negative-border-left-color: var(--kite-color-negative, #d6312b); --kite-alert-negative-status-icon-color: var(--kite-color-negative, #d6312b); --kite-alert-neutral-border-left-color: var(--kite-color-neutral, #73b7ff); --kite-alert-neutral-status-icon-color: var(--kite-color-neutral, #73b7ff); --kite-alert-positive-border-left-color: var(--kite-color-positive, #008516); --kite-alert-positive-status-icon-color: var(--kite-color-positive, #008516); --kite-alert-global-status-icon-margin-right: var(--kite-spacing-sm, 0.75rem); --kite-alert-global-padding-top: var(--kite-spacing-md, 1rem); --kite-alert-global-padding-right: var(--kite-spacing-md, 1rem); --kite-alert-global-padding-bottom: var(--kite-spacing-md, 1rem); --kite-alert-global-padding-left: var(--kite-spacing-md, 1rem); --kite-alert-global-caution-background-color: var(--kite-color-caution, #faa41a); --kite-alert-global-caution-status-icon-color: var(--kite-color-on-caution, #000000); --kite-alert-global-caution-link-text-color: var(--kite-color-on-caution, #000000); --kite-alert-global-caution-link-icon-color: var(--kite-color-on-caution, #000000); --kite-alert-global-caution-text-color: var(--kite-color-on-caution, #000000); --kite-alert-global-negative-background-color: var(--kite-color-negative, #d6312b); --kite-alert-global-negative-dismiss-icon-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-status-icon-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-link-text-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-link-icon-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-negative-text-color: var(--kite-color-on-negative, #ffffff); --kite-alert-global-neutral-text-color: var(--kite-color-on-neutral, #000000); --kite-alert-global-neutral-background-color: var(--kite-color-neutral, #73b7ff); --kite-alert-global-neutral-status-icon-color: var(--kite-color-on-neutral, #000000); --kite-alert-global-neutral-link-text-color: var(--kite-color-on-neutral, #000000); --kite-alert-global-neutral-link-icon-color: var(--kite-color-on-neutral, #000000); --kite-alert-passive-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-padding-top: var(--kite-spacing-md, 1rem); --kite-alert-passive-padding-right: var(--kite-spacing-md, 1rem); --kite-alert-passive-padding-bottom: var(--kite-spacing-md, 1rem); --kite-alert-passive-padding-left: var(--kite-spacing-md, 1rem); --kite-alert-passive-breakpoint-lg-margin-top: var(--kite-spacing-xl, 1.5rem); --kite-alert-passive-breakpoint-lg-margin-right: var(--kite-spacing-xl, 1.5rem); --kite-alert-passive-transition-duration: var(--kite-motion-fast, 750ms); --kite-alert-passive-entry-transition-timing-function: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); --kite-alert-passive-exit-transition-timing-function: var(--kite-motion-exit, cubic-bezier(0.42, 0, 1, 1)); --kite-alert-passive-title-text-size: var(--kite-typography-body-size, 1rem); --kite-alert-passive-title-line-height: var(--kite-typography-body-line-height, 1.5); --kite-alert-passive-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-alert-passive-status-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-negative-background-color: var(--kite-color-negative-muted, #ffefef); --kite-alert-passive-caution-background-color: var(--kite-color-caution-muted, #fff3e0); --kite-alert-passive-dismiss-icon-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-alert-passive-neutral-background-color: var(--kite-color-neutral-muted, #e5f2ff); --kite-alert-passive-positive-background-color: var(--kite-color-positive-muted, #e8ffe8); --kite-alert-stacked-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-alert-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-text-color" token */ --kite-alert-page-border-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "alert-border-color" token */ --kite-alert-page-border-color-dark: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "alert-border-color" token */ --kite-alert-page-border-width: var(--kite-border-width-thin, 0.0625rem); /** @deprecated: Replace with "alert-border-width" token */ --kite-alert-page-indicator-icon-margin-right: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with "alert-status-icon-margin-right" token */ --kite-alert-page-link-text-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "alert-link-text-color" token */ --kite-alert-page-link-text-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "alert-link-text-color" token */ --kite-alert-page-link-text-margin-top: var(--kite-spacing-element-xxs, 0.25rem); /** @deprecated: Replace with "alert-link-text-margin-top" token */ --kite-alert-page-link-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "alert-link-icon-color" token */ --kite-alert-page-link-icon-fill-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "alert-link-icon-color" token */ --kite-alert-page-margin-bottom: var(--kite-spacing-element-xxs, 0.25rem); /** Replace with "alert-link-margin-top" token */ --kite-alert-page-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "alert-padding-top" token */ --kite-alert-page-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "alert-padding-right" token */ --kite-alert-page-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "alert-padding-bottom" token */ --kite-alert-page-padding-left: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with "alert-padding-left" token */ --kite-alert-page-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-text-color" token */ --kite-alert-page-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-text-color" token */ --kite-alert-page-caution-border-left-color: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-border-left-color" token */ --kite-alert-page-caution-border-left-color-dark: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-border-left-color" token */ --kite-alert-page-caution-indicator-icon-fill: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-status-icon-color" token */ --kite-alert-page-caution-indicator-icon-fill-dark: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-status-icon-color" token */ --kite-alert-page-error-border-left-color: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-border-left-color" token */ --kite-alert-page-error-border-left-color-dark: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-border-left-color" token */ --kite-alert-page-error-indicator-icon-fill: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-status-icon-color" token */ --kite-alert-page-error-indicator-icon-fill-dark: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-negative-status-icon-color" token */ --kite-alert-page-info-border-left-color: var(--kite-color-info, #73b7ff); /** @deprecated: Replace with "alert-neutral-border-left-color" token */ --kite-alert-page-info-border-left-color-dark: var(--kite-color-info, #73b7ff); /** @deprecated: Replace with "alert-neutral-border-left-color" token */ --kite-alert-page-info-indicator-icon-fill: var(--kite-color-info, #73b7ff); /** @deprecated: Replace with "alert-neutral-status-icon-color" token */ --kite-alert-page-info-indicator-icon-fill-dark: var(--kite-color-info, #73b7ff); /** @deprecated: Replace with "alert-neutral-status-icon-color" token */ --kite-alert-page-success-border-left-color: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-border-left-color" token */ --kite-alert-page-success-border-left-color-dark: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-border-left-color" token */ --kite-alert-page-success-indicator-icon-fill: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-status-icon-color" token */ --kite-alert-page-success-indicator-icon-fill-dark: var(--kite-color-success, #008516); /** @deprecated: Replace with "alert-positive-status-icon-color" token */ --kite-alert-global-indicator-icon-margin-right: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "alert-global-status-icon-margin-right" token */ --kite-alert-global-caution-background-color-dark: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-global-caution-background-color" token */ --kite-alert-global-caution-link-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-caution-link-text-color" token */ --kite-alert-global-caution-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-caution-text-color" token */ --kite-alert-global-error-background-color: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-global-negative-background-color" token */ --kite-alert-global-error-background-color-dark: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "alert-global-negative-background-color" token */ --kite-alert-global-info-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-text-color" token */ --kite-alert-global-info-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-text-color" token */ --kite-alert-global-info-background-color: var(--kite-color-info, #73b7ff); /** @deprecated: Replace with "alert-global-neutral-background-color" token */ --kite-alert-global-info-background-color-dark: var(--kite-color-info, #73b7ff); /** @deprecated: Replace with "alert-global-neutral-background-color" token */ --kite-alert-global-info-link-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-link-text-color" token */ --kite-alert-global-info-link-text-color-dark: var(--kite-color-text, #000000); /** @deprecated: Replace with "alert-global-neutral-link-text-color" token */ --kite-alert-link-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "alert-link-icon-color" token */ --kite-alert-caution-status-icon-fill: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with "alert-caution-status-icon-color" token */ --kite-alert-neutral-status-icon-fill: var(--kite-color-neutral, #73b7ff); /** @deprecated: Replace with "alert-neutral-status-icon-color" token */ --kite-alert-global-caution-status-icon-fill: var(--kite-color-on-caution, #000000); /** @deprecated: Replace with "alert-global-caution-status-icon-color" token */ --kite-alert-global-caution-link-icon-fill: var(--kite-color-on-caution, #000000); /** @deprecated: Replace with "alert-global-caution-link-icon-color" token */ --kite-alert-global-negative-dismiss-icon-fill: var(--kite-color-on-negative, #ffffff); /** @deprecated: Replace with "alert-global-negative-dismiss-icon-color" token */ --kite-alert-global-negative-status-icon-fill: var(--kite-color-on-negative, #ffffff); /** @deprecated: Replace with "alert-global-negative-status-icon-color" token */ --kite-alert-global-negative-link-icon-fill: var(--kite-color-on-negative, #ffffff); /** @deprecated: Replace with "alert-global-negative-link-icon-color" token */ --kite-alert-global-neutral-status-icon-fill: var(--kite-color-on-neutral, #000000); /** @deprecated: Replace with "alert-global-neutral-status-icon-color" token */ --kite-alert-global-neutral-link-icon-fill: var(--kite-color-on-neutral, #000000); /** @deprecated: Replace with "alert-global-neutral-link-icon-color" token */ --kite-badge-border-radius: var(--kite-badge-min-width, 1.25rem); --kite-badge-border-style: var(--kite-border-style, solid); --kite-badge-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-badge-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-badge-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-badge-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-badge-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-badge-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-badge-min-height: var(--kite-badge-min-width, 1.25rem); --kite-badge-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-badge-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-badge-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-badge-tab-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "badge-margin-right" token */ --kite-badge-background-color-dark: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "badge-background-color" token */ --kite-blockquote-text-color: var(--kite-color-text, #000000); --kite-blockquote-border-left-color: var(--kite-color-primary, #0271eb); --kite-blockquote-border-left-style: var(--kite-border-style, solid); --kite-blockquote-margin-bottom: var(--kite-spacing-md, 1rem); --kite-blockquote-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-blockquote-padding-right: var(--kite-spacing-md, 1rem); --kite-blockquote-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-blockquote-padding-left: var(--kite-spacing-md, 1rem); --kite-blockquote-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-blockquote-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-button-group-margin-top: var(--kite-spacing-xl, 1.5rem); --kite-button-group-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-button-group-button-margin-right: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with 'button-group-item-margin-right' token */ --kite-button-group-button-margin-bottom: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'button-group-item-margin-bottom' token */ --kite-button-background-color: var(--kite-color-primary, #0271eb); --kite-button-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-text-size: var(--kite-typography-body-size, 1rem); --kite-button-border-style: var(--kite-border-style, solid); --kite-button-padding-right: var(--kite-spacing-md, 1rem); --kite-button-padding-left: var(--kite-spacing-md, 1rem); --kite-button-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-button-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-button-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-button-focus-background-color: var(--kite-color-primary-focus, #0257b2); --kite-button-focus-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-hover-background-color: var(--kite-color-primary-hover, #0257b2); --kite-button-hover-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-press-background-color: var(--kite-color-primary-press, #0257b2); --kite-button-press-text-color: var(--kite-color-on-primary, #ffffff); --kite-button-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-button-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-button-destructive-background-color: var(--kite-color-negative, #d6312b); --kite-button-destructive-text-color: var(--kite-color-on-negative, #ffffff); --kite-button-destructive-disabled-background-color: var(--kite-button-disabled-background-color, #d8dde6); --kite-button-destructive-disabled-border-color: var(--kite-button-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-press-border-color: var(--kite-button-press-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-disabled-background-color: var(--kite-button-disabled-background-color, #d8dde6); --kite-button-primary-disabled-border-color: var(--kite-button-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-focus-border-color: var(--kite-button-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-hover-border-color: var(--kite-button-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-border-color: var(--kite-button-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-focus-background-color: var(--kite-button-destructive-focus-background-color, #b00300); --kite-button-primary-destructive-focus-border-color: var(--kite-button-destructive-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-hover-background-color: var(--kite-button-destructive-hover-background-color, #b00300); --kite-button-primary-destructive-hover-border-color: var(--kite-button-destructive-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-primary-destructive-press-background-color: var(--kite-button-destructive-press-background-color, #b00300); --kite-button-primary-destructive-press-border-color: var(--kite-button-destructive-press-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-text-color: var(--kite-color-primary, #0271eb); --kite-button-secondary-border-color: var(--kite-color-primary, #0271eb); --kite-button-secondary-focus-background-color: var(--kite-color-focus, #0257b2); --kite-button-secondary-focus-border-color: var(--kite-button-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-hover-background-color: var(--kite-color-focus, #0257b2); --kite-button-secondary-hover-border-color: var(--kite-button-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-press-background-color: var(--kite-color-focus, #0257b2); --kite-button-secondary-press-border-color: var(--kite-button-press-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-button-secondary-destructive-border-color: var(--kite-color-negative, #d6312b); --kite-button-secondary-destructive-text-color: var(--kite-color-negative, #d6312b); --kite-button-secondary-destructive-focus-background-color: var(--kite-button-destructive-focus-background-color, #b00300); --kite-button-secondary-destructive-focus-border-color: var(--kite-button-destructive-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-hover-background-color: var(--kite-button-destructive-hover-background-color, #b00300); --kite-button-secondary-destructive-hover-border-color: var(--kite-button-destructive-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-press-background-color: var(--kite-button-destructive-press-background-color, #b00300); --kite-button-secondary-destructive-press-border-color: var(--kite-button-destructive-press-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-destructive-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-button-borderless-text-color: var(--kite-color-primary, #0271eb); --kite-button-borderless-focus-border-color: var(--kite-button-focus-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-focus-text-color: var(--kite-color-primary-focus, #0257b2); --kite-button-borderless-hover-border-color: var(--kite-button-hover-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-hover-text-color: var(--kite-color-primary-hover, #0257b2); --kite-button-borderless-press-border-color: var(--kite-button-press-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-press-text-color: var(--kite-color-primary-press, #0257b2); --kite-button-borderless-disabled-border-color: var(--kite-button-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-border-color: var(--kite-button-borderless-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-text-color: var(--kite-color-negative, #d6312b); --kite-button-borderless-destructive-focus-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-focus-icon-color: var(--kite-button-borderless-destructive-focus-text-color, #b00300); --kite-button-borderless-destructive-hover-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-hover-icon-color: var(--kite-button-borderless-destructive-hover-text-color, #b00300); --kite-button-borderless-destructive-press-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-press-icon-color: var(--kite-button-borderless-destructive-press-text-color, #b00300); --kite-button-borderless-destructive-disabled-background-color: var(--kite-button-borderless-destructive-background-color, rgba(0, 0, 0, 0)); --kite-button-icon-only-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-button-icon-only-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-button-icon-fill: var(--kite-color-on-primary, #ffffff); /** @deprecated: Replace with 'button-icon-color' token */ --kite-button-disabled-icon-fill: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'button-disabled-icon-color' token */ --kite-button-secondary-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'button-secondary-icon-color' token */ --kite-button-borderless-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'button-borderless-icon-color' token */ --kite-button-borderless-focus-icon-fill: var(--kite-color-focus, #0257b2); /** @deprecated: Replace with 'button-borderless-focus-icon-color' token */ --kite-calendar-background-color: var(--kite-container-background-color, #ffffff); --kite-calendar-text-color: var(--kite-color-text, #000000); --kite-calendar-border-color: var(--kite-border-color, #d8dde6); --kite-calendar-border-style: var(--kite-border-style, solid); --kite-calendar-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-calendar-padding-right: var(--kite-spacing-md, 1rem); --kite-calendar-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-calendar-padding-left: var(--kite-spacing-md, 1rem); --kite-calendar-controls-focus-text-color: var(--kite-color-primary, #0271eb); --kite-calendar-controls-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-calendar-controls-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-calendar-controls-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-calendar-controls-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-calendar-day-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-calendar-day-focus-color: var(--kite-color-primary, #0271eb); --kite-calendar-day-invalid-focus-ring-color: var(--kite-color-negative, #d6312b); --kite-calendar-day-invalid-hover-background-color: var(--kite-color-negative-muted, #ffefef); --kite-calendar-day-invalid-selected-background-color: var(--kite-color-negative, #d6312b); --kite-calendar-day-invalid-selected-text-color: var(--kite-color-on-negative, #ffffff); --kite-calendar-day-invalid-text-decoration-line: var(--kite-calendar-day-unavailable-text-decoration-line, line-through); --kite-calendar-day-selected-background-color: var(--kite-color-primary, #0271eb); --kite-calendar-day-selected-text-color: var(--kite-color-on-primary, #ffffff); --kite-calendar-day-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-calendar-day-today-text-color: var(--kite-color-primary, #0271eb); --kite-calendar-day-today-indicator-background-color: var(--kite-color-primary, #0271eb); --kite-calendar-day-today-indicator-offset: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-day-due-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-day-due-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-day-out-range-text-decoration-thickness: var(--kite-calendar-day-disabled-text-decoration-thickness, 0.125rem); --kite-calendar-day-unavailable-text-decoration-thickness: var(--kite-calendar-day-disabled-text-decoration-thickness, 0.125rem); --kite-calendar-error-feedback-icon-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-feedback-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-calendar-feedback-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-calendar-feedback-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-calendar-feedback-gap: var(--kite-spacing-2xs, 0.25rem); --kite-calendar-month-year-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-calendar-month-year-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-calendar-standalone-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-card-background-color: var(--kite-container-background-color, #ffffff); --kite-card-text-color: var(--kite-color-text, #000000); --kite-card-padding-top-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-right-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-bottom-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-left-sm: var(--kite-spacing-md, 1rem); --kite-card-padding-top-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-right-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-bottom-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-left-md: var(--kite-spacing-xl, 1.5rem); --kite-card-padding-top-lg: var(--kite-spacing-2xl, 2rem); --kite-card-padding-right-lg: var(--kite-spacing-2xl, 2rem); --kite-card-padding-bottom-lg: var(--kite-spacing-2xl, 2rem); --kite-card-padding-left-lg: var(--kite-spacing-2xl, 2rem); --kite-card-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-card-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-card-sm-min-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-top-sm" token */ --kite-card-sm-min-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-right-sm" token */ --kite-card-sm-min-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-bottom-sm" token */ --kite-card-sm-min-padding-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "card-padding-left-sm" token */ --kite-card-sm-margin-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated */ --kite-card-md-min-padding-top: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-top-md" token */ --kite-card-md-min-padding-right: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-right-md" token */ --kite-card-md-min-padding-bottom: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-bottom-md" token */ --kite-card-md-min-padding-left: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated: Replace with "card-padding-left-md" token */ --kite-card-md-margin-bottom: var(--kite-spacing-md, 1rem); /** @deprecated */ --kite-card-lg-min-padding-top: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-top-lg" token */ --kite-card-lg-min-padding-right: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-right-lg" token */ --kite-card-lg-min-padding-bottom: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-bottom-lg" token */ --kite-card-lg-min-padding-left: var(--kite-spacing-element-xxl, 2rem); /** @deprecated: Replace with "card-padding-left-lg" token */ --kite-card-lg-margin-bottom: var(--kite-spacing-element-xl, 1.5rem); /** @deprecated */ --kite-checkbox-text-color: var(--kite-color-text, #000000); --kite-checkbox-border-color: var(--kite-form-control-border-color, #63738a); --kite-checkbox-border-width: var(--kite-border-width-thick, 0.125rem); --kite-checkbox-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-checkbox-padding-right: var(--kite-spacing-md, 1rem); --kite-checkbox-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-checkbox-padding-left: var(--kite-spacing-md, 1rem); --kite-checkbox-height: var(--kite-checkbox-width, 1.25rem); --kite-checkbox-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-checkbox-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-checkbox-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-checkbox-selected-background-color: var(--kite-color-primary, #0271eb); --kite-checkbox-selected-icon-color: var(--kite-color-on-primary, #ffffff); --kite-checkbox-selected-disabled-background-color: var(--kite-color-disabled, #9ba9bd); --kite-checkbox-disabled-icon-color: var(--kite-color-on-disabled, #d8dde6); --kite-checkbox-cursor: var(--kite-form-control-cursor, pointer); --kite-checkbox-input-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-checkbox-error-feedback-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-checkbox-error-selected-icon-color: var(--kite-color-on-negative, #ffffff); --kite-checkbox-group-list-padding-left: var(--kite-spacing-2xl, 2rem); --kite-checkbox-indeterminate-icon-height: var(--kite-checkbox-selected-icon-height, 1rem); --kite-checkbox-indeterminate-icon-width: var(--kite-checkbox-selected-icon-width, 1rem); --kite-checkbox-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "checkbox-disabled-icon-color" token */ --kite-checkbox-selected-background-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "checkbox-selected-background-color" token */ --kite-checkbox-selected-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "checkbox-selected-disabled-icon-color" token */ --kite-checkbox-indeterminate-background-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "checkbox-indeterminate-background-color" token */ --kite-checkbox-indeterminate-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "checkbox-indeterminate-disabled-icon-color" token */ --kite-checkbox-group-margin-top: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-checkbox-group-margin-bottom: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-chip-background-color: var(--kite-container-background-color, #ffffff); --kite-chip-text-size: var(--kite-typography-body-size, 1rem); --kite-chip-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-chip-border-radius: var(--kite-border-radius-pill, 624.9375rem); --kite-chip-border-style: var(--kite-border-style, solid); --kite-chip-margin-right: var(--kite-spacing-md, 1rem); --kite-chip-margin-bottom: var(--kite-spacing-md, 1rem); --kite-chip-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-chip-padding-right: var(--kite-spacing-2xl, 2rem); --kite-chip-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-chip-padding-left: var(--kite-spacing-2xl, 2rem); --kite-chip-min-height: var(--kite-chip-height, 2rem); --kite-chip-focus-ring-color: var(--kite-chip-border-color, #63738a); --kite-chip-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-chip-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-chip-hover-background-color: var(--kite-chip-focus-background-color, #d8dde6); --kite-chip-selected-disabled-background-color: var(--kite-color-disabled, #9ba9bd); --kite-chip-selected-disabled-text-color: var(--kite-color-on-disabled, #d8dde6); --kite-chip-disabled-background-color: var(--kite-container-background-color, #ffffff); --kite-chip-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-chip-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-chip-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-chip-legend-margin-bottom: var(--kite-spacing-md, 1rem); --kite-chip-border-color-dark: var(--kite-chip-text-color-dark, #b8d4f2); /** @deprecated: Replace with "chip-border-color" token */ --kite-chip-focus-ring-color-dark: var(--kite-chip-text-color-dark, #b8d4f2); /** @deprecated: Replace with "chip-focus-ring-color" token */ --kite-chip-selected-background-color-dark: var(--kite-chip-text-color-dark, #b8d4f2); /** @deprecated: Replace with "chip-selected-background-color" token */ --kite-chip-selected-text-color-dark: var(--kite-chip-text-color, #000f1a); /** @deprecated: Replace with "chip-selected-text-color" token */ --kite-chip-selected-disabled-text-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "chip-selected-disabled-text-color" token */ --kite-combobox-background-color: var(--kite-form-control-background-color, #ffffff); --kite-combobox-border-color: var(--kite-form-control-border-color, #63738a); --kite-combobox-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-combobox-cursor: var(--kite-form-control-cursor, pointer); --kite-combobox-icon-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-combobox-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-combobox-picker-list-item-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-combobox-picker-results-padding-top: var(--kite-spacing-xl, 1.5rem); --kite-combobox-picker-results-padding-bottom: var(--kite-spacing-xl, 1.5rem); --kite-combobox-placeholder-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-combobox-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-combobox-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-data-table-background-color: var(--kite-color-background, #ffffff); --kite-data-table-text-color: var(--kite-color-text, #000000); --kite-data-table-border-color: var(--kite-border-color, #d8dde6); --kite-data-table-border-style: var(--kite-border-style, solid); --kite-data-table-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-data-table-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-data-table-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-data-table-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-data-table-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-data-table-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-data-table-breakpoint-md-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-data-table-breakpoint-md-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-data-table-icon-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-data-table-compact-cell-padding-top: var(--kite-spacing-xs, 0.5rem); --kite-data-table-compact-cell-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-data-table-compact-cell-padding-bottom: var(--kite-spacing-xs, 0.5rem); --kite-data-table-compact-cell-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-data-table-comfortable-cell-padding-top: var(--kite-spacing-md, 1rem); --kite-data-table-comfortable-cell-padding-right: var(--kite-spacing-md, 1rem); --kite-data-table-comfortable-cell-padding-bottom: var(--kite-spacing-md, 1rem); --kite-data-table-comfortable-cell-padding-left: var(--kite-spacing-md, 1rem); --kite-data-table-menu-cell-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-data-table-menu-cell-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-data-table-title-row-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with "data-table-icon-padding-left" token */ --kite-data-table-title-row-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "data-table-header-border-bottom-color" token */ --kite-data-table-title-row-border-bottom-width: var(--kite-border-width-thin, 0.0625rem); /** @deprecated: Replace with "data-table-header-border-bottom-width" token */ --kite-data-table-title-row-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "data-table-header-text-color" token */ --kite-data-table-cell-compact-padding-top: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-top" token */ --kite-data-table-cell-compact-padding-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-right" token */ --kite-data-table-cell-compact-padding-bottom: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-bottom" token */ --kite-data-table-cell-compact-padding-left: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "data-table-compact-cell-padding-left" token */ --kite-data-table-cell-default-padding-top: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-top" token */ --kite-data-table-cell-default-padding-right: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-right" token */ --kite-data-table-cell-default-padding-bottom: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-bottom" token */ --kite-data-table-cell-default-padding-left: var(--kite-spacing-sm, 0.75rem); /** @deprecated: Replace with "data-table-cell-padding-left" token */ --kite-data-table-cell-comfortable-padding-top: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-top" token */ --kite-data-table-cell-comfortable-padding-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-right" token */ --kite-data-table-cell-comfortable-padding-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-bottom" token */ --kite-data-table-cell-comfortable-padding-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "data-table-comfortable-cell-padding-left" token */ --kite-date-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-date-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-date-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-date-input-addon-focus-ring-offset: var(--kite-form-control-addon-focus-ring-offset, -0.125rem); --kite-date-input-addon-icon-width: var(--kite-form-control-addon-icon-width, 1.5rem); --kite-date-input-picker-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-date-input-picker-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-date-input-picker-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-date-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-date-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-dialog-background-color: var(--kite-container-background-color, #ffffff); --kite-dialog-text-color: var(--kite-color-text, #000000); --kite-dialog-text-size: var(--kite-typography-body-size, 1rem); --kite-dialog-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dialog-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dialog-icon-color: var(--kite-color-text, #000000); --kite-dialog-breakpoint-md-title-text-weight: var(--kite-typography-lg-title-5-weight, 500); --kite-dialog-breakpoint-md-padding-top: var(--kite-layout-xs, 3rem); --kite-dialog-breakpoint-md-padding-right: var(--kite-layout-xs, 3rem); --kite-dialog-breakpoint-md-padding-bottom: var(--kite-layout-xs, 3rem); --kite-dialog-breakpoint-md-padding-left: var(--kite-layout-xs, 3rem); --kite-dialog-transition-timing-function: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-dialog-title-text-size: var(--kite-typography-title-5-size, 1.25rem); --kite-dialog-title-text-line-height: var(--kite-typography-title-5-line-height, 1.4); --kite-dialog-title-icon-height: var(--kite-dialog-icon-height, 1.5rem); --kite-dialog-title-icon-width: var(--kite-dialog-icon-width, 1.5rem); --kite-dialog-title-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-dialog-title-margin-bottom: var(--kite-spacing-md, 1rem); --kite-dialog-content-padding-right: var(--kite-layout-xs, 3rem); --kite-dialog-content-padding-bottom: var(--kite-layout-xs, 3rem); --kite-dialog-content-padding-left: var(--kite-layout-xs, 3rem); --kite-dialog-content-group-margin-top: var(--kite-spacing-lg, 1.25rem); --kite-dialog-alert-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-dialog-alert-margin-bottom: var(--kite-spacing-lg, 1.25rem); --kite-dialog-scrolled-border-top-color: var(--kite-border-color, #d8dde6); --kite-dialog-scrolled-border-top-style: var(--kite-border-style, solid); --kite-dialog-title-text-margin-bottom: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "dialog-title-margin-bottom" token */ --kite-dialog-full-size-padding-top: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-padding-top" token */ --kite-dialog-full-size-padding-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "dialog-padding-right" token */ --kite-dialog-full-size-padding-bottom: var(--kite-spacing-lg, 1.25rem); /** @deprecated: Replace with "dialog-padding-bottom" token */ --kite-dialog-full-size-padding-left: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "dialog-padding-left" token */ --kite-dialog-default-size-padding-top: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-top" token */ --kite-dialog-default-size-padding-right: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-right" token */ --kite-dialog-default-size-padding-bottom: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-bottom" token */ --kite-dialog-default-size-padding-left: var(--kite-layout-xs, 3rem); /** @deprecated: Replace with "dialog-breakpoint-md-padding-left" token */ --kite-dropdown-background-color: var(--kite-form-control-background-color, #ffffff); --kite-dropdown-border-color: var(--kite-form-control-border-color, #63738a); --kite-dropdown-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-dropdown-cursor: var(--kite-form-control-cursor, pointer); --kite-dropdown-placeholder-margin-right: var(--kite-spacing-md, 1rem); --kite-dropdown-error-text-margin-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'dropdown-feedback-margin-top' token */ --kite-dropdown-list-background-color: var(--kite-container-background-color, #ffffff); --kite-dropdown-list-border-color: var(--kite-border-color, #d8dde6); --kite-dropdown-list-border-style: var(--kite-border-style, solid); --kite-dropdown-list-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-list-max-width: var(--kite-dropdown-max-width, 18rem); --kite-dropdown-list-transition-duration: var(--kite-motion-fast, 750ms); --kite-dropdown-list-item-text-color: var(--kite-color-text, #000000); --kite-dropdown-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-dropdown-list-item-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-dropdown-list-item-border-style: var(--kite-border-style, solid); --kite-dropdown-list-item-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-dropdown-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dropdown-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dropdown-list-item-icon-color: var(--kite-color-primary, #0271eb); --kite-dropdown-list-item-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-list-item-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-dropdown-list-item-negative-text-color: var(--kite-color-negative, #d6312b); --kite-dropdown-inline-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-dropdown-inline-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dropdown-inline-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dropdown-inline-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-dropdown-inline-placeholder-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-inline-placeholder-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-dropdown-inline-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-dropdown-list-item-border-bottom-color-dark: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "dropdown-list-item-border-color" token */ --kite-dropdown-list-offset-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "dropdown-placeholder-margin-right" token */ --kite-dropdown-list-item-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "dropdown-list-item-border-color" token */ --kite-dropdown-list-item-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with "dropdown-list-item-border-style" token */ --kite-dropdown-inline-disabled-text-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "dropdown-disabled-inline-text-color" token */ --kite-dropdown-inline-disabled-icon-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "dropdown-disabled-inline-icon-color" token */ --kite-dynamic-hint-text-color: var(--kite-color-text, #000000); --kite-dynamic-hint-text-size: var(--kite-typography-body-size, 1rem); --kite-dynamic-hint-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-margin-left: var(--kite-spacing-xs, 0.5rem); --kite-dynamic-hint-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-dynamic-hint-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-dynamic-hint-arrow-offset: var(--kite-spacing-2xl, 2rem); /** distance to closest corner */ --kite-dynamic-hint-title-margin-bottom: var(--kite-spacing-md, 1rem); --kite-dynamic-hint-criteria-margin-bottom: var(--kite-spacing-md, 1rem); --kite-dynamic-hint-criteria-icon-margin-right: var(--kite-spacing-sm, 0.75rem); --kite-dynamic-hint-criteria-positive-icon-color: var(--kite-color-positive, #008516); --kite-dynamic-hint-criteria-negative-icon-color: var(--kite-color-negative, #d6312b); --kite-dynamic-hint-entry-transition-duration: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); /** @deprecated */ --kite-dynamic-hint-exit-transition-duration: var(--kite-motion-exit, cubic-bezier(0.42, 0, 1, 1)); /** @deprecated */ --kite-dynamic-hint-criteria-success-icon-fill: var(--kite-color-success, #008516); /** @deprecated: Replace with "dynamic-hint-criteria-positive-icon-color" token */ --kite-dynamic-hint-criteria-error-icon-fill: var(--kite-color-error, #d6312b); /** @deprecated: Replace with "dynamic-hint-criteria-negative-icon-color" token */ --kite-interactive-list-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "list-text-color" token */ --kite-interactive-list-border-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "list-border-color" token */ --kite-interactive-list-border-style: var(--kite-border-style, solid); /** @deprecated: Replace with "list-border-style" token */ --kite-interactive-list-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with "list-focus-ring-style" token */ --kite-interactive-list-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with "list-focus-ring-width" token */ --kite-interactive-list-item-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with "list-item-text-color" token */ --kite-interactive-list-item-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with "list-item-text-size" token */ --kite-interactive-list-item-padding-top: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-top" token */ --kite-interactive-list-item-padding-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "list-item-padding-right" token */ --kite-interactive-list-item-padding-bottom: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-bottom" token */ --kite-interactive-list-item-padding-left: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "list-item-padding-left" token */ --kite-interactive-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with "list-item-focus-ring-style" token */ --kite-interactive-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with "list-item-focus-ring-width" token */ --kite-interactive-list-item-padding-right-sm: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-right-sm" token */ --kite-interactive-list-item-padding-left-sm: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-left-sm" token */ --kite-interactive-list-item-padding-right-md: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-right-md" token */ --kite-interactive-list-item-padding-left-md: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-left-md" token */ --kite-interactive-list-item-padding-right-lg: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-right-lg" token */ --kite-interactive-list-item-padding-left-lg: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-left-lg" token */ --kite-interactive-list-item-action-icon-height: var(--kite-interactive-list-item-icon-height, 1.5rem); /** @deprecated: Replace with "list-item-action-icon-height" token */ --kite-interactive-list-item-action-icon-width: var(--kite-interactive-list-item-icon-width, 1.5rem); /** @deprecated: Replace with "list-item-action-icon-width" token */ --kite-interactive-list-item-label-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with "list-item-label-text-size" token */ --kite-interactive-list-item-label-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with "list-item-label-margin-right" token */ --kite-interactive-list-item-title-text-size: var(--kite-typography-title-6-size, 1.125rem); /** @deprecated: Replace with "list-item-title-text-size" token */ --kite-interactive-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with "list-item-disabled-text-color" token */ --kite-interactive-list-item-negative-label-text-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "list-item-negative-label-text-color" token */ --kite-interactive-list-item-positive-label-text-color: var(--kite-color-positive, #008516); /** @deprecated: Replace with "list-item-positive-label-text-color" token */ --kite-interactive-list-item-neutral-label-text-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "list-item-neutral-label-text-color" token */ --kite-interactive-list-item-multiline-title-text-size: var(--kite-typography-body-display-size, 1.25rem); /** @deprecated: Replace with "list-item-multiline-title-text-size" token */ --kite-interactive-list-item-multiline-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with "list-item-multiline-title-margin-bottom" token */ --kite-interactive-list-item-multiline-subtitle-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with "list-item-multiline-subtitle-text-size" token */ --kite-interactive-list-start-margin-right: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "list-start-margin-right" token */ --kite-interactive-list-end-margin-left: var(--kite-spacing-element-md, 1rem); /** @deprecated: Replace with "list-end-margin-left" token */ --kite-interactive-list-item-danger-label-text-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with "list-item-negative-label-text-color" token */ --kite-interactive-list-item-info-label-text-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "list-item-neutral-label-text-color" token */ --kite-interactive-list-item-success-label-text-color: var(--kite-color-success, #008516); /** @deprecated: Replace with "list-item-positive-label-text-color" token */ --kite-interactive-list-md-padding-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-right-sm" token */ --kite-interactive-list-md-padding-left: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-padding-left-sm" token */ --kite-interactive-list-xl-padding-right: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-right-md" token */ --kite-interactive-list-xl-padding-left: var(--kite-spacing-xl, 1.5rem); /** @deprecated: Replace with "list-item-padding-left-md" token */ --kite-interactive-list-xxl-padding-right: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-right-lg" token */ --kite-interactive-list-xxl-padding-left: var(--kite-spacing-2xl, 2rem); /** @deprecated: Replace with "list-item-padding-left-lg" token */ --kite-interactive-list-item-icon-margin: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "list-item-icon-margin-right" token */ --kite-link-text-color: var(--kite-color-primary, #0271eb); --kite-link-text-size: var(--kite-typography-body-size, 1rem); --kite-link-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-link-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-link-hover-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-focus-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-press-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-icon-margin: var(--kite-spacing-2xs, 0.25rem); --kite-link-visited-text-color: var(--kite-link-hover-text-color, #002e52); --kite-link-visited-text-decoration: var(--kite-link-text-decoration, underline); --kite-link-standalone-text-decoration-offset: var(--kite-link-text-decoration-offset, 0.125rem); --kite-link-standalone-text-decoration-thickness: var(--kite-link-text-decoration-thickness, 0.125rem); --kite-link-standalone-hover-icon-color: var(--kite-link-hover-text-color, #002e52); --kite-link-standalone-focus-text-decoration: var(--kite-link-standalone-text-decoration, none); --kite-link-standalone-press-icon-color: var(--kite-link-press-text-color, #002139); --kite-link-standalone-visited-text-decoration: var(--kite-link-standalone-text-decoration, none); --kite-link-standalone-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "link-standalone-icon-color" token */ --kite-link-standalone-focus-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with "link-standalone-focus-icon-color" token */ --kite-link-standalone-icon-height: var(--kite-link-icon-height, 0.875rem); /** @deprecated: Replace with 'link-icon-height' token */ --kite-link-standalone-icon-width: var(--kite-link-icon-width, 0.875rem); /** @deprecated: Replace with 'link-icon-width' token */ --kite-list-text-color: var(--kite-color-text, #000000); --kite-list-border-color: var(--kite-border-color, #d8dde6); --kite-list-border-style: var(--kite-border-style, solid); --kite-list-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-list-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-list-item-caution-label-icon-color: var(--kite-color-caution, #faa41a); --kite-list-item-padding-top: var(--kite-spacing-md, 1rem); --kite-list-item-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-list-item-padding-bottom: var(--kite-spacing-md, 1rem); --kite-list-item-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-list-item-text-color: var(--kite-color-text, #000000); --kite-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-list-item-padding-right-sm: var(--kite-spacing-md, 1rem); --kite-list-item-padding-left-sm: var(--kite-spacing-md, 1rem); --kite-list-item-padding-right-md: var(--kite-spacing-xl, 1.5rem); --kite-list-item-padding-left-md: var(--kite-spacing-xl, 1.5rem); --kite-list-item-padding-right-lg: var(--kite-spacing-2xl, 2rem); --kite-list-item-padding-left-lg: var(--kite-spacing-2xl, 2rem); --kite-list-item-image-border-radius: var(--kite-list-image-border-radius, 0.25rem); --kite-list-item-image-max-width: var(--kite-list-image-max-width, 5rem); --kite-list-item-image-max-height: var(--kite-list-image-max-height, 5rem); --kite-list-item-label-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-label-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-list-item-title-text-size: var(--kite-typography-title-6-size, 1.125rem); --kite-list-item-title-text-line-height: var(--kite-typography-title-6-line-height, 1.333); --kite-list-item-title-body-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-title-body-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-list-item-payment-logo-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-payment-logo-padding-right: var(--kite-spacing-xs, 0.5rem); --kite-list-item-payment-logo-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-payment-logo-padding-left: var(--kite-spacing-xs, 0.5rem); --kite-list-item-payment-logo-width: var(--kite-payment-logo-width, 1.5rem); --kite-list-item-payment-logo-height: var(--kite-payment-logo-height, 1.5rem); --kite-list-item-payment-logo-shadow: var(--kite-payment-logo-elevation, none); --kite-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-list-item-expanded-transition-timing-function: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-list-item-expanded-transition-duration: var(--kite-motion-faster, 400ms); --kite-list-item-negative-label-text-color: var(--kite-color-negative, #d6312b); --kite-list-item-neutral-label-text-color: var(--kite-color-primary, #0271eb); --kite-list-item-positive-label-text-color: var(--kite-color-positive, #008516); --kite-list-item-multiline-title-text-size: var(--kite-typography-body-display-size, 1.25rem); --kite-list-item-multiline-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-list-item-multiline-subtitle-text-size: var(--kite-typography-body-size, 1rem); --kite-list-item-multiline-subtitle-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-list-item-muted-label-icon-color: var(--kite-list-item-muted-label-text-color, #63738a); --kite-list-start-margin-right: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with 'list-item-slot-start-margin-right' token */ --kite-list-end-margin-left: var(--kite-spacing-element-xs, 0.5rem); /** @deprecated: Replace with 'list-item-slot-end-margin-left' token */ --kite-menu-list-background-color: var(--kite-container-background-color, #ffffff); --kite-menu-list-border-color: var(--kite-border-color, #d8dde6); --kite-menu-list-border-style: var(--kite-border-style, solid); --kite-menu-list-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-menu-list-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-menu-list-transition-duration: var(--kite-motion-fast, 750ms); --kite-menu-list-item-text-color: var(--kite-color-text, #000000); --kite-menu-list-item-text-size: var(--kite-typography-body-size, 1rem); --kite-menu-list-item-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-menu-list-item-border-style: var(--kite-border-style, solid); --kite-menu-list-item-padding-right: var(--kite-spacing-md, 1rem); --kite-menu-list-item-padding-left: var(--kite-spacing-md, 1rem); --kite-menu-list-item-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-menu-list-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-menu-list-item-icon-margin-right: var(--kite-spacing-md, 1rem); --kite-menu-list-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-menu-list-item-negative-text-color: var(--kite-color-negative, #d6312b); --kite-menu-trigger-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-menu-trigger-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-menu-trigger-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-menu-trigger-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-menu-trigger-activated-background-color: var(--kite-color-primary, #0271eb); --kite-menu-trigger-activated-icon-color: var(--kite-color-on-primary, #ffffff); --kite-menu-trigger-icon-color: var(--kite-color-text, #000000); --kite-menu-contextual-label-trigger-label-text-size: var(--kite-typography-body-size, 1rem); --kite-menu-contextual-label-trigger-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-menu-contextual-label-trigger-label-text-color: var(--kite-color-text, #000000); --kite-menu-contextual-label-trigger-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-menu-contextual-label-trigger-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-menu-list-item-border-bottom-color-dark: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "menu-list-item-border-color" token */ --kite-menu-list-offset-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with "menu-list-margin-right" token */ --kite-menu-list-item-border-bottom-color: var(--kite-border-color, #d8dde6); /** @deprecated: Replace with "menu-list-item-border-color" token */ --kite-menu-list-item-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with "menu-list-item-border-style" token */ --kite-meter-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-meter-label-text-color: var(--kite-color-text, #000000); --kite-meter-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-label-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-meter-status-label-text-color: var(--kite-color-text, #000000); --kite-meter-status-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-status-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-track-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-meter-fill-color: var(--kite-color-neutral, #73b7ff); --kite-meter-tick-height: var(--kite-meter-track-height, 0.5rem); --kite-meter-value-label-text-color: var(--kite-color-text, #000000); --kite-meter-value-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-value-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-positive-fill-color: var(--kite-color-positive, #008516); --kite-meter-negative-fill-color: var(--kite-color-negative, #d6312b); --kite-meter-caution-fill-color: var(--kite-color-caution, #faa41a); --kite-meter-sm-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-sm-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-sm-status-label-text-color: var(--kite-color-text, #000000); --kite-meter-sm-status-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-sm-status-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-sm-value-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-sm-value-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-lg-status-label-text-color: var(--kite-color-text, #000000); --kite-meter-lg-status-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-lg-status-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-lg-value-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-lg-value-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-circular-label-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-meter-circular-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-circular-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-circular-track-color: var(--kite-meter-track-color, #d8dde6); --kite-meter-circular-track-height: var(--kite-meter-track-height, 0.5rem); --kite-meter-circular-tick-color: var(--kite-meter-tick-color, #000000); --kite-meter-circular-tick-width: var(--kite-meter-tick-width, 0.25rem); --kite-meter-circular-value-label-text-size: var(--kite-typography-body-size, 1rem); --kite-meter-circular-value-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-meter-circular-sm-height: var(--kite-meter-circular-sm-width, 1.5rem); --kite-meter-circular-sm-track-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-meter-circular-sm-icon-width: var(--kite-meter-sm-icon-width, 0.75rem); --kite-meter-circular-sm-icon-height: var(--kite-meter-sm-icon-height, 0.75rem); --kite-meter-circular-lg-label-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-meter-circular-lg-label-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-meter-circular-lg-value-label-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-meter-circular-lg-icon-width: var(--kite-meter-lg-icon-width, 1rem); --kite-meter-circular-lg-icon-height: var(--kite-meter-lg-icon-height, 1rem); --kite-meter-circular-lg-icon-margin: var(--kite-spacing-xs, 0.5rem); --kite-meter-positive-progress-fill-background-color: var(--kite-color-positive, #008516); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-caution-progress-fill-background-color: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with 'meter-caution-fill-color' token */ --kite-meter-alert-progress-fill-background-color: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with 'meter-negative-fill-color' token */ --kite-meter-success-progress-fill-background-color: var(--kite-color-positive, #008516); /** @deprecated: Replace with 'meter-positive-fill-color' token */ --kite-meter-positive-status-icon-fill: var(--kite-color-positive, #008516); /** @deprecated: Replace with 'meter-positive-icon-color' token */ --kite-meter-caution-status-icon-fill: var(--kite-color-caution, #faa41a); /** @deprecated: Replace with 'meter-caution-icon-color' token */ --kite-meter-alert-status-icon-fill: var(--kite-color-negative, #d6312b); /** @deprecated: Replace with 'meter-negative-icon-color' token */ --kite-meter-linear-track-margin-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'meter-track-margin-bottom' token */ --kite-meter-linear-label-text-margin-bottom: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'meter-label-text-margin-bottom' token */ --kite-meter-circular-small-track-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'meter-circular-sm-track-margin-right' token */ --kite-meter-circular-large-status-icon-margin: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'meter-circular-lg-icon-margin' token */ --kite-meter-circular-large-value-label-text-margin-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'meter-circular-lg-value-label-margin-bottom' token */ --kite-pagination-controls-background-color: var(--kite-container-background-color, #ffffff); --kite-pagination-controls-border-color: var(--kite-border-color, #d8dde6); --kite-pagination-controls-border-style: var(--kite-border-style, solid); --kite-pagination-controls-margin-right: var(--kite-spacing-md, 1rem); --kite-pagination-controls-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-pagination-controls-margin-left: var(--kite-spacing-md, 1rem); --kite-pagination-controls-text-size: var(--kite-typography-body-size, 1rem); --kite-pagination-controls-button-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-pagination-controls-button-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-pagination-controls-button-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-pagination-controls-button-icon-color: var(--kite-color-primary, #0271eb); --kite-pagination-page-select-text-color: var(--kite-color-text, #000000); --kite-pagination-page-select-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-page-select-padding-right: var(--kite-spacing-md, 1rem); --kite-pagination-page-select-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-page-select-padding-left: var(--kite-spacing-md, 1rem); --kite-pagination-page-select-current-label-text-weight: var(--kite-pagination-dropdown-placeholder-text-weight, 700); --kite-pagination-dropdown-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-pagination-dropdown-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-pagination-dropdown-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-icon-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-dropdown-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-pagination-count-margin-right: var(--kite-spacing-md, 1rem); --kite-pagination-page-size-label-text-color: var(--kite-color-text, #000000); --kite-pagination-page-size-label-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-pagination-controls-padding-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'pagination-page-select-padding-top' token */ --kite-pagination-controls-padding-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'pagination-page-select-padding-right' token */ --kite-pagination-controls-padding-bottom: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'pagination-page-select-padding-bottom' token */ --kite-pagination-controls-padding-left: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'pagination-page-select-padding-left' token */ --kite-pagination-controls-button-disabled-icon-fill: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'pagination-controls-button-disabled-icon-color' token */ --kite-pagination-per-page-label-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with 'pagination-page-size-label-text-color' token */ --kite-pagination-per-page-label-margin-right: var(--kite-spacing-xs, 0.5rem); /** @deprecated: Replace with 'pagination-page-size-label-margin-right' token */ --kite-pagination-item-count-label-margin-right: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'pagination-count-margin-right' token */ --kite-payment-logo-background-color: var(--kite-container-background-color, #ffffff); --kite-payment-logo-text-color: var(--kite-color-text, #000000); --kite-payment-logo-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-payment-logo-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-popover-text-color: var(--kite-color-text, #000000); --kite-popover-text-size: var(--kite-typography-body-size, 1rem); --kite-popover-margin: var(--kite-spacing-xs, 0.5rem); --kite-popover-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-popover-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-popover-offset: var(--kite-spacing-2xs, 0.25rem); --kite-popover-arrow-border-width: var(--kite-border-width-thick, 0.125rem); --kite-popover-arrow-offset: var(--kite-spacing-md, 1rem); --kite-popover-trigger-disabled-icon-color: var(--kite-color-disabled, #9ba9bd); --kite-popover-trigger-icon-color: var(--kite-color-primary, #0271eb); --kite-popover-trigger-label-text-color: var(--kite-color-text, #000000); --kite-popover-trigger-label-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-popover-trigger-margin-left: var(--kite-spacing-2xs, 0.25rem); --kite-popover-trigger-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-popover-trigger-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-popover-title-text-size: var(--kite-typography-title-6-size, 1.125rem); --kite-popover-title-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-popover-link-margin-top: var(--kite-spacing-sm, 0.75rem); --kite-popover-dismiss-icon-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-popover-trigger-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'popover-trigger-icon-color' token */ --kite-popover-trigger-active-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'popover-trigger-expanded-icon-color' token */ --kite-popover-trigger-focus-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'popover-trigger-focus-icon-color' token */ --kite-popover-trigger-hover-icon-fill: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'popover-trigger-hover-icon-color' token */ --kite-progress-indicator-text-color: var(--kite-color-text, #000000); --kite-progress-indicator-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-progress-indicator-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-progress-indicator-label-margin-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-progress-indicator-label-text-color: var(--kite-color-text, #000000); --kite-progress-indicator-label-text-size: var(--kite-typography-body-size, 1rem); --kite-progress-indicator-label-text-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-progress-indicator-fill-color: var(--kite-color-primary, #0271eb); --kite-progress-indicator-backdrop-background-color: var(--kite-color-background, #ffffff); --kite-progress-indicator-value-label-size: var(--kite-typography-body-size, 1rem); --kite-progress-indicator-secondary-label-size: var(--kite-typography-body-size, 1rem); --kite-progress-indicator-secondary-label-margin-top: var(--kite-spacing-2xs, 0.25rem); --kite-progress-indicator-icon-height: var(--kite-progress-indicator-icon-width, 1.25rem); --kite-progress-indicator-positive-fill-color: var(--kite-color-positive, #008516); --kite-progress-indicator-negative-fill-color: var(--kite-color-negative, #d6312b); --kite-progress-indicator-button-margin-top: var(--kite-spacing-md, 1rem); --kite-progress-indicator-circular-label-text-size: var(--kite-typography-body-display-size, 1.25rem); --kite-progress-indicator-circular-label-text-margin-top: var(--kite-spacing-xs, 0.5rem); --kite-progress-indicator-circular-label-text-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-progress-indicator-circular-sm-height: var(--kite-progress-indicator-circular-sm-width, 1.5rem); --kite-progress-indicator-lg-status-text-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'progress-indicator-value-label-color' token */ --kite-progress-indicator-lg-status-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with 'progress-indicator-value-label-size' token */ --kite-progress-indicator-lg-label-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with 'progress-indicator-label-text-color' token */ --kite-progress-indicator-lg-label-text-size: var(--kite-typography-body-display-size, 1.25rem); /** @deprecated: Replace with 'progress-indicator-circular-label-text-size' token */ --kite-progress-indicator-lg-sub-label-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with 'progress-indicator-secondary-label-size' token */ --kite-radio-text-color: var(--kite-color-text, #000000); --kite-radio-border-color: var(--kite-form-control-border-color, #63738a); --kite-radio-border-width: var(--kite-border-width-thick, 0.125rem); --kite-radio-width: var(--kite-radio-height, 1.25rem); --kite-radio-selected-border-color: var(--kite-color-primary, #0271eb); --kite-radio-selected-focus-ring-width: var(--kite-radio-focus-ring-width, 0.25rem); --kite-radio-selected-disabled-border-color: var(--kite-color-disabled, #9ba9bd); --kite-radio-selected-indicator-width: var(--kite-radio-selected-indicator-height, 0.75rem); --kite-radio-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-radio-cursor: var(--kite-form-control-cursor, pointer); --kite-radio-input-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-radio-group-legend-text-size: var(--kite-typography-body-size, 1rem); --kite-radio-group-legend-margin-bottom: var(--kite-spacing-md, 1rem); --kite-radio-selected-disabled-center-background-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'radio-selected-disabled-indicator-background-color' token */ --kite-search-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-search-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-search-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-search-input-addon-focus-ring-offset: var(--kite-form-control-addon-focus-ring-offset, -0.125rem); --kite-search-input-addon-icon-width: var(--kite-form-control-addon-icon-width, 1.5rem); --kite-search-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-search-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-select-background-color: var(--kite-form-control-background-color, #ffffff); --kite-select-border-color: var(--kite-form-control-border-color, #63738a); --kite-select-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-select-cursor: var(--kite-form-control-cursor, pointer); --kite-select-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-select-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-select-error-text-margin-top: var(--kite-spacing-2xs, 0.25rem); /** @deprecated: Replace with 'select-feedback-margin-top' token */ --kite-skip-link-text-size: var(--kite-typography-body-size, 1rem); --kite-skip-link-border-style: var(--kite-border-style, solid); --kite-skip-link-border-width: var(--kite-border-width-thick, 0.125rem); --kite-skip-link-padding-top: var(--kite-spacing-md, 1rem); --kite-skip-link-padding-right: var(--kite-spacing-md, 1rem); --kite-skip-link-padding-bottom: var(--kite-spacing-md, 1rem); --kite-skip-link-padding-left: var(--kite-spacing-md, 1rem); --kite-skip-link-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-skip-link-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-skip-link-stacked-margin-top: var(--kite-spacing-md, 1rem); --kite-skip-link-spacing-stack: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'skip-link-stacked-margin-top' token */ --kite-switch-text-color: var(--kite-color-text, #000000); --kite-switch-focus-ring-color: var(--kite-switch-track-background-color, #63738a); --kite-switch-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-switch-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-switch-focus-ring-offset: var(--kite-focus-ring-offset, 0.125rem); --kite-switch-disabled-thumb-background-color: var(--kite-color-on-disabled, #d8dde6); --kite-switch-disabled-label-text-color: var(--kite-color-disabled, #9ba9bd); --kite-switch-disabled-track-background-color: var(--kite-color-disabled, #9ba9bd); --kite-switch-transition-duration: var(--kite-motion-fast, 750ms); --kite-switch-thumb-width: var(--kite-switch-thumb-height, 1.25rem); --kite-switch-label-text-color: var(--kite-color-text, #000000); --kite-switch-label-text-size: var(--kite-typography-body-size, 1rem); --kite-switch-label-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-switch-label-margin-right: var(--kite-spacing-xl, 1.5rem); --kite-switch-on-track-background-color: var(--kite-color-primary, #0271eb); --kite-switch-on-thumb-background-color: var(--kite-color-on-primary, #ffffff); --kite-switch-on-track-background-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'switch-on-track-background-color' token */ --kite-switch-disabled-label-text-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'switch-disabled-label-text-color' token */ --kite-switch-disabled-track-background-color-dark: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'switch-disabled-track-background-color' token */ --kite-switch-group-margin-top: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-switch-group-margin-bottom: var(--kite-spacing-2xl, 2rem); /** @deprecated */ --kite-switch-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'switch-transition-timing-function' token */ --kite-tabs-text-color: var(--kite-color-text, #000000); --kite-tabs-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tabs-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tabs-transition-duration: var(--kite-motion-fast, 750ms); --kite-tabs-tab-text-color: var(--kite-color-text, #000000); --kite-tabs-tab-text-size: var(--kite-typography-body-size, 1rem); --kite-tabs-tab-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-tabs-tab-border-bottom-style: var(--kite-border-style, solid); --kite-tabs-tab-border-bottom-width: var(--kite-border-width-thick, 0.125rem); --kite-tabs-tab-padding-top: var(--kite-spacing-md, 1rem); --kite-tabs-tab-padding-right: var(--kite-spacing-lg, 1.25rem); --kite-tabs-tab-padding-bottom: var(--kite-spacing-md, 1rem); --kite-tabs-tab-padding-left: var(--kite-spacing-lg, 1.25rem); --kite-tabs-tab-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tabs-tab-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tabs-tab-selected-text-color: var(--kite-color-primary, #0271eb); --kite-tabs-tab-selected-border-bottom-color: var(--kite-color-primary, #0271eb); --kite-tabs-tab-disabled-text-color: var(--kite-color-disabled, #9ba9bd); --kite-tabs-panel-padding-top: var(--kite-spacing-md, 1rem); --kite-tabs-panel-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tabs-panel-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tabs-item-border-bottom-style: var(--kite-border-style, solid); /** @deprecated: Replace with 'tabs-tab-border-bottom-style' token */ --kite-tabs-item-border-bottom-width: var(--kite-border-width-thick, 0.125rem); /** @deprecated: Replace with 'tabs-tab-border-bottom-width' token */ --kite-tabs-item-min-padding-top: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'tabs-tab-padding-top' token */ --kite-tabs-item-min-padding-right: var(--kite-spacing-lg, 1.25rem); /** @deprecated: Replace with 'tabs-tab-padding-right' token */ --kite-tabs-item-min-padding-bottom: var(--kite-spacing-md, 1rem); /** @deprecated: Replace with 'tabs-tab-padding-bottom' token */ --kite-tabs-item-min-padding-left: var(--kite-spacing-lg, 1.25rem); /** @deprecated: Replace with 'tabs-tab-padding-left' token */ --kite-tabs-item-text-color: var(--kite-color-text, #000000); /** @deprecated: Replace with 'tabs-tab-text-color' token */ --kite-tabs-item-text-size: var(--kite-typography-body-size, 1rem); /** @deprecated: Replace with 'tabs-tab-text-size' token */ --kite-tabs-item-active-text-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'tabs-tab-selected-text-color' token */ --kite-tabs-item-active-border-bottom-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'tabs-tab-selected-border-bottom-color' token */ --kite-tabs-item-active-border-bottom-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'tabs-tab-selected-border-bottom-color' token */ --kite-tabs-item-disabled-text-color: var(--kite-color-disabled, #9ba9bd); /** @deprecated: Replace with 'tabs-tab-disabled-text-color' token */ --kite-tabs-item-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with 'tabs-tab-focus-ring-style' token */ --kite-tabs-item-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with 'tabs-tab-focus-ring-width' token */ --kite-tabs-transition-curve: var(--kite-motion-standard, cubic-bezier(0.25, 0.1, 0.25, 1)); /** @deprecated: Replace with 'tabs-transition-timing-function' token */ --kite-tag-group-margin: var(--kite-spacing-xs, 0.5rem); --kite-tag-text-color: var(--kite-color-text, #000000); --kite-tag-border-style: var(--kite-border-style, solid); --kite-tag-padding-right: var(--kite-spacing-2xs, 0.25rem); --kite-tag-padding-left: var(--kite-spacing-2xs, 0.25rem); --kite-tag-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tag-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tag-icon-margin-right: var(--kite-spacing-2xs, 0.25rem); --kite-tag-caution-background-color: var(--kite-color-caution-muted, #fff3e0); --kite-tag-caution-border-color: var(--kite-color-caution, #faa41a); --kite-tag-caution-icon-color: var(--kite-tag-caution-text-color, #000000); --kite-tag-negative-background-color: var(--kite-color-negative-muted, #ffefef); --kite-tag-negative-border-color: var(--kite-color-negative, #d6312b); --kite-tag-neutral-background-color: var(--kite-color-neutral-muted, #e5f2ff); --kite-tag-neutral-border-color: var(--kite-color-neutral, #73b7ff); --kite-tag-neutral-icon-color: var(--kite-tag-neutral-text-color, #000000); --kite-tag-positive-background-color: var(--kite-color-positive-muted, #e8ffe8); --kite-tag-positive-border-color: var(--kite-color-positive, #008516); --kite-tag-positive-icon-color: var(--kite-tag-positive-text-color, #000000); --kite-tag-solid-icon-color: var(--kite-tag-solid-text-color, #000000); --kite-tag-solid-caution-background-color: var(--kite-color-caution, #faa41a); --kite-tag-solid-caution-text-color: var(--kite-color-on-caution, #000000); --kite-tag-solid-negative-background-color: var(--kite-color-negative, #d6312b); --kite-tag-solid-negative-text-color: var(--kite-color-on-negative, #ffffff); --kite-tag-solid-neutral-background-color: var(--kite-color-neutral, #73b7ff); --kite-tag-solid-neutral-text-color: var(--kite-color-on-neutral, #000000); --kite-tag-solid-positive-background-color: var(--kite-color-positive, #008516); --kite-tag-solid-positive-text-color: var(--kite-color-on-positive, #ffffff); --kite-text-area-background-color: var(--kite-form-control-background-color, #ffffff); --kite-text-area-border-color: var(--kite-form-control-border-color, #63738a); --kite-text-area-disabled-character-count-text-color: var(--kite-color-disabled, #9ba9bd); --kite-text-area-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-text-area-cursor: var(--kite-form-control-cursor, pointer); --kite-text-area-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-text-area-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-text-area-character-count-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-text-area-character-count-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-text-area-character-count-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-text-area-error-character-count-text-color: var(--kite-color-negative, #d6312b); --kite-text-area-border-color-dark: var(--kite-form-control-border-color, #63738a); /** @deprecated: Replace with 'text-area-border-color' token */ --kite-text-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-text-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-text-input-disabled-character-count-text-color: var(--kite-color-disabled, #9ba9bd); --kite-text-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-text-input-cursor: var(--kite-form-control-cursor, pointer); --kite-text-input-addon-focus-ring-offset: var(--kite-form-control-addon-focus-ring-offset, -0.125rem); --kite-text-input-addon-icon-width: var(--kite-form-control-addon-icon-width, 1.5rem); --kite-text-input-character-count-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-text-input-character-count-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-text-input-character-count-margin-bottom: var(--kite-spacing-xs, 0.5rem); --kite-text-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-text-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-text-input-error-character-count-text-color: var(--kite-color-negative, #d6312b); --kite-text-input-secure-icon-margin-right: var(--kite-spacing-xs, 0.5rem); --kite-text-input-secure-confirm-icon-color: var(--kite-color-positive, #008516); --kite-text-input-border-color-dark: var(--kite-form-control-border-color, #63738a); /** @deprecated: Replace with 'text-input-border-color' token */ --kite-text-input-secure-confirm-icon-color-dark: var(--kite-color-success, #008516); /** @deprecated: Replace with 'text-input-secure-confirm-icon-color' token */ --kite-text-input-secure-show-icon-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'text-input-secure-icon-color' token */ --kite-text-input-secure-show-icon-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'text-input-secure-icon-color' token */ --kite-text-input-secure-show-icon-focus-ring-style: var(--kite-focus-ring-style, solid); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-style' token */ --kite-text-input-secure-show-icon-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-width' token */ --kite-text-input-secure-hide-icon-color: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'text-input-secure-visible-icon-color' token */ --kite-text-input-secure-hide-icon-color-dark: var(--kite-color-primary, #0271eb); /** @deprecated: Replace with 'text-input-secure-visible-icon-color' token */ --kite-time-input-background-color: var(--kite-form-control-background-color, #ffffff); --kite-time-input-border-color: var(--kite-form-control-border-color, #63738a); --kite-time-input-disabled-cursor: var(--kite-form-control-disabled-cursor, not-allowed); --kite-time-input-cursor: var(--kite-form-control-cursor, pointer); --kite-time-input-icon-size: var(--kite-spacing-xl, 1.5rem); --kite-time-input-placeholder-margin-right: var(--kite-spacing-md, 1rem); --kite-time-input-placeholder-text-color: var(--kite-form-control-placeholder-text-color, #63738a); --kite-time-input-placeholder-text-style: var(--kite-form-control-placeholder-text-style, normal); --kite-toast-text-size: var(--kite-typography-body-size, 1rem); --kite-toast-text-line-height: var(--kite-typography-body-line-height, 1.5); --kite-toast-border-style: var(--kite-border-style, solid); --kite-toast-margin-top: var(--kite-spacing-2xl, 2rem); --kite-toast-margin-bottom: var(--kite-spacing-2xl, 2rem); --kite-toast-padding-top: var(--kite-spacing-sm, 0.75rem); --kite-toast-padding-right: var(--kite-spacing-sm, 0.75rem); --kite-toast-padding-bottom: var(--kite-spacing-sm, 0.75rem); --kite-toast-padding-left: var(--kite-spacing-sm, 0.75rem); --kite-toast-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-toast-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-toast-offset: var(--kite-spacing-2xl, 2rem); --kite-toast-transition-duration: var(--kite-motion-fast, 750ms); --kite-toast-icon-margin-right: var(--kite-spacing-sm, 0.75rem); --kite-tooltip-text-size: var(--kite-typography-caption-1-size, 0.875rem); --kite-tooltip-text-line-height: var(--kite-typography-caption-1-line-height, 1.429); --kite-tooltip-padding-top: var(--kite-spacing-2xs, 0.25rem); --kite-tooltip-padding-right: var(--kite-spacing-md, 1rem); --kite-tooltip-padding-bottom: var(--kite-spacing-2xs, 0.25rem); --kite-tooltip-padding-left: var(--kite-spacing-md, 1rem); --kite-tooltip-focus-ring-style: var(--kite-focus-ring-style, solid); --kite-tooltip-focus-ring-width: var(--kite-focus-ring-width, 0.125rem); --kite-tooltip-arrow-background-color: var(--kite-tooltip-background-color, #000f1a); --kite-tooltip-entry-transition-duration: var(--kite-motion-fast, 750ms); --kite-tooltip-exit-transition-duration: var(--kite-motion-fast, 750ms); --kite-tooltip-entrance-transition-duration: var(--kite-motion-fast, 750ms); /** @deprecated: Replace with 'tooltip-entry-transition-duration' token */ --kite-tooltip-entrance-transition-curve: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); /** @deprecated: Replace with 'tooltip-entry-transition-timing-function' token */ --kite-tooltip-entry-transition-curve: var(--kite-motion-entry, cubic-bezier(0, 0, 0.58, 1)); /** @deprecated: Replace with 'tooltip-entry-transition-timing-function' token */ --kite-tooltip-exit-transition-curve: var(--kite-motion-exit, cubic-bezier(0.42, 0, 1, 1)); /** @deprecated: Replace with 'tooltip-exit-transition-timing-function' token */ --kite-border-radius: var(--kite-border-radius-sm, 0.125rem); /** Default border radius used for most UI elements */ --kite-container-border-width: var(--kite-border-width, 0.0625rem); --kite-my-component-border-width: var(--kite-border-width, 0.0625rem); --kite-my-component-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-my-component-icon-color: var(--kite-my-component-text-color, #000000); --kite-form-control-border-width: var(--kite-border-width, 0.0625rem); --kite-form-control-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-form-control-focus-border-color: var(--kite-focus-ring-color, #0257b2); --kite-form-control-label-text-weight: var(--kite-typography-body-weight, 400); --kite-form-control-picker-border-color: var(--kite-container-border-color, #d8dde6); --kite-form-control-picker-border-width: var(--kite-border-width, 0.0625rem); --kite-form-control-picker-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-form-control-picker-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-form-control-picker-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-form-control-picker-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-form-control-picker-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-form-control-picker-list-item-border-style: var(--kite-form-control-picker-border-style, solid); --kite-form-control-picker-list-item-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-form-control-picker-list-item-negative-icon-color: var(--kite-form-control-picker-list-item-negative-text-color, #d6312b); --kite-form-control-input-focus-ring-color: var(--kite-focus-ring-color, #0257b2); /** @deprecated: Replace with "form-control-focus-ring-color" token */ --kite-form-spacing-stack: var(--kite-form-spacing-stack-xl, 1.5rem); /** Vertical spacing to use between form fields and groups */ --kite-typography-display-letter-spacing: var(--kite-typography-sm-display-letter-spacing, normal); --kite-typography-display-margin-bottom: var(--kite-typography-sm-display-margin-bottom, 1rem); --kite-typography-title-1-margin-bottom: var(--kite-typography-sm-title-1-margin-bottom, 0.75rem); --kite-typography-title-2-margin-bottom: var(--kite-typography-sm-title-2-margin-bottom, 0.5rem); --kite-typography-title-3-margin-bottom: var(--kite-typography-sm-title-3-margin-bottom, 0.5rem); --kite-typography-title-4-margin-bottom: var(--kite-typography-sm-title-4-margin-bottom, 0.5rem); --kite-typography-title-5-margin-bottom: var(--kite-typography-sm-title-5-margin-bottom, 0.25rem); --kite-typography-title-6-margin-bottom: var(--kite-typography-sm-title-6-margin-bottom, 0.25rem); --kite-typography-body-display-margin-bottom: var(--kite-typography-sm-body-display-margin-bottom, 1.5rem); --kite-typography-body-margin-bottom: var(--kite-typography-sm-body-margin-bottom, 1rem); --kite-typography-eyebrow-letter-spacing: var(--kite-typography-sm-eyebrow-letter-spacing, 0.125rem); --kite-typography-eyebrow-margin-bottom: var(--kite-typography-sm-eyebrow-margin-bottom, 0.5rem); --kite-typography-caption-1-margin-bottom: var(--kite-typography-sm-caption-1-margin-bottom, 0.75rem); --kite-typography-caption-2-margin-bottom: var(--kite-typography-sm-caption-2-margin-bottom, 0.75rem); --kite-typography-caption-weight: var(--kite-typography-caption-1-weight, 400); /** @deprecated: Replace with 'typography-caption-1-weight' token */ --kite-typography-caption-style: var(--kite-typography-caption-1-style, normal); /** @deprecated: Replace with 'typography-caption-1-style' token */ --kite-typography-caption-letter-spacing: var(--kite-typography-caption-1-letter-spacing, normal); /** @deprecated: Replace with 'typography-caption-1-letter-spacing' token */ --kite-accordion-border-width: var(--kite-border-width, 0.0625rem); --kite-accordion-padding-top: var(--kite-accordion-padding-top-sm, 1rem); --kite-accordion-padding-right: var(--kite-accordion-padding-right-sm, 1rem); --kite-accordion-padding-bottom: var(--kite-accordion-padding-bottom-sm, 1rem); --kite-accordion-padding-left: var(--kite-accordion-padding-left-sm, 1rem); --kite-accordion-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-accordion-icon-color: var(--kite-accordion-title-text-color, #000000); --kite-accordion-icon-transition-timing-function: var(--kite-accordion-icon-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-accordion-label-text-weight: var(--kite-typography-body-weight, 400); --kite-accordion-expanded-transition-timing-function: var(--kite-accordion-expanded-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-accordion-border-bottom-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "accordion-border-width" token */ --kite-alert-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-alert-border-width: var(--kite-border-width, 0.0625rem); --kite-alert-text-weight: var(--kite-typography-body-weight, 400); --kite-alert-dismiss-icon-color: var(--kite-alert-text-color, #000000); --kite-alert-passive-link-text-color: var(--kite-alert-text-color, #000000); --kite-alert-passive-title-letter-spacing: var(--kite-typography-body-letter-spacing, normal); --kite-alert-passive-caution-status-icon-color: var(--kite-alert-text-color, #000000); --kite-alert-page-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with "alert-border-radius" token */ --kite-badge-border-width: var(--kite-border-width, 0.0625rem); --kite-badge-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-blockquote-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-button-group-item-margin-right: var(--kite-button-group-button-margin-right, 1.5rem); --kite-button-group-item-margin-bottom: var(--kite-button-group-button-margin-bottom, 1rem); --kite-button-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-button-border-width: var(--kite-border-width, 0.0625rem); --kite-button-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-button-focus-ring-radius: var(--kite-border-radius-lg, 0.5rem); --kite-button-focus-icon-color: var(--kite-button-focus-text-color, #ffffff); --kite-button-hover-icon-color: var(--kite-button-hover-text-color, #ffffff); --kite-button-press-icon-color: var(--kite-button-press-text-color, #ffffff); --kite-button-disabled-icon-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-icon-color: var(--kite-button-text-color, #ffffff); --kite-button-destructive-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-button-destructive-icon-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-focus-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-hover-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-press-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-primary-background-color: var(--kite-button-background-color, #0271eb); --kite-button-primary-border-style: var(--kite-button-border-style, solid); --kite-button-primary-text-color: var(--kite-button-text-color, #ffffff); --kite-button-primary-press-background-color: var(--kite-button-press-background-color, #0257b2); --kite-button-primary-press-text-color: var(--kite-button-press-text-color, #ffffff); --kite-button-primary-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-primary-focus-background-color: var(--kite-button-focus-background-color, #0257b2); --kite-button-primary-focus-text-color: var(--kite-button-focus-text-color, #ffffff); --kite-button-primary-hover-background-color: var(--kite-button-hover-background-color, #0257b2); --kite-button-primary-hover-text-color: var(--kite-button-hover-text-color, #ffffff); --kite-button-primary-destructive-background-color: var(--kite-button-destructive-background-color, #d6312b); --kite-button-primary-destructive-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-primary-destructive-disabled-background-color: var(--kite-button-destructive-disabled-background-color, #d8dde6); --kite-button-primary-destructive-disabled-border-color: var(--kite-button-destructive-disabled-border-color, rgba(0, 0, 0, 0)); --kite-button-secondary-icon-color: var(--kite-button-secondary-text-color, #0271eb); --kite-button-secondary-border-style: var(--kite-button-border-style, solid); --kite-button-secondary-focus-text-color: var(--kite-button-focus-text-color, #ffffff); --kite-button-secondary-hover-text-color: var(--kite-button-hover-text-color, #ffffff); --kite-button-secondary-press-text-color: var(--kite-button-press-text-color, #ffffff); --kite-button-secondary-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-secondary-destructive-icon-color: var(--kite-button-secondary-destructive-text-color, #d6312b); --kite-button-secondary-destructive-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-borderless-border-style: var(--kite-button-border-style, solid); --kite-button-borderless-icon-color: var(--kite-button-borderless-text-color, #0271eb); --kite-button-borderless-focus-icon-color: var(--kite-button-borderless-focus-text-color, #0257b2); --kite-button-borderless-hover-icon-color: var(--kite-button-borderless-hover-text-color, #0257b2); --kite-button-borderless-press-icon-color: var(--kite-button-borderless-press-text-color, #0257b2); --kite-button-borderless-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-button-borderless-destructive-icon-color: var(--kite-button-borderless-destructive-text-color, #d6312b); --kite-button-borderless-destructive-focus-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-hover-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-press-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-disabled-border-color: var(--kite-button-borderless-destructive-border-color, rgba(0, 0, 0, 0)); --kite-button-borderless-destructive-disabled-text-color: var(--kite-button-disabled-text-color, #9ba9bd); --kite-calendar-border-width: var(--kite-border-width, 0.0625rem); --kite-calendar-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-calendar-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-calendar-controls-text-color: var(--kite-form-control-text-color, #000000); --kite-calendar-day-text-color: var(--kite-form-control-text-color, #000000); --kite-calendar-day-invalid-text-decoration-thickness: var(--kite-calendar-day-unavailable-text-decoration-thickness, 0.125rem); --kite-calendar-day-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-calendar-day-due-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-calendar-day-out-month-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-calendar-day-out-month-hover-text-color: var(--kite-form-control-text-color, #000000); --kite-calendar-day-out-range-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-calendar-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-calendar-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-calendar-error-feedback-icon-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-calendar-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-calendar-standalone-background-color: var(--kite-card-background-color, #ffffff); --kite-card-border-color: var(--kite-container-border-color, #d8dde6); --kite-card-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-card-border-style: var(--kite-container-border-style, solid); --kite-card-padding-top: var(--kite-card-padding-top-sm, 1rem); --kite-card-padding-right: var(--kite-card-padding-right-sm, 1rem); --kite-card-padding-bottom: var(--kite-card-padding-bottom-sm, 1rem); --kite-card-padding-left: var(--kite-card-padding-left-sm, 1rem); --kite-card-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-checkbox-border-style: var(--kite-form-control-border-style, solid); --kite-checkbox-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-checkbox-focus-ring-radius: var(--kite-border-radius-md, 0.25rem); --kite-checkbox-selected-disabled-icon-color: var(--kite-checkbox-disabled-icon-color, #d8dde6); --kite-checkbox-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-checkbox-disabled-label-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-checkbox-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-checkbox-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-checkbox-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-checkbox-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-checkbox-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-checkbox-group-checkbox-margin-bottom: var(--kite-form-spacing-stack-md, 1rem); --kite-checkbox-indeterminate-background-color: var(--kite-checkbox-selected-background-color, #0271eb); --kite-checkbox-indeterminate-icon-color: var(--kite-checkbox-selected-icon-color, #ffffff); --kite-checkbox-indeterminate-disabled-background-color: var(--kite-checkbox-selected-disabled-background-color, #9ba9bd); --kite-chip-border-width: var(--kite-border-width, 0.0625rem); --kite-chip-selected-padding-top: var(--kite-chip-padding-top, 0.25rem); --kite-chip-selected-padding-bottom: var(--kite-chip-padding-bottom, 0.25rem); --kite-combobox-text-color: var(--kite-form-control-text-color, #000000); --kite-combobox-border-style: var(--kite-form-control-border-style, solid); --kite-combobox-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-combobox-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-combobox-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-combobox-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-combobox-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-combobox-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-combobox-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-combobox-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-combobox-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-combobox-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-combobox-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-combobox-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-combobox-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-combobox-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-combobox-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-combobox-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-combobox-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-combobox-picker-offset-y: var(--kite-form-control-picker-offset, 0.25rem); --kite-combobox-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-combobox-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-combobox-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-data-table-border-width: var(--kite-border-width, 0.0625rem); --kite-data-table-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-data-table-header-text-color: var(--kite-data-table-text-color, #000000); --kite-data-table-header-border-bottom-color: var(--kite-data-table-border-color, #d8dde6); --kite-data-table-header-border-bottom-style: var(--kite-data-table-border-style, solid); --kite-data-table-cell-border-color: var(--kite-data-table-border-color, #d8dde6); --kite-data-table-cell-border-style: var(--kite-data-table-border-style, solid); --kite-data-table-cell-padding-top: var(--kite-data-table-padding-top, 0.75rem); --kite-data-table-cell-padding-right: var(--kite-data-table-padding-right, 0.75rem); --kite-data-table-cell-padding-bottom: var(--kite-data-table-padding-bottom, 0.75rem); --kite-data-table-cell-padding-left: var(--kite-data-table-padding-left, 0.75rem); --kite-data-table-cell-focus-ring-style: var(--kite-data-table-focus-ring-style, solid); --kite-data-table-cell-focus-ring-width: var(--kite-data-table-focus-ring-width, 0.125rem); --kite-data-table-row-background-color: var(--kite-data-table-background-color, #ffffff); --kite-data-table-row-border-color: var(--kite-data-table-border-color, #d8dde6); --kite-data-table-row-border-style: var(--kite-data-table-border-style, solid); --kite-data-table-row-focus-ring-style: var(--kite-data-table-focus-ring-style, solid); --kite-data-table-row-focus-ring-width: var(--kite-data-table-focus-ring-width, 0.125rem); --kite-date-input-text-color: var(--kite-form-control-text-color, #000000); --kite-date-input-border-style: var(--kite-form-control-border-style, solid); --kite-date-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-date-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-date-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-date-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-date-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-date-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-date-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-date-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-date-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-date-input-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-date-input-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-date-input-addon-icon-color: var(--kite-form-control-addon-icon-color, #0271eb); --kite-date-input-addon-padding-right: var(--kite-form-control-addon-padding-right, 0.5rem); --kite-date-input-addon-padding-left: var(--kite-form-control-addon-padding-left, 0.5rem); --kite-date-input-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-date-input-picker-offset: var(--kite-form-control-picker-offset, 0.25rem); --kite-date-input-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-date-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-date-input-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-date-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-date-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-dialog-border-color: var(--kite-container-border-color, #d8dde6); --kite-dialog-border-style: var(--kite-container-border-style, solid); --kite-dialog-padding-top: var(--kite-dialog-full-size-padding-top, 3rem); --kite-dialog-padding-right: var(--kite-dialog-full-size-padding-right, 1rem); --kite-dialog-padding-bottom: var(--kite-dialog-full-size-padding-bottom, 1.25rem); --kite-dialog-padding-left: var(--kite-dialog-full-size-padding-left, 1rem); --kite-dialog-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-dialog-breakpoint-md-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-dialog-title-text-weight: var(--kite-typography-title-5-weight, 500); --kite-dialog-dismiss-icon-color: var(--kite-dialog-icon-color, #000000); --kite-dialog-scrolled-border-top-width: var(--kite-border-width, 0.0625rem); --kite-dialog-default-size-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with "dialog-breakpoint-md-border-radius" token */ --kite-dropdown-text-color: var(--kite-form-control-text-color, #000000); --kite-dropdown-text-size: var(--kite-form-control-text-size, 1rem); --kite-dropdown-border-style: var(--kite-form-control-border-style, solid); --kite-dropdown-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-dropdown-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-dropdown-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-dropdown-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-dropdown-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-dropdown-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-dropdown-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-dropdown-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-dropdown-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-dropdown-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-dropdown-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-dropdown-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-dropdown-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-dropdown-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-dropdown-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-dropdown-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-dropdown-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-dropdown-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-dropdown-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-dropdown-list-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-dropdown-list-border-width: var(--kite-border-width, 0.0625rem); --kite-dropdown-list-item-border-color: var(--kite-menu-list-border-color, #d8dde6); --kite-dropdown-list-item-border-width: var(--kite-border-width, 0.0625rem); --kite-dropdown-list-item-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-dropdown-list-item-negative-icon-color: var(--kite-menu-list-item-negative-text-color, #d6312b); --kite-dropdown-inline-text-color: var(--kite-form-control-text-color, #000000); --kite-dropdown-inline-border-style: var(--kite-form-control-border-style, solid); --kite-dropdown-inline-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-dropdown-inline-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-dropdown-list-item-border-bottom-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "dropdown-list-item-border-width" token */ --kite-dynamic-hint-background-color: var(--kite-card-background-color, #ffffff); --kite-dynamic-hint-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-dynamic-hint-criteria-text-size: var(--kite-dynamic-hint-text-size, 1rem); --kite-dynamic-hint-criteria-text-color: var(--kite-dynamic-hint-text-color, #000000); --kite-interactive-list-border-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "list-border-width" token */ --kite-interactive-list-focus-ring-color: var(--kite-focus-ring-color, #0257b2); /** @deprecated: Replace with "list-focus-ring-color" token */ --kite-interactive-list-item-border-color: var(--kite-interactive-list-border-color, #d8dde6); /** @deprecated: Replace with "list-item-border-color" token */ --kite-interactive-list-item-border-style: var(--kite-interactive-list-border-style, solid); /** @deprecated: Replace with "list-item-border-style" token */ --kite-interactive-list-item-focus-ring-color: var(--kite-focus-ring-color, #0257b2); /** @deprecated: Replace with "list-item-focus-ring-color" token */ --kite-interactive-list-item-padding-top-sm: var(--kite-interactive-list-item-padding-top, 1rem); /** @deprecated: Replace with "list-item-padding-top-sm" token */ --kite-interactive-list-item-padding-bottom-sm: var(--kite-interactive-list-item-padding-bottom, 1rem); /** @deprecated: Replace with "list-item-padding-bottom-sm" token */ --kite-interactive-list-item-padding-top-md: var(--kite-interactive-list-item-padding-top, 1rem); /** @deprecated: Replace with "list-item-padding-top-md" token */ --kite-interactive-list-item-padding-bottom-md: var(--kite-interactive-list-item-padding-bottom, 1rem); /** @deprecated: Replace with "list-item-padding-bottom-md" token */ --kite-interactive-list-item-padding-top-lg: var(--kite-interactive-list-item-padding-top, 1rem); /** @deprecated: Replace with "list-item-padding-top-lg" token */ --kite-interactive-list-item-padding-bottom-lg: var(--kite-interactive-list-item-padding-bottom, 1rem); /** @deprecated: Replace with "list-item-padding-bottom-lg" token */ --kite-interactive-list-item-icon-color: var(--kite-interactive-list-item-text-color, #000000); /** @deprecated: Replace with "list-item-icon-color" token */ --kite-interactive-list-item-label-text-color: var(--kite-interactive-list-item-text-color, #000000); /** @deprecated: Replace with "list-item-label-text-color" token */ --kite-interactive-list-item-title-text-weight: var(--kite-typography-title-6-weight, 500); /** @deprecated: Replace with "list-item-title-text-weight" token */ --kite-interactive-list-item-disabled-icon-color: var(--kite-interactive-list-item-disabled-text-color, #9ba9bd); /** @deprecated: Replace with "list-item-disabled-icon-color" token */ --kite-interactive-list-item-breakpoint-md-title-text-weight: var(--kite-typography-title-6-weight, 500); /** @deprecated: Replace with "list-item-breakpoint-md-title-text-weight" token */ --kite-link-text-weight: var(--kite-typography-body-weight, 400); --kite-link-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-link-focus-text-color: var(--kite-link-text-color, #0271eb); --kite-link-icon-color: var(--kite-link-text-color, #0271eb); --kite-link-standalone-visited-icon-color: var(--kite-link-visited-text-color, #002e52); --kite-link-standalone-icon-margin-left: var(--kite-link-icon-margin, 0.25rem); /** @deprecated: Replace with 'link-icon-margin' token */ --kite-list-border-width: var(--kite-border-width, 0.0625rem); --kite-list-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-list-item-border-color: var(--kite-list-border-color, #d8dde6); --kite-list-item-border-style: var(--kite-list-border-style, solid); --kite-list-item-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-list-item-padding-top-sm: var(--kite-list-item-padding-top, 1rem); --kite-list-item-padding-bottom-sm: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-padding-top-md: var(--kite-list-item-padding-top, 1rem); --kite-list-item-padding-bottom-md: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-padding-top-lg: var(--kite-list-item-padding-top, 1rem); --kite-list-item-padding-bottom-lg: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-slot-start-margin-right: var(--kite-list-start-margin-right, 0.5rem); --kite-list-item-slot-end-margin-left: var(--kite-list-end-margin-left, 0.5rem); --kite-list-item-icon-color: var(--kite-list-item-text-color, #000000); --kite-list-item-label-text-color: var(--kite-list-item-text-color, #000000); --kite-list-item-title-text-weight: var(--kite-typography-title-6-weight, 500); --kite-list-item-disabled-icon-color: var(--kite-list-item-disabled-text-color, #9ba9bd); --kite-list-item-negative-label-icon-color: var(--kite-list-item-negative-label-text-color, #d6312b); --kite-list-item-neutral-label-icon-color: var(--kite-list-item-neutral-label-text-color, #0271eb); --kite-list-item-positive-label-icon-color: var(--kite-list-item-positive-label-text-color, #008516); --kite-list-item-expandable-content-padding-right: var(--kite-list-item-padding-right, 0.5rem); --kite-list-item-expandable-content-padding-bottom: var(--kite-list-item-padding-bottom, 1rem); --kite-list-item-expandable-content-padding-left: var(--kite-list-item-padding-left, 0.5rem); --kite-list-item-breakpoint-md-title-text-weight: var(--kite-typography-title-6-weight, 500); --kite-menu-list-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-menu-list-border-width: var(--kite-border-width, 0.0625rem); --kite-menu-list-item-border-color: var(--kite-menu-list-border-color, #d8dde6); --kite-menu-list-item-border-width: var(--kite-border-width, 0.0625rem); --kite-menu-list-item-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-menu-list-item-negative-icon-color: var(--kite-menu-list-item-negative-text-color, #d6312b); --kite-menu-trigger-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-menu-trigger-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-menu-contextual-label-trigger-padding-right: var(--kite-menu-trigger-padding-right, 0.75rem); --kite-menu-contextual-label-trigger-padding-left: var(--kite-menu-trigger-padding-left, 0.75rem); --kite-menu-contextual-label-trigger-activated-label-text-color: var(--kite-menu-trigger-activated-icon-color, #ffffff); --kite-menu-list-item-border-bottom-width: var(--kite-border-width, 0.0625rem); /** @deprecated: Replace with "menu-list-item-border-width" token */ --kite-meter-icon-color: var(--kite-meter-fill-color, #73b7ff); --kite-meter-track-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-meter-positive-icon-color: var(--kite-meter-positive-fill-color, #008516); --kite-meter-negative-icon-color: var(--kite-meter-negative-fill-color, #d6312b); --kite-meter-caution-icon-color: var(--kite-meter-caution-fill-color, #faa41a); --kite-meter-sm-track-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-meter-lg-track-border-radius: var(--kite-border-radius-lg, 0.5rem); --kite-meter-circular-track-margin-bottom: var(--kite-meter-track-margin-bottom, 0.25rem); --kite-meter-circular-fill-color: var(--kite-meter-fill-color, #73b7ff); --kite-meter-circular-tick-height: var(--kite-meter-circular-track-height, 0.5rem); --kite-meter-circular-sm-label-text-size: var(--kite-meter-sm-label-text-size, 0.875rem); --kite-meter-circular-sm-label-text-line-height: var(--kite-meter-sm-label-text-line-height, 1.429); --kite-meter-circular-sm-value-label-text-size: var(--kite-meter-sm-label-text-size, 0.875rem); --kite-meter-circular-sm-value-label-text-line-height: var(--kite-meter-sm-label-text-line-height, 1.429); --kite-meter-circular-lg-track-height: var(--kite-meter-circular-track-height, 0.5rem); --kite-meter-circular-lg-tick-width: var(--kite-meter-circular-tick-width, 0.25rem); --kite-meter-linear-track-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with 'meter-track-border-radius' token */ --kite-meter-linear-small-border-radius: var(--kite-border-radius-md, 0.25rem); /** @deprecated: Replace with 'meter-sm-track-border-radius' token */ --kite-meter-linear-large-border-radius: var(--kite-border-radius-lg, 0.5rem); /** @deprecated: Replace with 'meter-lg-track-border-radius' token */ --kite-pagination-controls-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-pagination-controls-border-width: var(--kite-border-width, 0.0625rem); --kite-pagination-controls-button-border-color: var(--kite-pagination-controls-border-color, #d8dde6); --kite-pagination-controls-button-border-style: var(--kite-pagination-controls-border-style, solid); --kite-pagination-controls-button-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-pagination-page-select-current-label-margin-right: var(--kite-pagination-dropdown-margin-right, 0.25rem); --kite-pagination-page-select-current-label-margin-left: var(--kite-pagination-dropdown-margin-left, 0.25rem); --kite-pagination-dropdown-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-pagination-controls-button-previous-border-color: var(--kite-pagination-controls-border-color, #d8dde6); /** @deprecated: Replace with 'pagination-controls-button-border-color' token */ --kite-pagination-controls-button-previous-border-style: var(--kite-pagination-controls-border-style, solid); /** @deprecated: Replace with 'pagination-controls-button-border-style' token */ --kite-payment-logo-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-popover-background-color: var(--kite-card-background-color, #ffffff); --kite-popover-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-popover-trigger-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-popover-trigger-focus-ring-radius: var(--kite-border-radius-circle, 50%); --kite-popover-trigger-hover-icon-color: var(--kite-popover-trigger-icon-color, #0271eb); --kite-popover-dismiss-icon-color: var(--kite-popover-text-color, #000000); --kite-progress-indicator-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-progress-indicator-value-label-color: var(--kite-progress-indicator-fill-color, #0271eb); --kite-progress-indicator-secondary-label-weight: var(--kite-typography-body-weight, 400); --kite-progress-indicator-positive-icon-color: var(--kite-progress-indicator-positive-fill-color, #008516); --kite-progress-indicator-negative-icon-color: var(--kite-progress-indicator-negative-fill-color, #d6312b); --kite-progress-indicator-circular-border-radius: var(--kite-border-radius-circle, 50%); --kite-progress-indicator-lg-sub-label-text-weight: var(--kite-typography-body-weight, 400); /** @deprecated: Replace with 'progress-indicator-secondary-label-weight' token */ --kite-radio-border-radius: var(--kite-border-radius-circle, 50%); --kite-radio-border-style: var(--kite-form-control-border-style, solid); --kite-radio-margin-bottom: var(--kite-form-spacing-stack-md, 1rem); --kite-radio-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-radio-selected-border-width: var(--kite-radio-border-width, 0.125rem); --kite-radio-selected-disabled-indicator-background-color: var(--kite-radio-selected-disabled-border-color, #9ba9bd); --kite-radio-selected-indicator-background-color: var(--kite-radio-selected-border-color, #0271eb); --kite-radio-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-radio-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-radio-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-radio-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-radio-group-margin-top: var(--kite-form-spacing-stack-2xl, 2rem); --kite-radio-group-margin-bottom: var(--kite-form-spacing-stack-2xl, 2rem); --kite-search-input-text-color: var(--kite-form-control-text-color, #000000); --kite-search-input-border-style: var(--kite-form-control-border-style, solid); --kite-search-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-search-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-search-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-search-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-search-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-search-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-search-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-search-input-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-search-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-search-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-search-input-addon-icon-color: var(--kite-form-control-addon-icon-color, #0271eb); --kite-search-input-addon-padding-right: var(--kite-form-control-addon-padding-right, 0.5rem); --kite-search-input-addon-padding-left: var(--kite-form-control-addon-padding-left, 0.5rem); --kite-search-input-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-search-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-search-input-placeholder-margin-right: var(--kite-form-control-padding-left, 0.5rem); --kite-search-input-placeholder-margin-left: var(--kite-form-control-padding-right, 0.5rem); --kite-search-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-search-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-select-text-color: var(--kite-form-control-text-color, #000000); --kite-select-text-size: var(--kite-form-control-text-size, 1rem); --kite-select-border-style: var(--kite-form-control-border-style, solid); --kite-select-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-select-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-select-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-select-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-select-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-select-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-select-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-select-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-select-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-select-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-select-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-select-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-select-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-select-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-select-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-select-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-select-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-select-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-select-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-select-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-select-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-skip-link-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-skip-link-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-switch-transition-timing-function: var(--kite-switch-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-switch-thumb-border-radius: var(--kite-border-radius-circle, 50%); --kite-switch-on-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-switch-indicator-border-radius: var(--kite-border-radius-circle, 50%); /** @deprecated: Replace with 'switch-thumb-border-radius' token */ --kite-tabs-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-tabs-transition-timing-function: var(--kite-tabs-transition-curve, cubic-bezier(0.25, 0.1, 0.25, 1)); --kite-tabs-tab-text-weight: var(--kite-typography-body-weight, 400); --kite-tabs-tab-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-tabs-panel-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-tabs-item-text-weight: var(--kite-typography-body-weight, 400); /** @deprecated: Replace with 'tabs-tab-text-weight' token */ --kite-tabs-item-focus-ring-color: var(--kite-focus-ring-color, #0257b2); /** @deprecated: Replace with 'tabs-tab-focus-ring-color' token */ --kite-tag-border-width: var(--kite-border-width, 0.0625rem); --kite-tag-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-tag-icon-color: var(--kite-tag-text-color, #000000); --kite-tag-negative-icon-color: var(--kite-tag-negative-border-color, #d6312b); --kite-tag-solid-caution-icon-color: var(--kite-tag-solid-caution-text-color, #000000); --kite-tag-solid-negative-icon-color: var(--kite-tag-solid-negative-text-color, #ffffff); --kite-tag-solid-neutral-icon-color: var(--kite-tag-solid-neutral-text-color, #000000); --kite-tag-solid-positive-icon-color: var(--kite-tag-solid-positive-text-color, #ffffff); --kite-text-area-text-color: var(--kite-form-control-text-color, #000000); --kite-text-area-text-size: var(--kite-form-control-text-size, 1rem); --kite-text-area-border-style: var(--kite-form-control-border-style, solid); --kite-text-area-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-text-area-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-text-area-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-text-area-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-text-area-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-text-area-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-text-area-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-text-area-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-text-area-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-text-area-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-text-area-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-text-area-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-text-area-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-text-area-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-text-area-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-text-area-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-text-area-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-text-area-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-text-area-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-text-area-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-text-area-error-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); /** @deprecated: Replace with 'text-area-error-feedback-text-color' token */ --kite-text-area-error-text-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); /** @deprecated: Replace with 'text-area-feedback-margin-top' token */ --kite-text-input-text-color: var(--kite-form-control-text-color, #000000); --kite-text-input-text-size: var(--kite-form-control-text-size, 1rem); --kite-text-input-border-style: var(--kite-form-control-border-style, solid); --kite-text-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-text-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-text-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-text-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-text-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-text-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-text-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-text-input-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-text-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-text-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-text-input-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-text-input-disabled-label-text-color: var(--kite-form-control-disabled-label-text-color, #9ba9bd); --kite-text-input-addon-icon-color: var(--kite-form-control-addon-icon-color, #0271eb); --kite-text-input-addon-padding-right: var(--kite-form-control-addon-padding-right, 0.5rem); --kite-text-input-addon-padding-left: var(--kite-form-control-addon-padding-left, 0.5rem); --kite-text-input-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-text-input-label-text-color: var(--kite-form-control-label-text-color, #000000); --kite-text-input-label-text-size: var(--kite-form-control-label-text-size, 1rem); --kite-text-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-text-input-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-text-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-text-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-text-input-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-text-input-secure-icon-width: var(--kite-text-input-addon-icon-width, 1.5rem); --kite-text-input-secure-icon-height: var(--kite-text-input-addon-icon-width, 1.5rem); --kite-text-input-secure-confirm-icon-width: var(--kite-text-input-addon-icon-width, 1.5rem); --kite-text-input-error-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); /** @deprecated: Replace with 'text-input-error-feedback-text-color' token */ --kite-text-input-error-text-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); /** @deprecated: Replace with 'text-input-feedback-margin-top' token */ --kite-text-input-secure-show-icon-focus-ring-color: var(--kite-focus-ring-color, #0257b2); /** @deprecated: Replace with 'text-input-secure-icon-focus-ring-color' token */ --kite-time-input-text-color: var(--kite-form-control-text-color, #000000); --kite-time-input-border-style: var(--kite-form-control-border-style, solid); --kite-time-input-padding-top: var(--kite-form-control-padding-top, 0.75rem); --kite-time-input-padding-right: var(--kite-form-control-padding-right, 0.5rem); --kite-time-input-padding-bottom: var(--kite-form-control-padding-bottom, 0.75rem); --kite-time-input-padding-left: var(--kite-form-control-padding-left, 0.5rem); --kite-time-input-focus-ring-style: var(--kite-form-control-focus-ring-style, solid); --kite-time-input-focus-ring-width: var(--kite-form-control-focus-ring-width, 0.125rem); --kite-time-input-hover-border-width: var(--kite-form-control-hover-border-width, 0.125rem); --kite-time-input-disabled-background-color: var(--kite-form-control-disabled-background-color, #ffffff); --kite-time-input-disabled-border-color: var(--kite-form-control-disabled-border-color, #9ba9bd); --kite-time-input-disabled-icon-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-time-input-disabled-text-color: var(--kite-form-control-disabled-text-color, #9ba9bd); --kite-time-input-disabled-helper-text-color: var(--kite-form-control-disabled-helper-text-color, #9ba9bd); --kite-time-input-feedback-margin-top: var(--kite-form-control-feedback-margin-top, 0.25rem); --kite-time-input-helper-text-color: var(--kite-form-control-helper-text-color, #63738a); --kite-time-input-label-color: var(--kite-form-control-label-text-color, #000000); --kite-time-input-label-margin-bottom: var(--kite-form-control-label-margin-bottom, 0.25rem); --kite-time-input-error-border-color: var(--kite-form-control-error-border-color, #d6312b); --kite-time-input-error-border-width: var(--kite-form-control-error-border-width, 0.125rem); --kite-time-input-error-feedback-text-color: var(--kite-form-control-error-feedback-text-color, #d6312b); --kite-toast-border-radius: var(--kite-border-radius-md, 0.25rem); --kite-toast-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-tooltip-focus-ring-color: var(--kite-focus-ring-color, #0257b2); --kite-tooltip-entry-transition-timing-function: var(--kite-tooltip-entry-transition-curve, cubic-bezier(0, 0, 0.58, 1)); --kite-tooltip-exit-transition-timing-function: var(--kite-tooltip-exit-transition-curve, cubic-bezier(0.42, 0, 1, 1)); --kite-container-border-radius: var(--kite-border-radius, 0.125rem); --kite-my-component-border-radius: var(--kite-border-radius, 0.125rem); --kite-form-control-picker-list-item-border-color: var(--kite-form-control-picker-border-color, #d8dde6); --kite-form-control-picker-list-item-border-width: var(--kite-form-control-picker-border-width, 0.0625rem); --kite-typography-caption-margin-bottom: var(--kite-typography-caption-1-margin-bottom, 0.75rem); /** @deprecated: Replace with 'typography-caption-1-margin-bottom' token */ --kite-alert-passive-border-radius: var(--kite-alert-border-radius, 0.25rem); --kite-button-destructive-focus-icon-color: var(--kite-button-destructive-focus-text-color, #ffffff); --kite-button-destructive-hover-icon-color: var(--kite-button-destructive-hover-text-color, #ffffff); --kite-button-destructive-press-icon-color: var(--kite-button-destructive-press-text-color, #ffffff); --kite-button-destructive-disabled-icon-color: var(--kite-button-destructive-disabled-text-color, #9ba9bd); --kite-button-primary-border-width: var(--kite-button-border-width, 0.0625rem); --kite-button-primary-icon-color: var(--kite-button-primary-text-color, #ffffff); --kite-button-primary-press-icon-color: var(--kite-button-primary-press-text-color, #ffffff); --kite-button-primary-disabled-icon-color: var(--kite-button-primary-disabled-text-color, #9ba9bd); --kite-button-primary-focus-icon-color: var(--kite-button-primary-focus-text-color, #ffffff); --kite-button-primary-hover-icon-color: var(--kite-button-primary-hover-text-color, #ffffff); --kite-button-primary-destructive-icon-color: var(--kite-button-primary-destructive-text-color, #ffffff); --kite-button-primary-destructive-focus-text-color: var(--kite-button-destructive-focus-text-color, #ffffff); --kite-button-primary-destructive-hover-text-color: var(--kite-button-destructive-hover-text-color, #ffffff); --kite-button-primary-destructive-press-text-color: var(--kite-button-destructive-press-text-color, #ffffff); --kite-button-primary-destructive-disabled-text-color: var(--kite-button-destructive-disabled-text-color, #9ba9bd); --kite-button-secondary-border-width: var(--kite-button-border-width, 0.0625rem); --kite-button-secondary-focus-icon-color: var(--kite-button-secondary-focus-text-color, #ffffff); --kite-button-secondary-hover-icon-color: var(--kite-button-secondary-hover-text-color, #ffffff); --kite-button-secondary-press-icon-color: var(--kite-button-secondary-press-text-color, #ffffff); --kite-button-secondary-disabled-icon-color: var(--kite-button-secondary-disabled-text-color, #9ba9bd); --kite-button-secondary-destructive-focus-text-color: var(--kite-button-destructive-focus-text-color, #ffffff); --kite-button-secondary-destructive-hover-text-color: var(--kite-button-destructive-hover-text-color, #ffffff); --kite-button-secondary-destructive-press-text-color: var(--kite-button-destructive-press-text-color, #ffffff); --kite-button-secondary-destructive-disabled-icon-color: var(--kite-button-secondary-disabled-text-color, #9ba9bd); --kite-button-borderless-border-width: var(--kite-button-border-width, 0.0625rem); --kite-button-borderless-disabled-icon-color: var(--kite-button-borderless-disabled-text-color, #9ba9bd); --kite-button-borderless-destructive-disabled-icon-color: var(--kite-button-borderless-destructive-disabled-text-color, #9ba9bd); --kite-button-primary-icon-fill: var(--kite-button-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-icon-color' token */ --kite-button-primary-active-icon-fill: var(--kite-button-press-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-press-icon-color' token */ --kite-button-primary-disabled-icon-fill: var(--kite-button-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with 'button-primary-disabled-icon-color' token */ --kite-button-primary-focus-icon-fill: var(--kite-button-focus-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-focus-icon-color' token */ --kite-button-primary-hover-icon-fill: var(--kite-button-hover-icon-color, #ffffff); /** @deprecated: Replace with 'button-primary-hover-icon-color' token */ --kite-button-secondary-active-icon-fill: var(--kite-button-press-icon-color, #ffffff); /** @deprecated: Replace with 'button-secondary-press-icon-color' token */ --kite-button-secondary-disabled-icon-fill: var(--kite-button-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with 'button-secondary-disabled-icon-color' token */ --kite-button-secondary-focus-icon-fill: var(--kite-button-focus-icon-color, #ffffff); /** @deprecated: Replace with 'button-secondary-focus-icon-color' token */ --kite-button-secondary-hover-icon-fill: var(--kite-button-hover-icon-color, #ffffff); /** @deprecated: Replace with 'button-secondary-hover-icon-color' token */ --kite-button-borderless-disabled-icon-fill: var(--kite-button-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with 'button-borderless-disabled-icon-color' token */ --kite-calendar-border-radius: var(--kite-border-radius, 0.125rem); --kite-calendar-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-calendar-standalone-border-color: var(--kite-card-border-color, #d8dde6); --kite-calendar-standalone-border-style: var(--kite-card-border-style, solid); --kite-calendar-standalone-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-card-border-width: var(--kite-container-border-width, 0.0625rem); --kite-checkbox-border-radius: var(--kite-border-radius, 0.125rem); --kite-checkbox-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-checkbox-selected-disabled-border-color: var(--kite-checkbox-disabled-border-color, #9ba9bd); --kite-checkbox-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-checkbox-error-feedback-icon-color: var(--kite-checkbox-error-feedback-text-color, #d6312b); --kite-checkbox-error-selected-background-color: var(--kite-checkbox-error-border-color, #d6312b); --kite-checkbox-indeterminate-disabled-icon-color: var(--kite-checkbox-selected-disabled-icon-color, #d8dde6); --kite-combobox-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-combobox-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-data-table-header-border-bottom-width: var(--kite-data-table-border-width, 0.0625rem); --kite-data-table-cell-border-width: var(--kite-data-table-border-width, 0.0625rem); --kite-data-table-cell-focus-ring-color: var(--kite-data-table-focus-ring-color, #0257b2); --kite-data-table-row-border-width: var(--kite-data-table-border-width, 0.0625rem); --kite-data-table-row-focus-ring-color: var(--kite-data-table-focus-ring-color, #0257b2); --kite-data-table-sticky-column-background-color: var(--kite-data-table-row-background-color, #ffffff); --kite-date-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-date-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-dropdown-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-dropdown-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-dropdown-focus-ring-style: var(--kite-select-focus-ring-style, solid); --kite-dropdown-focus-ring-width: var(--kite-select-focus-ring-width, 0.125rem); --kite-dropdown-icon-color: var(--kite-dropdown-text-color, #000000); --kite-dropdown-inline-disabled-icon-color: var(--kite-dropdown-inline-disabled-text-color, #9ba9bd); --kite-dropdown-inline-placeholder-text-color: var(--kite-dropdown-inline-text-color, #000000); --kite-dynamic-hint-border-color: var(--kite-card-border-color, #d8dde6); --kite-dynamic-hint-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-dynamic-hint-border-style: var(--kite-card-border-style, solid); --kite-dynamic-hint-padding-top: var(--kite-card-padding-top, 1rem); --kite-dynamic-hint-padding-right: var(--kite-card-padding-right, 1rem); --kite-dynamic-hint-padding-bottom: var(--kite-card-padding-bottom, 1rem); --kite-dynamic-hint-padding-left: var(--kite-card-padding-left, 1rem); --kite-dynamic-hint-arrow-background-color: var(--kite-dynamic-hint-background-color, #ffffff); --kite-interactive-list-item-border-width: var(--kite-interactive-list-border-width, 0.0625rem); /** @deprecated: Replace with "list-item-border-width" token */ --kite-interactive-list-item-action-icon-color: var(--kite-interactive-list-item-icon-color, #000000); /** @deprecated: Replace with "list-item-action-icon-color" token */ --kite-interactive-list-item-disabled-action-icon-color: var(--kite-interactive-list-item-disabled-icon-color, #9ba9bd); /** @deprecated: Replace with "list-item-disabled-action-icon-color" token */ --kite-link-standalone-focus-icon-color: var(--kite-link-focus-text-color, #0271eb); --kite-link-standalone-icon-color: var(--kite-link-icon-color, #0271eb); /** @deprecated: Replace with 'link-icon-color' token */ --kite-list-item-border-width: var(--kite-list-border-width, 0.0625rem); --kite-list-item-caution-label-text-color: var(--kite-list-item-label-text-color, #000000); --kite-list-item-action-icon-color: var(--kite-list-item-icon-color, #000000); --kite-list-item-label-icon-color: var(--kite-list-item-label-text-color, #000000); --kite-list-item-disabled-action-icon-color: var(--kite-list-item-disabled-icon-color, #9ba9bd); --kite-meter-circular-icon-color: var(--kite-meter-circular-fill-color, #73b7ff); --kite-meter-circular-lg-tick-height: var(--kite-meter-circular-lg-track-height, 0.5rem); --kite-pagination-controls-button-border-width: var(--kite-pagination-controls-border-width, 0.0625rem); --kite-pagination-controls-button-previous-border-width: var(--kite-pagination-controls-border-width, 0.0625rem); /** @deprecated: Replace with 'pagination-controls-button-border-width' token */ --kite-popover-border-color: var(--kite-card-border-color, #d8dde6); --kite-popover-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-popover-border-style: var(--kite-card-border-style, solid); --kite-popover-padding-top: var(--kite-card-padding-top, 1rem); --kite-popover-padding-right: var(--kite-card-padding-right, 1rem); --kite-popover-padding-bottom: var(--kite-card-padding-bottom, 1rem); --kite-popover-padding-left: var(--kite-card-padding-left, 1rem); --kite-popover-arrow-background-color: var(--kite-popover-background-color, #ffffff); --kite-popover-trigger-focus-icon-color: var(--kite-popover-trigger-hover-icon-color, #0271eb); --kite-popover-trigger-expanded-icon-color: var(--kite-popover-trigger-hover-icon-color, #0271eb); --kite-radio-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-radio-focus-ring-radius: var(--kite-radio-border-radius, 50%); --kite-radio-selected-border-style: var(--kite-radio-border-style, solid); --kite-radio-selected-focus-ring-style: var(--kite-radio-focus-ring-style, solid); --kite-radio-selected-indicator-border-radius: var(--kite-radio-border-radius, 50%); --kite-radio-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-search-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-search-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-select-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-select-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-select-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-switch-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-tag-border-radius: var(--kite-border-radius, 0.125rem); --kite-text-area-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-text-area-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-text-area-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-text-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-text-input-margin-bottom: var(--kite-form-spacing-stack, 1.5rem); --kite-text-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-text-input-secure-icon-color: var(--kite-text-input-addon-icon-color, #0271eb); --kite-text-input-secure-icon-focus-ring-style: var(--kite-text-input-focus-ring-style, solid); --kite-text-input-secure-icon-focus-ring-width: var(--kite-text-input-focus-ring-width, 0.125rem); --kite-text-input-secure-confirm-icon-margin-right: var(--kite-text-input-addon-padding-right, 0.5rem); --kite-text-input-secure-visible-icon-height: var(--kite-text-input-secure-icon-height, 1.5rem); /** @deprecated: Replace with 'text-input-secure-unmasked-icon-height' token */ --kite-text-input-secure-visible-icon-width: var(--kite-text-input-secure-icon-width, 1.5rem); /** @deprecated: Replace with 'text-input-secure-unmasked-icon-width' token */ --kite-time-input-border-width: var(--kite-form-control-border-width, 0.0625rem); --kite-time-input-focus-ring-color: var(--kite-form-control-focus-ring-color, #0257b2); --kite-time-input-label-text-weight: var(--kite-form-control-label-text-weight, 400); --kite-tooltip-border-radius: var(--kite-card-border-radius, 0.25rem); --kite-tooltip-border-style: var(--kite-card-border-style, solid); --kite-button-primary-destructive-focus-icon-color: var(--kite-button-primary-destructive-focus-text-color, #ffffff); --kite-button-primary-destructive-hover-icon-color: var(--kite-button-primary-destructive-hover-text-color, #ffffff); --kite-button-primary-destructive-press-icon-color: var(--kite-button-primary-destructive-press-text-color, #ffffff); --kite-button-primary-destructive-disabled-icon-color: var(--kite-button-primary-destructive-disabled-text-color, #9ba9bd); --kite-button-secondary-destructive-focus-icon-color: var(--kite-button-secondary-destructive-focus-text-color, #ffffff); --kite-button-secondary-destructive-hover-icon-color: var(--kite-button-secondary-destructive-hover-text-color, #ffffff); --kite-button-secondary-destructive-press-icon-color: var(--kite-button-secondary-destructive-press-text-color, #ffffff); --kite-calendar-standalone-border-width: var(--kite-card-border-width, 0.0625rem); --kite-checkbox-indeterminate-disabled-border-color: var(--kite-checkbox-selected-disabled-border-color, #9ba9bd); --kite-dropdown-focus-ring-color: var(--kite-select-focus-ring-color, #0257b2); --kite-dynamic-hint-border-width: var(--kite-card-border-width, 0.0625rem); --kite-dynamic-hint-arrow-border-color: var(--kite-dynamic-hint-border-color, #d8dde6); --kite-dynamic-hint-arrow-border-style: var(--kite-dynamic-hint-border-style, solid); --kite-popover-border-width: var(--kite-card-border-width, 0.0625rem); --kite-popover-arrow-border-color: var(--kite-popover-border-color, #d8dde6); --kite-popover-arrow-border-style: var(--kite-popover-border-style, solid); --kite-radio-selected-focus-ring-color: var(--kite-radio-focus-ring-color, #0257b2); --kite-text-input-secure-icon-focus-ring-color: var(--kite-text-input-focus-ring-color, #0257b2); --kite-text-input-secure-unmasked-icon-height: var(--kite-text-input-secure-visible-icon-height, 1.5rem); --kite-text-input-secure-unmasked-icon-width: var(--kite-text-input-secure-visible-icon-width, 1.5rem); --kite-text-input-secure-visible-icon-color: var(--kite-text-input-secure-icon-color, #0271eb); /** @deprecated: Replace with 'text-input-secure-unmasked-icon-color' token */ --kite-dynamic-hint-arrow-border-width: var(--kite-dynamic-hint-border-width, 0.0625rem); --kite-text-input-secure-unmasked-icon-color: var(--kite-text-input-secure-visible-icon-color, #0271eb); } .kite-theme--mode-compact { --kite-layout-sm: 3rem; --kite-layout-md: 4rem; --kite-layout-lg: 6rem; --kite-layout-xl: 8rem; --kite-layout-2xl: 10rem; --kite-layout-2xs: var(--kite-size-32, 2rem); --kite-layout-xs: var(--kite-size-40, 2.5rem); --kite-spacing-2xs: var(--kite-size-2, 0.125rem); --kite-spacing-xs: var(--kite-size-4, 0.25rem); --kite-spacing-sm: var(--kite-size-8, 0.5rem); --kite-spacing-md: var(--kite-size-12, 0.75rem); --kite-spacing-lg: var(--kite-size-16, 1rem); --kite-spacing-xl: var(--kite-size-20, 1.25rem); --kite-spacing-2xl: var(--kite-size-24, 1.5rem); } .kite-theme--mode-rutledge { --kite-font-weight-light: 200; --kite-font-family-sans-serif: var(--kite-font-family-rutledge, Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); --kite-typography-sm-display-size: var(--kite-typography-rutledge-sm-display-size, 3rem); --kite-typography-sm-display-line-height: var(--kite-typography-rutledge-sm-display-line-height, 1.25); --kite-typography-sm-title-1-size: var(--kite-typography-rutledge-sm-title-1-size, 2.5rem); --kite-typography-sm-title-1-line-height: var(--kite-typography-rutledge-sm-title-1-line-height, 1.3); --kite-typography-sm-title-2-size: var(--kite-typography-rutledge-sm-title-2-size, 2.25rem); --kite-typography-sm-title-2-line-height: var(--kite-typography-rutledge-sm-title-2-line-height, 1.222); --kite-typography-sm-title-3-size: var(--kite-typography-rutledge-sm-title-3-size, 2rem); --kite-typography-sm-title-4-size: var(--kite-typography-rutledge-sm-title-4-size, 1.75rem); --kite-typography-sm-title-4-line-height: var(--kite-typography-rutledge-sm-title-4-line-height, 1.286); --kite-typography-sm-title-5-size: var(--kite-typography-rutledge-sm-title-5-size, 1.5rem); --kite-typography-sm-title-5-line-height: var(--kite-typography-rutledge-sm-title-5-line-height, 1.25); --kite-typography-sm-title-6-size: var(--kite-typography-rutledge-sm-title-6-size, 1.25rem); --kite-typography-sm-title-6-line-height: var(--kite-typography-rutledge-sm-title-6-line-height, 1.3); --kite-typography-sm-body-display-size: var(--kite-typography-rutledge-sm-body-display-size, 1.25rem); --kite-typography-sm-body-display-line-height: var(--kite-typography-rutledge-sm-body-display-line-height, 1.3); --kite-typography-sm-body-size: var(--kite-typography-rutledge-sm-body-size, 1rem); --kite-typography-sm-body-line-height: var(--kite-typography-rutledge-sm-body-line-height, 1.5); --kite-typography-sm-eyebrow-size: var(--kite-typography-rutledge-sm-eyebrow-size, 0.875rem); --kite-typography-sm-eyebrow-style: var(--kite-typography-rutledge-sm-eyebrow-style, uppercase); --kite-typography-sm-eyebrow-line-height: var(--kite-typography-rutledge-sm-eyebrow-line-height, 1.571); --kite-typography-lg-display-size: var(--kite-typography-rutledge-lg-display-size, 4rem); --kite-typography-lg-display-line-height: var(--kite-typography-rutledge-lg-display-line-height, 1.125); --kite-typography-lg-title-1-size: var(--kite-typography-rutledge-lg-title-1-size, 3rem); --kite-typography-lg-title-1-line-height: var(--kite-typography-rutledge-lg-title-1-line-height, 1.25); --kite-typography-lg-title-2-size: var(--kite-typography-rutledge-lg-title-2-size, 2.5rem); --kite-typography-lg-title-2-line-height: var(--kite-typography-rutledge-lg-title-2-line-height, 1.25); --kite-typography-lg-title-3-size: var(--kite-typography-rutledge-lg-title-3-size, 2.25rem); --kite-typography-lg-title-3-line-height: var(--kite-typography-rutledge-lg-title-3-line-height, 1.222); --kite-typography-lg-title-4-size: var(--kite-typography-rutledge-lg-title-4-size, 2rem); --kite-typography-lg-title-4-line-height: var(--kite-typography-rutledge-lg-title-4-line-height, 1.25); --kite-typography-lg-title-5-size: var(--kite-typography-rutledge-lg-title-5-size, 1.5rem); --kite-typography-lg-title-5-line-height: var(--kite-typography-rutledge-lg-title-5-line-height, 1.25); --kite-typography-lg-title-6-size: var(--kite-typography-rutledge-lg-title-6-size, 1.25rem); --kite-typography-lg-title-6-line-height: var(--kite-typography-rutledge-lg-title-6-line-height, 1.3); --kite-typography-lg-body-display-size: var(--kite-typography-rutledge-lg-body-display-size, 1.25rem); --kite-typography-lg-body-display-line-height: var(--kite-typography-rutledge-lg-body-display-line-height, 1.3); --kite-typography-lg-body-size: var(--kite-typography-rutledge-lg-body-size, 1rem); --kite-typography-lg-body-line-height: var(--kite-typography-rutledge-lg-body-line-height, 1.5); --kite-typography-lg-eyebrow-size: var(--kite-typography-rutledge-lg-eyebrow-size, 1rem); --kite-typography-lg-eyebrow-style: var(--kite-typography-rutledge-lg-eyebrow-style, uppercase); --kite-typography-lg-eyebrow-line-height: var(--kite-typography-rutledge-lg-eyebrow-line-height, 1.5); --kite-typography-xxs-title-1-size: var(--kite-typography-rutledge-xxs-title-1-size, 1.3125rem); --kite-typography-xxs-title-1-line-height: var(--kite-typography-rutledge-xxs-title-1-line-height, 1.333); --kite-typography-xxs-title-2-size: var(--kite-typography-rutledge-xxs-title-2-size, 1.125rem); --kite-typography-xxs-title-2-line-height: var(--kite-typography-rutledge-xxs-title-2-line-height, 1.5); --kite-typography-xxs-title-3-size: var(--kite-typography-rutledge-xxs-title-3-size, 1rem); --kite-typography-xxs-title-3-line-height: var(--kite-typography-rutledge-xxs-title-3-line-height, 1.5); --kite-typography-xxs-title-4-size: var(--kite-typography-rutledge-xxs-title-4-size, 0.875rem); --kite-typography-xxs-title-4-line-height: var(--kite-typography-rutledge-xxs-title-4-line-height, 1.5); --kite-typography-xxs-title-5-size: var(--kite-typography-rutledge-xxs-title-5-size, 0.875rem); --kite-typography-xxs-title-5-line-height: var(--kite-typography-rutledge-xxs-title-5-line-height, 1.5); --kite-typography-xxs-body-size: var(--kite-typography-rutledge-xxs-body-size, 0.875rem); --kite-typography-xxs-body-line-height: var(--kite-typography-rutledge-xxs-body-line-height, 1.5); --kite-typography-xxs-eyebrow-size: var(--kite-typography-rutledge-xxs-eyebrow-size, 0.8125rem); --kite-typography-xxs-eyebrow-style: var(--kite-typography-rutledge-xxs-eyebrow-style, uppercase); --kite-typography-xxs-eyebrow-line-height: var(--kite-typography-rutledge-xxs-eyebrow-line-height, 1.538); --kite-typography-xxs-caption-size: var(--kite-typography-rutledge-xxs-caption-size, 0.75rem); --kite-typography-xxs-caption-line-height: var(--kite-typography-rutledge-xxs-caption-line-height, 1.5); --kite-typography-xs-title-1-size: var(--kite-typography-rutledge-xs-title-1-size, 1.4375rem); --kite-typography-xs-title-1-line-height: var(--kite-typography-rutledge-xs-title-1-line-height, 1.304); --kite-typography-xs-title-2-size: var(--kite-typography-rutledge-xs-title-2-size, 1.1875rem); --kite-typography-xs-title-2-line-height: var(--kite-typography-rutledge-xs-title-2-line-height, 1.421); --kite-typography-xs-title-3-size: var(--kite-typography-rutledge-xs-title-3-size, 1.0625rem); --kite-typography-xs-title-3-line-height: var(--kite-typography-rutledge-xs-title-3-line-height, 1.471); --kite-typography-xs-title-4-size: var(--kite-typography-rutledge-xs-title-4-size, 0.9375rem); --kite-typography-xs-title-4-line-height: var(--kite-typography-rutledge-xs-title-4-line-height, 1.533); --kite-typography-xs-title-5-size: var(--kite-typography-rutledge-xs-title-5-size, 0.9375rem); --kite-typography-xs-title-5-line-height: var(--kite-typography-rutledge-xs-title-5-line-height, 1.533); --kite-typography-xs-body-size: var(--kite-typography-rutledge-xs-body-size, 0.9375rem); --kite-typography-xs-body-line-height: var(--kite-typography-rutledge-xs-body-line-height, 1.533); --kite-typography-xs-eyebrow-size: var(--kite-typography-rutledge-xs-eyebrow-size, 0.8125rem); --kite-typography-xs-eyebrow-style: var(--kite-typography-rutledge-xs-eyebrow-style, uppercase); --kite-typography-xs-eyebrow-line-height: var(--kite-typography-rutledge-xs-eyebrow-line-height, 1.538); --kite-typography-xs-caption-size: var(--kite-typography-rutledge-xs-caption-size, 0.75rem); --kite-typography-xs-caption-line-height: var(--kite-typography-rutledge-xs-caption-line-height, 1.5); --kite-typography-md-title-1-size: var(--kite-typography-rutledge-md-title-1-size, 2.25rem); --kite-typography-md-title-1-line-height: var(--kite-typography-rutledge-md-title-1-line-height, 1.25); --kite-typography-md-title-2-size: var(--kite-typography-rutledge-md-title-2-size, 1.75rem); --kite-typography-md-title-2-line-height: var(--kite-typography-rutledge-md-title-2-line-height, 1.286); --kite-typography-md-title-3-size: var(--kite-typography-rutledge-md-title-3-size, 1.5rem); --kite-typography-md-title-3-line-height: var(--kite-typography-rutledge-md-title-3-line-height, 1.292); --kite-typography-md-title-4-size: var(--kite-typography-rutledge-md-title-4-size, 1.25rem); --kite-typography-md-title-4-line-height: var(--kite-typography-rutledge-md-title-4-line-height, 1.05); --kite-typography-md-title-5-size: var(--kite-typography-rutledge-md-title-5-size, 1rem); --kite-typography-md-title-5-line-height: var(--kite-typography-rutledge-md-title-5-line-height, 1.5); --kite-typography-md-body-size: var(--kite-typography-rutledge-md-body-size, 1rem); --kite-typography-md-body-line-height: var(--kite-typography-rutledge-md-body-line-height, 1.5); --kite-typography-md-eyebrow-size: var(--kite-typography-rutledge-md-eyebrow-size, 0.875rem); --kite-typography-md-eyebrow-style: var(--kite-typography-rutledge-md-eyebrow-style, uppercase); --kite-typography-md-eyebrow-line-height: var(--kite-typography-rutledge-md-eyebrow-line-height, 1.5); --kite-typography-md-caption-size: var(--kite-typography-rutledge-md-caption-size, 0.75rem); --kite-typography-md-caption-line-height: var(--kite-typography-rutledge-md-caption-line-height, 1.75); --kite-typography-xl-title-1-size: var(--kite-typography-rutledge-xl-title-1-size, 3.5rem); --kite-typography-xl-title-1-line-height: var(--kite-typography-rutledge-xl-title-1-line-height, 1.393); --kite-typography-xl-title-2-size: var(--kite-typography-rutledge-xl-title-2-size, 2.625rem); --kite-typography-xl-title-2-line-height: var(--kite-typography-rutledge-xl-title-2-line-height, 1.429); --kite-typography-xl-title-3-size: var(--kite-typography-rutledge-xl-title-3-size, 2.25rem); --kite-typography-xl-title-3-line-height: var(--kite-typography-rutledge-xl-title-3-line-height, 1.056); --kite-typography-xl-title-4-size: var(--kite-typography-rutledge-xl-title-4-size, 1.75rem); --kite-typography-xl-title-4-line-height: var(--kite-typography-rutledge-xl-title-4-line-height, 0.964); --kite-typography-xl-title-5-size: var(--kite-typography-rutledge-xl-title-5-size, 1.5rem); --kite-typography-xl-title-5-line-height: var(--kite-typography-rutledge-xl-title-5-line-height, 1); --kite-typography-xl-body-size: var(--kite-typography-rutledge-xl-body-size, 1.5rem); --kite-typography-xl-body-line-height: var(--kite-typography-rutledge-xl-body-line-height, 1.333); --kite-typography-xl-eyebrow-size: var(--kite-typography-rutledge-xl-eyebrow-size, 1.375rem); --kite-typography-xl-eyebrow-style: var(--kite-typography-rutledge-xl-eyebrow-style, uppercase); --kite-typography-xl-eyebrow-line-height: var(--kite-typography-rutledge-xl-eyebrow-line-height, 1.091); --kite-typography-xl-caption-size: var(--kite-typography-rutledge-xl-caption-size, 1.25rem); --kite-typography-xl-caption-line-height: var(--kite-typography-rutledge-xl-caption-line-height, 1.2); --kite-typography-sm-display-weight: var(--kite-typography-rutledge-sm-display-weight, 700); --kite-typography-sm-display-letter-spacing: var(--kite-typography-rutledge-sm-display-letter-spacing, -0.0625rem); --kite-typography-sm-title-1-weight: var(--kite-typography-rutledge-sm-title-1-weight, 700); --kite-typography-sm-title-1-letter-spacing: var(--kite-typography-rutledge-sm-title-1-letter-spacing, -0.0625rem); --kite-typography-sm-title-2-weight: var(--kite-typography-rutledge-sm-title-2-weight, 700); --kite-typography-sm-title-2-letter-spacing: var(--kite-typography-rutledge-sm-title-2-letter-spacing, -0.0625rem); --kite-typography-sm-title-3-weight: var(--kite-typography-rutledge-sm-title-3-weight, 700); --kite-typography-sm-title-3-letter-spacing: var(--kite-typography-rutledge-sm-title-3-letter-spacing, -0.0625rem); --kite-typography-sm-title-4-weight: var(--kite-typography-rutledge-sm-title-4-weight, 700); --kite-typography-sm-title-4-letter-spacing: var(--kite-typography-rutledge-sm-title-4-letter-spacing, normal); --kite-typography-sm-title-5-weight: var(--kite-typography-rutledge-sm-title-5-weight, 700); --kite-typography-sm-title-5-letter-spacing: var(--kite-typography-rutledge-sm-title-5-letter-spacing, normal); --kite-typography-sm-title-6-weight: var(--kite-typography-rutledge-sm-title-6-weight, 700); --kite-typography-sm-title-6-letter-spacing: var(--kite-typography-rutledge-sm-title-6-letter-spacing, normal); --kite-typography-sm-body-display-weight: var(--kite-typography-rutledge-sm-body-display-weight, 400); --kite-typography-sm-body-display-letter-spacing: var(--kite-typography-rutledge-sm-body-display-letter-spacing, normal); --kite-typography-sm-body-weight: var(--kite-typography-rutledge-sm-body-weight, 400); --kite-typography-sm-body-letter-spacing: var(--kite-typography-rutledge-sm-body-letter-spacing, normal); --kite-typography-sm-eyebrow-weight: var(--kite-typography-rutledge-sm-eyebrow-weight, 700); --kite-typography-lg-display-weight: var(--kite-typography-rutledge-lg-display-weight, 700); --kite-typography-lg-display-letter-spacing: var(--kite-typography-rutledge-lg-display-letter-spacing, -0.0625rem); --kite-typography-lg-title-1-weight: var(--kite-typography-rutledge-lg-title-1-weight, 700); --kite-typography-lg-title-1-letter-spacing: var(--kite-typography-rutledge-lg-title-1-letter-spacing, -0.0625rem); --kite-typography-lg-title-2-weight: var(--kite-typography-rutledge-lg-title-2-weight, 700); --kite-typography-lg-title-2-letter-spacing: var(--kite-typography-rutledge-lg-title-2-letter-spacing, -0.0625rem); --kite-typography-lg-title-3-weight: var(--kite-typography-rutledge-lg-title-3-weight, 700); --kite-typography-lg-title-3-letter-spacing: var(--kite-typography-rutledge-lg-title-3-letter-spacing, -0.0625rem); --kite-typography-lg-title-4-weight: var(--kite-typography-rutledge-lg-title-4-weight, 700); --kite-typography-lg-title-4-letter-spacing: var(--kite-typography-rutledge-lg-title-4-letter-spacing, normal); --kite-typography-lg-title-5-weight: var(--kite-typography-rutledge-lg-title-5-weight, 700); --kite-typography-lg-title-5-letter-spacing: var(--kite-typography-rutledge-lg-title-5-letter-spacing, normal); --kite-typography-lg-title-6-weight: var(--kite-typography-rutledge-lg-title-6-weight, 500); --kite-typography-lg-title-6-letter-spacing: var(--kite-typography-rutledge-lg-title-6-letter-spacing, normal); --kite-typography-lg-body-display-weight: var(--kite-typography-rutledge-lg-body-display-weight, 400); --kite-typography-lg-body-display-letter-spacing: var(--kite-typography-rutledge-lg-body-display-letter-spacing, normal); --kite-typography-lg-body-weight: var(--kite-typography-rutledge-lg-body-weight, 400); --kite-typography-lg-body-letter-spacing: var(--kite-typography-rutledge-lg-body-letter-spacing, normal); --kite-typography-lg-eyebrow-weight: var(--kite-typography-rutledge-lg-eyebrow-weight, 700); --kite-typography-xxs-title-1-weight: var(--kite-typography-rutledge-xxs-title-1-weight, 500); --kite-typography-xxs-title-1-letter-spacing: var(--kite-typography-rutledge-xxs-title-1-letter-spacing, normal); --kite-typography-xxs-title-2-weight: var(--kite-typography-rutledge-xxs-title-2-weight, 500); --kite-typography-xxs-title-2-letter-spacing: var(--kite-typography-rutledge-xxs-title-2-letter-spacing, normal); --kite-typography-xxs-title-3-weight: var(--kite-typography-rutledge-xxs-title-3-weight, 500); --kite-typography-xxs-title-3-letter-spacing: var(--kite-typography-rutledge-xxs-title-3-letter-spacing, normal); --kite-typography-xxs-title-4-weight: var(--kite-typography-rutledge-xxs-title-4-weight, 700); --kite-typography-xxs-title-4-letter-spacing: var(--kite-typography-rutledge-xxs-title-4-letter-spacing, normal); --kite-typography-xxs-title-5-weight: var(--kite-typography-rutledge-xxs-title-5-weight, 500); --kite-typography-xxs-title-5-letter-spacing: var(--kite-typography-rutledge-xxs-title-5-letter-spacing, normal); --kite-typography-xxs-body-weight: var(--kite-typography-rutledge-xxs-body-weight, 400); --kite-typography-xxs-body-letter-spacing: var(--kite-typography-rutledge-xxs-body-letter-spacing, normal); --kite-typography-xxs-eyebrow-weight: var(--kite-typography-rutledge-xxs-eyebrow-weight, 700); --kite-typography-xxs-caption-weight: var(--kite-typography-rutledge-xxs-caption-weight, 400); --kite-typography-xxs-caption-letter-spacing: var(--kite-typography-rutledge-xxs-caption-letter-spacing, normal); --kite-typography-xs-title-1-weight: var(--kite-typography-rutledge-xs-title-1-weight, 500); --kite-typography-xs-title-1-letter-spacing: var(--kite-typography-rutledge-xs-title-1-letter-spacing, normal); --kite-typography-xs-title-2-weight: var(--kite-typography-rutledge-xs-title-2-weight, 500); --kite-typography-xs-title-2-letter-spacing: var(--kite-typography-rutledge-xs-title-2-letter-spacing, normal); --kite-typography-xs-title-3-weight: var(--kite-typography-rutledge-xs-title-3-weight, 500); --kite-typography-xs-title-3-letter-spacing: var(--kite-typography-rutledge-xs-title-3-letter-spacing, normal); --kite-typography-xs-title-4-weight: var(--kite-typography-rutledge-xs-title-4-weight, 700); --kite-typography-xs-title-4-letter-spacing: var(--kite-typography-rutledge-xs-title-4-letter-spacing, normal); --kite-typography-xs-title-5-weight: var(--kite-typography-rutledge-xs-title-5-weight, 500); --kite-typography-xs-title-5-letter-spacing: var(--kite-typography-rutledge-xs-title-5-letter-spacing, normal); --kite-typography-xs-body-weight: var(--kite-typography-rutledge-xs-body-weight, 400); --kite-typography-xs-body-letter-spacing: var(--kite-typography-rutledge-xs-body-letter-spacing, normal); --kite-typography-xs-eyebrow-weight: var(--kite-typography-rutledge-xs-eyebrow-weight, 700); --kite-typography-xs-caption-weight: var(--kite-typography-rutledge-xs-caption-weight, 400); --kite-typography-xs-caption-letter-spacing: var(--kite-typography-rutledge-xs-caption-letter-spacing, normal); --kite-typography-md-title-1-weight: var(--kite-typography-rutledge-md-title-1-weight, 700); --kite-typography-md-title-1-letter-spacing: var(--kite-typography-rutledge-md-title-1-letter-spacing, -0.0625rem); --kite-typography-md-title-2-weight: var(--kite-typography-rutledge-md-title-2-weight, 700); --kite-typography-md-title-2-letter-spacing: var(--kite-typography-rutledge-md-title-2-letter-spacing, -0.0625rem); --kite-typography-md-title-3-weight: var(--kite-typography-rutledge-md-title-3-weight, 700); --kite-typography-md-title-3-letter-spacing: var(--kite-typography-rutledge-md-title-3-letter-spacing, -0.0625rem); --kite-typography-md-title-4-weight: var(--kite-typography-rutledge-md-title-4-weight, 700); --kite-typography-md-title-4-letter-spacing: var(--kite-typography-rutledge-md-title-4-letter-spacing, normal); --kite-typography-md-title-5-weight: var(--kite-typography-rutledge-md-title-5-weight, 700); --kite-typography-md-title-5-letter-spacing: var(--kite-typography-rutledge-md-title-5-letter-spacing, normal); --kite-typography-md-body-weight: var(--kite-typography-rutledge-md-body-weight, 400); --kite-typography-md-body-letter-spacing: var(--kite-typography-rutledge-md-body-letter-spacing, normal); --kite-typography-md-eyebrow-weight: var(--kite-typography-rutledge-md-eyebrow-weight, 700); --kite-typography-md-caption-weight: var(--kite-typography-rutledge-md-caption-weight, 400); --kite-typography-md-caption-letter-spacing: var(--kite-typography-rutledge-md-caption-letter-spacing, normal); --kite-typography-xl-title-1-weight: var(--kite-typography-rutledge-xl-title-1-weight, 500); --kite-typography-xl-title-1-letter-spacing: var(--kite-typography-rutledge-xl-title-1-letter-spacing, normal); --kite-typography-xl-title-2-weight: var(--kite-typography-rutledge-xl-title-2-weight, 500); --kite-typography-xl-title-2-letter-spacing: var(--kite-typography-rutledge-xl-title-2-letter-spacing, -0.0625rem); --kite-typography-xl-title-3-weight: var(--kite-typography-rutledge-xl-title-3-weight, 400); --kite-typography-xl-title-3-letter-spacing: var(--kite-typography-rutledge-xl-title-3-letter-spacing, -0.0625rem); --kite-typography-xl-title-4-weight: var(--kite-typography-rutledge-xl-title-4-weight, 400); --kite-typography-xl-title-4-letter-spacing: var(--kite-typography-rutledge-xl-title-4-letter-spacing, normal); --kite-typography-xl-title-5-weight: var(--kite-typography-rutledge-xl-title-5-weight, 500); --kite-typography-xl-title-5-letter-spacing: var(--kite-typography-rutledge-xl-title-5-letter-spacing, normal); --kite-typography-xl-body-weight: var(--kite-typography-rutledge-xl-body-weight, 400); --kite-typography-xl-body-letter-spacing: var(--kite-typography-rutledge-xl-body-letter-spacing, normal); --kite-typography-xl-eyebrow-weight: var(--kite-typography-rutledge-xl-eyebrow-weight, 700); --kite-typography-xl-caption-weight: var(--kite-typography-rutledge-xl-caption-weight, 500); --kite-typography-xl-caption-letter-spacing: var(--kite-typography-rutledge-xl-caption-letter-spacing, normal); --kite-typography-sm-display-margin-bottom: var(--kite-typography-rutledge-sm-display-margin-bottom, 1.5rem); --kite-typography-sm-title-1-margin-bottom: var(--kite-typography-rutledge-sm-title-1-margin-bottom, 1rem); --kite-typography-sm-title-2-margin-bottom: var(--kite-typography-rutledge-sm-title-2-margin-bottom, 1rem); --kite-typography-sm-title-3-margin-bottom: var(--kite-typography-rutledge-sm-title-3-margin-bottom, 1rem); --kite-typography-sm-title-4-margin-bottom: var(--kite-typography-rutledge-sm-title-4-margin-bottom, 1rem); --kite-typography-sm-title-5-margin-bottom: var(--kite-typography-rutledge-sm-title-5-margin-bottom, 1rem); --kite-typography-sm-title-6-margin-bottom: var(--kite-typography-rutledge-sm-title-6-margin-bottom, 0.75rem); --kite-typography-sm-body-display-margin-bottom: var(--kite-typography-rutledge-sm-body-display-margin-bottom, 1.5rem); --kite-typography-sm-body-margin-bottom: var(--kite-typography-rutledge-sm-body-margin-bottom, 1.5rem); --kite-typography-sm-eyebrow-letter-spacing: var(--kite-typography-rutledge-sm-eyebrow-letter-spacing, 0.125rem); --kite-typography-sm-eyebrow-margin-bottom: var(--kite-typography-rutledge-sm-eyebrow-margin-bottom, 1rem); --kite-typography-lg-display-margin-bottom: var(--kite-typography-rutledge-lg-display-margin-bottom, 1.5rem); --kite-typography-lg-title-1-margin-bottom: var(--kite-typography-rutledge-lg-title-1-margin-bottom, 1rem); --kite-typography-lg-title-2-margin-bottom: var(--kite-typography-rutledge-lg-title-2-margin-bottom, 1rem); --kite-typography-lg-title-3-margin-bottom: var(--kite-typography-rutledge-lg-title-3-margin-bottom, 1rem); --kite-typography-lg-title-4-margin-bottom: var(--kite-typography-rutledge-lg-title-4-margin-bottom, 1rem); --kite-typography-lg-title-5-margin-bottom: var(--kite-typography-rutledge-lg-title-5-margin-bottom, 1rem); --kite-typography-lg-title-6-margin-bottom: var(--kite-typography-rutledge-lg-title-6-margin-bottom, 1rem); --kite-typography-lg-body-display-margin-bottom: var(--kite-typography-rutledge-lg-body-display-margin-bottom, 1.5rem); --kite-typography-lg-body-margin-bottom: var(--kite-typography-rutledge-lg-body-margin-bottom, 1rem); --kite-typography-lg-eyebrow-letter-spacing: var(--kite-typography-rutledge-lg-eyebrow-letter-spacing, 0.125rem); --kite-typography-lg-eyebrow-margin-bottom: var(--kite-typography-rutledge-lg-eyebrow-margin-bottom, 1rem); --kite-typography-xxs-title-1-margin-bottom: var(--kite-typography-rutledge-xxs-title-1-margin-bottom, 1.5rem); --kite-typography-xxs-title-2-margin-bottom: var(--kite-typography-rutledge-xxs-title-2-margin-bottom, 1rem); --kite-typography-xxs-title-3-margin-bottom: var(--kite-typography-rutledge-xxs-title-3-margin-bottom, 1rem); --kite-typography-xxs-title-4-margin-bottom: var(--kite-typography-rutledge-xxs-title-4-margin-bottom, 0.5rem); --kite-typography-xxs-title-5-margin-bottom: var(--kite-typography-rutledge-xxs-title-5-margin-bottom, 0.25rem); --kite-typography-xxs-body-margin-bottom: var(--kite-typography-rutledge-xxs-body-margin-bottom, 1.5rem); --kite-typography-xxs-eyebrow-letter-spacing: var(--kite-typography-rutledge-xxs-eyebrow-letter-spacing, 0.125rem); --kite-typography-xxs-eyebrow-margin-bottom: var(--kite-typography-rutledge-xxs-eyebrow-margin-bottom, 0.5rem); --kite-typography-xxs-caption-margin-bottom: var(--kite-typography-rutledge-xxs-caption-margin-bottom, 1.25rem); --kite-typography-xs-title-1-margin-bottom: var(--kite-typography-rutledge-xs-title-1-margin-bottom, 1.5rem); --kite-typography-xs-title-2-margin-bottom: var(--kite-typography-rutledge-xs-title-2-margin-bottom, 1rem); --kite-typography-xs-title-3-margin-bottom: var(--kite-typography-rutledge-xs-title-3-margin-bottom, 1rem); --kite-typography-xs-title-4-margin-bottom: var(--kite-typography-rutledge-xs-title-4-margin-bottom, 0.5rem); --kite-typography-xs-title-5-margin-bottom: var(--kite-typography-rutledge-xs-title-5-margin-bottom, 0.25rem); --kite-typography-xs-body-margin-bottom: var(--kite-typography-rutledge-xs-body-margin-bottom, 1.5rem); --kite-typography-xs-eyebrow-letter-spacing: var(--kite-typography-rutledge-xs-eyebrow-letter-spacing, 0.125rem); --kite-typography-xs-eyebrow-margin-bottom: var(--kite-typography-rutledge-xs-eyebrow-margin-bottom, 0.5rem); --kite-typography-xs-caption-margin-bottom: var(--kite-typography-rutledge-xs-caption-margin-bottom, 1.25rem); --kite-typography-md-title-1-margin-bottom: var(--kite-typography-rutledge-md-title-1-margin-bottom, 1.5rem); --kite-typography-md-title-2-margin-bottom: var(--kite-typography-rutledge-md-title-2-margin-bottom, 1rem); --kite-typography-md-title-3-margin-bottom: var(--kite-typography-rutledge-md-title-3-margin-bottom, 1rem); --kite-typography-md-title-4-margin-bottom: var(--kite-typography-rutledge-md-title-4-margin-bottom, 0.5rem); --kite-typography-md-title-5-margin-bottom: var(--kite-typography-rutledge-md-title-5-margin-bottom, 0.25rem); --kite-typography-md-body-margin-bottom: var(--kite-typography-rutledge-md-body-margin-bottom, 1.5rem); --kite-typography-md-eyebrow-letter-spacing: var(--kite-typography-rutledge-md-eyebrow-letter-spacing, 0.125rem); --kite-typography-md-eyebrow-margin-bottom: var(--kite-typography-rutledge-md-eyebrow-margin-bottom, 0.5rem); --kite-typography-md-caption-margin-bottom: var(--kite-typography-rutledge-md-caption-margin-bottom, 1.25rem); --kite-typography-xl-title-1-margin-bottom: var(--kite-typography-rutledge-xl-title-1-margin-bottom, 2rem); --kite-typography-xl-title-2-margin-bottom: var(--kite-typography-rutledge-xl-title-2-margin-bottom, 1.25rem); --kite-typography-xl-title-3-margin-bottom: var(--kite-typography-rutledge-xl-title-3-margin-bottom, 1.25rem); --kite-typography-xl-title-4-margin-bottom: var(--kite-typography-rutledge-xl-title-4-margin-bottom, 0.75rem); --kite-typography-xl-title-5-margin-bottom: var(--kite-typography-rutledge-xl-title-5-margin-bottom, 0.5rem); --kite-typography-xl-body-margin-bottom: var(--kite-typography-rutledge-xl-body-margin-bottom, 2rem); --kite-typography-xl-eyebrow-letter-spacing: var(--kite-typography-rutledge-xl-eyebrow-letter-spacing, 0.125rem); --kite-typography-xl-eyebrow-margin-bottom: var(--kite-typography-rutledge-xl-eyebrow-margin-bottom, 0.75rem); --kite-typography-xl-caption-margin-bottom: var(--kite-typography-rutledge-xl-caption-margin-bottom, 1.5rem); } .kite-theme--mode-dark { --kite-elevation-0: none; --kite-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.5); --kite-elevation-2: 0 2px 8px 0 rgba(0, 0, 0, 0.5); --kite-elevation-3: 0 3px 12px 0 rgba(0, 0, 0, 0.5); --kite-elevation-4: 0 24px 24px 0 rgba(0, 0, 0, 0.5); --kite-data-table-scroll-shadow: inset -14px 0 10px -14px rgba(0, 0, 0, 0.5); --kite-dynamic-hint-border-color: rgba(0, 0, 0, 0); --kite-interactive-list-item-hover-background-color: rgba(255, 255, 255, 0.05); /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-popover-border-color: rgba(0, 0, 0, 0); --kite-color-background: var(--kite-color-dark-blue-30, #001221); /** Default background color for the app */ --kite-color-background-secondary: var(--kite-color-dark-blue-20, #002747); /** Secondary background color for the app */ --kite-color-text: var(--kite-color-white, #ffffff); /** Default body text color */ --kite-color-text-secondary: var(--kite-color-gray-10, #f8f8f8); /** Secondary text color for microcopy, etc. */ --kite-color-caution: var(--kite-color-yellow-10, #ffd400); /** Color for elements that have to do with caution or warning */ --kite-color-negative: var(--kite-color-red-10, #ff4d4a); /** Color for elements providing negative, destructive, critical or dangerous information and actions */ --kite-color-on-negative: var(--kite-color-black, #000000); /** Text color found on negative color */ --kite-color-neutral: var(--kite-color-light-blue-20, #5db8fc); /** Color for elements providing neutral information (not error, success, or caution) */ --kite-color-positive: var(--kite-color-green-10, #00bf1f); /** Color for elements that have to do with positive or successful states and actions */ --kite-color-on-positive: var(--kite-color-black, #000000); /** Text color found on positive color */ --kite-color-disabled: var(--kite-color-gray-30, #63738a); /** Default color for elements in disabled states */ --kite-color-error: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'color-negative' token */ --kite-color-success: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'color-positive' token */ --kite-color-focus: var(--kite-color-white, #ffffff); /** Default color to use for focus states and focus ring outlines */ --kite-border-color: var(--kite-color-white, #ffffff); /** Default border color for UI elements */ --kite-container-background-color: var(--kite-color-dark-blue-20, #002747); /** `container-*` tokens can be shared across "containers", such as card components, sidebars, drawers ect. These tokens function to set any "container" apart from the app background by applying a default background color, border and even hover state. */ --kite-container-border-color: var(--kite-color-dark-blue-20, #002747); --kite-container-hover-background-color: var(--kite-color-dark-blue-30, #001221); --kite-my-component-background-color: var(--kite-color-red-10, #ff4d4a); --kite-form-control-background-color: var(--kite-color-dark-blue-20, #002747); --kite-form-control-disabled-background-color: var(--kite-color-dark-blue-20, #002747); --kite-form-control-addon-icon-color: var(--kite-color-white, #ffffff); --kite-form-control-placeholder-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-form-control-picker-backdrop-background-color: var(--kite-color-dark-blue-30, #001221); --kite-form-control-picker-list-item-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-form-control-picker-list-item-check-icon-color: var(--kite-color-white, #ffffff); --kite-accordion-border-color: var(--kite-color-dark-blue-10, #003561); --kite-accordion-hover-background-color: rgba(255, 255, 255, 0.05); --kite-alert-text-color: var(--kite-color-black, #000000); --kite-alert-negative-border-left-color: var(--kite-color-red-20, #d6312b); --kite-alert-negative-status-icon-color: var(--kite-color-red-20, #d6312b); --kite-alert-positive-border-left-color: var(--kite-color-green-20, #008516); --kite-alert-positive-status-icon-color: var(--kite-color-green-20, #008516); --kite-badge-disabled-background-color: var(--kite-color-dark-blue-10, #003561); --kite-button-destructive-background-color: var(--kite-color-red-20, #d6312b); --kite-button-destructive-text-color: var(--kite-color-white, #ffffff); --kite-button-secondary-text-color: var(--kite-color-white, #ffffff); --kite-button-secondary-icon-color: var(--kite-color-white, #ffffff); --kite-button-secondary-border-color: var(--kite-color-white, #ffffff); --kite-button-secondary-focus-text-color: var(--kite-color-dark-blue-20, #002747); --kite-button-secondary-focus-icon-color: var(--kite-color-dark-blue-20, #002747); --kite-button-secondary-hover-text-color: var(--kite-color-dark-blue-20, #002747); --kite-button-secondary-hover-icon-color: var(--kite-color-dark-blue-20, #002747); --kite-button-secondary-press-text-color: var(--kite-color-dark-blue-20, #002747); --kite-button-secondary-press-icon-color: var(--kite-color-dark-blue-20, #002747); --kite-button-borderless-text-color: var(--kite-color-white, #ffffff); --kite-button-borderless-focus-text-color: var(--kite-color-white, #ffffff); --kite-button-borderless-hover-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-hover-icon-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-press-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-press-icon-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-destructive-hover-text-color: var(--kite-color-white, #ffffff); --kite-button-borderless-destructive-press-text-color: var(--kite-color-white, #ffffff); --kite-calendar-focus-ring-color: var(--kite-color-white, #ffffff); --kite-calendar-controls-hover-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-calendar-day-focus-color: var(--kite-color-white, #ffffff); --kite-calendar-day-hover-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-calendar-day-due-background-color: var(--kite-color-white, #ffffff); --kite-calendar-day-due-text-color: var(--kite-color-black, #000000); --kite-calendar-standalone-background-color: var(--kite-color-dark-blue-20, #002747); --kite-chip-background-color: var(--kite-color-dark-blue-30, #001221); --kite-chip-text-color: var(--kite-color-light-blue-10, #b7cee5); --kite-chip-focus-background-color: var(--kite-color-dark-blue-20, #002747); --kite-chip-selected-background-color: var(--kite-color-light-blue-10, #b7cee5); --kite-chip-selected-text-color: var(--kite-color-dark-blue-30, #001221); --kite-chip-selected-disabled-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-chip-disabled-background-color: var(--kite-color-dark-blue-30, #001221); --kite-combobox-picker-results-text-color: var(--kite-color-white, #ffffff); --kite-data-table-border-color: var(--kite-color-dark-blue-10, #003561); --kite-data-table-row-hover-background-color: var(--kite-color-dark-blue-10, #003561); --kite-data-table-sticky-shadow-color: rgba(0, 0, 0, 0.5); --kite-data-table-striped-row-background-color: var(--kite-color-dark-blue-20, #002747); --kite-data-table-striped-inverse-row-background-color: var(--kite-color-dark-blue-30, #001221); --kite-date-input-focus-ring-color: var(--kite-color-white, #ffffff); --kite-date-input-addon-icon-color: var(--kite-color-white, #ffffff); --kite-dropdown-icon-color: var(--kite-color-white, #ffffff); --kite-dropdown-list-background-color: var(--kite-color-dark-blue-20, #002747); --kite-dropdown-list-border-color: var(--kite-color-gray-30, #63738a); --kite-dropdown-list-item-icon-color: var(--kite-color-white, #ffffff); --kite-dropdown-list-item-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-dynamic-hint-background-color: var(--kite-color-dark-blue-10, #003561); --kite-interactive-list-border-color: var(--kite-color-dark-blue-10, #003561); /** @deprecated: Replace with "list-border-color" token */ --kite-interactive-list-item-neutral-label-text-color: var(--kite-color-blue-10, #31a2ff); /** @deprecated: Replace with "list-border-color" token */ --kite-link-hover-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-link-press-text-color: var(--kite-color-gray-30, #63738a); --kite-list-border-color: var(--kite-color-dark-blue-10, #003561); --kite-list-item-hover-background-color: rgba(255, 255, 255, 0.05); --kite-list-item-neutral-label-text-color: var(--kite-color-blue-10, #31a2ff); --kite-list-item-muted-label-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-menu-list-background-color: var(--kite-color-dark-blue-20, #002747); --kite-menu-list-border-color: var(--kite-color-gray-30, #63738a); --kite-menu-list-item-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-menu-trigger-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-meter-track-color: var(--kite-color-dark-blue-10, #003561); --kite-meter-tick-color: var(--kite-color-white, #ffffff); --kite-meter-caution-fill-color: var(--kite-color-yellow-10, #ffd400); --kite-pagination-controls-background-color: var(--kite-color-dark-blue-30, #001221); --kite-pagination-controls-border-color: var(--kite-color-dark-blue-10, #003561); --kite-pagination-controls-button-hover-background-color: var(--kite-color-dark-blue-10, #003561); --kite-pagination-controls-button-icon-color: var(--kite-color-white, #ffffff); --kite-pagination-dropdown-hover-background-color: var(--kite-color-dark-blue-10, #003561); --kite-pagination-count-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-popover-background-color: var(--kite-color-dark-blue-10, #003561); --kite-popover-trigger-icon-color: var(--kite-color-white, #ffffff); --kite-progress-indicator-track-color: var(--kite-color-dark-blue-10, #003561); --kite-progress-indicator-fill-color: var(--kite-color-white, #ffffff); --kite-progress-indicator-secondary-label-color: var(--kite-color-white, #ffffff); --kite-radio-border-color: var(--kite-color-white, #ffffff); --kite-radio-selected-border-color: var(--kite-color-blue-20, #0073d1); --kite-select-icon-color: var(--kite-color-white, #ffffff); --kite-skip-link-background-color: var(--kite-color-dark-blue-10, #003561); --kite-skip-link-border-color: var(--kite-color-blue-10, #31a2ff); --kite-switch-disabled-thumb-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-tabs-tab-hover-border-bottom-color: var(--kite-color-white, #ffffff); --kite-tabs-tab-selected-text-color: var(--kite-color-white, #ffffff); --kite-tag-background-color: var(--kite-color-dark-blue-20, #002747); --kite-tag-border-color: var(--kite-color-light-blue-10, #b7cee5); --kite-tag-caution-border-color: var(--kite-color-yellow-20, #faa41a); --kite-tag-negative-border-color: var(--kite-color-red-20, #d6312b); --kite-tag-positive-border-color: var(--kite-color-green-20, #008516); --kite-tag-solid-background-color: var(--kite-color-light-blue-10, #b7cee5); --kite-tag-solid-text-color: var(--kite-color-black, #000000); --kite-text-area-character-count-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-text-input-character-count-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-text-input-secure-icon-color: var(--kite-color-blue-10, #31a2ff); --kite-time-input-icon-color: var(--kite-color-white, #ffffff); --kite-toast-background-color: var(--kite-color-dark-blue-10, #003561); --kite-tooltip-background-color: var(--kite-color-dark-blue-10, #003561); --kite-form-control-picker-background-color: var(--kite-form-control-background-color, #002747); --kite-form-control-picker-border-color: var(--kite-form-control-border-color, #63738a); --kite-button-disabled-background-color: var(--kite-color-disabled, #63738a); --kite-button-disabled-text-color: var(--kite-color-on-disabled, #d8dde6); --kite-button-destructive-focus-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-hover-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-press-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-secondary-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-button-secondary-destructive-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-button-borderless-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-button-borderless-destructive-focus-text-color: var(--kite-color-negative, #ff4d4a); --kite-button-borderless-destructive-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-calendar-controls-text-color: var(--kite-color-on-primary, #ffffff); --kite-calendar-controls-focus-text-color: var(--kite-color-text, #ffffff); --kite-calendar-day-text-color: var(--kite-color-on-primary, #ffffff); --kite-checkbox-border-color: var(--kite-border-color, #ffffff); --kite-chip-border-color: var(--kite-chip-text-color, #b7cee5); --kite-dialog-overlay-background-color: var(--kite-color-background, #001221); --kite-link-text-color: var(--kite-color-text, #ffffff); --kite-tag-text-color: var(--kite-tag-border-color, #b7cee5); --kite-calendar-day-out-month-hover-text-color: var(--kite-form-control-text-color, #ffffff); --kite-switch-focus-ring-color: var(--kite-focus-ring-color, #ffffff); } .kite-theme--life-unltd-white.kite-theme--mode-dark { --kite-elevation-0: none; --kite-elevation-1: 0 1px 4px 0 rgba(0, 0, 0, 0.5); --kite-elevation-2: 0 2px 8px 0 rgba(0, 0, 0, 0.5); --kite-elevation-3: 0 3px 12px 0 rgba(0, 0, 0, 0.5); --kite-elevation-4: 0 24px 24px 0 rgba(0, 0, 0, 0.5); --kite-data-table-scroll-shadow: inset -14px 0 10px -14px rgba(0, 0, 0, 0.5); --kite-dynamic-hint-border-color: rgba(0, 0, 0, 0); --kite-interactive-list-item-hover-background-color: rgba(255, 255, 255, 0.05); /** @deprecated: Replace with "list-item-hover-background-color" token */ --kite-popover-border-color: rgba(0, 0, 0, 0); --kite-color-background: var(--kite-color-dark-blue-30, #000f1a); /** Default background color for the app */ --kite-color-background-secondary: var(--kite-color-dark-blue-20, #002139); /** Secondary background color for the app */ --kite-color-text: var(--kite-color-white, #ffffff); /** Default body text color */ --kite-color-text-secondary: var(--kite-color-gray-10, #f8f8f8); /** Secondary text color for microcopy, etc. */ --kite-color-caution: var(--kite-color-yellow-10, #ffd400); /** Color for elements that have to do with caution or warning */ --kite-color-negative: var(--kite-color-red-10, #ff4d4a); /** Color for elements providing negative, destructive, critical or dangerous information and actions */ --kite-color-on-negative: var(--kite-color-black, #000000); /** Text color found on negative color */ --kite-color-neutral: var(--kite-color-light-blue-20, #73b7ff); /** Color for elements providing neutral information (not error, success, or caution) */ --kite-color-positive: var(--kite-color-green-10, #00bf1f); /** Color for elements that have to do with positive or successful states and actions */ --kite-color-on-positive: var(--kite-color-black, #000000); /** Text color found on positive color */ --kite-color-disabled: var(--kite-color-gray-30, #63738a); /** Default color for elements in disabled states */ --kite-color-error: var(--kite-color-red-10, #ff4d4a); /** @deprecated: Replace with 'color-negative' token */ --kite-color-success: var(--kite-color-green-10, #00bf1f); /** @deprecated: Replace with 'color-positive' token */ --kite-color-focus: var(--kite-color-white, #ffffff); /** Default color to use for focus states and focus ring outlines */ --kite-border-color: var(--kite-color-white, #ffffff); /** Default border color for UI elements */ --kite-container-background-color: var(--kite-color-dark-blue-20, #002139); /** `container-*` tokens can be shared across "containers", such as card components, sidebars, drawers ect. These tokens function to set any "container" apart from the app background by applying a default background color, border and even hover state. */ --kite-container-border-color: var(--kite-color-dark-blue-20, #002139); --kite-container-hover-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-my-component-background-color: var(--kite-color-red-10, #ff4d4a); --kite-form-control-background-color: var(--kite-color-dark-blue-20, #002139); --kite-form-control-disabled-background-color: var(--kite-color-dark-blue-20, #002139); --kite-form-control-addon-icon-color: var(--kite-color-white, #ffffff); --kite-form-control-placeholder-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-form-control-picker-backdrop-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-form-control-picker-list-item-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-form-control-picker-list-item-check-icon-color: var(--kite-color-white, #ffffff); --kite-accordion-border-color: var(--kite-color-dark-blue-10, #002e52); --kite-accordion-hover-background-color: rgba(255, 255, 255, 0.05); --kite-alert-text-color: var(--kite-color-black, #000000); --kite-alert-negative-border-left-color: var(--kite-color-red-20, #d6312b); --kite-alert-negative-status-icon-color: var(--kite-color-red-20, #d6312b); --kite-alert-positive-border-left-color: var(--kite-color-green-20, #008516); --kite-alert-positive-status-icon-color: var(--kite-color-green-20, #008516); --kite-badge-disabled-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-button-destructive-background-color: var(--kite-color-red-20, #d6312b); --kite-button-destructive-text-color: var(--kite-color-white, #ffffff); --kite-button-secondary-text-color: var(--kite-color-white, #ffffff); --kite-button-secondary-icon-color: var(--kite-color-white, #ffffff); --kite-button-secondary-border-color: var(--kite-color-white, #ffffff); --kite-button-secondary-focus-text-color: var(--kite-color-dark-blue-20, #002139); --kite-button-secondary-focus-icon-color: var(--kite-color-dark-blue-20, #002139); --kite-button-secondary-hover-text-color: var(--kite-color-dark-blue-20, #002139); --kite-button-secondary-hover-icon-color: var(--kite-color-dark-blue-20, #002139); --kite-button-secondary-press-text-color: var(--kite-color-dark-blue-20, #002139); --kite-button-secondary-press-icon-color: var(--kite-color-dark-blue-20, #002139); --kite-button-borderless-text-color: var(--kite-color-white, #ffffff); --kite-button-borderless-focus-text-color: var(--kite-color-white, #ffffff); --kite-button-borderless-hover-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-hover-icon-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-press-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-press-icon-color: var(--kite-color-gray-25, #9ba9bd); --kite-button-borderless-destructive-hover-text-color: var(--kite-color-white, #ffffff); --kite-button-borderless-destructive-press-text-color: var(--kite-color-white, #ffffff); --kite-calendar-focus-ring-color: var(--kite-color-white, #ffffff); --kite-calendar-controls-hover-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-calendar-day-focus-color: var(--kite-color-white, #ffffff); --kite-calendar-day-hover-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-calendar-day-due-background-color: var(--kite-color-white, #ffffff); --kite-calendar-day-due-text-color: var(--kite-color-black, #000000); --kite-calendar-standalone-background-color: var(--kite-color-dark-blue-20, #002139); --kite-chip-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-chip-text-color: var(--kite-color-light-blue-10, #b8d4f2); --kite-chip-focus-background-color: var(--kite-color-dark-blue-20, #002139); --kite-chip-selected-background-color: var(--kite-color-light-blue-10, #b8d4f2); --kite-chip-selected-text-color: var(--kite-color-dark-blue-30, #000f1a); --kite-chip-selected-disabled-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-chip-disabled-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-combobox-picker-results-text-color: var(--kite-color-white, #ffffff); --kite-data-table-border-color: var(--kite-color-dark-blue-10, #002e52); --kite-data-table-row-hover-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-data-table-sticky-shadow-color: rgba(0, 0, 0, 0.5); --kite-data-table-striped-row-background-color: var(--kite-color-dark-blue-20, #002139); --kite-data-table-striped-inverse-row-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-date-input-focus-ring-color: var(--kite-color-white, #ffffff); --kite-date-input-addon-icon-color: var(--kite-color-white, #ffffff); --kite-dropdown-icon-color: var(--kite-color-white, #ffffff); --kite-dropdown-list-background-color: var(--kite-color-dark-blue-20, #002139); --kite-dropdown-list-border-color: var(--kite-color-gray-30, #63738a); --kite-dropdown-list-item-icon-color: var(--kite-color-white, #ffffff); --kite-dropdown-list-item-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-dynamic-hint-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-interactive-list-border-color: var(--kite-color-dark-blue-10, #002e52); /** @deprecated: Replace with "list-border-color" token */ --kite-interactive-list-item-neutral-label-text-color: var(--kite-color-blue-10, #4da4ff); /** @deprecated: Replace with "list-border-color" token */ --kite-link-hover-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-link-press-text-color: var(--kite-color-gray-30, #63738a); --kite-list-border-color: var(--kite-color-dark-blue-10, #002e52); --kite-list-item-hover-background-color: rgba(255, 255, 255, 0.05); --kite-list-item-neutral-label-text-color: var(--kite-color-blue-10, #4da4ff); --kite-list-item-muted-label-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-menu-list-background-color: var(--kite-color-dark-blue-20, #002139); --kite-menu-list-border-color: var(--kite-color-gray-30, #63738a); --kite-menu-list-item-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-menu-trigger-hover-background-color: var(--kite-color-gray-30, #63738a); --kite-meter-track-color: var(--kite-color-dark-blue-10, #002e52); --kite-meter-tick-color: var(--kite-color-white, #ffffff); --kite-meter-caution-fill-color: var(--kite-color-yellow-10, #ffd400); --kite-pagination-controls-background-color: var(--kite-color-dark-blue-30, #000f1a); --kite-pagination-controls-border-color: var(--kite-color-dark-blue-10, #002e52); --kite-pagination-controls-button-hover-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-pagination-controls-button-icon-color: var(--kite-color-white, #ffffff); --kite-pagination-dropdown-hover-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-pagination-count-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-popover-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-popover-trigger-icon-color: var(--kite-color-white, #ffffff); --kite-progress-indicator-track-color: var(--kite-color-dark-blue-10, #002e52); --kite-progress-indicator-fill-color: var(--kite-color-white, #ffffff); --kite-progress-indicator-secondary-label-color: var(--kite-color-white, #ffffff); --kite-radio-border-color: var(--kite-color-white, #ffffff); --kite-radio-selected-border-color: var(--kite-color-blue-20, #0271eb); --kite-select-icon-color: var(--kite-color-white, #ffffff); --kite-skip-link-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-skip-link-border-color: var(--kite-color-blue-10, #4da4ff); --kite-switch-disabled-thumb-background-color: var(--kite-color-gray-25, #9ba9bd); --kite-tabs-tab-hover-border-bottom-color: var(--kite-color-white, #ffffff); --kite-tabs-tab-selected-text-color: var(--kite-color-white, #ffffff); --kite-tag-background-color: var(--kite-color-dark-blue-20, #002139); --kite-tag-border-color: var(--kite-color-light-blue-10, #b8d4f2); --kite-tag-caution-border-color: var(--kite-color-yellow-20, #faa41a); --kite-tag-negative-border-color: var(--kite-color-red-20, #d6312b); --kite-tag-positive-border-color: var(--kite-color-green-20, #008516); --kite-tag-solid-background-color: var(--kite-color-light-blue-10, #b8d4f2); --kite-tag-solid-text-color: var(--kite-color-black, #000000); --kite-text-area-character-count-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-text-input-character-count-text-color: var(--kite-color-gray-25, #9ba9bd); --kite-text-input-secure-icon-color: var(--kite-color-blue-10, #4da4ff); --kite-time-input-icon-color: var(--kite-color-white, #ffffff); --kite-toast-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-tooltip-background-color: var(--kite-color-dark-blue-10, #002e52); --kite-form-control-picker-background-color: var(--kite-form-control-background-color, #002139); --kite-form-control-picker-border-color: var(--kite-form-control-border-color, #63738a); --kite-button-disabled-background-color: var(--kite-color-disabled, #63738a); --kite-button-disabled-text-color: var(--kite-color-on-disabled, #d8dde6); --kite-button-destructive-focus-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-hover-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-destructive-press-text-color: var(--kite-button-destructive-text-color, #ffffff); --kite-button-secondary-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-button-secondary-destructive-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-button-borderless-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-button-borderless-destructive-focus-text-color: var(--kite-color-negative, #ff4d4a); --kite-button-borderless-destructive-disabled-text-color: var(--kite-color-disabled, #63738a); --kite-calendar-controls-text-color: var(--kite-color-on-primary, #ffffff); --kite-calendar-controls-focus-text-color: var(--kite-color-text, #ffffff); --kite-calendar-day-text-color: var(--kite-color-on-primary, #ffffff); --kite-checkbox-border-color: var(--kite-border-color, #ffffff); --kite-chip-border-color: var(--kite-chip-text-color, #b8d4f2); --kite-dialog-overlay-background-color: var(--kite-color-background, #000f1a); --kite-link-text-color: var(--kite-color-text, #ffffff); --kite-tag-text-color: var(--kite-tag-border-color, #b8d4f2); --kite-calendar-day-out-month-hover-text-color: var(--kite-form-control-text-color, #ffffff); --kite-switch-focus-ring-color: var(--kite-focus-ring-color, #ffffff); } @media print { *, *::before, *::after, p::first-letter, div::first-letter, blockquote::first-letter, li::first-letter, p::first-line, div::first-line, blockquote::first-line, li::first-line { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } abbr[title]::after { content: " (" attr(title) ")"; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } pre { white-space: pre-wrap !important; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } @font-face { font-family: "Spectrum Sans"; font-style: normal; font-weight: 300; font-display: auto; src: local("Spectrum Sans Light"), local("SpectrumSans-Light"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Lt.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Lt.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: italic; font-weight: 300; font-display: auto; src: local("Spectrum Sans Light Italic"), local("SpectrumSans-LightItalic"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_LtIt.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_LtIt.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: normal; font-weight: 350; font-display: auto; src: local("Spectrum Sans Book"), local("SpectrumSans-Book"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bk.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bk.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: italic; font-weight: 350; font-display: auto; src: local("Spectrum Sans Book Italic"), local("SpectrumSans-BookItalic"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BkIt.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BkIt.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: normal; font-weight: 400; font-display: auto; src: local("Spectrum Sans Regular"), local("SpectrumSans-Regular"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Rg.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Rg.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: italic; font-weight: 400; font-display: auto; src: local("Spectrum Sans Italic"), local("SpectrumSans-Italic"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_It.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_It.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: normal; font-weight: 500; font-display: auto; src: local("Spectrum Sans Medium"), local("SpectrumSans-Medium"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Md.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Md.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: italic; font-weight: 500; font-display: auto; src: local("Spectrum Sans Medium Italic"), local("SpectrumSans-MediumItalic"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_MdIt.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_MdIt.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: normal; font-weight: 700; font-display: auto; src: local("Spectrum Sans Bold"), local("SpectrumSans-Bold"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bd.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bd.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: italic; font-weight: 700; font-display: auto; src: local("Spectrum Sans Bold Italic"), local("SpectrumSans-BoldItalic"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BdIt.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BdIt.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: normal; font-weight: 800; font-display: auto; src: local("Spectrum Sans ExtraBold"), local("SpectrumSans-ExtraBold"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBd.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBd.woff") format("woff"); } @font-face { font-family: "Spectrum Sans"; font-style: italic; font-weight: 800; src: local("Spectrum Sans ExtraBold Italic"), local("SpectrumSans-ExtraBoldItalic"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2") format("woff2-variations"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBdIt.woff2") format("woff2"), url("https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBdIt.woff") format("woff"); } *, *::before, *::after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } html { font-size: var(--kite-font-size-px); } code, kbd, samp { font-family: var(--kite-font-family-monospace); } details, summary { margin-bottom: var(--kite-spacing-sm); } .kite-focus, :focus { outline: var(--kite-focus-ring-width) var(--kite-focus-ring-style) var(--kite-focus-ring-color); outline-offset: var(--kite-focus-ring-offset); } .kite-focus:not(.kite-focus-visible), :focus:not(:focus-visible) { outline: 0; } .kite-focus-visible, .focus-visible, :focus-visible { outline: var(--kite-focus-ring-width) var(--kite-focus-ring-style) var(--kite-focus-ring-color); outline-offset: var(--kite-focus-ring-offset); } .kite-focus--always :focus { outline: var(--kite-focus-ring-width) var(--kite-focus-ring-style) var(--kite-focus-ring-color); outline-offset: var(--kite-focus-ring-offset); } h1, .kite-type-style--title-1 { font-size: var(--kite-typography-title-1-size); font-weight: var(--kite-typography-title-1-weight); font-style: var(--kite-typography-title-1-style); letter-spacing: var(--kite-typography-title-1-letter-spacing); line-height: var(--kite-typography-title-1-line-height); margin: 0 0 var(--kite-typography-title-1-margin-bottom); } @media only screen and (min-width: 37.5rem) { h1, .kite-type-style--title-1 { font-size: var(--kite-typography-lg-title-1-size); font-weight: var(--kite-typography-lg-title-1-weight); letter-spacing: var(--kite-typography-lg-title-1-letter-spacing); line-height: var(--kite-typography-lg-title-1-line-height); margin: 0 0 var(--kite-typography-lg-title-1-margin-bottom); } } h2, .kite-type-style--title-2 { font-size: var(--kite-typography-title-2-size); font-weight: var(--kite-typography-title-2-weight); font-style: var(--kite-typography-title-2-style); letter-spacing: var(--kite-typography-title-2-letter-spacing); line-height: var(--kite-typography-title-2-line-height); margin: 0 0 var(--kite-typography-title-2-margin-bottom); } @media only screen and (min-width: 37.5rem) { h2, .kite-type-style--title-2 { font-size: var(--kite-typography-lg-title-2-size); font-weight: var(--kite-typography-lg-title-2-weight); letter-spacing: var(--kite-typography-lg-title-2-letter-spacing); line-height: var(--kite-typography-lg-title-2-line-height); margin: 0 0 var(--kite-typography-lg-title-2-margin-bottom); } } h3, .kite-type-style--title-3 { font-size: var(--kite-typography-title-3-size); font-weight: var(--kite-typography-title-3-weight); font-style: var(--kite-typography-title-3-style); letter-spacing: var(--kite-typography-title-3-letter-spacing); line-height: var(--kite-typography-title-3-line-height); margin: 0 0 var(--kite-typography-title-3-margin-bottom); } @media only screen and (min-width: 37.5rem) { h3, .kite-type-style--title-3 { font-size: var(--kite-typography-lg-title-3-size); font-weight: var(--kite-typography-lg-title-3-weight); letter-spacing: var(--kite-typography-lg-title-3-letter-spacing); line-height: var(--kite-typography-lg-title-3-line-height); margin: 0 0 var(--kite-typography-lg-title-3-margin-bottom); } } h4, .kite-type-style--title-4 { font-size: var(--kite-typography-title-4-size); font-weight: var(--kite-typography-title-4-weight); font-style: var(--kite-typography-title-4-style); letter-spacing: var(--kite-typography-title-4-letter-spacing); line-height: var(--kite-typography-title-4-line-height); margin: 0 0 var(--kite-typography-title-4-margin-bottom); } @media only screen and (min-width: 37.5rem) { h4, .kite-type-style--title-4 { font-size: var(--kite-typography-lg-title-4-size); font-weight: var(--kite-typography-lg-title-4-weight); letter-spacing: var(--kite-typography-lg-title-4-letter-spacing); line-height: var(--kite-typography-lg-title-4-line-height); margin: 0 0 var(--kite-typography-lg-title-4-margin-bottom); } } h5, .kite-type-style--title-5 { font-size: var(--kite-typography-title-5-size); font-weight: var(--kite-typography-title-5-weight); font-style: var(--kite-typography-title-5-style); letter-spacing: var(--kite-typography-title-5-letter-spacing); line-height: var(--kite-typography-title-5-line-height); margin: 0 0 var(--kite-typography-title-5-margin-bottom); } @media only screen and (min-width: 37.5rem) { h5, .kite-type-style--title-5 { font-size: var(--kite-typography-lg-title-5-size); font-weight: var(--kite-typography-lg-title-5-weight); letter-spacing: var(--kite-typography-lg-title-5-letter-spacing); line-height: var(--kite-typography-lg-title-5-line-height); margin: 0 0 var(--kite-typography-lg-title-5-margin-bottom); } } h6, .kite-type-style--title-6 { font-size: var(--kite-typography-title-6-size); font-weight: var(--kite-typography-title-6-weight); font-style: var(--kite-typography-title-6-style); letter-spacing: var(--kite-typography-title-6-letter-spacing); line-height: var(--kite-typography-title-6-line-height); margin: 0 0 var(--kite-typography-title-6-margin-bottom); } @media only screen and (min-width: 37.5rem) { h6, .kite-type-style--title-6 { font-size: var(--kite-typography-lg-title-6-size); font-weight: var(--kite-typography-lg-title-6-weight); letter-spacing: var(--kite-typography-lg-title-6-letter-spacing); line-height: var(--kite-typography-lg-title-6-line-height); margin: 0 0 var(--kite-typography-lg-title-6-margin-bottom); } } .kite-type-style--eyebrow { font-size: var(--kite-typography-eyebrow-size); font-weight: var(--kite-typography-eyebrow-weight); font-style: var(--kite-typography-eyebrow-style); letter-spacing: var(--kite-typography-eyebrow-letter-spacing); line-height: var(--kite-typography-eyebrow-line-height); margin: 0 0 var(--kite-typography-eyebrow-margin-bottom); text-transform: var(--kite-typography-eyebrow-text-transform); } @media only screen and (min-width: 37.5rem) { .kite-type-style--eyebrow { font-size: var(--kite-typography-lg-eyebrow-size); font-weight: var(--kite-typography-lg-eyebrow-weight); letter-spacing: var(--kite-typography-lg-eyebrow-letter-spacing); line-height: var(--kite-typography-lg-eyebrow-line-height); margin: 0 0 var(--kite-typography-lg-eyebrow-margin-bottom); text-transform: var(--kite-typography-sm-eyebrow-text-transform); } } h1, .kite-type-style--title-1, h2, .kite-type-style--title-2, h3, .kite-type-style--title-3, h4, .kite-type-style--title-4, h5, .kite-type-style--title-5, h6, .kite-type-style--title-6, .kite-type-style--eyebrow { font-family: "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .kite-type-style--body { font-size: var(--kite-typography-body-size); font-weight: var(--kite-typography-body-weight); font-style: var(--kite-typography-body-style); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); margin: 0 0 var(--kite-typography-body-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--body { font-size: var(--kite-typography-lg-body-size); font-weight: var(--kite-typography-lg-body-weight); letter-spacing: var(--kite-typography-lg-body-letter-spacing); line-height: var(--kite-typography-lg-body-line-height); margin: 0 0 var(--kite-typography-lg-body-margin-bottom); } } p { font-size: var(--kite-typography-body-size); font-weight: var(--kite-typography-body-weight); font-style: var(--kite-typography-body-style); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); margin: 0 0 var(--kite-typography-body-margin-bottom); } @media only screen and (min-width: 37.5rem) { p { font-size: var(--kite-typography-lg-body-size); font-weight: var(--kite-typography-lg-body-weight); letter-spacing: var(--kite-typography-lg-body-letter-spacing); line-height: var(--kite-typography-lg-body-line-height); margin: 0 0 var(--kite-typography-lg-body-margin-bottom); } } .kite-type-style--caption, .kite-type-style--caption-1, figcaption { font-size: var(--kite-typography-caption-1-size); font-weight: var(--kite-typography-caption-1-weight); font-style: var(--kite-typography-caption-1-style); letter-spacing: var(--kite-typography-caption-1-letter-spacing); line-height: var(--kite-typography-caption-1-line-height); margin: 0 0 var(--kite-typography-caption-1-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--caption, .kite-type-style--caption-1, figcaption { font-size: var(--kite-typography-lg-caption-1-size); font-weight: var(--kite-typography-lg-caption-1-weight); letter-spacing: var(--kite-typography-lg-caption-1-letter-spacing); line-height: var(--kite-typography-lg-caption-1-line-height); margin: 0 0 var(--kite-typography-lg-caption-1-margin-bottom); } } .kite-type-style--caption-2 { font-size: var(--kite-typography-caption-2-size); font-weight: var(--kite-typography-caption-2-weight); font-style: var(--kite-typography-caption-2-style); letter-spacing: var(--kite-typography-caption-2-letter-spacing); line-height: var(--kite-typography-caption-2-line-height); margin: 0 0 var(--kite-typography-caption-2-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--caption-2 { font-size: var(--kite-typography-lg-caption-2-size); font-weight: var(--kite-typography-lg-caption-2-weight); letter-spacing: var(--kite-typography-lg-caption-2-letter-spacing); line-height: var(--kite-typography-lg-caption-2-line-height); margin: 0 0 var(--kite-typography-lg-caption-2-margin-bottom); } } .kite-type-style--display { font-size: var(--kite-typography-display-size); font-weight: var(--kite-typography-display-weight); font-style: var(--kite-typography-display-style); letter-spacing: var(--kite-typography-display-letter-spacing); line-height: var(--kite-typography-display-line-height); margin: 0 0 var(--kite-typography-display-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--display { font-size: var(--kite-typography-lg-display-size); font-weight: var(--kite-typography-lg-display-weight); letter-spacing: var(--kite-typography-lg-display-letter-spacing); line-height: var(--kite-typography-lg-display-line-height); margin: 0 0 var(--kite-typography-lg-display-margin-bottom); } } .kite-type-style--body-display { font-size: var(--kite-typography-body-display-size); font-weight: var(--kite-typography-body-display-weight); font-style: var(--kite-typography-body-display-style); letter-spacing: var(--kite-typography-body-display-letter-spacing); line-height: var(--kite-typography-body-display-line-height); margin: 0 0 var(--kite-typography-body-display-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--body-display { font-size: var(--kite-typography-lg-body-display-size); font-weight: var(--kite-typography-lg-body-display-weight); letter-spacing: var(--kite-typography-lg-body-display-letter-spacing); line-height: var(--kite-typography-lg-body-display-line-height); margin: 0 0 var(--kite-typography-lg-body-display-margin-bottom); } } a { --text-decoration: var(--kite-link-text-decoration); --color: var(--kite-link-text-color); --focus-ring-color: var(--kite-link-focus-ring-color); --focus-text-color: var(--kite-link-focus-text-color); --hover-text-color: var(--kite-link-hover-text-color); --press-text-color: var(--kite-link-press-text-color); --visited-text-color: var(--kite-link-visited-text-color); color: var(--color); font-weight: var(--kite-link-text-weight); text-decoration: var(--text-decoration); text-decoration-thickness: var(--kite-link-text-decoration-thickness); text-underline-offset: var(--kite-link-text-decoration-offset); } a.kite-hover, a:hover { --text-decoration: var(--kite-link-hover-text-decoration); color: var(--hover-text-color); } a.kite-focus-visible, a:focus-visible { outline: var(--kite-focus-ring-width) var(--kite-focus-ring-style) var(--kite-focus-ring-color); outline-offset: var(--kite-focus-ring-offset); --text-decoration: var(--kite-link-focus-text-decoration); color: var(--focus-text-color); outline-color: var(--focus-ring-color); } a.kite-active, a:active { --text-decoration: var(--kite-link-press-text-decoration); color: var(--press-text-color); } a.kite-visited, a:visited { --text-decoration: var(--kite-link-visited-text-decoration); color: var(--visited-text-color); } a.kite-disabled, a:disabled { pointer-events: none; } a:not([href]), a:not([href]):hover { color: inherit; text-decoration: inherit; } ol, ul, .kite-text-list { margin: 0 0 var(--kite-spacing-xl) 0; padding: 0 0 0 var(--kite-spacing-xl); } ol.kite-list--alpha, ol.kite-text-list--alpha, ul.kite-list--alpha, ul.kite-text-list--alpha, .kite-text-list.kite-list--alpha, .kite-text-list.kite-text-list--alpha { list-style: lower-alpha; } ol.kite-list--unstyled, ol.kite-text-list--unstyled, ul.kite-list--unstyled, ul.kite-text-list--unstyled, .kite-text-list.kite-list--unstyled, .kite-text-list.kite-text-list--unstyled { list-style: none; padding-left: 0; } ol.kite-list--unstyled > li, ol.kite-text-list--unstyled > li, ul.kite-list--unstyled > li, ul.kite-text-list--unstyled > li, .kite-text-list.kite-list--unstyled > li, .kite-text-list.kite-text-list--unstyled > li { padding-left: 0; } ol.kite-reset, ul.kite-reset, .kite-text-list.kite-reset { border: 0; box-sizing: border-box; font-family: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } ol.kite-reset *, ol.kite-reset *::before, ol.kite-reset *::after, ul.kite-reset *, ul.kite-reset *::before, ul.kite-reset *::after, .kite-text-list.kite-reset *, .kite-text-list.kite-reset *::before, .kite-text-list.kite-reset *::after { box-sizing: inherit; } ol.kite-reset > li, ul.kite-reset > li, .kite-text-list.kite-reset > li { line-height: inherit; margin: 0; padding: 0; } ol > li, ul > li, .kite-text-list > li { line-height: 1.5; margin-bottom: var(--kite-spacing-sm); padding-left: var(--kite-spacing-xs); } dl { margin: 0 0 var(--kite-spacing-xl) 0; padding: 0; } dt { font-weight: var(--kite-font-weight-bold); } dd { margin: 0 0 var(--kite-spacing-xs) 0; } hr { border: 0; border-top: var(--kite-border-width-thin) var(--kite-border-style) var(--kite-border-color); margin-top: var(--kite-spacing-xl); margin-bottom: var(--kite-spacing-xl); } blockquote, .kite-blockquote { font-size: var(--kite-typography-body-display-size); font-weight: var(--kite-typography-body-display-weight); font-style: var(--kite-typography-body-display-style); letter-spacing: var(--kite-typography-body-display-letter-spacing); line-height: var(--kite-typography-body-display-line-height); margin: 0 0 var(--kite-typography-body-display-margin-bottom); } @media only screen and (min-width: 37.5rem) { blockquote, .kite-blockquote { font-size: var(--kite-typography-lg-body-display-size); font-weight: var(--kite-typography-lg-body-display-weight); letter-spacing: var(--kite-typography-lg-body-display-letter-spacing); line-height: var(--kite-typography-lg-body-display-line-height); margin: 0 0 var(--kite-typography-lg-body-display-margin-bottom); } } blockquote, .kite-blockquote { border-left: var(--kite-blockquote-border-left-color) var(--kite-blockquote-border-left-style) var(--kite-blockquote-border-left-width); margin-bottom: var(--kite-blockquote-margin-bottom); padding: var(--kite-blockquote-padding-top) var(--kite-blockquote-padding-right) var(--kite-blockquote-padding-bottom) var(--kite-blockquote-padding-left); } .kite-blockquote__footer { color: var(--kite-blockquote-cite-color); display: block; font-size: var(--kite-blockquote-cite-text-size); } .kite-blockquote__footer::before { content: var(--kite-blockquote-cite-punctuation); } mark, .kite-mark { background-color: var(--kite-color-yellow-10); } abbr[title] { border-bottom: 0; cursor: help; text-decoration: underline; text-decoration: underline dotted; } h1, .kite-type-style--title-1 { font-size: var(--kite-typography-title-1-size); font-weight: var(--kite-typography-title-1-weight); font-style: var(--kite-typography-title-1-style); letter-spacing: var(--kite-typography-title-1-letter-spacing); line-height: var(--kite-typography-title-1-line-height); margin: 0 0 var(--kite-typography-title-1-margin-bottom); } @media only screen and (min-width: 37.5rem) { h1, .kite-type-style--title-1 { font-size: var(--kite-typography-lg-title-1-size); font-weight: var(--kite-typography-lg-title-1-weight); letter-spacing: var(--kite-typography-lg-title-1-letter-spacing); line-height: var(--kite-typography-lg-title-1-line-height); margin: 0 0 var(--kite-typography-lg-title-1-margin-bottom); } } h2, .kite-type-style--title-2 { font-size: var(--kite-typography-title-2-size); font-weight: var(--kite-typography-title-2-weight); font-style: var(--kite-typography-title-2-style); letter-spacing: var(--kite-typography-title-2-letter-spacing); line-height: var(--kite-typography-title-2-line-height); margin: 0 0 var(--kite-typography-title-2-margin-bottom); } @media only screen and (min-width: 37.5rem) { h2, .kite-type-style--title-2 { font-size: var(--kite-typography-lg-title-2-size); font-weight: var(--kite-typography-lg-title-2-weight); letter-spacing: var(--kite-typography-lg-title-2-letter-spacing); line-height: var(--kite-typography-lg-title-2-line-height); margin: 0 0 var(--kite-typography-lg-title-2-margin-bottom); } } h3, .kite-type-style--title-3 { font-size: var(--kite-typography-title-3-size); font-weight: var(--kite-typography-title-3-weight); font-style: var(--kite-typography-title-3-style); letter-spacing: var(--kite-typography-title-3-letter-spacing); line-height: var(--kite-typography-title-3-line-height); margin: 0 0 var(--kite-typography-title-3-margin-bottom); } @media only screen and (min-width: 37.5rem) { h3, .kite-type-style--title-3 { font-size: var(--kite-typography-lg-title-3-size); font-weight: var(--kite-typography-lg-title-3-weight); letter-spacing: var(--kite-typography-lg-title-3-letter-spacing); line-height: var(--kite-typography-lg-title-3-line-height); margin: 0 0 var(--kite-typography-lg-title-3-margin-bottom); } } h4, .kite-type-style--title-4 { font-size: var(--kite-typography-title-4-size); font-weight: var(--kite-typography-title-4-weight); font-style: var(--kite-typography-title-4-style); letter-spacing: var(--kite-typography-title-4-letter-spacing); line-height: var(--kite-typography-title-4-line-height); margin: 0 0 var(--kite-typography-title-4-margin-bottom); } @media only screen and (min-width: 37.5rem) { h4, .kite-type-style--title-4 { font-size: var(--kite-typography-lg-title-4-size); font-weight: var(--kite-typography-lg-title-4-weight); letter-spacing: var(--kite-typography-lg-title-4-letter-spacing); line-height: var(--kite-typography-lg-title-4-line-height); margin: 0 0 var(--kite-typography-lg-title-4-margin-bottom); } } h5, .kite-type-style--title-5 { font-size: var(--kite-typography-title-5-size); font-weight: var(--kite-typography-title-5-weight); font-style: var(--kite-typography-title-5-style); letter-spacing: var(--kite-typography-title-5-letter-spacing); line-height: var(--kite-typography-title-5-line-height); margin: 0 0 var(--kite-typography-title-5-margin-bottom); } @media only screen and (min-width: 37.5rem) { h5, .kite-type-style--title-5 { font-size: var(--kite-typography-lg-title-5-size); font-weight: var(--kite-typography-lg-title-5-weight); letter-spacing: var(--kite-typography-lg-title-5-letter-spacing); line-height: var(--kite-typography-lg-title-5-line-height); margin: 0 0 var(--kite-typography-lg-title-5-margin-bottom); } } h6, .kite-type-style--title-6 { font-size: var(--kite-typography-title-6-size); font-weight: var(--kite-typography-title-6-weight); font-style: var(--kite-typography-title-6-style); letter-spacing: var(--kite-typography-title-6-letter-spacing); line-height: var(--kite-typography-title-6-line-height); margin: 0 0 var(--kite-typography-title-6-margin-bottom); } @media only screen and (min-width: 37.5rem) { h6, .kite-type-style--title-6 { font-size: var(--kite-typography-lg-title-6-size); font-weight: var(--kite-typography-lg-title-6-weight); letter-spacing: var(--kite-typography-lg-title-6-letter-spacing); line-height: var(--kite-typography-lg-title-6-line-height); margin: 0 0 var(--kite-typography-lg-title-6-margin-bottom); } } .kite-type-style--eyebrow { font-size: var(--kite-typography-eyebrow-size); font-weight: var(--kite-typography-eyebrow-weight); font-style: var(--kite-typography-eyebrow-style); letter-spacing: var(--kite-typography-eyebrow-letter-spacing); line-height: var(--kite-typography-eyebrow-line-height); margin: 0 0 var(--kite-typography-eyebrow-margin-bottom); text-transform: var(--kite-typography-eyebrow-text-transform); } @media only screen and (min-width: 37.5rem) { .kite-type-style--eyebrow { font-size: var(--kite-typography-lg-eyebrow-size); font-weight: var(--kite-typography-lg-eyebrow-weight); letter-spacing: var(--kite-typography-lg-eyebrow-letter-spacing); line-height: var(--kite-typography-lg-eyebrow-line-height); margin: 0 0 var(--kite-typography-lg-eyebrow-margin-bottom); text-transform: var(--kite-typography-sm-eyebrow-text-transform); } } h1, .kite-type-style--title-1, h2, .kite-type-style--title-2, h3, .kite-type-style--title-3, h4, .kite-type-style--title-4, h5, .kite-type-style--title-5, h6, .kite-type-style--title-6, .kite-type-style--eyebrow { font-family: "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .kite-type-style--body { font-size: var(--kite-typography-body-size); font-weight: var(--kite-typography-body-weight); font-style: var(--kite-typography-body-style); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); margin: 0 0 var(--kite-typography-body-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--body { font-size: var(--kite-typography-lg-body-size); font-weight: var(--kite-typography-lg-body-weight); letter-spacing: var(--kite-typography-lg-body-letter-spacing); line-height: var(--kite-typography-lg-body-line-height); margin: 0 0 var(--kite-typography-lg-body-margin-bottom); } } p { font-size: var(--kite-typography-body-size); font-weight: var(--kite-typography-body-weight); font-style: var(--kite-typography-body-style); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); margin: 0 0 var(--kite-typography-body-margin-bottom); } @media only screen and (min-width: 37.5rem) { p { font-size: var(--kite-typography-lg-body-size); font-weight: var(--kite-typography-lg-body-weight); letter-spacing: var(--kite-typography-lg-body-letter-spacing); line-height: var(--kite-typography-lg-body-line-height); margin: 0 0 var(--kite-typography-lg-body-margin-bottom); } } .kite-type-style--caption, .kite-type-style--caption-1, figcaption { font-size: var(--kite-typography-caption-1-size); font-weight: var(--kite-typography-caption-1-weight); font-style: var(--kite-typography-caption-1-style); letter-spacing: var(--kite-typography-caption-1-letter-spacing); line-height: var(--kite-typography-caption-1-line-height); margin: 0 0 var(--kite-typography-caption-1-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--caption, .kite-type-style--caption-1, figcaption { font-size: var(--kite-typography-lg-caption-1-size); font-weight: var(--kite-typography-lg-caption-1-weight); letter-spacing: var(--kite-typography-lg-caption-1-letter-spacing); line-height: var(--kite-typography-lg-caption-1-line-height); margin: 0 0 var(--kite-typography-lg-caption-1-margin-bottom); } } .kite-type-style--caption-2 { font-size: var(--kite-typography-caption-2-size); font-weight: var(--kite-typography-caption-2-weight); font-style: var(--kite-typography-caption-2-style); letter-spacing: var(--kite-typography-caption-2-letter-spacing); line-height: var(--kite-typography-caption-2-line-height); margin: 0 0 var(--kite-typography-caption-2-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--caption-2 { font-size: var(--kite-typography-lg-caption-2-size); font-weight: var(--kite-typography-lg-caption-2-weight); letter-spacing: var(--kite-typography-lg-caption-2-letter-spacing); line-height: var(--kite-typography-lg-caption-2-line-height); margin: 0 0 var(--kite-typography-lg-caption-2-margin-bottom); } } .kite-type-style--display { font-size: var(--kite-typography-display-size); font-weight: var(--kite-typography-display-weight); font-style: var(--kite-typography-display-style); letter-spacing: var(--kite-typography-display-letter-spacing); line-height: var(--kite-typography-display-line-height); margin: 0 0 var(--kite-typography-display-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--display { font-size: var(--kite-typography-lg-display-size); font-weight: var(--kite-typography-lg-display-weight); letter-spacing: var(--kite-typography-lg-display-letter-spacing); line-height: var(--kite-typography-lg-display-line-height); margin: 0 0 var(--kite-typography-lg-display-margin-bottom); } } .kite-type-style--body-display { font-size: var(--kite-typography-body-display-size); font-weight: var(--kite-typography-body-display-weight); font-style: var(--kite-typography-body-display-style); letter-spacing: var(--kite-typography-body-display-letter-spacing); line-height: var(--kite-typography-body-display-line-height); margin: 0 0 var(--kite-typography-body-display-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-type-style--body-display { font-size: var(--kite-typography-lg-body-display-size); font-weight: var(--kite-typography-lg-body-display-weight); letter-spacing: var(--kite-typography-lg-body-display-letter-spacing); line-height: var(--kite-typography-lg-body-display-line-height); margin: 0 0 var(--kite-typography-lg-body-display-margin-bottom); } } a { --text-decoration: var(--kite-link-text-decoration); --color: var(--kite-link-text-color); --focus-ring-color: var(--kite-link-focus-ring-color); --focus-text-color: var(--kite-link-focus-text-color); --hover-text-color: var(--kite-link-hover-text-color); --press-text-color: var(--kite-link-press-text-color); --visited-text-color: var(--kite-link-visited-text-color); color: var(--color); font-weight: var(--kite-link-text-weight); text-decoration: var(--text-decoration); text-decoration-thickness: var(--kite-link-text-decoration-thickness); text-underline-offset: var(--kite-link-text-decoration-offset); } a.kite-hover, a:hover { --text-decoration: var(--kite-link-hover-text-decoration); color: var(--hover-text-color); } a.kite-focus-visible, a:focus-visible { outline: var(--kite-focus-ring-width) var(--kite-focus-ring-style) var(--kite-focus-ring-color); outline-offset: var(--kite-focus-ring-offset); --text-decoration: var(--kite-link-focus-text-decoration); color: var(--focus-text-color); outline-color: var(--focus-ring-color); } a.kite-active, a:active { --text-decoration: var(--kite-link-press-text-decoration); color: var(--press-text-color); } a.kite-visited, a:visited { --text-decoration: var(--kite-link-visited-text-decoration); color: var(--visited-text-color); } a.kite-disabled, a:disabled { pointer-events: none; } a:not([href]), a:not([href]):hover { color: inherit; text-decoration: inherit; } ol, ul, .kite-text-list { margin: 0 0 var(--kite-spacing-xl) 0; padding: 0 0 0 var(--kite-spacing-xl); } ol.kite-list--alpha, ol.kite-text-list--alpha, ul.kite-list--alpha, ul.kite-text-list--alpha, .kite-text-list.kite-list--alpha, .kite-text-list.kite-text-list--alpha { list-style: lower-alpha; } ol.kite-list--unstyled, ol.kite-text-list--unstyled, ul.kite-list--unstyled, ul.kite-text-list--unstyled, .kite-text-list.kite-list--unstyled, .kite-text-list.kite-text-list--unstyled { list-style: none; padding-left: 0; } ol.kite-list--unstyled > li, ol.kite-text-list--unstyled > li, ul.kite-list--unstyled > li, ul.kite-text-list--unstyled > li, .kite-text-list.kite-list--unstyled > li, .kite-text-list.kite-text-list--unstyled > li { padding-left: 0; } ol.kite-reset, ul.kite-reset, .kite-text-list.kite-reset { border: 0; box-sizing: border-box; font-family: inherit; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; } ol.kite-reset *, ol.kite-reset *::before, ol.kite-reset *::after, ul.kite-reset *, ul.kite-reset *::before, ul.kite-reset *::after, .kite-text-list.kite-reset *, .kite-text-list.kite-reset *::before, .kite-text-list.kite-reset *::after { box-sizing: inherit; } ol.kite-reset > li, ul.kite-reset > li, .kite-text-list.kite-reset > li { line-height: inherit; margin: 0; padding: 0; } ol > li, ul > li, .kite-text-list > li { line-height: 1.5; margin-bottom: var(--kite-spacing-sm); padding-left: var(--kite-spacing-xs); } dl { margin: 0 0 var(--kite-spacing-xl) 0; padding: 0; } dt { font-weight: var(--kite-font-weight-bold); } dd { margin: 0 0 var(--kite-spacing-xs) 0; } hr { border: 0; border-top: var(--kite-border-width-thin) var(--kite-border-style) var(--kite-border-color); margin-top: var(--kite-spacing-xl); margin-bottom: var(--kite-spacing-xl); } blockquote, .kite-blockquote { font-size: var(--kite-typography-body-display-size); font-weight: var(--kite-typography-body-display-weight); font-style: var(--kite-typography-body-display-style); letter-spacing: var(--kite-typography-body-display-letter-spacing); line-height: var(--kite-typography-body-display-line-height); margin: 0 0 var(--kite-typography-body-display-margin-bottom); } @media only screen and (min-width: 37.5rem) { blockquote, .kite-blockquote { font-size: var(--kite-typography-lg-body-display-size); font-weight: var(--kite-typography-lg-body-display-weight); letter-spacing: var(--kite-typography-lg-body-display-letter-spacing); line-height: var(--kite-typography-lg-body-display-line-height); margin: 0 0 var(--kite-typography-lg-body-display-margin-bottom); } } blockquote, .kite-blockquote { border-left: var(--kite-blockquote-border-left-color) var(--kite-blockquote-border-left-style) var(--kite-blockquote-border-left-width); margin-bottom: var(--kite-blockquote-margin-bottom); padding: var(--kite-blockquote-padding-top) var(--kite-blockquote-padding-right) var(--kite-blockquote-padding-bottom) var(--kite-blockquote-padding-left); } .kite-blockquote__footer { color: var(--kite-blockquote-cite-color); display: block; font-size: var(--kite-blockquote-cite-text-size); } .kite-blockquote__footer::before { content: var(--kite-blockquote-cite-punctuation); } mark, .kite-mark { background-color: var(--kite-color-yellow-10); } abbr[title] { border-bottom: 0; cursor: help; text-decoration: underline; text-decoration: underline dotted; } body, .kite-body { font-size: var(--kite-typography-body-size); font-weight: var(--kite-typography-body-weight); font-style: var(--kite-typography-body-style); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); margin: 0 0 var(--kite-typography-body-margin-bottom); } @media only screen and (min-width: 37.5rem) { body, .kite-body { font-size: var(--kite-typography-lg-body-size); font-weight: var(--kite-typography-lg-body-weight); letter-spacing: var(--kite-typography-lg-body-letter-spacing); line-height: var(--kite-typography-lg-body-line-height); margin: 0 0 var(--kite-typography-lg-body-margin-bottom); } } body, .kite-body { background-color: var(--kite-color-background); color: var(--kite-color-text); font-family: "Spectrum Sans", Rutledge, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:focus, .kite-body:focus { outline: none; } body { margin: 0; } .kite-container, .kite-container--fluid, .kite-container--full-overflow { margin-right: auto; margin-left: auto; padding: 0 var(--kite-grid-xs-margins); width: 100%; } @media only screen and (min-width: 52.5rem) { .kite-container, .kite-container--fluid, .kite-container--full-overflow { padding: 0 var(--kite-grid-lg-margins); } } .kite-container { max-width: 80rem; } .kite-container--full-overflow { margin-right: -50vw; margin-left: -50vw; position: relative; right: 50%; left: 50%; width: 100vw; } .kite-grid { display: flex; flex-wrap: wrap; } .kite-cell { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; } .kite-cell > .kite-card { height: 100%; } .kite-grid { margin: 0 calc(var(--kite-grid-xs-gutters) / -2); } @media only screen and (min-width: 30rem) { .kite-grid { margin: 0 calc(var(--kite-grid-sm-gutters) / -2); } } @media only screen and (min-width: 37.5rem) { .kite-grid { margin: 0 calc(var(--kite-grid-md-gutters) / -2); } } @media only screen and (min-width: 52.5rem) { .kite-grid { margin: 0 calc(var(--kite-grid-lg-gutters) / -2); } } @media only screen and (min-width: 60rem) { .kite-grid { margin: 0 calc(var(--kite-grid-xl-gutters) / -2); } } @media only screen and (min-width: 80rem) { .kite-grid { margin: 0 calc(var(--kite-grid-xxl-gutters) / -2); } } .kite-grid > .kite-cell { padding: calc(var(--kite-grid-xs-gutters) / 2); } @media only screen and (min-width: 30rem) { .kite-grid > .kite-cell { padding: calc(var(--kite-grid-sm-gutters) / 2); } } @media only screen and (min-width: 37.5rem) { .kite-grid > .kite-cell { padding: calc(var(--kite-grid-md-gutters) / 2); } } @media only screen and (min-width: 52.5rem) { .kite-grid > .kite-cell { padding: calc(var(--kite-grid-lg-gutters) / 2); } } @media only screen and (min-width: 60rem) { .kite-grid > .kite-cell { padding: calc(var(--kite-grid-xl-gutters) / 2); } } @media only screen and (min-width: 80rem) { .kite-grid > .kite-cell { padding: calc(var(--kite-grid-xxl-gutters) / 2); } } .kite-grid.kite-grid--no-gutters { margin: 0; } .kite-grid.kite-grid--no-gutters > .kite-cell { padding: 0; } .kite-cell-1, .kite-cell-1-xs.kite-cell-1-xs { flex: 0 0 25%; } .kite-cell-2, .kite-cell-2-xs.kite-cell-2-xs { flex: 0 0 50%; } .kite-cell-3, .kite-cell-3-xs.kite-cell-3-xs { flex: 0 0 75%; } .kite-cell-4, .kite-cell-4-xs { flex: 0 0 100%; } .kite-cell-5, .kite-cell-5-xs { flex: 0 0 100%; } .kite-cell-6, .kite-cell-6-xs { flex: 0 0 100%; } .kite-cell-7, .kite-cell-7-xs { flex: 0 0 100%; } .kite-cell-8, .kite-cell-8-xs { flex: 0 0 100%; } .kite-cell-9, .kite-cell-9-xs { flex: 0 0 100%; } .kite-cell-10, .kite-cell-10-xs { flex: 0 0 100%; } .kite-cell-11, .kite-cell-11-xs { flex: 0 0 100%; } .kite-cell-12, .kite-cell-12-xs { flex: 0 0 100%; } .kite-cell-flex { flex: 1; } @media only screen and (min-width: 30rem) { .kite-cell-1, .kite-cell-1-gt-xs.kite-cell-1-gt-xs { flex: 0 0 25%; } .kite-cell-2, .kite-cell-2-gt-xs.kite-cell-2-gt-xs { flex: 0 0 50%; } .kite-cell-3, .kite-cell-3-gt-xs.kite-cell-3-gt-xs { flex: 0 0 75%; } .kite-cell-4, .kite-cell-4-gt-xs { flex: 0 0 100%; } .kite-cell-5, .kite-cell-5-gt-xs { flex: 0 0 100%; } .kite-cell-6, .kite-cell-6-gt-xs { flex: 0 0 100%; } .kite-cell-7, .kite-cell-7-gt-xs { flex: 0 0 100%; } .kite-cell-8, .kite-cell-8-gt-xs { flex: 0 0 100%; } .kite-cell-9, .kite-cell-9-gt-xs { flex: 0 0 100%; } .kite-cell-10, .kite-cell-10-gt-xs { flex: 0 0 100%; } .kite-cell-11, .kite-cell-11-gt-xs { flex: 0 0 100%; } .kite-cell-12, .kite-cell-12-gt-xs { flex: 0 0 100%; } .kite-cell-flex-gt-xs.kite-cell-flex-gt-xs { flex: 1; } } @media only screen and (min-width: 37.5rem) { .kite-cell-1, .kite-cell-1-gt-sm.kite-cell-1-gt-sm { flex: 0 0 25%; } .kite-cell-2, .kite-cell-2-gt-sm.kite-cell-2-gt-sm { flex: 0 0 50%; } .kite-cell-3, .kite-cell-3-gt-sm.kite-cell-3-gt-sm { flex: 0 0 75%; } .kite-cell-4, .kite-cell-4-gt-sm { flex: 0 0 100%; } .kite-cell-5, .kite-cell-5-gt-sm { flex: 0 0 100%; } .kite-cell-6, .kite-cell-6-gt-sm { flex: 0 0 100%; } .kite-cell-7, .kite-cell-7-gt-sm { flex: 0 0 100%; } .kite-cell-8, .kite-cell-8-gt-sm { flex: 0 0 100%; } .kite-cell-9, .kite-cell-9-gt-sm { flex: 0 0 100%; } .kite-cell-10, .kite-cell-10-gt-sm { flex: 0 0 100%; } .kite-cell-11, .kite-cell-11-gt-sm { flex: 0 0 100%; } .kite-cell-12, .kite-cell-12-gt-sm { flex: 0 0 100%; } .kite-cell-flex-gt-sm.kite-cell-flex-gt-sm { flex: 1; } } @media only screen and (min-width: 52.5rem) { .kite-cell-1, .kite-cell-1-gt-md.kite-cell-1-gt-md { flex: 0 0 8.3333333333%; } .kite-cell-2, .kite-cell-2-gt-md.kite-cell-2-gt-md { flex: 0 0 16.6666666667%; } .kite-cell-3, .kite-cell-3-gt-md.kite-cell-3-gt-md { flex: 0 0 25%; } .kite-cell-4, .kite-cell-4-gt-md.kite-cell-4-gt-md { flex: 0 0 33.3333333333%; } .kite-cell-5, .kite-cell-5-gt-md.kite-cell-5-gt-md { flex: 0 0 41.6666666667%; } .kite-cell-6, .kite-cell-6-gt-md.kite-cell-6-gt-md { flex: 0 0 50%; } .kite-cell-7, .kite-cell-7-gt-md.kite-cell-7-gt-md { flex: 0 0 58.3333333333%; } .kite-cell-8, .kite-cell-8-gt-md.kite-cell-8-gt-md { flex: 0 0 66.6666666667%; } .kite-cell-9, .kite-cell-9-gt-md.kite-cell-9-gt-md { flex: 0 0 75%; } .kite-cell-10, .kite-cell-10-gt-md.kite-cell-10-gt-md { flex: 0 0 83.3333333333%; } .kite-cell-11, .kite-cell-11-gt-md.kite-cell-11-gt-md { flex: 0 0 91.6666666667%; } .kite-cell-12, .kite-cell-12-gt-md { flex: 0 0 100%; } .kite-cell-flex-gt-md.kite-cell-flex-gt-md { flex: 1; } } @media only screen and (min-width: 60rem) { .kite-cell-1, .kite-cell-1-gt-lg.kite-cell-1-gt-lg { flex: 0 0 8.3333333333%; } .kite-cell-2, .kite-cell-2-gt-lg.kite-cell-2-gt-lg { flex: 0 0 16.6666666667%; } .kite-cell-3, .kite-cell-3-gt-lg.kite-cell-3-gt-lg { flex: 0 0 25%; } .kite-cell-4, .kite-cell-4-gt-lg.kite-cell-4-gt-lg { flex: 0 0 33.3333333333%; } .kite-cell-5, .kite-cell-5-gt-lg.kite-cell-5-gt-lg { flex: 0 0 41.6666666667%; } .kite-cell-6, .kite-cell-6-gt-lg.kite-cell-6-gt-lg { flex: 0 0 50%; } .kite-cell-7, .kite-cell-7-gt-lg.kite-cell-7-gt-lg { flex: 0 0 58.3333333333%; } .kite-cell-8, .kite-cell-8-gt-lg.kite-cell-8-gt-lg { flex: 0 0 66.6666666667%; } .kite-cell-9, .kite-cell-9-gt-lg.kite-cell-9-gt-lg { flex: 0 0 75%; } .kite-cell-10, .kite-cell-10-gt-lg.kite-cell-10-gt-lg { flex: 0 0 83.3333333333%; } .kite-cell-11, .kite-cell-11-gt-lg.kite-cell-11-gt-lg { flex: 0 0 91.6666666667%; } .kite-cell-12, .kite-cell-12-gt-lg { flex: 0 0 100%; } .kite-cell-flex-gt-lg.kite-cell-flex-gt-lg { flex: 1; } } @media only screen and (min-width: 80rem) { .kite-cell-1, .kite-cell-1-gt-xl.kite-cell-1-gt-xl { flex: 0 0 8.3333333333%; } .kite-cell-2, .kite-cell-2-gt-xl.kite-cell-2-gt-xl { flex: 0 0 16.6666666667%; } .kite-cell-3, .kite-cell-3-gt-xl.kite-cell-3-gt-xl { flex: 0 0 25%; } .kite-cell-4, .kite-cell-4-gt-xl.kite-cell-4-gt-xl { flex: 0 0 33.3333333333%; } .kite-cell-5, .kite-cell-5-gt-xl.kite-cell-5-gt-xl { flex: 0 0 41.6666666667%; } .kite-cell-6, .kite-cell-6-gt-xl.kite-cell-6-gt-xl { flex: 0 0 50%; } .kite-cell-7, .kite-cell-7-gt-xl.kite-cell-7-gt-xl { flex: 0 0 58.3333333333%; } .kite-cell-8, .kite-cell-8-gt-xl.kite-cell-8-gt-xl { flex: 0 0 66.6666666667%; } .kite-cell-9, .kite-cell-9-gt-xl.kite-cell-9-gt-xl { flex: 0 0 75%; } .kite-cell-10, .kite-cell-10-gt-xl.kite-cell-10-gt-xl { flex: 0 0 83.3333333333%; } .kite-cell-11, .kite-cell-11-gt-xl.kite-cell-11-gt-xl { flex: 0 0 91.6666666667%; } .kite-cell-12, .kite-cell-12-gt-xl { flex: 0 0 100%; } .kite-cell-flex-gt-xl.kite-cell-flex-gt-xl { flex: 1; } } .kite-container-grid { display: flex; flex-wrap: wrap; container-type: inline-size; container-name: kite-grid-container; } .kite-container-cell { box-sizing: border-box; flex: 0 0 100%; max-width: 100%; } .kite-container-cell > .kite-card { height: 100%; } .kite-container-grid { margin: 0 calc(var(--kite-grid-xs-gutters) / -2); } @supports not (container-type: inline-size) { @media only screen and (min-width: 30rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-sm-gutters) / -2); } } } @container (min-width: 30rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-sm-gutters) / -2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 37.5rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-md-gutters) / -2); } } } @container (min-width: 37.5rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-md-gutters) / -2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 52.5rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-lg-gutters) / -2); } } } @container (min-width: 52.5rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-lg-gutters) / -2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 60rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-xl-gutters) / -2); } } } @container (min-width: 60rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-xl-gutters) / -2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 80rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-xxl-gutters) / -2); } } } @container (min-width: 80rem) { .kite-container-grid { margin: 0 calc(var(--kite-grid-xxl-gutters) / -2); } } .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-xs-gutters) / 2); } @supports not (container-type: inline-size) { @media only screen and (min-width: 30rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-sm-gutters) / 2); } } } @container (min-width: 30rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-sm-gutters) / 2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 37.5rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-md-gutters) / 2); } } } @container (min-width: 37.5rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-md-gutters) / 2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 52.5rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-lg-gutters) / 2); } } } @container (min-width: 52.5rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-lg-gutters) / 2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 60rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-xl-gutters) / 2); } } } @container (min-width: 60rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-xl-gutters) / 2); } } @supports not (container-type: inline-size) { @media only screen and (min-width: 80rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-xxl-gutters) / 2); } } } @container (min-width: 80rem) { .kite-container-grid > .kite-container-cell { padding: calc(var(--kite-grid-xxl-gutters) / 2); } } .kite-container-grid.kite-container-grid--no-gutters { margin: 0; } .kite-container-grid.kite-container-grid--no-gutters > .kite-container-cell { padding: 0; } .kite-container-cell-1, .kite-container-cell-1-xs.kite-container-cell-1-xs { flex: 0 0 25cqw; } .kite-container-cell-2, .kite-container-cell-2-xs.kite-container-cell-2-xs { flex: 0 0 50cqw; } .kite-container-cell-3, .kite-container-cell-3-xs.kite-container-cell-3-xs { flex: 0 0 75cqw; } .kite-container-cell-4, .kite-container-cell-4-xs { flex: 0 0 100cqw; } .kite-container-cell-5, .kite-container-cell-5-xs { flex: 0 0 100cqw; } .kite-container-cell-6, .kite-container-cell-6-xs { flex: 0 0 100cqw; } .kite-container-cell-7, .kite-container-cell-7-xs { flex: 0 0 100cqw; } .kite-container-cell-8, .kite-container-cell-8-xs { flex: 0 0 100cqw; } .kite-container-cell-9, .kite-container-cell-9-xs { flex: 0 0 100cqw; } .kite-container-cell-10, .kite-container-cell-10-xs { flex: 0 0 100cqw; } .kite-container-cell-11, .kite-container-cell-11-xs { flex: 0 0 100cqw; } .kite-container-cell-12, .kite-container-cell-12-xs { flex: 0 0 100cqw; } .kite-container-cell-flex { flex: 1; } @supports not (container-type: inline-size) { @media only screen and (min-width: 30rem) { .kite-container-cell-1, .kite-container-cell-1-gt-xs.kite-container-cell-1-gt-xs { flex: 0 0 25cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-xs.kite-container-cell-2-gt-xs { flex: 0 0 50cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-xs.kite-container-cell-3-gt-xs { flex: 0 0 75cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-xs.kite-container-cell-flex-gt-xs { flex: 1; } } } @container (min-width: 30rem) { .kite-container-cell-1, .kite-container-cell-1-gt-xs.kite-container-cell-1-gt-xs { flex: 0 0 25cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-xs.kite-container-cell-2-gt-xs { flex: 0 0 50cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-xs.kite-container-cell-3-gt-xs { flex: 0 0 75cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-xs { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-xs.kite-container-cell-flex-gt-xs { flex: 1; } } @supports not (container-type: inline-size) { @media only screen and (min-width: 37.5rem) { .kite-container-cell-1, .kite-container-cell-1-gt-sm.kite-container-cell-1-gt-sm { flex: 0 0 25cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-sm.kite-container-cell-2-gt-sm { flex: 0 0 50cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-sm.kite-container-cell-3-gt-sm { flex: 0 0 75cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-sm.kite-container-cell-flex-gt-sm { flex: 1; } } } @container (min-width: 37.5rem) { .kite-container-cell-1, .kite-container-cell-1-gt-sm.kite-container-cell-1-gt-sm { flex: 0 0 25cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-sm.kite-container-cell-2-gt-sm { flex: 0 0 50cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-sm.kite-container-cell-3-gt-sm { flex: 0 0 75cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-sm { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-sm.kite-container-cell-flex-gt-sm { flex: 1; } } @supports not (container-type: inline-size) { @media only screen and (min-width: 52.5rem) { .kite-container-cell-1, .kite-container-cell-1-gt-md.kite-container-cell-1-gt-md { flex: 0 0 8.3333333333cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-md.kite-container-cell-2-gt-md { flex: 0 0 16.6666666667cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-md.kite-container-cell-3-gt-md { flex: 0 0 25cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-md.kite-container-cell-4-gt-md { flex: 0 0 33.3333333333cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-md.kite-container-cell-5-gt-md { flex: 0 0 41.6666666667cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-md.kite-container-cell-6-gt-md { flex: 0 0 50cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-md.kite-container-cell-7-gt-md { flex: 0 0 58.3333333333cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-md.kite-container-cell-8-gt-md { flex: 0 0 66.6666666667cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-md.kite-container-cell-9-gt-md { flex: 0 0 75cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-md.kite-container-cell-10-gt-md { flex: 0 0 83.3333333333cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-md.kite-container-cell-11-gt-md { flex: 0 0 91.6666666667cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-md { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-md.kite-container-cell-flex-gt-md { flex: 1; } } } @container (min-width: 52.5rem) { .kite-container-cell-1, .kite-container-cell-1-gt-md.kite-container-cell-1-gt-md { flex: 0 0 8.3333333333cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-md.kite-container-cell-2-gt-md { flex: 0 0 16.6666666667cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-md.kite-container-cell-3-gt-md { flex: 0 0 25cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-md.kite-container-cell-4-gt-md { flex: 0 0 33.3333333333cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-md.kite-container-cell-5-gt-md { flex: 0 0 41.6666666667cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-md.kite-container-cell-6-gt-md { flex: 0 0 50cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-md.kite-container-cell-7-gt-md { flex: 0 0 58.3333333333cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-md.kite-container-cell-8-gt-md { flex: 0 0 66.6666666667cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-md.kite-container-cell-9-gt-md { flex: 0 0 75cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-md.kite-container-cell-10-gt-md { flex: 0 0 83.3333333333cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-md.kite-container-cell-11-gt-md { flex: 0 0 91.6666666667cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-md { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-md.kite-container-cell-flex-gt-md { flex: 1; } } @supports not (container-type: inline-size) { @media only screen and (min-width: 60rem) { .kite-container-cell-1, .kite-container-cell-1-gt-lg.kite-container-cell-1-gt-lg { flex: 0 0 8.3333333333cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-lg.kite-container-cell-2-gt-lg { flex: 0 0 16.6666666667cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-lg.kite-container-cell-3-gt-lg { flex: 0 0 25cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-lg.kite-container-cell-4-gt-lg { flex: 0 0 33.3333333333cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-lg.kite-container-cell-5-gt-lg { flex: 0 0 41.6666666667cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-lg.kite-container-cell-6-gt-lg { flex: 0 0 50cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-lg.kite-container-cell-7-gt-lg { flex: 0 0 58.3333333333cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-lg.kite-container-cell-8-gt-lg { flex: 0 0 66.6666666667cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-lg.kite-container-cell-9-gt-lg { flex: 0 0 75cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-lg.kite-container-cell-10-gt-lg { flex: 0 0 83.3333333333cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-lg.kite-container-cell-11-gt-lg { flex: 0 0 91.6666666667cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-lg { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-lg.kite-container-cell-flex-gt-lg { flex: 1; } } } @container (min-width: 60rem) { .kite-container-cell-1, .kite-container-cell-1-gt-lg.kite-container-cell-1-gt-lg { flex: 0 0 8.3333333333cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-lg.kite-container-cell-2-gt-lg { flex: 0 0 16.6666666667cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-lg.kite-container-cell-3-gt-lg { flex: 0 0 25cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-lg.kite-container-cell-4-gt-lg { flex: 0 0 33.3333333333cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-lg.kite-container-cell-5-gt-lg { flex: 0 0 41.6666666667cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-lg.kite-container-cell-6-gt-lg { flex: 0 0 50cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-lg.kite-container-cell-7-gt-lg { flex: 0 0 58.3333333333cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-lg.kite-container-cell-8-gt-lg { flex: 0 0 66.6666666667cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-lg.kite-container-cell-9-gt-lg { flex: 0 0 75cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-lg.kite-container-cell-10-gt-lg { flex: 0 0 83.3333333333cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-lg.kite-container-cell-11-gt-lg { flex: 0 0 91.6666666667cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-lg { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-lg.kite-container-cell-flex-gt-lg { flex: 1; } } @supports not (container-type: inline-size) { @media only screen and (min-width: 80rem) { .kite-container-cell-1, .kite-container-cell-1-gt-xl.kite-container-cell-1-gt-xl { flex: 0 0 8.3333333333cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-xl.kite-container-cell-2-gt-xl { flex: 0 0 16.6666666667cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-xl.kite-container-cell-3-gt-xl { flex: 0 0 25cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-xl.kite-container-cell-4-gt-xl { flex: 0 0 33.3333333333cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-xl.kite-container-cell-5-gt-xl { flex: 0 0 41.6666666667cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-xl.kite-container-cell-6-gt-xl { flex: 0 0 50cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-xl.kite-container-cell-7-gt-xl { flex: 0 0 58.3333333333cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-xl.kite-container-cell-8-gt-xl { flex: 0 0 66.6666666667cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-xl.kite-container-cell-9-gt-xl { flex: 0 0 75cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-xl.kite-container-cell-10-gt-xl { flex: 0 0 83.3333333333cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-xl.kite-container-cell-11-gt-xl { flex: 0 0 91.6666666667cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-xl { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-xl.kite-container-cell-flex-gt-xl { flex: 1; } } } @container (min-width: 80rem) { .kite-container-cell-1, .kite-container-cell-1-gt-xl.kite-container-cell-1-gt-xl { flex: 0 0 8.3333333333cqw; } .kite-container-cell-2, .kite-container-cell-2-gt-xl.kite-container-cell-2-gt-xl { flex: 0 0 16.6666666667cqw; } .kite-container-cell-3, .kite-container-cell-3-gt-xl.kite-container-cell-3-gt-xl { flex: 0 0 25cqw; } .kite-container-cell-4, .kite-container-cell-4-gt-xl.kite-container-cell-4-gt-xl { flex: 0 0 33.3333333333cqw; } .kite-container-cell-5, .kite-container-cell-5-gt-xl.kite-container-cell-5-gt-xl { flex: 0 0 41.6666666667cqw; } .kite-container-cell-6, .kite-container-cell-6-gt-xl.kite-container-cell-6-gt-xl { flex: 0 0 50cqw; } .kite-container-cell-7, .kite-container-cell-7-gt-xl.kite-container-cell-7-gt-xl { flex: 0 0 58.3333333333cqw; } .kite-container-cell-8, .kite-container-cell-8-gt-xl.kite-container-cell-8-gt-xl { flex: 0 0 66.6666666667cqw; } .kite-container-cell-9, .kite-container-cell-9-gt-xl.kite-container-cell-9-gt-xl { flex: 0 0 75cqw; } .kite-container-cell-10, .kite-container-cell-10-gt-xl.kite-container-cell-10-gt-xl { flex: 0 0 83.3333333333cqw; } .kite-container-cell-11, .kite-container-cell-11-gt-xl.kite-container-cell-11-gt-xl { flex: 0 0 91.6666666667cqw; } .kite-container-cell-12, .kite-container-cell-12-gt-xl { flex: 0 0 100cqw; } .kite-container-cell-flex-gt-xl.kite-container-cell-flex-gt-xl { flex: 1; } } fieldset { border: 0; margin: 0; min-width: 0; padding: 0; } .kite-icon { /** @deprecated: Use `--color` instead */ /** @since: v2.0.0 */ /** @prop --fill: Fill color of the icon. Deprecated: Use `--color` instead. */ --fill: currentColor; /** @prop --color: Color of the icon */ --color: var(--fill, currentColor); /** @prop --size: Width and Height of the icon */ --size: 1em; /** @prop --offset: inline icon vertical icon alignment */ --offset: 0; contain: strict; display: inline-block; position: relative; bottom: calc(var(--offset) * 0.1em); width: var(--size); height: var(--size); } .kite-icon--inline { --offset: 1; vertical-align: middle; } .kite-icon__inner { width: 100%; height: 100%; } .kite-icon__inner svg { display: block; fill: var(--color); width: 100%; height: 100%; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-icon__inner svg { fill: currentColor; } } .kite-payment-logo { contain: strict; display: inline-block; position: relative; width: var(--kite-payment-logo-width); height: var(--kite-payment-logo-height); } .kite-payment-logo--inline { vertical-align: middle; } .kite-payment-logo__inner { width: 100%; height: 100%; } .kite-payment-logo__inner img, .kite-payment-logo__inner svg { display: block; width: 100%; height: 100%; } :root { --pi: 3.1415926536; } .kite-assistive-text, .kite-visually-hidden { border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; } .kite-assistive-text--focusable:active, .kite-assistive-text--focusable:focus, .kite-visually-hidden--focusable:active, .kite-visually-hidden--focusable:focus { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; } .kite-display-none { display: none; } .kite-display-inline { display: inline; } .kite-display-inline-block { display: inline-block; } .kite-display-block { display: block; } .kite-display-table { display: table; } .kite-display-table-cell { display: table-cell; } .kite-display-flex { display: flex; } .kite-display-inline-flex { display: inline-flex; } @media only screen and (min-width: 30rem) { .kite-display-none-gt-sm { display: none; } .kite-display-inline-gt-sm { display: inline; } .kite-display-inline-block-gt-sm { display: inline-block; } .kite-display-block-gt-sm { display: block; } .kite-display-table-gt-sm { display: table; } .kite-display-table-cell-gt-sm { display: table-cell; } .kite-display-flex-gt-sm { display: flex; } .kite-display-inline-flex-gt-sm { display: inline-flex; } } @media only screen and (min-width: 37.5rem) { .kite-display-none-gt-md { display: none; } .kite-display-inline-gt-md { display: inline; } .kite-display-inline-block-gt-md { display: inline-block; } .kite-display-block-gt-md { display: block; } .kite-display-table-gt-md { display: table; } .kite-display-table-cell-gt-md { display: table-cell; } .kite-display-flex-gt-md { display: flex; } .kite-display-inline-flex-gt-md { display: inline-flex; } } @media only screen and (min-width: 52.5rem) { .kite-display-none-gt-lg { display: none; } .kite-display-inline-gt-lg { display: inline; } .kite-display-inline-block-gt-lg { display: inline-block; } .kite-display-block-gt-lg { display: block; } .kite-display-table-gt-lg { display: table; } .kite-display-table-cell-gt-lg { display: table-cell; } .kite-display-flex-gt-lg { display: flex; } .kite-display-inline-flex-gt-lg { display: inline-flex; } } @media only screen and (min-width: 60rem) { .kite-display-none-gt-xl { display: none; } .kite-display-inline-gt-xl { display: inline; } .kite-display-inline-block-gt-xl { display: inline-block; } .kite-display-block-gt-xl { display: block; } .kite-display-table-gt-xl { display: table; } .kite-display-table-cell-gt-xl { display: table-cell; } .kite-display-flex-gt-xl { display: flex; } .kite-display-inline-flex-gt-xl { display: inline-flex; } } .kite-accordion { /** @prop --background-color-hover: Background color of row on hover */ --background-color-hover: var(--kite-accordion-hover-background-color); /** @prop --border-color: Bottom border-color */ --border-color: var(--kite-accordion-border-color); /** @prop --icon-color: Show/hide icon color */ --icon-color: var(--kite-accordion-icon-color); /** @prop --icon-color-disabled: Show/hide icon color in disabled state */ --icon-color-disabled: var(--kite-accordion-disabled-icon-color); /** @prop --title-color: Text color of title text */ --title-color: var(--kite-accordion-title-text-color); /** @prop --title-color-disabled: Text color of title text in disabled state */ --title-color-disabled: var(--kite-accordion-disabled-title-text-color); /** @prop --label-color: Text color of label text */ --label-color: var(--kite-accordion-label-text-color); /** @prop --label-color-disabled: Text color of label text in disabled state */ --label-color-disabled: var(--kite-accordion-disabled-label-text-color); } ul.kite-accordion { list-style: none; margin: 0; padding: 0; } ul.kite-accordion > li { line-height: inherit; margin: 0; padding: 0; } .kite-accordion-row { border-bottom: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); width: 100%; overflow: hidden; } .kite-accordion-row > h1, .kite-accordion-row > h2, .kite-accordion-row > h3, .kite-accordion-row > h4, .kite-accordion-row > h5, .kite-accordion-row > h6 { font-size: unset; margin: 0; } .kite-accordion-row > h1, .kite-accordion-row > h2, .kite-accordion-row > h3, .kite-accordion-row > h4, .kite-accordion-row > h5, .kite-accordion-row > h6 { font-size: unset; margin: 0; } .kite-accordion-row:first-of-type { border-top: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); } .kite-accordion-row__button { background-color: transparent; border: 0; cursor: var(--kite-accordion-cursor); font-size: var(--kite-accordion-title-text-size); line-height: var(--kite-accordion-title-text-line-height); padding: var(--kite-accordion-padding-top) 0 var(--kite-accordion-padding-bottom) 0; position: relative; width: var(--kite-accordion-trigger-width); height: 100%; } .kite-accordion-row__button.kite-hover:enabled, .kite-accordion-row__button:hover:enabled { background-color: var(--background-color-hover); } .kite-accordion-row__button.kite-focus-visible, .kite-accordion-row__button:focus-visible { outline: none; } .kite-accordion-row__button.kite-focus-visible::after, .kite-accordion-row__button:focus-visible::after { border: var(--kite-accordion-focus-ring-width) var(--kite-accordion-focus-ring-style) var(--kite-accordion-focus-ring-color); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .kite-accordion-row__button:disabled { cursor: var(--kite-accordion-disabled-cursor); } .kite-accordion-row__button:disabled .kite-title { color: var(--title-color-disabled); } .kite-accordion-row__button:disabled .kite-accordion-row__label { color: var(--label-color-disabled); } .kite-accordion-row__button:disabled .kite-accordion-row__icon .kite-icon { --color: var(--icon-color-disabled); } .kite-accordion-row__button-inner { align-items: center; display: flex; padding: 0 var(--kite-accordion-icon-padding-right) 0 var(--kite-accordion-title-padding-left); height: 100%; } .kite-accordion-row .kite-title { color: var(--title-color); font-weight: var(--kite-accordion-title-text-weight); flex-grow: 1; text-align: left; } .kite-accordion-row__label { color: var(--label-color); font-weight: var(--kite-accordion-label-text-weight); margin-right: var(--kite-accordion-label-margin-right); margin-left: var(--kite-accordion-label-margin-left); } .kite-accordion-row__label--alert, .kite-accordion-row__label--negative { color: var(--kite-accordion-negative-label-text-color); } .kite-accordion-row__label--success, .kite-accordion-row__label--positive { color: var(--kite-accordion-positive-label-text-color); } .kite-accordion-row__icon { --icon-size: var(--kite-accordion-icon-width); transition: transform var(--kite-accordion-icon-transition-duration) var(--kite-accordion-icon-transition-timing-function); width: var(--icon-size); height: var(--icon-size); } .kite-accordion-row__icon .kite-icon { --color: var(--icon-color); } @media (prefers-reduced-motion) { .kite-accordion-row__icon { transition-property: none; } } .kite-accordion-row__content-window { --max-height: 0; max-height: var(--max-height); overflow: hidden; } .kite-accordion-row__content { --opacity: 0; opacity: var(--opacity); display: none; text-align: left; padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-expanded-padding-right) var(--kite-accordion-expanded-padding-bottom) var(--kite-accordion-expanded-padding-left); } .kite-accordion-row__content > :last-child { margin-bottom: 0; } .kite-accordion-row__content-window--transitioning { transition: all var(--kite-accordion-expanded-transition-duration) var(--kite-accordion-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-accordion-row__content-window--transitioning { transition-property: none; } } .kite-accordion-row__content-window--transitioning .kite-accordion-row__content { transition: all var(--kite-accordion-expanded-transition-duration) var(--kite-accordion-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-accordion-row__content-window--transitioning .kite-accordion-row__content { transition-property: none; } } .kite-accordion-row--active .kite-accordion-row__content, .kite-accordion-row--expanded .kite-accordion-row__content { display: block; } .kite-accordion-row--active .kite-accordion-row__icon, .kite-accordion-row--expanded .kite-accordion-row__icon { transform: rotate(-180deg); } .kite-accordion--rules-top .kite-accordion-row { border-top: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); border-bottom: 0; } .kite-accordion--rules-bottom .kite-accordion-row:first-of-type { border-top: 0; } .kite-accordion--rules-none .kite-accordion-row { border-bottom: 0; } .kite-accordion--rules-none .kite-accordion-row:first-of-type { border-top: 0; } .kite-accordion--in-card { padding-left: 0; } .kite-accordion--in-card .kite-accordion-row { border-bottom: 0; border-top: 0; position: relative; } .kite-accordion--in-card .kite-accordion-row::before { border-bottom: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); content: ""; overflow: visible; position: absolute; bottom: 0; left: 0; } .kite-accordion--in-card .kite-accordion-row:last-child::before { border-bottom: 0; } .kite-accordion--in-card .kite-accordion-row__button--padding-sm { padding: var(--kite-accordion-padding-top-sm) var(--kite-accordion-padding-right-sm) var(--kite-accordion-padding-bottom-sm) var(--kite-accordion-padding-left-sm); } .kite-accordion--in-card .kite-accordion-row__button--padding-md { padding: var(--kite-accordion-padding-top-md) var(--kite-accordion-padding-right-md) var(--kite-accordion-padding-bottom-md) var(--kite-accordion-padding-left-md); } .kite-accordion--in-card .kite-accordion-row__button--padding-lg { padding: var(--kite-accordion-padding-top-lg) var(--kite-accordion-padding-right-lg) var(--kite-accordion-padding-bottom-lg) var(--kite-accordion-padding-left-lg); } .kite-accordion--in-card .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-sm); margin-left: var(--kite-accordion-padding-left-sm); width: calc(100% - var(--kite-accordion-padding-left-sm) - var(--kite-accordion-padding-right-sm)); } .kite-accordion--in-card .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-sm) var(--kite-accordion-padding-right-sm) var(--kite-accordion-padding-bottom-sm) var(--kite-accordion-padding-left-sm); } .kite-accordion--in-card .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-sm) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-sm) + var(--kite-accordion-title-padding-left)); } @media only screen and (min-width: 37.5rem) { .kite-accordion--in-card .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-md); margin-left: var(--kite-accordion-padding-left-md); width: calc(100% - var(--kite-accordion-padding-left-md) - var(--kite-accordion-padding-right-md)); } .kite-accordion--in-card .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-md) var(--kite-accordion-padding-right-md) var(--kite-accordion-padding-bottom-md) var(--kite-accordion-padding-left-md); } .kite-accordion--in-card .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-md) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-md) + var(--kite-accordion-title-padding-left)); } } @media only screen and (min-width: 52.5rem) { .kite-accordion--in-card .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-lg); margin-left: var(--kite-accordion-padding-left-lg); width: calc(100% - var(--kite-accordion-padding-left-lg) - var(--kite-accordion-padding-right-lg)); } .kite-accordion--in-card .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-lg) var(--kite-accordion-padding-right-lg) var(--kite-accordion-padding-bottom-lg) var(--kite-accordion-padding-left-lg); } .kite-accordion--in-card .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-lg) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-lg) + var(--kite-accordion-title-padding-left)); } } .kite-accordion--in-card.kite-accordion--padding-sm .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-sm); margin-left: var(--kite-accordion-padding-left-sm); width: calc(100% - var(--kite-accordion-padding-left-sm) - var(--kite-accordion-padding-right-sm)); } .kite-accordion--in-card.kite-accordion--padding-sm .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-sm) var(--kite-accordion-padding-right-sm) var(--kite-accordion-padding-bottom-sm) var(--kite-accordion-padding-left-sm); } .kite-accordion--in-card.kite-accordion--padding-sm .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-sm) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-sm) + var(--kite-accordion-title-padding-left)); } .kite-accordion--in-card.kite-accordion--padding-md .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-md); margin-left: var(--kite-accordion-padding-left-md); width: calc(100% - var(--kite-accordion-padding-left-md) - var(--kite-accordion-padding-right-md)); } .kite-accordion--in-card.kite-accordion--padding-md .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-md) var(--kite-accordion-padding-right-md) var(--kite-accordion-padding-bottom-md) var(--kite-accordion-padding-left-md); } .kite-accordion--in-card.kite-accordion--padding-md .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-md) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-md) + var(--kite-accordion-title-padding-left)); } .kite-accordion--in-card.kite-accordion--padding-lg .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-lg); margin-left: var(--kite-accordion-padding-left-lg); width: calc(100% - var(--kite-accordion-padding-left-lg) - var(--kite-accordion-padding-right-lg)); } .kite-accordion--in-card.kite-accordion--padding-lg .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-lg) var(--kite-accordion-padding-right-lg) var(--kite-accordion-padding-bottom-lg) var(--kite-accordion-padding-left-lg); } .kite-accordion--in-card.kite-accordion--padding-lg .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-lg) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-lg) + var(--kite-accordion-title-padding-left)); } .kite-accordion { /** @prop --background-color-hover: Background color of row on hover */ --background-color-hover: var(--kite-accordion-hover-background-color); /** @prop --border-color: Bottom border-color */ --border-color: var(--kite-accordion-border-color); /** @prop --icon-color: Show/hide icon color */ --icon-color: var(--kite-accordion-icon-color); /** @prop --icon-color-disabled: Show/hide icon color in disabled state */ --icon-color-disabled: var(--kite-accordion-disabled-icon-color); /** @prop --title-color: Text color of title text */ --title-color: var(--kite-accordion-title-text-color); /** @prop --title-color-disabled: Text color of title text in disabled state */ --title-color-disabled: var(--kite-accordion-disabled-title-text-color); /** @prop --label-color: Text color of label text */ --label-color: var(--kite-accordion-label-text-color); /** @prop --label-color-disabled: Text color of label text in disabled state */ --label-color-disabled: var(--kite-accordion-disabled-label-text-color); } ul.kite-accordion { list-style: none; margin: 0; padding: 0; } ul.kite-accordion > li { line-height: inherit; margin: 0; padding: 0; } .kite-accordion-row { border-bottom: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); width: 100%; overflow: hidden; } .kite-accordion-row > h1, .kite-accordion-row > h2, .kite-accordion-row > h3, .kite-accordion-row > h4, .kite-accordion-row > h5, .kite-accordion-row > h6 { font-size: unset; margin: 0; } .kite-accordion-row > h1, .kite-accordion-row > h2, .kite-accordion-row > h3, .kite-accordion-row > h4, .kite-accordion-row > h5, .kite-accordion-row > h6 { font-size: unset; margin: 0; } .kite-accordion-row:first-of-type { border-top: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); } .kite-accordion-row__button { background-color: transparent; border: 0; cursor: var(--kite-accordion-cursor); font-size: var(--kite-accordion-title-text-size); line-height: var(--kite-accordion-title-text-line-height); padding: var(--kite-accordion-padding-top) 0 var(--kite-accordion-padding-bottom) 0; position: relative; width: var(--kite-accordion-trigger-width); height: 100%; } .kite-accordion-row__button.kite-hover:enabled, .kite-accordion-row__button:hover:enabled { background-color: var(--background-color-hover); } .kite-accordion-row__button.kite-focus-visible, .kite-accordion-row__button:focus-visible { outline: none; } .kite-accordion-row__button.kite-focus-visible::after, .kite-accordion-row__button:focus-visible::after { border: var(--kite-accordion-focus-ring-width) var(--kite-accordion-focus-ring-style) var(--kite-accordion-focus-ring-color); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .kite-accordion-row__button:disabled { cursor: var(--kite-accordion-disabled-cursor); } .kite-accordion-row__button:disabled .kite-title { color: var(--title-color-disabled); } .kite-accordion-row__button:disabled .kite-accordion-row__label { color: var(--label-color-disabled); } .kite-accordion-row__button:disabled .kite-accordion-row__icon .kite-icon { --color: var(--icon-color-disabled); } .kite-accordion-row__button-inner { align-items: center; display: flex; padding: 0 var(--kite-accordion-icon-padding-right) 0 var(--kite-accordion-title-padding-left); height: 100%; } .kite-accordion-row .kite-title { color: var(--title-color); font-weight: var(--kite-accordion-title-text-weight); flex-grow: 1; text-align: left; } .kite-accordion-row__label { color: var(--label-color); font-weight: var(--kite-accordion-label-text-weight); margin-right: var(--kite-accordion-label-margin-right); margin-left: var(--kite-accordion-label-margin-left); } .kite-accordion-row__label--alert, .kite-accordion-row__label--negative { color: var(--kite-accordion-negative-label-text-color); } .kite-accordion-row__label--success, .kite-accordion-row__label--positive { color: var(--kite-accordion-positive-label-text-color); } .kite-accordion-row__icon { --icon-size: var(--kite-accordion-icon-width); transition: transform var(--kite-accordion-icon-transition-duration) var(--kite-accordion-icon-transition-timing-function); width: var(--icon-size); height: var(--icon-size); } .kite-accordion-row__icon .kite-icon { --color: var(--icon-color); } @media (prefers-reduced-motion) { .kite-accordion-row__icon { transition-property: none; } } .kite-accordion-row__content-window { --max-height: 0; max-height: var(--max-height); overflow: hidden; } .kite-accordion-row__content { --opacity: 0; opacity: var(--opacity); display: none; text-align: left; padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-expanded-padding-right) var(--kite-accordion-expanded-padding-bottom) var(--kite-accordion-expanded-padding-left); } .kite-accordion-row__content > :last-child { margin-bottom: 0; } .kite-accordion-row__content-window--transitioning { transition: all var(--kite-accordion-expanded-transition-duration) var(--kite-accordion-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-accordion-row__content-window--transitioning { transition-property: none; } } .kite-accordion-row__content-window--transitioning .kite-accordion-row__content { transition: all var(--kite-accordion-expanded-transition-duration) var(--kite-accordion-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-accordion-row__content-window--transitioning .kite-accordion-row__content { transition-property: none; } } .kite-accordion-row--active .kite-accordion-row__content, .kite-accordion-row--expanded .kite-accordion-row__content { display: block; } .kite-accordion-row--active .kite-accordion-row__icon, .kite-accordion-row--expanded .kite-accordion-row__icon { transform: rotate(-180deg); } .kite-accordion--rules-top .kite-accordion-row { border-top: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); border-bottom: 0; } .kite-accordion--rules-bottom .kite-accordion-row:first-of-type { border-top: 0; } .kite-accordion--rules-none .kite-accordion-row { border-bottom: 0; } .kite-accordion--rules-none .kite-accordion-row:first-of-type { border-top: 0; } .kite-accordion--in-card { padding-left: 0; } .kite-accordion--in-card .kite-accordion-row { border-bottom: 0; border-top: 0; position: relative; } .kite-accordion--in-card .kite-accordion-row::before { border-bottom: var(--kite-accordion-border-width) var(--kite-accordion-border-style) var(--border-color); content: ""; overflow: visible; position: absolute; bottom: 0; left: 0; } .kite-accordion--in-card .kite-accordion-row:last-child::before { border-bottom: 0; } .kite-accordion--in-card .kite-accordion-row__button--padding-sm { padding: var(--kite-accordion-padding-top-sm) var(--kite-accordion-padding-right-sm) var(--kite-accordion-padding-bottom-sm) var(--kite-accordion-padding-left-sm); } .kite-accordion--in-card .kite-accordion-row__button--padding-md { padding: var(--kite-accordion-padding-top-md) var(--kite-accordion-padding-right-md) var(--kite-accordion-padding-bottom-md) var(--kite-accordion-padding-left-md); } .kite-accordion--in-card .kite-accordion-row__button--padding-lg { padding: var(--kite-accordion-padding-top-lg) var(--kite-accordion-padding-right-lg) var(--kite-accordion-padding-bottom-lg) var(--kite-accordion-padding-left-lg); } .kite-accordion--in-card .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-sm); margin-left: var(--kite-accordion-padding-left-sm); width: calc(100% - var(--kite-accordion-padding-left-sm) - var(--kite-accordion-padding-right-sm)); } .kite-accordion--in-card .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-sm) var(--kite-accordion-padding-right-sm) var(--kite-accordion-padding-bottom-sm) var(--kite-accordion-padding-left-sm); } .kite-accordion--in-card .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-sm) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-sm) + var(--kite-accordion-title-padding-left)); } @media only screen and (min-width: 37.5rem) { .kite-accordion--in-card .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-md); margin-left: var(--kite-accordion-padding-left-md); width: calc(100% - var(--kite-accordion-padding-left-md) - var(--kite-accordion-padding-right-md)); } .kite-accordion--in-card .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-md) var(--kite-accordion-padding-right-md) var(--kite-accordion-padding-bottom-md) var(--kite-accordion-padding-left-md); } .kite-accordion--in-card .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-md) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-md) + var(--kite-accordion-title-padding-left)); } } @media only screen and (min-width: 52.5rem) { .kite-accordion--in-card .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-lg); margin-left: var(--kite-accordion-padding-left-lg); width: calc(100% - var(--kite-accordion-padding-left-lg) - var(--kite-accordion-padding-right-lg)); } .kite-accordion--in-card .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-lg) var(--kite-accordion-padding-right-lg) var(--kite-accordion-padding-bottom-lg) var(--kite-accordion-padding-left-lg); } .kite-accordion--in-card .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-lg) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-lg) + var(--kite-accordion-title-padding-left)); } } .kite-accordion--in-card.kite-accordion--padding-sm .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-sm); margin-left: var(--kite-accordion-padding-left-sm); width: calc(100% - var(--kite-accordion-padding-left-sm) - var(--kite-accordion-padding-right-sm)); } .kite-accordion--in-card.kite-accordion--padding-sm .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-sm) var(--kite-accordion-padding-right-sm) var(--kite-accordion-padding-bottom-sm) var(--kite-accordion-padding-left-sm); } .kite-accordion--in-card.kite-accordion--padding-sm .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-sm) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-sm) + var(--kite-accordion-title-padding-left)); } .kite-accordion--in-card.kite-accordion--padding-md .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-md); margin-left: var(--kite-accordion-padding-left-md); width: calc(100% - var(--kite-accordion-padding-left-md) - var(--kite-accordion-padding-right-md)); } .kite-accordion--in-card.kite-accordion--padding-md .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-md) var(--kite-accordion-padding-right-md) var(--kite-accordion-padding-bottom-md) var(--kite-accordion-padding-left-md); } .kite-accordion--in-card.kite-accordion--padding-md .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-md) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-md) + var(--kite-accordion-title-padding-left)); } .kite-accordion--in-card.kite-accordion--padding-lg .kite-accordion-row::before { margin-right: var(--kite-accordion-padding-right-lg); margin-left: var(--kite-accordion-padding-left-lg); width: calc(100% - var(--kite-accordion-padding-left-lg) - var(--kite-accordion-padding-right-lg)); } .kite-accordion--in-card.kite-accordion--padding-lg .kite-accordion-row__button { padding: var(--kite-accordion-padding-top-lg) var(--kite-accordion-padding-right-lg) var(--kite-accordion-padding-bottom-lg) var(--kite-accordion-padding-left-lg); } .kite-accordion--in-card.kite-accordion--padding-lg .kite-accordion-row__content { padding: var(--kite-accordion-expanded-padding-top) var(--kite-accordion-padding-right-lg) var(--kite-accordion-expanded-padding-bottom) calc(var(--kite-accordion-padding-left-lg) + var(--kite-accordion-title-padding-left)); } .kite-accordion-row .kite-title .kite-icon { margin-top: var(--kite-icon-inline-offset); vertical-align: middle; } .kite-alert { /** @prop --dismiss-icon-color: Close icon color */ --dismiss-icon-color: var(--kite-alert-dismiss-icon-color); /** @prop --global-caution-background-color: Global caution background color */ --global-caution-background-color: var(--kite-alert-global-caution-background-color); /** @prop --global-caution-status-icon-color: Global caution indicator icon color */ --global-caution-status-icon-color: var(--kite-alert-global-caution-status-icon-color); /** @prop --global-caution-link-text-color: Global caution link text color */ --global-caution-link-text-color: var(--kite-alert-global-caution-link-text-color); /** @prop --global-caution-text-color: Global caution text color */ --global-caution-text-color: var(--kite-alert-global-caution-text-color); /** @prop --global-negative-background-color: Global negative background color */ --global-negative-background-color: var(--kite-alert-global-negative-background-color); /** @prop --global-negative-status-icon-color: Global negative status icon color */ --global-negative-status-icon-color: var(--kite-alert-global-negative-status-icon-color); /** @prop --global-negative-link-text-color: Global negative link text color */ --global-negative-link-text-color: var(--kite-alert-global-negative-link-text-color); /** @prop --global-negative-text-color: Global negative text color */ --global-negative-text-color: var(--kite-alert-global-negative-text-color); /** @prop --global-neutral-text-color: Global neutral text color */ --global-neutral-text-color: var(--kite-alert-global-neutral-text-color); /** @prop --global-neutral-background-color: Global neutral background color */ --global-neutral-background-color: var(--kite-alert-global-neutral-background-color); /** @prop --global-neutral-status-icon-color: Global neutral indicator icon color */ --global-neutral-status-icon-color: var(--kite-alert-global-neutral-status-icon-color); /** @prop --global-neutral-link-text-color: Global neutral link text color */ --global-neutral-link-text-color: var(--kite-alert-global-neutral-link-text-color); /** @prop --page-background-color: Page background color */ --page-background-color: var(--kite-alert-background-color); /** @prop --page-border-color: Page border color */ --page-border-color: var(--kite-alert-border-color); /** @prop --page-link-text-color: Page link text color */ --page-link-text-color: var(--kite-alert-link-text-color); /** @prop --page-text-color: Page text color */ --page-text-color: var(--kite-alert-text-color); /** @prop --page-caution-border-left-color: Page caution border left color */ --page-caution-border-left-color: var(--kite-alert-caution-border-left-color); /** @prop --page-caution-status-icon-color: Page caution indicator icon color */ --page-caution-status-icon-color: var(--kite-alert-caution-status-icon-color); /** @prop --page-negative-border-left-color: Page negative border left color */ --page-negative-border-left-color: var(--kite-alert-negative-border-left-color); /** @prop --page-negative-status-icon-color: Page negative indicator icon color */ --page-negative-status-icon-color: var(--kite-alert-negative-status-icon-color); /** @deprecated: Use `--page-neutral-border-left-color` instead */ /** @since: v2.0.0 */ /** @prop --page-info-border-left-color: Page neutral border left color. Deprecated: Use `--page-neutral-border-left-color` instead. */ --page-info-border-left-color: var(--kite-alert-neutral-border-left-color); /** @prop --page-neutral-border-left-color: Page neutral border left color */ --page-neutral-border-left-color: var(--page-info-border-left-color, --kite-alert-neutral-border-left-color); /** @deprecated: Use `--page-neutral-status-icon-color` instead */ /** @since: v2.0.0 */ /** @prop --page-info-status-icon-color: Page neutral indicator icon color. Deprecated: Use `--page-neutral-status-icon-color` instead. */ --page-info-status-icon-color: var(--kite-alert-neutral-status-icon-color); /** @prop --page-neutral-status-icon-color: Page neutral indicator icon color. */ --page-neutral-status-icon-color: var(--page-info-status-icon-color, var(--kite-alert-neutral-status-icon-color)); /** @prop --page-positive-border-left-color: Page positive border left color */ --page-positive-border-left-color: var(--kite-alert-positive-border-left-color); /** @prop --page-positive-status-icon-color: Page positive indicator icon color */ --page-positive-status-icon-color: var(--kite-alert-positive-status-icon-color); } .kite-alert { --global-background-color: var(--global-neutral-background-color); --global-icon-color: var(--global-neutral-status-icon-color); --global-link-text-color: var(--global-neutral-link-text-color); --global-link-icon-color: var(--kite-alert-global-neutral-link-icon-color); --global-text-color: var(--global-neutral-text-color); --page-icon-color: var(--page-neutral-status-icon-color); --page-border-left-color: var(--page-neutral-border-left-color); --passive-background-color: var(--kite-alert-passive-neutral-background-color); --passive-border-color: var(--kite-alert-passive-neutral-border-color); --passive-icon-color: var(--kite-alert-passive-neutral-status-icon-color); --kite-button-margin-top: var(--kite-spacing-xs); --kite-button-focus-ring-color: var(--kite-alert-focus-ring-color); --kite-button-secondary-text-color: var(--kite-color-primary); --kite-button-secondary-border-color: var(--kite-color-primary); --kite-button-secondary-hover-background-color: var(--kite-color-blue-30); --kite-button-secondary-hover-text-color: var(--kite-color-white); --kite-button-secondary-press-background-color: var(--kite-color-blue-30); --kite-button-secondary-press-text-color: var(--kite-color-white); --kite-button-secondary-focus-background-color: var(--kite-color-blue-30); --kite-button-secondary-focus-text-color: var(--kite-color-white); --kite-button-secondary-disabled-text-color: var(--kite-color-gray-25); --kite-button-secondary-disabled-border-color: var(--kite-color-gray-25); --kite-link-text-color: var(--page-link-text-color); --kite-link-hover-text-color: var(--kite-color-dark-blue-10); --kite-link-focus-text-color: var(--page-link-text-color); --kite-link-press-text-color: var(--kite-color-dark-blue-20); --kite-link-visited-text-color: var(--kite-color-dark-blue-10); --kite-link-standalone-icon-color: var(--kite-alert-link-icon-color); --kite-link-standalone-hover-icon-color: var(--kite-color-dark-blue-10); --kite-link-standalone-focus-icon-color: var(--kite-alert-link-icon-color); --kite-link-standalone-press-icon-color: var(--kite-color-dark-blue-20); --kite-link-standalone-visited-icon-color: var(--kite-color-dark-blue-10); border-width: var(--kite-alert-border-width); } .kite-alert--caution { --global-background-color: var(--global-caution-background-color); --global-icon-color: var(--global-caution-status-icon-color); --global-link-text-color: var(--global-caution-link-text-color); --global-link-icon-color: var(--kite-alert-global-caution-link-icon-color); --global-text-color: var(--global-caution-text-color); --page-icon-color: var(--page-caution-status-icon-color); --page-border-left-color: var(--page-caution-border-left-color); --passive-background-color: var(--kite-alert-passive-caution-background-color); --passive-border-color: var(--kite-alert-passive-caution-border-color); --passive-icon-color: var(--kite-alert-passive-caution-status-icon-color); } .kite-alert--error, .kite-alert--negative { --global-background-color: var(--global-negative-background-color); --global-icon-color: var(--global-negative-status-icon-color); --global-link-text-color: var(--global-negative-link-text-color); --global-link-icon-color: var(--kite-alert-global-negative-link-icon-color); --global-text-color: var(--global-negative-text-color); --page-icon-color: var(--page-negative-status-icon-color); --page-border-left-color: var(--page-negative-border-left-color); --passive-background-color: var(--kite-alert-passive-negative-background-color); --passive-border-color: var(--kite-alert-passive-negative-border-color); --passive-icon-color: var(--kite-alert-passive-negative-status-icon-color); } .kite-alert--error.kite-alert--global, .kite-alert--negative.kite-alert--global { --kite-button-secondary-hover-text-color: var(--kite-color-black); --kite-button-secondary-press-text-color: var(--kite-color-black); --kite-button-secondary-focus-text-color: var(--kite-color-black); } .kite-alert--success, .kite-alert--positive { --page-icon-color: var(--page-positive-status-icon-color); --page-border-left-color: var(--page-positive-border-left-color); --passive-background-color: var(--kite-alert-passive-positive-background-color); --passive-border-color: var(--kite-alert-passive-positive-border-color); --passive-icon-color: var(--kite-alert-passive-positive-status-icon-color); } .kite-alert--global { --kite-button-focus-ring-color: var(--kite-alert-global-focus-ring-color); --kite-button-secondary-text-color: var(--global-text-color); } .kite-alert--passive { --kite-button-secondary-text-color: var(--kite-alert-text-color); } .kite-alert--global, .kite-alert--passive { --kite-button-secondary-border-color: var(--kite-button-secondary-text-color); --kite-button-secondary-hover-background-color: var(--kite-button-secondary-text-color); --kite-button-secondary-hover-text-color: var(--kite-color-white); --kite-button-secondary-press-background-color: var(--kite-button-secondary-text-color); --kite-button-secondary-press-text-color: var(--kite-color-white); --kite-button-secondary-focus-background-color: var(--kite-button-secondary-text-color); --kite-button-secondary-focus-text-color: var(--kite-color-white); --kite-button-secondary-disabled-text-color: var(--kite-button-secondary-text-color); --kite-button-secondary-disabled-border-color: var(--kite-button-secondary-border-color); } .kite-alert { background-color: var(--page-background-color); border-color: var(--page-border-color); border-radius: var(--kite-alert-border-radius); border-style: var(--kite-alert-border-style); box-shadow: var(--kite-alert-elevation); color: var(--page-text-color); display: none; flex-direction: column; font-size: var(--kite-alert-text-size); font-weight: var(--kite-alert-text-weight); padding: var(--kite-alert-padding-top) var(--kite-alert-padding-right) var(--kite-alert-padding-bottom) calc(var(--kite-alert-padding-left) + var(--kite-alert-border-left-width)); text-align: var(--kite-alert-text-align); position: relative; } .kite-alert:not(:first-child) { margin-top: var(--kite-alert-stacked-margin-top); } .kite-alert::before { background-color: var(--page-border-left-color); border-radius: var(--kite-alert-border-radius) 0 0 var(--kite-alert-border-radius); content: ""; position: absolute; top: calc(var(--kite-alert-border-width) * -1); bottom: calc(var(--kite-alert-border-width) * -1); left: calc(var(--kite-alert-border-width) * -1); width: var(--kite-alert-border-left-width); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-alert::before { background-color: CanvasText; } } .kite-alert--active, .kite-alert--activated { display: flex; } .kite-alert__inner { display: flex; flex-grow: 1; } .kite-alert__message { flex-grow: 1; } .kite-alert__link, .kite-alert__action { display: block; margin-top: var(--kite-alert-link-margin-top); margin-left: calc(var(--kite-alert-status-icon-width) + var(--kite-alert-status-icon-margin-right)); } .kite-alert .kite-link.kite-focus-visible, .kite-alert .kite-link:focus-visible { outline-color: var(--kite-alert-focus-ring-color); } .kite-alert__dismiss-button { background-color: transparent; border: 0; cursor: var(--kite-alert-dismiss-icon-cursor); flex-shrink: 0; font-size: 0; margin-right: var(--kite-alert-dismiss-icon-margin-right); margin-left: var(--kite-alert-dismiss-icon-margin-left); padding: 0; width: var(--kite-alert-dismiss-icon-width); height: var(--kite-alert-dismiss-icon-height); } .kite-alert__dismiss-button.kite-focus-visible, .kite-alert__dismiss-button:focus-visible { outline-color: var(--kite-alert-focus-ring-color); } .kite-alert__dismiss-button .kite-alert__icon { width: var(--kite-alert-dismiss-icon-width); } .kite-alert__dismiss-button .kite-alert__icon .kite-icon { --color: var(--dismiss-icon-color); } .kite-alert__icon { color: var(--page-icon-color); flex-shrink: 0; margin-right: var(--kite-alert-status-icon-margin-right); width: var(--kite-alert-status-icon-width); height: var(--kite-alert-status-icon-height); } .kite-alert__icon .kite-icon { --size: var(--kite-alert-status-icon-height); } .kite-alert--global::before { content: none; } .kite-alert--global.kite-alert--error .kite-alert__dismiss-button .kite-icon, .kite-alert--global.kite-alert--negative .kite-alert__dismiss-button .kite-icon { --color: var(--global-negative-status-icon-color); } .kite-alert--global { background-color: var(--global-background-color); border: 1px solid transparent; border-radius: 0; box-shadow: none; color: var(--global-text-color); font-size: var(--kite-alert-text-size); margin-bottom: 0; padding: var(--kite-alert-global-padding-top) var(--kite-alert-global-padding-right) var(--kite-alert-global-padding-bottom) var(--kite-alert-global-padding-left); width: 100%; } .kite-alert--global .kite-alert__icon { color: var(--global-icon-color); margin-right: var(--kite-alert-global-status-icon-margin-right); } .kite-alert--global .kite-alert__link, .kite-alert--global .kite-alert__action { margin-left: calc(var(--kite-alert-status-icon-width) + var(--kite-alert-global-status-icon-margin-right)); } .kite-alert--global .kite-alert__link .kite-link, .kite-alert--global .kite-alert__action .kite-link { color: var(--global-link-text-color); --icon-color: var(--global-link-icon-color); } .kite-alert--global .kite-link.kite-focus-visible, .kite-alert--global .kite-link:focus-visible, .kite-alert--global .kite-alert__dismiss-button.kite-focus-visible, .kite-alert--global .kite-alert__dismiss-button:focus-visible { outline-color: var(--kite-alert-global-focus-ring-color); } .kite-alert--passive { --translate: 0px, 0px; background-color: var(--passive-background-color); border-color: var(--passive-border-color); border-radius: var(--kite-alert-passive-border-radius); box-shadow: var(--kite-alert-passive-elevation); padding: var(--kite-alert-passive-padding-top) var(--kite-alert-passive-padding-right) var(--kite-alert-passive-padding-bottom) var(--kite-alert-passive-padding-left); transform: translate(var(--translate)); transition: transform var(--kite-alert-passive-transition-duration) var(--kite-alert-passive-entry-transition-timing-function), visibility var(--kite-alert-passive-transition-duration) var(--kite-alert-passive-entry-transition-timing-function); min-width: var(--kite-alert-passive-min-width); } @media only screen and (min-width: 52.5rem) { .kite-alert--passive { max-width: var(--kite-alert-passive-breakpoint-lg-max-width); width: fit-content; } } .kite-alert--passive::before { content: none; } .kite-alert--passive .kite-alert__icon { color: var(--passive-icon-color); margin-right: var(--kite-alert-passive-status-icon-margin-right); } .kite-alert--passive .kite-alert__dismiss-button { margin-left: var(--kite-alert-passive-dismiss-icon-margin-left); } .kite-alert--passive .kite-alert__title { display: block; font-size: var(--kite-alert-passive-title-text-size); font-weight: var(--kite-alert-passive-title-text-weight); letter-spacing: var(--kite-alert-passive-title-letter-spacing); line-height: var(--kite-alert-passive-title-line-height); margin-bottom: var(--kite-alert-passive-title-margin-bottom); } .kite-alert--passive .kite-alert__link, .kite-alert--passive .kite-alert__action { margin-left: calc(var(--kite-alert-status-icon-width) + var(--kite-alert-passive-status-icon-margin-right)); } .kite-alert--passive .kite-alert__link .kite-link, .kite-alert--passive .kite-alert__action .kite-link { color: var(--kite-alert-passive-link-text-color); --icon-color: var(--kite-alert-passive-link-text-color); } .kite-alert--passive:not(.kite-alert-region *), .kite-alert-region--passive { margin: var(--kite-alert-passive-margin-top) var(--kite-alert-passive-margin-right) var(--kite-alert-passive-margin-bottom) var(--kite-alert-passive-margin-left); position: fixed; top: auto; right: var(--kite-alert-passive-offset-x); bottom: var(--kite-alert-passive-offset-y); left: var(--kite-alert-passive-offset-x); z-index: var(--kite-alert-passive-zindex); } @media only screen and (min-width: 52.5rem) { .kite-alert--passive:not(.kite-alert-region *), .kite-alert-region--passive { margin: var(--kite-alert-passive-breakpoint-lg-margin-top) var(--kite-alert-passive-breakpoint-lg-margin-right) var(--kite-alert-passive-breakpoint-lg-margin-bottom) var(--kite-alert-passive-breakpoint-lg-margin-left); top: var(--kite-alert-passive-breakpoint-lg-offset-y); right: var(--kite-alert-passive-breakpoint-lg-offset-x); bottom: auto; left: auto; } } @media only screen and (min-width: 52.5rem) { .kite-alert-region--passive { display: flex; flex-direction: column; align-items: flex-end; } } .rk--attached-overlay { z-index: var(--kite-dialog-zindex); } .kite-badge { --badge-offset-horizontal: -1em; --badge-offset-vertical: -1em; --badge-offset-baseline: 0.08em; --badge-size-sm: var(--kite-badge-sm-width); --badge-radius: var(--kite-badge-border-radius); --badge-border-width: var(--kite-badge-border-width); --badge-border-style: var(--kite-badge-border-style); --badge-border-color: var(--kite-badge-border-color); /** @prop --badge-background: Background color of the Badge */ --badge-background: var(--kite-badge-background-color); /** @prop --badge-color: Text color of the Badge */ --badge-color: var(--kite-badge-text-color); --badge-background-disabled: var(--kite-badge-disabled-background-color); --badge-color-disabled: var(--kite-badge-disabled-text-color); } .kite-badge { align-items: center; background-color: var(--badge-background); border: var(--badge-border-width) var(--badge-border-style) var(--badge-border-color); border-radius: var(--badge-radius); color: var(--badge-color); display: inline-flex; font-size: var(--kite-badge-text-size); font-weight: var(--kite-badge-text-weight); justify-content: center; line-height: 1; margin: var(--kite-badge-margin-top) var(--kite-badge-margin-right) var(--kite-badge-margin-bottom) var(--kite-badge-margin-left); height: var(--kite-badge-height); min-width: var(--kite-badge-min-width); overflow: hidden; padding: var(--kite-badge-padding-top) var(--kite-badge-padding-right) var(--kite-badge-padding-bottom) var(--kite-badge-padding-left); text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .kite-badge:empty, .kite-badge--sm { --badge-offset-horizontal: calc((var(--badge-size-sm) / 2) * -1); --badge-offset-vertical: calc(var(--badge-border-width) + 1px); min-width: auto; padding: 0; width: var(--badge-size-sm); height: var(--badge-size-sm); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-badge:empty, .kite-badge--sm { border-width: calc(var(--badge-size-sm) / 2); } } .kite-badge--top, .kite-badge--right, .kite-badge--bottom, .kite-badge--left { margin: 0; position: absolute; } .kite-badge--top { top: var(--badge-offset-vertical); } .kite-badge--right { right: var(--badge-offset-horizontal); } .kite-badge--bottom { bottom: var(--badge-offset-vertical); } .kite-badge--left { left: var(--badge-offset-horizontal); } .kite-badge--disabled { background-color: var(--badge-background-disabled); color: var(--badge-color-disabled); } .kite-badge--inline { margin: 0; position: relative; bottom: var(--badge-offset-baseline); } .kite-badge__container { display: inline-flex; align-items: center; gap: var(--kite-badge-margin-left); } .kite-badge__container .kite-badge { margin: 0; } .rk-badge-container { --rk-badge-center-offset-sm: 0.5rem; --rk-badge-center-offset-md: 1rem; --rk-badge-center-offset: var(--rk-badge-center-offset-md); display: inline-block; position: relative; } .rk-badge-container .rk-badge { vertical-align: top; } .rk-badge-container .rk-badge--align-center { align-self: center; } .kite-badge--sm { --rk-badge-center-offset: var(--rk-badge-center-offset-sm); } .rk-badge-container--flex { display: flex; } .kite-badge--left.rk-badge--align-center { left: calc(var(--badge-offset-horizontal) - var(--rk-badge-center-offset)); } .kite-badge--right.rk-badge--align-center { right: calc(var(--badge-offset-horizontal) - var(--rk-badge-center-offset)); } .kite-button.kite-button--fullwidth-to-shrinkwrap { width: 100%; } @media only screen and (min-width: 30rem) { .kite-button.kite-button--fullwidth-to-shrinkwrap { width: auto; } } .kite-button { /** @prop --background: Background of the button */ --background: var(--kite-button-primary-background-color); /** @prop --background-press: Background of the button when pressed */ --background-press: var(--kite-button-primary-press-background-color); /** @prop --background-disabled: Background of the button when disabled */ --background-disabled: var(--kite-button-primary-disabled-background-color); /** @deprecated: Use `--kite-button-primary-focus-background-color` instead */ /** @since: v2.0.0 */ /** @prop --background-focused: Background of the button when focused with the tab key. Deprecated: Use `--kite-button-primary-focus-background-color` instead. */ --background-focused: var(--kite-button-primary-focus-background-color); /** @prop --background-focus: Background of the button when focused with the tab key */ --background-focus: var(--background-focused, var(--kite-button-primary-focus-background-color)); /** @prop --background-hover: Background of the button on hover */ --background-hover: var(--kite-button-primary-hover-background-color); /** @prop --border-color: Border color of the button */ --border-color: var(--kite-button-primary-border-color); /** @prop --border-color-press: Border color of the button when pressed */ --border-color-press: var(--kite-button-primary-press-border-color); /** @prop --border-color-disabled: Border color of button when disabled */ --border-color-disabled: var(--kite-button-primary-disabled-border-color); /** @deprecated: Use `--kite-button-primary-focus-border-color` instead */ /** @since: v2.0.0 */ /** @prop --border-color-focused: Border color of button when focused. Deprecated: Use `--kite-button-primary-focus-border-color` instead. */ --border-color-focused: var(--kite-button-primary-focus-border-color); /** @prop --border-color-focus: Border color of button when focused */ --border-color-focus: var(--border-color-focused, var(--kite-button-primary-focus-border-color)); /** @prop --border-color-hover: Border color of button when hover */ --border-color-hover: var(--kite-button-primary-hover-border-color); /** @prop --border-radius: Border radius of the button */ --border-radius: var(--kite-button-border-radius); /** @prop --border-style: Border style of the button */ --border-style: var(--kite-button-primary-border-style); /** @prop --border-width: Border width of the button */ --border-width: var(--kite-button-primary-border-width); /** @prop --color: Text color of the button */ --color: var(--kite-button-primary-text-color); /** @prop --color-press: Text color of the button when pressed */ --color-press: var(--kite-button-primary-press-text-color); /** @prop --color-disabled: Text color of the button when disabled */ --color-disabled: var(--kite-button-primary-disabled-text-color); /** @deprecated: Use `--kite-button-primary-focus-text-color` instead */ /** @since: v2.0.0 */ /** @prop --color-focused: Text color of the button when focused with the tab key. Deprecated: Use `--kite-button-primary-focus-text-color` instead. */ --color-focused: var(--kite-button-primary-focus-text-color); /** @prop --color-focus: Text color of the button when focused with the tab key */ --color-focus: var(--color-focused, var(--kite-button-primary-focus-text-color)); /** @prop --color-hover: Text color of the button when hover */ --color-hover: var(--kite-button-primary-hover-text-color); /** @prop --cursor: Cursor to display on hover */ --cursor: var(--kite-button-cursor); /** @prop --cursor-disabled: Cursor to display on hover, when button is disabled */ --cursor-disabled: var(--kite-button-disabled-cursor); /** @prop --font-family: Font family of the button */ --font-family: inherit; /** @prop --kite-button-font-size: Font size of the button */ --font-size: var(--kite-button-text-size); /** @prop --font-weight: Font weight of the button */ --font-weight: var(--kite-button-text-weight); /** @prop --height: Height of the button */ --height: var(--kite-button-height); /** @prop --icon-margin: Left/right margin of the icon */ --icon-margin: var(--kite-button-icon-margin); /** @prop --icon-size: Width of the icon */ --icon-size: var(--kite-button-icon-width); --icon-color: var(--kite-button-icon-color); --icon-color-press: var(--kite-button-press-icon-color); --icon-color-disabled: var(--kite-button-disabled-icon-color); --icon-color-focus: var(--kite-button-focus-icon-color); --icon-color-hover: var(--kite-button-hover-icon-color); /** @prop --line-height: Line-height of the button */ --line-height: var(--kite-button-text-line-height); /** @prop --margin-top: Top margin of the button */ --margin-top: var(--kite-button-margin-top); /** @prop --margin-right: Right margin of the button */ --margin-right: var(--kite-button-margin-right); /** @prop --margin-bottom: Bottom margin of the button */ --margin-bottom: var(--kite-button-margin-bottom); /** @prop --margin-left: Left margin of the button */ --margin-left: var(--kite-button-margin-left); /** @prop --padding-top: Top padding of the button */ --padding-top: var(--kite-button-padding-top); /** @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button */ --padding-start: var(--kite-button-padding-left, 20px); /** @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button */ --padding-end: var(--kite-button-padding-right, 20px); /** @prop --padding-bottom: Bottom padding of the button */ --padding-bottom: var(--kite-button-padding-bottom); /** @prop --transition: Transition of the button */ --transition: background-color var(--kite-motion-duration-fastest) var(--kite-motion-standard), border-color var(--kite-motion-duration-fastest) var(--kite-motion-standard); /** @prop --width: Width of the button */ --width: var(--kite-button-width); --width-breakpoint-sm: 100%; --focus-ring-color: var(--kite-button-focus-ring-color); --focus-ring-offset: calc((var(--border-width) + var(--focus-ring-width) + var(--kite-button-focus-ring-offset)) * -1); --focus-ring-radius: var(--kite-button-focus-ring-radius); --focus-ring-style: var(--kite-button-focus-ring-style); --focus-ring-width: var(--kite-button-focus-ring-width); --kite-progress-indicator-button-fill-color: var(--color); } .kite-button--secondary { --background: var(--kite-button-secondary-background-color); --background-press: var(--kite-button-secondary-press-background-color); --background-disabled: var(--kite-button-secondary-disabled-background-color); --background-focus: var(--kite-button-secondary-focus-background-color); --background-hover: var(--kite-button-secondary-hover-background-color); --border-color: var(--kite-button-secondary-border-color); --border-color-press: var(--kite-button-secondary-press-border-color); --border-color-disabled: var(--kite-button-secondary-disabled-border-color); --border-color-focus: var(--kite-button-secondary-focus-border-color); --border-color-hover: var(--kite-button-secondary-hover-border-color); --color: var(--kite-button-secondary-text-color); --color-press: var(--kite-button-secondary-press-text-color); --color-disabled: var(--kite-button-secondary-disabled-text-color); --color-focus: var(--kite-button-secondary-focus-text-color); --color-hover: var(--kite-button-secondary-hover-text-color); --icon-color: var(--kite-button-secondary-icon-color); --icon-color-press: var(--kite-button-secondary-press-icon-color); --icon-color-disabled: var(--kite-button-secondary-disabled-icon-color); --icon-color-focus: var(--kite-button-secondary-focus-icon-color); --icon-color-hover: var(--kite-button-secondary-hover-icon-color); } .kite-button--borderless { --background: var(--kite-button-borderless-background-color); --background-press: var(--kite-button-borderless-press-background-color); --background-disabled: var(--kite-button-borderless-disabled-background-color); --background-focus: var(--kite-button-borderless-focus-background-color); --background-hover: var(--kite-button-borderless-hover-background-color); --border-color: var(--kite-button-borderless-border-color); --border-color-press: var(--kite-button-borderless-press-border-color); --border-color-disabled: var(--kite-button-borderless-disabled-border-color); --border-color-focus: var(--kite-button-borderless-focus-border-color); --border-color-hover: var(--kite-button-borderless-hover-border-color); --color: var(--kite-button-borderless-text-color); --color-press: var(--kite-button-borderless-press-text-color); --color-disabled: var(--kite-button-borderless-disabled-text-color); --color-focus: var(--kite-button-borderless-focus-text-color); --color-hover: var(--kite-button-borderless-hover-text-color); --icon-color: var(--kite-button-borderless-icon-color); --icon-color-press: var(--kite-button-borderless-press-icon-color); --icon-color-disabled: var(--kite-button-borderless-disabled-icon-color); --icon-color-focus: var(--kite-button-borderless-focus-icon-color); --icon-color-hover: var(--kite-button-borderless-hover-icon-color); } .kite-button--destructive { --focus-ring-color: var(--kite-button-destructive-focus-ring-color); --background: var(--kite-button-primary-destructive-background-color); --background-press: var(--kite-button-primary-destructive-press-background-color); --background-disabled: var(--kite-button-primary-destructive-disabled-background-color); --background-focus: var(--kite-button-primary-destructive-focus-background-color); --background-hover: var(--kite-button-primary-destructive-hover-background-color); --border-color: var(--kite-button-primary-destructive-border-color); --border-color-press: var(--kite-button-primary-destructive-press-border-color); --border-color-disabled: var(--kite-button-primary-destructive-disabled-border-color); --border-color-focus: var(--kite-button-primary-destructive-focus-border-color); --border-color-hover: var(--kite-button-primary-destructive-hover-border-color); --color: var(--kite-button-primary-destructive-text-color); --color-press: var(--kite-button-primary-destructive-press-text-color); --color-disabled: var(--kite-button-primary-destructive-disabled-text-color); --color-focus: var(--kite-button-primary-destructive-focus-text-color); --color-hover: var(--kite-button-primary-destructive-hover-text-color); --icon-color: var(--kite-button-primary-destructive-icon-color); --icon-color-press: var(--kite-button-primary-destructive-press-icon-color); --icon-color-disabled: var(--kite-button-primary-destructive-disabled-icon-color); --icon-color-focus: var(--kite-button-primary-destructive-focus-icon-color); --icon-color-hover: var(--kite-button-primary-destructive-hover-icon-color); } .kite-button--destructive.kite-button--secondary { --background: var(--kite-button-secondary-destructive-background-color); --background-press: var(--kite-button-secondary-destructive-press-background-color); --background-disabled: var(--kite-button-secondary-destructive-disabled-background-color); --background-focus: var(--kite-button-secondary-destructive-focus-background-color); --background-hover: var(--kite-button-secondary-destructive-hover-background-color); --border-color: var(--kite-button-secondary-destructive-border-color); --border-color-press: var(--kite-button-secondary-destructive-press-border-color); --border-color-disabled: var(--kite-button-secondary-destructive-disabled-border-color); --border-color-focus: var(--kite-button-secondary-destructive-focus-border-color); --border-color-hover: var(--kite-button-secondary-destructive-hover-border-color); --color: var(--kite-button-secondary-destructive-text-color); --color-press: var(--kite-button-secondary-destructive-press-text-color); --color-disabled: var(--kite-button-secondary-destructive-disabled-text-color); --color-focus: var(--kite-button-secondary-destructive-focus-text-color); --color-hover: var(--kite-button-secondary-destructive-hover-text-color); --icon-color: var(--kite-button-secondary-destructive-icon-color); --icon-color-press: var(--kite-button-secondary-destructive-press-icon-color); --icon-color-disabled: var(--kite-button-secondary-destructive-disabled-icon-color); --icon-color-focus: var(--kite-button-secondary-destructive-focus-icon-color); --icon-color-hover: var(--kite-button-secondary-destructive-hover-icon-color); } .kite-button--destructive.kite-button--borderless { --background: var(--kite-button-borderless-destructive-background-color); --background-press: var(--kite-button-borderless-destructive-press-background-color); --background-disabled: var(--kite-button-borderless-destructive-disabled-background-color); --background-focus: var(--kite-button-borderless-destructive-focus-background-color); --background-hover: var(--kite-button-borderless-destructive-hover-background-color); --border-color: var(--kite-button-borderless-destructive-border-color); --border-color-press: var(--kite-button-borderless-destructive-press-border-color); --border-color-disabled: var(--kite-button-borderless-destructive-disabled-border-color); --border-color-focus: var(--kite-button-borderless-destructive-focus-border-color); --border-color-hover: var(--kite-button-borderless-destructive-hover-border-color); --color: var(--kite-button-borderless-destructive-text-color); --color-press: var(--kite-button-borderless-destructive-press-text-color); --color-disabled: var(--kite-button-borderless-destructive-disabled-text-color); --color-focus: var(--kite-button-borderless-destructive-focus-text-color); --color-hover: var(--kite-button-borderless-destructive-hover-text-color); --icon-color: var(--kite-button-borderless-destructive-icon-color); --icon-color-press: var(--kite-button-borderless-destructive-press-icon-color); --icon-color-disabled: var(--kite-button-borderless-destructive-disabled-icon-color); --icon-color-focus: var(--kite-button-borderless-destructive-focus-icon-color); --icon-color-hover: var(--kite-button-borderless-destructive-hover-icon-color); } .kite-button { background: var(--background); border: var(--border-width) var(--border-style) var(--border-color); border-radius: var(--border-radius); color: var(--color); cursor: var(--cursor); display: block; font-family: var(--font-family); font-size: var(--font-size); font-weight: var(--font-weight); line-height: var(--line-height); margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left); padding: calc(var(--padding-top) - var(--border-width)) var(--padding-end) calc(var(--padding-bottom) - var(--border-width)) var(--padding-start); position: relative; text-align: var(--kite-button-text-align); text-decoration: none; transition: var(--transition); user-select: none; width: var(--width); height: auto; min-height: var(--height); } @media only screen and (min-width: 30rem) { .kite-button { display: inline-block; vertical-align: middle; width: var(--width-breakpoint-sm); } } .kite-button--shrinkwrap { width: var(--kite-button-shrinkwrap-width); } .kite-button--sm { min-width: var(--kite-button-shrinkwrap-min-width-sm); } .kite-button--md { min-width: var(--kite-button-shrinkwrap-min-width-md); } .kite-button--lg { min-width: var(--kite-button-shrinkwrap-min-width-lg); } .kite-button--xl { min-width: var(--kite-button-shrinkwrap-min-width-xl); } .kite-button::before { border: 0 var(--focus-ring-style) transparent; border-radius: var(--focus-ring-radius); content: ""; position: absolute; top: var(--focus-ring-offset); right: var(--focus-ring-offset); bottom: var(--focus-ring-offset); left: var(--focus-ring-offset); transition: var(--transition); } .kite-button.kite-focus-visible, .kite-button:focus-visible { background-color: var(--background-focus); border-color: var(--border-color-focus); --color: var(--color-focus); outline: 0; } .kite-button.kite-focus-visible::before, .kite-button:focus-visible::before { border-color: var(--focus-ring-color); border-width: var(--focus-ring-width); } .kite-button.kite-focus-visible .kite-icon, .kite-button:focus-visible .kite-icon { --color: var(--icon-color-focus); } .kite-button.kite-hover, .kite-button:hover { background-color: var(--background-hover); border-color: var(--border-color-hover); --color: var(--color-hover); } .kite-button.kite-hover .kite-icon, .kite-button:hover .kite-icon { --color: var(--icon-color-hover); } .kite-button.kite-active, .kite-button:active { background-color: var(--background-press); border-color: var(--border-color-press); --color: var(--color-press); } .kite-button.kite-active .kite-icon, .kite-button:active .kite-icon { --color: var(--icon-color-press); } .kite-button.kite-disabled, .kite-button:disabled { background-color: var(--background-disabled); border-color: var(--border-color-disabled); --color: var(--color-disabled); cursor: var(--cursor-disabled); } @media screen and (-ms-high-contrast: active) { .kite-button.kite-disabled, .kite-button:disabled { background-color: transparent; } } .kite-button.kite-disabled .kite-icon, .kite-button:disabled .kite-icon { --color: var(--icon-color-disabled); } .kite-button__inner { align-items: center; display: flex; flex-flow: row nowrap; flex-shrink: 0; justify-content: center; position: relative; width: 100%; height: 100%; gap: var(--icon-margin); } .kite-button .kite-icon { --color: var(--icon-color); font-size: var(--icon-size); pointer-events: none; } .kite-button--icon-only { padding-left: var(--kite-button-icon-only-padding-left); padding-right: var(--kite-button-icon-only-padding-right); } a.kite-button:hover, .kite-button--anchor:hover { text-decoration: none; } a.kite-button.kite-button--disabled, .kite-button--anchor.kite-button--disabled { background-color: var(--background-disabled); border-color: var(--border-color-disabled); --color: var(--color-disabled); } .kite-button.kite-button--fullwidth-to-shrinkwrap { width: 100%; } @media only screen and (min-width: 30rem) { .kite-button.kite-button--fullwidth-to-shrinkwrap { width: auto; } } .kite-card { /** @prop --background: Background of the card */ --background: var(--kite-card-background-color); /** @prop --border: Border shorthand property for the card */ --border: var(--kite-card-border-width) var(--kite-card-border-style) var(--border-color); /** @prop --border-color: Border color of the card */ --border-color: var(--kite-card-border-color); /** @prop --border-radius: Border radius of the card */ --border-radius: var(--kite-card-border-radius); /** @prop --padding-top-sm: Padding top <=600px viewport */ --padding-top-sm: var(--kite-card-padding-top-sm); /** @prop --padding-right-sm: Padding right <=600px viewport */ --padding-right-sm: var(--kite-card-padding-right-sm); /** @prop --padding-bottom-sm: Padding bottom <=600px viewport */ --padding-bottom-sm: var(--kite-card-padding-bottom-sm); /** @prop --padding-left-sm: Padding left <=600px viewport */ --padding-left-sm: var(--kite-card-padding-left-sm); /** @prop --padding-top-md: Padding top 601px - 839px viewport */ --padding-top-md: var(--kite-card-padding-top-md); /** @prop --padding-right-md: Padding right 601px - 839px viewport */ --padding-right-md: var(--kite-card-padding-right-md); /** @prop --padding-bottom-md: Padding bottom 601px - 839px viewport */ --padding-bottom-md: var(--kite-card-padding-bottom-md); /** @prop --padding-left-md: Padding left 601px - 839px viewport */ --padding-left-md: var(--kite-card-padding-left-md); /** @prop --padding-top-lg: Padding top >=840px viewport */ --padding-top-lg: var(--kite-card-padding-top-lg); /** @prop --padding-right-lg: Padding right >=840px viewport */ --padding-right-lg: var(--kite-card-padding-right-lg); /** @prop --padding-bottom-lg: Padding bottom >=840px viewport */ --padding-bottom-lg: var(--kite-card-padding-bottom-lg); /** @prop --padding-left-lg: Padding left >=840px viewport */ --padding-left-lg: var(--kite-card-padding-left-lg); } .kite-card { background-color: var(--background); border: var(--border); border-radius: var(--border-radius); padding: var(--padding-top-sm) var(--padding-right-sm) var(--padding-bottom-sm) var(--padding-left-sm); text-align: left; } @media only screen and (min-width: 37.5rem) { .kite-card { padding: var(--padding-top-md) var(--padding-right-md) var(--padding-bottom-md) var(--padding-left-md); } } @media only screen and (min-width: 52.5rem) { .kite-card { padding: var(--padding-top-lg) var(--padding-right-lg) var(--padding-bottom-lg) var(--padding-left-lg); } } .kite-card--elevation-1 { box-shadow: var(--kite-elevation-1); } .kite-card--elevation-2 { box-shadow: var(--kite-elevation-2); } .kite-card--elevation-3 { box-shadow: var(--kite-elevation-3); } .kite-card--elevation-4 { box-shadow: var(--kite-elevation-4); } .kite-card--reset-padding { padding: 0; } .kite-cell > .kite-card--reset-height { height: auto; } .kite-checkbox { --focus-ring-offset: calc(((var(--kite-checkbox-focus-ring-width) * 2) + var(--kite-checkbox-focus-ring-offset)) * -1); --background-color: var(--kite-checkbox-background-color); --hover-background-color: var(--kite-checkbox-hover-background-color); --border-color: var(--kite-checkbox-border-color); --label-text-color: var(--kite-checkbox-label-text-color); --icon-color: var(--kite-checkbox-selected-icon-color); --focus-ring-color: var(--kite-checkbox-focus-ring-color); --selected-background-color: var(--kite-checkbox-selected-background-color); --selected-disabled-background-color: var(--kite-checkbox-selected-disabled-background-color); --indeterminate-background-color: var(--kite-checkbox-indeterminate-background-color); --indeterminate-disabled-background-color: var(--kite-checkbox-indeterminate-disabled-background-color); --disabled-border-color: var(--kite-checkbox-disabled-border-color); --disabled-label-text-color: var(--kite-checkbox-disabled-label-text-color); --disabled-icon-color: var(--kite-checkbox-disabled-icon-color); } .kite-checkbox { display: flex; flex-direction: column; margin: var(--kite-checkbox-margin-top) var(--kite-checkbox-margin-right) var(--kite-checkbox-margin-bottom) var(--kite-checkbox-margin-left); } .kite-checkbox__label { display: flex; align-items: flex-start; position: relative; font-size: var(--kite-checkbox-label-text-size); font-weight: var(--kite-checkbox-label-text-weight); user-select: none; } .kite-checkbox__control { opacity: 0; position: absolute; z-index: -1; width: 100%; height: 100%; } .kite-checkbox__control.kite-focus-visible ~ .kite-checkbox__indicator::before, .kite-checkbox__control:focus-visible ~ .kite-checkbox__indicator::before { border: var(--kite-checkbox-focus-ring-width) var(--kite-checkbox-focus-ring-style) var(--focus-ring-color); border-radius: var(--kite-checkbox-focus-ring-radius); content: ""; position: absolute; top: var(--focus-ring-offset); right: var(--focus-ring-offset); bottom: var(--focus-ring-offset); left: var(--focus-ring-offset); } .kite-checkbox__indicator { background-color: var(--background-color); border: var(--kite-checkbox-border-width) var(--kite-checkbox-border-style) var(--border-color); border-radius: var(--kite-checkbox-border-radius); cursor: pointer; flex: 0 0 auto; margin-top: 2px; margin-right: var(--kite-checkbox-input-margin-right); position: relative; transition-property: background-color, border-color, box-shadow; transition-duration: var(--kite-motion-fastest); transition-timing-function: var(--kite-motion-standard); width: var(--kite-checkbox-width); height: var(--kite-checkbox-height); } .kite-checkbox__indicator .kite-icon { --size: 100%; --color: transparent; display: block; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-checkbox__indicator .kite-icon__inner svg { fill: var(--color); } } .kite-checkbox__feedback { color: var(--kite-checkbox-error-feedback-text-color); display: block; margin-top: var(--kite-checkbox-feedback-margin-top); } .kite-checkbox__feedback .kite-icon { --size: var(--kite-checkbox-error-feedback-icon-width); --color: var(--kite-checkbox-error-feedback-icon-color); margin-right: var(--kite-checkbox-error-feedback-icon-margin-right); } .kite-checkbox__control:checked ~ .kite-checkbox__indicator, .kite-checkbox--checked .kite-checkbox__indicator { --border-color: var(--selected-background-color); --background-color: var(--selected-background-color); } .kite-checkbox__control:checked ~ .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-checkbox--checked .kite-checkbox__indicator .kite-checkbox__checked-icon { --color: var(--icon-color); } .kite-checkbox__control:checked ~ .kite-checkbox__indicator .kite-checkbox__mixed-icon, .kite-checkbox--checked .kite-checkbox__indicator .kite-checkbox__mixed-icon { display: none; } .kite-checkbox__control:indeterminate ~ .kite-checkbox__indicator, .kite-checkbox--mixed .kite-checkbox__indicator { --background-color: var(--indeterminate-background-color); --border-color: var(--indeterminate-background-color); } .kite-checkbox__control:indeterminate ~ .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-checkbox--mixed .kite-checkbox__indicator .kite-checkbox__checked-icon { display: none; } .kite-checkbox__control:indeterminate ~ .kite-checkbox__indicator .kite-checkbox__mixed-icon, .kite-checkbox--mixed .kite-checkbox__indicator .kite-checkbox__mixed-icon { --color: var(--icon-color); } .kite-checkbox__control:not(:disabled):not(:checked):not(:indeterminate):hover ~ .kite-checkbox__indicator { --background-color: var(--hover-background-color); } .kite-checkbox__control:disabled ~ .kite-checkbox__indicator { --border-color: var(--disabled-border-color); cursor: var(--kite-checkbox-disabled-cursor); } .kite-checkbox__control:disabled ~ .kite-checkbox__description { color: var(--disabled-label-text-color); cursor: var(--kite-checkbox-disabled-cursor); } .kite-checkbox__control:disabled ~ .kite-checkbox__indicator, .kite-checkbox--disabled .kite-checkbox__indicator { --border-color: var(--disabled-border-color); cursor: var(--kite-checkbox-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-checkbox__control:disabled ~ .kite-checkbox__indicator, .kite-checkbox--disabled .kite-checkbox__indicator { --border-color: GrayText; } } .kite-checkbox__control:disabled ~ .kite-checkbox__description, .kite-checkbox--disabled .kite-checkbox__description { color: var(--disabled-label-text-color); cursor: var(--kite-checkbox-disabled-cursor); } .kite-checkbox__control:checked:disabled ~ .kite-checkbox__indicator, .kite-checkbox--checked.kite-checkbox--disabled .kite-checkbox__indicator { --background-color: var(--selected-disabled-background-color); } .kite-checkbox__control:checked:disabled ~ .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-checkbox--checked.kite-checkbox--disabled .kite-checkbox__indicator .kite-checkbox__checked-icon { --color: var(--disabled-icon-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-checkbox__control:checked:disabled ~ .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-checkbox--checked.kite-checkbox--disabled .kite-checkbox__indicator .kite-checkbox__checked-icon { --color: GrayText; } } .kite-checkbox__control:indeterminate:disabled ~ .kite-checkbox__indicator, .kite-checkbox--mixed.kite-checkbox--disabled .kite-checkbox__indicator { --background-color: var(--indeterminate-disabled-background-color); } .kite-checkbox__control:indeterminate:disabled ~ .kite-checkbox__indicator .kite-checkbox__mixed-icon, .kite-checkbox--mixed.kite-checkbox--disabled .kite-checkbox__indicator .kite-checkbox__mixed-icon { --color: var(--disabled-icon-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-checkbox__control:indeterminate:disabled ~ .kite-checkbox__indicator .kite-checkbox__mixed-icon, .kite-checkbox--mixed.kite-checkbox--disabled .kite-checkbox__indicator .kite-checkbox__mixed-icon { --color: GrayText; } } .kite-checkbox--error .kite-checkbox__indicator { --border-color: var(--kite-checkbox-error-border-color); } .kite-checkbox--error .kite-checkbox__control:not(:disabled):checked ~ .kite-checkbox__indicator, .kite-checkbox--error.kite-checkbox--checked .kite-checkbox__indicator, .kite-checkbox--error .kite-checkbox__control:not(:disabled):indeterminate ~ .kite-checkbox__indicator, .kite-checkbox--error.kite-checkbox--mixed .kite-checkbox__indicator { --border-color: var(--kite-checkbox-error-selected-background-color); --background-color: var(--kite-checkbox-error-selected-background-color); } .kite-checkbox-group__list { list-style-type: none; margin: 0; padding: 0 0 0 var(--kite-checkbox-group-list-padding-left); } .kite-checkbox-group__item { margin: 0; padding: 0; } .kite-checkbox-group .kite-checkbox { margin-bottom: var(--kite-checkbox-group-checkbox-margin-bottom); } .kite-checkbox-group--error .kite-checkbox__indicator { --border-color: var(--kite-checkbox-error-border-color); } .kite-checkbox-group--error .kite-checkbox__control:not(:disabled):checked ~ .kite-checkbox__indicator, .kite-checkbox-group--error.kite-checkbox--checked .kite-checkbox__indicator, .kite-checkbox-group--error .kite-checkbox__control:not(:disabled):indeterminate ~ .kite-checkbox__indicator, .kite-checkbox-group--error.kite-checkbox--mixed .kite-checkbox__indicator { --border-color: var(--kite-checkbox-error-selected-background-color); --background-color: var(--kite-checkbox-error-selected-background-color); } /** Adding React specific shame because RK is not using the indeterminate pseudo selector that Vanilla is using for this scss */ .kite-checkbox.kite-checkbox--mixed .kite-checkbox__control:hover ~ .kite-checkbox__indicator { --hover-background-color: var(--indeterminate-background-color); } .kite-checkbox-group--error .kite-checkbox.kite-checkbox--mixed .kite-checkbox__control:hover ~ .kite-checkbox__indicator { --background-color: var(--kite-checkbox-error-selected-background-color); } .kite-checkbox-group--error legend + .kite-checkbox.kite-checkbox--mixed .kite-checkbox__control ~ .kite-checkbox__indicator, .kite-checkbox-group--error legend .kite-checkbox.kite-checkbox--mixed .kite-checkbox__control ~ .kite-checkbox__indicator { --border-color: var(--kite-checkbox-error-selected-background-color); --background-color: var(--kite-checkbox-error-selected-background-color); } .kite-chip { /** @prop --text-color: text color */ --text-color: var(--kite-chip-text-color); --border-color: var(--kite-chip-border-color); /** @prop --background-color: chip background color */ --background-color: var(--kite-chip-background-color); --focus-ring-color: var(--kite-chip-focus-ring-color); /** @prop --focus-background-color: focus state background color */ --focus-background-color: var(--kite-chip-focus-background-color); --hover-background-color: var(--kite-chip-hover-background-color); /** @prop --selected-background-color: selected state background color */ --selected-background-color: var(--kite-chip-selected-background-color); /** @prop --selected-text-color: selected state text color*/ --selected-text-color: var(--kite-chip-selected-text-color); --selected-disabled-color: var(--kite-chip-selected-disabled-text-color); --selected-disabled-background-color: var(--kite-chip-selected-disabled-background-color); --disabled-color: var(--kite-chip-disabled-text-color); --disabled-border-color: var(--kite-chip-disabled-border-color); --disabled-background-color: var(--kite-chip-disabled-background-color); } .kite-chip-group { display: inline-block; width: 100%; } .kite-chip-group > legend { margin-bottom: var(--kite-chip-legend-margin-bottom); } .kite-chip { background: transparent; border: 0; border-radius: var(--kite-chip-border-radius); color: var(--text-color); cursor: var(--kite-chip-cursor); display: block; float: left; font-weight: var(--kite-chip-text-weight); line-height: var(--kite-chip-text-line-height); margin: var(--kite-chip-margin-top) var(--kite-chip-margin-right) var(--kite-chip-margin-bottom) var(--kite-chip-margin-left); min-height: var(--kite-chip-min-height); padding: var(--kite-chip-padding-top) var(--kite-chip-padding-right) var(--kite-chip-padding-bottom) var(--kite-chip-padding-left); position: relative; height: var(--kite-chip-height); } .kite-chip .kite-chip__inner { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .kite-chip__indicator { display: none; margin: 0 var(--kite-chip-icon-margin) 0 0; width: var(--kite-chip-icon-width); height: var(--kite-chip-icon-height); } .kite-chip__dismiss { margin: 0 0 0 var(--kite-chip-icon-margin); width: var(--kite-chip-icon-width); height: var(--kite-chip-icon-height); } .kite-chip__text { z-index: 0; width: max-content; } .kite-chip__background { background: var(--background-color); border: var(--kite-chip-border-width) var(--kite-chip-border-style) var(--border-color); border-radius: var(--kite-chip-border-radius); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .kite-chip input[type=checkbox], .kite-chip input[type=radio] { opacity: 0; width: 0; appearance: none; } .kite-chip[aria-pressed=true], .kite-chip[aria-pressed=true].kite-focus-visible, .kite-chip[aria-pressed=true]:focus-visible, .kite-chip--selected.kite-focus-visible, .kite-chip--selected:focus-visible, .kite-chip--selected { background: var(--selected-background-color); color: var(--selected-text-color); padding: var(--kite-chip-selected-padding-top) var(--kite-chip-selected-padding-right) var(--kite-chip-selected-padding-bottom) var(--kite-chip-selected-padding-left); } .kite-chip[aria-pressed=true] .kite-chip__background, .kite-chip[aria-pressed=true].kite-focus-visible .kite-chip__background, .kite-chip[aria-pressed=true]:focus-visible .kite-chip__background, .kite-chip--selected.kite-focus-visible .kite-chip__background, .kite-chip--selected:focus-visible .kite-chip__background, .kite-chip--selected .kite-chip__background { background: var(--selected-background-color); } .kite-chip[aria-pressed=true] .kite-chip__indicator, .kite-chip[aria-pressed=true] .kite-chip__dismiss, .kite-chip[aria-pressed=true].kite-focus-visible .kite-chip__indicator, .kite-chip[aria-pressed=true].kite-focus-visible .kite-chip__dismiss, .kite-chip[aria-pressed=true]:focus-visible .kite-chip__indicator, .kite-chip[aria-pressed=true]:focus-visible .kite-chip__dismiss, .kite-chip--selected.kite-focus-visible .kite-chip__indicator, .kite-chip--selected.kite-focus-visible .kite-chip__dismiss, .kite-chip--selected:focus-visible .kite-chip__indicator, .kite-chip--selected:focus-visible .kite-chip__dismiss, .kite-chip--selected .kite-chip__indicator, .kite-chip--selected .kite-chip__dismiss { display: block; position: relative; } .kite-chip[aria-pressed=true] .kite-chip__indicator .kite-icon, .kite-chip[aria-pressed=true] .kite-chip__dismiss .kite-icon, .kite-chip[aria-pressed=true].kite-focus-visible .kite-chip__indicator .kite-icon, .kite-chip[aria-pressed=true].kite-focus-visible .kite-chip__dismiss .kite-icon, .kite-chip[aria-pressed=true]:focus-visible .kite-chip__indicator .kite-icon, .kite-chip[aria-pressed=true]:focus-visible .kite-chip__dismiss .kite-icon, .kite-chip--selected.kite-focus-visible .kite-chip__indicator .kite-icon, .kite-chip--selected.kite-focus-visible .kite-chip__dismiss .kite-icon, .kite-chip--selected:focus-visible .kite-chip__indicator .kite-icon, .kite-chip--selected:focus-visible .kite-chip__dismiss .kite-icon, .kite-chip--selected .kite-chip__indicator .kite-icon, .kite-chip--selected .kite-chip__dismiss .kite-icon { --color: var(--selected-text-color); } .kite-chip[aria-pressed=true] .kite-chip__text, .kite-chip[aria-pressed=true].kite-focus-visible .kite-chip__text, .kite-chip[aria-pressed=true]:focus-visible .kite-chip__text, .kite-chip--selected.kite-focus-visible .kite-chip__text, .kite-chip--selected:focus-visible .kite-chip__text, .kite-chip--selected .kite-chip__text { color: var(--selected-text-color); margin: 0; } .kite-chip.kite-hover .kite-chip__background, .kite-chip:hover .kite-chip__background { background: var(--hover-background-color); } .kite-chip.kite-hover .kite-chip__text, .kite-chip:hover .kite-chip__text { color: var(--text-color); } .kite-chip.kite-hover .kite-chip__indicator .kite-icon, .kite-chip.kite-hover .kite-chip__dismiss .kite-icon, .kite-chip:hover .kite-chip__indicator .kite-icon, .kite-chip:hover .kite-chip__dismiss .kite-icon { --color: var(--text-color); } .kite-chip.kite-focus-visible, .kite-chip:focus-visible { outline: 0; } .kite-chip.kite-focus-visible .kite-chip__background, .kite-chip:focus-visible .kite-chip__background { background: var(--focus-background-color); } .kite-chip.kite-focus-visible .kite-chip__text, .kite-chip:focus-visible .kite-chip__text { color: var(--text-color); } .kite-chip.kite-focus-visible .kite-chip__indicator .kite-icon, .kite-chip.kite-focus-visible .kite-chip__dismiss .kite-icon, .kite-chip:focus-visible .kite-chip__indicator .kite-icon, .kite-chip:focus-visible .kite-chip__dismiss .kite-icon { --color: var(--text-color); } .kite-chip.kite-focus-visible::after, .kite-chip:focus-visible::after { border: var(--kite-chip-focus-ring-width) var(--kite-chip-focus-ring-style) var(--focus-ring-color); border-radius: var(--kite-chip-border-radius); content: ""; position: absolute; top: calc(-1 * var(--kite-chip-focus-ring-offset)); left: calc(-1 * var(--kite-chip-focus-ring-offset)); width: calc(100% + 2 * var(--kite-chip-focus-ring-offset)); height: calc(100% + 2 * var(--kite-chip-focus-ring-offset)); } .kite-chip .kite-chip__input:focus-visible ~ .kite-chip__background { background: var(--focus-background-color); } .kite-chip .kite-chip__input:focus-visible ~ .kite-chip__text { color: var(--text-color); } .kite-chip .kite-chip__input:focus-visible ~ .kite-chip__indicator .kite-icon { --color: var(--text-color); } .kite-chip .kite-chip__input:focus-visible ~ .kite-chip__focus-ring { border: var(--kite-chip-focus-ring-width) var(--kite-chip-focus-ring-style) var(--focus-ring-color); border-radius: var(--kite-chip-border-radius); outline: 0; position: absolute; top: calc(-1 * (var(--kite-chip-focus-ring-offset))); left: calc(-1 * (var(--kite-chip-focus-ring-offset))); width: calc(100% + 2 * (var(--kite-chip-focus-ring-offset))); height: calc(100% + 2 * (var(--kite-chip-focus-ring-offset))); } .kite-chip--selected input:focus-visible ~ .kite-chip__background { background: var(--selected-background-color); } .kite-chip--selected input:focus-visible ~ .kite-chip__text { color: var(--selected-text-color); margin: 0; } .kite-chip--selected input:focus-visible ~ .kite-chip__indicator .kite-icon { --color: var(--selected-text-color); } .kite-chip.kite-disabled, .kite-chip:disabled { cursor: var(--kite-chip-disabled-cursor); } .kite-chip.kite-disabled .kite-chip__background, .kite-chip:disabled .kite-chip__background { background-color: var(--disabled-background-color); border-color: var(--disabled-border-color); } .kite-chip.kite-disabled .kite-chip__text, .kite-chip:disabled .kite-chip__text { color: var(--disabled-color); } .kite-chip.kite-disabled .kite-icon, .kite-chip:disabled .kite-icon { --color: var(--disabled-color); } .kite-chip.kite-disabled.kite-chip--selected, .kite-chip[aria-pressed=true]:disabled { background: var(--selected-disabled-background-color); color: var(--selected-disabled-color); } .kite-chip.kite-disabled.kite-chip--selected .kite-chip__background, .kite-chip[aria-pressed=true]:disabled .kite-chip__background { background: var(--selected-disabled-background-color); } .kite-chip.kite-disabled.kite-chip--selected .kite-chip__text, .kite-chip[aria-pressed=true]:disabled .kite-chip__text { color: var(--selected-disabled-color); } .kite-chip.kite-disabled.kite-chip--selected .kite-chip__indicator .kite-icon, .kite-chip.kite-disabled.kite-chip--selected .kite-chip__dismiss .kite-icon, .kite-chip[aria-pressed=true]:disabled .kite-chip__indicator .kite-icon, .kite-chip[aria-pressed=true]:disabled .kite-chip__dismiss .kite-icon { --color: var(--selected-disabled-color); } .kite-chip--wrap { height: auto; } .kite-chip--wrap .kite-chip__text { width: fit-content; } .kite-chip-group--scroll { display: flex; flex-wrap: nowrap; margin: 0; overflow: auto; } .kite-chip-group--scroll .kite-chip-group__list { flex-wrap: nowrap; } .kite-chip-group--scroll legend { margin-bottom: calc(var(--kite-chip-legend-margin-bottom) - var(--kite-chip-focus-ring-offset) + var(--kite-chip-focus-ring-width)); } ul.kite-chip-group__list { list-style: none; margin: 0; padding: 0; padding-left: var(--kite-chip-focus-ring-offset); } ul.kite-chip-group__list > li { line-height: inherit; margin: 0; padding: 0; } .kite-chip-group__list { display: flex; flex-wrap: wrap; overflow: auto; } .kite-chip { margin-top: calc(var(--kite-chip-focus-ring-offset) + var(--kite-chip-focus-ring-width) + var(--kite-chip-margin-top) * 1rem); } .kite-chip-group--wrap .kite-chip { height: var(--kite-chip-multiline-height); } .kite-chip-group--wrap .kite-chip__text { width: fit-content; } .kite-combobox { --trigger-border-width: var(--kite-combobox-border-width); --trigger-border-style: var(--kite-combobox-border-style); --trigger-border-color: var(--kite-combobox-border-color); } .kite-combobox { position: relative; width: 100%; } @media only screen and (min-width: 30rem) { .kite-combobox { max-width: var(--kite-combobox-max-width); } } .kite-combobox__label-group { margin-bottom: var(--kite-combobox-label-margin-bottom); } .kite-combobox__label { color: var(--kite-combobox-label-text-color); display: inline-block; font-weight: var(--kite-combobox-label-text-weight); } .kite-combobox__helper-text { display: block; color: var(--kite-combobox-helper-text-color); font-size: var(--kite-combobox-helper-text-size); line-height: var(--kite-combobox-helper-text-line-height); } .kite-combobox__trigger { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; background-color: var(--kite-combobox-background-color); border: var(--trigger-border-width) var(--trigger-border-style) var(--trigger-border-color); border-radius: var(--kite-combobox-border-radius); color: var(--kite-combobox-text-color); cursor: var(--kite-combobox-cursor); display: flex; justify-content: space-between; line-height: var(--kite-combobox-text-line-height); margin: var(--kite-combobox-margin-top) var(--kite-combobox-margin-right) var(--kite-combobox-margin-bottom) var(--kite-combobox-margin-left); width: 100%; padding: calc(var(--kite-combobox-padding-top) - var(--trigger-border-width)) calc(var(--kite-combobox-padding-right) - var(--trigger-border-width)) calc(var(--kite-combobox-padding-bottom) - var(--trigger-border-width)) calc(var(--kite-combobox-padding-left) - var(--trigger-border-width)); text-align: left; height: var(--kite-combobox-height); } .kite-combobox__trigger .kite-icon { --color: var(--kite-combobox-text-color); flex-shrink: 0; margin-right: var(--kite-combobox-icon-margin-right); margin-left: var(--kite-combobox-icon-margin-left); } .kite-combobox__trigger.kite-focus-visible, .kite-combobox__trigger:focus-visible { outline: var(--kite-combobox-focus-ring-width) var(--kite-combobox-focus-ring-style) var(--kite-combobox-focus-ring-color); outline-offset: var(--kite-combobox-focus-ring-offset); } .kite-combobox__trigger:disabled, .kite-combobox__trigger[aria-disabled=true] { --trigger-border-color: var(--kite-combobox-disabled-border-color); background-color: var(--kite-combobox-disabled-background-color); color: var(--kite-combobox-disabled-text-color); cursor: var(--kite-combobox-disabled-cursor); } .kite-combobox__trigger:disabled .kite-icon, .kite-combobox__trigger[aria-disabled=true] .kite-icon { --color: var(--kite-combobox-disabled-icon-color); } .kite-combobox__trigger:not([disabled]):hover, .kite-combobox__trigger.kite-hover:not([disabled]) { --trigger-border-width: var(--kite-combobox-hover-border-width); } .kite-combobox__value { display: flex; text-align: left; overflow: hidden; } .kite-combobox__value--placeholder { color: var(--kite-combobox-placeholder-text-color); font-style: var(--kite-combobox-placeholder-text-style); } .kite-combobox__selection { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--kite-combobox-placeholder-margin-right); } .kite-combobox__overflow-label { font-weight: var(--kite-combobox-overflow-label-text-weight); } .kite-combobox__feedback { margin-top: var(--kite-combobox-feedback-margin-top); display: block; color: var(--kite-combobox-error-feedback-text-color); } .kite-combobox .kite-picker__list { --max-item-count: 5; } .kite-combobox .kite-picker__action { align-items: flex-start; padding-left: var(--kite-combobox-picker-list-item-padding-left); } .kite-combobox .kite-picker__action:disabled .kite-picker__action-check .kite-checkbox__indicator, .kite-combobox .kite-picker__action[aria-disabled=true] .kite-picker__action-check .kite-checkbox__indicator { cursor: var(--kite-combobox-disabled-cursor); border-color: var(--kite-checkbox-selected-disabled-background-color); } .kite-combobox .kite-picker__action:disabled .kite-picker__action-check--mixed .kite-checkbox__indicator, .kite-combobox .kite-picker__action:disabled .kite-picker__action-check--selected .kite-checkbox__indicator, .kite-combobox .kite-picker__action[aria-disabled=true] .kite-picker__action-check--mixed .kite-checkbox__indicator, .kite-combobox .kite-picker__action[aria-disabled=true] .kite-picker__action-check--selected .kite-checkbox__indicator { background-color: var(--kite-checkbox-selected-disabled-background-color); } .kite-combobox .kite-picker__action:disabled .kite-picker__action-check--mixed .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-combobox .kite-picker__action:disabled .kite-picker__action-check--selected .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-combobox .kite-picker__action[aria-disabled=true] .kite-picker__action-check--mixed .kite-checkbox__indicator .kite-checkbox__checked-icon, .kite-combobox .kite-picker__action[aria-disabled=true] .kite-picker__action-check--selected .kite-checkbox__indicator .kite-checkbox__checked-icon { --color: var(--kite-checkbox-disabled-icon-color); } .kite-combobox .kite-picker__action-check .kite-checkbox { margin: 0; } .kite-combobox .kite-picker__action-check .kite-checkbox .kite-icon { --size: 100%; margin: 0; } .kite-combobox .kite-picker__action-check .kite-checkbox__indicator { transition: none; } .kite-combobox .kite-picker__action-check--mixed .kite-checkbox__indicator { background-color: var(--kite-checkbox-selected-background-color); border-color: var(--kite-checkbox-selected-background-color); } .kite-combobox .kite-picker__action-check--mixed .kite-checkbox__indicator .kite-checkbox__checked-icon { display: none; } .kite-combobox .kite-picker__action-check--mixed .kite-checkbox__indicator .kite-checkbox__mixed-icon { --color: var(--kite-checkbox-selected-icon-color); } .kite-combobox .kite-picker__action-check--selected .kite-checkbox__indicator { background-color: var(--kite-checkbox-selected-background-color); border-color: var(--kite-checkbox-selected-background-color); } .kite-combobox .kite-picker__action-check--selected .kite-checkbox__indicator .kite-checkbox__checked-icon { --color: var(--kite-checkbox-selected-icon-color); } .kite-combobox .kite-picker__action-check--selected .kite-checkbox__indicator .kite-checkbox__mixed-icon { display: none; } .kite-combobox .kite-picker__results { color: var(--kite-combobox-picker-results-text-color); display: flex; align-items: center; justify-content: center; padding-top: var(--kite-combobox-picker-results-padding-top); padding-bottom: var(--kite-combobox-picker-results-padding-bottom); } .kite-combobox .kite-picker__results .kite-progress { position: relative; } .kite-combobox .kite-search-input__input:has(~ .kite-search-input__input-addon--clear) { padding-right: calc(var(--kite-combobox-icon-margin-right) + var(--input-addon-total-width) - var(--input-border-width)); } .kite-combobox .kite-search-input__input--focus-visible ~ .kite-search-input__appearance, .kite-combobox .kite-search-input__input.kite-focus-visible ~ .kite-search-input__appearance, .kite-combobox .kite-search-input__input:focus-visible:not(.kite-search-input__input--listbox-focused) ~ .kite-search-input__appearance { border: var(--input-border-width) var(--input-border-style) var(--input-border-color); } .kite-combobox .kite-search-input__input-addon--clear .kite-icon { margin-right: var(--kite-combobox-icon-margin-right); } .kite-combobox .kite-search-input__appearance { border-radius: var(--kite-form-control-picker-border-radius) var(--kite-form-control-picker-border-radius) 0 0; border: none; border-bottom: var(--kite-form-control-picker-list-item-border-width) var(--kite-form-control-picker-list-item-border-style) var(--kite-form-control-picker-list-item-border-color); } .kite-combobox--open .kite-combobox__trigger .kite-icon { transform: rotate(-180deg); } .kite-combobox--disabled .kite-combobox__trigger, .kite-combobox--readonly .kite-combobox__trigger { --trigger-border-color: var(--kite-combobox-disabled-border-color); outline-color: var(--kite-combobox-disabled-border-color); } .kite-combobox--disabled .kite-combobox__trigger .kite-icon, .kite-combobox--readonly .kite-combobox__trigger .kite-icon { --color: var(--kite-combobox-disabled-icon-color); } .kite-combobox--disabled .kite-search-input, .kite-combobox--readonly .kite-search-input { display: none; } .kite-combobox--disabled .kite-picker__list, .kite-combobox--readonly .kite-picker__list { cursor: var(--kite-combobox-disabled-cursor); } .kite-combobox--disabled .kite-combobox__label, .kite-combobox--disabled .kite-combobox__value, .kite-combobox--disabled .kite-picker__action, .kite-combobox--readonly .kite-combobox__label, .kite-combobox--readonly .kite-combobox__value, .kite-combobox--readonly .kite-picker__action { color: var(--kite-combobox-disabled-text-color); } .kite-combobox--disabled .kite-combobox__helper-text, .kite-combobox--readonly .kite-combobox__helper-text { color: var(--kite-combobox-disabled-helper-text-color); } .kite-combobox--error .kite-combobox__trigger { --trigger-border-color: var(--kite-combobox-error-border-color); --trigger-border-width: var(--kite-combobox-error-border-width); } .kite-combobox--single-select .kite-picker__action { padding-left: var(--kite-form-control-picker-list-item-padding-left); } .kite-picker { position: relative; } .kite-picker--list .kite-picker__content { padding: 0; } .kite-picker--open.kite-picker--overlay, .kite-picker--open .kite-picker__content { opacity: 1; visibility: visible; } .kite-picker--overlay { /** Positioning props **/ --translateX: 0; --label-height: calc(var(--kite-form-control-label-text-line-height) * var(--kite-form-control-label-text-size)); --translateY: calc(var(--label-height) + var(--kite-form-control-label-margin-bottom) + var(--kite-form-control-height) + var(--kite-form-control-picker-offset)); /** @prop --picker-trigger-width: Represents the width of a picker's trigger element. May require dynamic calculation */ --picker-trigger-width: 0; /** @prop --picker-trigger-height: Represents the height of a picker's trigger element. May require dynamic calculation */ --picker-trigger-height: 0; /** Positioning styles **/ position: absolute; top: 0; left: 0; right: 0; transform: translate(var(--translateX), var(--translateY)); z-index: var(--kite-form-control-picker-zindex); visibility: hidden; opacity: 0; /** Positioning variants **/ } .kite-picker--overlay.kite-picker--top { --translateY: calc(-100% - var(--picker-trigger-height) - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--bottom { --translateY: var(--kite-form-control-picker-offset); } .kite-picker--overlay.kite-picker--right { --translateX: calc(var(--picker-trigger-width) + var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--left { --translateX: calc(-100% - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--top, .kite-picker--overlay.kite-picker--bottom { --translateX: calc(-50% + (var(--picker-trigger-width) / 2)); } .kite-picker--overlay.kite-picker--top.kite-picker--align-start, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-start { --translateX: 0; } .kite-picker--overlay.kite-picker--top.kite-picker--align-end, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-end { --translateX: calc(-100% + var(--picker-trigger-width)); } .kite-picker--overlay.kite-picker--right, .kite-picker--overlay.kite-picker--left { --translateY: -50%; } .kite-picker--overlay.kite-picker--right.kite-picker--align-start, .kite-picker--overlay.kite-picker--left.kite-picker--align-start { --translateY: calc(-1 * var(--picker-trigger-height)); } .kite-picker--overlay.kite-picker--right.kite-picker--align-end, .kite-picker--overlay.kite-picker--left.kite-picker--align-end { --translateY: -100%; } .kite-picker__content { background-color: var(--kite-form-control-picker-background-color); border: var(--kite-form-control-picker-border-width) var(--kite-form-control-picker-border-style) var(--kite-form-control-picker-border-color); border-radius: var(--kite-form-control-picker-border-radius); box-shadow: var(--kite-form-control-picker-elevation); display: block; padding: var(--kite-form-control-picker-padding-top) var(--kite-form-control-picker-padding-right) var(--kite-form-control-picker-padding-bottom) var(--kite-form-control-picker-padding-left); opacity: 0; visibility: hidden; min-width: var(--kite-form-control-picker-min-width); width: 100%; } .kite-picker__list { cursor: var(--kite-form-control-picker-cursor); list-style-type: none; margin: 0; padding: 0; --max-item-count: ; --picker-list-item-height: calc(((var(--kite-form-control-picker-list-item-line-height) * 1rem) + var(--kite-form-control-picker-list-item-padding-top) + var(--kite-form-control-picker-list-item-padding-bottom) + var(--kite-form-control-picker-list-item-border-width))); --picker-list-max-height: calc(var(--picker-list-item-height) * var(--max-item-count)); max-height: calc(var(--picker-list-max-height) + 0.5 * var(--picker-list-item-height)); overflow-y: auto; } .kite-picker__item { margin: 0; padding: 0; min-width: 100%; max-width: var(--kite-form-control-picker-list-item-max-width); } .kite-picker__item:not(:last-child) .kite-picker__action { border-bottom: var(--kite-form-control-picker-list-item-border-width) var(--kite-form-control-picker-list-item-border-style) var(--kite-form-control-picker-list-item-border-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action, .kite-picker__item.kite-picker__item--negative a.kite-picker__action { color: var(--kite-form-control-picker-list-item-negative-text-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action .kite-icon, .kite-picker__item.kite-picker__item--negative a.kite-picker__action .kite-icon { --color: var(--kite-form-control-picker-list-item-negative-icon-color); } .kite-picker a.kite-picker__action, .kite-picker__action { align-items: center; background-color: transparent; border: 0; color: var(--kite-form-control-picker-list-item-text-color); cursor: var(--kite-form-control-picker-cursor); display: inline-flex; font-size: var(--kite-form-control-picker-list-item-text-size); line-height: var(--kite-form-control-picker-list-item-line-height); padding: var(--kite-form-control-picker-list-item-padding-top) var(--kite-form-control-picker-list-item-padding-right) var(--kite-form-control-picker-list-item-padding-bottom) var(--kite-form-control-picker-list-item-padding-left); text-align: left; text-decoration: unset; width: 100%; } .kite-picker a.kite-picker__action:focus-visible, .kite-picker a.kite-picker__action.kite-focus-visible, .kite-picker__action:focus-visible, .kite-picker__action.kite-focus-visible { outline: var(--kite-form-control-picker-list-item-focus-ring-width) var(--kite-form-control-picker-list-item-focus-ring-style) var(--kite-form-control-picker-list-item-focus-ring-color); outline-offset: var(--kite-form-control-picker-list-item-focus-ring-offset); } .kite-picker a.kite-picker__action-icon, .kite-picker__action-icon { display: inline; } .kite-picker a.kite-picker__action-icon .kite-icon, .kite-picker__action-icon .kite-icon { --size: var(--kite-form-control-picker-list-item-icon-width); margin-right: var(--kite-form-control-picker-list-item-icon-margin-right); vertical-align: text-bottom; } .kite-picker a.kite-picker__action-check .kite-icon, .kite-picker__action-check .kite-icon { --color: none; --size: var(--kite-form-control-picker-list-item-check-icon-width); flex-shrink: 0; margin-right: var(--kite-form-control-picker-list-item-check-icon-margin-right); margin-left: var(--kite-form-control-picker-list-item-check-icon-margin-left); vertical-align: text-bottom; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg, .kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg { fill: none; } } .kite-picker a.kite-picker__action-check--selected .kite-icon, .kite-picker__action-check--selected .kite-icon { --color: var(--kite-form-control-picker-list-item-check-icon-color); } .kite-picker a.kite-picker__action--hover, .kite-picker a.kite-picker__action.kite-hover, .kite-picker a.kite-picker__action:hover, .kite-picker__action--hover, .kite-picker__action.kite-hover, .kite-picker__action:hover { background-color: var(--kite-form-control-picker-list-item-hover-background-color); text-decoration: unset; } .kite-picker a.kite-picker__action[aria-selected=true], .kite-picker a.kite-picker__action[aria-checked=true], .kite-picker a.kite-picker__action[aria-current], .kite-picker__action[aria-selected=true], .kite-picker__action[aria-checked=true], .kite-picker__action[aria-current] { font-weight: var(--kite-form-control-picker-list-item-selected-text-weight); } .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: var(--kite-form-control-picker-list-item-disabled-text-color); cursor: var(--kite-form-control-picker-list-item-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: GrayText; } } .kite-picker a.kite-picker__action:disabled:hover, .kite-picker a.kite-picker__action[aria-disabled=true]:hover, .kite-picker__action:disabled:hover, .kite-picker__action[aria-disabled=true]:hover { background-color: transparent; } .kite-picker__backdrop { background-color: var(--kite-form-control-picker-backdrop-background-color); opacity: var(--kite-form-control-picker-backdrop-opacity); pointer-events: auto; touch-action: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--kite-form-control-picker-backdrop-zindex); } .kite-picker__backdrop--hidden { opacity: 0; visibility: hidden; } .kite-search-input { --input-border-color: var(--kite-search-input-border-color); --input-border-style: var(--kite-search-input-border-style); --input-border-width: var(--kite-search-input-border-width); --input-addon-total-width: calc(var(--kite-search-input-addon-padding-left) + var(--kite-search-input-addon-icon-width) + var(--kite-search-input-addon-padding-right)); } .kite-search-input:has(.kite-search-input__input-group.kite-hover .kite-search-input__input:not([disabled]), .kite-search-input__input-group:hover .kite-search-input__input:not([disabled])) { --input-border-width: var(--kite-search-input-hover-border-width); } .kite-search-input:has(.kite-search-input__input--focus-visible), .kite-search-input:has(.kite-search-input__input.kite-focus-visible, .kite-search-input__input:focus-visible) { --input-border-width: var(--kite-search-input-focus-ring-width); --input-border-color: var(--kite-search-input-focus-ring-style); --input-border-style: var(--kite-search-input-focus-ring-color); } .kite-search-input--disabled { --input-border-color: var(--kite-search-input-disabled-border-color); --input-border-width: var(--kite-search-input-border-width); } .kite-search-input--error { --input-border-color: var(--kite-search-input-error-border-color); --input-border-width: var(--kite-search-input-error-border-width); } .kite-search-input { display: flex; flex-direction: column; } @media only screen and (min-width: 30rem) { .kite-search-input { max-width: var(--kite-search-input-max-width); } } .kite-search-input__label { color: var(--kite-search-input-label-text-color); display: block; margin-bottom: var(--kite-search-input-label-margin-bottom); } .kite-search-input__input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; height: var(--kite-search-input-height); } @media only screen and (min-width: 30rem) { .kite-search-input__input-group { max-width: var(--kite-search-input-max-width); } } .kite-search-input__input-addon { background: transparent; border: 0; display: flex; align-items: center; text-align: center; white-space: nowrap; padding-top: var(--kite-search-input-addon-padding-top, var(--kite-form-control-addon-padding-top)); padding-right: var(--kite-search-input-addon-padding-right, var(--kite-form-control-addon-padding-right)); padding-bottom: var(--kite-search-input-addon-padding-bottom, var(--kite-form-control-addon-padding-bottom)); padding-left: var(--kite-search-input-addon-padding-left, var(--kite-form-control-addon-padding-left)); height: 100%; position: absolute; top: 0; right: 0; z-index: 2; } .kite-search-input__input-addon:first-child { right: auto; left: 0; } .kite-search-input__input-addon .kite-icon { --color: var(--kite-search-input-addon-icon-color, var(--kite-form-control-addon-icon-color)); --size: var(--kite-search-input-addon-icon-width, var(--kite-form-control-addon-icon-width)); } .kite-search-input__input-addon--button { cursor: var(--kite-cursor-action); text-decoration: none; user-select: none; } .kite-search-input__input-addon--button:focus-visible { outline-offset: var(--kite-search-input-addon-focus-ring-offset, var(--kite-form-control-addon-focus-ring-offset)); } .kite-search-input__input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance: none; background-color: transparent; border: 0; color: var(--kite-search-input-text-color); line-height: var(--kite-search-input-text-line-height); outline: none; padding-top: calc(var(--kite-search-input-padding-top) - var(--input-border-width)); padding-right: calc(var(--kite-search-input-padding-right) - var(--input-border-width)); padding-bottom: calc(var(--kite-search-input-padding-bottom) - var(--input-border-width)); padding-left: calc(var(--input-addon-total-width) - var(--input-border-width)); position: absolute; top: var(--input-border-width); left: var(--input-border-width); width: calc(100% - var(--input-border-width) * 2); height: calc(var(--kite-search-input-height) * var(--input-border-width) * 2); z-index: 1; } .kite-search-input__input:has(~ .kite-search-input__input-addon) { padding-right: calc(var(--input-addon-total-width) - var(--input-border-width)); } .kite-search-input__input::placeholder { color: var(--kite-search-input-placeholder-text-color); font-style: var(--kite-search-input-placeholder-text-style); } .kite-search-input__input:disabled::placeholder { color: var(--kite-search-input-disabled-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-search-input__input:disabled ~ .kite-search-input__appearance { border-color: GrayText; } } .kite-search-input__input::-webkit-search-cancel-button { display: none; } .kite-search-input__input--focus-visible, .kite-search-input__input.kite-focus-visible, .kite-search-input__input:focus-visible:not(.kite-search-input__input--listbox-focused) { outline: none; } .kite-search-input__appearance { background-color: var(--kite-search-input-background-color); border: var(--input-border-width) var(--input-border-style) var(--input-border-color); border-radius: var(--kite-search-input-border-radius); color: var(--kite-search-input-text-color); width: 100%; height: 100%; position: relative; z-index: 0; } .kite-search-input--disabled .kite-search-input__label { color: var(--kite-search-input-disabled-label-text-color); } .kite-search-input--disabled .kite-search-input__input { color: var(--kite-search-input-disabled-text-color); cursor: var(--kite-search-input-disabled-cursor); } .kite-search-input--disabled .kite-search-input__input-addon { cursor: var(--kite-search-input-disabled-cursor, var(--kite-form-control-disabled-cursor)); } .kite-search-input--disabled .kite-search-input__input-addon .kite-icon { --color: var(--kite-search-input-disabled-text-color, var(--kite-form-control-disabled-text-color)); } .kite-combobox { --trigger-border-width: var(--kite-combobox-border-width); --trigger-border-style: var(--kite-combobox-border-style); --trigger-border-color: var(--kite-combobox-border-color); } .kite-combobox__trigger { border: var(--trigger-border-width) var(--trigger-border-style) var(--trigger-border-color); } .kite-combobox__trigger:hover { --trigger-border-width: var(--kite-combobox-hover-border-width); } .kite-combobox--trigger__wrap { display: block; position: relative; } .kite-combobox--trigger__ios-input { all: unset; border: var(--trigger-border-width) var(--trigger-border-style) var(--trigger-border-color); cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } .kite-combobox--trigger__ios-input:hover { --trigger-border-width: var(--kite-combobox-hover-border-width); } /** Combobox virtualization shame */ .rk-picker__list--virtualization.kite-picker__list { position: relative; } .rk-picker__list--virtualization.kite-picker__list .kite-picker__action-label { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .kite-data-table { /** @prop --cell-padding: table cell padding size */ --cell-padding-top: var(--kite-data-table-padding-top); --cell-padding-right: var(--kite-data-table-padding-right); --cell-padding-bottom: var(--kite-data-table-padding-bottom); --cell-padding-left: var(--kite-data-table-padding-left); /** @prop --text-color: table content text color */ --text-color: var(--kite-data-table-text-color); /** @prop --header-color: table title text color */ --header-color: var(--kite-data-table-header-text-color); /** @prop --background-color: table background color */ --background-color: var(--kite-data-table-background-color); --cell-focus-ring-color: var(--kite-data-table-cell-focus-ring-color); --row-focus-ring-color: var(--kite-data-table-row-focus-ring-color); --header-border-bottom-color: var(--kite-data-table-header-border-bottom-color); --row-border-color: var(--kite-data-table-row-border-color); --cell-border-color: var(--kite-data-table-cell-border-color); /** @prop --stripped-background: zebra striped table row default background color and row background color for inverse striped table*/ --striped-background: var(--kite-data-table-striped-row-background-color); /** @prop --stripped-inverse-background: zebra striped table stripe row background color and default background for inverse striped table */ --striped-inverse-background: var(--kite-data-table-striped-inverse-row-background-color); --hover-background: var(--kite-data-table-row-hover-background-color); --scroll-shadow: var(--kite-data-table-scroll-shadow); --data-table-sticky-header-top: 0; } @media only screen and (min-width: 37.5rem) { .kite-data-table { --cell-padding-right: var(--kite-data-table-breakpoint-md-padding-right); --cell-padding-left: var(--kite-data-table-breakpoint-md-padding-left); } } .kite-data-table--compact { --cell-padding-top: var(--kite-data-table-compact-cell-padding-top); --cell-padding-right: var(--kite-data-table-compact-cell-padding-right); --cell-padding-bottom: var(--kite-data-table-compact-cell-padding-bottom); --cell-padding-left: var(--kite-data-table-compact-cell-padding-left); } .kite-data-table--comfortable { --cell-padding-top: var(--kite-data-table-cell-comfortable-padding-top); --cell-padding-right: var(--kite-data-table-cell-comfortable-padding-right); --cell-padding-bottom: var(--kite-data-table-cell-comfortable-padding-bottom); --cell-padding-left: var(--kite-data-table-cell-comfortable-padding-left); } .kite-data-table { color: var(--text-color); font-size: var(--kite-data-table-text-size); line-height: var(--kite-data-table-text-line-height); position: relative; } @media only screen and (min-width: 37.5rem) { .kite-data-table { font-size: var(--kite-data-table-breakpoint-md-text-size); line-height: var(--kite-data-table-breakpoint-md-text-line-height); } } .kite-data-table--last-col-right tr th:last-child, .kite-data-table--last-col-right tr td:last-child { --kite-data-table-header-text-align: right; --kite-data-table-cell-text-align: right; } .kite-data-table--last-col-right tr th:last-child .kite-data-table__header-action, .kite-data-table--last-col-right tr td:last-child .kite-data-table__header-action { justify-content: flex-end; } .kite-data-table--scroll { display: flex; flex-wrap: nowrap; } .kite-data-table--scroll .kite-data-table__scroll-wrap { overflow-x: scroll; flex-grow: 1; } .kite-data-table--scroll .kite-data-table__shadow { box-shadow: var(--scroll-shadow); margin-left: calc(-1 * var(--kite-data-table-scroll-shadow-width)); width: var(--kite-data-table-scroll-shadow-width); } .kite-data-table--sticky-col-start .kite-data-table__scroll-wrap, .kite-data-table--sticky-col-end .kite-data-table__scroll-wrap { overflow-x: scroll; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-col-start.kite-data-table table, .kite-data-table--sticky-col-end.kite-data-table table { border-collapse: separate; border-spacing: 0; } } .kite-data-table--sticky-col-start th:first-of-type, .kite-data-table--sticky-col-start td:first-of-type { position: sticky; left: 0; z-index: var(--kite-zindex-sticky); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-col-start th:first-of-type, .kite-data-table--sticky-col-start td:first-of-type { border-right: 1px solid transparent; } } .kite-data-table--sticky-col-start.kite-data-table--sticky-shadow th:first-of-type, .kite-data-table--sticky-col-start.kite-data-table--sticky-shadow td:first-of-type { background: linear-gradient(to left, transparent, var(--kite-data-table-sticky-shadow-color) var(--kite-data-table-scroll-shadow-width), var(--kite-data-table-sticky-column-background-color) var(--kite-data-table-scroll-shadow-width), var(--kite-data-table-sticky-column-background-color)); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-col-start.kite-data-table--sticky-shadow th:first-of-type, .kite-data-table--sticky-col-start.kite-data-table--sticky-shadow td:first-of-type { background-color: Canvas; } } .kite-data-table--sticky-col-end th:last-of-type, .kite-data-table--sticky-col-end td:last-of-type { position: sticky; right: 0; z-index: var(--kite-zindex-sticky); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-col-end th:last-of-type, .kite-data-table--sticky-col-end td:last-of-type { border-left: 1px solid transparent; } } .kite-data-table--sticky-col-end.kite-data-table--sticky-shadow th:last-of-type, .kite-data-table--sticky-col-end.kite-data-table--sticky-shadow td:last-of-type { background: linear-gradient(to right, transparent, var(--kite-data-table-sticky-shadow-color) var(--kite-data-table-scroll-shadow-width), var(--kite-data-table-sticky-column-background-color) var(--kite-data-table-scroll-shadow-width), var(--kite-data-table-sticky-column-background-color)); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-col-end.kite-data-table--sticky-shadow th:last-of-type, .kite-data-table--sticky-col-end.kite-data-table--sticky-shadow td:last-of-type { background-color: Canvas; } } .kite-data-table table { background-color: var(--background-color); border-collapse: collapse; table-layout: auto; width: 100%; } .kite-data-table th { border-bottom: var(--kite-data-table-header-border-bottom-width) var(--kite-data-table-header-border-bottom-style) var(--header-border-bottom-color); } .kite-data-table th, .kite-data-table th a, .kite-data-table th span, .kite-data-table th button { color: var(--header-color); font-weight: var(--kite-data-table-header-text-weight); text-align: var(--kite-data-table-header-text-align); } .kite-data-table tbody tr { background-color: var(--kite-data-table-row-background-color); } .kite-data-table tbody tr.kite-hover, .kite-data-table tbody tr:hover { --kite-data-table-row-background-color: var(--hover-background); --kite-data-table-sticky-column-background-color: var(--hover-background); } .kite-data-table tr.kite-focus-visible, .kite-data-table tr:focus-visible { outline: var(--kite-data-table-row-focus-ring-width) var(--kite-data-table-row-focus-ring-style) var(--row-focus-ring-color); outline-offset: calc(-1 * var(--kite-data-table-cell-focus-ring-width)); } .kite-data-table tr:last-child td { border-bottom: var(--kite-data-table-row-border-width) var(--kite-data-table-row-border-style) var(--row-border-color); } .kite-data-table td { text-align: var(--kite-data-table-cell-text-align); } .kite-data-table th, .kite-data-table td { padding: var(--cell-padding-top) var(--cell-padding-right) var(--cell-padding-bottom) var(--cell-padding-left); } .kite-data-table th.kite-focus-visible, .kite-data-table th:focus-visible, .kite-data-table td.kite-focus-visible, .kite-data-table td:focus-visible { outline: var(--kite-data-table-cell-focus-ring-width) var(--kite-data-table-cell-focus-ring-style) var(--cell-focus-ring-color); outline-offset: calc(-1 * var(--kite-data-table-cell-focus-ring-width)); } .kite-data-table__header--actionable.kite-data-table__header--actionable { padding: 0; } .kite-data-table__header--actionable.kite-data-table__header--actionable.kite-hover, .kite-data-table__header--actionable.kite-data-table__header--actionable:hover { background-color: var(--hover-background); --kite-data-table-sticky-column-background-color: var(--hover-background); cursor: pointer; } .kite-data-table__header-action { background: transparent; border: 0; cursor: pointer; display: flex; justify-content: space-between; padding: var(--cell-padding-top) var(--cell-padding-right) var(--cell-padding-bottom) var(--cell-padding-left); text-align: var(--kite-data-table-header-text-align); width: 100%; appearance: none; } .kite-data-table__header-action.kite-focus-visible, .kite-data-table__header-action:focus-visible { outline: var(--kite-data-table-cell-focus-ring-width) var(--kite-data-table-cell-focus-ring-style) var(--cell-focus-ring-color); outline-offset: calc(-1 * var(--kite-data-table-cell-focus-ring-width)); } .kite-data-table__sort { align-self: center; display: inline-flex; flex-direction: column; padding-left: var(--kite-data-table-icon-padding-left); vertical-align: middle; } .kite-data-table__sort-icon-up, .kite-data-table__sort-icon-down { display: none; } .kite-data-table__sort--asc .kite-data-table__sort-icon-up { display: inline; } .kite-data-table__sort--asc .kite-data-table__sort-icon-down, .kite-data-table__sort--asc .kite-data-table__sort-icon-up-down { display: none; } .kite-data-table__sort--desc .kite-data-table__sort-icon-down { display: inline; } .kite-data-table__sort--desc .kite-data-table__sort-icon-up, .kite-data-table__sort--desc .kite-data-table__sort-icon-up-down { display: none; } .kite-data-table--cell-border td, .kite-data-table--cell-border th { border: var(--kite-data-table-cell-border-width) var(--kite-data-table-cell-border-style) var(--cell-border-color); } .kite-data-table--cell-border th { border-bottom-width: 0; } .kite-data-table--row-border td { border-bottom: var(--kite-data-table-row-border-width) var(--kite-data-table-row-border-style) var(--row-border-color); border-top: var(--kite-data-table-row-border-width) var(--kite-data-table-row-border-style) var(--row-border-color); } .kite-data-table--row-border thead th { border: none; } .kite-data-table--menu th:last-child { width: var(--kite-data-table-menu-column-width); padding: var(--kite-data-table-menu-column-padding-top) var(--kite-data-table-menu-column-padding-right) var(--kite-data-table-menu-column-padding-bottom) var(--kite-data-table-menu-column-padding-left); } .kite-data-table--menu td:last-child { padding-left: var(--kite-data-table-menu-cell-padding-left); padding-right: var(--kite-data-table-menu-cell-padding-right); padding-top: var(--kite-data-table-menu-cell-padding-top); padding-bottom: var(--kite-data-table-menu-cell-padding-bottom); } .kite-data-table--menu .kite-menu .kite-picker--overlay { --translateX: var(--list-translate-x); --translateY: var(--list-translate-y); } .kite-data-table--responsive { overflow-x: auto; } .kite-data-table--right { --kite-data-table-header-text-align: right; --kite-data-table-cell-text-align: right; } .kite-data-table--right .kite-data-table__header-action { justify-content: flex-end; } .kite-data-table--striped tbody tr:nth-child(2n+1):not(.kite-hover, :hover) { --kite-data-table-row-background-color: var(--striped-inverse-background); --kite-data-table-sticky-column-background-color: var(--striped-inverse-background); } .kite-data-table--striped tbody tr:nth-child(2n):not(.kite-hover, :hover) { --kite-data-table-row-background-color: var(--striped-background); --kite-data-table-sticky-column-background-color: var(--striped-background); } .kite-data-table--striped-inverse tbody tr:nth-child(2n+1):not(.kite-hover, :hover) { --kite-data-table-row-background-color: var(--striped-background); --kite-data-table-sticky-column-background-color: var(--striped-background); } .kite-data-table--striped-inverse tbody tr:nth-child(2n):not(.kite-hover, :hover) { --kite-data-table-row-background-color: var(--striped-inverse-background); --kite-data-table-sticky-column-background-color: var(--striped-inverse-background); } .kite-data-table--sticky-header th { background-color: var(--kite-data-table-row-background-color); border-bottom: none; position: sticky; top: var(--data-table-sticky-header-top); z-index: var(--kite-zindex-sticky); } .kite-data-table--sticky-header th::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: var(--kite-data-table-header-border-bottom-width); background-color: var(--kite-data-table-header-border-bottom-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-header th::after { border-bottom: 1px solid transparent; } } .kite-data-table--sticky-header.kite-data-table--sticky-shadow th { background: linear-gradient(to top, transparent, var(--kite-data-table-sticky-shadow-color) var(--kite-data-table-scroll-shadow-width), var(--kite-data-table-row-background-color) var(--kite-data-table-scroll-shadow-width), var(--kite-data-table-row-background-color)); } .kite-data-table--sticky-header.kite-data-table--sticky-shadow th::after { background-color: transparent; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-data-table--sticky-header.kite-data-table--sticky-shadow th { background-color: Canvas; } } .kite-data-table .kite-checkbox { margin: 0; } .kite-data-table .kite-checkbox__label { font-size: inherit; font-weight: inherit; line-height: inherit; } .kite-data-table .kite-progress.rk-progress { display: contents; } .kite-data-table .kite-progress.rk-progress .kite-progress__icons { margin: 0 auto; } .kite-date-input { --input-border-color: var(--kite-date-input-border-color); --input-border-width: var(--kite-date-input-border-width); --input-border-style: var(--kite-date-input-border-style); --input-addon-total-width: calc(var(--kite-date-input-addon-padding-left) + var(--kite-date-input-addon-icon-width) + var(--kite-date-input-addon-padding-right)); } :has(.kite-date-input__input-group--hover), .kite-date-input:has(.kite-date-input__input-group.kite-hover .kite-date-input__input:not([disabled]), .kite-date-input__input-group:hover .kite-date-input__input:not([disabled])) { --input-border-width: var(--kite-date-input-hover-border-width); } .kite-date-input:has(.kite-date-input__input--focus-visible), .kite-date-input:has(.kite-date-input__input.kite-focus-visible, .kite-date-input__input:focus-visible) { --input-border-width: var(--kite-date-input-focus-ring-width); --input-border-color: var(--kite-date-input-focus-ring-style); --input-border-style: var(--kite-date-input-focus-ring-color); } .kite-date-input--disabled { --input-border-color: var(--kite-date-input-disabled-border-color); --input-border-width: var(--kite-date-input-border-width); } .kite-date-input.kite-form-control--error, .kite-date-input--error { --input-border-color: var(--kite-date-input-error-border-color); --input-border-width: var(--kite-date-input-error-border-width); } .kite-date-input { position: relative; width: 100%; } .kite-date-input__label-group { margin-bottom: var(--kite-date-input-label-margin-bottom); } .kite-date-input__label { color: var(--kite-date-input-label-text-color); display: block; } .kite-date-input__helper-text { display: block; color: var(--kite-date-input-helper-text-color); font-size: var(--kite-date-input-helper-text-size); line-height: var(--kite-date-input-helper-text-line-height); } .kite-date-input__input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; height: var(--kite-date-input-height); } .kite-date-input__input-addon { background: transparent; border: 0; display: flex; align-items: center; text-align: center; white-space: nowrap; padding-top: var(--kite-date-input-addon-padding-top, var(--kite-form-control-addon-padding-top)); padding-right: var(--kite-date-input-addon-padding-right, var(--kite-form-control-addon-padding-right)); padding-bottom: var(--kite-date-input-addon-padding-bottom, var(--kite-form-control-addon-padding-bottom)); padding-left: var(--kite-date-input-addon-padding-left, var(--kite-form-control-addon-padding-left)); height: 100%; position: absolute; top: 0; right: 0; z-index: 2; } .kite-date-input__input-addon:first-child { right: auto; left: 0; } .kite-date-input__input-addon .kite-icon { --color: var(--kite-date-input-addon-icon-color, var(--kite-form-control-addon-icon-color)); --size: var(--kite-date-input-addon-icon-width, var(--kite-form-control-addon-icon-width)); } .kite-date-input__input-addon--button { cursor: var(--kite-cursor-action); text-decoration: none; user-select: none; } .kite-date-input__input-addon--button:focus-visible { outline-offset: var(--kite-date-input-addon-focus-ring-offset, var(--kite-form-control-addon-focus-ring-offset)); } .kite-date-input__input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance: none; background-color: transparent; border: 0; color: var(--kite-date-input-text-color); line-height: var(--kite-date-input-text-line-height); outline: none; padding-top: calc(var(--kite-date-input-padding-top) - var(--input-border-width)); padding-right: calc(var(--input-addon-total-width) - var(--input-border-width)); padding-bottom: calc(var(--kite-date-input-padding-bottom) - var(--input-border-width)); padding-left: calc(var(--kite-date-input-padding-left) - var(--input-border-width)); position: absolute; top: var(--input-border-width); left: var(--input-border-width); width: calc(100% - var(--input-border-width) * 2); height: calc(var(--kite-date-input-height) * var(--input-border-width) * 2); z-index: 1; } .kite-date-input__input::placeholder { color: var(--kite-date-input-placeholder-text-color); font-style: var(--kite-date-input-placeholder-text-style); } .kite-date-input__input:disabled::placeholder { color: var(--kite-date-input-disabled-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-date-input__input:disabled ~ .kite-date-input__appearance { border-color: GrayText; } } .kite-date-input__input::-webkit-calendar-picker-indicator { display: none; } .kite-date-input__input--focus-visible, .kite-date-input__input.kite-focus-visible, .kite-date-input__input:focus-visible { outline: none; } .kite-date-input__appearance { background-color: var(--kite-date-input-background-color); border: var(--input-border-width) var(--input-border-style) var(--input-border-color); border-radius: var(--kite-date-input-border-radius); color: var(--kite-date-input-text-color); width: 100%; height: 100%; position: relative; z-index: 0; } .kite-date-input .kite-form-control__error, .kite-date-input__feedback { color: var(--kite-date-input-error-feedback-text-color); display: none; margin-top: var(--kite-date-input-feedback-margin-top); } .kite-date-input .kite-picker--overlay { --translateY: calc(var(--kite-date-input-label-height) + var(--kite-date-input-label-margin-bottom) + var(--kite-date-input-height) + var(--kite-date-input-picker-offset)); } .kite-date-input .kite-picker__content { padding: var(--kite-date-input-picker-padding-top) var(--kite-date-input-picker-padding-right) var(--kite-date-input-picker-padding-bottom) var(--kite-date-input-picker-padding-left); } .kite-date-input.kite-form-control--error .kite-form-control__error, .kite-date-input.kite-form-control--error .kite-date-input__feedback, .kite-date-input--error .kite-form-control__error, .kite-date-input--error .kite-date-input__feedback { display: block; } .kite-date-input.kite-form-control--error .kite-picker__content, .kite-date-input--error .kite-picker__content { outline: var(--kite-calendar-error-border-width) var(--kite-form-control-picker-border-style) var(--kite-calendar-error-border-color); outline-offset: calc(var(--kite-calendar-error-border-width) * -1); } .kite-date-input--disabled .kite-date-input__label { color: var(--kite-date-input-disabled-label-text-color); } .kite-date-input--disabled .kite-date-input__helper-text { color: var(--kite-date-input-disabled-helper-text-color); } .kite-date-input--disabled .kite-date-input__input { color: var(--kite-date-input-disabled-text-color); cursor: var(--kite-date-input-disabled-cursor); } .kite-date-input--disabled .kite-date-input__input-addon { cursor: var(--kite-date-input-disabled-cursor, var(--kite-form-control-disabled-cursor)); } .kite-date-input--disabled .kite-date-input__input-addon .kite-icon { --color: var(--kite-date-input-disabled-text-color, var(--kite-form-control-disabled-text-color)); } .kite-calendar__header { width: calc(100% + var(--kite-date-input-picker-padding-right) + var(--kite-date-input-picker-padding-left)); margin-left: calc(var(--kite-date-input-picker-padding-right) * -1); display: flex; align-items: center; justify-content: space-between; } .kite-calendar__month-year { font-weight: var(--kite-calendar-month-year-text-weight); margin: var(--kite-calendar-month-year-margin-top) var(--kite-calendar-month-year-margin-right) var(--kite-calendar-month-year-margin-bottom) var(--kite-calendar-month-year-margin-left); } .kite-calendar__prev, .kite-calendar__next { border: 0; background: transparent; cursor: var(--kite-calendar-action-cursor); padding: var(--kite-calendar-controls-padding-top) var(--kite-calendar-controls-padding-right) var(--kite-calendar-controls-padding-bottom) var(--kite-calendar-controls-padding-left); color: var(--kite-calendar-controls-text-color); } .kite-calendar__prev--hidden, .kite-calendar__next--hidden { visibility: hidden; opacity: 0; } @media (hover: hover) and (pointer: fine) { .kite-calendar__prev--hover, .kite-calendar__prev.kite-hover, .kite-calendar__prev:hover, .kite-calendar__next--hover, .kite-calendar__next.kite-hover, .kite-calendar__next:hover { background-color: var(--kite-calendar-controls-hover-background-color); } } .kite-calendar__prev.kite-focus-visible, .kite-calendar__prev:focus-visible, .kite-calendar__next.kite-focus-visible, .kite-calendar__next:focus-visible { color: var(--kite-calendar-controls-focus-text-color); outline-offset: 0; } .kite-calendar__prev { border-radius: var(--kite-form-control-picker-border-radius) 0 0 0; } .kite-calendar__next { border-radius: 0 var(--kite-form-control-picker-border-radius) 0 0; } .kite-calendar__table { border-collapse: collapse; border-spacing: 0; text-align: center; width: 100%; } .kite-calendar__table-header, .kite-calendar__cell { height: var(--kite-calendar-day-height); width: var(--kite-calendar-day-width); text-align: var(--kite-calendar-day-text-align); } .kite-calendar__day { color: var(--kite-calendar-day-text-color); border: 1px solid transparent; background: transparent; cursor: var(--kite-calendar-action-cursor); position: relative; padding: 0; } .kite-calendar__day, .kite-calendar__day .kite-calendar__day-number { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--hover, .kite-calendar__day.kite-hover, .kite-calendar__day:hover { background-color: var(--kite-calendar-day-hover-background-color); } } .kite-calendar__day:focus-visible { outline: var(--kite-calendar-focus-ring-width) var(--kite-calendar-focus-ring-style) var(--kite-calendar-focus-ring-color); outline-offset: var(--kite-calendar-day-focus-ring-offset); } .kite-calendar__day--disabled { color: var(--kite-calendar-day-disabled-text-color); } .kite-calendar__day--unavailable { text-decoration: var(--kite-calendar-day-unavailable-text-decoration-line); text-decoration-thickness: var(--kite-calendar-day-unavailable-text-decoration-thickness); } .kite-calendar__day--invalid { text-decoration: var(--kite-calendar-day-invalid-text-decoration-line); text-decoration-thickness: var(--kite-calendar-day-invalid-text-decoration-thickness); } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--invalid.kite-calendar__day-hover, .kite-calendar__day--invalid.kite-hover, .kite-calendar__day--invalid:hover { background-color: var(--kite-calendar-day-invalid-hover-background-color); } } .kite-calendar__day--invalid:focus-visible, .kite-calendar__day--invalid.kite-focus-visible { outline-color: var(--kite-calendar-day-invalid-focus-ring-color); } .kite-calendar__day--invalid.kite-calendar__day--selected { background-color: var(--kite-calendar-day-invalid-selected-background-color); color: var(--kite-calendar-day-invalid-selected-text-color); } .kite-calendar__day--out-range { color: var(--kite-calendar-day-out-range-text-color); text-decoration: var(--kite-calendar-day-out-range-text-decoration-line); text-decoration-thickness: var(--kite-calendar-day-out-range-text-decoration-thickness); } .kite-calendar__day--out-range, .kite-calendar__day--disabled { cursor: var(--kite-calendar-day-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-calendar__day--out-range, .kite-calendar__day--disabled { color: GrayText; border-color: GrayText; } } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--out-range--hover, .kite-calendar__day--out-range.kite-hover, .kite-calendar__day--out-range:hover, .kite-calendar__day--disabled--hover, .kite-calendar__day--disabled.kite-hover, .kite-calendar__day--disabled:hover { background-color: transparent; } } .kite-calendar__day[aria-current=date] { color: var(--kite-calendar-day-today-text-color); position: relative; } .kite-calendar__day[aria-current=date]::after { content: ""; position: absolute; bottom: var(--kite-calendar-day-today-indicator-offset); width: var(--kite-calendar-day-today-indicator-width); height: var(--kite-calendar-day-today-indicator-height); background-color: var(--kite-calendar-day-today-indicator-background-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-calendar__day[aria-current=date] { color: Highlight; } } .kite-calendar__day--selected { background-color: var(--kite-calendar-day-selected-background-color); color: var(--kite-calendar-day-selected-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-calendar__day--selected, .kite-calendar__day--selected.kite-calendar__day--invalid { background-color: SelectedItem; } } .kite-calendar__day--selected[aria-disabled=true] { cursor: default; } .kite-calendar__day--prev-month:not(.kite-calendar__day--selected), .kite-calendar__day--next-month:not(.kite-calendar__day--selected) { color: var(--kite-calendar-day-out-month-text-color); } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--prev-month--hover:not(.kite-calendar__day--disabled), .kite-calendar__day--prev-month.kite-hover:not(.kite-calendar__day--disabled), .kite-calendar__day--prev-month:hover:not(.kite-calendar__day--disabled), .kite-calendar__day--next-month--hover:not(.kite-calendar__day--disabled), .kite-calendar__day--next-month.kite-hover:not(.kite-calendar__day--disabled), .kite-calendar__day--next-month:hover:not(.kite-calendar__day--disabled) { color: var(--kite-calendar-day-out-month-hover-text-color); } } .kite-calendar__day-due { position: absolute; bottom: calc(var(--kite-calendar-day-due-offset) * -1); text-transform: var(--kite-calendar-day-due-text-transform); background-color: var(--kite-calendar-day-due-background-color); color: var(--kite-calendar-day-due-text-color); font-size: var(--kite-calendar-day-due-text-size); line-height: var(--kite-calendar-day-due-text-line-height); border-radius: var(--kite-calendar-day-due-border-radius); border: 1px solid transparent; padding: calc(var(--kite-calendar-day-due-padding-top) - 1px) calc(var(--kite-calendar-day-due-padding-right) - 1px) calc(var(--kite-calendar-day-due-padding-bottom) - 1px) calc(var(--kite-calendar-day-due-padding-left) - 1px); z-index: 1; } .kite-calendar__feedback { padding: var(--kite-calendar-feedback-padding-top) var(--kite-calendar-feedback-padding-right) var(--kite-calendar-feedback-padding-bottom) var(--kite-calendar-feedback-padding-left); display: flex; gap: var(--kite-calendar-feedback-gap); color: var(--kite-calendar-error-feedback-text-color); } .kite-calendar__feedback .kite-icon { flex-shrink: 0; margin-top: var(--kite-calendar-error-feedback-icon-margin-top); --color: var(--kite-calendar-error-feedback-icon-color); } .kite-calendar--standalone { background-color: var(--kite-calendar-standalone-background-color); border: var(--kite-calendar-standalone-border-width) var(--kite-calendar-standalone-border-style) var(--kite-calendar-standalone-border-color); border-radius: var(--kite-calendar-standalone-border-radius); padding: var(--kite-calendar-standalone-padding-top) var(--kite-calendar-standalone-padding-right) var(--kite-calendar-standalone-padding-bottom) var(--kite-calendar-standalone-padding-left); min-width: var(--kite-calendar-standalone-min-width); min-height: var(--kite-calendar-standalone-min-height); } .kite-calendar--standalone .kite-calendar__header { width: 100%; margin-left: 0; } .kite-calendar--standalone .kite-calendar__table-header span:not(.kite-assistive-text), .kite-calendar--standalone .kite-calendar__day { aspect-ratio: 1/1; } .kite-calendar--standalone .kite-calendar__table-header span:not(.kite-assistive-text) { display: flex; justify-content: center; align-items: center; } .kite-calendar--standalone.kite-calendar--error { box-shadow: 0 0 0 var(--kite-calendar-error-border-width) var(--kite-calendar-error-border-color); border-color: transparent; } .kite-time-input { --selection-border-width: var(--kite-time-input-border-width); --selection-border-style: var(--kite-time-input-border-style); --selection-border-color: var(--kite-time-input-border-color); } .kite-time-input { position: relative; display: block; width: 100%; } @media only screen and (min-width: 30rem) { .kite-time-input { max-width: var(--kite-time-input-max-width); } } .kite-time-input__label-group { margin-bottom: var(--kite-time-input-label-margin-bottom); } .kite-time-input__label { color: var(--kite-time-input-label-color); display: inline-block; font-weight: var(--kite-time-input-label-text-weight); } .kite-time-input__helper-text { display: block; color: var(--kite-time-input-helper-text-color); font-size: var(--kite-time-input-helper-text-size); line-height: var(--kite-time-input-helper-text-line-height); } .kite-time-input__selection { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; background-color: var(--kite-time-input-background-color); border: var(--selection-border-width) var(--selection-border-style) var(--selection-border-color); border-radius: var(--kite-time-input-border-radius); color: var(--kite-time-input-text-color); cursor: var(--kite-time-input-cursor); display: flex; justify-content: space-between; line-height: var(--kite-time-input-text-line-height); margin: var(--kite-time-input-margin-top) var(--kite-time-input-margin-right) var(--kite-time-input-margin-bottom) var(--kite-time-input-margin-left); padding: calc(var(--kite-time-input-padding-top) - var(--selection-border-width)) calc(var(--kite-time-input-padding-right) - var(--selection-border-width)) calc(var(--kite-time-input-padding-bottom) - var(--selection-border-width)) calc(var(--kite-time-input-padding-left) - var(--selection-border-width)); width: 100%; text-align: left; height: var(--kite-time-input-height); -webkit-user-select: none; /* Safari */ user-select: none; } .kite-time-input__selection .kite-icon { --color: var(--kite-time-input-icon-color); --size: var(--kite-time-input-icon-size); flex-shrink: 0; margin-right: var(--kite-time-input-icon-margin-right); } .kite-time-input__selection.kite-focus-visible, .kite-time-input__selection:focus-visible { outline: var(--kite-time-input-focus-ring-width) var(--kite-time-input-focus-ring-style) var(--kite-time-input-focus-ring-color); outline-offset: var(--kite-time-input-focus-ring-offset); } .kite-time-input__selection:disabled, .kite-time-input__selection[aria-disabled=true] { --selection-border-color: var(--kite-time-input-disabled-border-color); background-color: var(--kite-time-input-disabled-background-color); color: var(--kite-time-input-disabled-text-color); cursor: var(--kite-time-input-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-time-input__selection:disabled, .kite-time-input__selection[aria-disabled=true] { border-color: GrayText; color: GrayText; } } .kite-time-input__selection:disabled .kite-icon, .kite-time-input__selection[aria-disabled=true] .kite-icon { --color: var(--kite-time-input-disabled-icon-color); } .kite-time-input__selection.kite-hover:not([aria-disabled=true], [disabled]), .kite-time-input__selection:hover:not([aria-disabled=true], [disabled]) { --selection-border-width: var(--kite-time-input-hover-border-width); } .kite-time-input__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--kite-time-input-placeholder-margin-right); margin-left: var(--kite-time-input-placeholder-margin-left); text-align: left; } .kite-time-input__value--placeholder { color: var(--kite-time-input-placeholder-text-color); font-style: var(--kite-time-input-placeholder-text-style); } .kite-time-input__feedback { display: none; color: var(--kite-time-input-error-feedback-text-color); margin-top: var(--kite-time-input-feedback-margin-top); } .kite-time-input--error .kite-time-input__selection { --selection-border-color: var(--kite-time-input-error-border-color); --selection-border-width: var(--kite-time-input-error-border-width); } .kite-time-input--error .kite-time-input__feedback { display: block; } .kite-time-input--disabled .kite-time-input__label, .kite-time-input--disabled .kite-time-input__value { color: var(--kite-time-input-disabled-text-color); } .kite-time-input--disabled .kite-time-input__helper-text { color: var(--kite-time-input-disabled-helper-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-time-input--disabled .kite-time-input__value { color: GrayText; } } .kite-picker { position: relative; } .kite-picker--list .kite-picker__content { padding: 0; } .kite-picker--open.kite-picker--overlay, .kite-picker--open .kite-picker__content { opacity: 1; visibility: visible; } .kite-picker--overlay { /** Positioning props **/ --translateX: 0; --label-height: calc(var(--kite-form-control-label-text-line-height) * var(--kite-form-control-label-text-size)); --translateY: calc(var(--label-height) + var(--kite-form-control-label-margin-bottom) + var(--kite-form-control-height) + var(--kite-form-control-picker-offset)); /** @prop --picker-trigger-width: Represents the width of a picker's trigger element. May require dynamic calculation */ --picker-trigger-width: 0; /** @prop --picker-trigger-height: Represents the height of a picker's trigger element. May require dynamic calculation */ --picker-trigger-height: 0; /** Positioning styles **/ position: absolute; top: 0; left: 0; right: 0; transform: translate(var(--translateX), var(--translateY)); z-index: var(--kite-form-control-picker-zindex); visibility: hidden; opacity: 0; /** Positioning variants **/ } .kite-picker--overlay.kite-picker--top { --translateY: calc(-100% - var(--picker-trigger-height) - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--bottom { --translateY: var(--kite-form-control-picker-offset); } .kite-picker--overlay.kite-picker--right { --translateX: calc(var(--picker-trigger-width) + var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--left { --translateX: calc(-100% - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--top, .kite-picker--overlay.kite-picker--bottom { --translateX: calc(-50% + (var(--picker-trigger-width) / 2)); } .kite-picker--overlay.kite-picker--top.kite-picker--align-start, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-start { --translateX: 0; } .kite-picker--overlay.kite-picker--top.kite-picker--align-end, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-end { --translateX: calc(-100% + var(--picker-trigger-width)); } .kite-picker--overlay.kite-picker--right, .kite-picker--overlay.kite-picker--left { --translateY: -50%; } .kite-picker--overlay.kite-picker--right.kite-picker--align-start, .kite-picker--overlay.kite-picker--left.kite-picker--align-start { --translateY: calc(-1 * var(--picker-trigger-height)); } .kite-picker--overlay.kite-picker--right.kite-picker--align-end, .kite-picker--overlay.kite-picker--left.kite-picker--align-end { --translateY: -100%; } .kite-picker__content { background-color: var(--kite-form-control-picker-background-color); border: var(--kite-form-control-picker-border-width) var(--kite-form-control-picker-border-style) var(--kite-form-control-picker-border-color); border-radius: var(--kite-form-control-picker-border-radius); box-shadow: var(--kite-form-control-picker-elevation); display: block; padding: var(--kite-form-control-picker-padding-top) var(--kite-form-control-picker-padding-right) var(--kite-form-control-picker-padding-bottom) var(--kite-form-control-picker-padding-left); opacity: 0; visibility: hidden; min-width: var(--kite-form-control-picker-min-width); width: 100%; } .kite-picker__list { cursor: var(--kite-form-control-picker-cursor); list-style-type: none; margin: 0; padding: 0; --max-item-count: ; --picker-list-item-height: calc(((var(--kite-form-control-picker-list-item-line-height) * 1rem) + var(--kite-form-control-picker-list-item-padding-top) + var(--kite-form-control-picker-list-item-padding-bottom) + var(--kite-form-control-picker-list-item-border-width))); --picker-list-max-height: calc(var(--picker-list-item-height) * var(--max-item-count)); max-height: calc(var(--picker-list-max-height) + 0.5 * var(--picker-list-item-height)); overflow-y: auto; } .kite-picker__item { margin: 0; padding: 0; min-width: 100%; max-width: var(--kite-form-control-picker-list-item-max-width); } .kite-picker__item:not(:last-child) .kite-picker__action { border-bottom: var(--kite-form-control-picker-list-item-border-width) var(--kite-form-control-picker-list-item-border-style) var(--kite-form-control-picker-list-item-border-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action, .kite-picker__item.kite-picker__item--negative a.kite-picker__action { color: var(--kite-form-control-picker-list-item-negative-text-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action .kite-icon, .kite-picker__item.kite-picker__item--negative a.kite-picker__action .kite-icon { --color: var(--kite-form-control-picker-list-item-negative-icon-color); } .kite-picker a.kite-picker__action, .kite-picker__action { align-items: center; background-color: transparent; border: 0; color: var(--kite-form-control-picker-list-item-text-color); cursor: var(--kite-form-control-picker-cursor); display: inline-flex; font-size: var(--kite-form-control-picker-list-item-text-size); line-height: var(--kite-form-control-picker-list-item-line-height); padding: var(--kite-form-control-picker-list-item-padding-top) var(--kite-form-control-picker-list-item-padding-right) var(--kite-form-control-picker-list-item-padding-bottom) var(--kite-form-control-picker-list-item-padding-left); text-align: left; text-decoration: unset; width: 100%; } .kite-picker a.kite-picker__action:focus-visible, .kite-picker a.kite-picker__action.kite-focus-visible, .kite-picker__action:focus-visible, .kite-picker__action.kite-focus-visible { outline: var(--kite-form-control-picker-list-item-focus-ring-width) var(--kite-form-control-picker-list-item-focus-ring-style) var(--kite-form-control-picker-list-item-focus-ring-color); outline-offset: var(--kite-form-control-picker-list-item-focus-ring-offset); } .kite-picker a.kite-picker__action-icon, .kite-picker__action-icon { display: inline; } .kite-picker a.kite-picker__action-icon .kite-icon, .kite-picker__action-icon .kite-icon { --size: var(--kite-form-control-picker-list-item-icon-width); margin-right: var(--kite-form-control-picker-list-item-icon-margin-right); vertical-align: text-bottom; } .kite-picker a.kite-picker__action-check .kite-icon, .kite-picker__action-check .kite-icon { --color: none; --size: var(--kite-form-control-picker-list-item-check-icon-width); flex-shrink: 0; margin-right: var(--kite-form-control-picker-list-item-check-icon-margin-right); margin-left: var(--kite-form-control-picker-list-item-check-icon-margin-left); vertical-align: text-bottom; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg, .kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg { fill: none; } } .kite-picker a.kite-picker__action-check--selected .kite-icon, .kite-picker__action-check--selected .kite-icon { --color: var(--kite-form-control-picker-list-item-check-icon-color); } .kite-picker a.kite-picker__action--hover, .kite-picker a.kite-picker__action.kite-hover, .kite-picker a.kite-picker__action:hover, .kite-picker__action--hover, .kite-picker__action.kite-hover, .kite-picker__action:hover { background-color: var(--kite-form-control-picker-list-item-hover-background-color); text-decoration: unset; } .kite-picker a.kite-picker__action[aria-selected=true], .kite-picker a.kite-picker__action[aria-checked=true], .kite-picker a.kite-picker__action[aria-current], .kite-picker__action[aria-selected=true], .kite-picker__action[aria-checked=true], .kite-picker__action[aria-current] { font-weight: var(--kite-form-control-picker-list-item-selected-text-weight); } .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: var(--kite-form-control-picker-list-item-disabled-text-color); cursor: var(--kite-form-control-picker-list-item-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: GrayText; } } .kite-picker a.kite-picker__action:disabled:hover, .kite-picker a.kite-picker__action[aria-disabled=true]:hover, .kite-picker__action:disabled:hover, .kite-picker__action[aria-disabled=true]:hover { background-color: transparent; } .kite-picker__backdrop { background-color: var(--kite-form-control-picker-backdrop-background-color); opacity: var(--kite-form-control-picker-backdrop-opacity); pointer-events: auto; touch-action: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--kite-form-control-picker-backdrop-zindex); } .kite-picker__backdrop--hidden { opacity: 0; visibility: hidden; } .kite-date-input .kite-picker { webkit-transform: initial; transform: initial; transition: initial; position: relative; } .kite-dialog { /** @prop --backdrop-background-color: Background color of dialog overlay */ --backdrop-background-color: var(--kite-dialog-overlay-background-color); --dismiss-icon-color: var(--kite-dialog-dismiss-icon-color); } .kite-dialog { align-items: var(--kite-dialog-position-y); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: var(--kite-dialog-overlay-zindex); display: flex; justify-content: space-around; visibility: hidden; } .kite-dialog__container { --translate: 0px, 0px; box-shadow: var(--kite-dialog-elevation); display: inline-flex; max-width: var(--kite-dialog-max-width); padding: var(--kite-dialog-padding-top) var(--kite-dialog-padding-right) var(--kite-dialog-padding-bottom) var(--kite-dialog-padding-left); position: relative; vertical-align: middle; width: var(--kite-dialog-width); height: var(--kite-dialog-height); border-width: var(--kite-dialog-border-width); transform: translate(var(--translate)); transition: transform var(--kite-dialog-transition-duration) var(--kite-dialog-transition-timing-function), visibility var(--kite-dialog-transition-duration) var(--kite-dialog-transition-timing-function); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-dialog__container { border: 1px solid CanvasText; } } @media only screen and (min-width: 37.5rem) { .kite-dialog__container { border-radius: var(--kite-dialog-breakpoint-md-border-radius); max-height: var(--kite-dialog-breakpoint-md-max-height); padding: var(--kite-dialog-breakpoint-md-padding-top) var(--kite-dialog-breakpoint-md-padding-right) var(--kite-dialog-breakpoint-md-padding-bottom) var(--kite-dialog-breakpoint-md-padding-left); width: var(--kite-dialog-breakpoint-md-width); height: auto; } } @media only screen and (min-width: 52.5rem) { .kite-dialog__container { width: var(--kite-dialog-breakpoint-lg-width); } } @media only screen and (min-width: 60rem) { .kite-dialog__container { max-height: var(--kite-dialog-breakpoint-xl-max-height); } } @media only screen and (min-width: 80rem) { .kite-dialog__container { width: var(--kite-dialog-breakpoint-2xl-width); } } .kite-dialog__container-document { display: flex; flex-direction: column; width: 100%; } .kite-dialog__content { margin-right: calc(var(--kite-dialog-content-padding-right) * -1); margin-bottom: calc(var(--kite-dialog-content-padding-bottom) * -1); margin-left: calc(var(--kite-dialog-content-padding-left) * -1); overflow-x: hidden; overflow-y: auto; padding: var(--kite-dialog-content-padding-top) var(--kite-dialog-content-padding-right) var(--kite-dialog-content-padding-bottom) var(--kite-dialog-content-padding-left); } @media only screen and (min-width: 37.5rem) { .kite-dialog__content { margin-right: calc(var(--kite-dialog-breakpoint-md-padding-right) * -1); margin-bottom: calc(var(--kite-dialog-breakpoint-md-padding-bottom) * -1); margin-left: calc(var(--kite-dialog-breakpoint-md-padding-left) * -1); padding-right: var(--kite-dialog-breakpoint-md-padding-right); padding-bottom: var(--kite-dialog-breakpoint-md-padding-bottom); padding-left: var(--kite-dialog-breakpoint-md-padding-left); } } .kite-dialog__content--scrolled { border-top: var(--kite-dialog-scrolled-border-top-width) var(--kite-dialog-scrolled-border-top-style) var(--kite-dialog-scrolled-border-top-color); box-shadow: inset var(--kite-dialog-scrolled-elevation); } .kite-dialog__content-group + .kite-dialog__content-group { margin-top: var(--kite-dialog-content-group-margin-top); } .kite-dialog__backdrop { background-color: var(--backdrop-background-color); opacity: var(--kite-dialog-overlay-opacity); pointer-events: none; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; } .kite-dialog__dismiss-button { background-color: transparent; border: 0; cursor: var(--kite-dialog-dismiss-icon-cursor); font-size: 0; padding: 0; position: absolute; top: var(--kite-size-20); right: var(--kite-size-16); width: var(--kite-dialog-dismiss-icon-width); height: var(--kite-dialog-dismiss-icon-height); } @media only screen and (min-width: 37.5rem) { .kite-dialog__dismiss-button { top: var(--kite-size-24); right: var(--kite-size-24); } } .kite-dialog__dismiss-button .kite-icon { --color: var(--dismiss-icon-color); --size: var(--kite-dialog-dismiss-icon-height); } .kite-dialog__title { align-items: center; display: flex; font-size: var(--kite-dialog-title-text-size); font-weight: var(--kite-dialog-title-text-weight); line-height: var(--kite-dialog-title-text-line-height); margin-bottom: var(--kite-dialog-title-margin-bottom); } @media only screen and (min-width: 37.5rem) { .kite-dialog__title { font-size: var(--kite-dialog-breakpoint-md-title-text-size); font-weight: var(--kite-dialog-breakpoint-md-title-text-weight); line-height: var(--kite-dialog-breakpoint-md-title-text-line-height); } } .kite-dialog__title .kite-icon { align-self: flex-start; flex-shrink: 0; margin-top: calc((var(--kite-dialog-title-text-line-height) - 1) * var(--kite-dialog-title-text-size) / 2); margin-right: var(--kite-dialog-title-icon-margin-right); } .kite-dialog .kite-button-group { flex-basis: 0; margin-bottom: 0; gap: var(--kite-button-group-item-margin-right); display: flex; flex-direction: column; } .kite-dialog .kite-button-group .kite-button { width: 100%; } @media only screen and (min-width: 30rem) { .kite-dialog .kite-button-group { flex-direction: row; } .kite-dialog .kite-button-group .kite-button { flex-grow: 1; flex-shrink: 0; flex-basis: calc(50% - 0.5 * var(--kite-button-group-item-margin-right)); margin-right: 0; width: auto; } .kite-dialog .kite-button-group .kite-button:only-child { flex-grow: 0; flex-basis: content; min-width: calc(50% - 0.5 * var(--kite-button-group-item-margin-right)); } .kite-dialog .kite-button-group .kite-button:nth-of-type(3) { flex-grow: 0; margin-right: auto; margin-left: auto; } } .kite-dialog .kite-alert { margin-top: var(--kite-dialog-alert-margin-top); margin-bottom: var(--kite-dialog-alert-margin-bottom); } .kite-button-group { align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; margin: var(--kite-button-group-margin-top) 0 var(--kite-button-group-margin-bottom); margin-right: 0; padding: unset; list-style: none; } .kite-button-group__item { margin-bottom: var(--kite-button-group-item-margin-bottom); padding: unset; } @media only screen and (min-width: 30rem) { .kite-button-group__item { display: inline-block; margin-right: var(--kite-button-group-item-margin-right); } } .kite-button-group--full .kite-button-group__item { width: 100%; } form .kite-button-group, .kite-button-group--form { flex-direction: column; } @media only screen and (min-width: 37.5rem) { form .kite-button-group, .kite-button-group--form { display: block; } form .kite-button-group__item:nth-child(3), .kite-button-group--form__item:nth-child(3) { display: block; } form .kite-button-group__item:only-child, .kite-button-group--form__item:only-child { margin: 0; } } @media only screen and (min-width: 52.5rem) { form .kite-button-group, .kite-button-group--form { display: flex; flex-direction: row; } } .kite-dialog__container .kite-dialog__content .kite-progress { background-color: var(--backdrop-color); z-index: var(--kite-zindex-default); } .kite-dialog__container .kite-dialog__content .kite-button-group .kite-progress { background-color: unset; } .kite-dialog__backdrop { --backdrop-background-color: var(--kite-dialog-overlay-background-color); z-index: var(--kite-dialog-zindex); } .rk-dialog__visible { visibility: visible; } .kite-dynamic-hint { --arrow-background-color: var(--kite-dynamic-hint-arrow-background-color); --arrow-border-color: var(--kite-dynamic-hint-arrow-border-color); --arrow-border-width: var(--kite-dynamic-hint-arrow-border-width); --background-color: var(--kite-dynamic-hint-background-color); --border-color: var(--kite-dynamic-hint-border-color); --color: var(--kite-dynamic-hint-text-color); --elevation: var(--kite-dynamic-hint-elevation); --error-color: var(--kite-dynamic-hint-criteria-negative-icon-color); --success-color: var(--kite-dynamic-hint-criteria-positive-icon-color); /* --icon-inline-offset: Offset to visually center-align icons inline with Rutledge, and default line-heights */ --icon-inline-offset: -0.1em; } .kite-dynamic-hint-container { position: relative; } .kite-dynamic-hint { background-color: var(--background-color); border: var(--kite-dynamic-hint-border-width) var(--kite-dynamic-hint-border-style) var(--border-color); border-radius: var(--kite-dynamic-hint-border-radius); box-shadow: var(--elevation); color: var(--color); display: none; margin: calc(var(--kite-dynamic-hint-arrow-height) + var(--kite-dynamic-hint-margin-top)) 0 var(--kite-dynamic-hint-margin-bottom) 0; max-width: var(--kite-dynamic-hint-max-width); padding: var(--kite-dynamic-hint-padding-top) var(--kite-dynamic-hint-padding-right) var(--kite-dynamic-hint-padding-bottom) var(--kite-dynamic-hint-padding-left); position: relative; z-index: var(--kite-dynamic-hint-zindex); font-size: var(--kite-dynamic-hint-text-size); text-align: left; font-family: var(--kite-font-family); font-style: var(--kite-typography-body-style); font-weight: var(--kite-typography-body-weight); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); text-transform: none; } .kite-dynamic-hint::after, .kite-dynamic-hint::before { content: ""; position: absolute; width: 0; height: 0; z-index: var(--kite-dynamic-hint-zindex); border-style: solid; border-color: transparent; border-bottom-width: var(--kite-dynamic-hint-arrow-height); border-left-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); border-right-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); border-top-width: var(--kite-dynamic-hint-arrow-height); --arrow-translate-x: calc(1 * var(--kite-dynamic-hint-arrow-offset)); --arrow-translate-y: calc(-2 * var(--kite-dynamic-hint-arrow-height)); top: 0; right: auto; bottom: auto; left: 0; transform: translate(var(--arrow-translate-x), var(--arrow-translate-y)); } .kite-dynamic-hint::before { z-index: calc(var(--kite-dynamic-hint-zindex) + 1); border-bottom-color: var(--arrow-background-color); top: calc(2 * var(--arrow-border-width)); } .kite-dynamic-hint::after { border-bottom-color: var(--arrow-border-color); } @media only screen and (min-width: 52.5rem) { .kite-dynamic-hint { --offset-x: 0; --offset-y: 0; --transform-y: calc(var(--offset-y) - (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); --transform-x: calc(var(--offset-x) + var(--kite-dynamic-hint-arrow-height) + var(--kite-dynamic-hint-margin-left)); display: block; margin: 0; margin-right: -100%; position: absolute; transform: translate(var(--transform-x), var(--transform-y)); visibility: hidden; } .kite-dynamic-hint::after, .kite-dynamic-hint::before { --arrow-translate-x: calc(-2 * (var(--kite-dynamic-hint-arrow-height))); border-bottom-color: transparent; border-bottom-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); border-left-width: var(--kite-dynamic-hint-arrow-height); border-right-width: var(--kite-dynamic-hint-arrow-height); border-top-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); left: 0; right: auto; --arrow-translate-y: -50%; top: 50%; bottom: auto; transform: translate(var(--arrow-translate-x), var(--arrow-translate-y)); } .kite-dynamic-hint::before { border-right-color: var(--arrow-background-color); left: calc(2 * var(--arrow-border-width)); } .kite-dynamic-hint::after { border-right-color: var(--arrow-border-color); } .kite-dynamic-hint--show { visibility: visible; } .kite-dynamic-hint--left { --transform-x: calc(var(--offset-x) - var(--kite-dynamic-hint-arrow-height) - var(--kite-dynamic-hint-margin-top)); } .kite-dynamic-hint--left::after, .kite-dynamic-hint--left::before { --arrow-translate-x: calc(2 * (var(--kite-dynamic-hint-arrow-height))); border-color: transparent; border-bottom-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); border-left-width: var(--kite-dynamic-hint-arrow-height); border-right-width: var(--kite-dynamic-hint-arrow-height); border-top-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); left: auto; right: 0; } .kite-dynamic-hint--left::before { border-left-color: var(--arrow-background-color); right: calc(2 * var(--arrow-border-width)); } .kite-dynamic-hint--left::after { border-left-color: var(--arrow-border-color); } .kite-dynamic-hint--right { --transform-x: calc(var(--offset-x) + var(--kite-dynamic-hint-arrow-height) + var(--kite-dynamic-hint-margin-left)); } .kite-dynamic-hint--right::after, .kite-dynamic-hint--right::before { --arrow-translate-x: calc(-2 * (var(--kite-dynamic-hint-arrow-height))); border-bottom-color: transparent; border-bottom-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); border-left-width: var(--kite-dynamic-hint-arrow-height); border-right-width: var(--kite-dynamic-hint-arrow-height); border-top-width: calc(var(--kite-dynamic-hint-arrow-width) / 2); left: 0; right: auto; } .kite-dynamic-hint--right::before { border-right-color: var(--arrow-background-color); left: calc(2 * var(--arrow-border-width)); } .kite-dynamic-hint--right::after { border-right-color: var(--arrow-border-color); } .kite-dynamic-hint--align-start { --transform-y: calc(var(--offset-y) - (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); } .kite-dynamic-hint--align-start::after, .kite-dynamic-hint--align-start::before { --arrow-translate-y: calc(1 * var(--kite-dynamic-hint-arrow-offset)); top: 0; bottom: auto; } .kite-dynamic-hint--align-end { --transform-y: calc(var(--offset-y) + (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); } .kite-dynamic-hint--align-end::after, .kite-dynamic-hint--align-end::before { --arrow-translate-y: calc(-1 * var(--kite-dynamic-hint-arrow-offset)); top: auto; bottom: 0; } .kite-dynamic-hint--top-right { --transform-x: calc(var(--offset-x) + var(--kite-dynamic-hint-arrow-height) + var(--kite-dynamic-hint-margin-left)); --transform-y: calc(var(--offset-y) + (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); position: absolute; } .kite-dynamic-hint--top-right::after, .kite-dynamic-hint--top-right::before { border-bottom: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; border-left: var(--kite-dynamic-hint-arrow-height) solid transparent; border-right: var(--kite-dynamic-hint-arrow-height) solid transparent; border-top: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; content: ""; position: absolute; top: auto; bottom: 0; transform: translate(calc(-2 * (var(--kite-dynamic-hint-arrow-height))), calc(-1 * var(--kite-dynamic-hint-arrow-offset))); width: 0; height: 0; } .kite-dynamic-hint--top-right::before { border-right-color: var(--arrow-background-color); left: calc(2 * var(--arrow-border-width)); z-index: calc(var(--kite-dynamic-hint-zindex) + 1); } .kite-dynamic-hint--top-right::after { border-right-color: var(--arrow-border-color); left: 0; z-index: var(--kite-dynamic-hint-zindex); } .kite-dynamic-hint--bottom-left { --transform-x: calc(var(--offset-x) - var(--kite-dynamic-hint-arrow-height) - var(--kite-dynamic-hint-margin-top)); --transform-y: calc(var(--offset-y) - (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); position: absolute; } .kite-dynamic-hint--bottom-left::after, .kite-dynamic-hint--bottom-left::before { border-bottom: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; border-left: var(--kite-dynamic-hint-arrow-height) solid transparent; border-right: var(--kite-dynamic-hint-arrow-height) solid transparent; border-top: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; content: ""; position: absolute; top: 0; bottom: auto; transform: translate(calc(2 * (var(--kite-dynamic-hint-arrow-height))), var(--kite-dynamic-hint-arrow-offset)); width: 0; height: 0; } .kite-dynamic-hint--bottom-left::before { border-left-color: var(--arrow-background-color); right: calc(2 * var(--arrow-border-width)); left: auto; z-index: calc(var(--kite-dynamic-hint-zindex) + 1); } .kite-dynamic-hint--bottom-left::after { border-left-color: var(--arrow-border-color); right: 0; left: auto; z-index: var(--kite-dynamic-hint-zindex); } .kite-dynamic-hint--top-left { --transform-x: calc(var(--offset-x) - var(--kite-dynamic-hint-arrow-height) - var(--kite-dynamic-hint-margin-top)); --transform-y: calc(var(--offset-y) + (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); position: absolute; } .kite-dynamic-hint--top-left::after, .kite-dynamic-hint--top-left::before { border-bottom: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; border-left: var(--kite-dynamic-hint-arrow-height) solid transparent; border-right: var(--kite-dynamic-hint-arrow-height) solid transparent; border-top: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; content: ""; position: absolute; top: auto; bottom: 0; transform: translate(calc(2 * (var(--kite-dynamic-hint-arrow-height))), calc(-1 * var(--kite-dynamic-hint-arrow-offset))); width: 0; height: 0; } .kite-dynamic-hint--top-left::before { border-left-color: var(--arrow-background-color); right: calc(2 * var(--arrow-border-width)); left: auto; z-index: calc(var(--kite-dynamic-hint-zindex) + 1); } .kite-dynamic-hint--top-left::after { border-left-color: var(--arrow-border-color); right: 0; left: auto; z-index: var(--kite-dynamic-hint-zindex); } .kite-dynamic-hint--bottom-right { --transform-x: calc(var(--offset-x) + var(--kite-dynamic-hint-arrow-height) + var(--kite-dynamic-hint-margin-left)); --transform-y: calc(var(--offset-y) - (var(--kite-dynamic-hint-arrow-offset) + (var(--kite-dynamic-hint-arrow-width) / 2))); } .kite-dynamic-hint--bottom-right::after, .kite-dynamic-hint--bottom-right::before { border-bottom: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; border-left: var(--kite-dynamic-hint-arrow-height) solid transparent; border-right: var(--kite-dynamic-hint-arrow-height) solid transparent; border-top: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; content: ""; position: absolute; top: 0; bottom: auto; transform: translate(calc(-2 * (var(--kite-dynamic-hint-arrow-height))), var(--kite-dynamic-hint-arrow-offset)); width: 0; height: 0; } .kite-dynamic-hint--bottom-right::before { border-right-color: var(--arrow-background-color); left: calc(2 * var(--arrow-border-width)); z-index: calc(var(--kite-dynamic-hint-zindex) + 1); } .kite-dynamic-hint--bottom-right::after { border-right-color: var(--arrow-border-color); left: 0; z-index: var(--kite-dynamic-hint-zindex); } .kite-dynamic-hint--mobile, .kite-dynamic-hint--inline { margin: calc(var(--kite-dynamic-hint-arrow-height) + var(--kite-dynamic-hint-margin-top)) 0 var(--kite-dynamic-hint-margin-bottom) 0; position: relative; } .kite-dynamic-hint--mobile::after, .kite-dynamic-hint--mobile::before, .kite-dynamic-hint--inline::after, .kite-dynamic-hint--inline::before { border-bottom: var(--kite-dynamic-hint-arrow-height) solid transparent; border-left: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; border-right: calc(var(--kite-dynamic-hint-arrow-width) / 2) solid transparent; border-top: var(--kite-dynamic-hint-arrow-height) solid transparent; content: ""; position: absolute; right: auto; left: 0; transform: translate(var(--kite-dynamic-hint-arrow-offset), calc(-2 * (var(--kite-dynamic-hint-arrow-height)))); width: 0; height: 0; } .kite-dynamic-hint--mobile::before, .kite-dynamic-hint--inline::before { border-bottom-color: var(--arrow-background-color); top: calc(2 * var(--arrow-border-width)); z-index: calc(var(--kite-dynamic-hint-zindex) + 1); } .kite-dynamic-hint--mobile::after, .kite-dynamic-hint--inline::after { border-bottom-color: var(--arrow-border-color); top: 0; z-index: var(--kite-dynamic-hint-zindex); } } .kite-dynamic-hint--show { display: block; } .kite-dynamic-hint__criteria-list { list-style: none; margin: 0; padding: 0; } .kite-dynamic-hint__title { font-weight: var(--kite-dynamic-hint-title-text-weight); margin-bottom: var(--kite-dynamic-hint-title-margin-bottom); } .kite-dynamic-hint__error-icon, .kite-dynamic-hint__success-icon { margin-top: var(--kite-icon-inline-offset); } .kite-dynamic-hint__criteria-item { display: flex; font-size: var(--kite-dynamic-hint-criteria-text-size); margin-bottom: var(--kite-dynamic-hint-criteria-margin-bottom); padding-left: 0; } .kite-dynamic-hint__criteria-item:last-of-type { margin-bottom: 0; } .kite-dynamic-hint__criteria-item--success .kite-dynamic-hint__error-icon { display: none; } .kite-dynamic-hint__criteria-item--success .kite-icon { --color: var(--success-color); } .kite-dynamic-hint__criteria-item--error .kite-dynamic-hint__success-icon { display: none; } .kite-dynamic-hint__criteria-item--error .kite-icon { --color: var(--error-color); } .kite-dynamic-hint__criteria-item .kite-icon { --size: var(--kite-dynamic-hint-criteria-icon-width); flex-shrink: 0; margin-right: var(--kite-dynamic-hint-criteria-icon-margin-right); vertical-align: middle; } .kite-icon { /** @deprecated: Use `--color` instead */ /** @since: v2.0.0 */ /** @prop --fill: Fill color of the icon. Deprecated: Use `--color` instead. */ --fill: currentColor; /** @prop --color: Color of the icon */ --color: var(--fill, currentColor); /** @prop --size: Width and Height of the icon */ --size: 1em; /** @prop --offset: inline icon vertical icon alignment */ --offset: 0; contain: strict; display: inline-block; position: relative; bottom: calc(var(--offset) * 0.1em); width: var(--size); height: var(--size); } .kite-icon--inline { --offset: 1; vertical-align: middle; } .kite-icon__inner { width: 100%; height: 100%; } .kite-icon__inner svg { display: block; fill: var(--color); width: 100%; height: 100%; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-icon__inner svg { fill: currentColor; } } .kite-image { --max-size: 100%; --max-width: var(--max-size); --max-height: var(--max-size); --border-radius: var(--kite-border-radius); align-items: center; display: flex; flex-direction: column; justify-content: center; overflow: hidden; width: var(--max-width); height: var(--max-height); } .kite-image--start { align-items: flex-start; } .kite-image--circle { border-radius: 100%; } .kite-image--circle .kite-image__container, .kite-image--cover .kite-image__container { width: 100%; height: 100%; } .kite-image--circle .kite-image__container img, .kite-image--cover .kite-image__container img { object-fit: cover; } .kite-image__container { border-radius: var(--border-radius); overflow: hidden; } .kite-image img { display: block; object-fit: contain; width: 100%; height: 100%; } .kite-list { --multiline-title-height: calc(var(--kite-list-item-multiline-title-text-size) * var(--kite-typography-lg-body-line-height, 1.5)); --border-color: var(--kite-list-border-color); --label-text-color: var(--kite-list-item-label-text-color); --label-icon-color: var(--kite-list-item-label-icon-color); --negative-label-text-color: var(--kite-list-item-negative-label-text-color); --neutral-label-text-color: var(--kite-list-item-neutral-label-text-color); --muted-label-text-color: var(--kite-list-item-muted-label-text-color); --positive-label-text-color: var(--kite-list-item-positive-label-text-color); --caution-label-text-color: var(--kite-list-item-caution-label-text-color); --text-color: var(--kite-list-item-text-color); --icon-color: var(--kite-list-item-icon-color); --action-icon-color: var(--kite-list-item-action-icon-color); --disabled-icon-color: var(--kite-list-item-disabled-icon-color); --hover-background-color: var(--kite-list-item-hover-background-color); } ul.kite-list { list-style: none; margin: 0; padding: 0; } ul.kite-list > li { line-height: inherit; margin: 0; padding: 0; } .kite-list { border-top: var(--kite-list-border-width) var(--kite-list-border-style) var(--border-color); } .kite-list--align-items { --start-area: max-content; --center-area: 1fr; --end-area: min-content; display: grid; grid-template-columns: var(--start-area) var(--center-area) var(--end-area); grid-template-areas: "start center end"; } @media only screen and (min-width: 30rem) { .kite-list--align-items { --end-area: max-content; } } .kite-list--align-items .kite-list-item__start { grid-area: start; } .kite-list--align-items .kite-list-item__center { grid-area: center; } .kite-list--align-items .kite-list-item__end { grid-area: end; } .kite-list--align-items.kite-list *:not([hidden], .kite-list-item__inner *, .kite-list-item__expandable-container, .kite-list-item__expandable-container *) { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; grid-auto-flow: column; } .kite-list--align-items .kite-list-item__expandable-container { grid-column: 1/-1; } .kite-list-item { --start-align-offset: 0; display: block; position: relative; } .kite-list-item--disabled { --icon-color: var(--kite-list-item-disabled-icon-color); --text-color: var(--kite-list-item-disabled-text-color); --label-text-color: var(--text-color); --negative-label-text-color: var(--label-text-color); --neutral-label-text-color: var(--label-text-color); --muted-label-text-color: var(--label-text-color); --positive-label-text-color: var(--label-text-color); color: var(--text-color); } .kite-list-item--disabled .kite-list-item__action, .kite-list-item--disabled .kite-list-item__content { cursor: var(--kite-list-item-disabled-cursor); } .kite-list-item--disabled .kite-list-item__action:hover, .kite-list-item--disabled .kite-list-item__content:hover { background-color: transparent; } .kite-list-item--danger .kite-list-item__label, .kite-list-item--negative .kite-list-item__label { color: var(--negative-label-text-color); } .kite-list-item--info .kite-list-item__label, .kite-list-item--neutral .kite-list-item__label { color: var(--neutral-label-text-color); } .kite-list-item--success .kite-list-item__label, .kite-list-item--positive .kite-list-item__label { color: var(--positive-label-text-color); } .kite-list-item--align-to-icon { --start-align-offset: calc( var(--kite-list-item-icon-width) + var(--kite-list-item-slot-start-margin-right) ); } .kite-list-item--align-to-thumbnail-sm { --start-align-offset: calc(var(--kite-list-item-image-sm-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-thumbnail-md { --start-align-offset: calc(var(--kite-list-item-image-md-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-thumbnail, .kite-list-item--align-to-thumbnail-lg { --start-align-offset: calc(var(--kite-list-item-image-lg-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-payment-logo { --start-align-offset: calc( var(--kite-payment-logo-width) + var(--kite-list-item-slot-start-margin-right) ); } .kite-list-item--popover .kite-list-item__center { flex-direction: unset; } .kite-list-item--popover .kite-popover { margin-top: 2px; } .kite-list-item--expanded .kite-list-item__expandable-content, .kite-list-item--expanded .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item--expanded .rk-kite-list-item__body { display: block; } .kite-list-item--expanded .kite-list-item__end > .kite-icon { transform: rotate(-180deg); } .kite-list-item::before { border-bottom: var(--kite-list-item-border-width) var(--kite-list-item-border-style) var(--kite-list-item-border-color); content: ""; position: absolute; left: 0; bottom: 0; width: 100%; } .kite-list-item__action, .kite-list-item__content { background-color: var(--kite-list-item-background-color); border: 0; color: var(--text-color); display: block; line-height: inherit; padding: var(--kite-list-item-padding-top) var(--kite-list-item-padding-right) var(--kite-list-item-padding-bottom) var(--kite-list-item-padding-left); position: relative; text-align: left; text-decoration: none; width: 100%; } .kite-list-item__action { cursor: var(--kite-list-item-cursor); } .kite-list-item__action.kite-hover, .kite-list-item__action:hover, .kite-list-item__action.kite-visited, .kite-list-item__action:visited { color: var(--text-color); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .kite-list-item__action.kite-hover, .kite-list-item__action:hover { background-color: var(--hover-background-color); } } .kite-list-item__action.kite-focus-visible, .kite-list-item__action:focus-visible { color: var(--text-color); outline-offset: var(--kite-list-item-focus-ring-offset); } .kite-list-item__inner { display: flex; flex-direction: row; } .kite-list-item__start > .kite-icon, .kite-list-item__end > .kite-icon { --color: var(--icon-color); --offset: 0; } .kite-list-item__start { display: flex; flex-direction: column; margin-right: var(--kite-list-item-slot-start-margin-right); max-width: var(--kite-list-item-slot-start-max-width); } .kite-list-item__start .kite-payment-logo { width: var(--kite-list-item-payment-logo-width); height: var(--kite-list-item-payment-logo-height); margin-top: var(--kite-list-item-payment-logo-margin-top); box-shadow: var(--kite-list-item-payment-logo-shadow); border-radius: var(--kite-list-item-payment-logo-border-radius); } .kite-list-item__start > .kite-icon { --size: var(--kite-list-item-icon-width); } .kite-list-item__center { display: flex; flex-direction: column; flex-grow: 1; padding-left: var(--start-align-offset); } .kite-list-item__center .kite-list-item__label { margin-top: var(--kite-list-item-multiline-subtitle-margin-bottom); } .kite-list-item__end { display: flex; align-self: flex-start; align-items: center; justify-self: flex-end; margin-left: var(--kite-list-item-slot-end-margin-left); } .kite-list-item__end--centered { align-self: center; } .kite-list-item__end > .kite-icon { --size: var(--kite-list-item-action-icon-width); min-height: calc(var(--size) * var(--kite-typography-body-line-height, 1.5)); margin-left: var(--kite-list-item-label-margin-right); flex-shrink: 0; transition: transform var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } .kite-list-item__end .kite-switch { margin-bottom: 0px; } .kite-list-item__label { color: var(--label-text-color); font-size: var(--kite-list-item-label-text-size); display: flex; align-items: center; } @media only screen and (min-width: 37.5rem) { .kite-list-item__label { white-space: nowrap; } } .kite-list-item__label .kite-icon { --size: var(--kite-list-item-label-icon-width); --color: var(--label-icon-color); margin-right: var(--kite-list-item-label-icon-margin-right); } .kite-list-item__label--negative { color: var(--negative-label-text-color); --label-icon-color: var(--kite-list-item-negative-label-icon-color); } .kite-list-item__label--positive { color: var(--positive-label-text-color); --label-icon-color: var(--kite-list-item-positive-label-icon-color); } .kite-list-item__label--neutral { color: var(--neutral-label-text-color); --label-icon-color: var(--kite-list-item-neutral-label-icon-color); } .kite-list-item__label--muted { color: var(--muted-label-text-color); --label-icon-color: var(--kite-list-item-muted-label-icon-color); } .kite-list-item__label--caution { color: var(--caution-label-text-color); --label-icon-color: var(--kite-list-item-caution-label-icon-color); } .kite-list-item__label--negative-icon { --label-icon-color: var(--kite-list-item-negative-label-icon-color); } .kite-list-item__label--positive-icon { --label-icon-color: var(--kite-list-item-positive-label-icon-color); } .kite-list-item__label--neutral-icon { --label-icon-color: var(--kite-list-item-neutral-label-icon-color); } .kite-list-item__label--muted-icon { --label-icon-color: var(--kite-list-item-muted-label-icon-color); } .kite-list-item__label--caution-icon { --label-icon-color: var(--kite-list-item-caution-label-icon-color); } .kite-list-item__image .kite-image { --max-width: var(--kite-list-item-image-max-width); --max-height: var(--kite-list-item-image-max-height); --border-radius: var(--kite-list-item-image-border-radius); justify-content: flex-start; } .kite-list-item__image--sm .kite-image { --max-width: var(--kite-list-item-image-sm-max-width); --max-height: var(--kite-list-item-image-sm-max-height); } .kite-list-item__image--md .kite-image { --max-width: var(--kite-list-item-image-md-max-width); --max-height: var(--kite-list-item-image-md-max-height); } .kite-list-item__image--lg .kite-image { --max-width: var(--kite-list-item-image-lg-max-width); --max-height: var(--kite-list-item-image-lg-max-height); } .kite-list-item .kite-title { font-size: var(--kite-list-item-title-text-size); font-weight: var(--kite-list-item-title-text-weight); line-height: var(--kite-list-item-title-text-line-height); } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-title { font-size: var(--kite-list-item-breakpoint-md-title-text-size); font-weight: var(--kite-list-item-breakpoint-md-title-text-weight); line-height: var(--kite-list-item-breakpoint-md-title-text-line-height); } } .kite-list-item .kite-title--body { font-size: var(--kite-list-item-title-body-text-size); font-weight: var(--kite-list-item-title-body-text-weight); line-height: var(--kite-list-item-title-body-text-line-height); } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-title--body { font-size: var(--kite-list-item-breakpoint-md-title-body-text-size); font-weight: var(--kite-list-item-breakpoint-md-title-body-text-weight); line-height: var(--kite-list-item-breakpoint-md-title-body-text-line-height); } } .kite-list-item .kite-subtitle { font-size: var(--kite-list-item-multiline-subtitle-text-size); margin-top: var(--kite-list-item-multiline-title-margin-bottom); } .kite-list-item .kite-menu--block .kite-picker--overlay { left: auto; } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-menu--block .kite-picker--overlay { left: 0; } } .kite-list-item__expandable-container { --max-height: 0; max-height: var(--max-height); overflow: hidden; } .kite-list-item__expandable-container--transitioning { transition: all var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-list-item__expandable-container--transitioning { transition-property: none; } } .kite-list-item__expandable-container--transitioning .kite-list-item__expandable-content, .kite-list-item__expandable-container--transitioning .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item__expandable-container--transitioning .rk-kite-list-item__body { transition: all var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-list-item__expandable-container--transitioning .kite-list-item__expandable-content, .kite-list-item__expandable-container--transitioning .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item__expandable-container--transitioning .rk-kite-list-item__body { transition-property: none; } } .kite-list-item__expandable-content, .kite-list-item .rk-kite-list-item__body { --opacity: 0; opacity: var(--opacity); display: none; text-align: left; padding: var(--kite-list-item-expandable-content-padding-top) var(--kite-list-item-expandable-content-padding-right) var(--kite-list-item-expandable-content-padding-bottom) var(--kite-list-item-expandable-content-padding-left); } .kite-list-item__expandable-content > :last-child, .kite-list-item .rk-kite-list-item__body > :last-child { margin-bottom: 0; } .kite-card .kite-list { border-top: 0; } .kite-card .kite-list-item:last-child::before { border-bottom: 0; } .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-sm); width: calc(100% - var(--kite-list-item-padding-left-sm) * 2); } @media only screen and (min-width: 37.5rem) { .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-md); width: calc(100% - var(--kite-list-item-padding-left-md) * 2); } } @media only screen and (min-width: 52.5rem) { .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-lg); width: calc(100% - var(--kite-list-item-padding-left-lg) * 2); } } .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-sm) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-sm) + var(--kite-list-item-padding-left)); } @media only screen and (min-width: 37.5rem) { .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-md) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-md) + var(--kite-list-item-padding-left)); } } @media only screen and (min-width: 52.5rem) { .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-lg) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-lg) + var(--kite-list-item-padding-left)); } } .kite-card .kite-list-item--sm::before { left: var(--kite-list-item-padding-left-sm); width: calc(100% - var(--kite-list-item-padding-left-sm) * 2); } .kite-card .kite-list-item--sm .kite-list-item__action, .kite-card .kite-list-item--sm .kite-list-item__content, .kite-card .kite-list-item--sm .kite-list-item__expandable-content, .kite-card .kite-list-item--sm .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--sm .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-sm) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-sm) + var(--kite-list-item-padding-left)); } .kite-card .kite-list-item--md::before { left: var(--kite-list-item-padding-left-md); width: calc(100% - var(--kite-list-item-padding-left-md) * 2); } .kite-card .kite-list-item--md .kite-list-item__action, .kite-card .kite-list-item--md .kite-list-item__content, .kite-card .kite-list-item--md .kite-list-item__expandable-content, .kite-card .kite-list-item--md .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--md .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-md) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-md) + var(--kite-list-item-padding-left)); } .kite-card .kite-list-item--lg::before { left: var(--kite-list-item-padding-left-lg); width: calc(100% - var(--kite-list-item-padding-left-lg) * 2); } .kite-card .kite-list-item--lg .kite-list-item__action, .kite-card .kite-list-item--lg .kite-list-item__content, .kite-card .kite-list-item--lg .kite-list-item__expandable-content, .kite-card .kite-list-item--lg .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--lg .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-lg) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-lg) + var(--kite-list-item-padding-left)); } .kite-list { --multiline-title-height: calc(var(--kite-list-item-multiline-title-text-size) * var(--kite-typography-lg-body-line-height, 1.5)); --border-color: var(--kite-list-border-color); --label-text-color: var(--kite-list-item-label-text-color); --label-icon-color: var(--kite-list-item-label-icon-color); --negative-label-text-color: var(--kite-list-item-negative-label-text-color); --neutral-label-text-color: var(--kite-list-item-neutral-label-text-color); --muted-label-text-color: var(--kite-list-item-muted-label-text-color); --positive-label-text-color: var(--kite-list-item-positive-label-text-color); --caution-label-text-color: var(--kite-list-item-caution-label-text-color); --text-color: var(--kite-list-item-text-color); --icon-color: var(--kite-list-item-icon-color); --action-icon-color: var(--kite-list-item-action-icon-color); --disabled-icon-color: var(--kite-list-item-disabled-icon-color); --hover-background-color: var(--kite-list-item-hover-background-color); } ul.kite-list { list-style: none; margin: 0; padding: 0; } ul.kite-list > li { line-height: inherit; margin: 0; padding: 0; } .kite-list { border-top: var(--kite-list-border-width) var(--kite-list-border-style) var(--border-color); } .kite-list--align-items { --start-area: max-content; --center-area: 1fr; --end-area: min-content; display: grid; grid-template-columns: var(--start-area) var(--center-area) var(--end-area); grid-template-areas: "start center end"; } @media only screen and (min-width: 30rem) { .kite-list--align-items { --end-area: max-content; } } .kite-list--align-items .kite-list-item__start { grid-area: start; } .kite-list--align-items .kite-list-item__center { grid-area: center; } .kite-list--align-items .kite-list-item__end { grid-area: end; } .kite-list--align-items.kite-list *:not([hidden], .kite-list-item__inner *, .kite-list-item__expandable-container, .kite-list-item__expandable-container *) { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; grid-auto-flow: column; } .kite-list--align-items .kite-list-item__expandable-container { grid-column: 1/-1; } .kite-list-item { --start-align-offset: 0; display: block; position: relative; } .kite-list-item--disabled { --icon-color: var(--kite-list-item-disabled-icon-color); --text-color: var(--kite-list-item-disabled-text-color); --label-text-color: var(--text-color); --negative-label-text-color: var(--label-text-color); --neutral-label-text-color: var(--label-text-color); --muted-label-text-color: var(--label-text-color); --positive-label-text-color: var(--label-text-color); color: var(--text-color); } .kite-list-item--disabled .kite-list-item__action, .kite-list-item--disabled .kite-list-item__content { cursor: var(--kite-list-item-disabled-cursor); } .kite-list-item--disabled .kite-list-item__action:hover, .kite-list-item--disabled .kite-list-item__content:hover { background-color: transparent; } .kite-list-item--danger .kite-list-item__label, .kite-list-item--negative .kite-list-item__label { color: var(--negative-label-text-color); } .kite-list-item--info .kite-list-item__label, .kite-list-item--neutral .kite-list-item__label { color: var(--neutral-label-text-color); } .kite-list-item--success .kite-list-item__label, .kite-list-item--positive .kite-list-item__label { color: var(--positive-label-text-color); } .kite-list-item--align-to-icon { --start-align-offset: calc( var(--kite-list-item-icon-width) + var(--kite-list-item-slot-start-margin-right) ); } .kite-list-item--align-to-thumbnail-sm { --start-align-offset: calc(var(--kite-list-item-image-sm-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-thumbnail-md { --start-align-offset: calc(var(--kite-list-item-image-md-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-thumbnail, .kite-list-item--align-to-thumbnail-lg { --start-align-offset: calc(var(--kite-list-item-image-lg-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-payment-logo { --start-align-offset: calc( var(--kite-payment-logo-width) + var(--kite-list-item-slot-start-margin-right) ); } .kite-list-item--popover .kite-list-item__center { flex-direction: unset; } .kite-list-item--popover .kite-popover { margin-top: 2px; } .kite-list-item--expanded .kite-list-item__expandable-content, .kite-list-item--expanded .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item--expanded .rk-kite-list-item__body { display: block; } .kite-list-item--expanded .kite-list-item__end > .kite-icon { transform: rotate(-180deg); } .kite-list-item::before { border-bottom: var(--kite-list-item-border-width) var(--kite-list-item-border-style) var(--kite-list-item-border-color); content: ""; position: absolute; left: 0; bottom: 0; width: 100%; } .kite-list-item__action, .kite-list-item__content { background-color: var(--kite-list-item-background-color); border: 0; color: var(--text-color); display: block; line-height: inherit; padding: var(--kite-list-item-padding-top) var(--kite-list-item-padding-right) var(--kite-list-item-padding-bottom) var(--kite-list-item-padding-left); position: relative; text-align: left; text-decoration: none; width: 100%; } .kite-list-item__action { cursor: var(--kite-list-item-cursor); } .kite-list-item__action.kite-hover, .kite-list-item__action:hover, .kite-list-item__action.kite-visited, .kite-list-item__action:visited { color: var(--text-color); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .kite-list-item__action.kite-hover, .kite-list-item__action:hover { background-color: var(--hover-background-color); } } .kite-list-item__action.kite-focus-visible, .kite-list-item__action:focus-visible { color: var(--text-color); outline-offset: var(--kite-list-item-focus-ring-offset); } .kite-list-item__inner { display: flex; flex-direction: row; } .kite-list-item__start > .kite-icon, .kite-list-item__end > .kite-icon { --color: var(--icon-color); --offset: 0; } .kite-list-item__start { display: flex; flex-direction: column; margin-right: var(--kite-list-item-slot-start-margin-right); max-width: var(--kite-list-item-slot-start-max-width); } .kite-list-item__start .kite-payment-logo { width: var(--kite-list-item-payment-logo-width); height: var(--kite-list-item-payment-logo-height); margin-top: var(--kite-list-item-payment-logo-margin-top); box-shadow: var(--kite-list-item-payment-logo-shadow); border-radius: var(--kite-list-item-payment-logo-border-radius); } .kite-list-item__start > .kite-icon { --size: var(--kite-list-item-icon-width); } .kite-list-item__center { display: flex; flex-direction: column; flex-grow: 1; padding-left: var(--start-align-offset); } .kite-list-item__center .kite-list-item__label { margin-top: var(--kite-list-item-multiline-subtitle-margin-bottom); } .kite-list-item__end { display: flex; align-self: flex-start; align-items: center; justify-self: flex-end; margin-left: var(--kite-list-item-slot-end-margin-left); } .kite-list-item__end--centered { align-self: center; } .kite-list-item__end > .kite-icon { --size: var(--kite-list-item-action-icon-width); min-height: calc(var(--size) * var(--kite-typography-body-line-height, 1.5)); margin-left: var(--kite-list-item-label-margin-right); flex-shrink: 0; transition: transform var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } .kite-list-item__end .kite-switch { margin-bottom: 0px; } .kite-list-item__label { color: var(--label-text-color); font-size: var(--kite-list-item-label-text-size); display: flex; align-items: center; } @media only screen and (min-width: 37.5rem) { .kite-list-item__label { white-space: nowrap; } } .kite-list-item__label .kite-icon { --size: var(--kite-list-item-label-icon-width); --color: var(--label-icon-color); margin-right: var(--kite-list-item-label-icon-margin-right); } .kite-list-item__label--negative { color: var(--negative-label-text-color); --label-icon-color: var(--kite-list-item-negative-label-icon-color); } .kite-list-item__label--positive { color: var(--positive-label-text-color); --label-icon-color: var(--kite-list-item-positive-label-icon-color); } .kite-list-item__label--neutral { color: var(--neutral-label-text-color); --label-icon-color: var(--kite-list-item-neutral-label-icon-color); } .kite-list-item__label--muted { color: var(--muted-label-text-color); --label-icon-color: var(--kite-list-item-muted-label-icon-color); } .kite-list-item__label--caution { color: var(--caution-label-text-color); --label-icon-color: var(--kite-list-item-caution-label-icon-color); } .kite-list-item__label--negative-icon { --label-icon-color: var(--kite-list-item-negative-label-icon-color); } .kite-list-item__label--positive-icon { --label-icon-color: var(--kite-list-item-positive-label-icon-color); } .kite-list-item__label--neutral-icon { --label-icon-color: var(--kite-list-item-neutral-label-icon-color); } .kite-list-item__label--muted-icon { --label-icon-color: var(--kite-list-item-muted-label-icon-color); } .kite-list-item__label--caution-icon { --label-icon-color: var(--kite-list-item-caution-label-icon-color); } .kite-list-item__image .kite-image { --max-width: var(--kite-list-item-image-max-width); --max-height: var(--kite-list-item-image-max-height); --border-radius: var(--kite-list-item-image-border-radius); justify-content: flex-start; } .kite-list-item__image--sm .kite-image { --max-width: var(--kite-list-item-image-sm-max-width); --max-height: var(--kite-list-item-image-sm-max-height); } .kite-list-item__image--md .kite-image { --max-width: var(--kite-list-item-image-md-max-width); --max-height: var(--kite-list-item-image-md-max-height); } .kite-list-item__image--lg .kite-image { --max-width: var(--kite-list-item-image-lg-max-width); --max-height: var(--kite-list-item-image-lg-max-height); } .kite-list-item .kite-title { font-size: var(--kite-list-item-title-text-size); font-weight: var(--kite-list-item-title-text-weight); line-height: var(--kite-list-item-title-text-line-height); } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-title { font-size: var(--kite-list-item-breakpoint-md-title-text-size); font-weight: var(--kite-list-item-breakpoint-md-title-text-weight); line-height: var(--kite-list-item-breakpoint-md-title-text-line-height); } } .kite-list-item .kite-title--body { font-size: var(--kite-list-item-title-body-text-size); font-weight: var(--kite-list-item-title-body-text-weight); line-height: var(--kite-list-item-title-body-text-line-height); } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-title--body { font-size: var(--kite-list-item-breakpoint-md-title-body-text-size); font-weight: var(--kite-list-item-breakpoint-md-title-body-text-weight); line-height: var(--kite-list-item-breakpoint-md-title-body-text-line-height); } } .kite-list-item .kite-subtitle { font-size: var(--kite-list-item-multiline-subtitle-text-size); margin-top: var(--kite-list-item-multiline-title-margin-bottom); } .kite-list-item .kite-menu--block .kite-picker--overlay { left: auto; } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-menu--block .kite-picker--overlay { left: 0; } } .kite-list-item__expandable-container { --max-height: 0; max-height: var(--max-height); overflow: hidden; } .kite-list-item__expandable-container--transitioning { transition: all var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-list-item__expandable-container--transitioning { transition-property: none; } } .kite-list-item__expandable-container--transitioning .kite-list-item__expandable-content, .kite-list-item__expandable-container--transitioning .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item__expandable-container--transitioning .rk-kite-list-item__body { transition: all var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-list-item__expandable-container--transitioning .kite-list-item__expandable-content, .kite-list-item__expandable-container--transitioning .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item__expandable-container--transitioning .rk-kite-list-item__body { transition-property: none; } } .kite-list-item__expandable-content, .kite-list-item .rk-kite-list-item__body { --opacity: 0; opacity: var(--opacity); display: none; text-align: left; padding: var(--kite-list-item-expandable-content-padding-top) var(--kite-list-item-expandable-content-padding-right) var(--kite-list-item-expandable-content-padding-bottom) var(--kite-list-item-expandable-content-padding-left); } .kite-list-item__expandable-content > :last-child, .kite-list-item .rk-kite-list-item__body > :last-child { margin-bottom: 0; } .kite-card .kite-list { border-top: 0; } .kite-card .kite-list-item:last-child::before { border-bottom: 0; } .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-sm); width: calc(100% - var(--kite-list-item-padding-left-sm) * 2); } @media only screen and (min-width: 37.5rem) { .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-md); width: calc(100% - var(--kite-list-item-padding-left-md) * 2); } } @media only screen and (min-width: 52.5rem) { .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-lg); width: calc(100% - var(--kite-list-item-padding-left-lg) * 2); } } .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-sm) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-sm) + var(--kite-list-item-padding-left)); } @media only screen and (min-width: 37.5rem) { .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-md) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-md) + var(--kite-list-item-padding-left)); } } @media only screen and (min-width: 52.5rem) { .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-lg) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-lg) + var(--kite-list-item-padding-left)); } } .kite-card .kite-list-item--sm::before { left: var(--kite-list-item-padding-left-sm); width: calc(100% - var(--kite-list-item-padding-left-sm) * 2); } .kite-card .kite-list-item--sm .kite-list-item__action, .kite-card .kite-list-item--sm .kite-list-item__content, .kite-card .kite-list-item--sm .kite-list-item__expandable-content, .kite-card .kite-list-item--sm .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--sm .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-sm) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-sm) + var(--kite-list-item-padding-left)); } .kite-card .kite-list-item--md::before { left: var(--kite-list-item-padding-left-md); width: calc(100% - var(--kite-list-item-padding-left-md) * 2); } .kite-card .kite-list-item--md .kite-list-item__action, .kite-card .kite-list-item--md .kite-list-item__content, .kite-card .kite-list-item--md .kite-list-item__expandable-content, .kite-card .kite-list-item--md .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--md .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-md) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-md) + var(--kite-list-item-padding-left)); } .kite-card .kite-list-item--lg::before { left: var(--kite-list-item-padding-left-lg); width: calc(100% - var(--kite-list-item-padding-left-lg) * 2); } .kite-card .kite-list-item--lg .kite-list-item__action, .kite-card .kite-list-item--lg .kite-list-item__content, .kite-card .kite-list-item--lg .kite-list-item__expandable-content, .kite-card .kite-list-item--lg .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--lg .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-lg) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-lg) + var(--kite-list-item-padding-left)); } .kite-list-item__start .kite-icon { margin-top: 0.25rem; } .kite-list-item__start:empty { margin: 0; } .kite-link { --text-decoration: var(--kite-link-text-decoration); --color: var(--kite-link-text-color); --focus-ring-color: var(--kite-link-focus-ring-color); --focus-text-color: var(--kite-link-focus-text-color); --hover-text-color: var(--kite-link-hover-text-color); --press-text-color: var(--kite-link-press-text-color); --visited-text-color: var(--kite-link-visited-text-color); color: var(--color); font-weight: var(--kite-link-text-weight); text-decoration: var(--text-decoration); text-decoration-thickness: var(--kite-link-text-decoration-thickness); text-underline-offset: var(--kite-link-text-decoration-offset); } .kite-link.kite-hover, .kite-link:hover { --text-decoration: var(--kite-link-hover-text-decoration); color: var(--hover-text-color); } .kite-link.kite-focus-visible, .kite-link:focus-visible { outline: var(--kite-focus-ring-width) var(--kite-focus-ring-style) var(--kite-focus-ring-color); outline-offset: var(--kite-focus-ring-offset); --text-decoration: var(--kite-link-focus-text-decoration); color: var(--focus-text-color); outline-color: var(--focus-ring-color); } .kite-link.kite-active, .kite-link:active { --text-decoration: var(--kite-link-press-text-decoration); color: var(--press-text-color); } .kite-link.kite-visited, .kite-link:visited { --text-decoration: var(--kite-link-visited-text-decoration); color: var(--visited-text-color); } .kite-link.kite-disabled, .kite-link:disabled { pointer-events: none; } .kite-link { --icon-size: var(--kite-link-icon-height); --icon-color: var(--kite-link-icon-color); } .kite-link:is(a:not([href])) { --icon-color: currentColor; } .kite-link:has(.kite-icon) { display: inline-flex; align-items: center; gap: var(--kite-link-icon-margin); } .kite-link__icon { display: inline; } .kite-link__icon .kite-icon { --color: var(--icon-color); object-fit: contain; width: var(--icon-size); height: var(--icon-size); } .kite-link--standalone { --text-decoration: var(--kite-link-standalone-text-decoration); --icon-color: var(--kite-link-standalone-icon-color); font-weight: var(--kite-link-standalone-text-weight); text-decoration-thickness: var(--kite-link-standalone-text-decoration-thickness); text-underline-offset: var(--kite-link-standalone-text-decoration-offset); } .kite-link--standalone.kite-hover, .kite-link--standalone:hover { --text-decoration: var(--kite-link-standalone-hover-text-decoration); --icon-color: var(--kite-link-standalone-hover-icon-color); } .kite-link--standalone.kite-focus-visible, .kite-link--standalone:focus-visible { --text-decoration: var(--kite-link-standalone-focus-text-decoration); --icon-color: var(--kite-link-standalone-focus-icon-color); } .kite-link--standalone.kite-active, .kite-link--standalone:active { --text-decoration: var(--kite-link-standalone-press-text-decoration); --icon-color: var(--kite-link-standalone-press-icon-color); } .kite-link--standalone.kite-visited, .kite-link--standalone:visited { --text-decoration: var(--kite-link-standalone-visited-text-decoration); --icon-color: var(--kite-link-standalone-visited-icon-color); } .kite-list { --multiline-title-height: calc(var(--kite-list-item-multiline-title-text-size) * var(--kite-typography-lg-body-line-height, 1.5)); --border-color: var(--kite-list-border-color); --label-text-color: var(--kite-list-item-label-text-color); --label-icon-color: var(--kite-list-item-label-icon-color); --negative-label-text-color: var(--kite-list-item-negative-label-text-color); --neutral-label-text-color: var(--kite-list-item-neutral-label-text-color); --muted-label-text-color: var(--kite-list-item-muted-label-text-color); --positive-label-text-color: var(--kite-list-item-positive-label-text-color); --caution-label-text-color: var(--kite-list-item-caution-label-text-color); --text-color: var(--kite-list-item-text-color); --icon-color: var(--kite-list-item-icon-color); --action-icon-color: var(--kite-list-item-action-icon-color); --disabled-icon-color: var(--kite-list-item-disabled-icon-color); --hover-background-color: var(--kite-list-item-hover-background-color); } ul.kite-list { list-style: none; margin: 0; padding: 0; } ul.kite-list > li { line-height: inherit; margin: 0; padding: 0; } .kite-list { border-top: var(--kite-list-border-width) var(--kite-list-border-style) var(--border-color); } .kite-list--align-items { --start-area: max-content; --center-area: 1fr; --end-area: min-content; display: grid; grid-template-columns: var(--start-area) var(--center-area) var(--end-area); grid-template-areas: "start center end"; } @media only screen and (min-width: 30rem) { .kite-list--align-items { --end-area: max-content; } } .kite-list--align-items .kite-list-item__start { grid-area: start; } .kite-list--align-items .kite-list-item__center { grid-area: center; } .kite-list--align-items .kite-list-item__end { grid-area: end; } .kite-list--align-items.kite-list *:not([hidden], .kite-list-item__inner *, .kite-list-item__expandable-container, .kite-list-item__expandable-container *) { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; grid-auto-flow: column; } .kite-list--align-items .kite-list-item__expandable-container { grid-column: 1/-1; } .kite-list-item { --start-align-offset: 0; display: block; position: relative; } .kite-list-item--disabled { --icon-color: var(--kite-list-item-disabled-icon-color); --text-color: var(--kite-list-item-disabled-text-color); --label-text-color: var(--text-color); --negative-label-text-color: var(--label-text-color); --neutral-label-text-color: var(--label-text-color); --muted-label-text-color: var(--label-text-color); --positive-label-text-color: var(--label-text-color); color: var(--text-color); } .kite-list-item--disabled .kite-list-item__action, .kite-list-item--disabled .kite-list-item__content { cursor: var(--kite-list-item-disabled-cursor); } .kite-list-item--disabled .kite-list-item__action:hover, .kite-list-item--disabled .kite-list-item__content:hover { background-color: transparent; } .kite-list-item--danger .kite-list-item__label, .kite-list-item--negative .kite-list-item__label { color: var(--negative-label-text-color); } .kite-list-item--info .kite-list-item__label, .kite-list-item--neutral .kite-list-item__label { color: var(--neutral-label-text-color); } .kite-list-item--success .kite-list-item__label, .kite-list-item--positive .kite-list-item__label { color: var(--positive-label-text-color); } .kite-list-item--align-to-icon { --start-align-offset: calc( var(--kite-list-item-icon-width) + var(--kite-list-item-slot-start-margin-right) ); } .kite-list-item--align-to-thumbnail-sm { --start-align-offset: calc(var(--kite-list-item-image-sm-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-thumbnail-md { --start-align-offset: calc(var(--kite-list-item-image-md-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-thumbnail, .kite-list-item--align-to-thumbnail-lg { --start-align-offset: calc(var(--kite-list-item-image-lg-max-width) + var(--kite-list-item-slot-start-margin-right)); } .kite-list-item--align-to-payment-logo { --start-align-offset: calc( var(--kite-payment-logo-width) + var(--kite-list-item-slot-start-margin-right) ); } .kite-list-item--popover .kite-list-item__center { flex-direction: unset; } .kite-list-item--popover .kite-popover { margin-top: 2px; } .kite-list-item--expanded .kite-list-item__expandable-content, .kite-list-item--expanded .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item--expanded .rk-kite-list-item__body { display: block; } .kite-list-item--expanded .kite-list-item__end > .kite-icon { transform: rotate(-180deg); } .kite-list-item::before { border-bottom: var(--kite-list-item-border-width) var(--kite-list-item-border-style) var(--kite-list-item-border-color); content: ""; position: absolute; left: 0; bottom: 0; width: 100%; } .kite-list-item__action, .kite-list-item__content { background-color: var(--kite-list-item-background-color); border: 0; color: var(--text-color); display: block; line-height: inherit; padding: var(--kite-list-item-padding-top) var(--kite-list-item-padding-right) var(--kite-list-item-padding-bottom) var(--kite-list-item-padding-left); position: relative; text-align: left; text-decoration: none; width: 100%; } .kite-list-item__action { cursor: var(--kite-list-item-cursor); } .kite-list-item__action.kite-hover, .kite-list-item__action:hover, .kite-list-item__action.kite-visited, .kite-list-item__action:visited { color: var(--text-color); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .kite-list-item__action.kite-hover, .kite-list-item__action:hover { background-color: var(--hover-background-color); } } .kite-list-item__action.kite-focus-visible, .kite-list-item__action:focus-visible { color: var(--text-color); outline-offset: var(--kite-list-item-focus-ring-offset); } .kite-list-item__inner { display: flex; flex-direction: row; } .kite-list-item__start > .kite-icon, .kite-list-item__end > .kite-icon { --color: var(--icon-color); --offset: 0; } .kite-list-item__start { display: flex; flex-direction: column; margin-right: var(--kite-list-item-slot-start-margin-right); max-width: var(--kite-list-item-slot-start-max-width); } .kite-list-item__start .kite-payment-logo { width: var(--kite-list-item-payment-logo-width); height: var(--kite-list-item-payment-logo-height); margin-top: var(--kite-list-item-payment-logo-margin-top); box-shadow: var(--kite-list-item-payment-logo-shadow); border-radius: var(--kite-list-item-payment-logo-border-radius); } .kite-list-item__start > .kite-icon { --size: var(--kite-list-item-icon-width); } .kite-list-item__center { display: flex; flex-direction: column; flex-grow: 1; padding-left: var(--start-align-offset); } .kite-list-item__center .kite-list-item__label { margin-top: var(--kite-list-item-multiline-subtitle-margin-bottom); } .kite-list-item__end { display: flex; align-self: flex-start; align-items: center; justify-self: flex-end; margin-left: var(--kite-list-item-slot-end-margin-left); } .kite-list-item__end--centered { align-self: center; } .kite-list-item__end > .kite-icon { --size: var(--kite-list-item-action-icon-width); min-height: calc(var(--size) * var(--kite-typography-body-line-height, 1.5)); margin-left: var(--kite-list-item-label-margin-right); flex-shrink: 0; transition: transform var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } .kite-list-item__end .kite-switch { margin-bottom: 0px; } .kite-list-item__label { color: var(--label-text-color); font-size: var(--kite-list-item-label-text-size); display: flex; align-items: center; } @media only screen and (min-width: 37.5rem) { .kite-list-item__label { white-space: nowrap; } } .kite-list-item__label .kite-icon { --size: var(--kite-list-item-label-icon-width); --color: var(--label-icon-color); margin-right: var(--kite-list-item-label-icon-margin-right); } .kite-list-item__label--negative { color: var(--negative-label-text-color); --label-icon-color: var(--kite-list-item-negative-label-icon-color); } .kite-list-item__label--positive { color: var(--positive-label-text-color); --label-icon-color: var(--kite-list-item-positive-label-icon-color); } .kite-list-item__label--neutral { color: var(--neutral-label-text-color); --label-icon-color: var(--kite-list-item-neutral-label-icon-color); } .kite-list-item__label--muted { color: var(--muted-label-text-color); --label-icon-color: var(--kite-list-item-muted-label-icon-color); } .kite-list-item__label--caution { color: var(--caution-label-text-color); --label-icon-color: var(--kite-list-item-caution-label-icon-color); } .kite-list-item__label--negative-icon { --label-icon-color: var(--kite-list-item-negative-label-icon-color); } .kite-list-item__label--positive-icon { --label-icon-color: var(--kite-list-item-positive-label-icon-color); } .kite-list-item__label--neutral-icon { --label-icon-color: var(--kite-list-item-neutral-label-icon-color); } .kite-list-item__label--muted-icon { --label-icon-color: var(--kite-list-item-muted-label-icon-color); } .kite-list-item__label--caution-icon { --label-icon-color: var(--kite-list-item-caution-label-icon-color); } .kite-list-item__image .kite-image { --max-width: var(--kite-list-item-image-max-width); --max-height: var(--kite-list-item-image-max-height); --border-radius: var(--kite-list-item-image-border-radius); justify-content: flex-start; } .kite-list-item__image--sm .kite-image { --max-width: var(--kite-list-item-image-sm-max-width); --max-height: var(--kite-list-item-image-sm-max-height); } .kite-list-item__image--md .kite-image { --max-width: var(--kite-list-item-image-md-max-width); --max-height: var(--kite-list-item-image-md-max-height); } .kite-list-item__image--lg .kite-image { --max-width: var(--kite-list-item-image-lg-max-width); --max-height: var(--kite-list-item-image-lg-max-height); } .kite-list-item .kite-title { font-size: var(--kite-list-item-title-text-size); font-weight: var(--kite-list-item-title-text-weight); line-height: var(--kite-list-item-title-text-line-height); } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-title { font-size: var(--kite-list-item-breakpoint-md-title-text-size); font-weight: var(--kite-list-item-breakpoint-md-title-text-weight); line-height: var(--kite-list-item-breakpoint-md-title-text-line-height); } } .kite-list-item .kite-title--body { font-size: var(--kite-list-item-title-body-text-size); font-weight: var(--kite-list-item-title-body-text-weight); line-height: var(--kite-list-item-title-body-text-line-height); } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-title--body { font-size: var(--kite-list-item-breakpoint-md-title-body-text-size); font-weight: var(--kite-list-item-breakpoint-md-title-body-text-weight); line-height: var(--kite-list-item-breakpoint-md-title-body-text-line-height); } } .kite-list-item .kite-subtitle { font-size: var(--kite-list-item-multiline-subtitle-text-size); margin-top: var(--kite-list-item-multiline-title-margin-bottom); } .kite-list-item .kite-menu--block .kite-picker--overlay { left: auto; } @media only screen and (min-width: 37.5rem) { .kite-list-item .kite-menu--block .kite-picker--overlay { left: 0; } } .kite-list-item__expandable-container { --max-height: 0; max-height: var(--max-height); overflow: hidden; } .kite-list-item__expandable-container--transitioning { transition: all var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-list-item__expandable-container--transitioning { transition-property: none; } } .kite-list-item__expandable-container--transitioning .kite-list-item__expandable-content, .kite-list-item__expandable-container--transitioning .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item__expandable-container--transitioning .rk-kite-list-item__body { transition: all var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } @media (prefers-reduced-motion) { .kite-list-item__expandable-container--transitioning .kite-list-item__expandable-content, .kite-list-item__expandable-container--transitioning .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-list-item__expandable-container--transitioning .rk-kite-list-item__body { transition-property: none; } } .kite-list-item__expandable-content, .kite-list-item .rk-kite-list-item__body { --opacity: 0; opacity: var(--opacity); display: none; text-align: left; padding: var(--kite-list-item-expandable-content-padding-top) var(--kite-list-item-expandable-content-padding-right) var(--kite-list-item-expandable-content-padding-bottom) var(--kite-list-item-expandable-content-padding-left); } .kite-list-item__expandable-content > :last-child, .kite-list-item .rk-kite-list-item__body > :last-child { margin-bottom: 0; } .kite-card .kite-list { border-top: 0; } .kite-card .kite-list-item:last-child::before { border-bottom: 0; } .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-sm); width: calc(100% - var(--kite-list-item-padding-left-sm) * 2); } @media only screen and (min-width: 37.5rem) { .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-md); width: calc(100% - var(--kite-list-item-padding-left-md) * 2); } } @media only screen and (min-width: 52.5rem) { .kite-card .kite-list-item::before { left: var(--kite-list-item-padding-left-lg); width: calc(100% - var(--kite-list-item-padding-left-lg) * 2); } } .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-sm) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-sm) + var(--kite-list-item-padding-left)); } @media only screen and (min-width: 37.5rem) { .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-md) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-md) + var(--kite-list-item-padding-left)); } } @media only screen and (min-width: 52.5rem) { .kite-card .kite-list-item__action, .kite-card .kite-list-item__content, .kite-card .kite-list-item__expandable-content, .kite-card .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-lg) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-lg) + var(--kite-list-item-padding-left)); } } .kite-card .kite-list-item--sm::before { left: var(--kite-list-item-padding-left-sm); width: calc(100% - var(--kite-list-item-padding-left-sm) * 2); } .kite-card .kite-list-item--sm .kite-list-item__action, .kite-card .kite-list-item--sm .kite-list-item__content, .kite-card .kite-list-item--sm .kite-list-item__expandable-content, .kite-card .kite-list-item--sm .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--sm .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-sm) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-sm) + var(--kite-list-item-padding-left)); } .kite-card .kite-list-item--md::before { left: var(--kite-list-item-padding-left-md); width: calc(100% - var(--kite-list-item-padding-left-md) * 2); } .kite-card .kite-list-item--md .kite-list-item__action, .kite-card .kite-list-item--md .kite-list-item__content, .kite-card .kite-list-item--md .kite-list-item__expandable-content, .kite-card .kite-list-item--md .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--md .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-md) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-md) + var(--kite-list-item-padding-left)); } .kite-card .kite-list-item--lg::before { left: var(--kite-list-item-padding-left-lg); width: calc(100% - var(--kite-list-item-padding-left-lg) * 2); } .kite-card .kite-list-item--lg .kite-list-item__action, .kite-card .kite-list-item--lg .kite-list-item__content, .kite-card .kite-list-item--lg .kite-list-item__expandable-content, .kite-card .kite-list-item--lg .kite-list-item .rk-kite-list-item__body, .kite-list-item .kite-card .kite-list-item--lg .rk-kite-list-item__body { padding-right: calc(var(--kite-list-item-padding-right-lg) + var(--kite-list-item-padding-right)); padding-left: calc(var(--kite-list-item-padding-left-lg) + var(--kite-list-item-padding-left)); } .kite-list-item__center:has(:only-child) { justify-content: center; } .kite-list-item .kite-list-item__expandable-container { transition: max-height var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); } .kite-list-item .rk-kite-list-item__body { display: block; --opacity: 1; } .kite-list-item.kite-list-item--expandable .rk-kite-list-item__body { transition: opacity var(--kite-list-item-expanded-transition-duration) var(--kite-list-item-expanded-transition-timing-function); --opacity: 0; } .kite-menu { --top: var(--kite-spacing-xl); --right: var(--kite-spacing-xl); --bottom: var(--kite-spacing-xl); --left: var(--kite-spacing-xl); --min-height: var(--kite-menu-trigger-icon-height); --min-width: var(--kite-menu-trigger-icon-width); --visible-opacity: var(--kite-menu-list-activated-opacity); --hidden-opacity: var(--kite-menu-list-opacity); --list-border-width: var(--kite-menu-list-border-width); --list-border-style: var(--kite-menu-list-border-style); --list-border-radius: var(--kite-menu-list-border-radius); --list-cursor: var(--kite-menu-list-cursor); --list-max-width: calc(var(--kite-menu-list-max-width) - var(--right)); --list-min-width: var(--kite-menu-list-min-width); --list-z-index: var(--kite-menu-list-zindex); --list-translate-x: calc(-1 * (100% + var(--kite-menu-list-margin-right))); --list-translate-y: calc(-1 * (var(--trigger-height))); --list-transition-duration: var(--kite-menu-list-transition-duration); --list-transition-timing-function: var(--kite-menu-list-transition-timing-function); --list-transition-target: var(--kite-menu-list-transition-target-property); --list-item-border-width: var(--kite-menu-list-item-border-width); --list-item-border-style: var(--kite-menu-list-item-border-style); --cursor: var(--kite-menu-trigger-cursor); --list-item-focus-ring-width: var(--kite-menu-list-item-focus-ring-width); --list-item-focus-ring-style: var(--kite-menu-list-item-focus-ring-style); --list-item-text-size: var(--kite-menu-list-item-text-size); --list-item-text-line-height: var(--kite-menu-list-item-text-line-height); --list-item-padding-top: var(--kite-menu-list-item-padding-top); --list-item-padding-right: var(--kite-menu-list-item-padding-right); --list-item-padding-bottom: var(--kite-menu-list-item-padding-bottom); --list-item-padding-left: var(--kite-menu-list-item-padding-left); --trigger-border-radius: var(--kite-menu-trigger-border-radius); --trigger-width: calc(var(--kite-menu-trigger-padding-left) + var(--kite-menu-trigger-icon-width) + var(--kite-menu-trigger-padding-right)); --trigger-height: calc(var(--kite-menu-trigger-padding-top) + var(--kite-menu-trigger-icon-height) + var(--kite-menu-trigger-padding-bottom)); --width: var(--trigger-width); --height: var(--trigger-height); --hcm-border-width: 1px; /** @prop --trigger-background-color: Contextual Menu trigger background color */ --trigger-background-color: var(--kite-menu-trigger-background-color); /** @prop --trigger-hover-background-color: Contextual Menu trigger hover background color */ --trigger-hover-background-color: var(--kite-menu-trigger-hover-background-color); /** @prop--trigger-activated-background-color: Contextual Menu trigger activated background color */ --trigger-activated-background-color: var(--kite-menu-trigger-activated-background-color); /** @prop--trigger-disabled-background-color: Contextual Menu trigger disabled background color */ --trigger-disabled-background-color: var(--kite-menu-trigger-disabled-background-color); /** @prop --trigger-icon-color: Contextual Menu trigger icon color color */ --trigger-icon-color: var(--kite-menu-trigger-icon-color); /** @prop --trigger-activated-icon-color: Contextual Menu trigger icon activated fill */ --trigger-activated-icon-color: var(--kite-menu-trigger-activated-icon-color); /** @prop --trigger-disabled-icon-color: Contextual Menu trigger disabled icon color */ --trigger-disabled-icon-color: var(--kite-menu-trigger-disabled-icon-color); /** @prop --trigger-label-text-size: Contextual Menu trigger label text size */ --trigger-label-text-size: var(--kite-menu-contextual-label-trigger-label-text-size); /** @prop --trigger-label-text-line-height: Contextual Menu trigger label text line-height */ --trigger-label-text-line-height: var(--kite-menu-contextual-label-trigger-label-text-line-height); /** @prop --trigger-label-color: Contextual Menu trigger label color */ --trigger-label-color: var(--kite-menu-contextual-label-trigger-label-text-color); /** @prop --trigger-label-color: Contextual Menu activated trigger label color */ --trigger-activated-label-color: var(--kite-menu-contextual-label-trigger-activated-label-text-color); /** @prop --trigger-disabled-label-color: Contextual Menu disabled trigger label color */ --trigger-disabled-label-color: var(--kite-menu-contextual-label-trigger-disabled-label-text-color); /** @prop --list-item-focus-ring-color: All menu list item focus border color */ --list-item-focus-ring-color: var(--kite-menu-list-item-focus-ring-color); /** @prop --trigger-focus-ring-color: Trigger focus border color */ --trigger-focus-ring-color: var(--kite-menu-trigger-focus-ring-color); /** @prop --trigger-disabled-cursor: Trigger disabled cursor */ --trigger-disabled-cursor: var(--kite-menu-trigger-disabled-cursor); /** @prop --list-background-color: Menu list background color */ --list-background-color: var(--kite-menu-list-background-color); /** @prop --list-border-color: Menu list border color */ --list-border-color: var(--kite-menu-list-border-color); /** @prop --list-elevation: Menu list elevation */ --list-elevation: var(--kite-menu-list-elevation); /** @prop --list-item-border-color: Menu list item border color */ --list-item-border-color: var(--kite-menu-list-item-border-color); /** @deprecated: Use `--list-item-negative-text-color` instead */ /** @since: v2.0.0 */ /** @prop --list-item-destructive-text-color: Contextual Menu list item negative text color. Deprecated: Use `--list-item-negative-text-color` instead. */ --list-item-destructive-text-color: var(--kite-menu-list-item-negative-text-color); /** @prop --list-item-negative-text-color: Contextual Menu list item negative text color. */ --list-item-negative-text-color: var(--list-item-destructive-text-color, var(--kite-menu-list-item-negative-text-color)); /** @deprecated: Use `--list-item-negative-icon-color` instead */ /** @since: v2.0.0 */ /** @prop --list-item-destructive-icon-color: Contextual Menu list item negative icon color. Deprecated: Use `--list-item-negative-icon-color` instead. */ --list-item-destructive-icon-color: var(--kite-menu-list-item-negative-icon-color); /** @prop --list-item-negative-icon-color: Contextual Menu list item negative icon color */ --list-item-negative-icon-color: var(--list-item-destructive-icon-color, var(--kite-menu-list-item-negative-icon-color)); /** @prop --list-item-hover-background-color: Menu list item hover-background color*/ --list-item-hover-background-color: var(--kite-menu-list-item-hover-background-color); /** @prop --list-item-text-color: Menu list item text color */ --list-item-text-color: var(--kite-menu-list-item-text-color); /** @prop --list-item-icon-color: Contextual Menu list item icon color */ --list-item-icon-color: var(--kite-menu-list-item-icon-color); /** @prop --list-item-disabled-text-color: Menu list item disabled text color */ --list-item-disabled-text-color: var(--kite-menu-list-item-disabled-text-color); --list-item-disabled-cursor: var(--kite-menu-list-item-disabled-cursor); --label-text-size: var(--kite-form-control-label-text-size); --label-line-height: var(--kite-form-control-label-text-line-height); --label-height: calc(var(--label-line-height) * var(--label-text-size)); } .kite-menu--bottom { --list-translate-y: -100%; } .kite-menu--left { --list-translate-x: calc(var(--trigger-width) + var(--kite-menu-list-margin-right)); --list-max-width: calc(var(--kite-menu-list-max-width) - var(--left)); } .kite-menu--block { --width: auto; --list-max-width: 100%; } .kite-menu--sm { --kite-menu-trigger-padding-top: var(--kite-menu-sm-trigger-padding-top); --kite-menu-trigger-padding-left: var(--kite-menu-sm-trigger-padding-left); --kite-menu-trigger-padding-bottom: var(--kite-menu-sm-trigger-padding-bottom); --kite-menu-trigger-padding-right: var(--kite-menu-sm-trigger-padding-right); } .kite-menu--contextual-label { --width: auto; --list-translate-x: 0; --list-translate-y: 0; --list-margin-top: var(--kite-dropdown-list-margin-top); } @media only screen and (min-width: 37.5rem) { .kite-menu { --list-max-width: var(--kite-menu-list-max-width); } } .kite-menu--dropdown { --cursor: var(--kite-dropdown-cursor); --width: auto; --disabled-cursor: var(--kite-dropdown-disabled-cursor); --max-width: calc(100% - var(--right)); --min-width: auto; --height: var(--kite-dropdown-height); --padding-top: var(--kite-dropdown-padding-top); --padding-right: var(--kite-dropdown-padding-right); --padding-bottom: var(--kite-dropdown-padding-bottom); --padding-left: var(--kite-dropdown-padding-left); --icon-margin-right: var(--kite-dropdown-icon-margin-right); --label-margin-bottom: var(--kite-dropdown-label-margin-bottom); --visible-opacity: var(--kite-dropdown-list-activated-opacity); --hidden-opacity: var(--kite-dropdown-list-opacity); --border-width: var(--kite-dropdown-border-width); --border-style: var(--kite-dropdown-border-style); --hover-border-width: var(--kite-dropdown-hover-border-width); --focus-ring-width: var(--kite-dropdown-focus-ring-width); --focus-ring-style: var(--kite-dropdown-focus-ring-style); --focus-ring-offset: var(--kite-dropdown-focus-ring-offset); --value-margin-left: 0; --value-margin-right: var(--kite-dropdown-placeholder-margin-right); --list-translate-x: 0; --list-translate-y: 0; --list-border-width: var(--kite-dropdown-list-border-width); --list-border-style: var(--kite-dropdown-list-border-style); --list-border-radius: var(--kite-dropdown-list-border-radius); --list-cursor: var(--kite-dropdown-list-cursor); --list-max-width: calc(var(--kite-dropdown-list-max-width) - var(--right)); --list-min-width: var(--kite-dropdown-list-min-width); --list-margin-top: var(--kite-dropdown-list-margin-top); --list-z-index: var(--kite-dropdown-list-zindex); --list-transition-duration: var(--kite-dropdown-list-transition-duration); --list-transition-timing-function: var(--kite-dropdown-list-transition-timing-function); --list-transition-target: var(--kite-dropdown-list-transition-target-property); --list-item-disabled-cursor: var(--kite-dropdown-list-item-disabled-cursor); --list-item-border-width: var(--kite-dropdown-list-item-border-width); --list-item-border-style: var(--kite-dropdown-list-item-border-style); --list-item-icon-margin-right: var(--kite-dropdown-list-item-icon-margin-right); --list-item-icon-margin-left: var(--kite-dropdown-list-item-icon-margin-left); --list-item-icon-width: var(--kite-dropdown-list-item-icon-width); --list-item-icon-height: var(--kite-dropdown-list-item-icon-height); --list-item-text-size: var(--kite-dropdown-list-item-text-size); --list-item-text-line-height: var(--kite-dropdown-action-line-height); --list-item-padding-top: var(--kite-dropdown-list-item-padding-top); --list-item-padding-right: var(--kite-dropdown-list-item-padding-right); --list-item-padding-bottom: var(--kite-dropdown-list-item-padding-bottom); --list-item-padding-left: var(--kite-dropdown-list-item-padding-left); --list-item-focus-ring-width: var(--kite-dropdown-list-item-focus-ring-width); --list-item-focus-ring-style: var(--kite-dropdown-list-item-focus-ring-style); /** @prop --selection-background-color: Dropdown / Inline Menu Selection Background Color */ --selection-background-color: var(--kite-dropdown-background-color); /** @prop --selection-color: Dropdown / Inline Menu Selection Text Color */ --selection-color: var(--kite-dropdown-text-color); /** @prop --selection-icon-color: Dropdown / Inline Menu Selection Icon Color */ --selection-icon-color: var(--kite-dropdown-icon-color); /** @prop --selection-border-color: Dropdown Menu Selection Border Color */ --selection-border-color: var(--kite-dropdown-border-color); /** @prop --selection-fill: Dropdown / Inline Menu list item selection icon color */ --selection-fill: var(--kite-dropdown-list-item-icon-color); /** @prop --selection-fill: Dropdown / Inline Menu Selection Label text color */ --label-color: var(--kite-dropdown-label-text-color); /** @prop --selection-focus-ring: Dropdown / Inline Menu Selection focus ring color */ --selection-focus-ring-color: var(--kite-menu-trigger-focus-ring-color); --list-background-color: var(--kite-menu-list-background-color); --list-border-color: var(--kite-menu-list-border-color); --list-elevation: var(--kite-menu-list-elevation); --list-item-border-color: var(--kite-menu-list-item-border-color); --list-item-text-color: var(--kite-menu-list-item-text-color); --list-item-hover-background-color: var(--kite-menu-list-item-hover-background-color); --list-item-disabled-text-color: var(--kite-menu-list-item-disabled-text-color); --list-item-focus-ring-color: var(--kite-menu-list-item-focus-ring-color); /** @prop --disabled-selection-background-color: Dropdown / Inline Menu disabled Selection background color */ --disabled-selection-background-color: var(--kite-dropdown-disabled-background-color); /** @prop --disabled-selection-border-color: Dropdown / Inline Menu disabled Selection border color */ --disabled-selection-border-color: var(--kite-dropdown-disabled-border-color); /** @prop --disabled-selection-color: Dropdown / Inline Menu disabled Selection text color */ --disabled-selection-color: var(--kite-dropdown-disabled-text-color); /** @prop --disabled-selection-color: Dropdown / Inline Menu disabled Selection icon color*/ --disabled-selection-icon-color: var(--kite-dropdown-disabled-icon-color); } .kite-menu--dropdown.kite-menu--left { --max-width: calc(100% - var(--left)); --list-max-width: calc(var(--kite-dropdown-list-max-width) - var(--left)); } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown.kite-menu--left { --list-max-width: var(--kite-dropdown-list-max-width); } } .kite-menu--dropdown.kite-menu--block { --max-width: 100%; --list-max-width: 100%; } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown.kite-menu--block { --list-max-width: var(--kite-dropdown-list-max-width); } } .kite-menu--dropdown.kite-menu--full { --width: 100%; } @media only screen and (min-width: 30rem) { .kite-menu--dropdown.kite-menu--full { --max-width: var(--kite-dropdown-max-width); --list-max-width: none; } } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown { --list-max-width: var(--kite-dropdown-list-max-width); } } .kite-menu--inline { --disabled-cursor: var(--kite-dropdown-inline-disabled-cursor); --cursor: var(--kite-dropdown-cursor); --border-width: var(--kite-dropdown-inline-border-width); --border-style: var(--kite-dropdown-inline-border-style); --padding-top: var(--kite-dropdown-inline-padding-top); --padding-right: var(--kite-dropdown-inline-padding-right); --padding-bottom: var(--kite-dropdown-inline-padding-bottom); --padding-left: var(--kite-dropdown-inline-padding-left); --label-text-weight: var(--kite-dropdown-inline-label-text-weight); --focus-ring-width: var(--kite-dropdown-inline-focus-ring-width); --focus-ring-style: var(--kite-dropdown-inline-focus-ring-style); --focus-ring-offset: var(--kite-dropdown-inline-focus-ring-offset); --value-margin-left: var(--kite-dropdown-inline-placeholder-margin-right); --value-margin-right: var(--kite-dropdown-inline-placeholder-margin-left); --list-translate-x: 0; --list-translate-y: 0; --list-margin-top: var(--kite-dropdown-list-margin-top); --list-min-width: var(--kite-dropdown-list-min-width); --list-item-disabled-cursor: var(--kite-dropdown-list-item-disabled-cursor); --list-item-icon-margin-right: var(--kite-dropdown-list-item-icon-margin-right); --list-item-icon-width: var(--kite-dropdown-list-item-icon-width); --list-item-icon-height: var(--kite-dropdown-list-item-icon-height); --list-item-padding-top: var(--kite-dropdown-list-item-padding-top); --list-item-padding-right: var(--kite-dropdown-list-item-padding-right); --list-item-padding-bottom: var(--kite-dropdown-list-item-padding-bottom); --list-item-padding-left: var(--kite-dropdown-list-item-padding-left); --height: unset; --max-width: calc(100% - var(--right)); --min-width: min-content; --width: auto; --selection-background-color: var(--kite-dropdown-inline-background-color); --selection-focus-ring-color: var(--kite-menu-trigger-focus-ring-color); --selection-color: var(--kite-dropdown-inline-text-color); --selection-border-color: transparent; --label-color: var(--kite-dropdown-label-text-color); --list-item-disabled-text-color: var(--kite-menu-list-item-disabled-text-color); --selection-fill: var(--kite-dropdown-list-item-icon-color); --disabled-selection-background-color: var(--kite-dropdown-inline-disabled-background-color); --disabled-selection-color: var(--kite-dropdown-disabled-text-color); --disabled-selection-icon-color: var(--kite-dropdown-disabled-icon-color); } .kite-menu--inline.kite-menu--left { --max-width: calc(100% - var(--left)); } .kite-menu--inline.kite-menu--block { --max-width: 100%; } @media only screen and (min-width: 37.5rem) { .kite-menu--inline { --width: fit-content; } } .kite-menu { min-height: var(--min-height); min-width: var(--min-width); position: absolute; top: var(--top); right: var(--right); width: var(--width); } .kite-menu__trigger { background-color: var(--trigger-background-color); background-repeat: no-repeat; background-size: calc(var(--kite-menu-trigger-icon-height) * 2); border: var(--hcm-border-width) solid transparent; border-radius: var(--trigger-border-radius); cursor: var(--cursor); padding-top: calc(var(--kite-menu-trigger-padding-top) - var(--hcm-border-width)); padding-right: calc(var(--kite-menu-trigger-padding-right) - var(--hcm-border-width)); padding-bottom: calc(var(--kite-menu-trigger-padding-bottom) - var(--hcm-border-width)); padding-left: calc(var(--kite-menu-trigger-padding-left) - var(--hcm-border-width)); width: var(--trigger-width); height: var(--trigger-height); } .kite-menu__trigger.kite-hover, .kite-menu__trigger:hover { background-color: var(--trigger-hover-background-color); } .kite-menu__trigger.kite-focus-visible, .kite-menu__trigger:focus-visible { border-radius: 0; outline-color: var(--trigger-focus-ring-color); outline-offset: 0; } .kite-menu__trigger.kite-disabled, .kite-menu__trigger:disabled { background-color: var(--trigger-disabled-background-color); cursor: var(--trigger-disabled-cursor); } .kite-menu__trigger.kite-disabled .kite-menu__trigger-label, .kite-menu__trigger:disabled .kite-menu__trigger-label { color: var(--trigger-disabled-label-color); } .kite-menu__trigger.kite-disabled .kite-icon, .kite-menu__trigger:disabled .kite-icon { --color: var(--trigger-disabled-icon-color); } .kite-menu__trigger .kite-icon { --size: var(--kite-menu-trigger-icon-width); --color: var(--trigger-icon-color); } .kite-menu__trigger-label { color: var(--trigger-label-color); font-size: var(--trigger-label-text-size); font-weight: var(--kite-menu-contextual-label-trigger-label-text-weight); line-height: var(--trigger-label-text-line-height); } .kite-menu__label-group { margin-bottom: var(--label-margin-bottom); } .kite-menu__label { color: var(--label-color); display: inline-block; font-size: var(--label-text-size); font-weight: var(--label-text-weight); line-height: var(--label-line-height); } .kite-menu__helper-text { display: block; color: var(--kite-dropdown-helper-text-color); font-size: var(--kite-dropdown-helper-text-size); line-height: var(--kite-dropdown-helper-text-line-height); } .kite-menu__selection { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; background-color: var(--selection-background-color); border: var(--border-width) var(--border-style) var(--selection-border-color); border-radius: var(--kite-dropdown-border-radius); color: var(--selection-color); cursor: var(--cursor); display: flex; justify-content: space-between; line-height: var(--kite-dropdown-text-line-height); margin: var(--kite-dropdown-inline-margin-top) var(--kite-dropdown-inline-margin-right) var(--kite-dropdown-inline-margin-bottom) var(--kite-dropdown-inline-margin-left); max-width: 100%; min-width: var(--min-width); width: fit-content; padding: calc(var(--padding-top) - var(--border-width)) calc(var(--padding-right) - var(--border-width)) calc(var(--padding-bottom) - var(--border-width)) calc(var(--padding-left) - var(--border-width)); text-align: left; height: var(--height); -webkit-user-select: none; /* Safari */ user-select: none; } .kite-menu__selection .kite-icon { --color: var(--selection-color); flex-shrink: 0; margin-right: var(--icon-margin-right); } .kite-menu__selection.kite-focus-visible, .kite-menu__selection:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--selection-focus-ring-color); outline-offset: var(--focus-ring-offset); } .kite-menu__selection:disabled, .kite-menu__selection[aria-disabled=true] { --selection-border-color: var(--disabled-selection-border-color); background-color: var(--disabled-selection-background-color); color: var(--disabled-selection-color); cursor: var(--disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-menu__selection:disabled, .kite-menu__selection[aria-disabled=true] { border-color: GrayText; color: GrayText; } } .kite-menu__selection:disabled .kite-icon, .kite-menu__selection[aria-disabled=true] .kite-icon { --color: var(--disabled-selection-icon-color); } .kite-menu__selection.kite-hover:not([aria-disabled=true], [disabled]), .kite-menu__selection:hover:not([aria-disabled=true], [disabled]) { --border-width: var(--hover-border-width); } .kite-menu__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--value-margin-right); margin-left: var(--value-margin-left); text-align: left; } .kite-menu a.kite-menu__action, .kite-menu__action { align-items: center; background-color: transparent; border: 0; color: var(--list-item-text-color); cursor: var(--list-cursor); display: inline-flex; font-size: var(--list-item-text-size); line-height: var(--list-item-text-line-height); padding: var(--list-item-padding-top) var(--list-item-padding-right) var(--list-item-padding-bottom) var(--list-item-padding-left); text-align: left; text-decoration: unset; width: 100%; } .kite-menu a.kite-menu__action.kite-focus-visible, .kite-menu a.kite-menu__action:focus-visible, .kite-menu__action.kite-focus-visible, .kite-menu__action:focus-visible { margin-left: calc(-1 * var(--list-border-width)); outline: var(--kite-menu-list-item-focus-ring-width) var(--kite-menu-list-item-focus-ring-style) var(--list-item-focus-ring-color); outline-offset: calc(var(--kite-menu-list-item-focus-ring-width) * -1); width: calc(100% + 2 * var(--list-border-width)); } .kite-menu a.kite-menu__action-icon, .kite-menu__action-icon { display: inline; } .kite-menu a.kite-menu__action-icon .kite-icon, .kite-menu__action-icon .kite-icon { --size: var(--kite-menu-list-item-icon-width); margin-right: var(--kite-menu-list-item-icon-margin-right); vertical-align: text-bottom; } .kite-menu a.kite-menu__action-check .kite-icon, .kite-menu__action-check .kite-icon { --color: none; --size: var(--list-item-icon-width); flex-shrink: 0; margin-right: var(--kite-dropdown-list-item-icon-margin-right); margin-left: var(--kite-dropdown-list-item-icon-margin-left); vertical-align: text-bottom; } .kite-menu a.kite-menu__action-check--selected .kite-icon, .kite-menu__action-check--selected .kite-icon { --color: var(--selection-fill); } .kite-menu a.kite-menu__action.kite-hover, .kite-menu a.kite-menu__action:hover, .kite-menu__action.kite-hover, .kite-menu__action:hover { background-color: var(--list-item-hover-background-color); text-decoration: unset; } .kite-menu a.kite-menu__action[aria-selected=true], .kite-menu a.kite-menu__action[aria-current], .kite-menu__action[aria-selected=true], .kite-menu__action[aria-current] { font-weight: var(--kite-dropdown-list-item-selected-text-weight); } .kite-menu a.kite-menu__action:disabled, .kite-menu a.kite-menu__action[aria-disabled=true], .kite-menu__action:disabled, .kite-menu__action[aria-disabled=true] { color: var(--list-item-disabled-text-color); cursor: var(--list-item-disabled-cursor); } .kite-menu a.kite-menu__action:disabled:hover, .kite-menu a.kite-menu__action[aria-disabled=true]:hover, .kite-menu__action:disabled:hover, .kite-menu__action[aria-disabled=true]:hover { background-color: transparent; } .kite-menu .kite-picker--overlay { --picker-trigger-width: var(--trigger-width); --picker-trigger-height: var(--trigger-height); --translateY: var(--kite-form-control-picker-offset); left: auto; top: auto; z-index: var(--list-z-index); } @media only screen and (min-width: 37.5rem) { .kite-menu .kite-picker--overlay { --translateX: var(--list-translate-x); --translateY: var(--list-translate-y); left: 0; } } .kite-menu .kite-picker__content, .kite-menu .kite-picker--overlay { max-width: var(--list-max-width); min-width: var(--list-min-width); width: max-content; } .kite-menu .kite-picker a.kite-picker__action, .kite-menu .kite-picker__action { padding: var(--list-item-padding-top) var(--list-item-padding-right) var(--list-item-padding-bottom) var(--list-item-padding-left); } .kite-menu--left { right: auto; left: var(--left); } .kite-menu--left .kite-picker--overlay { left: 0; } .kite-menu--bottom { top: auto; bottom: var(--bottom); } .kite-menu--bottom .kite-picker--overlay { --translateY: calc(-100% - var(--trigger-height) - var(--kite-form-control-picker-offset)); } @media only screen and (min-width: 37.5rem) { .kite-menu--bottom .kite-picker--overlay { --translateY: var(--list-translate-y); } } .kite-menu--bottom.kite-menu--dropdown .kite-menu__list, .kite-menu--bottom.kite-menu--inline .kite-menu__list { margin-top: 0; transform: translateY(calc(-100% - var(--height) - var(--list-margin-top))); } .kite-menu--bottom.kite-menu--dropdown .kite-picker--overlay { --translateY: calc(-100% + (var(--label-height) + var(--kite-form-control-label-margin-bottom)) - var(--kite-form-control-picker-offset)); } .kite-menu--block { display: block; position: relative; top: auto; right: auto; bottom: auto; left: auto; } .kite-menu--block .kite-menu__list { right: 0; left: 0; width: fit-content; } .kite-menu--block .kite-picker--overlay { left: 0; } .kite-menu--sm { line-height: 1; } .kite-menu--dropdown { max-width: var(--max-width); } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown { max-width: var(--kite-dropdown-max-width); } } .kite-menu--dropdown .kite-picker--overlay { --translateY: calc(var(--label-height) + var(--kite-form-control-label-margin-bottom) + var(--kite-form-control-height) + var(--kite-form-control-picker-offset)); top: 0; left: auto; } .kite-menu--dropdown.kite-menu--full .kite-menu__selection { width: 100%; max-width: none; } .kite-menu--dropdown.kite-menu--full .kite-menu__list, .kite-menu--dropdown.kite-menu--full .kite-picker__content, .kite-menu--dropdown.kite-menu--full .kite-picker--overlay { width: 100%; } .kite-menu--dropdown.kite-menu--block .kite-picker--overlay, .kite-menu--dropdown.kite-menu--left .kite-picker--overlay { left: 0; } .kite-menu--inline { max-width: var(--max-width); } @media only screen and (min-width: 37.5rem) { .kite-menu--inline { max-width: none; } } .kite-menu--inline .kite-menu__selection { display: inline-flex; border-radius: var(--kite-dropdown-inline-border-radius); } .kite-menu--inline .kite-picker--overlay { --translateY: calc(var(--label-height) + var(--kite-form-control-picker-offset)); top: 0; left: auto; } .kite-menu--inline.kite-menu--block .kite-picker--overlay, .kite-menu--inline.kite-menu--left .kite-picker--overlay { left: 0; } .kite-menu--contextual-label .kite-menu__trigger { align-items: center; display: flex; gap: var(--kite-menu-contextual-label-trigger-label-margin-right); padding-top: var(--kite-menu-contextual-label-trigger-padding-top); padding-bottom: var(--kite-menu-contextual-label-trigger-padding-bottom); width: unset; } @media only screen and (min-width: 37.5rem) { .kite-menu--contextual-label .kite-picker--overlay:not(.kite-picker--top, .kite-picker--bottom, .kite-picker--right, .kite-picker--left) { --translateY: var(--kite-form-control-picker-offset); left: auto; } .kite-menu--contextual-label.kite-menu--bottom .kite-picker--overlay:not(.kite-picker--top, .kite-picker--bottom, .kite-picker--right, .kite-picker--left) { --translateY: calc(-100% - var(--trigger-height) - var(--kite-form-control-picker-offset)); } .kite-menu--contextual-label.kite-menu--block .kite-picker--overlay, .kite-menu--contextual-label.kite-menu--left .kite-picker--overlay { left: 0; } } .kite-menu--expand-above { --pagination-height: 56px; } .kite-menu--expand-above .kite-menu__list, .kite-menu--expand-above .kite-picker__content { transform: translateY(calc(-100% - var(--pagination-height))); } .kite-menu--scrollable { --menu-item-height: calc((var(--list-item-text-size) * var(--list-item-text-line-height)) + var(--list-item-padding-top) + var(--list-item-padding-bottom) + var(--list-item-border-width)); --max-height: calc((var(--max-item-count) * var(--menu-item-height)) + (var(--menu-item-height) * 0.5)); } .kite-menu--scrollable .kite-menu__list, .kite-menu--scrollable .kite-picker__content { max-height: var(--max-height); overflow-x: auto; } .kite-menu--disabled .kite-menu__label, .kite-menu--disabled .kite-menu__value { color: var(--disabled-selection-color); } .kite-menu--disabled .kite-menu__helper-text { color: var(--kite-dropdown-disabled-helper-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-menu--disabled .kite-menu__value { color: GrayText; } } .kite-menu--open .kite-menu__trigger { background-color: var(--trigger-activated-background-color); } .kite-menu--open .kite-menu__trigger .kite-icon { --color: var(--trigger-activated-icon-color); } .kite-menu--open .kite-menu__trigger-label { color: var(--trigger-activated-label-color); } .kite-menu--open .kite-menu__selection .kite-icon { transform: rotate(-180deg); } .kite-menu--open.kite-menu--dropdown .kite-menu__selection { outline: var(--focus-ring-width) var(--focus-ring-style) var(--selection-focus-ring-color); outline-offset: var(--focus-ring-offset); } .kite-menu--open .kite-menu__list { display: block; opacity: var(--visible-opacity); } .kite-menu__list { background-color: var(--list-background-color); border: var(--list-border-width) var(--list-border-style) var(--list-border-color); border-radius: var(--list-border-radius); box-shadow: var(--list-elevation); cursor: var(--list-cursor); display: none; list-style-type: none; margin-top: var(--list-margin-top); margin-right: calc(-1 * var(--list-max-width)); min-width: var(--list-min-width); max-width: var(--list-max-width); opacity: var(--hidden-opacity); padding: 0; position: absolute; z-index: var(--list-z-index); transform: translate(var(--list-translate-x), var(--list-translate-y)); transition: var(--list-transition-duration) var(--list-transition-timing-function) var(--list-transition-target-property); } .kite-menu__item { margin: 0; max-width: var(--list-max-width); min-width: 100%; padding: 0; } .kite-menu__item:not(:last-child) .kite-menu__action { border-bottom: var(--list-item-border-width) var(--list-item-border-style) var(--list-item-border-color); } .kite-menu__item.kite-menu__item--destructive .kite-menu__action, .kite-menu__item.kite-menu__item--destructive a.kite-menu__action, .kite-menu__item.kite-menu__item--negative .kite-menu__action, .kite-menu__item.kite-menu__item--negative a.kite-menu__action { color: var(--list-item-negative-text-color); } .kite-menu__item.kite-menu__item--destructive .kite-menu__action .kite-icon, .kite-menu__item.kite-menu__item--destructive a.kite-menu__action .kite-icon, .kite-menu__item.kite-menu__item--negative .kite-menu__action .kite-icon, .kite-menu__item.kite-menu__item--negative a.kite-menu__action .kite-icon { --color: var(--list-item-negative-icon-color); } .kite-picker { position: relative; } .kite-picker--list .kite-picker__content { padding: 0; } .kite-picker--open.kite-picker--overlay, .kite-picker--open .kite-picker__content { opacity: 1; visibility: visible; } .kite-picker--overlay { /** Positioning props **/ --translateX: 0; --label-height: calc(var(--kite-form-control-label-text-line-height) * var(--kite-form-control-label-text-size)); --translateY: calc(var(--label-height) + var(--kite-form-control-label-margin-bottom) + var(--kite-form-control-height) + var(--kite-form-control-picker-offset)); /** @prop --picker-trigger-width: Represents the width of a picker's trigger element. May require dynamic calculation */ --picker-trigger-width: 0; /** @prop --picker-trigger-height: Represents the height of a picker's trigger element. May require dynamic calculation */ --picker-trigger-height: 0; /** Positioning styles **/ position: absolute; top: 0; left: 0; right: 0; transform: translate(var(--translateX), var(--translateY)); z-index: var(--kite-form-control-picker-zindex); visibility: hidden; opacity: 0; /** Positioning variants **/ } .kite-picker--overlay.kite-picker--top { --translateY: calc(-100% - var(--picker-trigger-height) - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--bottom { --translateY: var(--kite-form-control-picker-offset); } .kite-picker--overlay.kite-picker--right { --translateX: calc(var(--picker-trigger-width) + var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--left { --translateX: calc(-100% - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--top, .kite-picker--overlay.kite-picker--bottom { --translateX: calc(-50% + (var(--picker-trigger-width) / 2)); } .kite-picker--overlay.kite-picker--top.kite-picker--align-start, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-start { --translateX: 0; } .kite-picker--overlay.kite-picker--top.kite-picker--align-end, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-end { --translateX: calc(-100% + var(--picker-trigger-width)); } .kite-picker--overlay.kite-picker--right, .kite-picker--overlay.kite-picker--left { --translateY: -50%; } .kite-picker--overlay.kite-picker--right.kite-picker--align-start, .kite-picker--overlay.kite-picker--left.kite-picker--align-start { --translateY: calc(-1 * var(--picker-trigger-height)); } .kite-picker--overlay.kite-picker--right.kite-picker--align-end, .kite-picker--overlay.kite-picker--left.kite-picker--align-end { --translateY: -100%; } .kite-picker__content { background-color: var(--kite-form-control-picker-background-color); border: var(--kite-form-control-picker-border-width) var(--kite-form-control-picker-border-style) var(--kite-form-control-picker-border-color); border-radius: var(--kite-form-control-picker-border-radius); box-shadow: var(--kite-form-control-picker-elevation); display: block; padding: var(--kite-form-control-picker-padding-top) var(--kite-form-control-picker-padding-right) var(--kite-form-control-picker-padding-bottom) var(--kite-form-control-picker-padding-left); opacity: 0; visibility: hidden; min-width: var(--kite-form-control-picker-min-width); width: 100%; } .kite-picker__list { cursor: var(--kite-form-control-picker-cursor); list-style-type: none; margin: 0; padding: 0; --max-item-count: ; --picker-list-item-height: calc(((var(--kite-form-control-picker-list-item-line-height) * 1rem) + var(--kite-form-control-picker-list-item-padding-top) + var(--kite-form-control-picker-list-item-padding-bottom) + var(--kite-form-control-picker-list-item-border-width))); --picker-list-max-height: calc(var(--picker-list-item-height) * var(--max-item-count)); max-height: calc(var(--picker-list-max-height) + 0.5 * var(--picker-list-item-height)); overflow-y: auto; } .kite-picker__item { margin: 0; padding: 0; min-width: 100%; max-width: var(--kite-form-control-picker-list-item-max-width); } .kite-picker__item:not(:last-child) .kite-picker__action { border-bottom: var(--kite-form-control-picker-list-item-border-width) var(--kite-form-control-picker-list-item-border-style) var(--kite-form-control-picker-list-item-border-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action, .kite-picker__item.kite-picker__item--negative a.kite-picker__action { color: var(--kite-form-control-picker-list-item-negative-text-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action .kite-icon, .kite-picker__item.kite-picker__item--negative a.kite-picker__action .kite-icon { --color: var(--kite-form-control-picker-list-item-negative-icon-color); } .kite-picker a.kite-picker__action, .kite-picker__action { align-items: center; background-color: transparent; border: 0; color: var(--kite-form-control-picker-list-item-text-color); cursor: var(--kite-form-control-picker-cursor); display: inline-flex; font-size: var(--kite-form-control-picker-list-item-text-size); line-height: var(--kite-form-control-picker-list-item-line-height); padding: var(--kite-form-control-picker-list-item-padding-top) var(--kite-form-control-picker-list-item-padding-right) var(--kite-form-control-picker-list-item-padding-bottom) var(--kite-form-control-picker-list-item-padding-left); text-align: left; text-decoration: unset; width: 100%; } .kite-picker a.kite-picker__action:focus-visible, .kite-picker a.kite-picker__action.kite-focus-visible, .kite-picker__action:focus-visible, .kite-picker__action.kite-focus-visible { outline: var(--kite-form-control-picker-list-item-focus-ring-width) var(--kite-form-control-picker-list-item-focus-ring-style) var(--kite-form-control-picker-list-item-focus-ring-color); outline-offset: var(--kite-form-control-picker-list-item-focus-ring-offset); } .kite-picker a.kite-picker__action-icon, .kite-picker__action-icon { display: inline; } .kite-picker a.kite-picker__action-icon .kite-icon, .kite-picker__action-icon .kite-icon { --size: var(--kite-form-control-picker-list-item-icon-width); margin-right: var(--kite-form-control-picker-list-item-icon-margin-right); vertical-align: text-bottom; } .kite-picker a.kite-picker__action-check .kite-icon, .kite-picker__action-check .kite-icon { --color: none; --size: var(--kite-form-control-picker-list-item-check-icon-width); flex-shrink: 0; margin-right: var(--kite-form-control-picker-list-item-check-icon-margin-right); margin-left: var(--kite-form-control-picker-list-item-check-icon-margin-left); vertical-align: text-bottom; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg, .kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg { fill: none; } } .kite-picker a.kite-picker__action-check--selected .kite-icon, .kite-picker__action-check--selected .kite-icon { --color: var(--kite-form-control-picker-list-item-check-icon-color); } .kite-picker a.kite-picker__action--hover, .kite-picker a.kite-picker__action.kite-hover, .kite-picker a.kite-picker__action:hover, .kite-picker__action--hover, .kite-picker__action.kite-hover, .kite-picker__action:hover { background-color: var(--kite-form-control-picker-list-item-hover-background-color); text-decoration: unset; } .kite-picker a.kite-picker__action[aria-selected=true], .kite-picker a.kite-picker__action[aria-checked=true], .kite-picker a.kite-picker__action[aria-current], .kite-picker__action[aria-selected=true], .kite-picker__action[aria-checked=true], .kite-picker__action[aria-current] { font-weight: var(--kite-form-control-picker-list-item-selected-text-weight); } .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: var(--kite-form-control-picker-list-item-disabled-text-color); cursor: var(--kite-form-control-picker-list-item-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: GrayText; } } .kite-picker a.kite-picker__action:disabled:hover, .kite-picker a.kite-picker__action[aria-disabled=true]:hover, .kite-picker__action:disabled:hover, .kite-picker__action[aria-disabled=true]:hover { background-color: transparent; } .kite-picker__backdrop { background-color: var(--kite-form-control-picker-backdrop-background-color); opacity: var(--kite-form-control-picker-backdrop-opacity); pointer-events: auto; touch-action: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--kite-form-control-picker-backdrop-zindex); } .kite-picker__backdrop--hidden { opacity: 0; visibility: hidden; } .kite-menu__value--placeholder { color: var(--kite-form-control-placeholder-text-color); } .kite-menu--contextual .kite-picker--list { webkit-transform: initial; transform: initial; transition: initial; position: relative; } .kite-menu { user-select: none; } .kite-picker--list { --list-max-width: 100%; --list-min-width: 100%; } @media only screen and (min-width: 37.5rem) { .kite-picker--list { --list-max-width: 21rem; } } .kite-menu { --top: var(--kite-spacing-xl); --right: var(--kite-spacing-xl); --bottom: var(--kite-spacing-xl); --left: var(--kite-spacing-xl); --min-height: var(--kite-menu-trigger-icon-height); --min-width: var(--kite-menu-trigger-icon-width); --visible-opacity: var(--kite-menu-list-activated-opacity); --hidden-opacity: var(--kite-menu-list-opacity); --list-border-width: var(--kite-menu-list-border-width); --list-border-style: var(--kite-menu-list-border-style); --list-border-radius: var(--kite-menu-list-border-radius); --list-cursor: var(--kite-menu-list-cursor); --list-max-width: calc(var(--kite-menu-list-max-width) - var(--right)); --list-min-width: var(--kite-menu-list-min-width); --list-z-index: var(--kite-menu-list-zindex); --list-translate-x: calc(-1 * (100% + var(--kite-menu-list-margin-right))); --list-translate-y: calc(-1 * (var(--trigger-height))); --list-transition-duration: var(--kite-menu-list-transition-duration); --list-transition-timing-function: var(--kite-menu-list-transition-timing-function); --list-transition-target: var(--kite-menu-list-transition-target-property); --list-item-border-width: var(--kite-menu-list-item-border-width); --list-item-border-style: var(--kite-menu-list-item-border-style); --cursor: var(--kite-menu-trigger-cursor); --list-item-focus-ring-width: var(--kite-menu-list-item-focus-ring-width); --list-item-focus-ring-style: var(--kite-menu-list-item-focus-ring-style); --list-item-text-size: var(--kite-menu-list-item-text-size); --list-item-text-line-height: var(--kite-menu-list-item-text-line-height); --list-item-padding-top: var(--kite-menu-list-item-padding-top); --list-item-padding-right: var(--kite-menu-list-item-padding-right); --list-item-padding-bottom: var(--kite-menu-list-item-padding-bottom); --list-item-padding-left: var(--kite-menu-list-item-padding-left); --trigger-border-radius: var(--kite-menu-trigger-border-radius); --trigger-width: calc(var(--kite-menu-trigger-padding-left) + var(--kite-menu-trigger-icon-width) + var(--kite-menu-trigger-padding-right)); --trigger-height: calc(var(--kite-menu-trigger-padding-top) + var(--kite-menu-trigger-icon-height) + var(--kite-menu-trigger-padding-bottom)); --width: var(--trigger-width); --height: var(--trigger-height); --hcm-border-width: 1px; /** @prop --trigger-background-color: Contextual Menu trigger background color */ --trigger-background-color: var(--kite-menu-trigger-background-color); /** @prop --trigger-hover-background-color: Contextual Menu trigger hover background color */ --trigger-hover-background-color: var(--kite-menu-trigger-hover-background-color); /** @prop--trigger-activated-background-color: Contextual Menu trigger activated background color */ --trigger-activated-background-color: var(--kite-menu-trigger-activated-background-color); /** @prop--trigger-disabled-background-color: Contextual Menu trigger disabled background color */ --trigger-disabled-background-color: var(--kite-menu-trigger-disabled-background-color); /** @prop --trigger-icon-color: Contextual Menu trigger icon color color */ --trigger-icon-color: var(--kite-menu-trigger-icon-color); /** @prop --trigger-activated-icon-color: Contextual Menu trigger icon activated fill */ --trigger-activated-icon-color: var(--kite-menu-trigger-activated-icon-color); /** @prop --trigger-disabled-icon-color: Contextual Menu trigger disabled icon color */ --trigger-disabled-icon-color: var(--kite-menu-trigger-disabled-icon-color); /** @prop --trigger-label-text-size: Contextual Menu trigger label text size */ --trigger-label-text-size: var(--kite-menu-contextual-label-trigger-label-text-size); /** @prop --trigger-label-text-line-height: Contextual Menu trigger label text line-height */ --trigger-label-text-line-height: var(--kite-menu-contextual-label-trigger-label-text-line-height); /** @prop --trigger-label-color: Contextual Menu trigger label color */ --trigger-label-color: var(--kite-menu-contextual-label-trigger-label-text-color); /** @prop --trigger-label-color: Contextual Menu activated trigger label color */ --trigger-activated-label-color: var(--kite-menu-contextual-label-trigger-activated-label-text-color); /** @prop --trigger-disabled-label-color: Contextual Menu disabled trigger label color */ --trigger-disabled-label-color: var(--kite-menu-contextual-label-trigger-disabled-label-text-color); /** @prop --list-item-focus-ring-color: All menu list item focus border color */ --list-item-focus-ring-color: var(--kite-menu-list-item-focus-ring-color); /** @prop --trigger-focus-ring-color: Trigger focus border color */ --trigger-focus-ring-color: var(--kite-menu-trigger-focus-ring-color); /** @prop --trigger-disabled-cursor: Trigger disabled cursor */ --trigger-disabled-cursor: var(--kite-menu-trigger-disabled-cursor); /** @prop --list-background-color: Menu list background color */ --list-background-color: var(--kite-menu-list-background-color); /** @prop --list-border-color: Menu list border color */ --list-border-color: var(--kite-menu-list-border-color); /** @prop --list-elevation: Menu list elevation */ --list-elevation: var(--kite-menu-list-elevation); /** @prop --list-item-border-color: Menu list item border color */ --list-item-border-color: var(--kite-menu-list-item-border-color); /** @deprecated: Use `--list-item-negative-text-color` instead */ /** @since: v2.0.0 */ /** @prop --list-item-destructive-text-color: Contextual Menu list item negative text color. Deprecated: Use `--list-item-negative-text-color` instead. */ --list-item-destructive-text-color: var(--kite-menu-list-item-negative-text-color); /** @prop --list-item-negative-text-color: Contextual Menu list item negative text color. */ --list-item-negative-text-color: var(--list-item-destructive-text-color, var(--kite-menu-list-item-negative-text-color)); /** @deprecated: Use `--list-item-negative-icon-color` instead */ /** @since: v2.0.0 */ /** @prop --list-item-destructive-icon-color: Contextual Menu list item negative icon color. Deprecated: Use `--list-item-negative-icon-color` instead. */ --list-item-destructive-icon-color: var(--kite-menu-list-item-negative-icon-color); /** @prop --list-item-negative-icon-color: Contextual Menu list item negative icon color */ --list-item-negative-icon-color: var(--list-item-destructive-icon-color, var(--kite-menu-list-item-negative-icon-color)); /** @prop --list-item-hover-background-color: Menu list item hover-background color*/ --list-item-hover-background-color: var(--kite-menu-list-item-hover-background-color); /** @prop --list-item-text-color: Menu list item text color */ --list-item-text-color: var(--kite-menu-list-item-text-color); /** @prop --list-item-icon-color: Contextual Menu list item icon color */ --list-item-icon-color: var(--kite-menu-list-item-icon-color); /** @prop --list-item-disabled-text-color: Menu list item disabled text color */ --list-item-disabled-text-color: var(--kite-menu-list-item-disabled-text-color); --list-item-disabled-cursor: var(--kite-menu-list-item-disabled-cursor); --label-text-size: var(--kite-form-control-label-text-size); --label-line-height: var(--kite-form-control-label-text-line-height); --label-height: calc(var(--label-line-height) * var(--label-text-size)); } .kite-menu--bottom { --list-translate-y: -100%; } .kite-menu--left { --list-translate-x: calc(var(--trigger-width) + var(--kite-menu-list-margin-right)); --list-max-width: calc(var(--kite-menu-list-max-width) - var(--left)); } .kite-menu--block { --width: auto; --list-max-width: 100%; } .kite-menu--sm { --kite-menu-trigger-padding-top: var(--kite-menu-sm-trigger-padding-top); --kite-menu-trigger-padding-left: var(--kite-menu-sm-trigger-padding-left); --kite-menu-trigger-padding-bottom: var(--kite-menu-sm-trigger-padding-bottom); --kite-menu-trigger-padding-right: var(--kite-menu-sm-trigger-padding-right); } .kite-menu--contextual-label { --width: auto; --list-translate-x: 0; --list-translate-y: 0; --list-margin-top: var(--kite-dropdown-list-margin-top); } @media only screen and (min-width: 37.5rem) { .kite-menu { --list-max-width: var(--kite-menu-list-max-width); } } .kite-menu--dropdown { --cursor: var(--kite-dropdown-cursor); --width: auto; --disabled-cursor: var(--kite-dropdown-disabled-cursor); --max-width: calc(100% - var(--right)); --min-width: auto; --height: var(--kite-dropdown-height); --padding-top: var(--kite-dropdown-padding-top); --padding-right: var(--kite-dropdown-padding-right); --padding-bottom: var(--kite-dropdown-padding-bottom); --padding-left: var(--kite-dropdown-padding-left); --icon-margin-right: var(--kite-dropdown-icon-margin-right); --label-margin-bottom: var(--kite-dropdown-label-margin-bottom); --visible-opacity: var(--kite-dropdown-list-activated-opacity); --hidden-opacity: var(--kite-dropdown-list-opacity); --border-width: var(--kite-dropdown-border-width); --border-style: var(--kite-dropdown-border-style); --hover-border-width: var(--kite-dropdown-hover-border-width); --focus-ring-width: var(--kite-dropdown-focus-ring-width); --focus-ring-style: var(--kite-dropdown-focus-ring-style); --focus-ring-offset: var(--kite-dropdown-focus-ring-offset); --value-margin-left: 0; --value-margin-right: var(--kite-dropdown-placeholder-margin-right); --list-translate-x: 0; --list-translate-y: 0; --list-border-width: var(--kite-dropdown-list-border-width); --list-border-style: var(--kite-dropdown-list-border-style); --list-border-radius: var(--kite-dropdown-list-border-radius); --list-cursor: var(--kite-dropdown-list-cursor); --list-max-width: calc(var(--kite-dropdown-list-max-width) - var(--right)); --list-min-width: var(--kite-dropdown-list-min-width); --list-margin-top: var(--kite-dropdown-list-margin-top); --list-z-index: var(--kite-dropdown-list-zindex); --list-transition-duration: var(--kite-dropdown-list-transition-duration); --list-transition-timing-function: var(--kite-dropdown-list-transition-timing-function); --list-transition-target: var(--kite-dropdown-list-transition-target-property); --list-item-disabled-cursor: var(--kite-dropdown-list-item-disabled-cursor); --list-item-border-width: var(--kite-dropdown-list-item-border-width); --list-item-border-style: var(--kite-dropdown-list-item-border-style); --list-item-icon-margin-right: var(--kite-dropdown-list-item-icon-margin-right); --list-item-icon-margin-left: var(--kite-dropdown-list-item-icon-margin-left); --list-item-icon-width: var(--kite-dropdown-list-item-icon-width); --list-item-icon-height: var(--kite-dropdown-list-item-icon-height); --list-item-text-size: var(--kite-dropdown-list-item-text-size); --list-item-text-line-height: var(--kite-dropdown-action-line-height); --list-item-padding-top: var(--kite-dropdown-list-item-padding-top); --list-item-padding-right: var(--kite-dropdown-list-item-padding-right); --list-item-padding-bottom: var(--kite-dropdown-list-item-padding-bottom); --list-item-padding-left: var(--kite-dropdown-list-item-padding-left); --list-item-focus-ring-width: var(--kite-dropdown-list-item-focus-ring-width); --list-item-focus-ring-style: var(--kite-dropdown-list-item-focus-ring-style); /** @prop --selection-background-color: Dropdown / Inline Menu Selection Background Color */ --selection-background-color: var(--kite-dropdown-background-color); /** @prop --selection-color: Dropdown / Inline Menu Selection Text Color */ --selection-color: var(--kite-dropdown-text-color); /** @prop --selection-icon-color: Dropdown / Inline Menu Selection Icon Color */ --selection-icon-color: var(--kite-dropdown-icon-color); /** @prop --selection-border-color: Dropdown Menu Selection Border Color */ --selection-border-color: var(--kite-dropdown-border-color); /** @prop --selection-fill: Dropdown / Inline Menu list item selection icon color */ --selection-fill: var(--kite-dropdown-list-item-icon-color); /** @prop --selection-fill: Dropdown / Inline Menu Selection Label text color */ --label-color: var(--kite-dropdown-label-text-color); /** @prop --selection-focus-ring: Dropdown / Inline Menu Selection focus ring color */ --selection-focus-ring-color: var(--kite-menu-trigger-focus-ring-color); --list-background-color: var(--kite-menu-list-background-color); --list-border-color: var(--kite-menu-list-border-color); --list-elevation: var(--kite-menu-list-elevation); --list-item-border-color: var(--kite-menu-list-item-border-color); --list-item-text-color: var(--kite-menu-list-item-text-color); --list-item-hover-background-color: var(--kite-menu-list-item-hover-background-color); --list-item-disabled-text-color: var(--kite-menu-list-item-disabled-text-color); --list-item-focus-ring-color: var(--kite-menu-list-item-focus-ring-color); /** @prop --disabled-selection-background-color: Dropdown / Inline Menu disabled Selection background color */ --disabled-selection-background-color: var(--kite-dropdown-disabled-background-color); /** @prop --disabled-selection-border-color: Dropdown / Inline Menu disabled Selection border color */ --disabled-selection-border-color: var(--kite-dropdown-disabled-border-color); /** @prop --disabled-selection-color: Dropdown / Inline Menu disabled Selection text color */ --disabled-selection-color: var(--kite-dropdown-disabled-text-color); /** @prop --disabled-selection-color: Dropdown / Inline Menu disabled Selection icon color*/ --disabled-selection-icon-color: var(--kite-dropdown-disabled-icon-color); } .kite-menu--dropdown.kite-menu--left { --max-width: calc(100% - var(--left)); --list-max-width: calc(var(--kite-dropdown-list-max-width) - var(--left)); } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown.kite-menu--left { --list-max-width: var(--kite-dropdown-list-max-width); } } .kite-menu--dropdown.kite-menu--block { --max-width: 100%; --list-max-width: 100%; } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown.kite-menu--block { --list-max-width: var(--kite-dropdown-list-max-width); } } .kite-menu--dropdown.kite-menu--full { --width: 100%; } @media only screen and (min-width: 30rem) { .kite-menu--dropdown.kite-menu--full { --max-width: var(--kite-dropdown-max-width); --list-max-width: none; } } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown { --list-max-width: var(--kite-dropdown-list-max-width); } } .kite-menu--inline { --disabled-cursor: var(--kite-dropdown-inline-disabled-cursor); --cursor: var(--kite-dropdown-cursor); --border-width: var(--kite-dropdown-inline-border-width); --border-style: var(--kite-dropdown-inline-border-style); --padding-top: var(--kite-dropdown-inline-padding-top); --padding-right: var(--kite-dropdown-inline-padding-right); --padding-bottom: var(--kite-dropdown-inline-padding-bottom); --padding-left: var(--kite-dropdown-inline-padding-left); --label-text-weight: var(--kite-dropdown-inline-label-text-weight); --focus-ring-width: var(--kite-dropdown-inline-focus-ring-width); --focus-ring-style: var(--kite-dropdown-inline-focus-ring-style); --focus-ring-offset: var(--kite-dropdown-inline-focus-ring-offset); --value-margin-left: var(--kite-dropdown-inline-placeholder-margin-right); --value-margin-right: var(--kite-dropdown-inline-placeholder-margin-left); --list-translate-x: 0; --list-translate-y: 0; --list-margin-top: var(--kite-dropdown-list-margin-top); --list-min-width: var(--kite-dropdown-list-min-width); --list-item-disabled-cursor: var(--kite-dropdown-list-item-disabled-cursor); --list-item-icon-margin-right: var(--kite-dropdown-list-item-icon-margin-right); --list-item-icon-width: var(--kite-dropdown-list-item-icon-width); --list-item-icon-height: var(--kite-dropdown-list-item-icon-height); --list-item-padding-top: var(--kite-dropdown-list-item-padding-top); --list-item-padding-right: var(--kite-dropdown-list-item-padding-right); --list-item-padding-bottom: var(--kite-dropdown-list-item-padding-bottom); --list-item-padding-left: var(--kite-dropdown-list-item-padding-left); --height: unset; --max-width: calc(100% - var(--right)); --min-width: min-content; --width: auto; --selection-background-color: var(--kite-dropdown-inline-background-color); --selection-focus-ring-color: var(--kite-menu-trigger-focus-ring-color); --selection-color: var(--kite-dropdown-inline-text-color); --selection-border-color: transparent; --label-color: var(--kite-dropdown-label-text-color); --list-item-disabled-text-color: var(--kite-menu-list-item-disabled-text-color); --selection-fill: var(--kite-dropdown-list-item-icon-color); --disabled-selection-background-color: var(--kite-dropdown-inline-disabled-background-color); --disabled-selection-color: var(--kite-dropdown-disabled-text-color); --disabled-selection-icon-color: var(--kite-dropdown-disabled-icon-color); } .kite-menu--inline.kite-menu--left { --max-width: calc(100% - var(--left)); } .kite-menu--inline.kite-menu--block { --max-width: 100%; } @media only screen and (min-width: 37.5rem) { .kite-menu--inline { --width: fit-content; } } .kite-menu { min-height: var(--min-height); min-width: var(--min-width); position: absolute; top: var(--top); right: var(--right); width: var(--width); } .kite-menu__trigger { background-color: var(--trigger-background-color); background-repeat: no-repeat; background-size: calc(var(--kite-menu-trigger-icon-height) * 2); border: var(--hcm-border-width) solid transparent; border-radius: var(--trigger-border-radius); cursor: var(--cursor); padding-top: calc(var(--kite-menu-trigger-padding-top) - var(--hcm-border-width)); padding-right: calc(var(--kite-menu-trigger-padding-right) - var(--hcm-border-width)); padding-bottom: calc(var(--kite-menu-trigger-padding-bottom) - var(--hcm-border-width)); padding-left: calc(var(--kite-menu-trigger-padding-left) - var(--hcm-border-width)); width: var(--trigger-width); height: var(--trigger-height); } .kite-menu__trigger.kite-hover, .kite-menu__trigger:hover { background-color: var(--trigger-hover-background-color); } .kite-menu__trigger.kite-focus-visible, .kite-menu__trigger:focus-visible { border-radius: 0; outline-color: var(--trigger-focus-ring-color); outline-offset: 0; } .kite-menu__trigger.kite-disabled, .kite-menu__trigger:disabled { background-color: var(--trigger-disabled-background-color); cursor: var(--trigger-disabled-cursor); } .kite-menu__trigger.kite-disabled .kite-menu__trigger-label, .kite-menu__trigger:disabled .kite-menu__trigger-label { color: var(--trigger-disabled-label-color); } .kite-menu__trigger.kite-disabled .kite-icon, .kite-menu__trigger:disabled .kite-icon { --color: var(--trigger-disabled-icon-color); } .kite-menu__trigger .kite-icon { --size: var(--kite-menu-trigger-icon-width); --color: var(--trigger-icon-color); } .kite-menu__trigger-label { color: var(--trigger-label-color); font-size: var(--trigger-label-text-size); font-weight: var(--kite-menu-contextual-label-trigger-label-text-weight); line-height: var(--trigger-label-text-line-height); } .kite-menu__label-group { margin-bottom: var(--label-margin-bottom); } .kite-menu__label { color: var(--label-color); display: inline-block; font-size: var(--label-text-size); font-weight: var(--label-text-weight); line-height: var(--label-line-height); } .kite-menu__helper-text { display: block; color: var(--kite-dropdown-helper-text-color); font-size: var(--kite-dropdown-helper-text-size); line-height: var(--kite-dropdown-helper-text-line-height); } .kite-menu__selection { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; background-color: var(--selection-background-color); border: var(--border-width) var(--border-style) var(--selection-border-color); border-radius: var(--kite-dropdown-border-radius); color: var(--selection-color); cursor: var(--cursor); display: flex; justify-content: space-between; line-height: var(--kite-dropdown-text-line-height); margin: var(--kite-dropdown-inline-margin-top) var(--kite-dropdown-inline-margin-right) var(--kite-dropdown-inline-margin-bottom) var(--kite-dropdown-inline-margin-left); max-width: 100%; min-width: var(--min-width); width: fit-content; padding: calc(var(--padding-top) - var(--border-width)) calc(var(--padding-right) - var(--border-width)) calc(var(--padding-bottom) - var(--border-width)) calc(var(--padding-left) - var(--border-width)); text-align: left; height: var(--height); -webkit-user-select: none; /* Safari */ user-select: none; } .kite-menu__selection .kite-icon { --color: var(--selection-color); flex-shrink: 0; margin-right: var(--icon-margin-right); } .kite-menu__selection.kite-focus-visible, .kite-menu__selection:focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--selection-focus-ring-color); outline-offset: var(--focus-ring-offset); } .kite-menu__selection:disabled, .kite-menu__selection[aria-disabled=true] { --selection-border-color: var(--disabled-selection-border-color); background-color: var(--disabled-selection-background-color); color: var(--disabled-selection-color); cursor: var(--disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-menu__selection:disabled, .kite-menu__selection[aria-disabled=true] { border-color: GrayText; color: GrayText; } } .kite-menu__selection:disabled .kite-icon, .kite-menu__selection[aria-disabled=true] .kite-icon { --color: var(--disabled-selection-icon-color); } .kite-menu__selection.kite-hover:not([aria-disabled=true], [disabled]), .kite-menu__selection:hover:not([aria-disabled=true], [disabled]) { --border-width: var(--hover-border-width); } .kite-menu__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--value-margin-right); margin-left: var(--value-margin-left); text-align: left; } .kite-menu a.kite-menu__action, .kite-menu__action { align-items: center; background-color: transparent; border: 0; color: var(--list-item-text-color); cursor: var(--list-cursor); display: inline-flex; font-size: var(--list-item-text-size); line-height: var(--list-item-text-line-height); padding: var(--list-item-padding-top) var(--list-item-padding-right) var(--list-item-padding-bottom) var(--list-item-padding-left); text-align: left; text-decoration: unset; width: 100%; } .kite-menu a.kite-menu__action.kite-focus-visible, .kite-menu a.kite-menu__action:focus-visible, .kite-menu__action.kite-focus-visible, .kite-menu__action:focus-visible { margin-left: calc(-1 * var(--list-border-width)); outline: var(--kite-menu-list-item-focus-ring-width) var(--kite-menu-list-item-focus-ring-style) var(--list-item-focus-ring-color); outline-offset: calc(var(--kite-menu-list-item-focus-ring-width) * -1); width: calc(100% + 2 * var(--list-border-width)); } .kite-menu a.kite-menu__action-icon, .kite-menu__action-icon { display: inline; } .kite-menu a.kite-menu__action-icon .kite-icon, .kite-menu__action-icon .kite-icon { --size: var(--kite-menu-list-item-icon-width); margin-right: var(--kite-menu-list-item-icon-margin-right); vertical-align: text-bottom; } .kite-menu a.kite-menu__action-check .kite-icon, .kite-menu__action-check .kite-icon { --color: none; --size: var(--list-item-icon-width); flex-shrink: 0; margin-right: var(--kite-dropdown-list-item-icon-margin-right); margin-left: var(--kite-dropdown-list-item-icon-margin-left); vertical-align: text-bottom; } .kite-menu a.kite-menu__action-check--selected .kite-icon, .kite-menu__action-check--selected .kite-icon { --color: var(--selection-fill); } .kite-menu a.kite-menu__action.kite-hover, .kite-menu a.kite-menu__action:hover, .kite-menu__action.kite-hover, .kite-menu__action:hover { background-color: var(--list-item-hover-background-color); text-decoration: unset; } .kite-menu a.kite-menu__action[aria-selected=true], .kite-menu a.kite-menu__action[aria-current], .kite-menu__action[aria-selected=true], .kite-menu__action[aria-current] { font-weight: var(--kite-dropdown-list-item-selected-text-weight); } .kite-menu a.kite-menu__action:disabled, .kite-menu a.kite-menu__action[aria-disabled=true], .kite-menu__action:disabled, .kite-menu__action[aria-disabled=true] { color: var(--list-item-disabled-text-color); cursor: var(--list-item-disabled-cursor); } .kite-menu a.kite-menu__action:disabled:hover, .kite-menu a.kite-menu__action[aria-disabled=true]:hover, .kite-menu__action:disabled:hover, .kite-menu__action[aria-disabled=true]:hover { background-color: transparent; } .kite-menu .kite-picker--overlay { --picker-trigger-width: var(--trigger-width); --picker-trigger-height: var(--trigger-height); --translateY: var(--kite-form-control-picker-offset); left: auto; top: auto; z-index: var(--list-z-index); } @media only screen and (min-width: 37.5rem) { .kite-menu .kite-picker--overlay { --translateX: var(--list-translate-x); --translateY: var(--list-translate-y); left: 0; } } .kite-menu .kite-picker__content, .kite-menu .kite-picker--overlay { max-width: var(--list-max-width); min-width: var(--list-min-width); width: max-content; } .kite-menu .kite-picker a.kite-picker__action, .kite-menu .kite-picker__action { padding: var(--list-item-padding-top) var(--list-item-padding-right) var(--list-item-padding-bottom) var(--list-item-padding-left); } .kite-menu--left { right: auto; left: var(--left); } .kite-menu--left .kite-picker--overlay { left: 0; } .kite-menu--bottom { top: auto; bottom: var(--bottom); } .kite-menu--bottom .kite-picker--overlay { --translateY: calc(-100% - var(--trigger-height) - var(--kite-form-control-picker-offset)); } @media only screen and (min-width: 37.5rem) { .kite-menu--bottom .kite-picker--overlay { --translateY: var(--list-translate-y); } } .kite-menu--bottom.kite-menu--dropdown .kite-menu__list, .kite-menu--bottom.kite-menu--inline .kite-menu__list { margin-top: 0; transform: translateY(calc(-100% - var(--height) - var(--list-margin-top))); } .kite-menu--bottom.kite-menu--dropdown .kite-picker--overlay { --translateY: calc(-100% + (var(--label-height) + var(--kite-form-control-label-margin-bottom)) - var(--kite-form-control-picker-offset)); } .kite-menu--block { display: block; position: relative; top: auto; right: auto; bottom: auto; left: auto; } .kite-menu--block .kite-menu__list { right: 0; left: 0; width: fit-content; } .kite-menu--block .kite-picker--overlay { left: 0; } .kite-menu--sm { line-height: 1; } .kite-menu--dropdown { max-width: var(--max-width); } @media only screen and (min-width: 37.5rem) { .kite-menu--dropdown { max-width: var(--kite-dropdown-max-width); } } .kite-menu--dropdown .kite-picker--overlay { --translateY: calc(var(--label-height) + var(--kite-form-control-label-margin-bottom) + var(--kite-form-control-height) + var(--kite-form-control-picker-offset)); top: 0; left: auto; } .kite-menu--dropdown.kite-menu--full .kite-menu__selection { width: 100%; max-width: none; } .kite-menu--dropdown.kite-menu--full .kite-menu__list, .kite-menu--dropdown.kite-menu--full .kite-picker__content, .kite-menu--dropdown.kite-menu--full .kite-picker--overlay { width: 100%; } .kite-menu--dropdown.kite-menu--block .kite-picker--overlay, .kite-menu--dropdown.kite-menu--left .kite-picker--overlay { left: 0; } .kite-menu--inline { max-width: var(--max-width); } @media only screen and (min-width: 37.5rem) { .kite-menu--inline { max-width: none; } } .kite-menu--inline .kite-menu__selection { display: inline-flex; border-radius: var(--kite-dropdown-inline-border-radius); } .kite-menu--inline .kite-picker--overlay { --translateY: calc(var(--label-height) + var(--kite-form-control-picker-offset)); top: 0; left: auto; } .kite-menu--inline.kite-menu--block .kite-picker--overlay, .kite-menu--inline.kite-menu--left .kite-picker--overlay { left: 0; } .kite-menu--contextual-label .kite-menu__trigger { align-items: center; display: flex; gap: var(--kite-menu-contextual-label-trigger-label-margin-right); padding-top: var(--kite-menu-contextual-label-trigger-padding-top); padding-bottom: var(--kite-menu-contextual-label-trigger-padding-bottom); width: unset; } @media only screen and (min-width: 37.5rem) { .kite-menu--contextual-label .kite-picker--overlay:not(.kite-picker--top, .kite-picker--bottom, .kite-picker--right, .kite-picker--left) { --translateY: var(--kite-form-control-picker-offset); left: auto; } .kite-menu--contextual-label.kite-menu--bottom .kite-picker--overlay:not(.kite-picker--top, .kite-picker--bottom, .kite-picker--right, .kite-picker--left) { --translateY: calc(-100% - var(--trigger-height) - var(--kite-form-control-picker-offset)); } .kite-menu--contextual-label.kite-menu--block .kite-picker--overlay, .kite-menu--contextual-label.kite-menu--left .kite-picker--overlay { left: 0; } } .kite-menu--expand-above { --pagination-height: 56px; } .kite-menu--expand-above .kite-menu__list, .kite-menu--expand-above .kite-picker__content { transform: translateY(calc(-100% - var(--pagination-height))); } .kite-menu--scrollable { --menu-item-height: calc((var(--list-item-text-size) * var(--list-item-text-line-height)) + var(--list-item-padding-top) + var(--list-item-padding-bottom) + var(--list-item-border-width)); --max-height: calc((var(--max-item-count) * var(--menu-item-height)) + (var(--menu-item-height) * 0.5)); } .kite-menu--scrollable .kite-menu__list, .kite-menu--scrollable .kite-picker__content { max-height: var(--max-height); overflow-x: auto; } .kite-menu--disabled .kite-menu__label, .kite-menu--disabled .kite-menu__value { color: var(--disabled-selection-color); } .kite-menu--disabled .kite-menu__helper-text { color: var(--kite-dropdown-disabled-helper-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-menu--disabled .kite-menu__value { color: GrayText; } } .kite-menu--open .kite-menu__trigger { background-color: var(--trigger-activated-background-color); } .kite-menu--open .kite-menu__trigger .kite-icon { --color: var(--trigger-activated-icon-color); } .kite-menu--open .kite-menu__trigger-label { color: var(--trigger-activated-label-color); } .kite-menu--open .kite-menu__selection .kite-icon { transform: rotate(-180deg); } .kite-menu--open.kite-menu--dropdown .kite-menu__selection { outline: var(--focus-ring-width) var(--focus-ring-style) var(--selection-focus-ring-color); outline-offset: var(--focus-ring-offset); } .kite-menu--open .kite-menu__list { display: block; opacity: var(--visible-opacity); } .kite-menu__list { background-color: var(--list-background-color); border: var(--list-border-width) var(--list-border-style) var(--list-border-color); border-radius: var(--list-border-radius); box-shadow: var(--list-elevation); cursor: var(--list-cursor); display: none; list-style-type: none; margin-top: var(--list-margin-top); margin-right: calc(-1 * var(--list-max-width)); min-width: var(--list-min-width); max-width: var(--list-max-width); opacity: var(--hidden-opacity); padding: 0; position: absolute; z-index: var(--list-z-index); transform: translate(var(--list-translate-x), var(--list-translate-y)); transition: var(--list-transition-duration) var(--list-transition-timing-function) var(--list-transition-target-property); } .kite-menu__item { margin: 0; max-width: var(--list-max-width); min-width: 100%; padding: 0; } .kite-menu__item:not(:last-child) .kite-menu__action { border-bottom: var(--list-item-border-width) var(--list-item-border-style) var(--list-item-border-color); } .kite-menu__item.kite-menu__item--destructive .kite-menu__action, .kite-menu__item.kite-menu__item--destructive a.kite-menu__action, .kite-menu__item.kite-menu__item--negative .kite-menu__action, .kite-menu__item.kite-menu__item--negative a.kite-menu__action { color: var(--list-item-negative-text-color); } .kite-menu__item.kite-menu__item--destructive .kite-menu__action .kite-icon, .kite-menu__item.kite-menu__item--destructive a.kite-menu__action .kite-icon, .kite-menu__item.kite-menu__item--negative .kite-menu__action .kite-icon, .kite-menu__item.kite-menu__item--negative a.kite-menu__action .kite-icon { --color: var(--list-item-negative-icon-color); } .kite-date-input { --input-border-color: var(--kite-date-input-border-color); --input-border-width: var(--kite-date-input-border-width); --input-border-style: var(--kite-date-input-border-style); --input-addon-total-width: calc(var(--kite-date-input-addon-padding-left) + var(--kite-date-input-addon-icon-width) + var(--kite-date-input-addon-padding-right)); } :has(.kite-date-input__input-group--hover), .kite-date-input:has(.kite-date-input__input-group.kite-hover .kite-date-input__input:not([disabled]), .kite-date-input__input-group:hover .kite-date-input__input:not([disabled])) { --input-border-width: var(--kite-date-input-hover-border-width); } .kite-date-input:has(.kite-date-input__input--focus-visible), .kite-date-input:has(.kite-date-input__input.kite-focus-visible, .kite-date-input__input:focus-visible) { --input-border-width: var(--kite-date-input-focus-ring-width); --input-border-color: var(--kite-date-input-focus-ring-style); --input-border-style: var(--kite-date-input-focus-ring-color); } .kite-date-input--disabled { --input-border-color: var(--kite-date-input-disabled-border-color); --input-border-width: var(--kite-date-input-border-width); } .kite-date-input.kite-form-control--error, .kite-date-input--error { --input-border-color: var(--kite-date-input-error-border-color); --input-border-width: var(--kite-date-input-error-border-width); } .kite-date-input { position: relative; width: 100%; } .kite-date-input__label-group { margin-bottom: var(--kite-date-input-label-margin-bottom); } .kite-date-input__label { color: var(--kite-date-input-label-text-color); display: block; } .kite-date-input__helper-text { display: block; color: var(--kite-date-input-helper-text-color); font-size: var(--kite-date-input-helper-text-size); line-height: var(--kite-date-input-helper-text-line-height); } .kite-date-input__input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; height: var(--kite-date-input-height); } .kite-date-input__input-addon { background: transparent; border: 0; display: flex; align-items: center; text-align: center; white-space: nowrap; padding-top: var(--kite-date-input-addon-padding-top, var(--kite-form-control-addon-padding-top)); padding-right: var(--kite-date-input-addon-padding-right, var(--kite-form-control-addon-padding-right)); padding-bottom: var(--kite-date-input-addon-padding-bottom, var(--kite-form-control-addon-padding-bottom)); padding-left: var(--kite-date-input-addon-padding-left, var(--kite-form-control-addon-padding-left)); height: 100%; position: absolute; top: 0; right: 0; z-index: 2; } .kite-date-input__input-addon:first-child { right: auto; left: 0; } .kite-date-input__input-addon .kite-icon { --color: var(--kite-date-input-addon-icon-color, var(--kite-form-control-addon-icon-color)); --size: var(--kite-date-input-addon-icon-width, var(--kite-form-control-addon-icon-width)); } .kite-date-input__input-addon--button { cursor: var(--kite-cursor-action); text-decoration: none; user-select: none; } .kite-date-input__input-addon--button:focus-visible { outline-offset: var(--kite-date-input-addon-focus-ring-offset, var(--kite-form-control-addon-focus-ring-offset)); } .kite-date-input__input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; appearance: none; background-color: transparent; border: 0; color: var(--kite-date-input-text-color); line-height: var(--kite-date-input-text-line-height); outline: none; padding-top: calc(var(--kite-date-input-padding-top) - var(--input-border-width)); padding-right: calc(var(--input-addon-total-width) - var(--input-border-width)); padding-bottom: calc(var(--kite-date-input-padding-bottom) - var(--input-border-width)); padding-left: calc(var(--kite-date-input-padding-left) - var(--input-border-width)); position: absolute; top: var(--input-border-width); left: var(--input-border-width); width: calc(100% - var(--input-border-width) * 2); height: calc(var(--kite-date-input-height) * var(--input-border-width) * 2); z-index: 1; } .kite-date-input__input::placeholder { color: var(--kite-date-input-placeholder-text-color); font-style: var(--kite-date-input-placeholder-text-style); } .kite-date-input__input:disabled::placeholder { color: var(--kite-date-input-disabled-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-date-input__input:disabled ~ .kite-date-input__appearance { border-color: GrayText; } } .kite-date-input__input::-webkit-calendar-picker-indicator { display: none; } .kite-date-input__input--focus-visible, .kite-date-input__input.kite-focus-visible, .kite-date-input__input:focus-visible { outline: none; } .kite-date-input__appearance { background-color: var(--kite-date-input-background-color); border: var(--input-border-width) var(--input-border-style) var(--input-border-color); border-radius: var(--kite-date-input-border-radius); color: var(--kite-date-input-text-color); width: 100%; height: 100%; position: relative; z-index: 0; } .kite-date-input .kite-form-control__error, .kite-date-input__feedback { color: var(--kite-date-input-error-feedback-text-color); display: none; margin-top: var(--kite-date-input-feedback-margin-top); } .kite-date-input .kite-picker--overlay { --translateY: calc(var(--kite-date-input-label-height) + var(--kite-date-input-label-margin-bottom) + var(--kite-date-input-height) + var(--kite-date-input-picker-offset)); } .kite-date-input .kite-picker__content { padding: var(--kite-date-input-picker-padding-top) var(--kite-date-input-picker-padding-right) var(--kite-date-input-picker-padding-bottom) var(--kite-date-input-picker-padding-left); } .kite-date-input.kite-form-control--error .kite-form-control__error, .kite-date-input.kite-form-control--error .kite-date-input__feedback, .kite-date-input--error .kite-form-control__error, .kite-date-input--error .kite-date-input__feedback { display: block; } .kite-date-input.kite-form-control--error .kite-picker__content, .kite-date-input--error .kite-picker__content { outline: var(--kite-calendar-error-border-width) var(--kite-form-control-picker-border-style) var(--kite-calendar-error-border-color); outline-offset: calc(var(--kite-calendar-error-border-width) * -1); } .kite-date-input--disabled .kite-date-input__label { color: var(--kite-date-input-disabled-label-text-color); } .kite-date-input--disabled .kite-date-input__helper-text { color: var(--kite-date-input-disabled-helper-text-color); } .kite-date-input--disabled .kite-date-input__input { color: var(--kite-date-input-disabled-text-color); cursor: var(--kite-date-input-disabled-cursor); } .kite-date-input--disabled .kite-date-input__input-addon { cursor: var(--kite-date-input-disabled-cursor, var(--kite-form-control-disabled-cursor)); } .kite-date-input--disabled .kite-date-input__input-addon .kite-icon { --color: var(--kite-date-input-disabled-text-color, var(--kite-form-control-disabled-text-color)); } .kite-calendar__header { width: calc(100% + var(--kite-date-input-picker-padding-right) + var(--kite-date-input-picker-padding-left)); margin-left: calc(var(--kite-date-input-picker-padding-right) * -1); display: flex; align-items: center; justify-content: space-between; } .kite-calendar__month-year { font-weight: var(--kite-calendar-month-year-text-weight); margin: var(--kite-calendar-month-year-margin-top) var(--kite-calendar-month-year-margin-right) var(--kite-calendar-month-year-margin-bottom) var(--kite-calendar-month-year-margin-left); } .kite-calendar__prev, .kite-calendar__next { border: 0; background: transparent; cursor: var(--kite-calendar-action-cursor); padding: var(--kite-calendar-controls-padding-top) var(--kite-calendar-controls-padding-right) var(--kite-calendar-controls-padding-bottom) var(--kite-calendar-controls-padding-left); color: var(--kite-calendar-controls-text-color); } .kite-calendar__prev--hidden, .kite-calendar__next--hidden { visibility: hidden; opacity: 0; } @media (hover: hover) and (pointer: fine) { .kite-calendar__prev--hover, .kite-calendar__prev.kite-hover, .kite-calendar__prev:hover, .kite-calendar__next--hover, .kite-calendar__next.kite-hover, .kite-calendar__next:hover { background-color: var(--kite-calendar-controls-hover-background-color); } } .kite-calendar__prev.kite-focus-visible, .kite-calendar__prev:focus-visible, .kite-calendar__next.kite-focus-visible, .kite-calendar__next:focus-visible { color: var(--kite-calendar-controls-focus-text-color); outline-offset: 0; } .kite-calendar__prev { border-radius: var(--kite-form-control-picker-border-radius) 0 0 0; } .kite-calendar__next { border-radius: 0 var(--kite-form-control-picker-border-radius) 0 0; } .kite-calendar__table { border-collapse: collapse; border-spacing: 0; text-align: center; width: 100%; } .kite-calendar__table-header, .kite-calendar__cell { height: var(--kite-calendar-day-height); width: var(--kite-calendar-day-width); text-align: var(--kite-calendar-day-text-align); } .kite-calendar__day { color: var(--kite-calendar-day-text-color); border: 1px solid transparent; background: transparent; cursor: var(--kite-calendar-action-cursor); position: relative; padding: 0; } .kite-calendar__day, .kite-calendar__day .kite-calendar__day-number { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--hover, .kite-calendar__day.kite-hover, .kite-calendar__day:hover { background-color: var(--kite-calendar-day-hover-background-color); } } .kite-calendar__day:focus-visible { outline: var(--kite-calendar-focus-ring-width) var(--kite-calendar-focus-ring-style) var(--kite-calendar-focus-ring-color); outline-offset: var(--kite-calendar-day-focus-ring-offset); } .kite-calendar__day--disabled { color: var(--kite-calendar-day-disabled-text-color); } .kite-calendar__day--unavailable { text-decoration: var(--kite-calendar-day-unavailable-text-decoration-line); text-decoration-thickness: var(--kite-calendar-day-unavailable-text-decoration-thickness); } .kite-calendar__day--invalid { text-decoration: var(--kite-calendar-day-invalid-text-decoration-line); text-decoration-thickness: var(--kite-calendar-day-invalid-text-decoration-thickness); } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--invalid.kite-calendar__day-hover, .kite-calendar__day--invalid.kite-hover, .kite-calendar__day--invalid:hover { background-color: var(--kite-calendar-day-invalid-hover-background-color); } } .kite-calendar__day--invalid:focus-visible, .kite-calendar__day--invalid.kite-focus-visible { outline-color: var(--kite-calendar-day-invalid-focus-ring-color); } .kite-calendar__day--invalid.kite-calendar__day--selected { background-color: var(--kite-calendar-day-invalid-selected-background-color); color: var(--kite-calendar-day-invalid-selected-text-color); } .kite-calendar__day--out-range { color: var(--kite-calendar-day-out-range-text-color); text-decoration: var(--kite-calendar-day-out-range-text-decoration-line); text-decoration-thickness: var(--kite-calendar-day-out-range-text-decoration-thickness); } .kite-calendar__day--out-range, .kite-calendar__day--disabled { cursor: var(--kite-calendar-day-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-calendar__day--out-range, .kite-calendar__day--disabled { color: GrayText; border-color: GrayText; } } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--out-range--hover, .kite-calendar__day--out-range.kite-hover, .kite-calendar__day--out-range:hover, .kite-calendar__day--disabled--hover, .kite-calendar__day--disabled.kite-hover, .kite-calendar__day--disabled:hover { background-color: transparent; } } .kite-calendar__day[aria-current=date] { color: var(--kite-calendar-day-today-text-color); position: relative; } .kite-calendar__day[aria-current=date]::after { content: ""; position: absolute; bottom: var(--kite-calendar-day-today-indicator-offset); width: var(--kite-calendar-day-today-indicator-width); height: var(--kite-calendar-day-today-indicator-height); background-color: var(--kite-calendar-day-today-indicator-background-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-calendar__day[aria-current=date] { color: Highlight; } } .kite-calendar__day--selected { background-color: var(--kite-calendar-day-selected-background-color); color: var(--kite-calendar-day-selected-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-calendar__day--selected, .kite-calendar__day--selected.kite-calendar__day--invalid { background-color: SelectedItem; } } .kite-calendar__day--selected[aria-disabled=true] { cursor: default; } .kite-calendar__day--prev-month:not(.kite-calendar__day--selected), .kite-calendar__day--next-month:not(.kite-calendar__day--selected) { color: var(--kite-calendar-day-out-month-text-color); } @media (hover: hover) and (pointer: fine) { .kite-calendar__day--prev-month--hover:not(.kite-calendar__day--disabled), .kite-calendar__day--prev-month.kite-hover:not(.kite-calendar__day--disabled), .kite-calendar__day--prev-month:hover:not(.kite-calendar__day--disabled), .kite-calendar__day--next-month--hover:not(.kite-calendar__day--disabled), .kite-calendar__day--next-month.kite-hover:not(.kite-calendar__day--disabled), .kite-calendar__day--next-month:hover:not(.kite-calendar__day--disabled) { color: var(--kite-calendar-day-out-month-hover-text-color); } } .kite-calendar__day-due { position: absolute; bottom: calc(var(--kite-calendar-day-due-offset) * -1); text-transform: var(--kite-calendar-day-due-text-transform); background-color: var(--kite-calendar-day-due-background-color); color: var(--kite-calendar-day-due-text-color); font-size: var(--kite-calendar-day-due-text-size); line-height: var(--kite-calendar-day-due-text-line-height); border-radius: var(--kite-calendar-day-due-border-radius); border: 1px solid transparent; padding: calc(var(--kite-calendar-day-due-padding-top) - 1px) calc(var(--kite-calendar-day-due-padding-right) - 1px) calc(var(--kite-calendar-day-due-padding-bottom) - 1px) calc(var(--kite-calendar-day-due-padding-left) - 1px); z-index: 1; } .kite-calendar__feedback { padding: var(--kite-calendar-feedback-padding-top) var(--kite-calendar-feedback-padding-right) var(--kite-calendar-feedback-padding-bottom) var(--kite-calendar-feedback-padding-left); display: flex; gap: var(--kite-calendar-feedback-gap); color: var(--kite-calendar-error-feedback-text-color); } .kite-calendar__feedback .kite-icon { flex-shrink: 0; margin-top: var(--kite-calendar-error-feedback-icon-margin-top); --color: var(--kite-calendar-error-feedback-icon-color); } .kite-calendar--standalone { background-color: var(--kite-calendar-standalone-background-color); border: var(--kite-calendar-standalone-border-width) var(--kite-calendar-standalone-border-style) var(--kite-calendar-standalone-border-color); border-radius: var(--kite-calendar-standalone-border-radius); padding: var(--kite-calendar-standalone-padding-top) var(--kite-calendar-standalone-padding-right) var(--kite-calendar-standalone-padding-bottom) var(--kite-calendar-standalone-padding-left); min-width: var(--kite-calendar-standalone-min-width); min-height: var(--kite-calendar-standalone-min-height); } .kite-calendar--standalone .kite-calendar__header { width: 100%; margin-left: 0; } .kite-calendar--standalone .kite-calendar__table-header span:not(.kite-assistive-text), .kite-calendar--standalone .kite-calendar__day { aspect-ratio: 1/1; } .kite-calendar--standalone .kite-calendar__table-header span:not(.kite-assistive-text) { display: flex; justify-content: center; align-items: center; } .kite-calendar--standalone.kite-calendar--error { box-shadow: 0 0 0 var(--kite-calendar-error-border-width) var(--kite-calendar-error-border-color); border-color: transparent; } .kite-time-input { --selection-border-width: var(--kite-time-input-border-width); --selection-border-style: var(--kite-time-input-border-style); --selection-border-color: var(--kite-time-input-border-color); } .kite-time-input { position: relative; display: block; width: 100%; } @media only screen and (min-width: 30rem) { .kite-time-input { max-width: var(--kite-time-input-max-width); } } .kite-time-input__label-group { margin-bottom: var(--kite-time-input-label-margin-bottom); } .kite-time-input__label { color: var(--kite-time-input-label-color); display: inline-block; font-weight: var(--kite-time-input-label-text-weight); } .kite-time-input__helper-text { display: block; color: var(--kite-time-input-helper-text-color); font-size: var(--kite-time-input-helper-text-size); line-height: var(--kite-time-input-helper-text-line-height); } .kite-time-input__selection { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-items: center; background-color: var(--kite-time-input-background-color); border: var(--selection-border-width) var(--selection-border-style) var(--selection-border-color); border-radius: var(--kite-time-input-border-radius); color: var(--kite-time-input-text-color); cursor: var(--kite-time-input-cursor); display: flex; justify-content: space-between; line-height: var(--kite-time-input-text-line-height); margin: var(--kite-time-input-margin-top) var(--kite-time-input-margin-right) var(--kite-time-input-margin-bottom) var(--kite-time-input-margin-left); padding: calc(var(--kite-time-input-padding-top) - var(--selection-border-width)) calc(var(--kite-time-input-padding-right) - var(--selection-border-width)) calc(var(--kite-time-input-padding-bottom) - var(--selection-border-width)) calc(var(--kite-time-input-padding-left) - var(--selection-border-width)); width: 100%; text-align: left; height: var(--kite-time-input-height); -webkit-user-select: none; /* Safari */ user-select: none; } .kite-time-input__selection .kite-icon { --color: var(--kite-time-input-icon-color); --size: var(--kite-time-input-icon-size); flex-shrink: 0; margin-right: var(--kite-time-input-icon-margin-right); } .kite-time-input__selection.kite-focus-visible, .kite-time-input__selection:focus-visible { outline: var(--kite-time-input-focus-ring-width) var(--kite-time-input-focus-ring-style) var(--kite-time-input-focus-ring-color); outline-offset: var(--kite-time-input-focus-ring-offset); } .kite-time-input__selection:disabled, .kite-time-input__selection[aria-disabled=true] { --selection-border-color: var(--kite-time-input-disabled-border-color); background-color: var(--kite-time-input-disabled-background-color); color: var(--kite-time-input-disabled-text-color); cursor: var(--kite-time-input-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-time-input__selection:disabled, .kite-time-input__selection[aria-disabled=true] { border-color: GrayText; color: GrayText; } } .kite-time-input__selection:disabled .kite-icon, .kite-time-input__selection[aria-disabled=true] .kite-icon { --color: var(--kite-time-input-disabled-icon-color); } .kite-time-input__selection.kite-hover:not([aria-disabled=true], [disabled]), .kite-time-input__selection:hover:not([aria-disabled=true], [disabled]) { --selection-border-width: var(--kite-time-input-hover-border-width); } .kite-time-input__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: var(--kite-time-input-placeholder-margin-right); margin-left: var(--kite-time-input-placeholder-margin-left); text-align: left; } .kite-time-input__value--placeholder { color: var(--kite-time-input-placeholder-text-color); font-style: var(--kite-time-input-placeholder-text-style); } .kite-time-input__feedback { display: none; color: var(--kite-time-input-error-feedback-text-color); margin-top: var(--kite-time-input-feedback-margin-top); } .kite-time-input--error .kite-time-input__selection { --selection-border-color: var(--kite-time-input-error-border-color); --selection-border-width: var(--kite-time-input-error-border-width); } .kite-time-input--error .kite-time-input__feedback { display: block; } .kite-time-input--disabled .kite-time-input__label, .kite-time-input--disabled .kite-time-input__value { color: var(--kite-time-input-disabled-text-color); } .kite-time-input--disabled .kite-time-input__helper-text { color: var(--kite-time-input-disabled-helper-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-time-input--disabled .kite-time-input__value { color: GrayText; } } .kite-picker { position: relative; } .kite-picker--list .kite-picker__content { padding: 0; } .kite-picker--open.kite-picker--overlay, .kite-picker--open .kite-picker__content { opacity: 1; visibility: visible; } .kite-picker--overlay { /** Positioning props **/ --translateX: 0; --label-height: calc(var(--kite-form-control-label-text-line-height) * var(--kite-form-control-label-text-size)); --translateY: calc(var(--label-height) + var(--kite-form-control-label-margin-bottom) + var(--kite-form-control-height) + var(--kite-form-control-picker-offset)); /** @prop --picker-trigger-width: Represents the width of a picker's trigger element. May require dynamic calculation */ --picker-trigger-width: 0; /** @prop --picker-trigger-height: Represents the height of a picker's trigger element. May require dynamic calculation */ --picker-trigger-height: 0; /** Positioning styles **/ position: absolute; top: 0; left: 0; right: 0; transform: translate(var(--translateX), var(--translateY)); z-index: var(--kite-form-control-picker-zindex); visibility: hidden; opacity: 0; /** Positioning variants **/ } .kite-picker--overlay.kite-picker--top { --translateY: calc(-100% - var(--picker-trigger-height) - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--bottom { --translateY: var(--kite-form-control-picker-offset); } .kite-picker--overlay.kite-picker--right { --translateX: calc(var(--picker-trigger-width) + var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--left { --translateX: calc(-100% - var(--kite-form-control-picker-offset)); } .kite-picker--overlay.kite-picker--top, .kite-picker--overlay.kite-picker--bottom { --translateX: calc(-50% + (var(--picker-trigger-width) / 2)); } .kite-picker--overlay.kite-picker--top.kite-picker--align-start, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-start { --translateX: 0; } .kite-picker--overlay.kite-picker--top.kite-picker--align-end, .kite-picker--overlay.kite-picker--bottom.kite-picker--align-end { --translateX: calc(-100% + var(--picker-trigger-width)); } .kite-picker--overlay.kite-picker--right, .kite-picker--overlay.kite-picker--left { --translateY: -50%; } .kite-picker--overlay.kite-picker--right.kite-picker--align-start, .kite-picker--overlay.kite-picker--left.kite-picker--align-start { --translateY: calc(-1 * var(--picker-trigger-height)); } .kite-picker--overlay.kite-picker--right.kite-picker--align-end, .kite-picker--overlay.kite-picker--left.kite-picker--align-end { --translateY: -100%; } .kite-picker__content { background-color: var(--kite-form-control-picker-background-color); border: var(--kite-form-control-picker-border-width) var(--kite-form-control-picker-border-style) var(--kite-form-control-picker-border-color); border-radius: var(--kite-form-control-picker-border-radius); box-shadow: var(--kite-form-control-picker-elevation); display: block; padding: var(--kite-form-control-picker-padding-top) var(--kite-form-control-picker-padding-right) var(--kite-form-control-picker-padding-bottom) var(--kite-form-control-picker-padding-left); opacity: 0; visibility: hidden; min-width: var(--kite-form-control-picker-min-width); width: 100%; } .kite-picker__list { cursor: var(--kite-form-control-picker-cursor); list-style-type: none; margin: 0; padding: 0; --max-item-count: ; --picker-list-item-height: calc(((var(--kite-form-control-picker-list-item-line-height) * 1rem) + var(--kite-form-control-picker-list-item-padding-top) + var(--kite-form-control-picker-list-item-padding-bottom) + var(--kite-form-control-picker-list-item-border-width))); --picker-list-max-height: calc(var(--picker-list-item-height) * var(--max-item-count)); max-height: calc(var(--picker-list-max-height) + 0.5 * var(--picker-list-item-height)); overflow-y: auto; } .kite-picker__item { margin: 0; padding: 0; min-width: 100%; max-width: var(--kite-form-control-picker-list-item-max-width); } .kite-picker__item:not(:last-child) .kite-picker__action { border-bottom: var(--kite-form-control-picker-list-item-border-width) var(--kite-form-control-picker-list-item-border-style) var(--kite-form-control-picker-list-item-border-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action, .kite-picker__item.kite-picker__item--negative a.kite-picker__action { color: var(--kite-form-control-picker-list-item-negative-text-color); } .kite-picker__item.kite-picker__item--negative .kite-picker__action .kite-icon, .kite-picker__item.kite-picker__item--negative a.kite-picker__action .kite-icon { --color: var(--kite-form-control-picker-list-item-negative-icon-color); } .kite-picker a.kite-picker__action, .kite-picker__action { align-items: center; background-color: transparent; border: 0; color: var(--kite-form-control-picker-list-item-text-color); cursor: var(--kite-form-control-picker-cursor); display: inline-flex; font-size: var(--kite-form-control-picker-list-item-text-size); line-height: var(--kite-form-control-picker-list-item-line-height); padding: var(--kite-form-control-picker-list-item-padding-top) var(--kite-form-control-picker-list-item-padding-right) var(--kite-form-control-picker-list-item-padding-bottom) var(--kite-form-control-picker-list-item-padding-left); text-align: left; text-decoration: unset; width: 100%; } .kite-picker a.kite-picker__action:focus-visible, .kite-picker a.kite-picker__action.kite-focus-visible, .kite-picker__action:focus-visible, .kite-picker__action.kite-focus-visible { outline: var(--kite-form-control-picker-list-item-focus-ring-width) var(--kite-form-control-picker-list-item-focus-ring-style) var(--kite-form-control-picker-list-item-focus-ring-color); outline-offset: var(--kite-form-control-picker-list-item-focus-ring-offset); } .kite-picker a.kite-picker__action-icon, .kite-picker__action-icon { display: inline; } .kite-picker a.kite-picker__action-icon .kite-icon, .kite-picker__action-icon .kite-icon { --size: var(--kite-form-control-picker-list-item-icon-width); margin-right: var(--kite-form-control-picker-list-item-icon-margin-right); vertical-align: text-bottom; } .kite-picker a.kite-picker__action-check .kite-icon, .kite-picker__action-check .kite-icon { --color: none; --size: var(--kite-form-control-picker-list-item-check-icon-width); flex-shrink: 0; margin-right: var(--kite-form-control-picker-list-item-check-icon-margin-right); margin-left: var(--kite-form-control-picker-list-item-check-icon-margin-left); vertical-align: text-bottom; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg, .kite-picker__action-check--hidden:not(.kite-picker__action-check--selected) .kite-icon .kite-icon__inner svg { fill: none; } } .kite-picker a.kite-picker__action-check--selected .kite-icon, .kite-picker__action-check--selected .kite-icon { --color: var(--kite-form-control-picker-list-item-check-icon-color); } .kite-picker a.kite-picker__action--hover, .kite-picker a.kite-picker__action.kite-hover, .kite-picker a.kite-picker__action:hover, .kite-picker__action--hover, .kite-picker__action.kite-hover, .kite-picker__action:hover { background-color: var(--kite-form-control-picker-list-item-hover-background-color); text-decoration: unset; } .kite-picker a.kite-picker__action[aria-selected=true], .kite-picker a.kite-picker__action[aria-checked=true], .kite-picker a.kite-picker__action[aria-current], .kite-picker__action[aria-selected=true], .kite-picker__action[aria-checked=true], .kite-picker__action[aria-current] { font-weight: var(--kite-form-control-picker-list-item-selected-text-weight); } .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: var(--kite-form-control-picker-list-item-disabled-text-color); cursor: var(--kite-form-control-picker-list-item-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-picker a.kite-picker__action:disabled, .kite-picker a.kite-picker__action[aria-disabled=true], .kite-picker__action:disabled, .kite-picker__action[aria-disabled=true] { color: GrayText; } } .kite-picker a.kite-picker__action:disabled:hover, .kite-picker a.kite-picker__action[aria-disabled=true]:hover, .kite-picker__action:disabled:hover, .kite-picker__action[aria-disabled=true]:hover { background-color: transparent; } .kite-picker__backdrop { background-color: var(--kite-form-control-picker-backdrop-background-color); opacity: var(--kite-form-control-picker-backdrop-opacity); pointer-events: auto; touch-action: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--kite-form-control-picker-backdrop-zindex); } .kite-picker__backdrop--hidden { opacity: 0; visibility: hidden; } .kite-picker--open.kite-picker--overlay, .kite-picker--open .kite-picker__content { visibility: inherit; } .kite-menu__value--placeholder { color: var(--kite-form-control-placeholder-text-color); } .kite-menu .kite-picker--list, .kite-time-input .kite-picker--list { webkit-transform: initial; transform: initial; transition: initial; position: relative; } .kite-pagination .kite-menu--inline .kite-picker__content .rk-picker__list--virtualization, .kite-pagination .kite-menu--inline .kite-picker--overlay .rk-picker__list--virtualization { min-width: var(--list-min-width); } .kite-meter { /** @prop --percent: Sets meter percent progress. Supports values between `0.` and `1.` */ --percent: 0; /** @prop --color: Sets meter color */ --color: var(--kite-meter-fill-color); /** @prop --icon-color: Sets status icon color */ --icon-color: var(--kite-meter-icon-color); --label-text-weight: var(--kite-meter-label-text-weight); --tick-width: var(--kite-meter-tick-width); --tick-height: var(--kite-meter-tick-height); --status-icon-height: var(--kite-meter-icon-height); --status-icon-width: var(--kite-meter-icon-width); --value-label-text-weight: var(--kite-meter-value-label-text-weight); --label-text-color: var(--kite-meter-label-text-color); --label-text-size: var(--kite-meter-label-text-size); --label-text-line-height: var(--kite-meter-label-text-line-height); --label-text-margin-bottom: var(--kite-meter-label-margin-bottom); --track-border-radius: var(--kite-meter-track-border-radius); --track-height: var(--kite-meter-track-height); --track-margin-bottom: var(--kite-meter-track-margin-bottom); --value-label-text-color: var(--kite-meter-value-label-text-color); --value-label-text-size: var(--kite-meter-value-label-text-size); --value-label-text-line-height: var(--kite-meter-value-label-text-line-height); --tick-color: var(--kite-meter-tick-color); --track-color: var(--kite-meter-track-color); --status-label-text-size: var(--kite-meter-status-label-text-size); --status-label-text-line-height: var(--kite-meter-status-label-text-line-height); --status-label-text-weight: var(--kite-meter-status-label-text-weight); } .kite-meter--success, .kite-meter--positive { --color: var(--kite-meter-positive-fill-color); --icon-color: var(--kite-meter-positive-icon-color); } .kite-meter--caution { --color: var(--kite-meter-caution-fill-color); --icon-color: var(--kite-meter-caution-icon-color); } .kite-meter--alert, .kite-meter--negative { --color: var(--kite-meter-negative-fill-color); --icon-color: var(--kite-meter-negative-icon-color); } .kite-meter--lg { --status-icon-height: var(--kite-meter-lg-icon-height); --status-icon-width: var(--kite-meter-lg-icon-width); --track-height: var(--kite-meter-lg-track-height); --label-text-size: var(--kite-meter-lg-label-text-size); --label-text-line-height: var(--kite-meter-lg-label-text-line-height); --value-label-text-size: var(--kite-meter-lg-value-label-text-size); --value-label-text-line-height: var(--kite-meter-lg-value-label-text-line-height); --track-border-radius: var(--kite-meter-lg-track-border-radius); --status-label-text-size: var(--kite-meter-lg-status-label-text-size); --status-label-text-line-height: var(--kite-meter-lg-status-label-text-line-height); --status-label-text-weight: var(--kite-meter-lg-status-label-text-weight); } .kite-meter--sm { --status-icon-height: var(--kite-meter-sm-icon-height); --status-icon-width: var(--kite-meter-sm-icon-width); --track-height: var(--kite-meter-sm-track-height); --label-text-size: var(--kite-meter-sm-label-text-size); --label-text-line-height: var(--kite-meter-sm-label-text-line-height); --value-label-text-size: var(--kite-meter-sm-value-label-text-size); --value-label-text-line-height: var(--kite-meter-sm-value-label-text-line-height); --track-border-radius: var(--kite-meter-sm-track-border-radius); --status-label-text-size: var(--kite-meter-sm-status-label-text-size); --status-label-text-line-height: var(--kite-meter-sm-status-label-text-line-height); --status-label-text-weight: var(--kite-meter-sm-status-label-text-weight); } .kite-meter--circular { --circle-height: var(--kite-meter-circular-height); --circle-width: var(--kite-meter-circular-width); --track-height: var(--kite-meter-circular-track-height); --track-margin-right: 0; --track-margin-bottom: var(--kite-meter-circular-track-margin-bottom); --label-text-size: var(--kite-meter-circular-label-text-size); --label-text-line-height: var(--kite-meter-circular-label-text-line-height); --value-label-text-size: var(--kite-meter-circular-value-label-text-size); --value-label-text-line-height: var(--kite-meter-circular-value-label-text-line-height); --tick-width: var(--kite-meter-circular-tick-width); --tick-height: var(--kite-meter-circular-tick-height); --label-margin-top: var(--kite-meter-circular-label-margin-top); --status-icon-height: var(--kite-meter-circular-icon-height); --status-icon-width: var(--kite-meter-circular-icon-width); --circle-height-px: var(--kite-meter-circular-height-px); --track-height-px: var(--kite-meter-circular-track-height-px); --circle-diameter: calc(var(--circle-height-px) - var(--track-height-px)); --circle-circumference: calc(var(--pi) * var(--circle-diameter)); } .kite-meter--circular.kite-meter--sm { --circle-height: var(--kite-meter-circular-sm-height); --circle-width: var(--kite-meter-circular-sm-width); --track-height: var(--kite-meter-circular-sm-track-height); --circle-height-px: var(--kite-meter-circular-sm-height-px); --track-height-px: var(--kite-meter-circular-sm-track-height-px); --track-margin-right: var(--kite-meter-circular-sm-track-margin-right); --value-label-text-size: var(--kite-meter-circular-sm-value-label-text-size); --value-label-text-line-height: var(--kite-meter-circular-sm-value-label-text-line-height); --tick-width: var(--kite-meter-circular-sm-tick-width); --tick-height: var(--kite-meter-circular-sm-tick-height); --status-icon-margin: var(--kite-meter-circular-sm-icon-margin); --status-icon-height: var(--kite-meter-circular-sm-icon-height); --status-icon-width: var(--kite-meter-circular-sm-icon-width); --label-margin-top: auto; } .kite-meter--circular.kite-meter--lg { --circle-height: var(--kite-meter-circular-lg-height); --circle-width: var(--kite-meter-circular-lg-width); --track-height: var(--kite-meter-circular-lg-track-height); --circle-height-px: var(--kite-meter-circular-lg-height-px); --track-height-px: var(--kite-meter-circular-lg-track-height-px); --label-text-size: var(--kite-meter-circular-lg-label-text-size); --label-text-line-height: var(--kite-meter-circular-lg-label-text-line-height); --value-label-text-size: var(--kite-meter-circular-lg-value-label-text-size); --value-label-text-line-height: var(--kite-meter-circular-lg-value-label-text-line-height); --value-label-margin-bottom: var(--kite-meter-circular-lg-value-label-margin-bottom); --tick-width: var(--kite-meter-circular-lg-tick-width); --tick-height: var(--kite-meter-circular-lg-tick-height); --status-icon-margin: var(--kite-meter-circular-lg-icon-margin); --status-icon-height: var(--kite-meter-circular-lg-icon-height); --status-icon-width: var(--kite-meter-circular-lg-icon-width); --label-margin-top: auto; } .kite-meter { contain: content; width: 100%; } .kite-meter__label { color: var(--label-text-color); display: block; font-size: var(--label-text-size); line-height: var(--label-text-line-height); font-weight: var(--label-text-weight); margin-bottom: var(--label-text-margin-bottom); } .kite-meter__track { background-color: var(--track-color); border-color: var(--tick-color); border-radius: var(--track-border-radius) 0 0 var(--track-border-radius); border-style: solid; border-width: 0 var(--tick-width) 0 0; margin-bottom: var(--track-margin-bottom); width: 100%; height: var(--track-height); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-meter__track { border: 1px solid CanvasText; } } .kite-meter__progress-fill { background-color: var(--color); border-bottom-left-radius: var(--track-border-radius); border-top-left-radius: var(--track-border-radius); width: calc(var(--percent) * 100 * 1%); height: 100%; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-meter__progress-fill { --color: CanvasText; } } .kite-meter__value-group { align-items: center; display: flex; justify-content: space-between; } .kite-meter__value-label { color: var(--value-label-text-color); font-size: var(--value-label-text-size); line-height: var(--value-label-text-line-height); font-weight: var(--value-label-text-weight); } .kite-meter__status-group { display: flex; align-items: center; justify-content: flex-end; gap: var(--kite-meter-icon-margin); } .kite-meter__status-icon { width: var(--status-icon-width); height: var(--status-icon-height); } .kite-meter__status-icon .kite-icon { --color: var(--icon-color); --size: var(--status-icon-width); display: inline; } .kite-meter__status-label { color: var(--kite-meter-status-label-text-color); font-size: var(--status-label-text-size); line-height: var(--status-label-text-line-height); font-weight: var(--status-label-text-weight); } .kite-meter--circular { display: flex; flex-direction: column; } .kite-meter--circular .kite-meter__value-group { display: flex; flex-direction: column; margin: 0 auto; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .kite-meter--circular .kite-meter__progress-group { align-self: center; position: relative; width: var(--circle-width); height: var(--circle-height); } .kite-meter--circular .kite-meter__label { font-size: var(--label-text-size); margin: var(--label-margin-top) auto 0; order: 3; } .kite-meter--circular .kite-meter__value-label { text-align: center; } .kite-meter--circular .kite-meter__progress { margin: 0 auto; margin-bottom: var(--track-margin-bottom); width: var(--circle-width); height: var(--circle-height); } .kite-meter--circular .kite-meter__track { fill: none; margin-right: var(--track-margin-right); stroke: var(--track-color); stroke-width: var(--track-height); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-meter--circular .kite-meter__track { --track-color: none; } } .kite-meter--circular .kite-meter__progress-fill { --dash-length: calc(var(--circle-circumference) * var(--percent)); --dash-full: calc(var(--circle-circumference) - var(--dash-length)); fill: none; stroke-dasharray: var(--dash-length), var(--dash-full); stroke-dashoffset: calc(var(--circle-circumference) * 0.25); stroke-width: var(--track-height); stroke: var(--color); } .kite-meter--circular .kite-meter__tick { fill: var(--tick-color); width: var(--tick-width); height: var(--tick-height); } .kite-meter--circular.kite-meter--sm { display: flex; justify-content: center; } .kite-meter--circular.kite-meter--sm .kite-meter__progress-group { align-items: center; display: flex; width: auto; height: 100%; } .kite-meter--circular.kite-meter--sm .kite-meter__status-icon { margin: var(--status-icon-margin) calc(var(--track-margin-right) + var(--status-icon-margin)) var(--status-icon-margin) var(--status-icon-margin); } .kite-meter--circular.kite-meter--sm .kite-meter__value-group { align-items: center; flex-direction: row; font-size: var(--value-label-text-size); line-height: var(--value-label-text-line-height); margin: 0; order: 2; position: relative; transform: none; width: auto; } .kite-meter--circular.kite-meter--sm .kite-meter__progress { margin: 0 var(--track-margin-right) 0 0; order: 1; position: absolute; top: 0; left: 0; } .kite-meter--circular.kite-meter--lg { --label-width: 75%; } .kite-meter--circular.kite-meter--lg .kite-meter__value-label { margin-bottom: var(--value-label-margin-bottom); text-align: center; } .kite-meter--circular.kite-meter--lg .kite-meter__label { margin: 0 auto; text-align: center; width: var(--label-width); } .kite-meter--circular.kite-meter--lg .kite-meter__status-icon { margin-bottom: var(--status-icon-margin); } .kite-pagination { --cursor: var(--kite-pagination-controls-button-cursor); --cursor-disabled: var(--kite-pagination-controls-button-disabled-cursor); /** @prop --background: Pagination control background color */ --background: var(--kite-pagination-controls-background-color); /** @prop --border-color: Pagination control border color */ --border-color: var(--kite-pagination-controls-border-color); /** @prop --count-color: Pagination count text color */ --count-color: var(--kite-pagination-count-text-color); /** @prop --prenext-background: Previous / next action background color */ --prevnext-background: var(--kite-pagination-controls-button-background-color); /** @prop --prenext-background-hover: Previous / next action background color on hover */ --prevnext-background-hover: var(--kite-pagination-controls-button-hover-background-color); /** @prop --prenext-color: Previous / next action icon fill */ --prevnext-color: var(--kite-pagination-controls-button-icon-color); /** @prop --prenext-color-disabled: Disabled previous / next action icon fill */ --prevnext-color-disabled: var(--kite-pagination-controls-button-disabled-icon-color); /** @prop --dropdown-hover-background-color: Dropdown hover background color */ --dropdown-hover-background-color: var(--kite-pagination-dropdown-hover-background-color); } .kite-pagination { align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; } @media only screen and (min-width: 52.5rem) { .kite-pagination { flex-direction: row; justify-content: center; } } .kite-pagination .kite-menu--inline { display: inline-block; position: relative; top: auto; right: auto; left: auto; height: auto; } .kite-pagination .kite-menu--inline .kite-menu__selection { border-radius: var(--kite-pagination-dropdown-border-radius); padding-top: var(--kite-pagination-dropdown-padding-top); padding-right: var(--kite-pagination-dropdown-padding-right); padding-bottom: var(--kite-pagination-dropdown-padding-bottom); padding-left: var(--kite-pagination-dropdown-padding-left); height: var(--kite-pagination-dropdown-height); } .kite-pagination .kite-menu--inline .kite-menu__selection.kite-hover, .kite-pagination .kite-menu--inline .kite-menu__selection:hover { background-color: var(--dropdown-hover-background-color); } .kite-pagination .kite-menu--inline .kite-menu__selection .kite-icon { margin-right: var(--kite-pagination-dropdown-icon-margin-right); margin-left: var(--kite-pagination-dropdown-icon-margin-left); } .kite-pagination .kite-menu--inline .kite-menu__value { font-weight: var(--kite-pagination-dropdown-placeholder-text-weight); font-style: var(--kite-pagination-dropdown-placeholder-text-style); } .kite-pagination .kite-menu--inline .kite-picker--overlay { --translateY: calc(var(--kite-pagination-dropdown-height) + var(--kite-pagination-page-select-padding-bottom)); left: 0; } .kite-pagination .kite-menu--inline .kite-menu__list, .kite-pagination .kite-menu--inline .kite-picker--overlay, .kite-pagination .kite-menu--inline .kite-picker__content { min-width: auto; width: fit-content; } .kite-pagination__left { align-items: center; background: var(--background); border: var(--kite-pagination-controls-border-width) var(--kite-pagination-controls-border-style) var(--border-color); border-radius: var(--kite-pagination-controls-border-radius); display: flex; margin: var(--kite-pagination-controls-margin-top) var(--kite-pagination-controls-margin-right) var(--kite-pagination-controls-margin-bottom) var(--kite-pagination-controls-margin-left); } @media only screen and (min-width: 52.5rem) { .kite-pagination__left { margin-bottom: var(--kite-pagination-controls-breakpoint-lg-margin-bottom); } } .kite-pagination__prevnext { align-items: center; align-self: stretch; display: inline-flex; justify-content: center; } .kite-pagination__prevnext button, .kite-pagination__prevnext a { align-items: center; background: var(--prevnext-background); border: 0; border-right: var(--kite-pagination-controls-button-border-width) var(--kite-pagination-controls-button-border-style) var(--border-color); color: var(--prevnext-color); cursor: var(--cursor); display: inline-flex; justify-content: center; margin: 0; padding: 0; width: var(--kite-pagination-controls-button-width); height: 100%; } .kite-pagination__prevnext button.kite-focus-visible, .kite-pagination__prevnext button:focus-visible, .kite-pagination__prevnext a.kite-focus-visible, .kite-pagination__prevnext a:focus-visible { outline-offset: var(--kite-pagination-controls-button-focus-ring-offset); border-radius: var(--kite-pagination-controls-border-radius); } .kite-pagination__prevnext button.kite-hover:enabled, .kite-pagination__prevnext button:hover:enabled, .kite-pagination__prevnext a.kite-hover:enabled, .kite-pagination__prevnext a:hover:enabled { background-color: var(--prevnext-background-hover); } .kite-pagination__prevnext button.kite-disabled, .kite-pagination__prevnext button[disabled], .kite-pagination__prevnext button:disabled, .kite-pagination__prevnext a.kite-disabled, .kite-pagination__prevnext a[disabled], .kite-pagination__prevnext a:disabled { color: var(--prevnext-color-disabled); cursor: var(--cursor-disabled); } .kite-pagination__page-select { align-items: center; display: flex; padding: var(--kite-pagination-page-select-padding-top) var(--kite-pagination-page-select-padding-right) var(--kite-pagination-page-select-padding-bottom) var(--kite-pagination-page-select-padding-left); } .kite-pagination__page-select .kite-menu--inline { margin: var(--kite-pagination-dropdown-margin-top) var(--kite-pagination-dropdown-margin-right) var(--kite-pagination-dropdown-margin-bottom) var(--kite-pagination-dropdown-margin-left); } .kite-pagination__page-current { font-weight: var(--kite-pagination-page-select-current-label-text-weight); margin: var(--kite-pagination-page-select-current-label-margin-top) var(--kite-pagination-page-select-current-label-margin-right) var(--kite-pagination-page-select-current-label-margin-bottom) var(--kite-pagination-page-select-current-label-margin-left); padding: var(--kite-pagination-page-select-current-label-padding-top) var(--kite-pagination-page-select-current-label-padding-right) var(--kite-pagination-page-select-current-label-padding-bottom) var(--kite-pagination-page-select-current-label-padding-left); } .kite-pagination__page-total { display: none; } @media only screen and (min-width: 37.5rem) { .kite-pagination__page-total { display: unset; white-space: nowrap; } } .kite-pagination__right, .kite-pagination__page-size { align-items: center; display: flex; } .kite-pagination__right .kite-menu, .kite-pagination__page-size .kite-menu { background: transparent; } .kite-pagination__right { flex-direction: column; flex-wrap: wrap; justify-content: center; column-gap: var(--kite-pagination-count-margin-right); } @media only screen and (min-width: 37.5rem) { .kite-pagination__right { flex-direction: row; } } .kite-pagination__count { color: var(--count-color); } .kite-pagination__page-size-label { margin-right: var(--kite-pagination-page-size-label-margin-right); } .kite-pagination--up .kite-menu__list { top: initial; bottom: calc(50% + var(--kite-pagination-page-select-padding-top) + var(--kite-pagination-controls-border-width)); } .kite-pagination--up .kite-menu .kite-picker--overlay { --translateY: calc(-100% - var(--kite-pagination-page-select-padding-top) - var(--kite-pagination-controls-border-width)); } .payment-logo { display: inline-block; position: relative; width: 1.5rem; height: 1.5rem; } .kite-light-mode-payment-logo { display: unset; } .kite-dark-mode-payment-logo { display: unset; } .kite-theme--mode-dark .kite-dark-mode-payment-logo { display: unset; } .kite-theme--mode-dark .kite-light-mode-payment-logo { display: none; } .kite-popover { /** @prop --icon-size: sets default trigger icon size (width and height) */ --icon-size: var(--kite-popover-trigger-icon-height); /** @prop --arrow-offset: Sets the offset distance between the arrow and the edge of the content box. May be adjusted to align arrow with trigger. */ --arrow-offset: var(--kite-popover-arrow-offset); /** @prop --offset-x: Moves content box along x-axis, relative to trigger. May be dynamically calculated */ --offset-x: 0; /** @prop --offset-y: Moves content box along y-axis, relative to trigger. May be dynamically calculated */ --offset-y: 0; /** @prop --transform-x: Positions popover content and arrow on the x-axis of trigger;used for shifting entire content in conjunction with --arrow-offset */ --transform-x: 0; --transform-y: 0; /** @prop --width: sets popover content width */ --width: auto; /** @prop --height: sets popover content height */ --height: auto; --icon-height: var(--icon-size, --kite-popover-trigger-icon-height); --icon-width: var(--icon-size, --kite-popover-trigger-icon-width); --icon-total-width: calc(var(--icon-width) + calc(var(--kite-popover-trigger-focus-ring-offset) * 2 + calc(var(--kite-popover-trigger-focus-ring-width) * 2))); --icon-total-height: calc(var(--icon-height) + calc(var(--kite-popover-trigger-focus-ring-offset) * 2 + calc(var(--kite-popover-trigger-focus-ring-width) * 2))); --total-trigger-width: calc(var(--kite-popover-trigger-margin-left) + var(--icon-total-width) + var(--kite-popover-trigger-margin-right) * 1px); --arrow-width: var(--kite-popover-arrow-width); --content-offset: var(--kite-popover-offset); --max-height: var(--kite-popover-max-height); --max-width: var(--kite-popover-max-width); --border-color: var(--kite-popover-border-color); --background-color: var(--kite-popover-background-color); --elevation: var(--kite-popover-elevation); --dismiss-color: var(--kite-popover-dismiss-icon-color); --arrow-color: var(--kite-popover-background-color); --arrow-border: var(--kite-popover-arrow-border-color); --icon-color: var(--kite-popover-trigger-icon-color); --active-icon-color: var(--kite-popover-trigger-expanded-icon-color); --expanded-icon-color: var(--active-icon-color, --kite-popover-trigger-expanded-icon-color); --focus-icon-color: var(--kite-popover-trigger-focus-icon-color); --trigger-label-color: var(--kite-popover-trigger-label-text-color); --ring-color: var(--kite-popover-trigger-focus-ring-color); } @media only screen and (min-width: 37.5rem) { .kite-popover { --kite-popover-max-width: var(--kite-popover-breakpoint-md-max-width); } } .kite-popover { display: flex; color: var(--kite-popover-text-color); font-size: var(--kite-popover-text-size); text-align: var(--kite-popover-text-align); font-family: var(--kite-font-family); font-style: var(--kite-typography-body-style); font-weight: var(--kite-typography-body-weight); letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-typography-body-line-height); text-transform: none; } .kite-popover__group { display: flex; align-self: center; } .kite-popover.kite-popover--inline .kite-popover__group { display: inline-flex; align-items: baseline; } .kite-popover__trigger { background-color: transparent; border: none; cursor: var(--kite-popover-trigger-cursor); display: flex; margin: var(--kite-popover-trigger-margin-top) var(--kite-popover-trigger-margin-right) var(--kite-popover-trigger-margin-bottom) var(--kite-popover-trigger-margin-left); padding: 0; } .kite-popover__trigger--hidden { display: none; } .kite-popover__trigger .kite-icon { --color: var(--icon-color); --size: var(--icon-total-width); } .kite-popover__trigger .kite-icon__inner { align-items: center; align-self: center; display: flex; justify-content: center; } .kite-popover__trigger .kite-icon__inner::before { border: 0 var(--kite-popover-trigger-focus-ring-style) transparent; border-radius: var(--kite-popover-trigger-focus-ring-radius); content: ""; width: var(--icon-total-width); height: var(--icon-total-height); } .kite-popover__trigger .kite-popover__icon-default { display: inherit; } .kite-popover__trigger .kite-popover__icon-emphasized { display: none; } .kite-popover__trigger svg { position: absolute; width: var(--icon-width); height: var(--icon-height); } .kite-popover__trigger.kite-focus-visible, .kite-popover__trigger:focus-visible { outline: 0; } .kite-popover__trigger.kite-focus-visible .kite-icon__inner::before, .kite-popover__trigger:focus-visible .kite-icon__inner::before { border: var(--kite-popover-trigger-focus-ring-width) var(--kite-popover-trigger-focus-ring-style) var(--ring-color); } .kite-popover__trigger.kite-active .kite-icon, .kite-popover__trigger:active .kite-icon { --color: var(--expanded-icon-color); } .kite-popover__trigger.kite-active .kite-popover__icon-default, .kite-popover__trigger:active .kite-popover__icon-default { display: none; } .kite-popover__trigger.kite-active .kite-popover__icon-emphasized, .kite-popover__trigger:active .kite-popover__icon-emphasized { display: inherit; } .kite-popover__trigger.kite-hover .kite-icon, .kite-popover__trigger:hover .kite-icon, .kite-popover__trigger.kite-focus-visible .kite-icon, .kite-popover__trigger:focus-visible .kite-icon { --color: var(--focus-icon-color); } .kite-popover__trigger.kite-hover .kite-popover__icon-default, .kite-popover__trigger:hover .kite-popover__icon-default, .kite-popover__trigger.kite-focus-visible .kite-popover__icon-default, .kite-popover__trigger:focus-visible .kite-popover__icon-default { display: none; } .kite-popover__trigger.kite-hover .kite-popover__icon-emphasized, .kite-popover__trigger:hover .kite-popover__icon-emphasized, .kite-popover__trigger.kite-focus-visible .kite-popover__icon-emphasized, .kite-popover__trigger:focus-visible .kite-popover__icon-emphasized { display: inherit; } .kite-popover__assistive-text { border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; } .kite-popover__dismiss-button { align-self: flex-end; background-color: transparent; border: none; display: block; margin: var(--kite-popover-dismiss-icon-margin-top) var(--kite-popover-dismiss-icon-margin-right) var(--kite-popover-dismiss-icon-margin-bottom) var(--kite-popover-dismiss-icon-margin-left); padding: 0; width: var(--kite-popover-dismiss-icon-width); height: var(--kite-popover-dismiss-icon-height); } @media only screen and (min-width: 37.5rem) { .kite-popover__dismiss-button { display: none; } } .kite-popover__dismiss-button svg { cursor: var(--kite-popover-dismiss-icon-cursor); fill: var(--dismiss-color); width: var(--kite-popover-dismiss-icon-width); height: var(--kite-popover-dismiss-icon-height); } .kite-popover__content { --transform-y: calc(var(--content-offset) + var(--offset-y)); background-color: var(--background-color); border-color: var(--border-color); border-radius: var(--kite-popover-border-radius); border-style: var(--kite-popover-border-style); border-width: var(--kite-popover-border-width); box-shadow: var(--elevation); display: flex; flex-direction: column; margin: var(--kite-popover-margin) calc(-1 * var(--kite-popover-max-width)) 0 0; max-height: var(--kite-popover-max-height); max-width: var(--kite-popover-max-width); opacity: 0; padding: var(--kite-popover-padding-top) var(--kite-popover-padding-right) var(--kite-popover-padding-bottom) var(--kite-popover-padding-left); position: absolute; top: 0; z-index: var(--kite-popover-zindex); transform: translate(var(--transform-x), var(--transform-y)); visibility: hidden; width: var(--width); height: var(--height); } .kite-popover__content::after, .kite-popover__content::before { --arrow-transform-x: calc(var(--arrow-offset) - (var(--arrow-width) / 2) - var(--kite-popover-border-width)); --arrow-transform-y: 0; --arrow-rotate-angle: 0; border-left: calc(var(--arrow-width) / 2) solid transparent; border-right: calc(var(--arrow-width) / 2) solid transparent; content: ""; position: absolute; left: 0; transform: translate(var(--arrow-transform-x), var(--arrow-transform-y)) rotate(var(--arrow-rotate-angle)); width: 0; height: 0; } @media only screen and (min-width: 37.5rem) { .kite-popover__content::after, .kite-popover__content::before { --arrow-transform-x: calc((var(--kite-popover-max-width) / 2) - (var(--arrow-width) / 2) + var(--kite-popover-border-width)); } } .kite-popover__content::after { border-bottom: var(--kite-popover-arrow-height) solid var(--arrow-color); top: calc(-1 * (var(--kite-popover-arrow-height) - var(--kite-popover-arrow-border-width) + var(--kite-popover-border-width))); } .kite-popover__content::before { border-bottom: var(--kite-popover-arrow-height) solid var(--arrow-border); top: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } @media only screen and (min-width: 37.5rem) { .kite-popover__content { --content-midpoint: calc((var(--kite-popover-max-width) / 2)); --trigger-midpoint: calc((var(--kite-popover-trigger-margin-left) + var(--icon-total-width)) / 2); --transform-x: calc((var(--content-midpoint) - var(--trigger-midpoint)) * -1); } .kite-popover__content::after, .kite-popover__content::before { left: 0; } } .kite-popover__content-title { margin-bottom: var(--kite-popover-title-margin-bottom); } .kite-popover__content-text { margin: 0; } .kite-popover__content .kite-link { margin-top: var(--kite-popover-link-margin-top); } .kite-popover__content--active, .kite-popover__content--expanded { opacity: 1; visibility: visible; } .kite-popover__content--top { --transform-y: calc(-100% - var(--kite-popover-arrow-height) + var(--offset-y) - var(--content-offset)); margin: 0 calc(-1 * var(--kite-popover-max-width)) var(--kite-popover-margin) 0; } .kite-popover__content--top::after, .kite-popover__content--top::before { border-bottom: 0; top: auto; } .kite-popover__content--top::after { border-top: var(--kite-popover-arrow-height) solid var(--arrow-color); bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width)) + var(--kite-popover-arrow-border-width)); } .kite-popover__content--top::before { border-top: var(--kite-popover-arrow-height) solid var(--arrow-border); bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } @media only screen and (min-width: 37.5rem) { .kite-popover__content--top.kite-popover__content--align-start, .kite-popover__content--bottom.kite-popover__content--align-start { --transform-x: calc(var(--offset-x) - (var(--arrow-offset) + (var(--arrow-width) / 2)) - var(--kite-popover-border-width)); } .kite-popover__content--top.kite-popover__content--align-start::after, .kite-popover__content--top.kite-popover__content--align-start::before, .kite-popover__content--bottom.kite-popover__content--align-start::after, .kite-popover__content--bottom.kite-popover__content--align-start::before { --arrow-transform-x: var(--arrow-offset); right: auto; left: 0; } } @media only screen and (min-width: 37.5rem) { .kite-popover__content--top.kite-popover__content--align-end, .kite-popover__content--bottom.kite-popover__content--align-end { --transform-x: calc(var(--offset-x) + (var(--arrow-offset) + (var(--arrow-width) / 2)) + var(--kite-popover-border-width)); left: 0; } .kite-popover__content--top.kite-popover__content--align-end::after, .kite-popover__content--top.kite-popover__content--align-end::before, .kite-popover__content--bottom.kite-popover__content--align-end::after, .kite-popover__content--bottom.kite-popover__content--align-end::before { --arrow-transform-x: calc(var(--arrow-offset) * -1); right: 0; left: auto; } } .kite-popover__content--left, .kite-popover__content--right { --transform-y: calc(-100% - var(--kite-popover-arrow-height) + var(--offset-y) - var(--content-offset)); margin: 0 calc(-1 * var(--kite-popover-max-width)) var(--kite-popover-margin) 0; } .kite-popover__content--left::after, .kite-popover__content--left::before, .kite-popover__content--right::after, .kite-popover__content--right::before { border-bottom: 0; top: auto; } .kite-popover__content--left::after, .kite-popover__content--right::after { border-top: var(--kite-popover-arrow-height) solid var(--arrow-color); bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width)) + var(--kite-popover-arrow-border-width)); } .kite-popover__content--left::before, .kite-popover__content--right::before { border-top: var(--kite-popover-arrow-height) solid var(--arrow-border); bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } @media only screen and (min-width: 37.5rem) { .kite-popover__content--left, .kite-popover__content--right { --transform-y: calc(50% + (var(--icon-total-height) / 2)); } .kite-popover__content--left::before, .kite-popover__content--left::after, .kite-popover__content--right::before, .kite-popover__content--right::after { --arrow-transform-x: 0; --arrow-transform-y: -50%; top: 50%; border-top: calc(var(--arrow-width) / 2) solid transparent; border-bottom: calc(var(--arrow-width) / 2) solid transparent; } .kite-popover__content--left.kite-popover__content--align-start, .kite-popover__content--right.kite-popover__content--align-start { --transform-y: calc(var(--offset-y) - (var(--arrow-offset) + (var(--arrow-width) / 2)) - var(--kite-popover-border-width)); top: 0; } .kite-popover__content--left.kite-popover__content--align-start::after, .kite-popover__content--left.kite-popover__content--align-start::before, .kite-popover__content--right.kite-popover__content--align-start::after, .kite-popover__content--right.kite-popover__content--align-start::before { --arrow-transform-y: var(--arrow-offset); top: 0; bottom: auto; } .kite-popover__content--left.kite-popover__content--align-end, .kite-popover__content--right.kite-popover__content--align-end { --transform-y: calc(var(--offset-y) + (var(--arrow-offset) + (var(--arrow-width) / 2)) + var(--kite-popover-border-width)); } .kite-popover__content--left.kite-popover__content--align-end::after, .kite-popover__content--left.kite-popover__content--align-end::before, .kite-popover__content--right.kite-popover__content--align-end::after, .kite-popover__content--right.kite-popover__content--align-end::before { --arrow-transform-y: calc(var(--arrow-offset) * -1); top: auto; bottom: 0; } } @media only screen and (min-width: 37.5rem) { .kite-popover__content--left { --transform-x: calc((-100% + var(--kite-popover-trigger-margin-left)) - (var(--kite-popover-arrow-height) + var(--content-offset))); margin: 0 calc(var(--kite-popover-margin) + -1 * var(--kite-popover-max-width)) 0 0; } .kite-popover__content--left::after, .kite-popover__content--left::before { border-right: 0; left: auto; } .kite-popover__content--left::after { border-left: var(--kite-popover-arrow-height) solid var(--arrow-color); right: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width)) + var(--kite-popover-arrow-border-width)); } .kite-popover__content--left::before { border-left: var(--kite-popover-arrow-height) solid var(--arrow-border); right: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } } @media only screen and (min-width: 37.5rem) { .kite-popover__content--right { --transform-x: calc(0% + var(--total-trigger-width) + var(--content-offset)); margin: 0 calc(-1 * var(--kite-popover-max-width)) 0 var(--kite-popover-margin); } .kite-popover__content--right::after, .kite-popover__content--right::before { border-left: 0; right: auto; } .kite-popover__content--right::after { border-right: var(--kite-popover-arrow-height) solid var(--arrow-color); left: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width)) + var(--kite-popover-arrow-border-width)); } .kite-popover__content--right::before { border-right: var(--kite-popover-arrow-height) solid var(--arrow-border); left: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } } .kite-popover__content--dismiss .kite-popover__dismiss-button { display: block; } .kite-popover__content--hide-dismiss .kite-popover__dismiss-button { display: none; } .kite-popover--disabled .kite-popover__trigger { cursor: var(--kite-popover-trigger-disabled-cursor); } .kite-popover--disabled .kite-popover__trigger .kite-icon { --color: var(--kite-popover-trigger-disabled-icon-color); } .kite-popover--disabled .kite-popover__trigger.kite-hover .kite-popover__icon-default, .kite-popover--disabled .kite-popover__trigger:hover .kite-popover__icon-default { display: inherit; } .kite-popover--disabled .kite-popover__trigger.kite-hover .kite-popover__icon-emphasized, .kite-popover--disabled .kite-popover__trigger:hover .kite-popover__icon-emphasized { display: none; } @media only screen and (min-width: 37.5rem) { .kite-popover__content--bottom-right { --transform-x: calc(var(--offset-x) - (var(--arrow-offset) + (var(--arrow-width) / 2)) - var(--kite-popover-border-width)); } .kite-popover__content--bottom-right::after, .kite-popover__content--bottom-right::before { --arrow-transform-x: var(--arrow-offset); left: 0; } } @media only screen and (min-width: 37.5rem) { .kite-popover__content--bottom-left { --transform-x: calc(var(--offset-x) + (var(--arrow-offset) + (var(--arrow-width) / 2)) + var(--kite-popover-border-width)); left: 0; } .kite-popover__content--bottom-left::after, .kite-popover__content--bottom-left::before { --arrow-transform-x: calc(var(--arrow-offset) * -1); right: 0; left: auto; } } .kite-popover__content--top-right { --transform-y: calc((-1 * 100%) - var(--kite-popover-arrow-height) + var(--offset-y) - var(--content-offset)); margin: 0 calc(-1 * var(--kite-popover-max-width)) var(--kite-popover-margin) 0; } @media only screen and (min-width: 37.5rem) { .kite-popover__content--top-right::after, .kite-popover__content--top-right::before { transform: translate(var(--arrow-offset), 0) rotate(180deg); } } .kite-popover__content--top-right::after, .kite-popover__content--top-right::before { transform: translate(var(--arrow-transform-x), 0) rotate(180deg); } .kite-popover__content--top-right::after { border-bottom: var(--kite-popover-arrow-height) solid var(--arrow-color); top: auto; bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width)) + var(--kite-popover-arrow-border-width)); } .kite-popover__content--top-right::before { border-bottom: var(--kite-popover-arrow-height) solid var(--arrow-border); top: auto; bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } .kite-popover__content--top-left { --transform-y: calc((-1 * 100%) - var(--kite-popover-arrow-height) + var(--offset-y) - var(--content-offset)); margin: 0 calc(-1 * var(--kite-popover-max-width)) var(--kite-popover-margin) 0; } @media only screen and (min-width: 37.5rem) { .kite-popover__content--top-left { --transform-x: calc(var(--offset-x) + (var(--arrow-offset) + (var(--arrow-width) / 2)) + var(--kite-popover-border-width)); left: 0; } .kite-popover__content--top-left::after, .kite-popover__content--top-left::before { --arrow-transform-x: calc(var(--arrow-offset) * -1); right: 0; left: auto; } } .kite-popover__content--top-left::after, .kite-popover__content--top-left::before { transform: translate(var(--arrow-transform-x), 0) rotate(180deg); } .kite-popover__content--top-left::after { border-bottom: var(--kite-popover-arrow-height) solid var(--arrow-color); top: auto; bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width)) + var(--kite-popover-arrow-border-width)); } .kite-popover__content--top-left::before { border-bottom: var(--kite-popover-arrow-height) solid var(--arrow-border); top: auto; bottom: calc(-1 * (var(--kite-popover-arrow-height) + var(--kite-popover-border-width))); } .kite-popover { --kite-popover-offset-y: 0.5rem; color: var(--kite-color-text); font-family: var(--kite-font-family-sans-serif); line-height: var(--kite-typography-sans-sm-body-line-height); font-style: normal; text-transform: none; } .kite-popover p { margin: 0; } .kite-popover a { font-size: var(--kite-typography-sans-lg-body-size); } .kite-popover__content--expanded { position: relative; margin-top: 0; } .rk-popover__content--interior { display: flex; flex-direction: column; } .kite-popover__content--active, .kite-popover__content--expanded { visibility: inherit; } .kite-progress { --pi: 3.1415926536; /** @prop --percent: Sets the rendering of the determinate Progress Indicator. Supports values between `0` and `1` */ --percent: 1; --backdrop-radius: 0; --size: var(--kite-progress-indicator-icon-width); --track-size: var(--kite-progress-indicator-track-size); /** @prop --backdrop-color: Backdrop color when used as overlay */ --backdrop-color: var(--kite-progress-indicator-backdrop-background-color); /** @prop --backdrop-opacity: Backdrop opacity when used as overlay */ --backdrop-opacity: var(--kite-progress-indicator-backdrop-opacity); /** @prop --indicator-width: Sets width of the progress indicator */ --indicator-width: 100%; /** @prop --track-color: Sets track color for the progress indicator */ --track-color: var(--kite-progress-indicator-track-color); /** @prop --fill-color: Sets progress fill color for the progress indicator */ --fill-color: var(--kite-progress-indicator-fill-color); --secondary-label-color: var(--kite-progress-indicator-secondary-label-color); --progress-transition-delay: var(--kite-progress-indicator-transition-delay); --progress-text-align: var(--kite-progress-indicator-label-text-align); --label-text-color: var(--kite-progress-indicator-label-text-color); --label-text-size: var(--kite-progress-indicator-label-text-size); --label-text-weight: var(--kite-progress-indicator-label-text-weight); } .kite-progress--circular { --percent: 0; --size: var(--kite-progress-indicator-circular-width); --indicator-width: auto; --progress-text-align: var(--kite-progress-indicator-circular-label-text-align); --label-text-size: var(--kite-progress-indicator-circular-label-text-size); --label-text-weight: var(--kite-progress-indicator-circular-label-text-weight); --size-px: var(--kite-progress-indicator-circular-width-px); --track-size-px: var(--kite-progress-indicator-track-size-px); --progress-circle-diameter: calc(var(--size-px) - var(--track-size-px)); --progress-circle-circumference: calc(var(--pi) * var(--progress-circle-diameter)); } .kite-progress { align-items: flex-start; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; left: 0; text-align: var(--progress-text-align); width: 100%; height: 100%; z-index: var(--kite-progress-indicator-zindex); } .kite-progress__backdrop { background-color: var(--backdrop-color); display: none; opacity: var(--backdrop-opacity); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .kite-progress__indicator { color: var(--fill-color); position: relative; width: var(--indicator-width); } .kite-progress__label-group { display: flex; justify-content: space-between; align-items: center; column-gap: var(--kite-progress-indicator-label-text-margin-right); margin-bottom: var(--kite-progress-indicator-label-margin-bottom); } .kite-progress__label { color: var(--label-text-color); font-size: var(--label-text-size); font-weight: var(--label-text-weight); } .kite-progress__icons { position: relative; width: var(--size); height: var(--size); margin: 0 0 0 auto; } .kite-progress .kite-progress__success, .kite-progress .kite-progress__error { display: block; opacity: 0; position: absolute; top: 0; visibility: hidden; width: 100%; height: 100%; } .kite-progress__value-label { border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; } @media (prefers-reduced-motion) { .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; } } .kite-progress--reduce-motion .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; } .kite-progress progress { display: none; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .kite-progress progress:indeterminate { appearance: none; } .kite-progress__secondary-label { color: var(--secondary-label-color); margin-top: var(--kite-progress-indicator-secondary-label-margin-top); } .kite-progress__button { margin-top: var(--kite-progress-indicator-button-margin-top); } .kite-progress__track { height: var(--track-size); background-color: var(--track-color); overflow: hidden; } @media (prefers-reduced-motion) { .kite-progress__track { display: none; } } .kite-progress--reduce-motion .kite-progress__track { display: none; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-progress__track { border: 1px solid CanvasText; } } .kite-progress__progress-fill { background-color: var(--fill-color); height: var(--track-size); transform: scaleX(var(--percent)); transform-origin: left; animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: kite-progress-linear-indeterminate; animation-timing-function: var(--kite-motion-standard); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-progress__progress-fill { --fill-color: CanvasText; } } .kite-progress--btn, .kite-progress--sm { --size: var(--kite-progress-indicator-circular-sm-width); --track-size: var(--kite-progress-indicator-circular-sm-track-size); --size-px: var(--kite-progress-indicator-circular-sm-width-px); --track-size-px: var(--kite-progress-indicator-circular-sm-track-size-px); } .kite-progress--lg { --size: var(--kite-progress-indicator-circular-lg-width); --size-px: var(--kite-progress-indicator-circular-lg-width-px); } .kite-progress--lg .kite-progress__success, .kite-progress--lg .kite-progress__error { transform: rotate(-8deg) scale(1.05); } .kite-progress--overlay .kite-progress__backdrop { display: block; } .kite-progress--overlay .kite-progress__label, .kite-progress--overlay .kite-progress__secondary-label { position: relative; } .kite-progress--btn { --kite-progress-indicator-zindex: auto; position: relative; width: var(--size); height: var(--size); } .kite-progress--btn .kite-progress__indicator { --fill-color: var(--kite-progress-indicator-button-fill-color); } .kite-progress--btn .kite-progress__icons { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .kite-progress--btn progress { width: 100%; height: 100%; } .kite-progress--btn .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; opacity: 0; } @media (prefers-reduced-motion) { .kite-progress--btn .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; opacity: 1; } } .kite-progress--reduce-motion .kite-progress--btn .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; opacity: 1; } .kite-progress--determinate { --percent: 0; } .kite-progress--determinate .kite-progress__assistive-text { display: none; } .kite-progress--determinate progress { display: block; } .kite-progress--determinate .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; color: var(--fill-color); display: block; font-size: calc(var(--kite-progress-indicator-value-label-size) * 0.5); font-size: var(--kite-progress-indicator-value-label-size); font-weight: var(--kite-progress-indicator-value-label-weight); margin: 0 0 0 auto; } @media (prefers-reduced-motion) { .kite-progress--determinate .kite-progress__value-label { position: relative; top: auto; } } .kite-progress--determinate.kite-progress--reduce-motion .kite-progress__value-label { position: relative; top: auto; } .kite-progress--determinate.kite-progress--success .kite-progress__value-label, .kite-progress--determinate.kite-progress--error .kite-progress__value-label { border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; } @media (prefers-reduced-motion) { .kite-progress--determinate.kite-progress--success .kite-progress__value-label, .kite-progress--determinate.kite-progress--error .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; } } .kite-progress--determinate.kite-progress--success.kite-progress--reduce-motion .kite-progress__value-label, .kite-progress--determinate.kite-progress--error.kite-progress--reduce-motion .kite-progress__value-label { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; } .kite-progress--determinate .kite-progress__progress-fill { animation: none; transition-duration: var(--kite-motion-fastest); transition-property: transform; transition-timing-function: linear; } .kite-progress--success, .kite-progress--error { --percent: 1; } .kite-progress--success .kite-progress__progress-fill, .kite-progress--error .kite-progress__progress-fill { animation: none; } .kite-progress--success { --fill-color: var(--kite-progress-indicator-positive-fill-color); } .kite-progress--success .kite-progress__success { opacity: 1; visibility: visible; } .kite-progress--error { --fill-color: var(--kite-progress-indicator-negative-fill-color); } .kite-progress--error .kite-progress__error { opacity: 1; visibility: visible; } .kite-progress--circular { align-items: center; border-radius: var(--backdrop-radius); } .kite-progress--circular .kite-progress__icons { margin: 0; } @media (prefers-reduced-motion) { .kite-progress--circular .kite-progress__icons { display: none; } } .kite-progress--circular.kite-progress--reduce-motion .kite-progress__icons { display: none; } .kite-progress--circular .kite-progress__success, .kite-progress--circular .kite-progress__error { transform: rotate(-8deg) scale(0.925); transition-delay: var(--progress-transition-delay); transition-duration: var(--kite-motion-fast); transition-property: opacity, transform; transition-timing-function: linear, ease-in-out; } .kite-progress--circular .kite-progress__spinner { animation: kite-progress-rotate 1.5s linear infinite; display: block; opacity: 1; transform: rotate(0deg); transform-origin: center center; transition: opacity var(--kite-motion-faster) linear var(--progress-transition-delay); } @keyframes kite-progress-rotate { 100% { transform: rotate(270deg); } } .kite-progress--circular .kite-progress__spinner .kite-progress__circle { animation-duration: 1.5s; animation-iteration-count: infinite; animation-name: kite-progress-dash-rotate, kite-progress-dash-offset; animation-timing-function: ease-in-out; fill: none; stroke: var(--fill-color); stroke-dasharray: var(--progress-circle-circumference); stroke-dashoffset: var(--progress-circle-circumference); stroke-linecap: butt; stroke-width: var(--track-size); transform: rotate(0deg); transform-origin: center center; transition-delay: 0s, var(--progress-transition-delay), var(--progress-transition-delay); transition-duration: var(--kite-motion-fastest), var(--kite-motion-fast), var(--kite-motion-fast); transition-property: stroke, opacity, stroke-width; transition-timing-function: linear, linear, ease-in-out; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-progress--circular .kite-progress__spinner .kite-progress__circle { --fill-color: CanvasText; } } .kite-progress--circular .kite-progress__label { line-height: var(--kite-progress-indicator-circular-label-text-line-height); margin: var(--kite-progress-indicator-circular-label-text-margin-top) 0 var(--kite-progress-indicator-circular-label-text-margin-bottom) 0; } .kite-progress--circular .kite-progress__secondary-label { margin-top: var(--kite-progress-indicator-circular-secondary-label-margin-top); } .kite-progress--circular.kite-progress--determinate .kite-progress__success, .kite-progress--circular.kite-progress--determinate .kite-progress__error { transition-delay: 0s; } .kite-progress--circular.kite-progress--determinate .kite-progress__spinner { animation: none; transform: rotate(270deg); } .kite-progress--circular.kite-progress--determinate .kite-progress__spinner .kite-progress__circle { --dash-length: calc(var(--progress-circle-circumference) * var(--percent)); --dash-full: calc(var(--progress-circle-circumference) + 1px); animation: none; stroke-dasharray: var(--dash-length), var(--dash-full); stroke-dashoffset: 0; transition-delay: 0s; transition-duration: var(--kite-motion-fastest); transition-property: stroke-dasharray, stroke-width; transition-timing-function: linear; } .kite-progress--circular.kite-progress--determinate .kite-progress__value-label { position: absolute; top: 50%; text-align: center; transform: translateY(-50%); width: 100%; margin: 0; } @media (prefers-reduced-motion) { .kite-progress--circular.kite-progress--determinate .kite-progress__value-label { position: relative; top: auto; transform: none; } } .kite-progress--circular.kite-progress--determinate.kite-progress--reduce-motion .kite-progress__value-label { position: relative; top: auto; transform: none; } .kite-progress--circular.kite-progress--determinate.kite-progress--sm .kite-progress__value-label { font-size: calc(var(--kite-progress-indicator-value-label-size) * 0.3333); } .kite-progress--circular.kite-progress--determinate.kite-progress--lg .kite-progress__value-label { font-size: var(--kite-progress-indicator-value-label-size); } .kite-progress--circular.kite-progress--success > .kite-progress__indicator .kite-progress__spinner, .kite-progress--circular.kite-progress--error > .kite-progress__indicator .kite-progress__spinner { opacity: 0; } .kite-progress--circular.kite-progress--success > .kite-progress__indicator .kite-progress__circle, .kite-progress--circular.kite-progress--error > .kite-progress__indicator .kite-progress__circle { stroke-width: 0; } .kite-progress--circular.kite-progress--success > .kite-progress__indicator .kite-progress__success, .kite-progress--circular.kite-progress--success > .kite-progress__indicator .kite-progress__error, .kite-progress--circular.kite-progress--error > .kite-progress__indicator .kite-progress__success, .kite-progress--circular.kite-progress--error > .kite-progress__indicator .kite-progress__error { transform: rotate(0deg) scale(1.05); } .kite-progress--hidden .kite-progress__backdrop, .kite-progress--hidden .kite-progress__icons, .kite-progress--hidden .kite-progress__track, .kite-progress--hidden .kite-progress__assistive-text, .kite-progress--hidden progress, .kite-progress--hidden .kite-progress__label, .kite-progress--hidden .kite-progress__secondary-label { display: none; } .kite-progress--hidden.kite-progress--determinate .kite-progress__value-label { display: none; } @keyframes kite-progress-linear-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes kite-progress-dash-rotate { 50% { transform: rotate(135deg); } 100% { transform: rotate(450deg); } } @keyframes kite-progress-dash-offset { 50% { stroke-dashoffset: calc(var(--progress-circle-circumference) * 0.25); } 100% { stroke-dashoffset: var(--progress-circle-circumference); } } .kite-tabs__panel--active .rk-progress { position: relative; } .kite-radio-group { border: 0; display: block; margin-bottom: var(--kite-radio-group-margin-bottom); margin-inline-end: 0; margin-inline-start: 0; padding: 0; } .kite-radio-group__legend { font-size: var(--kite-radio-group-legend-text-size); margin-bottom: var(--kite-radio-group-legend-margin-bottom); padding: 0; } .kite-radio-group .kite-radio { margin-bottom: var(--kite-radio-margin-bottom); } .kite-radio-group .kite-radio:last-child { margin-bottom: 0; } .kite-radio-group__legend { display: inline-block; } .kite-radio { /** @prop --focus-ring-color: Focus state border color */ --focus-ring-color: var(--kite-radio-focus-ring-color); /** @prop --background-color: Checkbox background color */ --background-color: var(--kite-radio-background-color); /** @prop --border-color: Border color */ --border-color: var(--kite-radio-border-color); /** @prop --label-text-color: Label text color */ --label-text-color: var(--kite-radio-label-text-color); /** @prop --disabled-border-color: Disabled state border color */ --disabled-border-color: var(--kite-radio-disabled-border-color); /** @prop --disabled-label-text-color: Disabled state text color */ --disabled-label-text-color: var(--kite-radio-disabled-label-text-color); /** @prop --selected-indicator-background-color: Selected state indicator background color */ --selected-indicator-background-color: var(--kite-radio-selected-indicator-background-color); /** @prop --selected-focus-ring-color: Selected focus state border color */ --selected-focus-ring-color: var(--kite-radio-selected-focus-ring-color); /** @prop --selected-disabled-center-background-color: Selected disabled state center backround color */ --selected-disabled-center-background-color: var(--kite-radio-selected-disabled-indicator-background-color); /** @prop --selected-disabled-border-color: Selected disabled state border color */ --selected-disabled-border-color: var(--kite-radio-selected-disabled-border-color); /** @prop --selected-border-color: Selected state border color */ --selected-border-color: var(--kite-radio-selected-border-color); } .kite-radio { align-items: center; display: flex; margin-bottom: var(--kite-radio-margin-bottom); position: relative; user-select: none; } .kite-radio .kite-radio__input, .kite-radio input { color: var(--label-text-color); margin: var(--kite-radio-input-margin-top) var(--kite-radio-input-margin-right) var(--kite-radio-input-margin-bottom) var(--kite-radio-input-margin-left); opacity: 0; position: absolute; z-index: -1; width: var(--kite-radio-width); height: var(--kite-radio-height); } .kite-radio .kite-radio__input.kite-focus-visible ~ .kite-radio__indicator::before, .kite-radio .kite-radio__input:focus-visible ~ .kite-radio__indicator::before, .kite-radio input.kite-focus-visible ~ .kite-radio__indicator::before, .kite-radio input:focus-visible ~ .kite-radio__indicator::before { border: var(--kite-radio-focus-ring-width) var(--kite-radio-focus-ring-style) var(--focus-ring-color); border-radius: var(--kite-radio-focus-ring-radius); content: ""; position: absolute; top: calc(var(--kite-radio-focus-ring-offset) * -1); right: calc(var(--kite-radio-focus-ring-offset) * -1); bottom: calc(var(--kite-radio-focus-ring-offset) * -1); left: calc(var(--kite-radio-focus-ring-offset) * -1); } .kite-radio__indicator { background-color: var(--background-color); border: var(--kite-radio-border-width) var(--kite-radio-border-style) var(--border-color); border-radius: var(--kite-radio-border-radius); cursor: var(--kite-radio-cursor); flex: 0 0 auto; margin: var(--kite-radio-input-margin-top) var(--kite-radio-input-margin-right) var(--kite-radio-input-margin-bottom) var(--kite-radio-input-margin-left); position: relative; transition-property: background-color, border-color, box-shadow; transition-duration: var(--kite-motion-fastest); transition-timing-function: var(--kite-motion-standard); width: var(--kite-radio-width); height: var(--kite-radio-height); } .kite-radio input:checked ~ .kite-radio__indicator { border: var(--kite-radio-selected-border-width) var(--kite-radio-selected-border-style) var(--selected-border-color); } .kite-radio input:checked ~ .kite-radio__indicator::after { border: calc(var(--kite-radio-selected-indicator-width) / 2) var(--kite-radio-selected-border-style) var(--selected-border-color); border-radius: var(--kite-radio-selected-indicator-border-radius); content: ""; position: absolute; top: var(--kite-radio-border-offset); right: var(--kite-radio-border-offset); bottom: var(--kite-radio-border-offset); left: var(--kite-radio-border-offset); } .kite-radio input:disabled ~ .kite-radio__indicator { border-color: var(--disabled-border-color); cursor: var(--kite-radio-disabled-cursor); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-radio input:disabled ~ .kite-radio__indicator { border-color: GrayText; } } .kite-radio input:disabled ~ .kite-radio__description { color: var(--disabled-label-text-color); cursor: var(--kite-radio-disabled-cursor); } .kite-radio input:checked:disabled ~ .kite-radio__indicator { border-color: var(--selected-disabled-border-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-radio input:checked:disabled ~ .kite-radio__indicator { border-color: GrayText; } } .kite-radio input:checked:disabled ~ .kite-radio__indicator::after { border-color: var(--selected-disabled-center-background-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-radio input:checked:disabled ~ .kite-radio__indicator::after { border-color: GrayText; } } .kite-radio input[aria-disabled=true] ~ .kite-radio__indicator { cursor: var(--kite-radio-disabled-cursor); border-color: var(--kite-radio-disabled-border-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-radio input[aria-disabled=true] ~ .kite-radio__indicator { border-color: GrayText; } } .kite-radio input[aria-disabled=true] ~ .kite-radio__indicator::after { border-color: var(--kite-radio-disabled-border-color); } .kite-radio input[aria-disabled=true] ~ .kite-radio__indicator ~ .kite-radio__description { cursor: var(--kite-radio-disabled-cursor); color: var(--kite-radio-disabled-label-text-color); } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-radio input[aria-disabled=true]:checked ~ .kite-radio__indicator::after { border-color: GrayText; } } .kite-select { /** @prop --select-line-height: Select line-height */ --select-line-height: var(--kite-select-text-line-height); /** @prop --select-max-width: Select max width */ --select-max-width: var(--kite-select-max-width); --background-color: var(--kite-select-background-color); --icon-color: var(--kite-select-icon-color); --select-border-color: var(--kite-select-border-color); --select-border-width: var(--kite-select-border-width); --select-border-style: var(--kite-select-border-style); } .kite-select select:disabled ~ .kite-icon { --icon-color: var(--kite-select-disabled-icon-color); } .kite-select { width: 100%; } @media only screen and (min-width: 30rem) { .kite-select { max-width: var(--select-max-width); } } .kite-select__label-group { margin-bottom: var(--kite-select-label-margin-bottom); } .kite-select__label { color: var(--kite-select-label-text-color); display: block; } .kite-select__label--disabled { color: var(--kite-select-disabled-label-text-color); } .kite-select__helper-text { display: block; color: var(--kite-select-helper-text-color); font-size: var(--kite-select-helper-text-size); line-height: var(--kite-select-helper-text-line-height); } .kite-select__select-group { display: flex; } .kite-select__select { background-color: var(--kite-select-background-color); border: var(--select-border-width) var(--select-border-style) var(--select-border-color); border-radius: var(--kite-select-border-radius); color: var(--kite-select-text-color); cursor: var(--kite-select-cursor); line-height: var(--select-line-height); outline: none; padding-top: calc(var(--kite-select-padding-top) - var(--select-border-width)); padding-right: calc(var(--kite-select-padding-right) - var(--select-border-width) + var(--kite-select-icon-width)); padding-bottom: calc(var(--kite-select-padding-bottom) - var(--select-border-width)); padding-left: calc(var(--kite-select-padding-left) - var(--select-border-width)); width: 100%; height: var(--kite-select-height); /* stylelint-disable */ -moz-appearance: none; -webkit-appearance: none; /* stylelint-enable */ appearance: none; overflow: hidden; text-overflow: var(--kite-select-text-overflow); white-space: nowrap; } .kite-select__select.kite-focus-visible, .kite-select__select:focus-visible { --select-border-width: var(--kite-select-focus-ring-width); --select-border-color: var(--kite-select-focus-ring-color); --select-border-style: var(--kite-select-focus-ring-style); outline: none; } .kite-select__select:disabled { --select-border-color: var(--kite-select-disabled-border-color); background-color: var(--kite-select-disabled-background-color); cursor: var(--kite-select-disabled-cursor); opacity: 1; color: var(--kite-select-disabled-text-color); } .kite-select__select--placeholder { color: var(--kite-select-placeholder-text-color); font-style: var(--kite-select-placeholder-text-style); } .kite-select__select option:not(:disabled) { color: var(--kite-select-text-color); } .kite-select.kite-hover .kite-select__select, .kite-select .kite-select__select:hover:not(:disabled) { --select-border-width: var(--kite-select-hover-border-width); } .kite-select .kite-select__icon { --color: var(--icon-color); --size: var(--kite-select-icon-width); align-self: center; margin-left: calc(-1 * (var(--kite-select-padding-right) + var(--kite-select-icon-width))); pointer-events: none; } .kite-select--disabled .kite-select__label { color: var(--kite-select-disabled-label-text-color); } .kite-select--disabled .kite-select__helper-text { color: var(--kite-select-disabled-helper-text-color); } .kite-select__error, .kite-select__feedback { color: var(--kite-select-error-feedback-text-color); display: block; margin-top: var(--kite-select-feedback-margin-top); } .kite-select--error { --select-border-color: var(--kite-select-error-border-color); --select-border-width: var(--kite-select-error-border-width); } .kite-skip-link { /** @prop --border-radius: Border radius of skip link */ --border-radius: var(--kite-skip-link-border-radius); /** @prop --padding-top: Padding top of skip link */ --padding-top: var(--kite-skip-link-padding-top); /** @prop --padding-right: Padding right of skip link */ --padding-right: var(--kite-skip-link-padding-right); /** @prop --padding-bottom: Padding bottom of skip link */ --padding-bottom: var(--kite-skip-link-padding-bottom); /** @prop --padding-left: Padding left of skip link */ --padding-left: var(--kite-skip-link-padding-left); /** @prop --background-color: Background color of skip link */ --background-color: var(--kite-skip-link-background-color); /** @prop --border-color: Border color of skip link */ --border-color: var(--kite-skip-link-border-color); /** @prop --text-color: Text color of skip link */ --text-color: var(--kite-skip-link-text-color); } .kite-skip-link { background-color: var(--background-color); border: var(--kite-skip-link-border-width) var(--kite-skip-link-border-style) var(--border-color); border-radius: var(--border-radius); clip: rect(0, 0, 0, 0); display: flex; flex-direction: column; padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left); position: absolute; top: 0; left: 0; line-height: var(--kite-skip-link-text-line-height); z-index: var(--kite-skip-link-zindex); /* stylelint-disable */ width: -moz-fit-content; /* stylelint-enable */ width: fit-content; } .kite-skip-link--show { clip: auto; position: relative; } .kite-skip-link ul { list-style: none; margin: 0; padding: 0; } .kite-skip-link ul > li { line-height: inherit; margin: 0; padding: 0; } .kite-skip-link li:not(:first-child) { margin-top: var(--kite-skip-link-stacked-margin-top); } .kite-skip-link a { color: var(--text-color); font-weight: var(--kite-skip-link-text-weight); } .kite-skip-link:focus-within { clip: auto; } .kite-switch { /** @prop --focus-ring-color-on: Focus border color when switched on */ --focus-ring-color-on: var(--kite-switch-on-focus-ring-color); /** @prop --focus-ring-color-off: Focus border color when switched off */ --focus-ring-color-off: var(--kite-switch-focus-ring-color); /** @prop --label-color: Default label text color */ --label-color: var(--kite-switch-label-text-color); /** @prop --label-color-disabled: Disabled label text color */ --label-color-disabled: var(--kite-switch-disabled-label-text-color); /** @prop --switch-thumb-transform: Distance to move thumb on click */ --switch-thumb-transform: translateX(var(--kite-switch-thumb-transform-x)); /** @prop --thumb-color: Default thumb background color */ --thumb-color: var(--kite-switch-thumb-background-color); /** @prop --thumb-color-disabled: Disabled thumb background color */ --thumb-color-disabled: var(--kite-switch-disabled-thumb-background-color); /** @prop --track-background-disabled: Track background color when disabled */ --track-background-disabled: var(--kite-switch-disabled-track-background-color); /** @prop --track-background-off: Track background color when switched on */ --track-background-off: var(--kite-switch-track-background-color); /** @prop --track-background-on: Track background color when switched on */ --track-background-on: var(--kite-switch-on-track-background-color); } .kite-switch { background-color: var(--kite-switch-background-color); border: var(--kite-switch-border-width); cursor: var(--kite-switch-cursor); margin-bottom: var(--kite-switch-margin-bottom); padding: 0; position: relative; } .kite-switch.kite-focus-visible, .kite-switch:focus-visible { outline: 0; } .kite-switch.kite-focus-visible .kite-switch__track::after, .kite-switch:focus-visible .kite-switch__track::after { --focus-ring-offset: calc(var(--kite-switch-focus-ring-width) + var(--kite-switch-focus-ring-offset)); border: var(--kite-switch-focus-ring-width) var(--kite-switch-focus-ring-style) var(--focus-ring-color-off); border-radius: var(--kite-switch-focus-ring-radius); content: ""; position: absolute; top: calc(var(--focus-ring-offset) * -1); left: calc(var(--focus-ring-offset) * -1); width: calc(100% + var(--focus-ring-offset) * 2); height: calc(100% + var(--focus-ring-offset) * 2); } .kite-switch__inner { align-items: center; display: flex; justify-content: space-between; } .kite-switch--on .kite-switch__track { background-color: var(--track-background-on); } .kite-switch--on .kite-switch__thumb { transform: var(--switch-thumb-transform); } .kite-switch__label { color: var(--label-color); line-height: var(--kite-switch-label-text-line-height); margin-right: var(--kite-switch-label-margin-right); } .kite-switch__track { background-color: var(--track-background-off); border-radius: var(--kite-switch-track-border-radius); display: inline-block; flex-shrink: 0; padding: var(--kite-switch-track-padding-top) var(--kite-switch-track-padding-right) var(--kite-switch-track-padding-bottom) var(--kite-switch-track-padding-left); position: relative; transition: all var(--kite-switch-transition-duration); width: var(--kite-switch-track-width); } .kite-switch__track::before { --border-width-hcm: 2px; border: var(--border-width-hcm) solid transparent; border-radius: var(--kite-switch-track-border-radius); content: ""; position: absolute; top: calc(var(--border-width-hcm) * -1); left: calc(var(--border-width-hcm) * -1); width: calc(100% + 4px); height: calc(100% + 4px); } .kite-switch__thumb { border: calc(var(--kite-switch-thumb-width) / 2) solid var(--thumb-color); border-radius: var(--kite-switch-track-border-radius); display: block; transition: all var(--kite-switch-transition-duration); width: var(--kite-switch-thumb-width); height: var(--kite-switch-thumb-height); } .kite-switch:disabled { cursor: var(--kite-switch-disabled-cursor); } .kite-switch:disabled .kite-switch__label { color: var(--label-color-disabled); } .kite-switch:disabled .kite-switch__track { background-color: var(--track-background-disabled); } .kite-switch:disabled .kite-switch__thumb { border-color: var(--thumb-color-disabled); } .kite-switch--on.kite-focus-visible .kite-switch__track::after, .kite-switch--on:focus-visible .kite-switch__track::after { border-color: var(--focus-ring-color-on); } .kite-tabs--center .kite-tabs__tab:first-of-type { margin-left: auto; } .kite-tabs--center .kite-tabs__tab:last-of-type { margin-right: auto; } .kite-tabs__tablist { display: flex; justify-content: left; overflow-x: auto; position: relative; transition: transform var(--kite-tabs-transition-duration) var(--kite-tabs-transition-timing-function); } .kite-tabs__tab { /** @prop --tab-border-bottom-color: Menu tab border bottom color */ --tab-border-bottom-color: var(--kite-tabs-tab-border-bottom-color); /** @prop --tab-text-color: Menu tab text color */ --tab-text-color: var(--kite-tabs-tab-text-color); /** @deprecated: Use `--tab-selected-text-color` instead */ /** @since: v2.0.0 */ /** @prop --tab-activated-text-color: Active menu tab text color. Deprecated: Use `--tab-selected-text-color` instead. */ --tab-activated-text-color: var(--kite-tabs-tab-selected-text-color); /** @prop --tab-selected-text-color: Active menu tab text color */ --tab-selected-text-color: var(--tab-activated-text-color, --kite-tabs-tab-selected-text-color); /** @prop --tab-selected-border-bottom-color: Active menu tab border bottom color */ --tab-selected-border-bottom-color: var(--kite-tabs-tab-selected-border-bottom-color); /** @prop --tab-hover-border-bottom-color: Menu tab hover border bottom color */ --tab-hover-border-bottom-color: var(--kite-tabs-tab-hover-border-bottom-color); /** @prop --tab-disabled-text-color: Disabled menu tab text color */ --tab-disabled-text-color: var(--kite-tabs-tab-disabled-text-color); /** @prop --tab-focus-ring-color: Focused tab outline color */ --tab-focus-ring-color: var(--kite-tabs-tab-focus-ring-color); background: var(--kite-tabs-tab-background); border: 0; border-bottom: var(--kite-tabs-tab-border-bottom-width) var(--kite-tabs-tab-border-bottom-style) var(--tab-border-bottom-color); color: var(--tab-text-color); flex-shrink: 0; font-size: var(--kite-tabs-tab-text-size); line-height: var(--kite-tabs-tab-text-line-height); font-weight: var(--kite-tabs-tab-text-weight); min-width: var(--kite-tabs-tab-min-width); outline-offset: var(--kite-tabs-tab-focus-ring-offset); padding: var(--kite-tabs-tab-padding-top) var(--kite-tabs-tab-padding-right) var(--kite-tabs-tab-padding-bottom) var(--kite-tabs-tab-padding-left); text-align: var(--kite-tabs-tab-text-align); } .kite-tabs__tab.kite-focus-visible, .kite-tabs__tab:focus-visible { outline: var(--kite-tabs-tab-focus-ring-width) var(--kite-tabs-tab-focus-ring-style) var(--tab-focus-ring-color); outline-offset: var(--kite-tabs-tab-focus-ring-offset); } .kite-tabs__tab--active, .kite-tabs__tab--selected { color: var(--kite-tabs-tab-selected-text-color); font-weight: var(--kite-tabs-tab-selected-text-weight); } .kite-tabs__tab:disabled { color: var(--tab-disabled-text-color); cursor: var(--kite-tabs-tab-disabled-cursor); } @media (hover: hover) and (pointer: fine) { .kite-tabs__tab.kite-hover, .kite-tabs__tab:hover:not(:disabled) { border-bottom-color: var(--tab-hover-border-bottom-color); cursor: var(--kite-tabs-tab-cursor); } } .kite-tabs__ink-bar { background-color: var(--kite-tabs-tab-selected-border-bottom-color); position: absolute; bottom: 0; transition: var(--kite-tabs-transition-duration) var(--kite-tabs-transition-timing-function); height: var(--kite-tabs-tab-border-bottom-width); } .kite-tabs__panels { overflow: hidden; padding: var(--kite-tabs-panel-padding-top) var(--kite-tabs-panel-padding-right) var(--kite-tabs-panel-padding-bottom) var(--kite-tabs-panel-padding-left); position: relative; } .kite-tabs__panel { display: none; flex-basis: 100%; overflow: hidden; } .kite-tabs__panel.kite-focus-visible, .kite-tabs__panel:focus-visible { outline-offset: var(--kite-tabs-panel-focus-ring-offset); } .kite-tabs__panel--active, .kite-tabs__panel--selected { display: block; flex-grow: 1; position: relative; } .kite-tabs--right .kite-tabs__tablist { justify-content: flex-end; } .kite-tabs .kite-tabs__tablist { overflow-y: hidden; } .rk-indicator { display: flex; position: absolute; top: var(--kite-tabs-tab-border-bottom-width); left: 0; justify-content: center; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; } .rk-indicator .rk-underline { align-self: flex-end; background-color: var(--kite-tabs-tab-selected-border-bottom-color); width: 100%; height: var(--kite-tabs-tab-border-bottom-width); } .kite-tabs__tab { position: relative; } .kite-tabs__tab--selected .rk-indicator { opacity: 1; } .kite-tabs__tab--selected .rk-indicator.rk-inkbar-transition { transition: var(--kite-tabs-transition-duration) var(--kite-tabs-transition-timing-function); } .hidden { display: none; } .kite-tabs__panel:has(.kite-progress) { overflow: initial; } .kite-tabs__panel:has(.kite-progress) .kite-progress { position: relative; } .kite-text-area, .kite-text-input { /** @prop --text-input-max-width: Input max width */ --text-input-max-width: var(--kite-text-input-max-width); /** @prop --text-area-max-width: Text area max width */ --text-area-max-width: var(--kite-text-area-max-width); --confirm-icon-color: var(--kite-text-input-secure-confirm-icon-color); --disabled-text-color: var(--kite-text-input-disabled-text-color); --input-border-color: var(--kite-text-input-border-color); --input-border-style: var(--kite-text-input-border-style); --input-border-width: var(--kite-text-input-border-width); --placeholder-text-color: var(--kite-text-input-placeholder-text-color); --secure-icon-color: var(--kite-text-input-secure-icon-color); --secure-visible-icon-color: var(--kite-text-input-secure-visible-icon-color); --input-addon-total-width: calc(var(--kite-text-input-addon-padding-left) + var(--kite-text-input-addon-icon-width) + var(--kite-text-input-addon-padding-right)); --secure-icon-total-width: calc(var(--kite-text-input-addon-padding-left) + var(--kite-text-input-secure-icon-width) + var(--kite-text-input-addon-padding-right)); --confirm-icon-total-width: calc(var(--kite-text-input-addon-padding-left) + var(--kite-text-input-secure-confirm-icon-width)); } .kite-text-input { --count-text-color: var(--kite-text-input-character-count-text-color); } .kite-text-input:has(.kite-text-input__input-group.kite-hover .kite-text-input__input:not([disabled]), .kite-text-input__input-group:hover .kite-text-input__input:not([disabled])) { --input-border-width: var(--kite-text-input-hover-border-width); } .kite-text-input:has(.kite-text-input__input.kite-focus-visible, .kite-text-input__input:focus-visible) { --input-border-width: var(--kite-text-input-focus-ring-width); --input-border-color: var(--kite-text-input-focus-ring-color); --input-border-style: var(--kite-text-input-focus-ring-style); } .kite-text-input--disabled { --input-border-color: var(--kite-text-input-disabled-border-color); --input-border-width: var(--kite-text-input-border-width); --count-text-color: var(--kite-text-input-disabled-character-count-text-color); } .kite-text-input--error { --input-border-color: var(--kite-text-input-error-border-color); --input-border-width: var(--kite-text-input-error-border-width); --count-text-color: var(--kite-text-input-error-character-count-text-color); } .kite-text-input { display: flex; flex-direction: column; } @media only screen and (min-width: 30rem) { .kite-text-input { max-width: var(--text-input-max-width); } } .kite-text-input__label-group { margin-bottom: var(--kite-text-input-label-margin-bottom); } .kite-text-input__label { color: var(--kite-text-input-label-text-color); display: block; } .kite-text-input__label--disabled { color: var(--kite-text-input-disabled-label-text-color); } .kite-text-input__helper-text { display: block; color: var(--kite-text-input-helper-text-color); font-size: var(--kite-text-input-helper-text-size); line-height: var(--kite-text-input-helper-text-line-height); } .kite-text-input__input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; height: var(--kite-text-input-height); } @media only screen and (min-width: 30rem) { .kite-text-input__input-group { max-width: var(--text-input-max-width); } } .kite-text-input__input-addon, .kite-text-input__mask-toggle { background: transparent; border: 0; display: flex; align-items: center; text-align: center; white-space: nowrap; padding-top: var(--kite-text-input-addon-padding-top, var(--kite-form-control-addon-padding-top)); padding-right: var(--kite-text-input-addon-padding-right, var(--kite-form-control-addon-padding-right)); padding-bottom: var(--kite-text-input-addon-padding-bottom, var(--kite-form-control-addon-padding-bottom)); padding-left: var(--kite-text-input-addon-padding-left, var(--kite-form-control-addon-padding-left)); height: 100%; position: absolute; top: 0; right: 0; z-index: 2; } .kite-text-input__input-addon:first-child, .kite-text-input__mask-toggle:first-child { right: auto; left: 0; } .kite-text-input__input-addon .kite-icon, .kite-text-input__mask-toggle .kite-icon { --color: var(--kite-text-input-addon-icon-color, var(--kite-form-control-addon-icon-color)); --size: var(--kite-text-input-addon-icon-width, var(--kite-form-control-addon-icon-width)); } .kite-text-input__input-addon--button, .kite-text-input__mask-toggle { cursor: var(--kite-cursor-action); text-decoration: none; user-select: none; } .kite-text-input__input-addon--button:focus-visible, .kite-text-input__mask-toggle:focus-visible { outline-offset: var(--kite-text-input-addon-focus-ring-offset, var(--kite-form-control-addon-focus-ring-offset)); } .kite-text-input__mask-toggle.kite-text-input__mask-toggle--pressed .kite-text-input__unmask-icon { display: none; } .kite-text-input__mask-toggle.kite-text-input__mask-toggle--pressed .kite-text-input__mask-icon { display: inline; } .kite-text-input__mask-toggle span:nth-child(3) { visibility: hidden; } .kite-text-input__mask-toggle .kite-text-input__unmask-icon, .kite-text-input__mask-toggle .kite-text-input__mask-icon { height: var(--kite-text-input-secure-icon-height); } .kite-text-input__mask-toggle .kite-text-input__unmask-icon .kite-icon { --color: var(--secure-icon-color); --size: var(--kite-text-input-secure-icon-width); } .kite-text-input__mask-toggle .kite-text-input__mask-icon { display: none; } .kite-text-input__mask-toggle .kite-text-input__mask-icon .kite-icon { --color: var(--secure-visible-icon-color); --size: var(--kite-text-input-secure-visible-icon-width); } .kite-text-input__confirmed-icon { align-items: center; display: flex; font-size: 0; overflow: hidden; width: var(--kite-text-input-secure-confirm-icon-width); height: calc(var(--kite-text-input-height) - var(--input-border-width) * 2); position: absolute; top: var(--input-border-width); right: var(--secure-icon-total-width); z-index: 2; } .kite-text-input__confirmed-icon .kite-icon { --size: var(--kite-text-input-secure-confirm-icon-width); --color: var(--confirm-icon-color); } .kite-text-input__character-count { color: var(--count-text-color); font-size: var(--kite-text-input-character-count-text-size); line-height: var(--kite-text-input-character-count-text-line-height); position: absolute; top: 0; right: 0; transform: translateY(calc(-100% - var(--kite-text-input-label-margin-bottom))); } .kite-text-input__input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: transparent; border: 0; color: var(--kite-text-input-text-color); line-height: var(--kite-text-input-text-line-height); outline: none; padding-top: calc(var(--kite-text-input-padding-top) - var(--input-border-width)); padding-right: calc(var(--kite-text-input-padding-right) - var(--input-border-width)); padding-bottom: calc(var(--kite-text-input-padding-bottom) - var(--input-border-width)); padding-left: calc(var(--kite-text-input-padding-left) - var(--input-border-width)); position: absolute; top: var(--input-border-width); left: var(--input-border-width); width: calc(100% - var(--input-border-width) * 2); height: calc(var(--kite-text-input-height) - var(--input-border-width) * 2); z-index: 1; } .kite-text-input__input::placeholder { color: var(--placeholder-text-color); font-style: var(--kite-text-input-placeholder-text-style); } .kite-text-input__input:disabled { color: var(--disabled-text-color); cursor: var(--kite-text-input-disabled-cursor); } .kite-text-input__input:disabled::placeholder { color: var(--disabled-text-color); } .kite-text-input__input:disabled ~ .kite-text-input__appearance { background-color: var(--kite-text-input-disabled-background-color); cursor: var(--kite-text-input-disabled-cursor); opacity: 1; } @media (-ms-high-contrast: active), (forced-colors: active), (prefers-contrast: forced) { .kite-text-input__input:disabled ~ .kite-text-input__appearance { border-color: GrayText; } } .kite-text-input__input.kite-focus-visible, .kite-text-input__input:focus-visible { outline: none; } .kite-text-input:has(.kite-text-input__input-addon ~ .kite-text-input__input) .kite-text-input__input { padding-left: calc(var(--input-addon-total-width) - var(--input-border-width)); } .kite-text-input:has(.kite-text-input__input ~ .kite-text-input__input-addon) .kite-text-input__input { padding-right: calc(var(--input-addon-total-width) - var(--input-border-width)); } .kite-text-input__appearance { background-color: var(--kite-text-input-background-color); border: var(--input-border-width) var(--input-border-style) var(--input-border-color); border-radius: var(--kite-text-input-border-radius); color: var(--kite-text-input-text-color); width: 100%; height: 100%; position: relative; z-index: 0; } .kite-text-input__error, .kite-text-input__feedback { color: var(--kite-text-input-error-feedback-text-color); display: block; margin-top: var(--kite-text-input-feedback-margin-top); } .kite-text-input .kite-text-input__confirmed-indicator ~ .kite-text-input__input, .kite-text-input.kite-text-input--confirmed .kite-text-input__input { padding-right: calc(var(--confirm-icon-total-width) - var(--input-border-width)); } .kite-text-input--masked .kite-text-input__input::-ms-reveal { display: none; } .kite-text-input--masked .kite-text-input__input { padding-right: calc(var(--secure-icon-total-width) - var(--input-border-width)); } .kite-text-input--masked.kite-text-input--confirmed .kite-text-input__input { padding-right: calc(var(--secure-icon-total-width) + var(--confirm-icon-total-width) - var(--input-border-width)); } .kite-text-input--disabled .kite-text-input__label { color: var(--kite-text-input-disabled-label-text-color); } .kite-text-input--disabled .kite-text-input__helper-text { color: var(--kite-text-input-disabled-helper-text-color); } .kite-text-input--disabled .kite-text-input__input-addon { cursor: var(--kite-text-input-disabled-cursor, var(--kite-form-control-disabled-cursor)); } .kite-text-input--disabled .kite-text-input__input-addon .kite-icon { --color: var(--kite-text-input-disabled-text-color, var(--kite-form-control-disabled-text-color)); } .kite-text-area { --count-text-color: var(--kite-text-area-character-count-text-color); } .kite-text-area.kite-hover, .kite-text-area:has(.kite-text-area__input-group.kite-hover .kite-text-area__input:not([disabled]), .kite-text-area__input-group:hover .kite-text-area__input:not([disabled])) { --input-border-width: var(--kite-text-area-hover-border-width); } .kite-text-area:has(.kite-text-area__input.kite-focus-visible, .kite-text-area__input:focus-visible) { --input-border-width: var(--kite-text-area-focus-ring-width); --input-border-color: var(--kite-text-area-focus-ring-color); --input-border-style: var(--kite-text-area-focus-ring-style); } .kite-text-area--disabled { --input-border-color: var(--kite-text-area-disabled-border-color); --count-text-color: var(--kite-text-area-disabled-character-count-text-color); } .kite-text-area--error { --input-border-color: var(--kite-text-area-error-border-color); --input-border-width: var(--kite-text-input-error-border-width); --count-text-color: var(--kite-text-area-error-character-count-text-color); } @media only screen and (min-width: 30rem) { .kite-text-area { max-width: var(--text-area-max-width); } } .kite-text-area__label-group { margin-bottom: var(--kite-text-area-label-margin-bottom); } .kite-text-area__label { color: var(--kite-text-area-label-text-color); display: block; } .kite-text-area__label--disabled { color: var(--kite-text-area-disabled-label-text-color); } .kite-text-area__helper-text { display: block; color: var(--kite-text-area-helper-text-color); font-size: var(--kite-text-area-helper-text-size); line-height: var(--kite-text-area-helper-text-line-height); } .kite-text-area__input-group { position: relative; display: flex; flex-direction: column; } @media only screen and (min-width: 30rem) { .kite-text-area__input-group { max-width: var(--text-area-max-width); } } .kite-text-area__character-count { color: var(--count-text-color); font-size: var(--kite-text-area-character-count-text-size); line-height: var(--kite-text-area-character-count-text-line-height); position: absolute; top: 0; right: 0; transform: translateY(calc(-100% - var(--kite-text-area-label-margin-bottom))); } .kite-text-area__character-count--disabled { color: var(--disabled-text-color); } .kite-text-area__input { background-color: var(--kite-text-area-background-color); border: var(--input-border-width) var(--input-border-style) var(--input-border-color); border-radius: var(--kite-text-area-border-radius); color: var(--kite-text-area-text-color); display: inline; line-height: var(--kite-text-area-text-line-height); min-height: var(--kite-text-area-min-height); outline: none; padding-top: calc(var(--kite-text-area-padding-top) - var(--input-border-width)); padding-right: calc(var(--kite-text-area-padding-right) - var(--input-border-width)); padding-bottom: calc(var(--kite-text-area-padding-bottom) - var(--input-border-width)); padding-left: calc(var(--kite-text-area-padding-left) - var(--input-border-width)); width: 100%; appearance: none; } .kite-text-area__input::placeholder { color: var(--placeholder-text-color); font-style: var(--kite-text-area-placeholder-text-style); } .kite-text-area__input:disabled { background-color: var(--kite-text-area-disabled-background-color); cursor: var(--kite-text-area-disabled-cursor); opacity: 1; color: var(--disabled-text-color); } .kite-text-area__input:disabled::placeholder { color: var(--disabled-text-color); } .kite-text-area__input.kite-focus-visible, .kite-text-area__input:focus-visible { outline: none; } .kite-text-area__error, .kite-text-area__feedback { color: var(--kite-text-area-error-feedback-text-color); display: block; margin-top: var(--kite-text-area-feedback-margin-top); } .kite-text-area--disabled .kite-text-area__label { color: var(--kite-text-area-disabled-label-text-color); } .kite-text-area--disabled .kite-text-area__helper-text { color: var(--kite-text-area-disabled-helper-text-color); } .kite-text-area--no-resize .kite-text-area__input { resize: none; } /** Shame for if there is a confirmed icon (green checkmark), without a password mask toggle.*/ :not(.kite-text-input__mask-toggle) + .kite-text-input__confirmed-icon { right: 0; margin-right: var(--kite-text-input-addon-padding-right); margin-left: var(--kite-text-input-addon-padding-left); } .kite-text-input--confirmed:not(.kite-text-input--masked) .kite-text-input__input { padding-right: calc(var(--secure-icon-total-width) - var(--input-border-width)); } .kite-toast { --hcm-border-width: 1px; /** @prop --z-index: Z-index of the toast */ --z-index: var(--kite-toast-zindex); /** @prop --background-color: Background color */ --background-color: var(--kite-toast-background-color); /** @prop --text-color: Text color */ --text-color: var(--kite-toast-text-color); } .kite-toast { align-items: flex-start; background-color: var(--background-color); border: var(--hcm-border-width) var(--kite-toast-border-style) var(--kite-toast-border-color); border-radius: var(--kite-toast-border-radius); box-shadow: var(--kite-toast-elevation); color: var(--text-color); display: flex; font-size: var(--kite-toast-text-size); line-height: var(--kite-toast-text-line-height); margin-top: var(--kite-toast-margin-top); margin-right: var(--kite-toast-margin-right); margin-bottom: var(--kite-toast-margin-bottom); margin-left: var(--kite-toast-margin-left); min-height: var(--kite-toast-min-height); opacity: 0; padding-top: calc(var(--kite-toast-padding-top) - var(--hcm-border-width)); padding-right: calc(var(--kite-toast-padding-right) - var(--hcm-border-width)); padding-bottom: calc(var(--kite-toast-padding-bottom) - var(--hcm-border-width)); padding-left: calc(var(--kite-toast-padding-left) - var(--hcm-border-width)); position: fixed; z-index: var(--z-index); transition: margin var(--kite-toast-transition-duration) var(--kite-toast-transition-timing-function); width: 100%; } @media only screen and (min-width: 30rem) { .kite-toast { max-width: var(--kite-toast-max-width); width: fit-content; } .kite-toast--align-start { left: var(--kite-toast-offset); right: auto; } .kite-toast--align-end { left: auto; right: var(--kite-toast-offset); } .kite-toast--align-center { left: 50%; right: auto; transform: translateX(-50%); } } .kite-toast--bottom { bottom: 0; } .kite-toast:not(.kite-toast--bottom) { top: 0; } .kite-toast .kite-icon { fill: var(--kite-toast-icon-color); flex-shrink: 0; margin-right: var(--kite-toast-icon-margin-right); min-height: 1em; width: var(--kite-toast-icon-width); height: calc(var(--kite-toast-text-line-height) * 1em); } .rk-toast { opacity: 1; transition: margin var(--kite-toast-transition-duration), opacity var(--kite-toast-transition-duration) var(--kite-toast-transition-curve); } .rk-toast__invisible { opacity: 0; } .kite-tooltip { /** @prop --tooltip-offset: Offset to adjust where the tip appears relevant to the trigger (moves the Tooltip "further from", or "closer to" the trigger) */ --tooltip-offset: calc(var(--kite-tooltip-offset) * 1px); /** @prop --tooltip-align-offset: Offset to adjust the Tooltip left/right when using the `align-start` and `align-end` modifiers */ --tooltip-align-offset: 0; /** @prop --tooltip-background: Background color of tooltip */ --tooltip-background: var(--kite-tooltip-background-color); /** @prop --tooltip-color: Text color of tooltip */ --tooltip-color: var(--kite-tooltip-text-color); --tooltip-arrow-width: calc(var(--kite-tooltip-arrow-width) / 2); --tooltip-arrow-height: var(--kite-tooltip-arrow-height); --tooltip-arrow-height-adjust: calc(var(--tooltip-arrow-height) + 1px); --tooltip-arrow-offset: calc(-1 * var(--tooltip-offset)); --tooltip-text-offset: calc(var(--tooltip-arrow-offset) - var(--tooltip-arrow-height)); --tooltip-padding: var(--kite-tooltip-padding-top) var(--kite-tooltip-padding-right) var(--kite-tooltip-padding-bottom) var(--kite-tooltip-padding-left); --tooltip-radius: var(--kite-tooltip-border-radius); --tooltip-max-width: 90vw; } .kite-tooltip { position: relative; } .kite-tooltip__trigger:not(.kite-button) { align-items: center; appearance: none; background: none; border: 0; display: inline-flex; padding: 0; } .kite-tooltip__trigger:focus-visible::after, .kite-tooltip__trigger:hover::after { display: flex; } .kite-tooltip__trigger:focus-visible + .kite-tooltip__text, .kite-tooltip__trigger:focus-visible .kite-tooltip__text, .kite-tooltip__trigger:hover + .kite-tooltip__text, .kite-tooltip__trigger:hover .kite-tooltip__text { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; position: absolute; width: max-content; } .kite-tooltip__trigger::after { border: var(--tooltip-arrow-width) solid transparent; content: ""; display: none; position: absolute; z-index: var(--kite-tooltip-zindex); width: 0; height: 0; } .kite-tooltip__text { border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; align-items: center; background: var(--tooltip-background); border: 1px var(--kite-tooltip-border-style) var(--kite-tooltip-border-color); border-radius: var(--tooltip-radius); display: flex; padding: var(--tooltip-padding); pointer-events: none; position: absolute; z-index: var(--kite-tooltip-zindex); max-width: var(--tooltip-max-width); width: max-content; white-space: normal; color: var(--tooltip-color); font-size: var(--kite-tooltip-text-size); font-family: var(--kite-font-family); font-style: var(--kite-typography-body-style); font-weight: normal; letter-spacing: var(--kite-typography-body-letter-spacing); line-height: var(--kite-tooltip-text-line-height); text-transform: none; } @media only screen and (min-width: 30rem) { .kite-tooltip__text { --tooltip-max-width: var(--kite-tooltip-breakpoint-sm-max-width); } } .kite-tooltip--multiline { max-width: var(--kite-tooltip-breakpoint-sm-max-width); white-space: normal; } .kite-tooltip--no-arrow::after, .kite-tooltip--no-arrow .kite-tooltip__trigger::after { display: none; } .kite-tooltip--no-arrow:focus-visible::after, .kite-tooltip--no-arrow .kite-tooltip__trigger:focus-visible::after { display: none; } .kite-tooltip--no-arrow:hover::after, .kite-tooltip--no-arrow .kite-tooltip__trigger:hover::after { display: none; } .kite-tooltip--top::after { border-bottom-width: 0; border-top-color: var(--tooltip-background); border-top-width: var(--tooltip-arrow-height-adjust); top: var(--tooltip-arrow-offset); left: 50%; transform: translate(-50%, -100%); } .kite-tooltip--top + .kite-tooltip__text, .kite-tooltip--top .kite-tooltip__text { top: var(--tooltip-text-offset); left: 50%; transform: translate(-50%, -100%); } .kite-tooltip--right::after { border-left-width: 0; border-right-color: var(--tooltip-background); border-right-width: var(--tooltip-arrow-height-adjust); top: 50%; right: var(--tooltip-arrow-offset); transform: translate(100%, -50%); } .kite-tooltip--right + .kite-tooltip__text, .kite-tooltip--right .kite-tooltip__text { top: 50%; right: var(--tooltip-text-offset); transform: translate(100%, -50%); } .kite-tooltip--bottom::after { border-bottom-color: var(--tooltip-background); border-bottom-width: var(--tooltip-arrow-height-adjust); border-top-width: 0; bottom: var(--tooltip-arrow-offset); left: 50%; transform: translate(-50%, 100%); } .kite-tooltip--bottom + .kite-tooltip__text, .kite-tooltip--bottom .kite-tooltip__text { bottom: var(--tooltip-text-offset); left: 50%; transform: translate(-50%, 100%); } .kite-tooltip--left::after { border-left-color: var(--tooltip-background); border-left-width: var(--tooltip-arrow-height-adjust); border-right-width: 0; top: 50%; left: var(--tooltip-arrow-offset); transform: translate(-100%, -50%); } .kite-tooltip--left + .kite-tooltip__text, .kite-tooltip--left .kite-tooltip__text { top: 50%; left: var(--tooltip-text-offset); transform: translate(-100%, -50%); } .kite-tooltip--align-start.kite-tooltip--top + .kite-tooltip__text, .kite-tooltip--align-start.kite-tooltip--top .kite-tooltip__text { left: var(--tooltip-align-offset); transform: translate(0, -100%); } .kite-tooltip--align-start.kite-tooltip--bottom + .kite-tooltip__text, .kite-tooltip--align-start.kite-tooltip--bottom .kite-tooltip__text { left: var(--tooltip-align-offset); transform: translate(0, 100%); } .kite-tooltip--align-end.kite-tooltip--top + .kite-tooltip__text, .kite-tooltip--align-end.kite-tooltip--top .kite-tooltip__text { right: var(--tooltip-align-offset); left: auto; transform: translate(0, -100%); } .kite-tooltip--align-end.kite-tooltip--bottom + .kite-tooltip__text, .kite-tooltip--align-end.kite-tooltip--bottom .kite-tooltip__text { right: var(--tooltip-align-offset); left: auto; transform: translate(0, 100%); } .kite-tooltip--hidden.kite-focus::after, .kite-tooltip--hidden:focus::after, .kite-tooltip--hidden.kite-focus-visible::after, .kite-tooltip--hidden:focus-visible::after, .kite-tooltip--hidden.kite-hover::after, .kite-tooltip--hidden:hover::after { display: none; } .kite-tooltip--hidden.kite-focus + .kite-tooltip__text, .kite-tooltip--hidden.kite-focus .kite-tooltip__text, .kite-tooltip--hidden:focus + .kite-tooltip__text, .kite-tooltip--hidden:focus .kite-tooltip__text, .kite-tooltip--hidden.kite-focus-visible + .kite-tooltip__text, .kite-tooltip--hidden.kite-focus-visible .kite-tooltip__text, .kite-tooltip--hidden:focus-visible + .kite-tooltip__text, .kite-tooltip--hidden:focus-visible .kite-tooltip__text, .kite-tooltip--hidden.kite-hover + .kite-tooltip__text, .kite-tooltip--hidden.kite-hover .kite-tooltip__text, .kite-tooltip--hidden:hover + .kite-tooltip__text, .kite-tooltip--hidden:hover .kite-tooltip__text { border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; height: 1px; } .kite-tooltip--visible::after, .kite-tooltip--visible .kite-tooltip__trigger::after { display: flex; } .kite-tooltip--visible.kite-tooltip--no-arrow::after, .kite-tooltip--visible.kite-tooltip--no-arrow .kite-tooltip__trigger::after { display: none; } .kite-tooltip--visible::after, .kite-tooltip--visible + .kite-tooltip__text, .kite-tooltip--visible .kite-tooltip__text { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; position: absolute; width: max-content; } .kite-tooltip--abbreviation, .kite-tooltip--definition, .kite-tooltip--truncation { display: inline-flex; } .kite-tooltip--abbreviation { speak: spell-out; } abbr.kite-tooltip--abbreviation, abbr.kite-tooltip--truncation { cursor: help; } abbr.kite-tooltip--abbreviation::before, abbr.kite-tooltip--truncation::before { border: 0; border-bottom: 1px dotted; content: ""; position: absolute; bottom: 0.15em; left: 0; width: 100%; } .kite-button.kite-tooltip { --button-padding-offset: var(--kite-button-padding-top); --tooltip-text-offset: calc(-1 * (var(--button-padding-offset) + var(--tooltip-arrow-height))); } .kite-button.kite-tooltip--top { --button-padding-offset: var(--kite-button-padding-top); } .kite-button.kite-tooltip--right { --button-padding-offset: var(--kite-button-padding-right); } .kite-button.kite-tooltip--bottom { --button-padding-offset: var(--kite-button-padding-bottom); } .kite-button.kite-tooltip--left { --button-padding-offset: var(--kite-button-padding-left); } .kite-button.kite-tooltip--align-start { --tooltip-align-offset: calc(-1 * (var(--kite-button-padding-left))); } .kite-button.kite-tooltip--align-end { --tooltip-align-offset: calc(-1 * (var(--kite-button-padding-right))); } .kite-button--icon-only.kite-tooltip--left { --button-padding-offset: var(--kite-button-icon-only-padding-left); } .kite-button--icon-only.kite-tooltip--right { --button-padding-offset: var(--kite-button-icon-only-padding-right); } .kite-button--icon-only.kite-tooltip--align-start { --tooltip-align-offset: calc(-1 * (var(--kite-button-icon-only-padding-left))); } .kite-button--icon-only.kite-tooltip--align-end { --tooltip-align-offset: calc(-1 * (var(--kite-button-icon-only-padding-right))); } .kite-tooltip .kite-tooltip__trigger::after { display: none; } .kite-tooltip .kite-tooltip__trigger:focus-visible .kite-tooltip__text.rk-tooltip, .kite-tooltip .kite-tooltip__trigger:hover .kite-tooltip__text.rk-tooltip { clip: auto; clip-path: unset; margin: 0; overflow: visible; position: static; width: auto; height: auto; width: max-content; } .kite-tooltip .kite-tooltip__trigger .kite-tooltip__text { clip: auto; clip-path: unset; margin: 0; overflow: visible; width: max-content; height: auto; position: relative; display: block; top: unset; left: unset; right: unset; bottom: unset; transform: unset; } .kite-tooltip__arrow::after { border: var(--tooltip-arrow-width) solid transparent; content: ""; position: absolute; z-index: var(--kite-tooltip-zindex); width: 0; height: 0; transform: translate(calc(-50% + 1px)); } .kite-tooltip__arrow--top::after { border-bottom-width: 0; border-top-color: var(--tooltip-background); border-top-width: var(--tooltip-arrow-height-adjust); top: 100%; left: 50%; } .kite-tooltip__arrow--top.kite-tooltip__arrow--align-start::after, .kite-tooltip__arrow--bottom.kite-tooltip__arrow--align-start::after { left: var(--tooltip-arrow-x-transform); } .kite-tooltip__arrow--top.kite-tooltip__arrow--align-end::after, .kite-tooltip__arrow--bottom.kite-tooltip__arrow--align-end::after { left: calc(100% - var(--tooltip-arrow-x-transform)); } .kite-tooltip__arrow--bottom::after { border-bottom-color: var(--tooltip-background); border-bottom-width: var(--tooltip-arrow-height-adjust); border-top-width: 0; top: 0; left: 50%; transform: translate(-50%, -100%); } .kite-tooltip__arrow--left::after { border-left-color: var(--tooltip-background); border-left-width: var(--tooltip-arrow-height-adjust); border-right-width: 0; top: 50%; left: 100%; } .kite-tooltip__arrow--right::after { border-right-color: var(--tooltip-background); border-right-width: var(--tooltip-arrow-height-adjust); border-left-width: 0; top: 50%; left: 0; transform: translate(-100%, -50%); } .kite-tooltip__arrow--left::after { transform: translate(0, -50%); } .kite-tooltip--no-arrow .kite-tooltip__arrow::after { display: none; } /** Shame for tooltip inline with a label for text input */ .rk-tooltip--inline { height: 100%; margin-left: var(--kite-spacing-xs); } .kite-title-interactive { display: flex; } .kite-title-interactive .kite-popover { align-self: center; margin-top: 2px; } .rk-kite-window--container { width: 100%; position: relative; display: flex; flex-direction: column; } .kite-tag { display: inline-flex; align-items: baseline; gap: var(--kite-tag-icon-margin-right); background-color: var(--kite-tag-background-color); border: var(--kite-tag-border-width) var(--kite-tag-border-style) var(--kite-tag-border-color); border-radius: var(--kite-tag-border-radius); padding: var(--kite-tag-padding-top) var(--kite-tag-padding-right) var(--kite-tag-padding-bottom) var(--kite-tag-padding-left); color: var(--kite-tag-text-color); font-size: var(--kite-tag-text-size); line-height: var(--kite-tag-text-line-height); font-weight: var(--kite-tag-text-weight); } .kite-tag__icon { display: flex; align-self: center; flex-shrink: 0; } .kite-tag__icon .kite-icon { --size: var(--kite-tag-icon-size); --color: var(--kite-tag-icon-color); } .kite-tag--positive { --kite-tag-background-color: var(--kite-tag-positive-background-color); --kite-tag-border-color: var(--kite-tag-positive-border-color); --kite-tag-text-color: var(--kite-tag-positive-text-color); --kite-tag-icon-color: var(--kite-tag-positive-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-positive-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-positive-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-positive-text-color); --kite-tag-solid-icon-color: var(--kite-tag-solid-positive-icon-color); } .kite-tag--negative { --kite-tag-background-color: var(--kite-tag-negative-background-color); --kite-tag-border-color: var(--kite-tag-negative-border-color); --kite-tag-text-color: var(--kite-tag-negative-text-color); --kite-tag-icon-color: var(--kite-tag-negative-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-negative-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-negative-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-negative-text-color); --kite-tag-solid-icon-color: var(--kite-tag-solid-negative-icon-color); } .kite-tag--caution { --kite-tag-background-color: var(--kite-tag-caution-background-color); --kite-tag-border-color: var(--kite-tag-caution-border-color); --kite-tag-text-color: var(--kite-tag-caution-text-color); --kite-tag-icon-color: var(--kite-tag-caution-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-caution-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-caution-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-caution-text-color); } .kite-tag--neutral { --kite-tag-background-color: var(--kite-tag-neutral-background-color); --kite-tag-border-color: var(--kite-tag-neutral-border-color); --kite-tag-text-color: var(--kite-tag-neutral-text-color); --kite-tag-icon-color: var(--kite-tag-neutral-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-neutral-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-neutral-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-neutral-text-color); } .kite-tag--solid { --kite-tag-background-color: var(--kite-tag-solid-background-color); --kite-tag-border-color: var(--kite-tag-solid-border-color); --kite-tag-text-color: var(--kite-tag-solid-text-color); --kite-tag-icon-color: var(--kite-tag-solid-icon-color); } .kite-tag-group { display: flex; flex-wrap: wrap; gap: var(--kite-tag-group-margin); } ul.kite-tag-group { list-style: none; margin: 0; padding: 0; } ul.kite-tag-group > li { line-height: inherit; margin: 0; padding: 0; } .kite-tag { display: inline-flex; align-items: baseline; gap: var(--kite-tag-icon-margin-right); background-color: var(--kite-tag-background-color); border: var(--kite-tag-border-width) var(--kite-tag-border-style) var(--kite-tag-border-color); border-radius: var(--kite-tag-border-radius); padding: var(--kite-tag-padding-top) var(--kite-tag-padding-right) var(--kite-tag-padding-bottom) var(--kite-tag-padding-left); color: var(--kite-tag-text-color); font-size: var(--kite-tag-text-size); line-height: var(--kite-tag-text-line-height); font-weight: var(--kite-tag-text-weight); } .kite-tag__icon { display: flex; align-self: center; flex-shrink: 0; } .kite-tag__icon .kite-icon { --size: var(--kite-tag-icon-size); --color: var(--kite-tag-icon-color); } .kite-tag--positive { --kite-tag-background-color: var(--kite-tag-positive-background-color); --kite-tag-border-color: var(--kite-tag-positive-border-color); --kite-tag-text-color: var(--kite-tag-positive-text-color); --kite-tag-icon-color: var(--kite-tag-positive-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-positive-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-positive-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-positive-text-color); --kite-tag-solid-icon-color: var(--kite-tag-solid-positive-icon-color); } .kite-tag--negative { --kite-tag-background-color: var(--kite-tag-negative-background-color); --kite-tag-border-color: var(--kite-tag-negative-border-color); --kite-tag-text-color: var(--kite-tag-negative-text-color); --kite-tag-icon-color: var(--kite-tag-negative-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-negative-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-negative-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-negative-text-color); --kite-tag-solid-icon-color: var(--kite-tag-solid-negative-icon-color); } .kite-tag--caution { --kite-tag-background-color: var(--kite-tag-caution-background-color); --kite-tag-border-color: var(--kite-tag-caution-border-color); --kite-tag-text-color: var(--kite-tag-caution-text-color); --kite-tag-icon-color: var(--kite-tag-caution-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-caution-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-caution-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-caution-text-color); } .kite-tag--neutral { --kite-tag-background-color: var(--kite-tag-neutral-background-color); --kite-tag-border-color: var(--kite-tag-neutral-border-color); --kite-tag-text-color: var(--kite-tag-neutral-text-color); --kite-tag-icon-color: var(--kite-tag-neutral-icon-color); --kite-tag-solid-background-color: var(--kite-tag-solid-neutral-background-color); --kite-tag-solid-border-color: var(--kite-tag-solid-neutral-border-color); --kite-tag-solid-text-color: var(--kite-tag-solid-neutral-text-color); } .kite-tag--solid { --kite-tag-background-color: var(--kite-tag-solid-background-color); --kite-tag-border-color: var(--kite-tag-solid-border-color); --kite-tag-text-color: var(--kite-tag-solid-text-color); --kite-tag-icon-color: var(--kite-tag-solid-icon-color); } .kite-tag-group { display: flex; flex-wrap: wrap; gap: var(--kite-tag-group-margin); } ul.kite-tag-group { list-style: none; margin: 0; padding: 0; } ul.kite-tag-group > li { line-height: inherit; margin: 0; padding: 0; } @charset "UTF-8"; .kite-theme { --kite-button-padding-top: 0rem; --kite-button-padding-bottom: 0rem; --kite-button-text-align: center; } .typestack-display { font-weight: 800; font-size: 4rem; line-height: 1.125; } @media only screen and (max-width: 37.5rem) { .typestack-display { font-size: 3rem; line-height: 1.2083; } } .typestack-title-1, h1 { font-weight: 800; font-size: 3rem; line-height: 1.2083; } @media only screen and (max-width: 37.5rem) { .typestack-title-1, h1 { font-size: 2.625rem; line-height: 1.2381; } } .typestack-title-2, h2 { font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .typestack-title-2, h2 { font-size: 2.25rem; line-height: 1.27778; } } .typestack-title-3, h3 { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .typestack-title-3, h3 { font-size: 1.75rem; line-height: 1.2857; } } .typestack-title-4, h4 { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .typestack-title-4, h4 { font-size: 1.5rem; line-height: 1.25; } } .typestack-title-5, h5 { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .typestack-title-5, h5 { font-size: 1.25rem; line-height: 1.3; } } .typestack-title-6, h6 { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .typestack-title-6, h6 { font-size: 1.125rem; line-height: 1.3333333; } } .typestack-title-7 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; } .typestack-eyebrow { font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .typestack-eyebrow { font-size: 0.75rem; } } .typestack-body-1, div.content p, div.content li { font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .typestack-body-1, div.content p, div.content li { font-size: 1rem; line-height: 1.625; } } .typestack-body-2, body { font-weight: 400; font-size: 1rem; line-height: 1.625; } .typestack-clickable, button { font-weight: 500; font-size: 1rem; } .typestack-caption, caption, figcaption { font-weight: 400; font-size: 0.875rem; } .typestack-caption-2 { font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; letter-spacing: 0; } .typestack-nav-links { font-size: 1.75rem; line-height: 1.25rem; font-weight: 500; } @media only screen and (max-width: 37.5rem) { .typestack-nav-links { font-size: 1rem; line-height: 1.125; } } .superscript { font-size: 0.75rem; font-weight: 500; } @media only screen and (min-width: 60rem) { .ns { margin-bottom: -2rem; } } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: normal; font-weight: 300; src: local("Spectrum Sans Light"), local("SpectrumSans-Light"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Lt.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Lt.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: italic; font-weight: 300; src: local("Spectrum Sans Light Italic"), local("SpectrumSans-LightItalic"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_LtIt.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_LtIt.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: normal; font-weight: 350; src: local("Spectrum Sans Book"), local("SpectrumSans-Book"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bk.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bk.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: italic; font-weight: 350; src: local("Spectrum Sans Book Italic"), local("SpectrumSans-BookItalic"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BkIt.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BkIt.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: normal; font-weight: 400; src: local("Spectrum Sans Regular"), local("SpectrumSans-Regular"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Rg.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Rg.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: italic; font-weight: 400; src: local("Spectrum Sans Italic"), local("SpectrumSans-Italic"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_It.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_It.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: normal; font-weight: 500; src: local("Spectrum Sans Medium"), local("SpectrumSans-Medium"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Md.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Md.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: italic; font-weight: 500; src: local("Spectrum Sans Medium Italic"), local("SpectrumSans-MediumItalic"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_MdIt.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_MdIt.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: normal; font-weight: 700; src: local("Spectrum Sans Bold"), local("SpectrumSans-Bold"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bd.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_Bd.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: italic; font-weight: 700; src: local("Spectrum Sans Bold Italic"), local("SpectrumSans-BoldItalic"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BdIt.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_BdIt.woff) format("woff"); } @font-face { font-display: auto; font-family: Spectrum Sans; font-style: normal; font-weight: 800; src: local("Spectrum Sans ExtraBold"), local("SpectrumSans-ExtraBold"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBd.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBd.woff) format("woff"); } @font-face { font-family: Spectrum Sans; font-style: italic; font-weight: 800; src: local("Spectrum Sans ExtraBold Italic"), local("SpectrumSans-ExtraBoldItalic"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSansVF_W_Italics_Wght.woff2) format("woff2-variations"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBdIt.woff2) format("woff2"), url(https://cdn.spectrumflow.net/kite/fonts/spectrum-sans/SpectrumSans_W_XBdIt.woff) format("woff"); } body { --background-color: var(--kite-color-white); background-color: var(--background-color); overflow-x: hidden; -webkit-font-smoothing: antialiased; } *:focus:not(:focus-visible) { outline: none; } .kite-container { box-sizing: border-box; } .kite-container.sp { margin-top: 4rem; margin-bottom: 4rem; } a.kite-button { color: var(--color); height: auto; line-height: 2.5; } a.kite-button:visited { color: var(--color); } a.kite-button.kite-button--secondary { color: var(--color); } a.kite-button.kite-button--secondary:hover, a.kite-button.kite-button--secondary:focus, a.kite-button.kite-button--secondary:focus-within { color: var(--color); } small.typestack-eyebrow { display: block; margin: 0 0 0.5rem 0; } small.typestack-eyebrow.bg-light { color: var(--kite-color-gray-30); } small.typestack-eyebrow.bg-dark { color: var(--kite-color-gray-20); } a:visited { color: var(--kite-color-primary); } .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } hr { margin-top: 4rem; } .top-nav { background: var(--kite-color-gray-10); padding: 1rem 0; } .top-nav a { text-decoration: none; } .top-nav a::before { content: "< "; } @media only screen and (max-width: 52.5rem) { .d-only { display: none !important; } } @media only screen and (min-width: 52.5rem) { .m-only { display: none !important; } } blockquote.static-quote { position: relative; margin-bottom: 0; padding: 3.438rem 0 3.438rem 2rem; border-left: 0; } blockquote.static-quote::before { content: ""; position: absolute; left: 0; bottom: 50%; height: calc(100% - 6.25rem); width: 0.25rem; background-color: var(--kite-color-blue-30); transform: translateY(50%); } blockquote.static-quote > p { margin-bottom: 0; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { blockquote.static-quote > p { font-size: 1.125rem; line-height: 1.3333333; } } blockquote.static-quote > cite { position: relative; display: block; font-weight: 400; font-size: 1rem; line-height: 1.625; margin-top: 1.5rem; font-style: normal; padding-left: 1.75rem; color: var(--kite-color-gray-30); } blockquote.static-quote > cite::before { content: "—"; position: absolute; left: 0; } .size-full { height: 100%; width: 100%; } .aspect-16-9 { aspect-ratio: 16/9; } .position-bg-top > picture > img { object-position: top; } .stop-growth-and-center { max-width: 106.25rem; margin-left: auto; margin-right: auto; } .layout.static { position: fixed; overflow: hidden; width: 100%; } .layout.static.search-true { position: relative; overflow: initial; } main { position: relative; } @media only screen and (min-width: 52.5rem) { main .bg { background-color: var(--kite-color-gray-10); position: absolute; top: 0; left: 50%; right: 0; bottom: 0; z-index: -1; } } .skip-to-main { background-color: var(--kite-color-dark-blue-20); width: 100%; } .skip-to-main:focus-within { padding-block: 9px; } .skip-to-main__link { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; text-decoration: none; line-height: 1.25rem; font-weight: 400; font-size: 0.875rem; } .skip-to-main__link:focus { color: var(--kite-color-white); clip: auto; clip-path: none; position: static; overflow: auto; padding: 0.25rem 1rem; border: 1px solid var(--kite-color-white); border-radius: 4px; outline: 2px solid #1285e2; } .footer__bottom { padding: 2rem 0.5rem; font-size: 0.75rem; } @media only screen and (min-width: 52.5rem) { .footer__bottom { border-top: 1px solid var(--kite-color-dark-blue-10); padding: 2rem 0; } } .footer__bottom section { display: flex; align-items: baseline; white-space: nowrap; flex-wrap: wrap; } .footer__bottom section.with-logo img { margin: 0; } .footer__bottom section.with-logo span { margin-top: 1rem; } .footer__bottom section.with-logo a.img { margin-right: 2rem; } @media only screen and (max-width: 52.5rem) { .footer__bottom section.with-logo { flex-direction: column; align-items: center; } .footer__bottom section.with-logo a.img { margin-right: 0; } } .footer__bottom section img { width: 7.125rem; } .footer__bottom section .spacer { flex: 1 1 auto; } .footer__bottom section a { color: var(--kite-color-white); } .footer__bottom section .links { margin-top: 1rem; align-items: center; display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.5rem; justify-content: center; flex: 1 1 auto; } .footer__bottom section .links a { padding: 0; display: flex; align-items: center; text-align: center; } .footer__bottom section .links a:not(:hover) { text-decoration: none; } @media only screen and (min-width: 52.5rem) { .footer__bottom section .links { align-items: flex-end; flex-direction: row; gap: 0; } .footer__bottom section .links a { border-left: 1px solid var(--kite-color-white); padding: 0 0.5rem; } } @media only screen and (max-width: 80rem) { .footer__bottom section .links a:first-child { border-left: none; } } .footer__bottom .dis { text-align: center; width: 100%; margin-top: 1rem; } .footer__bottom .dis a { color: var(--kite-color-white); } @media only screen and (max-width: 52.5rem) { .footer__bottom .dis { text-align: center; white-space: normal; } } .footer__main { margin-top: 3rem; background: var(--kite-color-dark-blue-20); color: var(--kite-color-white); white-space: normal; } .footer__main a { white-space: normal; } .footer__main *:focus-visible { outline: 2px solid #1285e2; } .main__nav:not(.sidebar):not(.footer) > section { position: relative; } .main__nav:not(.sidebar):not(.footer) > section:hover ul, .main__nav:not(.sidebar):not(.footer) > section.show ul { display: flex; } .main__nav:not(.sidebar):not(.footer) > section ul { min-width: 15rem; position: absolute; top: 100%; display: none; flex-direction: column; padding: 0; background: var(--kite-color-white); border: 1px solid var(--kite-color-gray-20); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.25); } .main__nav:not(.sidebar):not(.footer) > section ul li { white-space: nowrap; list-style: none; padding: 0 1rem; margin: 0; } .main__nav:not(.sidebar):not(.footer) > section ul li a { color: var(--kite-color-dark-blue-30); text-decoration: none; display: flex; height: 3rem; align-items: center; font-size: 1rem; } .main__nav:not(.sidebar):not(.footer) > section ul li a:hover { color: var(--kite-color-blue-30); } .main__nav.sidebar:not(.footer) > section { margin-right: -1rem; } .main__nav.sidebar.footer > section ul li a { padding-left: 2rem; } .main__nav.sidebar > section ul { overflow: hidden; margin: 0; padding: 0; visibility: hidden; } .main__nav.sidebar > section ul li { overflow: hidden; max-height: 0; transition: max-height 0.2s; white-space: nowrap; margin: 0; } .main__nav.sidebar > section ul li a { outline-offset: -2px; } .main__nav.sidebar > section.expanded ul { visibility: visible; } .main__nav.sidebar > section.expanded ul li { max-height: 3rem; } .main__nav.sidebar > section li { list-style: none; } .main__nav.sidebar > section li a { display: block; color: var(--kite-color-white); text-decoration: none; font-size: 1rem; padding: 0.75rem 1rem; } .main__nav.sidebar > section li a:hover { color: var(--kite-color-blue-20); } .main__nav.footer:not(.sidebar) > section ul { padding: 0; } .main__nav.footer:not(.sidebar) > section ul li { list-style: none; padding: 0; margin: 0; } .main__nav.footer:not(.sidebar) > section ul li a { color: var(--kite-color-white); font-size: 0.75rem; display: block; padding: 0.25rem 0; } .main__nav.footer:not(.sidebar) > section ul li a:not(:hover) { text-decoration: none; } .main__nav { display: flex; } .main__nav:not(.sidebar) { align-items: center; } @media only screen and (max-width: 52.5rem) { .main__nav:not(.sidebar) { display: none; } } .main__nav.show-all { align-items: flex-start; justify-content: space-between; padding-top: 2rem; padding-bottom: 2rem; } .main__nav.footer.sidebar { border-top: 1px solid var(--kite-color-dark-blue-10); } .main__nav.footer.sidebar .category button { padding: 1rem 0.75rem; } .main__nav.footer:not(.sidebar) .category { color: #989da6; font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.25; } .main__nav.footer:not(.sidebar) .category p { letter-spacing: -1px; } .main__nav.sidebar { flex-direction: column; } .main__nav.sidebar .expanded .category button::after { content: "-"; } .main__nav.sidebar section { border-bottom: 1px solid var(--kite-color-dark-blue-10); } .main__nav.sidebar .category button { width: 100%; justify-content: space-between; color: var(--kite-color-white); padding-left: 0; } .main__nav.sidebar .category button::after { border: none; content: "+"; width: auto; height: auto; margin-left: 0; width: 1rem; text-align: center; font-weight: 200; } .main__nav.sidebar .category button:hover { color: var(--kite-color-blue-20); } .main__nav.sidebar .category button:hover::after { color: var(--kite-color-white); } .main__nav .category { margin: 0; } .main__nav .category button { background: none; border: none; padding: 1rem; cursor: pointer; display: flex; align-items: center; line-height: 1; font-size: 1.125rem; height: 50px; text-align: right; color: var(--kite-color-dark-blue-20); font-weight: 400; } .main__nav .category button::after { display: block; width: 0; height: 0; border-style: solid; border-width: 0.25rem; content: ""; border-bottom-width: 0; border-color: var(--kite-color-blue-30) transparent transparent; margin-left: 0.25rem; margin-top: 0; } .main__nav.footer:not(.sidebar) .category { font-weight: 500; } .footer__cta-subscribe { display: flex; flex-direction: column; margin: 0 auto; /* Added kite-breakpoint-down to handle the special case of viewport 320 */ } .footer__cta-subscribe h4 { font-weight: 700; font-size: 1.5rem; } .footer__cta-subscribe form { align-self: flex-start; display: flex; flex-direction: column; width: 100%; } .footer__cta-subscribe form .input-group { align-self: center; display: flex; flex-direction: column; } .footer__cta-subscribe form .input-group > * { padding: 0; } .footer__cta-subscribe form .input-group label { color: var(--kite-color-white); } .footer__cta-subscribe form .input-group input[type=email] { height: 2.65rem; width: 16.25rem; } .footer__cta-subscribe form input { align-self: center; } .footer__cta-subscribe .kite-button:focus-visible { outline: 2px solid var(--kite-color-primary); } .footer__cta-subscribe .recaptcha-container { margin-top: 1.25rem; display: flex; justify-content: center; } @media only screen and (max-width: 30rem) { .footer__cta-subscribe .recaptcha-container > div { transform: scale(0.8); transform-origin: 0 0; } .footer__cta-subscribe .recaptcha-container > div > div { padding: 0; margin: 0; width: 150px !important; margin-left: -9.5rem !important; } } @media only screen and (min-width: 60rem) { .footer__cta-subscribe { padding: 3rem 0; } .footer__cta-subscribe form { flex-direction: row; } .footer__cta-subscribe form .input-group { margin-right: 1.25rem; } .footer__cta-subscribe form input { align-self: flex-end; } } @media only screen and (max-width: 60rem) { .footer__cta-subscribe form input { margin-top: 1.5rem; } } .footer__cta-subscribe input[type=submit]:focus-visible { background-color: #006dc7; outline: 2px solid #006dc7; } .footer__cta-subscribe .error { font-weight: 700; color: var(--kite-color-white); padding: 0.25rem; border-radius: 0.25rem; margin-top: 0.5rem; background: var(--kite-color-red-20); } .footer__cta-subscribe p { margin-bottom: 0; } .footer__social-media { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin: 0 auto; } .footer__social-media h4 { font-weight: 700; font-size: 1.5rem; } .footer__social-media ul { display: flex; align-items: center; padding-left: 0; margin: 0; gap: 2.125rem; } .footer__social-media ul li { list-style: none; padding-left: 0; margin: 0; display: flex; align-items: center; } .footer__social-media ul li a { display: flex; align-items: center; } .footer__social-media ul .kite-icon { color: var(--kite-color-white); margin: 0 1rem; } .footer__social-media ul .kite-icon svg { width: 2.5rem; } @media only screen and (min-width: 60rem) { .footer__social-media { margin: 0; } .footer__social-media ul { padding: 0; } .footer__social-media ul .kite-icon { margin: 0; } } .footer__ctas { background: var(--kite-color-dark-blue-20); color: var(--kite-color-white); padding: 3rem 0; } .footer__ctas > .kite-container { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; margin: 0 auto; } .footer__ctas section { display: flex; justify-content: center; padding: 2rem 1rem; } .footer__ctas section.footer__social-media { order: 3; } .footer__ctas section:first-child { padding-top: 0; } .footer__ctas section:last-child { padding-bottom: 0; } .footer__ctas section:not(:first-child) { border-top: 2px solid var(--kite-color-white); } @media only screen and (min-width: 60rem) { .footer__ctas > .kite-container { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; } .footer__ctas > .kite-container section { align-items: flex-start; padding: 0 8rem; flex: 1 0 auto; } .footer__ctas > .kite-container section.left { justify-content: flex-start; } .footer__ctas > .kite-container section:first-child { padding-left: 0; } .footer__ctas > .kite-container section:first-child:last-child { flex: 1 1 100%; align-items: center; } .footer__ctas > .kite-container section:last-child { padding-right: 0; } .footer__ctas > .kite-container section:not(:first-child) { border-left: 2px solid var(--kite-color-white); border-top: none; } } .site-header { background-color: var(--kite-color-dark-blue-20); z-index: 21; height: 2.25rem; position: sticky; top: 0; } .site-header.expanded { position: fixed; top: 0; left: 0; right: 0; } .site-header.expanded button::after { transform: rotate(-180deg); } .site-header .kite-container { height: 100%; } .site-header .services-header *:focus-visible { outline: 2px solid #1285e2; outline-offset: 0; } .site-header button { border: none; background: none; margin: 0; position: relative; padding: 0.5rem 1rem 0.5rem 0; text-align: left; cursor: pointer; height: 100%; font-weight: 500; color: var(--kite-color-white); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1rem; min-width: 0; } .site-header button::after { display: block; width: 8px; height: 4px; border-style: solid; border-width: 0.25rem; content: ""; border-bottom-width: 0; border-color: var(--kite-color-white) transparent transparent; position: absolute; top: 50%; right: 0; left: auto; margin-top: -0.125rem; transition: transform 0.25s; } .nav-header { top: 0; background-color: var(--kite-color-white); padding: 1.5rem 0; z-index: 10; } .nav-header:not(.policy) { position: sticky; top: 2.25rem; } .nav-header:not(.search-inline) { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); } .nav-header .kite-container { position: relative; display: flex; align-items: center; justify-content: space-between; z-index: 20; } .nav-header .kite-container .sidebar-trigger { display: none; border: none; background: none; padding: 0.5rem; padding-left: 0; margin: 0; align-items: center; position: absolute; left: 1rem; } .nav-header .kite-container .search-trigger { border: none; background: none; padding: 0; align-items: center; justify-content: flex-end; display: flex; width: 2rem; height: 2rem; color: var(--kite-color-blue-30); cursor: pointer; } .nav-header .kite-container .search-trigger:focus-visible { outline: 2px solid #1285e2; } @media only screen and (max-width: 52.5rem) { .nav-header .kite-container .search-trigger { display: none; } } .nav-header .kite-container a img { width: 100%; height: auto; } .nav-header .kite-container a:first-of-type { margin-right: 2rem; display: flex; align-items: center; } .nav-header .kite-container .hidden { visibility: hidden; } .nav-header.search-inline .header-fill, .nav-header.search-inline .search__results { display: none; } @media only screen and (max-width: 52.5rem) { .nav-header { padding: 1rem 0; } .nav-header .kite-container { justify-content: center; } .nav-header .kite-container .sidebar-trigger { display: flex; } .nav-header .kite-container .sidebar-trigger:not(:disabled) { cursor: pointer; } .nav-header .kite-container:not(.results) a { width: 8.25rem; } } .prevent-reflow { height: 0; } .prevent-reflow.expanded { height: 2.25rem; } .sites-nav { justify-content: space-evenly; position: fixed; top: 2.25rem; bottom: 0; left: 0; right: 0; background: var(--kite-color-gray-10); z-index: 21; max-height: 0; overflow: hidden; visibility: hidden; overscroll-behavior: contain; transition: max-height 0.25s; } .sites-nav.expanded { visibility: visible; max-height: 100vh; overflow-y: auto; } .layout.static.search-false .nav-header { background-color: rgba(255, 255, 255, 0); } .layout.static.search-false .nav-header.policy, .layout.static.search-false .nav-header.policy-header { height: auto; } @media only screen and (min-width: 52.5rem) { .layout.static.search-false .nav-header { height: 0; } } .policy-header { position: sticky; top: 0; z-index: 11; padding: 0; display: flex; flex-direction: column; box-shadow: none; background-color: var(--kite-color-dark-blue-10); } .policy-header a { text-decoration: none; } .policy-header a:hover { text-decoration: none; } .policy-header a:visited { color: var(--kite-color-white); } .policy-header .kite-icon { color: var(--kite-color-white); } .policy-header .kite-container { position: relative; max-width: none; } .policy-header .kite-container.nav { height: 4.125rem; display: flex; align-items: center; background-color: var(--kite-color-dark-blue-10); max-width: 80rem; } .policy-header .kite-container.nav::before { content: ""; position: absolute; top: 0; bottom: 0; right: 50%; width: 100vw; height: 100%; background-color: var(--kite-color-dark-blue-10); transform: translateX(50%); z-index: -1; } .policy-header .kite-container.nav h2 { text-transform: uppercase; color: var(--kite-color-white); margin: 0; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .policy-header .kite-container.nav h2 { font-size: 1.125rem; line-height: 1.3333333; } } .policy-header .kite-container.nav h2 { font-weight: 400; } .policy-header .kite-container.nav nav { height: 100%; } .policy-header .kite-container.nav nav ul { display: flex; flex-direction: row; flex-wrap: nowrap; list-style: none; } .policy-header .kite-container.nav nav ul, .policy-header .kite-container.nav nav li { height: 100%; padding-left: 0; margin: 0; } .policy-header .kite-container.nav nav ul *:focus-visible, .policy-header .kite-container.nav nav li *:focus-visible { outline: 2px solid #1285e2; outline-offset: -0.5rem; } .policy-header .kite-container.nav nav ul a, .policy-header .kite-container.nav nav li a { color: var(--kite-color-white); display: flex; align-items: center; height: 100%; margin-right: 0; padding: 0 1rem; font-size: 1.125rem; line-height: 1.125rem; } @media only screen and (max-width: 60rem) { .policy-header .kite-container.nav nav ul a, .policy-header .kite-container.nav nav li a { font-size: 1rem; } } .policy-header .kite-container.nav nav ul a.active, .policy-header .kite-container.nav nav li a.active { background-color: var(--kite-color-dark-blue-20); } @media only screen and (max-width: 52.5rem) { .policy-header .kite-container.nav nav { display: none; } } .policy-header .kite-container .search__header { margin-top: 0; bottom: 1rem; background: none; border-bottom-color: var(--kite-color-white); } .policy-header .kite-container .search__header input { margin-top: 0; background: none; color: var(--kite-color-white); border-bottom-color: var(--kite-color-white); } .policy-header .kite-container .search__header input::placeholder { color: var(--kite-color-white); opacity: 0.65; } .policy-header .search-results { position: relative; background-color: rgba(255, 255, 255, 0); } .search__header { max-width: 0; visibility: hidden; position: absolute; left: 2%; top: 0.5rem; background: var(--kite-color-white); display: flex; align-items: center; width: 96%; padding-bottom: 0; border-bottom: 1px solid var(--kite-color-blue-30); transition: max-width 0.5s; } .search__header.visible { visibility: visible; max-width: 100vw; } .search__header .search-icon { color: var(--kite-color-blue-30); transform: translateY(-2px); z-index: 1; flex: 1 0 3rem; } .search__header button { border: none; background: none; padding: 0; margin: 0 0 0.25rem 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .search__header button:focus-visible { outline: 2px solid #1285e2; } .search__header input { background-color: transparent; position: relative; margin: 0; padding: 0; flex: 1 1 100%; height: 100%; border: none; font-weight: 500; font-size: 1.5rem; line-height: 1.25; /** Fix for Firefox having a different vertical centering of text in the input. I tried everything! */ } @media only screen and (max-width: 37.5rem) { .search__header input { font-size: 1.25rem; line-height: 1.3; } } .search__header input { font-weight: 400; line-height: 1.125; } .search__header input:focus-visible { outline: none; } .search__header input:focus-visible:after { content: ""; position: absolute; right: 0; bottom: -2px; width: 100%; height: 2px; background-color: var(--kite-color-primary); } .search__header input:focus-visible:not(:focus-visible) { outline: none; } @supports (-moz-appearance: none) { .search__header input { padding-bottom: 0; } } .search__header .kite-progress { position: relative; width: 1rem; height: 2rem; } .search__header .kite-progress__icons { width: 1rem; height: 1rem; } .search__results.in-sidebar .results .search__pagination ul button { color: var(--kite-color-white); } .search__results.in-sidebar .results .search__pagination ul button:disabled { color: var(--kite-color-gray-30); } .search__results.in-sidebar .results .search__pagination ul button:not(:disabled):hover { color: var(--kite-color-blue-20); } .search__results.in-sidebar .results .search__pagination ul button.page-no:disabled { color: var(--kite-color-blue-20); border-color: var(--kite-color-blue-20); } .search__pagination { display: flex; flex-direction: column; margin-top: 2.5rem; align-items: center; } .search__pagination ul { order: 1; display: flex; padding: 0; margin-bottom: 1.75rem; width: 100%; max-width: 28.875rem; flex-wrap: nowrap; justify-content: space-between; } .search__pagination ul li { flex: 0 1 auto; padding: 0; list-style: none; display: flex; margin: 0; font-size: 1.125rem; } .search__pagination ul li:last-of-type, .search__pagination ul li:first-of-type { flex: 0 0 65px; } .search__pagination ul li:last-of-type { justify-content: flex-end; } .search__pagination ul button { display: flex; align-items: center; justify-content: center; border: none; background: none; min-width: 1.5rem; padding: 0; font-weight: 400; font-size: 1rem; line-height: 1.625; } .search__pagination ul button:not(:disabled):hover { cursor: pointer; color: var(--kite-color-blue-30); } .search__pagination ul button.page-no:disabled { color: var(--kite-color-blue-30); border-bottom: 2px solid var(--kite-color-blue-30); margin-bottom: -2px; } .search__pagination h3 { order: 2; text-align: center; font-size: 1.125rem; } @media only screen and (min-width: 52.5rem) { .search__pagination ul li, .search__pagination h3 { font-size: 1.25rem; } } @keyframes expandOnLoad { 0% { display: none; visibility: hidden; opacity: 0; max-height: 0; } 1% { display: block; } 35% { opacity: 0; } 75% { visibility: visible; } 100% { opacity: 1; max-height: 14rem; } } .header-fill { position: absolute; top: 0; bottom: 0; z-index: 2; left: 0; right: 0; height: 6.375rem; background-color: var(--kite-color-white); } .header-fill.policy-true { background-color: rgba(255, 255, 255, 0); } .header-fill.policy-false + .search__results:not(.in-sidebar) .results { max-height: 80vh; } .search__results .results .pop-terms { margin-top: 2rem; } .search__results .results .pop-terms__list { list-style-type: none; margin: 0.875rem 0 0 0; padding-left: 0; } .search__results .results .pop-terms__list li { padding-left: 0; } .search__results .results .pop-terms__list li a { text-decoration: none; font-weight: 500; } .search__results .results > ul { padding: 0; margin-top: 0; } .search__results .results > ul li { padding: 0; margin: 0 0 1.5rem 0; list-style: none; } .search__results .results > ul li a { display: block; width: auto; color: var(--kite-color-primary); padding: 0; align-self: flex-start; } .search__results .results > ul li a:not(:hover) { text-decoration: none; } .search__results .results > ul li a ~ p { display: none; } .search__results .results .link-view-all { color: var(--kite-color-white); display: inline-flex; flex-wrap: nowrap; gap: 0.5rem; text-decoration: none; } .search__results .results .link-view-all span { align-self: center; } .search__results .results .link-view-all:hover, .search__results .results .link-view-all:focus, .search__results .results .link-view-all:focus-within { color: var(--kite-color-primary); text-decoration: underline; } .search__results:not(.in-sidebar).inline .shade { display: none; } .search__results:not(.in-sidebar).inline .results { max-height: none; } .search__results:not(.in-sidebar) .shade { background: rgba(0, 33, 57, 0.8); position: absolute; top: 0; height: 100vh; left: 0; right: 0; z-index: 1; } .search__results:not(.in-sidebar) .shade .spinner { filter: brightness(500%) saturate(0) contrast(500%); transform: scale(2); } .search__results:not(.in-sidebar) .results { position: relative; z-index: 2; background: var(--kite-color-white); display: block; margin: 0 auto 4rem auto; padding: 0 1.375rem; max-height: 65vh; max-width: 80rem; overflow: hidden; overflow-y: auto; } .search__results:not(.in-sidebar) .results h2 { margin: 0 0 2rem 0; padding-top: 1.5rem; } .search__results:not(.in-sidebar) .results > ul li { display: flex; flex-direction: column; gap: 0.5rem; animation: expandOnLoad 0.25s ease-out 0s 1 forwards; } .search__results:not(.in-sidebar) .results > ul li > * { padding: 0; margin: 0; } .search__results:not(.in-sidebar) .results > ul li .typestack-eyebrow { margin-bottom: 0; } .search__results:not(.in-sidebar) .results > ul li a { padding: 0; width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .search__results:not(.in-sidebar) .results > ul li a:not(:hover) { color: var(--kite-color-black); } .search__results:not(.in-sidebar) .results > ul li:not(:first-of-type) { margin-top: 2rem; } .search__results:not(.in-sidebar) .results > ul li p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 100%; max-height: 1.625rem; } @media only screen and (min-width: 52.5rem) { .search__results:not(.in-sidebar) .results > ul li p { max-height: 1.875rem; } } .search__results.in-sidebar ul li a { padding: 0.5rem 0; color: var(--kite-color-blue-20); padding: 0; } .search__results.in-sidebar ul li a:not(:hover) { color: var(--kite-color-white); } .search__results.in-sidebar .typestack-eyebrow { color: var(--kite-color-gray-20); } @media only screen and (min-width: 52.5rem) { .search__results:not(.in-sidebar) .results-true { padding: 0 2.5rem 2.5rem; } .search__results .results .pop-terms { margin: 2rem 0; } .search__results .results .pop-terms__list { list-style-type: none; margin: 0.875rem 0 0 0; padding-left: 0; } .search__results .results .pop-terms__list li { padding-left: 0; } .search__results .results .pop-terms__list li a { color: var(--kite-color-black); } .search__results .results > ul li a ~ p { display: block; } .search__results .results .link-view-all { color: var(--kite-color-primary); } .search__results .results .link-view-all span { color: var(--kite-color-primary); } } .typestack-eyebrow { color: var(--kite-color-gray-30); margin-bottom: 0.25rem; } .typestack-eyebrow.date { text-transform: none; letter-spacing: normal; } .sites__menu.kite-container { margin: 0 auto; max-width: 1280px; padding: 1.25rem; } .history__page .centered { text-align: center; margin-top: 4rem; margin: 4rem auto; max-width: 720px; } .history__page .centered h1 { display: flex; flex-direction: column; margin-bottom: 1rem; font-weight: 800; font-size: 4rem; line-height: 1.125; } @media only screen and (max-width: 37.5rem) { .history__page .centered h1 { font-size: 3rem; line-height: 1.2083; } } .history__page .centered h1 small { margin-bottom: 0.5rem; text-transform: uppercase; font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .history__page .centered h1 small { font-size: 0.75rem; } } .history__page .centered h1 small { font-weight: 500; } .history__page .timeline { display: flex; flex-direction: column; align-items: center; } .history__page .timeline a { height: 2rem; } .history__page .timeline .hero { width: 100%; object-fit: cover; object-position: center center; } .history__page .timeline .hero:first-of-type { margin-bottom: 2rem; } .history__page .timeline .hero:last-of-type { margin-top: 2rem; } .history__page .timeline .kite-icon { color: var(--kite-color-black); } .history__page .timeline .line { width: 50%; margin-left: 50%; border-left: 1px solid var(--kite-color-black); height: 64px; } .sitemap-title { margin-top: 2rem; margin-bottom: 2rem; } .sitemap h3 { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .sitemap h3 { font-size: 1.25rem; line-height: 1.3; } } .sitemap h3:not(:first-child) { margin-top: 3rem; } .sitemap a { margin: 0.5rem 0 0.5rem 2rem; text-decoration: none; font-weight: 400; font-size: 1rem; line-height: 1.625; display: block; } .sitemap a.sublink { margin-left: 2rem; } .sitemap h4 { font-weight: 400; font-size: 1rem; line-height: 1.625; margin-left: 1rem; margin-bottom: 0; } .sitemap h4:not(:first-child) { margin-top: 3rem; } .sites-nav-submenu { display: flex; flex-direction: column; } .sites-nav-submenu .heading { border-left: 3px solid var(--kite-color-blue-30); font-size: 1.25rem; padding-left: 1rem; margin: 0; } .sites-nav-submenu ul { padding-left: 3px; margin-top: 0.5rem; } .sites-nav-submenu ul li { font-size: 1rem; font-weight: 500; list-style: none; padding-left: 1rem; margin: 0; } .sites-nav-submenu ul li a { color: var(--kite-color-black); display: flex; align-items: center; line-height: 1; padding: 0.5rem 0; } .sites-nav-submenu ul li a .kite-icon { color: var(--kite-color-gray-30); margin-right: 0.5rem; } .sites-nav-submenu ul li a:not(:hover) { text-decoration: none; } .leadership-nav { margin-top: 1rem; display: flex; justify-content: space-between; } .leadership-nav a { text-decoration: none; font-weight: 600; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .leadership-nav a { font-size: 1.125rem; line-height: 1.3333333; } } .leadership-nav > a:first-of-type::before { content: "< "; } .company-banner p { padding: 0; margin: 0; } .company-banner__hidden-link { height: 0; width: 0; padding: 0; margin: 0; } .company-banner__inline-link--bold { font-weight: 700; } .company-banner__inline-link--em { font-style: italic; } .company-banner .kite-alert { margin-bottom: 0; overflow: hidden; } .company-banner .kite-alert a { color: inherit; } .company-banner .kite-alert a:focus-visible { outline: 2px solid var(--kite-color-black); } .featured { position: relative; } .featured:focus-within, .featured:focus, .featured:hover { cursor: pointer; } .featured:focus-within .hero__text h1, .featured:focus .hero__text h1, .featured:hover .hero__text h1 { color: var(--kite-color-blue-30); } .featured a { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; outline: none; display: block; } .featured a::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } .newsroom--title { margin-top: 2rem; } .newsroom--search { margin-top: 2rem; } .newsroom--search .search-bar { width: 100%; display: flex; flex-direction: column; align-items: stretch; position: relative; } .newsroom--search .search-bar #search { position: absolute; top: -1rem; } @media only screen and (min-width: 52.5rem) { .newsroom--search .search-bar #search { top: -10rem; } } .newsroom--search .search-bar .search-icon, .newsroom--search .search-bar .clear-icon { position: absolute; color: var(--kite-color-gray-30); bottom: 0.6125rem; } .newsroom--search .search-bar .search-icon.search-icon, .newsroom--search .search-bar .clear-icon.search-icon { left: 0; } .newsroom--search .search-bar .search-icon.clear-icon, .newsroom--search .search-bar .clear-icon.clear-icon { right: 0; } .newsroom--search .search-bar .clear-icon { border: none; background: none; padding: 0; margin: 0; display: flex; align-items: flex-end; cursor: pointer; } .newsroom--search .search-bar input { color: var(--kite-color-gray-30); font-size: 1.5rem; border: none; border-bottom: 1px solid var(--kite-color-gray-30); padding: 0.5rem 2rem 0.5rem 3rem; outline: none; box-sizing: border-box; } .newsroom--search .search-bar input:focus, .newsroom--search .search-bar input:focus-within { border-bottom: 2px solid var(--kite-color-blue-30); padding-bottom: calc(0.5rem - 1px); } .newsroom--search .lower-row { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 1rem; margin-top: 1rem; } @media only screen and (min-width: 52.5rem) { .newsroom--search .lower-row { flex-direction: row; align-items: flex-end; } } .newsroom--search .lower-row .kite-menu--dropdown.kite-menu--full { max-width: 100%; width: 100%; } .newsroom--search .lower-row .kite-menu__selection { font-weight: 400; } .newsroom--search .lower-row .kite-menu__list { max-height: 12.65625rem; overflow-y: scroll; } .newsroom--search .filters { position: relative; display: flex; flex-direction: column; align-items: stretch; column-gap: 1.5rem; row-gap: 1rem; } .newsroom--search .filters legend { margin-bottom: 0.75rem; } @media only screen and (min-width: 52.5rem) { .newsroom--search .filters { flex-direction: row; align-items: flex-end; } .newsroom--search .filters__category { width: 14.375rem; } .newsroom--search .filters__state { width: 10.625rem; } .newsroom--search .filters__sort { width: 8.75rem; } } .newsroom--search .filters__clear { display: flex; align-items: center; justify-content: center; gap: 0.5rem; border: none; background-color: var(--kite-color-white); color: var(--kite-color-primary); position: absolute; padding: 0; top: -2.125rem; right: 0; } @media only screen and (min-width: 52.5rem) { .newsroom--search .filters__clear { position: static; padding: 0.75rem 0.5rem 0.75rem 0; } } .newsroom--loader { position: relative; margin-top: 4rem; height: 16rem; } .newsroom--results { margin-top: 2rem; } .newsroom--results ul { padding-left: 0; margin: 0; } .newsroom--results ul li { height: 100%; max-height: 31.25rem; } .newsroom--results ul li p.desc { overflow: hidden; height: auto; flex-shrink: 999; text-overflow: ellipsis; -webkit-line-clamp: 7; display: -webkit-box; -webkit-box-orient: vertical; } .newsroom--paginator { margin-top: 2rem; width: 100%; } .newsroom--paginator .search__pagination { align-items: center; } .newsroom--no-results { font-size: 2rem; } .newsroom--nav { background: var(--kite-color-gray-10); padding: 2rem 0; margin-top: 2rem; } .newsroom--nav h3 { margin-bottom: 2rem; font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .newsroom--nav h3 { font-size: 1.5rem; line-height: 1.25; } } .newsroom--nav h3 { font-weight: 700; } aside.sidebar { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; background-color: rgba(0, 33, 57, 0.8); z-index: 21; visibility: hidden; transition: opacity 0.5s; pointer-events: none; } aside.sidebar > article { position: absolute; top: 0; right: 0; bottom: 0; left: -100vw; background-color: var(--kite-color-dark-blue-30); padding: 1rem; padding-top: 0.75rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7); color: var(--kite-color-white); display: flex; flex-direction: column; max-width: 16rem; overflow: hidden; overflow-y: auto; transition: left 0.5s, max-width 0.5s, width 0.5s; } aside.sidebar > article .close { background: none; border: none; padding: 0.25rem; display: flex; align-items: center; align-self: flex-end; color: var(--kite-color-gray-30); cursor: pointer; transform: translateX(0.5rem); } aside.sidebar.search-focused > article { max-width: 100vw; } aside.sidebar.search-focused > article .search__results.in-sidebar { width: 100%; flex: 1 1 auto; overflow: auto; } aside.sidebar.search-focused > article .search__results.in-sidebar .results { min-width: 0; } aside.sidebar.search-focused .main__nav { display: none; } aside.sidebar.open { opacity: 1; visibility: visible; pointer-events: all; } aside.sidebar.open > article { left: 0; } .sidebar .sidebar__search { display: flex; position: relative; align-items: flex-end; border-bottom: 1px solid var(--kite-color-gray-30); padding-bottom: 0.25rem; margin-bottom: 2rem; } .sidebar .sidebar__search .kite-icon { margin-bottom: 0.25rem; color: var(--kite-color-gray-10); transform: translateY(-2px); } .sidebar .sidebar__search .kite-progress { position: absolute; width: 1rem; height: 1rem; left: calc(100% - 1rem); top: calc(100% - 1rem); transform: translateY(-50%); } .sidebar .sidebar__search .kite-progress__icons { width: 1rem; height: 1rem; } .sidebar .sidebar__search input { background: none; color: var(--kite-color-gray-10); margin: 0 0 -0.25rem -1.75rem; padding: 0.5rem 3rem 0.5rem 3rem; flex: 1 1 100%; border: none; min-width: 0; font-weight: 500; font-size: 1.5rem; line-height: 1.25; /** Fix for Firefox having a different vertical centering of text in the input. I tried everything! */ } @media only screen and (max-width: 37.5rem) { .sidebar .sidebar__search input { font-size: 1.25rem; line-height: 1.3; } } .sidebar .sidebar__search input { font-weight: 400; } .sidebar .sidebar__search input:focus-visible { outline: none; border-bottom: 2px solid var(--kite-color-primary); margin-bottom: calc(-0.25rem - 2px); } .sidebar .sidebar__search input:focus-visible:not(:focus-visible) { outline: none; } .sidebar .sidebar__search input::placeholder { color: var(--kite-color-gray-10); opacity: 1; } @supports (-moz-appearance: none) { .sidebar .sidebar__search input { padding-bottom: 0; } } .sidebar.search-focused .sidebar__search { margin-bottom: 1rem; } .sidebar.search-focused .sidebar__search .kite-icon { color: var(--kite-color-primary); } .sidebar.search-focused .sidebar__search input { color: var(--kite-color-white); } .history__decade { display: flex; flex-direction: column; align-items: center; width: 100%; } .history__decade button { display: flex; align-items: center; border: none; background: none; padding: 0; cursor: pointer; margin-right: -2rem; } .history__decade button h5 { margin: 0; } .history__decade button .kite-icon { margin-left: 1rem; } .history__decade .content { max-height: 0; overflow: hidden; width: 100%; display: flex; flex-direction: column; align-items: center; } .history__decade .content.expanded { max-height: unset; } .history__decade .content .year-content { width: 100%; } .history__decade .content .year-content h6 { text-align: center; } .history__decade .content .year-content .aux-line { display: none; } .history__decade .content .year-content .event { margin: 0 0 0 0; width: calc(50% + 1px); padding: 1rem 0; border-right: 1px solid var(--kite-color-black); text-align: right; display: flex; align-items: center; } .history__decade .content .year-content .event .body, .history__decade .content .year-content .event .body p { font-weight: 400; font-size: 1rem; line-height: 1.625; margin: 0; } .history__decade .content .year-content .event .body-wrapper { order: 1; width: clamp(8rem, 100%, 50rem); } .history__decade .content .year-content .event .gatsby-image-wrapper { margin-top: 0.5rem; } .history__decade .content .year-content .event hr { width: clamp(4rem, 25vw, 20rem); margin-top: 0; margin-bottom: 0; margin-left: 1rem; display: flex; align-items: center; order: 2; } .history__decade .content .year-content .event hr::before { font-size: 1px; content: " "; border: 4px solid var(--kite-color-gray-20); border-radius: 8px; } .history__decade .content .year-content .event.right { text-align: left; margin-left: 50%; border-right: none; border-left: 1px solid var(--kite-color-black); } .history__decade .content .year-content .event.right hr { order: 1; flex-direction: row-reverse; margin-left: 0; margin-right: 1rem; } .history__decade .content .year-content .event.right .body-wrapper { order: 2; } @media only screen and (max-width: 52.5rem) { .history__decade .content .year-content .event { width: 100%; max-width: 100%; flex-direction: column; } .history__decade .content .year-content .event.right, .history__decade .content .year-content .event.left { margin-right: 0; margin-left: 0; border-left: none; border-right: none; text-align: center; } .history__decade .content .year-content .event.right hr, .history__decade .content .year-content .event.left hr { display: none; } .history__decade .content .year-content .aux-line { display: block; } } .media-library-card { display: flex; flex-direction: column; align-items: center; border: 2px solid #eaeaea; border-radius: 0.5rem; overflow: hidden; height: 100%; } .media-library-card h3 { order: 3; font-weight: 400; font-size: 1rem; line-height: 1.625; font-weight: 700; width: 100%; text-align: left; margin: 0; padding: 1rem 1.5rem; } .media-library-card > div { order: 3; margin-top: -1rem; width: 100%; } .media-library-card p { order: 2; width: 100%; text-align: left; padding: 1rem 1.5rem; margin: 0; } .media-library-card p.details { text-transform: uppercase; font-size: 0.75rem; display: flex; margin-bottom: -1rem; } .media-library-card p.details span:not(:first-child) { padding-left: 0.5rem; } .media-library-card p.details span:not(:last-child) { padding-right: 0.5rem; border-right: 1px solid var(--kite-color-gray-30); } .media-library-card .img-holder { order: 1; width: 100%; height: 12rem; display: flex; align-items: center; border-bottom: 2px solid #eaeaea; overflow: hidden; position: relative; margin: 0; } .media-library-card .img-holder .gatsby-image-wrapper { width: 100%; height: 100%; overflow: hidden; } .media-library-card .img-holder.logo .gatsby-image-wrapper { margin: 0 25%; } .media-library-card .img-holder .play-icon { position: absolute; left: 50%; right: 50%; top: calc(50% - 1.5rem); height: 3rem; width: 3rem; border-radius: 3rem; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); background: rgba(255, 255, 255, 0.75); } .media-library-card .links { order: 4; width: 100%; text-align: left; padding: 1rem 1.5rem; display: flex; margin-top: -1rem; flex: 1 1 auto; align-items: flex-end; } .media-library-card .links a, .media-library-card .links button { text-decoration: none; height: 1.5rem; display: flex; align-items: center; } .media-library-card .links button { padding: 0; padding-right: 0.5rem; margin-right: 0.5rem; border: none; border-right: 1px solid var(--kite-color-gray-30); background: none; color: var(--kite-color-primary); cursor: pointer; font-weight: 400; } .media-library-video-player { position: relative; margin: 4rem; max-height: calc(100% - 8rem); max-width: calc(100% - 8rem); padding: 1rem 2rem; background: var(--kite-color-white); border-radius: 0.5rem; } .media-library-video-player header { display: flex; align-items: baseline; justify-content: space-between; width: 100%; } .media-library-video-player header > div { display: flex; align-items: baseline; margin-right: 1rem; } .media-library-video-player header h2 { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .media-library-video-player header h2 { font-size: 1.5rem; line-height: 1.25; } } .media-library-video-player header p { text-transform: uppercase; font-size: 0.75rem; display: flex; margin-left: 1rem; } .media-library-video-player header p span:not(:first-child) { padding-left: 0.5rem; } .media-library-video-player header p span:not(:last-child) { padding-right: 0.5rem; border-right: 1px solid var(--kite-color-gray-30); } .media-library-video-player header a { justify-self: flex-end; width: auto; } .media-library-video-player video { max-height: calc(100vh - 16rem); width: 100%; } .media-library-video-player .close-button { background: var(--kite-color-black); width: 2rem; height: 2rem; border-radius: 2rem; border: none; outline: none; color: var(--kite-color-white); display: flex; align-items: center; justify-content: center; position: absolute; top: -1rem; right: -1rem; cursor: pointer; } .media-library-video-player .close-button:focus-visible { outline: 2px solid var(--kite-color-primary); } @media only screen and (max-width: 52.5rem) { .media-library-video-player { margin: 1rem; padding: 0.5rem; max-height: calc(100% - 2rem); max-width: calc(100% - 2rem); } .media-library-video-player header { flex-direction: column; margin-bottom: 1rem; } } .paragraph__accordion { border: 1px solid var(--kite-color-gray-20); border-radius: 4px; margin-top: 2rem; } .paragraph__accordion h2 { padding: 1rem 0; margin: 0; } .paragraph__accordion ul { padding-left: 0; margin-bottom: 0; } .paragraph__accordion li { list-style: none; padding-left: 0; border-top: 1px solid var(--kite-color-gray-20); margin: 0; } .paragraph__accordion li .paragraph__accordion_header { display: flex; align-items: center; margin-bottom: 0; } .paragraph__accordion li .paragraph__accordion_header button { padding: 1rem 0; margin: 0; background: none; border: none; cursor: pointer; width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; } .paragraph__accordion li .paragraph__accordion_header button.bold { font-weight: 700; } .paragraph__accordion li div.paragraph__accordion_text { max-height: 0; transition: ease-out 0.5s; overflow: hidden; } .paragraph__accordion li div.paragraph__accordion_text p { font-weight: 400; font-size: 1rem; line-height: 1.625; } .paragraph__accordion li div.paragraph__accordion_text a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__accordion li div.paragraph__accordion_text a:hover, .paragraph__accordion li div.paragraph__accordion_text a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__accordion li div.paragraph__accordion_text.visible { max-height: 10rem; transition: ease-in 0.5s; } .articles-insights { padding: 0; margin: 0; } .articles-insights__eyebrow { color: #606a85; margin-bottom: 0.25rem; font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 60rem) { .articles-insights__eyebrow { font-size: 0.75rem; } } @media only screen and (max-width: 60rem) { .articles-insights__eyebrow { font-size: 0.875rem; } } .articles-insights__title { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 60rem) { .articles-insights__title { font-size: 1.25rem; line-height: 1.3; } } @media only screen and (max-width: 30rem) { .articles-insights__title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .articles-insights__text { word-wrap: break-word; /* Important for long words! */ margin: 0 0 0.625rem 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: 1rem; line-height: 1.625; } .articles-insights__cta { display: flex; align-items: center; padding: 0.5rem 0; margin: 0; font-weight: 500; gap: 0.25rem; font-size: 1rem; line-height: 1.625; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .articles-insights__cta:hover, .articles-insights__cta:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .leadership-articles { display: flex; flex-direction: column; gap: 1rem; } .leadership-articles__heading { margin: 0; font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 60rem) { .leadership-articles__heading { font-size: 1.75rem; line-height: 1.2857; } } .leadership-articles__article-list { padding: 0; margin: 0; list-style-type: none; display: flex; flex-direction: column; gap: 2rem; } .newsroom-layout .newsroom-content .article-image { width: 100%; margin: 2.5rem 0; } .newsroom-layout .newsroom-content .article-image .vertical-wrapper { width: min-content; margin: auto; } .newsroom-layout .newsroom-content .article-image .vertical { aspect-ratio: 3/4; width: 14.0625rem; } @media only screen and (min-width: 30rem) { .newsroom-layout .newsroom-content .article-image .vertical { width: 22.5rem; } } @media only screen and (min-width: 60rem) { .newsroom-layout .newsroom-content .article-image .vertical { width: 28.125rem; } } .newsroom-layout .newsroom-content .article-image .horizontal { aspect-ratio: 16/9; } .newsroom-layout .newsroom-content .article-image__caption-wrapper { display: flex; flex-direction: row; justify-content: space-between; margin-top: 0.625rem; padding-right: 0.75rem; gap: 0.75rem; } .newsroom-layout .newsroom-content .article-image__caption-spacer { visibility: hidden; flex: 1 1; } .newsroom-layout .newsroom-content .article-image__caption p { font-weight: 400; font-size: 0.875rem; color: var(--kite-color-gray-30); font-style: italic; line-height: 1.25rem; margin-bottom: 0; } .newsroom-layout .newsroom-content .article-image__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--kite-color-blue-20); cursor: pointer; } .newsroom-layout .newsroom-content figcaption { margin-top: 0.625rem; width: fit-content; } .pull-quote { display: flex; flex-direction: column; align-items: start; gap: 0.625rem; padding-top: 1.25rem; padding-bottom: 1.25rem; } @media only screen and (min-width: 37.5rem) { .pull-quote { flex-direction: row; align-items: center; gap: 2rem; } } @media only screen and (min-width: 37.5rem) { .pull-quote .gatsby-image-wrapper { width: 16rem; flex-shrink: 0; } } @media only screen and (min-width: 80rem) { .pull-quote .gatsby-image-wrapper { width: 24.0625rem; } } .pull-quote__text { padding: 2.5rem 0.625rem; } @media only screen and (min-width: 37.5rem) { .pull-quote__text { padding: 0; } } .pull-quote blockquote { padding-left: 2rem; margin: auto; } @media only screen and (min-width: 37.5rem) { .pull-quote blockquote { max-width: none; margin: 0; } } .pull-quote #content > p { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .pull-quote #content > p { font-size: 1.125rem; line-height: 1.3333333; } } .pull-quote #content > p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .pull-quote #content > p a:hover, .pull-quote #content > p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .pull-quote cite { display: flex; align-items: start; gap: 0.25rem; font-style: normal; color: var(--kite-color-gray-30); } .pull-quote cite .author-decorator { height: 0.875rem; width: 0.75rem; border-bottom: 1px solid gray; } .article-links { display: flex; flex-direction: column; gap: 0.75rem; } .article-links__link { display: flex; align-items: center; text-decoration: none; gap: 0.5rem; font-weight: 500; } .paragraph__card_trio_card { list-style: none; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; border-radius: 4px; padding: 1rem; overflow: hidden; border: 1px solid var(--kite-color-gray-20); cursor: pointer; position: relative; background: var(--kite-color-white); transition: box-shadow 0.5s; } .paragraph__card_trio_card:hover { box-shadow: 0 1px 5px 0 rgba(99, 115, 138, 0.2), 0 2px 2px 0 rgba(99, 115, 138, 0.14), 0 3px 1px -2px rgba(99, 115, 138, 0.12); } .paragraph__card_trio_card:hover .news { color: var(--kite-color-blue-30); } .paragraph__card_trio_card:focus, .paragraph__card_trio_card:focus-within { outline: 2px solid var(--kite-color-primary); } .paragraph__card_trio_card:focus .news, .paragraph__card_trio_card:focus-within .news { color: var(--kite-color-blue-30); } .paragraph__card_trio_card .gatsby-image-wrapper { order: 0; margin: -1rem; margin-bottom: 1rem; height: 16rem; } .paragraph__card_trio_card .gatsby-image-wrapper img { height: 100%; width: 100%; object-fit: cover; object-position: top; } @media only screen and (min-width: 52.5rem) { .paragraph__card_trio_card .gatsby-image-wrapper { aspect-ratio: 4/3; height: auto; } } .paragraph__card_trio_card h3, .paragraph__card_trio_card small { order: 1; } .paragraph__card_trio_card p, .paragraph__card_trio_card div.desc { order: 2; flex: 1 0 auto; margin-bottom: 0; } .paragraph__card_trio_card a { text-decoration: none; font-weight: 500; order: 3; line-break: anywhere; } .paragraph__card_trio_card a::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } .paragraph__card_trio_card a.news { /** We'll be hiding the link text from the screen, without removing it for screen readers. This is a better practice than wrapping the whole card in an anchor tag. **/ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; outline: none; } .paragraph__card_trio_card .typestack-eyebrow { color: var(--kite-color-gray-30); } .paragraph__card_trio_card .news { display: -webkit-box; -webkit-box-orient: vertical; margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; transition: color 0.5s; } .paragraph__card_trio_card h3.news { -webkit-line-clamp: 4; margin-bottom: 1rem; } .paragraph__card_trio_card h3.news.with-img { -webkit-line-clamp: 3; margin-bottom: 0; } .paragraph__card_trio_card h3.news.with-date { margin-bottom: 1rem; } .paragraph__card_trio_card.horizontal { flex-direction: row; align-items: center; } .paragraph__card_trio_card.horizontal .gatsby-image-wrapper { order: 1; margin-bottom: -1rem; width: 50%; max-height: 250px; margin-right: 1rem; min-width: 12rem; } .paragraph__card_trio_card.horizontal .text-wrapper { order: 2; display: flex; flex-direction: column; } .paragraph__card_trio_card .desc-date { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; color: var(--kite-color-gray-30); font-weight: 400; font-size: 1rem; line-height: 1.625; } .paragraph__card_trio_card .desc { overflow: hidden; } .paragraph__card_trio_card .desc > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; text-overflow: ellipsis; overflow: hidden; } .paragraph__card_trio_card .desc > p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__card_trio_card .desc > p a:hover, .paragraph__card_trio_card .desc > p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__card_trio_card .desc, .paragraph__card_trio_card div.desc, .paragraph__card_trio_card .desc-date { margin-bottom: 1rem; } .paragraph__card_trio_card.large { background-color: var(--kite-color-dark-blue-10); color: var(--kite-color-white); padding: 1rem 1.5rem; } .paragraph__card_trio_card.large .desc, .paragraph__card_trio_card.large .desc-date { color: var(--kite-color-white); font-weight: 400; font-size: 1rem; line-height: 1.6rem; } .paragraph__card_trio_card.large .gatsby-image-wrapper { height: 100vh; max-height: 486px; margin: -2rem -4rem 2rem -4rem; } .paragraph__card_trio_card.large h3.news { margin-bottom: 0; } .paragraph__card_trio_card.large:hover .news, .paragraph__card_trio_card.large:focus .news, .paragraph__card_trio_card.large:focus-within .news { color: var(--kite-color-white); } .paragraph__card_trio_card.large a { color: var(--kite-color-white); } @media only screen and (min-width: 52.5rem) { .paragraph__card_trio_card.large { padding: 2rem 4rem; } .paragraph__card_trio_card.large .gatsby-image-wrapper { aspect-ratio: auto; } } .newsroom-layout aside { margin: 0 -1rem; padding: 0 1rem; background-color: var(--kite-color-gray-10); padding-bottom: 3rem; padding-top: 2rem; } @media only screen and (min-width: 52.5rem) { .newsroom-layout aside { margin: 0; padding-right: 0; padding-left: 2rem; max-width: 24rem; width: 35%; min-width: 10rem; } } .newsroom-layout aside .eyebrow { font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .newsroom-layout aside .eyebrow { font-size: 0.75rem; } } .newsroom-layout aside .related { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .newsroom-layout aside .related { font-size: 1.25rem; line-height: 1.3; } } .newsroom-layout aside .related { font-weight: 700; } .newsroom-layout aside ul { padding-left: 0; } .newsroom-layout aside ul li { margin-bottom: 2rem; } @media only screen and (min-width: 52.5rem) { .newsroom-layout aside ul li .gatsby-image-wrapper { aspect-ratio: 4/3; height: auto; } } .social-icons { padding-left: 0; display: flex; align-items: center; } .social-icons.m-only { border-bottom: 1px solid #ccc; } .social-icons li { list-style: none; padding-left: 0; margin-right: 2rem; position: relative; } .social-icons li a > span:not(.kite-icon) { clip: rect(1px 1px 1px 1px); /* IE 6/7 */ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; opacity: 0; width: 1px; } .social-icons li .kite-icon { color: var(--kite-color-black); } .social-icons li button { border: none; background: none; cursor: pointer; padding: 0; } .social-icons li button > span:not(.kite-icon) { clip: rect(1px 1px 1px 1px); /* IE 6/7 */ clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; opacity: 0; width: 1px; } .social-icons li .tooltip { position: absolute; background: var(--kite-color-black); color: var(--kite-color-white); padding: 0.25rem; border-radius: 0.25rem; white-space: nowrap; top: 100%; left: -100%; box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1); font-weight: 400; font-size: 1rem; line-height: 1.625; } .article-sources:not(.kite-container) { padding: 0.625rem 0 1.25rem; } .article-sources.kite-container { margin-bottom: 3rem; } .article-sources h3 { font-weight: 400; font-size: 0.875rem; margin: 0; } .article-sources ol { counter-reset: list; list-style-type: none; padding: 0; margin: 0; } .article-sources ol li { display: block; flex-wrap: nowrap; font-weight: 400; font-size: 0.875rem; padding: 0; margin: 0; position: static; white-space: break-spaces; } .article-sources ol li div { display: flex; } .article-sources ol li div span:first-of-type { margin-right: 0.5rem; } .article-sources ol li:target::before { content: ""; display: block; height: 12.813rem; margin-top: -12.813rem; } @media only screen and (min-width: 52.5rem) { .article-sources ol li:target::before { height: 15.313rem; margin-top: -15.313rem; } } .paragraph__button-list { margin-top: 4rem; } .paragraph__button-list ul { padding-left: 0; display: flex; flex-wrap: wrap; justify-content: stretch; width: 100%; margin-top: 2rem; } .paragraph__button-list ul li { padding-left: 0; list-style: none; flex: 1 1 100%; } @media only screen and (min-width: 52.5rem) { .paragraph__button-list ul li { flex-grow: 1; flex-shrink: 1; flex-basis: calc(33% - 3rem); } .paragraph__button-list ul li:nth-child(2) { margin: 0 1rem; } } .paragraph__button-list ul li a { text-decoration: none; display: flex; justify-content: center; align-items: center; } .paragraph__callout { margin-top: 8rem; position: relative; } @media only screen and (max-width: 60rem) { .paragraph__callout { margin-top: 4rem; } } .paragraph__callout .kite-container { padding-top: 1rem; padding-bottom: 1rem; } .paragraph__callout .kite-container .kite-grid { align-items: center; } .paragraph__callout .kite-container .callout__image { order: 1; } .paragraph__callout .kite-container .content { order: 2; margin-top: 1rem; } .paragraph__callout .kite-container .content .text img { width: 100%; } .paragraph__callout .kite-container .content h2 { display: flex; flex-direction: column; } .paragraph__callout .kite-container .content h2.swap { flex-direction: column-reverse; } .paragraph__callout .kite-container .content h2.swap small { margin-top: 1rem; margin-bottom: 1.5rem; } .paragraph__callout .kite-container .content a.kite-button { padding-left: 4rem; padding-right: 4rem; min-width: 13.125rem; margin-top: 1.75rem; margin-left: 0; margin-right: 1rem; } @media only screen and (min-width: 60rem) { .paragraph__callout .kite-container .content a.kite-button { margin-top: 2.5rem; } } .paragraph__callout .kite-container .content p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__callout .kite-container .content p a:hover, .paragraph__callout .kite-container .content p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__callout .kite-container::before { content: ""; display: none; position: absolute; top: -3rem; height: 7.5rem; width: 11.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon fill='%230271eb' points='6,4 0,0 0,8'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 2rem 2rem; z-index: -10; } .paragraph__callout .kite-container.left::before { left: calc((100vw - 1280px) / 2 - 2rem); } .paragraph__callout .kite-container.right::before { right: calc((100vw - 1280px) / 2 - 4rem); } @media only screen and (min-width: 52.5rem) { .paragraph__callout .kite-container { padding-top: 4rem; padding-bottom: 4rem; } .paragraph__callout .kite-container .content { margin-top: 0; padding-top: 0; } .paragraph__callout .kite-container.left { padding-left: 0; margin-left: 0; } .paragraph__callout .kite-container.left .content { padding-left: 2rem; } .paragraph__callout .kite-container.right { padding-right: 0; margin-right: 0; } .paragraph__callout .kite-container.right .content { order: 1; padding-right: 2rem; } .paragraph__callout .kite-container.right .callout__image { order: 2; } .paragraph__callout .kite-container .callout__image.top { align-self: flex-start; } .paragraph__callout .kite-container .callout__image.middle { align-self: center; } .paragraph__callout .kite-container .callout__image.bottom { align-self: flex-end; } } @media only screen and (min-width: 80rem) { .paragraph__callout .kite-container { max-width: 106rem; } .paragraph__callout .kite-container::before { width: 16rem; display: block; } .paragraph__callout .kite-container.left { margin-left: auto; } .paragraph__callout .kite-container.left .content { padding-right: calc((106rem - 1280px) / 2 + 0.625rem); padding-left: 5%; } .paragraph__callout .kite-container.right { margin-right: auto; } .paragraph__callout .kite-container.right .content { padding-left: calc((106rem - 1280px) / 2 + 0.625rem); padding-right: 5%; } } .paragraph__callout .kite-container.has-video .content { max-width: 720px; } .paragraph__callout::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; } .paragraph__callout.gray::after { background: var(--kite-color-gray-10); } .paragraph__callout.gray p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__callout.gray p a:hover, .paragraph__callout.gray p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__callout.dark-blue::after { background: var(--kite-color-dark-blue-10); } .paragraph__callout.dark-blue .kite-container { color: #fff; } .paragraph__callout.dark-blue .kite-container p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__callout.dark-blue .kite-container p a:hover, .paragraph__callout.dark-blue .kite-container p a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .paragraph__callout.dark_blue::after { background: var(--kite-color-dark-blue-10); } .paragraph__callout.dark_blue .kite-container { color: #fff; } .paragraph__callout.dark_blue .kite-container p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__callout.dark_blue .kite-container p a:hover, .paragraph__callout.dark_blue .kite-container p a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .paragraph__callout.light-blue::after, .paragraph__callout.light_blue::after { background: var(--kite-color-primary); } .paragraph__callout.light-blue p a, .paragraph__callout.light_blue p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__callout.light-blue p a:hover, .paragraph__callout.light-blue p a:visited:hover, .paragraph__callout.light_blue p a:hover, .paragraph__callout.light_blue p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__callout.policy-overview { margin-top: 2rem; } @media only screen and (min-width: 52.5rem) { .paragraph__callout.policy-overview { margin-top: 0; } } .paragraph__callout.policy-overview.right { overflow: hidden; } .paragraph__callout.policy-overview.gray::after { background: none; } .paragraph__callout.policy-overview .kite-container::before { display: none; } .paragraph__callout.policy-overview .kite-container .callout__image { margin-left: 0; margin-right: 0; } @media only screen and (min-width: 52.5rem) { .paragraph__callout.policy-overview .kite-container .callout__image { width: 33.3333%; } } .paragraph__callout.policy-overview .kite-container.left .callout__image { box-shadow: -1rem 1.25rem 0 0.25rem var(--kite-color-blue-30); } .paragraph__callout.policy-overview .kite-container.right .callout__image { box-shadow: 1rem 1.25rem 0 0.25rem var(--kite-color-dark-blue-10); } @media only screen and (min-width: 80rem) { .paragraph__callout.left::after { left: calc((100vw - 1280px) / 2 + 1rem); } .paragraph__callout.right::after { right: calc((100vw - 1280px) / 2 + 1rem); } } .paragraph__call_to_action { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; background: var(--kite-color-dark-blue-10); color: var(--kite-color-white); padding: 4rem; max-width: 960px; margin-left: 2rem; margin-right: 2rem; } @media only screen and (min-width: 60rem) { .paragraph__call_to_action { margin-left: auto; margin-right: auto; } } .paragraph__call_to_action h2 { max-width: calc(960px - 16rem); text-align: center; margin-bottom: 2rem; } .paragraph__call_to_action .text { max-width: calc(960px - 16rem); text-align: center; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .paragraph__call_to_action .text { font-size: 1rem; line-height: 1.625; } } .paragraph__call_to_action .text p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__call_to_action .text p a:hover, .paragraph__call_to_action .text p a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .paragraph__card_trio { margin-top: 4rem; } @media only screen and (min-width: 37.5rem) { .paragraph__card_trio { margin-top: 3rem; } } @media only screen and (min-width: 52.5rem) { .paragraph__card_trio { margin-top: 4rem; } } .paragraph__card_trio h2 { margin-bottom: 1rem; } .paragraph__card_trio ul { display: flex; flex-direction: column; padding-left: 0; } .paragraph__card_trio ul li:not(:first-child) { margin-top: 1rem; } @media only screen and (min-width: 52.5rem) { .paragraph__card_trio ul { flex-direction: row; } .paragraph__card_trio ul li { flex: 0 1 33.3333%; min-height: 100%; } .paragraph__card_trio ul li.paragraph__card_trio_card { margin-top: 0; } .paragraph__card_trio ul li:not(:last-child) { margin-right: 1rem; } } .paragraph__ceo_letter { margin-top: 4rem; position: relative; } .paragraph__ceo_letter h2 { background-color: var(--kite-color-dark-blue-10); color: var(--kite-color-white); padding: 2rem; margin: 0 0 2rem 0; } .paragraph__ceo_letter .gatsby-image-wrapper { float: right; width: 50vw; margin: 0 0 1rem 1.25rem; } .paragraph__ceo_letter p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__ceo_letter p a:hover, .paragraph__ceo_letter p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } @media only screen and (min-width: 52.5rem) { .paragraph__ceo_letter h2 { margin: 0 0 4rem 0; } .paragraph__ceo_letter .gatsby-image-wrapper { max-width: 20rem; width: 20rem; margin: 0 0 1rem 2rem; float: right; } .paragraph__ceo_letter::before { content: ""; position: absolute; top: -3rem; height: 7.5rem; width: 11.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon fill='%230271eb' points='6,4 0,0 0,8'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 2rem 2rem; z-index: -10; left: 50%; } } @media only screen and (min-width: 52.5rem) and (min-width: 80rem) { .paragraph__ceo_letter::before { width: 15rem; } } @keyframes expandCollapse { 0% { opacity: 0; max-height: 0; } 99% { visibility: hidden; opacity: 0.9; } 100% { visibility: visible; opacity: 1; max-height: 4rem; } } .paragraph__collapsible_table { margin-top: 2rem; } .paragraph__collapsible_table h2 button, .paragraph__collapsible_table .subheader button { background: none; border: none; padding: 0; cursor: pointer; } .paragraph__collapsible_table h2 button .kite-icon, .paragraph__collapsible_table .subheader button .kite-icon { transform: rotate(0deg); transition: transform 0.12s linear; } .paragraph__collapsible_table h2 { margin: 0; } .paragraph__collapsible_table h2 button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 0.75rem; } .paragraph__collapsible_table h2 button span:last-of-type { text-align: right; } .paragraph__collapsible_table h2 button span:first-of-type { text-align: left; } .paragraph__collapsible_table .subheader { margin: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--kite-color-yellow-20); } .paragraph__collapsible_table .subheader button { display: flex; align-items: center; padding-bottom: 1rem; } .paragraph__collapsible_table .subheader button .kite-icon { margin-left: 1rem; } .paragraph__collapsible_table .subheader, .paragraph__collapsible_table .subheader button { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .paragraph__collapsible_table .subheader, .paragraph__collapsible_table .subheader button { font-size: 1.125rem; line-height: 1.3333333; } } .paragraph__collapsible_table .subheader, .paragraph__collapsible_table .subheader button { font-weight: 400; } .paragraph__collapsible_table.collapsed .subheader button .kite-icon { transform: rotate(-180deg); } .paragraph__collapsible_table.collapsed ul { visibility: hidden; } .paragraph__collapsible_table.collapsed ul li { max-height: 0; opacity: 0; } .paragraph__collapsible_table ul { padding: 0; animation: expandCollapse 0.12s linear; width: 100%; } .paragraph__collapsible_table ul li { max-height: 10rem; transition: opacity 0.12s linear, max-height 0.12s linear; } .paragraph__collapsible_table.secondary .table-heading { border-bottom: 2px solid var(--kite-color-yellow-20); padding-bottom: 1rem; } .paragraph__collapsible_table.secondary .table-subheading { display: flex; flex-wrap: nowrap; justify-content: space-between; border-bottom: 1px solid var(--kite-color-gray-20); padding: 0.5rem 1rem 0.375rem 1rem; } .paragraph__collapsible_table.secondary .table-subheading span:last-of-type { text-align: right; } .paragraph__collapsible_table.secondary > ul { margin-top: 2rem; } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(odd) { background-color: var(--kite-color-white); } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(odd) > ul > li { position: relative; } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(odd) > ul > li:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(odd) > ul > li:nth-of-type(odd):last-of-type:after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 0.25rem; background: var(--kite-color-white); } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(odd) > ul > li:nth-of-type(even) { background-color: var(--kite-color-white); } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(even) > ul > li:nth-of-type(odd) { background-color: var(--kite-color-white); } .paragraph__collapsible_table.secondary > ul > li:nth-of-type(even) > ul > li:nth-of-type(even) { background-color: var(--kite-color-gray-10); } @media only screen and (min-width: 52.5rem) { .paragraph__collapsible_table .table-subheading span:last-of-type { margin-right: 6.813rem; } } .paragraph__collapsible_table_row { list-style: none; padding-left: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; max-height: 20rem; margin: 0; overflow: hidden; transition: max-height 0.35s; } .paragraph__collapsible_table_row.nested-content { flex-direction: column; max-height: none; } .paragraph__collapsible_table_row.nested-content.expanded > ul > li { padding: 0.563rem 1rem 0.625rem 1.5rem; max-height: 10rem; } .paragraph__collapsible_table_row.nested-content > div > span:last-of-type { margin-right: 0; } .paragraph__collapsible_table_row.nested-content > div > span:last-of-type .kite-button { margin-left: 0.625rem; } .paragraph__collapsible_table_row.nested-content > span { padding-top: 0; } .paragraph__collapsible_table_row.nested-content .child { padding: 0; max-height: 0; } .paragraph__collapsible_table_row.nested-content .child .main-text { margin-left: 0; padding-top: 0; } .paragraph__collapsible_table_row.nested-content .child a > span { padding-top: 0; } .paragraph__collapsible_table_row.nested-content .child a > span span:last-of-type:not(.kite-icon__inner) { margin-left: 0.5rem; padding-top: 0; } .paragraph__collapsible_table_row.nested-content > ul { margin-bottom: 0; } .paragraph__collapsible_table_row.nested-content > ul > li { max-height: 0; padding: 0 2.5rem 0 0; transition: max-height 0.12s linear; font-size: 1rem; } .paragraph__collapsible_table_row.nested-content > ul > li:nth-of-type(odd) { background-color: var(--kite-color-white); } .paragraph__collapsible_table_row.nested-content > ul > li:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .paragraph__collapsible_table_row.nested-content a > span:last-of-type { font-size: 1em; } .paragraph__collapsible_table_row a, .paragraph__collapsible_table_row > div { display: flex; align-items: center; justify-content: space-between; width: 100%; text-decoration: none; } .paragraph__collapsible_table_row a > span:first-of-type, .paragraph__collapsible_table_row > div > span:first-of-type { color: var(--kite-color-black); } .paragraph__collapsible_table_row a > span:first-of-type.link, .paragraph__collapsible_table_row > div > span:first-of-type.link { color: unset; } .paragraph__collapsible_table_row a > span, .paragraph__collapsible_table_row > div > span { display: flex; align-items: center; } .paragraph__collapsible_table_row a > span .kite-icon, .paragraph__collapsible_table_row > div > span .kite-icon { color: var(--kite-color-blue-20); margin-left: 1rem; } .paragraph__collapsible_table_row a > span:last-of-type, .paragraph__collapsible_table_row > div > span:last-of-type { font-size: 1rem; margin-left: 2rem; text-align: right; white-space: nowrap; } .paragraph__collapsible_table_row a:hover span:last-of-type, .paragraph__collapsible_table_row a:focus span:last-of-type, .paragraph__collapsible_table_row a:focus-within span:last-of-type, .paragraph__collapsible_table_row > div:hover span:last-of-type, .paragraph__collapsible_table_row > div:focus span:last-of-type, .paragraph__collapsible_table_row > div:focus-within span:last-of-type { text-decoration: underline; } .paragraph__collapsible_table_row a .kite-button, .paragraph__collapsible_table_row > div .kite-button { height: auto; padding: 0; margin-left: 1.5rem; transform: rotate(0deg); transition: transform 0.24s linear; } .paragraph__collapsible_table_row > a { width: auto; } .paragraph__collapsible_table_row > div > span:last-of-type { margin-right: 1.75rem; } .paragraph__collapsible_table_row > span:last-of-type { font-size: 1rem; padding-right: 1.75rem; margin-left: 2rem; text-align: right; white-space: nowrap; } .paragraph__collapsible_table_row > span, .paragraph__collapsible_table_row div > span, .paragraph__collapsible_table_row a > span { padding-top: 1rem; } @media only screen and (min-width: 52.5rem) { .paragraph__collapsible_table_row { padding: 0 1rem; } .paragraph__collapsible_table_row.nested-content.expanded > ul > li { padding: 0.563rem 2.25rem 0.625rem 2.875rem; } .paragraph__collapsible_table_row > div > span:last-of-type { margin-right: 1.75rem; } } .secondary .paragraph__collapsible_table_row { padding: 0; } .secondary .paragraph__collapsible_table_row > div { padding: 0.313rem 1rem 0.563rem; } .secondary .paragraph__collapsible_table_row > div span { padding-top: 0; } .secondary .paragraph__collapsible_table_row > div .kite-button { height: auto; padding: 0; margin-left: 1.5rem; transform: rotate(0deg); transition: transform 0.24s linear; } .secondary .paragraph__collapsible_table_row.child { flex-wrap: nowrap; max-height: 0; overflow: hidden; justify-content: space-between; margin: 0; padding: 0; width: 100%; display: flex; align-items: center; text-decoration: none; } .secondary .paragraph__collapsible_table_row.child span { padding-top: 0; } .secondary .paragraph__collapsible_table_row.child a { width: auto; white-space: nowrap; } .secondary .paragraph__collapsible_table_row.child a > span:first-of-type { color: var(--kite-color-blue-20); font-weight: 500; } .secondary .paragraph__collapsible_table_row.child a > span .kite-icon { margin-left: 0.5rem; } .secondary .paragraph__collapsible_table_row a > span:last-of-type, .secondary .paragraph__collapsible_table_row div > span:last-of-type { font-size: 1em; } .secondary .paragraph__collapsible_table_row > div:focus-within span:last-of-type, .secondary .paragraph__collapsible_table_row > div:focus span:last-of-type, .secondary .paragraph__collapsible_table_row > div:hover span:last-of-type { text-decoration: none; } .secondary .paragraph__collapsible_table_row > ul { position: relative; margin: 0; overflow: hidden; width: 100%; left: 0; } .secondary .paragraph__collapsible_table_row > ul li { opacity: 0; } .secondary .paragraph__collapsible_table_row > ul li > span { padding-right: 0; white-space: initial; text-align: left; } .secondary .paragraph__collapsible_table_row > ul li > span.main-text { margin-left: 0; } .secondary .paragraph__collapsible_table_row.expanded > ul { margin: auto; } .secondary .paragraph__collapsible_table_row.expanded > ul > li { opacity: 1; max-height: 10rem; padding: 0.563rem 1rem 0.625rem 1.875rem; } .secondary .paragraph__collapsible_table_row.expanded > ul > li > span { line-height: 1.2; } @media only screen and (min-width: 52.5rem) { .secondary .paragraph__collapsible_table_row > div { position: relative; } .secondary .paragraph__collapsible_table_row > div > span:last-of-type { margin-left: 0; margin-right: 0; padding-right: 6.563rem; } .secondary .paragraph__collapsible_table_row > div > span .kite-button { position: absolute; right: 1.125rem; margin-left: 0; width: auto; } .secondary .paragraph__collapsible_table_row > div > a > span:last-of-type { margin-right: 0; padding-right: 6.563rem; } .secondary .paragraph__collapsible_table_row > div > a > span:last-of-type .kite-icon { position: absolute; right: 1.125rem; margin-left: 0; height: 100%; } .secondary .paragraph__collapsible_table_row.expanded > ul > li { padding: 0.563rem 7.563rem 0.625rem 2.875rem; } .secondary .paragraph__collapsible_table_row.expanded > ul > li > span { line-height: 1.625rem; } } .paragraph__disclaimer { margin-top: 2rem; } .paragraph__disclaimer p { font-size: 0.75rem; } .paragraph__disclaimer p:first-child { border-top: 3px solid var(--kite-color-blue-20); padding-top: 1rem; } .paragraph__disclaimer p:last-child { margin-bottom: 0; border-bottom: 3px solid var(--kite-color-blue-20); padding-bottom: 1rem; } .paragraph__disclaimer a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__disclaimer a:hover, .paragraph__disclaimer a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__featured-article { margin-top: 4rem; } .paragraph__featured-article .kite-cell:first-of-type { order: 1; } @media only screen and (min-width: 52.5rem) { .paragraph__featured-article .kite-cell:first-of-type { order: 0; width: 50%; } } .paragraph__featured-article .kite-grid { align-items: center; } .paragraph__featured-article a.kite-btn { padding-left: 4rem; padding-right: 4rem; min-width: 13.125rem; margin-top: 1.75rem; margin-left: 0; margin-right: 1rem; } @media only screen and (min-width: 60rem) { .paragraph__featured-article a.kite-btn { margin-top: 2.5rem; } } .paragraph__featured-article .text p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__featured-article .text p a:hover, .paragraph__featured-article .text p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__generic_content { margin-top: 2rem; } @media only screen and (min-width: 52.5rem) { .paragraph__generic_content.skinny > * { width: 70%; } } .paragraph__generic_content .large, .paragraph__generic_content .large p { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .paragraph__generic_content .large, .paragraph__generic_content .large p { font-size: 1.125rem; line-height: 1.3333333; } } .paragraph__generic_content .large, .paragraph__generic_content .large p { font-weight: 400; } .paragraph__generic_content .standalone { max-width: 52rem; } .paragraph__generic_content.bg-blue-30, .paragraph__generic_content.bg-dark-blue-10, .paragraph__generic_content.bg-transparent { padding: 4rem; } .paragraph__generic_content.bg-blue-30 p:last-of-type, .paragraph__generic_content.bg-dark-blue-10 p:last-of-type, .paragraph__generic_content.bg-transparent p:last-of-type { margin-bottom: 0; } .paragraph__generic_content.bg-blue-30 h2, .paragraph__generic_content.bg-dark-blue-10 h2, .paragraph__generic_content.bg-transparent h2 { padding-bottom: 2rem; } .paragraph__generic_content.bg-blue-30 { background: var(--kite-color-blue-30); color: var(--kite-color-white); } .paragraph__generic_content.bg-dark-blue-10 { background: var(--kite-color-dark-blue-10); color: var(--kite-color-white); } .paragraph__generic_content p a:not(.kite-button) { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__generic_content p a:not(.kite-button):hover, .paragraph__generic_content p a:not(.kite-button):visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .generic__bg { background: var(--kite-color-blue-30); color: var(--kite-color-white); padding-top: 2rem; padding-bottom: 4rem; margin-top: 4rem; } .generic__bg h2 { width: 100%; text-align: center; font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .generic__bg h2 { font-size: 2.25rem; line-height: 1.27778; } } .section-header { display: flex; } .section-header__eyebrow { text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; color: #606a85; display: flex; } @media only screen and (max-width: 37.5rem) { .section-header__eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .section-header__eyebrow--left { justify-content: left; } .section-header__eyebrow--center { justify-content: center; } .section-header__eyebrow--right { justify-content: right; } .section-header__title { margin-bottom: 0; } .section-header__title--title-2 { font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .section-header__title--title-2 { font-size: 2.25rem; line-height: 1.27778; } } .section-header__title--title-3 { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .section-header__title--title-3 { font-size: 1.75rem; line-height: 1.2857; } } .section-header__title--left { text-align: left; } .section-header__title--center { text-align: center; } .section-header__title--right { text-align: right; } .section-header__title > small { margin-bottom: 0; } .section-header--left { justify-content: left; } .section-header--center { justify-content: center; } .section-header--right { justify-content: right; } .four-card-color-block { display: flex; flex-direction: column; justify-content: center; margin-top: 4rem; padding: 5rem 1rem; } .four-card-color-block.dark { --four-card-bg: var(--kite-color-dark-blue-20); --four-card-eyebrow: var(--kite-color-gray-25); --four-card-text: var(--kite-color-white); background-color: var(--four-card-bg); color: var(--four-card-text); } .four-card-color-block.dark .typestack-eyebrow { color: var(--four-card-eyebrow); } .four-card-color-block.dark a { color: var(--kite-color-white); } .four-card-color-block h2, .four-card-color-block__text, .four-card-color-block .typestack-eyebrow { text-align: center; margin: 0; } .four-card-color-block .kite-container { padding: 0; } .four-card-color-block .four-card-header { flex-direction: column; } .four-card-color-block .four-card-header__text { margin-top: 1.25rem; } .four-card-color-block .four-card-header__text p { text-align: center; margin-bottom: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .four-card-color-block .four-card-header__text p { font-size: 1.125rem; line-height: 1.625; } } .four-card-color-block .four-card-header__cta { display: flex; justify-content: center; margin-top: 2.5rem; } .four-card-color-block .four-card-header__cta .kite-icon { margin-left: 0.5rem; } .four-card-color-block .cards-wrapper { display: flex; flex-direction: column; row-gap: 2.5rem; list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; } .four-card-color-block .cards-wrapper:not(:first-child) { margin-top: 3.75rem; } .four-card-color-block .cards-wrapper .four-card-item { display: flex; flex-direction: column; gap: 1rem; padding-left: 0; margin-bottom: 0; } .four-card-color-block .cards-wrapper .four-card-item__image { aspect-ratio: 16/9; border-radius: 0.5rem; } .four-card-color-block .cards-wrapper .four-card-item__title { margin-bottom: 0; } .four-card-color-block .cards-wrapper .four-card-item__copy p { margin-bottom: 0; font-weight: 400; font-size: 1rem; line-height: 1.625; } @media only screen and (min-width: 60rem) { .four-card-color-block { flex-direction: row; padding: 5rem 6.25rem; } .four-card-color-block .cards-wrapper { flex-direction: row; flex-wrap: wrap; column-gap: 2.5rem; row-gap: 2.5rem; } .four-card-color-block .cards-wrapper .four-card-item { flex: 1 1; flex-basis: calc(50% - 2.5rem); } } @media (min-width: 1440px) { .four-card-color-block { flex-direction: row; padding: 6.25rem 5rem; } .four-card-color-block .kite-container { margin-right: 0; margin-left: 0; padding: 0 var(--kite-grid-lg-margins); } .four-card-color-block .cards-wrapper { flex-wrap: nowrap; row-gap: 0; } .four-card-color-block .cards-wrapper .four-card-item { flex-basis: 17.375rem; } } .hero-carousel { display: block; position: relative; width: 100vw; background: rgb(0, 16, 25); } .hero-carousel .carousel-slides { display: flex; flex-direction: row; position: relative; flex-wrap: nowrap; overflow: hidden; height: 100vh; min-height: 100vh; width: 100vw; transition: height 0.24s ease-out; } .hero-carousel .carousel-slides .slide-container { position: absolute; padding: 0 0 1rem 0; top: 0; flex: 1 0 auto; width: 100vw; min-height: 100vh; transform: translateX(0%); z-index: -1; opacity: 0; transition: transform 0.35s ease-out, opacity 0.35s linear; } .hero-carousel .carousel-slides .slide-container.left { opacity: 0; transition: transform 0.35s ease-out, opacity 0.35s lineaer; } .hero-carousel .carousel-slides .slide-container.left.previous { opacity: 0; z-index: 0; transform: translateX(-100%); } .hero-carousel .carousel-slides .slide-container.left.next { opacity: 0; z-index: 0; transform: translateX(100%); } .hero-carousel .carousel-slides .slide-container.left.active { transform: translateX(0%); opacity: 1; z-index: 1; transition: transform 0.35s ease-out, opacity 0.35s linear; } .hero-carousel .carousel-slides .slide-container.right { opacity: 0; transition: transform 0.35s ease-out, opacity 0.35s linear; } .hero-carousel .carousel-slides .slide-container.right.previous { transform: translateX(-100%); z-index: 0; } .hero-carousel .carousel-slides .slide-container.right.next { opacity: 0; z-index: 0; transform: translateX(100%); } .hero-carousel .carousel-slides .slide-container.right.active { z-index: 1; opacity: 1; transform: translateX(0%); transition: transform 0.35s ease-out, opacity 0.25s linear; } .hero-carousel .carousel-slides .slide-container .image-content { position: relative; height: calc(100vh - 7rem); } .hero-carousel .carousel-slides .slide-container .gatsby-image-wrapper { height: 100%; width: 100%; } .hero-carousel .carousel-slides .slide-container .slide-titles { position: absolute; top: 0; left: 0; right: 0; padding: 0 1rem 6rem 1rem; display: flex; flex-direction: column; justify-content: flex-end; color: var(--kite-color-white); width: 100%; margin: 0 auto; height: 100%; background-image: linear-gradient(to bottom, rgba(0, 16, 25, 0) 34%, rgba(0, 16, 25, 0.7) 69%, rgba(0, 16, 25, 0.9) 83%, #001019); } .hero-carousel .carousel-slides .slide-container .slide-titles .titles-wrapper { margin: 0 auto 0 0; width: 100%; max-width: 72.188rem; } .hero-carousel .carousel-slides .slide-container .slide-titles .typestack-title-1, .hero-carousel .carousel-slides .slide-container .slide-titles .typestack-eyebrow { color: var(--kite-color-white); z-index: 1; margin-bottom: 0; } .hero-carousel .carousel-slides .slide-container .slide-content { position: relative; padding: 0 1rem 1rem 1rem; margin: 0 auto; max-width: 72.188rem; background: var(--kite-color-dark-blue-30); color: var(--kite-color-white); } .hero-carousel .carousel-slides .slide-container .slide-content p:last-of-type { margin-bottom: 0; } .hero-carousel .carousel-slides .slide-container .slide-content p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .hero-carousel .carousel-slides .slide-container .slide-content p a:hover, .hero-carousel .carousel-slides .slide-container .slide-content p a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .hero-carousel .carousel-slides .slide-container .slide-ctas { display: flex; flex-direction: column; gap: 1rem; width: 100%; margin: 0 auto; max-width: 72.188rem; padding: 0 1rem 1rem 1rem; } .hero-carousel .carousel-slides .slide-container .slide-ctas .typestack-body-1 { text-decoration: none; text-transform: capitalize; color: #31a2ff; } @media (min-width: 46.875rem) { .hero-carousel .carousel-slides .slide-container .image-content { height: calc(100vh - 7.062rem); } .hero-carousel .carousel-slides .slide-container .slide-titles { padding: 0 1rem 6rem 1rem; } } @media only screen and (min-width: 52.5rem) { .hero-carousel { padding-bottom: 4rem; } .hero-carousel .carousel-slides .slide-container .image-content { height: calc(100vh - 8.625rem); } .hero-carousel .carousel-slides .slide-container .slide-titles { padding: 0 1rem 8rem 1rem; } .hero-carousel .carousel-slides .slide-container .slide-content { margin: 0 auto; padding: 0 0 1rem 0; width: calc(100% - 2rem); } .hero-carousel .carousel-slides .slide-container .slide-ctas { padding: 0; } } @media (min-width: 72.188rem) { .hero-carousel .carousel-slides .slide-container .slide-titles { padding: 0 1rem; } .hero-carousel .carousel-slides .slide-container .slide-titles .titles-wrapper { margin: 0 auto 3.25rem auto; } .hero-carousel .carousel-slides .slide-container .slide-titles .titles-wrapper p, .hero-carousel .carousel-slides .slide-container .slide-titles .titles-wrapper h1 { width: 70%; } } .carousel-controls { position: absolute; top: 0; bottom: 0; right: 1rem; display: flex; flex-direction: column; justify-content: flex-end; width: calc(100% - 2rem); height: calc(100vh - 8.875rem); pointer-events: none; z-index: 1; } .carousel-controls .carousel-wrapper { display: flex; flex-direction: column; width: 100%; max-width: 72.188rem; margin: 0 auto; } .carousel-controls .button-control-group { display: flex; flex-direction: row; justify-content: space-between; pointer-events: all; } .carousel-controls .button-control-group .kite-button { width: auto; padding: 0; margin: 0; } .carousel-controls .button-control-group .kite-button.next { margin: 0 0 0 auto; } .carousel-controls .button-control-group .kite-button .rk-button--copy { display: flex; flex-direction: row; align-content: center; align-items: center; gap: 0.5rem; } .carousel-controls .button-control-group .kite-button .rk-button--copy > span:not(.kite-icon) { color: var(--kite-color-white); } .carousel-controls .button-control-group .kite-button .rk-button--copy .kite-icon { margin-right: 0; } .carousel-controls .carousel-pagination { display: flex; flex-direction: column; width: auto; margin: 0 auto 0 0; pointer-events: all; } .carousel-controls .carousel-pagination .pagination-group { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0.5rem; padding-top: 0.5rem; } .carousel-controls .pagination-button { width: 1.5rem; border: none; height: 0.25rem; border-radius: 2px; background-color: var(--kite-color-gray-10); cursor: pointer; } .carousel-controls .pagination-button.current-slide { background-color: #31a2ff; } .carousel-controls .pagination-button span { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } @media only screen and (min-width: 52.5rem) { .carousel-controls { height: calc(100vh - 12.625rem); } } @media (min-width: 72.188rem) { .carousel-controls .carousel-pagination { margin: 0 0 0 auto; } } .footer__main.carousel { margin-top: 0; } .image-holder { position: relative; } @media only screen and (min-width: 80rem) { .image-holder:not(.homepage):not(.no-arrows)::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpolygon fill='%230271eb' points='6,4 0,0 0,8'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 2rem 2rem; height: 16rem; width: 16rem; right: -5.5rem; position: absolute; bottom: -7rem; z-index: -1; } } @media only screen and (max-width: 60rem) { .image-holder:not(.homepage):not(.no-arrows).kite-container { padding: 0; } } .hero__image { display: block; margin: 0 auto; position: relative; overflow: visible; max-height: 187px; } .hero__image img { object-position: top; } @media (min-width: 400px) { .hero__image { max-height: 224px; } } @media only screen and (min-width: 37.5rem) { .hero__image { max-height: 368px; } } @media only screen and (min-width: 52.5rem) { .hero__image { max-height: 491px; } } .hero__image.homepage { max-width: 1700px; overflow: hidden; padding: 0; } .hero__image > img { object-fit: cover; object-position: top; height: 100%; width: 100%; } @media only screen and (min-width: 80rem) { .hero__image.homepage { max-height: 573px; } } .hero__text { position: relative; } .hero__text.homepage { padding: 2rem 2.5rem 0 1.5rem; min-height: 6.5rem; background-color: var(--kite-color-white); } .hero__text h1, .hero__text h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1; } .hero__text.link h1, .hero__text.link h2 { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .hero__text.link h1, .hero__text.link h2 { font-size: 1.5rem; line-height: 1.25; } } .hero__text .content { font-size: 1rem; line-height: 1.5; } .hero__text .content a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .hero__text .content a:hover, .hero__text .content a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .hero__text .content a { font-size: inherit; line-height: inherit; color: var(--kite-color-primary); } .hero__text.leaders:not(.homepage) { padding: 0; margin-top: 0; margin: auto; display: flex; flex-direction: column; gap: 1.5rem; max-width: 100%; } @media screen and (min-width: 34.5rem) { .hero__text.leaders:not(.homepage) { max-width: 33rem; } } @media screen and (min-width: 51.25rem) { .hero__text.leaders:not(.homepage) { max-width: 51.25rem; } } @media screen and (min-width: 69rem) { .hero__text.leaders:not(.homepage) { max-width: 71.25rem; } } .hero__text.leaders:not(.homepage) h1 { color: var(--kite-color-dark-blue-20); padding: 0; margin: 0; font-weight: 800; font-size: 3rem; line-height: 1.2083; } @media only screen and (max-width: 37.5rem) { .hero__text.leaders:not(.homepage) h1 { font-size: 2.625rem; line-height: 1.2381; } } .hero__text.leaders:not(.homepage) .content { position: relative; width: fit-content; max-width: none; } .hero__text.leaders:not(.homepage) .content p { padding: 0; margin: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .hero__text.leaders:not(.homepage) .content p { font-size: 1.125rem; line-height: 1.625; } } @media screen and (max-width: 52.5rem) { .hero__text { padding: 1rem; width: 100%; margin-top: 0; } .hero__text:not(.homepage):not(.leaders) { padding-top: 2rem; } .hero__text h1, .hero__text h2 { line-height: 1.25; } } @media (min-width: 720px) { .hero__text.leaders h1 { line-height: 3.5rem; } } @media only screen and (min-width: 52.5rem) { .hero__text h1, .hero__text h2 { font-size: 3rem; } .hero__text.homepage { padding-left: clamp(2rem, (100vw - 1230px) / 2, 50vw); width: calc(60rem + (100vw - 1280px) / 2); margin-top: -4rem; } .hero__text .content { font-size: 1.25rem; line-height: 1.4; padding: 0; } .hero__text:not(.homepage):not(.leaders) { margin-top: 2rem; } .hero__text:not(.homepage):not(.leaders) h1, .hero__text:not(.homepage):not(.leaders) .content { max-width: 55rem; width: calc(60rem + (100vw - 1280px) / 2); } .hero__text:not(.homepage):not(.leaders) h2 { width: 100%; } } @media only screen and (min-width: 80rem) { .hero__text.policy { margin-top: -14rem; } } .media-library { display: flex; flex-direction: column; align-items: flex-start; } .media-library nav { border-bottom: 1px solid var(--kite-color-gray-20); margin-bottom: 2rem; width: 100%; } .media-library nav ul { margin: 0; padding: 0; display: flex; align-items: center; gap: 0.75rem; height: 4rem; } .media-library nav ul li { padding: 0; margin: 0; flex: 0 1 auto; height: 4rem; list-style: none; box-sizing: border-box; border-bottom: 3px solid transparent; } .media-library nav ul li a { height: 100%; display: flex; align-items: center; color: var(--kite-color-black); text-decoration: none; } .media-library nav ul li.active { border-bottom: 3px solid var(--kite-color-primary); } .media-library h2 { margin: 0; } .media-library .download-all { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; width: auto; text-decoration: none; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .media-library .download-all { font-size: 1rem; line-height: 1.625; } } .media-library .download-all { font-weight: 500; } .media-library > .kite-grid { margin: 0 auto; width: 100%; } .media-library .modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 46, 82, 0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; } @media only screen and (min-width: 37.5rem) { .media-library nav ul { gap: 2rem; } } .paragraph__image_list { margin-top: 4rem; margin-bottom: 2rem; } .paragraph__image_list h3 a { font-weight: 700; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .paragraph__image_list h3 a { font-size: 1.125rem; line-height: 1.3333333; } } .paragraph__image_list h3 a:not(:hover) { color: var(--kite-color-black); text-decoration: none; } .paragraph__image_list img { max-width: 275px !important; max-height: 275px; } .paragraph__image_list .kite-grid { align-items: center; } .paragraph__image_list .kite-cell:first-child { order: 2; } .paragraph__image_list .kite-cell:last-child { order: 1; text-align: center; } section.infographic { padding: 3.125rem 1rem; display: flex; align-items: center; justify-content: center; height: 100%; } @media only screen and (max-width: 37.5rem) { section.infographic.stackable { flex-direction: column; } section.infographic.stackable .leading-images { margin: -3.125rem -1rem 2rem -1rem; } section.infographic.stackable .trailing-images { margin: 2rem -1rem -3.125rem -1rem; } } section.infographic.stackable .text h3 { white-space: nowrap; } section.infographic.stackable .text p { white-space: nowrap; } section.infographic .text { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.25rem; } section.infographic .text h3 { font-size: 3rem; font-weight: 700; margin: 0; text-align: center; } section.infographic .text p { margin: 0; text-align: center; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { section.infographic .text p { font-size: 1rem; line-height: 1.625; } } section.infographic.blue { background: var(--kite-color-dark-blue-20); color: var(--kite-color-white); } section.infographic.lt-gray { background: var(--kite-color-gray-10); } section.infographic.dk-gray { background: var(--kite-color-gray-20); } section.infographic:not(.blue) .text { color: var(--kite-color-dark-blue-10); } section.infographic .gatsby-image-wrapper:not(.large-image) { max-width: 96px; height: auto; margin-right: 2rem; } section.infographic .leading-images { margin: -3.125rem 2rem -3.125rem -1rem; } section.infographic .trailing-images { margin: -3.125rem -1rem -3.125rem 2rem; } section.infographic .leading-images, section.infographic .trailing-images { display: flex; align-items: center; } .paragraph__infographic_row { margin-top: 1rem; } .paragraph__infographic_row h2 { margin-top: 4rem; margin-bottom: 2rem; } .inline-callout { width: 100%; padding: 1.5rem 1.25rem; margin: 2.5rem 0; display: flex; flex-direction: column; gap: 2.5rem; background-color: var(--kite-color-gray-10); border-left: 0.375rem solid var(--kite-color-dark-blue-10); } @media only screen and (min-width: 30rem) { .inline-callout { flex-direction: row; align-items: center; padding: 1.5rem 2.5rem; } } .inline-callout .content { display: flex; flex-direction: column; gap: 1rem; } .inline-callout .content h3 { margin: 0; } .inline-callout .content__body p { margin: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } .inline-callout .content__body p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .inline-callout .content__body p a:hover, .inline-callout .content__body p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } @media only screen and (max-width: 37.5rem) { .inline-callout .content__body p { font-size: 1rem; line-height: 1.625; } } .inline-callout .content__subtext { font-weight: 400; font-size: 0.875rem; text-decoration: none; margin: 0; margin-top: 0.25rem; } .inline-callout .gatsby-image-wrapper { flex-shrink: 0; height: 5rem; width: 5rem; } @media only screen and (min-width: 30rem) { .inline-callout .gatsby-image-wrapper { height: 5.875rem; width: 5.875rem; } } .investor-card { width: 100%; } .investor-card__content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; padding: 2rem 0 3rem 0; margin: 0 auto; } @media only screen and (min-width: 52.5rem) { .investor-card__content { flex-direction: row; gap: 1rem; padding: 3.75rem 0 0.75rem; margin-bottom: 0; } } @media only screen and (min-width: 80rem) { .investor-card__content { flex-direction: row; gap: 1rem; padding: 5.25rem 0 2.25rem; margin-bottom: 0; } } .investor-card__content .gatsby-image-wrapper { border-radius: 1rem; aspect-ratio: 16/9; width: 100%; flex-grow: 1; flex-shrink: 0; } @media only screen and (min-width: 52.5rem) { .investor-card__content .gatsby-image-wrapper { width: 24.75rem; order: 2; } } @media only screen and (min-width: 60rem) { .investor-card__content .gatsby-image-wrapper { width: 25.125rem; } } @media screen and (min-width: 69rem) { .investor-card__content .gatsby-image-wrapper { width: 31.5rem; } } .investor-card__content .text-content { display: flex; flex-direction: column; justify-self: center; text-align: center; width: 100%; gap: 1.5rem; flex-shrink: 1; } @media only screen and (min-width: 52.5rem) { .investor-card__content .text-content { padding: 2rem; order: 1; } } .investor-card__content .text-content .typestack-title-3 { color: var(--kite-color-dark-blue-30); margin-bottom: 0; } .investor-card__content .text-content .typestack-investor-body p { font-weight: 500; font-size: 1.125rem; line-height: 1.5rem; margin: 0; color: var(--kite-color-dark-blue-30); } @media only screen and (min-width: 52.5rem) { .investor-card__content .text-content .typestack-investor-body p { font-size: 1.25rem; line-height: 1.625rem; } } .investor-card__content .text-content .typestack-investor-body p a { line-height: 1.5; text-decoration: none; color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .investor-card__content .text-content .typestack-investor-body p a:hover, .investor-card__content .text-content .typestack-investor-body p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } @media only screen and (min-width: 52.5rem) { .investor-card__content .text-content .typestack-investor-body p a { font-size: 1.25rem; line-height: 1.625rem; } } .investor-card__content .text-content, .investor-card__content .gatsby-image-wrapper { max-width: 33rem; } @media only screen and (min-width: 52.5rem) { .investor-card__content .text-content, .investor-card__content .gatsby-image-wrapper { max-width: unset; } } .key-takeaways { padding: 0.625rem 0 2rem; } @media only screen and (min-width: 80rem) { .key-takeaways { padding: 0.625rem 3rem 2rem 3rem; } } .key-takeaways .key-takeaways__content .key-takeaways__title { color: var(--kite-color-dark-blue-10); font-size: 1rem; font-weight: 700; line-height: 0.9375rem; margin: 0; } .key-takeaways__content { border-left: 0.125rem solid var(--kite-color-dark-blue-10); padding: 0 1.5rem; } .key-takeaways__list { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0.5rem 0 1.4rem; margin: 0; list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='10' viewBox='0 0 7 10'%3E%3Cpath fill='%23002747' d='M0 9.5L7 5.00492L0 0.5V9.5Z'/%3E%3C/svg%3E"); } .key-takeaways__item { font-weight: 400; font-size: 0.875rem; color: var(--kite-color-dark-blue-10); margin: 0; } .paragraph__latest-news { margin-top: 2rem; } .paragraph__latest-news .large { margin-top: 2rem; margin-bottom: -2rem; } .paragraph__latest-news a.kite-btn { margin: 0; } .paragraph__latest-news ul { padding-left: 0; } .paragraph__leadership_promotion--embedded { padding: 1.25rem 0; } .paragraph__leadership_promotion .leader-hl { display: flex; flex-direction: column; gap: 2.5rem; } @media only screen and (min-width: 52.5rem) { .paragraph__leadership_promotion .leader-hl { flex-direction: row; gap: 2rem; } } .paragraph__leadership_promotion .leader-hl__img-wrapper { flex: 1 1; margin: 0 -1rem; } @media only screen and (min-width: 52.5rem) { .paragraph__leadership_promotion .leader-hl__img-wrapper { margin: 0 0 0 -2rem; } } @media only screen and (min-width: 80rem) { .paragraph__leadership_promotion .leader-hl__img-wrapper { margin: 0; } } .paragraph__leadership_promotion .leader-hl__img { aspect-ratio: 1/1; width: 100%; height: auto; } .paragraph__leadership_promotion .leader-hl__img img { object-position: top; } .paragraph__leadership_promotion .leader-hl__content { flex: 1 1; display: flex; flex-direction: column; justify-content: center; } @media only screen and (min-width: 60rem) { .paragraph__leadership_promotion .leader-hl__content { justify-content: flex-end; } } .paragraph__leadership_promotion .leader-hl__content h2 { margin: 0; } .paragraph__leadership_promotion .leader-hl__name { margin: 0 0 0.5rem 0; font-size: 2.625rem; font-weight: 800; line-height: 3.25rem; } .paragraph__leadership_promotion .leader-hl__position { color: var(--kite-color-gray-30); margin: 0 0 1.25rem 0; font-size: 1.25rem !important; font-weight: 500 !important; line-height: 1.625rem; } @media only screen and (min-width: 52.5rem) { .paragraph__leadership_promotion .leader-hl__summary { margin-bottom: 0; } } @media only screen and (min-width: 60rem) { .paragraph__leadership_promotion .leader-hl__summary { margin-bottom: 1.5rem; } } .paragraph__leadership_promotion .leader-hl .decorative-hr { width: 4.5rem; height: 0.75rem; flex-shrink: 0; background-color: var(--kite-color-blue-30); margin: 1.5rem 0; } .paragraph__leadership_promotion .leader-hl--embedded { padding-top: 1.25rem; padding-bottom: 1.25rem; background-color: var(--kite-color-gray-10); } @media only screen and (min-width: 37.5rem) { .paragraph__leadership_promotion .leader-hl--embedded { flex-direction: row; align-items: center; } } .paragraph__leadership_promotion .leader-hl--embedded .leader-hl__img-wrapper { margin: 0; } .paragraph__leadership_promotion .leader-hl--embedded .decorative-hr { margin: 1.25rem 0; } .social p, .download p { margin: 0; } .social { display: flex; flex-direction: column; gap: 0.5rem; background-color: var(--kite-color-gray-10); margin-bottom: 0.5rem; padding: 1rem 0.75rem 1.75rem; } @media only screen and (min-width: 60rem) { .social { background-color: var(--kite-color-white); padding: 0; } } .social__icons { display: flex; gap: 2.75rem; align-items: center; } @media only screen and (min-width: 52.5rem) { .social__icons { gap: 1.5rem; } } .social.hide-xxl { margin: 1.25rem 1rem 0; background-color: var(--kite-color-gray-10); } @media only screen and (min-width: 37.5rem) { .social.hide-xxl { display: flex; padding: 1rem 0.75rem; } } @media only screen and (min-width: 52.5rem) { .social.hide-xxl { margin: 0; } } @media only screen and (min-width: 80rem) { .social.hide-xxl { display: none; } } .social.show-xxl { display: none; } @media only screen and (min-width: 80rem) { .social.show-xxl { display: flex; } } .social .download__link { display: flex; gap: 0.5rem; align-items: center; background-color: var(--kite-color-gray-10); color: var(--kite-color-primary); padding: 0; max-width: fit-content; } @media only screen and (min-width: 80rem) { .social .download__link { background-color: var(--kite-color-white); } } .social .download-link .superscript { font-weight: 400; } .cta-link { font-weight: 500; display: flex; flex-direction: row; align-items: center; column-gap: 1rem; text-decoration: none; } .cta-link p { margin: 0; } .paragraph__media-contacts { margin-top: 2rem; } .paragraph__media-contacts h3, .paragraph__media-contacts p { margin: 0; padding: 0; } .paragraph__media-contacts .grid { display: grid; gap: 1rem; grid: auto-flow/repeat(auto-fit, minmax(320px, 1fr)); } @media only screen and (min-width: 52.5rem) { .paragraph__media-contacts .grid { grid: auto-flow/repeat(auto-fit, minmax(315px, 1fr)); } } @media only screen and (min-width: 80rem) { .paragraph__media-contacts .grid { grid: auto-flow/repeat(auto-fit, minmax(250px, 1fr)); } } .paragraph__media-contacts .kite-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; } .paragraph__media-contacts .team h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .paragraph__media-contacts .team h3 { font-size: 1.125rem; line-height: 1.3333333; } } .paragraph__media-contacts .team__position { display: flex; flex-direction: column; justify-content: start; margin: 1.5rem 0 2rem; } .paragraph__media-contacts .team__position p:first-of-type { font-weight: 400; font-size: 1rem; line-height: 1.625; } .paragraph__media-contacts .team__position p { font-weight: 400; font-size: 0.875rem; } .paragraph__media-contacts .team a { text-overflow: ellipsis; overflow: hidden; font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .paragraph__media-contacts .team a:hover { color: var(--kite-color-primary); text-decoration: underline; } } .paragraph__media-contacts .region { display: flex; flex-direction: column; gap: 2.5rem; } .paragraph__media-contacts .region__location { display: flex; flex-direction: column; justify-content: start; gap: 0.5rem; } .paragraph__media-contacts .region__location h3 { color: var(--kite-color-gray-30); font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .paragraph__media-contacts .region__location h3 { font-size: 0.75rem; } } .paragraph__media-contacts .region__location p { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .paragraph__media-contacts .region__contact { display: flex; flex-direction: column; gap: 0.25rem; } .paragraph__media-contacts .region__contact p:first-of-type { font-weight: 400; font-size: 1rem; line-height: 1.625; } .paragraph__media-contacts .region__contact p, .paragraph__media-contacts .region__contact p > * { font-weight: 400; font-size: 0.875rem; } .paragraph__media-contacts .region__contact a { text-overflow: ellipsis; overflow: hidden; font-size: 1rem; font-weight: 500; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .paragraph__media-contacts .region__contact a:hover { color: var(--kite-color-primary); text-decoration: underline; } } .paragraph__media-contacts .region__contact a { font-size: 0.875rem; font-weight: 400; } .paragraph__media_report { margin-top: 2rem; margin-bottom: 2rem; } .paragraph__media_report picture { display: block; position: relative; margin-top: 2rem; } .paragraph__media_report picture > img { display: block; width: 100%; max-width: 23rem; margin: 0 auto; } .paragraph__media_report p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__media_report p a:hover, .paragraph__media_report p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } @media only screen and (min-width: 37.5rem) { .paragraph__media_report picture > img { max-width: 60.75rem; } } .media-report-button { margin-left: 0; margin-right: 0; display: flex; align-items: center; width: fit-content; } .media-report-button .kite-icon { margin-right: 0.5rem; } .paragraph__overview-image { margin: 4rem auto 0 auto; max-width: 1700px; } .paragraph__partners { margin-top: 2rem; padding-top: 2rem; padding-bottom: 2rem; background: var(--kite-color-gray-10); } .paragraph__partners .partner { margin: 2rem 0; display: flex; flex-direction: column; position: relative; } .paragraph__partners .partner .gatsby-image-wrapper { order: 1; width: 178px; } .paragraph__partners .partner h3 { order: 2; margin-top: 1rem; color: var(--kite-color-primary); } .paragraph__partners .partner a { order: 3; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; outline: none; color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } .paragraph__partners .partner a::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } .paragraph__partners .partner a:focus-visible::before { outline: 2px solid var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .paragraph__partners .partner a:hover, .paragraph__partners .partner a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph-header { position: relative; display: flex; flex-direction: column; align-items: start; gap: 1.25rem; color: var(--kite-color-blue-30); padding-bottom: 0.625rem; } @media only screen and (min-width: 60rem) { .paragraph-header { flex-direction: row; align-items: center; gap: 1.5rem; } } .paragraph-header__anchor { position: relative; top: -6.875rem; } @media only screen and (min-width: 52.5rem) { .paragraph-header__anchor { top: -8.5rem; } } .paragraph-header__anchor--policy { position: relative; top: -6.125rem; } .paragraph-header__number { font-size: 4rem; font-weight: 800; line-height: 4.5rem; } @media only screen and (min-width: 60rem) { .paragraph-header__number { font-size: 6rem; } } .paragraph-header__heading-wrapper { display: flex; flex-direction: column; gap: 0.5rem; } .paragraph-header__heading-wrapper h2, .paragraph-header__heading-wrapper p { margin: 0; } .paragraph-header__heading { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .paragraph-header__heading { font-size: 1.75rem; line-height: 1.2857; } } .paragraph-header__subheading { color: black; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .paragraph-header__subheading { font-size: 1.125rem; line-height: 1.3333333; } } .policy-map { margin-top: 2rem; border-bottom: 1px solid var(--kite-color-gray-20); display: flex; flex-direction: column; padding-bottom: 2rem; } .policy-map p { font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .policy-map p { font-size: 1rem; line-height: 1.625; } } .policy-map p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .policy-map p a:hover, .policy-map p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .policy-map svg { align-self: center; margin: 0 auto; width: auto; max-width: 100%; max-height: 80vh; z-index: 3; } .policy-map svg path.enabled { cursor: pointer; } .policy-map .tooltip { position: fixed; pointer-events: none; background-color: #feb533; padding: 0.25rem 1rem; font-size: 1rem; z-index: 9; border-radius: 0.25rem; } @media only screen and (max-width: 52.5rem) { .policy-map .tooltip { display: none; } } .policy-map form { margin-top: -16rem; padding-top: 16rem; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; width: 100%; display: flex; justify-content: center; } @media only screen and (min-width: 60rem) { .policy-map form { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; justify-content: flex-start; } } .policy-map form label { display: flex; flex-direction: column; align-items: flex-start; color: var(--kite-color-gray-30); font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .policy-map form label { font-size: 1rem; line-height: 1.625; } } .policy-map form label select { border: 1px solid var(--kite-color-gray-20); padding: 0.25rem; font-size: 1.25rem; } @media only screen and (max-width: 52.5rem) { .policy-map form label select { width: 100%; } } .policy-map form label option { color: #000; } .policy-map .details { display: flex; flex-direction: column; justify-content: center; align-items: center; } @media only screen and (min-width: 60rem) { .policy-map .details { justify-content: space-between; flex-direction: row; align-items: flex-start; } } .policy-map .details strong { font-weight: 700; color: var(--kite-color-primary); } .policy-map .details ul { padding-left: 0; margin-top: 1rem; } .policy-map .details ul li { list-style: none; padding-left: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .policy-map .details ul li { font-size: 1rem; line-height: 1.625; } } .policy-map .details ul li strong { margin-right: 0.5rem; } .policy-map .details a { margin-left: 0; } .policy-map .details section { flex: 0 1 50%; max-width: 100%; } .policy-map .details section:first-child { padding-top: 4rem; } .policy-map .details section:last-child { display: flex; align-items: center; flex-direction: column; } .policy-map .details section:last-child p { padding-top: 4rem; } .policy-map .details .gatsby-image-wrapper { overflow: visible; } .policy-map .details .gatsby-image-wrapper img { object-fit: contain; object-position: center; max-width: 36rem; margin: 0 auto; } @media only screen and (min-width: 60rem) { .policy-map .details .gatsby-image-wrapper img { margin-top: -6rem; } } .paragraph__overview-block-5 { margin-top: -1rem; } @charset "UTF-8"; .paragraph__pull_quote { margin-top: 4rem; border-left: none; position: relative; } .paragraph__pull_quote:not(.full) { padding: 4rem 2rem; } @media only screen and (min-width: 52.5rem) { .paragraph__pull_quote:not(.full) { padding: 4rem 8rem; } } .paragraph__pull_quote.full { display: flex; align-items: center; padding: 0; } .paragraph__pull_quote.full div { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.full div { font-size: 1.75rem; line-height: 1.2857; } } .paragraph__pull_quote cite.author { margin-top: 2rem; margin-bottom: 0; text-align: right; width: 100%; display: block; font-style: normal; } .paragraph__pull_quote div h2 { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote div h2 { font-size: 1.75rem; line-height: 1.2857; } } .paragraph__pull_quote.fill, .paragraph__pull_quote.full { color: var(--kite-color-white); background-color: var(--kite-color-dark-blue-10); } .paragraph__pull_quote.fill.dark_blue, .paragraph__pull_quote.full.dark_blue { background-color: var(--kite-color-dark-blue-10); } .paragraph__pull_quote.fill.gray, .paragraph__pull_quote.full.gray { background-color: var(--kite-color-gray-20); color: var(--kite-color-black); } .paragraph__pull_quote.fill.gray::before, .paragraph__pull_quote.full.gray::before { color: var(--kite-color-primary); } .paragraph__pull_quote.fill.yellow, .paragraph__pull_quote.full.yellow { background-color: var(--kite-color-yellow-20); color: var(--kite-color-black); } .paragraph__pull_quote.fill:not(.full)::before, .paragraph__pull_quote.full:not(.full)::before { content: "“"; position: absolute; top: 1.5rem; left: 0; margin: auto; font-size: 15rem; line-height: 1; color: var(--kite-color-gray-25); display: block; height: 7.5rem; font-weight: 400; } @media only screen and (max-width: 52.5rem) { .paragraph__pull_quote.fill:not(.full)::before, .paragraph__pull_quote.full:not(.full)::before { top: -3rem; } } @media only screen and (max-width: 52.5rem) { .paragraph__pull_quote.fill:not(.fill) div.gatsby-image-wrapper, .paragraph__pull_quote.full:not(.fill) div.gatsby-image-wrapper { display: none; } } .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper), .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) { border-top: 3px solid var(--kite-color-blue-20); padding-top: 6rem; margin-top: 6rem; position: relative; } .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper)::before, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper)::before { content: "“"; position: absolute; top: 0.25rem; left: 0; margin: auto; font-size: 8rem; line-height: 1; display: block; height: 7.5rem; color: var(--kite-color-blue-20); font-weight: 400; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper)::before, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper)::before { font-size: 6rem; height: 5rem; } } .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper).yellow, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper).yellow { border-top-color: var(--kite-color-white); } .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper).yellow::before, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper).yellow::before { color: var(--kite-color-white); } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper), .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) { padding: 4rem 0 0 0; margin-top: 4rem; } } .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) p, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) p { padding: 0 4rem; font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) p, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) p { font-size: 1.75rem; line-height: 1.2857; } } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) p, .paragraph__pull_quote.full:not(.fill) div:not(.kite-container):not(.gatsby-image-wrapper) p { padding: 0 1rem; } } .paragraph__pull_quote.fill:not(.fill) cite, .paragraph__pull_quote.full:not(.fill) cite { padding-bottom: 6rem; margin-bottom: 6rem; border-bottom: 3px solid var(--kite-color-blue-20); position: relative; font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) cite, .paragraph__pull_quote.full:not(.fill) cite { font-size: 1.5rem; line-height: 1.25; } } .paragraph__pull_quote.fill:not(.fill) cite::before, .paragraph__pull_quote.full:not(.fill) cite::before { content: "- "; } .paragraph__pull_quote.fill:not(.fill) cite::after, .paragraph__pull_quote.full:not(.fill) cite::after { content: "”"; position: absolute; bottom: -3.5rem; right: 0; margin: auto; font-size: 8rem; line-height: 1; display: block; height: 7.5rem; color: var(--kite-color-blue-20); font-weight: 400; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) cite::after, .paragraph__pull_quote.full:not(.fill) cite::after { font-size: 6rem; height: 6.5rem; } } .paragraph__pull_quote.fill:not(.fill) cite.yellow, .paragraph__pull_quote.full:not(.fill) cite.yellow { border-bottom-color: var(--kite-color-white); } .paragraph__pull_quote.fill:not(.fill) cite.yellow::after, .paragraph__pull_quote.full:not(.fill) cite.yellow::after { color: var(--kite-color-white); } .paragraph__pull_quote.fill:not(.fill) cite span, .paragraph__pull_quote.full:not(.fill) cite span { padding-right: 4rem; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) cite, .paragraph__pull_quote.full:not(.fill) cite { padding-bottom: 4rem; margin-bottom: 4rem; } .paragraph__pull_quote.fill:not(.fill) cite span, .paragraph__pull_quote.full:not(.fill) cite span { padding-right: 2rem; } } .paragraph__pull_quote.fill:not(.fill) div.kite-container:not(:last-child) p, .paragraph__pull_quote.full:not(.fill) div.kite-container:not(:last-child) p { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) div.kite-container:not(:last-child) p, .paragraph__pull_quote.full:not(.fill) div.kite-container:not(:last-child) p { font-size: 1.5rem; line-height: 1.25; } } .paragraph__pull_quote.fill:not(.fill) div.kite-container:not(:last-child) cite, .paragraph__pull_quote.full:not(.fill) div.kite-container:not(:last-child) cite { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .paragraph__pull_quote.fill:not(.fill) div.kite-container:not(:last-child) cite, .paragraph__pull_quote.full:not(.fill) div.kite-container:not(:last-child) cite { font-size: 1.25rem; line-height: 1.3; } } @media only screen and (min-width: 80rem) { .paragraph__pull_quote.fill::before, .paragraph__pull_quote.full::before { left: -3rem; font-size: 20rem; height: 10rem; top: 50%; transform: translateY(-50%); } } .paragraph__pull_quote.border:not(.gray) { border-top: 2px solid var(--kite-color-blue-30); border-bottom: 2px solid var(--kite-color-blue-30); } .paragraph__pull_quote.border:not(.gray)::before { top: -1rem; } .paragraph__pull_quote.border:not(.gray)::after { bottom: -7rem; } .paragraph__pull_quote.border.gray { border: 1px solid var(--kite-color-gray-20); border-radius: 4px; } .paragraph__pull_quote.border::before, .paragraph__pull_quote.border::after { margin: auto; font-size: 12rem; color: var(--kite-color-gray-20); position: absolute; line-height: 1; font-weight: 400; } .paragraph__pull_quote.border::before { content: "“"; top: -2rem; left: 0; } .paragraph__pull_quote.border::after { content: "”"; bottom: -9.5rem; right: 0; } .quote-card { display: flex; flex-direction: column; border-radius: 1rem; padding: 1.5rem; gap: 1.5rem; } @media only screen and (min-width: 52.5rem) { .quote-card { padding: 2rem; gap: 0.75rem; flex-direction: row; } } .quote-card p, .quote-card blockquote { padding: 0; margin: 0; } .quote-card blockquote { border: none; } .quote-card__quote { display: flex; flex-direction: column; width: 100%; gap: 2.5rem; padding: 0; } @media only screen and (min-width: 52.5rem) { .quote-card__quote { padding: 1.5rem 0 0 0; } } .quote-card__text { color: var(--kite-color-dark-blue-20); font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 60rem) { .quote-card__text { font-size: 1.5rem; line-height: 1.25; } } .quote-card__attribution { align-self: flex-end; text-align: right; color: var(--kite-color-gray-30); font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 60rem) { .quote-card__attribution { font-size: 1.125rem; line-height: 1.625; } } .rh__block { background: var(--kite-color-dark-blue-10); margin-bottom: -1rem; } .rh__block.accent { background: var(--kite-color-blue-30); } .rh__block.video { margin-top: -9rem; margin-bottom: -4rem; padding-bottom: 4rem; } .rh__block h2, .rh__block .subtitle { color: var(--kite-color-white); } .rh__block h2 { padding-top: 4rem; } .rh__block ul { padding-left: 0; margin: 0; margin-top: 2rem; padding-bottom: 4rem; display: grid; grid-template-columns: 1fr; grid-auto-flow: row; gap: 2rem; } .rh__block ul li { margin: 0; } @media only screen and (min-width: 37.5rem) { .rh__block ul { grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 60rem) { .rh__block ul { grid-template-columns: 1fr 1fr 1fr; } } .rh__block .subtitle p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .rh__block .subtitle p a:hover, .rh__block .subtitle p a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .paragraph__video { margin-top: 4rem; } .paragraph__video h2 { margin-bottom: 2rem; } .paragraph__video .video-wrapper { position: relative; } .paragraph__video .video-wrapper iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .paragraph__video .video-wrapper::after { padding-bottom: 56.52%; content: ""; display: block; } .paragraph__video .caption { font-weight: 400; font-size: 0.875rem; margin-top: 0.625rem; display: flex; } .section-text { display: flex; flex-direction: column; gap: 0.875rem; } .section-text h2, .section-text h3, .section-text p { padding: 0; margin: 0; } .section-text p:not(:nth-last-of-type(1)) { padding-bottom: 1rem; } .section-text a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .section-text a:hover, .section-text a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .section-text h2 { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 60rem) { .section-text h2 { font-size: 1.75rem; line-height: 1.2857; } } .section-text h3 { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 60rem) { .section-text h3 { font-size: 1.5rem; line-height: 1.25; } } .section-text p { font-weight: 400; font-size: 1rem; line-height: 1.625; } .section-text--about { gap: 1.25rem; } .section-image-card { display: flex; flex-direction: column; gap: 1rem; padding: 0; margin: 0; } .section-image-card figCaption { padding: 0; margin: 0; } @media only screen and (min-width: 52.5rem) { .section-image-card { flex-direction: row; align-items: center; gap: 2rem; } } .section-image-card .gatsby-image-wrapper { flex: 1 1; border-radius: 1rem; aspect-ratio: 16/9; overflow: hidden; } .section-image-card .gatsby-image-wrapper img { object-position: center; } .section-image-card__text-content { flex: 1 1; display: flex; flex-direction: column; gap: 0.5rem; } .section-image-card__eyebrow { color: #606a85; padding: 0; margin: 0; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 60rem) { .section-image-card__eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .section-image-card__title { color: var(--kite-color-dark-blue-20); padding: 0; margin: 0; font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 60rem) { .section-image-card__title { font-size: 1.5rem; line-height: 1.25; } } .video-base { border-radius: 16px; height: 100%; width: 100%; position: relative; display: block; } .video-base--iframe { aspect-ratio: 16/9; border: none; } .video-base--hidden { border: 1px solid var(--kite-color-white); } .video-base__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer; } .video-base__overlay .gatsby-image-wrapper { position: static; } .video-base__overlay img { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; } .video-base__overlay button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; } .video-base__overlay button svg { color: var(--kite-color-white); } .video-base__overlay button .play-btn-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-base .hidden { display: none; } .section-video-card { display: flex; flex-direction: column; gap: 1rem; } @media only screen and (min-width: 52.5rem) { .section-video-card { flex-direction: row; align-items: center; gap: 2rem; } } .section-video-card__video-wrapper { flex: 1 1; min-height: 100%; } .section-video-card__text-content { height: 100%; flex: 1 1; display: flex; flex-direction: column; gap: 0.5rem; } .section-video-card__eyebrow { color: #606a85; padding: 0; margin: 0; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 60rem) { .section-video-card__eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .section-video-card__title { color: var(--kite-color-dark-blue-20); padding: 0; margin: 0; font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 60rem) { .section-video-card__title { font-size: 1.5rem; line-height: 1.25; } } .section-video-card__description { padding: 0; margin: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 60rem) { .section-video-card__description { font-size: 1.125rem; line-height: 1.625; } } .section-video-card__title, .section-video-card__description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .section-video-card__link { display: flex; align-items: center; gap: 0.25rem; font-weight: 500; padding: 0.5rem 0; font-size: 1rem; line-height: 1.625; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .section-video-card__link:hover, .section-video-card__link:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 46, 82, 0.85); z-index: 9999; display: flex; align-items: center; justify-content: center; } .paragraph__ld-grid { margin-top: 4rem; } .paragraph__ld-grid .ld-card { border-radius: 4px; border: 1px solid var(--kite-color-gray-20); padding: 1.5rem; height: 100%; } .paragraph__ld-grid .ld-card h3 { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .paragraph__ld-grid .ld-card h3 { font-size: 1.125rem; line-height: 1.3333333; } } .paragraph__ld-grid .ld-card h3 { font-weight: 700; } .paragraph__ld-grid .ld-card h4 { font-weight: 400; font-size: 1rem; line-height: 1.625; } .paragraph__ld-grid .ld-card a { margin-top: 2rem; display: block; color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__ld-grid .ld-card a:hover, .paragraph__ld-grid .ld-card a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__ld-grid .small-cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 1rem; } .paragraph__field_carousel { margin-top: 2rem; } .paragraph__field_carousel .wrapper { position: relative; } .paragraph__field_carousel .wrapper button { position: absolute; padding: 0; background: none; border: none; color: var(--kite-color-white); cursor: pointer; height: 2rem; width: 2rem; z-index: 9; } .paragraph__field_carousel .wrapper button:first-of-type { left: 0.5rem; top: calc(50% - 1rem); } .paragraph__field_carousel .wrapper button:last-of-type { right: 0.5rem; top: calc(50% - 1rem); } .paragraph__field_carousel .wrapper ul { display: flex; position: relative; margin: 0 auto; padding: 2rem; overflow: hidden; } .paragraph__field_carousel .wrapper ul.no-pad { padding: 0; } .paragraph__field_carousel .wrapper ul li { list-style: none; margin: 0; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; } .paragraph__field_carousel .wrapper ul li.should-animate { transition: transform 0.35s; } .paragraph__field_carousel.dark-blue { background-color: var(--kite-color-dark-blue-20); } .paragraph__field_carousel.dark-blue p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__field_carousel.dark-blue p a:hover, .paragraph__field_carousel.dark-blue p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__field_carousel.light-blue { background-color: var(--kite-color-primary); } .paragraph__field_carousel.light-blue p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__field_carousel.light-blue p a:hover, .paragraph__field_carousel.light-blue p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__field_carousel.white { background-color: var(--kite-color-white); } .paragraph__field_carousel.white p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__field_carousel.white p a:hover, .paragraph__field_carousel.white p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .link-style a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .link-style a:hover, .link-style a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .scholar-item { padding: 0 3rem; background-color: var(--kite-color-dark-blue-20); display: flex; align-items: stretch; width: 100%; height: 100%; max-height: 400px; } .scholar-item > div:not(.gatsby-image-wrapper) { background-color: var(--kite-color-white); padding: 1rem; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; height: min(100%, 400px); } .scholar-item > div:not(.gatsby-image-wrapper) div { width: 100%; } .scholar-item > div:not(.gatsby-image-wrapper) h3 { width: 100%; font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .scholar-item > div:not(.gatsby-image-wrapper) h3 { font-size: 1.5rem; line-height: 1.25; } } .scholar-item > div:not(.gatsby-image-wrapper) p { width: 100%; margin-bottom: 0.5rem; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .scholar-item > div:not(.gatsby-image-wrapper) p { font-size: 1rem; line-height: 1.625; } } .scholar-item > div:not(.gatsby-image-wrapper) p strong { font-weight: 500; } .scholar-item > div:not(.gatsby-image-wrapper) p:last-child { margin-bottom: 0; } .scholar-item .gatsby-image-wrapper { width: min(100%, 400px); height: min(100%, 400px); } @media only screen and (max-width: 52.5rem) { .scholar-item { flex-direction: column; padding: 0; align-items: center; max-height: 100%; } .scholar-item > div:not(.gatsby-image-wrapper) { height: auto; align-items: center; width: min(100%, 400px); } } .paragraph__text_title { display: flex; flex-direction: column; gap: 0.5rem; } @media only screen and (min-width: 52.5rem) { .paragraph__text_title:not(.article) > * { padding: 0 1.5rem; } } .paragraph__text_title h2:not(.article) > * { margin: 0; } .paragraph__text_title p { margin: 0; } .paragraph__text_title p { font-weight: 400; font-size: 1rem; line-height: 1.625; } .paragraph__text_title ul, .paragraph__text_title ol { margin-top: 0.625rem; margin-bottom: 0; } .paragraph__text_title ul li, .paragraph__text_title ol li { margin-bottom: 0.625rem; } .paragraph__text_title .body > p { padding: 0 0 1rem 0; } .paragraph__text_title .typestack-body-2 > ul { margin-left: 1.5rem; } @media only screen and (min-width: 52.5rem) { .paragraph__text_title .typestack-body-2 > ul { margin-left: 2.5rem; } } .paragraph__text_title .typestack-body-2 > p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__text_title .typestack-body-2 > p a:hover, .paragraph__text_title .typestack-body-2 > p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__text_title .text-align-right { text-align: right; } .paragraph__text_title .text-align-center { text-align: center; } .paragraph__text_title .text-align-justify { text-align: justify; } .paragraph__timeline { margin-top: 2rem; } .paragraph__timeline h2 { margin-bottom: 2rem; } .paragraph__timeline ul { padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } .paragraph__timeline ul li { padding: 0; margin: 0; list-style: none; text-align: center; display: flex; flex-direction: column; align-items: center; margin: 1rem; } .paragraph__timeline ul li h3 { order: 2; } .paragraph__timeline ul li img { order: 1; margin-bottom: 0.5rem; height: 28px; } .paragraph__timeline ul li p { order: 3; } .vob-header { padding: 3rem; background: linear-gradient(45deg, #000410 0%, #043a5e 43%, #011224 87%, #000410 100%); color: var(--kite-color-white); } .vob-header .kite-container { display: flex; align-items: center; } .vob-header .kite-container p { font-size: 1.75rem; color: var(--kite-color-gray-20); } .vob-header .kite-container .text { margin-right: 2rem; } .vob-header .kite-container img { width: 50%; } @media only screen and (max-width: 30rem) { .vob-header { padding: 1rem; } .vob-header .kite-container { flex-direction: column; } .vob-header .kite-container p { font-size: 1.5rem; } .vob-header .kite-container img { width: 100%; } } .vob-timeline { position: relative; margin-bottom: -4rem; overflow: hidden; min-height: 300vh; background: #fafafa; } .vob-timeline .dm { height: 100vh; } .vob-timeline .holder { position: absolute; top: 0; left: 0; right: 0; background: url(/static/vob-bg-1-26bf11884be29a1df60e9319b107317c.png) no-repeat center center, #fafafa; background-size: cover; } .vob-timeline .holder.sticky { position: fixed; bottom: 0; top: auto; } .vob-timeline .holder.bottom { top: auto; bottom: 0; } .vob-timeline .holder .slides { overflow: visible; display: flex; position: absolute; transition: left 0.5s ease-out; height: 100%; } .vob-timeline .holder .slides section { height: 100%; min-width: 100vw; } .vob-timeline .holder .slides section .slide { padding: 8rem 2rem; height: 100%; display: flex; flex-direction: column; } .vob-timeline .holder .slides section .slide .text { display: flex; flex-direction: column; } .vob-timeline .holder .slides section .slide h2 { color: var(--kite-color-dark-blue-10); } .vob-timeline .holder .slides section .slide h2, .vob-timeline .holder .slides section .slide p { margin: 0 8rem 1.5rem 8rem; } @media only screen and (max-width: 52.5rem) { .vob-timeline .holder .slides section .slide { padding: 1rem 1rem 4rem 1rem; } .vob-timeline .holder .slides section .slide h2, .vob-timeline .holder .slides section .slide p { margin: 0 4rem 1.5rem 4rem; } } @media only screen and (max-width: 30rem) { .vob-timeline .holder .slides section .slide { padding: 1rem 1rem 2rem 1rem; } .vob-timeline .holder .slides section .slide h2, .vob-timeline .holder .slides section .slide p { margin: 0 2rem 1.5rem 2rem; } } .vob-timeline .holder .slides section .slide div p { font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .vob-timeline .holder .slides section .slide div p { font-size: 1rem; line-height: 1.625; } } .vob-timeline .holder .slides section .slide .gatsby-image-wrapper.small { display: none; } .vob-timeline .holder .slides section .slide .gatsby-image-wrapper.small > div { height: 100%; } @media (orientation: portrait) { .vob-timeline .holder .slides section .slide .gatsby-image-wrapper.small { display: block; margin-bottom: 8rem; } .vob-timeline .holder .slides section .slide .gatsby-image-wrapper.has-small { display: none; } } @media only screen and (min-width: 52.5rem) { .vob-timeline .holder .slides section:last-of-type .slide { flex-direction: row; align-items: flex-start; } .vob-timeline .holder .slides section:last-of-type .slide p, .vob-timeline .holder .slides section:last-of-type .slide h2 { margin-right: 4rem; } } .vob-timeline .holder .slides section:last-of-type .slide .gatsby-image-wrapper { margin-right: 1rem; width: 75%; align-self: center; box-shadow: 1rem 1rem 0 0 var(--kite-color-yellow-20); } @media only screen and (min-width: 52.5rem) { .vob-timeline .holder .slides section:last-of-type .slide .gatsby-image-wrapper { flex-grow: 1; flex-shrink: 0; flex-basis: calc(50% - 8rem); width: calc(50% - 8rem); align-self: start; } } .vob-timeline .holder .years { position: absolute; bottom: 6rem; transition: left 0.3s; } @media only screen and (max-width: 52.5rem) { .vob-timeline .holder .years { bottom: 3.75rem; } } .vob-timeline .holder .years ul { padding-left: 0; display: flex; align-items: center; justify-content: space-between; position: relative; } .vob-timeline .holder .years ul li { padding-left: 0; list-style: none; margin-bottom: 0; width: 12rem; height: 5rem; text-align: center; } .vob-timeline .holder .years ul li p { color: var(--kite-color-gray-30); font-size: 2.25rem; margin-bottom: 0.75rem; transform: scale(1); transition: all 0.5s; } @media only screen and (min-width: 52.5rem) { .vob-timeline .holder .years ul li p { margin-bottom: 1rem; } } .vob-timeline .holder .years ul li::after { content: " "; display: block; width: 1rem; height: 1rem; margin: 0 auto; border-radius: 1rem; border: 1px solid var(--kite-color-black); background-color: var(--kite-color-blue-20); transition: all 0.5s; transform: translateY(1); } .vob-timeline .holder .years ul li.current p { transform: scale(1.25) translateY(-0.25rem); } .vob-timeline .holder .years ul li.current::after { background-color: #faa41a; width: 1.5rem; height: 1.5rem; transform: translateY(-0.25rem); } .vob-timeline .holder .years ul li.gap { width: 100vw; } .vob-timeline .holder .years ul li.gap::after { display: none; } @media only screen and (max-width: 52.5rem) { .vob-timeline .holder .years ul li.gap { display: none; } } .vob-timeline .holder .years ul::after { content: " "; position: absolute; left: 6rem; right: 0; bottom: 0.5rem; border-top: 1px solid var(--kite-color-black); z-index: -1; } @media only screen and (max-width: 52.5rem) { .vob-timeline .holder .years ul::after { right: 6rem; } } .vob-timeline .holder .years .endcap { position: absolute; right: min(-5vw, -4rem); bottom: 2rem; border-left: 1px solid var(--kite-color-black); border-top: 1px solid var(--kite-color-black); top: -50vh; width: max(4rem, 5vw); } @media only screen and (min-width: 80rem) { .vob-timeline .holder .years .endcap { width: min(6rem, 10vw); right: max(-10vw, -6rem); } } .vob-timeline .holder .years .endcap::after { content: " "; width: 1rem; height: 1rem; display: block; background-color: var(--kite-color-blue-20); margin-left: 100%; margin-top: -0.5rem; border-radius: 1rem; border: 1px solid var(--kite-color-black); } @media only screen and (max-width: 52.5rem) { .vob-timeline .holder .years .endcap { display: none; } } .vob-timeline .holder .year-details { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 4rem; transition: bottom 0.5s; } .vob-timeline .holder .year-details h5 { text-align: center; display: flex; flex-direction: column; color: #faa41a; font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .vob-timeline .holder .year-details h5 { font-size: 2.25rem; line-height: 1.27778; } } .vob-timeline .holder .year-details h5 small { color: var(--kite-color-gray-30); font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .vob-timeline .holder .year-details h5 small { font-size: 0.75rem; } } @media only screen and (max-width: 52.5rem) { .vob-timeline .holder .year-details { bottom: 0.5rem; } .vob-timeline .holder .year-details h5 { font-size: 2rem; } } .vob-timeline .holder .year-details.hidden { bottom: -16rem; } @charset "UTF-8"; .vob-wmm { background: url(/static/vob-bg-2-e02aca00e206cff3cf4d2723dcecf11d.jpg) no-repeat center center, #eee; background-size: cover; margin-top: -1rem; margin-bottom: -4rem; padding: 6rem 0; } .vob-wmm h2 { text-align: center; color: var(--kite-color-dark-blue-10); } .vob-wmm ul { padding-left: 0; display: flex; align-items: stretch; justify-content: center; gap: 1rem; margin-top: 2rem; } .vob-wmm ul li { position: relative; padding-left: 0; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 2rem; background: var(--kite-color-white); border-radius: 0.25rem; border: 1px solid var(--kite-color-gray-20); flex: 1 1 34%; } .vob-wmm ul li:not(.active) { background: var(--kite-color-gray-20); } .vob-wmm ul li:not(.active) figure { color: var(--kite-color-gray-30); } .vob-wmm ul li.active { border-bottom: 0.25rem solid var(--kite-color-blue-20); } .vob-wmm ul li.active::after { content: "▼"; color: var(--kite-color-blue-20); position: absolute; font-size: 20px; top: calc(100% - 6px); left: calc(50% - 10px); } .vob-wmm ul li button { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: none; border: none; cursor: pointer; } .vob-wmm ul li figure { align-self: center; color: var(--kite-color-blue-20); height: 5rem; width: 5rem; position: relative; display: block; } .vob-wmm ul li figure svg { width: 100%; height: 100%; } .vob-wmm ul li h3 { text-align: center; font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .vob-wmm ul li h3 { font-size: 1.25rem; line-height: 1.3; } } .vob-wmm ul li p { display: block; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; padding: 0; position: absolute; } @media only screen and (max-width: 52.5rem) { .vob-wmm ul { flex-direction: column; gap: 0; } .vob-wmm ul li { margin-bottom: 0.25rem; border: none; } .vob-wmm ul li p.visible, .vob-wmm ul li p:not(.visible) { height: 0; clip: unset; width: auto; position: relative; clip-path: unset; display: block; transition: max-height 0.5s ease-in-out; overflow: hidden; max-height: 0; } .vob-wmm ul li.active { border-bottom: none; } .vob-wmm ul li.active::after { display: none; } .vob-wmm ul li.active p { height: 100%; border-top: 0.25rem solid var(--kite-color-blue-20); padding-top: 1rem; max-height: 200vh; } .vob-wmm ul li.active p::before { content: "▼"; color: var(--kite-color-blue-20); position: absolute; font-size: 20px; top: -8px; left: calc(50% - 10px); } } .vob-wmm p { display: block; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .vob-wmm p { font-size: 1.125rem; line-height: 1.3333333; } } .vob-wmm p { font-weight: 400; line-height: 1.5; } .vob-wmm p:not(.visible) { display: none; } @media only screen and (max-width: 52.5rem) { .vob-wmm p { display: none; } } .paragraph__video_callout { margin-top: 4rem; padding: 4rem 0; } .paragraph__video_callout.left .kite-grid .kite-cell:last-child { padding-left: 3rem; } .paragraph__video_callout.right .kite-grid { flex-direction: row-reverse; } .paragraph__video_callout.right .kite-grid .kite-cell:last-child { padding-right: 3rem; } .paragraph__video_callout.gray.right { background: linear-gradient(to left, transparent 0%, transparent calc((100vw - 780px) / 2 + 1.5rem), var(--kite-color-gray-10) calc((100vw - 1280px) / 2 + 1.5rem), var(--kite-color-gray-10) 100%); } .paragraph__video_callout.gray.left { background: linear-gradient(to right, transparent 0%, transparent calc((100vw - 780px) / 2 + 1.5rem), var(--kite-color-gray-10) calc((100vw - 1280px) / 2 + 1.5rem), var(--kite-color-gray-10) 100%); } @media only screen and (max-width: 52.5rem) { .paragraph__video_callout.gray.right, .paragraph__video_callout.gray.left { background: var(--kite-color-gray-10); } } .paragraph__video_callout.gray .content p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__video_callout.gray .content p a:hover, .paragraph__video_callout.gray .content p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__video_callout.bright_blue { color: var(--kite-color-white); } .paragraph__video_callout.bright_blue.right { background: linear-gradient(to left, transparent 0%, transparent calc((100vw - 780px) / 2 + 1.5rem), var(--kite-color-blue-30) calc((100vw - 1280px) / 2 + 1.5rem), var(--kite-color-blue-30) 100%); } .paragraph__video_callout.bright_blue.left { background: linear-gradient(to right, transparent 0%, transparent calc((100vw - 780px) / 2 + 1.5rem), var(--kite-color-blue-30) calc((100vw - 1280px) / 2 + 1.5rem), var(--kite-color-blue-30) 100%); } @media only screen and (max-width: 52.5rem) { .paragraph__video_callout.bright_blue.right, .paragraph__video_callout.bright_blue.left { background: var(--kite-color-blue-30); } } .paragraph__video_callout.bright_blue .content p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__video_callout.bright_blue .content p a:hover, .paragraph__video_callout.bright_blue .content p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__video_callout.dark_blue { color: var(--kite-color-white); } .paragraph__video_callout.dark_blue.right { background: linear-gradient(to left, transparent 0%, transparent calc((100vw - 780px) / 2 + 1.5rem), var(--kite-color-dark-blue-10) calc((100vw - 1280px) / 2 + 1.5rem), var(--kite-color-dark-blue-10) 100%); } .paragraph__video_callout.dark_blue.left { background: linear-gradient(to right, transparent 0%, transparent calc((100vw - 780px) / 2 + 1.5rem), var(--kite-color-dark-blue-10) calc((100vw - 1280px) / 2 + 1.5rem), var(--kite-color-dark-blue-10) 100%); } @media only screen and (max-width: 52.5rem) { .paragraph__video_callout.dark_blue.right, .paragraph__video_callout.dark_blue.left { background: var(--kite-color-dark-blue-10); } } .paragraph__video_callout.dark_blue .content p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__video_callout.dark_blue .content p a:hover, .paragraph__video_callout.dark_blue .content p a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .paragraph__video_callout .content { font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .paragraph__video_callout .content { font-size: 1rem; line-height: 1.625; } } .paragraph__video_callout .content p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .paragraph__video_callout .content p a:hover, .paragraph__video_callout .content p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .paragraph__video_callout .kite-grid { align-items: center; } .paragraph__video_callout .video { min-height: 416px; } .paragraph__video_callout .video iframe { width: 100%; height: 410px; object-fit: contain; } .paragraph__video_card_trio_card { list-style: none; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; border-radius: 4px; padding: 1rem; overflow: hidden; border: 1px solid var(--kite-color-gray-20); position: relative; background: var(--kite-color-white); min-height: 31.25rem; cursor: pointer; transition: box-shadow 0.5s; } .paragraph__video_card_trio_card:hover, .paragraph__video_card_trio_card:focus, .paragraph__video_card_trio_card:focus-within { box-shadow: 0 1px 5px 0 rgba(99, 115, 138, 0.2), 0 2px 2px 0 rgba(99, 115, 138, 0.14), 0 3px 1px -2px rgba(99, 115, 138, 0.12); } .paragraph__video_card_trio_card:hover .news, .paragraph__video_card_trio_card:focus .news, .paragraph__video_card_trio_card:focus-within .news { color: var(--kite-color-blue-30); } .paragraph__video_card_trio_card .gatsby-image-wrapper { order: 0; margin: -1rem; margin-bottom: 1rem; height: 16rem; } .paragraph__video_card_trio_card .gatsby-image-wrapper img { height: 100%; width: 100%; object-fit: cover; object-position: top; } .paragraph__video_card_trio_card h3, .paragraph__video_card_trio_card small { order: 1; } .paragraph__video_card_trio_card p, .paragraph__video_card_trio_card div.desc { order: 2; flex: 1 0 auto; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio_card p, .paragraph__video_card_trio_card div.desc { margin-bottom: 1.25rem; } } .paragraph__video_card_trio_card a { text-decoration: none; font-weight: 500; order: 3; line-break: anywhere; } .paragraph__video_card_trio_card a.watch-link { width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; outline: none; } .paragraph__video_card_trio_card a.watch-link::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio_card a.watch-link { /** We'll be hiding the link text from the screen, without removing it for screen readers. This is a better practice than wrapping the whole card in an anchor tag. **/ display: flex; gap: 0.5rem; align-items: center; position: static; width: auto; height: auto; padding: unset; margin: unset; overflow: hidden; clip: none; white-space: nowrap; border: 0; outline: none; } } .paragraph__video_card_trio { background: var(--kite-color-gray-10); padding: 2.5rem 1rem; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio { padding: 2.5rem 2rem 3rem; } } .paragraph__video_card_trio hgroup { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; padding: 0; margin-bottom: 1.25rem; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio hgroup { padding: 0 2rem 0 1rem; flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } } .paragraph__video_card_trio hgroup h2 { margin-bottom: 0; } .paragraph__video_card_trio hgroup a { text-decoration: none; display: flex; align-items: center; gap: 0.75rem; } .paragraph__video_card_trio hgroup a p { margin: 0; } .paragraph__video_card_trio ul { display: none; padding-left: 0; } .paragraph__video_card_trio ul li:not(:first-child) { margin-top: 1rem; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio ul { display: flex; flex-direction: row; } .paragraph__video_card_trio ul li { flex: 0 1 33.3333%; min-height: 100%; } .paragraph__video_card_trio ul li.paragraph__video_card_trio_card { margin-top: 0; } .paragraph__video_card_trio ul li:not(:last-child) { margin-right: 1rem; } } .paragraph__video_card_trio ul.sm-screen { display: block; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio ul.sm-screen { display: none; } } .paragraph__video_card_trio .video-idx-controls { display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem; } @media only screen and (min-width: 52.5rem) { .paragraph__video_card_trio .video-idx-controls { display: none; } } .paragraph__video_card_trio .video-idx-controls p { margin: 0; } .paragraph__video_card_trio .video-idx-controls__button { background-color: transparent; border: none; padding: 0; margin: 0; transition: background-color 0.2s ease-in-out; } .white-space { width: 100%; } .white-space--10 { min-height: 0.625rem; } .white-space--20 { min-height: 1.25rem; } .white-space--30 { min-height: 1.875rem; } .web-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .web-table__table { max-width: 100%; overflow-x: scroll; position: relative; } .web-table__table:focus { outline: 2px solid; } .web-table__table table { border-collapse: collapse; margin-bottom: 1rem; } .web-table__table thead tr:nth-of-type(1) { border-bottom: 1px solid var(--kite-color-gray-20); } .web-table__table th { min-width: fit-content; max-width: 12.25rem; padding: 1.5rem; text-align: start; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .web-table__table th { font-size: 1rem; line-height: 1.625; } } .web-table__table th { font-weight: 700; } .web-table__table th:first-of-type { min-width: 12.25rem; } @media only screen and (min-width: 52.5rem) { .web-table__table tbody th { min-width: 0; } } .web-table__table tbody td { min-width: 196px; padding: 1.5rem; text-align: left; vertical-align: top; font-weight: 400; font-size: 1rem; line-height: 1.625; } @media only screen and (min-width: 52.5rem) { .web-table__table tbody td { min-width: 16.25rem; } } .web-table__table tbody td a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .web-table__table tbody td a:hover, .web-table__table tbody td a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .web-table__table--dark { color: var(--kite-color-white); } .web-table__table--dark tbody td a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .web-table__table--dark tbody td a:hover, .web-table__table--dark tbody td a:visited:hover { color: var(--kite-color-white); text-decoration: underline; } } .web-table__table--dark thead tr:nth-of-type(1) { border-bottom: 1px solid var(--kite-color-dark-blue-10); } .web-table__table--dark tr { background-color: var(--kite-color-dark-blue-30); } .web-table__error { color: var(--kite-color-red-20); } .web-table__header { padding: 0.625rem 0; display: flex; flex-direction: column; gap: 1rem; } .web-table__link { display: flex; align-items: center; text-decoration: none; gap: 1rem; font-weight: 500; padding: 0.5rem 0; } .web-table__title, .web-table__description { padding: 0; margin: 0; } .web-table__image-wrapper { display: flex; justify-content: center; align-items: start; flex-direction: column; } .web-table__image { width: 6.25rem; } .web-table__image--large { width: 9.25rem; } .web-table .hl-none tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-none--dark tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-1 thead th:nth-of-type(2) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-1 tbody td:nth-of-type(1) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-1 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-1 tbody tr:nth-of-type(even) td:nth-of-type(1) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-1--dark thead th:nth-of-type(2) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-1--dark tbody td:nth-of-type(1) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-1--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-1--dark tbody tr:nth-of-type(even) td:nth-of-type(1) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-2 thead th:nth-of-type(3) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-2 tbody td:nth-of-type(2) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-2 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-2 tbody tr:nth-of-type(even) td:nth-of-type(2) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-2--dark thead th:nth-of-type(3) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-2--dark tbody td:nth-of-type(2) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-2--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-2--dark tbody tr:nth-of-type(even) td:nth-of-type(2) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-3 thead th:nth-of-type(4) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-3 tbody td:nth-of-type(3) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-3 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-3 tbody tr:nth-of-type(even) td:nth-of-type(3) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-3--dark thead th:nth-of-type(4) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-3--dark tbody td:nth-of-type(3) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-3--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-3--dark tbody tr:nth-of-type(even) td:nth-of-type(3) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-4 thead th:nth-of-type(5) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-4 tbody td:nth-of-type(4) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-4 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-4 tbody tr:nth-of-type(even) td:nth-of-type(4) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-4--dark thead th:nth-of-type(5) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-4--dark tbody td:nth-of-type(4) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-4--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-4--dark tbody tr:nth-of-type(even) td:nth-of-type(4) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-5 thead th:nth-of-type(6) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-5 tbody td:nth-of-type(5) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-5 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-5 tbody tr:nth-of-type(even) td:nth-of-type(5) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-5--dark thead th:nth-of-type(6) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-5--dark tbody td:nth-of-type(5) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-5--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-5--dark tbody tr:nth-of-type(even) td:nth-of-type(5) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-6 thead th:nth-of-type(7) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-6 tbody td:nth-of-type(6) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-6 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-6 tbody tr:nth-of-type(even) td:nth-of-type(6) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-6--dark thead th:nth-of-type(7) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-6--dark tbody td:nth-of-type(6) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-6--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-6--dark tbody tr:nth-of-type(even) td:nth-of-type(6) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-7 thead th:nth-of-type(8) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-7 tbody td:nth-of-type(7) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-7 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-7 tbody tr:nth-of-type(even) td:nth-of-type(7) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-7--dark thead th:nth-of-type(8) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-7--dark tbody td:nth-of-type(7) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-7--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-7--dark tbody tr:nth-of-type(even) td:nth-of-type(7) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-8 thead th:nth-of-type(9) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-8 tbody td:nth-of-type(8) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-8 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-8 tbody tr:nth-of-type(even) td:nth-of-type(8) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-8--dark thead th:nth-of-type(9) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-8--dark tbody td:nth-of-type(8) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-8--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-8--dark tbody tr:nth-of-type(even) td:nth-of-type(8) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-9 thead th:nth-of-type(10) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-9 tbody td:nth-of-type(9) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-9 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-9 tbody tr:nth-of-type(even) td:nth-of-type(9) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-9--dark thead th:nth-of-type(10) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-9--dark tbody td:nth-of-type(9) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-9--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-9--dark tbody tr:nth-of-type(even) td:nth-of-type(9) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-10 thead th:nth-of-type(11) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-10 tbody td:nth-of-type(10) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-10 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-10 tbody tr:nth-of-type(even) td:nth-of-type(10) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-10--dark thead th:nth-of-type(11) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-10--dark tbody td:nth-of-type(10) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-10--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-10--dark tbody tr:nth-of-type(even) td:nth-of-type(10) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-11 thead th:nth-of-type(12) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-11 tbody td:nth-of-type(11) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-11 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-11 tbody tr:nth-of-type(even) td:nth-of-type(11) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-11--dark thead th:nth-of-type(12) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-11--dark tbody td:nth-of-type(11) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-11--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-11--dark tbody tr:nth-of-type(even) td:nth-of-type(11) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-12 thead th:nth-of-type(13) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-12 tbody td:nth-of-type(12) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-12 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-12 tbody tr:nth-of-type(even) td:nth-of-type(12) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-12--dark thead th:nth-of-type(13) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-12--dark tbody td:nth-of-type(12) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-12--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-12--dark tbody tr:nth-of-type(even) td:nth-of-type(12) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-13 thead th:nth-of-type(14) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-13 tbody td:nth-of-type(13) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-13 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-13 tbody tr:nth-of-type(even) td:nth-of-type(13) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-13--dark thead th:nth-of-type(14) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-13--dark tbody td:nth-of-type(13) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-13--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-13--dark tbody tr:nth-of-type(even) td:nth-of-type(13) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-14 thead th:nth-of-type(15) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-14 tbody td:nth-of-type(14) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-14 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-14 tbody tr:nth-of-type(even) td:nth-of-type(14) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-14--dark thead th:nth-of-type(15) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-14--dark tbody td:nth-of-type(14) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-14--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-14--dark tbody tr:nth-of-type(even) td:nth-of-type(14) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-15 thead th:nth-of-type(16) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-15 tbody td:nth-of-type(15) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-15 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-15 tbody tr:nth-of-type(even) td:nth-of-type(15) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-15--dark thead th:nth-of-type(16) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-15--dark tbody td:nth-of-type(15) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-15--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-15--dark tbody tr:nth-of-type(even) td:nth-of-type(15) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-16 thead th:nth-of-type(17) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-16 tbody td:nth-of-type(16) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-16 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-16 tbody tr:nth-of-type(even) td:nth-of-type(16) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-16--dark thead th:nth-of-type(17) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-16--dark tbody td:nth-of-type(16) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-16--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-16--dark tbody tr:nth-of-type(even) td:nth-of-type(16) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-17 thead th:nth-of-type(18) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-17 tbody td:nth-of-type(17) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-17 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-17 tbody tr:nth-of-type(even) td:nth-of-type(17) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-17--dark thead th:nth-of-type(18) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-17--dark tbody td:nth-of-type(17) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-17--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-17--dark tbody tr:nth-of-type(even) td:nth-of-type(17) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-18 thead th:nth-of-type(19) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-18 tbody td:nth-of-type(18) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-18 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-18 tbody tr:nth-of-type(even) td:nth-of-type(18) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-18--dark thead th:nth-of-type(19) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-18--dark tbody td:nth-of-type(18) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-18--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-18--dark tbody tr:nth-of-type(even) td:nth-of-type(18) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-19 thead th:nth-of-type(20) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-19 tbody td:nth-of-type(19) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-19 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-19 tbody tr:nth-of-type(even) td:nth-of-type(19) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-19--dark thead th:nth-of-type(20) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-19--dark tbody td:nth-of-type(19) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-19--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-19--dark tbody tr:nth-of-type(even) td:nth-of-type(19) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-20 thead th:nth-of-type(21) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-20 tbody td:nth-of-type(20) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-20 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-20 tbody tr:nth-of-type(even) td:nth-of-type(20) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-20--dark thead th:nth-of-type(21) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-20--dark tbody td:nth-of-type(20) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-20--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-20--dark tbody tr:nth-of-type(even) td:nth-of-type(20) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-21 thead th:nth-of-type(22) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-21 tbody td:nth-of-type(21) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-21 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-21 tbody tr:nth-of-type(even) td:nth-of-type(21) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-21--dark thead th:nth-of-type(22) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-21--dark tbody td:nth-of-type(21) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-21--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-21--dark tbody tr:nth-of-type(even) td:nth-of-type(21) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-22 thead th:nth-of-type(23) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-22 tbody td:nth-of-type(22) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-22 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-22 tbody tr:nth-of-type(even) td:nth-of-type(22) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-22--dark thead th:nth-of-type(23) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-22--dark tbody td:nth-of-type(22) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-22--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-22--dark tbody tr:nth-of-type(even) td:nth-of-type(22) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-23 thead th:nth-of-type(24) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-23 tbody td:nth-of-type(23) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-23 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-23 tbody tr:nth-of-type(even) td:nth-of-type(23) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-23--dark thead th:nth-of-type(24) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-23--dark tbody td:nth-of-type(23) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-23--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-23--dark tbody tr:nth-of-type(even) td:nth-of-type(23) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-24 thead th:nth-of-type(25) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-24 tbody td:nth-of-type(24) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-24 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-24 tbody tr:nth-of-type(even) td:nth-of-type(24) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-24--dark thead th:nth-of-type(25) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-24--dark tbody td:nth-of-type(24) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-24--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-24--dark tbody tr:nth-of-type(even) td:nth-of-type(24) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-25 thead th:nth-of-type(26) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-25 tbody td:nth-of-type(25) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-25 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-25 tbody tr:nth-of-type(even) td:nth-of-type(25) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-25--dark thead th:nth-of-type(26) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-25--dark tbody td:nth-of-type(25) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-25--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-25--dark tbody tr:nth-of-type(even) td:nth-of-type(25) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-26 thead th:nth-of-type(27) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-26 tbody td:nth-of-type(26) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-26 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-26 tbody tr:nth-of-type(even) td:nth-of-type(26) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-26--dark thead th:nth-of-type(27) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-26--dark tbody td:nth-of-type(26) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-26--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-26--dark tbody tr:nth-of-type(even) td:nth-of-type(26) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-27 thead th:nth-of-type(28) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-27 tbody td:nth-of-type(27) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-27 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-27 tbody tr:nth-of-type(even) td:nth-of-type(27) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-27--dark thead th:nth-of-type(28) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-27--dark tbody td:nth-of-type(27) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-27--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-27--dark tbody tr:nth-of-type(even) td:nth-of-type(27) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-28 thead th:nth-of-type(29) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-28 tbody td:nth-of-type(28) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-28 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-28 tbody tr:nth-of-type(even) td:nth-of-type(28) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-28--dark thead th:nth-of-type(29) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-28--dark tbody td:nth-of-type(28) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-28--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-28--dark tbody tr:nth-of-type(even) td:nth-of-type(28) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-29 thead th:nth-of-type(30) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-29 tbody td:nth-of-type(29) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-29 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-29 tbody tr:nth-of-type(even) td:nth-of-type(29) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-29--dark thead th:nth-of-type(30) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-29--dark tbody td:nth-of-type(29) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-29--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-29--dark tbody tr:nth-of-type(even) td:nth-of-type(29) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-30 thead th:nth-of-type(31) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-30 tbody td:nth-of-type(30) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-30 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-30 tbody tr:nth-of-type(even) td:nth-of-type(30) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-30--dark thead th:nth-of-type(31) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-30--dark tbody td:nth-of-type(30) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-30--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-30--dark tbody tr:nth-of-type(even) td:nth-of-type(30) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-31 thead th:nth-of-type(32) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-31 tbody td:nth-of-type(31) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-31 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-31 tbody tr:nth-of-type(even) td:nth-of-type(31) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-31--dark thead th:nth-of-type(32) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-31--dark tbody td:nth-of-type(31) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-31--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-31--dark tbody tr:nth-of-type(even) td:nth-of-type(31) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-32 thead th:nth-of-type(33) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-32 tbody td:nth-of-type(32) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-32 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-32 tbody tr:nth-of-type(even) td:nth-of-type(32) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-32--dark thead th:nth-of-type(33) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-32--dark tbody td:nth-of-type(32) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-32--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-32--dark tbody tr:nth-of-type(even) td:nth-of-type(32) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-33 thead th:nth-of-type(34) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-33 tbody td:nth-of-type(33) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-33 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-33 tbody tr:nth-of-type(even) td:nth-of-type(33) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-33--dark thead th:nth-of-type(34) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-33--dark tbody td:nth-of-type(33) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-33--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-33--dark tbody tr:nth-of-type(even) td:nth-of-type(33) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-34 thead th:nth-of-type(35) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-34 tbody td:nth-of-type(34) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-34 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-34 tbody tr:nth-of-type(even) td:nth-of-type(34) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-34--dark thead th:nth-of-type(35) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-34--dark tbody td:nth-of-type(34) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-34--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-34--dark tbody tr:nth-of-type(even) td:nth-of-type(34) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-35 thead th:nth-of-type(36) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-35 tbody td:nth-of-type(35) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-35 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-35 tbody tr:nth-of-type(even) td:nth-of-type(35) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-35--dark thead th:nth-of-type(36) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-35--dark tbody td:nth-of-type(35) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-35--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-35--dark tbody tr:nth-of-type(even) td:nth-of-type(35) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-36 thead th:nth-of-type(37) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-36 tbody td:nth-of-type(36) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-36 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-36 tbody tr:nth-of-type(even) td:nth-of-type(36) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-36--dark thead th:nth-of-type(37) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-36--dark tbody td:nth-of-type(36) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-36--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-36--dark tbody tr:nth-of-type(even) td:nth-of-type(36) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-37 thead th:nth-of-type(38) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-37 tbody td:nth-of-type(37) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-37 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-37 tbody tr:nth-of-type(even) td:nth-of-type(37) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-37--dark thead th:nth-of-type(38) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-37--dark tbody td:nth-of-type(37) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-37--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-37--dark tbody tr:nth-of-type(even) td:nth-of-type(37) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-38 thead th:nth-of-type(39) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-38 tbody td:nth-of-type(38) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-38 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-38 tbody tr:nth-of-type(even) td:nth-of-type(38) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-38--dark thead th:nth-of-type(39) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-38--dark tbody td:nth-of-type(38) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-38--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-38--dark tbody tr:nth-of-type(even) td:nth-of-type(38) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-39 thead th:nth-of-type(40) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-39 tbody td:nth-of-type(39) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-39 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-39 tbody tr:nth-of-type(even) td:nth-of-type(39) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-39--dark thead th:nth-of-type(40) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-39--dark tbody td:nth-of-type(39) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-39--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-39--dark tbody tr:nth-of-type(even) td:nth-of-type(39) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-40 thead th:nth-of-type(41) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-40 tbody td:nth-of-type(40) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-40 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-40 tbody tr:nth-of-type(even) td:nth-of-type(40) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-40--dark thead th:nth-of-type(41) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-40--dark tbody td:nth-of-type(40) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-40--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-40--dark tbody tr:nth-of-type(even) td:nth-of-type(40) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-41 thead th:nth-of-type(42) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-41 tbody td:nth-of-type(41) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-41 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-41 tbody tr:nth-of-type(even) td:nth-of-type(41) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-41--dark thead th:nth-of-type(42) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-41--dark tbody td:nth-of-type(41) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-41--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-41--dark tbody tr:nth-of-type(even) td:nth-of-type(41) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-42 thead th:nth-of-type(43) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-42 tbody td:nth-of-type(42) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-42 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-42 tbody tr:nth-of-type(even) td:nth-of-type(42) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-42--dark thead th:nth-of-type(43) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-42--dark tbody td:nth-of-type(42) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-42--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-42--dark tbody tr:nth-of-type(even) td:nth-of-type(42) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-43 thead th:nth-of-type(44) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-43 tbody td:nth-of-type(43) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-43 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-43 tbody tr:nth-of-type(even) td:nth-of-type(43) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-43--dark thead th:nth-of-type(44) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-43--dark tbody td:nth-of-type(43) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-43--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-43--dark tbody tr:nth-of-type(even) td:nth-of-type(43) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-44 thead th:nth-of-type(45) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-44 tbody td:nth-of-type(44) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-44 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-44 tbody tr:nth-of-type(even) td:nth-of-type(44) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-44--dark thead th:nth-of-type(45) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-44--dark tbody td:nth-of-type(44) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-44--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-44--dark tbody tr:nth-of-type(even) td:nth-of-type(44) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-45 thead th:nth-of-type(46) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-45 tbody td:nth-of-type(45) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-45 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-45 tbody tr:nth-of-type(even) td:nth-of-type(45) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-45--dark thead th:nth-of-type(46) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-45--dark tbody td:nth-of-type(45) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-45--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-45--dark tbody tr:nth-of-type(even) td:nth-of-type(45) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-46 thead th:nth-of-type(47) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-46 tbody td:nth-of-type(46) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-46 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-46 tbody tr:nth-of-type(even) td:nth-of-type(46) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-46--dark thead th:nth-of-type(47) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-46--dark tbody td:nth-of-type(46) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-46--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-46--dark tbody tr:nth-of-type(even) td:nth-of-type(46) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-47 thead th:nth-of-type(48) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-47 tbody td:nth-of-type(47) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-47 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-47 tbody tr:nth-of-type(even) td:nth-of-type(47) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-47--dark thead th:nth-of-type(48) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-47--dark tbody td:nth-of-type(47) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-47--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-47--dark tbody tr:nth-of-type(even) td:nth-of-type(47) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-48 thead th:nth-of-type(49) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-48 tbody td:nth-of-type(48) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-48 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-48 tbody tr:nth-of-type(even) td:nth-of-type(48) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-48--dark thead th:nth-of-type(49) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-48--dark tbody td:nth-of-type(48) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-48--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-48--dark tbody tr:nth-of-type(even) td:nth-of-type(48) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-49 thead th:nth-of-type(50) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-49 tbody td:nth-of-type(49) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-49 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-49 tbody tr:nth-of-type(even) td:nth-of-type(49) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-49--dark thead th:nth-of-type(50) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-49--dark tbody td:nth-of-type(49) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-49--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-49--dark tbody tr:nth-of-type(even) td:nth-of-type(49) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-50 thead th:nth-of-type(51) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-50 tbody td:nth-of-type(50) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-50 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-50 tbody tr:nth-of-type(even) td:nth-of-type(50) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-50--dark thead th:nth-of-type(51) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-50--dark tbody td:nth-of-type(50) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-50--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-50--dark tbody tr:nth-of-type(even) td:nth-of-type(50) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-51 thead th:nth-of-type(52) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-51 tbody td:nth-of-type(51) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-51 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-51 tbody tr:nth-of-type(even) td:nth-of-type(51) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-51--dark thead th:nth-of-type(52) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-51--dark tbody td:nth-of-type(51) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-51--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-51--dark tbody tr:nth-of-type(even) td:nth-of-type(51) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-52 thead th:nth-of-type(53) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-52 tbody td:nth-of-type(52) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-52 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-52 tbody tr:nth-of-type(even) td:nth-of-type(52) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-52--dark thead th:nth-of-type(53) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-52--dark tbody td:nth-of-type(52) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-52--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-52--dark tbody tr:nth-of-type(even) td:nth-of-type(52) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-53 thead th:nth-of-type(54) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-53 tbody td:nth-of-type(53) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-53 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-53 tbody tr:nth-of-type(even) td:nth-of-type(53) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-53--dark thead th:nth-of-type(54) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-53--dark tbody td:nth-of-type(53) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-53--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-53--dark tbody tr:nth-of-type(even) td:nth-of-type(53) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-54 thead th:nth-of-type(55) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-54 tbody td:nth-of-type(54) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-54 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-54 tbody tr:nth-of-type(even) td:nth-of-type(54) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-54--dark thead th:nth-of-type(55) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-54--dark tbody td:nth-of-type(54) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-54--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-54--dark tbody tr:nth-of-type(even) td:nth-of-type(54) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-55 thead th:nth-of-type(56) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-55 tbody td:nth-of-type(55) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-55 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-55 tbody tr:nth-of-type(even) td:nth-of-type(55) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-55--dark thead th:nth-of-type(56) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-55--dark tbody td:nth-of-type(55) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-55--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-55--dark tbody tr:nth-of-type(even) td:nth-of-type(55) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-56 thead th:nth-of-type(57) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-56 tbody td:nth-of-type(56) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-56 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-56 tbody tr:nth-of-type(even) td:nth-of-type(56) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-56--dark thead th:nth-of-type(57) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-56--dark tbody td:nth-of-type(56) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-56--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-56--dark tbody tr:nth-of-type(even) td:nth-of-type(56) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-57 thead th:nth-of-type(58) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-57 tbody td:nth-of-type(57) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-57 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-57 tbody tr:nth-of-type(even) td:nth-of-type(57) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-57--dark thead th:nth-of-type(58) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-57--dark tbody td:nth-of-type(57) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-57--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-57--dark tbody tr:nth-of-type(even) td:nth-of-type(57) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-58 thead th:nth-of-type(59) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-58 tbody td:nth-of-type(58) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-58 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-58 tbody tr:nth-of-type(even) td:nth-of-type(58) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-58--dark thead th:nth-of-type(59) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-58--dark tbody td:nth-of-type(58) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-58--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-58--dark tbody tr:nth-of-type(even) td:nth-of-type(58) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-59 thead th:nth-of-type(60) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-59 tbody td:nth-of-type(59) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-59 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-59 tbody tr:nth-of-type(even) td:nth-of-type(59) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-59--dark thead th:nth-of-type(60) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-59--dark tbody td:nth-of-type(59) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-59--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-59--dark tbody tr:nth-of-type(even) td:nth-of-type(59) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-60 thead th:nth-of-type(61) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-60 tbody td:nth-of-type(60) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-60 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-60 tbody tr:nth-of-type(even) td:nth-of-type(60) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-60--dark thead th:nth-of-type(61) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-60--dark tbody td:nth-of-type(60) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-60--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-60--dark tbody tr:nth-of-type(even) td:nth-of-type(60) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-61 thead th:nth-of-type(62) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-61 tbody td:nth-of-type(61) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-61 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-61 tbody tr:nth-of-type(even) td:nth-of-type(61) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-61--dark thead th:nth-of-type(62) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-61--dark tbody td:nth-of-type(61) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-61--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-61--dark tbody tr:nth-of-type(even) td:nth-of-type(61) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-62 thead th:nth-of-type(63) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-62 tbody td:nth-of-type(62) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-62 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-62 tbody tr:nth-of-type(even) td:nth-of-type(62) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-62--dark thead th:nth-of-type(63) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-62--dark tbody td:nth-of-type(62) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-62--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-62--dark tbody tr:nth-of-type(even) td:nth-of-type(62) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-63 thead th:nth-of-type(64) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-63 tbody td:nth-of-type(63) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-63 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-63 tbody tr:nth-of-type(even) td:nth-of-type(63) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-63--dark thead th:nth-of-type(64) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-63--dark tbody td:nth-of-type(63) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-63--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-63--dark tbody tr:nth-of-type(even) td:nth-of-type(63) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-64 thead th:nth-of-type(65) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-64 tbody td:nth-of-type(64) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-64 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-64 tbody tr:nth-of-type(even) td:nth-of-type(64) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-64--dark thead th:nth-of-type(65) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-64--dark tbody td:nth-of-type(64) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-64--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-64--dark tbody tr:nth-of-type(even) td:nth-of-type(64) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-65 thead th:nth-of-type(66) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-65 tbody td:nth-of-type(65) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-65 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-65 tbody tr:nth-of-type(even) td:nth-of-type(65) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-65--dark thead th:nth-of-type(66) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-65--dark tbody td:nth-of-type(65) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-65--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-65--dark tbody tr:nth-of-type(even) td:nth-of-type(65) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-66 thead th:nth-of-type(67) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-66 tbody td:nth-of-type(66) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-66 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-66 tbody tr:nth-of-type(even) td:nth-of-type(66) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-66--dark thead th:nth-of-type(67) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-66--dark tbody td:nth-of-type(66) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-66--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-66--dark tbody tr:nth-of-type(even) td:nth-of-type(66) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-67 thead th:nth-of-type(68) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-67 tbody td:nth-of-type(67) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-67 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-67 tbody tr:nth-of-type(even) td:nth-of-type(67) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-67--dark thead th:nth-of-type(68) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-67--dark tbody td:nth-of-type(67) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-67--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-67--dark tbody tr:nth-of-type(even) td:nth-of-type(67) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-68 thead th:nth-of-type(69) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-68 tbody td:nth-of-type(68) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-68 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-68 tbody tr:nth-of-type(even) td:nth-of-type(68) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-68--dark thead th:nth-of-type(69) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-68--dark tbody td:nth-of-type(68) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-68--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-68--dark tbody tr:nth-of-type(even) td:nth-of-type(68) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-69 thead th:nth-of-type(70) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-69 tbody td:nth-of-type(69) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-69 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-69 tbody tr:nth-of-type(even) td:nth-of-type(69) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-69--dark thead th:nth-of-type(70) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-69--dark tbody td:nth-of-type(69) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-69--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-69--dark tbody tr:nth-of-type(even) td:nth-of-type(69) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-70 thead th:nth-of-type(71) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-70 tbody td:nth-of-type(70) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-70 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-70 tbody tr:nth-of-type(even) td:nth-of-type(70) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-70--dark thead th:nth-of-type(71) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-70--dark tbody td:nth-of-type(70) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-70--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-70--dark tbody tr:nth-of-type(even) td:nth-of-type(70) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-71 thead th:nth-of-type(72) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-71 tbody td:nth-of-type(71) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-71 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-71 tbody tr:nth-of-type(even) td:nth-of-type(71) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-71--dark thead th:nth-of-type(72) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-71--dark tbody td:nth-of-type(71) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-71--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-71--dark tbody tr:nth-of-type(even) td:nth-of-type(71) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-72 thead th:nth-of-type(73) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-72 tbody td:nth-of-type(72) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-72 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-72 tbody tr:nth-of-type(even) td:nth-of-type(72) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-72--dark thead th:nth-of-type(73) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-72--dark tbody td:nth-of-type(72) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-72--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-72--dark tbody tr:nth-of-type(even) td:nth-of-type(72) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-73 thead th:nth-of-type(74) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-73 tbody td:nth-of-type(73) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-73 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-73 tbody tr:nth-of-type(even) td:nth-of-type(73) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-73--dark thead th:nth-of-type(74) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-73--dark tbody td:nth-of-type(73) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-73--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-73--dark tbody tr:nth-of-type(even) td:nth-of-type(73) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-74 thead th:nth-of-type(75) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-74 tbody td:nth-of-type(74) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-74 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-74 tbody tr:nth-of-type(even) td:nth-of-type(74) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-74--dark thead th:nth-of-type(75) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-74--dark tbody td:nth-of-type(74) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-74--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-74--dark tbody tr:nth-of-type(even) td:nth-of-type(74) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-75 thead th:nth-of-type(76) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-75 tbody td:nth-of-type(75) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-75 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-75 tbody tr:nth-of-type(even) td:nth-of-type(75) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-75--dark thead th:nth-of-type(76) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-75--dark tbody td:nth-of-type(75) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-75--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-75--dark tbody tr:nth-of-type(even) td:nth-of-type(75) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-76 thead th:nth-of-type(77) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-76 tbody td:nth-of-type(76) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-76 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-76 tbody tr:nth-of-type(even) td:nth-of-type(76) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-76--dark thead th:nth-of-type(77) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-76--dark tbody td:nth-of-type(76) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-76--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-76--dark tbody tr:nth-of-type(even) td:nth-of-type(76) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-77 thead th:nth-of-type(78) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-77 tbody td:nth-of-type(77) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-77 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-77 tbody tr:nth-of-type(even) td:nth-of-type(77) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-77--dark thead th:nth-of-type(78) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-77--dark tbody td:nth-of-type(77) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-77--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-77--dark tbody tr:nth-of-type(even) td:nth-of-type(77) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-78 thead th:nth-of-type(79) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-78 tbody td:nth-of-type(78) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-78 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-78 tbody tr:nth-of-type(even) td:nth-of-type(78) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-78--dark thead th:nth-of-type(79) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-78--dark tbody td:nth-of-type(78) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-78--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-78--dark tbody tr:nth-of-type(even) td:nth-of-type(78) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-79 thead th:nth-of-type(80) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-79 tbody td:nth-of-type(79) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-79 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-79 tbody tr:nth-of-type(even) td:nth-of-type(79) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-79--dark thead th:nth-of-type(80) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-79--dark tbody td:nth-of-type(79) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-79--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-79--dark tbody tr:nth-of-type(even) td:nth-of-type(79) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-80 thead th:nth-of-type(81) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-80 tbody td:nth-of-type(80) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-80 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-80 tbody tr:nth-of-type(even) td:nth-of-type(80) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-80--dark thead th:nth-of-type(81) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-80--dark tbody td:nth-of-type(80) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-80--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-80--dark tbody tr:nth-of-type(even) td:nth-of-type(80) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-81 thead th:nth-of-type(82) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-81 tbody td:nth-of-type(81) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-81 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-81 tbody tr:nth-of-type(even) td:nth-of-type(81) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-81--dark thead th:nth-of-type(82) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-81--dark tbody td:nth-of-type(81) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-81--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-81--dark tbody tr:nth-of-type(even) td:nth-of-type(81) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-82 thead th:nth-of-type(83) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-82 tbody td:nth-of-type(82) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-82 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-82 tbody tr:nth-of-type(even) td:nth-of-type(82) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-82--dark thead th:nth-of-type(83) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-82--dark tbody td:nth-of-type(82) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-82--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-82--dark tbody tr:nth-of-type(even) td:nth-of-type(82) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-83 thead th:nth-of-type(84) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-83 tbody td:nth-of-type(83) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-83 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-83 tbody tr:nth-of-type(even) td:nth-of-type(83) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-83--dark thead th:nth-of-type(84) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-83--dark tbody td:nth-of-type(83) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-83--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-83--dark tbody tr:nth-of-type(even) td:nth-of-type(83) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-84 thead th:nth-of-type(85) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-84 tbody td:nth-of-type(84) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-84 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-84 tbody tr:nth-of-type(even) td:nth-of-type(84) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-84--dark thead th:nth-of-type(85) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-84--dark tbody td:nth-of-type(84) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-84--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-84--dark tbody tr:nth-of-type(even) td:nth-of-type(84) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-85 thead th:nth-of-type(86) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-85 tbody td:nth-of-type(85) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-85 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-85 tbody tr:nth-of-type(even) td:nth-of-type(85) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-85--dark thead th:nth-of-type(86) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-85--dark tbody td:nth-of-type(85) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-85--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-85--dark tbody tr:nth-of-type(even) td:nth-of-type(85) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-86 thead th:nth-of-type(87) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-86 tbody td:nth-of-type(86) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-86 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-86 tbody tr:nth-of-type(even) td:nth-of-type(86) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-86--dark thead th:nth-of-type(87) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-86--dark tbody td:nth-of-type(86) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-86--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-86--dark tbody tr:nth-of-type(even) td:nth-of-type(86) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-87 thead th:nth-of-type(88) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-87 tbody td:nth-of-type(87) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-87 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-87 tbody tr:nth-of-type(even) td:nth-of-type(87) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-87--dark thead th:nth-of-type(88) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-87--dark tbody td:nth-of-type(87) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-87--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-87--dark tbody tr:nth-of-type(even) td:nth-of-type(87) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-88 thead th:nth-of-type(89) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-88 tbody td:nth-of-type(88) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-88 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-88 tbody tr:nth-of-type(even) td:nth-of-type(88) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-88--dark thead th:nth-of-type(89) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-88--dark tbody td:nth-of-type(88) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-88--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-88--dark tbody tr:nth-of-type(even) td:nth-of-type(88) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-89 thead th:nth-of-type(90) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-89 tbody td:nth-of-type(89) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-89 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-89 tbody tr:nth-of-type(even) td:nth-of-type(89) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-89--dark thead th:nth-of-type(90) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-89--dark tbody td:nth-of-type(89) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-89--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-89--dark tbody tr:nth-of-type(even) td:nth-of-type(89) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-90 thead th:nth-of-type(91) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-90 tbody td:nth-of-type(90) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-90 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-90 tbody tr:nth-of-type(even) td:nth-of-type(90) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-90--dark thead th:nth-of-type(91) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-90--dark tbody td:nth-of-type(90) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-90--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-90--dark tbody tr:nth-of-type(even) td:nth-of-type(90) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-91 thead th:nth-of-type(92) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-91 tbody td:nth-of-type(91) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-91 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-91 tbody tr:nth-of-type(even) td:nth-of-type(91) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-91--dark thead th:nth-of-type(92) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-91--dark tbody td:nth-of-type(91) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-91--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-91--dark tbody tr:nth-of-type(even) td:nth-of-type(91) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-92 thead th:nth-of-type(93) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-92 tbody td:nth-of-type(92) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-92 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-92 tbody tr:nth-of-type(even) td:nth-of-type(92) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-92--dark thead th:nth-of-type(93) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-92--dark tbody td:nth-of-type(92) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-92--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-92--dark tbody tr:nth-of-type(even) td:nth-of-type(92) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-93 thead th:nth-of-type(94) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-93 tbody td:nth-of-type(93) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-93 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-93 tbody tr:nth-of-type(even) td:nth-of-type(93) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-93--dark thead th:nth-of-type(94) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-93--dark tbody td:nth-of-type(93) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-93--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-93--dark tbody tr:nth-of-type(even) td:nth-of-type(93) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-94 thead th:nth-of-type(95) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-94 tbody td:nth-of-type(94) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-94 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-94 tbody tr:nth-of-type(even) td:nth-of-type(94) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-94--dark thead th:nth-of-type(95) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-94--dark tbody td:nth-of-type(94) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-94--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-94--dark tbody tr:nth-of-type(even) td:nth-of-type(94) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-95 thead th:nth-of-type(96) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-95 tbody td:nth-of-type(95) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-95 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-95 tbody tr:nth-of-type(even) td:nth-of-type(95) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-95--dark thead th:nth-of-type(96) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-95--dark tbody td:nth-of-type(95) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-95--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-95--dark tbody tr:nth-of-type(even) td:nth-of-type(95) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-96 thead th:nth-of-type(97) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-96 tbody td:nth-of-type(96) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-96 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-96 tbody tr:nth-of-type(even) td:nth-of-type(96) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-96--dark thead th:nth-of-type(97) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-96--dark tbody td:nth-of-type(96) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-96--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-96--dark tbody tr:nth-of-type(even) td:nth-of-type(96) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-97 thead th:nth-of-type(98) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-97 tbody td:nth-of-type(97) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-97 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-97 tbody tr:nth-of-type(even) td:nth-of-type(97) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-97--dark thead th:nth-of-type(98) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-97--dark tbody td:nth-of-type(97) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-97--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-97--dark tbody tr:nth-of-type(even) td:nth-of-type(97) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-98 thead th:nth-of-type(99) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-98 tbody td:nth-of-type(98) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-98 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-98 tbody tr:nth-of-type(even) td:nth-of-type(98) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-98--dark thead th:nth-of-type(99) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-98--dark tbody td:nth-of-type(98) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-98--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-98--dark tbody tr:nth-of-type(even) td:nth-of-type(98) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-99 thead th:nth-of-type(100) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-99 tbody td:nth-of-type(99) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-99 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-99 tbody tr:nth-of-type(even) td:nth-of-type(99) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-99--dark thead th:nth-of-type(100) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-99--dark tbody td:nth-of-type(99) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-99--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-99--dark tbody tr:nth-of-type(even) td:nth-of-type(99) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-col-100 thead th:nth-of-type(101) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-100 tbody td:nth-of-type(100) { background-color: rgba(184, 212, 242, 0.2); } .web-table .hl-col-100 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-col-100 tbody tr:nth-of-type(even) td:nth-of-type(100) { background-color: rgba(184, 212, 242, 0.3); } .web-table .hl-col-100--dark thead th:nth-of-type(101) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-100--dark tbody td:nth-of-type(100) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-100--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-col-100--dark tbody tr:nth-of-type(even) td:nth-of-type(100) { background-color: var(--kite-color-dark-blue-10); } .web-table .hl-row-1 tbody tr:nth-of-type(1) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-1 tbody tr:nth-of-type(1) td, .web-table .hl-row-1 tbody tr:nth-of-type(1) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-1 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-1--dark tbody tr:nth-of-type(1) td, .web-table .hl-row-1--dark tbody tr:nth-of-type(1) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-1--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-2 tbody tr:nth-of-type(2) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-2 tbody tr:nth-of-type(2) td, .web-table .hl-row-2 tbody tr:nth-of-type(2) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-2 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-2--dark tbody tr:nth-of-type(2) td, .web-table .hl-row-2--dark tbody tr:nth-of-type(2) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-2--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-3 tbody tr:nth-of-type(3) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-3 tbody tr:nth-of-type(3) td, .web-table .hl-row-3 tbody tr:nth-of-type(3) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-3 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-3--dark tbody tr:nth-of-type(3) td, .web-table .hl-row-3--dark tbody tr:nth-of-type(3) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-3--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-4 tbody tr:nth-of-type(4) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-4 tbody tr:nth-of-type(4) td, .web-table .hl-row-4 tbody tr:nth-of-type(4) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-4 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-4--dark tbody tr:nth-of-type(4) td, .web-table .hl-row-4--dark tbody tr:nth-of-type(4) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-4--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-5 tbody tr:nth-of-type(5) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-5 tbody tr:nth-of-type(5) td, .web-table .hl-row-5 tbody tr:nth-of-type(5) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-5 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-5--dark tbody tr:nth-of-type(5) td, .web-table .hl-row-5--dark tbody tr:nth-of-type(5) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-5--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-6 tbody tr:nth-of-type(6) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-6 tbody tr:nth-of-type(6) td, .web-table .hl-row-6 tbody tr:nth-of-type(6) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-6 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-6--dark tbody tr:nth-of-type(6) td, .web-table .hl-row-6--dark tbody tr:nth-of-type(6) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-6--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-7 tbody tr:nth-of-type(7) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-7 tbody tr:nth-of-type(7) td, .web-table .hl-row-7 tbody tr:nth-of-type(7) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-7 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-7--dark tbody tr:nth-of-type(7) td, .web-table .hl-row-7--dark tbody tr:nth-of-type(7) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-7--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-8 tbody tr:nth-of-type(8) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-8 tbody tr:nth-of-type(8) td, .web-table .hl-row-8 tbody tr:nth-of-type(8) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-8 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-8--dark tbody tr:nth-of-type(8) td, .web-table .hl-row-8--dark tbody tr:nth-of-type(8) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-8--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-9 tbody tr:nth-of-type(9) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-9 tbody tr:nth-of-type(9) td, .web-table .hl-row-9 tbody tr:nth-of-type(9) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-9 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-9--dark tbody tr:nth-of-type(9) td, .web-table .hl-row-9--dark tbody tr:nth-of-type(9) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-9--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-10 tbody tr:nth-of-type(10) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-10 tbody tr:nth-of-type(10) td, .web-table .hl-row-10 tbody tr:nth-of-type(10) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-10 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-10--dark tbody tr:nth-of-type(10) td, .web-table .hl-row-10--dark tbody tr:nth-of-type(10) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-10--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-11 tbody tr:nth-of-type(11) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-11 tbody tr:nth-of-type(11) td, .web-table .hl-row-11 tbody tr:nth-of-type(11) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-11 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-11--dark tbody tr:nth-of-type(11) td, .web-table .hl-row-11--dark tbody tr:nth-of-type(11) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-11--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-12 tbody tr:nth-of-type(12) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-12 tbody tr:nth-of-type(12) td, .web-table .hl-row-12 tbody tr:nth-of-type(12) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-12 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-12--dark tbody tr:nth-of-type(12) td, .web-table .hl-row-12--dark tbody tr:nth-of-type(12) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-12--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-13 tbody tr:nth-of-type(13) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-13 tbody tr:nth-of-type(13) td, .web-table .hl-row-13 tbody tr:nth-of-type(13) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-13 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-13--dark tbody tr:nth-of-type(13) td, .web-table .hl-row-13--dark tbody tr:nth-of-type(13) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-13--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-14 tbody tr:nth-of-type(14) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-14 tbody tr:nth-of-type(14) td, .web-table .hl-row-14 tbody tr:nth-of-type(14) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-14 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-14--dark tbody tr:nth-of-type(14) td, .web-table .hl-row-14--dark tbody tr:nth-of-type(14) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-14--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-15 tbody tr:nth-of-type(15) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-15 tbody tr:nth-of-type(15) td, .web-table .hl-row-15 tbody tr:nth-of-type(15) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-15 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-15--dark tbody tr:nth-of-type(15) td, .web-table .hl-row-15--dark tbody tr:nth-of-type(15) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-15--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-16 tbody tr:nth-of-type(16) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-16 tbody tr:nth-of-type(16) td, .web-table .hl-row-16 tbody tr:nth-of-type(16) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-16 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-16--dark tbody tr:nth-of-type(16) td, .web-table .hl-row-16--dark tbody tr:nth-of-type(16) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-16--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-17 tbody tr:nth-of-type(17) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-17 tbody tr:nth-of-type(17) td, .web-table .hl-row-17 tbody tr:nth-of-type(17) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-17 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-17--dark tbody tr:nth-of-type(17) td, .web-table .hl-row-17--dark tbody tr:nth-of-type(17) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-17--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-18 tbody tr:nth-of-type(18) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-18 tbody tr:nth-of-type(18) td, .web-table .hl-row-18 tbody tr:nth-of-type(18) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-18 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-18--dark tbody tr:nth-of-type(18) td, .web-table .hl-row-18--dark tbody tr:nth-of-type(18) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-18--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-19 tbody tr:nth-of-type(19) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-19 tbody tr:nth-of-type(19) td, .web-table .hl-row-19 tbody tr:nth-of-type(19) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-19 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-19--dark tbody tr:nth-of-type(19) td, .web-table .hl-row-19--dark tbody tr:nth-of-type(19) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-19--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-20 tbody tr:nth-of-type(20) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-20 tbody tr:nth-of-type(20) td, .web-table .hl-row-20 tbody tr:nth-of-type(20) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-20 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-20--dark tbody tr:nth-of-type(20) td, .web-table .hl-row-20--dark tbody tr:nth-of-type(20) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-20--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-21 tbody tr:nth-of-type(21) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-21 tbody tr:nth-of-type(21) td, .web-table .hl-row-21 tbody tr:nth-of-type(21) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-21 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-21--dark tbody tr:nth-of-type(21) td, .web-table .hl-row-21--dark tbody tr:nth-of-type(21) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-21--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-22 tbody tr:nth-of-type(22) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-22 tbody tr:nth-of-type(22) td, .web-table .hl-row-22 tbody tr:nth-of-type(22) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-22 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-22--dark tbody tr:nth-of-type(22) td, .web-table .hl-row-22--dark tbody tr:nth-of-type(22) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-22--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-23 tbody tr:nth-of-type(23) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-23 tbody tr:nth-of-type(23) td, .web-table .hl-row-23 tbody tr:nth-of-type(23) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-23 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-23--dark tbody tr:nth-of-type(23) td, .web-table .hl-row-23--dark tbody tr:nth-of-type(23) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-23--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-24 tbody tr:nth-of-type(24) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-24 tbody tr:nth-of-type(24) td, .web-table .hl-row-24 tbody tr:nth-of-type(24) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-24 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-24--dark tbody tr:nth-of-type(24) td, .web-table .hl-row-24--dark tbody tr:nth-of-type(24) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-24--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-25 tbody tr:nth-of-type(25) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-25 tbody tr:nth-of-type(25) td, .web-table .hl-row-25 tbody tr:nth-of-type(25) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-25 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-25--dark tbody tr:nth-of-type(25) td, .web-table .hl-row-25--dark tbody tr:nth-of-type(25) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-25--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-26 tbody tr:nth-of-type(26) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-26 tbody tr:nth-of-type(26) td, .web-table .hl-row-26 tbody tr:nth-of-type(26) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-26 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-26--dark tbody tr:nth-of-type(26) td, .web-table .hl-row-26--dark tbody tr:nth-of-type(26) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-26--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-27 tbody tr:nth-of-type(27) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-27 tbody tr:nth-of-type(27) td, .web-table .hl-row-27 tbody tr:nth-of-type(27) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-27 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-27--dark tbody tr:nth-of-type(27) td, .web-table .hl-row-27--dark tbody tr:nth-of-type(27) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-27--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-28 tbody tr:nth-of-type(28) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-28 tbody tr:nth-of-type(28) td, .web-table .hl-row-28 tbody tr:nth-of-type(28) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-28 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-28--dark tbody tr:nth-of-type(28) td, .web-table .hl-row-28--dark tbody tr:nth-of-type(28) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-28--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-29 tbody tr:nth-of-type(29) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-29 tbody tr:nth-of-type(29) td, .web-table .hl-row-29 tbody tr:nth-of-type(29) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-29 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-29--dark tbody tr:nth-of-type(29) td, .web-table .hl-row-29--dark tbody tr:nth-of-type(29) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-29--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-30 tbody tr:nth-of-type(30) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-30 tbody tr:nth-of-type(30) td, .web-table .hl-row-30 tbody tr:nth-of-type(30) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-30 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-30--dark tbody tr:nth-of-type(30) td, .web-table .hl-row-30--dark tbody tr:nth-of-type(30) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-30--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-31 tbody tr:nth-of-type(31) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-31 tbody tr:nth-of-type(31) td, .web-table .hl-row-31 tbody tr:nth-of-type(31) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-31 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-31--dark tbody tr:nth-of-type(31) td, .web-table .hl-row-31--dark tbody tr:nth-of-type(31) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-31--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-32 tbody tr:nth-of-type(32) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-32 tbody tr:nth-of-type(32) td, .web-table .hl-row-32 tbody tr:nth-of-type(32) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-32 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-32--dark tbody tr:nth-of-type(32) td, .web-table .hl-row-32--dark tbody tr:nth-of-type(32) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-32--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-33 tbody tr:nth-of-type(33) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-33 tbody tr:nth-of-type(33) td, .web-table .hl-row-33 tbody tr:nth-of-type(33) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-33 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-33--dark tbody tr:nth-of-type(33) td, .web-table .hl-row-33--dark tbody tr:nth-of-type(33) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-33--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-34 tbody tr:nth-of-type(34) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-34 tbody tr:nth-of-type(34) td, .web-table .hl-row-34 tbody tr:nth-of-type(34) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-34 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-34--dark tbody tr:nth-of-type(34) td, .web-table .hl-row-34--dark tbody tr:nth-of-type(34) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-34--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-35 tbody tr:nth-of-type(35) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-35 tbody tr:nth-of-type(35) td, .web-table .hl-row-35 tbody tr:nth-of-type(35) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-35 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-35--dark tbody tr:nth-of-type(35) td, .web-table .hl-row-35--dark tbody tr:nth-of-type(35) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-35--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-36 tbody tr:nth-of-type(36) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-36 tbody tr:nth-of-type(36) td, .web-table .hl-row-36 tbody tr:nth-of-type(36) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-36 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-36--dark tbody tr:nth-of-type(36) td, .web-table .hl-row-36--dark tbody tr:nth-of-type(36) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-36--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-37 tbody tr:nth-of-type(37) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-37 tbody tr:nth-of-type(37) td, .web-table .hl-row-37 tbody tr:nth-of-type(37) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-37 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-37--dark tbody tr:nth-of-type(37) td, .web-table .hl-row-37--dark tbody tr:nth-of-type(37) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-37--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-38 tbody tr:nth-of-type(38) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-38 tbody tr:nth-of-type(38) td, .web-table .hl-row-38 tbody tr:nth-of-type(38) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-38 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-38--dark tbody tr:nth-of-type(38) td, .web-table .hl-row-38--dark tbody tr:nth-of-type(38) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-38--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-39 tbody tr:nth-of-type(39) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-39 tbody tr:nth-of-type(39) td, .web-table .hl-row-39 tbody tr:nth-of-type(39) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-39 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-39--dark tbody tr:nth-of-type(39) td, .web-table .hl-row-39--dark tbody tr:nth-of-type(39) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-39--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-40 tbody tr:nth-of-type(40) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-40 tbody tr:nth-of-type(40) td, .web-table .hl-row-40 tbody tr:nth-of-type(40) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-40 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-40--dark tbody tr:nth-of-type(40) td, .web-table .hl-row-40--dark tbody tr:nth-of-type(40) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-40--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-41 tbody tr:nth-of-type(41) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-41 tbody tr:nth-of-type(41) td, .web-table .hl-row-41 tbody tr:nth-of-type(41) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-41 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-41--dark tbody tr:nth-of-type(41) td, .web-table .hl-row-41--dark tbody tr:nth-of-type(41) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-41--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-42 tbody tr:nth-of-type(42) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-42 tbody tr:nth-of-type(42) td, .web-table .hl-row-42 tbody tr:nth-of-type(42) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-42 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-42--dark tbody tr:nth-of-type(42) td, .web-table .hl-row-42--dark tbody tr:nth-of-type(42) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-42--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-43 tbody tr:nth-of-type(43) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-43 tbody tr:nth-of-type(43) td, .web-table .hl-row-43 tbody tr:nth-of-type(43) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-43 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-43--dark tbody tr:nth-of-type(43) td, .web-table .hl-row-43--dark tbody tr:nth-of-type(43) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-43--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-44 tbody tr:nth-of-type(44) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-44 tbody tr:nth-of-type(44) td, .web-table .hl-row-44 tbody tr:nth-of-type(44) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-44 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-44--dark tbody tr:nth-of-type(44) td, .web-table .hl-row-44--dark tbody tr:nth-of-type(44) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-44--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-45 tbody tr:nth-of-type(45) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-45 tbody tr:nth-of-type(45) td, .web-table .hl-row-45 tbody tr:nth-of-type(45) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-45 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-45--dark tbody tr:nth-of-type(45) td, .web-table .hl-row-45--dark tbody tr:nth-of-type(45) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-45--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-46 tbody tr:nth-of-type(46) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-46 tbody tr:nth-of-type(46) td, .web-table .hl-row-46 tbody tr:nth-of-type(46) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-46 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-46--dark tbody tr:nth-of-type(46) td, .web-table .hl-row-46--dark tbody tr:nth-of-type(46) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-46--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-47 tbody tr:nth-of-type(47) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-47 tbody tr:nth-of-type(47) td, .web-table .hl-row-47 tbody tr:nth-of-type(47) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-47 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-47--dark tbody tr:nth-of-type(47) td, .web-table .hl-row-47--dark tbody tr:nth-of-type(47) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-47--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-48 tbody tr:nth-of-type(48) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-48 tbody tr:nth-of-type(48) td, .web-table .hl-row-48 tbody tr:nth-of-type(48) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-48 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-48--dark tbody tr:nth-of-type(48) td, .web-table .hl-row-48--dark tbody tr:nth-of-type(48) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-48--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-49 tbody tr:nth-of-type(49) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-49 tbody tr:nth-of-type(49) td, .web-table .hl-row-49 tbody tr:nth-of-type(49) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-49 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-49--dark tbody tr:nth-of-type(49) td, .web-table .hl-row-49--dark tbody tr:nth-of-type(49) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-49--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-50 tbody tr:nth-of-type(50) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-50 tbody tr:nth-of-type(50) td, .web-table .hl-row-50 tbody tr:nth-of-type(50) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-50 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-50--dark tbody tr:nth-of-type(50) td, .web-table .hl-row-50--dark tbody tr:nth-of-type(50) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-50--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-51 tbody tr:nth-of-type(51) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-51 tbody tr:nth-of-type(51) td, .web-table .hl-row-51 tbody tr:nth-of-type(51) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-51 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-51--dark tbody tr:nth-of-type(51) td, .web-table .hl-row-51--dark tbody tr:nth-of-type(51) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-51--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-52 tbody tr:nth-of-type(52) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-52 tbody tr:nth-of-type(52) td, .web-table .hl-row-52 tbody tr:nth-of-type(52) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-52 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-52--dark tbody tr:nth-of-type(52) td, .web-table .hl-row-52--dark tbody tr:nth-of-type(52) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-52--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-53 tbody tr:nth-of-type(53) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-53 tbody tr:nth-of-type(53) td, .web-table .hl-row-53 tbody tr:nth-of-type(53) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-53 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-53--dark tbody tr:nth-of-type(53) td, .web-table .hl-row-53--dark tbody tr:nth-of-type(53) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-53--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-54 tbody tr:nth-of-type(54) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-54 tbody tr:nth-of-type(54) td, .web-table .hl-row-54 tbody tr:nth-of-type(54) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-54 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-54--dark tbody tr:nth-of-type(54) td, .web-table .hl-row-54--dark tbody tr:nth-of-type(54) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-54--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-55 tbody tr:nth-of-type(55) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-55 tbody tr:nth-of-type(55) td, .web-table .hl-row-55 tbody tr:nth-of-type(55) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-55 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-55--dark tbody tr:nth-of-type(55) td, .web-table .hl-row-55--dark tbody tr:nth-of-type(55) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-55--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-56 tbody tr:nth-of-type(56) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-56 tbody tr:nth-of-type(56) td, .web-table .hl-row-56 tbody tr:nth-of-type(56) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-56 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-56--dark tbody tr:nth-of-type(56) td, .web-table .hl-row-56--dark tbody tr:nth-of-type(56) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-56--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-57 tbody tr:nth-of-type(57) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-57 tbody tr:nth-of-type(57) td, .web-table .hl-row-57 tbody tr:nth-of-type(57) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-57 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-57--dark tbody tr:nth-of-type(57) td, .web-table .hl-row-57--dark tbody tr:nth-of-type(57) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-57--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-58 tbody tr:nth-of-type(58) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-58 tbody tr:nth-of-type(58) td, .web-table .hl-row-58 tbody tr:nth-of-type(58) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-58 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-58--dark tbody tr:nth-of-type(58) td, .web-table .hl-row-58--dark tbody tr:nth-of-type(58) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-58--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-59 tbody tr:nth-of-type(59) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-59 tbody tr:nth-of-type(59) td, .web-table .hl-row-59 tbody tr:nth-of-type(59) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-59 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-59--dark tbody tr:nth-of-type(59) td, .web-table .hl-row-59--dark tbody tr:nth-of-type(59) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-59--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-60 tbody tr:nth-of-type(60) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-60 tbody tr:nth-of-type(60) td, .web-table .hl-row-60 tbody tr:nth-of-type(60) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-60 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-60--dark tbody tr:nth-of-type(60) td, .web-table .hl-row-60--dark tbody tr:nth-of-type(60) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-60--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-61 tbody tr:nth-of-type(61) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-61 tbody tr:nth-of-type(61) td, .web-table .hl-row-61 tbody tr:nth-of-type(61) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-61 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-61--dark tbody tr:nth-of-type(61) td, .web-table .hl-row-61--dark tbody tr:nth-of-type(61) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-61--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-62 tbody tr:nth-of-type(62) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-62 tbody tr:nth-of-type(62) td, .web-table .hl-row-62 tbody tr:nth-of-type(62) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-62 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-62--dark tbody tr:nth-of-type(62) td, .web-table .hl-row-62--dark tbody tr:nth-of-type(62) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-62--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-63 tbody tr:nth-of-type(63) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-63 tbody tr:nth-of-type(63) td, .web-table .hl-row-63 tbody tr:nth-of-type(63) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-63 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-63--dark tbody tr:nth-of-type(63) td, .web-table .hl-row-63--dark tbody tr:nth-of-type(63) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-63--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-64 tbody tr:nth-of-type(64) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-64 tbody tr:nth-of-type(64) td, .web-table .hl-row-64 tbody tr:nth-of-type(64) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-64 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-64--dark tbody tr:nth-of-type(64) td, .web-table .hl-row-64--dark tbody tr:nth-of-type(64) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-64--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-65 tbody tr:nth-of-type(65) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-65 tbody tr:nth-of-type(65) td, .web-table .hl-row-65 tbody tr:nth-of-type(65) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-65 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-65--dark tbody tr:nth-of-type(65) td, .web-table .hl-row-65--dark tbody tr:nth-of-type(65) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-65--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-66 tbody tr:nth-of-type(66) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-66 tbody tr:nth-of-type(66) td, .web-table .hl-row-66 tbody tr:nth-of-type(66) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-66 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-66--dark tbody tr:nth-of-type(66) td, .web-table .hl-row-66--dark tbody tr:nth-of-type(66) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-66--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-67 tbody tr:nth-of-type(67) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-67 tbody tr:nth-of-type(67) td, .web-table .hl-row-67 tbody tr:nth-of-type(67) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-67 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-67--dark tbody tr:nth-of-type(67) td, .web-table .hl-row-67--dark tbody tr:nth-of-type(67) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-67--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-68 tbody tr:nth-of-type(68) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-68 tbody tr:nth-of-type(68) td, .web-table .hl-row-68 tbody tr:nth-of-type(68) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-68 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-68--dark tbody tr:nth-of-type(68) td, .web-table .hl-row-68--dark tbody tr:nth-of-type(68) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-68--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-69 tbody tr:nth-of-type(69) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-69 tbody tr:nth-of-type(69) td, .web-table .hl-row-69 tbody tr:nth-of-type(69) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-69 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-69--dark tbody tr:nth-of-type(69) td, .web-table .hl-row-69--dark tbody tr:nth-of-type(69) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-69--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-70 tbody tr:nth-of-type(70) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-70 tbody tr:nth-of-type(70) td, .web-table .hl-row-70 tbody tr:nth-of-type(70) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-70 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-70--dark tbody tr:nth-of-type(70) td, .web-table .hl-row-70--dark tbody tr:nth-of-type(70) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-70--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-71 tbody tr:nth-of-type(71) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-71 tbody tr:nth-of-type(71) td, .web-table .hl-row-71 tbody tr:nth-of-type(71) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-71 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-71--dark tbody tr:nth-of-type(71) td, .web-table .hl-row-71--dark tbody tr:nth-of-type(71) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-71--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-72 tbody tr:nth-of-type(72) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-72 tbody tr:nth-of-type(72) td, .web-table .hl-row-72 tbody tr:nth-of-type(72) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-72 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-72--dark tbody tr:nth-of-type(72) td, .web-table .hl-row-72--dark tbody tr:nth-of-type(72) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-72--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-73 tbody tr:nth-of-type(73) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-73 tbody tr:nth-of-type(73) td, .web-table .hl-row-73 tbody tr:nth-of-type(73) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-73 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-73--dark tbody tr:nth-of-type(73) td, .web-table .hl-row-73--dark tbody tr:nth-of-type(73) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-73--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-74 tbody tr:nth-of-type(74) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-74 tbody tr:nth-of-type(74) td, .web-table .hl-row-74 tbody tr:nth-of-type(74) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-74 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-74--dark tbody tr:nth-of-type(74) td, .web-table .hl-row-74--dark tbody tr:nth-of-type(74) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-74--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-75 tbody tr:nth-of-type(75) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-75 tbody tr:nth-of-type(75) td, .web-table .hl-row-75 tbody tr:nth-of-type(75) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-75 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-75--dark tbody tr:nth-of-type(75) td, .web-table .hl-row-75--dark tbody tr:nth-of-type(75) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-75--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-76 tbody tr:nth-of-type(76) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-76 tbody tr:nth-of-type(76) td, .web-table .hl-row-76 tbody tr:nth-of-type(76) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-76 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-76--dark tbody tr:nth-of-type(76) td, .web-table .hl-row-76--dark tbody tr:nth-of-type(76) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-76--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-77 tbody tr:nth-of-type(77) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-77 tbody tr:nth-of-type(77) td, .web-table .hl-row-77 tbody tr:nth-of-type(77) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-77 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-77--dark tbody tr:nth-of-type(77) td, .web-table .hl-row-77--dark tbody tr:nth-of-type(77) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-77--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-78 tbody tr:nth-of-type(78) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-78 tbody tr:nth-of-type(78) td, .web-table .hl-row-78 tbody tr:nth-of-type(78) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-78 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-78--dark tbody tr:nth-of-type(78) td, .web-table .hl-row-78--dark tbody tr:nth-of-type(78) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-78--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-79 tbody tr:nth-of-type(79) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-79 tbody tr:nth-of-type(79) td, .web-table .hl-row-79 tbody tr:nth-of-type(79) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-79 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-79--dark tbody tr:nth-of-type(79) td, .web-table .hl-row-79--dark tbody tr:nth-of-type(79) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-79--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-80 tbody tr:nth-of-type(80) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-80 tbody tr:nth-of-type(80) td, .web-table .hl-row-80 tbody tr:nth-of-type(80) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-80 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-80--dark tbody tr:nth-of-type(80) td, .web-table .hl-row-80--dark tbody tr:nth-of-type(80) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-80--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-81 tbody tr:nth-of-type(81) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-81 tbody tr:nth-of-type(81) td, .web-table .hl-row-81 tbody tr:nth-of-type(81) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-81 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-81--dark tbody tr:nth-of-type(81) td, .web-table .hl-row-81--dark tbody tr:nth-of-type(81) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-81--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-82 tbody tr:nth-of-type(82) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-82 tbody tr:nth-of-type(82) td, .web-table .hl-row-82 tbody tr:nth-of-type(82) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-82 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-82--dark tbody tr:nth-of-type(82) td, .web-table .hl-row-82--dark tbody tr:nth-of-type(82) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-82--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-83 tbody tr:nth-of-type(83) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-83 tbody tr:nth-of-type(83) td, .web-table .hl-row-83 tbody tr:nth-of-type(83) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-83 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-83--dark tbody tr:nth-of-type(83) td, .web-table .hl-row-83--dark tbody tr:nth-of-type(83) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-83--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-84 tbody tr:nth-of-type(84) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-84 tbody tr:nth-of-type(84) td, .web-table .hl-row-84 tbody tr:nth-of-type(84) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-84 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-84--dark tbody tr:nth-of-type(84) td, .web-table .hl-row-84--dark tbody tr:nth-of-type(84) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-84--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-85 tbody tr:nth-of-type(85) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-85 tbody tr:nth-of-type(85) td, .web-table .hl-row-85 tbody tr:nth-of-type(85) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-85 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-85--dark tbody tr:nth-of-type(85) td, .web-table .hl-row-85--dark tbody tr:nth-of-type(85) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-85--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-86 tbody tr:nth-of-type(86) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-86 tbody tr:nth-of-type(86) td, .web-table .hl-row-86 tbody tr:nth-of-type(86) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-86 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-86--dark tbody tr:nth-of-type(86) td, .web-table .hl-row-86--dark tbody tr:nth-of-type(86) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-86--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-87 tbody tr:nth-of-type(87) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-87 tbody tr:nth-of-type(87) td, .web-table .hl-row-87 tbody tr:nth-of-type(87) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-87 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-87--dark tbody tr:nth-of-type(87) td, .web-table .hl-row-87--dark tbody tr:nth-of-type(87) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-87--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-88 tbody tr:nth-of-type(88) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-88 tbody tr:nth-of-type(88) td, .web-table .hl-row-88 tbody tr:nth-of-type(88) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-88 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-88--dark tbody tr:nth-of-type(88) td, .web-table .hl-row-88--dark tbody tr:nth-of-type(88) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-88--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-89 tbody tr:nth-of-type(89) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-89 tbody tr:nth-of-type(89) td, .web-table .hl-row-89 tbody tr:nth-of-type(89) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-89 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-89--dark tbody tr:nth-of-type(89) td, .web-table .hl-row-89--dark tbody tr:nth-of-type(89) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-89--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-90 tbody tr:nth-of-type(90) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-90 tbody tr:nth-of-type(90) td, .web-table .hl-row-90 tbody tr:nth-of-type(90) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-90 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-90--dark tbody tr:nth-of-type(90) td, .web-table .hl-row-90--dark tbody tr:nth-of-type(90) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-90--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-91 tbody tr:nth-of-type(91) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-91 tbody tr:nth-of-type(91) td, .web-table .hl-row-91 tbody tr:nth-of-type(91) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-91 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-91--dark tbody tr:nth-of-type(91) td, .web-table .hl-row-91--dark tbody tr:nth-of-type(91) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-91--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-92 tbody tr:nth-of-type(92) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-92 tbody tr:nth-of-type(92) td, .web-table .hl-row-92 tbody tr:nth-of-type(92) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-92 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-92--dark tbody tr:nth-of-type(92) td, .web-table .hl-row-92--dark tbody tr:nth-of-type(92) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-92--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-93 tbody tr:nth-of-type(93) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-93 tbody tr:nth-of-type(93) td, .web-table .hl-row-93 tbody tr:nth-of-type(93) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-93 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-93--dark tbody tr:nth-of-type(93) td, .web-table .hl-row-93--dark tbody tr:nth-of-type(93) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-93--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-94 tbody tr:nth-of-type(94) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-94 tbody tr:nth-of-type(94) td, .web-table .hl-row-94 tbody tr:nth-of-type(94) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-94 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-94--dark tbody tr:nth-of-type(94) td, .web-table .hl-row-94--dark tbody tr:nth-of-type(94) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-94--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-95 tbody tr:nth-of-type(95) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-95 tbody tr:nth-of-type(95) td, .web-table .hl-row-95 tbody tr:nth-of-type(95) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-95 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-95--dark tbody tr:nth-of-type(95) td, .web-table .hl-row-95--dark tbody tr:nth-of-type(95) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-95--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-96 tbody tr:nth-of-type(96) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-96 tbody tr:nth-of-type(96) td, .web-table .hl-row-96 tbody tr:nth-of-type(96) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-96 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-96--dark tbody tr:nth-of-type(96) td, .web-table .hl-row-96--dark tbody tr:nth-of-type(96) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-96--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-97 tbody tr:nth-of-type(97) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-97 tbody tr:nth-of-type(97) td, .web-table .hl-row-97 tbody tr:nth-of-type(97) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-97 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-97--dark tbody tr:nth-of-type(97) td, .web-table .hl-row-97--dark tbody tr:nth-of-type(97) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-97--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-98 tbody tr:nth-of-type(98) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-98 tbody tr:nth-of-type(98) td, .web-table .hl-row-98 tbody tr:nth-of-type(98) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-98 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-98--dark tbody tr:nth-of-type(98) td, .web-table .hl-row-98--dark tbody tr:nth-of-type(98) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-98--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-99 tbody tr:nth-of-type(99) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-99 tbody tr:nth-of-type(99) td, .web-table .hl-row-99 tbody tr:nth-of-type(99) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-99 tbody tr:nth-of-type(odd) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-99--dark tbody tr:nth-of-type(99) td, .web-table .hl-row-99--dark tbody tr:nth-of-type(99) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-99--dark tbody tr:nth-of-type(odd) { background-color: var(--kite-color-dark-blue-20); } .web-table .hl-row-100 tbody tr:nth-of-type(100) { background-color: var(--kite-color-white) !important; } .web-table .hl-row-100 tbody tr:nth-of-type(100) td, .web-table .hl-row-100 tbody tr:nth-of-type(100) th { background-color: rgba(184, 212, 242, 0.2) !important; } .web-table .hl-row-100 tbody tr:nth-of-type(even) { background-color: var(--kite-color-gray-10); } .web-table .hl-row-100--dark tbody tr:nth-of-type(100) td, .web-table .hl-row-100--dark tbody tr:nth-of-type(100) th { background: var(--kite-color-dark-blue-10) !important; } .web-table .hl-row-100--dark tbody tr:nth-of-type(even) { background-color: var(--kite-color-dark-blue-20); } .visual-scroll__bar { height: 6px; width: 100%; background: #d9d9d9; border-radius: 0.25rem; position: relative; } .visual-scroll__thumb { background: var(--kite-color-primary); width: 20%; height: 100%; border-radius: 0.25rem; position: absolute; } .youtube-card { display: flex; flex-direction: column; gap: 1rem; } .youtube-card--landing { margin: 1.5rem auto; } .youtube-card__error { color: red; margin-top: 24px; } .youtube-card .kite-card { height: auto; } .youtube-card__card--9_16 { padding: 1.25rem; } @media only screen and (min-width: 37.5rem) { .youtube-card__card--9_16 { padding: 1.25rem 1.5rem; } } @media only screen and (min-width: 60rem) { .youtube-card__card--9_16 { padding: 1.5rem 1.875rem; } } .youtube-card--landing .youtube-card__card--9_16 { padding: 1.5rem 1.25rem; } @media only screen and (min-width: 60rem) { .youtube-card--landing .youtube-card__card--9_16 { padding: 1.25rem 3.75rem; } } .youtube-card__card--16_9 { padding: 1rem; } @media only screen and (min-width: 37.5rem) { .youtube-card__card--16_9 { padding: 1.25rem 1.5rem; } } .youtube-card--landing .youtube-card__card--16_9 { padding: 1rem; } @media only screen and (min-width: 37.5rem) { .youtube-card--landing .youtube-card__card--16_9 { padding: 1.5rem; } } @media only screen and (min-width: 60rem) { .youtube-card--landing .youtube-card__card--16_9 { padding: 1.25rem 3.75rem; } } .youtube-card .youtube-card__heading { display: flex; flex-direction: column; gap: 0.5rem; } .youtube-card .youtube-card__heading h2.youtube-card__title { margin: 0; font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .youtube-card .youtube-card__heading h2.youtube-card__title { font-size: 1.75rem; line-height: 1.2857; } } .youtube-card__subtitle { margin: 0; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .youtube-card__subtitle { font-size: 1rem; line-height: 1.625; } } .youtube-card__content { display: flex; flex-direction: column; gap: 1.5rem; } .youtube-card__content--9_16 { gap: 2.5rem; } @media only screen and (min-width: 37.5rem) { .youtube-card__content--9_16 { flex-direction: row; align-items: center; } } @media only screen and (min-width: 52.5rem) { .youtube-card__content--9_16 { flex-direction: column; } } @media only screen and (min-width: 60rem) { .youtube-card__content--9_16 { flex-direction: row; align-items: center; } } @media only screen and (min-width: 37.5rem) { .youtube-card__content--16_9 { gap: 2.5rem; } } .youtube-card--landing .youtube-card__content--16_9 { flex-direction: column; } @media only screen and (min-width: 60rem) { .youtube-card--landing .youtube-card__content--16_9 { flex-direction: row; align-items: center; } } @media only screen and (min-width: 30rem) { .youtube-card--landing .youtube-card__content--9_16.youtube-card__content { flex-direction: row; align-items: center; } } .youtube-card__copy { display: flex; flex-direction: column; flex: 2 1; gap: 0.5rem; } .youtube-card__eyebrow { color: var(--kite-color-gray-30); font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .youtube-card__eyebrow { font-size: 0.75rem; } } .youtube-card__video-title { margin: 0; font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 37.5rem) { .youtube-card__video-title { font-size: 1.5rem; line-height: 1.25; } } .youtube-card__description { margin-bottom: 0.5rem; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .youtube-card__description { font-size: 1rem; line-height: 1.625; } } .youtube-card__description a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .youtube-card__description a:hover, .youtube-card__description a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .youtube-card__link { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; text-decoration: none; padding: 0.5rem 0; } .youtube-card .youtube-card__video-wrapper { display: flex; flex-direction: column; } .youtube-card .youtube-card__video-wrapper--9_16 { padding: 0; } @media only screen and (min-width: 60rem) { .youtube-card .youtube-card__video-wrapper--9_16 { padding: 0 1.25rem; } } .youtube-card .youtube-card__video-wrapper--16_9 { padding: 0; } @media only screen and (min-width: 60rem) { .youtube-card .youtube-card__video-wrapper--16_9.youtube-card__video-wrapper--landing { width: 50%; } } @media only screen and (min-width: 60rem) { .youtube-card .youtube-card__video-wrapper--16_9.youtube-card__video-wrapper--landing.youtube-card__video-wrapper--right-align.youtube-card__video-wrapper--top { display: none; } } .youtube-card .youtube-card__video-wrapper--16_9.youtube-card__video-wrapper--landing.youtube-card__video-wrapper--right-align.youtube-card__video-wrapper--right-align:not(.youtube-card__video-wrapper--top) { display: none; } @media only screen and (min-width: 60rem) { .youtube-card .youtube-card__video-wrapper--16_9.youtube-card__video-wrapper--landing.youtube-card__video-wrapper--right-align.youtube-card__video-wrapper--right-align:not(.youtube-card__video-wrapper--top) { display: block; } } .youtube-card .youtube-card__video-wrapper--16_9.youtube-card__video-wrapper--article.youtube-card__video-wrapper--right-align:not(.youtube-card__video-wrapper--top) { display: none; } .youtube-card .youtube-card__video-wrapper iframe.youtube-card__video { border: none; overflow: hidden; } .youtube-card .youtube-card__video-wrapper iframe.youtube-card__video--9_16 { width: 100%; align-self: center; height: auto; aspect-ratio: 9/16; } @media only screen and (min-width: 30rem) { .youtube-card .youtube-card__video-wrapper iframe.youtube-card__video--9_16 { height: 26.875rem; width: auto; } } @media only screen and (min-width: 60rem) { .youtube-card .youtube-card__video-wrapper iframe.youtube-card__video--9_16 { height: 23.3125rem; } } .youtube-card .youtube-card__video-wrapper iframe.youtube-card__video--16_9 { width: 100%; max-width: 100%; aspect-ratio: 16/9; } .image-section-banner { margin-top: 4rem; position: relative; display: flex; width: 100%; height: auto; background-color: var(--banner-bg); } .image-section-banner.light { --banner-bg: var(--kite-color-white); --banner-eyebrow: #606a85; --banner-title: var(--kite-color-dark-blue-20); --banner-text: var(--kite-color-black); --banner-link: var(--kite-color-blue-20); } .image-section-banner.light .text p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .image-section-banner.light .text p a:hover, .image-section-banner.light .text p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .image-section-banner.dark { --banner-bg: var(--kite-color-dark-blue-20); --banner-eyebrow: var(--kite-color-gray-25); --banner-title: var(--kite-color-white); --banner-text: var(--kite-color-white); --banner-link: var(--kite-color-white); } .image-section-banner.dark .text p a { text-decoration: underline; color: var(--banner-link); } .image-section-banner__content-wrapper { display: flex; flex-direction: column; justify-content: center; width: 100%; margin: 0 auto; padding: 2rem 1rem 2rem 1rem; } @media only screen and (min-width: 52.5rem) { .image-section-banner__content-wrapper { max-width: 80rem; z-index: 2; padding: 1.5rem; } } .image-section-banner__main-content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 1.25rem; } @media only screen and (min-width: 52.5rem) { .image-section-banner__main-content { width: 50%; } } .image-section-banner__main-content small.typestack-eyebrow { color: var(--banner-eyebrow); text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; margin: 0; } @media only screen and (max-width: 37.5rem) { .image-section-banner__main-content small.typestack-eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .image-section-banner__main-content h2.typestack-title-3 { color: var(--banner-title); margin: 0; } .image-section-banner__main-content .text p { color: var(--banner-text); margin-bottom: 1.25rem; font-weight: 400; font-size: 1rem; line-height: 1.625; } .image-section-banner__main-content .text p a sup { font-size: 0.75rem; font-weight: 500; } .image-section-banner__main-content a.kite-button.kite-button--secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; text-decoration: none; } @media only screen and (min-width: 52.5rem) { .image-section-banner__main-content a.kite-button.kite-button--secondary { width: auto; height: auto; } } .image-section-banner__image_section__image { aspect-ratio: 16/9; height: auto; } .image-section-banner__gradient-wrapper { display: none; } @media only screen and (min-width: 52.5rem) { .image-section-banner__gradient-wrapper { display: block; position: absolute; top: 0; width: 50%; height: 100%; z-index: 1; } } .image-section-banner .gatsby-image-wrapper { display: block; width: 100%; } @media only screen and (min-width: 52.5rem) { .image-section-banner .gatsby-image-wrapper { position: absolute; top: 0; width: 49.5%; height: 100%; } } .image-section-banner.right { flex-direction: column-reverse; --banner-gradient: linear-gradient( to left, rgba(255, 255, 255, 0) 0%, var(--banner-bg) 90.5% ); } @media only screen and (min-width: 52.5rem) { .image-section-banner.right { flex-direction: row; } .image-section-banner.right .image-section-banner__content-wrapper { align-items: flex-start; } .image-section-banner.right .gatsby-image-wrapper { right: 0; } .image-section-banner.right .image-section-banner__gradient-wrapper { right: 0; } .image-section-banner.right .image-section-banner__gradient { width: 12.5rem; background: var(--banner-gradient); height: 100%; } } .image-section-banner.left { flex-direction: column-reverse; --banner-gradient: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, var(--banner-bg) 90.5% ); } @media only screen and (min-width: 52.5rem) { .image-section-banner.left { flex-direction: row-reverse; } .image-section-banner.left .image-section-banner__content-wrapper { align-items: flex-end; } .image-section-banner.left .gatsby-image-wrapper { left: 0; } .image-section-banner.left .image-section-banner__gradient-wrapper { left: 0; } .image-section-banner.left .image-section-banner__gradient { width: 12.5rem; background: var(--banner-gradient); height: 100%; position: absolute; right: 0; } } @media only screen and (min-width: 52.5rem) { .image-section-banner { min-height: 26.5rem; } } .video-container { border-radius: 16px; position: relative; height: 100%; width: 100%; display: block; } .video-container--iframe { aspect-ratio: 16/9; border: none; } .thumbnail-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; cursor: pointer; } .thumbnail { width: 100%; height: 100%; object-fit: cover; border-radius: 1rem; } .play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; margin: 0; } .play-button svg { color: var(--kite-color-white); } .play-btn-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .video-player.hidden { display: none; } .video-player.visible { width: 100%; display: block; } .two-column-media-image-video { margin-top: 4rem; display: flex; flex-direction: column; gap: 1rem; } .two-column-media-image-video .media-container { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 16/9; overflow: hidden; border-radius: 1rem; width: 100%; } .two-column-media-image-video .media-container .youtube-iframe { width: 100%; height: 100%; border-radius: 1rem; border: none; } .two-column-media-image-video .media-container .gatsby-image-wrapper { border-radius: 1rem; width: 100%; height: 100%; } .two-column-media-image-video .two-column-media-content-container { display: flex; flex-direction: column; gap: 1.5rem; } .two-column-media-image-video .two-column-media-content-container .two-column-media-content { display: flex; flex-direction: column; gap: 1.25rem; } .two-column-media-image-video .two-column-media-content-container .link-button-container .link-button { padding: 0; } .two-column-media-image-video .two-column-media-content-container .kite-button--borderless .kite-button__inner { justify-content: left; } .two-column-media-image-video .two-column-media-content-container .body-text p { font-weight: 400; font-size: 1rem; line-height: 1.625; } .two-column-media-image-video .two-column-media-content-container .body-text span { font-weight: 400; font-size: 1rem; line-height: 1.625; } .two-column-media-image-video .two-column-media-content-container .body-text a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .two-column-media-image-video .two-column-media-content-container .body-text a:hover, .two-column-media-image-video .two-column-media-content-container .body-text a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .two-column-media-image-video .two-column-media-content-container .body-text sup { font-size: 0.75rem; font-weight: 500; } .two-column-media-image-video .typestack-eyebrow { color: #606a85; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .two-column-media-image-video .typestack-eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .two-column-media-image-video .typestack-title-3 { color: var(--kite-color-dark-blue-20); } @media only screen and (min-width: 30rem) { .two-column-media-image-video { display: flex; align-items: center; gap: 2.5rem; flex-shrink: 0; } .two-column-media-image-video .media-container { flex: 0 1 50%; display: flex; height: 100%; align-self: center; } .two-column-media-image-video .two-column-media-content-container { flex: 1 1; flex-direction: column; justify-content: center; } } @media only screen and (min-width: 37.5rem) { .two-column-media-image-video { display: flex; gap: 2.5rem; } .two-column-media-image-video .two-column-media-content-container { flex: 1 1; flex-direction: column; justify-content: center; } .two-column-media-image-video .two-column-media-content-container .two-column-media-content { display: flex; flex-direction: column; gap: 1.5rem; padding-top: 1rem; padding-bottom: 1rem; } } @media only screen and (min-width: 52.5rem) { .two-column-media-image-video { display: flex; flex-direction: row; } } .carousel-card { --transformX: -1; --transformZ: 0; --scale: 1; max-width: 25rem; width: calc(100% - 4px); height: 28.8rem; z-index: 10; position: absolute; overflow: hidden; border-radius: 1rem; background: var(--kite-color-white); box-shadow: 0 1.5px 6px 0 rgba(0, 0, 0, 0.1); transform: translateX(var(--transformX)) scale(var(--scale)) translateZ(var(--transformZ)); } .carousel-card:hover:not(.scaled), .carousel-card:focus, .carousel-card:focus-visible { outline: 2px solid var(--kite-color-blue-20); outline-offset: 0; cursor: pointer; } .carousel-card:hover:not(.scaled) a, .carousel-card:focus a, .carousel-card:focus-visible a { color: var(--kite-color-dark-blue-10); text-decoration: underline; } .carousel-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .carousel-card__body { padding: 1.75rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; height: calc(28.8rem - (100vw - 2rem) * 0.5625); } @media (min-width: 27rem) { .carousel-card__body { height: 14.7375rem; } } .carousel-card__body-copy { display: flex; flex-direction: column; gap: 0.5rem; } .carousel-card__body a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .carousel-card__body a:hover, .carousel-card__body a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .carousel-card__title { color: var(--kite-color-dark-blue-20); margin-bottom: 0; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; } .carousel-card__description { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 25rem) { .carousel-card__description { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .carousel-card__description p { font-weight: 400; font-size: 1rem; line-height: 1.625; } .carousel-card__description.clip { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 25rem) { .carousel-card__description.clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } .carousel-card.scaled { --scale: 0.75; display: none; opacity: 0.9; } .carousel-card.scaled .card-body a { pointer-events: none; } @media only screen and (min-width: 37.5rem) { .carousel-card.scaled { display: block; } } .carousel-card.center { --transformZ: 0; } .carousel-card.left-2 { --transformX: -45.5rem; --transformZ: 0; } .carousel-card.left-1 { --transformX: -24.7rem; --transformZ: 0; } .carousel-card.right-1 { --transformX: 24.7rem; --transformZ: 0; } .carousel-card.right-2 { --transformX: 45.5rem; --transformZ: 0; } .carousel-card.left-2, .carousel-card.left-1, .carousel-card.right-1, .carousel-card.right-2 { pointer-events: none; } .carousel-card.hidden { opacity: 0; pointer-events: none; } .card-carousel { margin-top: 4rem; display: flex; flex-direction: column; --gradient-transition-start: var(--background-color); --gradient-transition-end: rgba(243, 245, 249, 0); } .card-carousel .header-section { display: flex; flex-direction: column; text-align: center; } .card-carousel__title { color: var(--kite-color-dark-blue-20); text-align: center; line-height: 2.625rem; } .card-carousel__card-section { display: flex; align-items: center; position: relative; perspective: 62.5rem; margin-top: 60px; height: 29.25rem; } .card-carousel__track { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); overflow: hidden; background-color: transparent; padding-inline: 0.5rem; } .card-carousel__controls { position: relative; display: flex; flex-direction: row; gap: 2rem; margin: auto; margin-top: 2.5rem; } .card-carousel__controls .nav-arrow { position: relative; left: 0; right: 0; } @media only screen and (min-width: 37.5rem) { .card-carousel__controls { display: none; } } .card-carousel .nav-arrow { color: var(--kite-color-blue-20); width: 4rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; z-index: 5; font-size: 1.5rem; outline: none; padding: 1.125rem 0; border: 1px solid var(--kite-color-gray-25); background: var(--kite-color-white); } .card-carousel .nav-arrow--floated { display: none; } .card-carousel .nav-arrow span.kite-icon { color: var(--kite-color-primary); } .card-carousel .nav-arrow:hover { background: var(--kite-color-gray-20); } .card-carousel .nav-arrow:focus-visible { outline: 2px solid var(--kite-color-blue-20); } .card-carousel .nav-arrow.left { border-radius: 0.25rem 0 0 0.25rem; } .card-carousel .nav-arrow.right { border-radius: 0 0.25rem 0.25rem 0; } @media only screen and (min-width: 37.5rem) { .card-carousel .nav-arrow--floated { display: flex; position: absolute; top: 50%; transform: translateY(-50%); } .card-carousel .nav-arrow--floated.left { left: 1.5rem; } .card-carousel .nav-arrow--floated.right { right: 1.5rem; } } .card-carousel .dots { display: flex; justify-content: center; gap: 0.625rem; margin-top: 2rem; } .card-carousel .dots .dot { width: 1rem; height: 1rem; border-radius: 50%; border: 0.063rem solid #606a85; background: var(--kite-color-white); transition: transform 0.3s ease; } .card-carousel .dots .dot.active { transform: scale(1.2); background: var(--kite-color-blue-20); } @media only screen and (min-width: 30rem) { .card-carousel .dots { margin-top: 3.75rem; } } @media only screen and (min-width: 37.5rem) { .card-carousel .gradient, .card-carousel .right-gradient, .card-carousel .left-gradient { content: ""; position: absolute; top: 0; height: 21.8125rem; margin-top: 3.75rem; width: 9.4375rem; flex-shrink: 0; z-index: 1; pointer-events: none; } .card-carousel .left-gradient { left: -0.1875rem; background: linear-gradient(to right, var(--gradient-transition-start) 0%, var(--gradient-transition-end) 100%); } .card-carousel .right-gradient { right: -0.1875rem; background: linear-gradient(to left, var(--gradient-transition-start) 0%, var(--gradient-transition-end) 100%); } } @media only screen and (min-width: 52.5rem) { .card-carousel .left-gradient, .card-carousel .right-gradient { width: 14.5rem; } } .business-grid { margin-top: 4rem; display: flex; flex-direction: column; gap: 2.5rem; } .business-grid__content { display: flex; flex-direction: column; gap: 1.5rem; } .business-grid__title { color: var(--kite-color-dark-blue-20); } .business-grid__eyebrow { text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .business-grid__eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .business-grid__body { font-weight: 400; font-size: 1.125rem; line-height: 1.3333333333; text-align: center; } @media only screen and (min-width: 37.5rem) { .business-grid__body { font-size: 1.25rem; line-height: 1.5; } } .business-grid__body p, .business-grid__body span { font-weight: 400; font-size: 1.125rem; line-height: 1.3333333333; } @media only screen and (min-width: 37.5rem) { .business-grid__body p, .business-grid__body span { font-size: 1.25rem; line-height: 1.5; } } .business-grid__body p { margin-bottom: 0; } .business-grid__body a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; color: #0263ca; } @media only screen and (min-width: 30rem) { .business-grid__body a:hover, .business-grid__body a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } @media only screen and (min-width: 30rem) { .business-grid__body a:hover, .business-grid__body a:visited:hover { color: var(--kite-color-blue-30); text-decoration: underline; } } .business-grid__body sup { font-size: 0.75rem; font-weight: 500; } .business-grid__cards-container { display: flex; flex-direction: column; gap: 1.25rem; } .business-grid__image-card { border-radius: 1rem; } .business-grid-row { display: flex; flex-direction: column; gap: 1.25rem; min-height: 19.125rem; } @media only screen and (min-width: 60rem) { .business-grid-row { flex-direction: row; } } @media only screen and (min-width: 60rem) { .business-grid-row--right { flex-direction: row-reverse; } } .business-grid-row__image { width: 100%; } .business-grid-row__image-wrapper { position: relative; width: 100%; display: flex; justify-content: center; overflow: hidden; aspect-ratio: 16/9; border-radius: 1rem; flex: 1 0 100%; } @media only screen and (min-width: 37.5rem) { .business-grid-row__image { position: absolute; width: 100%; height: auto; right: 0%; bottom: 0%; left: 0%; top: 0%; } .business-grid-row__image-wrapper { flex: 0 1 50%; max-height: 17.5rem; } } @media only screen and (min-width: 60rem) { .business-grid-row__image.gatsby-image-wrapper { position: absolute; } .business-grid-row__image-wrapper { aspect-ratio: unset; max-height: unset; } } .business-grid-row__cards { flex: 1 1; display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; } @media only screen and (min-width: 52.5rem) { .business-grid-row__cards { flex: 1 1 50%; flex-direction: row; } .business-grid-row__cards > a { display: flex; flex: 1 1; } } .business-card { display: flex; flex: 1 0 100%; height: 100%; flex-direction: column; padding-block: 2.5rem; padding-inline: 1.25rem; border-radius: 1rem; justify-content: space-between; gap: 1rem; } .business-card__wrapper { display: flex; flex: 1 1; } .business-card__wrapper--link { text-decoration: none; color: inherit; display: block; border-radius: 1rem; } .business-card__wrapper--link:focus-visible, .business-card__wrapper--link:focus, .business-card__wrapper--link:active, .business-card__wrapper--link:hover { outline: 2px solid var(--kite-color-blue-20); } .business-card__wrapper--link:focus-visible .business-card__link, .business-card__wrapper--link:focus .business-card__link, .business-card__wrapper--link:active .business-card__link, .business-card__wrapper--link:hover .business-card__link { color: var(--kite-color-blue-30); } .business-card__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; align-self: stretch; padding-block: 2.5rem; padding-inline: 1.25rem; border-radius: 1rem; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); border: 1px solid var(--kite-border-color); background: var(--kite-color-white); height: 100%; text-decoration: none; } .business-card__inner:focus-visible, .business-card__inner:focus, .business-card__inner:active, .business-card__inner:hover { border: 2px solid #0271eb; border-radius: 1rem; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); outline: none; } .business-card__inner:focus-visible .business-card__link, .business-card__inner:focus .business-card__link, .business-card__inner:active .business-card__link, .business-card__inner:hover .business-card__link { color: var(--kite-color-blue-30); } .business-card__logo { height: 2.5rem; } @media only screen and (min-width: 52.5rem) { .business-card__logo--large { height: 3.625rem; } } .business-card__content { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; } .business-card__description { font-weight: 400; font-size: 0.875rem; color: var(--kite-color-black); text-align: center; line-height: 1.25rem; } @media only screen and (min-width: 52.5rem) { .business-card__description--large { font-weight: 400; font-size: 1.125rem; line-height: 1.3333333333; } } @media only screen and (min-width: 52.5rem) and (min-width: 37.5rem) { .business-card__description--large { font-size: 1.25rem; line-height: 1.5; } } .business-card__link { color: var(--kite-color-blue-20); } .business-card__link:hover { color: var(--kite-color-blue-30); } .hero-gradient { position: relative; display: flex; flex-direction: column-reverse; width: 100%; height: auto; justify-content: center; background: var(--kite-color-white); } .hero-gradient h1, .hero-gradient h2, .hero-gradient p { padding: 0; margin: 0; } .hero-gradient .gatsby-image-wrapper { display: block; width: 100%; aspect-ratio: 16/9; } @media only screen and (min-width: 52.5rem) { .hero-gradient .gatsby-image-wrapper { position: absolute !important; top: 0; right: 0; width: 65%; height: 100%; } } .hero-gradient__content-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; max-width: 80rem; margin: 0 auto; z-index: 2; padding: 2rem 1rem; } @media only screen and (min-width: 52.5rem) { .hero-gradient__content-wrapper { padding: 1.5rem; } } .hero-gradient__content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 1.75rem; } .hero-gradient__content .typestack-display { color: var(--kite-color-dark-blue-10); } .hero-gradient__content .text p { color: var(--kite-color-black); font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .hero-gradient__content .text p { font-size: 1.25rem; line-height: 1.3; } } .hero-gradient__content .text p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .hero-gradient__content .text p a:hover, .hero-gradient__content .text p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } @media only screen and (min-width: 52.5rem) { .hero-gradient__content { width: 50%; } } .hero-gradient__title { display: flex; flex-direction: column; } .hero-gradient__eyebrow { color: var(--kite-color-gray-30); text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .hero-gradient__eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .hero-gradient__bg-gradient { display: none; } @media only screen and (min-width: 52.5rem) { .hero-gradient__bg-gradient { display: block; position: absolute; top: 0; right: 0; width: 70%; height: 100%; z-index: 1; } .hero-gradient__bg-gradient.linear { background: linear-gradient(270deg, rgba(255, 255, 255, 0) 49.5%, rgba(255, 255, 255, 0.2) 63.3%, var(--kite-color-white) 90.25%); } .hero-gradient__bg-gradient.radial { background: radial-gradient(55% 90% at 65% 55%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.37) 63%, #fff 100%); } } @media only screen and (min-width: 52.5rem) { .hero-gradient { min-height: 31.25rem; } } .accordion-group { margin-top: 4rem; display: flex; flex-direction: column; gap: 2.5rem; } .accordion-group__title { color: var(--kite-color-dark-blue-20); text-align: center; margin-bottom: 0; } .accordion-group__accordions { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; } .accordion-group__accordions .kite-accordion-row { --background-color-hover: transparent; list-style: none; align-items: center; align-self: stretch; border-radius: 0.5rem; border: 1px solid var(--kite-border-color); background: var(--kite-color-white); } .accordion-group__accordions .kite-accordion-row__button { display: flex; padding-inline: 1rem; } .accordion-group__accordions .kite-accordion-row__button-inner { width: 100%; padding: 0; gap: 1rem; } .accordion-group__accordions .kite-accordion-row__content { padding: 0 1rem 1rem; } .accordion-group__accordions .kite-accordion-row:hover { box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); } .accordion-group-item__title { font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin-bottom: 0; } @media only screen and (max-width: 37.5rem) { .accordion-group-item__title { font-size: 1.125rem; line-height: 1.3333333; } } .accordion-group-item__body { color: var(--kite-color-black); font-weight: 400; font-size: 1rem; line-height: 1.625; } .accordion-group-item__body p { font-weight: 400; font-size: 1rem; line-height: 1.625; margin-bottom: 0; } .accordion-group-item__body a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .accordion-group-item__body a:hover, .accordion-group-item__body a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .accordion-group-item__link { margin-top: 1rem; padding: 0; min-height: 0; } .accordion-group-item__link .kite-button__inner { justify-content: flex-start; } .impact-number-grid { display: flex; flex-direction: column; margin-top: 4rem; gap: 2.5rem; } .impact-number-grid__title { color: var(--kite-color-dark-blue-20); } .impact-number-grid__cards { display: flex; flex-direction: column; gap: 1.25rem; } @media only screen and (min-width: 52.5rem) { .impact-number-grid__cards { flex-direction: row; flex-wrap: wrap; justify-content: center; } } .impact-number-card { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 1.25rem; border-radius: 1rem; gap: 1rem; border: 1px solid var(--kite-border-color); background: var(--kite-color-white); width: 100%; justify-content: space-between; } .impact-number-card__content { display: flex; flex-direction: column; } .impact-number-card__header { display: flex; flex-direction: column; align-items: center; } .impact-number-card__title { text-align: center; color: var(--kite-color-blue-20); } .impact-number-card__title p { margin-bottom: 0; } .impact-number-card__title sup { font-size: 0.75rem; font-weight: 500; } .impact-number-card__title sup { top: -1.5rem; font-size: 1.5rem; font-weight: 800; } .impact-number-card__title--title-1 { font-weight: 800; font-size: 4rem; line-height: 1.125; } @media only screen and (max-width: 37.5rem) { .impact-number-card__title--title-1 { font-size: 3rem; line-height: 1.2083; } } .impact-number-card__title--title-2 { font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .impact-number-card__title--title-2 { font-size: 2.25rem; line-height: 1.27778; } } .impact-number-card__title--title-3 { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .impact-number-card__title--title-3 { font-size: 1.75rem; line-height: 1.2857; } } .impact-number-card__title--title-1 p { font-weight: 800; font-size: 4rem; line-height: 1.125; } @media only screen and (max-width: 37.5rem) { .impact-number-card__title--title-1 p { font-size: 3rem; line-height: 1.2083; } } .impact-number-card__title--title-2 p { font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .impact-number-card__title--title-2 p { font-size: 2.25rem; line-height: 1.27778; } } .impact-number-card__title--title-3 p { font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .impact-number-card__title--title-3 p { font-size: 1.75rem; line-height: 1.2857; } } .impact-number-card__header { color: var(--kite-color-black); margin-bottom: 0; text-align: center; width: 100%; } .impact-number-card__header p { margin-bottom: 0; } .impact-number-card__header sup { font-size: 0.75rem; font-weight: 500; } .impact-number-card__header--title-5 { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .impact-number-card__header--title-5 { font-size: 1.25rem; line-height: 1.3; } } .impact-number-card__header--title-6 { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .impact-number-card__header--title-6 { font-size: 1.125rem; line-height: 1.3333333; } } .impact-number-card__header--body-1_v2 { font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .impact-number-card__header--body-1_v2 { font-size: 1.125rem; line-height: 1.625; } } .impact-number-card__header--title-5 p { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .impact-number-card__header--title-5 p { font-size: 1.25rem; line-height: 1.3; } } .impact-number-card__header--title-6 p { font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .impact-number-card__header--title-6 p { font-size: 1.125rem; line-height: 1.3333333; } } .impact-number-card__header--body-1_v2 p { font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .impact-number-card__header--body-1_v2 p { font-size: 1.125rem; line-height: 1.625; } } .impact-number-card__divider { width: 6.25rem; height: 2px; background: var(--kite-border-color); margin-top: 1rem; margin-bottom: 1rem; } .impact-number-card__body { flex: 1 1; color: var(--kite-color-black); text-align: center; font-weight: 400; font-size: 0.875rem; } .impact-number-card__body p { margin-bottom: 0; font-weight: 400; font-size: 0.875rem; } .impact-number-card__body sup { font-size: 0.75rem; font-weight: 500; } .impact-number-card__link { margin: top 1rem; color: var(--kite-color-blue-20); } .impact-number-card__link:hover { color: var(--kite-color-blue-30); } .impact-card-wrapper, .impact-card-wrapper-link { display: flex; border-radius: 1rem; } @media only screen and (min-width: 52.5rem) { .impact-card-wrapper, .impact-card-wrapper-link { max-width: 50%; flex-grow: 1; flex-shrink: 1; flex-basis: calc(50% - 1.25rem); /* Two cards per row minus gap */ } } @media only screen and (min-width: 80rem) { .impact-card-wrapper, .impact-card-wrapper-link { max-width: 33.333%; flex-grow: 1; flex-shrink: 1; flex-basis: calc(33.333% - 1.25rem); /* Three cards per row minus gap */ } } .impact-card-wrapper-link { text-decoration: none; } .impact-card-wrapper-link:focus-visible, .impact-card-wrapper-link:focus, .impact-card-wrapper-link:active, .impact-card-wrapper-link:hover, .impact-card-wrapper-link:focus-within { outline: 2px solid var(--kite-color-primary); border: transparent; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); } .impact-card-wrapper-link:focus-visible .impact-number-card__link, .impact-card-wrapper-link:focus .impact-number-card__link, .impact-card-wrapper-link:active .impact-number-card__link, .impact-card-wrapper-link:hover .impact-number-card__link, .impact-card-wrapper-link:focus-within .impact-number-card__link { color: var(--kite-color-blue-30); } .image-with-numbers { background-color: var(--kite-color-white); position: relative; display: flex; flex-direction: column; width: 100%; border-radius: 1rem; margin-top: 4rem; } .image-with-numbers p, .image-with-numbers h3 { padding: 0; margin: 0; } @media only screen and (min-width: 60rem) { .image-with-numbers { padding: 2.5rem; } } .image-with-numbers__inner-content { display: flex; flex-direction: column; position: relative; --offset-y: -3rem; top: var(--offset-y); margin-bottom: var(--offset-y); } @media only screen and (min-width: 37.5rem) { .image-with-numbers__inner-content { --offset-y: -3.5rem; } } @media only screen and (min-width: 52.5rem) { .image-with-numbers__inner-content { --offset-y: -5rem; } } @media only screen and (min-width: 60rem) { .image-with-numbers__inner-content { --offset-x: -3.5rem; flex-direction: row; align-items: center; gap: 3rem; top: 0; margin-left: var(--offset-x); margin-bottom: 0; } .image-with-numbers__inner-content--right { flex-direction: row-reverse; margin-left: 0; margin-right: var(--offset-x); } } @media only screen and (min-width: 81.25rem) { .image-with-numbers__inner-content { --offset-x: -4.5rem; } } @media only screen and (min-width: 85rem) { .image-with-numbers__inner-content { --offset-x: -5.5rem; } } .image-with-numbers__copy { display: flex; flex-direction: column; flex: 0 1; min-width: 44%; } .image-with-numbers__header { display: flex; flex-direction: column; } .image-with-numbers__eyebrow { color: var(--kite-color-gray-30); margin: 0; margin-top: 1.5rem; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .image-with-numbers__eyebrow { font-size: 0.875rem; line-height: 1.375rem; } } .image-with-numbers__title { color: var(--kite-color-dark-blue-20); font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .image-with-numbers__title { font-size: 2.25rem; line-height: 1.27778; } } .image-with-numbers__body { margin-top: 1.25rem; font-weight: 400; font-size: 1.125rem; line-height: 1.3333333333; } @media only screen and (min-width: 37.5rem) { .image-with-numbers__body { font-size: 1.25rem; line-height: 1.5; } } .image-with-numbers__body > p { font-weight: 400; font-size: 1.125rem; line-height: 1.3333333333; } @media only screen and (min-width: 37.5rem) { .image-with-numbers__body > p { font-size: 1.25rem; line-height: 1.5; } } .image-with-numbers__cta { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .image-with-numbers__cta.kite-button { line-height: 1.5; } @media only screen and (min-width: 60rem) { .image-with-numbers__cta { width: fit-content; } } .image-with-numbers__numbers-grid { display: flex; flex-wrap: wrap; justify-content: space-around; column-gap: 1rem; row-gap: 2rem; margin-top: 2.5rem; height: fit-content; } .image-with-numbers__numbers-grid--desktop { display: none; } @media only screen and (min-width: 60rem) { .image-with-numbers__numbers-grid--desktop { display: flex; } } @media only screen and (min-width: 60rem) { .image-with-numbers__numbers-grid--mobile { display: none; } } .image-with-numbers__img { flex: 1 1; aspect-ratio: 16/10; width: 100%; border-radius: 1rem; } .highlight-number { display: flex; flex-direction: column; align-items: center; margin: 0; min-width: 7rem; } .highlight-number--3 { max-width: calc((100% - 2rem) / 3); } .highlight-number--4 { max-width: calc((100% - 3rem) / 4); } @media only screen and (min-width: 30rem) { .highlight-number { min-width: 10rem; } } .highlight-number__stat > p { color: var(--kite-color-primary); text-align: center; word-break: break-all; font-weight: 700; font-size: 2.625rem; line-height: 1.2381; } @media only screen and (max-width: 37.5rem) { .highlight-number__stat > p { font-size: 2.25rem; line-height: 1.27778; } } @media only screen and (min-width: 30rem) { .highlight-number__stat > p { font-weight: 800; font-size: 3rem; line-height: 1.2083; } } @media only screen and (min-width: 30rem) and (max-width: 37.5rem) { .highlight-number__stat > p { font-size: 2.625rem; line-height: 1.2381; } } .highlight-number__desc > p { text-align: center; font-weight: 400; font-size: 1.125rem; line-height: 1.3333333333; } @media only screen and (min-width: 37.5rem) { .highlight-number__desc > p { font-size: 1.25rem; line-height: 1.5; } } .leadership-bio-v2__body section { margin-top: 2.5rem; } .leadership-bio-v2__nav { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } @media only screen and (min-width: 52.5rem) { .leadership-bio-v2__nav { gap: 0; } } .leadership-bio-v2__nav a { font-weight: 400; font-size: 1rem; line-height: 1.625; text-decoration: none; } .leadership-bio-v2__nav a .kite-icon:first-of-type { margin: 0; } .leadership-bio-v2__nav.kite-container { padding: 0; } @media only screen and (min-width: 37.5rem) { .leadership-bio-v2__nav.kite-container { padding: 0 2rem; } } .leadership-bio-v2__nav .next-prev { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .leadership-bio-v2__nav .next-prev a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-grow: 1; border-radius: 0; max-width: 11.375rem; height: 3.9375rem; padding: 1rem; color: var(--kite-color-white); background-color: var(--kite-color-primary); } .leadership-bio-v2__nav .next-prev a:first-of-type { justify-content: flex-start; } .leadership-bio-v2__nav .next-prev a:last-of-type { justify-content: flex-end; } /* Added this typestack to override lineheight for AuthorBio components */ .article-author-bio { padding-block: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .article-author-bio__header { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; color: var(--kite-color-black); } .article-author-bio__container { padding-top: 4px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 12px; } .article-author-bio__body { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; } .article-author-bio__body p { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; margin-bottom: 0; } .article-author-bio__follow-text { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; color: var(--kite-color-gray-30); } .article-author-bio__follow-text p { font-weight: 400; font-size: 0.875rem; line-height: 1.25rem; margin-bottom: 0; } .article-author-bio__social { display: flex; align-items: center; align-content: center; gap: 8px; } .article-author-bio__social-media-links { display: flex; gap: 0.5rem; } .article-byline { display: flex; padding-bottom: 2rem; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.5rem; border-radius: 0.5rem; } .article-byline__author { display: flex; align-items: center; align-content: center; gap: 0.75rem; align-self: stretch; flex-wrap: wrap; } .article-byline__headshot { width: 4rem; height: 4rem; aspect-ratio: 1/1; border-radius: 4rem; } .article-byline__text-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1 0; } .article-byline__name { color: var(--kite-color-primary); font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .article-byline__name { font-size: 1.125rem; line-height: 1.3333333; } } .article-byline__name > p { font-weight: 500; font-size: 1.25rem; line-height: 1.3; margin-bottom: 0; } @media only screen and (max-width: 37.5rem) { .article-byline__name > p { font-size: 1.125rem; line-height: 1.3333333; } } .article-byline__position { color: var(--kite-color-gray-30); font-weight: 400; font-size: 1rem; line-height: 1.625; } .article-byline__name > p::before { color: var(--kite-color-black); content: "By "; } .media-asset-download { margin: 1.25rem 0; } .media-asset-download__caption p { font-weight: 400; font-size: 0.875rem; font-size: 0.875rem; } .media-asset-download__card { margin-bottom: 1rem; border-radius: var(--kite-border-radius-lg); border: 1px solid var(--kite-color-gray-20); } .media-asset-download__row { gap: 1rem; display: inline-flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; } .media-asset-download__row:first-of-type { padding-bottom: 1.5rem; } .media-asset-download__row:not(:first-of-type) { padding-top: 1.5rem; border-top: 1px solid var(--kite-color-gray-20); } .media-asset-download__row--article-media { padding-bottom: 1.5rem; } .media-asset-download__row--no-wrap { flex-wrap: nowrap; } .media-asset-download__row .special-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; } @media screen and (min-width: 25.25rem) { .media-asset-download__row .special-wrap { gap: 0.5rem; } } .media-asset-download__row-start { display: inline-flex; justify-content: flex-start; align-items: center; gap: 1rem; } .media-asset-download__title { padding: 0; margin: 0; font-weight: 500; font-size: 1.25rem; line-height: 1.3; } @media only screen and (max-width: 37.5rem) { .media-asset-download__title { font-size: 1.125rem; line-height: 1.3333333; } } .media-asset-download__media-details { font-size: 1rem; color: var(--kite-color-gray-30); padding: 0; margin: 0; font-weight: 400; font-size: 1rem; line-height: 1.625; } @media only screen and (min-width: 60rem) { .media-asset-download__button { width: fit-content; } } .media-asset-download__chevron-button { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .media-asset-download__chevron-button:focus-visible { outline: 2px solid var(--kite-color-blue-20); outline-offset: 2px; border-radius: 0.25rem; } .media-asset-download__chevron { margin: 1.125rem 0; transition: transform 0.3s ease; } .media-asset-download__chevron--open { transform: rotate(180deg); } .media-asset-download__dropdown { display: flex; flex-direction: column; align-items: center; padding-top: 1.5rem; gap: 1.5rem; } @media only screen and (min-width: 37.5rem) { .media-asset-download__dropdown { align-items: flex-end; } } .media-asset-download__dropdown--closed { display: none; } .related-media { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; width: 100%; } .related-media__grid { width: 100%; justify-content: center; } @media only screen and (min-width: 37.5rem) { .related-media__grid { justify-content: flex-start; } } .related-media__grid-cell { overflow: hidden; width: 100%; max-width: 25rem; } .related-media__preview { position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; background-color: var(--kite-color-gray-10); border-radius: 0.25rem; } .related-media__image { width: 100%; height: 100%; object-fit: cover; } .related-media__icon-preview { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--kite-color-gray-30); } .related-media__icon { width: 4rem; height: 4rem; } .related-media__details { padding: 0.75rem 0; } .related-media__details-content { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .related-media__info > * { margin: 0; } .related-media__title { margin-bottom: 0.25rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-size: 0.875rem; } .related-media__meta { font-size: 0.75rem; color: var(--kite-color-gray-30); text-transform: uppercase; font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; letter-spacing: 0; } .related-media__download-btn { padding: 0.75rem; } .related-media__download-icon { width: 1.25rem; height: 1.25rem; } .table-of-contents { padding: 1.25rem 0.625rem; display: flex; flex-direction: column; gap: 1.25rem; } .table-of-contents p { font-size: 1.5rem; font-style: normal; font-weight: 500; line-height: 1.875rem; margin: 0; } .table-of-contents ul { padding: 0.625rem 1.75rem; margin: 0; display: flex; flex-direction: column; gap: 1rem; } .table-of-contents li { margin: 0; margin-left: 1.75rem; padding: 0; } .table-of-contents li::marker { color: var(--kite-color-blue-30); } .table-of-contents li > a { text-decoration: none; font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .table-of-contents li > a { font-size: 1rem; line-height: 1.625; } } .table-of-contents li > a { font-weight: 500; } .newsroom-layout .newsroom-content { background: var(--kite-color-white); width: 100%; max-width: 56rem; padding-bottom: 3rem; padding-top: 2rem; } @media only screen and (min-width: 52.5rem) { .newsroom-layout .newsroom-content { width: calc(50rem + (100vw - 1280px) / 2); padding-right: 1.875rem; } } .newsroom-layout .newsroom-content header { display: flex; flex-direction: column; margin-bottom: 2rem; } .newsroom-layout .newsroom-content header h1, .newsroom-layout .newsroom-content header p { margin: 0; } .newsroom-layout .newsroom-content header .subtitle { margin-top: 1rem; font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .newsroom-layout .newsroom-content header .subtitle { font-size: 1.25rem; line-height: 1.3; } } .newsroom-layout .newsroom-content header .eyebrow { margin-bottom: 1rem; font-weight: 700; text-transform: uppercase; font-weight: 700; font-size: 1rem; line-height: 1.5; letter-spacing: 0.125rem; } @media only screen and (max-width: 37.5rem) { .newsroom-layout .newsroom-content header .eyebrow { font-size: 0.75rem; } } .newsroom-layout .newsroom-content header .eyebrow { color: var(--kite-color-gray-30); } .newsroom-layout .newsroom-content header .eyebrow .date { font-weight: 500; } .newsroom-layout .newsroom-content header .eyebrow .date:not(:first-child) { border-left: 1px solid var(--kite-color-gray-20); margin-left: 1rem; padding-left: 1rem; } .newsroom-layout .newsroom-content h2 { font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 37.5rem) { .newsroom-layout .newsroom-content h2 { font-size: 1.25rem; line-height: 1.3; } } .newsroom-layout .newsroom-content h2 { font-weight: 700; } .newsroom-layout .newsroom-content .leader-list { padding: 0; margin: 0; display: flex; flex-direction: column; list-style: none; margin-bottom: 1.25rem; gap: 1.5rem; } .newsroom-layout .newsroom-content .leader-list > .paragraph__leadership_promotion { padding: 0; } .newsroom-layout .newsroom-content div p a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .newsroom-layout .newsroom-content div p a:hover, .newsroom-layout .newsroom-content div p a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .newsroom-layout .newsroom-content div p a sup { font-size: 0.75rem; font-weight: 500; } @media only screen and (min-width: 30rem) { .newsroom-layout .newsroom-content div p a sup:hover, .newsroom-layout .newsroom-content div p a sup:visited:hover { color: var(--kite-color-dark-blue-10); } } .newsroom-layout .newsroom-content div ul li a, .newsroom-layout .newsroom-content div ol li a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .newsroom-layout .newsroom-content div ul li a:hover, .newsroom-layout .newsroom-content div ul li a:visited:hover, .newsroom-layout .newsroom-content div ol li a:hover, .newsroom-layout .newsroom-content div ol li a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .newsroom-layout .newsroom-content div ul li a sup, .newsroom-layout .newsroom-content div ol li a sup { font-size: 0.75rem; font-weight: 500; } @media only screen and (min-width: 30rem) { .newsroom-layout .newsroom-content div ul li a sup:hover, .newsroom-layout .newsroom-content div ul li a sup:visited:hover, .newsroom-layout .newsroom-content div ol li a sup:hover, .newsroom-layout .newsroom-content div ol li a sup:visited:hover { color: var(--kite-color-dark-blue-10); } } .newsroom-layout .newsroom-content figure { margin: 0; } .newsroom-layout .newsroom-content figure figcaption { font-size: 1rem; } .newsroom-layout .newsroom-content figure.center { width: 100%; display: flex; flex-direction: column; align-items: center; } .newsroom-layout .newsroom-content figure.right { width: 100%; display: flex; flex-direction: column; align-items: flex-end; } .newsroom-layout .newsroom-content img { max-width: 100%; } .newsroom-layout .newsroom-content iframe { width: 100%; aspect-ratio: 2/1; height: auto; max-width: 100%; } .newsroom-layout .paragraph__video { margin: 2.5rem 0; padding: 0; } .newsroom-layout .paragraph__video .video-wrapper { position: relative; } .newsroom-layout .paragraph__video .video-wrapper iframe { width: 100%; height: 100%; } .newsroom-layout { display: flex; flex-direction: column; margin-bottom: -3rem; } @media only screen and (min-width: 52.5rem) { .newsroom-layout { flex-direction: row; justify-content: space-between; } } .leader-hero { width: 100%; max-width: 106.25rem; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; } .leader-hero h1, .leader-hero h2, .leader-hero h3, .leader-hero p { padding: 0; margin: 0; } @media only screen and (min-width: 52.5rem) { .leader-hero { overflow: hidden; height: 615px; } } .leader-hero__bg-gradient { display: none; } @media only screen and (min-width: 52.5rem) { .leader-hero__bg-gradient { display: block; position: absolute; top: 0; left: 0; width: 57.9%; height: 100.5%; z-index: 1; background: linear-gradient(95deg, rgba(255, 255, 255, 0) 49.5%, rgba(255, 255, 255, 0.2) 63.3%, #fff 90.25%); } } @media only screen and (min-width: 80rem) { .leader-hero__bg-gradient { background: linear-gradient(97deg, rgba(255, 255, 255, 0) 49.5%, rgba(255, 255, 255, 0.2) 63.3%, #fff 90.25%); } } .leader-hero .gatsby-image-wrapper { display: block; width: 100%; min-height: 27.75rem; } @media only screen and (min-width: 52.5rem) { .leader-hero .gatsby-image-wrapper { position: absolute; top: 0; left: 0; width: 57.6875%; height: 100%; } } .leader-hero__content-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: 100%; } @media only screen and (min-width: 52.5rem) { .leader-hero__content-wrapper { max-width: 1280px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; z-index: 2; } } .leader-hero__content-wrapper h1 { display: flex; flex-direction: column; font-weight: 800; font-size: 3rem; line-height: 1.2083; } @media only screen and (max-width: 60rem) { .leader-hero__content-wrapper h1 { font-size: 2.625rem; line-height: 1.2381; } } .leader-hero__content-wrapper small { color: var(--kite-color-gray-30); font-weight: 500; font-size: 1.5rem; line-height: 1.25; } @media only screen and (max-width: 60rem) { .leader-hero__content-wrapper small { font-size: 1.25rem; line-height: 1.3; } } .leader-hero__content { width: 100%; padding: 2rem 1rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; } @media only screen and (min-width: 52.5rem) { .leader-hero__content { width: 50%; padding: 0 2.5rem 0 4.5rem; display: flex; flex-direction: column; gap: 1.5rem; } } .leader-hero__heading { gap: 0.5rem; display: flex; flex-direction: column; } @media only screen and (min-width: 52.5rem) { .leader-hero__heading { gap: 0.75rem; } } .leader-hero__positions { display: flex; flex-direction: column; gap: 0.25rem; } .leader-hero__quote { font-weight: 500; font-size: 1.75rem; line-height: 1.2857; } @media only screen and (max-width: 60rem) { .leader-hero__quote { font-size: 1.5rem; line-height: 1.25; } } .leader-hero__cta { width: 100%; } .leader-hero__cta-buttons { display: flex; flex-direction: column; padding: 0.625rem 0; margin-bottom: 0.25rem; gap: 0.625rem; } @media only screen and (min-width: 52.5rem) { .leader-hero__cta-buttons { flex-direction: row; } } .leader-hero__cta-buttons .kite-button--secondary { width: 100%; } @media only screen and (min-width: 52.5rem) { .leader-hero__cta-buttons .kite-button--secondary { max-width: fit-content; } } .leader-hero__disclaimer { font-weight: 400; font-size: 0.875rem; } .leader-hero__disclaimer a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .leader-hero__disclaimer a:hover, .leader-hero__disclaimer a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .leader-hero__socials { display: flex; align-items: center; gap: 0.625rem; } .leader-hero__socials a { display: flex; align-items: center; font-size: 1rem; line-height: 1.625; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .leader-hero__socials a:hover, .leader-hero__socials a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .leader-hero__socials-label { color: var(--kite-color-gray-30); font-weight: 400; font-size: 1rem; line-height: 1.625; } .newsroom-layout { display: flex; flex-direction: column; margin-bottom: -3rem; } @media only screen and (min-width: 52.5rem) { .newsroom-layout { flex-direction: row; justify-content: space-between; } } .leadership__cards .kite-grid { display: grid; grid: auto/1fr; justify-items: center; } .leadership__cards .kite-grid .kite-cell { width: 100%; } .leadership__cards .kite-grid .kite-cell li.paragraph__card_trio_card { max-width: 1280px; } .leadership__cards .kite-grid.leader-grid .kite-cell { max-width: 16rem; } .leadership__cards .kite-grid.leader-grid .kite-cell .gatsby-image-wrapper { height: 18rem; } @media only screen and (min-width: 37.5rem) { .leadership__cards .kite-grid.leader-grid.three-col, .leadership__cards .kite-grid.leader-grid.three-col.four-col { grid-template-columns: repeat(3, 1fr); } .leadership__cards .kite-grid.leader-grid.three-col .kite-cell .gatsby-image-wrapper, .leadership__cards .kite-grid.leader-grid.three-col.four-col .kite-cell .gatsby-image-wrapper { height: 16rem; } } @media (min-width: 700px) { .leadership__cards .kite-grid.leader-grid.four-col { grid-template-columns: repeat(4, 1fr); } .leadership__cards .kite-grid.leader-grid.four-col .kite-cell .gatsby-image-wrapper { height: 14rem; } } @media only screen and (min-width: 52.5rem) { .leadership__cards .kite-grid.leader-grid.three-col .kite-cell .gatsby-image-wrapper { height: 16rem; } .leadership__cards .kite-grid.leader-grid.three-col:not(.leadership__cards .kite-grid.leader-grid.four-col) { padding: 0 5rem; } .leadership__cards .kite-grid.leader-grid.three-col.four-col { grid-template-columns: repeat(4, 1fr); } .leadership__cards .kite-grid.leader-grid.three-col.four-col .kite-cell .gatsby-image-wrapper { height: 15rem; } } @media only screen and (min-width: 60rem) { .leadership__cards .kite-grid.leader-grid .kite-cell { max-width: none; } .leadership__cards .kite-grid.leader-grid .kite-cell .gatsby-image-wrapper { height: 20rem; } .leadership__cards .kite-grid.leader-grid.three-col .kite-cell .gatsby-image-wrapper { height: 20rem; } .leadership__cards .kite-grid.leader-grid.three-col:not(.leadership__cards .kite-grid.leader-grid.four-col) { padding: 0 6.25rem; column-gap: 1.5rem; } .leadership__cards .kite-grid.leader-grid.three-col:not(.leadership__cards .kite-grid.leader-grid.four-col) .kite-cell { padding: 1rem; } .leadership__cards .kite-grid.leader-grid.three-col.four-col .kite-cell .gatsby-image-wrapper { height: 19rem; } .leadership__cards .kite-grid.leader-grid.four-col .kite-cell .gatsby-image-wrapper { height: 19rem; } } @media only screen and (min-width: 80rem) { .leadership__cards .kite-grid.leader-grid .kite-cell .gatsby-image-wrapper { height: 20.5rem; } .leadership__cards .kite-grid.leader-grid.three-col:not(.leadership__cards .kite-grid.leader-grid.four-col) { column-gap: 2.5rem; } .leadership__cards .kite-grid.leader-grid.three-col.four-col .kite-cell .gatsby-image-wrapper { height: 20rem; } .leadership__cards .kite-grid.leader-grid.four-col .kite-cell .gatsby-image-wrapper { height: 20rem; } } .leadership__cards .kite-grid .top-leadership { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin-bottom: 2rem; min-height: 15.625rem; padding: 0; } .leadership__cards .kite-grid .top-leadership .emphasize { flex: 0 1 100%; padding: 0.5rem; width: auto; } @media only screen and (min-width: 37.5rem) { .leadership__cards .kite-grid .top-leadership .kite-cell { max-width: 32.5rem; } .leadership__cards .kite-grid .top-leadership .kite-cell .gatsby-image-wrapper { height: 16rem; max-height: none; } } @media only screen and (min-width: 52.5rem) { .leadership__cards .kite-grid .top-leadership .kite-cell { max-width: unset; } } @media only screen and (min-width: 60rem) { .leadership__cards .kite-grid .top-leadership .kite-cell .gatsby-image-wrapper { height: 20rem; } } @media only screen and (min-width: 37.5rem) { .leadership__cards .kite-grid .top-leadership.four-col:not(.leadership__cards .kite-grid .top-leadership.three-col) .kite-cell { max-width: 30rem; } .leadership__cards .kite-grid .top-leadership.four-col:not(.leadership__cards .kite-grid .top-leadership.three-col) .kite-cell .gatsby-image-wrapper { height: 15rem; max-height: none; } } @media only screen and (min-width: 52.5rem) { .leadership__cards .kite-grid .top-leadership.four-col:not(.leadership__cards .kite-grid .top-leadership.three-col) .kite-cell { max-width: unset; } } @media only screen and (min-width: 52.5rem) { .leadership__cards .kite-grid .top-leadership.four-col .kite-cell { max-width: unset; } } @media only screen and (min-width: 60rem) { .leadership__cards .kite-grid .top-leadership.four-col .kite-cell .gatsby-image-wrapper { min-height: 21rem; } } .leadership__cards .kite-grid li.paragraph__card_trio_card { height: 100%; max-width: 300px; margin: 0 auto; } .leadership__cards .kite-grid li.paragraph__card_trio_card h3.typestack-title-6 { margin-bottom: 0.5rem; } .leadership__cards .kite-grid li.paragraph__card_trio_card .gatsby-image-wrapper img { object-position: 50% 0%; } @media only screen and (min-width: 30rem) { .leadership__cards .kite-grid .top-leadership .emphasize { flex: 0 1 75%; } } @media only screen and (min-width: 52.5rem) { .leadership__cards .kite-grid .top-leadership { flex-wrap: nowrap; } .leadership__cards .kite-grid .top-leadership .emphasize { flex: 0 1 52%; } .leadership__cards .kite-grid .top-leadership.four-col .emphasize { flex: 0 1 55%; } } .leader-image-card { background-color: var(--kite-color-white); display: flex; flex-direction: column; width: 100%; height: fit-content; min-height: 28.5rem; border-radius: 1rem; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); position: relative; z-index: 2; } @media screen and (min-width: 20.5rem) { .leader-image-card { min-height: 30.5rem; } } @media screen and (min-width: 22.625rem) { .leader-image-card { width: 20.625rem; min-height: 31rem; margin: auto; } } @media screen and (min-width: 34.5rem) { .leader-image-card { min-height: 28.5rem; width: 15.75rem; } } .leader-image-card:hover, .leader-image-card:focus-within { box-shadow: 0 1px 5px 1px rgba(99, 115, 138, 0.2), 0 2px 2px 0 rgba(99, 115, 138, 0.14), 0 3px 1px -2px rgba(99, 115, 138, 0.12); } .leader-image-card .gatsby-image-wrapper { aspect-ratio: 288/312; width: auto; min-height: 19.5rem; border-radius: 1rem 1rem 0 0; } @media screen and (min-width: 34.5rem) { .leader-image-card .gatsby-image-wrapper { aspect-ratio: 252/312; height: 19.5rem; } } .leader-image-card__text-wrapper { display: flex; flex-direction: column; justify-content: space-between; flex: 1 1; padding: 0.75rem 1rem 1rem; } .leader-image-card__headings { display: flex; flex-direction: column; gap: 0.375rem; } .leader-image-card__header { display: flex; flex-direction: column; padding: 0; margin: 0; font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; letter-spacing: 0; } .leader-image-card__sub-header { color: var(--kite-color-gray-30); font-weight: 400; font-size: 0.75rem; line-height: 1.125rem; letter-spacing: 0; padding: 0; margin: 0; } .leader-image-card__link { display: flex; align-items: center; gap: 0.25rem; font-weight: 500; font-size: 1rem; line-height: 1.625; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .leader-image-card__link:hover, .leader-image-card__link:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .leader-image-card a::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; } .top-leader-image-card { background-color: var(--kite-color-white); display: flex; flex-direction: column; height: fit-content; min-height: 28.5rem; width: 100%; border-radius: 1rem; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); position: relative; z-index: 2; max-width: 100%; } @media screen and (min-width: 34.5rem) { .top-leader-image-card { max-width: 33rem; } } @media screen and (min-width: 51.25rem) { .top-leader-image-card { max-width: 51.25rem; } } @media screen and (min-width: 69rem) { .top-leader-image-card { max-width: 71.25rem; } } @media screen and (min-width: 22.625rem) { .top-leader-image-card { width: 20.625rem; height: fit-content; margin: auto; } } @media screen and (min-width: 34.5rem) { .top-leader-image-card { width: 33rem; min-height: 24.5rem; margin: auto; } } @media screen and (min-width: 51.25rem) { .top-leader-image-card { width: 100%; flex-direction: row; min-height: 24.5rem; height: fit-content; gap: 2rem; } } .top-leader-image-card:hover, .top-leader-image-card:focus-within { box-shadow: 0 1px 5px 1px rgba(99, 115, 138, 0.2), 0 2px 2px 0 rgba(99, 115, 138, 0.14), 0 3px 1px -2px rgba(99, 115, 138, 0.12); } .top-leader-image-card .gatsby-image-wrapper { aspect-ratio: 288/312; min-height: 19.5rem; height: 24.5rem; border-radius: 1rem 1rem 0 0; } @media screen and (min-width: 34.5rem) { .top-leader-image-card .gatsby-image-wrapper { flex: 1 1; flex-basis: 50%; aspect-ratio: unset; } } @media screen and (min-width: 51.25rem) { .top-leader-image-card .gatsby-image-wrapper { border-radius: 1rem 0 0 1rem; height: auto; } } .top-leader-image-card__text-wrapper { display: flex; flex-direction: column; gap: 1.5rem; flex: 1 1; flex-basis: 50%; padding: 2rem 1rem; } @media screen and (min-width: 51.25rem) { .top-leader-image-card__text-wrapper { padding: 2rem 2rem 2rem 0; justify-content: center; } } @media only screen and (min-width: 80rem) { .top-leader-image-card__text-wrapper { padding: 4rem 2rem 4rem 0; } } .top-leader-image-card__header { display: flex; flex-direction: column; gap: 1.5rem; letter-spacing: 0; padding: 0; margin: 0; font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .top-leader-image-card__header { font-size: 1.75rem; line-height: 1.2857; } } .top-leader-image-card__header small { color: var(--kite-color-gray-30); font-weight: 400; font-size: 1.25rem; line-height: 1.5; } @media only screen and (max-width: 37.5rem) { .top-leader-image-card__header small { font-size: 1.125rem; line-height: 1.625; } } .top-leader-image-card__position { display: flex; flex-direction: column; } .top-leader-image-card__featured-copy { padding: 0; margin: 0; font-weight: 400; font-size: 0.875rem; } .top-leader-image-card__featured-copy a { color: var(--kite-color-primary); text-decoration: none; font-weight: 500; } @media only screen and (min-width: 30rem) { .top-leader-image-card__featured-copy a:hover, .top-leader-image-card__featured-copy a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .top-leader-image-card__link { display: flex; align-items: center; gap: 0.25rem; font-weight: 500; font-size: 1rem; line-height: 1.625; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .top-leader-image-card__link:hover, .top-leader-image-card__link:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .top-leader-image-card a::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; } .more-leaders { padding: 2.5rem 1rem; } .more-leaders a { font-weight: 500; font-size: 1rem; line-height: 1.625; text-decoration: none; color: var(--kite-color-primary); } @media only screen and (min-width: 30rem) { .more-leaders a:hover, .more-leaders a:visited:hover { color: var(--kite-color-dark-blue-10); text-decoration: underline; } } .more-leaders__content-wrapper { margin: auto; max-width: 77rem; display: flex; flex-direction: column; gap: 1.5rem; } .more-leaders__header { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .more-leaders__header h4 { padding: 0; margin: 0; } @media screen and (max-width: 552px) { .more-leaders__header { gap: 0.5rem; align-items: flex-start; flex-direction: column; } } .more-leaders__header a { padding: 0.625rem 0; } .more-leaders__title { padding: 0; margin: 0; font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 60rem) { .more-leaders__title { font-size: 1.75rem; line-height: 1.2857; } } .more-leaders__cards { display: flex; flex-direction: column; align-items: stretch; justify-content: space-around; flex-wrap: nowrap; gap: 1rem; } @media screen and (min-width: 552px) { .more-leaders__cards { flex-direction: row; } } @media screen and (min-width: 1088px) { .more-leaders__cards { justify-content: space-between; } } .leadership-bio { padding: 3.75rem 1rem; width: 100%; background: radial-gradient(177.39% 125.4% at 3.68% 16.6%, rgba(255, 255, 255, 0.6) 0%, rgba(224, 228, 240, 0.6) 100%), #fff; } .leadership-bio__content { max-width: 58rem; display: flex; flex-direction: column; gap: 3.75rem; margin: auto; } .leadership__grid { display: flex; flex-direction: column; padding-bottom: 5rem; } .leadership__grid .top-leaders { padding: 5rem 0 0; } .leadership__grid_hr { height: 1px; align-self: center; margin: 3rem 0; background-color: var(--kite-color-gray-25); border: 0; } @media screen and (min-width: 34.5rem) { .leadership__grid_hr { margin: 5rem 0; } } .leadership__grid .leaders { display: flex; flex-direction: column; gap: 3rem; } .leadership__grid .grid-row { width: 100%; max-width: 71.25rem; margin: auto; display: flex; justify-content: space-between; } .leadership__grid .grid-row--text { padding: 4.5rem 0; justify-content: center; align-items: center; } .leadership__grid .grid-row--text p { text-align: center; width: 100%; padding: 0; margin: 0; font-weight: 700; font-size: 2.25rem; line-height: 1.1667; } @media only screen and (max-width: 37.5rem) { .leadership__grid .grid-row--text p { font-size: 1.75rem; line-height: 1.2857; } } .leadership__grid .grid-row--max-4 { max-width: 71.25rem; } .leadership__grid .grid-row--max-3 { max-width: 51.25rem; } .leadership__grid .grid-row--max-2 { max-width: 33rem; } .leadership__grid .grid-row--max-1 { justify-content: center; } .leadership__grid .grid-row.grid-row--center { justify-content: center; } .leadership__grid .grid-row .leader-image-card { margin: 0; } .leadership-page { background: radial-gradient(177.39% 125.4% at 3.68% 16.6%, rgba(255, 255, 255, 0.6) 0%, rgba(224, 228, 240, 0.6) 100%), #fff; padding-top: 2.5rem; } @media only screen and (min-width: 60rem) { .leadership-page { padding-top: 5rem; } } .leadership-page__cta { display: flex; justify-content: center; background-color: var(--kite-color-white); padding: 0 1rem; } .leadership-page__cta > div { width: 100%; max-width: 100%; } @media screen and (min-width: 34.5rem) { .leadership-page__cta > div { max-width: 33rem; } } @media screen and (min-width: 51.25rem) { .leadership-page__cta > div { max-width: 51.25rem; } } @media screen and (min-width: 69rem) { .leadership-page__cta > div { max-width: 71.25rem; } } .bg-component-spacer { --background-color: #f0f2f7; display: flex; flex-direction: column; position: relative; gap: 1rem; padding-bottom: 2rem; } @media only screen and (min-width: 80rem) { .bg-component-spacer { padding-bottom: 4.5rem; } } @media only screen and (min-width: 60rem) { .bg-component-spacer { gap: 2.25rem; } } .bg-component-spacer::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -2; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.6) 0%, rgba(224, 228, 240, 0.6) 100%), var(--kite-color-white); margin-bottom: -4rem; }