Customize CSS for "Swipebox " lightbox

I'm using Awesome Flickr Gallery, a plugin to show Flickr galleries on a website; it uses "Swipebox" to display single pictures on a lightbox.

The lightbox display two bars, on to and bottom of the screen, di display information and provide navigation controls. I'm trying to customize those bars to match the site fonts and colors, but without success.

By inspecting the relevant items with Chrome, I get that these elements are div id="swipebox-top-bar" class="visible-bars" and div id="swipebox-bottom-bar" class="visible-bars"

This is my custom code:

#swipebox-top-bar, #swipebox-bottom-bar {
    font-family: Montserrat,Helvetica,Arial,sans-serif !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 1px #000 !important;
    background: #A01921 !important;
    opacity: .80 !important;
}

I've tried various combinations, not only the shown #swipebox-bottom-bar, #swipebox-top-bar, but also div#swipebox-bottom-bar, div#swipebox-top-bar, div#swipebox-bottom-bar.visible-bars, div#swipebox-top-bar.visible-bars, visible-bars, but nothing seem to work.

How can I successfully customize these elements?