How do we adjust certain Jobs and Experts font colors when invisible on some themes?

Hi,
I really like the option on Jobs and Experts to change the theme style to show up on dark theme backgrounds. There are some parts that are not working right though. I was able to fix some of the CSS that was invisible against a dark theme with the below code. However, there is a section in a text box where I can't read the CSS element right. The source has it calling a javascript that doesn't directly say what class and element is going on, on the top level surface.
This is the code I used to fix some parts, put under Appearance->Custom CSS:

/* Customization for some parts of Jobs and Experts for display on certain dark themes. */
.can-edit, .panel-body {
	color:#666;
}

input, .description {
	color:#fff;
}

Attached is the screenshot of the part I couldn't figure out.
Will you please help me figure out what CSS code I need to fix this input box, so that the text in it is white and visible? I already opened up access to this site for another ticket. If you need to take a look please feel free.
Thank you!

    Patrick

    Hi there @Aurelio

    I hope you had a great weekend!

    The elements in the screenshot you provided are from the Directory plugin, not Jobs & Experts.

    This is one of the rare cases where the use of the !important property becomes necessary to override style rules that appear to be added via javascript.

    I've added the !important property to the input, .description style rule so the text in input fields now displays white.

    I hope this helps! And thanks for being a member

    Aurelio

    Hi Patrick! This totally helps. It seems to be most of the parts I couldn't over-ride the CSS were where they needed "important".
    I am still having some issues with parts of of Jobs and Experts. I apologize for any confusion on which one I was screenshotting. I'm trying to align Jobs and Experts, Support System and Directory with the site theme to display all well against the dark theme, and getting there with your guys's help.
    One part I can't seem to figure out is where the forms are being called with javascript and cdata functions, I'm not sure exactly what element I am referencing.
    For example, in the popup of "Location", the text that says "Where are you from?" and location is real light and hard to read against the white. Can you tell me what element this is and how to adjust this? I've tried quite a few class and element references, since I'm unable to see the element and class to reference for these popups from the actual html.
    Thanks again for your help!

    Aurelio

    Thanks so much for patience and help! It's a little plain, my attempted fixes, and I know the code is clunky. I kept slapping on elements I could find until I could see everything clear, using your tips and code too. My main concern was not being able to target and override all the elements to make high contrast. Now that I seem to have that down I can dig deeper and act more refined. Here is my first clunky code that worked to make it all visible against the dark theme. I know I went too far and now need to scale it back but wanted to let you know all elements are listening now and I think I identified them all, if too many. Now that everything is listening I can start refining, but here's where I'm scaling back from.
    Thanks again!

    .can-edit {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    .panel-body {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    input, .description {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    h1, h2, h3, h4, h5 {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    
    .row, .inline-list, .support-system-ticket-meta, .first, .support-system-reply-message,
    	.nav, .nav-tabs, li, .ig-error-field, .form-group, .col-md-3, .control-label,
    	.col-lg-9, #expert-content-tabs, .nav, .nav-tabs, a, p, p.support-system-reply-message
     {
    	color:#fff !important;
    	background-color: #000000 !important;
    }
    Michelle Shull

    Nice work here, Aurelio! You're going to be doing some really special things with CSS before you know it.

    I'm taking a look, and I think you're getting the gist. Make sure you need to use the !important declaration each time you have here, by trying the same code without it. If the change takes without !important, leave it off. (Just good practice for CSS code.)

    Also, this is my go to research spot: http://www.w3schools.com/css/ Whenever I get stuck or can't remember how to target specific bits, I can always find the answer there.

    Again, great job! I'm throwing you some points for all this learning you've done. : )