styling changes to applicant pdf

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

@@ -5,9 +5,9 @@
 <oneit:dynIncluded>
     <style type="text/css" media="print,screen" >
          body { margin: 0;   background-color: #e9ecef; font-family: "Usual-Light";}
-        div.header{background-color: #1a2531; height: 80px;  padding: 0 30px;}
+        div.header{background-color: #1a2531; height: 80px;  padding: 0 50px;}
         div.header:after{display:inline-block; line-height:80px; width:0; content:"\00A0"; overflow:hidden; vertical-align:middle}
-        div.white-header {background-color: #fff; height:170px;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.02); padding: 0 30px ;}
+        div.white-header {background-color: #fff; height:170px;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.02); padding: 0 50px ;}
         
         .chief-officer {color: #ffffff; text-align: left; font-size: 22px;  line-height: normal;
                        font-weight: 300; width:50%;display: inline-block; vertical-align: middle;                     
@@ -18,7 +18,7 @@
         
         .applicant-details {height: 80px;}
         .applicant-details:after{display:inline-block; line-height:80px; width:0; content:"\00A0"; overflow:hidden; vertical-align:middle}
-        .main-appli-name {display: inline-block; width: 40%; vertical-align: middle;}
+        .main-appli-name {display: inline-block; width: 44%; vertical-align: middle;}
         .appli-name{color: #1A2531; text-align: left; font-size: 26px; font-weight: 300; font-family: "Usual-Light";}
         .appli-applied{color: #7d7f82; text-align: left; font-size: 12px; margin-top: 6px;}
         
@@ -29,7 +29,7 @@
         .overall-suit span { vertical-align:middle;}
         .overall-suit span:last-child {padding-left:3px;font-size: 40px;color: #667281; vertical-align:middle;}
         
-         .view-appli-list {padding: 5mm; }
+        .view-appli-list {padding: 5mm 50px; }
         .contact-row {padding-top: 20px;border-top:1px solid #ECECEE; }
         
         .contact-label img {width: 10px;}
@@ -40,7 +40,7 @@
 
         
         .charts-table {background: #fff;margin-top: 30px; page-break-inside: avoid;}
-        .chart-cell {width:20%; text-align: center; padding: 25px 0;border-right:1px solid #ECECEE; vertical-align: top;}
+        .chart-cell {width: 290px; text-align: center; padding: 25px 0;border-right:1px solid #ECECEE; vertical-align: top;}
         .chart-img {position: relative;}
            .chart-cell-missing-req-icon{
                  top:12px;
@@ -58,12 +58,12 @@
         .essential-requirements-note {height: 34px;border-top: 1px solid #ECECEE;;width:100%;
                                      font-size: 10px;left:0;bottom: 0;padding-top: 15px; }
         .red-requirements {color: #F9623D;}
-        .chart-info-cell{vertical-align: top;}
-        .chart-info-cell .appli-row {height: 60px; border-bottom: 1px solid #ECECEE; padding-left:17px;line-height: 60px;}
+        .chart-info-cell{vertical-align: top; width: 949px;}
+        .chart-info-cell .appli-row {height: 60px; border-bottom: 1px solid #ECECEE; padding-left:50px;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-weight: 500;font-size: 12px;text-align: left; color: #4E5258; display: inline-block; vertical-align: middle;width:20%;white-space: nowrap;  }
-        .appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 14%; }        
+        .appli-label{font-weight: 500;font-size: 12px;text-align: left; color: #4E5258; display: inline-block; vertical-align: middle;width:24%;white-space: nowrap;  }
+        .appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 10%; }        
         span.appli-progress-bar {display: inline-block; width:62%;vertical-align: middle; }
    
         .progress {margin-bottom: 0; border-radius: 0;height: 24px;background: #e9ecef;box-shadow: none;}
@@ -71,14 +71,14 @@
         
         .tab-row{  width: 100%; border-bottom: solid 1px #e3e3e3; background-color: #F7F7F8;height:auto; min-height: 45px; line-height: 45px;}
         .tab-row.fixed-height {height: 45px;}
-        .detail-tab-row-title {font-size: 10px;letter-spacing: 0.91px;color: #4E5258;display: inline-block; vertical-align: middle;width:34%; padding-left:20px; text-transform: uppercase;}
+        .detail-tab-row-title {font-size: 10px;letter-spacing: 0.91px;color: #4E5258;display: inline-block; vertical-align: middle;   width: 310px; padding-left:50px; text-transform: uppercase;}
         .detail-tab-row-text {color: #7D7F82;display: inline-block; vertical-align: middle;width:60%; font-size: 12px; }
         .line-height-fixed { line-height: 1.4;}
         .red-requirements {color: #F9623D; position: relative}
         .green-requirements {color: #67B413; position: relative}  
         .green-requirements .dot-icon { 
             top:17px;
-            left :3px;
+            left :21px;
             box-sizing: border-box;
             height: 12px;
             width: 12px;
@@ -91,7 +91,7 @@
         
         .red-requirements .dot-icon { 
               top:17px;
-            left :3px;
+            left :21px;
             box-sizing: border-box;
             height: 12px;
             width: 12px;           
@@ -262,7 +262,7 @@
 
         @page
         {
-            size: A4 portrait;
+            size: 1340px 1896px;;
             margin : 0;
             @top-left { content: element(header);}