@import url(http://fonts.googleapis.com/css?family=Roboto);

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: 'roboto', sans-serif;
  /* background: #f8f6ff; */
  background: #eee;
}
header{background: #fff none repeat scroll 0 0; border-bottom: 1px solid #2A2247; position: fixed; top: 0; width: 100%; z-index: 12;  }
header p{font-size: 14px; color: #2a2247; margin-bottom: 0;}
header .logo img{margin: 10px 0;}
.losp{line-height: 63px; transition: all 5s ease 5s; }
.content {
    padding: 70px 0;
    width: 100%;
}
.reg{
  float: left;
  width: 100%;
  background: #2A2247;
  color: #fff;
}
.logins {margin: 0 !important;}
.logins a{color: #2A2247;}
.ballog{position: relative; top: 12px; margin-right: 15px;}
.maintab h2 {color: #fff; font-size: 18px; font-weight: 400 !important;}
.bcum {float: right; font-size: 12px; padding-top: 10px;}
.flaticon-avatar::before, .flaticon-wallet::before {content: ""; font-size: 25px!important;}
.fak {float: left; margin-right: 9px; line-height: 65px;}
.vertical-center-row {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.vertical-alignment-helper {display:table; height: 100%; width: 100%;}
.vertical-align-center {display: table-cell;vertical-align: middle;}/* To center vertically */
.modal-content {width:inherit; height:inherit; margin: 0 auto; /* To center horizontally */}/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
.modal-header{background: #302C3E; color:white; border-radius: 4px;}
.modal-body p {color: #454545;}
.modal-footer .btn {padding: 6px 30px;}
.loginmodal-container .close {
    position: relative;
    right: 6px;
    top: 5px;
}
.panel-info > .panel-heading{ background-color: #2A2247;
    border: 0px !important;
    color: #31708f;  }
.panel{
  border: 0px !important;
  margin-bottom: 0px !important;
}
.panel-title{
  color: #fff;
  font-size: 18px;
}
.resend{
  margin-top: 15px;
}
.logins {margin: 0 !important;}
.logins a{color: #2A2247;}
.ballog{position: relative; top: 12px; margin-right: 15px;}
.maintab h2 {color: #fff; font-size: 18px; font-weight: 400 !important;}
.bcum {float: right; font-size: 12px; padding-top: 10px;}
.flaticon-avatar::before, .flaticon-wallet::before {content: ""; font-size: 25px!important;}
.fak {float: left; margin-right: 9px; line-height: 65px;}
.vertical-center-row {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.vertical-alignment-helper {display:table; height: 100%; width: 100%;}
.vertical-align-center {display: table-cell;vertical-align: middle;}/* To center vertically */
.modal-content {width:inherit; height:inherit; margin: 0 auto; /* To center horizontally */}/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
.modal-header{background: #302C3E; color:white; border-radius: 4px;}
.modal-body p {color: #454545;}
.modal-footer .btn {padding: 6px 30px;}

/****** LOGIN MODAL ******/
.loginmodal-container .close {
    position: relative;
    right: 10px;
    top: 5px;
}
.modleft{
  width: 220px;
  float:left;
  background: #2A2247;
  padding: 75px 42px;
  box-sizing: content-box;
  text-align: left;
  color: #fff;
}
.modright{
  float: left;
     padding: 0 47px;
     width: 411px;
}
.modleft > img {
   width: 47%;
}
.modleft > img {
    box-sizing: unset;
    padding: 0 55px 15px;
    width: 47%;
}
.modleft > ul{
 padding-left: 10px;
}
.loginmodal-container > h1{ margin-top: 0px;}

.loginmodal-container {max-width: 715px; width: 100% !important; background-color: #F7F7F7; margin: 0 auto; border-radius: 2px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); overflow: hidden; font-family: roboto; z-index: 9999;}
.loginmodal-container h1 {font-size: 1.3em; font-family: roboto;}
/*.modal-backdrop{z-index: 10!important;}*/
.loginmodal-container input[type=button] { width: 100%; display: block; margin-bottom: 10px; position: relative;}
.loginmodal-container input[type=text], input[type=password] { height: 44px; font-size: 16px; width: 100%; margin-bottom: 10px; -webkit-appearance: none; background: #fff; border: 1px solid #d9d9d9; border-top: 1px solid #c0c0c0; /* border-radius: 2px; */padding: 0 8px; box-sizing: border-box; -moz-box-sizing: border-box;}
.loginmodal-container input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}
/*.loginmodal-container input[type=text]:hover, input[type=password]:hover {border: 1px solid #b9b9b9;border-top: 1px solid #a0a0a0;-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);}
*/
.loginmodal { text-align: center; font-size: 14px; font-family: 'roboto', sans-serif; font-weight: 700; height: 36px; padding: 0 8px; /* border-radius: 3px; *//* -webkit-user-select: none;user-select: none; */}
.loginmodal-submit { /* border: 1px solid #3079ed; */ border: 0px;color: #fff;text-shadow: 0 1px rgba(0,0,0,0.1);background-color: #2A2247; padding: 12px 0px;  font-family: roboto;  font-size: 14px;  font-weight: 700;  border-radius: 4px;  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */}
.loginmodal-submit:hover { /* border: 1px solid #2f5bb7; */  border: 0px;  text-shadow: 0 1px rgba(0,0,0,0.3); background-color: #2A2247;/* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */}
.loginmodal-container a {  text-decoration: none;  color: #666;  font-weight: 400;  text-align: center;  display: inline-block;  opacity: 0.6;transition: opacity ease 0.5s;} 
.login-help{  font-size: 12px;}
.maintab {background: #2a2247;   padding-bottom: 20px;}
 .nav-pills > li > a{ font-size: 14px;  color: #c0bdc8; transition: all 0.3s ease 0s;}
 .nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover{  background: none;}
 .nav > li > a:focus, .nav > li > a:hover {background: none; text-decoration: none; color: #fff;}
.nav > li > a {display: block; padding: 6px 6px; position: relative;}
.maintab .nav > li.active::before  {border: 1px solid #e31f26; content: ""; display: block;
    margin: 0 auto;
    position: relative;
    top: 72px;
    width: 75px;
    transition: all 0.3s ease 0s;
    left: 0px;
    z-index: 1;
  }
  .maintab .nav > li::before  {
    border: 1px solid #2A2247;
    content: "";
    display: block;
    margin: 0 auto;
    position: relative;
    top: 72px;
    width: 75px;
    transition: all 0.3s ease 0s;
    left: -50px;
  }
.maintab .nav > li:hover::before  {
    border: 1px solid #e31f26;
    content: "";
    display: block;
    margin: 0 auto;
    position: relative;
    top: 72px;
    width: 75px;
    left: 0px;
    transition: all 0.3s ease 0s;
    z-index: 1;

}
.spa{
    margin-bottom: 10px;

}
.flaticon-smartphone::before, .flaticon-technology::before, .flaticon-technology-2::before, .flaticon-technology-6::before, .flaticon-telephone::before, .flaticon-invoice::before, .flaticon-faucet::before {
    content: "";
    font-size: 31px!important;;
}
.effect {
    background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 0 3px -1px;
    position: relative;
    top: -15px;
    padding: 15px;
    height: 317px;
    float: left;
    width: 100%;
}
.effect2 {
   background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 0 3px -1px;
    position: relative;
    top: -15px;
    min-height: 317px;
    float: left;
    width: 100%;
}
.effect3, .effect4 {
    background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 0 3px -1px;
    position: relative;
    overflow: hidden;
    height: 250px;
    z-index: 0;
}
.getapp{
  background: #40A6A8;
  height:250px;
  color: #fff;
}
.getapp > p {
    font-size: 31px;
    font-weight: 700;
    padding: 45px 45px 20px;
}
.getapp > img {
    width: 185px;
    margin-left: 42px;
}

#home > h4, .effect2 h4, #menu1 > h4, #menu2 > h4, #menu3 > h4, #menu4 > h4, #menu5 > h4, #menu6 > h4 {
    margin-top: 0;
    color: #454545;
    font-size: 16px;
}
hr{
  margin-top: 0!important;
  color: #dfdfdf!important;
}
#home > .radio-btn, #menu2 > .radio-btn {
    float: left;
    margin-right: 23px;
}
.form-ui {
    background-color: #fff;
    background-image: none;
    border: 0px solid #ccc!important;
    border-bottom: 1px solid #ccc!important;
    border-radius: 0px!important;
    box-shadow: none;
    color: #454545!important;
    display: block;
    font-size: 14px!important;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
    margin-top: 15px;
  }
.form-ui:focus {
    border-bottom: 1px solid #E61D24!important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) ;
    outline: 0 none;
}
.minfo{
  position: relative;
}
.bplan {
    position: absolute;
    right: 0;
    top: 56px;
    font-size: 15;
    color: #454545;
    cursor: pointer;
}
.bplan:hover{
  text-decoration: none;
  color: #2a2247;
}
.srh tbody,
.srh thead { display: block; }
.srh tbody{
  height: 100px;       
    overflow-y: auto;   
    overflow-x: hidden;
}
.srh thead{
   background: #F1EDFD;
}
.srhbtn {
  background: #2A2247!important;
  color: #fff;
}
.srhbtn .btn-default{
  background-color: none!important;
  border: 0px!important;
}
.srhbtn:hover, .srhbtn:focus{
   color: #fff!important;
}
.srh thead > tr > th{
    color: #2a2247;
    font-weight: 500!important;
 }  
.srh tbody > tr > td {
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 13px;
}
.searchuser p{
  margin: 0px;
  line-height: 34px;
}
.effect .ser, .effect2 .ser, .confirmation .ser  {
    background-color: #3b3451!important;
    border: 0px!important;
    color: #fff!important;
    height: 45px!important;
    margin-top: 17px!important;
    width: 100%!important;
    font-size: 14px;
    border-radius: 5px!important;
}
.btn-default:hover {
    background-color: #2A2247!important;
    border-color: none!important;
}
.btn-default:active,.login:active,.swal2-confirm:active{
    background-color: #E3DFB7!important;
    color: #2A2247!important;
}
/*  bhoechie tab */
div.bhoechie-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:0px solid #fff;
  background-clip: padding-box;
}
div.bhoechie-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.bhoechie-tab-menu div.list-group{
  border-right: 1px solid #eee;
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.bhoechie-tab-menu div.list-group>a .glyphicon,
div.bhoechie-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.bhoechie-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}
div.bhoechie-tab-menu div.list-group>a {
  border: 0 solid;
  /* background: #f1f1f1; */
  background: #EEE;
}

div.bhoechie-tab-menu div.list-group>a.active,
div.bhoechie-tab-menu div.list-group>a.active .glyphicon,
div.bhoechie-tab-menu div.list-group>a.active .fa{
  /* background-color: #f1edfd; */
  background-color: #FFF;
  background-image: #f1edfd;
  color: #454545;
  border: 0 solid;
}
div.bhoechie-tab-menu div.list-group>a.active:after{
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  
}
.bhoechie-tab{
  padding: 11px 15px 15px 15px;
}
div.bhoechie-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
}
div.bhoechie-tab div.bhoechie-tab-content:not(.active){
  display: none;
}
.effect2 .list-group-item.text-center {
    font-size: 13px;
}
.list-group-item.text-center> img {
    padding-bottom: 10px;
}
.effect2 .list-group-item{
  padding: 27px 0;
  margin: 1px 0;
}
.bhoechie-tab-content li a {
  color: #909090;
  padding: 0px;
}
.bhoechie-tab-content .nav-pills > li.active > a, 
.bhoechie-tab-content .nav-pills > li.active > a:focus,
.bhoechie-tab-content .nav-pills > li.active > a:hover {
  color: #604f9d!important;
}
 .bhoechie-tab-content .nav > li > a:focus,
 .bhoechie-tab-content .nav > li > a:hover {
    background: none;
    text-decoration: none;
    color: #454545; 
}
.mtab{
    background: #f1f1f1 none repeat scroll 0 0;
    border: 1px solid;
    border-radius: 100%;
    height: 55px;
    margin: 0 auto 5px;
    padding: 6px;
    width: 55px;
}
.sli {
    position: relative;
    top: -6px;
}
.slide-menu .flaticon-bank::before, .slide-menu .flaticon-invoice::before, .slide-menu .flaticon-smartphone::before{
   font-size: 22px !important;
}
.flaticon-wallet::before, .flaticon-bank::before, .flaticon-profile::before {
    content: "";
    font-size: 29px !important;
}
.navbar.navbar-default.navbar-fixed-top {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
}
/* Icon 1 */
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  cursor: pointer;
    height: 25px;
    left: 70px;
    margin: 0 auto;
    position: absolute;
    top: 25px;
   
    width: 30px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #2A2247;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon1 span:nth-child(1) {
  top: 0px;
}

#nav-icon1 span:nth-child(2) {
  top: 8px;
}
#nav-icon1 span:nth-child(3) {
  top: 16px;
}
#nav-icon1.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
  opacity: 0;
  left: -60px;
}
#nav-icon1.open span:nth-child(3) {
  top: 18px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
 /* The side navigation menu */
.toggle-menu {
    padding: 0;
}
/*passport*/
.effectp .table-responsive {
    padding: 15px;
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{
  border: 0px;
}
.effectp thead {
    background: #f1edfd none repeat scroll 0 0;
}
.effectp thead > tr > th{
    color: #2a2247;
    font-weight: 500!important;
}
.effectp tbody > tr > td{
    color: #909090;
    border-bottom: 1px solid #dedddd;
    padding: 15px 0; 
}
.effectp {
   background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: 0 0 3px -1px;
    float: left;
    position: relative;
    top: -15px;
    width: 100%;
}
/*****Confiramtion******/

.confcol{
  float: right;
}
.confirmation {
  background: #fff none repeat scroll 0 0;
  border-radius: 4px;
  box-shadow: 0 0 3px -1px;
  position: relative;
  top: -15px;
  padding: 15px;
  /* float: left; */
  
}
.conf{
  margin-top: 0px!important;
  padding: 0!important;
  height: 30px!important;  
}
.confirmation .sed{
  border: 0px!important;
  color: #fff!important;
  height: 45px!important;
  margin-top: 17px!important;
  width: 100%!important;
  font-size: 14px;
  border-radius: 5px!important;
}
/* .pad{
  padding: 15px;
  
} */


.footer::before {
    background-image: url("../images/back.png");
    content: "";
    display: table;
    height: 300px;
    left: 0;
    position: absolute;
    top: -300px;
    width: 100%;
    z-index: -1;
}
.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px;
  background-color: #241e20;
  color: #eee;
}

.footer .col-md-6 > ul {
    margin: 0;
    padding: 0;
}
.footer .col-md-6 li {
    list-style-type: none;
}
.footer .fa{
  font-size: 20px;
  margin-right: 15px;
  cursor:pointer;
}

/* Manage beneficiary Page css */
.benset{
	margin-bottom: 0px!important;
}
.benlist {
   border-bottom: 1px solid #ddd;
   padding: 10px 0;
   position: relative;
}
.benlist p {
    font-size: 13px;
    color: #454545;
    
}
.benset.bendetail{
	color: #6e6e6e;
}
.benlistview {
    background: #f8f6fe none repeat scroll 0 0;
    border: 1px solid #ddd;
    height: 454px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 10px;
}
.benbut {
    bottom: 7px;
    position: absolute;
    right: 0;
    z-index: 1;
}
.benfo {
    background: #eee none repeat scroll 0 0;
    border: 1px solid #ddd;
    font-size: 12px;
}
.benfo:hover{
	background: #ccc!important;
}
.pad {
    padding: 15px;
}
.benfo-delete {
    background: #c86464!important;
    border: 1px solid #ddd;
    color: #fff;
    font-size: 12px;
}
.benfo-delete:hover {
    background: #ae4545!important; color: #fff;
}


/* This css is used for the Channel's Home page table */
.table-fixed {
	width: 100%;
	background: #fff;
	padding:5px;
}
.table-fixed tbody {
  height: 200px;
  overflow-y: auto;
  width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
  display: block;
}
.table-fixed tbody td {
  float: left;
}
.table-fixed tbody tr {
  float: left;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.table-fixed thead tr th {
  float: left;
  background-color: #F1EDFD;
  border-color: #e67e22;
  font-weight: 500;
  color: #2A2247;
}
.dtpad{
	padding: 8px 0!important;
}


/* This css is used for the datepicker */
.searchfeild{
	padding: 10px;
	background: #e3dfb7;
	border-radius: 5px;
	/* border: 1px solid #eee; */
	float: left;
	width:100%;
}
.effectp tbody > tr > td{
	padding: 8px!important;
}
.searchfeild input {
   
   margin-left: 15px;
   padding-left: 8px;
   width: 100px;
}

/* This css is used for the manage subordinates page  */

.searchfeild{
	padding: 10px;
	/* background: #eee; */
	border-radius: 5px;
	float: left;
	width:100%;
}
.effectp table > tbody > tr > td{
	padding: 8px!important;
	cursor: pointer;
	color: #454545;
}
.searchfeild input {
   
   margin-left: 15px;
   padding-left: 8px;
   width: 100px;
}
.mysub{
	padding: 15px;
}
.btnstly{
	background: #F1EDFD; 
	color: #2A2247; 
	border: 1px solid #cdbff6; 
	
}
.btnstly:hover{
	background: #e6defc;
}
.highlight { 
	background-color: #fbefb6;  
}

/* This css is used for the UserAddEdit.jsp page */

.btnstly{
	background: #F1EDFD; 
	color: #2A2247; 
	border: 1px solid #cdbff6; 
}
.btnstly:hover{
	background: #e6defc;
}
.adj{
	position: absolute;
	bottom: 3px;
	top: 5px;
	right: 4px;
	padding: 2px 6px;
}
.adj1{
	position: absolute;
	right: 0;
	bottom: 100px;
}
.capfp{
	position: absolute;
	top: 8px;
	right: 15px;
}
.subimg {
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 150px;
    margin: 15px auto;
    overflow: hidden;
    width: 150px;
}
.figimg {
     position: absolute;
    right: 215px;
    text-align: center;
    top: 106px;
    width: 110px;
}
.figimg p {
    background: #454545 none repeat scroll 0 0!important;
    color: #fff!important;
    font-size: 12px!important;
    padding: 1px!important;
}

/* This css is used for the image upload model */ 
.imgdis {
    padding: 50px 0;
}
.imgshow {
    height: 150px;
    margin: 0 auto;
    width: 150px;
}

/* This css is used for the manage roles page in channel */
.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"] {
  opacity: 0; 
}
.checkbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; 
 }
 .checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c"; 
 }
 .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: #2A2247;
   border-color: #2A2247;
}
.checkbox-primary input[type="checkbox"]:checked + label::after {
   color: #fff; 
}

/* This css is used for the merchant home page */
.mericon {
    background: #f2effa none repeat scroll 0 0;
    border-radius: 15px;
    box-shadow: 0 1px 5px -2px;
    height: 100px;
    margin: 15px auto;
    padding: 15px;
    width: 100px;
}

.botrow{
   	background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    top:30px; 
    box-shadow: 0 1px 3px -2px; 
    position: relative;
    margin-bottom: 30px;
    float: left;
    width: 100%;
}
.faag{
   	color: #2a2247;
   	font-size: 50px;
}

/* This is for the efffect when user click on the button */

.btn.btn-default.ser:active{
	background:#ddd;
}


/* This is used for the left slider */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300);
:focus{outline:none}
body{font-family: 'Roboto', sans-serif;}
#menu{position:fixed; top:0; left:0; z-index:1040}
#menu .slide-menu{width:260px; position:absolute; top:98%; display:none; clear:both; background:#302c3e; -webkit-box-shadow:1px 1px 15px 1px rgba(0,0,0,0.5); -moz-box-shadow:1px 1px 15px 1px rgba(0,0,0,0.5); box-shadow:1px 1px 15px 1px rgba(0,0,0,0.5); overflow:auto; overflow-x:hidden}
#menu .slide-menu hr{border-top:1px solid #485767; margin:15px 10px}
#menu ul{padding:0; margin-left:0}
#menu ul li{padding:0;}
#menu ul li:before{display:none}
#menu ul li:hover a, #menu ul li a.active{background:#051a30; color:#fff;}
#menu ul li a{color:#bbbbbb; font-size:14px; text-decoration:none; display:block; padding:11px 10px; position:relative}
#menu ul li a i{width:22px; height:22px; display:inline-block; float:left; margin-right:10px}
#menu ul li a span.new{background:#f5393d; text-transform:uppercase; color:#fff; border-radius:3px; padding:1px 2px; font-size:11px; position:relative; display:inline-block; top:-7px; margin-left:8px}


/* This is for the animation of the left menu slider */
#menu a.menu, #menu a.menu-active{background:transparent; float:left; padding:16px; position:relative; width:50px; height:52px; margin:9px;}
#menu a.menu span, #menu a.menu-active span{display:block; position:absolute; top:25px; left:13px; right:13px; height:2px; background:#2A2247; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -o-transition-duration: 0.5s;}
#menu a.menu span:before, #menu a.menu span:after, #menu a.menu-active span:before, #menu a.menu-active span:after{position:absolute; display:block; left:0; width:100%; height:2px; background-color:#2A2247; content: ""; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -o-transition-duration: 0.5s;}
#menu a.menu span:before, #menu a.menu-active span:before{top:-8px}
#menu a.menu span:after, #menu a.menu-active span:after{bottom:-8px}

/* This is for the loader */
.loaderCustom {
    position: absolute;
    right: 40%;
    top: 24%;
    width: 17%;
}