<%@ 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; border:1px solid red; 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; }
        .appli-row{ width: 100%; background-color: #ffffff; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.02);    margin-bottom: 16px;}
        .appli-l {float: left;    border-left: solid 1px #eee; height:30px;}
        .appli-list-name {color: #4a4a4a;font-size: 20px;width:27%; padding:20px 2%; height:30px; border-left: none;}
        .appli-status { font-size: 11px;  letter-spacing: 0.9px;  text-align: left; color: #767577; text-transform: uppercase;  margin-top:5px;}
        .appli-overall {
            color: #4a4a4a;
            font-size: 11px;
            letter-spacing: 1px;
            padding:20px 1%;
            text-transform: uppercase;
            width: 15%;
            height:30px;
            line-height: 30px;
        }
        .appli-overall span {
            color: #03a0e7;
            font-size: 36px;
            font-weight: 300;
            float: right;
        }
        .appli-jcs {
            color: #4a4a4a;
            font-size: 11px;
            letter-spacing: 1px;
            padding:20px 1%;
            text-transform: uppercase;
            width: 15%;
        }
        
        .appli-view-bar {
            display: inline-block;
            width: 100%;
            margin-bottom: 5px;
            position: relative;
        }
        .appli-view-bar .progress {
            margin-bottom: 0;
            border-radius: 0;
            height: 13px;
            background: #e9ecef;
            box-shadow: none;
        }
        .progress-bar {
            float: left;
            width: 0;
            height: 100%;
            font-size: 12px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            background-color: #667281;
            -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            -webkit-transition: width .6s ease;
            -o-transition: width .6s ease;
            transition: width .6s ease;
            position: relative;
        }
         .appli-view-bar .progress-bar.green {
         background: #67B413;
        }
        
        .show-precentage {position: absolute;color:#fff;right: 1px;    top: -3px; font-size: 9px;font-weight: 500;}
       .requirements-icon { 
            top:-5px;
            left : -5px;
            box-sizing: border-box;
            height: 18px;
            width: 18px;
            border: 3px solid #FFFFFF;
            position: absolute;
            border-radius: 50%;
            background-repeat:  no-repeat;
            background-position: 32% 25%;
            padding: 0;
            
       }
      .red-requirements {color: #F9623D;}
      .green-requirements {color: #67B413;}  


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