# Styling

The booking widget can easily be styled using CSS variables.
Put the new variable values in your own CSS file, or in a
style tag in the head section of your page.

> **Widget builder**
>
> Rather not write the code by hand? Use the [widget builder](/docs/widget/builder): choose services,
> colors and tracking, see the result in a live preview, and copy the finished code.

> **Note**
>
> The widget does not set font family, link color or most general styles.
> It takes those from the page it is on.

## Example code

The following example sets the primary and secondary color in a style tag in the head section.
The colors are set on a class, `cliento-custom-theme`. Add that class to the body tag to apply
the theme.

```html
<head>
  <style>
    .cliento-custom-theme {
      --cb-color-primary: #5f56fc;
      --cb-color-secondary: #51136b;
    }
  </style>
</head>
<body class="cliento-custom-theme">
  ...
</body>
```

## Color variables

The variables in the table below can be used to control
the colors in the booking widget.

| Variable name | Default value |
| ------------- | ------------- |
| --cb-color-primary | #5f56fc |
| --cb-color-primary-hover | #4b42e8 |
| --cb-color-secondary | #51136b |
| --cb-color-neutral-10 | #0f0e28 |
| --cb-color-neutral-20 | #484765 |
| --cb-color-neutral-40 | #746f88 |
| --cb-color-neutral-50 | #908faf |
| --cb-color-neutral-60 | #c8c7d6 |
| --cb-color-neutral-70 | #ddddea |
| --cb-color-neutral-80 | #f3f2f9 |
| --cb-color-neutral-90 | #f8f8fc |
| --cb-color-neutral-100 | #fff |
| --cb-color-success-10 | #0d7436 |
| --cb-color-success-30 | #4db376 |
| --cb-color-success-40 | #6cdf9f |
| --cb-color-success-50 | #8ae8af |
| --cb-color-success-100 | #f2fcf6 |
| --cb-color-error-40 | #ff4d62 |
| --cb-color-error-100 | #fff2f4 |
| --cb-color-warning-40 | #e39600 |
| --cb-color-warning-100 | #fff4d9 |
| --cb-text|var(--cb-color-neutral-20) |
| --cb-text-muted|var(--cb-color-neutral-50) |
| --cb-input-focus | #5f56fc40 |
| --cb-input-focus-border|var(--cb-color-neutral-60) |
| --cb-alt-button-bg|var(--cb-color-success-100) |
| --cb-alt-button-bg-hover|var(--cb-color-success-50) |
| --cb-alt-button-bg-active|var(--cb-color-success-40) |
| --cb-alt-button-border|var(--cb-color-success-40) |
| --cb-alt-button-label|var(--cb-color-success-30) |
| --cb-alt-button-label-emphasised|var(--cb-color-success-10) |
  
## Sizes and spacing

The variables in the table below can be used to control
font sizes and spacing in the booking widget.

| Variable name | Default value |
| ------------- | ------------- |
| --cb-font-size-heading-large|26px |
| --cb-font-size-heading-medium|22px |
| --cb-font-size-heading-small|20px |
| --cb-font-size-large|18px |
| --cb-font-size-medium|16px |
| --cb-font-size-small|14px |
| --cb-font-size-tiny|13px |
| --cb-border-radius-medium|16px |
| --cb-border-radius-small|8px |
| --cb-gutters-desktop|48px |
| --cb-gutters-tablet|24px |
| --cb-gutters-mobile|12px |
| --cb-spacing-xlarge|32px |
| --cb-spacing-large|24px |
| --cb-spacing-medium|16px |
| --cb-spacing-small|8px |
| --cb-icon-xlarge|32px |
| --cb-icon-large|28px |
| --cb-icon-medium|20px |
| --cb-icon-small|16px |
| --cb-aside-width|360px |
| --cb-nav-item-size|22px |