From 4f7c06ed978b2a68c8cb58cd18f268389dad9822 Mon Sep 17 00:00:00 2001
From: Narayanan Madaswamy <maddy23285@gmail.com>
Date: Tue, 21 Jul 2026 20:46:27 +0530
Subject: [PATCH] UI Migration Done

---
 .../WEB-INF/app/admin/maintenance.jsp         |  2 +-
 .../WEB-INF/app/edp/cutoff/allocation.jsp     |  2 +-
 .../WEB-INF/app/edp/cutoff/cutoff.jsp         |  2 +-
 .../WEB-INF/app/edp/cutoff/referencesheet.jsp |  2 +-
 .../WEB-INF/app/edp/cutoff/sendtoopr.jsp      |  2 +-
 .../WEB-INF/app/edp/cutoff/telesheet.jsp      |  2 +-
 .../WEB-INF/app/edp/dedupe/dedupedo.jsp       |  2 +-
 .../WEB-INF/app/edp/dedupe/deduperun.jsp      |  2 +-
 .../WEB-INF/app/edp/dedupe/dedupesend.jsp     |  2 +-
 .../app/edp/documents/teledocuments.jsp       |  2 +-
 .../WEB-INF/app/edp/punching/editcases.jsp    |  3 +-
 .../WEB-INF/app/edp/tools/addproduct.jsp      |  4 +-
 .../WEB-INF/app/edp/tools/colony.jsp          |  2 +-
 .../WEB-INF/app/edp/tools/delcutoffcases.jsp  |  2 +-
 .../WEB-INF/app/edp/tools/edpprocesspanel.jsp |  2 +-
 build/WebContent/WEB-INF/app/general/sms.jsp  |  4 +-
 build/WebContent/WEB-INF/app/mis/wfh.jsp      |  2 +-
 .../app/operation/bankreports/reports.jsp     |  2 +-
 .../app/operation/documents/searchreports.jsp |  2 +-
 .../operation/reporting/bksoprreporting.jsp   |  4 +-
 .../app/operation/reporting/finaldone.jsp     |  2 +-
 .../operation/reporting/negupdrequests.jsp    |  4 +-
 .../app/operation/reporting/offreport.jsp     | 19 ++++-----
 .../reporting/offreport_10052025.jsp          | 17 ++++----
 .../app/operation/reporting/offreport_new.jsp | 19 ++++-----
 .../app/operation/reporting/oprreporting.jsp  |  4 +-
 .../app/operation/reporting/othreport.jsp     | 27 ++++++------
 .../app/operation/reporting/qcrreporting.jsp  | 41 +++++++++---------
 .../app/operation/reporting/qualityctrl.jsp   | 42 +++++++++----------
 .../app/operation/reporting/refreport.jsp     | 21 +++++-----
 .../app/operation/reporting/resireport.jsp    | 15 ++++---
 .../reporting/resireport_10052025.jsp         | 15 ++++---
 .../operation/reporting/resireport_new.jsp    | 15 ++++---
 .../app/operation/reporting/scanning.jsp      | 42 +++++++++----------
 .../app/operation/reporting/scanningqc.jsp    | 42 +++++++++----------
 .../app/operation/reporting/telereport.jsp    | 15 ++++---
 .../app/operation/reporting/telreporting.jsp  |  4 +-
 .../app/operation/reporting/tvrreport.jsp     |  7 ++--
 .../WEB-INF/app/operation/tools/belttran.jsp  |  8 ++--
 .../WEB-INF/app/operation/tools/casetran.jsp  | 10 ++---
 .../WEB-INF/app/operation/tools/colony.jsp    |  8 ++--
 .../app/operation/tools/deletecase.jsp        |  2 +-
 .../WEB-INF/app/operation/tools/emailmgr.jsp  | 12 +++---
 .../app/operation/tools/fieldallocation.jsp   |  2 +-
 .../app/operation/tools/fraudbulletin.jsp     |  2 +-
 .../WEB-INF/app/operation/tools/gsms.jsp      |  2 +-
 .../app/operation/tools/listholiday.jsp       |  2 +-
 .../app/operation/tools/listverifiers.jsp     | 10 ++---
 .../WEB-INF/app/operation/tools/mdrsquery.jsp |  4 +-
 .../app/operation/tools/mncasepending.jsp     |  2 +-
 .../app/operation/tools/mnphotosearch.jsp     |  2 +-
 .../WEB-INF/app/operation/tools/oclcases.jsp  |  2 +-
 .../operation/tools/operatorallocation.jsp    |  2 +-
 .../app/operation/tools/oprcasetool.jsp       |  4 +-
 .../WEB-INF/app/operation/tools/query.jsp     |  4 +-
 .../WEB-INF/app/operation/tools/unlock.jsp    |  2 +-
 build/WebContent/css/button.css               |  3 +-
 build/WebContent/css/div.css                  |  2 +-
 build/WebContent/css/manage-product-v4.css    |  2 +-
 build/WebContent/css/matrix-shell-v2.css      |  2 +-
 build/WebContent/css/role-batch-v2.css        |  2 +-
 build/WebContent/js/appjs/reporting-new.js    | 11 +++--
 build/WebContent/js/appjs/reporting.js        | 11 +++--
 .../nimble/RoleVisibleBatchMigrationTest.java | 10 ++++-
 64 files changed, 262 insertions(+), 259 deletions(-)

diff --git a/build/WebContent/WEB-INF/app/admin/maintenance.jsp b/build/WebContent/WEB-INF/app/admin/maintenance.jsp
index b2c0e7f..5938ec1 100644
--- a/build/WebContent/WEB-INF/app/admin/maintenance.jsp
+++ b/build/WebContent/WEB-INF/app/admin/maintenance.jsp
@@ -50,7 +50,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/optmale.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Application Maintenance</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('initmaintenance','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('initmaintenance','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/edp/cutoff/allocation.jsp b/build/WebContent/WEB-INF/app/edp/cutoff/allocation.jsp
index 62466b0..431147d 100644
--- a/build/WebContent/WEB-INF/app/edp/cutoff/allocation.jsp
+++ b/build/WebContent/WEB-INF/app/edp/cutoff/allocation.jsp
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/alloc.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Allocation</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('allocation','_parent','allocation')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('allocation','_parent','allocation')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/cutoff/cutoff.jsp b/build/WebContent/WEB-INF/app/edp/cutoff/cutoff.jsp
index e22f8f2..8e73131 100644
--- a/build/WebContent/WEB-INF/app/edp/cutoff/cutoff.jsp
+++ b/build/WebContent/WEB-INF/app/edp/cutoff/cutoff.jsp
@@ -55,7 +55,7 @@
 				<form:option value="PM" label="PM" />
 			</form:select>		    
 			</div>		    
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('cutoff','_parent','cutOff')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('cutoff','_parent','cutOff')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/cutoff/referencesheet.jsp b/build/WebContent/WEB-INF/app/edp/cutoff/referencesheet.jsp
index be59e7a..f4445a4 100644
--- a/build/WebContent/WEB-INF/app/edp/cutoff/referencesheet.jsp
+++ b/build/WebContent/WEB-INF/app/edp/cutoff/referencesheet.jsp
@@ -48,7 +48,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/telesheet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Reference-Verification Sheet</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('refsheet','_parent','refsheet')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('refsheet','_parent','refsheet')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/cutoff/sendtoopr.jsp b/build/WebContent/WEB-INF/app/edp/cutoff/sendtoopr.jsp
index 241e959..8e90b3c 100644
--- a/build/WebContent/WEB-INF/app/edp/cutoff/sendtoopr.jsp
+++ b/build/WebContent/WEB-INF/app/edp/cutoff/sendtoopr.jsp
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/oprupd.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Send To Operation</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('sendtoopr','_parent','sendtoopr')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('sendtoopr','_parent','sendtoopr')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/cutoff/telesheet.jsp b/build/WebContent/WEB-INF/app/edp/cutoff/telesheet.jsp
index cfa46d3..87757af 100644
--- a/build/WebContent/WEB-INF/app/edp/cutoff/telesheet.jsp
+++ b/build/WebContent/WEB-INF/app/edp/cutoff/telesheet.jsp
@@ -48,7 +48,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/telesheet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Tele-Verification Sheet</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('telesheet','_parent','telesheet')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('telesheet','_parent','telesheet')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/dedupe/dedupedo.jsp b/build/WebContent/WEB-INF/app/edp/dedupe/dedupedo.jsp
index 8bce982..ee3a24f 100644
--- a/build/WebContent/WEB-INF/app/edp/dedupe/dedupedo.jsp
+++ b/build/WebContent/WEB-INF/app/edp/dedupe/dedupedo.jsp
@@ -52,7 +52,7 @@
 				</c:forEach>	
 			</form:select>		    
 			</div>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('dedupecaselist','_parent','caseGrid')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('dedupecaselist','_parent','caseGrid')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/dedupe/deduperun.jsp b/build/WebContent/WEB-INF/app/edp/dedupe/deduperun.jsp
index 9ee617b..1802746 100644
--- a/build/WebContent/WEB-INF/app/edp/dedupe/deduperun.jsp
+++ b/build/WebContent/WEB-INF/app/edp/dedupe/deduperun.jsp
@@ -48,7 +48,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/dedupe.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Dedupe Run</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('rundedupe','_parent','deduperun')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('rundedupe','_parent','deduperun')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/dedupe/dedupesend.jsp b/build/WebContent/WEB-INF/app/edp/dedupe/dedupesend.jsp
index 898afbf..0a8188a 100644
--- a/build/WebContent/WEB-INF/app/edp/dedupe/dedupesend.jsp
+++ b/build/WebContent/WEB-INF/app/edp/dedupe/dedupesend.jsp
@@ -53,7 +53,7 @@
 				</c:forEach>	
 			</form:select>		    
 			</div>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('senddedupe','_parent','senddedupe')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('senddedupe','_parent','senddedupe')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/documents/teledocuments.jsp b/build/WebContent/WEB-INF/app/edp/documents/teledocuments.jsp
index 623c658..a8923c6 100644
--- a/build/WebContent/WEB-INF/app/edp/documents/teledocuments.jsp
+++ b/build/WebContent/WEB-INF/app/edp/documents/teledocuments.jsp
@@ -44,7 +44,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/telesheet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Tele-Verification Sheet</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('doctele','_parent','teledoc')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('doctele','_parent','teledoc')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/punching/editcases.jsp b/build/WebContent/WEB-INF/app/edp/punching/editcases.jsp
index ff0ff9c..96c9357 100644
--- a/build/WebContent/WEB-INF/app/edp/punching/editcases.jsp
+++ b/build/WebContent/WEB-INF/app/edp/punching/editcases.jsp
@@ -15,7 +15,6 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/editcases.js" type="text/javascript"></script>
 
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/select.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/table.css" rel="stylesheet" type="text/css" />
@@ -49,7 +48,7 @@
 				</c:forEach>	
 			</form:select>		    
 			</div>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('caselist','_parent','caseGrid')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('caselist','_parent','caseGrid')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/tools/addproduct.jsp b/build/WebContent/WEB-INF/app/edp/tools/addproduct.jsp
index f941331..209e9f1 100644
--- a/build/WebContent/WEB-INF/app/edp/tools/addproduct.jsp
+++ b/build/WebContent/WEB-INF/app/edp/tools/addproduct.jsp
@@ -54,7 +54,7 @@
 				</c:forEach>	
 				</form:select>	
 			</div>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('initaddproduct','_parent','addproduct')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('initaddproduct','_parent','addproduct')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel1" class="FormPanel" style="text-align:center">
@@ -98,7 +98,7 @@
 			    	<img class="matrix-title-icon" src="/matrix/images/cutlist.png" align="absmiddle" />
 			    	<span class="matrix-title-text" align="absmiddle">All Options</span>
 				    	&nbsp;&nbsp;<input type="text" class="textbox" id="searchbox" style="width:220px;margin-top:-3px" onkeyup="findOption(this)">
-			    	<img id="close" src="/matrix/images/plus_green.png" title="Add Option" style="right:25px" onclick="newOptionDialog()" />
+			    	<img class="matrix-title-action" src="/matrix/images/plus_green.png" title="Add Option" style="right:25px" onclick="newOptionDialog()" />
 			  	</div>
 		 	</div>
 		 	<div id="TablePanel" class="tableContainer" style="height:360px;overflow-y:scroll">
diff --git a/build/WebContent/WEB-INF/app/edp/tools/colony.jsp b/build/WebContent/WEB-INF/app/edp/tools/colony.jsp
index d378499..189e19d 100644
--- a/build/WebContent/WEB-INF/app/edp/tools/colony.jsp
+++ b/build/WebContent/WEB-INF/app/edp/tools/colony.jsp
@@ -50,7 +50,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/sms.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Colony Allocation</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('colony','_parent','beltAlloc')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('colony','_parent','beltAlloc')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/edp/tools/delcutoffcases.jsp b/build/WebContent/WEB-INF/app/edp/tools/delcutoffcases.jsp
index 92056d9..6fa68ac 100644
--- a/build/WebContent/WEB-INF/app/edp/tools/delcutoffcases.jsp
+++ b/build/WebContent/WEB-INF/app/edp/tools/delcutoffcases.jsp
@@ -52,7 +52,7 @@
 				</c:forEach>	
 			</form:select>		    
 			</div>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('delcaselist','_parent','caseGrid')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('delcaselist','_parent','caseGrid')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/edp/tools/edpprocesspanel.jsp b/build/WebContent/WEB-INF/app/edp/tools/edpprocesspanel.jsp
index b5ec1cb..382fbf2 100644
--- a/build/WebContent/WEB-INF/app/edp/tools/edpprocesspanel.jsp
+++ b/build/WebContent/WEB-INF/app/edp/tools/edpprocesspanel.jsp
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/cutlist.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Cut-Off Pending</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('cutoffpending','_parent','cutoffpending')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('cutoffpending','_parent','cutoffpending')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/general/sms.jsp b/build/WebContent/WEB-INF/app/general/sms.jsp
index 4dd23df..58a103a 100644
--- a/build/WebContent/WEB-INF/app/general/sms.jsp
+++ b/build/WebContent/WEB-INF/app/general/sms.jsp
@@ -50,10 +50,10 @@
 		    <img class="matrix-title-icon" src="/matrix/images/sms.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">SMS</span>
 		    <c:if test="${qid==40}">
-				<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('sms','_parent','sms')"/>
+				<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('sms','_parent','sms')"/>
 			</c:if>
 		    <c:if test="${qid==124}">
-				<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('sms','_parent','sms')"/>
+				<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('sms','_parent','sms')"/>
 			</c:if>
 		</div>	
 	<!--  -->
diff --git a/build/WebContent/WEB-INF/app/mis/wfh.jsp b/build/WebContent/WEB-INF/app/mis/wfh.jsp
index ca39b76..6c3a045 100644
--- a/build/WebContent/WEB-INF/app/mis/wfh.jsp
+++ b/build/WebContent/WEB-INF/app/mis/wfh.jsp
@@ -17,7 +17,7 @@
 
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <link href="/matrix/css/bootstrap-5.3.8.min.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/matrix-v2.css?v=6" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/matrix-shell-v2.css?v=7" rel="stylesheet" type="text/css" />
diff --git a/build/WebContent/WEB-INF/app/operation/bankreports/reports.jsp b/build/WebContent/WEB-INF/app/operation/bankreports/reports.jsp
index 1fb83c5..545a052 100644
--- a/build/WebContent/WEB-INF/app/operation/bankreports/reports.jsp
+++ b/build/WebContent/WEB-INF/app/operation/bankreports/reports.jsp
@@ -53,7 +53,7 @@
 				</c:forEach>	
 			</form:select>		    
 			</div>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('listsolved','_parent','repsettings')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('listsolved','_parent','repsettings')"/>
 		</div>	
 	<!--  -->
 	<div id="TablePanel" class="tableContainer">
diff --git a/build/WebContent/WEB-INF/app/operation/documents/searchreports.jsp b/build/WebContent/WEB-INF/app/operation/documents/searchreports.jsp
index 28056de..e400abd 100644
--- a/build/WebContent/WEB-INF/app/operation/documents/searchreports.jsp
+++ b/build/WebContent/WEB-INF/app/operation/documents/searchreports.jsp
@@ -49,7 +49,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/report.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Bank Reports</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('bankdoc','_parent','bdoc')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('bankdoc','_parent','bdoc')"/>
 		</div>	
 	<!--  -->
 <c:if test="${cid eq 0}">	
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/bksoprreporting.jsp b/build/WebContent/WEB-INF/app/operation/reporting/bksoprreporting.jsp
index 1a085e6..7cdd7ac 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/bksoprreporting.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/bksoprreporting.jsp
@@ -16,7 +16,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -47,7 +47,7 @@
 		<div class="title matrix-page-heading">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Reporting</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterreporting','_parent','oprreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterreporting','_parent','oprreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/finaldone.jsp b/build/WebContent/WEB-INF/app/operation/reporting/finaldone.jsp
index 3c06360..b3becb9 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/finaldone.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/finaldone.jsp
@@ -14,7 +14,7 @@
 <script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${fdDetails.getUuid()}','fd');};</script>
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/negupdrequests.jsp b/build/WebContent/WEB-INF/app/operation/reporting/negupdrequests.jsp
index 5c91575..73a6adc 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/negupdrequests.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/negupdrequests.jsp
@@ -16,7 +16,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Reporting</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filternegupdreq','_parent','negUpdreq')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filternegupdreq','_parent','negUpdreq')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/offreport.jsp b/build/WebContent/WEB-INF/app/operation/reporting/offreport.jsp
index 7e91971..6832842 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/offreport.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/offreport.jsp
@@ -22,7 +22,6 @@
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${offDetails.getUuid()}','o');};</script>
 <script src="/matrix/js/appjs/negreason.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/autorem.js?ver=4" type="text/javascript"></script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/file.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
@@ -61,7 +60,7 @@
 		    <%
 			}
 			%>	
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('O')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('O')">Show Editors</div>
 			<c:if test="${offDetails.requiredphoto gt 0 }">
 				<div id="crtshowphoto" class="linkbutton" style="float:right" onclick="tagDocs('O')">Show Photos</div>
 				<div id="crtshowloc" class="linkbutton" style="float:right" onclick="getGpsLoc('O')">Show Location</div>
@@ -220,7 +219,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -804,7 +803,7 @@
 		<div id="divOther" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s6">
+				<td class="office-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Father name
@@ -890,7 +889,7 @@
 		<div id="divVerifier" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s6">
+				<td class="office-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Verifier's Comment (<span id="verremarksCchars" style="font-weight:bold;color:blue"> 0 </span>Characters)
@@ -932,7 +931,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -969,7 +968,7 @@
 							Non Contactable Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:300px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:300px;"> 
 							<form:select path="noncontactablereason" multiple="false" style="width:318px" class="input-required">
 								<option value="-1" selected>NA</option>
 							
@@ -1076,7 +1075,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" onchange="validatenegreason()" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" onchange="validatenegreason()" style="width:470px;"> 
 							<form:select path="negreason" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${offnegres}" var="nres">
@@ -1127,7 +1126,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -1287,4 +1286,4 @@ if(session.getAttribute("userrole")==null)
 </c:if>  
 <!--   -->
 <div id='expandPanel' class='expandmask' style='display:none' ></div>
-</html>
\ No newline at end of file
+</html>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/offreport_10052025.jsp b/build/WebContent/WEB-INF/app/operation/reporting/offreport_10052025.jsp
index 7013044..6af3e26 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/offreport_10052025.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/offreport_10052025.jsp
@@ -22,7 +22,6 @@
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${offDetails.getUuid()}','o');};</script>
 <script src="/matrix/js/appjs/negreason.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/autorem.js?ver=9" type="text/javascript"></script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/file.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
@@ -61,7 +60,7 @@
 		    <%
 			}
 			%>	
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('O')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('O')">Show Editors</div>
 			<c:if test="${offDetails.requiredphoto gt 0 }">
 				<div id="crtshowphoto" class="linkbutton" style="float:right" onclick="tagDocs('O')">Show Photos</div>
 				<div id="crtshowloc" class="linkbutton" style="float:right" onclick="getGpsLoc('O')">Show Location</div>
@@ -219,7 +218,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -803,7 +802,7 @@
 		<div id="divOther" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s6">
+				<td class="office-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Father name
@@ -889,7 +888,7 @@
 		<div id="divVerifier" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s6">
+				<td class="office-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Verifier's Comment (<span id="verremarksCchars" style="font-weight:bold;color:blue"> 0 </span>Characters)
@@ -931,7 +930,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -968,7 +967,7 @@
 							Non Contactable Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:300px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:300px;"> 
 							<form:select path="noncontactablereason" multiple="false" style="width:318px" class="input-required">
 								<option value="-1" selected>NA</option>
 							
@@ -1074,7 +1073,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" onchange="validatenegreason()" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" onchange="validatenegreason()" style="width:470px;"> 
 							<form:select path="negreason" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${offnegres}" var="nres">
@@ -1125,7 +1124,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/offreport_new.jsp b/build/WebContent/WEB-INF/app/operation/reporting/offreport_new.jsp
index 46388f2..3546fc2 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/offreport_new.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/offreport_new.jsp
@@ -14,11 +14,10 @@
 <script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/common.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${offDetails.getUuid()}','o');};</script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -49,9 +48,9 @@
 		    <%
 			}
 			%>	
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('O')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('O')">Show Editors</div>
 			<c:if test="${offDetails.requiredphoto gt 0 }">
-				<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showPhotos('O',document.getElementById('mvcode').value)">Show Photos</div>
+				<div class="linkbutton report-title-action" style="float:right" onclick="showPhotos('O',document.getElementById('mvcode').value)">Show Photos</div>
 			</c:if>
 			<% 
 			if(session.getAttribute("usertype").toString().equals("mgr") || session.getAttribute("usertype").toString().equals("opr"))
@@ -205,7 +204,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -775,7 +774,7 @@
 		<div id="divOther" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s6">
+				<td class="office-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Father name
@@ -861,7 +860,7 @@
 		<div id="divVerifier" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s6">
+				<td class="office-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Verifier's Comment (<span id="verremarksCchars" style="font-weight:bold;color:blue"> 0 </span>Characters)
@@ -903,7 +902,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -988,7 +987,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:470px;"> 
 							<form:select path="negreason" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${offnegres}" var="nres">
@@ -1031,7 +1030,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/oprreporting.jsp b/build/WebContent/WEB-INF/app/operation/reporting/oprreporting.jsp
index c1cff5c..63e347d 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/oprreporting.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/oprreporting.jsp
@@ -16,7 +16,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -47,7 +47,7 @@
 		<div class="title matrix-page-heading">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Reporting</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterreporting','_parent','oprreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterreporting','_parent','oprreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/othreport.jsp b/build/WebContent/WEB-INF/app/operation/reporting/othreport.jsp
index 91a4beb..fc73a25 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/othreport.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/othreport.jsp
@@ -16,11 +16,10 @@
 <script language="javascript" src="/matrix/js/lib/ajaxfileupload.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/common.js?v=1" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${othDetails.getUuid()}','p');};</script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/file.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
@@ -45,10 +44,10 @@
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Property / Other Verification Report</span>
 		    <div id="crttagdocs" class="linkbutton" style="float:right" onclick="tagDocs('P')">Tag Docs</div>
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('P')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('P')">Show Editors</div>
 			<c:if test="${othDetails.requiredphoto gt 0 }">
-				<div id="crtusrlist" class="linkbutton" style="float:right" onclick="tagDocs('P')">Show Photos</div>
-				<div id="crtusrlist" class="linkbutton" style="float:right" onclick="getGpsLoc('P')">Show Location</div>
+				<div class="linkbutton report-title-action" style="float:right" onclick="tagDocs('P')">Show Photos</div>
+				<div class="linkbutton report-title-action" style="float:right" onclick="getGpsLoc('P')">Show Location</div>
 			</c:if>
 			<% 
 			if(session.getAttribute("userrole")!=null || session.getAttribute("usertype").toString().equals("mgr") || session.getAttribute("usertype").toString().equals("opr"))
@@ -196,7 +195,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -319,9 +318,9 @@
 							<form:textarea  path="verremarks" onblur="validate(this,'f','Remarks')" style="width:905px;height:60px" class="textbox" />
 						</div>
 					</div>
-					<div class="widget" style="" id="btn-rremakrs">
+					<div class="widget report-copy-remarks">
 						<div class="lblcontainer">
-							<input type="button" class="button" name="btndownload" style="margin-left:1px;margin-top:5px;float:right" value="Copy Residence Remarks" id="btndownload" onclick="$('#remarks').val('Residence Remarks - '+$('#verremarks').val()+'\r\n\r\n'+$('#remarks').val())" accesskey="R" />
+							<input type="button" class="button report-download-action" name="btndownload" style="margin-left:1px;margin-top:5px;float:right" value="Copy Residence Remarks" id="btncopyresiremarks" onclick="$('#remarks').val('Residence Remarks - '+$('#verremarks').val()+'\r\n\r\n'+$('#remarks').val())" accesskey="R" />
 						</div>
 					</div>
 					<div class="widget" id="widvopinion">
@@ -357,7 +356,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -431,9 +430,9 @@
 						</div>
 					</div>	
                     ${othDetails.verifiersec}
-                    <div class="widget" style="" id="btn-rremakrs">
+                    <div class="widget report-copy-remarks">
 						<div class="lblcontainer">
-							<input type="button" class="button" name="btndownload" style="margin-left:1px;margin-top:5px;float:right" value="Copy Office Remarks" id="btndownload" onclick="$('#remarks').val($('#remarks').val()+'Office Remarks - '+$('#Fieldtext_3').val())" accesskey="R" />
+							<input type="button" class="button report-download-action" name="btndownload" style="margin-left:1px;margin-top:5px;float:right" value="Copy Office Remarks" id="btncopyofficeremarks" onclick="$('#remarks').val($('#remarks').val()+'Office Remarks - '+$('#Fieldtext_3').val())" accesskey="R" />
 						</div>
 					</div>
 				</td>
@@ -477,7 +476,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:470px;"> 
 							<form:select path="negreason" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${negres}" var="nres">
@@ -520,7 +519,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -660,4 +659,4 @@ if(session.getAttribute("userrole")==null)
 </c:if>  
 <!--   -->
 <div id='expandPanel' class='expandmask' style='display:none' ></div>
-</html>
\ No newline at end of file
+</html>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/qcrreporting.jsp b/build/WebContent/WEB-INF/app/operation/reporting/qcrreporting.jsp
index 917ca51..474e14b 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/qcrreporting.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/qcrreporting.jsp
@@ -17,7 +17,7 @@
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/jquery-ui.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/jquery-ui.css" rel="stylesheet" type="text/css" />
@@ -49,14 +49,14 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Reporting</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterqcreporting','_parent','oprreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterqcreporting','_parent','oprreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
 	<table class="matrix-report-overview" border="0" style="width:100%" cellspacing="0">
 	<tr>
-	<td id="filter" class="matrix-report-card matrix-report-card--filters" valign="top" style="border:1px solid #a7abb4;width:350px">
-		<div id="FormPanel1" class="FormPanel" style="height:100%" >
+	<td class="matrix-report-card matrix-report-card--filters" valign="top" style="border:1px solid #a7abb4;width:350px">
+		<div class="FormPanel matrix-filter-panel" style="height:100%" >
 			<table align="center" class="matrix-form-controls">
 				<tr>
 					<td colspan="2"><b>Filters</b></td>
@@ -108,8 +108,8 @@
 			</table>
 		</div>
 	</td>
-	<td id="filter" class="matrix-report-card matrix-report-card--filters" valign="top" style="border:1px solid #a7abb4;width:300px">
-		<div id="FormPanel1" class="FormPanel" style="height:100%" >
+	<td class="matrix-report-card matrix-report-card--filters" valign="top" style="border:1px solid #a7abb4;width:300px">
+		<div class="FormPanel matrix-filter-panel" style="height:100%" >
 			<table align="center" class="matrix-form-controls">
 				<tr>
 					<td colspan="2"><b>Done Between</b></td>
@@ -122,8 +122,8 @@
 				<tr>
 					<td><b>Risk</b></td>
 				<td>
-					<div class="divselect" id="divportfolio" style="width:176px;"> 
-					<form:select path="fltrisk" multiple="false" id="portlist" style="width:194px" >
+					<div class="divselect" id="divrisk" style="width:176px;"> 
+					<form:select path="fltrisk" multiple="false" id="risklist" style="width:194px" >
 						<form:option value="-1" label="Select" selected="true"/>
 						<form:option value="1" label="1" />
 						<form:option value="2" label="2" />
@@ -351,19 +351,18 @@
 		});
 		InitPage();
 		
-		function fillScannerDD(){
-			var arr = ["Select"];
-			var scannerddhtml = '<select id="scannerlist" style="width:253px" onchange="filterScanningGrid(this)" ><option value="-1">Select</option>'; 
-			$("#tabbody tr").each(function(){
-				var scannername = $(this).find('td').eq(14).html();
-				if (arr.indexOf(scannername)==-1){ 
-					arr.push(scannername);
-					scannerddhtml = scannerddhtml + '<option value="'+scannername+'">'+scannername+'</option>';
-				}
-			});
-			scannerddhtml = scannerddhtml+ '</select>';
-			$("#scannerdiv").html(scannerddhtml);
-		}
+		function fillScannerDD(){
+			var arr = ["Select"];
+			var scannerList = $("#scannerlist");
+			scannerList.empty().append($("<option>", { value: "-1", text: "Select" }));
+			$("#tabbody tr").each(function(){
+				var scannername = $(this).find('td').eq(14).html();
+				if (arr.indexOf(scannername)==-1){ 
+					arr.push(scannername);
+					scannerList.append($("<option>", { value: scannername, text: scannername }));
+				}
+			});
+		}
 		function filterScanningGrid(el){
 			
 			var selectedscanner = $("#scannerlist").val();
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/qualityctrl.jsp b/build/WebContent/WEB-INF/app/operation/reporting/qualityctrl.jsp
index 13ef12d..d026e17 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/qualityctrl.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/qualityctrl.jsp
@@ -15,7 +15,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -46,7 +46,7 @@
 		<div class="title matrix-page-heading">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Scanning</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterscangrid','_parent','scanreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterscangrid','_parent','scanreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
@@ -290,75 +290,75 @@
             <td>${cases[12]}</td>
 		    <c:choose>
 	     		<c:when test="${cases[41]=='1'}">
-	     			<td id="rreport" class="" title="Locked by ${cases[43]} on ${cases[42]}">${cases[13]}</td>	
+	     			<td class="report-cell report-cell--residence" data-report-type="r" title="Locked by ${cases[43]} on ${cases[42]}">${cases[13]}</td>	
 	     		</c:when>
 	     		<c:when test="${cases[43]==''}">
-	     			<td id="rreport" class="" >${cases[13]}</td>
+	     			<td class="report-cell report-cell--residence" data-report-type="r" >${cases[13]}</td>
 	     		</c:when>
 	     		<c:otherwise>
 	     			<c:choose>
 		     			<c:when test="${cases[71]!='' }">
-		     				<td id="rreport" class="" title="Last accessed by ${cases[43]} on ${cases[42]} and complete saved by ${cases[71]} on ${cases[27]}">${cases[13]}</td>
+		     				<td class="report-cell report-cell--residence" data-report-type="r" title="Last accessed by ${cases[43]} on ${cases[42]} and complete saved by ${cases[71]} on ${cases[27]}">${cases[13]}</td>
 		     			</c:when>
 		     			<c:otherwise>
-		     				<td id="rreport" class="" title="Last accessed by ${cases[43]} on ${cases[42]} ">${cases[13]}</td>
+		     				<td class="report-cell report-cell--residence" data-report-type="r" title="Last accessed by ${cases[43]} on ${cases[42]} ">${cases[13]}</td>
 		     			</c:otherwise>
 	     			</c:choose>	     		
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[44]=='1'}">
-	     			<td id="oreport" class="" title="Locked by ${cases[46]} on ${cases[45]}">${cases[14]}</td>			
+	     			<td class="report-cell report-cell--office" data-report-type="o" title="Locked by ${cases[46]} on ${cases[45]}">${cases[14]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[46]==''}">
-	     			<td id="oreport" class="">${cases[14]}</td>
+	     			<td class="report-cell report-cell--office" data-report-type="o">${cases[14]}</td>
 	     		</c:when>	     		
 	     		<c:otherwise>
-	     			<td id="oreport" class="" title="Last accessed by ${cases[46]} on ${cases[45]}">${cases[14]}</td>
+	     			<td class="report-cell report-cell--office" data-report-type="o" title="Last accessed by ${cases[46]} on ${cases[45]}">${cases[14]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
 		    <c:choose>
 	     		<c:when test="${cases[47]=='1'}">
-	     			<td id="treport" class="" title="Locked by ${cases[49]} on ${cases[48]}">${cases[16]}</td>			
+	     			<td class="report-cell report-cell--telecalling" data-report-type="t" title="Locked by ${cases[49]} on ${cases[48]}">${cases[16]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[49]==''}">
-	     			<td id="treport" class="" >${cases[16]}</td>
+	     			<td class="report-cell report-cell--telecalling" data-report-type="t" >${cases[16]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-     				<td id="treport" class="" title="Last accessed by ${cases[49]} on ${cases[48]}">${cases[16]}</td>
+     				<td class="report-cell report-cell--telecalling" data-report-type="t" title="Last accessed by ${cases[49]} on ${cases[48]}">${cases[16]}</td>
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[50]=='1'}">
-	     			<td id="preport" class="" title="Locked by ${cases[52]} on ${cases[51]}">${cases[15]}</td>			
+	     			<td class="report-cell report-cell--property" data-report-type="p" title="Locked by ${cases[52]} on ${cases[51]}">${cases[15]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[52]==''}">
-	     			<td id="preport" class="" >${cases[15]}</td>
+	     			<td class="report-cell report-cell--property" data-report-type="p" >${cases[15]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-	     			<td id="preport" class="" title="Last accessed by ${cases[52]} on ${cases[51]}">${cases[15]}</td>
+	     			<td class="report-cell report-cell--property" data-report-type="p" title="Last accessed by ${cases[52]} on ${cases[51]}">${cases[15]}</td>
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[60]=='1'}">
-	     			<td id="rtreport" class="" title="Locked by ${cases[62]} on ${cases[61]}">${cases[19]}</td>			
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" title="Locked by ${cases[62]} on ${cases[61]}">${cases[19]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[62]==''}" >
-	     			<td id="rtreport" class="" >${cases[19]}</td>
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" >${cases[19]}</td>
 	     		</c:when>	     		
 	     		<c:otherwise>
-	     			<td id="rtreport" class="" title="Last accessed by ${cases[62]} on ${cases[61]}">${cases[19]}</td>
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" title="Last accessed by ${cases[62]} on ${cases[61]}">${cases[19]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
 		    <c:choose>
 	     		<c:when test="${cases[67]=='1'}">
-	     			<td id="fdreport" class="" title="Locked by ${cases[69]} on ${cases[68]}">${cases[66]}</td>			
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" title="Locked by ${cases[69]} on ${cases[68]}">${cases[66]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[69]==''}" >
-	     			<td id="fdreport" class="" >${cases[66]}</td>
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" >${cases[66]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-	     			<td id="fdreport" class="" title="Last accessed by ${cases[69]} on ${cases[68]}">${cases[66]}</td>
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" title="Last accessed by ${cases[69]} on ${cases[68]}">${cases[66]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
             <td>${cases[24]}</td>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/refreport.jsp b/build/WebContent/WEB-INF/app/operation/reporting/refreport.jsp
index c2a3523..5912e09 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/refreport.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/refreport.jsp
@@ -14,11 +14,10 @@
 <script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/common.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${refDetails.getUuid()}','rt');};</script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -41,7 +40,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Reference Verification Report</span>
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('RT')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('RT')">Show Editors</div>
 			<% 
 			if(session.getAttribute("usertype").toString().equals("mgr"))
 			{
@@ -102,7 +101,7 @@
 							Telecaller Name
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divcaller" style="width:160px;"> 
+						    <div class="divselect reference-select-wrap" style="width:160px;"> 
 							<form:select path="caller"  style="width:178px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${callerlist}" var="tclist">
@@ -176,7 +175,7 @@
 		<div id="divRef1det" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s2_1">
+				<td class="reference-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Name
@@ -198,7 +197,7 @@
 							Relation
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divcaller" style="width:130px;"> 
+						    <div class="divselect reference-select-wrap" style="width:130px;"> 
 							<form:select path="ref1relation"  style="width:148px">
 								<form:option value="-1" label="NA" />
 								<form:option value="Personal" label="Personal" />
@@ -229,7 +228,7 @@
 							Status
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divstatus" style="width:150px;"> 
+						    <div class="divselect reference-status-wrap" style="width:150px;"> 
 							<form:select path="ref1status" multiple="false" style="width:168px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Positive" label="Positive" />
@@ -265,7 +264,7 @@
 		<div id="divRef2det" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s2_1">
+				<td class="reference-section-cell">
 					<div class="widget">
 						<div class="lblcontainer">
 							Name
@@ -287,7 +286,7 @@
 							Relation
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divcaller" style="width:130px;"> 
+						    <div class="divselect reference-select-wrap" style="width:130px;"> 
 							<form:select path="ref2relation"  style="width:148px">
 								<form:option value="-1" label="NA" />
 								<form:option value="Personal" label="Personal" />
@@ -318,7 +317,7 @@
 							Status
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divstatus" style="width:150px;"> 
+						    <div class="divselect reference-status-wrap" style="width:150px;"> 
 							<form:select path="ref2status" multiple="false" style="width:168px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Positive" label="Positive" />
@@ -376,4 +375,4 @@
 	<script language="javascript" type="text/javascript">MatrixDialog.close(1); </script>  
 </c:if>  
 <!--   -->
-</html>
\ No newline at end of file
+</html>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/resireport.jsp b/build/WebContent/WEB-INF/app/operation/reporting/resireport.jsp
index df1f30f..b659b16 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/resireport.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/resireport.jsp
@@ -24,7 +24,6 @@
 <script type="text/javascript">window.onbeforeunload =function(){onReportClose('${resiDetails.getUuid()}','r');};</script>
 <script src="/matrix/js/appjs/negreason.js" type="text/javascript"></script>
 <script src="/matrix/js/appjs/autorem.js?ver=4" type="text/javascript"></script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/file.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css?ver=1" rel="stylesheet" type="text/css" />
@@ -60,7 +59,7 @@
 		    <%
 			}
 			%>	
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('R')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('R')">Show Editors</div>
 			<c:if test="${resiDetails.requiredphoto gt 0 }">
 				<div id="crtshowphoto" class="linkbutton" style="float:right" onclick="tagDocs('R')">Show Photos</div>
 				<div id="crtshowloc" class="linkbutton" style="float:right" onclick="getGpsLoc('R')">Show Location</div>
@@ -78,7 +77,7 @@
 			if(session.getAttribute("usertype").toString().equals("mgr"))
 			{
 			%>
-			 <div id="crtcontactno" class="linkbutton" style="float:right" onclick="handleAscan('R')"><form:checkbox path="allowascan" /></div>
+			 <div id="crtascan" class="linkbutton" style="float:right" onclick="handleAscan('R')"><form:checkbox path="allowascan" /></div>
 			<%
 			}
 			%>	
@@ -220,7 +219,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -902,7 +901,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -939,7 +938,7 @@
 							Non Contactable Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:300px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:300px;"> 
 							<form:select path="noncontactablereason" multiple="false" style="width:318px" class="input-required">
 								<option value="-1" selected>NA</option>
 							
@@ -1046,7 +1045,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:470px;"> 
 							<form:select path="negreason" onchange="validatenegreason()" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${negres}" var="nres">
@@ -1095,7 +1094,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/resireport_10052025.jsp b/build/WebContent/WEB-INF/app/operation/reporting/resireport_10052025.jsp
index ff76c89..a6b4886 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/resireport_10052025.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/resireport_10052025.jsp
@@ -23,7 +23,6 @@
 <script type="text/javascript">window.onbeforeunload =function(){onReportClose('${resiDetails.getUuid()}','r');};</script>
 <script src="/matrix/js/appjs/negreason.js" type="text/javascript"></script>
 <script src="/matrix/js/appjs/autorem.js?ver=9" type="text/javascript"></script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/file.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css?ver=1" rel="stylesheet" type="text/css" />
@@ -60,7 +59,7 @@
 		    <%
 			}
 			%>	
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('R')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('R')">Show Editors</div>
 			<c:if test="${resiDetails.requiredphoto gt 0 }">
 				<div id="crtshowphoto" class="linkbutton" style="float:right" onclick="tagDocs('R')">Show Photos</div>
 				<div id="crtshowloc" class="linkbutton" style="float:right" onclick="getGpsLoc('R')">Show Location</div>
@@ -78,7 +77,7 @@
 			if(session.getAttribute("usertype").toString().equals("mgr"))
 			{
 			%>
-			 <div id="crtcontactno" class="linkbutton" style="float:right" onclick="handleAscan('R')"><form:checkbox path="allowascan" /></div>
+			 <div id="crtascan" class="linkbutton" style="float:right" onclick="handleAscan('R')"><form:checkbox path="allowascan" /></div>
 			<%
 			}
 			%>	
@@ -219,7 +218,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -901,7 +900,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -938,7 +937,7 @@
 							Non Contactable Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:300px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:300px;"> 
 							<form:select path="noncontactablereason" multiple="false" style="width:318px" class="input-required">
 								<option value="-1" selected>NA</option>
 							
@@ -1044,7 +1043,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:470px;"> 
 							<form:select path="negreason" onchange="validatenegreason()" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${negres}" var="nres">
@@ -1093,7 +1092,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/resireport_new.jsp b/build/WebContent/WEB-INF/app/operation/reporting/resireport_new.jsp
index 603e597..531129a 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/resireport_new.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/resireport_new.jsp
@@ -14,11 +14,10 @@
 <script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/common.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${resiDetails.getUuid()}','r');};</script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -49,9 +48,9 @@
 		    <%
 			}
 			%>	
-			<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('R')">Show Editors</div>
+			<div class="linkbutton report-title-action" style="float:right" onclick="showEditors('R')">Show Editors</div>
 			<c:if test="${resiDetails.requiredphoto gt 0 }">
-				<div id="crtusrlist" class="linkbutton" style="float:right" onclick="showPhotos('R',document.getElementById('mvcode').value)">Show Photos</div>
+				<div class="linkbutton report-title-action" style="float:right" onclick="showPhotos('R',document.getElementById('mvcode').value)">Show Photos</div>
 			</c:if>
 			<% 
 			if(session.getAttribute("usertype").toString().equals("mgr") || session.getAttribute("usertype").toString().equals("opr"))
@@ -197,7 +196,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -849,7 +848,7 @@
 							<font color="red">Any political links</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="political" multiple="false" style="width:85px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
@@ -934,7 +933,7 @@
 							Negative Reason
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divnegreason" style="width:470px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--negative-reason" style="width:470px;"> 
 							<form:select path="negreason" multiple="false" style="width:488px">
 								<option value="-1" selected>NA</option>
 								<c:forEach items="${negres}" var="nres">
@@ -976,7 +975,7 @@
 							<font color="red">Red alert</font>
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divpollink" style="width:65px;"> 
+						    <div class="divselect report-select-wrap report-select-wrap--alert" style="width:65px;"> 
 							<form:select path="redalert" multiple="false" onblur="validate(this,'t','');" style="width:80px">
 								<option value="-1" selected>NA</option>
 								<form:option value="Yes" label="YES" />
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/scanning.jsp b/build/WebContent/WEB-INF/app/operation/reporting/scanning.jsp
index 54dd79b..d4bbdb0 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/scanning.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/scanning.jsp
@@ -15,7 +15,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -80,7 +80,7 @@
 		<div class="title matrix-page-heading">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Scanning</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterscangrid','_parent','scanreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterscangrid','_parent','scanreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
@@ -327,75 +327,75 @@
             <td>${cases[12]}</td>
 		    <c:choose>
 	     		<c:when test="${cases[41]=='1'}">
-	     			<td id="rreport" class="" title="Locked by ${cases[43]} on ${cases[42]}">${cases[13]}</td>	
+	     			<td class="report-cell report-cell--residence" data-report-type="r" title="Locked by ${cases[43]} on ${cases[42]}">${cases[13]}</td>	
 	     		</c:when>
 	     		<c:when test="${cases[43]==''}">
-	     			<td id="rreport" class="" >${cases[13]}</td>
+	     			<td class="report-cell report-cell--residence" data-report-type="r" >${cases[13]}</td>
 	     		</c:when>
 	     		<c:otherwise>
 	     			<c:choose>
 		     			<c:when test="${cases[71]!='' }">
-		     				<td id="rreport" class="" title="Last accessed by ${cases[43]} on ${cases[42]} and complete saved by ${cases[71]} on ${cases[27]}">${cases[13]}</td>
+		     				<td class="report-cell report-cell--residence" data-report-type="r" title="Last accessed by ${cases[43]} on ${cases[42]} and complete saved by ${cases[71]} on ${cases[27]}">${cases[13]}</td>
 		     			</c:when>
 		     			<c:otherwise>
-		     				<td id="rreport" class="" title="Last accessed by ${cases[43]} on ${cases[42]} ">${cases[13]}</td>
+		     				<td class="report-cell report-cell--residence" data-report-type="r" title="Last accessed by ${cases[43]} on ${cases[42]} ">${cases[13]}</td>
 		     			</c:otherwise>
 	     			</c:choose>	     		
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[44]=='1'}">
-	     			<td id="oreport" class="" title="Locked by ${cases[46]} on ${cases[45]}">${cases[14]}</td>			
+	     			<td class="report-cell report-cell--office" data-report-type="o" title="Locked by ${cases[46]} on ${cases[45]}">${cases[14]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[46]==''}">
-	     			<td id="oreport" class="">${cases[14]}</td>
+	     			<td class="report-cell report-cell--office" data-report-type="o">${cases[14]}</td>
 	     		</c:when>	     		
 	     		<c:otherwise>
-	     			<td id="oreport" class="" title="Last accessed by ${cases[46]} on ${cases[45]}">${cases[14]}</td>
+	     			<td class="report-cell report-cell--office" data-report-type="o" title="Last accessed by ${cases[46]} on ${cases[45]}">${cases[14]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
 		    <c:choose>
 	     		<c:when test="${cases[47]=='1'}">
-	     			<td id="treport" class="" title="Locked by ${cases[49]} on ${cases[48]}">${cases[16]}</td>			
+	     			<td class="report-cell report-cell--telecalling" data-report-type="t" title="Locked by ${cases[49]} on ${cases[48]}">${cases[16]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[49]==''}">
-	     			<td id="treport" class="" >${cases[16]}</td>
+	     			<td class="report-cell report-cell--telecalling" data-report-type="t" >${cases[16]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-     				<td id="treport" class="" title="Last accessed by ${cases[49]} on ${cases[48]}">${cases[16]}</td>
+     				<td class="report-cell report-cell--telecalling" data-report-type="t" title="Last accessed by ${cases[49]} on ${cases[48]}">${cases[16]}</td>
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[50]=='1'}">
-	     			<td id="preport" class="" title="Locked by ${cases[52]} on ${cases[51]}">${cases[15]}</td>			
+	     			<td class="report-cell report-cell--property" data-report-type="p" title="Locked by ${cases[52]} on ${cases[51]}">${cases[15]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[52]==''}">
-	     			<td id="preport" class="" >${cases[15]}</td>
+	     			<td class="report-cell report-cell--property" data-report-type="p" >${cases[15]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-	     			<td id="preport" class="" title="Last accessed by ${cases[52]} on ${cases[51]}">${cases[15]}</td>
+	     			<td class="report-cell report-cell--property" data-report-type="p" title="Last accessed by ${cases[52]} on ${cases[51]}">${cases[15]}</td>
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[60]=='1'}">
-	     			<td id="rtreport" class="" title="Locked by ${cases[62]} on ${cases[61]}">${cases[19]}</td>			
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" title="Locked by ${cases[62]} on ${cases[61]}">${cases[19]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[62]==''}" >
-	     			<td id="rtreport" class="" >${cases[19]}</td>
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" >${cases[19]}</td>
 	     		</c:when>	     		
 	     		<c:otherwise>
-	     			<td id="rtreport" class="" title="Last accessed by ${cases[62]} on ${cases[61]}">${cases[19]}</td>
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" title="Last accessed by ${cases[62]} on ${cases[61]}">${cases[19]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
 		    <c:choose>
 	     		<c:when test="${cases[67]=='1'}">
-	     			<td id="fdreport" class="" title="Locked by ${cases[69]} on ${cases[68]}">${cases[66]}</td>			
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" title="Locked by ${cases[69]} on ${cases[68]}">${cases[66]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[69]==''}" >
-	     			<td id="fdreport" class="" >${cases[66]}</td>
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" >${cases[66]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-	     			<td id="fdreport" class="" title="Last accessed by ${cases[69]} on ${cases[68]}">${cases[66]}</td>
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" title="Last accessed by ${cases[69]} on ${cases[68]}">${cases[66]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
             <td>${cases[24]}</td>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/scanningqc.jsp b/build/WebContent/WEB-INF/app/operation/reporting/scanningqc.jsp
index 21dbda8..c5d07e4 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/scanningqc.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/scanningqc.jsp
@@ -15,7 +15,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -46,7 +46,7 @@
 		<div class="title matrix-page-heading">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Scanning</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterscangrid','_parent','scanreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filterscangrid','_parent','scanreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
@@ -165,75 +165,75 @@
             <td>${cases[12]}</td>
 		    <c:choose>
 	     		<c:when test="${cases[41]=='1'}">
-	     			<td id="rreport" class="" title="Locked by ${cases[43]} on ${cases[42]}">${cases[13]}</td>	
+	     			<td class="report-cell report-cell--residence" data-report-type="r" title="Locked by ${cases[43]} on ${cases[42]}">${cases[13]}</td>	
 	     		</c:when>
 	     		<c:when test="${cases[43]==''}">
-	     			<td id="rreport" class="" >${cases[13]}</td>
+	     			<td class="report-cell report-cell--residence" data-report-type="r" >${cases[13]}</td>
 	     		</c:when>
 	     		<c:otherwise>
 	     			<c:choose>
 		     			<c:when test="${cases[71]!='' }">
-		     				<td id="rreport" class="" title="Last accessed by ${cases[43]} on ${cases[42]} and complete saved by ${cases[71]} on ${cases[27]}">${cases[13]}</td>
+		     				<td class="report-cell report-cell--residence" data-report-type="r" title="Last accessed by ${cases[43]} on ${cases[42]} and complete saved by ${cases[71]} on ${cases[27]}">${cases[13]}</td>
 		     			</c:when>
 		     			<c:otherwise>
-		     				<td id="rreport" class="" title="Last accessed by ${cases[43]} on ${cases[42]} ">${cases[13]}</td>
+		     				<td class="report-cell report-cell--residence" data-report-type="r" title="Last accessed by ${cases[43]} on ${cases[42]} ">${cases[13]}</td>
 		     			</c:otherwise>
 	     			</c:choose>	     		
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[44]=='1'}">
-	     			<td id="oreport" class="" title="Locked by ${cases[46]} on ${cases[45]}">${cases[14]}</td>			
+	     			<td class="report-cell report-cell--office" data-report-type="o" title="Locked by ${cases[46]} on ${cases[45]}">${cases[14]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[46]==''}">
-	     			<td id="oreport" class="">${cases[14]}</td>
+	     			<td class="report-cell report-cell--office" data-report-type="o">${cases[14]}</td>
 	     		</c:when>	     		
 	     		<c:otherwise>
-	     			<td id="oreport" class="" title="Last accessed by ${cases[46]} on ${cases[45]}">${cases[14]}</td>
+	     			<td class="report-cell report-cell--office" data-report-type="o" title="Last accessed by ${cases[46]} on ${cases[45]}">${cases[14]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
 		    <c:choose>
 	     		<c:when test="${cases[47]=='1'}">
-	     			<td id="treport" class="" title="Locked by ${cases[49]} on ${cases[48]}">${cases[16]}</td>			
+	     			<td class="report-cell report-cell--telecalling" data-report-type="t" title="Locked by ${cases[49]} on ${cases[48]}">${cases[16]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[49]==''}">
-	     			<td id="treport" class="" >${cases[16]}</td>
+	     			<td class="report-cell report-cell--telecalling" data-report-type="t" >${cases[16]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-     				<td id="treport" class="" title="Last accessed by ${cases[49]} on ${cases[48]}">${cases[16]}</td>
+     				<td class="report-cell report-cell--telecalling" data-report-type="t" title="Last accessed by ${cases[49]} on ${cases[48]}">${cases[16]}</td>
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[50]=='1'}">
-	     			<td id="preport" class="" title="Locked by ${cases[52]} on ${cases[51]}">${cases[15]}</td>			
+	     			<td class="report-cell report-cell--property" data-report-type="p" title="Locked by ${cases[52]} on ${cases[51]}">${cases[15]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[52]==''}">
-	     			<td id="preport" class="" >${cases[15]}</td>
+	     			<td class="report-cell report-cell--property" data-report-type="p" >${cases[15]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-	     			<td id="preport" class="" title="Last accessed by ${cases[52]} on ${cases[51]}">${cases[15]}</td>
+	     			<td class="report-cell report-cell--property" data-report-type="p" title="Last accessed by ${cases[52]} on ${cases[51]}">${cases[15]}</td>
 	     		</c:otherwise>
 	     	</c:choose>
 		    <c:choose>
 	     		<c:when test="${cases[60]=='1'}">
-	     			<td id="rtreport" class="" title="Locked by ${cases[62]} on ${cases[61]}">${cases[19]}</td>			
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" title="Locked by ${cases[62]} on ${cases[61]}">${cases[19]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[62]==''}" >
-	     			<td id="rtreport" class="" >${cases[19]}</td>
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" >${cases[19]}</td>
 	     		</c:when>	     		
 	     		<c:otherwise>
-	     			<td id="rtreport" class="" title="Last accessed by ${cases[62]} on ${cases[61]}">${cases[19]}</td>
+	     			<td class="report-cell report-cell--reference" data-report-type="rt" title="Last accessed by ${cases[62]} on ${cases[61]}">${cases[19]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
 		    <c:choose>
 	     		<c:when test="${cases[67]=='1'}">
-	     			<td id="fdreport" class="" title="Locked by ${cases[69]} on ${cases[68]}">${cases[66]}</td>			
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" title="Locked by ${cases[69]} on ${cases[68]}">${cases[66]}</td>			
 	     		</c:when>
 	     		<c:when test="${cases[69]==''}" >
-	     			<td id="fdreport" class="" >${cases[66]}</td>
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" >${cases[66]}</td>
 	     		</c:when>
 	     		<c:otherwise>
-	     			<td id="fdreport" class="" title="Last accessed by ${cases[69]} on ${cases[68]}">${cases[66]}</td>
+	     			<td class="report-cell report-cell--final-done" data-report-type="fd" title="Last accessed by ${cases[69]} on ${cases[68]}">${cases[66]}</td>
 	     		</c:otherwise>
 	     	</c:choose>            
             <td>${cases[24]}</td>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/telereport.jsp b/build/WebContent/WEB-INF/app/operation/reporting/telereport.jsp
index b6ca079..285be31 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/telereport.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/telereport.jsp
@@ -14,10 +14,9 @@
 <script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -46,7 +45,7 @@
 		<div id="divCase" class="FormPanel">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s1">
+				<td class="tele-report-section-cell">
 				<div class="widget">
 						<div class="lblcontainer">
 							Application No.&nbsp;&nbsp;&nbsp;
@@ -113,7 +112,7 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section2)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
 				<td id="s2">
@@ -235,7 +234,7 @@
 							Final Status
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="vidfinalstatus" style="width:85px;"> 
+						    <div class="divselect tele-final-status" style="width:85px;"> 
 							<select  name="contperson"   style="width:105px">
 								<option value="-1" selected>NA</option>
 								<option value="yes" selected>Yes</option>
@@ -377,10 +376,10 @@
 		</div>	
 	<!--  -->
 	<!-- Form (Section3)  -->
-		<div id="divGeneral" class="FormPanel">
+		<div class="FormPanel report-general-section">
 			<table align="center" class="matrix-form-controls" width="99%">
 			<tr>
-				<td id="s1">
+				<td class="tele-report-section-cell">
 				<div class="widget">
 						<div class="lblcontainer">
 							Contact No
@@ -614,7 +613,7 @@
 							Final Status
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="vidfinalstatus" style="width:160px;"> 
+						    <div class="divselect tele-final-status" style="width:160px;"> 
 							<select  name="contperson"   style="width:180px">
 								<option value="-1" selected>NA</option>
 								<option value="satisfactory" selected>Satisfactory</option>
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/telreporting.jsp b/build/WebContent/WEB-INF/app/operation/reporting/telreporting.jsp
index cb2e8d1..50f077a 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/telreporting.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/telreporting.jsp
@@ -16,7 +16,7 @@
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/flexigrid.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/jquery.tablesorter.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Telecalling</span>
-		    <img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filtertelgrid','_parent','telreporting')"/>
+		    <img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('filtertelgrid','_parent','telreporting')"/>
 		</div>	
 	<!--  -->
 	<!-- Form (Filter, Sorting and Statatics Section)  -->
diff --git a/build/WebContent/WEB-INF/app/operation/reporting/tvrreport.jsp b/build/WebContent/WEB-INF/app/operation/reporting/tvrreport.jsp
index a7d7eaa..3064a8a 100644
--- a/build/WebContent/WEB-INF/app/operation/reporting/tvrreport.jsp
+++ b/build/WebContent/WEB-INF/app/operation/reporting/tvrreport.jsp
@@ -14,11 +14,10 @@
 <script language="javascript" src="/matrix/js/lib/jsfuncs.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/msgdialog.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/ui/select.js" type="text/javascript"></script>
-<script language="javascript" src="/matrix/js/appjs/reporting.js" type="text/javascript"></script>
+<script language="javascript" src="/matrix/js/appjs/reporting.js?v=11" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/appjs/common.js" type="text/javascript"></script>
 <script language="javascript" src="/matrix/js/validator.js" type="text/javascript"></script>
 <script language="javascript" type="text/javascript">window.onbeforeunload =function(){onReportClose('${tvrDetails.getUuid()}','t');};</script>
-<link href="/matrix/css/menu.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/button.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/div.css" rel="stylesheet" type="text/css" />
 <link href="/matrix/css/textbox.css" rel="stylesheet" type="text/css" />
@@ -41,7 +40,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/commondet.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Telephonic Verification Report</span>
-		    <div id="crtusrlist" class="linkbutton" style="float:right" onclick="showEditors('T')">Show Editors</div>
+		    <div class="linkbutton report-title-action" style="float:right" onclick="showEditors('T')">Show Editors</div>
 			<% 
 			if(session.getAttribute("usertype").toString().equals("mgr"))
 			{
@@ -1098,4 +1097,4 @@ if(session.getAttribute("userrole")==null)
 	<script language="javascript" type="text/javascript">MatrixDialog.close(1); </script>  
 </c:if>  
 <!--   -->
-</html>
\ No newline at end of file
+</html>
diff --git a/build/WebContent/WEB-INF/app/operation/tools/belttran.jsp b/build/WebContent/WEB-INF/app/operation/tools/belttran.jsp
index 78759b7..c8602e5 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/belttran.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/belttran.jsp
@@ -46,7 +46,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/transfer.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Belt Transfer<span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('belttransfer','_parent','belttransfer')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('belttransfer','_parent','belttransfer')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -60,7 +60,7 @@
 							Verifier
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:65px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:65px;"> 
 							<form:select path="verifier" multiple="false" id="verlist" style="width:83px" >
 								<option value="-1" selected>---</option>
 								<c:forEach items="${verlist}" var="ver">
@@ -95,7 +95,7 @@
 							Shift To
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:50px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:50px;"> 
 							<form:select path="toverifier" multiple="false" id="tverlist" style="width:68px" >
 								<option value="-1" selected>---</option>
 								<c:forEach items="${verlist}" var="ver">
@@ -147,7 +147,7 @@
 						${record.verifiername}						
 					</td>
 					<td style="font-size:9pt;border-bottom:1px dotted #C3C3C3;padding-bottom:5px;padding-top:5px;font-weight:normal;">
-					    <div class="divselect" id="divver" style="width:50px;"> 
+					    <div class="divselect matrix-select-wrap" style="width:50px;"> 
 					    <form:hidden path="allocbelts[${mystatus.index}].pverifier" id="pverifier${mystatus.count}" value="${status.value}"/>
 						<form:select path="allocbelts[${mystatus.index}].verifier"  multiple="false" id="verifier${mystatus.count}" style="width:68px" >
 							<option value="-1" selected>---</option>
diff --git a/build/WebContent/WEB-INF/app/operation/tools/casetran.jsp b/build/WebContent/WEB-INF/app/operation/tools/casetran.jsp
index d9f48d0..501a097 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/casetran.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/casetran.jsp
@@ -48,7 +48,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/transfer.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Case Transfer<span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('casetransfer','_parent','casetransfer')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('casetransfer','_parent','casetransfer')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -63,7 +63,7 @@
 						</div>
 						<br />
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:50px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:50px;"> 
 							<form:select path="verifier" multiple="false" id="verlist" style="width:68px" >
 								<option value="-1" selected>---</option>
 								<c:forEach items="${verlist}" var="ver">
@@ -79,7 +79,7 @@
 						</div>
 						<br />
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:82px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:82px;"> 
 							<form:select path="older" multiple="false" id="daylist" style="width:100px" >
 								<form:option label="---" value="-1" />
 								<form:option label="1 Day" value="1" />
@@ -143,7 +143,7 @@
 							Shift To
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:50px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:50px;"> 
 							<form:select path="toverifier" multiple="false" id="tverlist" style="width:68px" >
 								<option value="-1" selected>---</option>
 								<c:forEach items="${verlist}" var="ver">
@@ -240,7 +240,7 @@
 						${record.batch}
 					</td>
 					<td style="font-size:9pt;border-bottom:1px dotted #C3C3C3;padding-bottom:5px;padding-top:5px;font-weight:normal;">
-					    <div class="divselect" id="divver" style="width:50px;"> 
+					    <div class="divselect matrix-select-wrap" style="width:50px;"> 
 					    <form:hidden path="alloccases[${mystatus.index}].pverifier" id="pverifier${mystatus.count}" value="${status.value}"/>
 						<form:select path="alloccases[${mystatus.index}].verifier"  multiple="false" id="verifier${mystatus.count}" style="width:68px" >
 							<option value="-1" selected>---</option>
diff --git a/build/WebContent/WEB-INF/app/operation/tools/colony.jsp b/build/WebContent/WEB-INF/app/operation/tools/colony.jsp
index 00d7eaa..55b762a 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/colony.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/colony.jsp
@@ -49,7 +49,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/city.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Colony List</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('listcolony','_parent','formcolony')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('listcolony','_parent','formcolony')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -57,8 +57,8 @@
 			<tr>
 				<td>
 					<div id="crtcoldiv" class="linkbutton" style="float:left" onclick="showBeltInfo(0)"><img src="/matrix/images/route.png" align="absmiddle" /> New Belt</div>
-					<div id="crtbeltdiv" class="linkbutton" style="float:left" onclick="showColonyInfo(0)"><img src="/matrix/images/city.png" align="absmiddle" /> New Colony</div>
-					<div id="crtbeltdiv" class="linkbutton" style="float:left" onclick="ChangeMode()"><img src="/matrix/images/col_trans.png" align="absmiddle" /> Transfer Colony</div>
+					<div class="linkbutton colony-action" style="float:left" onclick="showColonyInfo(0)"><img src="/matrix/images/city.png" align="absmiddle" /> New Colony</div>
+					<div class="linkbutton colony-action" style="float:left" onclick="ChangeMode()"><img src="/matrix/images/col_trans.png" align="absmiddle" /> Transfer Colony</div>
 					<br />
 				</td>
 			</tr>
@@ -125,7 +125,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="widget" id="tobeltdiv">
+					<div class="widget colony-transfer-status">
 						<div class="lblcontainer">
 							To
 						</div>
diff --git a/build/WebContent/WEB-INF/app/operation/tools/deletecase.jsp b/build/WebContent/WEB-INF/app/operation/tools/deletecase.jsp
index 43adcae..ad380f2 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/deletecase.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/deletecase.jsp
@@ -45,7 +45,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/query.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Delete Case</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('deletecase1','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('deletecase1','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/emailmgr.jsp b/build/WebContent/WEB-INF/app/operation/tools/emailmgr.jsp
index dae99c0..67eae79 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/emailmgr.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/emailmgr.jsp
@@ -51,7 +51,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/emaillist.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Email ID Manager</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('manageemailids','_parent','emailmanager')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('manageemailids','_parent','emailmanager')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -64,7 +64,7 @@
 							Portfolio
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:270px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:270px;"> 
 							<form:select path="portfolio" multiple="false" style="width:288px" onchange="fetchBranch(this.value)">
 								<option value="-1" selected>---</option>
 								<c:forEach items="${portlist}" var="port">
@@ -149,10 +149,10 @@
 				<input type="button" class="button" name="btninfo" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" id="btninfo" title="Click for more information" onclick="emailidActions(${email[0]},3)" />
 				<c:choose>
 				    <c:when test="${email[14]=='TO' || email[8]=='0'}">
-				        <input type="button" class="buttondisabled" name="bt-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" id="btntransfer" pid="${email[6]}" bid="${email[7]}" title="You need to change recipient type to CC to transfer this email id" onclick="return false" />
+				        <input type="button" class="buttondisabled email-transfer-action" name="bt-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" pid="${email[6]}" bid="${email[7]}" title="You need to change recipient type to CC to transfer this email id" onclick="return false" />
 				    </c:when>    
 				    <c:otherwise>
-				        <input type="button" class="button" name="bt-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" id="btntransfer" cid="${email[0]}" pid="${email[6]}" bid="${email[7]}" title="Transfer mail id" onclick="emailidActions(this,4)" />
+				        <input type="button" class="button email-transfer-action" name="bt-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" cid="${email[0]}" pid="${email[6]}" bid="${email[7]}" title="Transfer mail id" onclick="emailidActions(this,4)" />
 				    </c:otherwise>
 				</c:choose>
 				<c:choose>
@@ -162,10 +162,10 @@
 				    <c:otherwise>
 				    	<c:choose>
 				    		<c:when test="${email[14]=='TO'}">
-				        		<input type="button" class="buttondisabled" name="bd-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" id="btndelete" cid="${email[0]}" pid="${email[6]}" bid="${email[7]}" title="You need to change recipient type to CC to remove this email id" onclick="return false" />
+				        	<input type="button" class="buttondisabled email-delete-action" name="bd-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" cid="${email[0]}" pid="${email[6]}" bid="${email[7]}" title="You need to change recipient type to CC to remove this email id" onclick="return false" />
 				    		</c:when>    
 				    		<c:otherwise>
-				        		<input type="button" class="button" name="bd-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" id="btndelete" cid="${email[0]}" pid="${email[6]}" bid="${email[7]}" title="Remove this email id from this branch only" onclick="emailidActions(this,5)" />
+				        	<input type="button" class="button email-delete-action" name="bd-${email[0]}" value="" style="margin-top:3px;text-indent:0px;padding:3px 9px;" cid="${email[0]}" pid="${email[6]}" bid="${email[7]}" title="Remove this email id from this branch only" onclick="emailidActions(this,5)" />
 				    		</c:otherwise>
 						</c:choose>
 				    </c:otherwise>
diff --git a/build/WebContent/WEB-INF/app/operation/tools/fieldallocation.jsp b/build/WebContent/WEB-INF/app/operation/tools/fieldallocation.jsp
index 4a7e711..79e67b6 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/fieldallocation.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/fieldallocation.jsp
@@ -50,7 +50,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/sms.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Colony Allocation</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('colony','_parent','beltAlloc')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('colony','_parent','beltAlloc')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/fraudbulletin.jsp b/build/WebContent/WEB-INF/app/operation/tools/fraudbulletin.jsp
index 169ab32..310800e 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/fraudbulletin.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/fraudbulletin.jsp
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/transfer.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Fraud Bulletin<span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('getpendingfraudbulletin','_parent','getpendingfraudbulletin')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('getpendingfraudbulletin','_parent','getpendingfraudbulletin')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/gsms.jsp b/build/WebContent/WEB-INF/app/operation/tools/gsms.jsp
index 14dca41..f1e5ebc 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/gsms.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/gsms.jsp
@@ -44,7 +44,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/groupsms.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Group SMS<span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('groupsms','_parent','gsms')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('groupsms','_parent','gsms')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/listholiday.jsp b/build/WebContent/WEB-INF/app/operation/tools/listholiday.jsp
index 41d444e..11392c7 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/listholiday.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/listholiday.jsp
@@ -48,7 +48,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/city.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Holiday List</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('listholiday','_parent','formholiday')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('listholiday','_parent','formholiday')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/listverifiers.jsp b/build/WebContent/WEB-INF/app/operation/tools/listverifiers.jsp
index 47370b6..a160d7d 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/listverifiers.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/listverifiers.jsp
@@ -49,14 +49,14 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/verifier_list.gif" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Verifier List</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('verifiers','_parent','verifier')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('verifiers','_parent','verifier')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
 		<table align="center" id="filtertab" style="width:98%;border:1px solid #a7abb4" cellspacing="0">
 			<tr>
 				<td>
-					<div id="crtverdiv" class="linkbutton" style="float:left" onclick="showVerifierInfo(0)"><img src="/matrix/images/add_verifier.png" align="absmiddle" />New Verifier</div>
+					<div class="linkbutton verifier-action" style="float:left" onclick="showVerifierInfo(0)"><img src="/matrix/images/add_verifier.png" align="absmiddle" />New Verifier</div>
 					<br />
 				</td>
 			</tr>
@@ -122,10 +122,10 @@
         	<td>
         	<input type="hidden" name="row${status.count}verid" id="row${status.count}verid" value="${verlist[0]}" />
         	${status.count}</td>
-            <td id="code"><div class="linkbutton" style="float:left;font-size:inherit;font-weight:normal" onclick="showVerifierInfo(${verlist[0]})" title="Edit details">${verlist[1]}</div></td>
-            <td id="name"><div id="crtverdiv" class="linkbutton" style="float:left;font-size:inherit;font-weight:normal" onclick="showVerifierInfo(${verlist[0]})" title="Edit details">${verlist[2]}</div></td>
+            <td class="verifier-code"><div class="linkbutton verifier-action" style="float:left;font-size:inherit;font-weight:normal" onclick="showVerifierInfo(${verlist[0]})" title="Edit details">${verlist[1]}</div></td>
+            <td class="verifier-name"><div class="linkbutton verifier-action" style="float:left;font-size:inherit;font-weight:normal" onclick="showVerifierInfo(${verlist[0]})" title="Edit details">${verlist[2]}</div></td>
             <td>${verlist[3]}</td>
-            <td id="mobno">${verlist[4]}</td>
+            <td class="verifier-mobile">${verlist[4]}</td>
             <td align="center">${verlist[5]}</td>
         </tr>
         </c:forEach>
diff --git a/build/WebContent/WEB-INF/app/operation/tools/mdrsquery.jsp b/build/WebContent/WEB-INF/app/operation/tools/mdrsquery.jsp
index 1a3a19e..803d700 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/mdrsquery.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/mdrsquery.jsp
@@ -50,7 +50,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/query.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Matrix Query <span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('matrixquery','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('matrixquery','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -194,7 +194,7 @@
 							Product &nbsp;
 						</div>
 						<div class="inputcontainer">
-							<input readonly="readonly" id="product" id="product" style="width:120px" />
+							<input readonly="readonly" id="product" style="width:120px" />
 						</div>
 					</div>
 					<div class="widget" style="display:none">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/mncasepending.jsp b/build/WebContent/WEB-INF/app/operation/tools/mncasepending.jsp
index 5478373..961ee77 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/mncasepending.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/mncasepending.jsp
@@ -45,7 +45,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/undo_done.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Mnimble Case Pending</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('mnimblecasepinit','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('mnimblecasepinit','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/mnphotosearch.jsp b/build/WebContent/WEB-INF/app/operation/tools/mnphotosearch.jsp
index 040573d..53ce151 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/mnphotosearch.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/mnphotosearch.jsp
@@ -46,7 +46,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/camera.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Mnimble Photo Search</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('mnimblecasepinit','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('mnimblecasepinit','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/oclcases.jsp b/build/WebContent/WEB-INF/app/operation/tools/oclcases.jsp
index a930809..98cc451 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/oclcases.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/oclcases.jsp
@@ -47,7 +47,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/transfer.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">OCL Cases<span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('oclcases','_parent','oclcases')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('oclcases','_parent','oclcases')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/operatorallocation.jsp b/build/WebContent/WEB-INF/app/operation/tools/operatorallocation.jsp
index 54318ce..d9fbdd7 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/operatorallocation.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/operatorallocation.jsp
@@ -49,7 +49,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/sms.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Operator Allocation</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('optrallocation','_parent','optrAlloc')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('optrallocation','_parent','optrAlloc')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/oprcasetool.jsp b/build/WebContent/WEB-INF/app/operation/tools/oprcasetool.jsp
index c77ad80..35f7832 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/oprcasetool.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/oprcasetool.jsp
@@ -46,7 +46,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/transfer.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Case Pending (Operator)<span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('optrcasepen','_parent','oprcasetool')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('optrcasepen','_parent','oprcasetool')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -59,7 +59,7 @@
 							Verifier
 						</div>
 						<div class="inputcontainer">
-						    <div class="divselect" id="divver" style="width:60px;"> 
+						    <div class="divselect matrix-select-wrap" style="width:60px;"> 
 							<select id="verlist" style="width:78px" >
 								<option value="-1" selected>---</option>
 								<c:forEach items="${verlist}" var="ver">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/query.jsp b/build/WebContent/WEB-INF/app/operation/tools/query.jsp
index 65e6b4e..357d5ae 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/query.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/query.jsp
@@ -48,7 +48,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/query.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Matrix Query <span id='recfound'></span></span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('matrixquery','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('matrixquery','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
@@ -209,7 +209,7 @@
 							Product &nbsp;
 						</div>
 						<div class="inputcontainer">
-							<input readonly="readonly" id="product" id="product" style="width:120px" />
+							<input readonly="readonly" id="product" style="width:120px" />
 						</div>
 					</div>
 					<div class="widget">
diff --git a/build/WebContent/WEB-INF/app/operation/tools/unlock.jsp b/build/WebContent/WEB-INF/app/operation/tools/unlock.jsp
index 4cdd559..d9d0d77 100644
--- a/build/WebContent/WEB-INF/app/operation/tools/unlock.jsp
+++ b/build/WebContent/WEB-INF/app/operation/tools/unlock.jsp
@@ -45,7 +45,7 @@
 		<div class="title">
 		    <img class="matrix-title-icon" src="/matrix/images/query.png" align="absmiddle" />
 		    <span class="matrix-title-text" align="absmiddle">Case Unlock</span>
-			<img id="close" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('caseunlock','_parent','filterform')"/>
+			<img class="matrix-title-action" src="/matrix/images/reload.png" title="Refresh Grid" onclick="SubmitForm('caseunlock','_parent','filterform')"/>
 		</div>	
 	<!--  -->
 	<div id="FormPanel" class="FormPanel">
diff --git a/build/WebContent/css/button.css b/build/WebContent/css/button.css
index e097dc7..33a2ab7 100644
--- a/build/WebContent/css/button.css
+++ b/build/WebContent/css/button.css
@@ -14,7 +14,8 @@ background:url('/matrix/images/upload.png') 4px center no-repeat;
 {
 background:url('/matrix/images/attachpin.png') 4px center no-repeat;	
 }
-.button#btndownload
+.button#btndownload,
+.button.report-download-action
 {
 background:url('/matrix/images/download.png') 4px center no-repeat;	
 }
diff --git a/build/WebContent/css/div.css b/build/WebContent/css/div.css
index ca4a8e5..36d1014 100644
--- a/build/WebContent/css/div.css
+++ b/build/WebContent/css/div.css
@@ -67,7 +67,7 @@
 	margin-left:8px;
 	border:none;
 }
-.title #close
+.title .matrix-title-action
 {
 	margin-top:1px;
 	border:none;
diff --git a/build/WebContent/css/manage-product-v4.css b/build/WebContent/css/manage-product-v4.css
index 779852c..f56f58e 100644
--- a/build/WebContent/css/manage-product-v4.css
+++ b/build/WebContent/css/manage-product-v4.css
@@ -19,7 +19,7 @@
     min-height: 30px;
 }
 
-.matrix-manage-product #formcontainer > form > div > .title #close {
+.matrix-manage-product #formcontainer > form > div > .title .matrix-title-action {
     position: static !important;
     inset: auto !important;
     flex: 0 0 28px;
diff --git a/build/WebContent/css/matrix-shell-v2.css b/build/WebContent/css/matrix-shell-v2.css
index 9353c74..196e88d 100644
--- a/build/WebContent/css/matrix-shell-v2.css
+++ b/build/WebContent/css/matrix-shell-v2.css
@@ -322,7 +322,7 @@
     font-weight: 400 !important;
 }
 
-.matrix-shell #PageFrame > .title > img#close {
+.matrix-shell #PageFrame > .title > img.matrix-title-action {
     display: none !important;
 }
 
diff --git a/build/WebContent/css/role-batch-v2.css b/build/WebContent/css/role-batch-v2.css
index d353ae6..fde2da3 100644
--- a/build/WebContent/css/role-batch-v2.css
+++ b/build/WebContent/css/role-batch-v2.css
@@ -27,7 +27,7 @@
     white-space: nowrap;
 }
 
-.matrix-batch-v2 #PageFrame > .title:first-child img#close {
+.matrix-batch-v2 #PageFrame > .title:first-child img.matrix-title-action {
     order: 3;
     margin-left: auto;
     cursor: pointer;
diff --git a/build/WebContent/js/appjs/reporting-new.js b/build/WebContent/js/appjs/reporting-new.js
index 0d337d0..aa4a595 100644
--- a/build/WebContent/js/appjs/reporting-new.js
+++ b/build/WebContent/js/appjs/reporting-new.js
@@ -23,7 +23,7 @@ function InitPage()
 	$("#casetable").tablesorter({debug: true});
 	if($("#page").val()=="scanreporting" || $("#page").val()=="qcscanreporting")
 		{
-		  $('#tabbody tr [id*=report]').click(function (event) {
+		  $('#tabbody tr [data-report-type], #tabbody tr [id*=report]').click(function (event) {
 			  	var parentRow=this.parentNode;
 			  	currow=$(parentRow).index();
 			  	curcol=$(this).index();
@@ -70,7 +70,7 @@ function BypassValidation(reptype)
 {
 		if(reptype=='O' || reptype=='R')
 		{
-			$("#divGeneral").hide();
+			$(".report-general-section").hide();
 			$("#divObservation").hide();
 			$("#divNeighbour").hide();
 			$("#divOther").hide();
@@ -145,8 +145,11 @@ function GetRowData(SelectedRow)
 	tempStr='';
 	if($('#page').val()=="scanreporting")
 		{
-			suffix=$(SelectedRow).find('td').eq(curcol).attr('id').replace('report','');
-			tempStr=$(SelectedRow).find('td').eq(curcol).html();
+			var selectedCell=$(SelectedRow).find('td').eq(curcol);
+			var reportType=selectedCell.attr('data-report-type');
+			var legacyReportId=selectedCell.attr('id') || '';
+			suffix=reportType || legacyReportId.replace('report','');
+			tempStr=selectedCell.html();
 		}
 	else
 		{
diff --git a/build/WebContent/js/appjs/reporting.js b/build/WebContent/js/appjs/reporting.js
index 15f353a..f5ac678 100644
--- a/build/WebContent/js/appjs/reporting.js
+++ b/build/WebContent/js/appjs/reporting.js
@@ -28,7 +28,7 @@ function InitPage()
 	$("#casetable").tablesorter({debug: true});
 	if($("#page").val()=="scanreporting")
 		{
-		  $('#tabbody tr [id*=report]').click(function (event) {
+		  $('#tabbody tr [data-report-type], #tabbody tr [id*=report]').click(function (event) {
 			  	var parentRow=this.parentNode;
 			  	currow=$(parentRow).index();
 			  	curcol=$(this).index();
@@ -80,7 +80,7 @@ function BypassValidation(reptype)
 {
 		if(reptype=='O' || reptype=='R')
 		{
-			$("#divGeneral").hide();
+			$(".report-general-section").hide();
 			$("#divObservation").hide();
 			$("#divNeighbour").hide();
 			$("#divOther").hide();
@@ -155,8 +155,11 @@ function GetRowData(SelectedRow)
 	tempStr='';
 	if($('#page').val()=="scanreporting")
 		{
-			suffix=$(SelectedRow).find('td').eq(curcol).attr('id').replace('report','');
-			tempStr=$(SelectedRow).find('td').eq(curcol).html();
+			var selectedCell=$(SelectedRow).find('td').eq(curcol);
+			var reportType=selectedCell.attr('data-report-type');
+			var legacyReportId=selectedCell.attr('id') || '';
+			suffix=reportType || legacyReportId.replace('report','');
+			tempStr=selectedCell.html();
 		}
 	else
 		{
diff --git a/src/test/java/matrix/nimble/RoleVisibleBatchMigrationTest.java b/src/test/java/matrix/nimble/RoleVisibleBatchMigrationTest.java
index c5ee3a9..dc07345 100644
--- a/src/test/java/matrix/nimble/RoleVisibleBatchMigrationTest.java
+++ b/src/test/java/matrix/nimble/RoleVisibleBatchMigrationTest.java
@@ -68,6 +68,13 @@ class RoleVisibleBatchMigrationTest {
         assertTrue(scanningPage.contains("matrix-scanning-page"));
         assertTrue(scanningPage.contains("matrix-report-overview"));
         assertTrue(scanningPage.contains("matrix-report-grid"));
+        assertTrue(scanningPage.contains("data-report-type=\"r\""));
+        assertTrue(scanningPage.contains("data-report-type=\"o\""));
+        assertTrue(scanningPage.contains("data-report-type=\"t\""));
+        assertTrue(scanningPage.contains("data-report-type=\"p\""));
+        assertTrue(reportingScript.contains("selectedCell.attr('data-report-type')"));
+        assertTrue(reportingScript.contains("reportType || legacyReportId.replace('report','')"));
+        assertTrue(reportingScript.contains("#tabbody tr [data-report-type], #tabbody tr [id*=report]"));
 
         String scanningStyles = Files.readString(Path.of("build/WebContent/css/scanning-v3.css"));
         assertTrue(scanningStyles.contains(".matrix-scanning-page .matrix-data-grid"));
@@ -768,6 +775,7 @@ class RoleVisibleBatchMigrationTest {
             for (Path page : pages.filter(path -> path.toString().endsWith(".jsp")).toList()) {
                 String content = Files.readString(page);
                 assertTrue(content.contains("matrix-theme-v2.css?v="), page.toString());
+                assertFalse(content.contains("/matrix/css/menu.css"), page.toString());
             }
         }
 
@@ -842,7 +850,7 @@ class RoleVisibleBatchMigrationTest {
         String productCss = Files.readString(Path.of("build/WebContent/css/manage-product-v4.css"));
         assertTrue(productCss.contains("#FormPanel1-3 .title #btnsave"));
         assertTrue(productCss.contains("margin: 0 0 0 auto !important"));
-        assertTrue(productCss.contains("form > div > .title #close"));
+        assertTrue(productCss.contains("form > div > .title .matrix-title-action"));
 
         String theme = Files.readString(Path.of("build/WebContent/css/matrix-theme-v2.css"));
         assertTrue(theme.contains("body .title > .matrix-title-action"));