Base.css overriding widget css. Best practice for resolving this?

I have installed a flight booking widget that is basically a table with some javascript.

The booking widget loses all of its styling and goes all over the place. I have identified base.css as the culprit. Ive gone through in inspect element and identified the below rules that affect my widget.

What I’m after is advice on the best way to over ride these rules. Should I copy these rules over to custom.css and edit them as needed?
Some advice would be great! Thanks all

#top select {
-webkit-appearance: none;
border: 1px solid #e1e1e1;
padding: 8px 6px;
outline: none;
font: 13px “HelveticaNeue”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 100%;
display: block;
margin-bottom: 20px;
background: #fff;
border-radius: 0px;
}

#top label{
font-weight: bold;
font-size: 12px; }

/* #Table
================================================== */
tr:first-child th, tr:first-child td{
border-top-style: solid;
border-top-width: 1px;
}

tr th:first-child, tr td:first-child{
border-left-style: solid;
border-left-width: 1px;
}

td {
font-size: 13px;
padding: 9px 12px;
border-style: solid;
border-width: 1px;
border-left:none;
border-top:none;
}

table {
width: 100%;
padding: 0;
margin: 0 0 20px 0;
font-size: 13px;
}