Gravity Forms Custom css, Where do i put it!?

I already have a gravity form set up at boardwalkcleaning.com. I want to have a side window that shows price, like here: http://demo.gravityforms.com/build-a-pizza/

That is just a normal total field that has been positioned over on the right with CSS. It’s not a total in a widget or anything like that. Here is the actual CSS used for that, I just don’t know where the custom css goes to make this work! Would love some advice!

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
 
body .gform_wrapper span.ginput_total {
    width: 100%;
    text-align: center;
    padding: 6px 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #c4df9b;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700 !important;
    font-size: 4em;
    text-shadow: 1px 1px 1px #daf2b6;
    margin: 0 auto !important;
    display: -moz-inline-stack;
    display: inline-block;
}
 
body .gform_wrapper .top_label li.gfield.hidden-total.gfield_price label.gfield_label {
    padding: 203px 0px 3px 0px;
    background-image: url("http://rgsharedweb.s3.amazonaws.com/images/demo/gpizza_chef.png");
    background-repeat: no-repeat;
    background-position: center top;
    width: 100%;
    text-align: center;
    margin-top: -35px;
}
 
/* media queries - portrait mode tablet or desktop styles */
 
@media only screen and (min-width: 761px) {
 
    body .gform_wrapper li.gfield.hidden-total.gfield_price {
        position: fixed;
        right: 30px;
        top: 50px;
        padding: 0 10px 10px 10px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        background-color: #fff;
        text-shadow: 1px 1px 1px #daf2b6;
        -webkit-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
        -moz-box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
        box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5);
        width: 240px;
    }
 
}