# Modifying the Default Styles
You can customize the visual appearance of the payment page by modifying its default CSS styles. This includes changing colors, fonts, and other visual elements to match your brand or design preferences.
{% hint style="warning" %}
**Important**: Always thoroughly test any custom styles in a development environment before deploying to production. Custom CSS modifications can affect payment page functionality and user experience.
If you encounter any issues with the payment page, the first troubleshooting step should be to remove your custom styles and test again to determine if the issue is related to your customizations.
Please note that Hyp CreditGuard is not responsible for issues that arise from incorrect or incompatible custom CSS implementations.
{% endhint %}
To do this, you use the `customStyle` property in the `uiCustomData` object to pass a string containing minified CSS, like this:
```json
{
"uiCustomData": {
"customStyle": "#logo-icon{display:none}#cg-submit-btn{height:40px;color:#28a745;border-radius:0.25rem;box-shadow:none}",
}
}
```
You can use your browser's developer tools to inspect the payment page elements and locate those that you want to modify. The payment page uses a combination of IDs and classes for its elements, so you can target them with standard CSS selectors.
Note that if your custom CSS refers to your business logo or other [custom images](/enterprise/changing-the-default-payment-page-appearance/adding-business-logo-and-custom-images.md), you need to submit them for verification first.
The following table lists some of the most commonly modified elements of the payment page.
| Element | Description |
| --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Body** | |
| `#cg-container` | Element wrapper for the entire payment page. |
| `#cg-header` | Component container for the payment page header that normally contains the Hyp or business logo and the shield icon. |
| `#cg-tx-container` | Component container for all payment page elements except the header. Includes sections for transaction detail (`#cg-tx-info`) and payment form (`#cg-tx-form`). |
| **Header** | |
| `#cg-header-wrapper` | Container for the logo and the shield. |
| `#logo-icon` | Logo image wrapper. |
| `#shield-icon` | Shield image wrapper. |
| **Transaction detail section** | |
| `#cg-tx-info` | Container for the transaction detail section that contains a title, descriptions of currency and amount due. |
| `#cg-pd-title` | Transaction detail section title. |
| `#cg-pd-wrapper` | Container for all transaction detail elements except for the section title. |
| `.cg-group-info` | Wrapper for currency description elements. |
| `#cg-key-currency` | Transaction currency label. |
| `#cg-val-currency` | Transaction currency code. |
| **Payment form** | |
| `#cg-tx-form` | Container for the payment form. |
| `#cg-form-title` | Payment form title. |
| `#cg-form` | Container for all payment form elements except for the title. |
| **Card number field** | |
| `#cg-form-group-card-number` | Card number field container: includes label, input, error message. |
| `#label-card-number` | Label for card number input. |
| `#card-number` | Card number input. |
| `#error-card-number` | Error message related to card number input. |
| **Expiration year field** | |
| `#cg-form-group-expYear` | Expiration year field container: includes label, dropdown, error message. |
| `#label-expYear` | Label for expiration year dropdown. |
| `#expYear` | Expiration year dropdown. |
| `#error-expYear` | Error message related to expiration year selection. |
| **Expiration month field** | |
| `#cg-form-group-expMonth` | Expiration month field container: includes label, dropdown, error message. |
| `#label-expMonth` | Label for expiration month dropdown (hidden by default). |
| `#expMonth` | Expiration month dropdown. |
| `#error-expMonth` | Error message related to expiration month selection. |
| **CVV field** | |
| `#cg-form-group-cvv` | CVV field container: includes label, input, error message. |
| `#label-cvv` | Label for CVV input. |
| `#cvv` | CVV input. |
| `#error-cvv` | Error message related to CVV input. |
| **Personal ID field - Israel only** | |
| `#cg-form-group-personal-id` | Personal ID field container: includes label, input, error message. |
| `#label-personal-id` | Label for personal ID input. |
| `#personal-id` | Personal ID input. |
| `#error-personal-id` | Error message related to personal ID input. |
| **Number of payments (installments) field - Israel only** | |
| `#cg-form-group-num-of-payments` | Number of payments field container: includes label, dropdown, error message, breakdown of payments. |
| `#label-num-of-payments` | Label for the number of payments dropdown. |
| `#num-of-payments` | Number of payments dropdown. |
| `#error-num-of-payments` | Error message related to the number of payments. |
| `#cg-payment-calc` | Breakdown of monthly payments displayed after selecting a value in the dropdown. |
| **User data fields** | |
| `#cg-form-group-user-data-{1-10}` | [Custom user data](/enterprise/changing-the-default-payment-page-appearance/adding-custom-input-fields.md) field container: includes label, input, error message. |
| `#label-user-data-{1-10}` | Label for custom user data input. |
| `#user-data-{1-10}` | Custom user data input. |
| `#error-user-data-{1-10}` | Error message related to custom user data input. |
| **Payment form submission and reset controls** | |
| `#cg-submit-btn` | Payment form submission button. |
| `#cg-clear` | Clear payment form action link. |
| `#cg-cancel` | Cancel transaction button. |
| **Footer (does not display in iframe)** | |
| `#cg-footer` | Component container for payment page footer. |
| `#cg-logo-group` | Wrapper for the PCI logo. |
| `#cg-brand-group` | Wrapper for the "Secured by Hyp" logo. |
You can also redefine the Hyp payment page’s root theme colors in your custom CSS. The default root variables are as follows:
```css
:root {
--cg-prime: #1C2333;
--cg-second: #00617F;
--cg-turquois: #0EAAD1;
--cg-suc: #55CF63;
--cg-err: #EE4D3B;
--cg-gray: #B9B9BA;
--cg-lightgray: #F6F6F6;
}
```
Let's suppose that you want to display the payment page in a dark theme. Here's how you could redefine root colors and customize several elements with `customStyle`:
```json
{
"uiCustomData": {
"customStyle": ":root{--cg-prime:#121212;--cg-second:#E0E0E0;--cg-turquois:#00BCD4;--cg-suc:#4CAF50;--cg-err:#F44336;--cg-gray:#9E9E9E;--cg-lightgray:#424242}*{background:var(--cg-prime);color:var(--cg-gray)}#cg-tx-info{background-color:var(--cg-prime)!important}#cg-tx-container{padding:0}.primary-cg-button{color:var(--cg-lightgray)}.primary-cg-button-outline:not([disabled]):hover{background:var(--cg-second)}",
}
}
```
This would result in rendering the payment page like this:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://developers.hyp.co.il/enterprise/changing-the-default-payment-page-appearance/modifying-the-default-styles.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.