@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700);
*{margin:0;padding:0;}
html {font-family: sans-serif;-webkit-text-size-adjust: 100%;}
body {font-family:'Roboto',sans-serif;font-weight:400;color: #000; margin:0; padding:0; font-size:12px;}
::-webkit-scrollbar {width: 3px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #D6DBDF;}
::-webkit-scrollbar-thumb:hover {background: #AEB6BF;}
a{ text-decoration:none; color:#000000}

.container{ width:100%; height:100%;  background-color:#FFFFFF; float:right;}
.content{width:100%; padding:0 20px; box-sizing:border-box;}
.contentfull{width:100%; padding:0 30px; box-sizing:border-box;}
.menusection1{ width:100%; display:inline-block; height:120px; }
.maincontent{ width:calc(100% - 50px); min-height:100vh; height:auto; display:inline-block; padding:10px 0; float:right; }
.header{width:100%; display:inline-block; line-height:40px; height:40px;background-color:#212121; position:sticky; top:0; left:0;
font-size:12px; z-index:9999; clear:both;}
.mainmenu{width:100%; display:inline-block; height:80px;background-color:#fff;clear:both}
.pagecontent{position:relative;top:0px;}
.brandname_section{display:inline-block;}
.brandname{font-size:20px; font-weight:500; display:inline-block;}

/* header menu */
.headermenu{  float:right; height:80px; line-height:80px; }
.headermenu ul li{margin: 0 15px 0 15px; float:left; text-align:center; }
.headermenu ul li li {margin:0; padding:5px 0 5px 10px; background-color:#333;}
.parenthead,.submenuhead {display: block;position: relative;float: left;}
.headermenu ul li a{color: #000; text-decoration:none; font-weight:500; font-size:14px; }
.childelem {display: none; z-index:999999; margin-top:-30px;}
.childelem li {background-color:#f9f9f9;line-height: 30px; width:200px;padding:5px 10px!important; }
.childelem li a{color: #fff!important; font-size:14px!important; }
.headermenu ul ul ul {margin:0 !important; top:0 !important;left:-99% !important;}
.parenthead:hover > ul,.submenuhead:hover > ul {display:block;position:absolute; right:0;}

/*submenu*/
.submenucontainer{width:100%;height:60px; z-index:99; position:relative; background-color:#F5F5F5;}
.submenufixed{position:fixed; top:0;}
.submenu{line-height:60px; width:100%;}
.sublevelmenu{line-height:60px; height:60px; width:100%; clear:both;}
.submenu_menu{ display:inline-block; float:right}
.submenu_list{   width:100%; }
.submenu_list ul li{margin: 0 15px 0 15px; float:left}
.submenu_list ul li li {margin:0 0 0 -10px; padding:5px 0 5px 10px;}
/* multilevel menu */
.parent {display: block;position: relative;float: left;}
.parent:hover > ul {display:block;position:absolute;}
.child {display: none;}
.child li {background-color:#F5F5F5;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:170px;}
.child li a{color: #000000;}
ul ul ul{left: 100%;top: 0;margin-left:1px;}
.parent li:hover {background-color: #F0F0F0;}
.expand{font-size:12px;float:right;margin-right:5px;}


.community_section{ float:left}
.login_section{ float:right;text-transform: uppercase;}
ul{margin: 0;padding: 0;list-style: none;}
.header ul li, .tabmenu ul li{margin: 0 0 0 20px; float:left}
.header ul li a{color: #b0b0b0; text-decoration:none;  }
.header ul li a:hover{color: #fff; text-decoration:none}u
ul li:first-child { margin-left:0}
ul li:last-child { margin-right:0}
.submenu ul li a:hover{color: #FF6709; text-decoration:none}
.logo{height:60px;width: auto;overflow: hidden; margin:calc((80px - 60px)/2) auto; }
.logo img{ height:100%; width:auto}

/*.maincontent*/

/*input[type="text"], input[type="number"], input[type="password"],input[type="email"],textarea,select { color: #555;height:30px;width:calc(100% - 20px);padding: 0px 10px;-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);font-family:'Roboto'; border: 1px solid #e6e6e6; font-size:14px; font-weight:400}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,input[type="email"]:focus,textarea:focus,select:focus {  border:1px solid #FF6709;}
select{ width:100%; box-shadow: none;background: transparent;background-image: none;-moz-appearance: none;-webkit-appearance: none;background:url("../images/icon/down-arrow.svg") no-repeat; background-size:10px; background-position: right 8px center; padding-left:5px;}*/
input[type="submit"], input[type="button"] { display:inline-block;background-color:#FF6709; color:#fff; border:0; font-weight:600; font-family:'Roboto'; font-size:14px; padding:5px 9px;  border:2px solid #FF6709;  }
input[type="submit"]:hover, input[type="button"]:hover { cursor:pointer; _cursor:pointer; background-color:transparent; color:#FF6709; }
input[type=submit]:disabled,input[type="button"]:disabled {background-color:#ddd; color:#999; border:0; outline:0; cursor:default;}

.textfield{ margin:15px 0}
/*textbox_tab*/
.textbox_tab{ width:280px; float:left; margin:10px 35px 0 0;}
.textbox_tab:last-child{ margin-right:0}

/*tabmenu*/
.tabmenu{font-size:14px; clear:both}
.tabmenu_list{line-height:25px; height:25px; clear:both; border-bottom:1px solid #ccc; display:inline-block; padding-bottom:11px; width:100%;}
.tabmenu ul li{ margin:0; padding:5px 15px;}
[id^="tab_"] { display:none }
#tab_personel{ display:block}
.currenttab{ color:#FF6709!important; border:1px solid #ccc;  border-bottom:1px solid #fff!important; font-weight:600; }
.currenttab a{ color:#FF6709!important;}
.pagetitle{ font-size:24px; text-transform:capitalize; padding:10px 0; color:#333333}
.subname{font-size:16px; font-weight:300;display:block}

/*Footer*/
.footer{font-size:11px; clear:both; border-top:1px solid #ccc; width:100%; padding:5px 0; margin-top:10px; text-align:center  }

/*input text*/
label{clear:both; height: 30px; line-height: 30px; text-align: left;  width: 100%; font-size:12px;}
.c100{ width:100px; display:inline-block; float:left;}
.c200{ width:220px; display:inline-block; float:left;}
.c210{ width:210px; display:inline-block; float:left;}
.c250{ width:250px; display:inline-block; float:left;}
.c270{ width:270px; display:inline-block; float:left;}
.c310{ width:310px; display:inline-block; float:left;}
.c410{ width:410px; display:inline-block; float:left;}


.c500{ width:500px; display:inline-block; float:left;}
.c300{ width:320px; display:inline-block; float:left;}
.i500{ width:500px; padding:5px 0; display:inline-block;}
.i300{ width:300px!important; padding:5px 0; display:inline-block;}
.i250{ width:250px; padding:5px 0; display:inline-block;}
.i200{ width:200px; padding:5px 0; display:inline-block;}
.i100{ width:80px; padding:5px 0; display:inline-block;}
.i110{ width:130px!important;; padding:5px 0; display:inline-block;}
.ic200{ width:calc(100% - 230px); padding:5px 0; display:inline-block; float:right; }

.p50{ width:50px; padding:5px 0; display:inline-block;}
.p80{ width:80px; padding:5px 0; display:inline-block;}
.p120{ width:122px; padding:5px 0; display:inline-block;}
.p220{ width:217px; padding:5px 0; display:inline-block;}

.i10{ width:10% !important; float:left;}
.i45{ width:45% !important; float:left;}
.i98{ width:98% !important;}
.i95{ width:95% !important;}

input[type="text"], input[type="number"], input[type="password"],input[type="email"],textarea,select { color: #555;width:calc(100% - 20px);padding: 7px 7px!important;-webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);font-family:'Roboto'; border: 1px solid #C3C3C3; font-size:13px; font-weight:400;
font-family:'Roboto',sans-serif;outline:0}/*text-transform:capitalize;*/

textarea{ text-transform:none;}


.lowercaseinput{ text-transform:none!important}

input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus,input[type="email"]:focus,textarea:focus,select:focus {  border:1px solid #FF6709;}
select{ width:100%; box-shadow: none;background: transparent;background-image: none;-moz-appearance: none;-webkit-appearance: none;background:url("../images/icon/down-arrow.svg") no-repeat; background-size:10px; background-position: right 8px center; padding-left:5px;}

/* Table */
.table {clear:both; width:100%; font-size:13px; font-family:"Roboto"; font-weight:400; }
.table .row { clear:both; width:100%; border-bottom:1px #f2f2f2 solid; color: #000;display:inline-block;  }
.table .headrow { font-weight:400;  background-color:#f4f4f4; color:#212121;border:0;   }
.table .shortrow,.table .minrow { color:#212121; font-size:12px; }
.table .shortrow {background-color:#f4f4f4;}
.table .minrow {background-color:#f9f9f9;}

.table .row:not(:first-child):hover { background-color:#f8f8f8; display:inline-block; /*cursor:pointer; _curson:pointer; */}
.table .row .col { float:left; padding:6px 6px 6px 6px; }
.table .shortrow .col { float:left; height:20px; line-height:20px; }
.table .minrow .col { float:left; height:15px; line-height:15px;  }
.table .inwards,.table .outwards,.table .closing { width:200px; text-align:center;}
.table .inwards_movement,.table .outwards_movement,.table .closing_movement { width:300px; text-align:center;}

.table .subhead { background-color:#f9f9f9; font-weight:400; padding:5px; width:calc(100% - 10px); border:0; }
.table .row .col span,table td.col span { color:#999999; }
.table .row .col span.hlw{ background-color:#FFFF00; color:#000;}
.table .row .sno { width:60px; text-align:center; }
.table .row .date { width:90px; }
.table .row .mobile { width:100px;}
.table .row .svalue { width:100px; float:left;}
.table .row .stype { width:80px;}
.table .row .edate { width:110px; }
.table .row .status { width:70px; text-align:center;}
.table .row .smsstatus { width:90px; text-align:center;}
.table .row .name { width:200px; }
.table .row .price { width:80px; text-align:center; }
.table .row .sacno { width:90px; text-align:center; }
.table .row .gstno { width:50px; text-align:center; }
.table .row .tgstno { width:170px; }
.table .row .amount { width:90px; text-align:right;}
.table .row .quantity { width:70px; text-align:center; }
.table .row .action { width:62px; float:right; }
.table .row .invoiceno { width:150px;}
.table .row .ivamount { width:80px; text-align:right}
.table .row .ivoption { width:80px; text-align:center;}
.table .row .sreport { width:100px; text-align:center;}
.table .row .callname {  width:200px; }
.table .row .fcallname {  width:200px; }


.table .row .calno {  width:140px; }
.table .row .type {  width:130px; }
.table .row .serloc {  width:100px; }
.table .row .forwardto {  width:195px; }
.table .row .outcallreport {  width:calc(100% - 927px);}
.table .row .logged {  width:150px;  }
.table .row .assign {  width:150px;  }
.table .row .option {  width:30px; text-align:right;}
.table .row .pdf {  width:40px; text-align:center; }
.table .row .ldate {  width:155px;}
.table .row .intime {  width:140px; text-align:center}
.table .row .productmount {  width:100px; text-align:right}
.table .row .icondownload {  width:60px; text-align:center}
.table .row .qty {  width:60px; text-align:right}
.table .row .dtcol {  width:60px; text-align:right}
.table .row .dest {  width:40px;}
.table .row .mobcontent {  width:100px;}
.table .row .bdate {  width:80px;}
.table .row .dtdcstatcol {  width:130px; }
.table .row .dtdczone {  width:130px; }
.table .row .dtdcamt{ width:60px;}
.table .row .vendorname { width:calc(100% - 186px);}
.table .row .uname { width:calc(100% - 480px);}
.table .row .cname { width:calc(100% - 684px);}
.table .row .conname { width:calc(100% - 340px);}
.table .row .companyname { width:calc(100% - 662px); }
.table .row .pname { width:calc(100% - 830px); }
.table .row .dtdcname { width:calc(100% - 894px); }
.table .row .dtdctariffname { width:calc(100% - 402px); }
.table .row .dtdczonename { width:calc(100% - 338px); }
.table .row .dtdcrsname { width:calc(100% - 498px); }

.table .row .servicename { width:calc(100% - 555px);}
.table .row .particulars { width:calc(100% - 1004px);}
.table .row .sparticulars { width:calc(100% - 564px); }
.table .row .inqty { width:60px; text-align:right}
.table .row .pcost { width:100px; text-align:right}
.table .row .serviceid { width:150px;}
.table .row .proservicename { width:calc(100% - 552px);}
.table .row .proservicenamec { width:calc(100% - 124px);}



.table .row .productname { width:calc(100% - 180px); text-align:left }
.table .row .psname { width:calc(100% - 355px); }
.table .row .message { width:calc(100% - 330px); }
.table .row .pdesc { width:calc(100% - 990px);}
.table .row .discount{ width:50px; text-align:center; }
.table .row .pserial{ width:160px; }
.table .row .pservice{ width:290px; }
.table .row .puservice{ width:350px;}
.table .row .pudesc { width:calc(100% - 1048px); }
.table .row .ivcname {  width:calc(100% - 338px);}
.table .row .rcname {  width:calc(100% - 370px);  }
.table .row .report {  width:calc(100% - 980px); }
.table .row .callreport {  width:calc(100% - 927px);}
.table .row .service {  width:calc(100% - 905px);}
.table .row .todoname {  width:calc(100% - 746px); padding-left:10px;}
.table .row .entries {  width:calc(100% - 440px);}
.table .row .projectname{ width:calc(100% - 632px);}
.table .row .projecttype{ width:120px;}
.table .row .datetime{ width:160px;}

.table .row .bsno {  width:120px; }
.table .row .bstransdate {  width:100px; }
.table .row .bsvaluedate {  width:100px; }
.table .row .bsamount {  width:100px; text-align:right;}
.table .row .bsbalamount {  width:120px; text-align:right;}
.table .row .bsdescr {  width:calc(100% - 724px); }
.table .row .pscol {  width:220px; }
.table .row .billcycle {  width:100px; }
.table .row .psdescr { width:calc(100% - 662px); }
.table .row .amtcycle {  width:200px; text-align:right; }
.table .row .cartpname { width:calc(100% - 224px); }

/* Responsive Table*/
table {margin: 0;padding: 0;width: 100%;table-layout: fixed;font-family:"Roboto"; font-weight:400!important; font-size:13px; color:#444; text-align:left}
/*border-collapse: collapse;*/
table caption {font-size: 1.5em;margin: .5em 0 .75em;}
table tr {padding: .35em;}
table th,table td {padding:6px;border-bottom: 1px solid #f2f2f2 ;}
table.dataTable thead th, table.dataTable thead td { padding: 8px 10px!important;}

table thead th,table tfoot th {font-weight: 400; background-color: #f4f4f4; color: #212121;}

table .sno { width:60px;}
table .toggle { width:80px;}
table .priority { width:100px;}
table th span { color:#999999!important; }
table .sno { width:60px; text-align:center; }
table .date { width:90px; }
table .mobile { width:100px;}
table .svalue { width:100px; float:left;}
table .stype { width:80px;}
table .edate { width:110px; }
table .status { width:70px; text-align:center;}
table .smsstatus { width:90px; text-align:center;}
table .name { width:200px; }
table .option {  width:30px; text-align:right;}

table.dataTable thead th, table.dataTable tfoot th, table.dataTable tbody th {
    font-weight: 400;
}
table.dataTable.display tbody tr.odd {
    background-color: #fff!important;
}
table.dataTable.display tbody tr.odd > .sorting_1 {
    background-color: #fff!important;
}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
    background-color: #fff!important;
}
table.dataTable.display tbody tr.even > .sorting_1,table.dataTable.display tbody tr.even:hover {
    background-color: #fff!important;
}
table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #ddd!important;
}
table.dataTable tfoot th, table.dataTable tfoot td {
    border-top: 1px solid #ddd!important;
}

.dataTables_length{ width:80px; float:right!important; margin-left:10px!important;}
.dataTables_wrapper .dataTables_filter input { width:250px; }

.tleft{text-align:left!important; }
.tcenter{text-align:center!important; }
.tright{text-align:right!important; }
 
@media screen and (max-width: 600px) {
table {border: 0;}
table caption {font-size: 1.3em;}
table thead {border: none;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
table tr {border-bottom: 2px solid #ccc;display: block;margin-bottom: .625em;}
table td {border-bottom: 1px solid #ddd;display: block;font-size: .8em;text-align: right;}
table td::before {content: attr(data-label);float: left;font-weight: bold;text-transform: uppercase;}
table td:last-child {border-bottom: 0;}
table .sno,table .toggle,table .priority { width:auto;}
.tleft,.tcenter,.tright{ text-align:right !important;}
table .toggle .switch{right:-80%; clear:none;}
}

/*clientdetails*/
.clientinfo{ width:300px; float:left; height:auto; background-color: #f5f5f5; color:#333; display:inline-block; padding:10px;color:#000}
.ivclientinfo{ width:50%; padding:10px 0; box-sizing:border-box; float:left}
.clientheader{ width:100%; height:40px;color:#333;line-height:40px; font-size:18px; font-weight:500;}
.clientdetails{ width:100%; font-size:12px; font-weight:300; color:#000000 }
.clientfullname{ font-weight:400; font-size:16px;} /*FF6709*/
.clientinfo .label {font-size: 12px;padding: 7px 0;border-bottom: 1px dotted #ccc; min-height: 37px; font-weight:400; color:#666666} /*color: #49faa1;*/
.clientinfo .label:last-child{;border-bottom:0;}
.clientinfo .value {color: #333333;font-size: 17px;padding-bottom: 7px; font-weight:400;}
.clientinfo .lblvalue {color: #333333;font-size: 14px;padding-bottom: 7px; font-weight:400;}
.viewclient { width:calc(100% - 320px); float:right; height:auto; display:inline-block;}


.abutton{ border:1px solid #FF6709!important; color:#FF6709; font-weight:500; font-size:12px; padding:7px;}
.abutton:hover { background-color:#FF6709!important; color:#FFFFFF!important}

.lgbutton{ border:1px solid #FF6709!important; color:#FF6709; font-weight:500; font-size:12px; padding:15px; margin:5px;  display:inline-block; text-align:center; }
.lgbutton.portrait{ height:70px; line-height:70px;width:55px;}
.lgbutton.landscape{ height:40px; line-height:40px; width:100px;}
.portrait span{ line-height:0; display:block; margin-top:-20px;}
.landscape span{ line-height:0; display:block; margin-top:-5px;}
.lgbutton:hover { background-color:#FF6709!important; color:#FFFFFF!important}

.orangebutton{ color:#fff; font-weight:500; font-size:12px; padding:7px; background-color:#FF6709;}
.greenbutton{color:#fff; font-weight:500; font-size:12px; padding:7px; background-color:#00E138;}
.cyanbutton{color:#fff; font-weight:500; font-size:12px; padding:7px; background-color:#33CCFF;}
.blackbutton{color:#fff; font-weight:500; font-size:12px; padding:7px; background-color:#222;}

.orangebt_border{ color:#FF6709; font-weight:400; border:1px solid #FF6709;}
.greenbt_border{color:#00E138; font-weight:400; border:1px solid #00E138;}
.cyanbt_border{color:#33CCFF; font-weight:400; border:1px solid #33CCFF;}
.blackbt_border{color:#222; font-weight:400; border:1px solid #222;}
.redbt_border{color:#FF2D2D; font-weight:400;border:1px solid #FF2D2D;}

.orangebt_border:hover { background-color:#FF6709!important; color:#FFFFFF!important}
.greenbt_border:hover { background-color:#00E138!important; color:#FFFFFF!important}
.cyanbt_border:hover { background-color:#33CCFF!important; color:#FFFFFF!important}
.blackbt_border:hover { background-color:#222!important; color:#FFFFFF!important}
.redbt_border:hover { background-color:#FF2D2D!important; color:#FFFFFF!important}

.icon16{ width:16px; height:16px; background-repeat:no-repeat; background-position:center center; display:inline-block;}
.icon18{ width:18px; height:18px; background-repeat:no-repeat; background-position:center center; display:inline-block;}
.icon24{ width:24px; height:24px; background-repeat:no-repeat; background-position:center center; display:inline-block;}
.icon28{ width:28px; height:28px; background-repeat:no-repeat; background-position:center center; display:inline-block;}
.icon32{ width:32px; height:32px; background-repeat:no-repeat; background-position:center center; display:inline-block;}

.iconedit{background-image:url(../images/icon/edit.png); background-size:14px 14px; margin-left:10px; }
.bticon {width:24px; height:24px; margin:0 auto;}
/*.addbutton{ background:url(../images/icon/add-button.png) no-repeat center center;  }
.removebutton{background:url(../images/icon/remove.png) no-repeat center center;}
.updatebutton{background:url(../images/icon/update.png) no-repeat center center;}
*/.ivrow .removebutton{ display:none;}
.ivdata .addbutton{ float:left;}
.ivdata .removebutton{ float:right;}

.dropdownlist{ list-style-type:none; padding:0; margin:0; z-index:9999; position:absolute; background-color:#fff;overflow-x:hidden; overflow-y:scroll; height:100px; width:300px; margin:5px 0;}
#state-list{ display:none;}
#countrylist{ display:none;}

.newbutton{ padding:7px 7px; }
.button1{ background-color:#FFFFFF!important; color:#FF6709!important; border:1px solid #FF6709!important;font-weight:400!important; border:1px solid #FF6709!important; color:#FF6709; font-weight:500; font-size:12px; padding:7px; height:30px!important}
.button2:hover{background-color:#FF6709!important; color:#fff!important; border:none!important; cursor:pointer!important }

.fa-import{background-repeat:no-repeat; background-position: left+5px center; background-image:url(../images/import.svg);background-size: 18px auto; }
.fa-export{background-repeat:no-repeat; background-position: left+5px center; background-image:url(../images/export.svg);background-size: 18px auto; }

.button{font-family:Roboto; font-size:12px;font-weight: 500;text-align: center;white-space: nowrap;vertical-align: middle;user-select: none;border: 1px solid transparent;border-top-color: transparent;border-right-color: transparent;border-bottom-color: transparent; border-left-color: transparent;padding:0 25px; outline:0; border: 0px solid #ddd; border-radius:3px; text-transform:uppercase; cursor:pointer; _cursor:pointer; box-shadow: 1px 1px 3px 1px #e2e2e2; display:inline-block; height:35px; line-height:35px; }

.small-button{font-family:Roboto; font-size:12px;font-weight: 500;text-align: center;white-space: nowrap;vertical-align: middle;user-select: none;border: 1px solid transparent;border-top-color: transparent;border-right-color: transparent;border-bottom-color: transparent; border-left-color: transparent;padding:7px 15px; outline:0; border: 0px solid #ddd; border-radius:3px; text-transform:uppercase; cursor:pointer; _cursor:pointer; box-shadow: 1px 1px 3px 1px #e2e2e2; display:inline-block; }

.save-button{font-family:Roboto; font-weight: 500;text-align: center;white-space: nowrap;vertical-align: middle;user-select: none;box-shadow: 1px 1px 3px 1px #e2e2e2; display:inline-block; padding:3px 10px; width:100%; font-size:11px;outline:0; text-transform:uppercase; cursor:pointer; _cursor:pointer;border: 1px solid transparent; color:#666;}

.button-icons{width: 60px; height: 60px;padding: 0; text-align: center; vertical-align: middle;}
.button-rounded{border-radius: 50px;}

.btn-black {color: #fff!important; background-color: #000!important; border-color: #000!important;}
.btn-master {color: #fff!important; background-color: #16a89f!important; border-color: #16a89f!important;}
.btn-primary{color: #fff!important; background-color: #6255ff!important; border-color: #5648ff!important;}
.btn-green {color: #fff!important; background-color: #028907!important; border-color: #028907!important;}
.btn-success {color: #fff!important; background-color: #fb641b!important; border-color: #fb641b!important;}
.btn-secondary{color: #212529!important;background-color: #c2c6d1!important; border-color: #c2c6d1!important;}
.btn-light {color: #212529!important; background-color: #f3f5f6!important; border-color: #f3f5f6!important;}
.btn-info{color: #fff!important; background-color: #35b0ff!important; border-color: #35b0ff!important;}
.btn-danger {color: #fff!important; background-color: #ff7474!important; border-color: #ff7474!important;}
.btn-warning {color: #212529!important;background-color: #ffbc34!important;border-color: #ffbc34!important;}
.btn-dark {color: #fff!important;background-color: #354168!important; border-color: #354168!important;}
.btn-link {font-weight: 400;color: #007bff;background-color: transparent;}
.btn-outline-primary{ color: #857bff;background-color: transparent; background-image: none;border-color: #857bff;}
.btn-outline-secondary {color: #c2c6d1;background-color: transparent; background-image: none; border-color: #c2c6d1;}
.btn-outline-success {color: #08d26f; background-color: transparent; background-image: none;border-color: #08d26f;}
.btn-outline-danger {color: #ff7474;background-color: transparent; background-image: none; border-color: #ff7474;}
.btn-outline-warning {color: #ffbc34; background-color: transparent;background-image: none; border-color: #ffbc34;}
.btn-outline-info {color: #35b0ff; background-color: transparent; background-image: none;  border-color: #35b0ff;}
.btn-outline-dark {color: #354168; background-color: transparent; background-image: none;  border-color: #354168;}
.btn-outline-light {color: #354168; background-color: transparent; background-image: none; border-color: #354168;}

.btn-info:hover{ background-color: #049af7; border-color: #049af7;}
.btn-green:hover{ background-color: #028907; border-color: #028907;}
.btn-outline-success:hover{background-color: #08d26f; color:#fff;}
.btn-outline-primary:hover{background-color: #857bff; color:#fff;}
.btn-outline-secondary:hover{background-color: #c2c6d1; color:#fff;}
.btn-outline-danger:hover{background-color: #ff7474; color:#fff;}
.btn-outline-warning:hover{background-color: #ffbc34; color:#fff;}
.btn-outline-info:hover{background-color: #35b0ff; color:#fff;}
.btn-outline-dark:hover{background-color: #354168; color:#fff;}


/* Progress Container */
.progresscontainer {position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 99999; border:0;background:rgba(0,0,0,0.7); display:none;}
.progress {width:400px; height:60px; top:0; left:0; bottom:0; right:0;position: fixed; margin:auto; font-size:12px; color:#fff; }
.barbox {width:400px; height:23px; border: 1px solid #000;  border-radius: 3px; }
.bar {   background-color: #ff8e14;   width:0%;   height:20px;   border: 1px solid #ddd;  border-radius: 3px;  }
.percent {   position:absolute;   display:inline-block;   top:3px;   left:48%; color:#B4F5B4; }


/*pagination*/
.pagination {float:right; margin-top:10px;}
.pagination li{ list-style:none; float:left; display:inline; padding-left:10px;}
.pagination .details{ font-weight:500;}
.pagination1 .current{ padding:2px 7px;   background-color:#000; color:#FFFFFF;}
.pagination1 a{ border:1px solid #000000; padding:2px 7px; font-weight:500; font-size:14px;}
.pagination a {
  background: #84c211;
  background-image: -webkit-linear-gradient(top, #84c211, #6ba303);
  background-image: -moz-linear-gradient(top, #84c211, #6ba303);
  background-image: -ms-linear-gradient(top, #84c211, #6ba303);
  background-image: -o-linear-gradient(top, #84c211, #6ba303);
  background-image: linear-gradient(to bottom, #84c211, #6ba303);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding:5px 10px;
  text-decoration: none;
}

.pagination a:hover {
  background: #628f10;
  background-image: -webkit-linear-gradient(top, #628f10, #568204);
  background-image: -moz-linear-gradient(top, #628f10, #568204);
  background-image: -ms-linear-gradient(top, #628f10, #568204);
  background-image: -o-linear-gradient(top, #628f10, #568204);
  background-image: linear-gradient(to bottom, #628f10, #568204);
  text-decoration: none;
}

.pagination .current {
  background: #464745;
  background-image: -webkit-linear-gradient(top, #464745, #3b3b3a);
  background-image: -moz-linear-gradient(top, #464745, #3b3b3a);
  background-image: -ms-linear-gradient(top, #464745, #3b3b3a);
  background-image: -o-linear-gradient(top, #464745, #3b3b3a);
  background-image: linear-gradient(to bottom, #464745, #3b3b3a);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding:5px 10px;
  text-decoration: none;
}

.pagination1 .current:hover {
  background: #22241d;
  background-image: -webkit-linear-gradient(top, #22241d, #11120f);
  background-image: -moz-linear-gradient(top, #22241d, #11120f);
  background-image: -ms-linear-gradient(top, #22241d, #11120f);
  background-image: -o-linear-gradient(top, #22241d, #11120f);
  background-image: linear-gradient(to bottom, #22241d, #11120f);
  text-decoration: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background:#000 !important;
  color:#fff !important;
  background-image: -webkit-linear-gradient(top, #000, #333) !important;
  background-image: -moz-linear-gradient(top, #000, #333) !important;
  background-image: -ms-linear-gradient(top, #000, #333) !important;
  background-image: -o-linear-gradient(top, #000, #333) !important;
  background-image: linear-gradient(to bottom, #000, #333) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid #333 !important;
}
/*login ouer*/
.loginouter{max-width:350px; padding-top:calc((100vh - 280px)/2);  margin:0 auto;}
.errmsg{ color:#FF0000; font-size:14px;}
input[name='privilege[]']{ margin:0 5px 0 0;}  
.row-name{ width:490px;  padding:0 0 0 10px; font-weight:400;}
.row-name-title{ line-height:30px; font-size:13px; width:100%;  font-weight:400; margin:5px 0;  background-color:#f9f9f9; text-align:center;}
.sp { width:125px; display:inline-block; font-size:13px;}
/*callnumber*/
.callreport{ width:calc(100% - 380px); float:left; padding:0 30px; }
.callassignto{ text-align:right;float:right;}
.threadleft{float:left; margin-right:20px;width:150px; text-align:right}
.threadlist{clear:both; margin:10px 0; display:inline-block; width:100%;}

.scol2{width:150px; float:left; padding:10px 0;}
.scol3{width:100px; float:left;padding:10px 0;}

/* PopUp Screen */
.popupbg{ position:fixed;  top: 0px; width: 100%; height: 100%; z-index: 99999; background:#8B8B8B; opacity: 0.5; display:none; margin:0 auto; text-align:center}
.popupcontent{height:auto;top:0;left:0;bottom:0;right:0;width:70%;position:fixed; margin:0 auto;border:3px #666 solid;padding: 10px;z-index: 99999; border:0;display:none;}
#clientsuggession{height:auto; display:inline-block;}

/*filter*/
#filter { height: 100vh; width:0;position: fixed;z-index: 99999;top: 0;right: 0;overflow-x: hidden;transition: 0.5s;padding:0px ;background-color:#f9f9f9;}
#filter .ic { height:calc(100vh); float:left; width:280px;   border-left:2px solid #F4F3F3;  padding:0 10px;}
#filter .ic .head{ font-weight:600; background-color:#F4F3F3; height:30px; line-height:30px;}
#filter .ic .row{ padding:5px 0; display:inline-block;}
#filter .ic .row:hover{background-color:#F4F3F3}
#filter .ic .row .col { padding:6px 0 6px 3px;display:inline-block;}

#filtercontent { height: 100vh; width:0;position: fixed;z-index: 99999;top: 0;right: 0;overflow-x: hidden;transition: 0.5s;padding:0px ;background-color:#f9f9f9;}
#filtercontent .ic { height:calc(100vh); float:left; width:280px;   border-left:2px solid #F4F3F3;  padding:0 10px;}
#filtercontent .table .head{ font-weight:600; background-color:#F4F3F3}
#filtercontent .table .row{ padding:5px 0;}
#filtercontent .table .row:hover{background-color:#F4F3F3}
#filtercontent .table .row .col { padding:6px 0 6px 3px;}


.closebtn {position: absolute;top: 0; padding:0;font-size:25px; text-align:right; color:#818181; right:20px; clear:both; cursor:pointer }
#filter .slidein,#filtercontent .slidein{ background:url(../images/icon/rarrows.png) no-repeat center center; background-size:10px auto;float:left; background-color:#f1f0f0; width:15px; height:50px; margin-top:110px; text-align:center;}
#filter .slideout,#filtercontent .slideout{ background:url(../images/icon/larrows.png) no-repeat center center; background-size:10px auto;float:left; background-color:#f1f0f0; width:15px; height:50px; margin-top:110px; text-align:center;}

/*Iworld*/
.entrieslist{ width:calc(100% - 500px); }
/*.floatbox #floatpanel { position:fixced; right:0; margin-top:-80px; padding:0 10px 10px 10px; width:450px; background-color:#EAEAEA; display:block }*/
.floatbox #floatpanel { position:fixed; right:0; bottom:0; float:right;  padding:0 10px 10px 10px; width:450px; background-color:#EAEAEA; }
.iwfleft{ margin:6px 6px; float:left;}
.iqty{width:43px!important; text-align:center;}
.iprice{width:60px!important; text-align:center;}
.iamount{width:80px!important; text-align:center;}


.secondline { color:#939393; font-size:13px; }
.paid,.PAID { color:#00D936 !important; font-weight:500; }
.UNPAID { color:#e90000 !important; font-weight:500; }
.draft { color:#e90000 !important;}
.quotation {color:#9400D3 !important;}

.Completed { color:#009900; font-weight:500; }
.Open { color:#FF6600; font-weight:500; }
.approved{ color:#00B900 !important;; font-weight:500;}
.declined,.failure{ color:#F33 !important;; font-weight:500;}


.open { color:#FF9900!important;; font-weight:600; }
.awaiting-customer-reply { color:#3366FF!important;; font-weight:600; }
.in-progress { color:#9900CC!important; font-weight:600; }
.submitted { color:#FF0066!important;; font-weight:500; }
.on-hold { color:#FF6600!important;; font-weight:600; }
.returned{ color:#FF0000!important;; font-weight:600; }
.completed,.success { color:#03ad2b!important;}
.accepted,.active,.waiting{ color:#00E138!important;}
.pendingw { color:#FF9900!important;}
.incomplete { color:#999900!important;}
.paid { color:green!important;}
.dropped { color:red!important;; font-weight:600; }
.ready { color:#FF0080!important;; font-weight:600; }
.ordered { color:#EA7500!important;; font-weight:600; }
.openborder{ border:2px solid #FF9900;}
.returnborder{ border:2px solid #FF0000;}
.progressborder{ border:2px solid #9900CC;}
.completeborder{ border:2px solid #03ad2b;}
.orderedborder{ border:2px solid #EA7500;}
.compulsarytext{ font-size:14px; color:#FF6709; padding-left:2px;}
.high-priority    { background: rgba(250, 112, 87, 0.1);  }  /* red tint color: #e74c3c; */
.normal-priority  { background: rgba(255, 206, 86, 0.15); } /* amber  color: #f39c12; */
.low-priority     { background: rgba(46, 204, 113, 0.1); }  /* green  color: #27ae60; */

.high-priority:hover {background: rgba(250, 152, 135, 0.25) !important;}

.service-status.active{ color: #00B900!important; }
.service-status.cancelled{ color: #9a6900!important; }
.service-status.completed,.service-status.fraud,.service-status.expired{ color: #d30000!important; }
.service-status.pending{ color: #0068b8!important; }
.service-status.suspended{ color: #ef4e00!important; }
.service-status.terminated{ color: #d0004e!important; }

.w100{ width:100%;}
.w50{ width:50%; float:left;}
.w48{ width:48%; height:auto; display:inline-block; margin-bottom:30px;}
.w45{ width:45%; height:auto; display:inline-block; margin-bottom:30px;}
.w30{ width:31.25%; height:auto; display:inline-block; margin-bottom:15px;}
.w33{ width:33%; height:auto; display:inline-block; margin-bottom:30px;}
.w25{ width:25%; height:auto; display:inline-block;}
.w23{ width:23%; height:auto; display:inline-block; margin-bottom:30px; margin-right:30px;}

.irow{ width:100%; line-height:30px; float:left;text-align:center; }
.icol{ width:50%; line-height:30px; float:left; text-align:center; }

.rrow{ width:100%; line-height:30px; float:left; padding:0 0 0 10px;}
.rcol{ width:70px; line-height:30px; float:left; margin-right:5px; display:inline-block; text-align:center}
.bggrey{ background-color:#f2f2f2;}

.fleft{ float:left;}
.fright{ float:right;}
.wrapper { position: relative; width:100%; height:auto; display:inline-block; border:0px solid #c3c3c3;}
.wrapper .top { position: absolute; top: 0px; width:100%;  height:40px; border-bottom:1px solid #c3c3c3;}
.wrapper .top .heading{ font-size:22px; line-height:40px; padding:0 5px; float:left}
.wrapper .top .headingcnt{ font-size:22px; line-height:40px; padding:0 10px; float:left; color:#fff; background-color:#ff6709;}
.wrapper .bottom { position: absolute; bottom: 0px; width:100%;  height:50px;}
.listheading{ font-size:22px; line-height:40px; padding:0 5px; float:left}

.cbox{ width:100px; height:100px; padding:15px 0; position: relative; margin-top:50px; display:inline-block}
.ibox{ width:140px; height:100px; padding:15px 0; position: relative; margin-top:50px; display:inline-block}
.circle{ border-radius:50px; margin:0 auto; text-align:center;display: flex; justify-content: center; align-items: center; border:2px solid #e4e4e4;}
.logcircle{ width:90px; height:90px;}
.ivcircle{ width:100px; height:100px;}
#countup{ width: 80%; height: 30px; text-align:center; margin:0 auto;}
.countup{  line-height: 30px; color:#333;  font-size:20px;}
.circle .status{ font-size:13px; }
.circle .statuscnt,.circle .rupee{ font-size:18px;font-weight:500; }
.calloglist{ width:45%; float:left; }
.ivlist{ width:45%; float:right; }

.table .row .reportopt {  width:calc(100% - 164px); }
.table .row .avamount {  width:calc(100% - 164px); text-align:right; }
.table .row .logs {  width:100px; text-align:center; }
.table .row .rname {  width:calc(100% - 124px); }
.table .row .ppname {  width:calc(100% - 240px); }
.clear{ clear:both; height:30px;}

#imagePreview {width:180px;height:120px;background-position: center center;	background-repeat:no-repeat;background-size: 100% auto;-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3); display:none; margin-top:5px; }
#clogo {width:150px;height:100px;background-position: center center;background-repeat:no-repeat;background-size: 100% auto;}
label div{width:23px;height:23px;display:inline-block;border:2px solid #fff;text-align:center;line-height:20px;margin-right:6px;border-radius:3px;cursor:pointer;border: 1px solid #16a085;}
label i{ font-size:16px;	opacity:0; }
label:hover div{ background:#16a085; }
input:checked+label i{ opacity:1; }
input:checked+label div{ background:#16a085; }

/*iworldcollection*/
.iworldcollection .tborder{border-bottom:1px solid #CCCCCC; padding:10px}
.iworldcollection .theader{ font-weight:500;background-color:#CCCCCC; padding:10px; font-size:14px;}
.iworldcollection .monthcol{width:150px;  float:left; margin-right:80px; margin-top:40px}
.iworldcollection .branchcol{width:300px;  float:left; margin-right:50px;}
.iworldcollection .branchcol:last-child{ margin-right:0}
.iworldcollection .visitors{ width:100px; text-align:right; float:left}
.iworldcollection .collection{ width:100px; text-align:right; float:left}
.iworldcollection .expense{ width:100px; text-align:right; float:left}

/*multi line checj box*/
.dropdown ul {color: #000; list-style: none;  width:100%;float:left;}
.dropdown ul li{ padding:10px 0; height:auto;border-bottom:1px solid #E9E9E9; display:inline-block; width:100%; }
.dropdown ul li.privilegeclass > ul { display:none;}
.dropdown ul li.privilegeclass ul li.privlist{ border:0; padding:10px 0 5px 20px; width:140px; display:inline-block; float:left; height:auto}

.multiSel{ height:auto; border:1px solid #e9e9e9; padding:10px; width:100%; display:inline-block}
.multiSel span{ background-color:#28a79E; color:#FFFFFF; padding:3px 5px; margin:0 3px 4px 0; line-height:20px; float:left;}
.privilegebox {float:left; width:calc(100% - 320px);}


.exportmenu{ position: relative; display: inline-block; font-size: 12px; color: #FFF; width:100px;}
.exportmenu input[type=checkbox]{ display: none;}
.exportmenu label{box-sizing: border-box;display: inline-block;width: 100%; height:33px; line-height:33px;background-color: #2DBBFF;padding: 0 20px;cursor: pointer;text-align: center;    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}
.exportmenu ul{ position: absolute;list-style: none; text-align: left; width: 100%;z-index: 1;box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);display: none;}
.exportmenu ul li{width:100%; line-height:30px; display:inline-block; color: #fff;cursor: pointer; padding:0; margin:0; text-align:center; background-color:#51C7FF;}
.exportmenu ul li:hover{ background-color:#2DBBFF;color: #fff;}
.exportmenu ul li a{ color: inherit;text-decoration: none; padding: 0 10px; text-align:center; font-size:14px;}
.exportmenu input[type=checkbox]:checked ~ label { background-color: #2DBBFF;}
.exportmenu input[type=checkbox]:checked ~ ul {   display: block;}
.icon24{ width:20px; height:20px; background-repeat:no-repeat; background-position:center center; float:left; display:inline-block;}
.ic-csv{background-image:url(../images/icon/client.png); }
.ic-pdf{background-image:url(images/icon/pdf.png); background-size:auto 100%; }
.ic-doc{background-image:url(../images/icon/client.png); }

.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}
.suggestion,.poppanel{ height: 100vh; width:300px; background-color:#F5F5F5;padding:10px; z-index:999999999;  display:block; position:fixed; top:0px; right:0;
overflow-x:hidden; overflow-y:auto; display:none;}
.productlist{ margin-bottom:10px;}
#suggestion {width: 300px;height: 100%; position:fixed; top:0; right:0;  background-color:#F5F5F5; z-index:9999999; display:none;}


.productform, .delbutton, .pdelbutton,.invoicesubmit{ display:none}

.iveditrow,.peditrow,.proiveditrow { position: relative;}

.editiv, .editp { position: relative; z-index:999999}
.overlay {position:absolute;top: 0; bottom: 0;left: 0;right: 0;height: 100%;width: 100%;opacity: 0;transition: .5s ease; background:rgba(0,0,0,0.1);}
.proiveditrow:hover .overlay, .iveditrow:hover .overlay, .peditrow:hover .overlay {opacity: 1;}
.editiv:hover .overlay, .editp:hover .overlay { display:none; opacity: 0;}



.text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.cybutton{ border:1px solid #1ecd4e; color:#fff; font-weight:500; font-size:12px; padding:7px; border-radius:3px;  background-color:#1ecd4e; color:#FFFFFF}
.cybutton:hover { background-color:#1bb143; border:1px solid #1bb143;}
.pinkbutton{ border:1px solid #d3137e; color:#fff; font-weight:500; font-size:12px; padding:7px; border-radius:3px;  background-color:#eb0d8b; color:#FFFFFF}
.pinkbutton:hover { background-color:#d3137e; border:1px solid #d3137e;}
.redbutton{ border:1px solid #e51616; color:#fff; font-weight:500; font-size:12px; padding:7px; border-radius:3px;  background-color:#f90e0e; color:#FFFFFF}
.redbutton:hover { background-color:#e51616; border:1px solid #e51616;}

#pupdatepanel, #ivupdatepanel{ width:100%; height:50px; line-height:50px; background-color:#000; text-align:center; position:fixed; z-index:999999; left:0; bottom:0; display:none;}
.ucbutton{ border:1px solid #28a79e; color:#FFFFFF; font-weight:500; font-size:12px; padding:10px; margin:0 10px 0 0;  background-color:#28a79e;}

/*Product tab*/ 
/*.tabcontainer{clear:both; width:100%; margin:10px 0 0 0;  display:inherit; height:auto;}
.tabcontainer ul.tabs{margin: 0;padding: 0;list-style: none; display:inline-block; }
.tabcontainer ul.tabs li{margin:0;background: none;color: #222; float:left;padding: 7px 30px;cursor: pointer; font-size:14px;border-bottom:1px solid #2D96FF;}
.tabcontainer ul.tabs li.current{color:#2D96FF; border: 1px #2D96FF;
  border-style: solid solid none solid; }
.tabcontainer .tab-content{display: none; padding:50px 0 0 0;}
.tabcontainer .tab-content.current{	display: inherit;}*/
ul.tabs {float:left;list-style:none;height:32px;width:100%;border-radius:8px 0 -50px 0;margin:0;padding:0;}
ul.tabs li {float:left;height:31px;line-height:31px;border:1px solid #ccc;overflow:hidden;position:relative;background:#f2f2f2;margin:0 5px -1px 0;padding:0;}
ul.tabs li a {text-decoration:none;color:#000;display:block;font-size:13px;outline:none;padding:0 20px;
/*border:1px solid #fff;*/
}
ul.tabs li a:hover {background:#ebebeb;}
ul.tabs li.current,ul.tabs li.current a:hover {background:#fff;border-bottom:1px solid #fff; font-weight:500;}
.tabContainer {border:1px solid #ccc;overflow:hidden;clear:both;float:left;width:100%;background:#fff; }
.tabContent {font-size:12px;padding:10px 20px; display:inline-block; width:100%;}
/*.tabContent:not(:first-of-type) { display:none !important;}*/

.c50{ width:50%; display:inline-block; line-height:30px; height:30px; text-align:center}
.notify-col{width:50%; float:left; text-align:center}
.removerow{ width:30px; height:30px; line-height:30px; font-size:32px; background-color:rgba(0,0,0,0.7); color:#fff; float:left; text-align:center; cursor:pointer;}
.countbox{ border-radius:10px; background-color:#FF3300; padding:4px 5px; color:#fff; font-size:11px; position:relative; top:0; left:0; cursor:pointer;}


.purchaseitems{ margin:20px 0; clear:both}

#calllogstatus{ width:160px;}
#reminderdate{ width:70px;}
.pusubmit{ display:none}

.popbox{ width:100%; height:100vh; background:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index: 999999; }
.popcontent{ background-color:#fff; position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; padding:15px;}
#poperr {color:red;}

.iconbx{ width:36px; height:30px; display:block;}
.email-sms-icon{ display:block; -webkit-mask:url(../images/email-sms-icon.svg) no-repeat center center; mask:url(../images/email-sms-icon.svg) no-repeat center center; -webkit-mask-size: 24px auto; mask-size:24px auto; background-color:#000; width:36px; height:30px; }
.email-sms-icon:hover{ background-color:#FF6709;}

/* Horizontal Tab*/
.tab .tab__head {margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #ccc;width: 100%;}
.tab .tab__head li {float: left;margin: 0 1px 0 0;cursor: pointer;padding: 0px 20px;height: 32px;line-height: 31px;color: #333;border-bottom: 0px;overflow: hidden;position: relative;background-color: #e5e5e5;}
.tab .tab__head li:hover {background-color: #e5e5e5;color: #000;}
.tab .tab__head li.active {border: 1px solid #ccc;background-color: #fff;color: #333;border-bottom: 1px solid #fff;display: block;}
.tab .tab__container {border: 1px solid #ccc;border-top: 0px;clear: both;float: left;width: 100%;}
.tab .tab__content {padding: 20px;display: none;}

/* Circel Dot */
.circle_dot{height: 12px;width: 12px;background-color: #bbb;border-radius: 50%;display: inline-block;}
.circle_dot green{ background-color:#08d26f!important;}
.circle_dot primary{ background-color:#857bff!important;}
.circle_dot secondary{ background-color:#c2c6d1!important;}
.circle_dot danger{ background-color:#ff7474!important;}
.circle_dot warning{ background-color:#ffbc34!important;}
.circle_dot info{ background-color:#35b0ff!important;}
.circle_dot dark{ background-color:#354168!important;}
.circle_dot light{ background-color:#ddd!important;}

.psave{display:none}
.cus_amt_edit,.dtdc_zone_edit{ display:none;}

.input-icons i { position: absolute; } 
.input-icons { width: 100%; margin-bottom: 10px; } 
.input-field { width: 100%; padding: 10px; text-align: center; } 
/* CUSTOM INPUTS */
.control {position: relative;padding-left: 30px;margin-bottom: 15px;cursor: pointer;font-size: 18px;}
.control input {position: absolute;z-index: -1;opacity: 0;}
.control__indicator {position: absolute;top: 2px;left: 0;height: 20px;width: 20px;background: #e6e6e6;}
.control--radio .control__indicator {border-radius: 50%;}
.control:hover input ~ .control__indicator,.control input:focus ~ .control__indicator {background: #ccc;}
.control input:checked ~ .control__indicator {background: #2aa1c0;}
.control:hover input:not([disabled]):checked ~ .control__indicator,.control input:checked:focus ~ .control__indicator {background: #0e647d;}
.control input:disabled ~ .control__indicator {background: #e6e6e6;opacity: 0.6;pointer-events: none;}
.control__indicator:after {content: '';position: absolute;display: none;}
.control input:checked ~ .control__indicator:after {display: block;}
.control--checkbox .control__indicator:after {left: 8px;top: 4px;width: 3px;height: 8px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(45deg);}
.control--checkbox input:disabled ~ .control__indicator:after {border-color: #7b7b7b;}
.control--radio .control__indicator:after {left: 7px;top: 7px;height: 6px;width: 6px;border-radius: 50%;background: #fff;}
.control--radio input:disabled ~ .control__indicator:after {background: #7b7b7b;}
.select {position: relative;display: inline-block;margin-bottom: 15px;width: 100%;}
.select select {display: inline-block;width: 100%;cursor: pointer;padding: 10px 15px;outline: 0;border: 0;border-radius: 0;background: #e6e6e6;color: #7b7b7b;appearance: none;-webkit-appearance: none;-moz-appearance: none;}
.select select::-ms-expand {display: none;}
.select select:hover,.select select:focus {color: #000;background: #ccc;}
.select select:disabled {opacity: 0.5;pointer-events: none;}
.select__arrow {position: absolute;top: 16px;right: 15px;width: 0;height: 0;pointer-events: none;border-style: solid;border-width: 8px 5px 0 5px;border-color: #7b7b7b transparent transparent transparent;}
.select select:hover ~ .select__arrow,.select select:focus ~ .select__arrow {border-top-color: #000;}
.select select:disabled ~ .select__arrow {border-top-color: #ccc;}


/* Timeline */
.timeline-item {padding: 1em 2em 0.5em 2em;position: relative;color: rgba(0, 0, 0, 0.7);border-left: 2px solid rgba(0, 0, 0, 0.3); height:auto; display:inline-block; width:100%;}
.timeline-item .lgcomment {font-weight: bold;display: block;font-family: 'Roboto', sans-serif;font-size: 16px;}
.timeline-item p {font-size: 1rem;font-size: 12px;}
.timeline-item p span {font-size: 12px; }
.timeline-item::before {content: attr(date-is);position: absolute;left: 1.5em;font-weight: bold;top: 0.6em;display: block;font-family: 'Roboto', sans-serif;font-weight: 500;font-size: 16px; min-height:50px;}

.timeline-item::after {width: 10px;height: 10px;display: block;top: 1em;position: absolute;left: -7px;border-radius: 10px;content: '';border: 2px solid rgba(0, 0, 0, 0.3);background: white;}
.timeline-item:last-child {-webkit-border-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0))) 1 100%;-webkit-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;-o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;border-image: -webkit-gradient(linear, left top, left bottom, color-stop(60%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0))) 1 100%;border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;}

/* Alert Box*/
.alert {padding:7px 15px;background-color: #e8e9ea;color: #666;opacity: 1;transition: opacity 0.6s;border:1px solid #999a9b; font-weight:500; letter-spacing:1px;}
.alert-outline {padding:7px 15px;color: #666;opacity: 1;transition: opacity 0.6s;border:1px solid #999a9b; font-weight:500; letter-spacing:1px;}
.alert.success {background:#028907; color: #fff!important;}
.alert.info {background:#2196F3;color: #fff!important;}
.alert.warning {background:#ff9800;color: #fff!important;}
.alert.danger {background:#f44336;color: #fff!important;}

.alert-outline.success {border:1px solid #028907; color: #028907!important;}
.alert-outline.info {border:1px solid #2196F3;color: #2196F3!important;}
.alert-outline.warning {border:1px solid #ff9800;color: #ff9800!important;}
.alert-outline.danger {border:2px solid #2196F3;color: #f44336!important;}



.atclosebtn {margin-left: 15px;color: white;font-weight: bold;float: right;font-size: 22px;line-height: 20px;cursor: pointer;transition: 0.3s;}
.atclosebtn:hover {color: black;}

/* labels */
.alertlabel{display:inline;padding:.3em .6em .3em;font-size:85%;font-weight:700;line-height:1;color:#fff!important;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}
a.label:focus,a.label:hover{color:#fff;text-decoration:none;cursor:pointer}
.label:empty{display:none}
.btn .label{position:relative;top:-1px}
.label-default{background-color:#777}
.label-default[href]:focus,.label-default[href]:hover{background-color:#5e5e5e}
.label-primary,.label-pending{background-color:#337ab7}
.label-primary[href]:focus,.label-primary[href]:hover,.label-pending[href]:focus,.label-pending[href]:hover{background-color:#286090}
.label-success,.label-completed,.label-purchased{background-color:#5cb85c}
.label-success[href]:focus,.label-success[href]:hover,.label-completed[href]:focus,.label-completed[href]:hover,.label-purchased[href]:focus,.label-purchased[href]:hover{background-color:#449d44}
.label-info,.label-queue{background-color:#5bc0de}
.label-info[href]:focus,.label-info[href]:hover,.label-queue[href]:focus,.label-queue[href]:hover{background-color:#31b0d5}

.label-warning,.label-retained{background-color:#f0ad4e}
.label-warning[href]:focus,.label-warning[href]:hover,.label-retained[href]:focus,.label-retained[href]:hover{background-color:#ec971f}
.label-danger,.label-cancelled{background-color:#f44336}
.label-danger[href]:focus,.label-danger[href]:hover,.label-cancelled[href]:focus,.label-cancelled[href]:hover{background-color:#c9302c}
.btn {background-color: #4CAF50;border: none;color: white;padding: 12px 15px;text-align: center;text-decoration: none;display: inline-block;font-size: 13px;}
.btn-sm{ padding:8px!important; font-size:12px!important;}
.btn-primary {background-color: #337ab7!important;}
.btn-success {background-color: #5cb85c!important;}
.btn-info {background-color: #5bc0de!important;}
.btn-warning {background-color: #f0ad4e!important;} 
.btn-danger {background-color: #f44336!important;}

/* Checkbox */
.cbcontainer {display: block;position: relative;padding-left: 35px;margin-bottom: 12px;cursor: pointer;font-size: 22px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
.cbcontainer input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}
.checkmark {position: absolute;top: 0;left: 0;height: 25px;width: 25px;background-color: #eee;}
.cbcontainer:hover input ~ .checkmark {background-color: #ccc;}
.cbcontainer input:checked ~ .checkmark {background-color: #2196F3;}
.checkmark:after {content: "";position: absolute;display: none;}
.cbcontainer input:checked ~ .checkmark:after {display: block;}
.cbcontainer .checkmark:after {left: 9px;top: 5px;width: 5px;height: 10px;border: solid white;border-width: 0 3px 3px 0;-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}

/* Top Nav Bar */
.topnav {overflow: hidden;background-color: #212121;  }
.topnav a {text-align:left; display: block;color: #b0b0b0;padding: 14px 16px;text-decoration: none;font-size: 12px; text-transform:uppercase; float:left;}
.topnav .icon {display: none;}
.topnav a:hover {color: white;}

/* Input Float label */
form legend {font-size: 2em;margin-bottom: 1em;width: 100%;border-bottom: 1px solid #ddd;}
.float-label .control {float: left;position: relative;width: 100%;border-bottom: 1px solid #ddd;padding-top: 23px;padding-bottom: 10px;}
.float-label .control.small {width: 30%;border-right: 1px solid #ddd;}
.float-label .control.medium {width: 70%;padding-left: 10px;}
.float-label .control:last-child {border: 0;}
.float-label input,.float-label textarea {display: block;width: 100%;border: 0;outline: 0;resize: none;}
.float-label input + label,.float-label textarea + label {position: absolute;top: 10px;transition: top 0.7s ease, opacity 0.7s ease;opacity: 0;font-size: 13px;font-weight: 600;color: #ccc;}
.float-label input:valid + label,.float-label textarea:valid + label {opacity: 1;top: 3px;}
.float-label input:focus + label,.float-label textarea:focus + label {color: #2c8efe;}


/* Responsive Popup Modal */
.popup-trigger {display: block;text-align: center;color: #FFF;font-size: 13px;text-decoration:none;background: #5cb85c; padding:10px 20px;}
.popup-trigger:hover {opacity:.9;}
.resp_popup {position: fixed;left: 0;top: 0;height: 100%;z-index: 1000;width: 100%;background-color: rgba(0, 0, 0, 0.8);opacity: 0;visibility: hidden;transition:500ms all;}
.resp_popup.is-visible {opacity: 1;visibility: visible;transition:1s all;}
.popup-container {transform:translateY(-50%);transition:500ms all;position: relative;width: 50%;margin: 1em auto;top: 5%;padding:1rem 2rem;background: #FFF;border-radius: .25em .25em .4em .4em;text-align: center;box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}
.is-visible .popup-container {transform:translateY(0);transition:500ms all;}
.popup-container .popup-close {position: absolute;top: 8px;font-size:0;right: 8px;width: 30px;height: 30px;}
.popup-container .popup-close::before,.popup-container .popup-close::after {content: '';position: absolute;top: 12px;width: 14px;height: 3px;background-color: #8f9cb5;}
.popup-container .popup-close::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);left: 8px;}
.popup-container .popup-close::after {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);right: 8px;}
.popup-container .popup-close:hover:before,.popup-container .popup-close:hover:after {background-color:#35a785;transition:300ms all;}


/* Responsive Table*/
.resptable {width: 100%;margin:0;padding:0;border-collapse: collapse;border-spacing: 0;font-size: 13px;}
.resptable tr {border-bottom: 1px solid #ddd;padding: 5px;}
.resptable th, .resptable td {padding: 10px;}
.resptable th {text-transform: uppercase;letter-spacing: 1px;font-weight: 400;background-color: #f4f4f4;color: #212121; text-align:left;}
.resptable td span {color: #999999;}
.resptable th.tcenter,.resptable td.tcenter { text-align:center}

/* TABS */
#tabcontainer {padding:0; margin:0}
.tabs-nav ul {margin: 0;padding: 0;}
.tabs-nav li {display: inline-block;background: #f8f9fa;color: #666;border-width: 1px 1px 0 1px;border-style: solid;border-color: #ddd;margin-right: 5px;}
.tabs-nav a {display: block;padding: 10px 15px;font-weight: bold;color: #666;}
.tabs-nav li.active {background: #FFF;color: #000!important;}
.tabs-nav li.active a {color: inherit;}
.tabs-content {border: 1px solid #ddd;padding: 10px;background: #FFF;margin-top: -1px;overflow: visible;}
.tabs-content img {margin-right: 10px;}
.tabs-content > [id^="tab_"] { display:none }
.fa-tag-ic {display: block;width: 24px;height: 24px;background-repeat: no-repeat;background-position: center center;background-image: url(../images/tag.svg);background-size: 24px auto;}

/* Dialog box confirm */
.dialog-ovelay {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.50);z-index: 999999; height:100vh;}
.dialog-ovelay .dialog {width: 400px;margin: 100px auto 0;background-color: #fff;box-shadow: 0 0 20px rgba(0,0,0,.2);border-radius: 3px;overflow: hidden}
.dialog-ovelay .dialog header {padding: 10px 8px;background-color: #f6f7f9;border-bottom: 1px solid #e5e5e5}
.dialog-ovelay .dialog header h3 {font-size: 14px;margin: 0;color: #555;display: inline-block}
.dialog-ovelay .dialog header .fa-close {float: right;color: #c4c5c7;cursor: pointer;transition: all .5s ease;padding: 0 2px;border-radius: 1px    }
.dialog-ovelay .dialog header .fa-close:hover {color: #b9b9b9}
.dialog-ovelay .dialog header .fa-close:active {box-shadow: 0 0 5px #673AB7;color: #a2a2a2}
.dialog-ovelay .dialog .dialog-msg {padding: 12px 10px}
.dialog-ovelay .dialog .dialog-msg p{margin: 0;font-size: 15px;color: #333}
.dialog-ovelay .dialog footer {border-top: 1px solid #e5e5e5;padding: 8px 10px}
.dialog-ovelay .dialog footer .controls {direction: rtl}
.dialog-ovelay .dialog footer .controls .button {padding: 0 15px;border-radius: 3px}
.button {cursor: pointer}
.button-default {background-color: rgb(248, 248, 248);border: 1px solid rgba(204, 204, 204, 0.5);color: #5D5D5D;}
.button-danger {background-color: #f44336;border: 1px solid #d32f2f;color: #f5f5f5}
.link {padding: 5px 10px;cursor: pointer}

/*Loader*/
.loader {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background:rgba(0,0,0,0.6);display: flex;justify-content: center;align-items: center; z-index:999999;}
.loader .loader-inner {position: relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;-webkit-transition: width .5s, height 1s;transition: width .5s, height 1s;}
.loader.success .loader-inner,.loader.error .loader-inner{background-color: #f17f7f;}
.loader .loader-inner .loading-box {text-align: center;width: 100%;padding: 2em;}
.loader .loader-inner .loading-box .loader-message {padding: 1em 0;color: white; font-weight:600; font-size:14px;} 
.loader .loader-inner .loading-box .circular-loader {border: 3px solid #f3f3f3; /* Light grey */border-top: 3px solid #E04006; /* Blue */border-radius: 50%;
width: 50px;height: 50px;animation: spin 2s linear infinite;margin: 0 auto;transition: all .5s ease-out;position: relative;display: flex;justify-content: center;align-items: center;}


.method-1 {position: relative;display: inline-block;font-size: 16px;color: #d4d4d4;}
.method-1:before {content: attr(data-text);position: absolute;overflow: hidden;white-space: nowrap;width: 0;color: #72cc96;
-webkit-animation: fill-1 2s infinite;animation: fill-1 2s infinite;}
@-webkit-keyframes fill-1 {
50% {width: 100%;}
100% {width: 0%;}
}
@keyframes fill-1 {
50% {width: 100%;}
100% {width: 0%;}
}

/* Input type file style */
.fileContainer {overflow: hidden;position: relative;}
.fileContainer [type=file] {cursor: inherit;display: block;font-size: 999px;filter: alpha(opacity=0);min-height: 100%;min-width: 100%;opacity: 0;position: absolute;right: 0;text-align: right;top: 0;}
.fileContainer {border-radius: 3px;float: left;padding: 7px 15px; background:#00D76B; color:#fff; text-transform:uppercase;}
.fileContainer [type=file] {cursor: pointer;}
.responsive-image {max-width: 100%;}
.cell img {display: block;}
@media screen and (min-width: 600px){
.grid {display: flex;flex-wrap: wrap;flex-direction: row;}
.cell {width:50%;}
}
@media screen and (min-width: 1000px){
.cell {width:calc (100%/3);}
}
.cell {margin: 1rem;}

@media screen and (min-width: 600px){
.cell {width: calc(50% - 2rem);}
}
@media screen and (min-width: 1000px){
.cell{width: calc(33.3333% - 2rem);}
}

@media screen and (max-width: 600px) {
.resptable {border: 0;}
.resptable thead {display: none;}
.resptable tr {margin-bottom: 10px;display: block;border-bottom: 2px solid #ddd;}
.resptable td {display: block;text-align: left;font-size: 12px;border-bottom: 1px dotted #ccc;}
.resptable td:last-child {border-bottom: 0;}
.resptable td:before {content: attr(data-label);text-transform: uppercase;font-weight: 500; width:100%; float: left;}
.resptable th.tcenter,.resptable td.tcenter { text-align:left}
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child){display: none;}
.topnav a.icon {float: right;display: block;}
#pur_items_list,#filtersearch{width:100% !important;}
.abutton{ margin:5px 0;}
.table .row{margin:5px 0;}
.plbtn{ width:33%; float:left; margin:5px 0;}
.plbtn:nth-child(2n) { float:right!important}

ul#multilevel li { width:50%; margin:0; line-height:40px;}
ul#multilevel ul.child { z-index:999;}
ul#multilevel ul.child li{ width:98%; line-height:30px!important;}
input[type="text"], input[type="number"], input[type="password"], input[type="email"], textarea, select {
width:100% !important; margin:5px 0!important;
}
input[type="text"] { padding:10px 5px!important;width:calc(100% - 10px) !important;}
input[type="submit"] { margin:0!important;}
}

@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {position: absolute;right: 0;top: 0;}
.topnav.responsive a {float: none;display: block;text-align: left;}
}

/* Navigation bar */
.mainnav {height: 50px;width: 100%;background-color: #fff;position: relative;}
.mainnav > .nav-header {display: inline;}
.mainnav > .nav-header > .nav-title {display: inline-block;font-size: 22px;color: #fff;padding: 10px 10px 10px 10px;}
.mainnav > .nav-btn {display: none;}
.mainnav > .nav-links {display: inline;float: right;font-size: 14px;}
.mainnav > .nav-links > a {display: inline-block;padding: 13px 10px 13px 10px;text-decoration: none;color: #000;}
.mainnav > .nav-links > a:hover {background-color: rgba(0, 0, 0, 0.3);}
.mainnav > #nav-check {display: none;}

@media (max-width:600px) {
.mainnav > .nav-btn {display: inline-block;position: absolute;right: 0px;top: 0px;}
.mainnav > .nav-btn > label {display: inline-block;width: 50px;height: 50px;padding: 13px;}
.mainnav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {background-color: rgba(0, 0, 0, 0.3);}
.mainnav > .nav-btn > label > span {display: block;width: 25px;height: 10px;border-top: 2px solid #eee;}
.mainnav > .nav-links {position: absolute;display: block;width: 100%;background-color: #333;height: 0px;transition: all 0.3s ease-in;overflow-y: hidden;top: 50px;left: 0px;}
.mainnav > .nav-links > a {display: block;width: 100%;}
.mainnav > #nav-check:not(:checked) ~ .nav-links {height: 0px;}
.mainnav > #nav-check:checked ~ .nav-links {height: calc(100vh - 50px);overflow-y: auto;}
}

.jsnav-header .jsnav-header-wrapper { position: relative; }
.jsnav-header .jsnav-header-wrapper .logo { }
.jsnav-header .jsnav-header-wrapper .jsnav-menu > ul { display: none; padding: 0 0 20px; margin-bottom: 0; }
.jsnav-header .jsnav-header-wrapper .jsnav-menu ul { list-style: none; }
.jsnav-header .jsnav-header-wrapper .jsnav-menu ul li { position: relative; }
.jsnav-header .jsnav-header-wrapper .jsnav-menu ul li > a { display: block; padding: 14px 15px; font-size: 15px; text-decoration: none; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; }
.jsnav-header .jsnav-header-wrapper .jsnav-menu ul ul li > a { padding: 14px 15px 14px 30px; }
.jsnav-header .jsnav-header-wrapper .jsnav-menu ul ul ul li > a { padding: 14px 15px 14px 45px; }
.jsnav-header .jsnav-header-wrapper .jsnav-menu li > ul { display: none; }
.burger-menu { position: absolute; padding-top: 7px; top: 16px; right: 16px; cursor: pointer; width: 20px; height: 15px; }
.hamburger { margin-top: 7px; }
.hamburger-inner { position: absolute; width: 20px; height: 3px; background-color: #000; }
.hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 20px; height: 3px; background-color: #000; }
.hamburger-inner:after { display: block; content: ""; }
.hamburger-inner:before { display: block; content: ""; top: -7px; }
.hamburger-inner:after { bottom: -7px; }
.dropdown-plus { position: absolute; cursor: pointer; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; }
.dropdown-plus::after, .dropdown-plus::before { position: absolute; top: 24px; right: 18px; width: 13px; height: 2px; content: ""; background-color: #c1c1c1; }
.dropdown-plus::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.dropdown-plus.dropdown-open::after { display: none; }

@media (min-width: 1200px) { .jsnav-header .jsnav-header-wrapper { height: 60px; }
  .jsnav-header .jsnav-header-wrapper .logo { float: left; }
  .jsnav-header .jsnav-header-wrapper .burger-menu { display: none; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu { float: right; clear: inherit; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu > ul { display: block !important; padding: 0; font-size: 0; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu > ul > .dropdown_menu::after { transform: rotate(45deg); -webkit-transform: rotate(45deg); border: solid #c1c1c1; border-width: 0 3px 3px 0; padding: 2px; content: ''; margin-bottom: 3px; text-align: right; position: absolute; right: 7px; top: 25px; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu > ul > li { display: inline-block; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu > ul > li > a { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; height: 60px; padding: 0 25px; line-height: 60px; white-space: nowrap; font-size:14px; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu ul li { position: relative; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu ul li.dropdown_menu > a > span { display: none; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu ul ul li > a { position: relative; padding: 8px 8px 7px !important; font-size:14px; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu li > ul { background: #F8F9FA; position: absolute; top: 100%; left: 0; display: block !important; width: 200px; padding:0; visibility: hidden; -webkit-box-shadow: 0 12px 30px -2px rgba(0, 0, 0, 0.07); box-shadow: 0 12px 30px -2px rgba(0, 0, 0, 0.07); opacity: 0; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; z-index:99999; }
   .jsnav-header .jsnav-header-wrapper .jsnav-menu li > ul.rightside{left:-150px !important}
   
  .jsnav-header .jsnav-header-wrapper .jsnav-menu li > ul ul { top: -27px; left: 100%; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu li > ul > .dropdown_menu::after { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); border: solid #c1c1c1; border-width: 0 3px 3px 0; padding: 2px; content: ''; margin-bottom: 3px; text-align: right; position: absolute; right: 27px; top: 19px; }
  .jsnav-header .jsnav-header-wrapper .jsnav-menu li:hover > ul { opacity: 1; visibility: visible; }
  .dropdown-plus { display: none; } }
/*# sourceMappingURL=jsnav.css.map */

/* MEGA MENU */
.top-menu {list-style: none;margin: 0;padding: 0;display: flex;gap: 0;}
.menu-parent {position: relative;width: 35px;height: 35px;cursor: pointer; margin:0 !important; padding:0 5px; }
.menu-icon {height: 20px;object-fit: contain;padding-top: 10px;}
.mega-menu {display: none;position: fixed;top: 35px; left: 0;width: 100%; background: #fff;border-top: 1px solid #ddd;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);padding: 10px 30px;grid-template-columns: repeat(6, 1fr);gap: 40px;
z-index: 999999;line-height: normal;}
.menu-parent:hover .mega-menu {display: grid;}
.mega-column h4 {margin:0; padding:10px 0;font-size: 14px;color: #000; font-weight: 600; text-transform: uppercase; }
.mega-column a {display: block;margin-bottom: 10px;font-size: 14px;color: #444 !important;text-decoration: none;}
.mega-column a:hover {color: #212121;font-weight: 600;}


/* Responsive Breakpoints */
@media (max-width: 1024px) {
.mega-menu {grid-template-columns: repeat(3, 1fr);gap: 20px;padding: 20px;}
}

@media (max-width: 768px) {
.mega-menu {display: none;grid-template-columns: repeat(2, 1fr);gap: 20px !important;
padding: 15px 20px !important;box-shadow: none !important;border-top: none !important;max-height: 70vh;
overflow-y: auto;}
.menu-parent:hover .mega-menu {display: grid !important;}
.mega-column {margin-bottom: 20px;}
.mega-column h4,.mega-column a {font-size: 13px !important;}
}


/* Parent item */
.company-name {font-weight: 600;font-size: 14px;line-height: 40px;letter-spacing: 1px;
color: #42A5F5;text-transform: uppercase;user-select: none; }

.has-submenu {position: relative;}
.account-menu {display: none;position: absolute;top: 90%;right: 0;background: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);z-index: 1000;
min-width: auto;width: max-content; max-width: 200px;}
.has-submenu:hover .account-menu {display: block;}
.account-menu li {margin: 0 !important; width: 100%; box-sizing: border-box; line-height: normal ;
text-transform: capitalize; text-align: left;}
.account-menu li:last-child {border-bottom: none;}
.account-menu a {display: block;padding:10px;font-size: 14px;color: #000!important;text-decoration: none;}
.account-menu a:hover {background: #fff !important;}
.account-menu .log-name {color:#fff; font-size: 14px;line-height: 40px;padding: 5px 10px;letter-spacing: 1px;
user-select: none; 
 background-image: linear-gradient(to top, #1D293D 0%, #314158 100%);
 box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}



/* Filter Bar Styles */
.filter-bar {position: fixed;top: 0;left: 0;right: 0;background: #fff;border-bottom: 1px solid #ddd;box-shadow: 0 2px 8px rgba(0,0,0,0.1);
z-index: 9999;overflow: hidden;max-height: 0;opacity: 0;transition: all 0.4s ease;}
.filter-bar.active {max-height: 200px;opacity: 1;}
.filter-form-row {display: flex;align-items: center;justify-content: center;gap: 10px;padding: 20px 30px;
flex-wrap: wrap;max-width: 1200px;margin: auto;}

.sidebar {
  position: fixed;
  top: 40px;
  left: 0;
  width: 50px;
  height: calc(100vh - 40px);
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  display: none;
  user-select: none;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  
}

.sidebar.is-visible {
  display: flex;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-grow: 1;
}

.icon-btn {
  width: 50px;
  padding: 15px 0;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
}

.icon-btn i {
  font-size: 20px;
  padding-right: 5px;
}

.icon-btn:hover,
.icon-btn.active {
  background: linear-gradient(135deg, #ffffff, #f3f4f9);
  color: red;
}

.icon-btn:hover i,
.icon-btn.active i {
  color: red !important;
}

.signout-btn {
  margin-top: auto;
}


  .menu-panel {
    position: fixed;
    top: 40px; left: 50px;
    width: 200px;
    height: calc(100vh - 40px);
    padding:15px;
    background: #fff;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
    overflow-y: auto;
    overflow-x: hidden; /* prevent horizontal scroll */
    opacity: 0;
    visibility: hidden;
    z-index: 9000;
  }
  .menu-panel.is-visible {
    opacity: 1;
    visibility: visible;
  }
  .section.bordersection {
    border-bottom: 1px solid #E5E7E9;
    margin-bottom: 20px;
  }
  .section-title {
    font-weight: 600;
    letter-spacing: 0.1px;
    font-size: 14px;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #000;
  }
  .menu-item {
    padding: 0 0 15px 0;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    color: #333;
    font-size: 14px;
    display: block;
  }
  .menu-item:hover {
    font-weight: 500;
    color: #000;
  }
  .menu-item.has-levelmenu > .arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  .menu-item.has-levelmenu:hover > .arrow {
    transform: translateY(-50%) rotate(90deg);
  }
  /* Level 3+ levelmenu container */
  .levelmenu {
    position: fixed; /* key fix */
    background: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    min-width: 220px;
    max-width: 300px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-radius: 3px;
    z-index: 10001;
  }
  .menu-item.has-levelmenu:hover > .levelmenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  
 /* Payment Container */
.pay_overlay{ width:100%; height:100vh; background:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index: 999999; }
.pay_content{ background-color:#fff; position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; padding:15px;}
.payment-container {background-color: #fff;max-width: 400px;margin: 0 auto;width: 100%;padding: 0;
border-radius: 10px;}
.payheader {background-color: #1a237e;color: white;padding: 15px 0; text-align: center;
  border-radius: 8px 8px 0 0;font-size: 14px !important;font-weight: bold; position: relative;}
#closeqrcode { position: absolute; top:10px; right: 20px; color: #fff; 
background: none;border: none;font-size: 24px;cursor: pointer;}
#payment_qrfrm{ margin: 30px 0; }
#payment_details_info { display: none;text-align: center;}
.payment-details {padding: 15px;background-color: #f8f9f9;border-radius: 8px;border: 1px solid #f8f9fa; }
.payment-details h2{color: #000;text-transform: uppercase;font-size:11px; font-weight: 500;}
.payment-details p { padding: 5px 0; font-size: 1em;}
.payment-details .rupee {font-size: 1.4em; color: #007bff;  font-weight: bold;}
.payment-details .amount {font-size: 2.5em;color: #007bff;font-weight: bold;}
.payment-details .ref {font-size: 1.2em;color: #000;font-weight: bold;}
/* QR Code */
.qr-code {width: 240px;height: 240px;margin: 15px 0;border: 4px solid #1a237e;border-radius: 8px;margin: 0 auto;position: relative;}
.qr-code .teaser {background-color: #1a237e;color: #fff;position: absolute;bottom:0; left: 0;width:100%;text-align: center;
padding: 10px 0;}