CSS Properties
If you want to customize the web widget to match your brand`s design, you can set custom CSS properties in the dashboard.
Below are listed all supported variables:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,500,700&display=swap&subset=latin-ext');
:root {
--primary-color: #003364;
--secondary-color: #F8335D;
--bg-color: #fff;
--error-color: #e34848;
/* Typography */
--font-family: 'Source Sans Pro', Helvetica, sans-serif;
--font-size: 13px;
--line-height: 18px;
--font-weight: 300;
/* Focus States (Universal) */
--focus-outline-color: #36f;
--focus-outline: 2px solid var(--focus-outline-color);
--focus-outline-offset: 2px;
--focus-border-radius: 4px;
--focus-box-shadow: none;
/* Get Started */
--get-started-bg: #FBFBFB;
--get-started-cover-bg: var(--primary-color);
--get-started-cover-box-shadow: 0px 8px 16px rgba(0, 51, 102, 0.3);
--get-started-title-color: #fff;
--get-started-title-font-size: 26px;
--get-started-title-line-height: 25px;
--get-started-button-border-radius: 4px;
--get-started-button-font-size: 16px;
--get-started-button-bg-color: var(--button-bg-color);
--get-started-button-text-color: #fff;
--get-started-button-hover-text-color: #fff;
--get-started-button-hover-filter: var(--button-hover-filter);
--get-started-avatar-size: 200px;
--get-started-avatar-border: none;
--get-started-avatar-offset-top: -100px;
--get-started-avatar-border-radius: 50%;
--get-started-welcome-color: #cecece;
--get-started-welcome-size: 14px;
--get-started-welcome-line-height: 18px;
--get-started-avatar-bg: none;
/* Chat / Privacy Policy / */
--chat-privacy-policy-container-font-size: 10px;
--chat-privacy-policy-container-line-height: 13px;
--chat-privacy-policy-container-margin: 50px 40px 0 40px;
--chat-privacy-policy-header-color: #A9A9A9;
--chat-privacy-policy-header-font-weight: bold;
--chat-privacy-policy-header-margin: 0px 0px 2px 0px;
--chat-privacy-policy-color: #7F7F7F;
--chat-privacy-policy-link-color: #7F7F7F;
--chat-privacy-policy-link-font-weight: 600;
--chat-privacy-policy-container-font-size--chat: 8px;
--chat-privacy-policy-container-line-height--chat: 10px;
--chat-privacy-policy-margin--chat: 9px 12px 0px 12px;
/* Tooltips */
--tooltip-bg: #000000;
--tooltip-color: #fff;
/* Chat */
--chat-bg: #FBFBFB;
--chat-message-max-width: 310px;
--chat-message-width: auto;
--chat-message-padding: 12px;
--chat-message-bot-padding: 12px;
--chat-message-box-shadow: none;
--chat-message-user-bg: var(--primary-color);
--chat-message-user-text-color: #fff;
--chat-message-user-border-radius: 12px 12px 0px 12px;
--chat-message-user-border-color: #fff;
--chat-message-user-border: 1px solid var(--chat-message-user-border-color);
--chat-message-bot-bg: #fff;
--chat-message-bot-text-color: #2a263c;
--chat-message-bot-links-underline: underline;
--chat-message-bot-border-radius: 12px 12px 12px 0px;
--chat-message-bot-border-color: #F3F3F3;
--chat-message-bot-border: 1px solid var(--chat-message-bot-border-color);
--chat-message-bot-avatar-position: flex-end;
--chat-message-bot-avatar-margin: 8px 0 5px 5px;
--chat-message-bot-avatar-size: 30px;
/* Chat / Bot / Sources / References */
--chat-message-bot-sources-reference-color: #707070;
/* Chat / Bot / Sources / Item */
--chat-message-bot-sources-item-background: transparent;
--chat-message-bot-sources-item-border-radius: 4px;
--chat-message-bot-sources-item-border: 1px solid var(--chat-message-bot-border-color);
/* Chat / Bot / Sources / Item / Header */
--chat-message-bot-sources-item-header-font-size: var(--font-size);
--chat-message-bot-sources-item-header-font-weight: 600;
--chat-message-bot-sources-item-header-color: var(--chat-message-bot-text-color);
/* Chat / Bot / Sources / Item / URL */
--chat-message-bot-sources-item-url-font-size: var(--font-size);
--chat-message-bot-sources-item-url-color: var(--chat-message-bot-links-color);
/* Chat / Bot / Sources / Item / Content */
--chat-message-bot-sources-item-content-font-size: 0.9em;
--chat-message-bot-sources-item-content-color: var(--chat-message-bot-links-color);
--chat-message-bot-sources-item-content-opacity: 0.7;
/* Chat / Bot / Custom Function Progress */
--chat-message-bot-custom-function-success: #208520;
--chat-message-bot-custom-function-start: var(--chat-comments-text-color);
--chat-message-bot-custom-function-error: #fa3232;
/* Chat / Buttons */
--button-bg-color: var(--secondary-color);
--button-text-color: #fff;
--button-hover-bg: var(--secondary-color);
--button-hover-text-color: #fff;
--button-box-shadow: none;
--button-border-radius: 4px;
--button-border: none;
--button-hover-border: none;
--button-hover-filter: brightness(85%);
--button-height: 32px;
--button-padding: 0 10px 0 10px;
--button-padding-touch-devices: 5px 10px 5px 10px;
--button-margin: 7px auto;
--button-font-weight: var(--font-weight);
--button-hover-font-weight: var(--button-font-weight);
--button-hover-box-shadow: none;
/* Chat / Notification */
--chat-error-bg: #FFF6F6;
--chat-error-box-shadow: 0 0 8px rgba(0,0,0,0.16);
--chat-error-border: var(--error-color);
--chat-error-headline-color: ;
--chat-error-color: #000;
--chat-info-bg: #fff;
--chat-info-box-shadow: 0 0 8px rgba(0,0,0,0.16);
--chat-info-border: #00d1b8;
--chat-info-headline-color: #00d1b8;
--chat-info-color: #000;
--chat-info-close-icon-color: #000000;
/* Chat / Header */
--chat-header-bg: var(--primary-color);
--chat-header-text-color: #fff;
--chat-header-text-color-headline: var(--chat-header-text-color);
--chat-header-text-color-description: var(--chat-header-text-color);
--chat-header-text-font-weight-headline: 600;
--chat-header-text-font-weight-description: 400;
--chat-header-text-font-size-headline: 15px;
--chat-header-text-font-size-description: 13px;
--chat-header-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
--chat-header-height: 65px;
--chat-header-icons-color: #fff;
/* Chat / Header / Error connection */
--chat-header-error-connection-bg: #FFF6F6;
--chat-header-error-connection-text: var(--error-color);
/* Chat / Header / Bot Name */
--chat-header-bot-avatar-size: 40px;
--chat-header-bot-avatar-border-radius: 50%;
--chat-header-bot-name-font-size: var(--font-size);
/* Chat / Header / Icon */
--chat-header-icon-hover-clear-conversation-bg: #fa3232;
--chat-header-icon-hover-clear-conversation: var(--chat-header-icons-color);
--chat-header-icon-active: #2a263c;
--chat-header-icon-btn-size: 40px;
--chat-header-icon-size: 18px;
/* Chat / Header / Powered by */
--chat-header-powered-by-color: #7F7F7F;
--chat-header-powered-by-color-hover: rgb(150, 155, 166);
--chat-header-powered-by-color-link: #39325a;
--chat-header-powered-by-bg: #fff;
/* Chat / File Upload / Progress */
--file-upload-bg: #fff;
--file-upload-accent: #5ECEB9;
--file-upload-bar-bg: #EBEFF3;
--file-upload-bar-val: var(--secondary-color);
--file-upload-bar-text-color: black;
--file-upload-label-font-weight: 600;
/* Chat / File Upload / Drop ZOne */
--file-dropzone-bg: var(--chat-bg);
--file-dropzone-text-color: var(--secondary-color);
--file-dropzone-box-opacity: 0.9;
--file-dropzone-outline: 2px dashed var(--secondary-color);
/* Chat / Scrollbar */
--chat-scrollbar-color: transparent; /* Set color to show scrollbar*/
--chat-scrollbar-color-hover: var(--chat-scrollbar-color);
--chat-scrollbar-bg: var(--chat-bg);
--chat-scrollbar-width: 8px;
/* Chat / Scroll to Bottom Button */
--chat-scroll-to-bottom-button-bottom-position: 85px;
--chat-voice-scroll-to-bottom-button-bottom-position: 110px;
--chat-scroll-to-bottom-button-bg: var(--secondary-color);
--chat-scroll-to-bottom-button-hover-bg: var(--secondary-color);
--chat-scroll-to-bottom-button-pulse-duration: 0.3s;
--chat-scroll-to-bottom-button-pulse-timing-function: ease-in-out;
--chat-scroll-to-bottom-button-pulse-scale: 1.15;
--chat-scroll-to-bottom-button-pulse-box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0,0,0,0);
/* Chat / Image */
--image-border: var(--chat-message-bot-border);
/* Chat / Generic templates */
--generic-template-arrow-bg: #fff;
--generic-template-title-font-weight: 700;
--generic-template-arrow-fill: var(--primary-color);
/* Chat / Quick Replies */
--quick-replies-display: flex;
--chat-message-bot-links-color: var(--chat-message-bot-text-color);
--chat-message-bot-links-font-weight: 600;
/* Chat / Markdown */
--markdown-list-margin: 15px;
/* Chat / Markdown / List */
--list-link-buttons-margin: 10px 0;
/* Chat / Markdown / List Button */
--list-link-button-display: inline-flex;
--list-link-button-align-items: center;
--list-link-button-justify-content: center;
--list-link-button-padding: var(--button-padding);
--list-link-button-touch-devices: var(--button-padding-touch-devices);
--list-link-button-margin: var(--button-margin);
--list-link-button-border-radius: var(--button-border-radius);
--list-link-button-border: var(--button-border);
--list-link-button-bg: var(--button-bg-color);
--list-link-button-color: var(--button-text-color);
--list-link-button-font-weight: var(--button-font-weight);
--list-link-button-font-size: var(--font-size);
--list-link-button-text-decoration: none;
--list-link-button-transition: color 300ms, background-color 300ms, color 300ms, border-color 300ms, box-shadow 300ms;
--list-link-button-box-shadow: var(--button-box-shadow);
--list-link-button-height: var(--button-height);
--list-link-button-width: fit-content;
--list-link-button-width-min-width: 120px;
--list-link-button-width-max-width: 100%;
--list-link-content-max-width: calc(100% - 50px);
--list-link-content-message-width: 550px;
--list-link-content-message-max-width: 550px;
--list-link-button-hover-bg: var(--button-hover-bg);
--list-link-button-hover-color: var(--button-hover-text-color);
--list-link-button-hover-border: var(--button-hover-border);
--list-link-button-hover-transform: none;
--list-link-button-hover-box-shadow: var(--button-hover-box-shadow);
/* Chat / Quick Replies */
--quick-reply-main-color: var(--primary-color);
--quick-reply-text-color: var(--quick-reply-main-color);
--quick-reply-border-color: var(--quick-reply-main-color);
--quick-reply-border-radius: 40px;
--quick-reply-bg: #fff;
--quick-reply-padding: 15px 17px;
--quick-reply-border: 1px solid var(--quick-reply-border-color);
--quick-reply-font-weight: var(--font-weight);
--quick-reply-hover-font-weight: var(--quick-reply-font-weight);
--quick-reply-hover-text-color: var(--quick-reply-text-color);
--quick-reply-hover-border-radius: var(--quick-reply-border-radius);
--quick-reply-hover-bg: #f7f7f7;
--quick-reply-hover-border: 1px solid var(--quick-reply-border-color);
/* Chat / Forms */
--chatbot-forms-text-color: var(--chat-message-bot-text-color);
--chatbot-form-headline-font-weight: 600;
--chatbot-form-headline-font-size: 16px;
--chatbot-form-headline-text-align: center;
--chatbot-form-headline-margin: 5px 0 16px 0;
--chatbot-form-headline-color: var(--chatbot-forms-text-color);
--chatbot-form-headline-line-height: var(--line-height);
--chatbot-form-text-font-weight: default;
--chatbot-form-text-font-size: var(--font-size);
--chatbot-form-text-text-align: center;
--chatbot-form-text-margin: 16px 0;
--chatbot-form-text-color: var(--chatbot-forms-text-color);
--chatbot-form-text-line-height: var(--line-height);
--chatbot-forms-label-font-weight: 600;
--form-label-font-weight: 600;
/* Chat / Forms / Rating / Labels */
--rating-item-labels-font-size: 11px;
--rating-item-labels-line-height: 12px;
--rating-item-labels-margin: 10px 0;
--rating-item-labels-color: #707070;
/* Chat / Forms / Rating / Items Container */
--rating-field-padding: 0 0 18px 0;
--rating-form-button-width: 92%;
--rating-form-button-margin: 0 0 0 10px;
--rating-form-errors-padding: 0 10px 0 10px;
--rating-form-errors-margin: 0 0 10px 0;
--rating-form-item-errors-padding: 12px 10px 0 10px;
--rating-form-item-errors-margin: 0 0 auto 0;
--rating-field-items-gap: 10px;
--rating-field-item-binary-scale-width: 35px;
--rating-field-item-binary-scale-height: 35px;
--rating-field-item-numeric-scale-mode-5-width: 35px;
--rating-field-item-numeric-scale-mode-10-width: 22px;
--rating-field-item-numeric-scale-mode-10-min-width: 22px;
--rating-field-item-numeric-scale-mode-10-height: 35px;
--rating-field-item-numeric-scale-mode-10-padding: 10px 0;
--rating-field-item-numeric-scale-mode-10-gap: 4px;
--rating-field-item-numeric-scale-mode-0-10-height: 35px;
--rating-field-item-numeric-scale-mode-0-10-gap: 8px;
--rating-field-item-numeric-scale-mode-0-10-padding: 10px 0;
--rating-field-item-emoji-scale-mode-5-width: 35px;
--rating-field-item-emoji-scale-mode-5-height: 35px;
--rating-field-item-emoji-scale-mode-5-padding: 10px 0;
--rating-field-item-star-scale-width: 35px;
--rating-field-item-star-scale-height: 35px;
--rating-field-item-star-scale-padding: 8px;
--rating-field-item-star-scale-border-radius: 5px;
--rating-field-item-star-scale-icon-width: 80%;
--rating-field-item-star-scale-icon-height: 80%;
--rating-field-item-star-scale-icon-stroke: #000000;
--rating-field-item-star-scale-icon-stroke-width: 1.5;
--rating-field-item-star-scale-icon-fill: transparent;
--rating-field-item-star-scale-icon-hover-stroke: #000000;
--rating-field-item-star-scale-icon-hover-stroke-width: 1.5;
--rating-field-item-star-scale-icon-hover-fill: #000;
--rating-field-items-star-scale-gap: 8px;
--rating-form-input-field-padding: 22px 0 0 0;
/* Chat / Forms / Rating / Item */
--rating-item-bg: #FBFBFB;
--rating-item-text-color: #000;
--rating-item-text-font-size: 14px;
--rating-item-text-font-weight: 300;
--rating-item-text-line-height: 15px;
--rating-item-border-radius: 5px;
--rating-item-padding: 10px 15px;
--rating-item-box-shadow: none;
--rating-item-width: auto;
--rating-item-max-width: none;
--rating-item-height: auto;
--rating-item-transition: background-color .3s ease, box-shadow .2s ease, outline .2s ease;
/* Chat / Forms / Rating / Item / Active */
--rating-item-active-color-bad: #fbd3cf;
--rating-item-active-color-neutral: #ffeab0;
--rating-item-active-color-good: #c2edc4;
--rating-item-active-border: none;
--rating-item-active-border-radius: var(--rating-item-border);
--rating-item-active-outline: none;
--rating-item-active-outline-offset: 0;
--rating-item-active-outline-radius: 8px;
--rating-item-active-box-shadow: none;
--rating-item-active-border: none;
--rating-item-active-border-radius: 8px;
/* Chat / Forms / Rating / Item / Hover */
--rating-item-hover-mark-previous: '1';
--rating-item-hover-color-bad: var(--rating-item-active-color-bad);
--rating-item-hover-color-neutral: var(--rating-item-active-color-neutral);
--rating-item-hover-color-good: var(--rating-item-active-color-good);
--rating-item-hover-border: var(--rating-item-active-border);
--rating-item-hover-border-radius: var(--rating-item-active-border-radius);
--rating-item-hover-outline: var(--rating-item-active-outline);
--rating-item-hover-outline-offset: var(--rating-item-active-outline-offset);
--rating-item-hover-outline-radius: var(--rating-item-active-outline-radius);
--rating-item-hover-box-shadow: var(--rating-item-active-box-shadow);
--rating-item-hover-border: var(--rating-item-active-border);
--rating-item-hover-border-radius: var(--rating-item-active-border-radius);
/* Chat / Forms / Yes/No Field */
--yes-no-field-padding: 0;
--yes-no-field-label-font-weight: 600;
--yes-no-field-label-margin-bottom: 10px;
--yes-no-field-button-border: 1px solid #E0E0E0;
--yes-no-field-button-border-radius: 8px;
--yes-no-field-button-bg: #fff;
--yes-no-field-button-color: #2a263c;
--yes-no-field-button-padding: 12px 16px;
--yes-no-field-button-font-size: var(--font-size);
--yes-no-field-button-font-weight: var(--font-weight);
--yes-no-field-button-transition: all 0.2s ease;
--yes-no-field-button-gap: 12px;
--yes-no-field-button-hover-bg: #F5F5F5;
--yes-no-field-button-hover-color: #2a263c;
--yes-no-field-button-hover-border: 1px solid #D0D0D0;
--yes-no-field-button-hover-transform: translateY(-1px);
--yes-no-field-button-hover-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
--yes-no-field-button-active-bg: #F0F8FF;
--yes-no-field-button-active-color: #2a263c;
--yes-no-field-button-active-border: 1px solid #D0D0D0;
--yes-no-field-button-active-box-shadow: none;
--yes-no-field-button-disabled-opacity: 0.5;
--yes-no-field-button-disabled-cursor: not-allowed;
--yes-no-field-radio-size: 20px;
--yes-no-field-radio-border-color: #D0D0D0;
--yes-no-field-radio-border: 2px solid var(--yes-no-field-radio-border-color);
--yes-no-field-radio-border-radius: 50%;
--yes-no-field-radio-checked-color: var(--primary-color);
--yes-no-field-radio-background-color: #FFF;
--yes-no-field-radio-margin: 0 12px 0 0;
--yes-no-field-option-direction: row;
--yes-no-field-error-padding: 8px 12px;
--yes-no-field-error-margin-top: 8px;
--yes-no-field-error-border-left: none;
--yes-no-field-error-border-radius: 0;
--yes-no-field-label-font-size: var(--font-size);
--yes-no-field-label-line-height: 1.4;
--yes-no-field-label-color: var(--chatbot-forms-text-color);
--yes-no-field-desc-margin: 0 0 12px 0;
--yes-no-field-desc-font-size: calc(var(--font-size) * 0.9);
--yes-no-field-desc-color: var(--chat-comments-text-color);
--yes-no-field-option-min-width: 120px;
--yes-no-field-option-min-height: auto;
/* Chat / Forms / Input */
--input-field-content-gap: 10px;
--input-field-desc-position: below;
--input-field-desc-margin: 0;
--input-bg-color: #FFF;
--input-border: 1px solid var(--chatbot-forms-text-color);
--input-border-radius: 3px;
--input-outline: none;
--input-outline-offset: 0;
--input-text-color: var(--chatbot-forms-text-color);
--input-height: 30px;
--input-field-label-font-size: var(--font-size);
--input-field-label-line-height: 1;
--input-field-label-font-weight: var(--form-label-font-weight);
--input-field-label-color: var(--chatbot-forms-text-color);
--input-field-label-padding: 0 0 10px 0;
--input-field-desc-font-size: calc(var(--font-size) - 1px);
--input-field-desc-opacity: .7;
--input-field-desc-font-weight: var(--form-label-font-weight);
--input-field-desc-color: var(--chatbot-forms-text-color);
/* Chat / Forms / Input / Error */
--input-error-bg-color: transparent;
--input-error-border: 1px solid var(--error-color, #d32f2f);
--input-error-outline: none;
/* Chat / Forms / Input / Disabled */
--input-disabled-bg-color: #f5f5f5;
--input-disabled-border: 1px solid #cccbcb;
--input-disabled-outline: none;
--input-disabled-opacity: 0.7;
--input-disabled-text-color: var(--chatbot-forms-text-color);
/* Chat / Forms / Textarea */
--textarea-bg-color: #FFF;
--textarea-border: 1px solid var(--chatbot-forms-text-color);
--textarea-border-radius: var(--input-border-radius);
--textarea-outline: var(--input-outline);
--textarea-min-height: 60px;
--textarea-resize: vertical;
--textarea-error-bg-color: var(--input-error-bg-color);
--textarea-error-border: var(--input-error-border);
--textarea-error-outline: var(--input-error-outline);
--textarea-disabled-bg-color: var(--input-disabled-bg-color);
--textarea-disabled-border: var(--input-disabled-border);
/* Chat / Comments */
--chat-comments-text-color: #707070;
--chat-comments-font-size: 11px;
--chat-comments-font-weight: var(--font-weight);
--chat-comments-error-color: var(--error-color);
/* Chat / Confirm modal */
--chat-config-modal-bg: var(--chat-message-bot-bg);
--chat-config-modal-mask-bg: var(--chat-bg);
--chat-config-modal-text-color: var(--chat-message-bot-text-color);
/* Chat / Form modal */
--chat-form-modal-bg: var(--chat-message-bot-bg);
--chat-form-modal-mask-bg: var(--chat-bg);
--chat-form-modal-text-color: var(--chat-message-bot-text-color);
--chat-form-modal-scrollbar-color: var(--primary-color);
--chat-form-modal-scrollbar-color-hover: var(--chat-form-modal-scrollbar-color);
--chat-form-modal-scrollbar-bg: var(--chat-form-modal-bg);
--chat-form-modal-scrollbar-width: 4px;
/* Chat / Footer */
--chat-footer-bg: #fff;
--chat-footer-border: 1px solid rgba(0, 0, 0, 0.1);
--chat-footer-padding: 15px 0 5px 0;
--chat-footer-border-radius: 12px 12px 0 0;
--chat-footer-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
--chat-footer-clip-path: inset(-8px -8px 0px -8px);
/* Chat / Footer / Icon */
--chat-footer-icon-active: var(--primary-color);
--chat-footer-icon-disabled:rgb(215, 215, 215);
/* Chat / Footer / Input */
--chat-footer-input-bg: #F5F5F5;
--chat-footer-textarea-font-size: var(--font-size);
--chat-footer-textarea-line-height: 1.3333;
--chat-footer-textarea-color: #000;
--chat-footer-textarea-color-placeholder: rgb(150, 155, 166);
--chat-input-border-color: var(--chat-footer-input-bg);
--chat-input-border: 1px solid var(--chat-input-border-color);
--chat-footer-textarea-height: 17px;
--chat-footer-textarea-margin-bottom: 4px;
--chat-footer-input-padding: 7px;
/* Chat / Footer / Counter */
--chat-footer-counter-text: var(--chat-comments-text-color);
--chat-footer-counter-color: var(--primary-color);
--chat-footer-counter-color-error: var(--error-color);;
/* Chat / Footer / Record */
--chat-footer-record-icon-active-pulse: var(--primary-color);
/* Chat / Footer / Persistent Menu */
--chat-footer-menu-bg: var(--chat-bg);
--chat-footer-menu-text-color: var(--chatbot-forms-text-color);
/* Chat / Footer / Voice */
--chat-footer-voice-padding: 0;
--chat-footer-voice-margin: 0;
--chat-footer-voice-min-height: 40px;
--chat-footer-voice-margin-top: -10px;
--chat-footer-voice-bg: #ffffff;
--chat-footer-voice-text-speaking: red;
--chat-footer-voice-icons: var(--primary-color);
--chat-footer-voice-microphone-bg: var(--primary-color);
--chat-footer-voice-icons-hover-bg: #F5F5F5;
--chat-footer-voice-mask-gradient-1: #FDFDFD;
--chat-footer-voice-mask-gradient-2: #FBFBFB;
--chat-footer-voice-wrapper-height: 45px;
/* Chat / Scroll to bottom */
--chat-scroll-to-bottom-button-bg: var(--primary-color);
--chat-scroll-to-bottom-button-hover-bg: var(--secondary-color);
--chat-scroll-to-bottom-button-bottom-position: 85px;
--chat-voice-scroll-to-bottom-button-bottom-position: calc(var(--chat-scroll-to-bottom-button-bottom-position) + 46px);
/* Modal / Form */
--modal-form-button-padding: var(--button-padding);
--modal-form-button-font-size: var(--font-size);
}