<%@ page extends="oneit.servlets.jsp.JSPInclude" %>

<%@include file="../../../setuprequest.jsp" %>
<%@ page import="performa.orm.*, performa.orm.types.*, performa.chart.*, performa.utils.*"%>
<oneit:dynIncluded>
    <style type="text/css" media="print,screen" >
        /*@import url("//hello.myfonts.net/count/343a83");*/
  
        @font-face {font-family: 'Usual-Bold';src: url('../../../fonts/343A83_0_0.eot');src: url('../../../fonts/343A83_0_0.eot?#iefix') format('embedded-opentype'),url('../../../fonts/343A83_0_0.woff2') format('woff2'),url('../../../fonts/343A83_0_0.woff') format('woff'),url('../../../fonts/343A83_0_0.ttf') format('truetype');}

        @font-face {font-family: 'Usual-Light';src: url('../../../fonts/343A83_1_0.eot');src: url('../../../fonts/343A83_1_0.eot?#iefix') format('embedded-opentype'),url('../../../fonts/343A83_1_0.woff2') format('woff2'),url('../../../fonts/343A83_1_0.woff') format('woff'),url('../../../fonts/343A83_1_0.ttf') format('truetype');}

        @font-face {font-family: 'Usual-Medium';src: url('../../../fonts/343A83_2_0.eot');src: url('../../../fonts/343A83_2_0.eot?#iefix') format('embedded-opentype'),url('../../../fonts/343A83_2_0.woff2') format('woff2'),url('../../../fonts/343A83_2_0.woff') format('woff'),url('../../../fonts/343A83_2_0.ttf') format('truetype');}

        @font-face {font-family: 'Usual-Regular';src: url('../../../fonts/343A83_3_0.eot');src: url('../../../fonts/343A83_3_0.eot?#iefix') format('embedded-opentype'),url('../../../fonts/343A83_3_0.woff2') format('woff2'),url('../../../fonts/343A83_3_0.woff') format('woff'),url('../../../fonts/343A83_3_0.ttf') format('truetype');}
        
        div.header{background-color: #1a2531; height: 80px; line-height: 80px; 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 30px ;}
        .applicant-details {border-bottom:1px solid #ECECEE;height: 80px;}
        
        .chief-officer {color: #ffffff; text-align: left; font-size: 26px; font-weight: 300; margin-bottom: 15px; float:left; width:60%}
        .chief-officer .ref-no {color: #8E97A0;}
        .by-name {color: #ffffff; float: right;  width:30%;text-align: right;}
        .main-appli-name {display: inline-block; width: 40%; float: left; }
        .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;}
        
        .rank-info {display: inline-block; width: 55%; float: right;}
        .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;}
        
        .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:25%; 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:25px;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; display: inline-block; vertical-align: middle;width:20%;  }
        .appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 12%}
        
        span.appli-progress-bar {display: inline-block; width:65%;vertical-align: middle; }
   
        .progress {margin-bottom: 0; border-radius: 0;height: 24px;background: #e9ecef;box-shadow: none;}
        .progress-bar{background: #667281;height: 24px; }
        
        
        
        .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:32%; padding-left:25px; text-transform: uppercase;}
        .detail-tab-row-text {color: #7D7F82;display: inline-block; vertical-align: middle;width:45%; 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:15px;
            left :5px;
            box-sizing: border-box;
            height: 15px;
            width: 15px;
            border: 1px solid #67B413;
            position: absolute;
            border-radius: 50%;
            background-repeat:  no-repeat;
            background-position: 34% 25%;
            padding: 0;
            display: block;
            background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/correct.png'); background-color : #67B413; background-size:55%;
            
       }
        
        .red-requirements .dot-icon { 
            top:15px;
            left : 5px;
            box-sizing: border-box;
            height: 15px;
            width: 15px;
            border: 1px solid #F9623D;
            position: absolute;
            border-radius: 50%;
            background-repeat:  no-repeat;
            background-position: 32% 25%;
            padding: 0;
            display: block;
            background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/icon-requirements.png'); background-color : #F9623D; background-size:20%;
            
       }
       
       .tab-view-side {
           display: inline-block; vertical-align: middle;width:61%; 
       }
    .result-want {
       
        width: 100%;
        font-family: "Usual-Medium";
    }
.result,.wants{
    font-size: 10px;
    font-weight: 500;
    text-align: left;
    color: #4e5258;
    margin-bottom: 2px;
     line-height: 1.4;
}
.result{
  float: left;
}
.wants{
  float: right;
}
.result-bar {
  float: left;
  position: relative;
  width: 100%;
  
}
.like-strive{
  font-size: 12px;
  line-height: 1.17;  
  color: #7d7f82;  
  float: left;
  width: 100%;
 
}
.result-bar ul{
  background: none;
  padding: 0 !important;
  margin: 0;
}
.red-b {
  background: #fb5d67 none repeat scroll 0 0 !important;
  float: left;
  position: relative;
  z-index: 10;  
  /*height: 10px;*/
}
.yellow-b{
  background-color: #fedd6f !important;
  float: left;
  position: relative;
  z-index: 10;  
  /*height: 10px;*/
}
.green-b{  
  background-color: #41bdb4 !important;
  float: left;
  position: relative;
  z-index: 10;  
  /*height: 10px;*/ 
}
.triangle-arrow {
  background: rgba(0, 0, 0, 0) url("file://<%=  PDFUtils.FILE_BASE_PATH %>/images/triangle.png") no-repeat scroll center center;
  height: 8px;
  left: 48%;
  position: absolute;
  right: 0;
  width: 11px;
  z-index: 10;
}

        @page
        {
            size: A4 portrait;
            margin : 0;
            @top-left { content: element(header);}
            
        }
        
        body { margin: 5mm;   background-color: #e9ecef; }
    </style>
</oneit:dynIncluded>