rowaatr in jqGrid style is not applied

Question

I'm trying to give background color to jqgrid row depending on some row value. The code that I use is given below. Also it should be mentioned that the code for table generation is locked for me and I'm adding only the jqgrid part. The callback function in rowaatr is working as it was meant to be (used the debugger to check). The problem is that the background color is not changing. I have used a class and a direct style assigment with no result. Also I have used !important after color with no luck.

I'm using jqGrid 4.6.0, Firefox 31 and Chrome 37, jquery 1.10.2 and jquery-ui-1.10.3.

function BuildTable(airmoves) {
/* Removing previous table if exists */
  if ($('#airmovestablewrapper').get(0)){
    $('#airmovestablewrapper').remove();
  }
/* adding a table wrapper */
  $('#divsearchresults').append('<div id="airmovestablewrapper"></div>');          
  $('#airmovestablewrapper').append('<table id="tblairmoves"></table>');

  row = '<thead><tr><th>callsign</th><th>ADEP</th><th>ADEST</th><th>MoveTime</th><th>AircraftRegistration</th><th>Type</th></tr></thead>';
  $('#tblairmoves').append(row);
  for (i=0;i<airmoves.length;i++)
     {
       row = '<tr>';
       row = row + '<td>' + airmoves[i].callsign + '</td>';
       row = row + '<td>' + airmoves[i].ADEP + '</td>';
       row = row + '<td>' + airmoves[i].ADEST + '</td>';
       row = row + '<td>' + airmoves[i].MoveTime + '</td>'; 
       row = row + '<td>' + airmoves[i].AircraftRegistration + '</td>';
       row = row + '<td>' + airmoves[i].Type + '</td>';
       row = row + '</tr>';
       $('#tblairmoves').append(row);
     }   
   row = '</tbody>';
   $('#tblairmoves').append(row);
   $('#divsearchresults').append('<div id="pager"></div>');

   tableToGrid('#tblairmoves',{
     dataType: 'local',
     rowNum: 20,
     rowList: [20,30,40],
     pager: '#pager',
     height: '100%',
     width: 'autowidth',
     viewrecords: true,
     gridview: true,
     colNames:['Type','Χαρακτηριστικό', 'ADEP','ADEST','Ώρα κίνησης', 'Νηολόγιο'],
     colModel:[ 
       {name:'Type',index:'Type', width:150},
       {name:'callsign',index:'callsign', width:100}, 
       {name:'ADEP',index:'ADEP', width:50, align:'center'}, 
       {name:'ADEST',index:'ADEST', width:50, align:'center'},
       {name:'MoveTime',index:'MoveTime', width:150, align:'center'},
       {name:'AircraftRegistration',index:'AircraftRegistration', width:120, align:'center'}       
       ],
     rowattr: function (rd) 
      {
        if (rd.Type === "0") {
          //return {"style": "background-color:#F4AC91;"};
          return {"class": "arrivals"};
        }
        else {
          if (rd.Type === "1") {
            //return {"style": "background-color:#EAE69D;"};
            return {"class": "departures"};
          }
          else {
            //return {"style": "background-color:#32E69D;"};
            return {"class": "other"};
          }
        }
      },
     caption: "Κινήσεις αεροσκαφών"
   });

/* Center jqGrid caption starts */
   $("#tblairmoves").closest("div.ui-jqgrid-view")
    .children("div.ui-jqgrid-titlebar")
    .css("text-align", "center")
    .children("span.ui-jqgrid-title")
    .css("float", "none");
/* Center jqGrid caption ends */

$("#pager_left, #pager_center", "#pager").width(0);

/* hinding columns starts */
   $("#tblairmoves").jqGrid('hideCol','Type');
/* hinding columns ends */

/* maximum lines per screen 20 starts */
   $('#tblairmoves').setGridParam({ rowNum: 20 }).trigger("reloadGrid");
/* maximum lines per screen 20 ends */   
}

The used classes. I also tried .ui-widget-content in front of class with no luck again.

.arrivals {
  background-color: rgb(244, 172, 145);
}

.departures {
  background-color: rgb(234, 230, 157);
}

.other {
  background-color: rgb(50, 230, 157);
}

Final Update

Working function for the above problem.

function BuildTable1(airmoves) {
$('#tblairmoves').jqGrid('GridUnload');
jQuery("#tblairmoves").jqGrid({     
    datatype: 'local', 
    data: airmoves,
    height: '100%',
    colNames:['Type','Χαρακτηριστικό', 'ADEP','ADEST','Ώρα κίνησης', 'Νηολόγιο'], 
    colModel:[ 
       {name:'Type',index:'Type', width:150, hidden: true},
       {name:'callsign',index:'callsign', width:100}, 
       {name:'ADEP',index:'ADEP', width:50, align:'center'}, 
       {name:'ADEST',index:'ADEST', width:50, align:'center'},
       {name:'MoveTime',index:'MoveTime', width:150, align:'center'},
       {name:'AircraftRegistration',index:'AircraftRegistration', width:120, align:'center'}],
    afterInsertRow : function(rowid, data) {
      var trElement = jQuery("#"+ rowid,jQuery('#tblairmoves'));
      trElement.removeClass('ui-widget-content');
      if (data.Type === "0") {                    
        trElement.addClass('arrivals');
      }
      else {
        if (data.Type === "1") {        
            trElement.addClass('departures');
          }
          else {            
            trElement.addClass('other');
            }
          }      
    }, 
    rowNum:20, 
    rowList:[10,20,30], 
    pager: '#pager', 
    viewrecords: true,
    caption: "Κινήσεις αεροσκαφών" });
  $("#pager_left, #pager_center", "#pager").width(0);
}

Styles

.arrivals {
  background-color: rgb(244, 172, 145)  !important;
  background-image: none; 
}

.departures {
  background-color: rgb(234, 230, 157)  !important;
  background-image: none; 
}

.other {
  background-color: rgb(50, 230, 157)  !important;
  background-image: none; 
}