enfold and gravity forms css conflicts

Hi

I’ve a small minor css issue.

If you goto

http://176.32.230.21/whitesidetaxis.co.uk/get-a-quote/

As you scroll down to the gravity form you will see the datepicker field. The calender icon is sitting incorrectly under the input field. This is a simple fix and it is a case of the base enfold css applying display box like so

#top input[type=”text”]

I am trying to over ride this with the important tag. It should be display as inline block. According to Gravity css. And when I go to inspector and turn off display block then this css I’ve already added turns on and fixes the issue.

.gform_wrapper input.datepicker.datepicker_with_icon {
display: inline-block!important;
}

For some reason my css has zero impact. And I don’t want to edit the parent css files as when I do an update of the theme these changes are lost and its not the way it should be done.

Can you help me out with the css conflict?

Also the width of the date picker seems to render strangely when clicking on it

ps. I’ve also tried

#input_1_4 {
display: inline-block !important;
}

and nothing changes