@font-face {font-family:'jura';src: url('Jura.ttf');}
@font-face {font-family:'rupee';src: url('Rupee_Foradian.ttf');}
@font-face {font-family:'abel';src: url('abel-regular.ttf');}


body{font-family:'abel', sans-serif;font-size:12px;height:100%;padding:0 0 35px;margin:0;background:#f6f6ff url('../images/bg.png') repeat-y left top;}

.comlogo{width:120px;}
.loginpage {display: flex;  flex-wrap: wrap; width:1170px; margin:100px auto 0; justify-content: center;}
.login{}


.app_info, .applogin{width:49%;}
.app_info{}
.app_info .logo{text-align:center; margin:100px auto; border-right: 1px solid #ccc;}
.app_info .logo >img{display: block;  margin-left: auto;  margin-right: auto;}

.applogin .loginSec{}
.login_left.logo > img{}
.logo >img{}
.message-box{text-align:center;}
.Inactive{text-decoration: line-through; color:red;}
body.login header{display:none}
body.index{background-position:left top}
body.leaves{padding-bottom:65px}
input,select,textarea{font-family:'abel', sans-serif;font-size:1.2em;padding:4px 1%;border:solid 1px #fff;background:rgba(255,255,255,0.8);}
input[type=submit]{width:auto;cursor:pointer;}
input,select,textarea,input[readonly]{box-sizing:content-box;-ms-box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;}
/*select optgroup{background-color:#140;color:#fff}
select option{background:rgba(90,120,50,1);color:#fff}
select option:hover {background-color:#333;}*/
a{text-decoration:none;transition: color .5s ease;color:#fff;cursor:pointer}
a.swLogo{display:block;float:left;margin-right:20px;width:180px;height:70px;background-color:#fff;}
a.swLogo img{max-height:68px;width:auto;display:block;margin:2px auto 0}
h1, h2, h3{padding:0; margin:0}
.moduleName{padding :10px 20px 2px 210px}
.uploadForm a {
  color: #046ef7;
  text-decoration: underline;
  padding: 10px;
  text-transform: uppercase;
}
.fl{float:left}.fr{float:right}.clr{clear:both}
.rs{font-family:'rupee'}.rel{position:relative}
.tac,.tabular th.tac{text-align:center}
.tar,.tabular th.tar{text-align:right}
.red{color:#e00;}.green{color:#0c3}.orange,.tabular h2 > span.orange{color:#f60}
.tabular h2 > span.grpNum{color:#f60;font-family:verdana;font-size:0.9em}
.y{font-style:italic;}
header{background-color:red;color:#fff;min-height:70px;}
footer{background-color:#000;clear:both;text-align:center;padding:10px 0;color:#888;position:fixed;bottom:0;width:100%;z-index:10}
.fileHack input {  font-size: 1.0em;}
.profile img{height:30px;position:absolute;margin-left:-30px}
.applogin header{height:70px;}
.applogin header img{margin-top:80px;padding:10px 20px 10px 20px;background:#ed1b24}
.applogin #loginSec{margin:80px auto; width:300px;padding:15px 30px 30px;border:solid 3px rgba(255,255,255,0.6);background-color:rgb(255, 80, 80);box-shadow:0 0 10px #000;border-radius:6px;box-sizing:border-box}
.applogin #loginSec form{margin-top:20px}
.applogin #loginSec h2{margin:-54px auto 0;width:35%;text-transform:uppercase;padding:10px 0;}
.applogin #loginSec input{display:block;margin:15px 0;width:96%;background-color:rgba(255,255,255,0.6);border:solid 1px rgba(255,255,255,0.8);padding:6px 2%}
.applogin #loginSec .button{color:#fff;margin-bottom:0;background:#039;text-transform:uppercase;}

#loginInfo{float:right;margin:10px 50px 0 0;text-align:right}
#loginInfo .name,#loginInfo .role{font-size:1.2em;line-height:1em;text-transform:capitalize}
#loginInfo .role{font-style:italic;color:#fff; display:none;}
#loginInfo .btns{position:absolute;top:0;right:0}
#loginInfo .btns a{width:35px;height:35px;display:block;margin-left:5px;}
#loginInfo .logout{background:#e00 url('../images/log_out.png') no-repeat center center;}
#loginInfo .settings{background:#333 url('../images/settings.png') no-repeat 7px 6px;}
.lastLogin{background-color:rgba(255,255,255,0.5);border-radius:5px;padding:2px 6px;color:#666;display:block;margin-top:5px;}

.settingsMenu{position:absolute;right:0;padding:5px;margin-top:3px;background-color:#333;display:none; z-index:100}
.settingsMenu a{display:block;padding:2px 6px;margin:2px;background-color:rgba(100,150,255,0.2)}
.settingsMenu a:hover{background-color:rgba(80,120,255,0.7)}

nav.main{position:absolute;left:0;width:180px;margin-top:25px;padding-bottom:40px}
nav.main ul{list-style:none;padding:0;margin:0}
nav.main ul li{border-bottom:solid 1px #333;font-family:'jura';font-size:1.1em;line-height:1em}
nav.main ul li a{display:block;padding:6px;color:#ddd;background-color:rgba(200,80,0,0.3);text-transform:uppercase;transition: all .20s ease;border-left:5px solid #f30}
nav.main ul li a.on{background-color:#f6f6ff;color:#f30;border-color:#f30}
nav.main ul li a.on:hover{background-color:#f6f6ff;}
nav.main ul li a:hover{background-color:rgba(0,0,0,0.5);color:#f30}
nav.main ul li a.all{background-color:rgba(255,255,255,0.1);border-left:5px solid #69f;color:#bcf}
nav.main ul li a.all:hover{background-color:rgba(0,0,0,0.5);color:#69f}
nav.main ul li a.on.all{background-color:#f6f6ff;color:#36c;border-color:#69f}

nav.secondary{position:relative}
nav.secondary a#secmenu{content:"...";cursor:pointer;padding:0px 4px 12px;background-color:#000;color:#fff;position:absolute;left:155px;top:4px;font-size:2em;line-height:6px}
nav.secondary ul{position:absolute;left:180px;list-style:none;background-color:#555;padding:0;margin:0;display:none;top:2px}
nav.secondary ul li{border-bottom:solid 1px #333;line-height:1em}
nav.secondary ul li a{display:block;padding:6px 10px;color:#ddd;text-transform:uppercase;transition: all .20s ease;border-left:5px solid #000}
nav.secondary ul li a.on{background-color:#f6f6ff;color:#f30;border-color:#f30}
nav.secondary ul li a.on:hover{background-color:#f6f6ff;}


.hMenu{ margin-top: -6px; text-align:center;}
.hMenu ul{ }
.hMenu ul li{list-style: none;  display: inline;}
.hMenu ul li a{display: inline;  padding: 6px;  color: #000;  background-color: rgba(200,80,0,0.3);  text-transform: uppercase;  transition: all .20s ease;  border-left: 5px solid #f30;}
.hMenu ul li a.on{background-color:#f6f6ff;font-weight:bold}
.hMenu ul li a.on:hover{}


.yesNo{position:relative;display:inline-block;width:60px;height:34px;}
.yesNo input{display:none}
.yesNo .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;background-color:#f00;-webkit-transotopm:.4s;transition:.4s;border-radius:34px;}
.yesNo .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;-webkit-transotopm:.4s;transition:.4s;border-radius:50%}
input:checked + .slider{background-color:#06f;}
input:focus + .slider{box-shadow:0 0 1px;background-color:#06f;}
input:checked + .slider:before{-webkit-transform:translateX(36px);-ms-transform:translateX(36px);transform:translateX(36px)}


/*.tabular{margin:0 auto;min-height:400px}*/
.tabular table,.calView table{width:100%;margin-top:6px;border-bottom:solid 2px #ccc;}
.tabular table.activitiesTbl{border:solid 2px #9c9}
.tabular th,.calView th,.monthView th{padding:5px 4px;background-color:#f6fcff;text-align:left;border-top:solid 3px #fff;border-bottom:solid 3px #f6f6ff;font-weight:normal;text-transform:uppercase}
.tabular td,.calView td{padding:4px;background-color:#fff;vertical-align:top;color:#666;}
.tabular tr:nth-child(even) td,.calView  tr:nth-child(even) td{background-color:#f6f6f6;}
.tabular h2>strong{text-transform:uppercase;color:#000;font-size:1.2em}
.tabular h2>span{color:#666}
.tabular h3,.calView h3, .attcalView h3, #searchResult h3{font-weight:normal;margin:0 0 8px;font-size:1.3em;text-transform:uppercase;font-family:'jura'}


.tabular h3 .addBtn,.tabular h3 .addFY,.tabular h3 .import{padding:4px 10px;font-size:0.8em;font-weight:normal}
.tabular .deleteBtn,.tabular .editBtn,.tabular .set,.tabular .assign, .edit, .editFY,.tabular .approve,.approveL,.verifieL,.tabular .disapprove,.disapproveL,.deleteFY,.setCurrent,.tabular .resetPass,.download,.giveOut,.dispurse,.receive,.logs,.addTrans,.editTrans,.deleteTrans,.viewTrans,.addMapping,.change,.reject, .permanent , .extend, .confirm, .delete, .activate ,.issue, .deactivate, .approveH,.removeH, .permanent, .remove,.verify, .return ,.revert{margin:0 4px 4px 0;padding:2px 5px;display:inline-block}
.tabular .editBtn,.editTrans,.editFY, .edit, .extend {background-color:#fa0;}
.verify{background-color:#f90;}
.addAddiLoan,.tabular .addFund,.receive,.addTrans,.addInvTrans,.addMapping{background-color:#0c6;}
.tabular .deleteBtn,.tabular .deleteRepay,.deleteFY,.deleteLoan,.deleteTrans,.reject,.deleteInvTrans, .delete, .deactivate, .removeH,.remove{background-color:#f40;}
.tabular .assign,.tabular .assignLoan,.giveOut,.viewTrans,.dispurse,.change, .activate, .issue,.return{background-color:#0cf;}
.tabular .resetPass,.download, .logs,.setCurrent,.verifieL, .confirm,.revert{background-color:#0dc;}
.tabular .set,.closeLoan,.disapprove,.disapproveL{background-color:#ec3;}
.tabular .approve,.approveL,.tabular .repayLoan, .approveH, .permanent{background-color:#09c}
.printCollectable,.printClient{background-color:#08c}
.tabular table tr.default td{background-color:#fe9;}
th.repay{background-color:#beb;border-bottom:solid 3px #7d7;width:180px;}td.repay{background-color:#efe;}
th.paidOut{background-color:#fc8;border-bottom:solid 3px #f90}td.paidOut{background-color:#fff3dd}
th.balance{background-color:#8ef;border-bottom:solid 3px #0cf}td.balance{background-color:#ddf9ff}
th.yellow{background-color:#fe9;border-bottom:solid 3px #fd0}td.yellow{background-color:#fffddd}
th.total{background-color:#bff;border-bottom:solid 3px #66f6f6}td.total{background-color:#f9ffff}
.tabular tr:nth-child(even) td.repay{background-color:#beb;}
.tabular tr:nth-child(even) td.paidOut{background-color:#fc8;}
.tabular tr:nth-child(even) td.balance{background-color:#8ef;}
.tabular tr:nth-child(even) td.yellow{background-color:#fe8;}
.tabular tr:nth-child(even) td.total{background-color:#bff;}
.tabular .installment .repay,.tabular .installment .paidOut,.tabular .installment .balance,.tabular .installment .yellow,.tabular .installment .total{width:80px}
.tabular tr.subhead th{border-top:0;padding-bottom:1px}
.tabular tr th.subheadParent{border-bottom:0;background-color:#f9ffff}
.tabular tr.additionalRow>td{background-color:#fff9cc;position:relative;padding:2px}
.tabular .additionalRow a.expand{background-color:#fff9cc;color:#000;padding:2px;text-align:center;width:65px;height:16px;line-height:14px;position:absolute;right:5px;top:-18px}
.tabular .additionalRow a.expand:after{content:'+ Expand'}
.tabular .additionalRow a.expanded.expand:after{content:'- Collapse'}
.tabular .additionalRow>td>table{border:solid 1px #fff;display:none;margin:5px auto;width:99%;background-color:rgba(200,200,200,0.1)}
.tabular .additionalRow>td>table td{background-color:#ffe}
.tabular .additionalRow>td>table tr:nth-child(even) td{background-color:#fff9cc}
.totPayable,.instDt,.weekNo{font-size:1.2em}
.paid .totPayable, .paid .instDt, .paid .weekNo{color:#093}
.notpaid .totPayable, .notpaid .instDt, .notpaid .weekNo{color:#e30;}
.tabular tr.Closed>td{background-color:#ddc}
.tabular tr.pending td{border-bottom:solid 1px #fb6}
.tabular tr.pending .balance{font-weight:bold;color:#3c0;display:inline-block}
.tabular tr.pending .repayLoan{margin-bottom:0}


.tabular .comment{width:30%}
.tabular .datetime{width:100px;}
.tabular tr.Inactive td{background-color:rgba(255,150, 0, 0.1)}
h4.closed{margin:0 0 10px;background-color:#fec;padding:4px 10px;text-transform:uppercase;font-size:1.4em;font-weight:normal;text-align:center}


.mainCont{padding:20px 20px 20px 210px}
a.back{position:absolute;background-color:rgb(129, 58, 10);color:#fcf8f5;padding:6px 6px;margin:-20px -26px;box-shadow:0 0 2px 0}
a.back.slist{position:absolute;background-color:#ff9;color:#f60;padding:1px 5px;margin:-35px 0 0 -30px;;box-shadow:0 0 2px 0}
.addBtn,.addFY,#slideCont .saveBtn,.newLoan{padding:4px 10px;background-color:#090;border:solid 1px rgba(255,255,255,0.9);border-bottom-color:rgba(0,0,0,0.5);border-right-color:rgba(0,0,0,0.5);border-radius:1px;}
.taBtn {  display: inline-block;  background-color: #69f;  padding: 2px 5px;  margin-right: 5px;margin-bottom: 5px;}
a[status="edit"] {background-color: #fa0;}
.addBtn:before,.addFY:before,.newLoan:before{content:'+';font-family:'calibri';font-weight:bold;padding-right:4px;font-size:1.2em;}
.newLoan:before{font-size:1em;}
.newLoan{float:left;margin-top:25px;font-family:'jura';font-size:1.3em;text-transform:uppercase}
.headerSearchForm{float:left;margin:25px 0 0 1%;width:35%}
.headerSearchForm input[name=searchKey]{width:85%;border:0;background-color:rgba(255,255,255,0.5);padding:5px 1%;float:left}
input.searchBtn{background:#0cf url('../images/magnifier.png') no-repeat scroll center center;width:20px;height:19px;border:0;}
.headerSearchForm input.searchBtn{float:left}

#overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);z-index:1000}
#loading{background:url(../images/loader.gif) no-repeat center center rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;left:0;top:0;z-index:10000}
.popFormCont{color:#333;display:none;width:550px;position:fixed;top:60px;border:solid 3px #69f;background-color:#f6f6ff;z-index:1001;box-shadow:0 0 5px #000;}
.popFormCont h3{text-transform:uppercase;padding:5px 2px 6px 0px;font-size:1.6em;font-weight:bold;margin:0;background-color:#69f;color:#fff;text-align:center}
.popFormCont .close{background-color:#e00;float:right;color:#fff;font-size:0.5em;font-family:'verdana';width:18px;height:18px;line-height:18px;cursor:pointer;text-align:center;border-radius:20px;border:solid 2px #fff;margin-top:-3px;text-indent:1px}
.popFormCont form{padding:1% 2%;overflow-y:scroll; max-height:400px;}
.popFormCont .field{width:48%;float:left;padding:0 1%;min-height:50px;}
.popFormCont .field.colspanTwo{width:98%}
.popFormCont .fourCols .field{width:23%}
.popFormCont .fiveCols .field{width:18%}
.popFormCont label{display:block;text-align:left;margin:5px 0 2px;font-size:1.3em;color:#666;}
.popFormCont label.check{display:inline-block;width:45%;font-size:1em;margin-right:2%}
.popFormCont label.check input{float:left;margin:0 5px 0 0;}
.popFormCont input[type=text],.popFormCont input[type=password],.popFormCont input[type=file],.popFormCont textarea{padding:2px 1%;width:98%}
.popFormCont select,.popFormCont input[readonly]{padding:1px 1%;width:98%}
.popFormCont select optgroup option,.popFormCont select optgroup{font-size:0.9em;font-style:normal}
.popFormCont input[type=file],#customerLogin input[type=file]{font-family: calibri, arial;font-size:0.85em;border-radius:2px;width:98%;padding:1px 1%;}
.popFormCont input[type=button],.popFormCont input[type=submit]{margin:8px 2px;border:none}
.popFormCont input[readonly]{background-color:#fec;border-color:#fda}
.popFormCont .buttons{clear:both;width:100%;text-align:center;padding-top:5px;}
.popFormCont .buttons input{padding:4px 20px;background-color:#69f;color:#fff;border:solid 1px #fff;border-bottom-color:rgba(0,0,0,0.3);border-right-color:rgba(0,0,0,0.3);text-transform:uppercase}
.popFormCont .content{text-align:center;padding:20px;}
#registerCont fieldset{border:solid 1px #ccc;border-radius:3px;}
#registerCont fieldset label{width:55px}
#registerCont fieldset .addr{width:190px}
#registerCont label{width:180px}
.popFormCont .radioCont{display:inline-block;}
.popFormCont .radioCont .radioLbl{width:auto;display:inline;cursor:pointer}
.popFormCont .radioCont .radioLbl input{margin:0}
.popFormCont{top:50px;left:0;right:0;margin:auto;width:580px;}
#addDoctorCont{height:390px;margin-top:-200px;}
#registerCont{height:430px;margin-top:-220px;}
#addDoctorCont .button,#registerCont .button{width:30%}
.patientId{position:absolute;right:18px;top:35px}
.importCont{display:none;position:absolute;background-color:rgba(0,0,0,0.9);font-size:0.6em;color:#fff;right:0;top:4px;width:300px;padding:20px;}
.importCont input{color:#000;padding:0;width:80%}
.importCont input[type=submit]{color:#fff;background-color:#4eb1f6;font-size:1.4em;border:0;width:15%}
a.import.selected{background:rgba(0,0,0,0.9)}
span.fld{background-color:rgba(255,255,255,0.3);padding:5px 4px;display:inline-block;color:#000;margin-left:5px;}
.popFormCont span.fld{padding:3px 2%;margin:0;width:96%;font-size:1.2em;min-height:15px;}
.lType span{display:inline-block;padding:3px 2%;font-size:1.2em;background-color:#ffd;width:96%}
.popFormCont fieldset.client{margin-top:5px;border:solid 1px #ddd;border-radius:3px;padding:4px 4px 8px;font-size:0.9em;}
.popFormCont fieldset.client>legend{font-size:1.2em;}
.popFormCont fieldset.client .field{width:25%;min-height:auto}
.popFormCont fieldset.client .field label{float:left;margin:2px 4px 0 0}
.popFormCont fieldset.client .field input{width:50px}
.popFormCont fieldset.client .totFee{color:#e60;font-size:1.3em;width:12%;text-align:right;padding-top:2px;}
.popFormCont fieldset.Weekly .field{width:40%;margin-bottom:2px}
.popFormCont fieldset.Weekly .field label{width:60%;text-align:right}


#slideCont{background-color:#eee;height:100%;width:100%;position:fixed;z-index:10;top:0;left:100%}
#slideCont h2{float:left;margin:0;color:#fff;padding:2px 20px 0 0;font-size:1.6em;font-family:'jura';text-transform:uppercase;font-weight:normal}
#slideCont .close{width:35px;height:35px;display:block;margin-left:5px;position:absolute;background-color:#e00;font-weight:normal;font-size:20px;font-family:'verdana';line-height:27px;top:0px;right:0px;text-align:center}
#slideCont input,#slideCont select{padding:4px 5px;margin:0 2px;background-color:rgba(255,255,255,0.5);border:none}
#slideCont select{padding:3px 5px;}
#slideCont select[name='loanType']{font-size:1em}
#slideCont input[name='loanId']{width:80px}#slideCont input[name='amount']{width:60px}
#slideCont input[name='tenure'],#slideCont input[name='intDuration']{width:30px}
#slideCont input.fee{width:40px}
#slideCont input[name='interest'],#slideCont input[name='saving'],#slideCont input[name='riskFund'],#slideCont input[name='groupFund']{width:25px}
#slideCont header .lbl{display:inline-block;margin-left:5px;}
#slideCont header .lbl small{text-transform:uppercase;display:block}
#datafields ul{list-style:none;margin:10px;padding:0;}
#datafields li{float:left;padding:5px 10px 5px 28px;margin:2px;border:solid 1px #ccc;background-color:#fff;position:relative}
#datafields li.checked{background-color:#9f9}
#datafields li input[type='checkbox']{position:absolute;left:0;top:0}
#datafields li input[type='text']{display:none;width:12px;position:absolute;left:4px;top:19px;font-size:1em;padding:0 2px}
#datafields li.checked input{display:block}
#datafields li span{color:#999}
#slideCont .saveBtn{position:absolute;bottom:10px;right:10px;padding:5px 20px;text-transform:uppercase;font-size:1.4em}
.loanType{text-transform:uppercase;height:34px;line-height:30px;}
#loanTypePresetData input,#loanTypePresetData select,#loanTypePresetData .lbl,#loanTypePresetData .fld{float:left}
#loanTypePresetData .lbl{line-height:1em;padding:6px 3px 0 0;text-align:right}
#loanTypePresetData .lbl.twol{padding-top:0;width:65px;}

#slideCont #clientFieldsCont input,#slideCont #clientFieldsCont select{box-shadow:0 0 1px #999;width:98%;padding:4px 1%}
#slideCont #clientFieldsCont select{padding:3px 1%}
#slideCont #clientFieldsCont select[name='centreId'],#slideCont #clientFieldsCont h3 select[name='groupNumber']{margin-left:15px;width:auto;padding:2px;font-size:0.7em}
#slideCont .clientListCont{background-color:#ddd;padding:5px;}
#slideCont .clientListCont label{width:165px;text-align:right;display:inline-block;padding-right:10px;text-transform:uppercase}
#slideCont .clientListCont select[name='clId']{width:auto;font-size:1em;font-family:'calibri';margin:0}
#slideCont #clientFieldsCont h3{margin:5px 0;font-family:'jura';text-transform:uppercase;font-weight:normal;font-size:1.6em}
#slideCont #clientFieldsCont label{display:block}
#slideCont #clientFieldsCont .field,#clientDetails .field{float:left;}
#slideCont h3.mapping{background-color:#f60;text-transform:uppercase;font-weight:normal;font-size:1.4em;font-family:'jura';padding:8px 10px 7px;color:#fff;margin:0 0 10px}
#slideCont h3.mapping a{font-size:1em}
.basicInfo{overflow:hidden;}
.basicInfo .photo{width:11%;height:160px;overflow:hidden;float:left;background-color:#f6f6f6;margin-right:1%;position:relative;font-size:0.8em}
.basicInfo .photo>img{width:100%}
#slideCont #clientFieldsCont .basicInfo .photo>input,#clientDetails .basicInfo .photo>input{position:absolute;bottom:0;left:0;margin:0;background:rgba(255,255,255,0.8);font-size:1em;}
.basicInfo .field{width:14%;min-height:50px;margin-right:0.5%}
.basicInfo .field.colspanThree{width:43%}
.fieldsCont{clear:both;overflow:hidden;margin-top:10px;padding:1px 0.5% 1px 0}
.fieldsCont .field{width:24%;min-height:35px;margin-right:1%}
.fieldsCont .field.colspanTwo{width:49%}
#slideCont .fieldsCont .field input[type=checkbox]{margin-right:10px;}
#slideCont #clientFieldsCont .documentsCont .field input[type=file]{font-size:0.8em;padding: 3px 1%}
#loanSection h2 .clientName{font-size:1.4em;color:#f60;font-family:'jura'}
#clientDetails{padding-top:10px;overflow:hidden}
#clientDetails .field{overflow:hidden;width:100%;margin:5px 0;}
#clientDetails label{float:left;width:25%;color:#999;padding-right:1%}
#clientDetails .fldVal{float:left;width:74%;}
#clientDetails .basicInfo .photo{background-color:#fcfcfc;width:10%}
#clientDetails .basicInfo .field{width:78%;min-height:auto}
#clientDetails .basicInfo .field label{text-align:right;}
#clientDetails fieldset{margin:0 2% 0 0;border:solid 1px #ccc;}
#clientDetails fieldset legend{text-transform:uppercase;font-size:1.2em;}
ul.sectionList{list-style:none;column-count:2;margin:20px 0 0;padding:0}
.sectionList li{margin:0 0 15px 0}
#clientDetails div.sectionList fieldset{margin:10px 1% 10px 0;width:calc(48% - 8px);float:left}
#clientDetails div.sectionList fieldset:nth-child(2n){margin-right:0}
#profileSecs{width:100%}
.profileList a.name{color:#69f}
.profileList .actions{width:100px}
.profileList .staffMapping{border:solid 1px #eee;padding:5px 0 7px 10px;margin:5px 0}
.profileList .paygrade select{padding:0 3px;font-size:1em;border:solid 1px #eee}
.profileList tr:nth-child(2n) td .paygrade select{border-color:#fff}
.profileList tr td img{min-height:100px;max-width:100px}
#loans{float:right;width:28%}
.documentsCont .delete,.documentsCont .clear{padding:2px 0;display:inline-block;background-color:#66f;width:50px;text-align:center;margin:2px}
.documentsCont .delete{background-color:#e30}

#slideCont #clientFieldsCont .field.radio label{float:left;width:auto;margin-right:10px;margin-top:4px;cursor:pointer}
#slideCont #clientFieldsCont .field.radio label:first-child{float:none;cursor:default}
#slideCont #clientFieldsCont .field.radio label>input{float:left;width:auto;cursor:pointer}

#slideCont .addMore,#backupDb{padding:2px 5px;background-color:#242;border-radius:3px;display:inline-block}
#slideCont .addMore:before{content:'+';font-size:1.2em;padding:0 5px 0 2px;display:inline-block}
#slideCont .fees{display:none;background-color:#f60;position:absolute;padding:10px;border:solid 1px rgba(255,255,255,0.5);margin:-4px 0 0 10px;z-index:10}
#slideCont .fees div{margin:4px 0}
#slideCont .fees .lbl{width:100px;padding-top:3px}
#slideCont .fees .fee{padding:2px;float:none;font-size:1em}
#slideCont #expandFees{display:inline-block;margin:4px 10px;background-color:#09c;padding:1px 6px;}

.loanId,.clName{color:#09c;font-size:1.2em}
.loanId{font-size:1.4em;text-transform:uppercase;}
.otherInfo{font-size:1em;color:#666}
.date{font-size:1.2em;color:#666;}
.date small{color:#999}
.tabs .tabCont{display:none;background-color:#fcfcfc;border:solid 2px #ddd;overflow:hidden;margin-top:10px;padding:10px;}
.tabs #loanCont.tabCont{display:block}
.tabs .tab{background-color:#666;font-family:'jura';padding:5px 15px;margin-right:5px;text-transform:uppercase;font-size:1.3em}
.tabs .tab.on{background-color:#fcfcfc;color:#000;padding:5px 15px 12px;border:solid 2px #ddd;border-bottom:0;}
.tabs .tabCont form,.loanFilter{background-color:#ffee99;padding:10px;}
.tabCont .field,.loanFilter .field{float:left;min-width:75px;margin-right:5px;}
.tabCont .field label,.loanFilter .field label{display:block;}
.tabCont .field input,.loanFilter .field input{font-size:1em;padding:2px;}
.tabCont .field select,.loanFilter .field select{font-size:1em;padding:1px 2px;width:95%}
.tabCont .tabular .loanId{font-size:1em}
.tabCont input[type='submit'],.loanFilter input[type='submit']{background-color:#0cf;border:0;color:#fff;position:absolute;}
.tabCont form,.loanFilter{overflow:hidden}
.loanFilter{margin-bottom:10px}
#lStartDt,#lEndDt,#sStartDt,#sEndDt,.sdPicker,.edPicker{width:70px;}
.centreInfo{font-family:'jura';}

#loanSection h2,#loanSection h3{font-weight:normal;margin:0;color:#333}
#loanSection h2{font-size:1.2em}
#loanSection h2 .loanId,#loanSection h2 .color{color:#f60;font-size:1.4em;display:inline-block}
#loanSection h2 .loanId{margin-right:10px;text-transform:uppercase}
#loanSection h2 .loanId>small{font-size:0.6em;color:#999}
#loanSection h2 .frequency{display:inline-block;margin-left:20px;}
#loanSection h3{font-family:'jura';font-size:1.4em;text-transform:uppercase;overflow:hidden}
#loanSection h3 a{font-family:'calibri';display:inline-block;margin-left:4px;padding:2px 8px;background-color:#39f;font-size:0.8em}
#loanSection .loanInfo{background-color:rgba(255,255,255,0.4);border:solid 1px rgba(255,255,255,0.6);overflow:hidden;margin:10px 0;font-size:1.2em;color:#666;}
#loanSection .dispursedAmt{font-family:'calibri';font-size:0.8em}
#loanSection .dispursedAmt .amount{color:#f60;font-size:1.2em}
.loanInfo .paymentDue{padding:10px 2%;background-color:#fff}
.loanInfo small{color:#999;display:inline-block;padding-right:10px;}
.loanInfo #capitalPaid, .loanInfo #interestPaid, .loanInfo #capitalDue, .loanInfo #interestDue{font-size:1.2em}
.loanInfo #capitalPaid, .loanInfo #interestPaid{color:#3c0;}
.loanInfo #capitalDue, .loanInfo #interestDue{color:red;}
.loanInfo .leftCol,.loanInfo .rightCol{margin:10px 0;min-height:70px;}
.loanInfo .leftCol{padding:0 1.5%;border-right:solid 1px #fff;width:40%;}
.loanInfo .rightCol{padding:0 0 0 1.5%;border-left:solid 1px #ccc;width:52%;}
.loanInfo label{color:#666;display:inline-block;}
.loanInfo label.lbl{width:120px;}
.loanInfo .short{width:100px;margin-right:15px;display:inline-block}
.loanInfo .short.name{width:210px;}
.repay .amount,.repay .pfor{float:left;width:54%;margin:0 1%}
.repay .amount{text-align:right;width:42%}
#centreList td ol{margin:0;padding-left:20px;}
#centreList td ol li{margin:4px 0;}
#centreList td a.loanId{font-size:1em}
#centreList .subhead th{width:150px}
.totGrp1,.totGrp2 {table-layout:fixed}
.totGrp1 .grp ol{column-count:4;column-gap:35px}
.totGrp2 .grp ol{column-count:2;column-gap:35px}
.totGrp1 .grp ol li,.totGrp2 .grp ol li{min-height:35px;page-break-inside:avoid;break-inside:avoid-column;-webkit-column-break-inside:avoid}

#collectionChart{background-color:rgba(255,255,255,0.7);width:47%;float:left}
.chart{position:relative;}
.chart h2{text-align:center;position:absolute;color:#666;text-transform:uppercase;font-weight:normal}
#collectionChart svg{width:220px;height:220px}
#collectionChart .legend{width:50%;float:right}
#collectionChart .chart h2{width:100px;top:60px;left:60px;}
#collectionChart .chart .tot{margin:10px;text-align:center;font-size:1.2em;text-transform:uppercase;color:#666}
#collectionChart .chart .tot .rs{font-size:1.4em}
#collectionChart .chart .tot .amt{font-size:2em;color:#333;}
.chart .label{overflow:hidden;margin:3px 0;font-size:1.2em}
.chart .label span,.chart .label label{float:left}
.chart .label span{text-align:right}
.chart .label span.amt{width:75px;line-height:1.4em}
.chart .label span.pc{color:#666;width:50px;font-size:0.8em;line-height:1.8em}
.chart .label label{margin-left:5px;padding:1px 0 1px 5px;border-left-style:solid;border-left-width:5px;color:#666;}

#overview{width:45%;margin-right:5%;float:right}
.box{overflow:hidden;border:solid 1px #ddd;border-bottom-width:3px;background-color:rgba(255,255,255,0.7);}
.box h2{background-color:#ddd;padding:5px 10px;text-transform:uppercase;font-weight:normal;margin:0}
.box .lb{padding:2%;width:46%}
.box .val,.box label{margin:2px 0}
.box .val{width:50%;text-align:right;display:inline-block;font-size:1.2em}
.box .val .rs{color:#f90;font-size:0.8em}
.box label{width:49%;display:inline-block;margin-left:1%;color:#666}

.totTransAmt{position:absolute;text-transform:uppercase;right:20px;text-align:right;line-height:1.2em}
#totTransAmt{top:90px;}
#totTransCD{top:80px;}
#totTransAmt .amt{color:#f60;font-size:1.4em;}
#totTransCD .green,#totTransCD .red{font-size:1.4em;}
.thumbs .thumb{width:40px;height:40px;display:inline-block;overflow:hidden;margin:4px 5px 0 0}
.thumbs .thumb img{width:100%;height:auto;}
.docSection{min-height:auto;}
.docSection td img{float:left;margin:0 5px;}

.loanBox{background-color:#fff;margin-bottom:20px;font-size:1.2em}
.loanBox h2{background-color:#ccc;text-transform:uppercase;padding:4px 10px;text-align:center}
.loanBox h2 a{color:#09f;font-weight:bold}
.loanBox hr{border:solid 1px #ccc;border-width:1px 0 0;margin:2px 10px;}
.loanBox #loanDetails{padding:10px}
.loanBox #loanDetails table{width:100%}
.loanBox #loanDetails .lbl{text-align:right;width:49%;color:#999}
.loanBox #recoveryDetails{padding:0 10px 10px;}
.loanBox #recoveryDetails h4{font-size:1.2em;font-weight:normal;margin:0;text-align:center;padding:5px 0;text-transform:uppercase}
.loanBox #recoveryDetails .val{width:45%;display:inline-block;text-align:right;padding:2px 4px}
.loanBox #recoveryDetails .val .rs{color:#f90;font-size:0.9em}
.loanBox #recoveryDetails .lbl{color:#999;padding:2px 0;display:inline-block}

.printResult,.printAccResult{border:none;margin:4px;float:right;cursor:pointer}
.accType{font-style:italic;display:block;color:#690}
#receipt{display:none}
.popFormCont input.partial{width:50px;margin-left:5px;padding:0 4px;border-left-color:#ddd}
.status{text-transform:uppercase}
.approved,.totPayrollAmt strong{color:#090}
.dispursed{color:#6bb}
.verified, .Verified{color:#f90}
 .Confirmed, .confirmed{color:#0dc}
.Approved,.totPayrollAmt strong{color:#090}
.Dispursed{color:#6bb}
.disapproved,.rejected,.Rejected, .Cancelled, .cancelled{color:#cc0000}
.new,.New{color:#000;}
.Modified{color:#099;}

.totPayrollAmt{text-transform:Capitalize;padding-left:20px;font-weight:normal}

.clearDt{position:absolute;padding:2px 4px 3px;font-size:10px;background:#f30;color:#fff;border-radius:2px}
/*.ui-timepicker-div dt{float:left;margin:2px 0 0;float:left;width:22%;clear:both}
.ui-timepicker-div dd {margin:2px 0 0;float:left;width:75%}
.ui-timepicker-div .ui_tpicker_hour,.ui-timepicker-div .ui_tpicker_minute{margin:7px 0 5px}
.ui_tpicker_second,.ui_tpicker_millisec{display:none}
.ui-timepicker-div .ui-slider-horizontal{height:6px}
.ui-timepicker-div .ui-slider-handle{height:12px;width:8px;margin-left:-4px;top:-4px}
.ui-timepicker-div .ui-corner-all{border-radius:2px;}
*/
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{padding:0;box-sizing:border-box}

.nano {position :relative;overflow:hidden;}
.nano .content {position: absolute;overflow: scroll;overflow-x:hidden;top:0;right:2px;bottom:0;left:20px;border:none;}
.nano .content:focus {outline:thin dotted;}
.nano .content::-webkit-scrollbar {visibility: hidden;}
.has-scrollbar .content::-webkit-scrollbar {visibility: visible;}
.nano > .pane {background : rgba(0, 50, 90, 0.2);position:absolute;width:10px;right: 0;top: 0;bottom: 0;
  visibility: hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity: .01; 
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  border-radius         : 5px;
}
.nano > .pane > .slider {background: rgba(0,0,0,.5);position: relative;margin: 0 1px;border-radius: 3px;}
.moreInfo .nano > .pane > .slider{background:rgba(0, 50, 90, 0.8);}
.nano:hover > .pane, .pane.active, .pane.flashed {visibility : visible\9; /* Target only IE7 and IE8 with this hack */opacity: 0.99;}
.pagination{padding:5px 0}
.pages a, .pagination a{background-color:#69f; padding: 1px 5px;}
.pages a.on, .pagination a.on{background-color:#fff; color:#000; box-shadow:0 0 1px #666;}

.nxt,.prv{display:inline-block;margin:0 10px;padding:2px 5px 1px;background-color:#69f;font-weight:normal;font-size:0.8em;}
.calendarTbl{position:relative;}
.calendarTbl th,.calendarTbl td{text-align: center;
    vertical-align: middle;
  padding: 5px 4px;
  background-color: #f6fcff;
  border-bottom: solid 3px #f6f6ff;
   border-right: solid 3px #f6f6ff;
 border-left: solid 3px #fff;
border-top: solid 3px #fff;
  text-transform: uppercase;
}

.attcalView.calendarTbl th,.attcalView.calendarTbl td{text-align: center;
  vertical-align: middle;
  padding: 5px 4px;
  background-color: #f6fcff;
  border-bottom: solid 3px #f6f6ff;
   border-right: solid 3px #f6f6ff;
 border-left: solid 3px #fff;
border-top: solid 3px #fff;
  text-transform: uppercase;
}

.calendarTbl td{height:60px;width:14%}
.calendarTbl .day-number{font-size:1.4em;color:#000}
.calendarTbl td.onLeave{cursor:pointer;color:#69f}
.calendarTbl td.onLeave.on{background-color:#666;color:#fff}
.calendarTbl td.onLeave.on a{color:#666}
.calendarTbl td.onLeave a{color:#69f}
.calendarTbl ol.leaveList{list-style:inside decimal;position:absolute;background-color:#666;padding:20px;margin:0;display:none;color:#fff;text-align:left;width:calc(100% - 40px);left:0;column-count:3;cursor:default}
.calendarTbl div.leaveList{position:absolute;background-color:#666;padding:20px 20px 30px;margin:0;display:none;color:#fff;text-align:left;width:calc(100% - 40px);left:0;}
.calendarTbl td.onLeave .leaveList a{color:#fff;margin-bottom:0}
.calendarTbl .staffNm{padding-right:10px}
.calendarTbl .leaveList div{padding-bottom:10px;float:left;width:33%;margin-right:0.5%}
.calendarTbl .leaveList div:nth-child(3n){margin-right:0}
.calendarTbl .leaveList .reason{display:block;font-style:italic;color:#d96}
.calendarTbl tr.mnthHead{position:absolute}
.calendarTbl tr.mnthHead td{height:auto;text-transform:uppercase;background-color:#fc9;color:#000;padding:2px 5px;width:auto}
.tabular .calendarTbl .calendar-row0 td,.tabular .calendarTbl .calendar-row2 td,.tabular .calendarTbl .calendar-row4 td,.tabular .calendarTbl .calendar-row6 td{background-color:#f6f6f6}
.tabular .calendarTbl .calendar-row1 td,.tabular .calendarTbl .calendar-row3 td,.tabular .calendarTbl .calendar-row5 td,.tabular .calendarTbl .calendar-row7 td{background-color:#fff}
.calendarTbl td.holiday,.calendarTbl td.holiday .day-number{color:#a6700d;padding:4px 10px; background:#f9f6f6;}
.calendar-day.late {background: #4bb14b4f; color:red;}
.calendar-day.present {background: #4bb14b4f; color:green;}
.calendar-day.absent {  background: #ff000070; color:red;}
.calendar-day.leave {  color: orange;  background: #ffa5003d;}

.warning{float:left;width:100%;background-color:#fff;border:solid 1px #eee;margin-right:1%;margin-bottom:20px; color:red;}
.warning h2{margin:0;padding:3px 8px 3px 10px;background-color:#eee;border-bottom:solid 1px #eee;text-transform:uppercase;font-weight:normal;}
.dbox{float:left;width:48%;background-color:#fff;border:solid 1px #eee;margin-right:1%;margin-bottom:20px}
.dbox h2{margin:0;padding:3px 8px 3px 10px;background-color:#eee;border-bottom:solid 1px #eee;text-transform:uppercase;font-weight:normal;font-size:1.2em}
.dbox h2 small{color:#666}
.dbox h2 a{float:right;font-size:0.8em;padding:0 5px;}
.dbox ol{padding-left:0 10PX 0 25px}
.dbox .btns{margin-bottom:5px;}
.dbox .btns a{color:#09f;display:inline-block;margin-right:5px;border-radius:3px;box-shadow:0 0 2px #ccc;padding:0 4px 1px;}

.newsList .btns{margin-bottom:5px;}
.newsList .btns a{color:#09f;display:inline-block;margin-right:5px;border-radius:3px;box-shadow:0 0 2px #ccc;padding:0 4px 1px;}
.newsList li{margin-bottom:15px}
.attsummary{font-weight:bold;display: flex;  padding: 10px 4px;  background: #fff;text-transform:uppercase;}

.present{color:#055905;padding:4px 12px; background:#4bb14b4f;}
.absent{color:#d90c0c;padding:4px 12px; background:#ff000070;}
.noroster{padding:4px 12px;}
.roster{padding:4px 12px; background: #ccc3c3;}
.leave{color:#d90c0c;padding:4px 12px; background:#ffa500f7;}
.leave.Paid{color:#393732;padding:4px 12px; background:#f7a0009c;}
.totaldays{color:#000;padding:4px 10px; background:#e6f0f5;}
.late{color:red;}
.holiday{color: #aa0808;  padding:4px 10px;  background:#cdcecc;}
.off{color:#a6700d;padding:4px 7px; background:#f9f6f6;}


.ttl{padding:4px 10px; background:#e6f0f5}
#leaveRec{float:right;padding:10px;width:calc(35% - 20px)}
.halfday, .halfday.leave.Paid{padding:4px; width:50%}
#staffAttendance { display: flex;flex-wrap: wrap;}
.attblock {background-color: #fff;    border: solid 1px #ddd;    padding: 10px;    margin: 5px;    width: calc(18% - 5px);position: relative;}
#leaveRec h2{font-family:'jura';margin-bottom:5px;font-size:1.4em}
#leaveRec table{border-collapse:collapse;border-color:#ccc;width:100%}
#leaveRec table th,#leaveRec table td{border-color:#ccc;padding:2px 5px;text-align:left}
#emp_records{ margin:10px;background-color: #fff;  border: solid 1px #eee;}
#emp_records h2{margin: 0;  padding: 3px 8px 3px 10px;  background-color: #eee;  border-bottom: solid 1px #eee;  text-transform: uppercase; font-size: 1.2em;}
#emp_records table{border-collapse:collapse;border-color:#ccc;width:100%}
#emp_records table th{text-align:center; border-color:#ccc;padding:2px 5px;}
#emp_records table td{border-color:#ccc;padding:2px 5px;text-align:left}
.listView, .calendarView{width:20px;height:13px;display:inline-block;background:url('../images/list_view.png') no-repeat center center;background-size:auto 100%;position:absolute;margin:2px 0 0 4px}
.calendarView{background-image:url('../images/cal_view.png')}


.monthView table{width:100%}
.monthView .comment{width:30%}
.monthView td{padding:4px 0; background-color:#fff;vertical-align:top;color:#666;}
.monthView td .hd{}
.monthView tr:nth-child(even) td{background-color:#f6f6f6;}
.monthView td .absent, .monthView td .present, .monthView td .leave, .monthView td .roster{padding:2px 10px;}
.monthView td .off{padding:2px 5px;}
.monthView td .halfday.leave, .monthView td .halfday.absent, .monthView td .halfday.present, .monthView td .halfday.roster{padding:3px;}

@supports (-webkit-appearance:none) {.tabs .tab.on{padding-bottom:13px}}


#mobileMenu{position: fixed;top: 0;left: 0;width: 100%;display: none;}
#mobileMenu ul {margin:0;padding:0}
#mobileMenu ul li{display:block;background-color:#046;color: #fff;letter-spacing: 0.1em;text-align: center;text-transform: uppercase;border-bottom: 1px solid #258;}
#mobileMenu ul li a{padding: 10px 0;display:block;color:#fff;}
.toggleMobile{display: none;}


#mobileMenu2{position: fixed;top: 100px;right:0;width: 100%;display: none;}
#mobileMenu2 ul {margin:0;padding:0}
#mobileMenu2 ul li{display:block;background-color:#046;color: #fff;letter-spacing: 0.1em;text-align: center;text-transform: uppercase;border-bottom: 1px solid #258;}
#mobileMenu2 ul li a{padding: 10px 0;display:block;color:#fff;}
.toggleMobile1{display: none;}



.calendarTbl{width:100%}
.eye{display:inline-block;padding:8px;margin:0 0 0 10px;background:url('../images/eye.png') no-repeat center 1px transparent;background-size:100%}
.eye.show{background-position:center -25px}
.newPass label,.newPass input{text-align:center}
.newPass input[type="password"],.newPass input[type="text"]{width:calc(100% - 40px)}

#staffDetails .sexAge,#staffDetails .phNo,#staffDetails .staffRole{font-size:0.8em;font-weight:normal}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {padding:2px 1%;width:98%;-moz-appearance:textfield;
}

#flashMsg{position:fixed;background-color:rgba(0,0,0,0.8);height:100%;width:100%;z-index:90000;top:0;box-sizing:border-box;display:none;transition: visibility 0s, opacity 0.5s linear;}
#flashMsg .msg{background-color:#fff;padding:10px 20px;border:solid 2px #999;border-radius:2px;color:#000;position: fixed;min-width:180px;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.assignStaff{display:inline-block;font-size:0.7em;text-transform:uppercase;background-color:#093;padding:2px 5px;border-radius:3px}
/*.removeStaff{display:inline-block;background:url('../images/delete.png') center center no-repeat;padding:8px;}*/
.removeStaff{display:inline-block;margin:0 8px;width:12px;text-align:center;height:12px;background-color:red;line-height:10px;border-radius:10px}
.sComment{display:inline-block;background:url('../images/remark_icons.png') left -23px no-repeat;padding:8px;float:right;position:relative;z-index:1;}
.sComment span,.staffList small span{position:absolute;padding:5px;border:solid 1px #ccc;box-shadow:0 0 5px;background-color:#666;display:none;min-width:140px;right:1px;top:10px;font-size:0.9em}
.staffList{margin:0;padding:5px 0 5px 12px;}
.tabular tbody tr.sectionRow td{text-align:center;background-color:#fed;text-transform:uppercase;color:#000;font-size:1.4em;font-weight:bold}
.prevW,.nextW{display:inline-block;padding:1px 5px;margin:0 5px;background-color:#39f;}
.weekNav, .weekNave{font-size:0.8em;font-weight:normal;}
.mnyr {  font-size: 0.8em;  text-transform: none;font-family: abel;}
.weekNav select,.weekNave select{font-size:1em;padding:2px 0 2px 5px;box-shadow:0 0 3px #999;margin:8px 1px 0;border:solid 2px #fff}
.scat , .attd , .viewMode{display:inline-block;margin-left:5px;background-color:#fed;color:#000;font-weight:normal;font-size:0.8em;padding:4px 5px;border:solid 2px #fff;position:relative;top:10px;font-family:'jura'}
.scat.on, .attd.on{background-color:#f6fcff;top:11px;border-bottom:0;box-shadow:1px -2px 2px #ccc;padding-bottom:10px}
.staffList small{background-color:#900;color:#fff;float:left;padding:0 3px;margin:2px 4px 0 0;font-size:0.7em;position:relative}
.staffList small.present,.staffList small.training{background-color:green;cursor:pointer}
.staffList small.late1,.staffList small.training{background-color:orange;cursor:pointer}
.staffList small.late2{background-color:red;cursor:pointer}
.staffList small span{font-size:1.2em}
/* responsive layout */
.downloadExcel, .downloadAxis,.downloadNonaxis{background:url('../images/excel_icon.png') 5px center no-repeat #9dc;display:inline-block;padding:1px 6px 4px 24px;margin-top:13px;margin-bottom:3px;font-size:0.8em;text-transform:uppercase;font-weight:normal;background-size:auto 65%}
.downloadExcel #export{background-color:transparent;border:none;cursor:pointer}
.tabular tbody tr.sectionRow td{border-top:solid 5px #fff;}
.tabular tbody tr.color1 td{background-color:#dff;}.tabular tbody tr.color1.sectionRow td{background-color:#d3f3f3;}
.tabular tbody tr.color2 td{background-color:#def;}.tabular tbody tr.color2.sectionRow td{background-color:#d3e3f3;}
.tabular tbody tr.color3 td{background-color:#edf;}.tabular tbody tr.color3.sectionRow td{background-color:#e3d3f3;}
.tabular tbody tr.color4 td{background-color:#fef;}.tabular tbody tr.color4.sectionRow td{background-color:#f3e3f3;}
.tabular tbody tr.color5 td{background-color:#fdd;}.tabular tbody tr.color5.sectionRow td{background-color:#f3d3d3;}
.tabular tbody tr.color6 td{background-color:#fed;}.tabular tbody tr.color6.sectionRow td{background-color:#f3e3d3;}
.tabular tbody tr.color7 td{background-color:#ffe;}.tabular tbody tr.color7.sectionRow td{background-color:#f3f3e3;}
.tabular tbody tr.color8 td{background-color:#ffc;}.tabular tbody tr.color8.sectionRow td{background-color:#f3f3c3;}
.tabular tbody tr.color9 td{background-color:#dfc;}.tabular tbody tr.color9.sectionRow td{background-color:#d3f3c3;}
.tabular tbody tr.color10 td{background-color:#dfe;}.tabular tbody tr.color10.sectionRow td{background-color:#d3f3e3;}
.tabular tbody tr.color11 td{background-color:#dff;}.tabular tbody tr.color11.sectionRow td{background-color:#d3f3f3;}
.tabular tbody tr.color12 td{background-color:#def;}.tabular tbody tr.color12.sectionRow td{background-color:#d3e3f3;}
.tabular tbody tr.color13 td{background-color:#edf;}.tabular tbody tr.color13.sectionRow td{background-color:#e3d3f3;}
.tabular tbody tr.color14 td{background-color:#fef;}.tabular tbody tr.color14.sectionRow td{background-color:#f3e3f3;}
.tabular tbody tr.color15 td{background-color:#fdd;}.tabular tbody tr.color15.sectionRow td{background-color:#f3d3d3;}
.tabular table.fundTbl td a{text-transform:uppercase}
td.aright{text-align:right}
.tabular tbody tr.color1 td{background-color:#def;}.tabular tbody tr.color1.sectionRow td{background-color:#d3e3f3;}
.tabular tbody tr.color2 td{background-color:#fff;}.tabular tbody tr.color2.sectionRow td{background-color:#fff6f0;}
a.extLink{color:#36c}
.flex{display:flex}
.wrap{flex-wrap:wrap}
.aright{text-align:right;}
.teamCont{padding:5px 10px;margin:4px;background-color:#ffe;border:solid 1px #fed}
.teamName{text-transform:uppercase;color:#000}
.leader{color:#000}
.addTL,.editTL{padding:0 3px;display:inline-block;margin-left:5px;background-color:#393;}
.editTL{background-color:#e90;}
.tlFor {margin:10px 0}
.tlFor .name{display:inline-block;margin:0 5px 5px 0;background-color:#fff;padding:2px 5px;border:solid 1px #ddd}
.intime,.outtime{margin:10px 5px 0 20px;display:inline-block}
.outtime{margin-left:0}
.outtime:before{content:" ------ ";display:inline-block;margin-right:5px}
.noroster .day-number{color:#999}
.attachment{cursor: pointer;  padding: 1px 4px;  text-transform: uppercase;  background-color: #fed;  display: inline-block;  border-radius: 3px;  font-size: 0.8em;  border: solid 1px #fff;  color: #000;}
.desig{font-style:italic}
.fundfrom, .viewlog{cursor:pointer;padding:1px 4px;text-transform:uppercase;background-color:#fed;display:inline-block;border-radius:3px;font-size:0.8em;border:solid 1px #fff;color:#000}
.reqDet ul{margin:0;list-style:none;padding:5px;background-color:#fed;}
.reqDet strong{color:#333}
.popFormCont .note{clear:both;text-align:center;padding-top:15px;font-style:italic}
.tabular .inprob td{background-color:#ffe}
.tabular tr.inprob:nth-child(2n) td{background-color:#fed}
.prob{color:#f90;font-weight:bold}
.dbox .inprob{padding:0;margin:10px}
.dbox .inprob .name{color:#f90;font-weight:bold;display:block}
.dbox .inprob li{border:solid 1px #fed;padding:5px;margin:0 10px 10px 0;display:inline-block;box-sizing:border-box;}
.dbox .inprob li::before{}
.permanent{margin:0 4px 4px 0;padding:2px 5px;display:inline-block;background-color:#3c6}
#staffAttendance{display:flex;flex-wrap:wrap;}	
.staffList .in,.staffList .out{display:block}
.staffList .out{background-color:#039;}
.staffList .holiday{background-color:#090;}
.attblock{background-color:#fff;border:solid 1px #ddd;padding:10px;margin:5px;width:calc(18% - 5px);position:relative}
.attblock:nth-child(5n){margin-right:0}
.attblock .sl{position:absolute;line-height:16px;width:25px;height:18px;border-radius:3px;text-align:center;background-color:#ddd;left:-1px;top:-1px}
.attblock .hd{display:block;text-transform:uppercase; padding: 10px 0;}
.attblock .designation{color:#e90;font-style:italic}
.attblock label{color:#666}
.attblock strong{color:#090;font-size:1.2em}
.tMenu{padding:10px 0 6px 1px}
.tMenu li{display: inline-block;  text-align: center; text-transform:uppercase;}
.tMenu li a{background: #4e4751db;  padding: 6px 20px;}
.tMenu li a.on {background:#f0f0f2f2; color:#000;}
.staffAttendance.tabular.mainCont {  margin-bottom: 20px;}
.dayView{background:#f0f0f2f2;}
tr.Hold{background-color:#ffe}

@media (max-width: 1000px)
{
	#profileSecs, #leaveRec{float:none;width:auto;}
	#leaveRec{padding:20px 0;}
	#clientDetails div.sectionList fieldset{width:calc(98% - 8px)}
	.tabular .hide{display:none}
	.tabular .nowrap{white-space:nowrap}
}

@media (max-width: 960px)
{
	#formSection, #contentTop{width:auto}
	.box{width:29%;padding:2%;float:left;min-height:250px;}

	
}

/*@media (max-width: 820px)
{
	#formSection, #contentTop, footer{width:100%}
	.box{width:29%;padding:2%;float:left;min-height:250px;}
}
*/
@media (max-width: 765px)
{
	body{background:#f6f6ff;}
	
	.loginpage{width: auto; margin: auto;}
	.app_info, .applogin{width:100%;}
	.app_info {  border: none; margin-top:40px;}
	.app_info .logo {   text-align: center;  width: 100%;margin:0}
	.app_info .logo > img{width:200px}
	
	.applogin #loginSec {   margin: 50px auto;}
	
	#formSection, #contentTop, footer{width:100%}
	.box{width:44%;padding:3%}
	.dbox{width:100%;display:block;margin-top:10px}
	#formSection .box{border-bottom:solid 1px #ccc;}
	#formSection section:nth-child(2){background-color:rgba(150, 180, 100, 1);border:none;}
	#formSection section:nth-child(4){border:none}
    .popFormCont{position:absolute;}
	header nav{right: auto;bottom: auto;left: 50%;top:100px;margin-left: -184px;}
	footer{height: auto;font-size:0.9em}


	#mobileMenu{display: block;z-index: 99; overflow:scroll; height:100%}
	.toggleMobile{position: fixed;top:5px;left:5px;display: block;width:30px;height:28px;cursor: pointer;z-index: 999;}
	.toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3{display: block;position: absolute;width:30px;height:6px;left: 0;background: #06a;
			-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
			transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile span.menu1{top: 0;}
	.toggleMobile span.menu2{top: 10px;}
	.toggleMobile span.menu3{top: 20px;}
	.toggleMobile.active span.menu1{top: 10px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
	.toggleMobile.active span.menu2{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
	.toggleMobile.active span.menu3{opacity: 0;-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
	
	
	
	#mobileMenu2{display: block;z-index: 99; overflow:scroll;}
	.toggleMobile1{position: fixed;top:100px;right:5px;display: block;width:30px;height:28px;cursor: pointer;z-index: 999;}
	.toggleMobile1 span.menu5, .toggleMobile1 span.menu6, .toggleMobile1 span.menu7{display: block;position: absolute;width:30px;height:6px;left: 0;background: #000;
			-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
			transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
	}
	.toggleMobile1 span.menu5{top: 0;}
	.toggleMobile1 span.menu6{top: 10px;}
	.toggleMobile1 span.menu7{top: 20px;}
	.toggleMobile1.active span.menu5{top: 10px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
	.toggleMobile1.active span.menu6{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
	.toggleMobile1.active span.menu7{opacity: 0;-webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);}
	
	nav.main{display:none;}
	.calendarTbl .leaveList{list-style:decimal;column-count:1;cursor:default}
	.calView, .tabular, #staffDetails{padding:0 5px;}
	.mainCont{padding-left:20px;}
	#clientDetails .basicInfo .photo{height:200px;text-align:center}
	#clientDetails .basicInfo .photo img{width:auto;height:100%;}
	table {border: 0;}
	.tabular table thead{display:block}
	.tabular table.fundTbl thead{display:block}
	.tabular table th.comment{width:auto}
    .tabular table th {display:block;}
	.tabular table tr {margin-bottom: 10px; display: block; border:1px solid #9cf}
    .tabular table tr:after {content: "";display: table;clear: both;}
    .tabular table tr:before { display: block;}
    .tabular table td {box-sizing: border-box; display: block; float: left; clear: left; width: 100%;text-align: left; font-size: 13px;}
	.tabular table td.sl{position:absolute;border-radius:10px;width:20px;height:20px;text-align:center;margin:-6px;color:#000;background-color:#cdf;line-height:16px;padding:0;border:solid 1px #9cf;border-width:1px 0 0 1px}
	.tabular table td.hd{background-color:#cdf;color:#000;padding-left:12px}
    .tabular table td:last-child {border-bottom: 0;}
    .tabular table td:before {content: attr(data-label); font-style: italic; text-transform: initial; font-weight: bold;}
	.tabBtn {display:block; padding: 7px 10px; text-align: center;}
	.tabBtn.on { background-color: #9c9; color: #000; padding: 7px 10px; Text-transform:uppercase;}
	.editBtn, .activateBtn, .deactivateBtn, .verifyBtn, .invoiceBtn, .allNews, .suborderBtn, .editStaff, .deleteStaff, .saveBtn, .serviceDetails, .backBtn, .logBtn, .editClient, .addService, .view, .renewService { padding: 6px; text-align: center; width: 28%;}
	.calendarTbl td.onLeave a{display:none}
	.calendarTbl td.onLeave .leaveList a{display:inline-block}
	.calendarTbl .staffNm,.calendarTbl .staffNm small{display:block}
	.settingsMenu{top:65px}
	

	#slideCont #clientFieldsCont .field, #clientDetails .field,.basicInfo .photo,#clientDetails .basicInfo .photo{float:none;width:92%}
	.basicInfo .photo{margin-bottom:10px}
	#clientDetails .basicInfo .photo{margin:0 auto 10px auto}
	#slideCont .saveBtn{right:8%}

	#profileSecs,#leaveRec{float:none;width:100%;padding:5px 0}
	#clientDetails div.sectionList fieldset{width:100%;box-sizing:border-box}
	#staffDetails .back{position:static;margin:5px 0 0;padding:2px 5px 3px;display:inline-block}

	.weekNav{margin:22px 2px 10px 0}
	.downloadExcel{margin:20px 7px 10px}
	.scat.on{border:solid 2px #fff;top:10px;box-shadow:0 0 2px #999;}
	.tabular tbody tr.sectionRow td{border:none}
	.profileList .actions{width:auto}
	.attblock{width:100%}
}

@media (max-width: 500px)
{
	a.swLogo{position:absolute;top:0;left:0;width:100%; height:88px}
	.login #loginSec{width:90%}
	#loginInfo{float:none;margin:86px 10px 0px;text-align:center;padding-top:8px}
	#formSection, #contentTop, footer{width:100%}
	.box{float:none;display:block;width:auto;padding:20px;min-height:auto}
	#formSection .box{border-bottom:solid 1px #ccc;}
	#formSection .box:last-child{border:none}
	.popFormCont{position:fixed;width:95%;top:8px;height:95%;overflow:auto} 
	.popFormCont .field{width:98%}
	.popFormCont label,.popFormCont input,.popFormCont select,.popFormCont textarea{text-align:center}
	.tabular{padding:0 5px;}
	.tabular .hide{display:none}

    

	.tblTop {background-color: #f6f6f6; margin-top: 20px; padding: 5px;}
	 /*RESPONSIVE FOR TABLE IN MOBILE VIEW*/

	table {border: 0;}
	
    .tabular table tr {margin-bottom: 10px; display: block; width:auto}
    .tabular table tr:after {content: "";display: table;clear: both;width:100%}
    .tabular table tr:before { display: block;   border-bottom: none;}
    .tabular table td {box-sizing: border-box; display: block; float: left; clear: left; width: 100%; text-align: left; font-size: 13px;}
	.tabular table td.sl{position:absolute;border-radius:10px;width:20px;height:20px;text-align:center;margin:-6px;color:#000;background-color:#cdf;line-height:16px;padding:0;border:solid 1px #9cf;border-width:1px 0 0 1px}
	.tabular table td.hd{background-color:#cdf;color:#000;padding-left:12px}
	.tabular table td:last-child {border-bottom: 0;}
    .tabular table td:before {content: attr(data-label); font-style: italic; text-transform: initial; font-weight: bold;}

}