Highlight Data in different colors Using CSS

Use the below code in report query to highlight data with different colors based on conditions

CASE

            WHEN (TRUNC(SYSDATE) > date_down AND date_down IS NOT NULL)

            AND date_out IS NULL

               THEN 'Y'                               ---------------RED COLOR

            WHEN (TRUNC(SYSDATE) > date_out AND date_out IS NOT NULL)

            AND complete_date IS NULL

               THEN 'Z'                               -----------GREEN COLOR

            WHEN (TRUNC(SYSDATE) > complete_date AND complete_date IS NOT NULL)

            AND date_start IS NULL

               THEN 'X'                               --------ORANGE COLOR

            WHEN (    TRUNC(SYSDATE) > date_start

                  AND date_start IS NOT NULL

                  AND ship_date IS NULL

                 )

            AND date_complete IS NULL

               THEN 'P'                               --------YELLOW COLOR

            WHEN ((ship_date - TRUNC (SYSDATE) <= 2) AND ship_date IS NOT NULL

                 )

            AND date_complete IS NULL

               THEN 'Q'                               ---------BLUE COLOR

           

ELSE 'N'                                 ---------GREY COLOR

         END css_style

Use the below Javascript code for coloring.

//function to set css-bg color
function fn_css()
{

var i = 1;
var b,a,c,f;
while (i != 0) {
b = "000" + i;
b = pad(i, 4);
a = $('#f20_'+b).val(); //ID of CSS_STYLE column
c = "#f08_"+b; //ID of column to be highlighted
f = "f08_"+b;//date_out
g = "f10_"+b;//complete
h= "f12_"+b;//date_start
k= "f13_"+b;//date_complete

if (typeof a === "undefined") {
i=0;
}
else
{
//alert(g);

if (a == 'Y') {

/*Appying bg color to the closest row with ID f05_0001(first row, if 2nd row - f05_0002 and so on ) */
$(c).closest("tr").find('input[id="'+f+'"]').css("background-color","red");

}
else if(a == 'Z') {

$(c).closest("tr").find('input[id="'+g+'"]').css("background-color","green");

}
else if(a == 'X') {

$(c).closest("tr").find('input[id="'+h+'"]').css("background-color","orange");

}
else if(a == 'P') {

$(c).closest("tr").find('input[id="'+k+'"]').css("background-color","yellow");

}
else if(a == 'Q') {

$(c).closest("tr").children("td").css("background-color","blue");
}
i= i+1;
}
}
}