Unable to customize style for flow text area with lightning component on visualforce page

Question

I had some fun this weekend embedding a flow on a visualforce page w/ lightning runtime and using it in a chatter profile tab in a subtab app.

My one remaining issue w this approach is that the light grey on white slds styling for the text input fields is nearly impossible to read and the width of the input area is rather narrow.

I have so far had no success in customizing the style of the input area. I have tried inline css, static resource, and the app bundle. My limited css skills + limited exposure to lightning is making this last hurdle rather daunting.

Has anyone figured out a successful approach to get some basic styling into the flow? I could take it from there but so far none of my customization has had any impact on the rendered UI. I know I can revert to the regular runtime and the existing styling options for styling flows in vf pages, but would love to successfully tweak lightning runtime.

UPDATE : if I update the app to remove the slds styling by setting extends="ltng:outAppUnstyled" then my styles start to come through. I think i'm just not getting the right set of CSS selectors to override the native slds styles. Maybe i need to use javascript to do this after the page loads? I've tried a range of garish stuff in my css to see if anything comes through. Here is a link to my current style sheet

Answer 1

The CSS in the app bundle replaces .THIS with namespace + app name (in my case .cDisplayFlow) when its compiled.

Therefore, setting this same class on the container div allowed my dependent selectors to take hold.

In my case, going from the verbatim copy/paste

<div id="flowContainer" />

to adding the app name as the class

<div id="flowContainer" class="cDisplayFlow"/>

allowed the dependent selectors to override the provided slds styles. As my css skills are not strong i'm using some hackish stuff like !important, but perhaps others can provide some more guidance on good CSS to use.