<%@ 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; }
        .chief-officer {font-family: "Usual-Light";color: #ffffff; text-align: left; line-height: normal;
                       font-size: 22px;; font-weight: 300; display: inline-block; width:58%;vertical-align:middle}
        .chief-officer .ref-no {color: #8E97A0;}
        .header-right {color: #ffffff; float: right;   width:40%;  text-align: right;border:1px solid white}
        .by-name {font-family: "Usual-Light";color: #ffffff; float: right; font-size: 12px; padding: 0;  width:40%;text-align: right; }
        .header-right-status {font-family: "Usual-Light";margin: 25px 0 10px; font-size: 11px;text-align: right; }
        .light-calendar {
            background-image: url('file://<%=  PDFUtils.FILE_BASE_PATH %>/images/calendar-icon-light.png');
            background-repeat: no-repeat;
            padding: 3px 10px 3px 24px;
            background-position: left center;
            color: #b0b4b8;    
            font-size: 11px;
            font-family: "Usual-Medium";
          

        }    
        .job-status-appli {
          
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #ffffff;
            font-size: 11px;
           font-family: "Usual-Medium";
             padding: 3px 0 3px 0;
           
        }
        
        .job-status-appli .status-icon{
                height: 12px;
                width: 12px;
                display: inline-block;
                border-radius: 50%;
                    margin: -5px 5px;

            }

            .status-icon.open {
            border: 4px solid #03AC66;
            }
            .status-icon.closed {
            border: 4px solid #f9623d;
            }
            .status-icon.filled {
            border: 4px solid #f9623d;
            }
     
        div.white-header {background-color: #fff; height:100px;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.02); padding: 0 50px ;}
        div.white-header:after{display:inline-block; line-height:80px; width:0; content:"\00A0"; overflow:hidden; vertical-align:middle}
       
        .main-appli-name {display: inline-block; width:48%; vertical-align:middle ; margin-top:25px; }
        .appli-name{color: #1A2531; text-align: left; font-size: 26px; font-weight: 300; font-family: "Usual-Regular";}
        .appli-applied{color: #7d7f82; text-align: left; font-size: 12px; margin-top: 6px;}
        .appli-count {margin-top:40px;float:right; width: 50%;text-align: right;color: #8E97A0;font-size: 15px; vertical-align:middle;}
        
        .view-appli-list {padding: 50px; text-align: center;}
        .appl-c-box{display: inline-block;width:230px;text-align: left;background: #ffffff none repeat scroll 0 0;margin: 0 7.5px 40px;}
        
        .gridbox-title{background-color: #4A4A4A; padding: 10px;font-size: 16px;}
        .gridbox-applicant{color: #FFFFFF;font-size: 16px;}
        
        .overall-suitablity{
            width: 100%;
            height: 60px;
            line-height: 60px;
            padding-left: 15px;
        }
          .overall{
            font-size: 10px;
            font-weight: 500;
            letter-spacing: 0.9px;    
            text-transform: uppercase;
            color: #7d7f82;
           
            display: inline-block;
             vertical-align: middle;
             width: 70%;
        }
        .overall.f-60{
            margin-top: 30px;
        }
        
        .over-all{
            font-size: 30px;
            vertical-align: middle;
            font-weight: 300;
            display: inline-block;
            width: 15%;
            padding-right: 10px;
        }
        .over-all span{
            font-family: "Usual-Light";
        }
        .over-all.f-60 span{
            font-family: "Usual-Regular";
            font-size: 40px;
        }
        .jcc-box {
             width: 100%;
              
        }
        .jcc {
              
            width: 100%;
            height: 40px;
            line-height: 40px;
            width: 100%;
            border-top: solid 1px #edeff0;
            text-transform: uppercase;
            font-size: 10px;
            /*font-weight: 500;*/
            letter-spacing: 0.9px;
           padding: 0;
   
            font-family: "Usual-Medium";
            color: #4E5258;
        }
        .jcc-title {
            display: inline-block;
            width: 50%;
            padding-left: 30px;
            box-sizing: border-box;
            position: relative;
            /*border:1px solid black;*/
/*              height: 40px;
              line-height: 50px;*/
          
        }
        .jcc img {position: absolute; top:12px; left:10px;}
        .jcc .jcc-precentage{
            width: 25%;
            display: inline-block;
            font-size: 22px;
            font-weight: 300;
            text-align: right;
            color: #7d7f82;
            font-family: "Usual-Light";
             box-sizing: border-box;
           
        }
      
        .jcc-box .red-bg {background-color: #F9623D; color : #fff;}
        .jcc-box .red-bg span , .jcc-box .green-bg span{color : #fff;}
        .jcc-box .green-bg {background-color: #67B413;color : #fff;}
        .blue {color: #03a0e7 !important;}
        span.austr-post { text-transform: uppercase;}

        @page
        {
               size: 1340px 1896px;
            margin : 0;
            @top-left { content: element(header);}
        }
    </style>
</oneit:dynIncluded>
