Adjustments for calendars and forms can be made under Integrations in the settings for each widget or alternatively with custom CSS on your website.
Each widget (each individual calendar/booking form) has a unique container ID:
ua-container-[CONTAINERID]CSS variables
--ua-vertical-unit: 5px;
--ua-horizontal-unit: 10px;
--ua-border-radius: 2px;
--ua-border-color: #404014;
--ua-button-color: #404014;
--ua-button-secondary-background-color: #666666;
--ua-disabled-color: #d9d9d9;
--ua-button-text-color: #ffffff;
--ua-focus-border-outline-color: #afdd28;
--ua-message-background-color: #fbf4eb;
--ua-message-border-color: #cf7205;
--ua-message-text-color: #995200;
--ua-button-border: 1px solid var(--ua-border-color);Example:
.selector #ua-container-[CONTAINERID] {
--ua-vertical-unit: 3px;
--ua-horizontal-unit: 6px;
}Important: The adjustments to the variables always refer to one widget.