applicant pdf report ui design

cmsWebApp/webroot/extensions/adminportal/inc/applicant_report_header.jsp

@@ -26,17 +26,34 @@
         .appli-applied{color: #7d7f82; text-align: left; font-size: 12px; margin-top: 6px;}
         
         .rank-info {display: inline-block; width: 55%; float: right;}
-        .shortlised {background:url("") no-repeat left center; text-align: center ;float: right;display: inline-block; color: #03AC66;font-size: 15px;height: 50px; line-height: 50px; border-right:1px solid #ECECEE;width: 120px;padding: 0 20px;}
+        .shortlised {background:left center no-repeat ; text-align: center ;float: right;display: inline-block; color: #03AC66;font-size: 15px;height: 50px; line-height: 50px; border-right:1px solid #ECECEE;width: 120px;padding: 0 20px;}
+        .shortlised img {width: 18px;}
         .overall-suit {text-align: center ;float: right;display: inline-block; color: #4A4A4A;font-size: 12px;height: 50px; line-height: 50px; width: 120px;padding:0 20px;}
         .overall-suit span { vertical-align:middle;}
         .overall-suit span:last-child {padding-left:3px;font-size: 40px;color: #667281; vertical-align:middle;}
-        .appli-label{font-size: 12px;text-align: left; color: #4E5258;}
-        .appli-percen{font-size: 24px; color: #667281;}
         
-        span.appli-progress-bar {display: inline-block; width: 60%;}
+        .contact-row {padding-top: 20px; }
+        
+        .contact-label img {width: 10px;}
+        .contact-row > span , .contact-row > a {margin-right:20px; font-size: 12px; display: inline-block;vertical-align: top;}
+        .orange-text {color: #F9623D;}
+        .green-text {color: #41BDB4;}
+        .contact-row > span.contact-label {font-weight: 500; font-size: 12px; margin-right:10px;}
+
+        
+        .charts-table {background: #fff;margin-top: 30px; page-break-inside: avoid;}
+        .chart-cell {width: 30%; text-align: center; padding: 25px 0;border-right:1px solid #ECECEE; vertical-align: top;}
+        .chart-info-cell{vertical-align: top;}
+        .chart-info-cell .appli-row {height: 60px; border-bottom: 1px solid #ECECEE; padding-left: 30px;line-height: 60px;}
+        .chart-info-cell .appli-row:last-child {border-bottom: none;}
+        .cell-title {text-transform: uppercase;color: #4A4A4A;font-size: 16px;letter-spacing: 1.45px;}
+        .appli-label{font-size: 12px;text-align: left; color: #4E5258;min-width: 150px; display: inline-block; vertical-align: middle;width:20% }
+        .appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 15%}
+        
+        span.appli-progress-bar {display: inline-block; width:50%;vertical-align: middle;}
    
         .progress {margin-bottom: 0; border-radius: 0;height: 24px;background: #e9ecef;box-shadow: none;}
-        .progress-bar{background: #667281;}
+        .progress-bar{background: #667281;height: 24px; }
         
         @page
         {