<%@ 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');}
        
        body { margin: 5mm;   background-color: #e9ecef; }
        div.header{background-color: #1a2531; height: 80px; line-height: 80px; padding: 0 30px ;}
            .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;}
        
        div.white-header {background-color: #fff; height:80px;box-shadow: 0 3px 5px 0 rgba(0,0,0,0.02); padding: 0 30px ;}
            .applicant-details {height: 80px; line-height: 80px;  margin:0 }
            .main-appli-name {display: inline-block; width: 38%;  }
            .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;}
            .appli-count {display: inline-block; width: 60%;text-align: right;color: #8E97A0;font-size: 15px; }
        
        .view-appli-list {padding: 20px 0; }
        .appl-c-box{display: inline-block;width:23%;text-align: left;background: #ffffff none repeat scroll 0 0;margin: 0.8% 0.8%;}
        
        .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;
            font-family: "Usual-Medium";
            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;
           
            line-height: 40px;
            font-family: "Usual-Medium";
            color: #4E5258;
        }
        .jcc-title {
            display: inline-block;
            width: 65%;
            padding-left: 10px;
             line-height: 40px;
        }
        .jcc img {margin-right: 8px;}
        .jcc span {
            width: 25%;
            display: inline-block;
            font-size: 22px;
            font-weight: 300;
            text-align: right;
            color: #7d7f82;
            font-family: "Usual-Light";
           
            
        }
      
        .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;}
        @page
        {
            size: A4 portrait;
            margin : 0;
            @top-left { content: element(header);}
        }
    </style>
</oneit:dynIncluded>
