How to customize the widget via css?

You can easily customize the widget via css if you need additional customizations which are not provided in the widget settings page.

Every Advanced Business Hours widget has a unique ID, this allows you to modify each individual widget separately if you have more than one widget.

/* basic structure */
#adv_business_hrs-4 
   .abh-wrapper
     .abh-header
     .abh-body
     .abh-footer

In the above example, 4 is the widget ID. This ID can be found in the shortcode tab.

For example, to add a border around the entire widget, you can write:

#adv_business_hrs-4 .abh-wrapper { border: 5px solid #333; }