Remove conflicting styling - Bootstrap & Google Custom Search

Question

Take a look at the picture below from my website: www.kokorugs.com

I am using Boostrap and I believe that there are some conflicting CSS styles.

The problem is that I cannot see Google's CSS and can't figure out how to override this styling.

My code (from google) is below:

        <aside class="box" style="padding:10px 0;">

            <script>
              (function() {
                var cx = '009058734720051694368:e41h4lf-hsk';
                var gcse = document.createElement('script');
                gcse.type = 'text/javascript';
                gcse.async = true;
                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                    '//www.google.com/cse/cse.js?cx=' + cx;
                var s = document.getElementsByTagName('script')[0];
                s.parentNode.insertBefore(gcse, s);
              })();
            </script>
            <gcse:search></gcse:search> 


        </aside>

My CSS for the "box" class is irrelevant but I will include it to avoid any questions:

.box {
background: #ffffff;
border: 2px solid #bcd78d;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
margin-top: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; 
box-sizing: border-box;
}

I appreciate any help in removing this double border. Thank you!

UPDATE:

When I tried this CSS rule:

* {
    border: none !important;
}

only Google's border was removed. The picture is below:

Answer 1

The border is applied from this section of bootstrap-combined.min.css :

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: #FFF;
border: 1px solid #CCC;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear .2s, box-shadow linear .2s;
-moz-transition: border linear .2s, box-shadow linear .2s;
-o-transition: border linear .2s, box-shadow linear .2s;
transition: border linear .2s, box-shadow linear .2s;
}

So removing the border shadows will fix this for you:

 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

Or overriding it can help too:

 -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

Answer 2

The second border you are seeing is in fact not a border but a box shadow. It is beeing added by your bootstrap css to all inputs, but not desired for the search box. You should turn it off by countering it for the search box only. Add something like this to your css:

.gsc-input-box input[type="text"] {
  -webkit-box-shadow: none;
  box-shadow: none;
}