UI Migration Done

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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">

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>	
 	<!--  -->

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" />

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">

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}">	

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)  -->

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" />

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)  -->

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" />

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" />

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" />

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)  -->

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 class="linkbutton report-title-action" 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="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" />

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">
+	<td 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%" >
+		<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">
+	<td 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%" >
+		<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;"> 
+					<div class="divselect" id="divrisk" style="width:176px;"> 
-					<form:select path="fltrisk" multiple="false" id="portlist" style="width:194px" >
+					<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" />
@@ -353,16 +353,15 @@
 		
 		function fillScannerDD(){
 			var arr = ["Select"];
-			var scannerddhtml = '<select id="scannerlist" style="width:253px" onchange="filterScanningGrid(this)" ><option value="-1">Select</option>'; 
+			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);
-					scannerddhtml = scannerddhtml + '<option value="'+scannername+'">'+scannername+'</option>';
+					scannerList.append($("<option>", { value: scannername, text: scannername }));
 				}
 			});
-			scannerddhtml = scannerddhtml+ '</select>';
-			$("#scannerdiv").html(scannerddhtml);
 		}
 		function filterScanningGrid(el){
 			

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>

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" />

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" />

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" />

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" />

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>

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>

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>

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)  -->

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"))
 			{

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>

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>

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 class="linkbutton colony-action" 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="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>

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">

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>

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">

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">

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">

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">

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 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 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-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>

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">

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">

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">

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">

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">

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">

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">

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">

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;	
 }

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;

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;

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;
 }
 

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;

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','');
+			var selectedCell=$(SelectedRow).find('td').eq(curcol);
-			tempStr=$(SelectedRow).find('td').eq(curcol).html();
+			var reportType=selectedCell.attr('data-report-type');
+			var legacyReportId=selectedCell.attr('id') || '';
+			suffix=reportType || legacyReportId.replace('report','');
+			tempStr=selectedCell.html();
 		}
 	else
 		{

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','');
+			var selectedCell=$(SelectedRow).find('td').eq(curcol);
-			tempStr=$(SelectedRow).find('td').eq(curcol).html();
+			var reportType=selectedCell.attr('data-report-type');
+			var legacyReportId=selectedCell.attr('id') || '';
+			suffix=reportType || legacyReportId.replace('report','');
+			tempStr=selectedCell.html();
 		}
 	else
 		{

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"));