Knowledge Box Theme
Search Bar Section
The Knowledge Box search bar can be customized using CSS classes and CSS variables.
CSS Classes
| Class Name | Description | 
|---|---|
| .ai12z-suggest-container | Styles the knowledge box background color. | 
| .ai12z-suggest-answer | Customizes the font size of the response text. | 
| .ai12zBtn | Customizes the button background color and text color. | 
| .custom-privacy | Customize the privacy statement to the knowledge box | 
CSS Variables
| Variable Name | Description | 
|---|---|
| --ai12z-knowledge-box-bg-color | Customizes the background color of the response text. | 
| --ai12z-knowledge-box-font-size | Customizes the font size of the response text. | 
| --ai12z-knowledge-box-button-bgcolor | Customizes the Knowledge Box button background color. | 
| --ai12z-knowledge-box-button-color | Customizes the Knowledge Box button text color. | 
 
Privacy Section
The Privacy Statement section can be customized using CSS variables.
| Variable Name | Description | 
|---|---|
| --ai12z-knowledge-box-privacy-color | Customizes the font color of the privacy statement. | 
| --ai12z-knowledge-box-privacy-font-size | Customizes the font size of the privacy statement. | 

Usage Example
.ai12z-suggest-container {
  background-color: var(--ai12z-knowledge-box-bg-color);
}
.ai12z-suggest-answer {
  font-size: var(--ai12z-knowledge-box-font-size);
}
.ai12zBtn {
  background-color: var(--ai12z-knowledge-box-button-bgcolor);
  color: var(--ai12z-knowledge-box-button-color);
}
.custom-privacy {
  color: var(--ai12z-knowledge-box-privacy-color);
  font-size: var(--ai12z-knowledge-box-privacy-font-size);
}