@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

body{
font-family: 'Roboto Condensed', sans-serif !important;

}

a, a:hover, a:focus, a:active{
  color: inherit;
  text-decoration: none;
}

@media (max-width: 767px) {
  .xs-top-offset {
    margin-top:20px;
  }
  .xs-no-space{
    padding: 0px !important;
    margin-top: 20px !important;
  }
  .sales-history .sales-tab .tab {
    width: 73px !important;
    padding: 0px !important;
    font-size: 12px;
  }
}

@media (max-width: 991px) {
  .skeleton{
    padding: 20px 10% !important;
  }
  .skeleton-sub{
    padding: 20px 10% !important;
  }
}



.login{
  background: #fff;
  color: white;
  position: absolute;
  height: 100%;
  width: 100%;
}
.loginbtn {
  margin: 0px;
  line-height: 20px;
  color: #ededed;
}
.login span{
  color: #ededed;
}
.login .login-body{
  position: absolute;
  left: 50%;
  top: 20%;
  margin-left: -168px;
  height: 450px;
  border-radius: 6px;
  border: 1px solid #8dbee4;
  padding: 25px 25px;

}
.login .login-body .email{
  border-radius: 5px; 
}
.login .login-body .email span{
  position: relative;
  right: 35px; 
}
.login .login-body .email input{
  background: #fff;
  border-radius: 5px;
  height: 45px;
  width: 300px;
  padding: 0px 60px 0px 15px;
  font-size: 13px;
  font-weight: 200;
  margin-left: 8px;
  color: #000;
}
.login .forget p{
  font-size: 11px;
}
.login .proceed{
  position: absolute;
  bottom: 30px;
  padding: 0px 5px;
}
.loginbtn {
  background: #333;
  text-align: center;
  width: 305px;
  height: 44px;
  border-radius: 4px;
  line-height: 0px;
  font-size: 16px;
  border: 0;
}
.login .login-body .email input:focus{
  outline: none;
}
.login ::-webkit-input-placeholder {
  color: #ededed;
}
.login :-moz-placeholder {
  color: #ededed;
  opacity:  1;
}
.login ::-moz-placeholder {
  color: #ededed;
  opacity:  1;
}
.login :-ms-input-placeholder {
  color: #ededed;
}

.index-page .topBar
{
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 70px;
  color: beige;
  background: #3d7df1;
}


.menu-container{
  position: fixed;
  height: 100%;
  margin-top: 70px;
}
.menu-overlay{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(12, 12, 12, 0.57);
  top: 0;
  z-index: 9999;
}


.index-page .topBar span{
  font-size: 26px;
  line-height: 67px;
}
.index-page .topBar p{
  margin: 0px;
}
.index-page .open p:first-child{
  line-height: 15px;
  margin-top: 20px;
}
.index-page .open p:last-child{
  font-size: 12px;
}
.index-page .quick {
  width: 320px;
  height: 100%;
}
.index-page .quick p{
  line-height: 70px;
}


.index-page .sideMenu{
  position: fixed;
  left: -350px;
  z-index: 99999;
  top: 0px;
  height: 100%;
  transition: left 0.2s ease-in-out;
}

.index-page .sideMenu .widen {
  width: 150px;
}

.index-page .sideMenu .close-button{
  background: #FFF;
  border-radius: 50%;
  color: #959595;
  text-align: center;
  padding: 7px 0px;
  height: 50px;
  width: 50px;
  left: 15px;
}


.index-page .menu{
  width: 75px;
  height: 100%;
  padding-right: 0px;
  background: #e4e4e4;
  color: #212121;
}

.index-page .subMenu{
  width: 150px;
  height: 100%;
  background: white;
  padding-right: 0px;
  border-right: 2px solid #ececec;
}

.index-page .subMenu li a{
  height: 50px;
  line-height: 50px;
  padding: 0px;
  color: #1d1d1d;
  padding-left: 10px;
  padding-right: 0px;
}

.index-page .menu li a{
  height: 75px;
  font-size: 12px;
  text-align: center;
  line-height: 75px;
  padding: 0px;
  color: #808080;
}

.index-page .subMenu li a:hover{
  color: inherit;
  background: #f9f9f9;
}

.index-page .menu li a:hover{
  background: #fdfdfd;
}

.index-page .menu li, .index-page .subMenu li{
  margin-top: 0px;
}

.index-page .subMenu li.active a:hover{
  background: #f9f9f9;
}

.index-page .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{
  background: white;
  color: #2196f3;
}

.index-page .menu a, .index-page .subMenu a{
  border-radius: 0px !important;
}

.vertical-center{
  display: flex;
  align-items: center;
}

.home .bar .vertical-center:nth-of-type(2){
  justify-content: flex-end;
}

/*global control*/
.container-body{
  margin-top: 100px;
}
.skeleton{
  padding: 20px 25%;
}
.sell.skeleton-sub{
  padding-left: 260px;
  padding-right: 310px;
}
.full-height{
  height: 100%;
}
.top-offset{
  margin-top: 20px !important;
}
.no-space{
  padding: 0;
  margin: 0;
}
.no-right-pad{
  padding-right: 0px;
}
.no-left-pad{
  padding-left: 0px;
}
.search-bar .input-group-addon{
    background: white !important; 
}
.search-bar .form-control{
  border-right:0; 
  box-shadow:0 0 0; 
  border-color:#ccc;
}
.search-bar button{
    border:0;
    background:transparent;
}
.margin-auto{
  float: none;
  margin: 0 auto;
}
/*global control end*/


.home .bar{
  height: 45px;
  background: #2196f3;
  border-radius: 3px;
}

.home .bar button{
  height: 30px;
  line-height: 18px;
  border: none;
  box-shadow: 0px 1px 1px #5a5a5a;
  color: #2196f3;
  width: 110px;
  font-weight: 500;
}

.home .content{
  color: white;
}

.home .content .head{
  height: 40px;
  line-height: 40px;
  background: #4dabf5;
  padding: 0px 10px;
  border-radius: 4px 4px 0px 0px;
}

.home .content .body .title{
  height: 33px;
  line-height: 33px;
  background: #90caf9;
  padding: 0px 2px;
  font-size: 12px;
}

.home .content .body .title span{
  padding: 0px 5px;
  border-right: 1px solid;
}

.home .content .body .title span:last-child{
  border: none;
}


.home .content .body .details{
  border-radius: 0px 0px 4px 4px;
  border: 1px solid #bdbdbd;
  border-top: none;
  color: #0066cc;
  padding-top: 10px;
}


/*sell page*/



.add-sale{
  position: absolute;
  z-index: 99999;
  right: 0;
  height: 100%;
  padding-top: 70px;
  width: 280px;
}

.add-sale .cart{
  color: #646464;
}

.sell .sale-content p{
  margin: 0px;
  line-height: 45px;
}

.add-sale .cart p{
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 11px;
  padding-left: 2px;
  text-align: justify;
}

.add-sale-container{
  background: #efefef;
  height: 100%;
  padding: 5px 30px 0px 30px;
}

.add-sale-container .title h4{
  color: #2196F3;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 5px;
}

.add-sale-container .name{
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  height: 35px;
  line-height: 35px;
  padding: 0px 5px;
  background: #fbfbfb;
}

.add-sale .cart-data, .add-sale .sale-note {
  height: 375px;
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  padding: 15px;
}

.add-sale .sale-note{
  height: 70px !important;
  padding: 10px !important;
}

.add-sale .sale-note p{
  margin-top: 0px;
}

.add-sale .total{
  background: white;
  padding: 0;
  margin: 12px -30px 0px;
  padding: 10px 10px 8px;
}

.add-sale .total p{
  font-size: 12px;
  margin-bottom: 9px;
}

.add-sale .total hr{
  margin: 1px -10px 10px;
}

.add-sale .proceed{
  height: 37px;
  background: #30ae3c;
  color: white;
  padding: 8px 11px;
  margin: 8px -15px;
  line-height: 19px;
  box-shadow: 1px 1px 5px #848484;
}

.pay-content .proceed{
  height: 37px;
  background: #30ae3c;
  color: white;
  padding: 8px 11px;
  margin: 8px 0px;
  line-height: 19px;
  box-shadow: 1px 1px 5px #848484;
}

.pay-content .proceed.add{
  height: 30px;
  box-shadow: none;
  line-height: 14px;
  width: 80px;
  float: none;
  margin: 0 auto;
  background: #2196f3;
  margin-top: 5px;
}


.sale-pay-container{
  color: white;
  background: #2196F3; 
  box-shadow: 0px 0px 3px #6b6b6b;
}
.sale-pay-container .head{
  padding-top: 14px;
}
.sale-pay-container .head .title{
  text-align: center;
}
.sale-pay-container .sale, .sale-pay-container .pay{
  padding: 10px 15px 20px;
  color: #717171;
}
.sale-pay-container .sale-content, .sale-pay-container .pay-content{
  background: white;
  height: 410px;
  padding: 20px;
  border-radius: 2px;
  color: #6f6f6f;
}
.sale-pay-container .pay-content p{
  margin: 0px;
  line-height: 30px;
}
.sale-pay-container .pay-content select{
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  color: #858585;
  height: 35px;
  padding: 0px 5px;
}
.sale-pay-container .pay-content input{
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  color: #858585;
  height: 35px;
  float: right;
  padding: 0px 0px 0px 5px;
}
.sale-pay-container .pay-content .picker-2{
  margin-top: 10px;
}
.sale-pay-container .pay-content .input input{
  margin: 0px;
  margin-top: 10px;
}
.sale-pay-content .wrapper{
  height: 268px;
  overflow-x: hidden;
  overflow-y: auto;
}
.sale-pay-content .calculation{
  background: #f5f5f5;
  padding: 5px 15px;
  border-radius: 0px 0px 3px 3px;
  border: none;
  margin: 10px -20px;
  height: 112px;
}
.sale-pay-content .calculation .row:last-child{
  border-top: 1px solid #c0c0c0;
}
.sale-pay-content .calculation p{
  margin: 0px;
  line-height: 24px;
}

.product-container{
  height: 80px;
  width: 120px;
  color: white;
  text-align: center;
  padding: 0px 10px;
  margin-top: 10px;
}
.product-container .image{
  height: 65%;
  background: #EFEFEF;
  border-radius: 3px 3px 0px 0px;
}
.product-container .title{
  height: 35%;
  background: #2196F3;
  line-height: 30px;
  border-radius: 0px 0px 3px 3px;
  font-size: 12px;
}

.open-close .payment .row{
  height: 43px;
}

.open-close .payment .row p{
  margin: 0px;
  line-height: 43px;

}


.open-close .payment .row:nth-child(odd){
  background: #e4e4e4;
}

.open-close .payment .row:nth-child(even){
  background: #f5f5f5;
}

.open-close .register-notes .content{
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  color: #646464;
  padding: 10px;
  font-size: 12px;
  text-align: justify;
}

.open-close .proceed{
  height: 37px;
  background: #30ae3c;
  color: white;
  box-shadow: 1px 1px 5px #848484;
  text-align: center;
}

.open-close .proceed p{
  margin: 0px;
  line-height: 37px;
}

.open-close .proceed{
  height: 37px;
  background: #30ae3c;
  color: white;
  box-shadow: 1px 1px 5px #848484;
  text-align: center;
}

.open-close .proceed:hover, .add-sale .proceed:hover{
  background: #00b500;
  cursor: pointer;
}

.open-close .proceed:active, .add-sale .proceed:active{
  background: #268a26;
  user-select: none;
}


.sales-history{
  padding-right: 100px !important;
}

.sales-history .sales-tab{
  border-bottom: 2px solid #2196f3;
}

.sales-history .sales-tab .tab{
  width: 154px;
  color: #797979;
  text-align: center;
}

.sales-history .sales-tab .tab.active{
  background: #2196f3;
  color: white;
}

.sales-history .sales-tab .tab p{
  margin: 0px;
  line-height: 35px;
}


.sales-history .sales-picker{
  width: 130px;
}

.sales-history .sales-picker select{
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  color: #858585;
  height: 35px;
  width: 120px;
  padding: 0px 5px;
}

.sales-history .search{
  width: 45px;
  height: 35px;
  background: #30ae3c;
  color: white;
  border-radius: 2px;
  text-align: center;
  line-height: 35px;
  margin-top: 29px;
}
.sales-history .sale-details{
  background: #deeffd;
  padding: 3px 0px;
}
.sales-history .sale-details .search p{
  color: white;
}
.sales-history .sale-details:first-child p{
  color: #6f6f6f;
}
.sales-history .sale-details p{
  margin: 0px;
  line-height: 35px;
  color: #505050;
}
.sales-history .sale-details .search{
  margin-top: 0px;
  background: #2196f3;
}
.sales-history .sale-details .search p{
  color: white;
}
.sales-history .sale-details .search.message{
  background: white;
}
.sales-history .sale-details .search.message p{
  color: #2196f3 !important;
}
.sales-history .sale-details hr{
  border-top: 1px solid #c0c0c0;
  margin: 0px -55px 0px 0px;
}
.sales-history .sale-details .amount hr{
  border: none;
}
.sales-history .sale-details .note{
  font-size: 11px;
  text-align: justify;
  margin: 0px;
  line-height: 15px;
  padding-top: 5px;
  padding-right: 10px;
}
.sales-history .single-sale-details{
  border-left: 2px solid #2196F3;
}
.sales-history .single-sale-details .sale-details-1 hr{
  margin-top: 15px;
  margin-left: -15px;
}
.sales-history .single-sale-details .sale-details-1 p{
  margin: 0px;
  line-height: 20px;
}
.sales-history .single-sale-details .sale-details-1 .search{
  background: none;
  height: 0px;
  padding: 0px;
  width: 0px;
}
.sales-history .single-sale-details .sale-details-1 .search p{
  width: 45px;
  height: 40px;
  background: #3d7df1;
  border-radius: 3px;
  margin-top: -20px;
  position: relative;
  top: 20px;
  line-height: 40px;
}

.exceed{
  margin: -15px -15px;
  padding: 2px 7px;
  border-bottom: 1px solid #c0c0c0;
}

.cash-mgmt p{
  margin: 0px;
  line-height: 50px;
}
.cash-mgmt .proceed{
  width: 122px;
  line-height: 35px;
  float: right;
}
.cash-mgmt .proceed-2{
  background: #e6643c;
  margin-left: 10px;
}
.cash-mgmt .proceed-2:hover{
  background: #f9734a;
}
.cash-mgmt .proceed-2:active{
  background: #c55b3b;
}


.retail-dash{
  padding-right: 100px !important;
}
.retail-dash .retail-card{
  width: 275px;
  height: 200px;
  margin-top: 37px;
  padding-right: 0px;
}
.retail-dash .retail-card p{
  margin: 0px;
  line-height: 20px;
}
.retail-dash .retail-card .card-container{
  color: gray;
  box-shadow: 0px 0px 3px #adadad;
  padding: 10px 10px 0px 15px;
}
.retail-dash .retail-card .card-container .row:first-child p{
  font-size: 24px;
  padding-bottom: 15px;
  margin-top: 5px;
}
.retail-dash .retail-card .card-container .amount p{
  color: #bbbbbb;
}
.retail-dash .retail-card .card-container .amount p:first-child{
  font-size: 34px;
  color: inherit;
  margin-right: 10px;
  float: left;
  margin-top: 8px;
}


.chart{
  display: block;
  width: 220px;
  height: 110px;
  padding-right: 10px;
  padding-top: 10px;
}

.customers p{
  margin: 0px;
}

.customers .sale-pay-container{
  box-shadow: none;
  background: inherit;
  color: inherit;
}

.customers .pay-content {
  padding: 0px;
  height: inherit;
}
.customers .sale-pay-content.input input{
  margin: 0px;
  float: inherit;
  width: 150px;
}

.customers .search{
  margin-top: 20px;
}



.customers .picker select{
  background: #fbfbfb;
  border-radius: 3px;
  border: 1px solid #d0d0d0;
  color: #858585;
  height: 35px;
  padding: 0px 5px;
  width: 150px;
}

.customers .customer-details{
  color: #6f6f6f;
}

.customers .customer-details hr{
  margin: 10px 15px;
} 

.customers .bar{
  margin: 0px 15px;
}

.groups .sale-pay-content.input input{
  width: 100%;
} 

.groups .pay-content{
  padding-right: 10px;
}

.navbar-default {
	background-color: #f8f8f8;
	border-color: #e7e7e7;
	width: 89px;
}

.navbar-nav > li {
	float: none;
}

#overall_sale {
	width: 28%;
	float: right;
	margin-left: .1em;
	padding-bottom: 1em;
	padding-top: 1em;
	font-size: 13px;
	text-align: center;
}

#add_item_form .panel-body, #mode_form .panel-body {
	padding: .7em;
	margin: 0;
	background-color: #fff;
    border: 0;
}

.panel-default {
    border: 0;
}

.mainarea {
	padding-top: 70px;
}


.topbar {
	color: #eee;
	font-size: 12px;
	background: #2196f3;
	padding: 10px;
}


.thelogo {
	float: left;
        padding-left: 37px;
        bottom: 7px;
        position: relative;
}



.navbar-right {
	position: relative;
}

.navbar-right.topheader {
	bottom: 26px;
}

.col-md-1.sidenav {
	padding-top: 25px;
}


.sk-folding-cube {
  margin: 20px auto;
  width: 40px;
  height: 40px;
  color: #fff;
  position: relative;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}


.preloader {
	position: fixed;
	width: 100%;
	background-color: #2196f3;
	z-index: 9999;
	height: 100%;
	padding-top: 20%;
    color: #fff !important;
}


.btn-primary {
	color: #fff;
	background-color: #333;
	border-color: #003366;
}