@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');}
@font-face {font-family:'mm';src: url('EPAOMAYEK.TTF') format('truetype');}
@font-face {font-family:'roboto_cr';src: url('RobotoCondensed_Regular.ttf');}
@font-face {font-family:'roboto_crl';src: url('RobotoCondensed_light.ttf');}
@font-face {font-family:'popins';src: url('Poppins-Regular.ttf');}
@font-face {font-family:'mohave_l';src: url('mohave.light.ttf');}
@font-face {font-family:'mohave_r';src: url('mohave.regular.ttf');}
@font-face {font-family:'mohave_m';src: url('mohave.medium.ttf');}
@font-face {font-family:'mulish_el';src: url('Mulish-ExtraLight.ttf') format('truetype');}
@font-face {font-family:'mulish_l';src: url('Mulish-Light.ttf') format('truetype');}
@font-face {font-family:'mulish_r';src: url('Mulish-Regular.ttf') format('truetype');}
@font-face {font-family:'roboto_r';src: url('RobotoCondensed_Regular.ttf') format('truetype');}

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;}
body.login header{display:none}
body.index{background-position:left top}
body.leaves{padding-bottom:65px}

.comlogo{width:120px;}
.loginpage {display: flex;  flex-wrap: wrap; width:1170px; margin:100px auto 0; justify-content: center;}
.login{}
.customer-toggle{display:flex; margin:10px 0; padding: 10px 0;}
.printLOR , .printBtn{color: white;
  display: inline-block;
  background-color: #0b550f;
  padding: 2px 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.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{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 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;}
.login_left.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; 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;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}
.displayInfo{padding:10px;}
.blockHalf{width:50%}
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,h4,h5{padding:0;margin:0}
h5{font-family:roboto_cr;font-size:14px;padding:0;margin:0;}

.moduleName{padding:3px 20px 2px 182px;margin-bottom:20px}
.backtoprevious{height:22px;margin:14px auto;}
a.back{position:absolute;background-color:rgb(129,58,10);color:#fcf8f5;padding:6px 6px;box-shadow:0 0 2px 0}
a.back.previous{position:absolute;background-color:#ff9;color:#f60;padding:4px 5px;box-shadow:0 0 2px 0}

a.type{color:#475db7;text-transform:uppercase;font-weight:bold;text-decoration:underline;}
a[status="comment"]{background-color:#348208;}
.attachment-link{margin:0;display:inline-flex;align-items:center;gap:5px;color:#555;}
.attachment-icon{display:inline-block;width:16px;height:16px;background:url('images/attach_file.png') no-repeat center center;background-position:center;}
.extLink{color:#0066cc;text-decoration:none;}
.extLink:hover{text-decoration:underline;}

.scrollable-table-container{margin:10px 0;overflow-y:scroll;border:1px solid #e0e0e0;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.1);margin-bottom:20px;max-height:50vh;}
.popFormCont li input[type="text"],.popFormCont li select{width:calc(19% - 9px);margin:2px;}

.popup_inner_table{width:100%;border-collapse:collapse;}
.popup_inner_table thead th{position:sticky;top:0;background:#ccc;color:#000;padding:4px;text-align:center;z-index:1000;}
.changeModel{background-color:#f45f06;font-size:0.9em;margin:2px 10px;padding:2px 6px;}
.popup_inner_table tbody td{padding:4px 6px;border-bottom:1px solid #e0e0e0;}
.popup_inner_table tbody tr:nth-child(even){background-color:#f9f9fa;}
.popup_inner_table tbody tr:hover{background-color:#e9f7fe;}
.popup_inner_table tbody tr:last-child td{border-bottom:none;}
.sl-no{text-align:center;width:20px;font-weight:bold;color:#555;}
.scrollable-table-container table th:nth-child(1){width:25px;}

.status{text-transform:uppercase}

.status.Account.Approved,.status.MSGA.Approved,.status.Available,.status.TransferApproved {color:green;}
.status.VinRequested,.status.TransferRequested,.status.VinAllocated, .status.Requested, .Request.DO {color:#f45f06;}


.status.Open{color:#f60;}
.status.TransitDamaged,.status.InternalDamaged{color:#e81f1f;}
.approved,.Approved, .CEOApproved,.Billed, .totPayrollAmt strong, .DeliveryReadiness, .Completed {color:#009f00}

.verified, .Verified,   .status.ITRetail, .status.Retail, .status.FundRequested,  .status.FundApproved, .status.Ordered, .status.Received{color:#f90}


.status.Issued {color: #fa0}
.status.NoStock {color: #f40}
.status.Fitted {color: #ffa700}
.status.received {color: #0c6}
.status.Received, .status.received {color: #0c6}
 .Confirmed, .confirmed{color:#0dc}
.Dispursed, .dispursed, .Delivered{color:#1190ff}


.disapproved,.rejected,.Rejected, .Cancelled, .cancelled{color:#cc0000}
.new,.New{color:#000;}
.Modified{color:#099;}





.logDet,.formBlock{background:#ece2e2;padding:10px;margin:10px auto;border-radius:4px;overflow:hidden;}
.logDet h4,.formBlock h4{font-weight:normal;margin:0 0 8px;font-size:1.1em;text-transform:uppercase;font-family:'jura';}
.blockquater{width:25%}

.uploadForm a{color:#046ef7;text-decoration:underline;padding:10px;text-transform:uppercase;}
.fl{float:left;margin:4px 0 4px 10px;}.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, .pending, .Pending{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;}
.mutlSelect{height:200px}

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}

#loginInfo{float:right;margin:10px 50px 0 0;text-align:right}
#loginInfo .name,#loginInfo .role{font-size:1.4em;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:134px;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;}
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{text-align:center;padding:5px 4px;background-color:#f6fcff; 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 .taBtn,.tabular h3 .addFY,.tabular h3 .import{padding:4px 10px;font-size:12px;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, #verifyAll, #UniqueInventoryItem {background-color:#f90;}
.addAddiLoan,.tabular .addFund,.receive,.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,.approveAll, .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 .details{width:40%}
.tabular .datetime{width:100px;}
.tabular tr.Inactive td{background-color:rgba(255,150, 0, 0.1)}
h4{margin:0; padding:0;}
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}




#chkedActions{display:none;margin-left:20px}
#chkedActions a {margin: 4px; padding: 4px 10px; display: inline-block; text-transform: uppercase; font-family: 'abel', sans-serif;   font-size:1.0em}
#approveAll, .approveAll{background-color:#09c}
#issueAll, .issueAll {background-color:#0cf}
#rejectAll, .rejectAll{background-color:#f40}
#dispurseAll{background-color:#0cf}
.receiveAll{background-color:#0c6}
.fitAll{background-color:#ffa700}
.changeModel {background-color: #f45f06;  font-size: 0.9em;  margin: 2px 10px;  padding: 2px 6px;}
.Cancel{background-color:#ee0d0d}
.GENERATE{background-color:#2f20d9}

.scrollable-table-container{margin:10px 0;overflow-y:scroll;border:1px solid #e0e0e0;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,0.1);margin-bottom:20px;max-height:50vh;}
.scrollable-table-container {clear:both; max-height: 320px;overflow-y: scroll;border: 1px solid #e0e0e0;border-radius: 2px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);margin-bottom: 20px;}
.popup_inner_table thead th {position: sticky;top: 0;background-color: #002239; color: white;padding: 10px 15px; text-transform:uppercase; text-align: left; z-index:1000;}
.popup_inner_table { width: 100%; border-collapse: collapse;  }
.popup_inner_table tbody td {padding: 6px;border-bottom: 1px solid #e0e0e0;}
.popup_inner_table tbody tr:nth-child(even) { background-color: #f8f9fa;}
.popup_inner_table tbody tr:hover {background-color: #e9f7fe;}
.popup_inner_table tbody tr:last-child td {border-bottom: none;}
	
	
.mainCont{padding:20px 20px 20px 146px}
.italic{font-style:italic;}
.name{color:#000}

.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, .qtBtn, .ptBtn , .bkBtn,  .vinBtn, .retailBtn, .registrationBtn, .pdi, .billingBtn{  display: inline-block;  background-color: #69f;  border-radius:3px; padding: 3px 5px;  margin-right: 5px;margin-bottom: 5px;}
a[status="edit"] {background-color: #fa0;}
a[status="Request"] {background-color: #090;}
a[status="Issue"], a[status="issue"]{background-color:#fa0;}
a[status="NoStock"]{background-color:#f40;}
a[status="Received"],a[status="Receive"]{background-color:#0c6;}
a[status="Return"]{background-color:#fa0;}
a[status="Cancel"]{background-color:#f00; float:right}
a[status="Fitted"], a[status="Fitte"]{background-color:#fa0;}
a[status="Verify"]{background-color:#fa0;}
a[status="Confirm"]{background-color:#fa0;} 
a[status="IQuotation"],  a[status="Quotation"],  a[status="Requisition"]{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;}

a[status="MIRequest"]{background-color:#fa0;} 
a[status="RCRequest"]{background-color:#f00;} 



.addBtn:before,.addFY:before,.newLoan:before{content:'+';font-family:'jura';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=searchFeild]{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{top:1%;left:1%;right:1%;margin:auto;width:90%; height:98vh;}
.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 h4 {  text-transform: uppercase;  padding: 5px 2px 6px 0px;  font-size: 1.2em;  font-weight: bold;  margin: 0;  color: #55688e;}

.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:100vh;}
.popFormCont .field{width:47.5%;float:left;padding:0 1%;min-height:50px;}
.popFormCont .field.colspanTwo{width:98%}
.popFormCont .fourCols .field{width:23%}
.popFormCont .fiveCols .field{width:18%}
.popFormCont .field3{width:31%;float:left;padding:0 1%;min-height:50px;}
.popFormCont .field4{width:23%;float:left;padding:0 1%;min-height:50px;}
.popFormCont label{display:block;text-align:left;margin:5px 0 2px;font-size:1.1em;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{width:98%}
.popFormCont select,.popFormCont input[readonly]{width:98%}

.popFormCont select optgroup option,.popFormCont select optgroup{font-size:0.9em;font-style:normal}
.popFormCont input[type=file],#customerLogin input[type=file]{padding: 4px 1%; font-size: 0.85em;}
.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;}

.displayInfo{padding:10px; margin:4px;}
.blockHalf{width:50%}
.popFormCont .popupformInfo{ background: #e4e3e3;  padding: 10px;  border-radius: 4px; overflow:hidden;  font-size: 1.2em;}
.popFormCont .popupformInfo >h5{}
.popFormCont .popupformInfo .field{ min-height: 20px;margin: 5px 0 2px; }
.popFormCont .popupformInfo .field label{float: left;  margin: 0;    margin-right: 0px;  width: 126px;  text-align: right;  margin-right: 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 .info{width:48%;float:left;padding:10px;}
.popFormCont .info label{display: inline; }
#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}

td{ padding:10px;}

th.frozen {position: sticky;top: 0;z-index: 10;font-weight: 600;}		
td.frozen { position: sticky;left: 0; z-index: 10; }
.tabular.scrollable {  width: 100%;  overflow: scroll;height: 400px;}
.tabular.scrollable td {  white-space: nowrap;}
th.frozen:nth-child(2), th.frozen:nth-child(3){left: 0;	 position: sticky; z-index:20;	}	
td.frozen:nth-child(2), td.frozen:nth-child(3)  {left: 0; position: sticky;	z-index: 5;	}	
th.frozen:nth-child(2){min-width:200px;}
td.frozen:nth-child(3), th.frozen:nth-child(3) {left: 200px;}
 
 .bookingBlock{};
  .retailBlock{};
 
 
 
#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-style:italic; color:#2d2a2a;}
.date small{color:#2d2a2a}

.datainfo{color:#2d2a2a; font-family:roboto_cr;}
.value, .datainfo.name{font-size:1.1em;}



.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';}
.searchFilter{background-color:#ffee99;padding:10px; display: flex;flex-wrap: wrap;}
.searchFeild{width:24%; padding:4px; text-align:right;}
.searchFeild input, .searchFeild select{width:60%} 
#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}



.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; 
    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 { 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,.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: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:#a6700d;padding:4px 10px; background:#f9f6f6;}
.Off{color:#a6700d;padding:4px 7px; background:#f9f6f6;}
leave.Off {
  background: #88b584;
  color: #000;
  font-size: 1.0em;
  font-weight: bold;
  text-transform: lowercase;
}

.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, .monthView td .Holiday{padding:2px 10px;}
.monthView td small{text-align:center;}
.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] {-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, .assignOff{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; color:#666}
.reqDet ul li{margin-left:16px;list-style:square;padding:4px;background-color:#fed;text-align: left;}
.reqDet ul li:nth-child(odd){background-color:#fed;}
.reqDet strong{color:#333}

.logDet ul{margin:0;list-style:none;padding:2px;}
.logDet ul li{margin-left:16px;list-style:square;padding:2px;text-align: left;}
.logDet strong{color:#333}
.searchInputlong{width: 50%}

.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}
.mobile-search-btn{display:inline-block; background: #0cf url('../images/magnifier.png') no-repeat scroll center center; background-color: rgb(0, 204, 255);	background-color: rgb(0, 204, 255);
	width: 30px;height: 28px; border: 0; float: right;	position: absolute;	margin-left:-30px;}
#generateCount {  margin: 0 20px;  padding: 4px;  font-size: 0.8em;  color: #bd0b0b;}
#dorequestCount , #dogenerateCount , #receivecarCount, #generategrnCount{  font-size: 0.8em;  margin: 4px 10px; padding:4px;  color: #f74702; Text-transform:none; }
.alert-blink-bg { padding: 7px 12px;
  border-radius: 4px;
  color: white;

  background-color: #ff4444;
  animation: pulse 1.5s infinite;
  font-family: roboto_r;
  font-size: 0.9em;}
@keyframes pulse {    0% { background-color: #ff4444; }    50% { background-color: #ff8888; } /* Lighter shade */    100% { background-color: #ff4444; }}
.Yes{color:green;}
 .No{color:red;}

.single-selector { position: relative;width: 100%;}
.single-display { display: flex; align-items: center;    position: relative; /* Add this */}
.single-display input[readonly] {    background: #f5f5f5;    cursor: pointer;    flex-grow: 1;}

#modelDropdown{display:none;}
model-dropdown {    position: absolute;    border: 1px solid #ddd;    max-height: 200px;    overflow-y: auto;    background: white;    z-index: 1000;    width: calc(100% - 2px);    display: none;    box-shadow: 0 2px 5px rgba(0,0,0,0.2);}
.model-dropdown ul {    list-style: none;	  padding: 0;	  margin: 0;	  background: #d6a8a8;		background-color: rgb(214, 168, 168);	  background-color: #fed;	  border: solid 1px #fff; position: absolute;
  height: 200px;
  overflow: scroll;}
.model-dropdown li {    padding: 8px 12px;    cursor: pointer;}
.model-dropdown li:hover {    background-color: #f5f5f5;}
.single-selector {    position: relative;    margin-bottom: 20px;}
.clear-single { background: #ff6b6b; color: white; border: none;  width: 24px;  height: 20px;  cursor: pointer;    position: absolute;    right: 0px;    top: 50%;    transform: translateY(-50%);    z-index: 2; /* Ensure it's above the input */      align-items: center;    justify-content: center;}
.clear-single:hover {    background: #ff5252;}
.required-field.invalid {    border-color: #ff0000;}
.error-message {    font-size: 12px;    margin-top: 5px;    display: none;}
.field3.Twocol{width:64%}
.addRow{background: #eea251;  padding: 4px 10px;  text-transform: uppercase;}
.popFormCont li input[type="text"], .popFormCont li select { display: inline-block; padding: 4px; width: calc(48% - 9px); margin: 4px 0; }


@media (max-width: 1200px)
{
	#profileSecs, #leaveRec{float:none;width:auto;}
	#leaveRec{padding:20px 0;}
	#clientDetails div.sectionList fieldset{width:calc(98% - 8px)}
	.searchFeild {  width: 24%;}
	.tabular .nowrap{white-space:nowrap}
	.mobile-search-btn{display:inline-block;  background-color: rgb(0, 204, 255);
	width: 30px;height: 28px; border: 0; 	position: absolute;	}	
}


@media (max-width: 1024px)
{
	#profileSecs, #leaveRec{float:none;width:auto;}
	#leaveRec{padding:20px 0;}
	#clientDetails div.sectionList fieldset{width:calc(98% - 8px)}
	.searchFeild {  width: 30%;}
	.tabular .nowrap{white-space:nowrap}
	.mobile-search-btn{display:inline-block; background-color: rgb(0, 204, 255);
	width: 30px;height: 28px; border: 0; position: relative;	}	
}

@media (max-width: 960px)
{
	.loginpage{width:auto; height:auto;}
	#formSection, #contentTop{width:auto}
	.box{width:29%; float:left;min-height:250px;}
	.mobile-search-btn{display:inline-block; background-color: rgb(0, 204, 255); width: 30px;height: 28px; border: 0;	position: relative;	}
	.searchFeild{width:30%}
	
}

@media (max-width: 820px)
{
	#formSection, #contentTop, footer{width:100%}
	.box{width:29%; float:left;min-height:250px;}
	.mobile-search-btn{display:inline-block;background-color: rgb(0, 204, 255); width: 30px;height: 28px; border: 0; position: relative;	}	
	.searchFeild{width:30%}
}

@media (max-width: 765px)
{
	body{background:#f6f6ff;}
	
	  a.swLogo {    width: 28%;    height: 70px;    margin-left: 40px;  }
	  a.swLogo img {    width: 86%;    padding: 12px 0 0 0;  }
	.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;}
	.userInfo {  padding-top: 10px;  padding-right: 43px;}
	#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}
.popFormCont .info {  width: 100%; padding: 4px;}

	#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);}
	#searchResult{margin-top:20px;}
	nav.main{display:none;}  
	.searchFeild {width: 100%; text-align: left; }
	.tabular.scrollable{height:auto; width:auto;}
	.moduleName{padding:0; margin-bottom:34px;}
	.backtoprevious {  height: 9px;  margin:33px auto;}
	.calendarTbl .leaveList{list-style:decimal;column-count:1;cursor:default}
	.calView, .tabular, #staffDetails{padding:0 5px;}
	.mainCont{margin-top:10px; padding:10px;}
	#clientDetails .basicInfo .photo{height:200px;text-align:center}
	#clientDetails .basicInfo .photo img{width:auto;height:100%;}
	table {border: 0;}
	.tabular table thead{}
	.tabular table th {display:block;}
	.tabular table.fundTbl thead{}
	.tabular table .hideheader thead{display:none;}
	.tabular table th.hide{display:none;}
	.tabular table th.comment{width:auto}
   
	.tabular table tr {margin-bottom: 10px; display: block; border:1px solid #9cf; width:auto;}
	.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{height:auto;}
	.stat1 {    padding: 2px;    width: 40%;    float: right;    text-align: right;  }
	.day-number {    display: none;  }
	.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{z-index:-10;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%}
	.searchFeild { width: 48%; padding: 4px; text-align: right;	}
	
	.searchFeild input{width:49%} 
	.mobile-search-btn{display:inline-block; background: #0cf url('../images/magnifier.png') no-repeat scroll center center; background-color: rgb(0, 204, 255);	background-color: rgb(0, 204, 255);
				width: 30px;height: 28px; border: 0; float: right;	position: relative;	}
}

@media (max-width: 500px)

{	
	a.swLogo{width:28%; height:70px; margin-left:40px;}
	a.swLogo img{width:86%; padding:12px 0 0 0;}
	.login #loginSec{width:90%}
	.lastLogin{font-size:0.9em;display:none;}
	#loginInfo { float: none;    margin: 0;    text-align: right;    font-size: 0.8em;	}
	#formSection, #contentTop, footer{width:100%}
	.box{float:none;display:block;width:auto;padding:20px;min-height:auto}
	.staffloginInfo {padding: 8px 46px;}
	
	.desig{}
	
	.popFormCont form {   overflow: 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, .popFormCont .field3, .popFormCont .field4 {width:98%}
	.popFormCont label,.popFormCont input,.popFormCont select,.popFormCont textarea{text-align:center}
	.tabular{padding:0 5px;}
	.tabular .hide{display:none}
		#custName{width:90%;}
     

	.tblTop {background-color: #f6f6f6; margin-top: 20px; padding: 5px;}
	 /*RESPONSIVE FOR TABLE IN MOBILE VIEW*/
	.searchFilter{flex-direction: column;}
	.searchFeild{width:100%; text-align:left;}
	.searchFeild input, .searchFeild select{width:96%} 
	.mobile-search-btn{display:inline-block; background: #0cf url('../images/magnifier.png') no-repeat scroll center center; background-color: rgb(0, 204, 255);	background-color: rgb(0, 204, 255);
				width: 30px;height: 28px; border: 0; float: right;	position: absolute; right:4%;	}
	table {border: 0;}
	 .tabular table{}
    .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;}
	
	.taBtn{display:inline-block;background-color:#69f;padding:8px 16px;margin-right:5px;margin-bottom:10px}
	.popFormCont label, .popFormCont input, .popFormCont select, .popFormCont textarea{padding: 6px; text-align:left;}
	popFormCont .buttons input {  padding: 7px 20px;}
	.tabular h3 .addBtn, .tabular h3 .addFY, .tabular h3 .import{padding:6px;}
	input , select{padding: 6px;font-size:1em;border:solid 1px #ddd; width:90%;}
	.searchInputlong {  width: 85%; }
	
	
	.popFormCont .field3{width:100%}
	input.searchBtn{width: 26px;  height: 22px; }
	.popFormCont input[type="text"], .popFormCont input[type="password"], .popFormCont input[type="file"], .popFormCont textarea, .popFormCont select,.popFormCont input[readonly] {width:90%; padding:6px;}
	.clear-single{height:30px; width:32px; right:17px;}
	
	#searchResult h3 {  padding: 10px;}
	.loanFilter input[type="submit"]{position:relative; margin:0 10px;}
	.loanFilter{margin:0px}
	table.result tbody input[type="checkbox"] {    transform: scale(1.3);    margin: 5px;}	  
}