Hide a calculated input box.

I am building a multi-page small online quotation engine using Gravity forms

The user enters in numbers into input boxes.

Based on these numbers, I have enabled a calculation in another input box which I just want to pass its value to page 2.

I do not want this input box / calculation to be visible to the user, but I want it to remain there so that I can create a shortcode which accesses it's value in page 2.

As such, I changed it's visibility to Admin Only. The problem with this is that when it is admin only, then my shortcode cannot pick up the calculation. When the visibility is set to public, the shortcode does pick up the calculation.

Is there a way I can just make that particular input field hidden in CSS or invisible?

<li id="field_4_15" class="gfield" style="">
...
...
</li>

I have also tried adding css class name of gf_hide and then used the following CSS but

.gf_hide {
  visibility: hidden;
  display: none;
}

visibility hidden and display none dont seem to work for me either.

Im trying to change CSS of the forms by inserting the custom classes into form elements, then referencing the class from my theme's css file.

e.g.

<li id="field_4_1" class="gfield    gf_weight" style=""><label class="gfield_label" for="input_4_1">9ct – 375</label>
<div class="ginput_container"><input name="input_1" id="input_4_1" step="any" value="" class="small" tabindex="4" type="number"></div>
</li>
<li id="field_4_2" class="gfield    gf_weight" style=""><label class="gfield_label" for="input_4_2">14ct – 585</label>
<div class="ginput_container"><input name="input_2" id="input_4_2" step="any" value="" class="small" tabindex="5" type="number"></div>
</li>

As you can see, I have created a class field gf_weight. However when I try the following combinations within my theme's style.css, this makes absolutely no difference to the form.
body .gform_wrapper .gform_body .gform_fields .gfield .gf_weight {margin-bottom: 4px}
.gf_weight {margin-bottom: 4px}

as such, I can only deduce that for some reason, the default GF styling is superseding my own custom CSS.

That I think is why I cannot make the box disappear for elements with class .gf_hide, and I cannot reduce the margins between li elements with the .gf_weight class. I can't change ANY styling at all, yet in Chrome, when inspecting element, I can change CSS of the form at will!

Any advice on this would be much appreciated. Am I able to PM you the web address and you can take a look?

http://tinypic.com/r/2d8gcpc/6