No styles are loaded for the planner. It will automatically use pre-existing styles,
and can easily be styled with your site's stylesheets. This is the best option to blend in with
a site's appearance or for tech-savvy agencies capable of customizing their own CSS.
The form is compatible with Bootstrap as well.
The basic style has a max-width of 500px and is auto-centered in any page container. Departure,
Time, and Date fields are set to auto-wrap on small screens. It has some margin and padding set,
but all styles are easy to override.
The compact style is left aligned with a max-width of 300px. It easily fits into a small sidebar
column or can be embedded into an existing page alongside text.
The slick style uses flexbox to be responsive at many screen sizes, a larger default font-size,
and styled form labels. It may not display as attractively on outdated browsers.
The dark style is meant to be used on pages with light text on dark backgrounds. The planner
itself does not have a background color set, but uses white text and opacity settings on form fields.
Read more about how to create your own styles for the trip planner.