<%@ 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" >
         body { margin: 0;   background-color: #e9ecef; font-family: "Usual-Regular";}
        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 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;                     
        }
        
        .chief-officer .ref-no {color: #8E97A0;}
        .by-name {color: #ffffff; display: inline-block;  width:48%;text-align: right;}
        
        .applicant-details {height: 100px;}
        .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: 44%;  vertical-align: initial;    padding-top: 24px;}
        .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%;vertical-align: initial; }
        .shortlised {background:left center no-repeat ; text-align: center ;float: right;display: inline-block; color: #2EB36B;font-size: 15px;height: 50px; line-height: 50px; border-right:1px solid #ECECEE;  width: auto;padding: 0 20px; white-space: nowrap;}
        .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: auto;  padding: 0 5px 0 20px; white-space: nowrap;}
        .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 50px; }
        .contact-row {padding-top: 20px;border-top:1px solid #ECECEE; }
        
        .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: 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:10px;
                left :45%;
                box-sizing: border-box;
                height: 25px;
                width: 25px;           
                position: absolute;           
                padding: 0;
                display: block;
                border-radius: 50%;
                border:2px solid #fff;
                background-repeat: no-repeat;
                background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/no_req.png'); background-size:25px;
            }  
        .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; 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:150px;white-space: nowrap; line-height: 60px; }
        .appli-percen{font-size: 24px; color: #667281; display: inline-block; vertical-align: middle;width: 80px;   text-align: right;
                         padding-right: 18px;    box-sizing: border-box;}        
        span.appli-progress-bar {display: inline-block; width: 613px;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: 228px; padding-left:50px; text-transform: uppercase;position: relative;}
        .detail-tab-row-text {color: #7D7F82;display: inline-block; vertical-align: middle;width: 613px;  padding-left: 21px; 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:13px;
            left :21px;
            box-sizing: border-box;
            height: 19px;
            width: 19px;
            position: absolute;
            padding: 0;
            display: block;
            background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/has_req.png'); background-size:19px;
            background-repeat: no-repeat;
        }
        
        .red-requirements .dot-icon { 
            top:13px;
            left :21px;
            box-sizing: border-box;
            height: 19px;
            width: 19px;           
            position: absolute;           
            padding: 0;
            display: block;
            background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/no_req.png'); background-size:19px;
            background-repeat: no-repeat;
            }
       
          
         .width50 {width:50% ; box-sizing: border-box;float: left; }
         .width45 {width:100% ; box-sizing: border-box;  }
       
       
        .tab-view-side {
            display: inline-block; vertical-align: middle;width:613px;padding-left: 20px;
        }
        .result-want {

            width: 100%;
            font-family: "Usual-Light";
        }
        .result,.wants{
            font-size: 10px;
            font-weight: 500;
            text-align: left;
            color: #4e5258;
            margin-bottom: 2px;
            line-height: 1.4;
        }
        .result .calcField{color: #4E5258; }
        .result{
          float: left;
        }
        .wants{
          float: right;
        }
        .result-bar {
          float: left;
          position: relative;
          width: 100%;
          overflow: hidden;
           white-space:nowrap;
        }
        .like-strive{
          font-size: 10px;
          line-height: 1.17;  
          color: #7d7f82;  
          float: left;
          width: 100%;
          padding-top: 5px;

        }
        .result-bar ul{
          background: none;
          padding: 0 !important;
          margin: 0;
          overflow: hidden;
        }
        .result-bar li {
          display: inline-block;
           float: left;
           
        }
        .result-bar li:last-child {
            margin-right: -0.5px
        }
        .red-b {
            background: #fb5d67 none repeat scroll 0 0 !important;
         
            position: relative;
            z-index: 10;  
          /*height: 10px;*/
        }
        .yellow-b{
            background-color: #fedd6f !important;
        
            position: relative;
            z-index: 10;  
          /*height: 10px;*/
        }
        .green-b{  
            background-color: #41bdb4 !important;
         
            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;
          top:2px;
        }
        
     
        .essential-msg {
	font-size: 12px;
	font-weight: 500;
        }
        .essential-msg.red {
            color: #F9623D;
        }
        .essential-msg.green {
            color: #67B413;
        }
        
         .req-icon { 
            float: right;
            margin-right: 10px;
            display: inline-block;
            height: 21px;
            width: 21px;
            background-repeat:  no-repeat;
            padding: 0;
            display: block;
            background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/no_req.png'); background-size:21px;
       }
       
       .all-req-icon {
            float: right;
            margin-right: 10px;
            display: inline-block;
            height: 21px;
            width: 21px;
            background-repeat:  no-repeat;
            padding: 0;
            display: block;
            background-image : url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/has_req.png'); background-size:21px;
       }
       .a-label-row {
            margin-bottom: 10px;
        }
        
        .detail-tab-row-title .common-dot {
            margin-top: 15px;
             top: 15px;
            position: absolute;
            left: 28.5px;
            margin: 0;
           
        }
       
       .common-dot{
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 50%;
            vertical-align: middle;
            float: left;
            margin-left: 12px;
         
        }
        .red-dot{
          background-color: #fabdc1;
          border:1px solid #fb5d67;
        }
        .yellow-dot{
          background-color: #fbe7a1;
          border: 1px solid #fbc712;  
        }
        .green-dot{
          background-color: #8CE2DB;
          border: 1px solid #47BBB3;  
        }
        .text-dot-dot{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 88%;
          display: inline-block;
        }

        .r-y-label{
          font-size: 11px;
          color: #67696d;
          padding-left: 6px;
          vertical-align: middle;
          text-align: left;
          float: left;
          width: 75%;
           margin-bottom: 10px;
        }
        .req-row {text-align: left;padding-left:10px;}
        .req-row .common-dot {float: none;margin-left:0px;}
        .pre-dot{
            width: auto;float: none; font-size: 11px;
          color: #67696d;text-align: left;
        }
        .r-y-label-num {
            font-size: 11px;
          color: #67696d;
          float: none; 
        }
        
        .contact-row span.calcField {
             color: #7D7F82;
    
        }
        
        .contact-row > a span.calcField  {
            color: #4A90E2;
        }
        
        .role .tab-row {
            max-height: 55px;
            line-height: 55px;
        }
        
        .culture .tab-row {
            min-height: 38px;
            line-height: 38px;
        }

        .culture .tab-row.fixed-height {
            height: 38px;
        }
        
        .culture .detail-tab-row-title .common-dot {
            margin-top: 15px;
            top: 11px;
            position: absolute;
            left: 28.5px;
            margin: 0;
        }
        
        div#cul23 .detail-tab-row-title {
            line-height: 1.2em;
            padding-left: 55px;
            width: 223px;
            padding: 7px 0 7px 56px;
        }
        
        @page
        {
            size: 1340px 1896px;;
            margin : 0;
            @top-left { content: element(header);}
        }
        

    </style>
</oneit:dynIncluded>