> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qonto.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Global Customizations

The SDK allows you to apply global customizations that affect all embeddable UIs. This is useful for maintaining a
consistent look and feel across your application. The component level styles will take precedence over the global
styles that change the same aspects of the UI.

## Customization Options

The following global CSS properties are available:

| CSS Variable | Description & Accepted Values |
| - | - |
| `--qonto-embed-color-primary` | Accepts any valid color value for primary brand color (e.g., `#050505`, `rgb(5,5,5)`). It will affect the color of the primary buttons. |
| `--qonto-embed-content-color-primary` | Color of the text. Accepts any valid color value for primary content text (e.g., `#050505`, `rgb(5,5,5)`). |
| `--qonto-embed-content-color-primary-inverted` | Color of the text showing on top of filled backgrounds. Accepts any valid color value for inverted primary content text (e.g., `#fff`, `rgb(255,255,255)`). |
| `--qonto-embed-content-success` | Accepts any valid color value for success state content (e.g., `var(--success400)`, `#22c55e`). |
| `--qonto-embed-content-warning` | Accepts any valid color value for warning state content (e.g., `var(--warning400)`, `#f59e0b`). |
| `--qonto-embed-content-error` | Accepts any valid color value for error state content (e.g., `var(--error400)`, `#ef4444`). |
| `--qonto-embed-content-font-weight` | Accepts any valid font weight for content text (e.g., `400`, `normal`). |
| `--qonto-embed-content-font-size` | Accepts any valid font size for content text (e.g., `14px`, `0.875rem`). |
| `--qonto-embed-content-line-height` | Accepts any valid line-height for content text (e.g., `24px`, `1.5`). |
| `--qonto-embed-input-gap` | Gap between label, input field, and error message for all input components (e.g., `4px`, `8px`). |
| `--qonto-embed-input-label-font-size` | Font size for input labels across all input components (e.g., `14px`, `1rem`). |
| `--qonto-embed-input-label-line-height` | Line height for input labels across all input components (e.g., `24px`, `1.5`). |
| `--qonto-embed-input-label-color` | Color of input label text for all input components (e.g., `#050505`, `rgb(5,5,5)`). |
| `--qonto-embed-input-label-font-weight` | Font weight of input labels for all input components (e.g., `400`, `bold`). |
| `--qonto-embed-input-text-font-size` | Font size for the input text/value across all input components (e.g., `14px`, `1rem`). |
| `--qonto-embed-input-text-line-height` | Line height for the input text/value across all input components (e.g., `24px`, `1.5`). |
| `--qonto-embed-input-text-color` | Color of the input text/value for all input components (e.g., `#111827`, `rgb(17,24,39)`). |
| `--qonto-embed-input-background` | Background color of input fields for all input components (e.g., `#ffffff`, `white`). |
| `--qonto-embed-input-border` | Border style for input fields across all input components (e.g., `1px solid #ccc`, `2px solid var(--border-color)`). |
| `--qonto-embed-input-border-radius` | Border radius for input fields across all input components (e.g., `4px`, `8px`). |
| `--qonto-embed-input-padding` | Padding inside input fields for all input components (e.g., `7px 11px`, `8px 12px`). |
| `--qonto-embed-input-placeholder-color` | Color of placeholder text across all input components (e.g., `#9ca3af`, `rgb(156,163,175)`). |
| `--qonto-embed-input-hover-background` | Background color when hovering over input fields (e.g., `#f9fafb`, `rgba(0,0,0,0.02)`). |
| `--qonto-embed-input-focus-border-color` | Border color when input fields are focused (e.g., `#3b82f6`, `blue`). |
| `--qonto-embed-input-focus-background` | Background color when input fields are focused (e.g., `#ffffff`, `white`). |
| `--qonto-embed-input-focus-border-shadow` | Box shadow when input fields are focused (e.g., `0 0 0 4px rgba(59,130,246,0.1)`). |
| `--qonto-embed-input-disabled-background` | Background color when input fields are disabled (e.g., `#f3f4f6`, `rgb(243,244,246)`). |
| `--qonto-embed-input-disabled-text-color` | Text color when input fields are disabled (e.g., `#9ca3af`, `rgb(156,163,175)`). |
| `--qonto-embed-input-disabled-border-color` | Border color when input fields are disabled (e.g., `#d1d5db`, `rgb(209,213,219)`). |
| `--qonto-embed-input-readonly-background` | Background color when input fields are read-only (e.g., `#f3f4f6`, `rgb(243,244,246)`). |
| `--qonto-embed-input-error-border-color` | Border color when input fields have validation errors (e.g., `#ef4444`, `red`). |
| `--qonto-embed-input-error-message-font-size` | Font size for error messages displayed below input fields (e.g., `12px`, `0.75rem`). |
| `--qonto-embed-input-error-message-line-height` | Line height for error messages displayed below input fields (e.g., `16px`, `1.33`). |
| `--qonto-embed-input-error-message-color` | Color of error messages displayed below input fields (e.g., `#b81818`, `rgb(184,24,24)`). |
| `--qonto-embed-input-min-height-mobile` | Minimum height for input fields on mobile devices (e.g., `40px`, `44px`). |