@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url("../fonts/opensans/opensans-light.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans"), local("OpenSans"), url("../fonts/opensans/opensans.woff") format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: bold;
    src: local("Open Sans"), local("OpenSans"), url("../fonts/opensans/opensans-semibold.woff") format("woff");
}
body {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #434344;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  line-height: 1.53846154;
}

.topNav{font-size:20px;}      /*Top Nav*/

/*Table grid Header background ground */
.panel-default > .panel-heading{border-radius: 0; padding: 1px 15px;background-color:transparent;position: relative;overflow:hidden}
.panel{border-radius:0}

.alertMsg{font-size:13px;text-align:center}           /*Alert Message font size */
.panel-default > .panel-heading h4{color:#02346f;font-size:24px;}   /*Table grid Title Font color */

/*Footer Segment*/
footer { clear: both; font-size: 12px;margin:24px auto }
footer nav ul { margin: 0 0 8px 0; padding: 0; }
footer nav ul li { list-style: none; display: inline; margin-right: 12px; }
footer li a{color:#9F443B}    
.footerContainer {margin: 0 auto;text-align: center;}

/*Top menu*/
.header .logo {display: block; float: left; font-size: 20px; font-weight: 500;line-height: 50px;}


/*Navigation bar*/
.navbar-right{margin-right:0px;  }
.header .navbar .nav > li.user > a > .fa, .header .navbar .nav > li.user > a > .glyphicon, .header .navbar .nav > li.user > a > .ion{margin-right:5px}
.user .dropdown .fa{font-size:22px;}
/*Footer Styles*/
.footerContainer{padding:10px 20px 0px 20px;}

.btn{min-width: 120px;margin-right:10px}

/*General CSS Style*/

.featureCol{text-align:center}
.headerContainer .pt0{padding-top:0px;}
.fnt11{font-size:11px;}
.fnt12{font-size:12px;}
.fnt13{font-size:13px;}
.fnt14{font-size:14px;}
.fnt15{font-size:15px;}
.pb0{padding-bottom:0px !important;}
.pt5{padding-top:5px}
.pl0{padding-left:0px}
.mt0{margin-top:0px;}
.mt-lg{margin-top:30px;}
.mt15{margin-top:15px;}
.pl10{padding-left:10px;}
.mr0{margin-right:0px;}
.mVersion{display:none;}
.hLink{text-decoration:underline;}
.hLink:hover{text-decoration:underline;}
.text-center-Resleft {text-align: center;}
.text-left{text-align:left}

.borBottom{border-bottom:1px solid #ebebeb; clear: both; display: block;margin: 0 auto; width: 96%;}
.imageAuto{width:100%;max-height:300px}
.content{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
section.content{
   background: #f8f8f8;
}
.container{
  display: block;
}
.contentscroll .container{
  overflow: hidden;
}

/*popup screen*/
.overthrow{
  overflow: auto;
}
/*Responsive table grid css*/
.resTable a{color:#666666;}
.tableCol{padding:0px}
.resptableWrapper{width:97%;margin:0px auto;}
.rowbg{background-color: #fff; margin: 10px 0;padding: 19px 0;border-bottom:1px solid #ddd;border-top:1px solid #ddd;overflow:hidden;}
.resptableWrapper .panel-body, .resptableWrapper .panel-body .row{padding:0px;margin:0px}


.navbar{margin-bottom:0px;}
.rgtIcon .nav > li.user a{font-weight:normal !important;}
.innerPageHeader{padding:0px 0 10px 15px;background:#fff;color:#040404;}
.innerPageHeader .navbar-nav .dropdown-menu > li > a{padding:5px 15px;font-size:12px;}
.navbar-nav .dropdown-menu > li > a{white-space: normal;}
.innerPageHeader .dropdown-menu > li > a:hover, .innerPageHeader .dropdown-menu > li > a:focus, .innerPageHeader .dropdown-menu > .active > a, .innerPageHeader .dropdown-menu > .active > a:hover, .innerPageHeader .dropdown-menu > .active > a:focus {
    background-color: #2671d7;background-image: none;
    color: #fff;
    filter: none;}
.content{padding-bottom:0px;}
mx-screen {
    overflow-y: hidden;
    display: block;
    overflow-x:hidden;
}

.box-shadow {
  box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.05), 0 1px 0 rgba(0,0,0,0.05);
}
.alert a{
  text-decoration: none;
}
select::-ms-expand {
    display: none;
}

.navbar-header .navbtn {
    font-size: 26px;
    left: 0;
    line-height: 30px;
    /*padding: 22px 16px;*/
    position: absolute;
    top:10px;
    cursor: default;
    /* display: block; */
}

.regionGroup{position:relative;padding:0px 20px;}
.regionGroup .dropdown-menu{left:auto;}
.regionGroup .btn-region{min-width:auto !important;}
.c-caret{min-width:auto;}
.user-menu div {display: inline;}
.handle .glyphicon {width:3px;}

/*login page style start from here*/
.customInline{display: inline;}
/*login page style end  here*/

/*sharing button*/
.SSbtn a.btn{min-width:auto;margin-bottom:10px;}
.rightPanel{border-right:1px dotted #ccc;}

/*Dashboard style start from here*/
.dashBG img{width:97px;border-radius:50%;}
.dashBG{ background: url("../../IB/images/dashboard/bg-dashboard-profile.png") no-repeat scroll center center / 100% 100%;
    height: 114px;
    padding: 8px;
    width: 100%;}
.msgcontainer{height:380px;}
.dashboardnanoHeight{height:395px;}
.thumb48{width:48px;}



@media (max-width: 767px){

.innerPageHeader .navbar-header{ width:97%;position: relative;    margin: 0px auto; }
.nav-user.open {
    display: inherit !important;
  float: none !important;
}
.navbar-nav {
    padding-top: 10px;
    padding-bottom: 25px;
}
.navbar-nav .dropdown > a {
    background-color: #ffffff;
    text-align: left;
}
.nav-user .dropdown > a {
    display: block;
    font-size: 18px;
    padding: 10px;
}
.nav-user .dropdown-menu {
    display: block;
  position:static;
  float:none;
  width:100%;
}
.navbar-nav .fadeInLeft {
    -webkit-animation-name: none;
    -moz-animation-name: none;
    -o-animation-name: none;
    animation-name: none;
}
.nav-user {
    margin: 0;
    padding: 15px;
}/*
.navbar-nav .dropdown:first-child {
    padding-bottom: 25px;
}*/
.navbar-nav {
    padding-top: 10px;
    padding-bottom: 25px;
}
.open {
    position: relative;
    z-index: 1050;
}
.navbar-fixed-top-xs {
    left: 0;
    /* position: fixed !important; */
    width: 100%;
    z-index: 1100;
}
.navbar-nav .dropdown-menu > li{
  border-bottom-color:transparent !important
}
.top-nav-bar .navbar-nav a {
    padding: 15px;
}
.top-nav-bar .nav-icon{
  font-size: 18px;
}
.navbar-nav.open::after {
    background-color: black;
    height: 100%;
    margin-left: -15px;
    margin-top: 25px;
    opacity: 0.75;
    position: fixed;
    width: 100%;
    display: block;
}


}
@media(min-width: 768){
.topNav1  .navbar-nav > li{
  float: left;
}
.topNav1  .nav-icon{
  display: none;
}
.topNav1  .nav-ddIcon{
  float: none;
}
.topNav1 #slidemenu.leftNav{
  height:auto !important;
}

}

/*Mobile UI CSS end*/
.navbar-nav > li > a{font-size:16px;}

.header.navbar, .footer.navbar {
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 1000;
}
.navbar-brand {
    float: none;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    height: auto;
    line-height: 50px;
    display: inline-block;
    padding: 0 15px;
    margin-top:7px;
}
.navbar-header .navbar-brand + .navbtn {
    right: 0;
    left: auto;
}
/*.navbar-header .navbtn:hover, .navbar-header .navbtn:active, .navbar-header .navbtn:focus {
    color: #186ec9;
}*/


/*Responsive Data Grid CSS*/
/*boxtable*/
html, body {
    background-color: #edf1f2;
    overflow: hidden;
  }
.text-u-l{
  border-bottom: 1px dotted;
}
.pos_abs{
  position: absolute;
}
.dataGrid{    border: 1px solid #CCC;background-color:#fff;color:#4c5360;}
.viewmore{
  background-color:#f0f3f6;
}
.boxtable .row{
  padding: 5px
}
.boxtable .row.records {padding:10px;}
.records{
  border-bottom: 1px solid #e8ecf2;
}
.nomargin{
  margin: 0
}
.text-xs {
    font-size: 11px;
}
.text-lg {
    font-size: 16px;
}
.font-bold {
    font-weight: 700;
}

.dataGridTitle h3{font-size:22px;color:#4c5360}
.dataGridTitle-sm{font-size:13px;}
.amount {
    display: inline-block;
    padding-right: 0.7em;
    line-height: 1em;
    position: relative;
}
.amount .cent {
    position: absolute;
    top: 0.2em;
    right: 0;
    font-size: 0.5em;
    line-height: 1em;
}
.amount.small-cr {
    font-size: 1.5em;color:#595959;
}
.accName{
  padding-left: 65px; 
}
.accName a{color:#595959;font-size:17px;}
.balance-Title{font-size:12px;color:#595959;font-weight:700}
.wel-txt{color:#86909f;padding-left:5px;}
.confirmationRow [class*="col-"], .preConfirmationRow [class*="col-"]{padding-top:5px;padding-bottom:5px;word-wrap:break-word;}
.preConfirmationRow [class*="col-"] input{width:inherit;}
/*dropdown style start from here*/

.select-style select{
    padding: 0px 5px 0px 7px;
    margin: 0;
    border: 1px solid #ccc;
    overflow: hidden;
    background-color: #fff;
    background: #fff url("../images/select-down_arrow.png") no-repeat 98% 50% !important ;
}
/*dropdown style end here*/

.welcomeNotes{overflow:hidden;margin-top:10px;}
.welcomebg img {width: 100%;} 
/* added for the height issue*/

/*Radio and Checkbox Style*/
.checkbox {
  padding-left: 20px; }
  .checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .checkbox label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
      transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
    .checkbox label::after {
      display: inline-block;
      position: absolute;
      width: 16px;
      height: 16px;
      left: 0;
      top: 0;
      margin-left: -20px;
      padding-left: 3px;
      padding-top: 1px;
      font-size: 11px;
      color: #555555; }
  .checkbox input[type="checkbox"] {
    display: none; }
    .checkbox input[type="checkbox"]:checked + label::after {
      font-family: 'Glyphicons Halflings';
      content: "\e013"; }
    .checkbox input[type="checkbox"]:disabled + label {
      opacity: 0.65; }
      .checkbox input[type="checkbox"]:disabled + label::before {
        background-color: #eeeeee;
        cursor: not-allowed; }
  .checkbox.checkbox-circle label::before {
    border-radius: 50%; }
  .checkbox.checkbox-inline {
    margin-top: 0; }

.checkbox-primary input[type="checkbox"]:checked + label::before {
  background-color: #428bca;
  border-color: #428bca; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-danger input[type="checkbox"]:checked + label::before {
  background-color: #d9534f;
  border-color: #d9534f; }
.checkbox-danger input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-info input[type="checkbox"]:checked + label::before {
  background-color: #5bc0de;
  border-color: #5bc0de; }
.checkbox-info input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-warning input[type="checkbox"]:checked + label::before {
  background-color: #f0ad4e;
  border-color: #f0ad4e; }
.checkbox-warning input[type="checkbox"]:checked + label::after {
  color: #fff; }

.checkbox-success input[type="checkbox"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c; }
.checkbox-success input[type="checkbox"]:checked + label::after {
  color: #fff; }

.radio {
  padding-left: 20px; }
  .radio label {
    display: inline-block;
    position: relative;
    padding-left: 5px; }
    .radio label::before {
      content: "";
      display: inline-block;
      position: absolute;
      width: 17px;
      height: 17px;
      left: 0;
    top:2px;
      margin-left: -20px;
      border: 1px solid #cccccc;
      border-radius: 50%;
      background-color: #fff;
      -webkit-transition: border 0.15s ease-in-out;
      -o-transition: border 0.15s ease-in-out;
      transition: border 0.15s ease-in-out; }
    .radio label::after {
      display: inline-block;
      position: absolute;
      content: " ";
      width: 11px;
      height: 11px;
      left: 3px;
      top: 5px;
      margin-left: -20px;
      border-radius: 50%;
      background-color: #555555;
      -webkit-transform: scale(0, 0);
      -ms-transform: scale(0, 0);
      -o-transform: scale(0, 0);
      transform: scale(0, 0);
      -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
      transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); }
  .radio input[type="radio"] {
    display: none; }
    .radio input[type="radio"]:checked + label::after {
      -webkit-transform: scale(1, 1);
      -ms-transform: scale(1, 1);
      -o-transform: scale(1, 1);
      transform: scale(1, 1); }
    .radio input[type="radio"]:disabled + label {
      opacity: 0.65; }
      .radio input[type="radio"]:disabled + label::before {
        cursor: not-allowed; }
  .radio.radio-inline {
    margin-top: 0;margin-left: 0; padding-right: 10px;padding-top:0px; }

.radio-primary input[type="radio"] + label::after {
  background-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::before {
  border-color: #428bca; }
.radio-primary input[type="radio"]:checked + label::after {
  background-color: #428bca; }

.radio-danger input[type="radio"] + label::after {
  background-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::before {
  border-color: #d9534f; }
.radio-danger input[type="radio"]:checked + label::after {
  background-color: #d9534f; }

.radio-info input[type="radio"] + label::after {
  background-color: #2b2b2b; }
.radio-info input[type="radio"]:checked + label::before {
  border-color: #2b2b2b; }
.radio-info input[type="radio"]:checked + label::after {
  background-color: #2b2b2b; }

.radio-warning input[type="radio"] + label::after {
  background-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::before {
  border-color: #f0ad4e; }
.radio-warning input[type="radio"]:checked + label::after {
  background-color: #f0ad4e; }

.radio-success input[type="radio"] + label::after {
  background-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::before {
  border-color: #5cb85c; }
.radio-success input[type="radio"]:checked + label::after {
  background-color: #5cb85c; }

  /*Radio and Checkbox Style end*/

/*promotion Styles start from here*/
.promotion-block::before, .promotion-block::after {
    content: " ";
    display: table;
}
.promotion-block::after {
    clear: both;
}
.promotion-block img {
    float: left;
  border: 1px solid #d2d6de;
  width:150px;
  
}
.promotion-block .promotionname, .promotion-block .description, .promotion-block .comment {
    display: block;
    margin-left: 170px;
}
.promotion-block .promotionname {
    font-size: 16px;
    font-weight: 600;
}
.promotion-block .description {
    color: #999;
    font-size: 13px;
}
.promotion-block.promotion-block-sm .promotionname, .promotion-block.promotion-block-sm .description, .promotion-block.promotion-block-sm .comment {
    margin-left: 40px;
}
.promotion-block.promotion-block-sm .promotionname {
    font-size: 14px;
}
/*Collapse table*/
.collapseTable .resptableWrapper{border-top: 0 none; width: 100%; padding:0px;}
.collapseTable, .collapseCom{padding:0px}
.collapseCom .box.panel {margin-bottom:0px;border-top:0px;}
.collapseTable .responsive  tr:last-child{border-bottom:0px;}

/*mobiel view table*/
.stacktable { width: 100%; }
.st-head-row { padding-top: 1em; }
.st-head-row.st-head-row-main { font-size: 1.5em; padding-top: 0; }
.st-key { width: 49%; padding-right: 1%; }
.st-val { width: 49%; padding-left: 1%; }
.stacktable th {color:#666}
  .st-head-row {background-color: #eee}
  .st-head-row-main, .sub{background-color: #f0f3f6;color:#8c97a8}

  .table .st-key {
    font-weight: bold;
  }
.stacktable td, .stacktable th{padding:10px;border-bottom:1px solid #e8ecf2}

/* RESPONSIVE EXAMPLE */
.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media (max-width: 800px) {
  .stacktable.large-only { display: none; }
  .stacktable.small-only { display: table; }
  .st-val.text-right{text-align:left}
}

/* Small Banner style start from here*/
.banner-sm .carousel-sm-caption h2{font-size:18px;margin:0px;font-weight:bold}
.banner-sm .carousel-sm-caption h3{font-size:12px;margin:0px}
.carousel-sm-caption {right: 20px;position: absolute; top: 50%;top: 50%;transform: translate(0%, -50%); -webkit-transform:translate(0%, -50%);-ms-transform:translate(0%, -50%);}
.banner-cta-btn{display: inline-block;margin-right: 10px;margin-top: 2%;}
.banner-cta{padding:5px;text-align:center;background-color:#fff;font-size:12px;}
a.banner-cta{text-decoration:none;}


/*Help center style*/
.panel-icon{height: 165px;width: 100%;padding-top: 40px;float:none;font-size:75px;}
.panel-icon.getting-started{text-align:center;}
.panel-icon.working-around{text-align:center;}
.panel-icon.security{text-align:center;}
.helpCenter-icon{clear:both:}
.help-item-text{ padding-left: 40px;}
.pos-abt {position: absolute;}
.help-item{line-height: 1.2em;margin-top: 20px;}
.help-item a{color:#fff;}
.help-box{height:280px}
.help-item i{float:left;font-size:19px}


@media (min-width:992px) {
.col-md-6.alertMsg  h3{display:none;}
.resTable{width:100%}
table.responsive.resTable td, table.responsive.resTable th{padding:10px 0 10px 14px;}
table.responsive.resTable td:last-child, table.responsive.resTable th:last-child{padding-right:14px;}
.responsive th{background-color:#f3f1f2; border-bottom:1px solid #ddd;}
.responsive tr{border-bottom:1px solid #ddd;}
/*.responsive tr:last-child{border-bottom:none;}*/
.responsive tr:nth-child(odd){background-color:#f8f8f8}
.mdHide{display:none;}

}

@media (max-width:991px) {
.smHide{display:none;}
/* CSS Responsive table */
  table.responsive,
  table.responsive thead,
  table.responsive tbody,
  table.responsive th,
  table.responsive td,
  table.responsive tr { display: block; }
  table.responsive thead tr { position: absolute; top: -9999px; left: -9999px; }
  table.responsive td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; }
  table.responsive td:first-child { border-top: 1px solid #eee;  }
  table.responsive td:before {  position: absolute; left: 17px; width: 40%; padding-right: 5px; text-align: left; word-wrap: break-word;font-weight:bold;line-height:14px }
  table.responsive tr:first-child { position: absolute; top: -9999px; left: -9999px; }
  table.responsive td:before { content: attr(data-content); height: 50px; }
  table.responsive td.small-padding { padding-top: 5px; padding-bottom: 5px; }
  table.responsive td.medium-padding { padding-top: 15px; padding-bottom: 15px; }
  table.responsive td.large-padding { padding-top: 25px; padding-bottom: 25px; }
  table.responsive td.text-right { text-align:left;}
  .responsive tr:nth-child(even){background-color:#f8f8f8}
  .innerPageHeader{padding-left:0px;}
  .mVersion{display:block}
  a.mVersion{text-decoration:underline;}
  .resTable img, .resTable .glyphicon {display:none;} 
  
  table.responsive td[rel="actionLink"]{padding:15px 0px;text-align:center}
.form-horizontal .form-group {height:auto;}
 .header{padding:0px 20px;}
.dataGrid  .row  [class^='col-']{
    padding:5px;
}
.clear-xs{ clear: both; float: none !important; position: relative !important; top: 0px !important; right: 0px !important;}
.promotion-block .promotionname, .promotion-block .description, .promotion-block .comment{margin:auto;}
.promotion-block img{float:none;}
.imageAuto{width:100%;}
/*sharing button*/
.SSbtn .btn{margin-top:10px;}
}
.clear-xs .gobtn{margin-top:10px;}
@media (max-width: 767px){
.rgtIcon .nav > li.user span{display:none;}
.rgtIcon .nav > li.user a{padding:15px 5px}
  .navWelcome{margin:0px;display:inline-block;float:left;width:80%;}
  .welcomeNotes{display:none!important;}
  .dropdown-menu > li{border:none;}
  .respMenu .dropdown-menu > li > a{color:#fff;}
  .navbar .navbar-nav > li{width:100%;}
  .rgtIcon .navbar-nav > li{width:auto;float:left}
  .innerPageHeader [class*="col-"]{padding-bottom:10px;padding-top:2px;}
  .header .navbar{height:auto;}
  .headerContainer h1{padding-right:15%;}
  .resListContainer{overflow:hidden;}
  .listView .control-label{width:50px;}
  .panel-default > .panel-heading{padding:10px 15px;}
  .headingSelect{padding:0px 5px 0px 0px}
  .footerContainer .footernav{text-align:left;}
  
/*login page style start from here*/
.customInline{display: block;}
.loginForm {top: 50%  ;right: auto;left: 50%;transform: translate(-50%, -50%);-ms-transform:  translate(-50%, -50%);
        -webkit-transform:  translate(-50%, -50%);width: 100%;}
/*login page style end  here*/
.repeat-fields{clear:both;margin-top:10px;}

}
.footernav a:after { content: "|";display: inline-block;padding-right: 3px;padding-left: 3px;color: #555;cursor: default;}
.footernav a:last-child:after {content: " ";padding-right: 0px;}
@media (max-width: 480px){
.resptableWrapper{width:93%;}
  table.responsive td[rel="Mobilehide"]{display:none;}
  table.responsive th[rel="Mobilehide"]{display:none;}
  .h1, h3{font-size:20px;}
  img{max-width:100%;}
   .progress{width: 59% !important}

}

.welcomeNotes{overflow:hidden}
/* added for the height issue*/

/* Loader css start */

#loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  display: none;
  background-color: #000;
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 10px;
}
#loader.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
#loader.in {
  filter: alpha(opacity=100);
  opacity: 1;
}
.loader {
  position: absolute;
  z-index: 1100;
  width: 41px;
  height: 41px;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -22px;
  overflow: visible;
  display: none;
}
.loader.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.loader.in {
  filter: alpha(opacity=100);
  opacity: 1;
}
@-moz-document url-prefix() {
  .loader {
    margin-left: -22px;
    margin-top: -25px;
  }
}
.loader div {
  width: 16px;
  height: 16px;
  position: absolute;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -webkit-animation: loader 2.8s infinite;
  -moz-animation: loader 2.8s infinite;
  -o-animation: loader 2.8s infinite;
  animation: loader 2.8s infinite;
  background-color: #ffa63b;
}
.loader div:nth-child(2) {
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
  animation-delay: -0.7s;
  background-color: #00bfa5;
}
.loader div:nth-child(3) {
  -webkit-animation-delay: -1.4s;
  -moz-animation-delay: -1.4s;
  -o-animation-delay: -1.4s;
  animation-delay: -1.4s;
  background-color: #2978ff;
}
.loader div:nth-child(4) {
  -webkit-animation-delay: -2.1s;
  -moz-animation-delay: -2.1s;
  -o-animation-delay: -2.1s;
  animation-delay: -2.1s;
  background-color: #f74339;
}
@-webkit-keyframes loader {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 25px;
    left: 0px;
  }
  50% {
    top: 25px;
    left: 25px;
  }
  75% {
    top: 0;
    left: 25px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}
@-moz-keyframes loader {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 30px;
    left: 0px;
  }
  50% {
    top: 30px;
    left: 30px;
  }
  75% {
    top: 0;
    left: 30px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}
@-o-keyframes loader {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 30px;
    left: 0px;
  }
  50% {
    top: 30px;
    left: 30px;
  }
  75% {
    top: 0;
    left: 30px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}
@keyframes loader {
  0% {
    top: 0px;
    left: 0px;
  }
  25% {
    top: 30px;
    left: 0px;
  }
  50% {
    top: 30px;
    left: 30px;
  }
  75% {
    top: 0;
    left: 30px;
  }
  100% {
    top: 0px;
    left: 0px;
  }
}
.loader-backdrop-sm {
  position: absolute;
  margin: auto;
  width: 85px;
  height: 85px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1090;
  background-color: transparent;
  display: none;
  border-radius: 44px;
}
.loader-backdrop-sm.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.loader-backdrop-sm.in {
  filter: alpha(opacity=80);
  opacity: .8;
}
.loader-text {
  position: absolute;
  margin: auto;
  padding-top: 50px;
  width: 120px;
  height: 20px;
  text-align: center;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1110;
  font-size: 15px;
  font-family: "Open Sans";
  font-weight: bold;
  display: none;
  color: #FFF;
}
.loader-text.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.loader-text.in {
  filter: alpha(opacity=100);
  opacity: 1;
}
.loader-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1090;
  background-color: transparent;
  display: none;
}
.loader-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.loader-backdrop.in {
  filter: alpha(opacity=80);
  opacity: .8;
}

/* Loader css end */




/*  nav css start */ 

body.slide-active {
    overflow-x: hidden
}
/*first child of .content-wrap so it doesn't shift around*/
.no-margin-top {
    margin-top: 0px!important
}
/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
.content-wrap {
    position: relative;
    left: 0;
    display: block;
}
.content-wrap.slide-active {
    padding-top: 0;
    display: block;
}
/* put toggle bars on the left :: not using button */
#slide-nav .navbar-toggle {
    cursor: pointer;
    position: relative;
    line-height: 0;
    float: left;
    margin: 0;
    width: 30px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
}
/* icon bar prettyup - optional */
#slide-nav .navbar-toggle > .icon-bar {
    width: 100%;
    display: block;
    height: 3px;
    margin: 5px 0 0 0;
}

.navbar-header {
    position: relative
}
/* un fix the navbar when active so that all the menu items are accessible */
.navbar.navbar-fixed-top.slide-active {
    position: relative
}
.nav-icon {display: none;
  }
.nav-text {padding-right:5px;
}
.nav-ddIcon {vertical-align: middle;
}
.leftNav1 .navbar{
  min-height: 0px;
}
@media (min-width:767px) { 
.topNav1 .profileWrapper{display: none;}
}

.profileWrapper li {
  list-style-type: none
}

/*LeftNav css start from here*/
.leftNav .container {
      margin: 0;
      padding: 0!important;
  }
  .leftNav .navbar-header {
      margin: 0 auto;
      padding: 0 15px;
  }
  .leftNav .navbar.slide-active {
      position: absolute;
      width: 50%;
      top: -1px;
      z-index: 1000;
  }
  #slidemenu.leftNav {
      left: -100%;
      width: 250px;
      min-width: 0;
      position: absolute;
      padding-left: 0;
      z-index: 2;
      top: 0px;
      margin: 0;
  }
  .leftNav #slidemenu .navbar-nav {
      min-width: 0;
      width: 100%;
      margin: 0;
  }
  .leftNav #slidemenu .navbar-nav .dropdown-menu li a {
      min-width: 0;
      white-space: normal;
  }
  .leftNav {
      border-top: 0
  }
  .leftNav.navbar-inverse #slidemenu {
      background: #333
  }
  /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
  .leftNav1 #navbar-height-col {
      position: absolute;
      top: 0;
      height: 100%;
      width: 250px;
      left: -50%;
      background: #163255;
  }
  .leftNav.navbar-inverse #navbar-height-col {
      background: #333;
      z-index: 1;
      border: 0;
  }
  .leftNav .navbar-form {
      width: 100%;
      margin: 8px 0;
      text-align: center;
      overflow: hidden;
      /*fast clearfixer*/
  }
  .leftNav .navbar-form .form-control {
      text-align: center
  }
  .leftNav .navbar-form .btn {
      width: 100%
  }
  .leftNav .nav-icon {display: inline-block;font-size: 18px; 
  }
  .leftNav .nav-text {display: inline-block;padding-left: 10px;
  }
  .leftNav .nav-ddIcon {
    float: right;
    font-size:18px;
  }
  .leftNav .slide-active .dropdown.open .nav-ddIcon{
    transform: rotate(180deg);
  }
   
   .leftNav .navbar-nav > li{
    float: none;
  }
  .leftNav .navbar-nav{
    width:100%;
  }
  .leftNav .navbar-nav .open .dropdown-menu{
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    -webkit-animation-duration:0s;  /*disable the animation for sub menu*/
    -ms-animation-duration:0s;
    animation-duration:0s;
    -moz-animation-duration:0s;
    -moz-animation-name:none; /*for disable the animation for IE brwoser in win OS 8*/
    -webkit-animation-name:none;
    -ms-animation-name:none;
    animation-name:none;
  }
   .leftNav .custom-navbar{
      min-height: auto;
      background: none
   }
  .leftNav .dropdown.open .nav-ddIcon{
    transform: rotate(180deg);
  }

   #slide-nav #navbar-height-col {
      position: fixed;
      top: 0;
      height: 100%;
      width: 230px;
      left: -230px;
      background: #ed1c24;
  }
  .leftNav1 #slidemenu {
    overflow-y: auto;
   }

/* screw writing importants and shit, just stick it in max width since these classes are not shared between sizes */
@media (max-width:767px) { 
  .topNav1 #navbar-height-col {
      position: fixed;
      top: 0;
      height: 100%;
      width: 250px;
      left: -50%;
      background: #163255;
    }
  .topNav1 .navbar{
      min-height: 0px;
   }
  #slide-nav .container {
      margin: 0;
      padding: 0!important;
  }
  #slide-nav .navbar-header {
      margin: 0 auto;
      padding: 0 15px;
  }
  #slide-nav .navbar.slide-active {
      position: absolute;
      width: 50%;
      top: -1px;
      z-index: 1000;
  }
  #slidemenu {
      left: -100%;
      width: 249px;
      min-width: 0;
      position: absolute;
      padding-left: 0;
      z-index: 2;
      top: -8px;
      margin: 0;
      overflow-y:auto;
  }
  #slide-nav #slidemenu .navbar-nav {
      min-width: 0;
      width: 100%;
      margin: 0;
  }
  #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
      min-width: 0;
      white-space: normal;
  }
  #slide-nav {
      border-top: 0
  }
  #slide-nav.navbar-inverse #slidemenu {
      background: #333
  }
  /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
 
  #slide-nav.navbar-inverse #navbar-height-col {
      background: #333;
      z-index: 1;
      border: 0;
  }
  #slide-nav .navbar-form {
      width: 100%;
      margin: 8px 0;
      text-align: center;
      overflow: hidden;
      /*fast clearfixer*/
  }
  #slide-nav .navbar-form .form-control {
      text-align: center
  }
  #slide-nav .navbar-form .btn {
      width: 100%
  }
  .nav-icon {display: inline-block;
  }
  .nav-text {display: inline-block;padding-left: 10px;
  }
  .nav-ddIcon {
    float: right;
  }
  .slide-active .dropdown.open .nav-ddIcon{
    transform: rotate(180deg);
  }
}

@media (min-width:768px) { 
  .content-wrap {
      left: 0;
      display: block;
  }
  .navbar.navbar-fixed-top.slide-active {
      position: fixed
  }
  .navbar-header {
      left: 0!important
  }
 
}

/*nav style end */ 

/*form spacing styles*/
.form-horizontal .repeat-fields [class*="col-"]{
  padding:5px 0px !important;
}

/*Dashboard styles start */ 
.expensesAmt {
    position: relative;
    top: -5px;
}
.cat {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    text-align: right;
}
.exAmtValue {
    clear: both;
    color: #000;
    display: block;
    font-size: 21px;
    font-weight: bold;
    line-height: 25px;
    padding-right: 26px;
    text-align: right;
}
.expensesAmt .label {
    color: #000;
    font-size: 12px;
    line-height: 22px;
    padding: 0;
    right: 10px;
    top: 13px;
}
.label {
    border-radius: 50%;
    font-size: 10px;
    font-weight: normal;
    height: 15px;
    line-height: 1em;
    padding: 2px;
    position: absolute;
    right: 2px;
    text-align: center;
    top: 7px;
    width: 15px;
}

.progress-bar {
    color: #000;
    font-size: 15px;
    font-weight: bold;
    line-height: 40px;
}
.progress {
    border-radius: 0;
    display: inline-block;
    height: 38px;
    width: 70%;
}
.titleBg {
    background-color: #f7f7f7;
    color: #818181;
    font-size: 14px;
    margin-bottom: 10px;
    padding: 7px 10px;
}
.box-headerBorder {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #000000 0%, #000000 9%, #d2d2d2 9%, #d2d2d2 100%) no-repeat scroll center top / 95% 7%;
    line-height: 15px;
}
.box-header .box-title {    padding: 15px 0px;}
.box-headerBorder {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #000000 0%, #000000 9%, #d2d2d2 9%, #d2d2d2 100%) no-repeat scroll center top / 100% 7%;
    line-height: 15px;
}
.box .box-header > .fa, .box .box-header > .glyphicon, .box .box-header > .ion, .box .box-header .box-title
.panel-default > .panel-heading {
    border-radius: 0;
    padding: 1px 15px;
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

/*Dashboard styles End */ 


/* Ios Copy paste disabled 

 *:not(input):not(textarea) {
  -webkit-user-select: none; 
  -webkit-touch-callout: none;
}
*/
 /* */
 /*IE broswer cross icon remove*/
 input[type=text]::-ms-clear { display: none; }
  /*end styles*/

 .modal-open section.content {   
  overflow: hidden !important;
 }

 /*modal vertical alignment styles*/
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px; /* Adjusts for spacing */
}

.modal.in .modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.modal-open [class*="mx-effect-"] .mx-pusher{
transform-style:initial
}

.modal-open [class*="mx-effect-"] .mx-pusher{
z-index:initial
}
.modal-open [class*="mx-effect-"].mx-container{
    perspective: none;
}
@media (max-width:767px) { 
 .modal.in .modal-dialog {
    width:90%;
  } 
}

/*Account page icons*/
.dataGrid .glyphicon {
    font-size: 42px;
}

/*currencyValue*/
.currencyValue{
  margin-bottom: 0px;
}

/*pagination*/
.dataTables_info{
  padding:20px 0px;
}
.paging_bootstrap{
  float: right;
}

.filterBtn{
  text-align: right;
  margin-bottom: 10px;
}
.panel-heading .addHeading .btn{
  margin-top:10px;
}
@media (max-width: 767px){
  .paging_bootstrap{
  float: none;
}
.filterBtn{
  text-align: left;
}
}
@media (max-width: 320px){
  .chooseAcc{
    min-width: 198px !important;
    margin-right: 7px !important;
  }
} 


/*different animation navigation styles*/


.mx-content {
  overflow-y: scroll;
  background: #f3efe0;
}

.mx-content,
.mx-content-inner {
  position: relative;
}

.mx-container {
  position: relative;
  overflow: hidden;
  display: block;
}

.mx-pusher {
  position: relative;
  left: 0;
  z-index: 99;
  height: 100%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

.mx-pusher:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  background: rgba(0,0,0,0.2);
  content: '';
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.mx-menu-open .mx-pusher:after {
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.mx-menu {
  position: absolute;
  top: 0;
  left: 0 !important;
  z-index: 100;
  visibility: hidden;
  width: 250px;
  height: 100%;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  overflow: auto;
}

.mx-menu:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  content: '';
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.mx-menu-open .mx-menu:after {
  width: 0;
  height: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
  transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
.mx-menu-open #navbar-height-col{
  display: none;
}

/* content style */

.mx-effect-1.mx-menu {
    -webkit-transform: translate3d(-100%, 0px, 0px);
            transform: translate3d(-100%, 0px, 0px);
    visibility: visible;
}
.mx-effect-1.mx-menu-open .mx-effect-1.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    visibility: visible;
}
.mx-effect-1.mx-menu:after {
    display: none;
}
.mx-effect-2.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(250px, 0px, 0px);
            transform: translate3d(250px, 0px, 0px);
}
.mx-effect-2.mx-menu {
    z-index: 1;
}
.mx-effect-2.mx-menu-open .mx-effect-2.mx-menu {
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-2.mx-menu:after {
    display: none;
}
.mx-effect-2 .mx-pusher{
  z-index: 999;
}

.mx-effect-3.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(250px, 0px, 0px);
            transform: translate3d(250px, 0px, 0px);
}
.mx-effect-3.mx-menu {
    -webkit-transform: translate3d(-50%, 0px, 0px);
            transform: translate3d(-50%, 0px, 0px);
    z-index: 1;
}
.mx-effect-3.mx-menu-open .mx-effect-3.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-3.mx-menu:after {
    display: none;
}
.mx-effect-3 .mx-pusher{
  z-index: 999;
}

.mx-effect-4.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(250px, 0px, 0px);
            transform: translate3d(250px, 0px, 0px);
}
.mx-effect-4.mx-menu {
    -webkit-transform: translate3d(50%, 0px, 0px);
            transform: translate3d(50%, 0px, 0px);
    z-index: 1;
}
.mx-effect-4.mx-menu-open .mx-effect-4.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-4 .mx-pusher{
  z-index: 999;
}


.mx-effect-5.mx-container {
    -webkit-perspective: 1500px;
            perspective: 1500px;
}
.mx-effect-5 .mx-pusher {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.mx-effect-5.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(40px, 0px, -250px);
            transform: translate3d(40px, 0px, -250px);
}
.mx-effect-5.mx-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(-100%, 0px, 0px);
            transform: translate3d(-100%, 0px, 0px);
}
.mx-effect-5.mx-menu-open .mx-effect-5.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-5.mx-menu:after {
    display: none;
}
.mx-effect-6.mx-container {
    -webkit-perspective: 1500px;
            perspective: 1500px;
    -webkit-perspective-origin: 0 50%;
            perspective-origin: 0 50%;
}
.mx-effect-6.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(250px, 0px, 0px);
            transform: translate3d(250px, 0px, 0px);
}
.mx-effect-6.mx-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0px, 0px, -250px);
            transform: translate3d(0px, 0px, -250px);
    z-index: 1;
}
.mx-effect-6.mx-menu-open .mx-effect-6.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-6 .mx-pusher{
  z-index: 999;
}

.mx-effect-7.mx-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
  -webkit-perspective-origin: 0% 50%;
  perspective-origin: 0% 50%;
}

.mx-effect-7.mx-menu-open .mx-pusher {
  -webkit-transform: translate3d(350px, 0, -600px) rotateY(0deg);
    transform: translate3d(350px, 0, -600px) rotateY(0deg);
}

.mx-effect-7 .mx-pusher{
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.mx-effect-7.mx-menu {
  z-index: 1;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0, 0, 350px);
  transform: translate3d(0, 0, 350px);
}

.mx-effect-7.mx-menu-open .mx-effect-7.mx-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.mx-effect-7 .mx-pusher{
  z-index: 999;
}

.mx-effect-8.mx-container {
    -webkit-perspective: 1500px;
            perspective: 1500px;
}
.mx-effect-8 .mx-pusher {
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.mx-effect-8.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(270px, 0px, -600px) rotateY(0deg);
            transform: translate3d(270px, 0px, -600px) rotateY(0deg);
}
.mx-effect-8.mx-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(-100%, 0px, 0px);
            transform: translate3d(-100%, 0px, 0px);
}
.mx-effect-8.mx-menu-open .mx-effect-8.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-8.mx-menu:after {
    display: none;
}
.mx-effect-9.mx-container {
    -webkit-perspective: 1500px;
            perspective: 1500px;
}
.mx-effect-9 .mx-pusher {
    -webkit-transform-origin: 100% 50% 0;
        -ms-transform-origin: 100% 50% 0;
            transform-origin: 100% 50% 0;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.mx-effect-9.mx-menu-open .mx-pusher {
    -webkit-transform: rotateY(-10deg);
            transform: rotateY(-10deg);
}
.mx-effect-9.mx-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(-100%, 0px, 0px);
            transform: translate3d(-100%, 0px, 0px);
}
.mx-effect-9.mx-menu-open .mx-effect-9.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition: -webkit-transform 0.5s ease 0s;
            transition: transform 0.5s ease 0s;
    visibility: visible;
}
.mx-effect-9.mx-menu:after {
    display: none;
}
.mx-effect-10.mx-container {
    -webkit-perspective: 1500px;
            perspective: 1500px;
    -webkit-perspective-origin: 0 50%;
            perspective-origin: 0 50%;
}
.mx-effect-10.mx-menu-open .mx-pusher {
    -webkit-transform: translate3d(250px, 0px, 0px);
            transform: translate3d(250px, 0px, 0px);
}
.mx-effect-10.mx-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0px, -100%, 0px);
            transform: translate3d(0px, -100%, 0px);
    z-index: 1;
}
.mx-effect-10.mx-menu-open .mx-effect-10.mx-menu {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
    -webkit-transition-property: -webkit-transform;
            transition-property: transform;
    -webkit-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    visibility: visible;
}
.mx-effect-10 .mx-pusher{
  z-index: 999;
}
.no-csstransforms3d .mx-pusher, .no-js .mx-pusher {
    padding-left: 250px;
}

/* for mobile device animation navigation */
@media (min-width: 768px){
.mx-menu-open .mx-pusher{
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}
[class*="mx-effect-"].mx-menu-open [class*="mx-effect-"].mx-menu{
  -webkit-transition: 0s none;
  transition: 0s none;
}

}

/* for mobile device animation navigation end */



/* Virtual Keypad starts */ 

.accept-key {
    width: 95px !important;
}
#vkcontainer{
    position: relative;
}
.vkeypadContainer{
    box-sizing: border-box;
    display: table;
    width: 100%;
}

.vkeypadContainer .inputfield {
    box-sizing: border-box;
    display: table-cell;
    width: auto;
    padding: 0 2px;
}
.vkeypadContainer .password {
    box-sizing: border-box;
    width: 100%;
   /* border: none;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-color: transparent;

}

#write {
    padding: 5px;
    font: 1em/1.5 Verdana, Sans-Serif;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 10px;
}
.vkeyboard{
    padding: 0;
    list-style: none;
    margin:0px auto;
    text-align:center;
    font-size:14px;
}
.vkeyboard li {
    display: inline-block;
    margin: 2px  0px 0px 2px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #fff;
    border: 1px solid #f9f9f9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
}
li.findKboard.symbol {
    width: 25px;
    height: 25px;
    line-height: 25px;
}
.capslock,
.tab,
.left-shift {
    clear: left;
}


.vkeyboard .return {
    width: 77px;
}
.vkeyboard .capslock {
    width: 38px;
}
.vkeyboard .done {
    width: 50px;
    background-color: #b5b5b5;
}
.pinPadKey .vkeyboard .done {
    width: 60px;
}

.vkeyboard .right-shift {
    width: 109px;
}
.vkeyboard .delete {
   background: #b5b5b5;
   vertical-align: top;
}
.vkeyboard .delete img{
    width: 20px;
    vertical-align: middle;
    margin-top:-3px;
}
.pinPadKey .delete img{
    width: 26px;   
}
.lastitem {
    margin-right: 0;
}
.uppercase {
    text-transform: uppercase;
}
.vkeyboard .space {
    clear: left;
    width: 100px;
}
.on {
    display: none;
}
.alpha{
    display: none;
}

.vkeyboard li:hover {
    position: relative;
    top: 1px;
    left: 1px;
    border-color: #e5e5e5;
    cursor: pointer;
}
.keyboardContainer{
    padding: 15px 0px;
    overflow: hidden;
    clear: both;
    position: absolute;
    /*top: 45px; */  
    margin:0px auto;
    background-color: #eee;
    -webkit-box-shadow: 0px -5px 8px -4px rgba(0,0,0,0.24);
    -moz-box-shadow: 0px -5px 8px -4px rgba(0,0,0,0.24);
    box-shadow: 0px -5px 8px -4px rgba(0,0,0,0.24);
    z-index: 9999;
    width: 320px;
    border:1px solid #dedede;
    left: 50%;
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}
.pinPadKey{
  width: 215px;
}
.pinPadKey .vkeyboard li{
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
}

/* SmallPhone (portrait and landscape) ----------- */
@media only screen and (min-device-width : 240px) and (max-device-width : 319px) {

.alphaNumKey{
  width:100%;
}
.vkeyboard li{
    width: 21px;
    height: 21px;
    line-height: 21px;
    font-size: 12px;
}
.vkeyboard .delete img {
    width: 13px;
    margin-top: -5px;
}
li.findKboard.symbol {
    width: 20px;
    height: 20px;
    line-height: 20px;
}




/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 320px) and (max-device-width: 667px) { 
.alphaNumKey{
  width:97%;
}
.vkeyboard li{
    width: 8.8vw;
    height: 5.5vh;
    line-height: 5.4vh;
    font-size: 1.2em;
}
.vkeyboard .delete img {
    width: 20px;
    margin-top: -5px;
}
li.findKboard.symbol {
    width: 7.9vw;
    height: 4.5vh;
    line-height: 4.5vh;
    font-size: 1.1em;
}
li.findKboard.alphaNumeric {
  width: 16vw;
} 
}



/* Virtual Keypad Ends */