CSS modification on Search box

Hi, I want to change the default horizontal search box as the attached image.
I have inspect with chrome and found these changes can do what I want . I don’t know where to put these codes to change the default css. I tried putting this Design Setup > Basic Colours > Right side box> Save CSS changes only, but did not work. Please guide me where to put these change codes.
Below are the changed codes I just copied from Inspect tool of Chrome.
.wlt_business_theme .BasicSearchBox {
margin-top: -20px;
/* padding: 50px; */
background: #fac564 url(img/bg1.png);
/* height: 450px; */
color: #fff;
text-shawdow: 1px 1px 1px #000;
}

.BasicSearchBox {
/* min-height: 600px; */
color: #fff;
}

.wlt_business_theme .BasicSearchBox .well {
/* margin-top: 30px; */
max-width: 1170px;
background: none;
border: 1px solid #fff;
}

.well {
min-height: 20px;
padding: 19px;
/* margin-bottom: 20px; */
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}