This is a tutorial regarding how to customize your payback calculator report CSS to match your branding.
Start with base templates
The default payback calculator report uses default HTML + CSS templates, to download the full templates, please head to the CSS section of your settings portal, scroll to the Rebate Finder + Payback Calculator CSS (Dev Only) section, then Payback Calculator Report Base Templates (HTML + CSS), and click on the page(s) you want to customize to copy the full template(s), then paste in any text editor you want (preferably one designed for development work).
All you can customize is CSS
You won't be able to supply or change any HTML. The goal is to add new CSS on top of the existing base CSS to achieve the desired look and feel, then copy and paste the added new CSS into the Supplement CSS of your widget console.
It's recommended that when you work on the CSS customization, use full path from top to exact element whenever possible instead of using generic tags (div, td, etc.).
NOTE that you're getting only CSS in the base templates and in the browser environment that's also all you can work with but it's possible to use SCSS in the widget console if you know how to combine your work.
Be careful with assets
Since all you can customize is CSS, you can't supply any assets to us, if you want to use, for example, an external image, you can only reference it as a background image using an external link. If you develop your template(s) using local assets, don't forget to replace them with the real thing before you go live. Also, if you use local URLs, be sure to replace them as well, or you WILL break your templates in production, invalid assets will break the entire rendering.
View in a modern browser
The payback calculator report will eventually be rendered as PDF. It's necessary to view templates in a modern browser (e.g. Chrome, preferably the newest version) to support the CSS3 features.
NOTE that you're NOT developing a website so you don't have to deal with compatibility here, usually if it works in the browser, it should render exactly as PDF.
Go live!
Once you're done with your customization, copy ONLY the newly added CSS, page by page, to the end of Supplement CSS under Catalog Widget + Payback Calculator CSS (Dev Only). If you include default CSS in the Supplement CSS, it may or may not break the look and feel so be careful.
DON'T use the full substitute CSS, unless you provide the full style to all of your widgets and reports, it will break all of them since any style set here will be the only style served, eliminating all default CSS.