Updated HT004 with new design.

Styles updated by score based colors.
Score - Determine logic for when to color a category summary as green, amber, or red
Score - Determine logic for when to color overall Role Fit as green, amber, or red

cmsWebApp/webroot/css/common.css

@@ -2952,6 +2952,8 @@ span.appli-percen {
     position: relative;
     top: -2px;
     font-family: "Usual-Bold";
+    width: 80px;
+    text-align: right;
 }
 .expand-box {
     display: inline-block;
@@ -3228,25 +3230,25 @@ input.add-note-btn:hover{
   padding: 0 !important;
 }
 .red-b {
-  background: #f9623d none repeat scroll 0 0;
+  background: #f9623d none repeat scroll 0 0 !important;
   float: left;
   position: relative;
   z-index: 10;  
-  height: 10px;
+  /*height: 10px;*/
 }
 .yellow-b{
-  background-color: #ffd14c;
+  background-color: #ffd14c !important;
   float: left;
   position: relative;
   z-index: 10;  
-  height: 10px;
+  /*height: 10px;*/
 }
 .green-b{  
-  background-color: #03ac66;
+  background-color: #03ac66 !important;
   float: left;
   position: relative;
   z-index: 10;  
-  height: 10px; 
+  /*height: 10px;*/ 
 }
 .triangle-arrow {
   background: rgba(0, 0, 0, 0) url("../images/triangle.png") no-repeat scroll center center;
@@ -4194,7 +4196,7 @@ img.alert-icon {float: left;}
 @media screen and (max-width: 1540px){
 	.search-bar {width: 54.25%;}
 	.fl-right {width: 29.3%;}
-  .main-applicant-content {width: 80.3%;}
+  /*.main-applicant-content {width: 80.3%;}*/
   .applicant-sidebar li a{font-size: 13px;padding: 0 8px;}
   .applicant-sidebar .gray,.applicant-sidebar .green,.applicant-sidebar .blue {font-size: 14px;}
   .applicant-sidebar li {line-height: 46px;}
@@ -4273,6 +4275,9 @@ img.alert-icon {float: left;}
   .message-common {padding: 20px 28px 20px 25px;}
   .message-txt{margin-left: 18px;}
   .main-applicant-content {width: 100%;}
+  
+  .thr-block {padding: 0 10px 10px;}
+  .admin-notes{padding: 16px 21px 28px;}  
 }
 
 @media screen and (max-width: 1350px){
@@ -4290,6 +4295,9 @@ img.alert-icon {float: left;}
   .cb-title{font-size: 15px;padding: 12.5px 13px;}
   .main-job-match-area {padding: 40px 10.4% 44px;}  
   .main-applicant-content {width: 100%;}
+
+  .text-dot-dot{width: 75%;}
+  .admin-br-line{margin: 18px 0 17px;}
 }
 
 @media screen and (max-width: 1280px){
@@ -4771,6 +4779,8 @@ img.alert-icon {float: left;}
   .box-btn{font-size: 13px;width: 100%;padding: 0;}
   .pl-verify{font-size: 12px;}
   .verify-i-setpone label{font-size: 12px;margin-bottom: 8px;}
+  
+  .main-sign-up {width: 90%;}
 }
 
 @media screen and (max-width: 600px){
@@ -4868,6 +4878,10 @@ img.alert-icon {float: left;}
   .ratting-box span.right-s-label{width: 105px;}
   
   .main-company-profile {margin: 30px auto 0;}
+  .btn-b-225{height: 45px;line-height: 45px;}
+  .box-bg-color{padding: 30px;}
+  .col-2 {margin-left: 0;margin-right: 0;width: 100%;}
+  .col-row {margin-left: 0;margin-right: 0;}
   .u-img-tag{width: 100%;height: auto;}
 }
 @media screen and (max-width: 360px){

cmsWebApp/webroot/extensions/adminportal/view_application.jsp

@@ -27,36 +27,53 @@
 <script type="text/javascript">
     $(document).ready(function()
     {
-        $('.percent-role').percentageLoader({
+        $('.percent-red-b').percentageLoader({
             valElement: 'p',
-            strokeWidth: 20,
+            strokeWidth: 15,
             bgColor: '#e5e8eb',
-            ringColor: '#67b413',
-            textColor: '#67b413',
+            ringColor: '#f9623d',
+            textColor: '#4a4a4a',
             fontSize: '30px',
-            fontWeight: 'normal',
-            showPercent: false
+            fontWeight: 'normal'
         });
-        
-        $('.percent-culture').percentageLoader({
+        $('.percent-yellow-b').percentageLoader({
+            valElement: 'p',
+            strokeWidth: 15,
+            bgColor: '#e5e8eb',
+            ringColor: '#ffd14c',
+            textColor: '#4a4a4a',
+            fontSize: '30px',
+            fontWeight: 'normal'
+        });
+        $('.percent-green-b').percentageLoader({
             valElement: 'p',
-            strokeWidth: 20,
+            strokeWidth: 15,
             bgColor: '#e5e8eb',
-            ringColor: '#67b413',
-            textColor: '#67b413',
+            ringColor: '#03ac66',
+            textColor: '#4a4a4a',
             fontSize: '30px',
             fontWeight: 'normal'
         });
         
-        $('.percent-req').percentageLoader({
+        $('.percent-green').percentageLoader({
             valElement: 'p',
-            strokeWidth: 20,
+            strokeWidth: 15,
             bgColor: '#e5e8eb',
-            ringColor: '#03a0e7',
-            textColor: '#03a0e7',
+            ringColor: '#41bdb4',
+            textColor: '#4a4a4a',
             fontSize: '30px',
             fontWeight: 'normal'
         });
+        $('.percent-blue').percentageLoader({
+            valElement: 'p',
+            strokeWidth: 15,
+            bgColor: '#e5e8eb',
+            ringColor: '#fbd44e',
+            textColor: '#4a4a4a',
+            fontSize: '30px',
+            fontWeight: 'normal'
+        });
+        
     });
 </script>
 

cmsWebApp/webroot/images/arrow-left-prev.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13">
+    <path fill="#BBBFC5" fill-rule="evenodd" d="M7.018 12.368a.914.914 0 0 0 0-1.294L2.444 6.5l4.574-4.574A.914.914 0 1 0 5.724.632L.547 5.81a.903.903 0 0 0-.26.691.903.903 0 0 0 .26.69l5.177 5.178a.914.914 0 0 0 1.294 0"/>
+</svg>

cmsWebApp/webroot/images/arrow-right-next.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="13" viewBox="0 0 8 13">
+    <path fill="#BBBFC5" fill-rule="evenodd" d="M.826.632a.914.914 0 0 0 0 1.294L5.4 6.5.826 11.074a.914.914 0 1 0 1.294 1.294L7.297 7.19a.903.903 0 0 0 .26-.691.903.903 0 0 0-.26-.69L2.12.631a.914.914 0 0 0-1.294 0"/>
+</svg>