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

<%@include file="../../../setuprequest.jsp" %>

<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:url("") no-repeat left center; 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;}
        .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;}
        .appli-label{font-size: 12px;text-align: left; color: #4E5258;}
        .appli-percen{font-size: 24px; color: #667281;}
        
        span.appli-progress-bar {display: inline-block; width: 60%;}

        .progress {margin-bottom: 0; border-radius: 0;height: 24px;background: #e9ecef;box-shadow: none;}
        .progress-bar{background: #667281;}
        
        @page
        {
            size: A4 portrait;
           margin : 0;
            @top-left { content: element(header);}
            
        }
        
        body { margin: 5mm;   background-color: #e9ecef; }
    </style>
</oneit:dynIncluded>